/* ADP — Agile Persona Digitale
   Palette e regole d'uso da docs/BRAND_ADP.md:
   il petrolio è il colore portante, il corallo è accento e si spende con parsimonia
   (un solo elemento di richiamo per schermata), l'ardesia porta il testo.
   Contrasto verificato per WCAG AA: il corallo non porta mai testo piccolo su bianco. */

:root {
  --petrolio: #17868c;
  --petrolio-scuro: #0f6268;
  --petrolio-chiaro: #e6f2f2;
  --corallo: #f0664a;
  --corallo-scuro: #c94a30;
  --ardesia: #37475a;
  --ardesia-chiara: #5b6b7d;
  --grigio: #9aa7b4;
  --bordo: #dde3e8;
  --fondo: #ffffff;
  --fondo-alt: #f6f8f9;
  --ombra: 0 1px 2px rgba(55, 71, 90, .06), 0 8px 24px rgba(55, 71, 90, .07);
  --raggio: 12px;
  --misura: 1180px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --petrolio: #34a8ad;
    --petrolio-scuro: #4cc0c4;
    --petrolio-chiaro: #122b2e;
    --corallo: #ff7f66;
    --corallo-scuro: #ff9a85;
    --ardesia: #e6ebf0;
    --ardesia-chiara: #aab7c4;
    --grigio: #7d8b99;
    --bordo: #2a3541;
    --fondo: #141b22;
    --fondo-alt: #1a232c;
    --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ardesia);
  background: var(--fondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
a { color: var(--petrolio); }

.contenitore { max-width: var(--misura); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- topbar/nav */

.topbar {
  background: var(--ardesia);
  color: #fff;
  font-size: .8rem;
  text-align: center;
  padding: 7px 16px;
}
.topbar strong { color: #fff; }

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  max-width: var(--misura);
  margin: 0 auto;
  flex-wrap: wrap;
}
.nav nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.nav nav a { color: var(--ardesia-chiara); text-decoration: none; font-size: .93rem; }
.nav nav a:hover { color: var(--petrolio); }

.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marchio svg { width: 38px; height: 38px; flex: none; }
.marchio strong { display: block; font-size: 1.2rem; letter-spacing: .04em; color: var(--ardesia); }
.marchio small { display: block; font-size: .68rem; color: var(--grigio); letter-spacing: .03em; }

.selettore-lingua {
  font: inherit;
  font-size: .86rem;
  padding: 7px 10px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--fondo);
  color: var(--ardesia);
  max-width: 190px;
}

/* -------------------------------------------------------------------- bottoni */

.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 9px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.btn-primario { background: var(--petrolio); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--petrolio-scuro); }
.btn-secondario { background: transparent; color: var(--petrolio); border-color: var(--bordo); }
.btn-secondario:hover { border-color: var(--petrolio); }
.btn-accento { background: var(--corallo); color: #fff; }
.btn-accento:hover:not(:disabled) { background: var(--corallo-scuro); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-blocco { display: block; width: 100%; text-align: center; }

/* ----------------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 48px;
  align-items: center;
  max-width: var(--misura);
  margin: 0 auto;
  padding: 56px 24px 64px;
}
.occhiello {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--petrolio);
  margin-bottom: 12px;
}
.guida { font-size: 1.08rem; color: var(--ardesia-chiara); max-width: 54ch; }
.azioni { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 22px; }
.fiducia { list-style: none; padding: 0; margin: 0; font-size: .88rem; color: var(--ardesia-chiara); }
.fiducia li { padding-left: 22px; position: relative; margin-bottom: 6px; }
.fiducia li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--petrolio);
}

.scheda {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 24px;
  background: var(--fondo);
  box-shadow: var(--ombra);
}
.scheda .kicker {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .66rem;
  color: var(--grigio);
  font-weight: 700;
  margin-bottom: 8px;
}
.scheda dl { margin: 16px 0; display: grid; gap: 9px; }
.scheda dl > div { display: flex; justify-content: space-between; font-size: .88rem; border-bottom: 1px solid var(--bordo); padding-bottom: 8px; }
.scheda dt { color: var(--ardesia-chiara); }
.scheda dd { margin: 0; font-weight: 600; }
.scheda .prezzo { font-size: 1.45rem; font-weight: 700; color: var(--ardesia); margin: 14px 0 16px; }
.scheda .prezzo small { font-size: .8rem; font-weight: 500; color: var(--grigio); }

/* --------------------------------------------------------------------- strisce */

.striscia {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--fondo-alt);
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  padding: 16px 24px;
  font-size: .84rem;
  color: var(--ardesia-chiara);
}
.striscia span { padding: 4px 12px; border-right: 1px solid var(--bordo); }
.striscia span:last-child { border-right: 0; }

/* -------------------------------------------------------------------- sezioni */

.sezione { padding: 64px 0; }
.sezione.alt { background: var(--fondo-alt); }
.testata { max-width: 62ch; margin-bottom: 36px; }
.testata p { color: var(--ardesia-chiara); }

.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }

.carta {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 22px;
  background: var(--fondo);
  position: relative;
  display: flex;
  flex-direction: column;
}
.carta ul { padding-left: 18px; margin: 0 0 16px; font-size: .89rem; color: var(--ardesia-chiara); }
.carta .piede {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--bordo);
  padding-top: 14px;
  font-size: .89rem;
}
.etichetta {
  position: absolute;
  top: -10px; right: 16px;
  background: var(--corallo);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .04em;
}

.passi { list-style: none; counter-reset: p; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.passi li { border-left: 3px solid var(--petrolio); padding-left: 16px; }
.passi strong { display: block; color: var(--petrolio); font-size: .82rem; letter-spacing: .05em; margin-bottom: 6px; }
.passi p { font-size: .92rem; color: var(--ardesia-chiara); margin: 0; }

.spezzata { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.spunte { list-style: none; padding: 0; font-size: .92rem; color: var(--ardesia-chiara); }
.spunte li { padding-left: 26px; position: relative; margin-bottom: 8px; }
.spunte li::before { content: "✓"; position: absolute; left: 0; color: var(--petrolio); font-weight: 700; }

.pannello { border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--fondo); padding: 20px; box-shadow: var(--ombra); }
.pannello .titolo { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--grigio); font-weight: 700; margin-bottom: 12px; }
.pannello .riga { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--bordo); font-size: .9rem; }
.pannello .riga:last-child { border-bottom: 0; }
.pannello .riga em { font-style: normal; font-weight: 600; color: var(--petrolio); }

/* --------------------------------------------------------------- configuratore */

.cfg { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; padding: 40px 0 72px; }
.cfg-gruppo { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 22px; margin-bottom: 20px; background: var(--fondo); }
.cfg-gruppo > h3 { margin-bottom: 4px; }
.cfg-gruppo .aiuto { font-size: .86rem; color: var(--ardesia-chiara); margin-bottom: 16px; }

.opzioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }

.opzione {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  background: var(--fondo);
  transition: border-color .12s, background .12s;
}
.opzione:hover { border-color: var(--petrolio); }
.opzione input { margin: 3px 0 0; accent-color: var(--petrolio); flex: none; }
.opzione:has(input:checked) { border-color: var(--petrolio); background: var(--petrolio-chiaro); }
.opzione:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.opzione .nome { font-weight: 600; font-size: .93rem; display: block; }
.opzione .prezzo { font-size: .82rem; color: var(--ardesia-chiara); }
.opzione .desc { font-size: .82rem; color: var(--ardesia-chiara); display: block; margin-top: 3px; }

.pastiglia {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: 1px;
}
.pastiglia.sovrano { background: var(--petrolio-chiaro); color: var(--petrolio-scuro); }
/* Fornitore europeo: né nostro né fuori UE. Una terza tinta perché è un terzo stato,
   e appiattirlo su uno degli altri due sarebbe dire una cosa falsa al cliente. */
.pastiglia.ue { background: #eef2f6; color: var(--ardesia); }
.pastiglia.attesa { background: #f4f0e6; color: #8a6d2f; }
@media (prefers-color-scheme: dark) {
  .pastiglia.ue { background: #23303c; color: var(--ardesia-chiara); }
  .pastiglia.attesa { background: #33301f; color: #d8c07a; }
}
.pastiglia.extra-ue { background: #fdece7; color: var(--corallo-scuro); }
@media (prefers-color-scheme: dark) { .pastiglia.extra-ue { background: #3a221c; color: var(--corallo); } }

.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  font: inherit;
  font-size: .93rem;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 9px;
  background: var(--fondo);
  color: var(--ardesia);
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--petrolio); outline-offset: 1px; border-color: var(--petrolio); }
.campo .nota { font-size: .78rem; color: var(--grigio); margin-top: 4px; display: block; }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }

/* riepilogo appiccicato */
.riepilogo { position: sticky; top: 20px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--fondo); box-shadow: var(--ombra); overflow: hidden; }
.riepilogo header { background: var(--ardesia); color: #fff; padding: 16px 20px; }
.riepilogo header h3 { margin: 0; color: #fff; font-size: 1rem; }
.riepilogo .corpo { padding: 18px 20px; }
.riepilogo .voce { display: flex; justify-content: space-between; gap: 12px; font-size: .87rem; padding: 6px 0; border-bottom: 1px dashed var(--bordo); }
.riepilogo .voce span:first-child { color: var(--ardesia-chiara); }
.riepilogo .totale { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05rem; padding-top: 12px; margin-top: 8px; border-top: 2px solid var(--ardesia); }
.riepilogo .totale .valore { color: var(--petrolio); }
.riepilogo .nota { font-size: .76rem; color: var(--grigio); margin-top: 10px; }

.avviso { border-radius: 9px; padding: 12px 14px; font-size: .86rem; margin-bottom: 14px; }
.avviso.info { background: var(--petrolio-chiaro); color: var(--petrolio-scuro); }
.avviso.attenzione { background: #fdece7; color: var(--corallo-scuro); }
.avviso.errore { background: #fdece7; color: var(--corallo-scuro); border: 1px solid var(--corallo); }
@media (prefers-color-scheme: dark) {
  .avviso.attenzione, .avviso.errore { background: #3a221c; color: var(--corallo); }
}
.avviso ul { margin: 6px 0 0; padding-left: 18px; }

.tecnica { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; }
.tecnica .chip { display: inline-block; background: var(--fondo-alt); border: 1px solid var(--bordo); border-radius: 6px; padding: 2px 7px; margin: 0 4px 4px 0; }

/* -------------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--bordo);
  padding: 36px 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--misura);
  margin: 0 auto;
  font-size: .86rem;
  color: var(--ardesia-chiara);
}
footer strong { color: var(--ardesia); font-size: 1.05rem; letter-spacing: .04em; }

/* Campo esca del modulo di richiesta.
   Nascosto da una CLASSE e non da un attributo `style=`: la CSP è
   `style-src 'self'` e un inline verrebbe bloccato, lasciando il campo visibile
   a tutti — cioè trasformando la trappola in un modulo confuso. */
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .hero, .spezzata, .cfg { grid-template-columns: 1fr; }
  .riepilogo { position: static; }
}

/* ---------------------------------------------------------------- accesso */

.contenitore.stretto { max-width: 30rem; }

.bottone.largo { display: flex; width: 100%; justify-content: center; align-items: center; gap: .55rem; }

.bottone.google {
  background: #fff; color: #1f2328; border: 1px solid #d4d7dc;
  font-weight: 500; text-decoration: none;
}
.bottone.google:hover { background: #f6f7f8; }

.separatore {
  display: flex; align-items: center; gap: .75rem;
  color: var(--grigio-testo, #6a7078); font-size: .875rem; margin: 1.25rem 0;
}
.separatore::before, .separatore::after {
  content: ''; flex: 1; height: 1px; background: var(--bordo, #e3e6ea);
}

.azioni-secondarie { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; }

.collegamento {
  background: none; border: 0; padding: 0; font: inherit; font-size: .875rem;
  color: var(--teal, #17868C); text-decoration: underline; cursor: pointer;
}
.collegamento[disabled] { color: var(--grigio-testo, #6a7078); text-decoration: none; cursor: default; }

/* -------------------------------------------------------------- colloquio */

.stanza-testata {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .75rem; font-size: .875rem;
}
.cronometro { font-variant-numeric: tabular-nums; font-weight: 600; }
.contatore { color: var(--grigio-testo, #6a7078); }

.conversazione {
  list-style: none; margin: 0 0 1rem; padding: .75rem;
  max-height: 26rem; overflow-y: auto;
  background: var(--sfondo-tenue, #f7f8f9);
  border: 1px solid var(--bordo, #e3e6ea); border-radius: .5rem;
}
.turno { margin: 0 0 .85rem; }
.turno:last-child { margin-bottom: 0; }
.turno .chi {
  display: block; font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--grigio-testo, #6a7078); margin-bottom: .2rem;
}
.turno .testo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.turno.persona .testo {
  background: #fff; border: 1px solid var(--bordo, #e3e6ea);
  border-radius: .5rem; padding: .6rem .75rem;
}
.turno.tu .testo {
  background: var(--teal, #17868C); color: #fff;
  border-radius: .5rem; padding: .6rem .75rem; margin-left: 2rem;
}
.turno.pensa { color: var(--grigio-testo, #6a7078); font-style: italic; }

.elenco-spunte { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.elenco-spunte li { padding-left: 1.5rem; position: relative; margin-bottom: .3rem; }
.elenco-spunte li::before {
  content: '✓'; position: absolute; left: 0; color: var(--teal, #17868C); font-weight: 700;
}
.elenco-spunte.spente li::before { content: '—'; color: var(--grigio-testo, #6a7078); }

.scelte-esito { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bottone.piccolo { padding: .4rem .8rem; font-size: .875rem; }
.bottone.scelto { background: var(--teal, #17868C); color: #fff; border-color: var(--teal, #17868C); }

@media (prefers-reduced-motion: reduce) {
  .conversazione { scroll-behavior: auto; }
}

/* -------------------------------------------------------------- la coda */

.contenitore.largo { max-width: 76rem; }

.filtri { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.campo.compatto { min-width: 10rem; margin: 0; }
.campo.compatto span { font-size: .8125rem; }

.tabella-scorrevole { overflow-x: auto; border: 1px solid var(--bordo, #e3e6ea); border-radius: .5rem; }
.tabella { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabella th, .tabella td {
  padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--bordo, #e3e6ea);
  vertical-align: top;
}
.tabella thead th {
  background: var(--sfondo-tenue, #f7f8f9); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--grigio-testo, #6a7078); position: sticky; top: 0;
}
.tabella tbody tr:last-child td { border-bottom: 0; }
.monospazio { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }

.pastiglia {
  display: inline-block; padding: .12rem .5rem; border-radius: 1rem;
  font-size: .75rem; font-weight: 600; background: var(--sfondo-tenue, #f7f8f9);
  border: 1px solid var(--bordo, #e3e6ea); margin-right: .25rem;
}
.pastiglia.stato-ricevuta { background: #eef6f7; border-color: #cfe4e6; }
.pastiglia.stato-in_lavorazione { background: #fff6e8; border-color: #f0d9b4; }
.pastiglia.stato-preventivata { background: #eef1fb; border-color: #ccd4f0; }
.pastiglia.stato-convertita { background: #e9f6ec; border-color: #c2e3ca; }
.pastiglia.stato-chiusa { background: #f1f2f3; border-color: #dcdee1; }
.pastiglia.cauzione-versata { background: #e9f6ec; border-color: #c2e3ca; }
.pastiglia.cauzione-attesa { background: #fff6e8; border-color: #f0d9b4; }

.nota { display: block; font-size: .75rem; color: var(--grigio-testo, #6a7078); margin-top: .2rem; }
.nota.attenzione { color: #9a5b12; font-weight: 600; }

.tabella td .bottone.piccolo { margin: 0 .25rem .25rem 0; }

.scelta-canale { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pillola {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .4rem .8rem; border: 1px solid var(--bordo, #e3e6ea); border-radius: 1rem;
  font-size: .875rem; background: #fff;
}
.pillola:has(input:checked) { border-color: var(--teal, #17868C); background: #eef6f7; font-weight: 600; }
.pillola input { margin: 0; }

/* ---------------------------------------------------------- le mie persone */

.schede-persone { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.scheda-persona {
  border: 1px solid var(--bordo, #e3e6ea); border-radius: .6rem; padding: 1rem;
  background: #fff; display: flex; flex-direction: column; gap: .6rem;
}
.scheda-persona header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.scheda-persona h3 { margin: 0; font-size: 1.05rem; }
.pastiglia.stadio-produzione { background: #e9f6ec; border-color: #c2e3ca; }
.pastiglia.stadio-staging { background: #fff6e8; border-color: #f0d9b4; }
.scheda-persona .riepilogo { margin: 0; }
.scheda-persona .riepilogo dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--grigio-testo, #6a7078); margin-top: .5rem; }
.scheda-persona .riepilogo dd { margin: .1rem 0 0; }
.barra-consumo { height: .4rem; background: var(--sfondo-tenue, #f0f1f3); border-radius: .25rem; overflow: hidden; margin-top: .2rem; }
.barra-piena { height: 100%; background: var(--teal, #17868C); border-radius: .25rem; }
.barra-piena.quasi-piena { background: #c0632e; }

/* ------------------------------------------- impostazioni della persona */

/* Esisteva gia' `avviso('ok', …)` in persone.js senza una regola che lo
   dipingesse: un esito riuscito si vedeva come un riquadro neutro. */
.avviso.ok { background: #e9f6ec; color: #1d6b32; border: 1px solid #c2e3ca; }

.elenco-interruttori { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.interruttore {
  border: 1px solid var(--bordo, #e3e6ea); border-radius: .6rem; padding: .8rem 1rem;
  background: #fff;
}
.interruttore-testa { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.interruttore-testa .pillola { font-weight: 600; }
.interruttore .nota { margin-top: .35rem; }

/* La riga che non si tocca deve SEMBRARE una riga che non si tocca: se
   assomigliasse a un interruttore spento, qualcuno cercherebbe di accenderla. */
.interruttore:has(.pastiglia.stato-spenta) .interruttore-testa strong { color: var(--grigio-testo, #6a7078); }

.pastiglia.stato-accesa { background: #e9f6ec; border-color: #c2e3ca; }
.pastiglia.stato-spenta { background: #f1f2f3; border-color: #dcdee1; }

.conferma-motivo {
  margin-top: .6rem; padding: .7rem .8rem; border-radius: .5rem;
  background: var(--sfondo-tenue, #f7f8f9); border: 1px solid var(--bordo, #e3e6ea);
}
.conferma-motivo .campo.compatto { min-width: 100%; }
.conferma-motivo .azioni { margin: .5rem 0 0; display: flex; gap: .5rem; }

.riga-memoria { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.riga-memoria .campo.compatto input { width: 7rem; }

/* ------------------------------------------------------------- la stanza */

body.scura { background: #101418; color: #e8ebee; }
.stanza-video { max-width: 68rem; margin: 0 auto; padding: 1rem; min-height: 100vh; display: flex; flex-direction: column; }
.stanza-testata-video { display: flex; justify-content: space-between; align-items: center; padding: .25rem 0 .75rem; }
.nome-persona { font-weight: 700; font-size: 1.1rem; }

.chip-registrazione {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #3d1113; color: #ffd7d9; border: 1px solid #7a2226;
  padding: .3rem .7rem; border-radius: 1rem; font-size: .8125rem; font-weight: 600;
}
.chip-registrazione .pallino {
  width: .6rem; height: .6rem; border-radius: 50%; background: #ff4d55;
  animation: batte 1.6s ease-in-out infinite;
}
@keyframes batte { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .chip-registrazione .pallino { animation: none; } }

.avvisi-stanza { min-height: 2rem; margin-bottom: .5rem; }

.griglia-video { flex: 1; position: relative; background: #171c22; border-radius: .75rem; overflow: hidden; min-height: 22rem; }
.riquadro video, .riquadro audio { width: 100%; height: 100%; object-fit: cover; }
#riquadro-persona { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#riquadro-persona .assente { text-align: center; color: #9aa4ad; padding: 1rem; }
.riquadro.io {
  position: absolute; right: 1rem; bottom: 1rem; width: 12rem; aspect-ratio: 4/3;
  background: #0c0f13; border: 1px solid #2a323b; border-radius: .5rem; overflow: hidden;
}
.riquadro.io .etichetta { position: absolute; left: .5rem; bottom: .3rem; font-size: .7rem; color: #9aa4ad; }

.comandi-stanza { display: flex; gap: .6rem; justify-content: center; padding: 1rem 0 .5rem; flex-wrap: wrap; }
.comando {
  background: #222a33; color: #e8ebee; border: 1px solid #33404c;
  padding: .6rem 1.1rem; border-radius: 2rem; font: inherit; cursor: pointer;
}
.comando:hover { background: #2a333e; }
.comando.spento { background: #14181d; color: #7b858e; text-decoration: line-through; }
.comando.registra { border-color: #7a2226; }
.comando.registra.attivo { background: #3d1113; color: #ffd7d9; }
.comando.esci { background: #5c1a1e; border-color: #7a2226; }

.dialogo { border: 1px solid #33404c; border-radius: .75rem; background: #1b2129; color: #e8ebee; padding: 1.25rem; max-width: 26rem; }
.dialogo::backdrop { background: rgba(0,0,0,.6); }
.dialogo h2 { margin-top: 0; }
.dialogo .campo input { background: #10151a; color: #e8ebee; border: 1px solid #33404c; }

/* ============================================ la Sala di Registrazione */

/* `.bottone` non ha mai avuto una regola di base in questo foglio: le pagine
   che lo usano (coda, impostazioni, persone) mostrano bottoni di sistema. Qui
   NON si aggiunge una regola globale — cambierebbe l'aspetto di pagine che
   appartengono a qualcun altro — ma una regola limitata alla Sala. Il giorno in
   cui `.bottone` avra la sua base, queste righe si possono togliere. */
.sala .bottone {
  display: inline-block; padding: .55rem 1rem; border-radius: 9px;
  font: inherit; font-weight: 600; font-size: .9rem; text-decoration: none;
  border: 1px solid var(--bordo); background: var(--fondo); color: var(--ardesia);
  cursor: pointer;
}
.sala .bottone:hover:not(:disabled) { border-color: var(--petrolio); }
.sala .bottone:disabled { opacity: .5; cursor: not-allowed; }
.sala .bottone.primario { background: var(--petrolio); border-color: var(--petrolio); color: #fff; }
.sala .bottone.primario:hover:not(:disabled) { background: var(--petrolio-scuro); }
/* Il rosso qui non e decorazione: distingue i comandi che DISTRUGGONO (rifiuta,
   revoca, ferma la registrazione) da quelli che avanzano. */
.sala .bottone.pericolo { background: var(--corallo); border-color: var(--corallo); color: #fff; }
.sala .bottone.pericolo:hover:not(:disabled) { background: var(--corallo-scuro); }

.barra-sala { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.barra-sala h2 { margin: 0; font-size: 1.15rem; }
.barra-sala .spaziatore { flex: 1; }

.pastiglia.clonazione-bozza { background: #f1f2f3; border-color: #dcdee1; }
.pastiglia.clonazione-consenso_firmato { background: #eef1fb; border-color: #ccd4f0; }
.pastiglia.clonazione-in_sala { background: #fff6e8; border-color: #f0d9b4; }
.pastiglia.clonazione-in_approvazione { background: #fff6e8; border-color: #f0d9b4; }
.pastiglia.clonazione-approvata { background: #eef6f7; border-color: #cfe4e6; }
.pastiglia.clonazione-in_addestramento { background: #eef1fb; border-color: #ccd4f0; }
.pastiglia.clonazione-attiva { background: #e9f6ec; border-color: #c2e3ca; }
.pastiglia.clonazione-rifiutata { background: #fdece7; border-color: #f3c5b7; }
.pastiglia.clonazione-revocata { background: #fdece7; border-color: #f3c5b7; }

.testata-pratica { margin: 1rem 0; }
.testata-pratica h2 { margin: 0 0 .2rem; }
.testata-pratica .monospazio { margin: 0; color: var(--grigio); font-size: .82rem; }

/* Il percorso a tappe. La tappa corrente si vede a colpo d'occhio: chi conduce
   la Sala deve sapere in ogni istante a che punto e, con la persona davanti. */
.tappe {
  list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem;
}
.tappe li {
  border-top: 3px solid var(--bordo); padding: .5rem .2rem 0;
  color: var(--grigio); font-size: .85rem;
}
.tappe li.fatta { border-top-color: var(--petrolio); color: var(--ardesia-chiara); }
.tappe li.corrente {
  border-top-color: var(--corallo); color: var(--ardesia); font-weight: 700;
}
.tappe li strong { display: block; }
.tappe li .nota { color: var(--corallo-scuro); }

.informativa { font-size: .9rem; color: var(--ardesia-chiara); padding-left: 1.2rem; margin: .8rem 0 1.2rem; }
.informativa li { margin-bottom: .5rem; }

.etichetta-campo { font-size: .85rem; font-weight: 600; margin: .8rem 0 .2rem; }

/* La tavoletta della firma: nessuna libreria, solo un canvas. `touch-action:none`
   e obbligatorio — senza, il dito che firma fa scorrere la pagina. */
.tavoletta-firma {
  width: 100%; max-width: 40rem; height: auto; aspect-ratio: 16 / 5;
  border: 1px dashed var(--bordo); border-radius: .5rem; background: #fff;
  touch-action: none; cursor: crosshair; display: block;
}

.pillola.larga { display: flex; align-items: flex-start; gap: .5rem; margin: 1rem 0; border-radius: .5rem; }
.pillola.larga input { margin-top: .15rem; }

/* La frase da PRONUNCIARE. Deve essere leggibile da un metro di distanza: chi
   la legge la guarda mentre parla alla camera, non mentre studia lo schermo. */
.frase-consenso {
  margin: .8rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--corallo);
  background: var(--fondo-alt); border-radius: 0 .5rem .5rem 0;
  font-size: 1.15rem; line-height: 1.6;
}

.anteprima-sala {
  width: 100%; max-width: 26rem; aspect-ratio: 4 / 3; background: #0c0f13;
  border-radius: .5rem; display: block; margin: .5rem 0; object-fit: cover;
}
.anteprima-sala[hidden] { display: none; }

.elenco-clip { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; }
.elenco-clip .clip {
  border: 1px solid var(--bordo); border-radius: .6rem; padding: .8rem 1rem; background: var(--fondo);
}
.lettore-clip { display: block; width: 100%; max-width: 30rem; margin: .5rem 0; }

.campo.largo, .azioni.largo { grid-column: 1 / -1; }
.sala .azioni { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------ la preconfigurata */
.preconfigurata {
  background: linear-gradient(135deg, #eef6f7, #fff);
  border: 1px solid #cfe4e6; border-radius: .75rem;
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
.preconfigurata h3 { margin: .2rem 0 .4rem; font-size: 1.4rem; }
.preconfigurata .prezzo { font-size: 1.3rem; font-weight: 700; color: #17868C; }
.preconfigurata .azioni { display: flex; gap: .6rem; flex-wrap: wrap; }