/* =========================================================================
   allergenicalc — il foglio dell'app.

   Header, footer, container, card, pulsanti, campi e filetti arrivano dal
   guscio (cosmetech-ui), caricato prima di questo. Qui dentro vivono solo
   due cose: la palette dell'app e gli elementi che il guscio non conosce
   — la griglia delle sostanze, gli esiti, le bande di segnalazione.
   ========================================================================= */

:root {
  /* Le quattro dell'app, e nient'altro di strutturale: filetti, fondi,
     sfondo pagina, testo e ombre derivano da --c1-fondo nel guscio. */
  --c1-fondo:    #123a60;   /* header, footer, filetti, hover menu */
  --c2-menu:     #0d2c4a;   /* barra menu: l'app estende lite, non c'e' */
  --c3-pulsante: #1f6fb2;   /* pulsanti, link */
  --c4-titoli:   #123a60;   /* titoli nel corpo */

  /* Colori di segnalazione: non sono palette, sono significato. Un esito
     al limite e' ambra perche' e' al limite, non perche' l'app e' blu. */
  --ambra-bg: #fdf3e0; --ambra-bordo: #e8c98a; --ambra-testo: #8a5a12;
  --ambra-scuro: #3a2a06;
  --blu-bg: #eef1fb; --blu-bordo: #c3cdee;
  --rosso-bg: #fbeeec; --rosso-bordo: #e5b8b0; --rosso-testo: #b04a3a;
}

/* ─────────────────────────────── il gate ──────────────────────────────── */

.gate { max-width: 680px; margin: 0 auto; }

.intro { text-align: center; margin-bottom: 1.6rem; }
.intro h2 {
  font-family: "Questrial", sans-serif; font-weight: 400;
  font-size: 1.9rem; line-height: 1.2; margin: 0 0 .9rem; color: var(--c4-titoli);
}
.intro p { margin: 0 auto; max-width: 560px; color: var(--testo); font-size: 1rem; }
.intro .invito { margin-top: .9rem; font-weight: 600; color: var(--c3-pulsante); }

.gate-scheda {
  background: var(--bianco); border: 1px solid var(--filetto); border-radius: 12px;
  box-shadow: var(--ombra); padding: 1.6rem 1.5rem;
}
.gate-scheda h3 {
  font-family: "Questrial", sans-serif; font-weight: 400; font-size: 1.15rem;
  margin: 0 0 1.1rem; color: var(--c4-titoli);
}

/* campi in riga su desktop, impilati su mobile */
.righe-campi { display: flex; gap: .9rem; flex-wrap: wrap; }
.gate .campo { min-width: 180px; }
.campo input, .campo select {
  padding: .62rem .7rem; border: 1px solid var(--filetto); border-radius: 6px;
  font-size: .98rem; font-family: inherit; background: var(--bianco); color: var(--testo);
}
.campo input:focus, .campo select:focus {
  outline: 2px solid var(--c3-pulsante); outline-offset: -1px; border-color: var(--c3-pulsante);
}

.gate-invio {
  margin-top: 1.3rem; width: 100%;
  background: var(--c3-pulsante); color: var(--bianco);
  border: 1px solid var(--c3-pulsante); border-radius: 5px;
  padding: .8rem 1rem; font-size: 1rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background .15s, color .15s;
}
.gate-invio:hover { background: var(--bianco); color: var(--c3-pulsante); }   /* colori invertiti in hover */

.come {
  margin-top: 1.4rem; font-size: .92rem; color: var(--testo);
  background: var(--tenue); border: 1px solid var(--filetto); border-radius: 8px; padding: .9rem 1rem;
}
.come strong { color: var(--c4-titoli); }
.privacy { margin-top: 1rem; font-size: .78rem; color: var(--testo-tenue); text-align: center; }

.errori { background: var(--rosso-bg); border: 1px solid var(--rosso-bordo); border-radius: 8px;
          padding: .7rem .9rem; margin-bottom: 1.1rem; font-size: .9rem; }
.errori ul { margin: 0; padding-left: 1.2rem; }

@media (max-width: 560px) {
  .righe-campi { flex-direction: column; gap: .8rem; }
  .intro h2 { font-size: 1.55rem; }
}

/* ────────────────────────── il calcolatore ────────────────────────────── */

.carta { background: var(--bianco); border: 1px solid var(--filetto); border-radius: 10px;
         padding: 1.2rem; margin-bottom: 1.2rem; box-shadow: var(--ombra); }

.campi-alto { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.campo { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.campo label { font-size: .82rem; font-weight: 600; margin-bottom: .35rem; color: var(--testo-tenue); }
.campo input { padding: .5rem .7rem; border: 1px solid var(--filetto); border-radius: 6px;
               font-size: 1rem; font-family: inherit; color: var(--testo); }
.campo input:focus { outline: 2px solid var(--c3-pulsante); outline-offset: -1px; }

fieldset.tipi { border: none; margin: 0 0 1rem; padding: 0; }
fieldset.tipi legend { font-size: .82rem; font-weight: 600; color: var(--testo-tenue); padding: 0 0 .4rem; }
.tipi-lista { display: flex; gap: .7rem; flex-wrap: wrap; }
.tipo { flex: 1; min-width: 230px; border: 1px solid var(--filetto); border-radius: 8px;
        padding: .6rem .8rem; cursor: pointer; background: var(--tenue); }
.tipo:has(input:checked) { border-color: var(--c3-pulsante); box-shadow: inset 0 0 0 1px var(--c3-pulsante); background: var(--bianco); }
.tipo .nome { font-weight: 600; }
.tipo .esempi { font-size: .8rem; color: var(--testo-tenue); display: block; }
.tipo .soglia { font-size: .8rem; color: var(--c4-titoli); font-weight: 600; display: block; margin-top: .2rem; }

.tabella-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 880px; }
th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
     color: var(--testo-tenue); padding: .5rem; border-bottom: 2px solid var(--filetto); }
td { padding: .35rem .4rem; border-bottom: 1px solid var(--filetto); vertical-align: top; }
td input { width: 100%; padding: .45rem .55rem; border: 1px solid var(--filetto); border-radius: 6px;
           font-size: .95rem; font-family: inherit; color: var(--testo); }
td input:focus { outline: 2px solid var(--c3-pulsante); outline-offset: -1px; }
td.num input { text-align: right; }
td.contributo { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
                color: var(--c4-titoli); font-weight: 600; padding-top: .8rem; }
td.azioni { text-align: center; }
.btn-elimina { background: none; border: none; color: var(--rosso-testo); font-size: 1.1rem;
               cursor: pointer; padding: .2rem .5rem; }
input.cas-ko { border-color: var(--rosso-testo) !important; background: var(--rosso-bg); }
.nota-cas { font-size: .74rem; color: var(--rosso-testo); margin-top: .2rem; display: none; }
input.cas-ko + .nota-cas { display: block; }

.barra-bottoni { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; align-items: center; }
button.primario, button.secondario, a.bottone {
  padding: .6rem 1.2rem; border-radius: 5px; font-size: .95rem; font-weight: 600; font-family: inherit;
  cursor: pointer; border: 1px solid var(--c3-pulsante); background: var(--c3-pulsante); color: var(--bianco);
  text-decoration: none; transition: background .15s, color .15s;
}
button.secondario { background: var(--bianco); color: var(--c3-pulsante); }
button.primario:hover, a.bottone:hover { background: var(--bianco); color: var(--c3-pulsante); }
button.secondario:hover { background: var(--c3-pulsante); color: var(--bianco); }
.link-esempio { font-size: .85rem; }
.suggerimento { font-size: .85rem; color: var(--testo-tenue); margin-top: .8rem; }

#risultati { display: none; }
.testata-esito { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.conteggi { flex: 1; min-width: 260px; border: 1px solid var(--c3-pulsante); border-radius: 8px;
            padding: .7rem .9rem; background: var(--sfondo); }
.conteggi .numeri { font-size: 1.05rem; font-weight: 600; color: var(--c4-titoli); }
.conteggi .dettaglio { font-size: .82rem; color: var(--testo-tenue); margin-top: .25rem; }
.etichetta-finale { border: 1px solid var(--c3-pulsante); border-radius: 8px; padding: .8rem 1rem;
                    background: var(--bianco); font-size: 1.02rem; margin: .9rem 0; }
.etichetta-finale .voci { font-weight: 700; color: var(--c4-titoli); }
.nota { border-radius: 8px; padding: .7rem .9rem; margin-top: .7rem; font-size: .9rem; line-height: 1.45; }
.nota.perimetro { background: var(--blu-bg); border: 1px solid var(--blu-bordo); }
.nota.attenzione { background: var(--ambra-bg); border: 1px solid var(--ambra-bordo); }
.nota.severa { background: var(--rosso-bg); border: 1px solid var(--rosso-bordo); }

.chip { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .78rem;
        font-weight: 600; white-space: nowrap; }
.chip.dichiarare { background: var(--c3-pulsante); color: var(--bianco); }
.chip.al_limite { background: var(--ambra-bg); color: var(--ambra-testo); border: 1px solid var(--ambra-bordo); }
.chip.non_dichiarare { background: var(--tenue); color: var(--testo-tenue); border: 1px solid var(--filetto); }
.chip.vietata { background: var(--rosso-testo); color: var(--bianco); }
/* «Non riconosciuta» in rosso: è la riga che l'utente deve trovare e
   sistemare a mano, e in azzurro si perdeva fra le altre. Contorno rosso su
   fondo chiaro, non rosso pieno: quello è di «Vietata», che è un divieto —
   qui invece l'app dichiara di non sapere, e le due cose non vanno
   confuse. */
.chip.non_coperta { background: var(--rosso-bg); color: var(--rosso-testo);
                    border: 1.5px solid var(--rosso-testo); font-weight: 700; }
.chip.ambigua { background: var(--ambra-bordo); color: var(--ambra-scuro); }
.chip.assente { background: var(--tenue); color: var(--testo-tenue); }
.citazione { font-size: .74rem; color: var(--testo-tenue); margin-top: .25rem; line-height: 1.35; }
.denominazione { font-weight: 600; color: var(--c4-titoli); }
.come-scritto { font-size: .74rem; color: var(--testo-tenue); }
.candidati { margin-top: .35rem; }
.candidati button { margin: .15rem .3rem .15rem 0; padding: .25rem .6rem; font-size: .8rem;
                    font-family: inherit; border: 1px solid var(--c3-pulsante); background: var(--bianco);
                    color: var(--c3-pulsante); border-radius: 4px; cursor: pointer; }
.candidati button:hover { background: var(--c3-pulsante); color: var(--bianco); }

table.vincoli { min-width: 0; }
table.vincoli td { font-size: .88rem; }
/* Il riquadro del calcolatore nasce chiuso e lo apre il js; quello del
   gate lo stampa il server ed e' sempre visibile. Percio' il display sta
   sull'id, non sulla classe che le due pagine condividono. */
#errori { margin-bottom: 1rem; display: none; }
.coda-livelli { font-size: .85rem; color: var(--testo-tenue); margin-top: 1.4rem; }

.ingressi { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.ingresso { flex: 1; min-width: 280px; }
.ingresso h3 { font-family: "Questrial", sans-serif; font-weight: 400; font-size: 1rem;
               color: var(--c4-titoli); margin: 0 0 .4rem; }
.ingresso textarea { width: 100%; min-height: 96px; padding: .5rem .7rem; font-family: inherit;
                     font-size: .9rem; border: 1px solid var(--filetto); border-radius: 6px;
                     color: var(--testo); resize: vertical; }
.ingresso textarea:focus, .ingresso input[type=file]:focus { outline: 2px solid var(--c3-pulsante); }
.ingresso input[type=file] { font-size: .9rem; width: 100%; }
.ingresso .spiega { font-size: .8rem; color: var(--testo-tenue); margin: .35rem 0 .5rem; }
.esito-lettura { display: none; margin-top: 1rem; }
.scelta-tabelle { margin-top: .7rem; }
.scelta-tabelle button { margin: .2rem .4rem .2rem 0; padding: .45rem .9rem;
                         font-family: inherit; font-size: .9rem; cursor: pointer;
                         border: 1px solid var(--c4-accento); border-radius: 5px;
                         background: #fff; color: var(--c4-accento); }
.scelta-tabelle button:hover { background: var(--c4-accento); color: #fff; }
.domanda { margin-top: .7rem; font-weight: 600; color: var(--c4-titoli); font-size: .92rem; }
.banda-scheda { display: none; border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1.2rem;
                border: 1px solid var(--filetto); background: var(--bianco); box-shadow: var(--ombra); }
.banda-scheda.aggiornata { border-left: 5px solid var(--c3-pulsante); }
.banda-scheda.ambigua { border-left: 5px solid var(--ambra-bordo); background: var(--ambra-bg); }
.banda-scheda.incerta { border-left: 5px solid var(--blu-bordo); background: var(--blu-bg); }
.banda-scheda .titolo { font-weight: 700; color: var(--c4-titoli); margin-bottom: .2rem; }
.banda-scheda .dettaglio { font-size: .8rem; color: var(--testo-tenue); margin-top: .35rem; }
/* La domanda sulla scheda sta sotto la data, non a fianco: chiede
   un'attestazione e va letta prima di spuntarla. */
.domanda-scheda { border: 1px solid var(--bordo); background: #faf9ff;
                  border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem; }
.domanda-scheda .spiega-scheda { margin: 0 0 .5rem; font-size: .88rem; }
.campo-spunta { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem;
                cursor: pointer; }
.campo-spunta input { margin-top: .15rem; }
.nota-perc { font-size: .72rem; color: var(--ambra-testo); margin-top: .2rem; }
.celex { font-size: .68rem; color: var(--testo-tenue); opacity: .75; }
.tabella-obsoleta .c-esito { opacity: .45; }
#risultati.obsoleti .etichetta-finale,
#risultati.obsoleti .conteggi { opacity: .45; }
.obsoleti-avviso { display: none; }
#risultati.obsoleti .obsoleti-avviso { display: block; }
a.bottone.spento { opacity: .5; pointer-events: none; }

/* Ripristino: sempre disponibile, non solo dopo un errore, e mai il gesto
   piu' evidente della pagina. */
button.terziario { background: #fff; color: var(--testo-tenue); border-color: var(--bordo); }
button.terziario:hover { background: var(--sfondo); color: var(--testo); border-color: var(--testo-tenue); }

/* Una riga con un valore sbagliato si vede dov'è: il messaggio in cima dice
   «riga 3», e la riga 3 deve rispondere. */
input.valore-ko { border-color: var(--rosso-testo) !important; background: var(--rosso-bg); }
/* Riga valida che non contribuisce: resta leggibile, senza pesare. */
tr.riga-inerte { opacity: .55; }
tr.riga-inerte .nota-perc { color: var(--testo-tenue); }

/* Segnaposto: percettibilmente più chiari del testo digitato. Un grigio
   intermedio è peggio di niente, perché diventa ambiguo invece che chiaro. */
input::placeholder, textarea::placeholder { color: #b9b6cc; opacity: 1; }
/* Un campo data vuoto mostra «gg/mm/aaaa» col colore del testo digitato, e
   sembra compilato: si smorza come un segnaposto, allo stesso tono del nome
   e della quantità. `:placeholder-shown` sui campi data non è affidabile,
   quindi la classe la mette il codice della pagina. */
input.vuoto { color: #b9b6cc; }
input.vuoto:focus { color: var(--testo); }

/* Ogni candidato porta il dato su cui si decide: voce, nome di
   dichiarazione, soglia. Due nomi non consentono nessuna scelta informata. */
.candidati button { display: block; width: 100%; text-align: left; margin: .25rem 0; }
.candidati .candidato-nome { display: block; font-weight: 600; }
.candidati .candidato-cas { display: block; font-size: .78rem; }
.candidati .candidato-cit { display: block; font-size: .72rem; opacity: .85; }

/* I due casi studio del livello gratuito: si scelgono come il tipo di
   prodotto, e la scheda si ricarica. */
.scelta-caso { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.scelta-caso select { flex: 1; min-width: 220px; padding: .5rem .7rem; font-family: inherit;
                      font-size: .95rem; border: 1px solid var(--bordo); border-radius: 6px;
                      color: var(--testo); background: #fff; }
.scelta-caso select:focus { outline: 2px solid var(--c4-accento); outline-offset: -1px; }
#descrizione-caso:empty { display: none; }
/* Righe in sola lettura: si leggono come dati, non come campi da riempire. */
input[readonly] { background: #f6f5fb; color: var(--testo); border-color: transparent; cursor: default; }


/* ---- scheda con piu' fonti ---------------------------------------- */
.intestazione-scheda .briciole { margin: 0 0 .6rem; font-size: .85rem; }
.stato-salvataggio .stato { padding: .5rem 0; font-size: .9rem; color: var(--c3-pulsante); font-weight: 600; }
.stato-salvataggio .stato.da-salvare { color: var(--ambra-testo); }
#fonti .fonte { border-left: 4px solid var(--c4-accento); }
.fonte-testa { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.fonte-testa h2 { margin: 0; font-size: 1.05rem; }
.aggiungi-fonte { margin: -.4rem 0 1rem; }
.spiega-bottone { font-size: .82rem; color: var(--testo-tenue); }
.banda-scheda.f-banda { margin: .8rem 0 1rem; }
.tier { color: var(--c4-titoli); font-weight: 600; }

/* ---- bacheca ------------------------------------------------------- */
.contatore { font-size: 1.6rem; font-weight: 700; letter-spacing: .01em; display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
.contatore .totale { color: #111; }
.contatore .usati { color: #121660; }
.contatore .liberi.positivi { color: #1B7A3D; }
.contatore .liberi.zero { color: #E8002D; }
.contatore .sep { color: var(--testo-tenue); font-weight: 400; }
table.bacheca { min-width: 0; }
table.bacheca td { vertical-align: middle; padding: .6rem .5rem; }
table.bacheca td.data { color: var(--testo-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.scheda.congelata td { color: var(--testo-tenue); }
tr.scheda.congelata strong { color: var(--testo-tenue); }
.chip.congelata { background: var(--blu-bg); color: var(--c4-titoli); border: 1px solid var(--blu-bordo); margin-left: .5rem; }
.azioni-scheda { text-align: right; white-space: nowrap; }
.azioni-scheda form.inline { display: inline; }
.icona { display: inline-block; min-width: 2rem; padding: .3rem .45rem; margin-left: .15rem; border: 1px solid var(--filetto);
         border-radius: 6px; background: #fff; color: var(--c3-pulsante); text-decoration: none; font-size: 1rem;
         line-height: 1; cursor: pointer; text-align: center; font-family: inherit; }
.icona:hover { background: var(--c3-pulsante); color: #fff; }
.icona.spenta { color: var(--testo-tenue); opacity: .55; cursor: not-allowed; }
.icona.spenta:hover { background: #fff; color: var(--testo-tenue); }
.icona.pericolo { color: var(--rosso-testo); border-color: var(--rosso-bordo); }
.icona.pericolo:hover { background: var(--rosso-testo); color: #fff; }
.stacco { display: inline-block; width: 1.2rem; }
button.primario[disabled] { opacity: .5; cursor: not-allowed; }
.interruttore input { width: 1.2rem; height: 1.2rem; }
.rifiuto p { font-size: 1rem; }