/* Fabbisogno — stile. Font di sistema (nessuna richiesta esterna), fondo
   caldo chiaro, schede bianche, verde bosco come accento, ambra per i limiti.
   Tema scuro dal sistema. Cifre tabellari dove ci sono numeri. */

:root{
  --bg:#F6F4EF; --card:#FFFFFF; --fill:#EEEBE3; --fill2:#E3DFD4;
  --testo:#1B1D1A; --testo2:#65695F; --testo3:#9A9E94;
  --sep:rgba(27,29,26,.09);
  --verde:#2E7D5B; --verde-scuro:#22604A; --verde-chiaro:#E1F0E8;
  --ambra:#C98A12; --ambra-chiaro:#FCF0D2;
  --rosso:#C8433B; --rosso-chiaro:#FBE4E2;
  --blu:#2F6FB3; --blu-chiaro:#E1ECF8;
  --viola:#7A5BB5; --viola-chiaro:#EDE7F7;
  --ombra:0 6px 20px rgba(27,29,26,.06), 0 1px 2px rgba(27,29,26,.05);
  --raggio:18px;
  color-scheme:light dark;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#131412; --card:#1D1F1C; --fill:#292C28; --fill2:#343832;
  --testo:#F1F0EA; --testo2:#A2A69B; --testo3:#6B7066;
  --sep:rgba(241,240,234,.09);
  --verde:#4CAF84; --verde-scuro:#8ED4B4; --verde-chiaro:rgba(76,175,132,.16);
  --ambra:#E5AA3A; --ambra-chiaro:rgba(229,170,58,.16);
  --rosso:#E4665E; --rosso-chiaro:rgba(228,102,94,.16);
  --blu:#6FA3E6; --blu-chiaro:rgba(111,163,230,.16);
  --viola:#A88FE0; --viola-chiaro:rgba(168,143,224,.16);
  --ombra:0 6px 20px rgba(0,0,0,.35);
}}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--testo);font-size:16px;line-height:1.45;
  min-height:100dvh;overflow-x:hidden;
  padding-bottom:max(24px,env(safe-area-inset-bottom));
}
.contenitore{width:100%;max-width:720px;margin:0 auto;padding:0 16px}
strong{font-weight:650}
em{font-style:normal;color:var(--testo2);font-weight:400}
small{display:block;font-size:12px;color:var(--testo2);font-weight:400}

/* testata */
.testata{padding:28px 0 8px}
.marchio{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--verde);margin-bottom:18px}
.marchio img{border-radius:10px}
h1{font-size:30px;line-height:1.15;letter-spacing:-.02em;font-weight:800;margin-bottom:10px}
.sotto{color:var(--testo2);font-size:16px;max-width:60ch}

/* schede */
.scheda{background:var(--card);border-radius:var(--raggio);box-shadow:var(--ombra);padding:20px 18px;margin:18px 0}
.scheda h2{font-size:19px;font-weight:750;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--verde);color:#fff;font-size:14px;font-weight:700}
h3{font-size:16px;font-weight:700;margin:0 0 10px}

/* campi */
.campo{margin-bottom:16px}
.campo:last-child{margin-bottom:0}
.etichetta{display:block;font-weight:600;font-size:14px;margin-bottom:7px}
.aiuto{font-size:13px;color:var(--testo2);margin:6px 0 8px}
.errore{font-size:13px;color:var(--rosso);margin-top:6px;display:none}
.errore:not(:empty){display:block}
.griglia-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.griglia-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:420px){.griglia-3{grid-template-columns:1fr 1fr}.griglia-3 .campo:first-child{grid-column:1/-1}}

input[type=number],select{
  width:100%;font:inherit;font-size:16px;color:var(--testo);background:var(--fill);
  border:2px solid transparent;border-radius:12px;padding:12px 12px;outline:none;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:none;
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}
input:focus,select:focus{border-color:var(--verde);background:var(--card)}
input[aria-invalid=true]{border-color:var(--rosso)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--testo2) 50%),linear-gradient(135deg,var(--testo2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.con-unita{position:relative}
.con-unita input{padding-right:52px}
.con-unita span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--testo2);pointer-events:none}
::placeholder{color:var(--testo3)}

/* segmenti (radio a bottoni) */
.segmenti{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--fill);padding:5px;border-radius:14px}
.segmenti.tre{grid-template-columns:repeat(3,1fr)}
.segmenti label{position:relative;cursor:pointer}
.segmenti input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.segmenti span{display:block;text-align:center;padding:10px 6px;border-radius:10px;font-weight:600;font-size:15px;color:var(--testo2);transition:background .15s,color .15s}
.segmenti input:checked+span{background:var(--card);color:var(--testo);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.segmenti input:focus-visible+span{outline:2px solid var(--verde);outline-offset:1px}
.segmenti.tre span{padding:9px 4px}

/* opzioni (radio a schede con descrizione) */
.opzioni{display:grid;gap:8px}
.opzione{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--fill);border:2px solid transparent;cursor:pointer;position:relative}
.opzione input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opzione .pallino{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--testo3);margin-top:2px;transition:border .15s,background .15s}
.opzione input:checked~.pallino{border-color:var(--verde);border-width:6px;background:var(--card)}
.opzione:has(input:checked){border-color:var(--verde);background:var(--verde-chiaro)}
.opzione input:focus-visible~.pallino{outline:2px solid var(--verde);outline-offset:2px}
.opzione b{display:block;font-weight:650;font-size:15px}
.opzione small{font-size:13px;margin-top:2px;line-height:1.35}

/* righe sport */
.riga-sport{display:grid;grid-template-columns:1fr auto;gap:8px;background:var(--fill);border-radius:14px;padding:10px;margin-bottom:8px}
.riga-sport select{grid-column:1/-1;background-color:var(--card)}
.riga-sport .numeri{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:1}
.riga-sport .numeri input{background:var(--card)}
.riga-sport .con-unita span{font-size:12px}
.riga-sport .togli{grid-column:2;align-self:stretch;background:none;border:0;color:var(--rosso);font:inherit;font-size:14px;font-weight:600;padding:0 8px;cursor:pointer;border-radius:10px}
.riga-sport .togli:hover{background:var(--rosso-chiaro)}

/* bottoni */
.bottone-primario{width:100%;font:inherit;font-size:17px;font-weight:700;color:#fff;background:var(--verde);border:0;border-radius:14px;padding:16px;cursor:pointer;transition:background .15s,transform .1s}
.bottone-primario:hover{background:var(--verde-scuro)}
.bottone-primario:active{transform:scale(.99)}
.bottone-secondario{font:inherit;font-size:15px;font-weight:600;color:var(--verde);background:var(--verde-chiaro);border:0;border-radius:12px;padding:11px 14px;cursor:pointer;width:100%}
.bottone-terziario{font:inherit;font-size:14px;font-weight:600;color:var(--testo);background:var(--fill);border:0;border-radius:12px;padding:11px 14px;cursor:pointer}
.azioni{margin:20px 0 8px}
.azioni .errore{text-align:center;background:var(--rosso-chiaro);padding:8px 12px;border-radius:10px}

/* risultati */
#risultati{margin-top:8px;scroll-margin-top:12px}
.eroe{background:var(--verde);color:#fff;border-radius:var(--raggio);padding:22px 20px;box-shadow:var(--ombra);margin:18px 0}
.eroe .titolo{font-size:14px;font-weight:600;opacity:.85;text-transform:uppercase;letter-spacing:.06em}
.eroe .grande{font-size:56px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:6px 0 2px}
.eroe .grande small{display:inline;font-size:20px;font-weight:600;color:inherit;opacity:.85;margin-left:4px}
.eroe .spiega{font-size:15px;opacity:.92;margin-top:8px;line-height:1.4}
.eroe .spiega b{font-weight:700}
.eroe .riga-dati{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.25)}
.eroe .riga-dati div{font-size:12px;opacity:.85;line-height:1.3}
.eroe .riga-dati b{display:block;font-size:19px;font-weight:750;opacity:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.macro-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.macro{border-radius:14px;padding:14px 12px;background:var(--fill)}
.macro .nome{font-size:13px;font-weight:600;color:var(--testo2)}
.macro .val{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;margin:4px 0}
.macro .val small{display:inline;font-size:15px;font-weight:600;margin-left:2px}
.macro .sub{font-size:12px;color:var(--testo2);font-variant-numeric:tabular-nums}
.macro.pro{background:var(--blu-chiaro)}.macro.pro .val{color:var(--blu)}
.macro.car{background:var(--ambra-chiaro)}.macro.car .val{color:var(--ambra)}
.macro.gra{background:var(--viola-chiaro)}.macro.gra .val{color:var(--viola)}
.barra-macro{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:14px 0 6px}
.barra-macro i{display:block;height:100%}
.barra-macro .pro{background:var(--blu)}.barra-macro .car{background:var(--ambra)}.barra-macro .gra{background:var(--viola)}
.legenda{display:flex;gap:14px;font-size:12px;color:var(--testo2);flex-wrap:wrap}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legenda .pro i{background:var(--blu)}.legenda .car i{background:var(--ambra)}.legenda .gra i{background:var(--viola)}
.nota-macro{font-size:14px;color:var(--testo2);margin-top:12px;line-height:1.45}

.elenco-valori{display:grid;gap:0}
.elenco-valori>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--sep)}
.elenco-valori>div:last-child{border-bottom:0}
.elenco-valori .n{font-size:15px}
.elenco-valori .n small{font-size:12px}
.elenco-valori .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px}
.elenco-valori .v.limite{color:var(--ambra)}
.elenco-valori .v.limite::before{content:"≤ ";font-weight:500}

.micro-griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:520px){.micro-griglia{grid-template-columns:repeat(3,1fr)}}
.micro{background:var(--fill);border-radius:12px;padding:10px 12px}
.micro .n{font-size:12px;color:var(--testo2);line-height:1.25}
.micro .v{font-size:17px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.micro .v small{display:inline;font-size:12px;font-weight:600;color:var(--testo2);margin-left:2px}

.pasti-tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
.pasti-tab th{font-size:12px;color:var(--testo2);font-weight:600;text-align:right;padding:6px 4px;border-bottom:1px solid var(--sep)}
.pasti-tab th:first-child,.pasti-tab td:first-child{text-align:left}
.pasti-tab td{padding:9px 4px;text-align:right;border-bottom:1px solid var(--sep)}
.pasti-tab tr:last-child td{border-bottom:0}
.pasti-tab td:first-child{font-weight:600}

.avvisi{display:grid;gap:8px}
.avviso{background:var(--ambra-chiaro);border-left:4px solid var(--ambra);border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.45}

details{margin-top:8px}
details summary{cursor:pointer;font-weight:600;font-size:15px;padding:8px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::after{content:"+";font-size:20px;color:var(--testo2);font-weight:400}
details[open] summary::after{content:"−"}
details summary::-webkit-details-marker{display:none}
.dettaglio{font-size:14px;color:var(--testo2);line-height:1.5}
.dettaglio p{margin:8px 0}
.dettaglio b{color:var(--testo)}
.dettaglio ul{padding-left:18px;margin:6px 0}
.dettaglio li{margin:4px 0}
.dettaglio .formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--fill);padding:8px 10px;border-radius:8px;overflow-x:auto;color:var(--testo)}

.strumenti{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.strumenti button{flex:1 1 auto}

.piede{color:var(--testo3);font-size:12px;line-height:1.5;padding:24px 16px 12px}
.piede p{margin-bottom:8px}

@media print{
  body{background:#fff;color:#000}
  .testata .sotto,#modulo,.azioni,.strumenti,.piede{display:none!important}
  .scheda,.eroe{box-shadow:none;border:1px solid #ccc;break-inside:avoid;margin:10px 0}
  .eroe{background:#2E7D5B!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  details{display:block}details>*{display:block}
}

/* obiettivi: una o due opzioni quando le altre non hanno senso */
.segmenti.obiettivi.due{grid-template-columns:repeat(2,1fr)}
.segmenti.obiettivi.una{grid-template-columns:1fr}
.segmenti label[hidden]{display:none}

/* riquadro del consiglio sotto kg e settimane */
.consiglio{background:var(--verde-chiaro);border-radius:14px;padding:12px 14px;margin-top:4px}
.consiglio-testo{font-size:14px;line-height:1.45;margin-bottom:10px}
.consiglio-testo b{font-weight:700}
.consiglio-testo .attenzione{color:var(--rosso);font-weight:600}
.consiglio .bottone-secondario{background:var(--card)}

/* la domanda davanti a un limite di sicurezza */
.domanda{border:2px solid var(--ambra)}
.domanda-testo{font-size:15px;line-height:1.5;margin-bottom:10px}
.domanda-motivi{padding-left:20px;margin:0 0 12px;font-size:15px;line-height:1.5}
.domanda-motivi li{margin:4px 0}
.domanda-scelte{display:grid;gap:10px;margin-top:16px}
.domanda-scelte button small{display:block;font-size:12px;font-weight:500;opacity:.9;margin-top:4px}
.bottone-pericolo{width:100%;font:inherit;font-size:16px;font-weight:700;color:var(--rosso);background:var(--card);border:2px solid var(--rosso);border-radius:14px;padding:14px;cursor:pointer}
.bottone-pericolo:hover{background:var(--rosso-chiaro)}
.banner{border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.45;margin:18px 0 -8px}
.banner.rischio{background:var(--rosso-chiaro);border-left:4px solid var(--rosso)}
.banner.limite{background:var(--ambra-chiaro);border-left:4px solid var(--ambra)}
.banner .link{display:block;margin-top:6px;background:none;border:0;padding:0;font:inherit;font-weight:700;color:inherit;text-decoration:underline;cursor:pointer}
.domanda-scelte .bottone-primario small{color:#fff;opacity:.85}