/* App cliente — mobile-first, costruita sui token del design system PDF. I colori, i font e la geometria vengono da tokens.css (generato da scripts/genera_tokens.py): qui dentro non si scrive un colore di brand. Il tema lo scelgono gli attributi data-yc-* sul , messi da app.js con quello che /api/me calcola lato server. Le sole tinte scritte qui sono quelle di STATO (su/giù/fermo, semafori): non sono brand, sono segnali, e il PDF non ne ha. */ :root { --stato-su: #2D7A3A; --stato-su-fondo: #E3F1E5; --stato-giu: #A32020; --stato-giu-fondo: #FBE9E7; --stato-attenzione: #8A5A00; --stato-attenzione-fondo: #FFF3D6; --raggio: var(--yc-card-radius); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--yc-panel); color: var(--yc-ink); font-family: var(--yc-font-sans); font-size: var(--yc-fs-body); line-height: 1.45; font-variant-numeric: tabular-nums; padding-bottom: env(safe-area-inset-bottom); } h1, h2, h3 { margin: 0; line-height: 1.2; } button, input, textarea, select { font: inherit; color: inherit; } a { color: var(--yc-accent-dark); } [hidden] { display: none !important; } .mono { font-family: var(--yc-font-mono); } .tenue { color: var(--yc-muted); } .piccolo { font-size: var(--yc-fs-meta); } /* --- Testata: monogramma + regola ink, come l'header del PDF ------------- */ .testata { background: var(--yc-paper); border-bottom: 2.5px solid var(--yc-ink); padding: 12px 16px 10px; padding-top: calc(12px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10; } .monogramma { flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--yc-accent); color: var(--yc-paper); font-weight: 800; font-size: .95rem; letter-spacing: -.02em; display: grid; place-items: center; text-decoration: none; } .monogramma.indietro { font-size: 1.6rem; font-weight: 500; line-height: 1; padding-bottom: 3px; } .testata .titoli { flex: 1; min-width: 0; } .testata h1 { font-size: 1.15rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .testata .sotto { font-family: var(--yc-font-mono); font-size: .78rem; color: var(--yc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .testata .azione { background: none; border: 0; color: var(--yc-muted); font-size: .85rem; padding: 6px; cursor: pointer; } .contenitore { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; } /* --- Bottoni e campi ----------------------------------------------------- */ .bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--yc-accent); color: var(--yc-paper); font-weight: 700; text-decoration: none; cursor: pointer; } .bottone:disabled { opacity: .5; cursor: default; } .bottone.largo { width: 100%; } .bottone.secondario { background: var(--yc-card); color: var(--yc-accent-dark); border: 1.5px solid var(--yc-border); } .bottone.piccolo { min-height: 36px; padding: 0 12px; font-size: .9rem; border-radius: 9px; } input[type="text"], input[type="number"], input[type="password"], textarea { width: 100%; border: 1.5px solid var(--yc-border); border-radius: 10px; background: var(--yc-card); padding: 12px; font-size: 1rem; } input:focus, textarea:focus, button:focus-visible { outline: 3px solid var(--yc-accent-light); outline-offset: 1px; } label { display: block; font-size: .85rem; color: var(--yc-muted); margin-bottom: 4px; } .errore { background: var(--stato-giu-fondo); color: var(--stato-giu); border-radius: 10px; padding: 10px 12px; margin: 12px 0; } .avviso { background: var(--yc-tint); color: var(--yc-accent-dark); border-radius: 10px; padding: 10px 12px; margin: 12px 0; } .caricamento { color: var(--yc-muted); padding: 24px 0; text-align: center; } /* --- Login ---------------------------------------------------------------- */ .pagina-login { max-width: 380px; margin: 0 auto; padding: 14vh 20px 40px; } .pagina-login .monogramma { width: 56px; height: 56px; font-size: 1.4rem; border-radius: 14px; margin-bottom: 18px; } .pagina-login h1 { font-size: var(--yc-fs-day); font-weight: 800; margin-bottom: 4px; } .pagina-login p { color: var(--yc-muted); margin: 0 0 24px; } .pagina-login input { font-family: var(--yc-font-mono); font-size: 1.4rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; margin-bottom: 14px; } /* --- Panoramica: settimane e sedute --------------------------------------- */ .programma-titolo { font-size: var(--yc-fs-day); font-weight: 800; margin: 4px 0 2px; } .programma-date { font-family: var(--yc-font-mono); font-size: .8rem; color: var(--yc-muted); margin-bottom: 14px; } .settimane { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 6px; scrollbar-width: none; } .settimane::-webkit-scrollbar { display: none; } .chip-settimana { flex: none; min-width: 64px; border: 1.5px solid var(--yc-border); border-radius: 12px; background: var(--yc-card); padding: 8px 10px; text-align: left; cursor: pointer; } .chip-settimana .n { display: block; font-weight: 800; } .chip-settimana .stato { display: block; font-family: var(--yc-font-mono); font-size: .72rem; color: var(--yc-muted); } .chip-settimana.corrente { border-color: var(--yc-accent); } .chip-settimana.scelta { background: var(--yc-accent); border-color: var(--yc-accent); color: var(--yc-paper); } .chip-settimana.scelta .stato { color: var(--yc-paper); opacity: .85; } .chip-settimana.incompleta .stato { color: var(--stato-attenzione); } .chip-settimana.scelta.incompleta .stato { color: var(--yc-paper); } .banda { display: flex; align-items: center; gap: 8px; min-height: var(--yc-band-h); margin: 18px 0 var(--yc-band-gap); padding: 0 12px; border-radius: 8px; font-family: var(--yc-font-mono); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .banda.primaria { background: var(--yc-accent); color: var(--yc-paper); } .banda.secondaria { background: var(--yc-tint); color: var(--yc-accent-dark); } .banda.tenue { background: transparent; color: var(--yc-muted); border-bottom: 1px solid var(--yc-hairline); border-radius: 0; padding: 0 2px; } .banda .riempi { flex: 1; } .riassunto { font-family: var(--yc-font-mono); font-size: .85rem; color: var(--yc-muted); margin: 0 0 10px; } .seduta { display: flex; align-items: center; gap: 14px; background: var(--yc-card); border: 1px solid var(--yc-border); border-radius: var(--raggio); padding: 14px; margin-bottom: var(--yc-card-gap); color: inherit; text-decoration: none; } .seduta .codice { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--yc-tint); color: var(--yc-accent-dark); font-weight: 800; font-size: 1.2rem; } .seduta.fatta .codice { background: var(--yc-accent); color: var(--yc-paper); } .seduta .testo { flex: 1; min-width: 0; } .seduta .nome { font-weight: 700; } .seduta .stato { font-family: var(--yc-font-mono); font-size: .78rem; color: var(--yc-muted); } .seduta .freccia { color: var(--yc-faint); font-size: 1.3rem; } .completato { background: var(--yc-card); border: 1.5px solid var(--yc-accent); border-radius: var(--raggio); padding: 18px; margin: 16px 0; text-align: center; } .completato h2 { font-size: 1.3rem; margin-bottom: 6px; } .completato p { color: var(--yc-muted); margin: 0 0 14px; } .completato .bottone { width: 100%; margin-top: 8px; } /* --- Seduta: card esercizio, pillole, sequenze ---------------------------- */ .card { position: relative; background: var(--yc-card); border: 1px solid var(--yc-border); border-radius: var(--raggio); padding: var(--yc-card-pad) 14px; margin-bottom: var(--yc-card-gap); } .card.principale { padding-left: calc(14px + var(--yc-bar-w)); } .card.principale::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--yc-bar-w); background: var(--yc-accent); border-radius: var(--raggio) 0 0 var(--raggio); } .card.saltato { opacity: .55; } .card .intestazione { display: flex; align-items: flex-start; gap: 8px; } .card .nome-esercizio { flex: 1; font-weight: 700; font-size: var(--yc-fs-name); line-height: 1.25; } .card.principale .nome-esercizio { font-size: var(--yc-fs-name-main); } .card .video { flex: none; text-decoration: none; font-size: .8rem; font-family: var(--yc-font-mono); color: var(--yc-accent-dark); border: 1px solid var(--yc-border); border-radius: 8px; padding: 3px 8px; } .card .cue { color: var(--yc-muted); font-size: .92rem; margin: 4px 0 0; } .card .prescrizione { font-size: .92rem; margin: 6px 0 0; white-space: pre-line; } .pillole { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--yc-border); border-radius: 8px; font-family: var(--yc-font-mono); font-size: .82rem; white-space: nowrap; background: var(--yc-panel); } .pill .etichetta { color: var(--yc-muted); margin-right: 5px; font-size: .72rem; text-transform: uppercase; } .pill.carico { background: var(--yc-accent); border-color: var(--yc-accent); color: var(--yc-paper); } .pill.carico .etichetta { color: var(--yc-paper); opacity: .8; } .registra { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .campo-kg { display: flex; align-items: center; border: 1.5px solid var(--yc-accent); border-radius: 10px; overflow: hidden; background: var(--yc-card); } .campo-kg input { width: 88px; border: 0; border-radius: 0; padding: 8px 6px 8px 10px; font-family: var(--yc-font-mono); font-size: 1.1rem; text-align: right; } .campo-kg span { padding: 0 10px 0 2px; font-family: var(--yc-font-mono); color: var(--yc-muted); } .badge { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 8px; border-radius: 8px; font-family: var(--yc-font-mono); font-size: .8rem; background: var(--yc-hairline); color: var(--yc-muted); } .badge.su { background: var(--stato-su-fondo); color: var(--stato-su); } .badge.giu { background: var(--stato-giu-fondo); color: var(--stato-giu); } .badge.salvato { background: var(--yc-tint); color: var(--yc-accent-dark); } .azioni-esercizio { display: flex; gap: 14px; margin-top: 8px; } .link-azione { background: none; border: 0; padding: 4px 0; color: var(--yc-accent-dark); font-size: .85rem; cursor: pointer; text-decoration: underline; } .nota-esercizio { margin-top: 8px; } .nota-esercizio textarea { min-height: 70px; resize: vertical; } .nota-esercizio .riga { display: flex; gap: 8px; margin-top: 6px; align-items: center; } .note-passate { margin: 6px 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--yc-muted); } .sequenza { border: 1.5px solid var(--yc-border); border-radius: var(--raggio); margin-bottom: var(--yc-card-gap); padding: 8px 8px 2px calc(8px + var(--yc-spine-w)); position: relative; background: var(--yc-panel); } .sequenza::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--yc-spine-w); background: var(--yc-accent-light); border-radius: var(--raggio) 0 0 var(--raggio); } .sequenza .testa { font-family: var(--yc-font-mono); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--yc-accent-dark); margin: 2px 4px 6px; } .sequenza .formato { font-family: var(--yc-font-mono); font-size: .8rem; margin: -2px 4px 6px; } .sequenza .nota { font-size: .85rem; color: var(--yc-muted); margin: 0 4px 8px; white-space: pre-line; } .sequenza .card { margin-bottom: 6px; } .fondo-seduta { margin-top: 24px; display: grid; gap: 10px; } /* --- Wellness e dolore: scale a bottoni ----------------------------------- */ .domanda { background: var(--yc-card); border: 1px solid var(--yc-border); border-radius: var(--raggio); padding: 14px; margin-bottom: 10px; } .domanda .titolo { font-weight: 700; margin-bottom: 2px; } .domanda .estremi { display: flex; justify-content: space-between; font-size: .75rem; color: var(--yc-muted); margin-top: 6px; } .scala { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; } .scala.undici { grid-template-columns: repeat(11, 1fr); gap: 4px; } .scala button { min-height: 44px; border: 1.5px solid var(--yc-border); border-radius: 10px; background: var(--yc-card); font-family: var(--yc-font-mono); font-weight: 600; cursor: pointer; padding: 0; } .scala.undici button { min-height: 40px; font-size: .85rem; } .scala button[aria-pressed="true"] { background: var(--yc-accent); border-color: var(--yc-accent); color: var(--yc-paper); } /* --- Recap e storico ------------------------------------------------------ */ .recap-voce { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--yc-hairline); } .recap-voce .nome { flex: 1; font-weight: 600; } .recap-voce .kg { font-family: var(--yc-font-mono); } .grafico-box { background: var(--yc-card); border: 1px solid var(--yc-border); border-radius: var(--raggio); padding: 12px 8px; margin: 12px 0; } .grafico { display: block; max-width: 100%; } .tabella-storico { width: 100%; border-collapse: collapse; font-size: .9rem; } .tabella-storico th, .tabella-storico td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--yc-hairline); } .tabella-storico th { font-family: var(--yc-font-mono); font-size: .72rem; text-transform: uppercase; color: var(--yc-muted); font-weight: 500; } .tabella-storico td.num { font-family: var(--yc-font-mono); text-align: right; }