/* ==========================================================================
   NAKAMA DESIGN — foglio di stile unico del mondo Nakama (versione 1.0, 6/10/2026)
   Fonte: Nakama Streaming (lib/theme/app_theme.dart) + Nakama Spirit Lab.
   Regole complete: ../REGOLE.md

   Come si usa: copiare questa cartella "web" (nakama.css + fonts/) nel progetto
   con  python "Nakama Design/strumenti/applica.py" <cartella-web-del-progetto>
   e collegare  <link rel="stylesheet" href="nakama.css">  PRIMA del css del progetto.
   Il css del progetto aggiunge solo le sue parti: non ridefinisce colori o caratteri,
   usa sempre le variabili qui sotto (var(--accento), var(--pannello), ...).
   Non modificare la copia dentro un progetto: si cambia qui e si riapplica a tutti.
   ========================================================================== */

@font-face { font-family: "Lato"; src: url("fonts/Lato-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }

:root {
  /* ---- superfici: nero a strati ---- */
  --fondo: #000000;                        /* pagina                 NakamaColors.background */
  --fondo-2: #1c1c21;                      /* barre, menu, finestre  NakamaColors.bar */
  --pannello: #141417;                     /* riquadri, card         NakamaColors.surface */
  --pannello-2: #202026;                   /* elementi dentro i riquadri */
  --bordo: rgba(255, 255, 255, 0.1);
  --bordo-forte: rgba(255, 255, 255, 0.2); /* linee                  NakamaColors.line */

  /* ---- testo ---- */
  --testo: #ffffff;
  --testo-2: #a0a0a8;                      /* secondario             NakamaColors.muted */
  --testo-3: rgba(255, 255, 255, 0.38);    /* suggerimenti, disattivato */

  /* ---- oro Nakama: l'unico colore d'accento ---- */
  --accento: #d4af37;                      /* NakamaColors.gold */
  --accento-chiaro: #e6c65c;               /* passaggio del mouse */
  --accento-scuro: #9c7d1e;
  --accento-velo: rgba(212, 175, 55, 0.22);/* voce selezionata, sfondo etichette */
  --su-oro: #000000;                       /* testo sopra l'oro */
  --oro-metallo: linear-gradient(135deg, #faeca9 0%, #e6c45c 34%, #d4af37 58%, #7a5c18 100%);

  /* ---- colori di stato (solo per dire com'è andata, mai decorativi) ---- */
  --verde: #4cd08a;   --verde-velo: rgba(76, 208, 138, 0.12);    /* NakamaColors.success */
  --ambra: #ff8a4c;   --ambra-velo: rgba(255, 138, 76, 0.12);    /* attenzione */
  --rosso: #ff6b6b;   --rosso-velo: rgba(255, 107, 107, 0.12);   /* NakamaColors.error */
  --blu: #5aa9ff;     --blu-velo: rgba(90, 169, 255, 0.12);      /* informazione, "in ascolto" */

  /* ---- forme ---- */
  --raggio-piccolo: 10px;                  /* menu, avvisi, miniature */
  --raggio: 14px;                          /* riquadri e card */
  --raggio-dialogo: 18px;                  /* finestre di dialogo */
  --pillola: 999px;                        /* pulsanti, etichette, linguette */
  --ombra: 0 4px 14px rgba(0, 0, 0, 0.5);
  --ombra-dialogo: 0 20px 60px rgba(0, 0, 0, 0.75);

  /* ---- caratteri ---- */
  --carattere: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;  /* tutto il testo */
  --marchio: Georgia, "Times New Roman", serif;                           /* solo marchio e titoli vetrina */
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;             /* percorsi, codice */

  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--testo); font: 14px/1.45 var(--carattere);
  -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accento); text-decoration: none; }
a:hover { color: var(--accento-chiaro); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; }
p { margin: 0; }
::selection { background: var(--accento-velo); }
:focus-visible { outline: 3px solid var(--testo); outline-offset: 2px; }  /* visibile da lontano, anche su TV */

/* Scala dei testi (uguale al TextTheme di Streaming): 32 · 28 · 20 · 16 · 14 · 12 · 11 */
.titolo-evidenza { font-size: 32px; font-weight: 900; line-height: 1.15; }
.titolo-pagina   { font-size: 28px; font-weight: 700; line-height: 1.2; }
.titolo-sezione  { font-size: 20px; font-weight: 700; line-height: 1.25; }
.titolo-voce     { font-size: 16px; font-weight: 700; line-height: 1.3; }
.dettaglio       { font-size: 12px; color: var(--testo-2); }
.etichetta-testo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-3); }
.testo-2 { color: var(--testo-2); }
.testo-3 { color: var(--testo-3); }
.mono { font-family: var(--mono); font-size: 13px; }
.nascosto { display: none !important; }

/* ---------- marchio: NAKAMA in serif oro spaziato, nome del prodotto sotto ---------- */
.marchio { display: flex; align-items: center; gap: 10px; }
.marchio img, .marchio svg { width: 32px; height: 32px; flex: none; }
.marchio-testo { display: grid; line-height: 1.15; }
.marchio-testo b { font-family: var(--marchio); font-weight: 400; font-size: 16px; letter-spacing: .24em; color: var(--accento); text-transform: uppercase; }
.marchio-testo span { font-size: 10.5px; letter-spacing: .34em; color: var(--testo-2); text-transform: uppercase; margin-top: 3px; }
.parola-marchio { font-family: var(--marchio); font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--accento); }
/* Titolo grande da sito vetrina (Spirit Lab): serif leggero, solo per pagine di presentazione */
.titolo-vetrina { font-family: var(--marchio); font-weight: 400; line-height: 1.16; font-size: clamp(34px, 5vw, 62px); }
.occhiello { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accento); }

/* ---------- pulsanti a pillola ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 18px;
  border-radius: var(--pillola); border: 2px solid var(--bordo-forte); background: transparent; color: var(--testo);
  font-weight: 700; letter-spacing: .02em; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s; }
.btn:hover { border-color: var(--accento); color: var(--accento); }
.btn.primario { background: var(--accento); border-color: var(--accento); color: var(--su-oro); font-weight: 900; letter-spacing: .04em; }
.btn.primario:hover { background: var(--accento-chiaro); border-color: var(--accento-chiaro); color: var(--su-oro); }
.btn.contorno { border-color: var(--accento); color: var(--accento); }
.btn.pericolo:hover { border-color: var(--rosso); color: var(--rosso); }
.btn:disabled, .btn.primario:disabled { background: transparent; border-color: var(--bordo-forte); color: var(--testo-3); cursor: default; pointer-events: none; }
.btn.piccolo { padding: 5px 13px; font-size: 13px; border-width: 1.5px; }
.btn.largo { width: 100%; padding: 12px; }
.btn-testo { background: none; border: 0; padding: 0; color: var(--accento); font-weight: 700; }
.btn-testo:hover { color: var(--accento-chiaro); }
.btn-icona { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--pillola);
  border: 0; background: transparent; color: var(--testo-2); transition: background .15s, color .15s; }
.btn-icona:hover { background: var(--accento-velo); color: var(--accento); }
.btn-icona.pericolo:hover { background: var(--rosso-velo); color: var(--rosso); }

/* ---------- campi sottolineati: oro quando attivi, rosso con errore ---------- */
.campo { display: grid; gap: 4px; }
.campo > span { font-size: 12px; font-weight: 700; color: var(--testo-2); }
.campo small { font-size: 12px; color: var(--testo-3); }
.input { width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--testo-3); border-radius: 0;
  padding: 9px 2px; outline: none; transition: border-color .15s; }
.input:hover { border-bottom-color: rgba(255, 255, 255, 0.6); }
.input:focus { border-bottom-color: var(--accento); }
.input.errore, .input:invalid:not(:placeholder-shown) { border-bottom-color: var(--rosso); }
.input::placeholder { color: var(--testo-3); }
textarea.input { min-height: 84px; resize: vertical; background: rgba(255, 255, 255, 0.03); padding: 9px 10px; border-radius: 6px 6px 0 0; }
select.input option { background: var(--fondo-2); color: var(--testo); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accento); }
.errore-testo { color: var(--rosso); font-size: 13px; }
.errore-testo:empty { display: none; }

/* interruttore acceso/spento */
.interruttore { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.interruttore input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.interruttore i { position: absolute; inset: 0; border-radius: var(--pillola); background: var(--pannello-2); border: 1px solid var(--bordo-forte); transition: background .2s; }
.interruttore i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--testo-2); transition: transform .2s, background .2s; }
.interruttore input:checked + i { background: var(--accento); border-color: var(--accento); }
.interruttore input:checked + i::after { transform: translateX(18px); background: var(--su-oro); }
.interruttore input:focus-visible + i { box-shadow: 0 0 0 3px var(--testo); }

/* ---------- riquadri ---------- */
.riquadro { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 16px 18px; }
.riquadro.attivabile { transition: border-color .2s; }
.riquadro.attivabile:hover { border-color: rgba(212, 175, 55, 0.45); }
.numero { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 14px 18px; }
.numero b { display: block; font-size: 28px; font-weight: 900; line-height: 1.2; }
.numero span { font-size: 12.5px; color: var(--testo-2); }
.numero.evidenza b { color: var(--accento); }

/* ---------- etichette e stato ---------- */
.etichetta { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--pillola); background: var(--accento-velo); color: var(--accento); white-space: nowrap; }
.etichetta.neutra { background: rgba(255, 255, 255, 0.08); color: var(--testo-2); }
.etichetta.verde { background: var(--verde-velo); color: var(--verde); }
.etichetta.ambra { background: var(--ambra-velo); color: var(--ambra); }
.etichetta.rossa { background: var(--rosso-velo); color: var(--rosso); }
.stato { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--testo-2); }
.stato::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--testo-3); flex: none; }
.stato.attiva { color: var(--verde); }  .stato.attiva::before { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.stato.attesa { color: var(--ambra); }  .stato.attesa::before { background: var(--ambra); }
.stato.spenta { color: var(--rosso); }  .stato.spenta::before { background: var(--rosso); box-shadow: 0 0 10px var(--rosso); }

/* ---------- navigazione ---------- */
.barra-alta { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--fondo-2); border-bottom: 1px solid var(--bordo); }
.linguetta { background: transparent; border: 2px solid transparent; color: var(--testo-2); border-radius: var(--pillola); padding: 5px 16px; font-weight: 700; }
.linguetta:hover { color: var(--testo); }
.linguetta.attiva { border-color: var(--accento); color: var(--accento); }
.voce-menu { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none;
  color: rgba(255, 255, 255, 0.6); text-align: left; font-weight: 700; }
.voce-menu:hover { background: rgba(255, 255, 255, 0.05); color: var(--testo); }
.voce-menu.attiva { background: var(--accento-velo); color: var(--accento); }
.scelta { padding: 6px 14px; border-radius: var(--pillola); border: 1.5px solid var(--bordo-forte); background: transparent; color: var(--testo-2); font-weight: 700; }
.scelta:hover { color: var(--testo); border-color: var(--testo-3); }
.scelta.attiva, .scelta[aria-pressed=true] { background: var(--accento); border-color: var(--accento); color: var(--su-oro); }

/* ---------- tabelle ---------- */
table.tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabella th { text-align: left; font-weight: 700; font-size: 12px; color: var(--testo-3); padding: 9px 16px; background: var(--fondo-2); }
.tabella td { padding: 10px 16px; border-top: 1px solid var(--bordo); }

/* ---------- finestre di dialogo e avvisi ---------- */
.velo { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: grid; place-items: center; padding: 20px; z-index: 50; }
.dialogo { width: min(560px, 100%); max-height: 100%; overflow: auto; background: var(--fondo-2); border: 1px solid var(--bordo);
  border-radius: var(--raggio-dialogo); box-shadow: var(--ombra-dialogo); padding: 22px 24px; display: grid; gap: 14px; }
.dialogo h2 { font-size: 20px; }
.avviso { background: var(--fondo-2); border: 1px solid var(--bordo-forte); border-left: 3px solid var(--accento);
  border-radius: var(--raggio-piccolo); padding: 11px 16px; box-shadow: var(--ombra); }
.avviso.ok { border-left-color: var(--verde); }
.avviso.attenzione { border-left-color: var(--ambra); }
.avviso.errore { border-left-color: var(--rosso); }

/* ---------- barre di scorrimento sottili ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border: 3px solid transparent; background-clip: padding-box; border-radius: var(--pillola); }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.36); }
::-webkit-scrollbar-thumb:active { background-color: rgba(212, 175, 55, 0.7); }