/* I colori e i caratteri sono quelli di edilizia-ai.it: presi dalle variabili del
   tema WordPress (`06-Siti-Web/edilizia-ai-site/wp-theme/style.css`), non a occhio.
   Navy per la struttura, oro per ciò su cui si clicca, caratteri Merriweather +
   Inter. I nomi delle variabili restano quelli di prima, così le 378 righe di
   regole qui sotto non vanno toccate: cambia la veste, non l'impianto. */
:root {
    --blu: #2E5077;             /* steel — link e accenti freddi */
    --blu-scuro: #0D2137;       /* navy */
    --blu-tenue: #EEF0F4;
    --barra: #162F4A;           /* navy-mid: la testata del sito */
    --su-barra: #F7F8FA;
    --laterizio: #B8963E;       /* oro: l'azione principale, come i bottoni del sito */
    --su-laterizio: #FFFFFF;
    --oro-chiaro: #D4AC52;
    --verde: #065F46;
    --verde-tenue: #D1FAE5;
    --ambra: #92400E;
    --ambra-tenue: #FEF3C7;
    --ambra-campo: #FEF9EC;
    --rosso: #991B1B;
    --rosso-tenue: #FEE2E2;
    --fondo: #EEF0F4;
    --carta: #FFFFFF;
    --inchiostro: #1A2332;
    --tenue: #6B7685;
    --linea: #D8DCE4;
    --linea-fine: #E9ECF1;
    --display: "Merriweather", Georgia, "Times New Roman", serif;
    --testo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --altezza-barra: 58px;
}
/* Il sito è chiaro; qui il buio si costruisce con la stessa famiglia navy, non
   con un blu qualunque, così l'oro continua a leggersi sopra. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --blu: #A8C4E4; --blu-scuro: #071523; --blu-tenue: #1B3350;
        --barra: #0A1A2C; --su-barra: #F7F8FA;
        --laterizio: #D4AC52; --su-laterizio: #0D2137; --oro-chiaro: #E4C377;
        --verde: #5FBF8A; --verde-tenue: #12332A;
        --ambra: #D9A441; --ambra-tenue: #33280F; --ambra-campo: #3A2E12;
        --rosso: #E0917C; --rosso-tenue: #3A1B18;
        --fondo: #0D2137; --carta: #162F4A; --inchiostro: #F7F8FA;
        --tenue: #9AA3B0; --linea: #2E5077; --linea-fine: #21405F;
    }
}
:root[data-theme="dark"] {
    --blu: #A8C4E4; --blu-scuro: #071523; --blu-tenue: #1B3350;
    --barra: #0A1A2C; --su-barra: #F7F8FA;
    --laterizio: #D4AC52; --su-laterizio: #0D2137; --oro-chiaro: #E4C377;
    --verde: #5FBF8A; --verde-tenue: #12332A;
    --ambra: #D9A441; --ambra-tenue: #33280F; --ambra-campo: #3A2E12;
    --rosso: #E0917C; --rosso-tenue: #3A1B18;
    --fondo: #0D2137; --carta: #162F4A; --inchiostro: #F7F8FA;
    --tenue: #9AA3B0; --linea: #2E5077; --linea-fine: #21405F;
}

* { box-sizing: border-box; }
body {
    margin: 0; background: var(--fondo); color: var(--inchiostro);
    font-family: var(--testo); font-size: 14px; line-height: 1.5;
    padding-bottom: var(--altezza-barra);
}
.nascosto { display: none !important; }

/* ---------- menubar ---------- */
.menubar {
    background: var(--barra); color: var(--su-barra);
    display: flex; align-items: center; gap: 0.2rem; padding: 0.4rem 0.9rem;
    position: sticky; top: 0; z-index: 20;
}
/* Il marchio ripete il bollo del sito: quadrato con bordo oro, lettere in serif. */
.menubar .marchio {
    font-family: var(--display); font-weight: 700; font-size: 0.95rem;
    letter-spacing: 0.02em; margin-right: 1.1rem; display: inline-flex; align-items: center; gap: 0.55rem;
}
/* «AI» in oro dentro il nome, come «Edilizia-AI» sul sito */
.menubar .marchio span { color: var(--oro-chiaro); }
.menubar .marchio::before {
    content: "SC"; font-size: 0.68rem; letter-spacing: 0;
    width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center;
    border: 2px solid var(--laterizio); border-radius: 4px; color: var(--oro-chiaro);
}
.voce-menu {
    font: inherit; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em;
    background: none; border: 0; border-bottom: 2px solid transparent;
    color: #A8B8C8; padding: 0.35rem 0.7rem; cursor: pointer;
}
/* «Amministrazione» è un link a una pagina a sé, non una vista: stessa veste */
a.voce-menu { text-decoration: none; display: inline-block; line-height: 1.35; }
/* La voce scelta si segna con il filo d'oro sotto, come nel menu del sito:
   niente sfondo chiaro, che su questo navy sporcherebbe la barra. */
.voce-menu:hover { color: var(--su-barra); border-bottom-color: rgba(184,150,62,0.5); }
.voce-menu.attiva { color: var(--su-barra); border-bottom-color: var(--laterizio); font-weight: 600; }
.menubar .destra { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; color: #A8B8C8; }
.spia { width: 8px; height: 8px; border-radius: 50%; background: #C9553D; }
.spia.ok { background: #6BD49A; }

/* ---------- pagine semplici ---------- */
.pagina { max-width: 900px; margin: 0 auto; padding: 1.2rem 1rem 2rem; }
.pagina.stretta { max-width: 560px; }
h1 { font-family: var(--display); font-size: 1.5rem; margin: 0.3rem 0 1rem; }
h2 { font-family: var(--display); font-size: 1.08rem; margin: 1.3rem 0 0.5rem; }
.riga-titolo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nota { color: var(--tenue); font-size: 0.85rem; max-width: 68ch; }
.obbligo { color: var(--rosso); }
code { font-family: var(--mono); font-size: 0.88em; background: var(--blu-tenue); padding: 0.05em 0.3em; border-radius: 2px; }

label { display: block; margin: 0.7rem 0; font-weight: 500; font-size: 0.86rem; }
input, textarea, select {
    font: inherit; font-size: 0.87rem; width: 100%; margin-top: 0.2rem;
    border: 1px solid var(--linea); border-radius: 3px; padding: 0.4rem 0.55rem;
    background: var(--carta); color: var(--inchiostro);
}
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .due-colonne { grid-template-columns: 1fr; } }

.bottone {
    font: inherit; font-size: 0.85rem; background: var(--carta); color: var(--inchiostro);
    border: 1px solid var(--linea); border-radius: 3px; padding: 0.4rem 0.85rem; cursor: pointer;
}
.bottone:hover { border-color: var(--blu); color: var(--blu); }
.bottone.principale { background: var(--laterizio); border-color: var(--laterizio); color: var(--su-laterizio); font-weight: 600; }
.bottone.principale:hover { filter: brightness(1.08); color: var(--su-laterizio); }
.bottone:disabled { opacity: 0.5; cursor: not-allowed; }
.riga-bottoni { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.2rem; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--laterizio); outline-offset: 1px;
}

.elenco { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.scheda-pratica {
    background: var(--carta); border: 1px solid var(--linea); border-radius: 4px;
    padding: 0.7rem 0.9rem; display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; cursor: pointer;
}
.scheda-pratica:hover { border-color: var(--laterizio); }
.chip {
    display: inline-block; font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
    background: var(--blu-tenue); color: var(--blu); border-radius: 3px; padding: 0.1rem 0.42rem;
}
.chip.ok { background: var(--verde-tenue); color: var(--verde); }
.chip.avviso { background: var(--ambra-tenue); color: var(--ambra); }
.chip.grave { background: var(--rosso-tenue); color: var(--rosso); }
.chiave { border-bottom: 1px dotted var(--blu); cursor: help; }

.wizard { display: flex; flex-direction: column; gap: 0.35rem; }
.wizard .opzione {
    font: inherit; font-size: 0.85rem; text-align: left; background: var(--carta);
    border: 1px solid var(--linea); border-radius: 4px; padding: 0.5rem 0.7rem; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; color: var(--inchiostro);
}
.wizard .opzione:hover { border-color: var(--blu); }
.wizard .opzione.scelta { border-color: var(--laterizio); background: var(--blu-tenue); }
.wizard .opzione.suggerita { box-shadow: inset 3px 0 0 var(--ambra); }
.wizard .opzione.suggerita::after {
    content: "suggerito"; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ambra); flex: none;
}

/* --- parere dell'agente sulla qualificazione --- */
.riga-qualifica { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
.bottone.accento { background: var(--ambra-tenue); border-color: var(--ambra); color: var(--ambra); font-weight: 600; }
.bottone.accento:hover { background: var(--ambra); color: var(--su-laterizio); border-color: var(--ambra); }
.parere {
    border: 1px solid var(--ambra); background: var(--ambra-tenue);
    border-radius: 5px; padding: 0.8rem 0.95rem; margin: 0.7rem 0 0.4rem; font-size: 0.87rem;
}
.parere p { margin: 0 0 0.55rem; }
.parere p:last-child { margin-bottom: 0; }
.parere-titolo { font-family: var(--display); font-size: 1.02rem; font-weight: 600; margin-bottom: 0.45rem; }
.chip.grande { font-size: 0.85rem; padding: 0.14rem 0.55rem; background: var(--laterizio); color: var(--su-laterizio); }
.parere-casistica { font-style: italic; color: var(--tenue); }
.parere-norme { font-family: var(--mono); font-size: 0.73rem; color: var(--tenue); }
.parere-blocco { margin: 0.5rem 0; }
.parere-blocco b { font-size: 0.8rem; }
.parere-blocco ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.parere-blocco li { margin-bottom: 0.25rem; }
.parere-attenzione { color: var(--rosso); font-weight: 500; }
.parere-piede { font-size: 0.76rem; color: var(--tenue); border-top: 1px solid var(--ambra); padding-top: 0.45rem; margin-top: 0.6rem; }

/* ---------- finestra pratica ---------- */
.finestra-pratica { display: flex; flex-direction: column; min-height: calc(100vh - var(--altezza-barra) - 40px); }
.barra-strumenti {
    display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
    padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--linea); background: var(--carta);
}
.strumento {
    font: inherit; font-size: 0.8rem; background: var(--carta); color: var(--inchiostro);
    border: 1px solid var(--linea); border-radius: 3px; padding: 0.3rem 0.6rem; cursor: pointer;
}
.strumento:hover { border-color: var(--blu); color: var(--blu); }
.strumento.principale { background: var(--laterizio); border-color: var(--laterizio); color: var(--su-laterizio); font-weight: 600; }
.strumento.principale:hover { filter: brightness(1.08); color: var(--su-laterizio); }
.strumento:disabled { opacity: 0.55; cursor: progress; }
.separatore { width: 1px; height: 20px; background: var(--linea); margin: 0 0.25rem; }
.stato-pratica { margin-left: auto; font-family: var(--mono); font-size: 0.73rem; color: var(--tenue); }

.corpo-pratica { display: grid; grid-template-columns: 226px 1fr 262px; flex: 1; min-height: 0; }
@media (max-width: 1000px) { .corpo-pratica { grid-template-columns: 200px 1fr; } .pannello-destro { display: none; } }
@media (max-width: 720px) { .corpo-pratica { grid-template-columns: 1fr; } .albero { border-right: 0 !important; } }

.albero { border-right: 1px solid var(--linea); background: var(--fondo); padding: 0.7rem 0 1rem; }
.intestazione-albero {
    font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tenue); padding: 0 0.8rem 0.45rem; margin: 0;
}
.nodo {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
    background: none; border: 0; border-left: 3px solid transparent; color: var(--inchiostro);
    font: inherit; font-size: 0.82rem; padding: 0.4rem 0.8rem; cursor: pointer;
}
.nodo:hover { background: var(--blu-tenue); }
.nodo.attivo { background: var(--carta); border-left-color: var(--laterizio); font-weight: 600; }
.nodo .stato { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1.5px solid var(--tenue); }
.nodo .stato.completo { background: var(--verde); border-color: var(--verde); }
.nodo .stato.ai { background: var(--ambra); border-color: var(--ambra); }
.nodo .stato.vuoto { background: none; border-color: var(--rosso); }
.nodo .conta { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--tenue); }

.legenda { padding: 0.7rem 0.8rem 0; margin-top: 0.5rem; border-top: 1px solid var(--linea-fine); }
.legenda div { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; color: var(--tenue); margin-bottom: 0.28rem; }
.legenda .stato { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--tenue); flex: none; }
.legenda .stato.completo { background: var(--verde); border-color: var(--verde); }
.legenda .stato.ai { background: var(--ambra); border-color: var(--ambra); }
.legenda .stato.vuoto { border-color: var(--rosso); }

.scheda-documenti { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--linea-fine); }
.fascicolo { list-style: none; margin: 0; padding: 0 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; }
.fascicolo li {
    display: flex; align-items: center; gap: 0.4rem; background: var(--carta);
    border: 1px solid var(--linea-fine); border-radius: 3px; padding: 0.25rem 0.4rem; font-size: 0.74rem;
}
.fascicolo .estensione { font-family: var(--mono); font-size: 0.58rem; background: var(--blu); color: #fff; border-radius: 2px; padding: 0.05rem 0.24rem; flex: none; }
.fascicolo .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fascicolo .via { margin-left: auto; background: none; border: 0; color: var(--tenue); cursor: pointer; font-size: 0.8rem; padding: 0 0.15rem; }
.fascicolo .vuoto { justify-content: center; color: var(--tenue); border-style: dashed; }

/* ---------- modulo ---------- */
.modulo { padding: 0.9rem 1.1rem 1.5rem; min-width: 0; }
.titolo-sezione { display: flex; align-items: baseline; gap: 0.6rem; border-bottom: 2px solid var(--blu); padding-bottom: 0.4rem; }
.titolo-sezione h2 { font-family: var(--display); font-size: 1.05rem; margin: 0; }
.titolo-sezione .rif { font-family: var(--mono); font-size: 0.68rem; color: var(--tenue); margin-left: auto; }
.griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1rem; margin-top: 0.85rem; }
@media (max-width: 620px) { .griglia { grid-template-columns: 1fr; } }
.riga { padding: 0.3rem 0; }
.riga.piena { grid-column: 1 / -1; }
.riga > label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--tenue); margin: 0 0 0.16rem; font-weight: 500; }
.porta-campo { display: flex; align-items: center; gap: 0.3rem; }
.campo {
    font: inherit; font-size: 0.85rem; width: 100%; padding: 0.33rem 0.5rem;
    border: 1px solid var(--linea); border-radius: 2px; background: var(--carta); color: var(--inchiostro); margin: 0;
}
.campo.proposto { background: var(--ambra-campo); border-color: var(--ambra); }
.campo.confermato { border-left: 3px solid var(--verde); }
.mini {
    font: inherit; font-family: var(--mono); font-size: 0.67rem; white-space: nowrap;
    border: 1px solid var(--ambra); background: var(--ambra-tenue); color: var(--ambra);
    border-radius: 2px; padding: 0.26rem 0.38rem; cursor: pointer;
}
.mini:hover { background: var(--ambra); color: var(--su-laterizio); }
.provenienza { display: block; font-family: var(--mono); font-size: 0.65rem; color: var(--tenue); margin-top: 0.12rem; }
.aiuto-campo { display: block; font-size: 0.72rem; color: var(--tenue); margin-top: 0.1rem; }
.info {
    width: 15px; height: 15px; border-radius: 50%; background: var(--blu-tenue); color: var(--blu);
    font-family: var(--mono); font-size: 0.63rem; font-weight: 700; border: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; cursor: help; flex: none;
}
.info:hover { background: var(--blu); color: var(--carta); }

/* ---------- pannello destro ---------- */
.pannello-destro { border-left: 1px solid var(--linea); background: var(--fondo); padding: 0.8rem 0.8rem 1.2rem; overflow-y: auto; }
.pannello-destro h3 {
    font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tenue); margin: 0 0 0.5rem;
}
.pannello-destro h3 + * { margin-bottom: 1rem; }
.verbale {
    background: var(--blu-scuro); color: #C8D8F0; font-family: var(--mono); font-size: 0.67rem;
    border-radius: 3px; padding: 0.5rem 0.55rem; line-height: 1.65; max-height: 190px; overflow-y: auto;
}
.verbale .ora { color: #6E86AD; }
.verbale .ok { color: #7FD9A6; }
.verbale .att { color: #F0C368; }
.verbale .err { color: #F2938C; }
.avviso {
    border: 1px solid var(--ambra); background: var(--ambra-tenue); border-radius: 3px;
    padding: 0.5rem 0.55rem; font-size: 0.76rem; margin-bottom: 0.6rem;
}
.avviso strong {
    display: block; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ambra); margin-bottom: 0.18rem;
}
.moduli-comune { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.76rem; }
.moduli-comune a { color: var(--blu); text-decoration: none; }
.moduli-comune a:hover { text-decoration: underline; }
.moduli-comune .voce { background: var(--carta); border: 1px solid var(--linea-fine); border-radius: 3px; padding: 0.32rem 0.45rem; }

.barra-stato {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    border-top: 1px solid var(--linea); background: var(--fondo);
    padding: 0.35rem 0.8rem; font-family: var(--mono); font-size: 0.7rem; color: var(--tenue);
}
.avanzamento { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; }
.binario { width: 130px; height: 7px; background: var(--linea); border-radius: 4px; overflow: hidden; }
.binario span { display: block; height: 100%; background: var(--verde); width: 0; transition: width 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .binario span { transition: none; } }

/* ---------- assistente in basso ---------- */
.assistente-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--carta); border-top: 1px solid var(--linea);
    box-shadow: 0 -3px 16px rgba(13,34,68,0.09);
}
.conversazione { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; max-height: 46vh; }
.testa-conversazione {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.9rem;
    border-bottom: 1px solid var(--linea-fine);
}
.titolo-conversazione { font-family: var(--display); font-weight: 600; font-size: 0.88rem; }
.contesto-conversazione { font-family: var(--mono); font-size: 0.68rem; color: var(--tenue); }
.chiudi { margin-left: auto; background: none; border: 0; color: var(--tenue); cursor: pointer; font-size: 0.9rem; }
.battute { overflow-y: auto; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.battuta { display: flex; gap: 0.5rem; align-items: flex-start; }
.battuta .faccia {
    width: 24px; height: 24px; border-radius: 5px; flex: none; display: grid; place-items: center;
    font-family: var(--mono); font-size: 0.6rem; font-weight: 500;
}
.battuta.agente .faccia { background: var(--laterizio); color: var(--su-laterizio); }
.battuta.tecnico { flex-direction: row-reverse; }
.battuta.tecnico .faccia { background: var(--blu-tenue); color: var(--blu); }
.bolla { font-size: 0.86rem; border-radius: 3px 10px 10px 10px; padding: 0.5rem 0.7rem; background: var(--fondo); max-width: 74%; }
.battuta.tecnico .bolla { background: var(--blu-tenue); border-radius: 10px 3px 10px 10px; }
.bolla p { margin: 0 0 0.5rem; }
.bolla p:last-child { margin-bottom: 0; }
.bolla .fonte {
    display: block; margin-top: 0.45rem; padding-top: 0.35rem; border-top: 1px solid var(--linea-fine);
    font-family: var(--mono); font-size: 0.66rem; color: var(--tenue);
}
.bolla.pensando { color: var(--tenue); font-style: italic; }
.suggerimenti { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0 0.9rem 0.6rem; }
.suggerimento {
    font: inherit; font-size: 0.76rem; background: var(--carta); border: 1px solid var(--linea);
    color: var(--inchiostro); border-radius: 16px; padding: 0.22rem 0.6rem; cursor: pointer;
}
.suggerimento:hover { border-color: var(--laterizio); color: var(--laterizio); }

.riga-invio { max-width: 900px; margin: 0 auto; display: flex; gap: 0.4rem; padding: 0.55rem 0.9rem; align-items: center; }
.riga-invio input {
    flex: 1; margin: 0; border-radius: 20px; padding: 0.45rem 0.9rem; font-size: 0.86rem;
    border: 1px solid var(--linea);
}
.allega-rapido {
    background: none; border: 1px solid var(--linea); border-radius: 50%; width: 32px; height: 32px;
    cursor: pointer; font-size: 0.9rem; flex: none; color: var(--inchiostro);
}
.allega-rapido:hover { border-color: var(--laterizio); }
.spedisci {
    font: inherit; font-size: 0.85rem; font-weight: 600; border: 0; border-radius: 20px;
    background: var(--laterizio); color: var(--su-laterizio); padding: 0.45rem 1rem; cursor: pointer;
}
.spedisci:hover { filter: brightness(1.08); }
.spedisci:disabled { opacity: 0.55; cursor: progress; }

/* ---------- tooltip normativo ---------- */
#tip {
    position: fixed; z-index: 60; max-width: 330px; display: none;
    background: var(--blu-scuro); color: #EAF0FA; border-radius: 4px;
    padding: 0.6rem 0.7rem; font-size: 0.79rem; line-height: 1.45;
    box-shadow: 0 6px 22px rgba(10,21,38,0.35);
}
#tip b { display: block; margin-bottom: 0.22rem; }
#tip .spiega { display: block; margin-top: 0.3rem; color: #C9D6EE; }
#tip .norma { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.67rem; color: #96AFD6; }

.velo-trascina {
    position: fixed; inset: 0; z-index: 50; background: rgba(20,49,92,0.55);
    display: grid; place-items: center; color: #fff; font-family: var(--display); font-size: 1.3rem;
}
.velo-trascina span { border: 3px dashed rgba(255,255,255,0.75); border-radius: 10px; padding: 2rem 3rem; }

/* ---------- tabelle ---------- */
.contenitore-tabella { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.8rem; }
th {
    text-align: left; font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--tenue); font-weight: 500;
    padding: 0.4rem 0.65rem 0.4rem 0; border-bottom: 1.5px solid var(--inchiostro); white-space: nowrap;
}
td { padding: 0.45rem 0.65rem 0.45rem 0; border-bottom: 1px solid var(--linea-fine); vertical-align: top; }
td a { color: var(--blu); }

.risultato-kb {
    background: var(--carta); border: 1px solid var(--linea); border-radius: 4px;
    padding: 0.7rem 0.85rem; margin-bottom: 0.6rem;
}
.risultato-kb h3 { font-family: var(--display); font-size: 0.98rem; margin: 0 0 0.15rem; }
.risultato-kb .fonte-kb { font-family: var(--mono); font-size: 0.68rem; color: var(--tenue); }
.risultato-kb p { margin: 0.4rem 0 0; font-size: 0.85rem; }
.risultato-kb .punteggio { float: right; font-family: var(--mono); font-size: 0.68rem; color: var(--tenue); }