/* =====================================================================
   MyAgent24 - Foglio di stile dell'applicazione
   Design system: design-system/myagent24/MASTER.md
   Deroghe d'ambito: design-system/myagent24/pages/pannello.md
   Codifica: UTF-8
   =====================================================================

   Scritto a mano, senza framework e senza passo di build (CLAUDE.md §2.1).
   Nessun valore di colore o dimensione va scritto nei componenti: si usano
   solo i token dichiarati qui sotto.
   ===================================================================== */


/* ---------------------------------------------------------------------
   CARATTERE
   Ospitato da noi, non caricato da Google. Un font servito da un dominio
   di terzi trasmette l'IP del visitatore a ogni caricamento di pagina:
   con la promessa GDPR che facciamo in vendita (§12), e' un'incoerenza
   che non possiamo permetterci.
   I file .woff2 vanno scaricati una volta e messi in assets/fonts/.
   Finche' non ci sono, vale la pila di riserva: nessuna pagina si rompe.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  /* format('woff2'), non 'woff2-variations': quella era la sintassi
     pre-standard e Firefox non la riconosce - scarta l'intero src e
     torna alla pila di riserva, senza dire niente. La variabilita'
     la deduce da font-weight: 300 700. */
  src: url('../fonts/PlusJakartaSans-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}


/* ---------------------------------------------------------------------
   TOKEN
   --------------------------------------------------------------------- */
:root {
  /* Colori */
  --color-primary: #2563EB;
  --color-primary-scuro: #1D4ED8;
  --color-on-primary: #FFFFFF;
  --color-accent: #C2410C;
  --color-accent-scuro: #9A3412;
  --color-on-accent: #FFFFFF;
  --color-background: #F8FAFC;
  --color-foreground: #1E293B;
  --color-card: #FFFFFF;
  --color-muted: #E9EFF8;
  --color-muted-foreground: #475569;
  --color-border: #E2E8F0;
  /* Il bordo di un campo e' il confine di un controllo, non una
     decorazione: WCAG chiede 3:1, che il grigio dei riquadri non regge */
  --color-border-controllo: #7C8CA0;
  --color-destructive: #DC2626;
  --color-on-destructive: #FFFFFF;
  --color-ring: #2563EB;

  /* Colori di stato. Dichiarati una volta sola: escalation e insoluto non
     possono essere due rossi decisi a occhio in due pagine diverse. */
  --color-ok: #15803D;
  --color-ok-fondo: #DCFCE7;
  --color-attesa: #B45309;
  --color-attesa-fondo: #FEF3C7;
  --color-allarme: #B91C1C;
  --color-allarme-fondo: #FEE2E2;
  --color-info: #1D4ED8;
  --color-info-fondo: #DBEAFE;
  --color-neutro: #475569;
  --color-neutro-fondo: #F1F5F9;

  /* Spaziatura */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Tipografia - scala fissa, nessun valore fuori da questi */
  --testo-xs: 0.75rem;    /* 12 */
  --testo-sm: 0.875rem;   /* 14 */
  --testo-base: 1rem;     /* 16 */
  --testo-lg: 1.125rem;   /* 18 */
  --testo-xl: 1.5rem;     /* 24 */
  --testo-2xl: 2rem;      /* 32 */
  /* Due gradini in piu', usati solo dal sito pubblico (sito/): un titolo
     di vendita a 32px su uno schermo da 1440 non regge la pagina, e la
     gerarchia e' meta' del lavoro di questa pagina. Restano token
     dichiarati qui: la regola di §2.1 vieta le misure decise dentro un
     componente, non un gradino in piu' nella scala. */
  --testo-3xl: 2.5rem;    /* 40 */
  --testo-4xl: 3.25rem;   /* 52 */

  /* Ombre */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.10);

  /* Forme e movimento */
  --raggio-sm: 6px;
  --raggio: 8px;
  --raggio-lg: 12px;
  --transizione: 200ms ease;

  --larghezza-barra: 260px;
  --altezza-testata: 64px;
}


/* ---------------------------------------------------------------------
   AZZERAMENTO
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--testo-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--testo-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--testo-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--testo-lg); }
h4 { font-size: var(--testo-base); }
p  { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }
svg { display: block; }

/* L'anello di focus non si rimuove mai. Su :focus-visible per non
   comparire al clic del mouse, dove sarebbe solo rumore. */
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--raggio-sm);
}

/* Chi arriva da tastiera salta la navigazione con un tab solo */
.salta-al-contenuto {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: 100;
  background: var(--color-card);
  color: var(--color-foreground);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--raggio);
  box-shadow: var(--shadow-lg);
  transition: top var(--transizione);
}
.salta-al-contenuto:focus { top: var(--space-md); }


/* ---------------------------------------------------------------------
   IMPALCATURA
   --------------------------------------------------------------------- */
.impalcatura {
  display: grid;
  grid-template-columns: var(--larghezza-barra) 1fr;
  min-height: 100vh;
}

.barra {
  background: var(--color-card);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.barra__marchio {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--altezza-testata);
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  font-size: var(--testo-lg);
  letter-spacing: -0.02em;
  color: var(--color-foreground);
  flex-shrink: 0;
}
.barra__marchio:hover { text-decoration: none; }
.barra__marchio svg { color: var(--color-primary); }

.barra__navigazione { padding: var(--space-md) var(--space-sm); flex: 1; }

.barra__gruppo + .barra__gruppo { margin-top: var(--space-lg); }

.barra__etichetta {
  font-size: var(--testo-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted-foreground);
  padding: 0 var(--space-md) var(--space-sm);
  margin: 0;
}

.voce {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* 44px di altezza minima: e' il bersaglio minimo per il tocco */
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--raggio);
  color: var(--color-muted-foreground);
  font-size: var(--testo-sm);
  font-weight: 500;
  transition: background var(--transizione), color var(--transizione);
}
.voce:hover { background: var(--color-muted); color: var(--color-foreground); text-decoration: none; }
.voce svg { flex-shrink: 0; width: 18px; height: 18px; }

.voce--attiva {
  background: var(--color-info-fondo);
  color: var(--color-primary-scuro);
  font-weight: 600;
}
.voce--attiva:hover { background: var(--color-info-fondo); color: var(--color-primary-scuro); }

/* Modulo non attivo: visibile ma spento. Resta in elenco perche' serve in
   vendita - nasconderlo significa che il cliente non sapra' mai che esiste. */
.voce--spenta { color: #64748B; cursor: pointer; }
.voce--spenta:hover { background: var(--color-neutro-fondo); color: var(--color-muted-foreground); }

.voce__pillola {
  margin-left: auto;
  font-size: var(--testo-xs);
  font-weight: 600;
  padding: 2px var(--space-sm);
  border-radius: 999px;
  background: var(--color-neutro-fondo);
  color: var(--color-muted-foreground);
}

.barra__piede {
  border-top: 1px solid var(--color-border);
  padding: var(--space-md);
  flex-shrink: 0;
}

.utente { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.utente__cerchio {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-info-fondo);
  color: var(--color-primary-scuro);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--testo-sm);
}
.utente__testo { min-width: 0; }
.utente__nome {
  font-size: var(--testo-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utente__ruolo { font-size: var(--testo-xs); color: var(--color-muted-foreground); }


/* ---------------------------------------------------------------------
   AREA PRINCIPALE
   --------------------------------------------------------------------- */
.principale { min-width: 0; display: flex; flex-direction: column; }

.testata {
  height: var(--altezza-testata);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-lg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.testata h1 { font-size: var(--testo-lg); font-weight: 600; }
.testata__azioni { margin-left: auto; display: flex; gap: var(--space-sm); align-items: center; }

.contenuto {
  padding: var(--space-lg);
  max-width: 1440px;
  width: 100%;
  flex: 1;
}

.intestazione-pagina { margin-bottom: var(--space-lg); }
.intestazione-pagina p {
  color: var(--color-muted-foreground);
  font-size: var(--testo-sm);
  margin-top: var(--space-xs);
  max-width: 68ch;
}


/* ---------------------------------------------------------------------
   AVVISI
   --------------------------------------------------------------------- */
.avviso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--raggio);
  border: 1px solid transparent;
  font-size: var(--testo-sm);
  margin-bottom: var(--space-md);
}
.avviso svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.avviso__testo { flex: 1; }
.avviso strong { font-weight: 600; }
.avviso__azione { margin-left: auto; flex-shrink: 0; }

.avviso--info    { background: var(--color-info-fondo);    border-color: #BFDBFE; color: #1E3A8A; }
.avviso--attesa  { background: var(--color-attesa-fondo);  border-color: #FDE68A; color: #78350F; }
.avviso--allarme { background: var(--color-allarme-fondo); border-color: #FECACA; color: #7F1D1D; }
.avviso--ok      { background: var(--color-ok-fondo);      border-color: #BBF7D0; color: #14532D; }

/* Impersonificazione: deve essere impossibile non accorgersene (§4) */
.avviso--impersonificazione {
  background: #1E293B;
  border-color: #0F172A;
  color: #F8FAFC;
  border-radius: 0;
  margin: 0;
  padding: var(--space-sm) var(--space-lg);
}
.avviso--impersonificazione a { color: #93C5FD; }


/* ---------------------------------------------------------------------
   RIQUADRI
   --------------------------------------------------------------------- */
.riquadro {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--raggio-lg);
  padding: var(--space-lg);
}
.riquadro__testata {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.riquadro__testata h2, .riquadro__testata h3 { margin: 0; }

/* Solo quando l'intera superficie porta da qualche parte */
.riquadro--interattivo { transition: box-shadow var(--transizione), border-color var(--transizione); }
.riquadro--interattivo:hover { box-shadow: var(--shadow-md); border-color: #CBD5E1; }
.riquadro--interattivo:focus-within { box-shadow: var(--shadow-md); }

.griglia { display: grid; gap: var(--space-md); }
.griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* ---------------------------------------------------------------------
   NUMERI IN EVIDENZA
   --------------------------------------------------------------------- */
.dato { background: var(--color-card); border: 1px solid var(--color-border);
        border-radius: var(--raggio-lg); padding: var(--space-lg); }
.dato__etichetta {
  font-size: var(--testo-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-muted-foreground);
  display: flex; align-items: center; gap: var(--space-xs);
}
.dato__valore {
  font-size: var(--testo-2xl); font-weight: 700; letter-spacing: -0.02em;
  margin-top: var(--space-sm); line-height: 1.1;
  /* Le cifre non devono ballare mentre si aggiornano */
  font-variant-numeric: tabular-nums;
}
.dato__nota { font-size: var(--testo-xs); color: var(--color-muted-foreground); margin-top: var(--space-xs); }

.barra-avanzamento {
  height: 6px; border-radius: 999px; background: var(--color-muted);
  overflow: hidden; margin-top: var(--space-sm);
}
.barra-avanzamento__riempimento { height: 100%; background: var(--color-primary); border-radius: 999px; }
.barra-avanzamento__riempimento--attesa  { background: var(--color-attesa); }
.barra-avanzamento__riempimento--allarme { background: var(--color-allarme); }


/* ---------------------------------------------------------------------
   PULSANTI
   Altezza minima 44px su tutte le varianti: e' il bersaglio minimo.
   --------------------------------------------------------------------- */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--raggio);
  font-family: inherit;
  font-size: var(--testo-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transizione), border-color var(--transizione),
              color var(--transizione), box-shadow var(--transizione);
  text-decoration: none;
  white-space: nowrap;
}
.pulsante:hover { text-decoration: none; }
.pulsante svg { width: 18px; height: 18px; }

.pulsante--primario { background: var(--color-primary); color: var(--color-on-primary); }
.pulsante--primario:hover { background: var(--color-primary-scuro); }

/* Arancio: solo per le azioni che portano a incassare. Se in una schermata
   ce n'e' piu' di uno, uno dei due e' sbagliato. */
.pulsante--cta { background: var(--color-accent); color: var(--color-on-accent); }
.pulsante--cta:hover { background: var(--color-accent-scuro); }

.pulsante--secondario {
  background: var(--color-card); color: var(--color-foreground);
  border-color: var(--color-border);
}
.pulsante--secondario:hover { background: var(--color-neutro-fondo); border-color: #CBD5E1; }

.pulsante--trasparente { background: transparent; color: var(--color-muted-foreground); }
.pulsante--trasparente:hover { background: var(--color-muted); color: var(--color-foreground); }

.pulsante--distruttivo { background: var(--color-card); color: var(--color-destructive);
                         border-color: #FECACA; }
.pulsante--distruttivo:hover { background: var(--color-allarme-fondo); }

.pulsante--largo { width: 100%; }
.pulsante--piccolo { min-height: 36px; padding: var(--space-xs) var(--space-md); font-size: var(--testo-xs); }

.pulsante[disabled], .pulsante[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* Riscontro immediato: nessun pulsante deve sembrare inerte mentre il
   server lavora */
.pulsante[data-occupato="1"] { pointer-events: none; opacity: 0.75; }
.pulsante[data-occupato="1"]::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: gira 700ms linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }


/* ---------------------------------------------------------------------
   ETICHETTE DI STATO
   --------------------------------------------------------------------- */
.pillola {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 3px var(--space-sm);
  border-radius: 999px;
  font-size: var(--testo-xs); font-weight: 600;
  white-space: nowrap;
}
/* Un pallino accanto al testo: il colore da solo non basta a distinguere
   uno stato, e chi non distingue i colori resterebbe fuori */
.pillola::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pillola--ok      { background: var(--color-ok-fondo);      color: var(--color-ok); }
.pillola--attesa  { background: var(--color-attesa-fondo);  color: var(--color-attesa); }
.pillola--allarme { background: var(--color-allarme-fondo); color: var(--color-allarme); }
.pillola--info    { background: var(--color-info-fondo);    color: var(--color-info); }
.pillola--neutra  { background: var(--color-neutro-fondo);  color: var(--color-neutro); }


/* ---------------------------------------------------------------------
   MODULI DEL CATALOGO
   --------------------------------------------------------------------- */
.modulo { display: flex; flex-direction: column; gap: var(--space-md); height: 100%; }
.modulo__testata { display: flex; align-items: flex-start; gap: var(--space-md); }
.modulo__icona {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--raggio);
  background: var(--color-info-fondo); color: var(--color-primary-scuro);
  display: flex; align-items: center; justify-content: center;
}
.modulo__icona svg { width: 22px; height: 22px; }
.modulo__icona--spenta { background: var(--color-neutro-fondo); color: var(--color-muted-foreground); }
.modulo__nome { font-size: var(--testo-base); font-weight: 600; }
.modulo__descrizione { color: var(--color-muted-foreground); font-size: var(--testo-sm); flex: 1; }
.modulo__piede {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.modulo__prezzo { font-size: var(--testo-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.modulo__prezzo span { font-size: var(--testo-xs); font-weight: 500; color: var(--color-muted-foreground); }
.modulo__vincolo {
  font-size: var(--testo-xs); color: var(--color-muted-foreground);
  display: flex; align-items: center; gap: var(--space-xs);
}


/* ---------------------------------------------------------------------
   TABELLE
   Il contenitore scorre, la pagina no.
   --------------------------------------------------------------------- */
.tabella-contenitore {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--raggio-lg);
  background: var(--color-card);
  -webkit-overflow-scrolling: touch;
}
.tabella { width: 100%; border-collapse: collapse; font-size: var(--testo-sm); }
.tabella th {
  text-align: left; font-weight: 600; font-size: var(--testo-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-muted-foreground);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
  white-space: nowrap;
}
.tabella td { padding: var(--space-md); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: none; }
.tabella tbody tr { transition: background var(--transizione); }
.tabella tbody tr:hover { background: var(--color-background); }
.tabella .numerico { text-align: right; font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------------------
   MODULI DI INSERIMENTO
   --------------------------------------------------------------------- */
.campo { margin-bottom: var(--space-md); }
.campo__etichetta {
  display: block; font-size: var(--testo-sm); font-weight: 600;
  margin-bottom: var(--space-xs);
}
.campo__aiuto { font-size: var(--testo-xs); color: var(--color-muted-foreground); margin-top: var(--space-xs); }
.campo__errore {
  font-size: var(--testo-sm); color: var(--color-destructive);
  margin-top: var(--space-xs); display: flex; align-items: center; gap: var(--space-xs);
}
.campo__errore svg { width: 16px; height: 16px; flex-shrink: 0; }

.controllo {
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--raggio);
  background: var(--color-card);
  color: var(--color-foreground);
  font-family: inherit;
  /* 16px: sotto questa misura iOS ingrandisce la pagina al focus */
  font-size: var(--testo-base);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.controllo:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* Il riquadro colorato basta col mouse; da tastiera serve un segno
   inequivocabile di dove si e' arrivati */
.controllo:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 1px;
}
.controllo[aria-invalid="true"] { border-color: var(--color-destructive); }
.controllo[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
textarea.controllo { min-height: 120px; resize: vertical; line-height: 1.5; }
select.controllo { cursor: pointer; }


/* ---------------------------------------------------------------------
   STATI VUOTI
   Un elenco vuoto deve dire cosa fare, non restare bianco.
   --------------------------------------------------------------------- */
.vuoto { text-align: center; padding: var(--space-3xl) var(--space-lg); }
.vuoto__icona {
  width: 56px; height: 56px; margin: 0 auto var(--space-md);
  border-radius: 50%;
  background: var(--color-muted); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.vuoto__icona svg { width: 26px; height: 26px; }
.vuoto h3 { margin-bottom: var(--space-sm); }
.vuoto p { color: var(--color-muted-foreground); max-width: 46ch; margin: 0 auto var(--space-lg); }


/* ---------------------------------------------------------------------
   ACCESSO
   --------------------------------------------------------------------- */
.accesso {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  background: var(--color-background);
}
.accesso__riquadro {
  width: 100%; max-width: 420px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--raggio-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.accesso__marchio {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-weight: 700; font-size: var(--testo-xl); letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}
.accesso__marchio svg { color: var(--color-primary); }
.accesso__sottotitolo {
  text-align: center; color: var(--color-muted-foreground);
  font-size: var(--testo-sm); margin-bottom: var(--space-xl);
}
.accesso__piede {
  text-align: center; margin-top: var(--space-lg);
  font-size: var(--testo-sm); color: var(--color-muted-foreground);
}


/* ---------------------------------------------------------------------
   UTILITA'
   --------------------------------------------------------------------- */
.solo-lettori {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.attenuato { color: var(--color-muted-foreground); }
.piccolo   { font-size: var(--testo-sm); }
.minuto    { font-size: var(--testo-xs); }
.numerico  { font-variant-numeric: tabular-nums; }
.pila      { display: flex; flex-direction: column; gap: var(--space-md); }
.riga      { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.spinta    { margin-left: auto; }


/* ---------------------------------------------------------------------
   APERTURA DELLA BARRA SU SCHERMI PICCOLI
   --------------------------------------------------------------------- */
.apri-barra { display: none; }
.velo { display: none; }


/* ---------------------------------------------------------------------
   ADATTAMENTO
   Provato a 1440, 1024, 768 e 375.
   --------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .griglia--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .griglia--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .impalcatura { grid-template-columns: 1fr; }

  .barra {
    position: fixed; top: 0; left: 0; z-index: 40;
    width: var(--larghezza-barra);
    transform: translateX(-100%);
    transition: transform var(--transizione);
    box-shadow: var(--shadow-lg);
  }
  .barra[data-aperta="1"] { transform: translateX(0); }

  .velo {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity var(--transizione);
  }
  .velo[data-attivo="1"] { opacity: 1; pointer-events: auto; }

  .apri-barra { display: inline-flex; }

  .contenuto { padding: var(--space-md); }
  .griglia--2, .griglia--3, .griglia--4 { grid-template-columns: 1fr; }
  .testata { padding: 0 var(--space-md); }
  h1 { font-size: var(--testo-xl); }
}

@media (max-width: 420px) {
  .modulo__piede { flex-direction: column; align-items: stretch; }
  .modulo__piede .pulsante { width: 100%; }
  .accesso__riquadro { padding: var(--space-lg); }
}


/* ---------------------------------------------------------------------
   MOVIMENTO RIDOTTO
   Chi lo ha chiesto al sistema operativo non deve vedere niente muoversi.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------------
   STAMPA
   --------------------------------------------------------------------- */
@media print {
  .barra, .testata__azioni, .apri-barra, .velo { display: none !important; }
  .impalcatura { grid-template-columns: 1fr; }
  body { background: #FFF; }
}


/* ---------------------------------------------------------------------
   GRAFICI
   Due sole serie, gli stessi due colori che il pannello usa ovunque:
   blu per l'agente, ambra per "serve una persona". Il colore qui
   significa la stessa cosa che significa nelle pillole di stato.
   --------------------------------------------------------------------- */
.grafico-contenitore { position: relative; }

.grafico {
  width: 100%;
  height: 210px;
  display: block;
  overflow: visible;
}

/* Griglia e assi restano indietro: servono a leggere, non a farsi
   guardare. Se si notano prima dei dati, sono troppo forti. */
.grafico__griglia { stroke: var(--color-border); stroke-width: 1; }
.grafico__scala,
.grafico__data {
  fill: var(--color-muted-foreground);
  font-size: 11px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.grafico__autonome { fill: var(--color-primary); }
.grafico__persona  { fill: var(--color-attesa); }

.grafico__sensibile { fill: transparent; cursor: pointer; }
.grafico__sensibile:hover { fill: rgba(37, 99, 235, 0.06); }

.grafico__nota {
  position: absolute;
  z-index: 5;
  background: var(--color-foreground);
  color: var(--color-card);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--raggio);
  font-size: var(--testo-xs);
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
}
.grafico__nota strong { font-variant-numeric: tabular-nums; }

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  font-size: var(--testo-xs);
  /* Il testo resta inchiostro: il colore lo porta il quadratino accanto,
     non la parola */
  color: var(--color-muted-foreground);
}
.legenda__voce { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legenda__segno { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legenda__segno--autonome { background: var(--color-primary); }
.legenda__segno--persona  { background: var(--color-attesa); }

.grafico__tabella { margin-top: var(--space-md); }
.grafico__tabella summary {
  cursor: pointer;
  color: var(--color-muted-foreground);
  padding: var(--space-xs) 0;
}
.grafico__tabella summary:hover { color: var(--color-foreground); }

@media (max-width: 768px) {
  .grafico { height: 170px; }
}


/* ---------------------------------------------------------------------
   PERCORSO DI AVVIO (§11)
   Sei riquadri numerati in una pagina sola. Il numero diventa una spunta
   quando il passo e' fatto: il colore da solo non basta a dire "fatto"
   a chi non lo distingue, la forma si'.
   --------------------------------------------------------------------- */
.avanzamento {
  display: flex; align-items: center; gap: var(--space-lg);
  flex-wrap: wrap;
}
.avanzamento__testo { font-size: var(--testo-sm); color: var(--color-muted-foreground); }
.avanzamento__testo strong { color: var(--color-foreground); font-size: var(--testo-lg); }
.avanzamento .barra-avanzamento { flex: 1; min-width: 200px; }

.passo__testata {
  display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.passo__numero {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-neutro-fondo);
  color: var(--color-muted-foreground);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--testo-sm);
}
.passo__numero--fatto { background: var(--color-ok-fondo); color: var(--color-ok); }
.passo__titolo { font-size: var(--testo-lg); flex: 1; min-width: 0; }
.passo__corpo > p:first-child { color: var(--color-muted-foreground); }
.passo--chiusura { text-align: center; }
.passo--chiusura form { max-width: 320px; margin: var(--space-lg) auto 0; }

/* Riquadro dentro un riquadro: fondo leggermente staccato, altrimenti
   il bianco su bianco non si legge come un contenitore a se' */
.riquadro--interno {
  background: var(--color-background);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.riquadro--interno h3 { margin-bottom: var(--space-xs); }
.riquadro--interno .pulsante { align-self: flex-start; margin-top: auto; }

.separatore {
  border: 0; border-top: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}

.riga-azioni { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }

.elenco-semplice { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.elenco-semplice li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
}
.elenco-semplice li:last-child { border-bottom: 0; }

/* Scelta del piano: l'intera cartella e' il bersaglio, non solo il
   pallino da 16px che nessuno prende al primo colpo su un telefono */
.scelta-piano {
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--raggio);
  cursor: pointer;
  transition: border-color var(--transizione), background-color var(--transizione);
}
.scelta-piano:hover { border-color: var(--color-primary); }
.scelta-piano:focus-within {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}
.scelta-piano input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.scelta-piano__corpo { display: flex; flex-direction: column; gap: 2px; }
.scelta-piano__nome { font-weight: 600; }
.scelta-piano__prezzo { font-size: var(--testo-sm); color: var(--color-foreground); }
.scelta-piano__nota { font-size: var(--testo-xs); color: var(--color-muted-foreground); }

/* Il riquadro della carta e' un iframe di Stripe: gli serve un'altezza
   propria, perche' dentro non c'e' un input di cui ereditare la misura */
.controllo--carta { padding-top: 14px; padding-bottom: 14px; }


/* ---------------------------------------------------------------------
   REGISTRAZIONE
   Stesso riquadro dell'accesso, ma piu' largo: i dati fiscali su una
   colonna da 420px diventano una colonna di venti campi.
   --------------------------------------------------------------------- */
.accesso--largo .accesso__riquadro { max-width: 720px; }

.gruppo-campi {
  border: 0; padding: 0;
  margin: 0 0 var(--space-lg);
}
.gruppo-campi__titolo {
  padding: 0;
  font-size: var(--testo-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-muted-foreground);
  margin-bottom: var(--space-sm);
}

/* Casella di spunta con la sua etichetta accanto: il bersaglio e' tutta
   l'etichetta, non il quadratino */
.campo--casella {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.campo--casella input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.campo--casella label { font-size: var(--testo-sm); cursor: pointer; }


/* ---------------------------------------------------------------------
   IMPORTAZIONE ASSISTITA
   --------------------------------------------------------------------- */
.proposta__testata {
  display: flex; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
/* Una proposta gia' decisa resta visibile ma arretra: dice cosa e' stato
   guardato senza contendere l'attenzione a quelle ancora da leggere */
.proposta--chiusa { background: var(--color-background); }
.proposta--chiusa p { font-size: var(--testo-sm); }

.riga--corrente > td { background: var(--color-info-fondo); }

@media (max-width: 720px) {
  .avanzamento { gap: var(--space-sm); }
}


/* ---------------------------------------------------------------------
   PAGINA DI UN MODULO
   La conferma prima di toccare l'abbonamento (§3.1). Colonna stretta di
   proposito: qui si deve leggere, non scorrere - e' l'unico punto del
   pannello in cui un click muove del denaro.
   --------------------------------------------------------------------- */
.pila--stretta { max-width: 46rem; }

.ritorno { margin: 0; }

.collegamento-piatto {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-size: var(--testo-sm);
  color: var(--color-muted-foreground);
  text-decoration: none;
  /* Bersaglio da 44px anche se il testo e' piccolo (§2.1) */
  min-height: 44px;
  padding: var(--space-xs) 0;
}
.collegamento-piatto:hover { color: var(--color-foreground); text-decoration: underline; }

/* Le condizioni economiche in forma di elenco: etichetta a sinistra,
   numero a destra, come su una fattura. Chi legge cerca la cifra, e la
   trova sempre nella stessa colonna. */
.riepilogo { margin: 0 0 var(--space-md); }

.riepilogo__riga {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}
.riepilogo__riga:last-child { border-bottom: 0; }
.riepilogo__riga dt { color: var(--color-muted-foreground); font-size: var(--testo-sm); }
.riepilogo__riga dd {
  margin: 0; text-align: right;
  font-weight: 600;
}

@media (max-width: 480px) {
  .riepilogo__riga { flex-direction: column; gap: var(--space-xs); }
  .riepilogo__riga dd { text-align: left; }
}


/* ---------------------------------------------------------------------
   CASELLE DEDICATE (app/caselle.php)
   Un riquadro per casella, ognuno con il proprio form. La pagina serve a
   una cosa sola: vedere in un colpo d'occhio quali caselle non sono
   ancora configurate, e configurarle senza cambiare pagina.
   --------------------------------------------------------------------- */
.casella__testata { flex-wrap: wrap; gap: var(--space-md); }
.casella__chi { min-width: 0; }
.casella__stato {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Campo con un pulsante accanto: il caso e' la password da mostrare.
   L'input si prende lo spazio che resta, il pulsante la sua altezza
   intera, cosi' i due bordi si allineano. */
.campo--con-azione { display: flex; gap: var(--space-sm); align-items: stretch; }
.campo--con-azione .controllo { flex: 1; min-width: 0; }
.campo--con-azione .pulsante { flex-shrink: 0; min-height: 0; }

/* Sezione secondaria che si apre solo se serve: l'SMTP per casella e'
   l'eccezione, non la regola, e mostrarlo sempre raddoppierebbe la
   lunghezza del form per tutti. */
.dettagli-secondari {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  margin-bottom: var(--space-lg);
}
.dettagli-secondari > summary {
  cursor: pointer;
  font-size: var(--testo-sm);
  font-weight: 600;
  color: var(--color-muted-foreground);
  padding: var(--space-sm) 0;
  /* 44px di bersaglio anche qui: e' un comando, non una decorazione */
  min-height: 44px;
  display: flex;
  align-items: center;
}
.dettagli-secondari > summary:hover { color: var(--color-foreground); }
.dettagli-secondari[open] > summary { margin-bottom: var(--space-md); }

.casella__azioni {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  /* Due colonne di campi su uno schermo stretto diventano due colonne
     illeggibili: qui la griglia va a capo */
  .casella .griglia--2 { grid-template-columns: 1fr; }
}

/* Via e civico sulla stessa riga: il civico e' corto e una colonna
   larga come quella della via farebbe sembrare che ci vada altro. */
.griglia--indirizzo { grid-template-columns: minmax(0, 1fr) 7rem; }
@media (max-width: 480px) {
  .griglia--indirizzo { grid-template-columns: 1fr; }
}