/* Il sistema di design della dashboard.
   Sta in un file solo perche' sei tu a guardare le schermate una dopo
   l'altra: se la lista delle persone e l'editor dei testi non si
   somigliano, sembrano due programmi diversi.

   Come sono impilati i tre pezzi (l'ordine conta):
     1. daisyUI, dalla rete   -> i componenti gia' fatti (btn, badge, modal…)
     2. Tailwind, dalla rete  -> le classi di impaginazione scritte nell'HTML
     3. questo file           -> il tema (i colori) e i componenti nostri

   Il tema sta fuori da ogni "@layer" apposta: cosi' vince sul tema
   chiaro di daisyUI, che ha la stessa forza. I componenti nostri invece
   stanno dentro "@layer components", cosi' una classe Tailwind scritta
   a mano nell'HTML puo' sempre correggerli. */

/* ─── Il tema: i colori, gli angoli, i bordi ───────────────────────
   Un solo colore d'accento (indaco) per tutto cio' che si clicca.
   I quattro colori semantici hanno lo stesso significato ovunque:
     verde  = fatto, a posto
     ambra  = attenzione, sta per scadere
     rosso  = urgente, bloccato, rotto
     blu    = informativo
   Il verde non e' mai un bottone e l'indaco non e' mai uno stato:
   se si sovrapponessero, un colore smetterebbe di dire qualcosa. */
[data-theme="funnel"] {
  color-scheme: light;

  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(97.4% 0.002 92);
  --color-base-300: oklch(92.6% 0.003 92);
  --color-base-content: oklch(24% 0.006 92);

  --color-primary: oklch(51% 0.19 277);
  --color-primary-content: oklch(99% 0 0);
  --color-secondary: oklch(51% 0.19 277);
  --color-secondary-content: oklch(99% 0 0);
  --color-accent: oklch(51% 0.19 277);
  --color-accent-content: oklch(99% 0 0);

  --color-neutral: oklch(30% 0.005 92);
  --color-neutral-content: oklch(98% 0 0);

  --color-info: oklch(54% 0.12 240);
  --color-info-content: oklch(99% 0 0);
  --color-success: oklch(55% 0.12 155);
  --color-success-content: oklch(99% 0 0);
  --color-warning: oklch(57% 0.12 65);
  --color-warning-content: oklch(99% 0 0);
  --color-error: oklch(54% 0.19 26);
  --color-error-content: oklch(99% 0 0);

  --radius-selector: 0.375rem;
  --radius-field: 0.5rem;
  --radius-box: 0.625rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;

  /* Nomi nostri, per non ripetere ovunque la stessa formula. */
  /* I due grigi del testo secondario sono tarati sul contrasto, non a
     occhio: "tenue" e "fioco" restano sopra 4.5:1 su bianco, che e' la
     soglia sotto la quale un testo piccolo si legge male. */
  --testo: var(--color-base-content);
  --tenue: color-mix(in oklab, var(--color-base-content) 76%, white);
  --fioco: color-mix(in oklab, var(--color-base-content) 62%, white);
  --bordo: var(--color-base-300);
  --bordo-tenue: color-mix(in oklab, var(--color-base-300) 55%, white);
  --carta: var(--color-base-100);
  --sfondo: var(--color-base-200);

  --ombra-1: 0 1px 2px oklch(24% 0.006 92 / 0.05);
  --ombra-2: 0 1px 3px oklch(24% 0.006 92 / 0.07), 0 4px 12px oklch(24% 0.006 92 / 0.05);
  --ombra-3: 0 8px 30px oklch(24% 0.006 92 / 0.12);

  --lato: 15rem;

  /* La misura di lettura: la stessa larghezza dell'introduzione di
     pagina (78ch a 13px). E' scritta in pixel e non in "ch" perche' i
     due blocchi devono allinearsi davvero: "ch" scala con la dimensione
     del testo, quindi 78ch dentro una carta a 14px sono 688px e non 639,
     e i bordi non tornano. */
  --misura-lettura: 639px;
}

/* Le tinte chiare dei quattro colori semantici, per gli sfondi. */
[data-theme="funnel"] {
  --velo-ok: color-mix(in oklab, var(--color-success) 9%, white);
  --velo-attenzione: color-mix(in oklab, var(--color-warning) 12%, white);
  --velo-grave: color-mix(in oklab, var(--color-error) 8%, white);
  --velo-info: color-mix(in oklab, var(--color-info) 8%, white);
  --velo-accento: color-mix(in oklab, var(--color-primary) 7%, white);
}

/* ─── Fondamenta ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Una cornice di messa a fuoco visibile da tastiera, su tutto: e' uno
   strumento che si usa ogni giorno, e la tastiera e' piu' veloce. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-selector);
}

@layer components {
  /* Dentro al livello "components" e non fuori: cosi' un contenitore che
     spegne il colore del link (un riquadro tutto cliccabile) puo' farlo
     con una regola piu' precisa, invece di perdere sempre. */
  a { color: var(--color-primary); text-underline-offset: 2px; }

  /* ─── Il guscio: barra laterale fissa + colonna del contenuto ───── */
  .laterale {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--lato);
    background: var(--carta);
    border-right: 1px solid var(--bordo);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    z-index: 30;
    overflow-y: auto;
  }
  .laterale .marchio {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px 14px;
  }
  .laterale .marchio .sigla {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 7px;
    background: var(--color-primary);
    color: var(--color-primary-content);
    font-size: 12px; font-weight: 700;
    flex: none;
  }
  .laterale .marchio b { font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; }
  .laterale .marchio small { display: block; font-size: 11px; color: var(--fioco); font-weight: 400; }

  .laterale .titoletto {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--fioco);
    padding: 12px 8px 5px;
    font-weight: 600;
  }
  .laterale a.voce {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--radius-field);
    text-decoration: none;
    color: var(--testo);
    font-size: 13.5px;
    line-height: 1.3;
    min-height: 34px;
  }
  .laterale a.voce svg { width: 16px; height: 16px; flex: none; color: var(--fioco); }
  .laterale a.voce:hover { background: var(--sfondo); }
  .laterale a.voce.qui { background: var(--velo-accento); color: var(--color-primary); font-weight: 600; }
  .laterale a.voce.qui svg { color: var(--color-primary); }
  .laterale .piede {
    margin-top: auto;
    padding: 8px 0 0;
    border-top: 1px solid var(--bordo-tenue);
  }
  .laterale .piede a.esci {
    display: block;
    padding: 7px 8px;
    border-radius: var(--radius-field);
    font-size: 12.5px;
    color: var(--tenue);
    text-decoration: none;
    min-height: 32px;
  }
  .laterale .piede a.esci:hover { background: var(--sfondo); color: var(--testo); }

  .corpo { margin-left: var(--lato); min-height: 100vh; padding-bottom: 90px; }
  .corpo.con-barra { padding-bottom: 96px; }

  /* ─── Intestazione di pagina ────────────────────────────────────── */
  header {
    background: var(--carta);
    border-bottom: 1px solid var(--bordo);
    padding: 20px 28px 18px;
  }
  header { position: relative; }
  header h1 { margin: 0 0 5px; font-size: 20px; font-weight: 650; letter-spacing: -0.015em; }
  /* L'uscita per il telefono: qui non si vede, la barra a sinistra ha
     gia' la sua nel piede. */
  .esci-stretto { display: none; }
  header p { margin: 0; color: var(--tenue); font-size: 13px; max-width: 78ch; }
  header p a { color: var(--color-primary); }

  /* Il contenuto e' allineato a sinistra, non centrato: cosi' comincia
     sulla stessa colonna del titolo di pagina e dei filtri, invece di
     scivolare verso il centro solo perche' lo schermo e' largo. */
  main { max-width: 1120px; padding: 22px 28px 40px; }
  main.larga { max-width: none; }

  /* ─── Scala tipografica ─────────────────────────────────────────── */
  h2 {
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenue);
    margin: 30px 0 3px;
  }
  h2:first-of-type { margin-top: 2px; }
  h3 { font-size: 14.5px; font-weight: 620; margin: 0; letter-spacing: -0.005em; }
  .sottotitolo { color: var(--tenue); font-size: 12.5px; margin: 0 0 14px; max-width: 82ch; }
  .codice { font: 11.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--fioco); }
  .aiuto { font-size: 12px; color: var(--tenue); margin: 4px 0 0; }
  .nota { font-size: 11.5px; color: var(--fioco); margin-top: 2px; }
  .porta { font-size: 12px; color: var(--tenue); margin-top: 3px; }
  .buco { color: var(--color-error); font-weight: 600; }
  .num { font-variant-numeric: tabular-nums; }

  /* ─── Carta: il contenitore di tutto ────────────────────────────── */
  .gruppo {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--radius-box);
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: var(--ombra-1);
  }
  .gruppo > h3 { margin: 0 0 2px; }
  .gruppo .capo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
  }

  /* ─── Riquadri di numeri (KPI) ──────────────────────────────────── */
  .numeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
  }
  .numero {
    position: relative;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--radius-box);
    padding: 14px 16px 15px;
    box-shadow: var(--ombra-1);
    overflow: hidden;
  }
  .numero > a {
    display: block;
    color: inherit;
    text-decoration: none;
    margin: -14px -16px -15px;
    padding: 14px 16px 15px;
    border-radius: inherit;
  }
  .numero > a:hover { background: var(--sfondo); }
  .numero .valore {
    font-size: 28px;
    font-weight: 660;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }
  .numero .titolo { font-size: 12.5px; color: var(--tenue); margin-top: 4px; font-weight: 500; }
  .numero .spiega { font-size: 11.5px; color: var(--fioco); margin-top: 6px; line-height: 1.4; }
  .numero .valore.assente { color: var(--fioco); font-weight: 400; font-size: 15px; letter-spacing: 0; }

  /* La striscia di colore a sinistra e' l'unico segnale d'urgenza:
     un numero grande e rosso si legge come "va male", non come "guarda
     qui". Il colore sta sul bordo, il numero resta leggibile. */
  .numero::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: transparent;
  }
  .numero.urgente::before { background: var(--color-error); }
  .numero.urgente .valore { color: var(--color-error); }
  .numero.attenzione::before { background: var(--color-warning); }
  .numero.attenzione .valore { color: var(--color-warning); }
  .numero.ok::before { background: var(--color-success); }
  .numero.principale { border-color: color-mix(in oklab, var(--color-primary) 35%, var(--bordo)); }
  .numero.principale::before { background: var(--color-primary); }

  /* Le due metriche che contano davvero: piu' grandi di tutto il resto. */
  .numero.grande { padding: 20px 22px 22px; }
  .numero.grande .valore { font-size: 46px; letter-spacing: -0.04em; }
  .numero.grande .valore.assente { font-size: 18px; }
  .numero.grande .titolo { font-size: 14px; color: var(--testo); font-weight: 600; margin-top: 8px; }
  .numero.grande .spiega { font-size: 12.5px; }
  .numero.minore { background: transparent; box-shadow: none; border-style: dashed; }
  .numero.minore .valore { font-size: 20px; }

  /* ─── Pillole di stato ──────────────────────────────────────────── */
  .pillola {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sfondo);
    border: 1px solid var(--bordo);
    color: var(--tenue);
    white-space: nowrap;
    line-height: 1.5;
  }
  .pillola::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 999px;
    background: currentColor;
    flex: none;
  }
  .pillola.viva { background: var(--velo-ok); border-color: color-mix(in oklab, var(--color-success) 30%, white); color: color-mix(in oklab, var(--color-success) 85%, black); }
  .pillola.attesa { background: var(--velo-attenzione); border-color: color-mix(in oklab, var(--color-warning) 30%, white); color: color-mix(in oklab, var(--color-warning) 85%, black); }
  .pillola.ferma { background: var(--velo-grave); border-color: color-mix(in oklab, var(--color-error) 25%, white); color: color-mix(in oklab, var(--color-error) 88%, black); }
  .pillola.info { background: var(--velo-info); border-color: color-mix(in oklab, var(--color-info) 25%, white); color: color-mix(in oklab, var(--color-info) 88%, black); }
  .pillola.spenta::before { display: none; }

  /* ─── Avvisi ────────────────────────────────────────────────────── */
  .avviso {
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--bordo);
    border-radius: var(--radius-box);
    padding: 12px 15px;
    margin-bottom: 12px;
    font-size: 13px;
    background: var(--carta);
  }
  .avviso.grave { border-color: color-mix(in oklab, var(--color-error) 22%, white); border-left-color: var(--color-error); background: var(--velo-grave); }
  .avviso.attenzione { border-color: color-mix(in oklab, var(--color-warning) 25%, white); border-left-color: var(--color-warning); background: var(--velo-attenzione); }
  .avviso.ok { border-color: color-mix(in oklab, var(--color-success) 22%, white); border-left-color: var(--color-success); background: var(--velo-ok); }
  .avviso.info { border-color: color-mix(in oklab, var(--color-info) 22%, white); border-left-color: var(--color-info); background: var(--velo-info); }
  .avviso h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 620; }
  .avviso p { margin: 0; }
  .avviso p + p { margin-top: 6px; }
  .avviso ul { margin: 6px 0 0; padding-left: 18px; }
  .avviso li { margin-bottom: 3px; }

  /* ─── Bottoni ───────────────────────────────────────────────────── */
  button {
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    padding: 8px 15px;
    border-radius: var(--radius-field);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-content);
    cursor: pointer;
    min-height: 34px;
    box-shadow: var(--ombra-1);
  }
  button:hover { background: color-mix(in oklab, var(--color-primary) 88%, black); }
  button:active { transform: translateY(0.5px); }
  button[disabled] { opacity: 0.4; cursor: default; box-shadow: none; }
  button[disabled]:hover { background: var(--color-primary); }

  button.secondario {
    background: var(--carta);
    color: var(--testo);
    border-color: var(--bordo);
  }
  button.secondario:hover { background: var(--sfondo); border-color: var(--fioco); }
  button.pericolo {
    background: var(--carta);
    color: var(--color-error);
    border-color: color-mix(in oklab, var(--color-error) 35%, white);
  }
  button.pericolo:hover { background: var(--velo-grave); }
  button.piccolo { font-size: 12.5px; padding: 4px 10px; min-height: 28px; }
  button.nudo {
    background: none; border-color: transparent; box-shadow: none;
    color: var(--color-primary); padding: 3px 6px; min-height: 26px;
  }
  button.nudo:hover { background: var(--velo-accento); }

  /* ─── Campi ─────────────────────────────────────────────────────── */
  .campo { margin-top: 12px; }
  .campo > label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--tenue); }
  .campo textarea, .campo input, .campo select,
  .strumenti input, .strumenti select {
    width: 100%;
    font: inherit;
    font-size: 13.5px;
    padding: 7px 10px;
    border: 1px solid var(--bordo);
    border-radius: var(--radius-field);
    background: var(--carta);
    color: var(--testo);
    resize: vertical;
    min-height: 34px;
  }
  .campo textarea:hover, .campo input:hover, .campo select:hover { border-color: var(--fioco); }
  .campo textarea:focus, .campo input:focus, .campo select:focus,
  .strumenti input:focus, .strumenti select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 15%, transparent);
  }
  .campo.modificato textarea, .campo.modificato input, .campo.modificato select {
    border-color: var(--color-warning);
    background: var(--velo-attenzione);
  }
  /* Un campo che contiene un testo destinato a una persona si ferma
     alla misura di lettura: quasi tutti questi testi finiscono dentro
     WhatsApp, e una riga larga quanto uno schermo da scrivania non
     somiglia per niente a quello che la persona riceve. Dove il campo
     sta gia' in una colonna stretta il limite non si vede nemmeno. */
  .campo.misura textarea, .campo.misura input, .campo.misura select { max-width: var(--misura-lettura); }

  .intestazione-campo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }

  /* ─── Barra degli strumenti: ricerca e filtri ───────────────────── */
  .strumenti {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 28px;
    background: var(--carta);
    border-bottom: 1px solid var(--bordo);
  }
  .strumenti .cerca { position: relative; flex: 1; min-width: 240px; max-width: 460px; }
  .strumenti .cerca svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--fioco); pointer-events: none;
  }
  .strumenti .cerca input { padding-left: 31px; }
  .strumenti input[type="search"] { flex: 1; min-width: 220px; }
  .strumenti select, .strumenti input[type="date"] { width: auto; min-width: 130px; }
  .strumenti > label { font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--tenue); }
  .strumenti .quanti { font-size: 12px; color: var(--fioco); margin-left: auto; font-variant-numeric: tabular-nums; }

  /* Un filtro a interruttore: "mostrami solo i buchi". */
  .interruttore {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; padding: 6px 11px; min-height: 34px;
    border: 1px solid var(--bordo); border-radius: var(--radius-field);
    background: var(--carta); cursor: pointer; white-space: nowrap; color: var(--tenue);
  }
  .interruttore:hover { border-color: var(--fioco); }
  .interruttore input { accent-color: var(--color-primary); margin: 0; width: 14px; height: 14px; }
  .interruttore:has(input:checked) {
    background: var(--velo-accento);
    border-color: color-mix(in oklab, var(--color-primary) 40%, white);
    color: var(--color-primary);
    font-weight: 550;
  }

  /* ─── Tabelle ───────────────────────────────────────────────────── */
  table.elenco {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--radius-box);
    overflow: hidden;
    font-size: 13px;
    box-shadow: var(--ombra-1);
  }
  table.elenco th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fioco);
    padding: 9px 12px;
    background: var(--sfondo);
    border-bottom: 1px solid var(--bordo);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
  }
  table.elenco th.ordinabile { cursor: pointer; user-select: none; }
  table.elenco th.ordinabile:hover { color: var(--testo); }
  table.elenco th .freccia { opacity: 0; margin-left: 3px; }
  table.elenco th.ordinabile:hover .freccia { opacity: 0.4; }
  table.elenco th.ordinata { color: var(--color-primary); }
  table.elenco th.ordinata .freccia { opacity: 1; }
  table.elenco td { padding: 9px 12px; border-bottom: 1px solid var(--bordo-tenue); vertical-align: top; }
  table.elenco tr:last-child td { border-bottom: none; }
  table.elenco tbody tr.cliccabile { cursor: pointer; }
  table.elenco tbody tr.cliccabile:hover { background: var(--sfondo); }
  table.elenco tbody tr.scelta { background: var(--velo-accento); }
  table.elenco tbody tr.scelta td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
  .scorri { overflow-x: auto; border-radius: var(--radius-box); }

  /* ─── Stato vuoto e stato di caricamento ────────────────────────── */
  .stato-vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 34px 20px;
    text-align: center;
    color: var(--tenue);
    font-size: 13px;
  }
  .stato-vuoto svg { width: 22px; height: 22px; color: var(--fioco); }
  .avviso .stato-vuoto { padding: 12px 14px; }
  .avviso.ok .stato-vuoto svg { color: var(--color-success); }
  .stato-vuoto b { font-size: 13.5px; font-weight: 600; color: var(--testo); }
  .stato-vuoto p { margin: 0; max-width: 46ch; font-size: 12.5px; }

  .caricamento { padding: 34px 20px; text-align: center; color: var(--fioco); font-size: 13px; }

  .scheletro {
    background: linear-gradient(90deg, var(--sfondo) 25%, var(--bordo-tenue) 37%, var(--sfondo) 63%);
    background-size: 400% 100%;
    animation: scorrimento 1.3s ease-in-out infinite;
    border-radius: var(--radius-field);
    height: 12px;
  }
  .scheletro.riquadro { height: 82px; border-radius: var(--radius-box); }
  @keyframes scorrimento { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
  @media (prefers-reduced-motion: reduce) { .scheletro { animation: none; } }

  /* ─── Barra fissa in fondo (salvataggi) ─────────────────────────── */
  .barra {
    position: fixed;
    left: var(--lato); right: 0; bottom: 0;
    background: var(--carta);
    border-top: 1px solid var(--bordo);
    padding: 11px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    z-index: 20;
    box-shadow: 0 -1px 12px oklch(24% 0.006 92 / 0.06);
  }
  #conteggio { font-size: 13px; color: var(--tenue); margin-right: auto; }
  #esito { font-size: 13px; }
  #esito.ok { color: var(--color-success); font-weight: 550; }
  #esito.ko { color: var(--color-error); font-weight: 550; }

  /* ─── Finestre di conferma ──────────────────────────────────────── */
  dialog {
    /* "margin:auto" e' quello che centra una finestra modale. Va rimesso
       a mano perche' Tailwind azzera i margini di tutto. */
    margin: auto;
    border: 1px solid var(--bordo);
    border-radius: var(--radius-box);
    padding: 22px;
    max-width: 640px;
    width: 92%;
    box-shadow: var(--ombra-3);
    color: var(--testo);
  }
  dialog h3 { margin: 0 0 10px; font-size: 16px; }
  dialog ul { margin: 0 0 16px; padding-left: 18px; max-height: 50vh; overflow-y: auto; }
  dialog li { margin-bottom: 9px; font-size: 13px; }
  dialog .prima { color: var(--fioco); text-decoration: line-through; }
  dialog::backdrop { background: oklch(24% 0.006 92 / 0.4); }

  /* ─── Conferma a schermo ────────────────────────────────────────
     Un salvataggio silenzioso lascia il dubbio di non aver premuto.
     Questa e' la risposta visiva: compare in alto a destra e se ne va. */
  .notifiche {
    position: fixed;
    top: 14px; right: 18px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
  }
  .notifica {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-box);
    box-shadow: var(--ombra-3);
    padding: 11px 15px;
    font-size: 13px;
    max-width: 380px;
    animation: entra 0.18s ease-out;
  }
  .notifica.ok { border-left-color: var(--color-success); }
  .notifica.ko { border-left-color: var(--color-error); }
  .notifica svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
  .notifica.ok svg { color: var(--color-success); }
  .notifica.ko svg { color: var(--color-error); }
  .notifica b { display: block; font-weight: 620; }
  .notifica span { color: var(--tenue); font-size: 12.5px; }
  .notifica.esce { animation: esce 0.25s ease-in forwards; }
  @keyframes entra { from { opacity: 0; transform: translateX(12px); } }
  @keyframes esce { to { opacity: 0; transform: translateX(12px); } }
  @media (prefers-reduced-motion: reduce) {
    .notifica, .notifica.esce { animation: none; }
  }

  /* ─── Storico delle versioni ────────────────────────────────────── */
  .storico-apri {
    background: none; border: none; box-shadow: none; color: var(--color-primary);
    font-size: 11.5px; font-weight: 500; padding: 2px 5px; min-height: 0; cursor: pointer;
  }
  .storico-apri:hover { background: var(--velo-accento); }
  .storico { margin-top: 8px; border-left: 2px solid var(--bordo); padding-left: 10px; }
  .storico .voce { font-size: 12.5px; margin-bottom: 8px; }
  .storico .quando { color: var(--fioco); font-size: 11px; }
  .storico button { font-size: 11.5px; padding: 3px 8px; min-height: 24px; margin-top: 3px; }

  /* ─── Conversazione ricostruita ─────────────────────────────────── */
  .conversazione { margin-top: 10px; }
  .scambio { margin-bottom: 13px; }
  .scambio .domanda { font-size: 12.5px; color: var(--tenue); }
  .scambio .data { font-size: 11px; color: var(--fioco); margin-top: 3px; }
  .scambio .risposta-data {
    display: inline-block;
    margin-top: 4px;
    background: var(--velo-accento);
    border: 1px solid color-mix(in oklab, var(--color-primary) 15%, white);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 13.5px;
  }
  .scambio .libero {
    background: var(--velo-attenzione);
    border-color: color-mix(in oklab, var(--color-warning) 30%, white);
    font-style: italic;
  }

  /* ─── Impaginazioni ricorrenti ──────────────────────────────────── */
  .due-colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .risposte { margin-top: 14px; border-top: 1px dashed var(--bordo); padding-top: 10px; }
  .risposta { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
  .risposta .num { font: 11.5px ui-monospace, Menlo, monospace; color: var(--fioco); padding-top: 10px; min-width: 18px; }
  .risposta .corpo { flex: 1; margin-left: 0; min-height: 0; }

  section.nascosta { display: none; }
  .gruppo.nascosto { display: none; }
}

/* ─── Sul telefono ────────────────────────────────────────────────
   Una sola soglia: sopra i 900px l'impaginazione da scrivania, sotto
   quella per il dito. Questo blocco sta fuori da "@layer components"
   apposta, così vince sulle regole scritte nelle singole pagine —
   altrimenti una pagina che imposta le sue colonne se le terrebbe anche
   sul telefono, che è esattamente il difetto che aveva Persone. */
/* Il testo di spiegazione, su schermo largo, non è un pannello da
   aprire: è sempre lì e il suo titoletto non serve. Sta prima del blocco
   per il telefono perché è quello a doverlo scavalcare, non viceversa. */
details.spiegazione > summary { display: none; }

@media (max-width: 900px) {
  /* Il menu passa da colonna a sinistra a barra in basso, come nelle
     app: sei voci tutte visibili invece di tre e le altre da scoprire
     trascinando, e il pollice ci arriva senza spostare la mano. */
  .laterale {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: auto;
    flex-direction: row;
    gap: 2px;
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
    border-right: none;
    border-top: 1px solid var(--bordo);
    overflow: visible;
    z-index: 40;
    box-shadow: 0 -1px 14px oklch(24% 0.006 92 / 0.07);
  }
  .laterale .marchio, .laterale .titoletto, .laterale .piede { display: none; }

  .esci-stretto {
    display: inline-block;
    position: absolute; top: 14px; right: 16px;
    font-size: 12.5px; color: var(--tenue); text-decoration: none;
    padding: 6px 11px; min-height: 32px;
    border: 1px solid var(--bordo); border-radius: 999px;
    background: var(--carta);
  }
  header h1 { padding-right: 72px; }
  .laterale a.voce {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    min-height: 46px;
    font-size: 10.5px;
    line-height: 1.2;
    text-align: center;
  }
  .laterale a.voce svg { width: 19px; height: 19px; }
  .laterale a.voce span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Lo spazio in fondo tiene conto della barra del menu, e di quella
     dei salvataggi dove c'è: senza, l'ultima riga resta sotto. */
  .corpo { margin-left: 0; padding-bottom: 74px; }
  body:has(.barra) .corpo { padding-bottom: 138px; }

  .barra {
    left: 0;
    bottom: calc(57px + env(safe-area-inset-bottom, 0px));
    padding: 9px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .barra button { flex: 1 1 auto; }
  #conteggio { flex-basis: 100%; margin-right: 0; font-size: 12.5px; }

  .due-colonne { grid-template-columns: minmax(0, 1fr); }
  main, header, .strumenti { padding-left: 16px; padding-right: 16px; }
  main { padding-top: 16px; }
  header { padding: 16px; }
  header h1 { font-size: 19px; }

  /* Il testo che spiega la schermata è utile su uno schermo largo e sono
     sei righe fra te e il contenuto su uno stretto: si apre a richiesta. */
  details.spiegazione > summary {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--color-primary);
    cursor: pointer;
    padding: 3px 0;
    min-height: 26px;
  }
  details.spiegazione > summary::-webkit-details-marker { display: none; }
  details.spiegazione > summary::after {
    content: ""; width: 6px; height: 6px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
  }
  details.spiegazione[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  details.spiegazione[open] > summary { margin-bottom: 5px; }

  /* Bersagli più generosi: sul telefono si tocca, non si punta. */
  button, .campo input, .campo select, .campo textarea,
  .strumenti input, .strumenti select, .interruttore { min-height: 40px; }
  button.piccolo { min-height: 34px; }

  .strumenti { gap: 8px; padding-top: 9px; padding-bottom: 9px; }
  .strumenti .cerca { min-width: 0; max-width: none; flex-basis: 100%; }
  .strumenti .quanti { margin-left: 0; }

  .notifiche { top: 10px; left: 12px; right: 12px; }
  .notifica { max-width: none; }

  .campo.misura textarea, .campo.misura input, .campo.misura select { max-width: none; }
  .numeri { grid-template-columns: minmax(0, 1fr); }
  dialog { width: calc(100% - 24px); max-height: 85vh; overflow-y: auto; }
}