/* Base comune dei programmi con dati personali (09, 10 e successivi).
   Si importa DOPO ../comune/stile.css: aggiunge classi, non cambia la grafica comune.
   Fondo bianco, testo nero, accento verde panno; scelte: sì = nero pieno, no = bordo scuro. */

.pagina-dati {
  display: grid;
  gap: 20px;
  padding-bottom: 48px;
}

.testa h1 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 7.5vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.marca { margin: 0; font-size: 18px; }

.sottotitolo {
  margin: 0;
  color: var(--tenue);
  font-size: 17px;
  max-width: 56ch;
}

.impianto,
.colonna-sx,
.colonna-dx {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

@media (min-width: 900px) {
  .impianto {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 24px;
  }
}

h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.scheda { min-width: 0; }
.scheda > h2:last-child { margin-bottom: 0; }

.piccolo {
  margin: 0;
  font-size: 14px;
  color: var(--tenue);
  line-height: 1.45;
}

.scheda .piccolo + * { margin-top: 12px; }

a { color: var(--accento); font-weight: 700; }

/* ---------- Panno verde (numero principale) ---------- */

.eroe { padding: 20px; display: grid; gap: 6px; }
.eroe p { margin: 0; }
.eroe .numero-grande { color: var(--giallo); overflow-wrap: anywhere; }
.eroe-sopra { font-weight: 700; font-size: 15px; opacity: .9; }
.eroe-sotto { font-size: 15px; opacity: .9; }
.numero-grande.sotto-zero { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ---------- Avvisi ---------- */

.avvisi { display: grid; gap: 8px; }
.avvisi:empty { display: none; }
.avviso-riga {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--raggio-piccolo);
  border: 2px solid var(--testo);
  font-weight: 600;
  line-height: 1.4;
}
.avviso-riga.forte { border-color: var(--perde); color: var(--perde); background: #FFF5F5; }
.avviso-riga.attenzione { border-color: var(--testo); background: var(--fondo); }
.avviso-riga.ok { border-color: var(--accento); color: var(--accento-scuro); background: #F2FAF5; }

.avviso-archivio {
  margin: 0;
  padding: 12px 14px;
  border: 2px solid var(--perde);
  border-radius: var(--raggio-piccolo);
  color: var(--perde);
  font-weight: 700;
}

/* ---------- Moduli ---------- */

.modulo { display: grid; gap: 14px; margin-top: 12px; }
.due { display: grid; gap: 14px; }
@media (min-width: 520px) {
  .due { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.campo-blocco { display: grid; gap: 4px; min-width: 0; }
.campo-blocco label,
.etichetta-campo { font-weight: 700; font-size: 14px; }
.campo-blocco small { font-size: 13px; color: var(--tenue); }
.campo-blocco .errore { color: var(--perde); font-weight: 700; }
.campo-blocco .errore:empty { display: none; }
.campo-blocco.sbagliato .campo { border-color: var(--perde); border-width: 2px; }
.campo { min-width: 0; min-height: 46px; }
textarea.campo { resize: vertical; min-height: 46px; font: inherit; }
input[type="date"].campo { appearance: none; -webkit-appearance: none; }

.scelte { display: flex; flex-wrap: wrap; gap: 6px; }
.scelte button {
  flex: 1 1 0;
  min-width: max-content;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid var(--testo);
  border-radius: var(--raggio-piccolo);
  background: var(--fondo);
  color: var(--testo);
  font-weight: 700;
}
.scelte button[aria-checked="true"] { background: var(--testo); color: var(--fondo); }

.azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.azioni .bottone { min-height: 46px; }
.esito { font-weight: 700; color: var(--accento-scuro); }

.anteprima { margin: 0; font-weight: 800; font-size: 18px; }
.anteprima:empty { display: none; }

.piu { color: var(--vince); }
.meno { color: var(--perde); }

/* ---------- Cifre del riepilogo ---------- */

.cifre {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 620px) { .cifre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cifra {
  display: grid;
  gap: 2px;
  padding: 12px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-piccolo);
  min-width: 0;
}
.cifra .etichetta { font-size: 11px; }
.cifra strong { font-size: 22px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.cifra small { font-size: 12px; color: var(--tenue); }

/* ---------- Elenco voci ---------- */

.elenco { list-style: none; margin: 0; padding: 0; display: grid; }
.voce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
}
.voce:last-child { border-bottom: 0; }
.voce-testo { display: grid; min-width: 0; }
.voce-testo strong { overflow-wrap: anywhere; }
.voce-testo small { color: var(--tenue); font-size: 13px; overflow-wrap: anywhere; }
.voce-data { font-size: 13px; color: var(--tenue); font-weight: 600; }
.voce-valore { font-weight: 800; white-space: nowrap; align-self: start; }
.voce-azioni { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.piccolo-bottone { padding: 6px 12px; font-size: 14px; min-height: 36px; text-decoration: none; color: var(--testo); display: inline-flex; align-items: center; }
#mostra-tutto { margin-top: 12px; }

/* ---------- Tabelle ---------- */

.tabella-scorre { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th, .tabella td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabella th:first-child, .tabella td:first-child { text-align: left; white-space: normal; }
.tabella th { font-size: 12px; color: var(--tenue); font-weight: 700; }

/* ---------- Apribili ---------- */

.apribile > summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 18px;
  list-style-position: inside;
}
details.apribile[open] > summary { margin-bottom: 8px; }
.scheda details.apribile { margin-top: 14px; }

/* ---------- Gioco responsabile ---------- */

.responsabile {
  padding: var(--spazio);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  font-size: 15px;
}
.responsabile p { margin: 0 0 8px; }
.responsabile p:last-child { margin-bottom: 0; }

/* ---------- Grafico a linea ---------- */

.g-linea { width: 100%; height: auto; display: block; overflow: visible; }
.g-griglia { stroke: var(--linea); stroke-width: 1; }
.g-zero { stroke: var(--testo); stroke-width: 1.2; stroke-dasharray: 4 4; }
.g-ety, .g-etx { font: 600 12px var(--carattere); fill: var(--tenue); }
.g-area { fill: var(--accento); opacity: .08; }
.g-tratto { stroke: var(--accento); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.g-punto { fill: var(--accento); }
.g-punto.g-sotto { fill: var(--perde); }

/* ---------- Pannello "I tuoi dati" ---------- */

.dati-bottoni { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.dati-bottoni .bottone-secondario { text-align: left; }
.dati-carica { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.dati-carica input { max-width: 100%; font-size: 14px; }
.dati-sostituisci { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 14px; }
.dati-esito { margin: 10px 0 0; font-weight: 700; }
.dati-esito:empty { display: none; }

[hidden] { display: none !important; }