/* Il vestito di Prontea, uno solo per tutti i pannelli.
 *
 * Stava dentro index.html, e il pannello notturno se n'era fatto uno suo: due
 * prodotti con lo stesso nome e due facce diverse, e ogni ritocco da fare due
 * volte. Due copie di un foglio di stile divergono sempre, e quella che resta
 * indietro e' quella che nessuno riapre.
 *
 * Qui dentro ci sono i colori (chiaro e scuro), la struttura a colonna con il
 * menu verticale, le schede, i pulsanti e i moduli. Quello che e' solo di una
 * pagina resta nella sua pagina.
 */
  :root {
    --ground: #F6F8F7;
    --surface: #FFFFFF;
    --surface-2: #EFF3F1;
    --line: #DCE4E0;
    --line-strong: #C3CFC9;
    --ink: #16211E;
    --ink-2: #46534E;
    --ink-3: #6E7B76;
    --accent: #1F6B54;
    --accent-soft: #E4EFEA;
    --accent-ink: #16513F;
    --live: #B07721;
    --live-soft: #F7EEDD;
    --ok: #2E7D5B;
    --warn: #A8701A;
    --crit: #A8443A;
    --crit-soft: #F8E9E7;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(22,33,30,.05), 0 8px 24px -12px rgba(22,33,30,.14);
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif: ui-serif, "Iowan Old Style", Georgia, "Palatino Linotype", serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ground: #0F1513; --surface: #161E1B; --surface-2: #1D2724; --line: #2A3733;
      --line-strong: #3B4A45; --ink: #E7EDEA; --ink-2: #AFBDB8; --ink-3: #83938D; --accent: #56AE8C; --accent-soft: #1B302A; --accent-ink: #8FD3B7;
      --live: #D3A054; --live-soft: #2E2617; --ok: #56AE8C; --warn: #D3A054;
      --crit: #D98077; --crit-soft: #33201E;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"] {
    --ground: #0F1513; --surface: #161E1B; --surface-2: #1D2724; --line: #2A3733;
    --line-strong: #3B4A45; --ink: #E7EDEA; --ink-2: #AFBDB8; --ink-3: #83938D;
    --accent: #56AE8C; --accent-soft: #1B302A; --accent-ink: #8FD3B7;
    --live: #D3A054; --live-soft: #2E2617; --ok: #56AE8C; --warn: #D3A054;
    --crit: #D98077; --crit-soft: #33201E;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
  :root[data-theme="light"] {
    --ground: #F6F8F7; --surface: #FFFFFF; --surface-2: #EFF3F1; --line: #DCE4E0;
    --line-strong: #C3CFC9; --ink: #16211E; --ink-2: #46534E; --ink-3: #6E7B76;
    --accent: #1F6B54; --accent-soft: #E4EFEA; --accent-ink: #16513F;
    --live: #B07721; --live-soft: #F7EEDD; --ok: #2E7D5B; --warn: #A8701A;
    --crit: #A8443A; --crit-soft: #F8E9E7;
    --shadow: 0 1px 2px rgba(22,33,30,.05), 0 8px 24px -12px rgba(22,33,30,.14);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--ground); color: var(--ink);
    font-family: var(--sans); font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3 { margin: 0; font-family: var(--serif); font-weight: 600; text-wrap: balance; letter-spacing: -.01em; }
  button, input, select { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  /* ── guscio ───────────────────────────────────────────── */
  .app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

  .rail {
    background: var(--surface); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  }
  .brand { padding: 20px 18px 16px; border-bottom: 1px solid var(--line); }
  .brand .clinic { font-family: var(--serif); font-size: 16px; font-weight: 600; }
  .brand .who { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

  .agent {
    margin: 14px 12px; padding: 11px 12px; border-radius: var(--radius);
    background: var(--accent-soft); border: 1px solid transparent;
    display: flex; gap: 10px; align-items: center;
  }
  .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; position: relative; }
  .pulse::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 1px solid var(--ok); opacity: .5; animation: ring 2.4s ease-out infinite;
  }
  @keyframes ring { 0% { transform: scale(.6); opacity: .6 } 100% { transform: scale(1.3); opacity: 0 } }
  .agent .st { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
  .agent .sub { font-size: 11px; color: var(--ink-3); }

  nav { padding: 4px 8px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
  /* ── la barra di scorrimento del menu ──────────────────────────────────
     Quella di sistema, afferrata, diventa larga e grigio chiaro e stona con
     tutto il resto. ⚠️ Provato prima a ridisegnarla con `::-webkit-scrollbar`:
     **nell'app non cambia niente**, perché la WebView di macOS usa le barre a
     scomparsa del sistema e quelle regole le ignora (nel browser invece
     funzionano, ed è il motivo per cui sembrava fatto). Quindi la barra di
     sistema si nasconde e se ne disegna una: quattro pixel, arrotondata, del
     colore dei separatori. Compare quando serve e si spegne da sola. */
  nav { scrollbar-width: none; }
  nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

  .barra-menu {
    position: absolute; right: 3px; width: 4px; border-radius: 20px;
    background: transparent; opacity: 0; transition: opacity .25s;
    pointer-events: none; z-index: 3;
  }
  .barra-menu[data-serve="true"] { pointer-events: auto; }
  .barra-menu[data-viva="true"] { opacity: 1; }
  .barra-menu i {
    display: block; width: 100%; border-radius: 20px;
    background: var(--line-strong); transition: background .15s;
  }
  .rail:hover .barra-menu[data-serve="true"] { opacity: 1; }
  .barra-menu:hover i, .barra-menu[data-presa="true"] i { background: var(--ink-3); }
  .barra-menu[data-presa="true"] i { background: var(--accent); }
  @media (prefers-reduced-motion: reduce) { .barra-menu { transition: none; } }
  nav button {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink-2);
    font-size: 13.5px; transition: background .12s, color .12s;
  }
  nav button:hover { background: var(--surface-2); color: var(--ink); }
  nav button[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
  nav .count {
    font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 20px;
    background: var(--crit-soft); color: var(--crit); font-variant-numeric: tabular-nums;
  }
  nav .sep { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 14px 10px 5px; }

  .rail-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); }
  .imp-scorciatoia { width: 100%; display: flex; align-items: center; gap: 8px; justify-content: center; }
  .imp-scorciatoia .ing { font-size: 13px; line-height: 1; }
  .rail-foot .imp-scorciatoia[aria-current="true"] { border-color: var(--accent); color: var(--accent); }

  /* ── impostazioni ─────────────────────────────────────────
     ⚠️ Niente griglia di riquadri qui dentro: ogni scheda aveva un'altezza
     diversa e la pagina si riempiva di buchi. Le impostazioni si leggono a
     **righe**: a sinistra cosa è, a destra il comando, sempre allineati. È lo
     stesso motivo per cui le impostazioni di macOS non sono una bacheca. */
  .imp-riga {
    /* ⚠️ UNA SOLA larghezza per la colonna dei comandi, in tutta la pagina:
       con due misure diverse (300 e 420) la colonna destra si spostava avanti
       e indietro mentre scorrevi, e l'occhio doveva ricercarla ogni volta. */
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 8px 24px;
    /* ⑩ La scala: 18px fra righe sorelle, 34px fra capitoli (vedi .capitolo).
       Quando lo stacco interno e quello fra sezioni sono uguali, la pagina
       sembra un elenco unico e la gerarchia sparisce. */
    align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line);
  }
  .imp-riga:first-child { padding-top: 0; }
  .imp-riga:last-child { padding-bottom: 0; border-bottom: 0; }
  .imp-riga .che { font-size: 13.5px; font-weight: 600; }
  .imp-riga .perche { font-size: 12.5px; color: var(--ink-3); margin: 3px 0 0; line-height: 1.45; }
  /* ⚠️ "eco" = quello che il sistema risponde alla TUA scelta, non una
     spiegazione fissa. Prima erano due paragrafi grigi identici e non si
     capiva quale fosse la conseguenza di cosa: un filo d'accento e un rientro
     bastano a dire "questa riga cambia quando cambi il comando". */
  .imp-riga .perche.eco {
    margin-top: 7px; padding-left: 10px; border-left: 2px solid var(--accent);
    color: var(--ink-2);
  }
  .imp-riga .perche.eco:empty { display: none; }
  .imp-riga .cmd { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
  /* ⚠️ `width:100%` va a tutto **tranne** alle caselle: una casella larga
     trecento pixel spinge la sua scritta fuori dal riquadro (in inglese
     "Send it to me" finiva oltre il bordo dello schermo). */
  .imp-riga .cmd input:not([type="checkbox"]), .imp-riga .cmd select { width: 100%; }
  .imp-riga .cmd input[type="checkbox"] { width: auto; flex: none; margin: 0; }
  .imp-riga .cmd .chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .imp-riga .cmd .fisso { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); padding-top: 8px; }
  .imp-riga .cmd .ghost { align-self: flex-start; }
  .imp-riga label.riga-check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
  .imp-riga .cmd .chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .imp-riga .cmd .riga-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .imp-riga .cmd .nota-cmd { font-size: 12px; color: var(--ink-3); margin: 2px 0 0; line-height: 1.4; }
  @media (max-width: 900px) {
    .imp-riga { grid-template-columns: 1fr; gap: 10px; }
    .imp-riga .cmd { align-items: stretch; }
  }
  .ghost {
    background: none; border: 1px solid var(--line-strong); color: var(--ink-2);
    padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px;
  }
  .ghost:hover { border-color: var(--accent); color: var(--accent); }

  /* ── area principale ──────────────────────────────────── */
  main { padding: 26px 30px 60px; max-width: 1180px; }
  /* Il pulsante di destra si allinea **al centro delle due righe** di testo.
     In basso finiva appoggiato alla scheda sotto (sembrava suo); in alto
     restava sospeso sopra la riga di spiegazione. Lo spazio che separa la
     testata dal resto della pagina lo mette `.head`, non il margine della
     riga di spiegazione: così il blocco di testo è alto quanto il testo, e
     centrarci il pulsante dà il risultato che ci si aspetta. */
  .head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
  .head .lede { margin-bottom: 0; }
  .head h1 { font-size: 25px; }
  .lede { color: var(--ink-2); max-width: 62ch; margin: 6px 0 22px; }

  /* la riga che lega il dato al comportamento dell'agente */
  /* `hidden` batte qualunque classe. Senza questa riga un elemento con
     `display: flex` addosso (come .effect) resta visibile anche nascosto: il
     riquadro "da applicare" si vedeva a ogni apertura del pannello, e diceva
     che c'era qualcosa in sospeso quando non c'era niente. */
  [hidden] { display: none !important; }

  .effect {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--live);
    border-radius: var(--radius-sm); padding: 10px 13px; margin-bottom: 18px; font-size: 13px; color: var(--ink-2);
  }
  .effect b { color: var(--ink); font-weight: 600; }
  .effect .tag {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--live);
    background: var(--live-soft); padding: 2px 6px; border-radius: 4px; flex: none; margin-top: 1px;
  }

  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .card-h { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .card-h h3 { font-size: 15px; }
  .card-h .hint { font-size: 12px; color: var(--ink-3); }

  /* Ricerca e filtri: stanno nella testata della sezione, non dentro la
     tabella, così restano fermi mentre l'elenco scorre. */
  .cerca {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .cerca input {
    width: 240px; max-width: 46vw;
    padding: 7px 11px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); font: inherit; font-size: 13px;
  }
  .cerca input::placeholder { color: var(--ink-3); }
  .cerca input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .filtro {
    font-size: 12.5px; padding: 6px 11px; border-radius: 20px;
    border: 1px solid var(--line); background: transparent;
    color: var(--ink-2); cursor: pointer;
  }
  .filtro[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
  .card-b { padding: 16px; }

  .grid { display: grid; gap: 16px; }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g2 { grid-template-columns: 1.4fr 1fr; }
  /* `minmax(0, 1fr)` e non `1fr`: una colonna di griglia non può rimpicciolirsi
     sotto il proprio contenuto, e bastava un numero di telefono o una fila di
     pulsanti per tenere la barra laterale larga il doppio dello schermo. */
  @media (max-width: 1000px) {
    .g3, .g2 { grid-template-columns: minmax(0, 1fr); }
    .app { grid-template-columns: minmax(0, 1fr); }
    .rail, main { min-width: 0; }
    .rail { position: static; height: auto; }
  }

  /* ── in mano ──────────────────────────────────────────────────────────────
     Una titolare di centro estetico guarda queste cose dal telefono, in piedi,
     fra un cliente e l'altro. Non tutto deve funzionare su uno schermo così:
     l'agenda settimanale e la griglia degli orari sono lavoro da scrivania, e
     fingere il contrario darebbe tre schermate mediocri invece di tre buone.
     Le tre che devono funzionare sono **Oggi, Chiamate e Domande**. */
  @media (max-width: 700px) {
    /* Il menu diventa una striscia orizzontale in alto: una barra laterale
       alta quanto lo schermo si mangerebbe metà telefono. */
    .rail { border-right: 0; border-bottom: 1px solid var(--line); }
    .brand { padding: 14px 16px 12px; }
    .brand h1, .brand .n { font-size: 19px; }
    /* `flex-direction: row` va scritto: la regola di base mette `column`, e
       senza azzerarla il menu resta in colonna anche dentro questo blocco. */
    nav { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden;
          gap: 4px; padding: 4px 10px;
          scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    nav button { flex: 0 0 auto; }
    nav::-webkit-scrollbar { display: none; }
    .barra-menu { display: none; }
    nav .sep { display: none; }        /* i titoletti di sezione non servono in riga */
    nav button { white-space: nowrap; padding: 9px 13px; text-align: center; }
    /* "Chloe risponde" NON si nasconde: dal telefono è proprio la cosa che
       uno controlla per prima. Diventa una riga sola sopra il menu. */
    .agent { margin: 0; border-radius: 0; border-left: 0; border-right: 0;
             padding: 9px 16px; gap: 9px; }
    .agent .sub { font-size: 12px; }
    .rail-foot { display: none; }          /* il cambio tema segue quello di sistema */

    html, body { overflow-x: hidden; }
    main { padding: 18px 16px 80px; width: 100%; box-sizing: border-box; }
    .card, .effect { max-width: 100%; box-sizing: border-box; }
    .head { flex-direction: column; align-items: stretch; gap: 12px; }
    .head h1 { font-size: 21px; }
    .lede { margin-bottom: 16px; font-size: 14px; }
    .cerca { width: 100%; }
    .cerca input { width: 100%; max-width: none; }
    .head .btn { width: 100%; }

    /* Le tabelle larghe scorrono dentro il loro riquadro: la pagina non deve
       mai scorrere di lato, o si perde la colonna del nome. */
    .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 480px; }
    /* Tranne quella di oggi, che è la schermata più guardata e sta stretta. */
    #oggi-rows { min-width: 0; }
    #oggi-rows td:first-child { width: 48px; }

    .stat .n { font-size: 30px; }
    .att-riga { grid-template-columns: 76px 1fr; }
    #avviso { left: 12px; right: 12px; bottom: 12px; transform: translateY(12px);
              width: auto; }
    #avviso[data-aperto="true"] { transform: translateY(0); }
    .sheet { width: auto; margin: 0 10px; max-height: 88vh; overflow-y: auto; }
    .trascritto { max-height: 62vh; }
    .tr-riga { grid-template-columns: 1fr; gap: 2px; }
    .tr-azione { margin-left: 0; }
  }

  .stat .n { font-family: var(--mono); font-size: 27px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .stat .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .stat .d { font-size: 12px; color: var(--ink-2); margin-top: 3px; }

  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
  td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
  tr:last-child td { border-bottom: 0; }
  .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .scroll { overflow-x: auto; }

  .chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px;
    border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer;
    font-size: 12.5px; color: var(--ink-2); transition: .12s;
  }
  .chip:hover { border-color: var(--accent); }
  .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
  .chip:disabled { opacity: .4; cursor: default; }
  /* Il "+" sta con le persone perché è la stessa famiglia di cose: qui si sceglie
     chi guardare, e da qui si aggiunge chi ancora non c'è. */
  .chip-piu { font-size: 15px; line-height: 1; padding: 4px 11px; color: var(--ink-3); }
  .chip-piu:hover { color: var(--accent); border-color: var(--accent); }
  .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

  .pill { font-size: 11.5px; padding: 2px 8px; border-radius: 20px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
  .pill.ok { background: var(--accent-soft); color: var(--accent-ink); }
  .pill.warn { background: var(--live-soft); color: var(--warn); }
  .pill.crit { background: var(--crit-soft); color: var(--crit); }

  .btn {
    background: var(--accent); color: #fff; border: 0; padding: 8px 14px;
    border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 500;
  }
  .btn:hover { filter: brightness(1.08); }
  .btn.sm { padding: 5px 10px; font-size: 12.5px; }
  .ghost.sm { padding: 3px 9px; font-size: 12px; }
  .ghost:disabled { opacity: .35; cursor: default; }

  /* Pochi movimenti a vista, gli altri si raggiungono scorrendo: l'altezza
     della scheda non deve dipendere da quanto ha speso il cliente. */
  /* ⚠️ La lista dei movimenti non ha un'altezza sua: prende quella che avanza
     dentro la scheda del credito, che a sua volta è alta quanto il grafico
     accanto. Se compare un avviso (una fascia in attesa, i minuti finiti) la
     lista si stringe; se non c'è niente si allarga e se ne vedono di più.
     Prima era fissa, e o lasciava un buco o sfondava la scheda. */
  .card-credito { display: flex; flex-direction: column; }
  .card-credito .card-b { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .lista-movimenti { flex: 1 1 auto; min-height: 66px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }

  /* ⚠️ `height: 0` + `min-height: 100%` è il modo di dire a una scheda: non
     decidere tu quanto è alta la riga, prendi quella che decide l'altra. Senza,
     la colonna del credito cresceva con i movimenti e diventava più alta del
     grafico: il problema di prima, al contrario. Vale solo quando le due
     colonne sono davvero affiancate; sotto i mille pixel vanno una sotto
     l'altra e una riga alta zero le farebbe sparire. */
  @media (min-width: 1001px) {
    .g2 > .card-credito { height: 0; min-height: 100%; }
  }
  .lista-movimenti::-webkit-scrollbar { width: 6px; }
  .lista-movimenti::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

  /* Nella testata di una sezione i pulsanti stanno in fila: se `.ghost` e
     `.btn` hanno padding e corpo diversi risultano di due altezze, e la riga
     sembra montata male. Qui si allineano, senza toccare gli stessi pulsanti
     quando compaiono dentro le tabelle. */
  .head .btn, .head .ghost {
    padding: 8px 14px; font-size: 13px; line-height: 1.3; border-radius: var(--radius-sm);
  }

  /* ── agenda ───────────────────────────────────────────── */
  /* ⚠️ Il numero dei giorni **non** si scrive qui. Era `repeat(6, ...)` da
     quando la settimana era di sei giorni: aggiunta la domenica, il settimo
     giorno andava a capo e sfasava tutta la griglia di una cella per riga —
     le ore scendevano in diagonale e la domenica finiva sotto il lunedì.
     Adesso il conto arriva da chi disegna la tabella, che lo prende dai dati. */
  .cal { display: grid; grid-template-columns: 56px repeat(var(--giorni, 7), minmax(96px, 1fr)); min-width: calc(56px + var(--giorni, 7) * 96px); }
  .cal .hcell { padding: 8px 6px; border-bottom: 1px solid var(--line-strong); font-size: 12px; }
  .cal .hcell b { display: block; font-size: 13px; }
  .cal .hcell span { color: var(--ink-3); font-size: 11px; }
  .cal .time { font-family: var(--mono); font-size: 10px; color: var(--ink-3); padding: 0 8px 0 0; text-align: right; border-right: 1px solid var(--line); height: 24px; }
  .cal .slot { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 24px; padding: 1px 2px; }
  .cal .slot.libero { cursor: pointer; }
  .cal .slot.libero:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
  .cal .slot.libero::after { content: "+"; color: var(--accent); font-size: 13px; display: none; justify-content: center; line-height: 22px; }
  .cal .slot.libero:hover::after { display: flex; }
  .cal .slot.chiuso { background: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--surface-2) 5px, var(--surface-2) 10px); }
  .ev {
    height: 100%; border-radius: 5px; padding: 3px 6px; font-size: 11.5px; line-height: 1.25;
    border-left: 3px solid var(--op); background: var(--surface-2); color: var(--ink);
    overflow: hidden; cursor: pointer;
  }
  .ev b { display: block; font-weight: 600; }
  .ev span { color: var(--ink-3); font-size: 10.5px; }

  /* ── griglia orari ────────────────────────────────────── */
  .hours { display: grid; grid-template-columns: 92px repeat(18, minmax(19px, 1fr)); gap: 2px; min-width: 640px; }
  .hours .lbl { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; }
  .hours .hh { font-family: var(--mono); font-size: 10px; color: var(--ink-2); text-align: center; }
  .hours .hh.mezza { font-size: 8.5px; color: var(--ink-3); opacity: .7; }
  .hours button {
    border: 1px solid var(--line); background: var(--surface); height: 26px; border-radius: 4px;
    padding: 0; transition: .1s; cursor: default;
  }
  .hours button[data-on="1"] { background: var(--op, var(--accent)); border-color: transparent; }
  /* Fuori dalla modifica le caselle sono una lettura, non un comando: niente
     puntatore, niente hover. Cambiare gli orari di lavoro per un clic distratto
     significa che l'agente smette di proporre ore che invece esistono. */
  .hours[data-edit="true"] button { cursor: pointer; }
  .hours[data-edit="true"] button:hover { border-color: var(--op, var(--accent)); transform: scale(1.12); }
  .hours[data-edit="true"] button[data-on="1"]:hover { filter: brightness(1.12); }
  .hours:not([data-edit="true"]) button[data-on="0"] { opacity: .55; }

  .op-row { display: flex; align-items: center; gap: 10px; }
  .av { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; flex: none; }

  .inbox-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .inbox-item:last-child { border-bottom: 0; }
  .inbox-item .q { font-weight: 500; }
  .inbox-item .meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

  .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
  .field label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .field input, .field select, .field textarea {
    padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    /* Il colore del testo va dichiarato, non ereditato: i campi di modulo non
       ereditano `color` dalla pagina, si tengono quello di sistema. Con lo
       sfondo scuro nostro e il nero del sistema sotto, la textarea era
       illeggibile — e non si vedeva sugli input solo per un caso. */
    background: var(--surface); color: var(--ink); width: 100%;
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
  /* ⚠️ Gli stessi campi, fuori da `.field`: nelle impostazioni stanno dentro le
     righe, e senza questa riga tornavano bianchi da browser — illeggibili sul
     tema scuro. */
  .imp-riga .cmd input, .imp-riga .cmd select {
    padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font: inherit;
  }
  /* Le tendine di sistema arrivano col loro gradiente grigio e la freccetta
     azzurra: dentro un pannello scuro sembrano incollate da un altro programma.
     Si spegne l'aspetto nativo e si disegna la freccia come una riga di testo,
     con lo stesso grigio delle altre note. */
  .imp-riga .cmd select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2383938D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
  }
  .imp-riga .cmd select:hover { border-color: var(--accent); }
  .imp-riga .cmd select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .imp-riga .cmd input::placeholder { color: var(--ink-3); }
  .imp-riga .cmd input:disabled, .imp-riga .cmd select:disabled { opacity: .5; }
  /* Senza `appearance: none` macOS disegna il suo menu a tendina grigio, che
     non c'entra niente col resto e sembra un pezzo di un altro programma.
     La freccia va ridisegnata a mano, altrimenti sparisce e non si capisce
     più che il campo si apre. */
  .field select {
    appearance: none; -webkit-appearance: none;
    padding-right: 30px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                      linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  .field select:hover { border-color: var(--accent); }
  .field textarea { resize: vertical; min-height: 66px; line-height: 1.5; font: inherit; }
  .field select:focus, .field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* Un intervallo si legge come un intervallo: due campi accostati e un
     trattino in mezzo, non due riquadri impilati che sembrano scollegati. */
  .intervallo { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 13px; }
  .intervallo .field { flex: 1; margin-bottom: 0; }
  .intervallo .tratto { padding-bottom: 10px; color: var(--ink-3); font-size: 14px; }

  /* ── finestra di dialogo ──────────────────────────────── */
  .modal {
    position: fixed; inset: 0; display: none; place-items: center; z-index: 60; padding: 20px;
  }
  .modal[data-open="true"] { display: grid; }
  /* Il fondo scurito dice che il resto è bloccato finché non si decide. */
  .modal::before { content: ""; position: absolute; inset: 0; background: rgba(10,16,14,.45); }
  .modal .sheet { position: relative; }
  /* La finestra non esce mai dallo schermo: il corpo scorre e i pulsanti
     restano in fondo, visibili. Prima una finestra lunga veniva tagliata e il
     pulsante per confermare finiva fuori: chi la leggeva pensava di doverla
     chiudere. */
  .modal .sheet { display: flex; flex-direction: column; max-height: 86vh; }
  .modal .sheet .corpo { overflow-y: auto; overscroll-behavior: contain; }
  /* I pulsanti: aria sopra (il testo del passo non deve toccarli, o sembra
     che sotto ci sia altro da leggere), il principale grande e il secondario
     silenzioso. Due pulsanti della stessa larghezza affiancati sembrano un
     interruttore, non una scelta fra fare e non fare. */
  .modal .sheet .azioni {
    flex: 0 0 auto; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
    display: flex; justify-content: flex-end; gap: 10px;
  }
  /* Nelle finestre larghe i pulsanti non si allargano a metà schermo: due
     bottoni uguali affiancati sembrano un interruttore fra due opzioni, non
     "fai" e "lascia stare". Il principale è grande, l'altro sta zitto. */
  .modal .sheet[data-largo] .azioni .btn,
  .modal .sheet[data-largo] .azioni .ghost { flex: 0 0 auto; }
  .modal .sheet .azioni .btn { padding: 10px 22px; }
  .modal .sheet .corpo { padding-bottom: 2px; }
  .modal .sheet {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 30px 70px -25px rgba(0,0,0,.4); width: min(440px, 100%); padding: 22px;
  }
  /* Certe finestre non sono un elenco di campi ma una spiegazione con dentro
     due strade da confrontare: in colonna stretta si leggono una sotto
     l'altra e sembrano una la conseguenza dell'altra. Affiancate si vedono
     per quello che sono, due alternative. */
  .modal .sheet[data-largo="1"] { width: min(720px, 100%); }
  .modal .sheet[data-largo="2"] { width: min(860px, 100%); }
  /* Niente barra orizzontale: il contenuto sta sempre dentro, e una barra che
     non serve a niente fa pensare che qualcosa sia tagliato fuori. */
  .modal .sheet, .modal .sheet .corpo { overflow-x: hidden; }
  .modal h2 { font-size: 18px; margin-bottom: 5px; }
  .modal .why { color: var(--ink-2); font-size: 13px; margin: 0 0 18px; }
  .modal .row { display: flex; gap: 9px; margin-top: 20px; }
  .modal .row .btn, .modal .row .ghost { flex: 1; text-align: center; }
  .btn.danger { background: var(--crit); }
  /* Chiamate: il giorno si scrive una volta, poi si legge per colonne. */
  .giorno-sep td {
    padding: 14px 0 6px; font-size: 11.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
    border-bottom: 1px solid var(--line);
  }
  /* "18×" accanto al nome: la stessa persona che ha richiamato, non 18 clienti. */
  .volte {
    margin-left: 7px; font-size: 11px; font-weight: 600;
    color: var(--ink-3); background: var(--surface-2);
    padding: 1px 6px; border-radius: 20px; vertical-align: middle;
  }
  /* Gli appuntamenti già passati restano leggibili ma si tirano indietro:
     alle 18 la riga delle 9 non deve pesare quanto quella delle 18:30. */
  tr.passato td { opacity: .45; }
  .inbox-item[data-vai] { cursor: pointer; }
  .inbox-item[data-vai]:hover .q { text-decoration: underline; }
  /* La barra dell'annullamento: sta in basso, sopra tutto, e se ne va da sola.
     Un messaggio che resta per sempre diventa arredamento e non si legge più. */
  #avviso {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
    display: flex; align-items: center; gap: 14px;
    padding: 11px 14px 11px 18px; border-radius: 10px;
    background: var(--ink); color: var(--ground);
    box-shadow: 0 8px 28px rgba(0,0,0,.24);
    font-size: 13.5px; z-index: 60;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  #avviso[data-aperto="true"] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  #avviso button {
    color: var(--ground); background: transparent; border: 1px solid rgba(255,255,255,.28);
    padding: 4px 12px; border-radius: 20px; font: inherit; font-weight: 600; cursor: pointer;
  }
  #avviso button:hover { background: rgba(255,255,255,.12); }
  @media (prefers-reduced-motion: reduce) { #avviso { transition: none; } }

  /* Il registro: una colonna sola, la fonte a sinistra come un'etichetta. */
  .att-riga { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .att-riga:last-child { border-bottom: 0; }
  .att-quando { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
  .att-che { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  .att-che[data-da="telefono"] { color: var(--accent-ink); }
  .att-che[data-da="pannello"] { color: var(--ink-3); }
  .att-dett { color: var(--ink-2); font-size: 13px; }
  .att-giorno { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 16px 0 4px; }

  /* La schermata di accesso: copre tutto finché non si è entrati, così non
     compare mai un lampo di dati prima del controllo. */
  /* ── Le schermate d'ingresso (login, attivazione, recupero) ────────────────
     Un vestito solo per tutti i moduli: stessa larghezza contenuta, stessi
     campi, stessa spaziatura. Prima ognuno aveva il suo, e tre di loro non
     avevano alcuna larghezza massima — così il testo correva da un bordo
     all'altro dello schermo. */
  #ingresso {
    position: fixed; inset: 0; z-index: 100; background: var(--ground);
    /* ⚠️ Scrollabile, e "safe center": un modulo più alto della finestra (la
       prima attivazione, con codice + nome + telefono + email + password +
       criteri) scorre invece di farsi tagliare in cima contro il bordo. I
       moduli corti restano comunque centrati. */
    display: flex; align-items: safe center; justify-content: center;
    overflow-y: auto; padding: 48px 24px;
  }
  #ingresso[hidden] { display: none; }

  /* Tutti i moduli, nascosti per default: li accende il selettore del modo. */
  #form-accesso, #form-attiva, #form-recupero, #form-nuova, #form-codice {
    display: none; flex-direction: column;
    width: 100%; max-width: 380px; margin: auto;
  }
  #form-accesso { display: flex; }          /* il login è quello di partenza */
  #ingresso[data-modo="attiva"]   #form-accesso,
  #ingresso[data-modo="recupero"] #form-accesso,
  #ingresso[data-modo="nuova"]    #form-accesso,
  #ingresso[data-modo="codice"]   #form-accesso { display: none; }
  #ingresso[data-modo="attiva"]   #form-attiva   { display: flex; }
  #ingresso[data-modo="recupero"] #form-recupero { display: flex; }
  #ingresso[data-modo="nuova"]    #form-nuova    { display: flex; }
  #ingresso[data-modo="codice"]   #form-codice   { display: flex; }

  /* Titolo e sottotitolo, uguali ovunque. */
  #ingresso h1 { font-size: 27px; line-height: 1.15; margin: 0 0 4px; }
  #ingresso h1.marchio { letter-spacing: -.01em; }
  #ingresso > form > p { color: var(--ink-2); margin: 0 0 22px; font-size: 14px; line-height: 1.5; }

  /* Etichette e campi: una regola per tutti, con più aria fra l'una e l'altro. */
  #ingresso label {
    display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-3); margin: 14px 0 6px;
  }
  #ingresso input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
    padding: 11px 13px; border-radius: 9px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink);
  }
  #ingresso input::placeholder { color: var(--ink-3); }
  #ingresso input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

  /* Il pulsante principale e i link per passare da un modulo all'altro. */
  #ingresso .btn { margin-top: 22px; }
  #ingresso .passa {
    background: none; border: 0; color: var(--accent-ink); font: inherit; font-size: 13.5px;
    cursor: pointer; padding: 12px; margin-top: 4px; border-radius: 8px; text-align: center;
  }
  #ingresso .passa:hover { background: var(--accent-soft); }
  #ingresso .errore {
    background: var(--crit-soft); color: var(--crit); font-size: 13px;
    padding: 9px 12px; border-radius: 8px; margin-top: 14px;
  }
  #ingresso .hint { color: var(--ink-3); font-size: 12px; line-height: 1.5; margin: 8px 0 0; }

  /* La barra della forza della password: rossa = non la accettiamo,
     gialla = va bene, verde = molto sicura. Tre parti, non un punteggio da
     confrontare — a chi sceglie serve solo sapere se può andare avanti. */
  .forza { margin-top: 12px; }
  .forza .barra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .forza .barra i { height: 5px; border-radius: 3px; background: var(--line); transition: background .18s; }
  .forza[data-livello="rosso"] .barra i:nth-child(1) { background: var(--crit); }
  .forza[data-livello="giallo"] .barra i:nth-child(-n+2) { background: var(--warn); }
  .forza[data-livello="verde"] .barra i { background: var(--accent); }
  .forza .verdetto { font-size: 12.5px; margin-top: 8px; min-height: 1.2em; color: var(--ink-2); }
  .forza[data-livello="rosso"] .verdetto { color: var(--crit); }
  .forza .criteri { margin: 8px 0 0; padding-left: 16px; color: var(--ink-3); font-size: 11.5px; line-height: 1.6; }
  #form-attiva h1 { font-size: 26px; margin-bottom: 2px; }
  #form-attiva p { color: var(--ink-2); margin-bottom: 18px; font-size: 14px; }
  #form-attiva label { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
  #form-attiva input {
    padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 14px;
  }
  #form-attiva input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  #form-attiva .btn { margin-top: 18px; }
  #form-attiva input#at-codice {
    font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase;
  }
  .passa {
    background: none; border: 0; color: var(--accent); font: inherit; font-size: 13px;
    cursor: pointer; padding: 14px 0 0; text-align: center;
  }
  .passa:hover { text-decoration: underline; }

  /* I giorni: acceso e spento devono distinguersi **senza leggere**. Prima la
     differenza era solo una sfumatura di verde, e non si capiva che si potesse
     toccarli. */
  .chip.giorno { padding-left: 26px; position: relative; }
  .chip.giorno::before {
    content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid var(--line-strong); background: transparent;
  }
  .chip.giorno[aria-pressed="true"]::before {
    background: var(--accent); border-color: var(--accent);
  }
  .chip.giorno[aria-pressed="false"] { opacity: .62; text-decoration: line-through; }

  .legenda { display: flex; gap: 14px; margin-top: 9px; font-size: 12px; color: var(--ink-3); }
  .legenda span { display: flex; align-items: center; gap: 6px; }
  .legenda i {
    width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid var(--line-strong); display: inline-block;
  }
  .legenda i.acceso { background: var(--accent); border-color: var(--accent); }

  .vuoto { padding: 28px 4px; color: var(--ink-3); text-align: center; }

  /* La trascrizione: due voci alternate, e le azioni in mezzo a dimostrare
     che quello che l'assistente dice di aver fatto lo ha fatto davvero. */
  .trascritto { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 6px; }
  .tr-riga { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: start; }
  .tr-riga p { margin: 0; line-height: 1.55; }
  .tr-chi { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
  .tr-riga.cliente p { color: var(--ink); font-weight: 500; }
  .tr-riga.chloe p { color: var(--ink-2); }
  .tr-azione {
    margin-left: 72px; font-size: 12px; color: var(--accent-ink);
    background: var(--accent-soft); border-radius: 6px;
    padding: 4px 10px; align-self: flex-start;
  }

  .recap {
    background: var(--surface-2); border-radius: var(--radius-sm); padding: 11px 13px;
    font-size: 13px; margin-bottom: 4px;
  }
  .recap .from { color: var(--ink-3); text-decoration: line-through; }
  .recap .to { color: var(--ink); font-weight: 600; }
  /* ⚠️ Niente `display:flex` su una `<td>`: la cella smette di essere una
     cella di tabella, e il bordo della riga non le passa più attraverso — la
     riga di separazione appariva **spezzata** proprio sotto i pulsanti. Si
     tiene la cella com'è e si allineano i pulsanti a destra: `font-size:0`
     mangia lo spazio bianco fra un <button> e l'altro (il loro font se lo
     ridichiara `.ghost`), il margine fa da distanza. */
  td.rowbtns { text-align: right; white-space: nowrap; font-size: 0; }
  td.rowbtns .ghost { margin-left: 6px; vertical-align: middle; }

  /* ── i gesti da fare sul telefono ──────────────────────────────────────
     Questa finestra la legge una titolare in piedi, col telefono in mano e un
     cliente che aspetta. Deve capire in tre secondi **cosa digitare** e **cosa
     deve succedere dopo**. Regole che ne discendono, e che vanno tenute:
     ① una cosa sola in evidenza per passo: il codice;
     ② mai due grigi diversi nella stessa area, o diventa rumore;
     ③ niente barrette verticali sparse: la sola linea verticale è quella che
        tiene insieme un passo, e serve a legare il numero al suo contenuto. */
  .gesti { display: flex; flex-direction: column; gap: 26px; margin: 2px 0 6px; }
  .gesto { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; }
  .gesto > .n {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent); color: var(--ground);
    font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .gesto .che { font-size: 14px; line-height: 1.5; margin-bottom: 12px; color: var(--ink); }
  .gesto .che b { font-weight: 650; }

  /* La scatola del codice: chiusa su quattro lati, il codice al centro, e un
     fondo che **appartiene alla scheda** invece di bucarla. Il nero pieno
     dentro la scheda verde faceva un buco, e l'occhio ci cascava dentro. */
  .codice {
    background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px; padding: 13px 14px; text-align: center;
  }
  .codice .cifre {
    display: block; font-family: var(--mono); font-size: 19.5px; letter-spacing: .04em;
    color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .codice .poi { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }

  /* Il risultato atteso: allineato al testo del passo, senza barretta. È una
     conseguenza, non una citazione. */
  .attesa { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-top: 12px; }
  .attesa b { color: var(--accent-ink); font-weight: 600; }
  .attesa + .attesa { margin-top: 8px; }

  .scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .gesti-affiancati { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
  @media (max-width: 700px) {
    .scelte, .gesti-affiancati { grid-template-columns: 1fr; }
  }
  .scelta {
    border: 1px solid var(--line); border-radius: 11px; padding: 14px;
    display: flex; flex-direction: column; gap: 12px; background: var(--surface-2);
  }
  .scelta[data-consigliata="true"] { border-color: var(--accent); background: var(--accent-soft); }
  .scelta .titolo {
    font-size: 13.5px; font-weight: 650; display: flex; align-items: center;
    gap: 8px; flex-wrap: wrap;
  }
  .scelta .quando { font-size: 12.5px; color: var(--ink-2); }
  /* Dentro una scheda affiancata il codice ha meno larghezza: si stringe un
     filo, perché deve restare su una riga sola. Spezzato a capo un codice di
     deviazione non si digita più. */
  .scelte .codice .cifre { font-size: 17.5px; }
  .scelte .codice { padding: 12px 10px; }

  /* Il suggerimento che compare cliccando una casella fuori dalla modifica.
     Prima il clic non faceva niente e basta: un comando che non risponde
     sembra rotto, non protetto. */
  .hint-pop {
    position: absolute; z-index: 50; background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: 0 12px 30px -10px rgba(0,0,0,.35); padding: 12px 14px;
    width: 250px; font-size: 13px; color: var(--ink-2);
    animation: pop .14s ease-out;
  }
  .hint-pop b { color: var(--ink); }
  .hint-pop .row { display: flex; gap: 8px; margin-top: 11px; }
  .hint-pop .row .btn { flex: 1; }
  .hint-pop::after {
    content: ""; position: absolute; top: -6px; left: var(--freccia, 24px);
    width: 10px; height: 10px; background: var(--surface);
    border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong);
    transform: rotate(45deg);
  }
  @keyframes pop { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
  @media (prefers-reduced-motion: reduce) { .hint-pop { animation: none } }
  /* La casella cliccata resta segnata finché il suggerimento è aperto */
  .hours button[data-chiesto="1"] { outline: 2px solid var(--op, var(--accent)); outline-offset: 1px; }

  /* ── scelta delle date ────────────────────────────────── */
  .mese { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .mese .dow { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); text-align: center; padding-bottom: 4px; }
  .mese button {
    border: 1px solid transparent; background: none; border-radius: 5px; height: 30px;
    cursor: pointer; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-2);
  }
  .mese button:hover { border-color: var(--accent); }
  .mese button[data-vuoto] { visibility: hidden; }
  .mese button[data-nel="1"] { background: var(--accent-soft); color: var(--accent-ink); border-radius: 0; }
  /* "solo" mancava, e con lui spariva sia il giorno singolo sia il primo clic
     di un intervallo: si cliccava e non succedeva niente di visibile. */
  .mese button[data-capo="dal"], .mese button[data-capo="al"], .mese button[data-capo="solo"] {
    background: var(--accent); color: #fff; font-weight: 600;
  }
  /* Mentre si aspetta il secondo clic, il primo pulsa piano: dice "ho preso
     questo, ora dimmi fino a quando". */
  .mese button[data-attesa="1"] { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent); }
  @media (prefers-reduced-motion: no-preference) {
    .mese button[data-attesa="1"] { animation: attesa 1.6s ease-in-out infinite; }
    @keyframes attesa { 50% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 5px var(--accent); } }
  }
  .mese button[data-capo="dal"] { border-radius: 5px 0 0 5px; }
  .mese button[data-capo="al"] { border-radius: 0 5px 5px 0; }
  .mese button[data-capo="solo"] { border-radius: 5px; }
  .mese-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .mese-nav b { font-size: 13px; }
  .mese-nav button { background: none; border: 1px solid var(--line-strong); border-radius: 5px; width: 26px; height: 26px; cursor: pointer; color: var(--ink-2); }

  /* ── scelta degli orari ───────────────────────────────── */
  .fasce { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
  .fasce button {
    border: 1px solid var(--line); background: var(--surface); border-radius: 4px;
    height: 28px; cursor: pointer; font-size: 10px; font-family: var(--mono);
    color: var(--ink-3); padding: 0; user-select: none;
  }
  .fasce button[data-mezza="1"] { color: var(--ink-3); opacity: .8; font-size: 9px; }
  /* Il rettangolo da cui parte l'intervallo, in attesa della fine */
  .fasce button[data-inizio="1"], .hours button[data-inizio="1"] {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--crit);
  }
  .hours button[data-inizio="1"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--op, var(--accent)); }
  /* Quello che verrebbe segnato se cliccassi adesso: si vede prima di decidere */
  .fasce button[data-ant="1"] { background: var(--crit); opacity: .45; border-color: transparent; }
  .fasce button[data-ant="0"] { opacity: .35; }
  .hours button[data-ant="1"] { background: var(--op, var(--accent)); opacity: .45; border-color: transparent; }
  .hours button[data-ant="0"] { opacity: .3; }
  .mese button[data-ant="1"] { background: var(--accent-soft); color: var(--accent-ink); }
  .fasce button[data-on="1"] { background: var(--crit); border-color: transparent; color: #fff; opacity: 1; }
  .fasce button:hover { border-color: var(--crit); }
  .preset { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }

  .conn {
    margin: 12px 12px 0; padding: 8px 10px; border-radius: var(--radius-sm);
    font-size: 11.5px; line-height: 1.35;
  }
  .conn[data-vivo="1"] { background: var(--accent-soft); color: var(--accent-ink); }
  .conn[data-vivo="0"] { background: var(--live-soft); color: var(--warn); }
  .conn b { display: block; }

  /* ── ascoltare una telefonata ─────────────────────────────
     Il player sta sotto la trascrizione: si legge in dieci secondi, si ascolta
     in due minuti. `color-scheme` è l'unico modo di avere i comandi scuri:
     quelli dell'audio sono disegnati dal browser e non si vestono col CSS,
     e su fondo scuro una pillola bianca sembra un ritaglio di un'altra app. */
  .ascolto { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  /* Niente altezza forzata: sotto i ~54px il browser comincia a nascondere i
     comandi, e il primo a sparire è proprio il tasto play. */
  .ascolto audio { width: 100%; display: block; }
  .ascolto .hint { display: none; margin: 8px 0 0; }
  .ascolto[data-rotto="1"] audio { display: none; }
  .ascolto[data-rotto="1"] .hint { display: block; }
  :root[data-theme="dark"] .ascolto audio { color-scheme: dark; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ascolto audio { color-scheme: dark; }
  }

  /* ⑧ I campi dicono quanto testo si aspettano: un numero non occupa lo stesso
     spazio di un nome. Un modulo in cui ogni campo è largo come il suo
     contenuto si compila più in fretta e sembra progettato, non riempito. */
  .imp-riga .cmd input.corto { width: 120px; }
  .imp-riga .cmd input[type="time"] { width: 100%; }

  /* ⑨ Scelta esclusiva ≠ due pulsanti. Il selettore segmentato mostra che le
     opzioni sono alternative: un'unica cornice, divise da un filo. */
  /* `align-self: flex-start` perché dentro `.cmd` (flex, stretch) un
     inline-flex si allargherebbe comunque a tutta la colonna: il selettore
     deve essere largo quanto le sue opzioni, se no non sembra un selettore. */
  /* ⚠️ NIENTE `flex-wrap` QUI. Con le opzioni lunghe andavano a capo, e il
     divisorio verticale non le separava più: l'opzione non scelta sembrava
     una riga di testo, non un bottone. Se non ci stanno in riga si usa la
     variante `.lista` (verticale), che è leggibile per costruzione. */
  .segmento {
    display: inline-flex; align-self: flex-start; max-width: 100%; flex-wrap: nowrap;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden;
  }
  .segmento .chip {
    border: 0; border-radius: 0; margin: 0;
    background: var(--surface);            /* anche la non scelta è un bottone */
    border-right: 1px solid var(--line-strong);
  }
  .segmento .chip:last-child { border-right: 0; }
  .segmento .chip:hover { background: var(--surface-2); color: var(--ink); }
  .segmento .chip[aria-pressed="true"] {
    background: var(--accent-soft); color: var(--accent-ink); font-weight: 600;
  }

  /* La variante verticale, per le scelte con etichette lunghe: ogni opzione è
     una riga piena, separata da un filo, con un punto a sinistra che dice
     quale è attiva. Si legge come un elenco di scelte, che è ciò che è. */
  .segmento.lista {
    display: flex; flex-direction: column; width: 100%; align-self: stretch;
  }
  .segmento.lista .chip {
    width: 100%; text-align: left; border-right: 0;
    border-bottom: 1px solid var(--line-strong);
    padding: 9px 12px 9px 30px; position: relative;
  }
  .segmento.lista .chip:last-child { border-bottom: 0; }
  /* Il pallino: vuoto se non scelta, pieno se scelta. È il segnale che dice
     "qui si sceglie una sola cosa". */
  .segmento.lista .chip::before {
    content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 10px; height: 10px; border-radius: 50%;
    border: 1px solid var(--line-strong); background: transparent;
  }
  .segmento.lista .chip[aria-pressed="true"]::before {
    border-color: var(--accent); background: var(--accent);
    box-shadow: inset 0 0 0 2px var(--surface);
  }

  /* ⑥ I capitoli: erano testo nudo fra due riquadri e si perdevano. Più aria
     sopra che sotto (appartengono a ciò che segue) e un filo che li ancora. */
  .capitolo {
    font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600; font-family: var(--sans);
    margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  }

  /* ⑦ L'anteprima è il prodotto che parla: resta agganciata in alto mentre
     scorri e modifichi le cose che la cambiano, invece di uscire di scena. */
  .anteprima-viva { position: sticky; top: 0; z-index: 30; }
  .anteprima-viva .card-b { padding-top: 10px; padding-bottom: 12px; }
  @media (max-width: 900px) { .anteprima-viva { position: static; } }

  /* ── il riepilogo in cima ─────────────────────────────────
     Non è decorazione: è la risposta alla domanda "com'è messa adesso?", che
     altrimenti costa la lettura di tutta la pagina. */
  .sommario { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .sommario span {
    font-size: 12.5px; padding: 5px 11px; border-radius: 999px;
    background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  }
  .sommario span b { color: var(--ink); font-weight: 600; }

  /* ── la barra del salvataggio ─────────────────────────────
     Sta in fondo alla finestra e appare solo se c'è qualcosa da salvare: il
     gesto che conclude deve stare dove sono gli occhi, non due schermate
     sopra. Scivola da sotto invece di comparire di colpo. */
  .barra-salva {
    position: sticky; bottom: 16px; z-index: 40; margin-top: 18px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    transform: translateY(16px); opacity: 0; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .barra-salva[data-aperta="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .barra-salva .testo { flex: 1; font-size: 13px; font-weight: 600; }
  @media (prefers-reduced-motion: reduce) { .barra-salva { transition: none; } }

  /* ── consumi ──────────────────────────────────────────── */
  /* Il grafico dei trenta giorni era trenta colonne mute: nessuna scala a
     sinistra, nessuna data sotto, e il giorno si leggeva solo fermando il
     mouse e aspettando il tooltip di sistema — che nell'app (WebView) arriva
     tardi e sul tablet non arriva mai. Ora la riga sopra il grafico dice
     sempre un giorno per esteso (di suo: oggi), la scala dice quanto vale
     l'altezza e le date dicono dove si è. */
  .grafico-testa {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    min-height: 20px; margin-bottom: 10px;
  }
  .grafico-testa .quando { font-size: 12.5px; font-weight: 600; }
  .grafico-testa .quando small { font-weight: 400; color: var(--ink-3); font-size: 11.5px; margin-left: 5px; }
  .grafico-testa .quanto {
    font-family: var(--mono); font-size: 12px; color: var(--ink-2);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .grafico-wrap { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; }
  .grafico-scala {
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
    height: 230px; font-family: var(--mono); font-size: 10px; line-height: 1;
    color: var(--ink-3); font-variant-numeric: tabular-nums;
  }
  /* ⚠️ Il grafico era alto 120px e accanto aveva la colonna del credito, che
     cresce con i movimenti: sotto al grafico restava mezzo schermo di vuoto e
     la pagina sembrava rotta. Alzato, e i movimenti impaginati: adesso le due
     colonne si somigliano. */
  .grafico {
    position: relative; display: flex; align-items: flex-end; gap: 3px; height: 230px;
    border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding-left: 3px;
  }
  /* Le due righe orizzontali: il massimo e la metà. Tre sarebbero rumore su
     centoventi pixel di altezza. */
  .grafico .riga { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); pointer-events: none; }
  .grafico .col {
    position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
    height: 100%; min-width: 4px; border-radius: 3px 3px 0 0; cursor: default;
  }
  .grafico .barra { background: var(--accent); border-radius: 2px 2px 0 0; min-height: 1px; transition: .15s; }
  /* Un giorno senza chiamate resta una tacca sulla base: si vede che il giorno
     c'è ed è stato zero, che è un'informazione, non un buco nel grafico. */
  .grafico .col[data-vuoto="1"] .barra { background: var(--line); }
  .grafico .col:hover .barra { filter: brightness(1.25); }
  .grafico .col[data-oggi="1"] .barra { background: var(--live); }
  .grafico .col:hover, .grafico .col[data-scelto="1"] { background: var(--surface-2); }
  .grafico .col[data-scelto="1"] .barra { filter: brightness(1.25); }
  /* Le date sotto: non trenta (illeggibili), ma cinque appoggiate al centro
     della loro colonna, così l'occhio sa dove cade il lunedì. */
  .grafico-date {
    position: relative; height: 13px; margin-top: 6px;
    font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  }
  .grafico-date span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
  .grafico-date span[data-oggi="1"] { color: var(--live); }
  .grafico-legenda { font-size: 11px; color: var(--ink-3); margin: 18px 0 0; }
  .asse { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); margin-top: 6px; font-family: var(--mono); }

  .voce { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
  .voce .nome { width: 108px; font-size: 12.5px; flex: none; }
  .voce .traccia { flex: 1; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
  .voce .riempi { height: 100%; border-radius: 4px; }
  .voce .val { width: 92px; text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }

  .saldo { font-family: var(--mono); font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .saldo.basso { color: var(--crit); }

  /* ── pacchetti di minuti ──────────────────────────────── */
  .pacchetti { display: flex; flex-direction: column; gap: 8px; }
  .pack {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
    border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px 14px;
    cursor: pointer; background: var(--surface); text-align: left; position: relative;
    transition: .12s;
  }
  .pack:hover { border-color: var(--accent); }
  .pack[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
  .pack .nome { font-weight: 600; font-size: 14px; }
  .pack .durata { font-size: 12px; color: var(--ink-3); grid-column: 1; }
  .pack .prezzo { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 2; text-align: right; }
  .pack .almin { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); grid-column: 2; text-align: right; }
  .pack .risparmio {
    position: absolute; top: -8px; right: 12px; font-size: 10.5px; font-weight: 600;
    background: var(--ok); color: #fff; padding: 1px 7px; border-radius: 20px;
  }
  .pack .top {
    position: absolute; top: -8px; left: 12px; font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; font-weight: 600; background: var(--live); color: #fff;
    padding: 1px 7px; border-radius: 20px;
  }

  .view { display: none; }
  .view[data-active="true"] { display: block; }
  .muted { color: var(--ink-3); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  /* ── guida a fisarmonica ───────────────────────────────────────────────
     Tutte le sezioni chiuse: la guida è un indice che si apre dove serve,
     non un muro di testo da scorrere. Aperta, il testo sta a sinistra e la
     schermata a destra, così si legge il passo guardando dove finisce. */
  .guida-wrap { display:flex; flex-direction:column; gap:10px; }
  .guida-intro { color:var(--ink-3); font-size:12.5px; margin:0 0 16px; }
  .guida-tools { display:flex; gap:8px; margin-bottom:14px; }

  .guida-topic { border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; }
  .guida-topic > summary {
    list-style:none; cursor:pointer; padding:15px 18px;
    display:flex; align-items:center; gap:12px; user-select:none;
  }
  .guida-topic > summary::-webkit-details-marker { display:none; }
  .guida-topic > summary:hover { background:var(--surface); }
  .guida-topic > summary .freccia {
    flex:0 0 auto; width:16px; color:var(--ink-3); font-size:11px; transition:transform .15s;
  }
  .guida-topic[open] > summary .freccia { transform:rotate(90deg); }
  .guida-topic > summary h2 { font-size:15px; margin:0; font-weight:600; }
  .guida-topic > summary .occhiello { margin-left:auto; font-size:12px; color:var(--ink-3); text-align:right; }
  .guida-topic[open] > summary { border-bottom:1px solid var(--line); }

  .guida-corpo { display:grid; grid-template-columns:minmax(360px, 1.3fr) minmax(0, 1fr); gap:28px; padding:18px 20px 20px; align-items:start; }
  .guida-topic.no-img .guida-corpo { grid-template-columns:1fr; }
  .guida-corpo p { color:var(--ink-2); font-size:13.5px; margin:0 0 10px; line-height:1.55; }
  .guida-corpo ol, .guida-corpo ul { margin:0 0 14px; padding-left:20px; color:var(--ink-2); font-size:13.5px; }
  .guida-corpo li { margin:5px 0; line-height:1.5; }
  .guida-corpo h3 { font-size:13px; margin:16px 0 8px; letter-spacing:.02em; }
  .guida-corpo h3:first-child { margin-top:0; }
  .guida-corpo .nota {
    border-left:2px solid var(--accent); background:var(--surface);
    padding:10px 12px; border-radius:0 8px 8px 0; font-size:12.5px; color:var(--ink-2); margin:0 0 12px;
  }
  .guida-corpo .nota.avviso { border-left-color:var(--warn); }
  .guida-corpo dl { margin:0 0 12px; font-size:13px; color:var(--ink-2); }
  .guida-corpo dt { font-weight:600; color:var(--ink); margin-top:9px; }
  .guida-corpo dd { margin:2px 0 0; padding-left:0; }
  .guida-shot { position:sticky; top:0; }
  .guida-shot img { width:100%; border-radius:8px; border:1px solid var(--line); display:block; }
  .guida-shot figcaption { font-size:11.5px; color:var(--ink-3); margin-top:6px; }
  .guida-topic.no-img .guida-shot { display:none; }
  @media (max-width: 1100px) { .guida-corpo { grid-template-columns:1fr; } }