/* ============================================================
   Stile della webapp LARP. Le variabili e le classi u-* sono
   copiate da docs/05-RIFERIMENTO-UI.html (riferimento vincolante,
   approvato il 2026-08-12): non si reinventano.
   Classi aggiunte in questa fetta, con lo stesso criterio (tocchi
   da almeno 56px, un accento solo, niente colori nuovi): u-link,
   u-errore, u-banner, u-nascosto, e il padding di sicurezza per
   la tacca dell'iPhone su testa/piede.
   ============================================================ */

:root {
  /* LA RIGA CHE MANCAVA, ed e' la causa vera (2026-08-20).
     Senza color-scheme, Android e Samsung Internet applicano il LORO tema scuro
     automatico a una pagina che e' gia' scura: rigirano la chiarezza di ogni colore
     e il testo bianco esce marrone. Nessun colore scritto qui sotto puo' vincere
     contro quel rigiro: e' per questo che cambiare i colori, da solo, non bastava.
     Il gestionale ce l'ha dal commit b39309e; nella PWA non era mai arrivata. */
  color-scheme: dark;
  --fondo:    #16130f;
  --carta:    #211c16;
  --carta-2:  #2b241c;
  --bordo:    #3a3128;
  --testo:    #f2ece2;
  --testo-2:  #a89c8a;
  --oro:      #d9a441;
  --verde:    #6fa860;
  --ambra:    #d98f41;
  --rosso:    #c9563f;
  --r:        14px;
  /* I COLORI PER LE SCRITTE. Viola e rosso qui sopra restano per bordi, fondi e
     pallini; come TESTO sul fondo scuro fanno 2,7 e 4,3 di contrasto, sotto il 4,5
     che serve per leggere al buio. Questi sono gli stessi colori, schiariti.
     --oro-tasto e' l'oro dei pulsanti abbassato quanto basta perche' la scritta
     sopra possa essere BIANCA: sull'oro chiaro era per forza quasi nera. */
  --viola-testo: #a49cf0;
  --rosso-testo: #f0a58f;
  --oro-tasto:   #8a6417;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--fondo); }
#app { height: 100%; min-height: 100vh; }

.u-schermo { display:flex; flex-direction:column; height:100%; background:var(--fondo); color:var(--testo);
  font:400 17px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
.u-testa { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; padding-top:calc(14px + env(safe-area-inset-top)); border-bottom:1px solid var(--bordo); }
.u-chi { font-size:15px; color:var(--testo-2); }
.u-ora { font-size:15px; color:var(--testo-2); font-variant-numeric:tabular-nums; }
.u-corpo { flex:1 1 auto; overflow-y:auto; padding:18px; }
.u-piede { flex:0 0 auto; padding:14px 18px 20px; padding-bottom:calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--bordo); }

.u-adesso { background:var(--carta); border:1px solid var(--bordo); border-left:4px solid var(--oro);
  border-radius:0 var(--r) var(--r) 0; padding:16px 18px; margin-bottom:22px; }
.u-adesso-eti { font-size:14px; color:var(--oro); letter-spacing:.06em; text-transform:uppercase; margin:0 0 6px; }
.u-adesso-tit { font-size:26px; line-height:1.25; font-weight:500; margin:0 0 12px; }
.u-riga { display:flex; gap:10px; align-items:flex-start; font-size:17px; color:var(--testo-2); margin:7px 0; }
.u-riga b { color:var(--testo); font-weight:400; }
.u-ico { flex:0 0 20px; opacity:.65; }

.u-tit-sez { font-size:14px; color:var(--testo-2); letter-spacing:.06em; text-transform:uppercase;
  margin:26px 0 12px; }
.u-carta { background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r);
  padding:14px 16px; margin-bottom:10px; }
.u-carta-tit { font-size:19px; font-weight:500; margin:0 0 4px; }
.u-carta-sot { font-size:16px; color:var(--testo-2); margin:0; }

.u-tasto { display:block; width:100%; min-height:60px; border:0; border-radius:var(--r);
  background:var(--oro-tasto); color:#ffffff; font-size:19px; font-weight:500; cursor:pointer;
  font-family:inherit; }
.u-tasto:disabled { opacity:.45; cursor:not-allowed; }
.u-tasto-2 { background:transparent; color:var(--testo); border:1px solid var(--bordo); }
.u-tasti-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.u-tasti-3 button { min-height:56px; border-radius:10px; border:1px solid var(--bordo);
  background:transparent; color:var(--testo-2); font-size:15px; font-family:inherit; cursor:pointer; }
.u-tasti-3 button[data-on] { background:var(--carta-2); color:var(--testo); border-color:var(--testo-2); }
.u-tasti-3 button:disabled { cursor:default; }

.u-pat { display:inline-block; padding:4px 11px; border-radius:20px; font-size:14px; }
.u-pat-verde { background:rgba(111,168,96,.18); color:var(--verde); }
.u-pat-ambra { background:rgba(217,143,65,.18); color:var(--ambra); }
.u-pat-rosso { background:rgba(201,86,63,.18); color:var(--rosso-testo); }
.u-pat-neutro{ background:var(--carta-2); color:var(--testo-2); }

.u-campo { width:100%; min-height:56px; box-sizing:border-box; padding:0 16px; margin-bottom:10px;
  background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r);
  color:var(--testo); font-size:18px; font-family:inherit; }
.u-campo::placeholder { color:var(--testo-2); }
.u-eti { font-size:15px; color:var(--testo-2); margin:18px 0 10px; }
.u-scelte { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.u-scelta { min-height:56px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--bordo); border-radius:var(--r); background:transparent;
  color:var(--testo-2); font-size:17px; font-family:inherit; cursor:pointer; }
.u-scelta[data-on] { border-color:var(--oro); color:var(--oro); background:rgba(217,164,65,.1); }

.u-griglia { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.u-cella { background:var(--carta); border:1px solid var(--bordo); border-left:4px solid var(--bordo);
  border-radius:0 10px 10px 0; padding:11px 13px; }
.u-cella-v { border-left-color:var(--verde); }
.u-cella-a { border-left-color:var(--ambra); }
.u-cella-r { border-left-color:var(--rosso); }
.u-cella-n { font-size:17px; margin:0 0 2px; }
.u-cella-m { font-size:14px; margin:0 0 2px; }
.u-cella-s { font-size:14px; color:var(--testo-2); margin:0; }

.u-vuoto { text-align:center; padding:60px 20px; color:var(--testo-2); }
.u-vuoto-t { font-size:22px; color:var(--testo); margin:0 0 10px; }

/* --- aggiunte fetta 5 --- */
.u-link { background:none; border:0; color:var(--oro); font-size:15px; text-decoration:underline;
  padding:10px 0; cursor:pointer; font-family:inherit; text-align:left; }
.u-indietro { background:var(--carta); border:1px solid var(--bordo); border-radius:10px;
  color:var(--oro); font-size:32px; line-height:1; min-width:52px; min-height:52px; padding:0;
  margin:0 0 10px; cursor:pointer; font-family:inherit; display:flex; align-items:center;
  justify-content:center; }
.u-errore { color:var(--rosso-testo); font-size:15px; min-height:20px; margin:2px 0 10px; }
.u-banner { background:var(--carta-2); border-bottom:1px solid var(--ambra); color:var(--ambra);
  font-size:14px; padding:8px 14px; text-align:center; flex:0 0 auto; }
.u-nascosto { display:none !important; }

/* --- aggiunte fetta 12.4: le due schede Operativo/Profilo, con la grafica del gestionale
   (13px, peso 500, sottolineatura #534AB7 sull'attiva) --- */
.u-tabs { display:flex; gap:18px; padding:0 18px; border-bottom:1px solid var(--bordo); flex:0 0 auto; }
.u-tab { background:none; border:0; border-bottom:2px solid transparent; font:inherit; font-size:13px;
  font-weight:500; color:var(--testo-2); padding:11px 0; cursor:pointer; }
.u-tab.active { color:var(--viola-testo); border-bottom-color:var(--viola-testo); }

/* --- aggiunte fetta 13.1: la seconda riga di schede DENTRO Operativo, solo per coordinamento e
   admin (Squadre · PNG · Scaletta · Oggetti). Stesso aspetto della riga sopra ma più piccola,
   sottolineatura #d9a441 (l'oro dell'app) invece del viola, per non confonderla con Operativo/Profilo. --- */
.u-subnav { display:flex; gap:16px; margin:-4px 0 16px; border-bottom:1px solid var(--bordo); }
.u-subtab { background:none; border:0; border-bottom:2px solid transparent; font:inherit; font-size:12px;
  font-weight:500; color:var(--testo-2); padding:0 0 9px; cursor:pointer; }
.u-subtab.on { color:var(--oro); border-bottom-color:var(--oro); }
.chiama { display:inline-block; font-size:13px; color:var(--oro); border:1px solid var(--bordo);
  border-radius:8px; padding:4px 10px; text-decoration:none; margin-left:4px; }

/* --- aggiunte fetta 12.3: SOLA la scaletta usa la grafica del gestionale (eccezione voluta,
   vedi docs/07-SCHERMATE-PWA.html) — stessi colori, stesse misure, orari in Courier New. --- */
.g-scaletta { background:#242220; border:1px solid #3a3835; border-radius:6px; overflow:hidden;
  font-family:system-ui,-apple-system,sans-serif; margin-bottom:10px; }
/* La riga si ADATTA al testo: niente taglio con i puntini. Al buio, in mezzo a un campo, una nota
   tagliata a metà è peggio di una riga alta il doppio — se non si legge tutta, non serve.
   `align-items:flex-start` tiene ora, etichetta e numero in cima quando la nota va a capo. */
.g-slot { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-bottom:1px solid #2e2c2a; min-height:30px; }
.g-slot:last-child { border-bottom:0; }
/* Gli orari sono BIANCHI: erano #555 e non si leggevano (detto dall'utente il 2026-08-17).
   Sono l'informazione più cercata di tutta la schermata, non un dettaglio di contorno. */
.g-ora { width:46px; flex-shrink:0; font-size:12px; color:var(--testo); font-family:'Courier New',monospace; text-align:right; line-height:1.5; }
/* Anche l'etichetta del tipo va a capo se il nome è lungo, invece di stringere la nota. */
.g-tipo { font-size:11px; font-weight:500; color:#fff; padding:2px 8px; border-radius:4px; flex-shrink:0; max-width:40%; overflow-wrap:anywhere; line-height:1.45; }
.g-tipo-vuoto { font-size:11px; color:var(--testo-2); border:1px dashed #3a3835; border-radius:4px; padding:1px 8px; flex-shrink:0; line-height:1.45; }
.g-mis { font-size:12px; font-weight:600; color:var(--viola-testo); flex-shrink:0; line-height:1.5; }
.g-nota { font-size:13px; color:var(--testo); line-height:1.5; overflow-wrap:anywhere; }