/* CALYPSO ROOT — aspetto coerente con il gestionale (blu/bianco). */
:root {
  --blu-scuro: #0D2240;
  --blu: #1A4B7C;
  --blu-acceso: #2E7DD1;
  --blu-chiaro: #E8F1FA;
  --sfumato: linear-gradient(135deg, #0D2240 0%, #1A4B7C 100%);
  --verde: #059669; --verde-chiaro: #d1fae5;
  --giallo: #b45309; --giallo-chiaro: #fef3c7;
  --rosso: #b91c1c; --rosso-chiaro: #fee2e2;
  --grigio: #64748b; --bordo: #e2e8f0; --sfondo: #f4f6f9;
  --testo: #0f172a;
  --laterale: 220px;
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { background: var(--sfondo); color: var(--testo); font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: .92rem; }
a { color: var(--blu); }
a:hover { color: var(--blu-acceso); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82em; }
.mono { word-break: break-all; }

/* ── Struttura ───────────────────────────────────── */
.testata { position: sticky; top: 0; z-index: 50; height: 54px; background: var(--sfumato); color: #fff;
  display: flex; align-items: center; gap: .75rem; padding: 0 1rem; box-shadow: 0 2px 10px rgba(13,34,64,.25); }
.testata .marchio { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .3px; }
.testata .marchio img { width: 28px; height: 28px; border-radius: 6px; background: #fff; }
.testata .marchio small { font-weight: 400; opacity: .75; font-size: .75rem; }
.testata .spazio { flex: 1; }
.testata .chi { font-size: .8rem; text-align: right; line-height: 1.15; }
.testata .chi span { display: block; opacity: .75; font-size: .72rem; }
.testata .btn-testata { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: .4rem; padding: .3rem .6rem; font-size: .82rem; cursor: pointer; }
.testata .btn-testata:hover { background: rgba(255,255,255,.22); }
.apri-menu { display: none; }

.corpo { display: flex; min-height: calc(100vh - 54px); }
.laterale { width: var(--laterale); flex: 0 0 var(--laterale); background: #fff; border-right: 1px solid var(--bordo); padding: .75rem .5rem 2rem; }
.laterale .gruppo { font-size: .68rem; text-transform: uppercase; letter-spacing: .8px; color: var(--grigio); padding: .9rem .75rem .3rem; font-weight: 600; }
.laterale a { display: flex; align-items: center; gap: .6rem; padding: .48rem .75rem; border-radius: .45rem; color: #1e293b; text-decoration: none; font-size: .88rem; }
.laterale a i { font-size: 1rem; width: 1.2rem; text-align: center; color: var(--blu); }
.laterale a:hover { background: var(--blu-chiaro); }
.laterale a.attiva { background: var(--sfumato); color: #fff; }
.laterale a.attiva i { color: #fff; }
.laterale .conta { margin-left: auto; background: var(--rosso); color: #fff; border-radius: 999px; font-size: .68rem; padding: .05rem .45rem; font-weight: 700; }
.laterale a.attiva .conta { background: #fff; color: var(--rosso); }
.contenuto { flex: 1; min-width: 0; padding: 1.25rem 1.5rem 3rem; }

.titolo-pagina { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.titolo-pagina h1 { font-size: 1.35rem; margin: 0; font-weight: 700; color: var(--blu-scuro); display: flex; align-items: center; gap: .5rem; }
.titolo-pagina h1 i { color: var(--blu-acceso); }
.titolo-pagina .sotto { color: var(--grigio); font-size: .85rem; width: 100%; margin-top: -.35rem; }
.titolo-pagina .azioni { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.briciole { font-size: .8rem; color: var(--grigio); margin-bottom: .35rem; }
.briciole a { color: var(--grigio); }

/* ── Riquadri ────────────────────────────────────── */
.riquadro { background: #fff; border: 1px solid var(--bordo); border-radius: .7rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); margin-bottom: 1rem; }
.riquadro > .testa { padding: .7rem 1rem; border-bottom: 1px solid var(--bordo); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.riquadro > .testa h2 { font-size: .95rem; font-weight: 650; margin: 0; color: var(--blu-scuro); display: flex; align-items: center; gap: .45rem; }
.riquadro > .testa h2 i { color: var(--blu-acceso); }
.riquadro > .testa .destra { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.riquadro > .dentro { padding: 1rem; }
.riquadro > .dentro.stretto { padding: 0; }

.griglia { display: grid; gap: 1rem; }
.griglia.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.cifra { background: #fff; border: 1px solid var(--bordo); border-radius: .7rem; padding: .85rem 1rem; display: flex; gap: .8rem; align-items: center; text-decoration: none; color: inherit; }
.cifra:hover { border-color: var(--blu-acceso); }
.cifra .icona { width: 42px; height: 42px; border-radius: .6rem; display: grid; place-items: center; font-size: 1.25rem; background: var(--blu-chiaro); color: var(--blu); flex: 0 0 42px; }
.cifra .icona.verde { background: var(--verde-chiaro); color: var(--verde); }
.cifra .icona.rosso { background: var(--rosso-chiaro); color: var(--rosso); }
.cifra .icona.giallo { background: var(--giallo-chiaro); color: var(--giallo); }
.cifra .numero { font-size: 1.45rem; font-weight: 700; line-height: 1.1; color: var(--blu-scuro); }
.cifra .etichetta { font-size: .78rem; color: var(--grigio); }

/* ── Tabelle ─────────────────────────────────────── */
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.elenco { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.elenco th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--grigio); font-weight: 650; padding: .55rem .75rem; background: #f8fafc; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
table.elenco td { padding: .55rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
table.elenco tr:last-child td { border-bottom: 0; }
table.elenco tbody tr:hover td { background: #f8fbff; }
table.elenco td.num, table.elenco th.num { text-align: right; white-space: nowrap; }
table.elenco .principale { font-weight: 600; color: var(--blu-scuro); text-decoration: none; }
table.elenco .sotto { display: block; font-size: .76rem; color: var(--grigio); }
.vuoto { padding: 2rem 1rem; text-align: center; color: var(--grigio); }
.vuoto i { font-size: 1.8rem; display: block; margin-bottom: .4rem; opacity: .6; }

dl.scheda { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: .45rem .9rem; margin: 0; font-size: .87rem; }
dl.scheda dt { color: var(--grigio); font-weight: 500; }
dl.scheda dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── Etichette di stato ──────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.pill i { font-size: .8em; }
.pill.verde { background: var(--verde-chiaro); color: #065f46; }
.pill.giallo { background: var(--giallo-chiaro); color: #92400e; }
.pill.rosso { background: var(--rosso-chiaro); color: #991b1b; }
.pill.blu { background: var(--blu-chiaro); color: var(--blu); }
.pill.grigio { background: #f1f5f9; color: #475569; }
.pill.scuro { background: var(--blu-scuro); color: #fff; }
.pallino { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; flex: 0 0 .6rem; }
.pallino.verde { background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
.pallino.rosso { background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }
.pallino.giallo { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.pallino.grigio { background: #94a3b8; box-shadow: 0 0 0 3px #f1f5f9; }

/* ── Pulsanti e moduli ───────────────────────────── */
.btn { border-radius: .45rem; font-size: .86rem; padding: .42rem .85rem; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.btn-sm { font-size: .78rem; padding: .28rem .6rem; }
.btn-primary, .btn-blu { background: var(--sfumato); color: #fff; border: 1px solid var(--blu-scuro); }
.btn-primary:hover, .btn-blu:hover { background: var(--blu); color: #fff; }
.btn-chiaro { background: #fff; color: var(--blu); border: 1px solid #cbd5e1; }
.btn-chiaro:hover { background: var(--blu-chiaro); color: var(--blu-scuro); }
.btn-pericolo { background: #fff; color: var(--rosso); border: 1px solid #fca5a5; }
.btn-pericolo:hover { background: var(--rosso-chiaro); }
.btn-verde { background: var(--verde); color: #fff; border: 1px solid #047857; }
.btn-verde:hover { background: #047857; color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
label.etichetta, .form-label { font-size: .8rem; font-weight: 600; color: #334155; margin-bottom: .25rem; display: block; }
.form-control, .form-select, select, input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=search], textarea {
  border: 1px solid #cbd5e1; border-radius: .45rem; padding: .45rem .65rem; font-size: .9rem; width: 100%; background: #fff; color: var(--testo); min-height: 38px; }
.form-control:focus, select:focus, input:focus, textarea:focus { outline: 2px solid rgba(46,125,209,.35); border-color: var(--blu-acceso); }
.aiuto { font-size: .76rem; color: var(--grigio); margin-top: .2rem; }
.campi { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campi .tutta { grid-column: 1 / -1; }
.campi.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filtri { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; padding: .75rem 1rem; border-bottom: 1px solid var(--bordo); background: #fcfdff; border-radius: .7rem .7rem 0 0; }
.filtri > div { min-width: 140px; flex: 1 1 140px; }
.filtri > div.largo { flex: 2 1 220px; }
.filtri .spunta { display: flex; align-items: center; gap: .35rem; font-size: .82rem; white-space: nowrap; flex: 0 0 auto; min-width: 0; padding-bottom: .5rem; }
.spunta input { width: auto; min-height: 0; }
.riga-azioni { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.riga-azioni form { display: inline; margin: 0; }

/* ── Messaggi ────────────────────────────────────── */
.messaggio { border-radius: .6rem; padding: .7rem .9rem; margin-bottom: 1rem; display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; border: 1px solid; }
.messaggio i { font-size: 1.1rem; line-height: 1.2; }
.messaggio.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.messaggio.errore { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.messaggio.info { background: var(--blu-chiaro); border-color: #bfdbfe; color: var(--blu-scuro); }
.messaggio.attenzione { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.segreto-una-volta { background: #0f172a; color: #e2e8f0; border-radius: .6rem; padding: .9rem 1rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: 1px; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.segreto-una-volta .btn { font-family: inherit; letter-spacing: 0; }

/* ── Avvisi in dashboard ─────────────────────────── */
.avviso-riga { display: flex; gap: .7rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: inherit; }
.avviso-riga:last-child { border-bottom: 0; }
.avviso-riga:hover { background: #f8fbff; text-decoration: none; }
.avviso-riga:hover * { text-decoration: none; }
.cifra:hover, .scheda-inst:hover, .scheda-inst:hover * { text-decoration: none; }
.avviso-riga .chi { font-weight: 600; color: var(--blu-scuro); min-width: 0; }
.avviso-riga .cosa { color: #334155; font-size: .84rem; }
.avviso-riga .quando { margin-left: auto; color: var(--grigio); font-size: .76rem; white-space: nowrap; }

.schede-inst { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.scheda-inst { background: #fff; border: 1px solid var(--bordo); border-radius: .7rem; padding: .8rem .9rem; text-decoration: none; color: inherit; display: block; border-left: 4px solid #94a3b8; }
.scheda-inst.verde { border-left-color: #10b981; } .scheda-inst.giallo { border-left-color: #f59e0b; } .scheda-inst.rosso { border-left-color: #ef4444; }
.scheda-inst:hover { box-shadow: 0 4px 14px rgba(13,34,64,.08); }
.scheda-inst .nome { font-weight: 650; color: var(--blu-scuro); display: flex; align-items: center; gap: .45rem; }
.scheda-inst .dom { font-size: .76rem; color: var(--grigio); margin: .1rem 0 .45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheda-inst .righe { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ── Editor dei documenti ────────────────────────── */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--bordo); border-radius: .6rem; overflow: hidden; background: #fff; }
.editor textarea { border: 0; border-radius: 0; min-height: 520px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .84rem; line-height: 1.55; resize: vertical; padding: .9rem; border-right: 1px solid var(--bordo); }
.editor .anteprima { padding: .9rem 1.1rem; max-height: 620px; overflow: auto; }
.editor .barra { grid-column: 1 / -1; display: flex; gap: .35rem; padding: .4rem .5rem; border-bottom: 1px solid var(--bordo); background: #f8fafc; flex-wrap: wrap; align-items: center; }
.editor .barra .btn { padding: .2rem .5rem; }
.editor .barra .stato-anteprima { margin-left: auto; font-size: .74rem; color: var(--grigio); }
.testo-doc { font-size: .9rem; line-height: 1.6; color: #1e293b; }
.testo-doc h1 { font-size: 1.35rem; color: var(--blu-scuro); margin: .2rem 0 .7rem; }
.testo-doc h2 { font-size: 1.08rem; color: var(--blu-scuro); margin: 1.1rem 0 .45rem; }
.testo-doc h3 { font-size: .98rem; margin: .9rem 0 .4rem; }
.testo-doc p { margin: 0 0 .7rem; }
.testo-doc ul, .testo-doc ol { margin: 0 0 .7rem; padding-left: 1.4rem; }
.testo-doc blockquote { margin: 0 0 .8rem; padding: .55rem .85rem; border-left: 4px solid #f59e0b; background: #fffbeb; border-radius: 0 .4rem .4rem 0; }
.testo-doc blockquote p:last-child { margin: 0; }
.testo-doc table { border-collapse: collapse; width: 100%; margin: 0 0 .8rem; font-size: .84rem; }
.testo-doc th, .testo-doc td { border: 1px solid var(--bordo); padding: .35rem .5rem; text-align: left; vertical-align: top; }
.testo-doc th { background: #f8fafc; }
.testo-doc pre { background: #0f172a; color: #e2e8f0; padding: .7rem; border-radius: .4rem; overflow: auto; }
.testo-doc code { background: #f1f5f9; padding: .05rem .3rem; border-radius: .25rem; }
.testo-doc pre code { background: transparent; padding: 0; }
.testo-doc hr { border: 0; border-top: 1px solid var(--bordo); margin: 1rem 0; }
mark.segnaposto { background: #fde68a; color: #78350f; border-radius: .2rem; padding: 0 .15rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; }

.diff { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.5; }
.diff div { padding: .05rem .6rem; white-space: pre-wrap; word-break: break-word; border-left: 3px solid transparent; }
.diff .piu { background: #ecfdf5; border-left-color: #10b981; }
.diff .meno { background: #fef2f2; border-left-color: #ef4444; text-decoration: line-through; text-decoration-color: rgba(185,28,28,.45); }
.diff .uguale { color: #64748b; }
.diff .salto { color: #94a3b8; text-align: center; font-style: italic; background: #f8fafc; }

.lista-versioni a { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: inherit; }
.lista-versioni a.attiva { background: var(--blu-chiaro); }
.lista-versioni a:hover { background: #f8fbff; }

.passi { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.passi span { font-size: .78rem; padding: .25rem .65rem; border-radius: 999px; background: #e2e8f0; color: #475569; }
.passi span.fatto { background: var(--verde-chiaro); color: #065f46; }
.passi span.ora { background: var(--sfumato); color: #fff; }

/* ── Accesso ─────────────────────────────────────── */
.pagina-accesso { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; background: radial-gradient(1200px 600px at 10% 0%, #1A4B7C 0%, #0D2240 60%); }
.scatola-accesso { width: 100%; max-width: 420px; background: #fff; border-radius: .9rem; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; }
.scatola-accesso .testa { background: var(--sfumato); color: #fff; padding: 1.3rem 1.5rem; display: flex; gap: .8rem; align-items: center; }
.scatola-accesso .testa img { width: 44px; height: 44px; border-radius: .6rem; background: #fff; }
.scatola-accesso .testa h1 { font-size: 1.15rem; margin: 0; }
.scatola-accesso .testa p { margin: 0; font-size: .8rem; opacity: .8; }
.scatola-accesso .dentro { padding: 1.4rem 1.5rem 1.5rem; }
.scatola-accesso .campo { margin-bottom: .9rem; }
.scatola-accesso .btn { width: 100%; justify-content: center; padding: .6rem; font-size: .95rem; }
.codice-grande { font-size: 1.6rem !important; letter-spacing: .5rem; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; }
.qr-totp { display: grid; place-items: center; padding: .6rem; background: #fff; border: 1px solid var(--bordo); border-radius: .6rem; margin: .6rem auto; width: max-content; }
.piede-accesso { text-align: center; color: rgba(255,255,255,.65); font-size: .74rem; margin-top: 1rem; }

/* ── Dialogo (al posto di alert/confirm) ─────────── */
#rootDialogo { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(13,34,64,.45); align-items: center; justify-content: center; padding: 1rem; }
#rootDialogo.aperto { display: flex; }
#rootDialogo .scatola { background: #fff; border-radius: .75rem; max-width: 32rem; width: 100%; box-shadow: 0 18px 45px rgba(13,34,64,.3); overflow: hidden; }
#rootDialogo .testa { background: var(--sfumato); color: #fff; padding: .75rem 1.1rem; font-weight: 600; display: flex; gap: .5rem; align-items: center; }
#rootDialogo .testa.errore { background: linear-gradient(135deg,#991b1b,#b91c1c); }
#rootDialogo .testa.ok { background: linear-gradient(135deg,#065f46,#059669); }
#rootDialogo .corpo-d { padding: 1rem 1.1rem; white-space: pre-line; line-height: 1.5; max-height: 60vh; overflow: auto; }
#rootDialogo .campo-d { padding: 0 1.1rem 1rem; display: none; }
#rootDialogo .piede { padding: .75rem 1.1rem; background: #f8fafc; display: flex; justify-content: flex-end; gap: .5rem; }

.nascosto { display: none !important; }
.testo-grigio { color: var(--grigio); }
.piccolo { font-size: .78rem; }
.a-destra { text-align: right; }
.spazio-sopra { margin-top: 1rem; }
.senza-margine { margin: 0; }
.tronca { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.schede-nav { display: flex; gap: .25rem; border-bottom: 1px solid var(--bordo); margin-bottom: 1rem; overflow-x: auto; }
.schede-nav a { padding: .55rem .9rem; text-decoration: none; color: #475569; border-bottom: 2px solid transparent; white-space: nowrap; font-size: .87rem; }
.schede-nav a.attiva { color: var(--blu-scuro); border-bottom-color: var(--blu-acceso); font-weight: 600; }

/* ── Schermi stretti ─────────────────────────────── */
@media (max-width: 1180px) {
  .griglia.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia.g-2-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  :root { --laterale: 196px; }
  .contenuto { padding: 1rem 1rem 3rem; }
  .griglia.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor { grid-template-columns: minmax(0, 1fr); }
  .editor textarea { border-right: 0; border-bottom: 1px solid var(--bordo); min-height: 380px; }
  .testata .chi { display: none; }
  .solo-largo { display: none; }
}
@media (max-width: 880px) {
  .apri-menu { display: inline-flex; }
  .laterale { position: fixed; top: 54px; bottom: 0; left: 0; z-index: 40; transform: translateX(-105%); transition: transform .18s; overflow-y: auto; box-shadow: 4px 0 18px rgba(0,0,0,.12); }
  body.menu-aperto .laterale { transform: none; }
  .griglia.g2, .griglia.g3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .griglia.g4 { grid-template-columns: minmax(0, 1fr); }
  .campi, .campi.c3 { grid-template-columns: minmax(0, 1fr); }
  dl.scheda { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  dl.scheda dd { margin-bottom: .45rem; }
  .titolo-pagina .azioni { margin-left: 0; }
  .testata .marchio small { display: none; }
  table.elenco .facoltativa { display: none; }
}
@media print {
  .testata, .laterale, .no-stampa, .titolo-pagina .azioni { display: none !important; }
  .contenuto { padding: 0; }
  body { background: #fff; }
  .riquadro { border: 0; box-shadow: none; }
}