/* ════════════════════════════════════════════════════════════════════════════
   VIDEOCAMERE DI CASA — stile (security.mahawattage.com)
   ════════════════════════════════════════════════════════════════════════════
   La famiglia delle app di casa: crema, carte bianche, indaco (i token del
   :root sono quelli di diario/app.css e di DiarioNav; se cambiano lì, vanno
   riallineati a mano — app diverse, Static Web App diverse, nessun file
   condiviso). Due differenze volute:
     · NIENTE font esterni: font di sistema (Roboto su Android). Inter è un
       file in più da scaricare e la CSP qui non apre Google Fonts;
     · tutto più GRANDE: è l'app di papà. Testo di base 17 px, bottoni alti
       almeno 48 px (56 per le azioni principali), contrasti AA verificati
       sui due temi, il fuoco da tastiera sempre visibile.
   Tema: segue il telefono; «Impostazioni → Aspetto» lo può forzare
   (data-theme sull'<html>). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;
  --bg:        #f6f2ed;   /* crema, come il diario */
  --bg-2:      #ffffff;   /* carte */
  --bg-3:      #efe9e1;   /* riempimenti tenui */
  --fg:        #111827;
  --fg-2:      #3f4652;   /* 8,6:1 sul crema */
  --fg-3:      #5b6270;   /* 5,4:1 sul crema, 5,9:1 sul bianco */
  --accent:    #4f46e5;   /* indaco: 6,3:1 sul bianco */
  --accent-2:  #4338ca;
  --accent-t:  #e0e7ff;
  --verde:     #15803d;   /* condividi: 5,0:1 col bianco (il verde WhatsApp non arriva ad AA) */
  --verde-2:   #166534;
  --rosso:     #b91c1c;
  --rosso-t:   #fee2e2;
  --ambra:     #92400e;
  --ambra-t:   #fef3c7;
  --bordo:     rgba(17,24,39,.10);
  --bordo-2:   rgba(17,24,39,.18);
  --ombra:     0 6px 24px rgba(17,24,39,.10), 0 1px 3px rgba(17,24,39,.07);
  --r:         16px;
  --barra-bg:  rgba(246,242,237,.92);
  --schede-bg: rgba(255,255,255,.96);
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --alt-schede: 4.4rem;
  --alt-barra: calc(48px + .8rem + 1px + env(safe-area-inset-top, 0px));   /* la barra in alto: il titolo da 48 px, il bordo */
  /* categorie: sfondo · testo (AA su ogni coppia) */
  --c-persona-bg: #e0e7ff; --c-persona: #3730a3;
  --c-pacco-bg:   #fef3c7; --c-pacco:   #92400e;
  --c-veicolo-bg: #ccfbf1; --c-veicolo: #115e59;
  --c-animale-bg: #dcfce7; --c-animale: #166534;
  --c-manuale-bg: #fce7f3; --c-manuale: #9d174d;
  --c-nr-bg:      #e5e7eb; --c-nr:      #374151;
  --c-nessuno-bg: #f3f4f6; --c-nessuno: #4b5563;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111827; --bg-2: #1f2937; --bg-3: #2b3544;
    --fg: #f3f4f6; --fg-2: #d1d5db; --fg-3: #a3aab5;
    --accent: #818cf8; --accent-2: #a5b4fc; --accent-t: #2b2f55;
    --verde: #15803d; --verde-2: #166534;
    --rosso: #f87171; --rosso-t: rgba(248,113,113,.15);
    --ambra: #fbbf24; --ambra-t: rgba(251,191,36,.14);
    --bordo: rgba(255,255,255,.09); --bordo-2: rgba(255,255,255,.18);
    --ombra: 0 6px 24px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
    --barra-bg: rgba(17,24,39,.9); --schede-bg: rgba(31,41,55,.97);
    --c-persona-bg: rgba(129,140,248,.2); --c-persona: #c7d2fe;
    --c-pacco-bg:   rgba(251,191,36,.18); --c-pacco:   #fde68a;
    --c-veicolo-bg: rgba(45,212,191,.16); --c-veicolo: #99f6e4;
    --c-animale-bg: rgba(74,222,128,.16); --c-animale: #bbf7d0;
    --c-manuale-bg: rgba(244,114,182,.18); --c-manuale: #fbcfe8;
    --c-nr-bg:      rgba(156,163,175,.2);  --c-nr:      #e5e7eb;
    --c-nessuno-bg: rgba(156,163,175,.12); --c-nessuno: #c3c8d1;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111827; --bg-2: #1f2937; --bg-3: #2b3544;
  --fg: #f3f4f6; --fg-2: #d1d5db; --fg-3: #a3aab5;
  --accent: #818cf8; --accent-2: #a5b4fc; --accent-t: #2b2f55;
  --verde: #15803d; --verde-2: #166534;
  --rosso: #f87171; --rosso-t: rgba(248,113,113,.15);
  --ambra: #fbbf24; --ambra-t: rgba(251,191,36,.14);
  --bordo: rgba(255,255,255,.09); --bordo-2: rgba(255,255,255,.18);
  --ombra: 0 6px 24px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
  --barra-bg: rgba(17,24,39,.9); --schede-bg: rgba(31,41,55,.97);
  --c-persona-bg: rgba(129,140,248,.2); --c-persona: #c7d2fe;
  --c-pacco-bg:   rgba(251,191,36,.18); --c-pacco:   #fde68a;
  --c-veicolo-bg: rgba(45,212,191,.16); --c-veicolo: #99f6e4;
  --c-animale-bg: rgba(74,222,128,.16); --c-animale: #bbf7d0;
  --c-manuale-bg: rgba(244,114,182,.18); --c-manuale: #fbcfe8;
  --c-nr-bg:      rgba(156,163,175,.2);  --c-nr:      #e5e7eb;
  --c-nessuno-bg: rgba(156,163,175,.12); --c-nessuno: #c3c8d1;
}

html { -webkit-text-size-adjust: 100%; font-size: 106.25%; }   /* 17 px */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  background: var(--bg); color: var(--fg);
  line-height: 1.5; min-height: 100vh;
  padding-bottom: calc(var(--alt-schede) + var(--safe-b));
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--accent); }
img, video { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.ic { width: 1.35em; height: 1.35em; flex: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ── barra in alto e schede in basso ───────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem 1rem; padding-top: calc(.4rem + env(safe-area-inset-top, 0px));   /* col titolo alto 48 px la barra resta della stessa altezza */
  background: var(--barra-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordo);
}
.barra-titolo { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; letter-spacing: -.02em; font-size: 1.08rem; color: inherit; text-decoration: none; }
.barra-titolo img { width: 28px; height: 28px; border-radius: 7px; }
.barra-spinta { flex: 1; }
.indicatore {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700;
  color: var(--ambra); background: var(--ambra-t); border-radius: 999px; padding: .25rem .65rem;
}
.indicatore .ic { width: 1.1em; height: 1.1em; }
/* il titolo resta su UNA riga anche quando compaiono l'avviso «Senza internet» e il «?»: su un telefono stretto
   l'avviso diventa solo l'icona (la scritta resta per gli screen reader, e il banner nella pagina la dice per intero) */
.barra-titolo { min-width: 0; min-height: 48px; }   /* il titolo riporta agli eventi: anche lui si tocca col pollice */
.barra-titolo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* §24.31: coi caratteri più grandi (la vista stretta del 150%) il titolo diventava «Videocamere …»: lì resta «Videocamere» */
@media (max-width: 300px) { .barra-titolo .titolo-coda { display: none; } }
@media (max-width: 440px) {
  .indicatore { padding: .35rem; }
  .indicatore span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.schede {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: .3rem .25rem calc(.35rem + var(--safe-b));
  background: var(--schede-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--bordo);
}
.scheda {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-height: 3.6rem; padding: .25rem .1rem; justify-content: center;
  font-size: .7rem; font-weight: 600; color: var(--fg-3); text-decoration: none; letter-spacing: -.01em;
  border-radius: 12px; min-width: 0;
}
/* §24 (punto 12): coi caratteri grandi l'etichetta va a capo (col trattino morbido di app.js) invece dei puntini */
.scheda span { max-width: 100%; text-align: center; line-height: 1.15; overflow-wrap: break-word; }
.scheda .ic { width: 1.55rem; height: 1.55rem; padding: .15rem .9rem; box-sizing: content-box; border-radius: 999px; transition: background .15s; }
@media (max-width: 400px) {
  /* due righe nelle etichette: la barra cresce, e lo spazio lasciato in fondo alla pagina con lei; la pillola dell'icona
     si stringe di lato per stare nella colonna (al 150% è larga 53 px) */
  :root { --alt-schede: 5.25rem; }
  .scheda .ic { padding-left: .55rem; padding-right: .55rem; }
}
.scheda.attiva { color: var(--accent); }
.scheda.attiva .ic { background: var(--accent-t); }

/* ── contenuto ─────────────────────────────────────────────────────────── */
.contenuto { max-width: 760px; margin: 0 auto; padding: .9rem 1rem 1.6rem; outline: none; }
.intest { margin: .3rem 0 1rem; }
.intest h1, .ev-testa h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.intest.riga { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sotto { color: var(--fg-2); margin-top: .35rem; line-height: 1.5; }
.carta {
  background: var(--bg-2); border: 1px solid var(--bordo); border-radius: var(--r);
  box-shadow: var(--ombra); padding: 1rem 1.05rem; margin-bottom: .9rem;
}
.carta h2 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .4rem; display: flex; align-items: center; gap: .45rem; }
.nota-piccola { font-size: .86rem; color: var(--fg-3); margin: .6rem 0; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.nota-piccola .ic { color: var(--verde); }
.dato { margin: .35rem 0; color: var(--fg-2); }
.torna {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 48px;
  font-size: .95rem; font-weight: 700; color: var(--fg-2); text-decoration: none; margin: -.2rem 0 .4rem -.3rem; padding: 0 .3rem;
}
.torna:hover { color: var(--fg); }
.link { color: var(--accent); text-decoration: underline; font-weight: 600; padding: .3rem 0; min-height: 48px; }

.attesa { display: flex; align-items: center; gap: .6rem; justify-content: center; padding: 3rem 1rem; color: var(--fg-2); font-size: 1.05rem; }
.rotella {
  display: inline-block; width: 1.2rem; height: 1.2rem; flex: none; vertical-align: -.2rem;
  border: 2.6px solid var(--bordo-2); border-top-color: var(--accent);
  border-radius: 50%; animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
/* chi ha chiesto meno movimento al telefono: niente scivolamenti né lampeggi. La rotella e la barra «senza
   fine» restano, lente, perché sono l'unico segno che qualcosa sta succedendo; il punto rosso della
   registrazione resta acceso fisso invece di pulsare */
@media (prefers-reduced-motion: reduce) {
  .rotella { animation-duration: 2.4s; }
  .barra-av-pieno.indet { animation-duration: 3.6s; }
  .rec-punto, .vc[data-stato="evento"] .vc-punto { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* papà tocca col pollice: ogni bersaglio (bottoni, link, caselle, filtri) almeno 48 px, non i 44 del minimo */
/* ── bottoni ───────────────────────────────────────────────────────────── */
.bott {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.1rem;
  background: var(--accent); color: #fff; border: 1px solid transparent; border-radius: 14px;
  font-weight: 700; font-size: 1rem; text-decoration: none; text-align: center; line-height: 1.2;
  transition: background .15s, transform .08s;
}
:root[data-theme="dark"] .bott:not(.sec):not(.condividi):not(.pericolo) { background: #4f46e5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bott:not(.sec):not(.condividi):not(.pericolo) { background: #4f46e5; } }
.bott:active { transform: scale(.98); }
.bott:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.bott.grande { min-height: 56px; font-size: 1.05rem; }
.bott.pieno { width: 100%; }
.bott.sec { background: var(--bg-2); color: var(--fg); border-color: var(--bordo-2); }
.bott.sec:hover { border-color: var(--accent); }
.bott.pericolo { background: var(--rosso); color: #fff; }
:root[data-theme="dark"] .bott.pericolo { background: #b91c1c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bott.pericolo { background: #b91c1c; } }
.bott.pericolo-testo { color: var(--rosso); }
.bott.condividi { background: var(--verde); color: #fff; }
.bott.condividi:hover { background: var(--verde-2); }
.bott span small { display: block; font-size: .78rem; font-weight: 500; opacity: .85; margin-top: .1rem; }
.bott-tondo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--bordo-2); color: var(--fg);
}
.bott-tondo.piccolo { width: 48px; height: 48px; border-color: transparent; background: transparent; }   /* «piccolo» nell'aspetto (senza bordo), non nel bersaglio */
.bott-tondo.spento { opacity: .35; pointer-events: none; }
.riga-bottoni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }
.riga-bottoni .bott { flex: 1 1 10rem; }

/* ── pillole e chip ────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: .8rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem;
  background: var(--bg-3); color: var(--fg-2);
}
.pill .ic { width: 1em; height: 1em; }
.c-persona { --cbg: var(--c-persona-bg); --cfg: var(--c-persona); }
.c-pacco   { --cbg: var(--c-pacco-bg);   --cfg: var(--c-pacco); }
.c-veicolo { --cbg: var(--c-veicolo-bg); --cfg: var(--c-veicolo); }
.c-animale { --cbg: var(--c-animale-bg); --cfg: var(--c-animale); }
.c-manuale { --cbg: var(--c-manuale-bg); --cfg: var(--c-manuale); }
.c-nr      { --cbg: var(--c-nr-bg);      --cfg: var(--c-nr); }
.c-nessuno { --cbg: var(--c-nessuno-bg); --cfg: var(--c-nessuno); }
.pill[class*="c-"] { background: var(--cbg); color: var(--cfg); }
.pill.salvata { background: var(--ambra-t); color: var(--ambra); }
.pill.telefono { background: rgba(21,128,61,.12); color: var(--verde); }
:root[data-theme="dark"] .pill.telefono { color: #86efac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.telefono { color: #86efac; } }
.pill.in-corso { background: var(--rosso-t); color: var(--rosso); }
.pill.in-onda, .chip.in-onda { background: #dc2626; color: #fff; }   /* 4,8:1 col bianco, in entrambi i temi */
.chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600;
  background: var(--bg-3); color: var(--fg-2); border-radius: 999px; padding: .25rem .65rem;
}
.chip .ic { width: 1.05em; height: 1.05em; }
.chip.male { background: var(--rosso-t); color: var(--rosso); }
.chip-riga { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ── banner offline ────────────────────────────────────────────────────── */
.banner-offline {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--ambra-t); color: var(--ambra); border-radius: 14px; padding: .75rem .9rem; margin-bottom: .9rem;
  font-size: .95rem; line-height: 1.45;
}
:root[data-theme="dark"] .banner-offline { color: #fde68a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner-offline { color: #fde68a; } }

/* ── pausa delle notifiche: la riga in cima agli Eventi e la scelta in Impostazioni ── */
.riga-pausa {
  display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 48px;
  margin: 0 0 .8rem; padding: .45rem .8rem; border-radius: 12px; border: 1px solid var(--bordo-2);
  background: var(--bg-2); color: var(--fg-2); font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.riga-pausa .ic { width: 1.1em; height: 1.1em; flex: none; color: var(--fg-3); }
.riga-pausa span { flex: 1; min-width: 0; }
.riga-pausa b { color: var(--accent); white-space: nowrap; }
.riga-pausa:disabled { opacity: .6; }
/* §24.31: coi caratteri grandi «Riattiva» e «Cosa fare» vanno sotto la frase: accanto la stringevano a una o due parole
   per riga (7 righe al 150%) */
@media (max-width: 340px) {
  .riga-pausa { flex-wrap: wrap; row-gap: .1rem; }
  .riga-pausa span { flex-basis: calc(100% - 1.1em - .5rem); }
  .riga-pausa b { margin-left: calc(1.1em + .5rem); }
}
/* §23.4: una videocamera che adesso non guarda (spenta, o con la casa scollegata), nello stile della riga della pausa */
.riga-ferma { text-decoration: none; background: var(--ambra-t); border-color: transparent; color: var(--ambra); }
.riga-ferma .ic { color: var(--ambra); }
.riga-ferma b { color: var(--ambra); text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .riga-ferma, :root[data-theme="dark"] .riga-ferma .ic, :root[data-theme="dark"] .riga-ferma b { color: #fde68a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .riga-ferma, :root:not([data-theme="light"]) .riga-ferma .ic, :root:not([data-theme="light"]) .riga-ferma b { color: #fde68a; } }
.scelte-pausa { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .5rem 0; }
.scelte-pausa .bott { width: 100%; }
.scelte-pausa .bott:last-child { grid-column: 1 / -1; }
.stato-pausa { display: flex; align-items: center; gap: .4rem; font-weight: 600; }

/* ── eventi: scelta del giorno, riepilogo, istogramma, filtri ──────────── */
.giorni-nav { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.giorno-scelta { flex: 1; min-width: 0; }
/* §24 (punto 12): neanche l'etichetta corta ci sta accanto alle frecce (caratteri grandi): la tendina su una riga sua, larga */
.giorni-nav.stretta { flex-wrap: wrap; }
.giorni-nav.stretta .giorno-scelta { order: -1; flex-basis: 100%; }
.giorni-nav.stretta .bott-cerca { margin-left: auto; }
.giorno-scelta select, .campo select {
  width: 100%; min-height: 48px; padding: .55rem 2.2rem .55rem .9rem;
  font-weight: 700; font-size: 1.02rem; color: var(--fg);
  background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center;
  border: 1px solid var(--bordo-2); border-radius: 14px; appearance: none; -webkit-appearance: none;
  text-overflow: ellipsis;
}
.riepilogo { padding-bottom: .7rem; }
.riep-testo { font-size: 1.02rem; font-weight: 600; color: var(--fg-2); line-height: 1.45; margin-bottom: .75rem; }
.riep-testo .intero { white-space: nowrap; }
.riep-testo b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--fg); }
.isto { display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 2px; height: 56px; }
.isto-c { display: block; height: max(var(--h), 3px); background: var(--accent); border-radius: 3px 3px 1px 1px; opacity: .9; }
.isto-c.zero { background: var(--bordo-2); opacity: 1; height: 3px; }
.isto-c.ora { box-shadow: 0 5px 0 -1px var(--rosso); }   /* l'ora di adesso: una lineetta sotto la colonna */
.isto-assi { display: flex; justify-content: space-between; font-size: .72rem; color: var(--fg-3); margin-top: .25rem; font-variant-numeric: tabular-nums; }
/* i filtri stanno su UNA riga che scorre di lato (come le etichette di Google Foto): su due-tre righe
   spingevano la lista degli eventi sotto lo schermo. La sfumatura a destra dice che c'è altro. */
.filtri {
  display: flex; flex-wrap: nowrap; gap: .45rem; margin: 0 -1rem .7rem; padding: .1rem 1rem .25rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
}
.filtri::-webkit-scrollbar { display: none; }
.filtri::after { content: ''; flex: 0 0 1.4rem; }
.filtro {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 48px; flex: none; white-space: nowrap;
  padding: .35rem .8rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
  background: var(--bg-2); border: 1.5px dashed var(--bordo-2); color: var(--fg-3); text-decoration: none;
}
.filtro b { font-weight: 800; font-variant-numeric: tabular-nums; }
.filtro.acceso { border-style: solid; border-color: transparent; background: var(--cbg, var(--accent-t)); color: var(--cfg, var(--accent)); }
:root[data-theme="dark"] .filtro.acceso:not([class*="c-"]) { color: var(--accent-2); }
.filtri.cam .filtro.acceso { background: #4f46e5; color: #fff; }   /* indaco 600 in entrambi i temi: 6,3:1 col bianco */

/* ── card degli eventi ─────────────────────────────────────────────────── */
.lista-eventi { display: flex; flex-direction: column; gap: .7rem; }
.ev-card {
  display: flex; gap: .85rem; align-items: stretch; text-decoration: none; color: inherit;
  background: var(--bg-2); border: 1px solid var(--bordo); border-radius: var(--r);
  box-shadow: var(--ombra); padding: .55rem; min-height: 96px;
}
.ev-card:active { transform: scale(.99); }
.mini {
  position: relative; flex: 0 0 auto; width: 42%; max-width: 180px; aspect-ratio: 16 / 9; align-self: center;
  border-radius: 11px; overflow: hidden; background: var(--cbg, var(--bg-3));
}
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini img.senza, .mini img:not([src]) { opacity: 0; }
.mini-segno {
  position: absolute; left: .3rem; top: .3rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  font-size: .95rem; line-height: 1; border-radius: 50%; background: var(--cbg, rgba(255,255,255,.9));
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .mini-segno { background: rgba(17,24,39,.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mini-segno { background: rgba(17,24,39,.85); } }
.mini-durata {
  position: absolute; right: .3rem; bottom: .3rem; font-size: .72rem; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.62); border-radius: 6px; padding: .05rem .35rem; font-variant-numeric: tabular-nums;
}
.ev-corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding-right: .2rem; }
.ev-riga { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ev-ora { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ev-ora.data { font-size: 1.08rem; letter-spacing: -.02em; }
.ev-titolo { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.ev-meta { font-size: .86rem; color: var(--fg-3); }
.segno-salvata { color: #d97706; display: inline-flex; }
.segno-telefono { color: var(--verde); display: inline-flex; }
:root[data-theme="dark"] .segno-telefono { color: #86efac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segno-telefono { color: #86efac; } }

/* ── stati vuoti ───────────────────────────────────────────────────────── */
.vuoto { text-align: center; padding: 2.2rem 1rem; color: var(--fg-2); }
.vuoto h2 { font-size: 1.2rem; color: var(--fg); margin-bottom: .35rem; }
.vuoto p { max-width: 30rem; margin: 0 auto .9rem; }
.vuoto-icona { display: inline-flex; padding: .9rem; border-radius: 50%; background: var(--accent-t); color: var(--accent); margin-bottom: .8rem; }
.vuoto-icona .ic { width: 2rem; height: 2rem; }
.vuoto.errore .vuoto-icona { background: var(--rosso-t); color: var(--rosso); }

/* ── scheda dell'evento ────────────────────────────────────────────────── */
.lettore {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden;
  background: #0b0e13; margin-bottom: .9rem; display: flex; align-items: center; justify-content: center;
}
.lettore video, .lettore img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.lettore-nota { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .9rem; color: #f3f4f6; background: rgba(0,0,0,.6); font-size: .95rem; text-align: center; }
.lettore .attesa { color: #d1d5db; }
.ev-testa { margin-bottom: .9rem; }
.ev-testa .chip-riga { margin-bottom: .45rem; }
.ev-sotto { color: var(--fg-2); margin-top: .25rem; }
/* ora e durata vanno a capo insieme: «· 8 s» da solo sulla riga dopo sembrava un refuso */
.insieme { white-space: nowrap; }
/* la seconda volta dell'ora ripetuta la notte del cambio: piccolo, accanto all'ora grande */
.ora-solare { display: inline-block; margin-left: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: 0; color: var(--fg-2); vertical-align: .15em; }
/* §24.31: due colonne finché ci stanno, una coi caratteri più grandi (al 150% la scheda era larga 313 px su 275, con
   «Scarica» ed «Elimina» tagliati a destra) */
.azioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .6rem; margin-bottom: .9rem; }
.azioni .bott { justify-content: flex-start; text-align: left; padding: .7rem .9rem; min-height: 64px; }
.azioni .bott .ic { width: 1.6rem; height: 1.6rem; }
.avanzamento { margin: -.2rem 0 .9rem; }
.barra-av-testo { font-weight: 700; margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.barra-av-fondo { height: 10px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.barra-av-pieno { height: 100%; background: var(--verde); border-radius: 999px; transition: width .2s; }
.barra-av-pieno.indet { animation: va 1.2s ease-in-out infinite; }
@keyframes va { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.riga-ok, .riga-errore, .riga-avviso, .riga-info { display: flex; gap: .5rem; align-items: flex-start; border-radius: 12px; padding: .65rem .8rem; margin: .4rem 0; line-height: 1.45; }
.riga-ok { background: rgba(21,128,61,.12); color: var(--verde); }
:root[data-theme="dark"] .riga-ok { color: #86efac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .riga-ok { color: #86efac; } }
.riga-errore { background: var(--rosso-t); color: var(--rosso); }
.riga-avviso { background: var(--ambra-t); color: var(--ambra); }
:root[data-theme="dark"] .riga-avviso { color: #fde68a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .riga-avviso { color: #fde68a; } }
.riga-avviso.piccola { font-size: .86rem; padding: .45rem .7rem; }
.riga-info { background: var(--bg-3); color: var(--fg-2); align-items: center; }
.riga-info.piccola { font-size: .86rem; padding: .45rem .7rem; }
.riga-avviso.piccola .ic, .riga-info.piccola .ic { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .1rem; }
.avanzamento .bott { width: 100%; margin-top: .3rem; }
.visto p { color: var(--fg-2); font-size: 1.02rem; }
.fotogrammi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: .7rem; }
.fotogramma { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-3); }
.fotogramma img { width: 100%; height: 100%; object-fit: cover; }
.tecnico summary, .tecnico-mini summary { cursor: pointer; font-weight: 700; color: var(--fg-2); min-height: 48px; display: flex; align-items: center; }
.tecnico table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .86rem; }
.tecnico th { text-align: left; color: var(--fg-3); font-weight: 600; padding: .35rem .5rem .35rem 0; vertical-align: top; white-space: nowrap; }
.tecnico td { padding: .35rem 0; color: var(--fg-2); overflow-wrap: anywhere; }
.tecnico tr + tr { border-top: 1px solid var(--bordo); }
.tecnico-mini { margin: .5rem 0 .8rem; color: var(--fg-3); font-size: .86rem; }

/* ── videocamere ───────────────────────────────────────────────────────── */
.lista-cam { display: flex; flex-direction: column; }
.cam-testa { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.cam-icona { display: inline-flex; padding: .55rem; border-radius: 14px; background: var(--accent-t); color: var(--accent); }
.cam-card.offline .cam-icona { background: var(--bg-3); color: var(--fg-3); }
/* §23.10: la card dove porta «Cosa fare» degli Eventi: sotto la barra, segnata per un attimo */
.cam-card { scroll-margin-top: calc(var(--alt-barra) + .6rem); transition: box-shadow .4s; }
.cam-card.evidenza { box-shadow: 0 0 0 3px var(--accent), var(--ombra); }
.cam-nomi { flex: 1; min-width: 0; }
.cam-nomi h2 { margin: 0; font-size: 1.15rem; }
.cam-nomi p { font-size: .88rem; color: var(--fg-3); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .15rem; }
.cam-testa { align-items: flex-start; }
.cam-testa .bott-tondo { margin-top: -.3rem; margin-right: -.4rem; }
.stato-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 800; border-radius: 999px; padding: .25rem .65rem; background: var(--bg-3); color: var(--fg-3); }
.stato-pill .punto { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.stato-pill.acceso { background: rgba(21,128,61,.12); color: var(--verde); }
:root[data-theme="dark"] .stato-pill.acceso { color: #86efac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stato-pill.acceso { color: #86efac; } }
/* «Casa scollegata»: la VPS c'è ma il tunnel verso casa no (regola 1 del 2026-10-25). Ambra come gli avvisi: non è
   un guasto della videocamera, è il modem di casa o internet di casa */
.stato-pill.scollegata { background: var(--ambra-t); color: var(--ambra); }
:root[data-theme="dark"] .stato-pill.scollegata { color: #fde68a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stato-pill.scollegata { color: #fde68a; } }
.cam-riga { color: var(--fg-2); font-size: .92rem; margin-bottom: .5rem; }
.cam-card .chip-riga { margin-bottom: .6rem; }
.cam-azioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: .55rem; margin-top: .4rem; }   /* §24.31: come .azioni («Registra ora» usciva dalla card) */
.cam-azioni .bott { padding: .6rem .5rem; font-size: .98rem; }
.cam-azioni.una { grid-template-columns: 1fr; }
.cam-card .avanzamento { margin: .7rem 0 0; }
/* §24.2: l'avanzamento di «Registra ora» sta subito sotto la riga dei bottoni; portato in vista (scrollIntoView) si ferma
   sotto la barra e sopra le schede, non dietro */
.cam-card .avanzamento, .cam-card .avanzamento .bott { scroll-margin-top: calc(var(--alt-barra) + .6rem); scroll-margin-bottom: calc(var(--alt-schede) + var(--safe-b) + .8rem); }
.cam-card .cam-azioni + .avanzamento { margin: .6rem 0 0; }
.registrazione { display: flex; align-items: center; gap: .75rem; background: var(--rosso-t); color: var(--rosso); border-radius: 12px; padding: .7rem .9rem; }
.registrazione small { display: block; color: var(--fg-2); font-size: .86rem; }
.rec-punto { width: .9rem; height: .9rem; border-radius: 50%; background: #dc2626; flex: none; animation: pulsa 1.2s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .3; } }
.questo-telefono { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
.questo-telefono span { flex: 1; }
.questo-telefono small { display: block; color: var(--fg-3); }
.questo-telefono > .ic:first-child { color: var(--accent); width: 1.8rem; height: 1.8rem; }
.bott.aggiungi { margin-top: .3rem; }
.menu-lista { display: flex; flex-direction: column; gap: .55rem; margin-top: .6rem; }
.menu-lista .bott { width: 100%; justify-content: flex-start; }
.menu-lista form .bott { justify-content: center; }

/* ── aggiungi ──────────────────────────────────────────────────────────── */
.scelte { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .6rem; }
.scelta { display: flex; gap: .9rem; align-items: flex-start; text-align: left; text-decoration: none; color: inherit; width: 100%; }
.scelta > .ic { width: 2rem; height: 2rem; color: var(--accent); margin-top: .1rem; }
.scelta b { display: block; font-size: 1.08rem; margin-bottom: .2rem; }
.scelta small { display: block; color: var(--fg-2); font-size: .92rem; line-height: 1.45; }
.modulo { display: flex; flex-direction: column; gap: .9rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; font-weight: 700; }
.campo input {
  min-height: 52px; padding: .6rem .9rem; font-size: 1.05rem; font-weight: 500;
  border: 1.5px solid var(--bordo-2); border-radius: 14px; background: var(--bg-2); color: var(--fg);
}
.campo input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-t); }
.campo input::placeholder { color: var(--fg-3); opacity: 1; font-weight: 500; }   /* un esempio, in grigio (§24, punto 25) */
/* la riga d'aiuto sotto un campo (dove trovare l'IP della Reolink): testo normale, non l'etichetta in grassetto */
.campo small { font-weight: 500; font-size: .86rem; color: var(--fg-3); line-height: 1.4; }
.tipo-scelta, .caselle { border: 0; display: flex; flex-direction: column; gap: .3rem; }
.tipo-scelta legend, .caselle legend { font-weight: 700; margin-bottom: .35rem; }
.tipo-scelta label, .caselle label { display: flex; align-items: center; gap: .6rem; min-height: 48px; font-size: 1.02rem; }
.tipo-scelta input, .caselle input { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); }
.caselle + .caselle { margin-top: .6rem; }
.codice-carta { text-align: center; }
.codice-et { color: var(--fg-3); font-weight: 700; font-size: .9rem; }
.codice { font-family: ui-monospace, 'Roboto Mono', Menlo, Consolas, monospace; font-size: 1.8rem; font-weight: 800; letter-spacing: .08em; margin: .3rem 0 .5rem; color: var(--accent); overflow-wrap: anywhere; }
.comando {
  font-family: ui-monospace, 'Roboto Mono', Menlo, Consolas, monospace; font-size: .84rem; line-height: 1.5;
  background: #111827; color: #e5e7eb; border-radius: 12px; padding: .8rem .9rem; margin: .6rem 0 .8rem;
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: all;
}
.passi { margin: .3rem 0 .3rem 1.3rem; color: var(--fg-2); }
.passi li { margin: .3rem 0; }

/* ── diretta ───────────────────────────────────────────────────────────── */
/* §23.2: sopra il video, in una riga che tiene il suo posto (lo stato all'apertura, poi la qualità): niente si sposta */
.diretta-righe { min-height: 1.5rem; margin: -.55rem .1rem .55rem; display: flex; flex-direction: column; justify-content: center; gap: .4rem; }
.diretta-stato { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; color: var(--fg-2); }
.diretta-stato:empty { display: none; }
.diretta-stato:has(.rotella) { flex-direction: row; align-items: center; }
.diretta-stato .bott { width: 100%; }
.lettore.diretta .diretta-img { object-fit: contain; }
.lettore.diretta { margin-bottom: .6rem; }
/* §23.10: in verticale il video della diretta resta fermo in alto, sotto la barra, mentre si scorre fino a «Parla» e alla
   croce: chi gira la videocamera o parla vede sempre dove guarda (con Parla fra il video e la croce, coi caratteri grandi
   o dopo aver parlato una volta, video e croce insieme non ci stavano più). Il bordo color pagina copre quello che ci
   scorre sotto. In orizzontale il video sarebbe alto quanto lo schermo: lì scorre con la pagina */
@media (orientation: portrait) {
  .lettore.diretta { position: sticky; top: var(--alt-barra); z-index: 10; box-shadow: 0 0 0 .55rem var(--bg); }
  /* quello che si porta in vista (scrollIntoView: «Ti hanno sentito?», un errore) si ferma sotto il video, non dietro
     (16:9 della colonna, larga al massimo 760 px), e sopra le schede in basso */
  :is([data-vista="diretta"], [data-vista="parla"]) .contenuto > :not(#lettore),
  :is([data-vista="diretta"], [data-vista="parla"]) .contenuto > :not(#lettore) * {
    scroll-margin-top: calc(var(--alt-barra) + (min(100vw, 760px) - 2rem) * 9 / 16 + .8rem);
    scroll-margin-bottom: calc(var(--alt-schede) + var(--safe-b) + .8rem);
  }
}

/* ── impostazioni ──────────────────────────────────────────────────────── */
.impost h2 .ic { color: var(--accent); }
.segmenti { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .4rem; }
.segmenti label { position: relative; }
.segmenti input { position: absolute; opacity: 0; inset: 0; }
.segmenti span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; border: 1.5px solid var(--bordo-2); border-radius: 12px; font-weight: 700; font-size: .92rem; padding: .3rem; }
.segmenti input:checked + span { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.segmenti input:focus-visible + span { outline: 3px solid var(--accent-2); outline-offset: 2px; }

/* ── cerca su più giorni ────────────────────────────────────────────────── */
.segmenti.quattro { grid-template-columns: repeat(4, 1fr); }
.segmenti.quattro span { font-size: .86rem; white-space: nowrap; }
.bott-cerca { flex: 0 0 auto; }
.cerca-conta { font-weight: 700; margin: 0 0 .2rem; }
.cerca-scelte { display: grid; gap: .8rem; margin-bottom: 1rem; }
.cerca-giorno { margin: 1.1rem 0 .5rem; font-size: 1rem; font-weight: 800; display: flex; justify-content: space-between; align-items: baseline; }
.cerca-giorno small { font-weight: 600; color: var(--fg-3); }
.casella-sotto { margin-left: 1.9rem; }
.accesso { display: flex; align-items: center; gap: .6rem; justify-content: space-between; padding: .5rem 0; border-top: 1px solid var(--bordo-2); }
.accesso:first-of-type { border-top: 0; }
.accesso small { display: block; font-weight: 500; color: var(--fg-3); }
/* §24.7: gli accessi in sola lettura dentro «Dettagli tecnici» delle Impostazioni, e la riga dei media dentro quello della card */
.accessi-lettura { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--bordo-2); }
.accessi-lettura h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; font-size: .95rem; color: var(--fg-2); }
.accessi-lettura h3 .ic { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.accessi-lettura .accesso:first-of-type { border-top: 1px solid var(--bordo-2); }
.accessi-lettura > .bott { margin-top: .5rem; }
.cam-card .cam-tecnico { margin: .3rem 0 0; }
.codice-accesso { font: 800 1.35rem/1.3 ui-monospace, monospace; letter-spacing: .06em; text-align: center; padding: .6rem; border: 1.5px dashed var(--bordo-2); border-radius: 12px; user-select: all; }
.comando-accesso { font: 500 .8rem/1.4 ui-monospace, monospace; word-break: break-all; background: var(--bg-3); padding: .5rem; border-radius: 8px; user-select: all; }

/* ── video ricevuti ────────────────────────────────────────────────────── */
.ricevuto video { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 16 / 9; margin-bottom: .5rem; }

/* ── finestre ──────────────────────────────────────────────────────────── */
.finestra {
  margin: auto; border: 0; border-radius: 20px; padding: 0; width: min(92vw, 30rem);
  background: var(--bg-2); color: var(--fg); box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.finestra::backdrop { background: rgba(17,24,39,.55); }
.fin-corpo { padding: 1.3rem 1.2rem 1.1rem; }
.fin-titolo { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .45rem; }
.fin-testo { color: var(--fg-2); margin-bottom: 1rem; }
.fin-bottoni { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.finestra .campo { margin: .6rem 0; }
.fin-corpo.foto { padding: .6rem; }
.fin-corpo.foto img { width: 100%; border-radius: 12px; margin-bottom: .6rem; }
.fin-corpo.foto .bott { width: 100%; }

/* ── avvisi a comparsa ─────────────────────────────────────────────────── */
.avvisi { position: fixed; left: 0; right: 0; bottom: calc(var(--alt-schede) + var(--safe-b) + .6rem); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: .4rem; pointer-events: none; padding: 0 1rem; }
.avviso {
  max-width: 30rem; width: 100%; padding: .8rem 1rem; border-radius: 14px; font-weight: 600;
  background: #111827; color: #f9fafb; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: opacity .35s, transform .35s;
}
.avviso.av-ok { background: #14532d; }
.avviso.av-errore { background: #7f1d1d; }
.avviso.via { opacity: 0; transform: translateY(8px); }

/* ════════════════════════════════════════════════════════════════════════
   Modalità videocamera: schermo nero, poche righe grandi
   ════════════════════════════════════════════════════════════════════════ */
body.modo-videocamera { background: #000; padding-bottom: 0; }
body.modo-videocamera .barra, body.modo-videocamera .schede { display: none; }
body.modo-videocamera .contenuto { max-width: 560px; padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
.vc { color: #e5e7eb; display: flex; flex-direction: column; gap: .8rem; min-height: calc(100vh - 2rem); }
.vc-testa { display: flex; align-items: center; gap: .6rem; font-size: 1.35rem; }
.vc-punto { width: .9rem; height: .9rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); flex: none; }
.vc[data-stato="evento"] .vc-punto { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.25); animation: pulsa 1s ease-in-out infinite; }
.vc-nome { color: #9ca3af; margin-top: -.5rem; }
.vc-anteprima { width: 144px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid #374151; background: #111; }
.vc-info { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: 1.05rem; }
.vc-info div { display: contents; }
.vc-info dt { color: #9ca3af; }
.vc-info dd { font-weight: 700; color: #f3f4f6; }
.vc-diretta { display: flex; align-items: center; gap: .5rem; color: #fca5a5; font-weight: 700; }
.vc-avvisi { list-style: none; display: flex; flex-direction: column; gap: .4rem; font-size: .95rem; color: #d1d5db; }
.vc-avvisi li { display: flex; gap: .5rem; align-items: flex-start; }
.vc-avvisi .vc-av-forte { color: #fcd34d; font-weight: 700; }
.vc-bottoni { display: flex; flex-direction: column; gap: .55rem; margin-top: auto; padding-bottom: calc(.6rem + var(--safe-b)); }
.bott.sec.scuro { background: #111827; color: #e5e7eb; border-color: #374151; }
body.vc-buio .vc { opacity: .18; transition: opacity 1.2s; }
body.vc-buio .vc-anteprima { opacity: .5; }
.vc-prep { text-align: left; }
.vc-prep h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: .4rem 0 .3rem; }
.vc-prep-icona { display: flex; width: fit-content; padding: .8rem; border-radius: 18px; background: var(--accent-t); color: var(--accent); margin-top: .4rem; }
.vc-prep-icona .ic { width: 2rem; height: 2rem; }
.vc-prep .modulo { margin-top: 1rem; }
.vc-prep > .bott { width: 100%; margin-top: .7rem; }
.vc-consigli { list-style: none; margin: 1rem 0; display: flex; flex-direction: column; gap: .6rem; }
.vc-consigli li { display: flex; gap: .65rem; align-items: flex-start; color: var(--fg-2); }
.vc-consigli .ic { color: var(--accent); margin-top: .1rem; }
.avviso-riga { background: var(--ambra-t); color: var(--ambra); border-radius: 12px; padding: .65rem .8rem; margin: .5rem 0; }
.errore-riga { background: var(--rosso-t); color: var(--rosso); border-radius: 12px; padding: .65rem .8rem; margin: .6rem 0; }

/* l'editor della zona da ignorare */
.finestra.zona { width: min(96vw, 40rem); }
.zona-quadro { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; touch-action: none; }
.zona-quadro video { width: 100%; height: 100%; object-fit: cover; }
.zona-griglia { position: absolute; inset: 0; display: grid; }
.zona-cella { border: 1px solid rgba(255,255,255,.28); background: transparent; }
.zona-cella.esclusa { background: rgba(220,38,38,.55); border-color: rgba(255,255,255,.5); }

@media (min-width: 720px) {
  .lista-cam { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
  .mini { max-width: 210px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Le zone da oscurare (privacy, v2.1 §11.9) — una vista intera, col dito
   ════════════════════════════════════════════════════════════════════════ */
.zone-spiega { display: flex; gap: .8rem; align-items: flex-start; margin-top: .8rem; box-shadow: none; }
.zone-spiega p { color: var(--fg-2); font-size: .95rem; }
.zone-spiega-ic { display: inline-flex; flex: none; padding: .55rem; border-radius: 50%; background: var(--c-pacco-bg); color: var(--c-pacco); }
/* le proporzioni le mette la foto (style aspect-ratio): le zone sono frazioni del fotogramma intero */
.zone-quadro {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1f2937;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; margin: .2rem 0 .35rem;
  box-shadow: var(--ombra);
}
.zone-quadro img { width: 100%; height: 100%; object-fit: fill; pointer-events: none; background: #000; }
.zone-nota { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .4rem; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: #e5e7eb; font-weight: 600; }
.zone-nota small { font-weight: 500; color: #9ca3af; }
.zone-nota .rotella { border-color: rgba(255,255,255,.25); border-top-color: #a5b4fc; }
.zone-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zone-svg polygon { fill: rgba(0,0,0,.8); stroke: #fbbf24; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.zone-svg polygon.scelta { fill: rgba(0,0,0,.55); stroke: #60a5fa; stroke-width: 4; stroke-dasharray: 8 5; }
.zone-svg polygon.bozza { fill: rgba(0,0,0,.6); stroke: #fff; stroke-dasharray: 6 4; }
.zone-fonte { font-size: .86rem; color: var(--fg-3); min-height: 1.3em; }
.zone-aiuto { display: flex; gap: .55rem; align-items: flex-start; color: var(--fg-2); font-size: .97rem; margin: .5rem 0 .2rem; }
.zone-aiuto .ic { color: var(--accent); margin-top: .05rem; }
.zone-attrezzi .bott { flex: 1 1 7.5rem; font-size: .95rem; padding: .5rem .6rem; }
.zone-conta { font-weight: 700; color: var(--fg-2); margin: .7rem 0 .3rem; }
.zone-salva { display: grid; grid-template-columns: 1fr 1.4fr; gap: .6rem; margin: .5rem 0 .6rem; }
.chip-link { text-decoration: none; background: var(--accent-t); color: var(--accent); }
:root[data-theme="dark"] .chip-link { color: var(--accent-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-link { color: var(--accent-2); } }
.zone-promemoria { text-decoration: none; align-items: center; margin: -.1rem 0 .6rem; }
.zone-promemoria b { text-decoration: underline; text-underline-offset: 2px; }

/* l'anteprima del telefono-videocamera, con le zone nere sopra come nelle clip */
.vc-anteprima-box { position: relative; width: 144px; border-radius: 10px; overflow: hidden; border: 1px solid #374151; background: #111; }
.vc-anteprima-box .vc-anteprima { width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; }
.vc-maschere { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vc-maschere polygon { fill: #000; stroke: #f59e0b; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ════════════════════════════════════════════════════════════════════════
   «Come si usa» e primo avvio
   ════════════════════════════════════════════════════════════════════════ */
/* le famiglie di colore: le stesse delle categorie, AA verificato nei due temi */
.g-indaco { --gbg: var(--c-persona-bg); --gfg: var(--c-persona); }
.g-ambra  { --gbg: var(--c-pacco-bg);   --gfg: var(--c-pacco); }
.g-teal   { --gbg: var(--c-veicolo-bg); --gfg: var(--c-veicolo); }
.g-verde  { --gbg: var(--c-animale-bg); --gfg: var(--c-animale); }
.g-rosso  { --gbg: var(--c-manuale-bg); --gfg: var(--c-manuale); }
.g-grigio { --gbg: var(--c-nr-bg);      --gfg: var(--c-nr); }

.aiuto-barra {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: -.3rem -.5rem -.3rem 0;
  border-radius: 50%; color: var(--fg-2); text-decoration: none;
}
.aiuto-barra:hover, .aiuto-barra:focus-visible { color: var(--accent); background: var(--accent-t); }
.aiuto-barra .ic { width: 1.6rem; height: 1.6rem; }
body[data-vista="guida"] .aiuto-barra { color: var(--accent); background: var(--accent-t); }

.link-carta { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit; }
.link-carta span { flex: 1; min-width: 0; }
.link-carta b { font-size: 1.08rem; }
.link-carta small { display: block; color: var(--fg-3); font-size: .9rem; line-height: 1.4; margin-top: .1rem; }
.link-carta > .ic:first-child { color: var(--accent); width: 2rem; height: 2rem; }
.link-carta > .ic:last-child { color: var(--fg-3); }
.link-carta.piccola { box-shadow: none; padding: .75rem .9rem; }
.link-carta.piccola b { font-size: 1rem; }
.link-carta.piccola > .ic:first-child { width: 1.6rem; height: 1.6rem; }
.centro { justify-content: center; text-align: center; }

.guida-cima { display: flex; align-items: center; gap: .9rem; margin: .2rem 0 1rem; }
.guida-cima img { width: 64px; height: 64px; border-radius: 16px; box-shadow: var(--ombra); flex: none; }
.guida-cima h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.guida-cima .sotto { margin-top: .15rem; }
/* §24 (punto 12): tante colonne quante ne stanno (3 a 412 px, 2 coi caratteri grandi): con 3 fisse l'indice usciva di lato */
.guida-indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.6rem), 1fr)); gap: .5rem; margin-bottom: 1.1rem; }
.guida-voce {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 5.4rem; padding: .55rem .3rem;
  background: var(--bg-2); border: 1px solid var(--bordo); border-radius: 14px; box-shadow: var(--ombra);
  font-size: .86rem; font-weight: 700; line-height: 1.2; text-align: center; color: var(--fg); min-width: 0; overflow-wrap: break-word;
}
.guida-voce .ic { width: 2.5rem; height: 2.5rem; padding: .5rem; box-sizing: border-box; border-radius: 50%; background: var(--gbg); color: var(--gfg); }
.guida-voce:active { transform: scale(.97); }
.guida-sez { scroll-margin-top: 5.2rem; padding: 1.1rem 1.1rem 1.2rem; }
.guida-sez:focus { outline: none; }
.guida-sez:focus-visible { outline: 3px solid var(--accent-2); }
.guida-testa { display: flex; align-items: center; gap: .75rem; margin-bottom: .55rem; }
.guida-testa h2 { margin: 0; font-size: 1.22rem; }
.guida-icona { display: inline-flex; flex: none; padding: .6rem; border-radius: 50%; background: var(--gbg); color: var(--gfg); }
.guida-icona .ic { width: 1.6rem; height: 1.6rem; }
.guida-sez p { font-size: 1.05rem; line-height: 1.6; margin: .35rem 0; }
.guida-passi { list-style: none; counter-reset: passo; margin: .5rem 0 .2rem; display: flex; flex-direction: column; gap: .65rem; }
.guida-passi li { counter-increment: passo; position: relative; padding-left: 2.75rem; min-height: 2rem; font-size: 1.05rem; line-height: 1.55; }
.guida-passi li::before {
  content: counter(passo); position: absolute; left: 0; top: -.05rem; width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--gfg); color: var(--bg-2); font-weight: 800; font-size: 1rem;
}
.guida-punti { list-style: none; margin: .5rem 0 .2rem; display: flex; flex-direction: column; gap: .6rem; }
.guida-punti li { position: relative; padding-left: 1.4rem; font-size: 1.05rem; line-height: 1.55; }
.guida-punti li::before { content: ''; position: absolute; left: .2rem; top: .62em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gfg); }
.guida-dopo { border-left: 4px solid var(--gfg); background: var(--gbg); border-radius: 0 12px 12px 0; padding: .55rem .8rem; margin-top: .8rem !important; font-weight: 600; }
.guida-vai { width: 100%; margin-top: .8rem; }
.guida-fine { display: grid; gap: .6rem; margin: 1.2rem 0 .4rem; }
.ic.su { transform: rotate(90deg); }
/* i nomi dei bottoni nel testo: disegnati come i bottoni veri, con la stessa icona */
.tasto {
  /* un nome lungo («Vedi in chiaro qui: salva questo punto») va a capo dentro il tasto invece di uscire dallo schermo */
  display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; vertical-align: baseline;
  padding: .05rem .5rem .05rem .4rem; margin: 0 .05rem; border-radius: 9px; font-weight: 700; font-size: .96em;
  background: var(--bg-2); border: 1.5px solid var(--bordo-2); color: var(--fg); box-shadow: 0 1px 0 var(--bordo-2);
}
.tasto .ic { width: 1.05em; height: 1.05em; color: var(--accent); }
.guida-sez .pill { vertical-align: baseline; margin: .1rem .1rem; }
.tasto-segno { vertical-align: middle; }

/* ── primo avvio: a tutto schermo, senza schede ─────────────────────────── */
body[data-vista="benvenuto"] .barra, body[data-vista="benvenuto"] .schede { display: none; }
body[data-vista="benvenuto"] { padding-bottom: 0; }
body[data-vista="benvenuto"] .contenuto { padding-top: calc(.8rem + env(safe-area-inset-top, 0px)); }
.benv { display: flex; flex-direction: column; min-height: calc(100vh - 1.8rem); min-height: calc(100dvh - 1.8rem); }
.benv-su { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.benv-punti { display: flex; gap: .4rem; align-items: center; }
.benv-punti span { width: .55rem; height: .55rem; border-radius: 999px; background: var(--bordo-2); transition: width .2s, background .2s; }
.benv-punti span.fatto { background: var(--accent-2); opacity: .55; }
.benv-punti span.attivo { width: 1.6rem; background: var(--accent); }
.benv-salta { min-height: 48px; padding: 0 .4rem; font-weight: 700; color: var(--fg-2); }
.benv-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.2rem 0 1rem; }
.benv-figura { align-self: center; display: grid; place-items: center; width: 7.2rem; height: 7.2rem; border-radius: 50%; background: var(--gbg); color: var(--gfg); }
.benv-figura .ic { width: 3.4rem; height: 3.4rem; }
.benv-figura.logo { background: none; }
.benv-figura.logo img { width: 112px; height: 112px; border-radius: 28px; box-shadow: 0 14px 40px rgba(79,70,229,.35); }
.benv h1 { text-align: center; font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin: 1.1rem .3rem .6rem; outline: none; }
.benv-testo { text-align: center; color: var(--fg-2); font-size: 1.08rem; line-height: 1.55; margin: 0 auto .9rem; max-width: 26rem; }
.benv-testo.piccolo { font-size: .98rem; }
.benv-lista { list-style: none; display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.benv-lista li {
  display: flex; align-items: center; gap: .85rem; font-size: 1.06rem; line-height: 1.45; color: var(--fg-2);
  background: var(--bg-2); border: 1px solid var(--bordo); border-radius: 16px; padding: .75rem .9rem; box-shadow: var(--ombra);
}
.benv-lista b { color: var(--fg); }
.benv-ic { display: inline-flex; flex: none; padding: .6rem; border-radius: 50%; background: var(--gbg); color: var(--gfg); }
.benv-ic .ic { width: 1.5rem; height: 1.5rem; }
.benv-nota { display: block; text-align: center; margin-top: .7rem; }
.benv-scelte { display: flex; flex-direction: column; gap: .6rem; margin-top: .2rem; }
.benv-passi { margin: .2rem 0 .2rem 1.4rem; color: var(--fg-2); }
/* §24 (punto 13): la seconda strada per installarla, chiusa: si apre solo se la prima non va */
.altro-modo { border-top: 1px solid var(--bordo); padding-top: .2rem; margin-top: .2rem; }
.altro-modo summary { cursor: pointer; font-weight: 700; color: var(--fg-2); min-height: 48px; display: flex; align-items: center; }
.altro-modo[open] summary { margin-bottom: .4rem; }
.altro-modo summary::after {   /* la freccetta dice che si apre */
  content: ''; width: .5rem; height: .5rem; margin-left: .7rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .15s;
}
.altro-modo[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.altro-modo .bott { width: 100%; }
.benv-passi li { margin: .25rem 0; }
.benv-guida {
  display: flex; align-items: center; gap: .8rem; margin-top: 1rem; padding: .8rem .9rem; text-decoration: none; color: inherit;
  border-radius: 16px; border: 1.5px dashed var(--bordo-2);
}
.benv-guida span { flex: 1; }
.benv-guida small { display: block; color: var(--fg-3); font-size: .88rem; }
.benv-guida > .ic:first-child { color: var(--accent); width: 1.8rem; height: 1.8rem; }
/* §24.31: «Avanti», «Più tardi» e «Inizia» sempre in vista, fermi in fondo allo schermo come le schede (coi caratteri grandi il
   passo stava più giù del bordo); il bordo color pagina copre quello che ci scorre sotto */
.benv-giu {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: .6rem; padding: .4rem 0 calc(.5rem + var(--safe-b));
  position: sticky; bottom: 0; z-index: 5; background: var(--bg); box-shadow: 0 0 0 1rem var(--bg);
}
.benv-giu > span:empty { display: block; }
/* al 150% i due bottoni uno sopra l'altro, quello che va avanti per primo: affiancati uscivano dallo schermo */
@media (max-width: 300px) {
  .benv-giu { grid-template-columns: 1fr; gap: .45rem; }
  .benv-giu > :last-child { order: -1; }
  .benv-giu > span:empty { display: none; }
}

/* ── correzioni della revisione (2026-10-25) ──────────────────────────────── */
/* videocamera spenta: i dati dell'ultimo battito sono un ricordo, non lo stato di adesso */
.chip-riga.spenti { opacity: .62; align-items: center; }
.chip-riga.spenti .chip { background: transparent; border: 1px dashed var(--fg-3); }
.chip-quando { font-size: .8rem; color: var(--fg-3); width: 100%; }
/* i falsi allarmi nascosti: un bottone in fondo alla lista, non una nota che non si tocca */
.falsi-nascosti { margin: .8rem 0 .4rem; }
.falsi-nascosti .bott { width: 100%; }
.falsi-nascosti .nota-piccola { margin-top: 0; }
/* telefono che diventa videocamera: l'avviso «esco dal tuo account» prima del bottone */
.vc-passaggio { margin: .9rem 0 .2rem; }
.vc-passaggio .ic { flex: none; margin-top: .1rem; }
.vc-prep .vc-solo { margin-top: 1rem; flex-wrap: nowrap; align-items: flex-start; }
.vc-prep .vc-solo .ic { color: var(--fg-3); flex: none; margin-top: .1rem; }
.vc-prep .vc-solo span { flex: 1; }
.vc-prep > .riga-avviso + .bott { margin-top: .3rem; }
/* la riga forte della videocamera non più riconosciuta è un link: si tocca e porta a riattivarla */
.vc-avvisi .vc-av-accesso a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.memoria-piena .ic { flex: none; margin-top: .1rem; }
/* la pagina anonima della videocamera non ha barra né schede */
body.pagina-videocamera { padding-bottom: 0; }
body.pagina-videocamera .contenuto { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }

/* v3 §15.11 — il bottone del sonoro sopra il video: grande, in alto a sinistra (in basso ci sono i controlli) */
.sonoro {
  position: absolute; top: .6rem; left: .6rem; z-index: 3;
  min-height: 48px; padding: .55rem .95rem; border-radius: 999px; border: 0;
  font: inherit; font-size: 1rem; font-weight: 650; color: #fff;
  background: rgba(0,0,0,.66); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}
.sonoro.acceso { background: rgba(21,128,61,.85); }
.sonoro:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* §24 (punto 24): la diretta in pausa lo dice sopra il video (fermo in alto: si legge anche scorrendo); i tocchi passano al
   lettore. §24.28: su UNA riga, in alto a sinistra al posto del bottone del sonoro (in pausa non c'è niente da sentire),
   dentro il 40% alto del video: lontana dal ▶ grande al centro e dai controlli di Chrome in basso, a ogni grandezza.
   diretta.js sceglie la frase corta se l'intera non ci sta */
.diretta-pausa {
  position: absolute; top: .45rem; left: .6rem; z-index: 2; margin: 0;
  width: max-content; max-width: calc(100% - 1.2rem); padding: .3rem .75rem; border-radius: 999px;
  background: rgba(0,0,0,.72); color: #fff; font-size: .92rem; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.lettore.in-pausa .sonoro { display: none; }
/* la riga piccola sotto la diretta: «qualità piena» / «qualità ridotta: …» */
.qualita-diretta { margin: 0 .1rem; font-size: .86rem; color: var(--fg-3); }

/* v3 §15.11 — «Registra l'audio» nella card della videocamera: interruttore grande, avviso sotto */
.cam-media, .cam-altoparlante { margin: .15rem 0 .4rem; font-size: .86rem; color: var(--fg-3); }
.audio-riga { margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--bordo); }
.interruttore { position: relative; display: flex; align-items: center; gap: .9rem; cursor: pointer; min-height: 48px; }
.interruttore .int-testo { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.interruttore .int-testo b { font-size: 1.05rem; }
.interruttore .int-testo small { font-size: .86rem; color: var(--fg-3); line-height: 1.35; }
.interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruttore .int-pista { flex: none; position: relative; width: 58px; height: 34px; border-radius: 999px; background: var(--bordo-2); transition: background .15s; }
.interruttore .int-pomello { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.interruttore input:checked + .int-pista { background: var(--verde); }
.interruttore input:checked + .int-pista .int-pomello { transform: translateX(24px); }
.interruttore input:focus-visible + .int-pista { outline: 3px solid var(--accent); outline-offset: 2px; }
.interruttore input:disabled + .int-pista { opacity: .45; }
.interruttore:has(input:disabled) { cursor: default; }
.audio-stato { margin: .45rem 0 0; font-size: .88rem; color: var(--fg-2); }
.audio-stato.errore { color: var(--rosso); }

/* ════════════════════════════════════════════════════════════════════════
   §19 — «Parla» (nella diretta) e «Messaggi»
   ════════════════════════════════════════════════════════════════════════ */
/* il bottone di «Parla»: grande quanto un pollice che resta giù, e il telefono non deve trattare il dito fermo
   come un «tieni premuto» suo (menu, selezione del testo); il dito che scorre in verticale invece scorre la pagina (§23.3) */
.parla h2 { margin-bottom: .6rem; }
.parla-testa { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.parla-testa h2 { margin-bottom: .35rem; flex: 1; }
.parla-onda { margin-bottom: .35rem; }
.parla-onda .rec-punto { width: .6rem; height: .6rem; background: #fff; }
.parla-timer { margin-bottom: .35rem; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
/* §23.10: «In onda» e il tempo tengono il loro posto anche spenti: comparendo, sopra il bottone non cambia niente */
.parla-testa .spento { visibility: hidden; }
.parla-timer.quasi { color: var(--ambra); }
.parla-bott {
  display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 84px; padding: .45rem 1.1rem .45rem .7rem;
  border-radius: 999px; border: 2px solid transparent; background: var(--accent); color: #fff; text-align: left;
  font-weight: 800; font-size: 1.15rem; line-height: 1.25;
  /* §23.3: in verticale il dito fa scorrere la pagina (e la sessione non parte); fermo, il bottone è suo */
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: background .15s, transform .08s;
}
:root[data-theme="dark"] .parla-bott:not(.fase-onda):not(:disabled) { background: #4f46e5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .parla-bott:not(.fase-onda):not(:disabled) { background: #4f46e5; } }
.parla-bott:disabled { background: var(--bg-3); color: var(--fg-3); cursor: not-allowed; }
.parla-bott.fase-collego { background: #4338ca; }
.parla-bott.fase-onda { background: #dc2626; transform: scale(.99); }
.parla-bott.fase-permesso { background: var(--bg-2); color: var(--fg); border-color: var(--accent); }
.parla-cerchio {
  display: grid; place-items: center; flex: none; width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.parla-cerchio .ic { width: 2.1rem; height: 2.1rem; }
.parla-bott.fase-permesso .parla-cerchio { background: var(--accent-t); color: var(--accent); }
.parla-bott:disabled .parla-cerchio { background: var(--bg-2); }
.parla-bott.fase-onda .parla-cerchio { animation: parla-pulsa 1.2s ease-in-out infinite; }
.parla-bott.fase-collego .parla-cerchio { animation: parla-pulsa 1.6s ease-in-out infinite; }
@keyframes parla-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 50% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .parla-bott .parla-cerchio { animation: none !important; } }
.parla-et { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.parla-et small { font-size: .86rem; font-weight: 600; opacity: .9; }
.parla-livello { height: 10px; margin: .7rem .2rem 0; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.parla-livello span { display: block; height: 100%; width: 0; background: var(--verde); border-radius: 999px; transition: width .08s linear; }
/* §23.10: la riga di stato SOTTO il bottone (sopra, ogni frase lo spingeva giù da sotto il pollice); vuota non prende posto */
.parla-stato { margin: .6rem .2rem 0; color: var(--fg-2); font-weight: 600; line-height: 1.4; }
.parla-stato:empty { display: none; }
.parla-stato.ok { color: var(--verde); }
:root[data-theme="dark"] .parla-stato.ok { color: #86efac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .parla-stato.ok { color: #86efac; } }
.parla-stato.errore { color: var(--rosso); }
.parla-stato.attenzione { color: var(--ambra); }   /* «avviso» è l'avviso a comparsa (fondo scuro, ombra) */
.parla-nota { margin: .5rem .2rem 0; font-size: .9rem; color: var(--fg-3); }
.parla-modo { display: block; margin: .1rem .2rem 0; font-size: .9rem; text-align: left; }
/* «Microfono bloccato»: i passi per sbloccarlo, sotto il bottone spento (Parla e Messaggi) */
.sblocca { margin-top: .6rem; padding: .7rem .85rem; border-radius: 14px; background: var(--ambra-t); color: var(--fg); font-size: .95rem; line-height: 1.45; }
.sblocca-passi { margin: 0 0 .35rem 1.3rem; }
.sblocca-passi li { margin: .25rem 0; }
.sblocca p { margin: .4rem 0 0; color: var(--fg-2); }
.msg-registra .sblocca { margin-top: 0; }
.parla-proposta, .parla-sentito { margin-top: .7rem; padding: .75rem .85rem; border-radius: 14px; background: var(--bg-3); }
/* «Ti hanno sentito?» sale in vista da sola: sopra le schede in basso, non sotto */
.parla-sentito { scroll-margin-bottom: calc(var(--alt-schede) + var(--safe-b) + .8rem); }
.parla-proposta p, .parla-sentito p { margin-bottom: .5rem; color: var(--fg-2); }
.parla-proposta .bott { width: 100%; }
.parla-sentito .riga-bottoni { margin-top: .3rem; display: grid; grid-template-columns: 1fr 1fr; }

/* la parte «voce» della scheda di una videocamera */
.voce-cam { margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--bordo); }
.voce-bottoni { margin-top: 0; }
.voce-bottoni .bott:only-child { grid-column: 1 / -1; }
.voce-nota { margin: .45rem 0 0; font-size: .88rem; color: var(--fg-3); }
.cam-card .avanzamento .parla-sentito { margin-top: .5rem; }

/* la cronologia della voce fra le card della home: una riga piccola, senza miniatura */
.voce-riga {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 12px;
  background: var(--bg-3); color: var(--fg-2); font-size: .92rem; line-height: 1.35;
}
.voce-riga .ic { width: 1.15rem; height: 1.15rem; flex: none; color: var(--accent); }
.voce-riga b { font-variant-numeric: tabular-nums; color: var(--fg); }
.voce-riga.male .ic { color: var(--rosso); }
.vuoto + .voce-riga { margin-top: .2rem; }

/* la pagina dei messaggi */
.msg-registra { display: flex; flex-direction: column; gap: .4rem; }
.msg-registra .parla-bott.fase-onda { background: #dc2626; }
.msg-conto { font-variant-numeric: tabular-nums; }
.msg-registrato { display: flex; flex-direction: column; gap: .7rem; }
.msg-registrato audio { width: 100%; }
.msg-registrato .riga-bottoni { margin-top: 0; }
.msg-registrato > .bott { width: 100%; }
.msg-lista { display: flex; flex-direction: column; }
.msg-riga {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .35rem .65rem;
  padding: .7rem 0; border-top: 1px solid var(--bordo);
}
.msg-riga:first-child { border-top: 0; }
.msg-ascolta { color: var(--accent); }
.msg-corpo { min-width: 0; display: flex; flex-direction: column; }
.msg-corpo b { font-size: 1.04rem; overflow-wrap: anywhere; }
.msg-corpo small { color: var(--fg-3); font-size: .84rem; line-height: 1.35; }
.msg-ascolta { grid-row: 1; grid-column: 1; }
.msg-corpo { grid-row: 1; grid-column: 2; }
.msg-riga [data-menu-msg] { grid-row: 1; grid-column: 3; }
/* «Fai sentire» sotto il nome, largo quanto basta: sulla stessa riga schiacciava il testo in cinque righe */
.msg-sentire { grid-row: 2; grid-column: 2 / 4; justify-self: start; padding: .5rem .9rem; gap: .4rem; font-size: .95rem; }
.msg-riga .msg-esiti { grid-row: 3; grid-column: 1 / -1; margin: .1rem 0 0; }
.esiti-voce { list-style: none; display: flex; flex-direction: column; gap: .1rem; }
.esiti-voce li { margin: .15rem 0; font-size: .92rem; }
.esiti-voce .ic { width: 1.1rem; height: 1.1rem; flex: none; }
.riga-ok.piccola, .riga-errore.piccola { font-size: .9rem; padding: .45rem .7rem; }

/* il foglio «Fai sentire in…» */
.foglio-voce .caselle label { align-items: flex-start; padding: .2rem 0; }
.foglio-voce .caselle label > span { display: flex; flex-direction: column; padding-top: .1rem; }
.foglio-voce .caselle small { font-size: .84rem; color: var(--fg-3); font-weight: 500; }
.foglio-voce .caselle label.spenta { color: var(--fg-3); }
.foglio-voce [data-ok] .ic { width: 1.2rem; height: 1.2rem; }
.foglio-perche { margin: 0 0 .6rem; }
.foglio-perche .ic { flex: none; margin-top: .1rem; }
.link-messaggi { margin-top: .9rem; }

/* §21.12 d — il lettore del messaggio appena registrato: la durata vera, non lo «0:00» del lettore del browser */
.msg-lettore { display: flex; align-items: center; gap: .7rem; }
.msg-lettore { position: relative; }
.msg-lettore .msg-audio { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.msg-play { color: var(--accent); }
.msg-barra { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.msg-barra span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .2s linear; }
.msg-tempo { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg-2); font-size: .95rem; white-space: nowrap; }
.msg-corpo .msg-tempo { font-size: .84rem; color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════
   §21 — «Girare la videocamera» (nella diretta)
   ════════════════════════════════════════════════════════════════════════ */
.muovi-testa { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.muovi-testa h2 { margin-bottom: .25rem; }
.muovi-dove { font-size: .92rem; font-weight: 700; color: var(--fg-2); }
/* la croce: frecce da 64 px (il pollice di papà), Casa in mezzo. Il dito che resta giù non deve diventare un «tieni
   premuto» del telefono (menu, selezione); quello che scorre in verticale scorre la pagina (§23.3) */
.croce { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); gap: .55rem; justify-content: center; margin: .2rem 0 .3rem; }
.freccia {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
  background: var(--accent-t); color: var(--accent); border: 1.5px solid transparent;
  /* §23.3: in verticale il dito fa scorrere la pagina (e il comando non parte); fermo, la freccia è sua */
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: background .12s, transform .08s;
}
:root[data-theme="dark"] .freccia { color: var(--accent-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .freccia { color: var(--accent-2); } }
.freccia .ic { width: 2rem; height: 2rem; }
.freccia.casa { background: var(--bg-2); border-color: var(--bordo-2); color: var(--fg); }
.freccia.premuta, .freccia:active { background: #4f46e5; color: #fff; transform: scale(.96); }
.freccia:disabled { background: var(--bg-3); color: var(--fg-3); opacity: .6; cursor: not-allowed; transform: none; }
.croce-aiuto { text-align: center; font-size: .86rem; color: var(--fg-3); margin: .2rem 0 0; }
/* §23.2: UNA riga di stato sopra la croce, col suo posto sempre tenuto (due righe di testo): quello che vi compare — «Mi sto
   girando…», «Fatto: …», il conto del ritorno a Casa — non sposta la croce sotto il dito. Un errore vi mette accanto «Riprova».
   §24: l'altezza è FISSA (prima minima: un errore lungo la allungava e spingeva giù la croce); quello che non ci sta lo
   accorcia motori.js (adatta) e la frase intera va sotto la croce (.muovi-perche) */
.muovi-riga { height: 2.9rem; overflow: hidden; display: flex; flex-direction: column; justify-content: center; margin: 0 0 .35rem; }
.muovi-riga.stretta .muovi-stato > span, .muovi-riga.stretta .muovi-ritorno > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.muovi-perche { margin: .1rem .2rem .2rem; text-align: center; font-weight: 600; font-size: .95rem; line-height: 1.4; color: var(--fg-2); }
.muovi-perche.ok { color: var(--verde); }
.muovi-perche.errore { color: var(--rosso); }
.muovi-perche.giallo { color: var(--ambra); }
:root[data-theme="dark"] .muovi-perche.ok { color: #86efac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .muovi-perche.ok { color: #86efac; } }
.muovi-stato { margin: 0 .2rem; color: var(--fg-2); font-weight: 600; text-align: center; font-size: .95rem; line-height: 1.4;
  display: flex; align-items: center; justify-content: center; gap: .6rem; }
.muovi-stato.ok { color: var(--verde); }
:root[data-theme="dark"] .muovi-stato.ok { color: #86efac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .muovi-stato.ok { color: #86efac; } }
.muovi-stato.errore { color: var(--rosso); }
.muovi-stato.giallo { color: var(--ambra); }   /* «avviso» è l'avviso a comparsa */
.muovi-nota { margin: .4rem .2rem 0; font-size: .9rem; color: var(--fg-3); text-align: center; }
/* §22: fuori Casa il ritorno da sola si annuncia sempre; gli avvisi dell'edge (Casa sparita, la Tapo via ONVIF…) */
.muovi-ritorno { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0; color: var(--fg-2); font-weight: 600; font-size: .95rem; }
.muovi-ritorno .ic { width: 1.1rem; height: 1.1rem; flex: none; }
.muovi-ritorno.giallo { color: var(--ambra); }
:root[data-theme="dark"] .muovi-ritorno.giallo { color: #fde68a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .muovi-ritorno.giallo { color: #fde68a; } }
.muovi-ritorno .conto { font-variant-numeric: tabular-nums; }
.muovi-avvisi { list-style: none; margin: .5rem .1rem 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .88rem; color: var(--fg-3); }
.muovi-avvisi li { display: flex; gap: .4rem; align-items: flex-start; line-height: 1.4; }
.muovi-avvisi .ic { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; }
.muovi-blocco { margin-top: 0; }
.muovi-blocco .ic { flex: none; margin-top: .1rem; }
.muovi-blocco + .bott { margin-bottom: .3rem; }
/* la striscia AMBRA del mosaico: girata dove le zone non sono disegnate, l'immagine è a quadretti e non registra */
.muovi-mosaico { background: var(--ambra-t); color: var(--ambra); border: 2px solid #f59e0b; border-radius: 14px; padding: .7rem .85rem; margin: 0 0 .7rem; display: flex; flex-direction: column; gap: .5rem; }
:root[data-theme="dark"] .muovi-mosaico { color: #fde68a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .muovi-mosaico { color: #fde68a; } }
.muovi-mosaico p { line-height: 1.45; }
/* §24.29: la frase corta coi caratteri più grandi (la colonna stretta del 150%): la striscia intera sta nella finestra */
.muovi-mosaico .mosaico-corto { display: none; }
@media (max-width: 300px) {
  .muovi-mosaico { padding: .6rem .7rem; }
  .muovi-mosaico .mosaico-lungo { display: none; }
  .muovi-mosaico .mosaico-corto { display: block; }
  .muovi-mosaico .bott { padding-inline: .6rem; }
  /* la riga sopra la croce: senza l'icona dei quadretti, così «A quadretti.» e «Cosa fare ↓» stanno su una riga */
  .muovi-ritorno.giallo { gap: .35rem; }
  .muovi-ritorno.giallo > .ic { display: none; }
}
/* «Cosa fare ↓» nella riga sopra la croce: corto, a destra della frase, mai a capo */
.muovi-ritorno .muovi-cosa { flex: none; min-height: 0; padding: .35rem 0 .35rem .15rem; white-space: nowrap; color: inherit; font-size: .95rem; }
.muovi-mosaico .conto { font-variant-numeric: tabular-nums; }
.muovi-mosaico .link { color: inherit; min-height: 0; padding: 0; }
.muovi-sotto { font-size: .95rem; font-weight: 800; color: var(--fg-2); margin: .9rem 0 .4rem; }
/* le posizioni: una riga che scorre di lato, come i filtri */
.pos-riga {
  display: flex; gap: .55rem; overflow-x: auto; margin: 0 -1.05rem; padding: .1rem 1.05rem .4rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pos-riga::-webkit-scrollbar { display: none; }
.pos { position: relative; flex: 0 0 auto; width: 128px; display: flex; }
.pos-vai {
  display: flex; flex-direction: column; align-items: stretch; gap: .25rem; width: 100%; text-align: left;
  border-radius: 14px; border: 1.5px solid var(--bordo-2); background: var(--bg-2); padding: .35rem .35rem .45rem; color: var(--fg);
  flex: 1;   /* le carte di una riga alte uguali */
}
.pos.qui .pos-vai { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-t); }
.pos-vai:disabled { opacity: .55; cursor: not-allowed; }
.pos-foto { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-3); color: var(--fg-3); }
.pos-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pos-foto .ic { width: 1.6rem; height: 1.6rem; }
.pos-nome { font-weight: 800; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.pos-sotto { font-size: .78rem; font-weight: 700; color: var(--fg-3); }
.pos-sotto.ps-qui { color: var(--accent); }
.pos-sotto.ps-attesa { color: var(--fg-2); }
.pos-sotto.ps-male { color: var(--rosso); }
.pos-sotto.ps-giallo { color: var(--ambra); }
/* il «⋯» sull'angolo della foto: un bersaglio da 48 px che non ruba spazio al nome */
.pos-menu { position: absolute; top: 0; right: 0; }
.pos-menu .ic { width: 2rem; height: 2rem; padding: .3rem; border-radius: 50%; background: rgba(255,255,255,.9); color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,.3); box-sizing: border-box; }
/* «Salva questa» largo sotto la riga delle posizioni (§24, punto 23): sempre in vista, a qualunque grandezza dei caratteri */
.muovi-salva { width: 100%; margin-top: .35rem; }
.muovi-salva > span { display: flex; flex-direction: column; align-items: center; }
.muovi-salva small { font-size: .82rem; font-weight: 600; color: var(--fg-3); }
.muovi-casa { width: 100%; margin-top: .6rem; }
.muovi-altro { margin-top: .8rem; border-top: 1px solid var(--bordo); padding-top: .2rem; }
.muovi-altro summary { cursor: pointer; font-weight: 700; color: var(--fg-2); min-height: 48px; display: flex; align-items: center; }
.muovi-altro .interruttore, .muovi-altro .campo { margin: .4rem 0 .6rem; }
/* la riga «Girare» nella scheda della videocamera: dove guarda, e porta alla diretta */
.motori-cam {
  display: flex; align-items: center; gap: .65rem; margin-top: .8rem; padding: .6rem .75rem; min-height: 56px;
  border-radius: 14px; background: var(--bg-3); color: inherit; text-decoration: none;
}
.motori-cam > .ic:first-child { color: var(--accent); width: 1.5rem; height: 1.5rem; }
.motori-cam > .ic:last-child { color: var(--fg-3); }
.motori-cam span { flex: 1; min-width: 0; }
.motori-cam small { display: block; color: var(--fg-2); font-size: .88rem; }
.motori-cam.giallo { background: var(--ambra-t); }
.motori-cam.giallo small { color: var(--ambra); }
:root[data-theme="dark"] .motori-cam.giallo small { color: #fde68a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .motori-cam.giallo small { color: #fde68a; } }
/* una videocamera che non si gira: solo una riga piccola nella scheda (§21.0) */
.motori-fissa { display: flex; align-items: center; gap: .5rem; margin: .7rem .1rem 0; color: var(--fg-3); font-size: .9rem; }
.motori-fissa .ic { width: 1.1rem; height: 1.1rem; flex: none; }
/* «Riprova» dopo un esito «errore» dei motori (§21.9) */
.muovi-riprova { flex: none; margin: 0; padding-left: .85rem; padding-right: .85rem; }   /* §24: al 150% sta intero accanto alla frase */
.muovi-stato:has(.muovi-riprova) { text-align: left; }
/* la cronologia dei motori fra le card: come quella della voce */
.motori-riga .ic { color: var(--c-veicolo); }
/* le zone di una posizione: prima portarla lì; la foto in chiaro detta forte */
.zone-prima { flex-wrap: wrap; align-items: center; }
.zone-prima > span { flex: 1 1 14rem; }
.zone-prima .bott { margin-top: .2rem; }
.zone-prima .ic { flex: none; }
.zone-chiaro .ic { flex: none; margin-top: .1rem; }
.zone-quadro.spento { cursor: default; }
.zone-quadro.spento .zone-svg { display: none; }   /* le zone di un altro punto non si disegnano sul vuoto */
.zone-niente { width: 100%; margin-top: .55rem; }