/* ── Token ───────────────────────────────────────────────────────────────
   Identità Oesis: il marchio è nero e rosso (#E30613), wordmark verticale.
   Il rosso è l'UNICO accento e si spende con parsimonia — su un pannello che
   segnala errori, un rosso ovunque toglierebbe forza proprio dove serve.

   Per questo gli stati critici usano un rosso più scuro e desaturato
   (--critico), distinto dal rosso del marchio: due rossi con due mestieri
   diversi, mai in competizione.

   Il tema chiaro completo vive su :root nudo. I blocchi sotto ridefiniscono
   SOLO i token, mai i componenti: così la pagina è corretta anche nello
   stato "sistema", quando sul root non c'è nessun attributo. */
:root {
    /* Neutri caldi, appena spostati verso il rosso del marchio. */
    --sfondo:            #f7f6f6;
    --superficie:        #ffffff;
    --superficie-alt:    #f2f0f0;
    --superficie-scura:  #0d0d0f;
    --bordo:             #e2dede;
    --bordo-forte:       #c8c2c2;

    --testo:             #0d0d0f;
    --testo-medio:       #55504f;
    --testo-debole:      #7a7372;
    --testo-inverso:     #fafafa;

    /* Rosso Oesis: identità, non stato. */
    --accento:           #e30613;
    --accento-scuro:     #b8050f;
    --accento-tenue:     #fdeaeb;

    /* Semantici: stato dei dati. Il critico è più cupo del rosso di marchio. */
    --ok:                #0f7a3d;
    --ok-tenue:          #e6f4ec;
    --attenzione:        #a35a00;
    --attenzione-tenue:  #fdf0e0;
    --critico:           #9b1c1c;
    --critico-tenue:     #fbeaea;
    --neutro:            #6b6564;
    --neutro-tenue:      #efecec;

    --raggio:            10px;
    --raggio-piccolo:    6px;
    --ombra:             0 1px 2px rgb(13 13 15 / 0.05), 0 2px 6px rgb(13 13 15 / 0.04);
    --ombra-alta:        0 8px 32px rgb(13 13 15 / 0.14);

    --larghezza-menu:    248px;

    /* Archivio: grottesca stretta, parente stretta del wordmark Oesis. */
    --font-titoli: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* I dati tecnici (IUV, CF, token) si confrontano carattere per carattere:
       vanno in monospaziato, sempre. */
    --font-dati: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    /* Guardia: una scelta esplicita "chiaro" deve battere il sistema scuro. */
    :root:not([data-theme="light"]) {
        --sfondo:            #0a0a0c;
        --superficie:        #141416;
        --superficie-alt:    #1c1c1f;
        --superficie-scura:  #050506;
        --bordo:             #292a2e;
        --bordo-forte:       #3d3e44;

        --testo:             #f2f0f0;
        --testo-medio:       #aaa4a3;
        --testo-debole:      #837d7c;
        --testo-inverso:     #0a0a0c;

        --accento:           #ff3b45;
        --accento-scuro:     #ff6169;
        --accento-tenue:     #2b1113;

        --ok:                #4ade80;
        --ok-tenue:          #0f2818;
        --attenzione:        #fbbf24;
        --attenzione-tenue:  #2c2312;
        --critico:           #f87171;
        --critico-tenue:     #2e1516;
        --neutro:            #9b9695;
        --neutro-tenue:      #222225;

        --ombra:             0 1px 2px rgb(0 0 0 / 0.5);
        --ombra-alta:        0 8px 32px rgb(0 0 0 / 0.6);
    }
}

:root[data-theme="dark"] {
    --sfondo:            #0a0a0c;
    --superficie:        #141416;
    --superficie-alt:    #1c1c1f;
    --superficie-scura:  #050506;
    --bordo:             #292a2e;
    --bordo-forte:       #3d3e44;

    --testo:             #f2f0f0;
    --testo-medio:       #aaa4a3;
    --testo-debole:      #837d7c;
    --testo-inverso:     #0a0a0c;

    --accento:           #ff3b45;
    --accento-scuro:     #ff6169;
    --accento-tenue:     #2b1113;

    --ok:                #4ade80;
    --ok-tenue:          #0f2818;
    --attenzione:        #fbbf24;
    --attenzione-tenue:  #2c2312;
    --critico:           #f87171;
    --critico-tenue:     #2e1516;
    --neutro:            #9b9695;
    --neutro-tenue:      #222225;

    --ombra:             0 1px 2px rgb(0 0 0 / 0.5);
    --ombra-alta:        0 8px 32px rgb(0 0 0 / 0.6);
}

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

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

body {
    margin: 0;
    /* Sfondo esplicito: senza, la pagina prende quello dell'host. */
    background: var(--sfondo);
    color: var(--testo);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-titoli);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
    letter-spacing: -0.02em;
}

h1 { font-size: 1.875rem; font-weight: 700; }
h2 { font-size: 1.0625rem; }
h3 { font-size: 0.9375rem; }

p { margin: 0; }

a {
    color: var(--accento);
    text-decoration-color: color-mix(in srgb, var(--accento) 35%, transparent);
    text-underline-offset: 2px;
}

a:hover { text-decoration-color: currentColor; }

/* Focus sempre visibile: si opera anche da tastiera. */
:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Impianto ────────────────────────────────────────────────────────────
   Menu fisso a sinistra, area di lavoro a destra. Sotto i 900px il menu
   diventa una barra orizzontale scorrevole. */
.impianto {
    display: grid;
    grid-template-columns: var(--larghezza-menu) minmax(0, 1fr);
    min-height: 100vh;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--superficie-scura);
    color: #cbd5e1;
    padding-block: 18px;
    padding-inline: 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Il marchio riprende la costruzione del logo Oesis: wordmark accostato a
   una barra rossa verticale. */
.menu__marchio {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-inline: 10px;
    margin-bottom: 26px;
    color: #fff;
}

.menu__marchio::before {
    content: "";
    width: 4px;
    align-self: stretch;
    min-height: 34px;
    background: var(--accento);
    border-radius: 1px;
}

.menu__marchio-testo { display: flex; flex-direction: column; gap: 1px; }

.menu__marchio strong {
    font-family: var(--font-titoli);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.menu__marchio span {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a8482;
}

.menu__sezione {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #64748b;
    padding-inline: 10px;
    margin-top: 18px;
    margin-bottom: 5px;
}

.menu__voce {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--raggio-piccolo);
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 0.12s, color 0.12s;
}

.menu__voce:hover { background: rgb(255 255 255 / 0.07); color: #fff; }

/* La voce attiva si segna con una barra rossa e un fondo appena acceso:
   un pieno rosso su ogni selezione stancherebbe e ruberebbe attenzione agli
   avvisi, che il rosso ce l'hanno per un motivo. */
.menu__voce--attiva {
    background: rgb(255 255 255 / 0.09);
    color: #fff;
    position: relative;
}

.menu__voce--attiva::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--accento);
    border-radius: 0 2px 2px 0;
}

.menu__voce--attiva:hover { background: rgb(255 255 255 / 0.12); color: #fff; }

.menu__voce svg { flex: none; width: 15px; height: 15px; opacity: 0.85; }

.menu__conteggio {
    margin-left: auto;
    font-family: var(--font-dati);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    background: rgb(255 255 255 / 0.1);
    border-radius: 20px;
    padding: 1px 7px;
}

.menu__piede {
    margin-top: auto;
    padding-top: 16px;
    padding-inline: 10px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
    font-size: 0.75rem;
    color: #94a3b8;
}

.menu__piede a { color: #cbd5e1; }

/* ── Area di lavoro ──────────────────────────────────────────────────── */
.lavoro {
    min-width: 0;
    padding-block: 26px 56px;
    padding-inline: 28px;
}

.intestazione {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

.intestazione__occhiello {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--testo-debole);
    margin-bottom: 3px;
}

.intestazione__nota {
    color: var(--testo-medio);
    font-size: 0.8125rem;
    margin-top: 3px;
}

.azioni { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Riquadri ────────────────────────────────────────────────────────── */
.riquadro {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}

.riquadro__testata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--bordo);
}

.riquadro__corpo { padding: 16px; }
.riquadro__corpo--piatto { padding: 0; }

/* ── Contatori ───────────────────────────────────────────────────────────
   Il numero è il dato: niente bordo attorno a ogni tessera, solo una riga
   di colore che codifica lo stato. */
.contatori {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.contatore {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--neutro);
    border-radius: var(--raggio);
    padding: 13px 15px;
    box-shadow: var(--ombra);
}

.contatore--ok        { border-left-color: var(--ok); }
.contatore--attenzione{ border-left-color: var(--attenzione); }
.contatore--critico   { border-left-color: var(--critico); }
.contatore--accento   { border-left-color: var(--accento); }

.contatore__etichetta {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--testo-debole);
}

.contatore__valore {
    font-family: var(--font-dati);
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin-top: 5px;
    letter-spacing: -0.02em;
}

.contatore__nota {
    font-size: 0.75rem;
    color: var(--testo-medio);
    margin-top: 2px;
}

/* ── Tabelle ─────────────────────────────────────────────────────────── */
.tabella-contenitore { overflow-x: auto; }

.tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.tabella th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--testo-debole);
    background: var(--superficie-alt);
    padding: 9px 14px;
    white-space: nowrap;
    border-bottom: 1px solid var(--bordo);
}

.tabella td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bordo);
    vertical-align: middle;
}

.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover { background: var(--superficie-alt); }

.tabella__dato {
    font-family: var(--font-dati);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.tabella__numero {
    font-family: var(--font-dati);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tabella__vuota {
    padding: 40px 16px;
    text-align: center;
    color: var(--testo-debole);
}

/* Nelle tabelle i link non prendono l'accento: cinquanta righe di rosso
   toglierebbero forza agli avvisi, che il rosso ce l'hanno per un motivo.
   Restano riconoscibili dalla sottolineatura al passaggio del mouse. */
.tabella a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.tabella a:hover {
    color: var(--accento);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Pillole di stato ────────────────────────────────────────────────── */
.pillola {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    background: var(--neutro-tenue);
    color: var(--neutro);
}

.pillola--success   { background: var(--ok-tenue);         color: var(--ok); }
.pillola--info      { background: var(--accento-tenue);    color: var(--accento); }
.pillola--warning   { background: var(--attenzione-tenue); color: var(--attenzione); }
.pillola--danger    { background: var(--critico-tenue);    color: var(--critico); }
.pillola--secondary { background: var(--neutro-tenue);     color: var(--neutro); }
.pillola--dark      { background: var(--neutro-tenue);     color: var(--testo-medio); }

.pillola::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.pillola--senza-punto::before { display: none; }

/* ── Comandi ─────────────────────────────────────────────────────────── */
.comando {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 7px 13px;
    border-radius: var(--raggio-piccolo);
    border: 1px solid var(--bordo-forte);
    background: var(--superficie);
    color: var(--testo);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s, border-color 0.12s;
}

.comando:hover { background: var(--superficie-alt); text-decoration: none; }

.comando--primario {
    background: var(--accento);
    border-color: var(--accento);
    color: #fff;
}

.comando--primario:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); }

.comando--critico {
    background: var(--superficie);
    border-color: color-mix(in srgb, var(--critico) 40%, var(--bordo));
    color: var(--critico);
}

.comando--critico:hover { background: var(--critico-tenue); }

.comando--piccolo { padding: 4px 9px; font-size: 0.75rem; }

.comando svg { width: 14px; height: 14px; }

/* Un form attorno a un singolo bottone non deve rompere l'allineamento
   della riga: in una tabella i comandi stanno affiancati. */
.riga form { display: contents; }

/* ── Moduli ──────────────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 5px; }

.campo__etichetta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--testo-medio);
}

.campo__aiuto {
    font-size: 0.75rem;
    color: var(--testo-debole);
}

.campo__errore {
    font-size: 0.75rem;
    color: var(--critico);
    font-weight: 500;
}

.controllo {
    width: 100%;
    font-family: inherit;
    font-size: 0.8125rem;
    padding: 7px 10px;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-piccolo);
    background: var(--superficie);
    color: var(--testo);
}

.controllo:focus {
    outline: none;
    border-color: var(--accento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 18%, transparent);
}

.controllo--dati { font-family: var(--font-dati); }

textarea.controllo { resize: vertical; min-height: 74px; }

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

.campo--intero { grid-column: 1 / -1; }

.spunta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8125rem;
}

.spunta input { margin-top: 3px; flex: none; }

/* ── Filtri ──────────────────────────────────────────────────────────── */
.filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    margin-bottom: 16px;
}

.filtri .campo { min-width: 138px; flex: 1 1 138px; }
.filtri .campo--stretto { flex: 0 1 112px; min-width: 112px; }

/* ── Avvisi ──────────────────────────────────────────────────────────── */
.avviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--raggio);
    border: 1px solid;
    font-size: 0.8125rem;
    margin-bottom: 14px;
}

.avviso--ok      { background: var(--ok-tenue);         border-color: color-mix(in srgb, var(--ok) 30%, transparent);         color: var(--ok); }
.avviso--info    { background: var(--accento-tenue);    border-color: color-mix(in srgb, var(--accento) 30%, transparent);    color: var(--accento); }
.avviso--warning { background: var(--attenzione-tenue); border-color: color-mix(in srgb, var(--attenzione) 30%, transparent); color: var(--attenzione); }
.avviso--danger  { background: var(--critico-tenue);    border-color: color-mix(in srgb, var(--critico) 30%, transparent);    color: var(--critico); }

.avviso svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* Il segreto mostrato una volta sola: deve saltare all'occhio. */
.segreto {
    font-family: var(--font-dati);
    font-size: 0.8125rem;
    word-break: break-all;
    background: var(--superficie-scura);
    color: #86efac;
    padding: 11px 13px;
    border-radius: var(--raggio-piccolo);
    margin-top: 8px;
    user-select: all;
}

/* ── Andamento (sparkline a barre) ───────────────────────────────────── */
.andamento {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 62px;
    padding-top: 6px;
}

.andamento__barra {
    flex: 1;
    min-width: 2px;
    background: color-mix(in srgb, var(--accento) 28%, transparent);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: background-color 0.12s;
}

.andamento__barra:hover { background: var(--accento); }
.andamento__barra--ultima { background: var(--accento); }

.andamento__asse {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--testo-debole);
    font-family: var(--font-dati);
    margin-top: 5px;
}

/* ── Coppie etichetta/valore ─────────────────────────────────────────── */
.dettaglio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
    gap: 14px;
}

.dettaglio__voce { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.dettaglio__etichetta {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--testo-debole);
}

.dettaglio__valore { font-size: 0.8125rem; word-break: break-word; }
.dettaglio__valore--dati { font-family: var(--font-dati); font-size: 0.75rem; }

/* ── Codice / XML ────────────────────────────────────────────────────── */
.codice {
    font-family: var(--font-dati);
    font-size: 0.75rem;
    line-height: 1.6;
    background: var(--superficie-alt);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    padding: 12px;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
    max-height: 460px;
    overflow-y: auto;
}

/* ── Paginazione ─────────────────────────────────────────────────────── */
.paginazione {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--bordo);
    font-size: 0.8125rem;
    color: var(--testo-medio);
}

.paginazione__comandi { display: flex; gap: 6px; }

/* ── Accesso ─────────────────────────────────────────────────────────── */
.accesso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: var(--sfondo);
}

.accesso__riquadro {
    width: 100%;
    max-width: 382px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    box-shadow: var(--ombra-alta);
    padding: 30px 28px;
}

.accesso__marchio {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 5px;
}

.accesso__marchio strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.accesso__marchio span { font-family: var(--font-dati); font-size: 0.6875rem; color: var(--testo-debole); }

/* ── Utilità ─────────────────────────────────────────────────────────── */
.pila       { display: flex; flex-direction: column; gap: 16px; }
.pila--fine { gap: 9px; }
.riga       { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.riga--fine { gap: 5px; }
.debole     { color: var(--testo-debole); }
.medio      { color: var(--testo-medio); }
.minuto     { font-size: 0.75rem; }
.dati       { font-family: var(--font-dati); font-variant-numeric: tabular-nums; }
.a-destra   { margin-left: auto; }
.nessun-margine { margin: 0; }

.due-colonne {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* ── Adattamento ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .impianto { grid-template-columns: 1fr; }

    .menu {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        padding-block: 10px;
        gap: 4px;
    }

    .menu__marchio, .menu__sezione, .menu__piede { display: none; }
    .menu__voce { white-space: nowrap; }
    .lavoro { padding-inline: 16px; }
    .due-colonne { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .contatori { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .lavoro { padding-inline: 14px; }
}

/* ── Anteprima della ricevuta ─────────────────────────────────────────────
   Pannello laterale sopra l'elenco: chi verifica decine di ricevute le apre
   una dopo l'altra senza mai perdere la posizione nella tabella. */
.anteprima {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 880px);
}

.anteprima[hidden] { display: none; }

.anteprima__fondo {
    background: rgb(13 13 15 / 0.55);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.anteprima__pannello {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border-left: 1px solid var(--bordo);
    box-shadow: var(--ombra-alta);
    min-width: 0;
}

.anteprima__testata {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--bordo);
}

.anteprima__titolo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.anteprima__etichetta {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--testo-debole);
}

.anteprima__iuv {
    font-family: var(--font-dati);
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anteprima__comandi { display: flex; gap: 7px; margin-left: auto; }

.anteprima__corpo {
    flex: 1;
    min-height: 0;
    background: var(--superficie-alt);
}

.anteprima__corpo iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.anteprima__chiudi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--raggio-piccolo);
    border: 1px solid var(--bordo-forte);
    background: var(--superficie);
    color: var(--testo-medio);
    cursor: pointer;
}

.anteprima__chiudi:hover { background: var(--superficie-alt); color: var(--testo); }
.anteprima__chiudi svg { width: 15px; height: 15px; }

/* Sotto i 900px il pannello occupa tutto: su un telefono una colonna
   da 880px non avrebbe senso. */
@media (max-width: 900px) {
    .anteprima { grid-template-columns: 1fr; }
    .anteprima__fondo { display: none; }
}

/* ── Selettore del tema ───────────────────────────────────────────────────
   Tre stati in fondo al menu: chiaro, scuro, sistema. Sta qui e non in una
   pagina di impostazioni perché è una preferenza che si cambia al volo,
   quando la luce della stanza cambia. */
.tema {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 12px;
    background: rgb(255 255 255 / 0.06);
    border-radius: var(--raggio-piccolo);
}

.tema form { display: contents; }

.tema__scelta {
    flex: 1;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 4px 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #9b9391;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

.tema__scelta:hover { color: #fff; background: rgb(255 255 255 / 0.07); }

.tema__scelta--attiva,
.tema__scelta--attiva:hover {
    background: rgb(255 255 255 / 0.14);
    color: #fff;
}

.menu__utente { margin-bottom: 2px; }

/* ── Risultati della ricerca in anagrafica ────────────────────────────────
   Elenco sotto il campo: si sceglie con un clic e i dati si compilano. */
.risultati {
    position: relative;
    margin-top: 4px;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-piccolo);
    background: var(--superficie);
    box-shadow: var(--ombra-alta);
    max-height: 290px;
    overflow-y: auto;
    z-index: 20;
}

.risultati[hidden] { display: none; }

.risultati__voce {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--bordo);
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.risultati__voce:last-child { border-bottom: 0; }
.risultati__voce:hover,
.risultati__voce:focus-visible { background: var(--superficie-alt); }

.risultati__nome {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--testo);
}

.risultati__dati {
    font-family: var(--font-dati);
    font-size: 0.6875rem;
    color: var(--testo-debole);
}

.risultati__vuoto {
    padding: 14px 12px;
    font-size: 0.8125rem;
    color: var(--testo-debole);
    text-align: center;
}