/* Programma 11 — Pianificatore serata. Usa le variabili di ../comune/stile.css. */

:root {
  --live: #111111;
  --late-online: var(--accento);
  --gioco-online: #8DBFA3;
  --late-live: #111111;
  --gioco-live: #9A9A92;
}

/* ---------- Testa ---------- */
.testa { padding: 8px 0 20px; }
.marca { margin: 0; font-size: 18px; }
.testa h1 {
  margin: 6px 0 4px;
  font-size: clamp(26px, 6.4vw, 40px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sottotitolo { margin: 0; color: var(--tenue); max-width: 760px; }

h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
h3 { margin: 18px 0 8px; font-size: 15px; font-weight: 800; }
.aiuto { margin: 6px 0 0; font-size: 13px; color: var(--tenue); }
.vuoto { color: var(--tenue); margin: 0; }

/* ---------- Colonne: telefono una sola colonna, risultato in alto ---------- */
.corpo { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.colonna { display: contents; }
.risultato { order: 1; }
.avvisi { order: 2; }
.impostazioni { order: 3; }
.tornei-box { order: 4; }
.linea { order: 5; }
.spiega { order: 6; }
.salvataggio { order: 7; }
.andata { order: 8; }

@media (min-width: 900px) {
  .corpo { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); align-items: start; gap: 20px; }
  .colonna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .colonna-ris { position: sticky; top: 12px; }
}

/* ---------- Campi ---------- */
.campi-2 { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo-box { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo-nome { font-size: 13px; font-weight: 700; }
.campo-box .aiuto { margin: 0; font-size: 12px; }
.campo { min-height: 44px; }
select.campo { appearance: auto; }

/* Scelta sì/no: scelto = nero pieno, non scelto = bordo scuro */
.scelta { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.scelta button {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--raggio-piccolo);
  border: 1.5px solid var(--testo);
  background: transparent;
  font-weight: 700;
}
.scelta button[aria-pressed='true'] { background: var(--testo); color: #fff; }
.riga-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; }

.bottone, .bottone-secondario { min-height: 44px; }
.bottone[disabled] { opacity: 0.45; cursor: not-allowed; }
.bottone-secondario { border-color: var(--testo); }
.piccolo { min-height: 36px; padding: 6px 12px; font-size: 14px; }

/* ---------- Tornei ---------- */
.tornei-box h2 { margin-bottom: 10px; }
.lista-tornei { display: grid; gap: 12px; }
.torneo { background: var(--fondo); }
.torneo-testa { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.nome-box { flex: 1; }
.pause-box { margin-top: 10px; }
.pause-box summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 6px 0; }
.pause-box .campi-2 { margin-top: 8px; }
.riassunto { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--linea); font-weight: 700; font-size: 14px; }
.riassunto.errore { color: var(--perde); }

.aggiungi { margin-top: 12px; display: grid; gap: 12px; }
.aggiungi > .bottone { justify-self: start; }
.esempi .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  border: 1px solid var(--linea);
  background: var(--fondo-2);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  min-height: 38px;
}
.chip:hover { border-color: var(--accento); }

/* ---------- Risultato (panno verde) ---------- */
.risultato { padding: 18px; }
.risultato .etichetta { color: rgba(255, 255, 255, 0.82); }
.risultato .numero-grande { color: var(--giallo); margin: 6px 0 4px; }
.risultato .nota { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 14px; }
.vuoto-panno { margin: 8px 0 0; font-weight: 700; }
.cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.cifre div { display: flex; flex-direction: column; min-width: 0; }
.cifre b { font-size: 24px; font-weight: 800; line-height: 1.2; }
.cifre span:last-child { font-size: 12px; color: rgba(255, 255, 255, 0.82); }
.cifre .etichetta { font-size: 10px; letter-spacing: 0.08em; }

/* ---------- Avvisi ---------- */
.lista-avvisi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-avvisi li { padding: 10px 12px; border-radius: var(--raggio-piccolo); background: var(--fondo); border-left: 4px solid var(--tenue); font-size: 15px; }
.lista-avvisi li.grave { border-left-color: var(--perde); font-weight: 600; }
.tutto-bene { margin: 0; padding: 10px 12px; border-radius: var(--raggio-piccolo); background: var(--testo); color: #fff; font-weight: 700; }

/* ---------- Linea del tempo ---------- */
.tracciato { position: relative; padding-top: 24px; }
.ore { position: absolute; inset: 0 0 auto 0; height: 20px; }
.ora-tacca { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; color: var(--tenue); font-weight: 700; white-space: nowrap; }
.ora-tacca.prima { transform: none; }
.ora-tacca.ultima { transform: translateX(-100%); }
.riga-linea { margin-bottom: 10px; }
.riga-nome { margin: 0 0 3px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 0 8px; }
.riga-nome span { color: var(--tenue); }
.pista { position: relative; height: 22px; background: var(--fondo); border-radius: 6px; border: 1px solid var(--linea); overflow: hidden; }
.tacca { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--linea); }
.pista > span:not(.tacca) { position: absolute; top: 2px; bottom: 2px; }
.b-late { background: var(--late-online); border-radius: 4px 0 0 4px; }
.b-gioco { background: var(--gioco-online); border-radius: 0 4px 4px 0; }
.live .b-late { background: var(--late-live); }
.live .b-gioco { background: var(--gioco-live); }
.b-gioco.continua { background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, 0.55) 6px 9px); }
.pista > .b-pausa { background: #fff; top: 0; bottom: 0; border-left: 1px solid var(--linea); border-right: 1px solid var(--linea); min-width: 2px; }
.riga-tavoli { margin-top: 14px; }
.tratto { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; border-right: 1px solid #fff; }
.tratto.n1 { background: #8DBFA3; color: var(--testo); }
.tratto.n2 { background: #3F8F63; }
.tratto.n3 { background: var(--accento); }
.tratto.n4 { background: var(--accento-scuro); }
.tratto.troppi { background: var(--perde); }

.legenda { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--tenue); }
.legenda li { display: flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 16px; height: 12px; border-radius: 3px; }
.sw.b-late { background: var(--late-online); }
.sw.b-gioco { background: var(--gioco-online); }
.sw.b-pausa { background: #fff; border: 1px solid var(--tenue); }
.sw.troppi { background: var(--perde); }
.sw.sw-live { background: linear-gradient(90deg, var(--late-live) 50%, var(--gioco-live) 50%); }
.programma { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 6px; }

/* ---------- Spiegazione ---------- */
.spiega summary { cursor: pointer; font-weight: 800; font-size: 16px; min-height: 28px; }
.spiega-corpo { font-size: 15px; }
.spiega-corpo ul { padding-left: 18px; margin: 6px 0 10px; }

/* ---------- Salvataggio e com'è andata ---------- */
.riga-salva { display: grid; gap: 10px; }
.riga-salva .bottoni { display: flex; flex-wrap: wrap; gap: 8px; }
.messaggio { margin: 8px 0 0; font-weight: 700; min-height: 1px; }
.messaggio:empty { display: none; }
.salvate { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.salvate li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--raggio-piccolo); padding: 10px 12px; }
.salvate li.attiva { border-color: var(--testo); border-width: 2px; }
.salvate li > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.salvate .aiuto { margin: 0; }
.azioni-salvata { display: flex; gap: 6px; }

.righe-andata { display: grid; gap: 10px; margin: 12px 0; }
.riga-andata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--raggio-piccolo); padding: 10px 12px; }
.riga-andata > b { grid-column: 1 / -1; }
.bottoni-andata { display: flex; flex-wrap: wrap; gap: 8px; }
.esito { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.esito div { display: flex; flex-direction: column; }
.esito b { font-size: 22px; font-weight: 800; }
.esito .vince { color: var(--vince); }
.esito .perde { color: var(--perde); }

.piede { margin: 28px 0 8px; color: var(--tenue); font-size: 13px; }

@media (max-width: 380px) {
  .cifre b { font-size: 20px; }
  .esito b { font-size: 18px; }
}

/* Riquadro "A cosa serve / Quando usarlo": sempre visibile in alto. */
.a-cosa-serve {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--accento);
  border-radius: var(--raggio-piccolo);
}
.a-cosa-serve p { margin: 0; font-size: 16px; line-height: 1.45; }
.a-cosa-serve strong { color: var(--accento-scuro); }
.risultato .nota + .nota { margin-top: 4px; }