/* WebCar Guardian — token e componenti dell'anima «Il Rapporto» (fondazione).
 *
 * Fonte: docs/guardian-mockup/guardian-mockup-v3.html (anima unica scelta
 * dalla Direzione, 03/09) — ogni valore porta accanto il ratio AA della
 * coppia peggiore, CALCOLATO PRIMA del CSS (lezione NOTE-QA del v2).
 *
 * Tutto è sotto namespace `gdn`: variabili `--gdn-*` e classi `.gdn-*`,
 * così NIENTE tocca gli stili esistenti dell'Area Clienti — questa è
 * fondazione per le viste Guardian future, non un refactor. Le viste del
 * portale di oggi non usano nessuna di queste classi.
 */

:root {
  --gdn-fondo:       #EEF1F5;  /* grigio freddissimo di pagina            */
  --gdn-carta:       #FFFFFF;  /* card                                     */
  --gdn-ink:         #16233A;  /* testo primario     (13,88 su fondo)      */
  --gdn-navy:        #0E3A6E;  /* primario / CTA     (10,02 su fondo)      */
  --gdn-navy-scuro:  #152B4A;  /* fasce ufficiali, targa                   */
  --gdn-muted:       #51607A;  /* secondario su chiaro (5,61 su fondo)     */
  --gdn-muted-navy:  #AFC2DC;  /* secondario su navy   (6,26)              */
  --gdn-bianco-navy: #FFFFFF;  /* testo su navy       (11,36)              */
  --gdn-rosso:       #B4231F;  /* SOLO allerta e SOS  (5,79 su fondo)      */
  --gdn-rosso-bg:    #FBE9E7;  /* fondo avviso        (5,60 col rosso)     */
  --gdn-verde:       #1D6B43;  /* esito positivo      (6,49 su bianco)     */
  --gdn-verde-bg:    #E6F4EC;  /* fondo esito         (5,72 col verde)     */
  --gdn-ambra:       #8A5800;  /* esito da verificare (6,04 su bianco)     */
  --gdn-ambra-bg:    #FBF1DC;  /* fondo esito         (5,38 con ambra)     */
  --gdn-linea:       #D7DEE8;  /* hairline                                 */
  --gdn-azzurro-bg:  #E7EEF7;  /* selezioni quiete    (9,72 col navy)      */

  /* Gradiente notte→elettrico della veste WebCar (campione-colori.html,
     approvato dalla Direzione): #0a1526 → #10223f → #38b6ff. Serve ai
     riquadri-icona su fondo chiaro — il primo è quello dell'invito
     «Aggiungi a Home». Non è mai un fondo di testo: sopra ci va solo il
     marchio su scuro. */
  --gdn-grad-notte-elettrico: linear-gradient(145deg, #0a1526 0%, #14356b 58%, #38b6ff 118%);
}

/* ── Timbro: il verdetto visibile (verificato / da verificare / dichiarato /
      allerta). Stesse quattro varianti del mockup v3. ─────────────────── */
.gdn-timbro {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.gdn-timbro .gdn-ic { width: 11px; height: 11px; stroke-width: 2.4; }
.gdn-timbro.is-ok      { color: var(--gdn-verde); background: var(--gdn-verde-bg); }
.gdn-timbro.is-attesa  { color: var(--gdn-ambra); background: var(--gdn-ambra-bg); }
.gdn-timbro.is-dich    { color: var(--gdn-muted); background: var(--gdn-fondo); }
.gdn-timbro.is-allerta { color: var(--gdn-rosso); background: var(--gdn-rosso-bg); }

/* ── Timbro d'ETA' della copia offline (C19-PR3): non e' uno dei quattro
      verdetti, e' un avviso di CONTESTO — sta sopra la lista, non accanto a
      una riga, perche' riguarda tutto cio' che si sta guardando. ─────────── */
.gdn-copia-timbro {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  background: var(--gdn-ambra-bg); color: var(--gdn-ambra);
  font-size: 12.5px; font-weight: 600;
}

/* ── Riga da estratto conto: il modo Guardian di elencare fatti e cifre. ── */
.gdn-riga {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--gdn-linea);
}
.gdn-riga.is-prima { border-top: 0; padding-top: 4px; }
.gdn-riga .gdn-quadro {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
  background: var(--gdn-azzurro-bg); color: var(--gdn-navy);
  display: flex; align-items: center; justify-content: center;
}
.gdn-riga .gdn-quadro .gdn-ic { width: 19px; height: 19px; }
.gdn-riga .gdn-quadro.is-rosso { background: var(--gdn-rosso-bg); color: var(--gdn-rosso); }
.gdn-riga .gdn-voce { flex: 1; min-width: 0; }
.gdn-riga .gdn-voce b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.gdn-riga .gdn-voce span { display: block; font-size: 11.5px; color: var(--gdn-muted); margin-top: 1px; }
.gdn-riga .gdn-cifra { text-align: right; flex: 0 0 auto; }
.gdn-riga .gdn-cifra b { display: block; font-size: 13.5px; font-weight: 700; }
.gdn-riga .gdn-cifra span { display: block; font-size: 11px; color: var(--gdn-muted); margin-top: 1px; }

.gdn-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ── Invito A2HS: il VESTITO se n'è andato da qui (mandato Direzione
      08/09). La riga di carta è diventata una carta premium della famiglia
      delle tessere dell'Area, e vive in `webcar-portal.css` sotto le classi
      `.portal-a2hs-*`: sta con le regole del portale che riusa (il bottone
      primario, il link discreto), non con i token dell'anima. Di quel
      componente qui resta SOLO il token del gradiente, qui sopra. */

/* ── Funzione Plus (gates freemium, verdetto #466): blocco gentile, mai un
      vicolo cieco — il valore spiegato e due strade sempre cliccabili. ── */
.gdn-plus {
  background: var(--gdn-carta); border: 1px solid var(--gdn-linea);
  border-radius: 14px; padding: 22px 20px; text-align: center;
  display: grid; justify-items: center; gap: 8px; color: var(--gdn-ink);
}
.gdn-timbro.is-plus { color: var(--gdn-navy); background: var(--gdn-azzurro-bg); letter-spacing: 0.08em; }
.gdn-plus h3 { margin: 2px 0 0; font-size: 16px; color: var(--gdn-navy); letter-spacing: -0.01em; }
.gdn-plus p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gdn-muted); max-width: 34rem; }
.gdn-plus-azioni { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.gdn-plus .portal-primary-action { width: auto; padding: 10px 16px; font-size: 13px; }

/* C1b — i ripiani dell'Armadio (05/09): l'intestazione di sezione e lo slot
   «Da caricare». Pin gt4: il gt3 è prenotato dalla #502 (onboarding) ancora
   in volo — due treni non viaggiano mai sotto lo stesso pin. */
.gdn-ripiano { margin: 14px 2px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gdn-inchiostro-tenue, #5b6b83); }
.gdn-riga.is-slot { opacity: 0.78; }
.gdn-riga.is-slot .gdn-quadro { opacity: 0.7; }

/* Tutela incidente (C14): i passi e le prove della demo dichiarata */
.gdn-tutela-passi{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.gdn-tutela-passo{font:600 11px/1 var(--gdn-font-sans,inherit);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid var(--gdn-linea,#e2e8f0);color:var(--gdn-muto,#64748b)}
.gdn-tutela-passo.is-attivo{color:var(--gdn-inchiostro,#0f172a);border-color:var(--gdn-inchiostro,#0f172a)}
.gdn-tutela-prove{display:grid;gap:8px;margin-top:12px}

/* Cattura guidata (C14b, 22/09): le quattro riprese e l'obiettivo.
   L'anteprima e' 4:3 e con `aspect-ratio` + `max-width:100%`: un <video> senza
   proporzione dichiarata si apre alla dimensione del flusso e a 390 spinge la
   pagina fuori schermo prima ancora che il fotogramma arrivi. */
.gdn-cattura { margin-top: 12px; }
.gdn-cattura-riprese { display: grid; gap: 0; }
.gdn-cattura-riprese .gdn-riga:first-child { border-top: 0; }
.gdn-cattura-avvia { flex: 0 0 auto; margin-left: 4px; }
.gdn-cattura-obiettivo {
  margin-top: 12px; padding: 12px; border-radius: 14px;
  background: var(--gdn-carta); border: 1px solid var(--gdn-linea);
}
.gdn-cattura-guida {
  margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--gdn-ink);
}
.gdn-cattura-video {
  display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3;
  border-radius: 10px; background: var(--gdn-navy-scuro); object-fit: cover;
  margin-bottom: 12px;
}
/* L'avviso di guasto non e' una nota fra le altre: ha il colore dell'allerta,
   perche' chi lo legge ha appena visto una ripresa NON partire. */
.gdn-cattura [data-cattura-avviso] {
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--gdn-rosso-bg); color: var(--gdn-rosso);
  font-size: 12.5px; font-weight: 600;
}
@media (max-width: 480px) {
  /* A 390 la riga della ripresa sta su due piani: il bottone va sotto, largo,
     perche' un bersaglio da 24 px accanto a un timbro si sbaglia col dito. */
  .gdn-cattura-riprese .gdn-riga { flex-wrap: wrap; }
  .gdn-cattura-riprese .gdn-riga .gdn-voce { flex: 1 1 70%; }
  .gdn-cattura-avvia { flex: 1 1 100%; margin: 8px 0 0; }
}

/* ── A CHE PUNTO E' LA PRATICA · la linea del tempo del sinistro ─────────
      Cinque passi, dalla denuncia alla liquidazione. Il punto pieno e' un
      fatto avvenuto, l'anello e' dove si e' adesso, il punto vuoto e' cio'
      che viene dopo — e «dopo» non porta mai una data: nessuno l'ha
      promessa, e una data prevista su una pratica si legge come impegno.

      La forma cambia oltre al colore (pieno / anello / vuoto): chi non
      distingue il verde dal grigio deve poter leggere lo stesso la riga. */
/* IL TETTO DI LARGHEZZA NON E' ESTETICA. Il blocco sta fuori dal contenitore
   a colonne della vista, quindi a 1440 si allargava a tutto lo schermo e il
   timbro finiva a un palmo dalla riga a cui appartiene: si vedeva «Poi» in
   fondo a destra e non si capiva di quale passo parlasse. L'ho visto
   guardando la fotografia, non contando i PASS. */
.gdn-sinistro { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gdn-linea, #D7DEE8); max-width: 760px; }
.gdn-sinistro-titolo { margin: 0 0 4px; font-size: 15px; font-weight: 750; color: var(--gdn-ink); }
.gdn-sinistro-ora { margin: 0 0 14px; font-size: 12.5px; color: var(--gdn-muted); }
.gdn-sinistro-ora.is-avviso { color: var(--gdn-rosso); font-weight: 650; }
.gdn-sinistro-lista { list-style: none; margin: 0; padding: 0; }
.gdn-sinistro-passo {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 10px;
  align-items: start; padding: 9px 0; position: relative;
}
/* Il filo che unisce i passi: parte dal punto e arriva al successivo. Non
   sull'ULTIMO, o sembrerebbe che dopo «Liquidato» venga ancora qualcosa. */
.gdn-sinistro-passo:not(:last-child)::before {
  content: ""; position: absolute; left: 8px; top: 24px; bottom: -2px;
  width: 2px; background: var(--gdn-linea, #D7DEE8);
}
.gdn-sinistro-punto {
  width: 18px; height: 18px; border-radius: 50%; margin-top: 2px;
  border: 2px solid var(--gdn-linea, #D7DEE8); background: var(--gdn-carta);
  box-sizing: border-box;
}
.gdn-sinistro-passo.is-fatto  .gdn-sinistro-punto { background: var(--gdn-verde); border-color: var(--gdn-verde); }
.gdn-sinistro-passo.is-adesso .gdn-sinistro-punto { border-color: var(--gdn-navy); border-width: 5px; }
.gdn-sinistro-passo.is-dopo   .gdn-sinistro-punto { background: var(--gdn-carta); }
.gdn-sinistro-passo.is-dopo   .gdn-voce b,
.gdn-sinistro-passo.is-dopo   .gdn-voce span { color: var(--gdn-muted); }
.gdn-sinistro-passo .gdn-voce { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gdn-sinistro-passo .gdn-voce b { font-size: 13.5px; font-weight: 700; color: var(--gdn-ink); }
.gdn-sinistro-passo .gdn-voce span { font-size: 12px; color: var(--gdn-muted); }

/* A 390 il timbro va sotto, non accanto: con tre colonne la spiegazione si
   riduce a una colonnina di due parole per riga. */
@media (max-width: 480px) {
  .gdn-sinistro-passo { grid-template-columns: 18px 1fr; }
  .gdn-sinistro-passo .gdn-timbro { grid-column: 2; justify-self: start; margin-top: 4px; }
}