/* Cio' che serve a una vista sola. Raggruppato per vista, cosi' togliere una
   vista vuol dire togliere il suo blocco qui. */

/* --- flotta: le strade per arrivare a un display --- */
.strada { background: var(--panel-2); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.strada .titolo { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 9px; }

/* --- flotta: l'elenco sopra (scorre se i display sono tanti), i dettagli sotto --- */
.elenco-scorre { max-height: 46vh; overflow: auto; }
.elenco-scorre thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.scheda-display { border-color: color-mix(in srgb, var(--area) 45%, var(--line)); scroll-margin-top: 16px; }
.titolo-scheda { display: flex; gap: 10px; align-items: baseline; font-size: 17px; color: var(--text);
  text-transform: none; letter-spacing: 0; }
.scheda-display .licenze { grid-template-columns: 1fr; }
#vend-form input[type=date] { min-width: 140px; }
#vend-form input[type=text] { min-width: 120px; }

/* --- licenze: cosa un display puo' caricare (tipo-app | tipo-optional | tipo-base:
   mai ".app", che e' il guscio della pagina) --- */
.licenze { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 6px 0 4px; }
.licenza { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px;
  border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); }
.licenza .nome { font-weight: 600; }
.licenza .quando { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.licenza.tipo-app { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.licenza.tipo-base { opacity: .7; }
.licenza.scaduto { border-color: color-mix(in srgb, var(--err) 55%, var(--line)); }
.licenza.scaduto .quando { color: var(--err); }

/* --- adozioni: i passi di un display che entra --- */
.passi { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.passo { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.passo .pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .35; flex: none; }
.passo.fatto { color: var(--ok); }
.passo.fatto .pallino { background: var(--ok); opacity: 1; }
.passo.corrente { color: var(--text); }
.passo.corrente .pallino { background: var(--warn); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent); }
.codice-display { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; letter-spacing: .14em; }
.richiesta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px 18px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line); }
.richiesta:last-child { border-bottom: none; }
@media (max-width: 900px) { .richiesta { grid-template-columns: 1fr; } }

/* --- infrastruttura: mappa di rete --- */
.mappa { width: 100%; height: auto; }
.nodo { cursor: pointer; }
.nodo rect, .nodo circle { transition: stroke-width .12s; }
.nodo:hover rect, .nodo:hover circle { stroke-width: 2.4; }
.nodo.scelto rect, .nodo.scelto circle { stroke-width: 2.8; }
.nodo text { pointer-events: none; }
.filo { stroke-dasharray: 5 4; }
@keyframes scorre { to { stroke-dashoffset: -36; } }
.filo.vivo { animation: scorre 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .filo.vivo { animation: none; } }
.legenda { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 12px; align-items: center; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fatti { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.fatto { font-size: 11px; color: var(--muted); white-space: nowrap; }
.fatto b { color: var(--text); font-weight: 600; }
.fatto.v-ok b { color: var(--ok); } .fatto.v-warn b { color: var(--warn); } .fatto.v-err b { color: var(--err); }

/* --- impostazioni: gruppi di campi --- */
.gruppo { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.gruppo h3 { margin: 0 0 14px; }

/* --- squadra: il programma di una gara (scheda Fasi) --- */
.tabella-fasi td { vertical-align: middle; }
.tabella-fasi select { min-width: 220px; }
.durata { display: inline-flex; gap: 6px; align-items: center; }
.durata-pezzo { display: inline-flex; align-items: center; gap: 4px; }
.durata-pezzo input { width: 64px; text-align: right; padding: 7px 8px; }
.durata-pezzo span { color: var(--muted); font-size: 12px; }
.durata.sbagliata input { border-color: var(--err); }
.tabella-fasi .ora { color: var(--muted); white-space: nowrap; }
.fasi-fine { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); }
.legenda-fasi { margin-top: 10px; }
.passi-testo { margin: 0 0 12px; padding-left: 20px; color: var(--text); }
.passi-testo li { margin: 4px 0; }
.interruttore { width: 100%; justify-content: flex-start; padding: 12px 14px; font-size: 14px; }

/* --- squadra: gli stint di una gara (scheda Stint) --- */
.stint-comando { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.stint-comando.congelato { box-shadow: inset 0 0 0 1px var(--warn); }
.stint-comando .hint { margin: 4px 0 0; }
.stint-interruttore { display: inline-flex; gap: 6px; }
/* le regole: un riquadro per domanda, una riga per regola col campo a destra */
.stint-regole { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 14px; margin-bottom: 14px; }
.stint-reg-gruppo { display: grid; gap: 2px; align-content: start; padding: 12px 16px 8px; border-radius: 8px; background: var(--panel-2); }
.stint-reg-gruppo .stint-gruppo { margin: 0 0 6px; }
.stint-reg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; font-size: 13.5px; color: var(--text); }
.stint-reg b { font-weight: 600; }
.stint-reg .hint { display: block; margin: 2px 0 0; font-size: 12px; font-weight: 400; }
.stint-reg.spunta { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.stint-reg.spunta input { margin-top: 3px; }
.stint-reg-campo { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.stint-reg-campo input[type=number] { width: 72px; }
.stint-reg-campo input:not([type=number]) { width: 120px; }
.stint-reg-campo select { width: 190px; }
.stint-reg-campo i { font-style: normal; font-size: 12px; color: var(--muted); }
#sti-anteprima { margin: 6px 0; }
.stint-adatta { align-items: flex-start; margin: 4px 0 8px; }
.stint-adatta input { margin-top: 3px; }
.stint-adatta .hint { display: block; margin: 2px 0 0; }
.stint-totali { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 12px;
  padding: 10px 12px; border-radius: 8px; background: var(--panel-2); font-size: 13px; }
.stint-pilota { display: inline-flex; align-items: center; gap: 6px; }
.stint-pilota i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
/* Le colonne e le corsie dal vivo ci sono solo quando arriva il reale. */
.stint-vettura:not(.con-vivo) .col-vivo { display: none; }

/* La linea del tempo: etichette a sinistra, corsie sulla stessa scala, e le
   guide (cambi del piano, ora) che le attraversano tutte. */
.stint-linea { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; margin: 26px 0 28px; }
/* le tacche orarie, dall'asse fino in fondo alle corsie */
.stint-tacche { position: absolute; left: 0; right: 0; top: 17px; bottom: 0; pointer-events: none; z-index: 1; }
.stint-tacche i { position: absolute; top: 0; bottom: 0; border-left: 1px solid color-mix(in srgb, var(--muted) 16%, transparent); }
.stint-tacche i.forte { border-left-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.stint-linea-etichette, .stint-linea-corpo { display: grid; grid-auto-rows: auto; gap: 5px; align-content: start; }
.stint-linea-etichette span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; height: 30px; white-space: nowrap; }
.stint-linea-etichette span:first-child, .stint-asse { height: 16px; }
.stint-linea-etichette .stint-eti-eventi { height: 28px; }
.stint-linea-etichette span:last-child, .stint-scarti { height: 22px; }
.stint-linea-corpo { position: relative; }
.stint-asse { position: relative; }
.stint-asse span { position: absolute; transform: translateX(-50%); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.stint-asse span.primo { transform: none; }
.stint-asse span.ultimo { transform: translateX(-100%); }
.stint-pista { position: relative; height: 30px; border-radius: 6px; background: var(--panel-2); }
.stint-vettura { position: relative; }
.stint-pista > span { position: absolute; top: 3px; bottom: 3px; box-sizing: border-box; border-radius: 4px; padding: 0 6px;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; font-weight: 700; color: #0e1117; }
.stint-pista > .piano { border: 2px solid var(--c); color: var(--text); font-weight: 600;
  background: color-mix(in srgb, var(--c) 22%, transparent); cursor: grab; touch-action: pan-y; user-select: none; }
.stint-pista > .piano:hover, .stint-pista > .piano:focus-visible { background: color-mix(in srgb, var(--c) 42%, transparent); outline: none; }
.stint-pista > .piano.fermo { cursor: pointer; }
.stint-pista > .piano.bloccato::before { content: "🔒"; margin-right: 4px; font-size: 10px; }
.stint-pista > .piano.fissato::before { content: "📌"; margin-right: 4px; font-size: 10px; }
.stint-pista > .piano.sbagliato { border-color: var(--err); }
.stint-pista > .piano.trascinato { opacity: .4; cursor: grabbing; }
.stint-pista > .scelto { box-shadow: 0 0 0 2px var(--text); z-index: 2; }
.stint-trascina, .stint-trascina * { cursor: grabbing !important; }
.stint-tira, .stint-tira * { cursor: col-resize !important; user-select: none; }
.stint-pista > .stint-bordo { position: absolute; top: 0; bottom: 0; width: 11px; margin-left: -5px; z-index: 3; cursor: col-resize; touch-action: none; }
.stint-pista > .stint-bordo::after { content: ""; position: absolute; top: 3px; bottom: 3px; left: 4px; width: 3px; border-radius: 2px; background: transparent; }
.stint-pista > .stint-bordo:hover::after { background: var(--text); }
.stint-inserisci.limite { background: var(--err); }
.stint-inserisci { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--text); z-index: 3; pointer-events: none; }
/* la sospensione sulla linea: tratteggiata, gialla se in parco chiuso */
.stint-pista > .pausa { color: var(--muted); font-weight: 600; border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, var(--panel-3) 0 6px, transparent 6px 12px); }
.stint-pista > .pausa.prova { color: var(--text); border-color: var(--c);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, transparent) 0 6px, transparent 6px 12px); }
.stint-pista > .pausa.chiuso { color: var(--warn); border-color: var(--warn); }
.stint-pista > .pausa[role=button] { cursor: pointer; }
.stint-pista > .pausa[role=button]:hover, .stint-pista > .pausa[role=button]:focus-visible { background-color: var(--panel-3); outline: none; }
.stint-pista > .vuota { color: var(--muted); font-weight: 400; border: 1px dashed var(--line); }
.stint-pista > .vuota[role=button] { cursor: pointer; color: var(--text); }
/* la finestrella di un tratto */
.stint-pop { position: absolute; z-index: 20; width: min(320px, calc(100% - 16px)); box-sizing: border-box; padding: 12px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 28px rgb(0 0 0 / .45); font-size: 13px; }
.stint-pop h3 { margin: 0 24px 10px 0; font-size: 14px; }
.stint-pop h3 .sub { font-weight: 400; margin-left: 4px; }
.stint-pop .field { margin-bottom: 10px; }
.stint-pop select { width: 100%; }
.stint-pop .casella { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.stint-pop-blocca { align-items: flex-start !important; }
.stint-pop .actions { margin: 8px 0 0; }
.stint-pop-x { position: absolute; top: 8px; right: 8px; padding: 2px 7px; font-size: 12px; }
.stint-pista > .vero { background: var(--c); }
.stint-pista > .corre { background: var(--c); box-shadow: inset 0 0 0 2px var(--text); }
.stint-pista > .prev { color: var(--text); border: 1px dashed var(--c);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 50%, transparent) 0 6px, color-mix(in srgb, var(--c) 20%, transparent) 6px 12px); }
.stint-pista > .oltre { top: 0; bottom: 0; border-radius: 0 4px 4px 0; padding: 0;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--err) 75%, transparent) 0 4px, transparent 4px 8px); }
.stint-scarti { position: relative; }
.stint-scarti span { position: absolute; transform: translateX(-50%); padding: 1px 6px; border-radius: 4px; background: var(--panel-3);
  font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.stint-scarti .verde, .stint-scarto.verde { color: var(--ok); }
.stint-scarti .giallo, .stint-scarto.giallo { color: var(--warn); }
.stint-scarti .rosso, .stint-scarto.rosso { color: var(--err); }
.stint-scarti .previsto, .stint-scarto.previsto { color: var(--area-squadra); }
.stint-scarti .uguale { color: var(--muted); }
.stint-scarto { font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.stint-guide { position: absolute; left: 0; right: 0; top: 21px; bottom: 0; pointer-events: none; }
.stint-guide i { position: absolute; top: 0; bottom: 0; border-left: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent); }
.stint-guide i.ora { border-left: 2px solid var(--text); margin-left: -1px; }
/* L'ora sta sull'asse, sopra le tacche che copre. */
.stint-guide i.ora b { position: absolute; top: -21px; left: 0; transform: translateX(-50%); z-index: 1;
  font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bg); background: var(--text);
  white-space: nowrap; padding: 0 5px; border-radius: 4px; }
.stint-stato { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; }
.stint-stato .v-err { flex-basis: 100%; font-size: 12px; }

/* La plancia dal vivo: chi guida e il prossimo cambio, poi i piloti. */
.stint-plancia { display: grid; gap: 10px; margin: 8px 0 6px; }
.stint-p-alto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.stint-p-box { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: 8px; background: var(--panel-2); min-width: 0; }
.stint-p-etich { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stint-p-grande { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 18px; font-weight: 700; }
.stint-p-grande .sub { font-size: 13px; font-weight: 400; }
.stint-p-grande .stint-pilota i { width: 12px; height: 12px; }
.stint-p-perche { font-size: 12px; color: var(--muted); }
.stint-p-perche.v-err { color: var(--err); }
.stint-guida { position: relative; height: 10px; border-radius: 5px; background: var(--panel-3); }
.stint-guida .fatto { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.stint-guida .tacca { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); }
.stint-guida .tacca.max { background: var(--err); }
.stint-scala { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); }
/* il quadro dei piloti, in testa alla scheda */
.stint-q-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.stint-q { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: 8px; background: var(--panel-2);
  border-left: 4px solid var(--c); font-size: 13px; min-width: 0; }
.stint-q.macchina { box-shadow: inset 0 0 0 1px var(--c); }
.stint-q-testa { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.stint-q dl { display: grid; gap: 4px; margin: 2px 0; }
.stint-q dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.stint-q dt { color: var(--muted); font-size: 12px; }
.stint-q dd { margin: 0; font-weight: 700; text-align: right; }
.stint-q dd .sub { font-weight: 400; }
/* i vincoli di una vettura */
.stint-v { display: grid; gap: 8px; margin: 10px 0; padding: 12px 14px; border-radius: 8px; background: var(--panel-2); font-size: 13px; }
.stint-fissi { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.stint-fisso { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.stint-fisso s { color: var(--muted); }
.stint-fisso.sosta button { padding: 2px 8px; font-size: 12px; }
.stint-v .actions { margin: 0; }
.stint-v-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.stint-v-lista li::before { content: "● "; }
.stint-v-lista .ok::before { color: var(--ok); }
.stint-v-lista .err { color: var(--err); }
.stint-v-lista .warn { color: var(--warn); }
.stint-v-lista .info { color: var(--muted); }
.stint-proposta { display: grid; gap: 6px; margin: 8px 0; padding: 10px 14px; border-radius: 8px;
  border: 1px dashed var(--area-squadra); font-size: 13px; }
.stint-proposta .stint-totali { margin-top: 0; }
/* gli eventi sulla linea: via, ripartenze, bandiera, rifornimenti, soste */
.stint-eventi { position: relative; height: 28px; }
.stint-eventi [data-eventi] { position: absolute; inset: 0; pointer-events: none; }
.stint-eventi b.via { position: absolute; left: 0; top: 5px; padding: 1px 6px; border-radius: 4px; font-size: 11px; letter-spacing: .04em;
  color: #0e1117; background: var(--ok); }
.stint-eventi i { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; line-height: 28px; pointer-events: auto; }
.stint-eventi i.rif { font-size: 20px; }
.stint-eventi i.rif[data-rif] { cursor: ew-resize; touch-action: none; user-select: none; }
.stint-eventi i.rif.manuale small { position: absolute; left: 62%; top: -3px; line-height: 1; font-size: 11px; }
/* il rifornimento: la fascia in cui e' plausibile, non un istante */
.stint-eventi em.rif-fascia { position: absolute; top: 2px; bottom: 2px; min-width: 2px; box-sizing: border-box; pointer-events: auto; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--warn) 70%, transparent); background: color-mix(in srgb, var(--warn) 22%, transparent); }
.stint-eventi em.rif-fascia.col-cambio { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 20%, transparent); }
/* il rifornimento fatto col cambio: la pompa scende fino al cambio */
.stint-eventi i.rif.col-cambio::after { content: ""; position: absolute; left: 50%; top: 26px; height: 32px; border-left: 2px solid var(--ok); margin-left: -1px; pointer-events: none; }
.stint-eventi i.ripartenza { font-size: 12px; color: var(--ok); }
.stint-eventi i.bandiera { left: auto; right: 0; transform: none; font-size: 20px; }
.stint-eventi i.fatto { opacity: .45; }
.stint-pompa { font-size: 20px; line-height: 1; vertical-align: -2px; }
.stint-eventi [data-eventi] > span { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; min-width: 2px;
  background: repeating-linear-gradient(135deg, var(--muted) 0 3px, transparent 3px 6px); }
.stint-pista > .da-piano { color: var(--text); background: color-mix(in srgb, var(--c) 35%, transparent); }
/* serbatoio e quote */
.stint-gruppo { margin: 14px 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stint-serbatoio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 28px; }
.stint-serbatoio .stint-gruppo { margin-top: 0; }
.stint-durata { margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: var(--panel-2); }
.stint-quote { width: 100%; border-collapse: collapse; }
.stint-quote th { text-align: left; font-size: 11px; font-weight: 400; color: var(--muted); padding: 2px 8px 4px 0; }
.stint-quote td { padding: 4px 8px 4px 0; vertical-align: middle; }
.stint-quote input { width: 84px; }
/* i consumi */
.stint-consumi { width: 100%; border-collapse: collapse; font-size: 13px; }
.stint-consumi th { text-align: left; font-size: 11px; font-weight: 400; color: var(--muted); padding: 4px 12px 6px 0; white-space: nowrap; }
.stint-consumi td { padding: 6px 12px 6px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.stint-consumi .forte { font-weight: 700; }
.stint-consumi-dett { margin-top: 8px; }
.stint-consumi-dett > summary { cursor: pointer; }

/* --- squadra: le vetture come schede --- */
.vettura .targa { display: flex; align-items: baseline; gap: 8px; }
.vettura .numero { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--area); font-weight: 700; }

/* --- squadra: dirette --- */
.diretta { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; background: var(--panel); }
.diretta.spenta { opacity: .55; }
.diretta.in-onda { border-color: color-mix(in srgb, var(--err) 55%, var(--line)); }
.diretta .testa { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* --- account --- */
.account-foto { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin-bottom: 16px; }
.account-foto .avatar { width: 72px; height: 72px; font-size: 26px; grid-row: span 2; }
.account-foto .hint { margin: 0; }

/* --- attivita' --- */
.attivita td:first-child { white-space: nowrap; color: var(--muted); }
.tipo-evento { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

/* --- squadra: la procedura guidata --- */
.procedura { max-width: 1100px; }
.passi-procedura { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; }
.passi-procedura li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 13px; }
.passi-procedura .numero { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--panel-3); font-size: 12px; }
.passi-procedura li.corrente { color: var(--text); box-shadow: inset 0 0 0 1px var(--area); }
.passi-procedura li.corrente .numero { background: var(--area); color: #0e1117; }
.passi-procedura li.fatto { color: var(--ok); }
.passi-procedura li.fatto .numero { background: color-mix(in srgb, var(--ok) 25%, transparent); }
.procedura-corpo > h2 { margin-bottom: 12px; }
.procedura-corpo p { max-width: 760px; }
.procedura-piede { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.procedura-piede .spinta { flex: 1; }
.procedura-avviso { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.soprannome { color: var(--area); font-style: italic; font-size: 12.5px; }

/* --- squadra: cosa condivide una chiave delle app collegate --- */
.ambiti { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 10px 0 14px; }
.ambito { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 14px; cursor: pointer; }
.ambito small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ambito:has(input:checked) { border-color: color-mix(in srgb, var(--area) 60%, var(--line)); }

/* --- la squadra in bella vista (panoramica) --- */
.squadra-intestazione { display: flex; align-items: center; gap: 22px; padding: 18px 22px; margin-bottom: 16px;
  border-radius: 16px; border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--area) 18%, transparent), transparent 60%), var(--panel); }
.squadra-intestazione h2 { margin: 0 0 4px; font-size: 26px; letter-spacing: .01em; text-transform: none; color: var(--text); }
.squadra-intestazione .btn { margin-top: 10px; }
.squadra-logo { flex: none; height: 110px; max-width: 300px; display: grid; place-items: center; }
.squadra-logo img { max-height: 110px; max-width: 300px; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.squadra-iniziali { width: 96px; height: 96px; border-radius: 22px; display: grid; place-items: center; font-size: 36px;
  font-weight: 800; color: #fff; background: color-mix(in srgb, var(--area) 75%, #000); }

/* --- la sostituzione della SD (componenti/sostituzione-sd.js) --- */
.sd-attesa { display: flex; align-items: center; gap: 10px; color: var(--text); }
.sd-rotella { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 2px solid var(--line);
  border-top-color: var(--area); animation: avz-gira .9s linear infinite; }