/* ==========================================================================
   HEALTH PRO STUDIO — fondamenta visive
   Palette Health Pro, caratteri Manrope + Bricolage Grotesque.
   Qui dentro stanno i colori, i caratteri e i pezzi che tornano ovunque.
   Il guscio (barra laterale e testata) sta in telaio.css.
   ========================================================================== */

:root{
  /* Palette Health Pro */
  --deep:#003558;      /* barra laterale, fondi scuri */
  --mid:#015D85;       /* superfici scure secondarie */
  --cyan:#018CB0;      /* i dati: imbuto, grafici */
  --action:#6C4CF0;    /* le azioni: bottoni, voce di menu attiva */
  --ivory:#F4F5F1;     /* fondo pagina */

  /* Neutri con una punta di blu dentro, non grigi puri */
  --card:#FFFFFF;
  --line:#E0E6E9;
  --line-soft:#EDF1F2;
  --ink:#10242F;
  --muted:#657C87;
  --faint:#9AADB6;

  /* Testo sul fondo scuro */
  --on-deep:#EAF2F6;
  --on-deep-dim:#8FAEC2;

  /* Stati. Separati dall'accento apposta: dicono come va una cosa,
     non che ci si clicca sopra. */
  --good:#1E7A5F;   --good-bg:#E6F2ED;
  --warn:#B06D16;   --warn-bg:#FBF0DF;
  --bad:#BE4A3F;    --bad-bg:#FAE9E7;

  /* Ogni studio puo' avere il suo accento: lo studio.js lo sovrascrive
     leggendolo dal database. Se non c'e', resta il viola. */
  --accent:var(--action);

  --f-ui:'Manrope', system-ui, -apple-system, sans-serif;
  --f-num:'Bricolage Grotesque', system-ui, sans-serif;

  --r:14px;
  --r-sm:9px;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--ivory); color:var(--ink);
  font-family:var(--f-ui); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--mid)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* --------------------------------------------------------------------------
   NUMERI
   .num      numeri grandi e isolati: Bricolage, quello che si fa guardare
   .num-col  numeri in colonna da confrontare a occhio: Manrope, perche'
             Bricolage non garantisce cifre tutte della stessa larghezza
             e in colonna i decimali ballerebbero
   -------------------------------------------------------------------------- */
.num{font-family:var(--f-num); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.num-col{font-family:var(--f-ui); font-weight:700; font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   TITOLI GRANDI
   Bricolage e' un carattere da insegna: grande si fa guardare, piccolo
   diventa pesante e stretto. Qui vale la soglia dei 16 pixel: sopra lo usa,
   sotto resta Manrope, che a quelle dimensioni si legge meglio.
   Niente Bricolage dentro tabelle o elenchi fitti, anche se grandi: li' la
   personalita' del carattere diventa rumore.
   -------------------------------------------------------------------------- */
.titolone{font-family:var(--f-num); font-weight:700; letter-spacing:-.025em}

/* -------------------------------------------------------------------------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.card-head{display:flex; align-items:baseline; gap:12px; margin-bottom:4px}
.card-title{font-size:15px; font-weight:700}
.card-note{font-size:12.5px; color:var(--muted); margin-left:auto}

.btn{background:var(--accent); color:#fff; border:0; border-radius:999px; padding:10px 18px; font-size:13.5px; font-weight:600; transition:.15s}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55; cursor:default; filter:none}
.btn-neutro{background:var(--card); color:var(--ink); border:1px solid var(--line)}
.btn-neutro:hover{border-color:var(--muted); filter:none}
.btn-largo{width:100%; padding:12px}

.campo{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.campo label{font-size:12.5px; font-weight:600; color:var(--muted)}
.campo input, .campo select, .campo textarea{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px; font-size:14.5px; width:100%;
}
.campo input:focus{border-color:var(--accent); outline:none}

.tag{font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:999px; white-space:nowrap; display:inline-block}
.tag.ok{background:var(--good-bg); color:var(--good)}
.tag.todo{background:var(--warn-bg); color:var(--warn)}
.tag.risk{background:var(--bad-bg); color:var(--bad)}
.tag.neutro{background:var(--ivory); color:var(--muted); border:1px solid var(--line)}

.avviso{border-radius:var(--r-sm); padding:12px 15px; font-size:13.5px; line-height:1.5}
.avviso.errore{background:var(--bad-bg); color:var(--bad)}
.avviso.buono{background:var(--good-bg); color:var(--good)}
.avviso.attesa{background:var(--warn-bg); color:var(--warn)}
.avviso:empty{display:none}

.vuoto{text-align:center; padding:48px 20px; color:var(--muted)}
.vuoto h3{font-family:var(--f-num); font-weight:700; letter-spacing:-.02em;
  font-size:16.5px; color:var(--ink); margin:0 0 7px}
.vuoto p{font-size:13.5px; margin:0 auto; max-width:46ch; line-height:1.6}

/* Scheletro mostrato mentre i dati arrivano: meglio di una pagina bianca,
   perche' si vede subito dove comparira' cosa. */
.scheletro{background:linear-gradient(90deg,var(--line-soft) 25%,#F6F9FA 50%,var(--line-soft) 75%);
  background-size:200% 100%; animation:scorre 1.3s infinite; border-radius:7px; color:transparent!important}
@keyframes scorre{0%{background-position:200% 0}100%{background-position:-200% 0}}

.nascosto{display:none!important}

/* --------------------------------------------------------------------------
   FINESTRE SOVRAPPOSTE
   Stavano solo nell agenda, ma servono anche alla scheda del contatto.
   -------------------------------------------------------------------------- */
.modale{position:fixed; inset:0; background:rgba(2,24,38,.45); z-index:50; display:none; align-items:center; justify-content:center; padding:20px}
.modale.aperta{display:flex}
.modale-dentro{background:var(--card); border-radius:var(--r); padding:24px; width:100%; max-width:420px; max-height:90vh; overflow-y:auto}
.modale-dentro h3{font-family:var(--f-num); font-weight:700; letter-spacing:-.02em;
  font-size:19px; margin:0 0 4px}
.modale-dentro .guida{font-size:13px; color:var(--muted); margin:0 0 18px}
.modale-piede{display:flex; gap:10px; margin-top:20px}
.modale-piede .btn{flex:1}


/* --------------------------------------------------------------------------
   LA RIGA SOTTO UNA CASELLA
   L'etichetta DENTRO un <label> dice cosa succede se la spunti, e non cambia
   mai: e' una promessa, non un termometro. Quello che cambia (acceso fa
   questo, spento fa quest'altro) sta qui sotto, dove non si puo' scambiare
   per un'istruzione.
   Il motivo: con l'etichetta variabile, una casella spenta accanto a "Gliela
   chiedi tu su WhatsApp" si legge come "spuntala per mandarla su WhatsApp",
   cioe' esattamente il contrario di quello che fa.
   -------------------------------------------------------------------------- */
.sotto-spunta{font-size:12.5px; color:var(--muted); line-height:1.5;
  margin:0 0 0 28px; padding-top:2px}
.sotto-spunta:empty{display:none}