/* ============================================================
   calcolobmi-semplice.it — foglio di stile
   Mobile-first: le regole base valgono per il telefono,
   in fondo ci sono le poche aggiunte per schermi grandi.
   ============================================================ */

/* --- I colori del sito, definiti una volta sola.
   Cambiare qui dentro cambia tutto il sito.               --- */
:root {
  --sfondo:        #0f1417;   /* fondo pagina, grigio molto scuro */
  --carta:         #171e22;   /* i riquadri, un gradino più chiari */
  --bordo:         #263038;
  --testo:         #e9eff1;
  --testo-tenue:   #94a5ac;
  --accento:       #34c48c;   /* il verde del sito */

  --campo:         #0c1114;   /* fondo delle caselle da compilare */
  --traccia:       #2a343a;   /* la barretta grigia dei cursori */

  --rosso:         #e05a52;
  --giallo:        #e5b445;
  --verde:         #3fb977;

  /* varianti più chiare: le stesse fasce, ma leggibili come
     testo su fondo scuro */
  --rosso-testo:   #ff8f86;
  --giallo-testo:  #f2c65c;
  --verde-testo:   #56d192;

  color-scheme: dark; /* dice al browser di disegnare in scuro
                         anche caselle, cursori e caselline */
}

/* --- Azzeramento minimo --- */
* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 620px;
  padding: 0 16px 48px;
  background: var(--sfondo);
  color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* Testo visibile solo ai lettori di schermo, per chi non vede */
.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Intestazione --- */
.intestazione {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 0;
}
.logo {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
  color: var(--testo); text-decoration: none;
}
.logo span { color: var(--accento); }
.intestazione nav { display: flex; gap: 16px; font-size: .9rem; }
.intestazione nav a { color: var(--testo-tenue); text-decoration: none; }
.intestazione nav a:hover { color: var(--accento); }
.intestazione nav a[aria-current="page"] { color: var(--testo); font-weight: 600; }

/* --- Titoli --- */
h1 {
  font-size: 1.9rem; line-height: 1.15; letter-spacing: -.02em;
  margin: 8px 0 6px;
}
h2 { font-size: 1.05rem; margin: 0 0 10px; letter-spacing: -.01em; }
.sottotitolo { color: var(--testo-tenue); margin: 0 0 20px; }

/* --- Il riquadro, mattone di tutta la pagina --- */
.riquadro {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 14px;
}

/* --- Campi: etichetta, casella, cursore --- */
.campo { margin-bottom: 18px; }
.campo:last-of-type { margin-bottom: 8px; }

label {
  display: block; font-weight: 600; font-size: .92rem;
  margin-bottom: 6px;
}

.riga-campo { display: flex; align-items: baseline; gap: 8px; }

.casella {
  width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--campo);
  font: inherit;
  font-size: 1.3rem;      /* mai sotto 16px: sotto, iPhone zooma da solo */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo);
}
.casella:focus { outline: 2px solid var(--accento); outline-offset: 1px; }
.casella.errore { border-color: var(--rosso); background: #24100f; }
.unita { color: var(--testo-tenue); font-size: .95rem; }

/* Il cursore: traccia sottile, pallino grande abbastanza da prenderlo col dito */
.cursore {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin-top: 14px;
  border-radius: 3px; background: var(--traccia);
  cursor: pointer;
}
.cursore::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accento); border: 3px solid var(--sfondo);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.cursore::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accento); border: 3px solid var(--sfondo);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.cursore:focus-visible { outline: 2px solid var(--accento); outline-offset: 4px; }

/* --- La promessa sulla privacy --- */
.promessa {
  margin: 16px 0 0; padding-left: 12px;
  border-left: 3px solid var(--accento);
  font-size: .85rem; color: var(--testo-tenue);
}
.promessa a { color: var(--accento); }

/* --- Il risultato --- */
.risultato { text-align: center; padding-top: 22px; }
.etichetta-risultato {
  margin: 0; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--testo-tenue);
}
.numero-grande {
  /* clamp = "non più piccolo di 2,6rem, non più grande di 4rem,
     nel mezzo cresci col telefono": così "2.570 kcal" non sborda
     dai telefoni stretti e "24,2" resta comunque enorme.        */
  margin: 2px 0 0; font-size: clamp(2.6rem, 13vw, 4rem);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.fascia { margin: 2px 0 22px; font-size: 1.15rem; font-weight: 700; }
/* le tre classi qui sotto le mette il JavaScript, secondo la
   fascia, e valgono sia per il numero grande sia per la scritta */
.numero-grande.f-rosso,
.fascia.f-rosso  { color: var(--rosso-testo); }
.numero-grande.f-giallo,
.fascia.f-giallo { color: var(--giallo-testo); }
.numero-grande.f-verde,
.fascia.f-verde  { color: var(--verde-testo); }

/* --- La barra a cinque fasce --- */
.barra {
  position: relative; display: flex;
  height: 20px; margin-bottom: 6px;
}
.segmento { height: 100%; }
.segmento:first-child { border-radius: 10px 0 0 10px; }
.segmento:last-child  { border-radius: 0 10px 10px 0; }
.segmento.rosso  { background: var(--rosso); }
.segmento.giallo { background: var(--giallo); }
.segmento.verde  { background: var(--verde); }

/* L'indicatore: barretta chiara con alone scuro, si vede su ogni colore */
.indicatore {
  position: absolute; top: -5px; left: 50%;
  width: 6px; height: 30px; border-radius: 3px;
  background: #ffffff; box-shadow: 0 0 0 2px rgba(0,0,0,.55);
  transform: translateX(-50%);
  transition: left .12s ease-out;   /* scivola invece di saltare */
  opacity: 0;                       /* nascosto finché non c'è un risultato */
}
.indicatore.visibile { opacity: 1; }

/* Le tacche numeriche sotto la barra */
.tacche {
  position: relative; height: 16px; margin-bottom: 14px;
  font-size: .72rem; color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}
.tacche span { position: absolute; transform: translateX(-50%); }

.nota-curva {
  margin: 0; font-size: .85rem; color: var(--testo-tenue); text-align: left;
}

/* --- Peso ideale, e in generale le righe di risultato --- */
.differenza { margin: 0 0 6px; font-size: 1.15rem; font-weight: 600; }
.dettaglio { margin: 0; font-size: .9rem; color: var(--testo-tenue); }
.dettaglio strong { color: var(--testo); }
.dettaglio + .dettaglio { margin-top: 10px; }
main a { color: var(--accento); }

/* --- Circonferenza vita --- */
.facoltativo {
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--testo-tenue);
  background: var(--campo); border: 1px solid var(--bordo);
  border-radius: 20px; padding: 2px 8px; margin-left: 6px;
  vertical-align: 2px;
}
.riquadro .dettaglio + .campo { margin-top: 16px; }
.esito-vita { margin: 4px 0 0; font-size: .95rem; font-weight: 600; }
.esito-vita:empty { display: none; }

/* --- Le domande e le scelte a pulsante (qui e nella pagina calorie) --- */
.domanda {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--bordo); border-radius: 10px;
  font-weight: 400; font-size: .95rem; cursor: pointer;
}
.domanda:has(input:checked) { border-color: var(--accento); background: #14241f; }
.domanda input {
  width: 20px; height: 20px; margin: 0; flex: none;
  accent-color: var(--accento); cursor: pointer;
}
.domanda .nota { display: block; font-size: .8rem; color: var(--testo-tenue); }

.gruppo-scelte { margin-top: 16px; }

/* Scelte affiancate (donna / uomo) */
.scelte-affiancate { display: flex; gap: 8px; }
.scelte-affiancate .domanda { flex: 1; margin-bottom: 0; justify-content: flex-start; }

.avvisi { margin-top: 14px; }
.avvisi:empty { display: none; }
.avviso {
  margin: 0 0 10px; padding-left: 12px;
  border-left: 3px solid var(--giallo);
  font-size: .9rem;
}
.avviso:last-child { margin-bottom: 0; }
.avviso strong { display: block; }

/* --- Tabella dei tre obiettivi (pagina calorie) --- */
.obiettivi { display: grid; gap: 10px; }
.obiettivo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 12px 14px;
  border: 1px solid var(--bordo); border-radius: 10px;
}
.obiettivo.principale { border-color: var(--accento); background: #14241f; }
.obiettivo .nome { font-size: .92rem; }
.obiettivo .nome small { display: block; color: var(--testo-tenue); font-size: .8rem; }
.obiettivo .kcal {
  font-size: 1.25rem; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Il testo di approfondimento --- */
.testo p { margin: 0 0 14px; font-size: .95rem; }
.testo p:last-child { margin-bottom: 0; }
.testo h3 {
  font-size: 1rem; margin: 26px 0 10px;
  padding-top: 20px; border-top: 1px solid var(--bordo);
}
.testo .elenco { margin-bottom: 14px; font-size: .95rem; }

/* --- Le fonti, in fondo alle pagine di calcolo --- */
.fonti ol { margin: 0; padding-left: 20px; }
.fonti li { margin-bottom: 16px; font-size: .87rem; color: var(--testo-tenue); }
.fonti li:last-child { margin-bottom: 0; }
.fonti .titolo-fonte { display: block; color: var(--testo); font-weight: 600; }
.fonti cite { font-style: normal; color: var(--testo); }
.fonti a { word-break: break-word; }
.fonti .postilla { display: block; margin-top: 8px; }

/* --- Elenchi puntati (pagina privacy) --- */
.elenco { margin: 0; padding-left: 20px; font-size: .9rem; color: var(--testo-tenue); }
.elenco li { margin-bottom: 10px; }
.elenco li:last-child { margin-bottom: 0; }
.elenco strong { color: var(--testo); }

/* --- Disclaimer --- */
.disclaimer { background: #1b1a14; border-color: #34301f; }
.disclaimer p { margin: 0; font-size: .88rem; color: var(--testo-tenue); }
.disclaimer p + p { margin-top: 12px; }

/* --- Piè di pagina --- */
footer { text-align: center; padding-top: 10px; }
footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
footer a { color: var(--accento); font-size: .88rem; }
footer p { font-size: .8rem; color: var(--testo-tenue); margin: 12px 0 0; }

/* ============================================================
   Schermi larghi: unico ritocco, titolo e numero crescono
   ============================================================ */
@media (min-width: 600px) {
  h1 { font-size: 2.3rem; }
  .numero-grande { font-size: 4.6rem; }
  .riquadro { padding: 22px 20px; }
}

/* Chi ha chiesto meno animazioni al sistema, non le riceve */
@media (prefers-reduced-motion: reduce) {
  .indicatore { transition: none; }
}