/* ==========================================================================
   UI kit alberghi.it — foglio di stile dei componenti.

   ORIGINE: estratto testualmente dal blocco <style> di library/UIKit/componenti.html,
   che a sua volta e' la copia di app/assets/css/ui-kit.css del CRM.
   NON modificarlo a mano: le divergenze fra un'app e l'altra sono il modo piu'
   rapido di perdere il sistema. Se un componente manca, si aggiunge nel kit e
   si riestrae questo file.

   Inter e remixicon sono serviti dal progetto (assets/vendor/): la CSP di
   questa applicazione e' `style-src 'self'` e non consente CDN esterni.

   Le regole di impaginazione delle singole pagine stanno in app.css, non qui.
   ========================================================================== */


/* ==========================================================================
   Questo foglio e' preso da app/assets/css/ui-kit.css: non modificarlo qui,
   la pagina si rigenera con "npm run kit".
   ========================================================================== */
/* ==========================================================================
   CRM alberghi.it — kit grafico
   Sidebar scura, superficie chiara, card bianche, accento blu, pastiglie di
   stato tenui, tabelle dense. E' la trasposizione fedele del prototipo in
   library/crm.html: le classi hanno gli stessi nomi, cosi' il prototipo
   resta leggibile come riferimento.
   ========================================================================== */



:root {
  --bg: #F4F7FA; --card: #FFFFFF;
  --side: #263544; --side-deep: #1F2C39; --side-txt: #A9B7D0; --side-line: #33455A;
  --pri: #46C0DF; --pri-dark: #24ACCE; --pri-testo: #1A7C95;
  --pri-soft: #EFFBFE; --pri-line: #C0ECF7;
  --ink: #1D2630; --bodi: #3F4D5A; --mut: #8A98A8; --faint: #AAB6C4;
  --line: #E7ECF2; --line-2: #EEF2F7;
  --r: 8px; --r-sm: 6px; --r-lg: 10px;
  --sh: 0 1px 3px rgba(29,38,48,.05), 0 1px 2px rgba(29,38,48,.03);
  --sh-md: 0 4px 14px rgba(29,38,48,.09);
  --sh-lg: 0 12px 40px rgba(29,38,48,.17);
  --row: 46px;
}

/* Inter e' servito dal progetto, non da un CDN esterno. */


* { box-sizing: border-box; }
html { font-size: 14px; }
/* Lo scorrimento orizzontale, quando serve, avviene dentro il contenitore
   che lo richiede (una tabella), mai sulla pagina intera. */
html, body { overflow-x: hidden; }

/* Le pagine interne: il documento non scorre, scorre il contenuto.
   La classe la mette il layout `default` (non quello di accesso, che deve
   poter scorrere). Senza, basta che il guscio venga alto un pixel piu' della
   finestra perche' compaia una seconda barra di scorrimento accanto a quella
   del contenuto. */
html.app, body.app { height: 100%; overflow: hidden; }
body {
  font-family: Inter, system-ui, sans-serif;
  color: var(--bodi);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.006em;
  margin: 0;
}
h1, h2, h3, h4 { color: var(--ink); margin: 0; }
::selection { background: var(--pri-line); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------ bottoni ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 13px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 500; color: var(--bodi);
  cursor: pointer; white-space: nowrap; font-family: inherit; text-decoration: none;
  transition: background .13s, border-color .13s, color .13s, box-shadow .13s;
}
.btn:hover { background: #F7FAFD; border-color: #D8E1EB; color: var(--ink); }
.btn:active { background: #F0F4F9; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26,124,149,.30); border-color: var(--pri); }
.btn svg { width: 15px; height: 15px; flex: none; }
/* Etichetta bianca sull'accento, per scelta: il contrasto e' 2,13:1, sotto la
   soglia di leggibilita'. Al passaggio del mouse il fondo si scurisce e sale
   a 2,86:1. Se un giorno servisse recuperare leggibilita' senza cambiare il
   colore del marchio, la strada e' scurire il fondo del solo pulsante. */
.btn-pri { background: var(--pri); border-color: var(--pri); color: #fff; box-shadow: 0 1px 2px rgba(70,192,223,.35); }
.btn-pri:hover { background: var(--pri-dark); border-color: var(--pri-dark); color: #fff; }
.btn-pri svg { color: #fff; }
.btn-danger { color: #D13B4E; border-color: #F5CDD3; background: #fff; }
.btn-danger:hover { background: #FDF2F4; border-color: #EFB3BC; color: #B92E40; }
.btn-ok { color: #17976A; border-color: #BFE5D3; }
.btn-ok:hover { background: #EDF9F3; border-color: #9BD8BC; color: #0F7B54; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: #EEF3F9; border-color: transparent; }
.btn-sm { height: 28px; padding: 0 9px; font-size: 12.5px; gap: 5px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-ic { width: 34px; padding: 0; }
.btn-ic.btn-sm { width: 28px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: #fff; border-color: var(--line); color: var(--bodi); }
.btn-w { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); }
.btn-w:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32); color: #fff; }

/* ------------------------------ campi ------------------------------ */
.input, .select {
  height: 34px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  padding: 0 11px; font-size: 13px; color: var(--ink); width: 100%; font-family: inherit;
}
textarea.input { height: auto; padding: 8px 11px; line-height: 1.6; }
.input:hover, .select:hover { border-color: #D8E1EB; }
.input:focus, .select:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(26,124,149,.18); }
.input::placeholder { color: var(--faint); }
.input[aria-invalid="true"] { border-color: #E4899A; }
.select {
  appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%238A98A8' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='m6 8.5 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.lbl { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.hint { font-size: 11.5px; color: var(--mut); margin-top: 5px; }
.hint-bad { color: #CB3549; }
.cerca { position: relative; }
.cerca > svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--faint); pointer-events: none;
}
.cerca .input { padding-left: 32px; }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--pri); cursor: pointer; }

/* ------------------------------ interruttori ------------------------------ */
/* Scelte binarie e scelte fra alternative hanno lo stesso aspetto — una
   levetta — ma comportamenti diversi: la casella si accende e si spegne da
   sola, l'alternativa spegne le sorelle. E' l'input nativo sotto a fare la
   differenza, e a portarsi dietro tastiera e lettori di schermo. */
.sw {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font-size: 12.5px; color: var(--bodi); line-height: 1.35; padding: 2px 0;
}
.sw input {
  /* Invisibile ma presente: riceve il fuoco, si comanda da tastiera,
     e i lettori di schermo lo annunciano per quello che e'. */
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}

.sw-l {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 20px;
  background: #D8E1EB; border: 1px solid #CBD5E1;
  transition: background .15s, border-color .15s;
}
.sw-l::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(29,38,48,.28);
  transition: transform .15s;
}

.sw:hover .sw-l { background: #C7D3E0; }
.sw input:checked + .sw-l { background: var(--pri); border-color: var(--pri); }
.sw:hover input:checked + .sw-l { background: var(--pri-dark); border-color: var(--pri-dark); }
.sw input:checked + .sw-l::after { transform: translateX(14px); }
.sw input:focus-visible + .sw-l { box-shadow: 0 0 0 3px rgba(26,124,149,.30); }

/* Le alternative si distinguono a colpo d'occhio dalle caselle: la levetta e'
   tonda dentro, come il pallino di sempre. */
.sw-r .sw-l::after { width: 14px; height: 14px; top: 2px; left: 3px; }
.sw-r input:checked + .sw-l::after { transform: translateX(13px); }

.sw input:disabled + .sw-l { opacity: .45; }
.sw:has(input:disabled) { cursor: not-allowed; color: var(--faint); }

.sw-t { min-width: 0; }
.sw-t b { display: block; font-weight: 500; color: var(--ink); }
.sw-t span { display: block; font-size: 11.5px; color: var(--mut); margin-top: 3px; line-height: 1.4; }

/* Variante compatta, per le righe di tabella: resta una levetta, ma non ruba
   mezza colonna. */
.sw-mini .sw-l { width: 26px; height: 16px; }
.sw-mini .sw-l::after { width: 12px; height: 12px; top: 1px; left: 1px; }
.sw-mini input:checked + .sw-l::after { transform: translateX(10px); }
.sw-mini.sw-r .sw-l::after { width: 10px; height: 10px; top: 2px; left: 3px; }
.sw-mini.sw-r input:checked + .sw-l::after { transform: translateX(9px); }

/* Piu' interruttori in fila, con l'aria giusta fra l'uno e l'altro. Un
   gruppo di scelte non e' una lista di righe: se stanno troppo vicine si
   legge un blocco unico invece delle alternative fra cui si sceglie. */
.sw-elenco { display: flex; flex-direction: column; gap: 14px; margin-top: 2px; }
.sw-elenco.affiancati { flex-direction: row; flex-wrap: wrap; gap: 12px 26px; }

/* Un gruppo di interruttori che chiude un blocco di campi: una riga sottile
   sopra lo stacca, cosi' non si legge come la nota dell'ultimo campo. */
.sw-coda { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }

/* Le scelte che dipendono da un'alternativa accesa: rientrate e appoggiate a
   una riga verticale, cosi' si legge che stanno **sotto** quella e non
   accanto alle sue sorelle. Senza, la seconda lista sembra la continuazione
   della prima e non si capisce piu' cosa si sta scegliendo. */
.sw-figli {
  margin: 12px 0 0 16px; padding: 2px 0 2px 18px;
  border-left: 2px solid var(--line);
}
.sw-figli-t {
  display: block; font-size: 11px; font-weight: 600; color: var(--mut);
  margin-bottom: 10px;
}

/* ------------------------------ sezioni ------------------------------ */
/* Titolo di una sezione dentro un pannello o una card. Non e' l'etichetta di
   un campo e non deve somigliarle: maiuscoletto spaziato, con una tacca di
   colore davanti, e abbastanza aria sotto da non sembrare l'etichetta del
   primo campo che segue. */
.sez { border-top: 1px solid var(--line-2); padding-top: 16px; }
.sez-t {
  display: flex; align-items: center; gap: 8px; margin-bottom: 11px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
}
.sez-t::before {
  content: ''; flex: none; width: 3px; height: 13px; border-radius: 2px;
  background: var(--pri);
}
/* Riga di spiegazione sotto al titolo: dice cosa si decide qui dentro. */
.sez-s { font-size: 11.5px; color: var(--mut); margin: -7px 0 10px; }

/* Il piede di un pannello tiene a sinistra l'interruttore di attivazione:
   e' uno stato, non un comando, e non va confuso con Annulla e Salva. */
.piede-sw { margin-right: 6px; }

/* ------------------------------ card ------------------------------ */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); }
.card-h {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--line-2); flex-wrap: wrap;
}
.card-t { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.card-s { font-size: 11.5px; color: var(--mut); margin-top: 2px; font-weight: 400; }
.card-b { padding: 16px; }

/* ------------------------------ tabella ------------------------------ */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
/* Una tabella densa non si comprime all'infinito: sotto la sua larghezza
   minima il contenitore scorre in orizzontale, cosi' le colonne restano
   leggibili invece di ridursi a due caratteri l'una.
   ATTENZIONE: con `table-layout: fixed` la larghezza minima deve superare la
   somma delle larghezze dichiarate, altrimenti le colonne che non ne hanno
   una si riducono a zero e spariscono senza dare errore. */
.tbl-min-sm { min-width: 520px; }
.tbl-min { min-width: 720px; }
.tbl-min-lg { min-width: 1000px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 6; background: #FAFBFD; text-align: left; font-size: 12px;
  font-weight: 600; color: #64748B; padding: 0 12px; height: 40px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl tbody td {
  padding: 0 12px; height: var(--row); border-bottom: 1px solid var(--line-2);
  font-size: 13px; vertical-align: middle; color: var(--bodi);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tfoot td {
  padding: 0 12px; height: 42px; background: #FAFBFD; border-top: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--ink);
}
.tbl tbody tr:hover td { background: #F7FAFD; }
.tbl tbody tr.on td { background: var(--pri-soft); }
.tbl tbody tr.on:hover td { background: #DCF5FB; }
.tbl .r { text-align: right; }
.tbl .c { text-align: center; }
.tbl td.tr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* modalita' compatta: piu' righe a schermo quando la tabella e' lunga */
.dense { --row: 36px; }
.dense .tbl tbody td { font-size: 12.5px; }
.dense .rec-av { width: 22px !important; height: 22px !important; font-size: 9px !important; }

/* contenitore di una tabella che occupa tutta l'altezza disponibile */
.wrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh);
  overflow: hidden; display: flex; flex-direction: column; min-height: 0;
}

/* Riga di un record spento: si vede a meta'.
   E' una regola del kit e non una classe che ogni pagina si ricorda di
   mettere, perche' "questa e' disattivata" e' la stessa informazione in tutte
   le tabelle e non puo' dipendere da chi ha scritto la pagina.
   Al passaggio del mouse torna piena: una riga spenta si guarda proprio
   quando la si vuole riattivare, ed e' il momento peggiore per leggerla a
   meta'. */
.tbl tbody tr.spenta td { opacity: .5; transition: opacity .12s; }
.tbl tbody tr.spenta:hover td { opacity: 1; }

/* azioni di riga: compaiono al passaggio del mouse, senza spostare il testo */
.row-act { opacity: 0; transition: opacity .12s; }
tr:hover .row-act, tr.on .row-act { opacity: 1; }
/* Da tastiera devono restare raggiungibili anche senza mouse. */
.row-act:focus-within { opacity: 1; }
/* intestazione di colonna ordinabile */
.ths { cursor: pointer; user-select: none; }
.ths .in {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px;
  margin: 0 -7px; border-radius: 5px;
}
.ths:hover .in { background: #EDF2F8; color: var(--ink); }
.ths.on { color: var(--pri-testo); }
.ths.on:hover .in { background: var(--pri-soft); color: var(--pri-testo); }
.ths i { font-style: normal; font-size: 9px; opacity: 0; transition: opacity .12s; }
.ths:hover i { opacity: .45; }
.ths.on i { opacity: 1; }

/* La colonna si ridimensiona dal bordo destro della sua intestazione.
   Ogni confine ha **due** prese, una per lato: `.rz` sul bordo destro di una
   colonna e `.rz-sx` sul bordo sinistro della successiva comandano lo stesso
   bordo. Servono entrambe perche' una presa non puo' sporgere: ogni `th` e'
   `sticky`, quindi apre un contesto di impilamento suo, e quel che esce dai
   suoi bordi finisce sotto la colonna accanto per quanto alto sia il suo
   `z-index`. Con una presa sola, chi mira alla riga di divisione la manca di
   un pixel e trascina la tabella invece di ridimensionarla. */
.rz {
  position: absolute; top: 0; right: 0; width: 11px; height: 100%;
  cursor: col-resize; z-index: 8; touch-action: none;
}
.rz-sx { right: auto; left: 0; width: 9px; }
.rz::after {
  content: ''; position: absolute; right: 0; top: 6px; bottom: 6px; width: 2px;
  background: transparent; transition: background .12s;
}
.rz-sx::after { right: auto; left: 0; }
.rz:hover::after, .rz.on::after { background: var(--pri); }

/* Mentre si trascina, il puntatore resta quello del ridimensionamento anche
   se esce dalla maniglia, e niente si seleziona sotto la mano. */
body.sta-ridimensionando { cursor: col-resize; user-select: none; }
body.sta-ridimensionando * { cursor: col-resize !important; }

/* Colonna di riempimento: raccoglie lo spazio che avanza quando nessuna
   colonna e' piu' elastica. Senza, il browser lo spalma su tutte — dichiari
   260 e te ne rende 281 — e la colonna non segue il puntatore. */
.tbl .col-riempi { padding: 0; }

/* contenitore che scorre: la tabella larga si sposta anche trascinandola */
.tbl-scorri { overflow-x: auto; }
.tbl-scorri.pan { cursor: grab; }
.tbl-scorri.trascino { cursor: grabbing; user-select: none; }

/* riga del pannello di riordino delle colonne */
.col-riga {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border: 1px solid transparent; border-radius: 7px; background: #fff;
}
.col-riga:hover { background: #F7FAFD; }
.col-riga.presa { opacity: .45; }
.col-riga.mira { border-color: var(--pri); background: var(--pri-soft); }
.col-presa { cursor: grab; color: #AAB6C4; font-size: 13px; line-height: 1; padding: 0 2px; }
/* Una colonna che sta sempre in fondo non si prende: la presa lo deve dire. */
.col-riga.ferma { background: #FAFBFD; }
.col-riga.ferma .col-presa { cursor: default; color: #D3DBE4; }
.col-riga:active .col-presa { cursor: grabbing; }

/* piede della tabella: conteggi, righe per pagina, paginazione */
.tfoot {
  display: flex; align-items: center; gap: 10px 14px; padding: 10px 12px;
  border-top: 1px solid var(--line); background: #FAFBFD; font-size: 12.5px;
  color: var(--mut); flex: none; flex-wrap: wrap;
}
@media (min-width: 640px) { .tfoot { padding: 10px 14px; } }
.pg {
  min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--line); background: #fff;
  border-radius: 5px; font-size: 12.5px; font-weight: 500; color: var(--bodi); cursor: pointer;
  font-family: inherit;
}
.pg:hover:not(:disabled) { background: #F0F4F9; border-color: #D8E1EB; }
.pg.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.pg:disabled { opacity: .4; cursor: not-allowed; }

/* ------------------------------ stati ------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 9px;
  border-radius: 20px; border: 1px solid; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.pill.nodot::before { display: none; }
.p-ok { color: #15855C; background: #E9F8F1; border-color: #C0E8D6; }
.p-warn { color: #B0700A; background: #FFF6E6; border-color: #FADFAE; }
.p-bad { color: #CB3549; background: #FDEDEF; border-color: #F6C7CE; }
.p-info { color: #1A7C95; background: #EFFBFE; border-color: #C0ECF7; }
.p-mute { color: #5D6B7B; background: #F1F5F9; border-color: #DFE6EE; }
.p-viola { color: #6B4BD1; background: #F2EEFD; border-color: #DACFF7; }

.psel {
  height: 24px; border: 1px solid; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  font-family: inherit; padding: 0 24px 0 10px; cursor: pointer; max-width: 100%; appearance: none;
  background-repeat: no-repeat; background-position: right 7px center;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 8.5 4 4 4-4'/%3E%3C/svg%3E");
}
.psel:focus { outline: none; box-shadow: 0 0 0 3px rgba(26,124,149,.26); }
.psel[disabled] { opacity: .55; cursor: default; }
.s-ok { color: #15855C; background-color: #E9F8F1; border-color: #C0E8D6; }
.s-warn { color: #B0700A; background-color: #FFF6E6; border-color: #FADFAE; }
.s-bad { color: #CB3549; background-color: #FDEDEF; border-color: #F6C7CE; }
.s-info { color: #1A7C95; background-color: #EFFBFE; border-color: #C0ECF7; }
.s-mute { color: #5D6B7B; background-color: #F1F5F9; border-color: #DFE6EE; }
.s-viola { color: #6B4BD1; background-color: #F2EEFD; border-color: #DACFF7; }

/* ------------------------------ filtri ------------------------------ */
.seg {
  display: inline-flex; background: #EDF1F6; border-radius: var(--r); padding: 3px; gap: 2px;
  /* Su schermi stretti le voci vanno a capo invece di sfondare la riga. */
  flex-wrap: wrap; max-width: 100%;
}
.seg-b {
  height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: #64748B; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; font-weight: 500;
  border: 0; background: none; font-family: inherit;
}
.seg-b:hover { color: var(--ink); }
.seg-b.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(29,38,48,.11); }
.seg-b.vuoto { color: #B4C0CD; }
.seg-n {
  font-size: 11px; font-weight: 600; color: #9AA7B5; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.8); border-radius: 20px; padding: 1px 6px; min-width: 19px; text-align: center;
}
.seg-b.on .seg-n { background: #EDF1F6; color: #64748B; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }
.d-ok { background: #22A06B; } .d-warn { background: #D99413; } .d-bad { background: #DB4B60; }
.d-info { background: #46C0DF; } .d-mute { background: #9AA7B5; } .d-viola { background: #7B5CE0; }

.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  /* Cinque schede non stanno in 768px: si scorre in orizzontale. */
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; }
.tab {
  height: 38px; padding: 0 14px; font-size: 13px; font-weight: 500; color: var(--mut); background: none;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit;
  margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--pri-testo); border-bottom-color: var(--pri); font-weight: 600; }
.tab-n { font-size: 11px; font-weight: 600; background: #EDF1F6; color: #64748B; border-radius: 20px; padding: 1px 6px; }
.tab.on .tab-n { background: var(--pri-soft); color: var(--pri-testo); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 20px;
  border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 500; color: var(--bodi);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.chip:hover { border-color: #D8E1EB; background: #F7FAFD; }
.chip.on { background: var(--pri-soft); border-color: var(--pri-line); color: var(--pri-testo); }

/* Campo a chip. Il contenitore imita .input ma cresce in altezza: le chip
   vanno a capo invece di scorrere in orizzontale, che su un tablet
   nasconderebbe proprio quelle scelte per ultime. */
.chips { position: relative; }
.chips-c {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  min-height: 34px; padding: 4px 8px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; cursor: text;
}
.chips-c:hover { border-color: #D8E1EB; }
.chips-c.on { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(26,124,149,.18); }
.chips-off .chips-c { background: #F7F9FC; cursor: default; opacity: .7; }

.chip-sel { cursor: default; padding-right: 4px; background: var(--pri-soft);
            border-color: var(--pri-line); color: var(--pri-testo); }
/* Nata al volo e non ancora salvata: il bordo tratteggiato lo dice senza parole. */
.chip-nuovo { border-style: dashed; }
/* La chip che il prossimo Backspace toglierebbe. */
.chip-via { background: #FDEDEF; border-color: #E4899A; color: #CB3549; }
.chip-x {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer; opacity: .55;
}
.chip-x svg { width: 11px; height: 11px; }
.chip-x:hover { opacity: 1; background: rgba(0,0,0,.07); }
.chip-x:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; opacity: 1; }

.chips-in {
  flex: 1 1 90px; min-width: 90px; height: 24px; border: 0; outline: none;
  background: none; font-family: inherit; font-size: 13px; color: var(--ink); padding: 0 2px;
}
.chips-in::placeholder { color: var(--faint); }
.chips-max { font-size: 11px; color: var(--faint); margin-left: auto; }

.chips-m { left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto; min-width: 0; }
.chips-o { height: auto; min-height: 32px; padding: 5px 9px; flex-wrap: wrap; }
.chips-o.on { background: #F2F6FB; color: var(--ink); }
.chips-o svg { width: 14px; height: 14px; flex: none; }
.chips-o-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips-o-n { font-size: 11px; color: var(--mut); margin-left: auto; padding-left: 8px; white-space: nowrap; }
.chips-crea { color: var(--pri-testo); font-weight: 500; }
.chips-stato { padding: 9px; font-size: 12px; color: var(--mut); }
.chips-stato-p { border-top: 1px solid var(--line-2); }

/* Sotto i 768px la nota del suggerimento va a capo invece di schiacciare
   l'etichetta: e' l'etichetta che si deve leggere per intero. */
@media (max-width: 480px) {
  .chips-o-n { margin-left: 0; padding-left: 0; flex-basis: 100%; }
}

/* ------------------------------ grafici ------------------------------ */
/* La cornice del grafico e' volutamente povera: titolo, area di disegno,
   niente bordi interni. Tutto il peso visivo deve stare sui dati. */
.graf { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.graf-h { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.graf-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.graf-s { font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.graf-c { position: relative; width: 100%; min-width: 0; }
/* Fuori dal flusso: un canvas largo 700px, lasciato dentro, diventa la
   larghezza minima della card e le impedisce di stringersi su schermo
   stretto — proprio dove servirebbe. */
.graf-tela { position: absolute; inset: 0; }
/* Il posto resta occupato mentre la libreria arriva: un riquadro che cambia
   altezza a caricamento finito fa saltare tutto quello che sta sotto. */
.graf-attesa {
  position: absolute; inset: 0; border-radius: var(--r-sm);
  background: linear-gradient(90deg, #F4F7FA 25%, #EDF2F7 37%, #F4F7FA 63%);
  background-size: 400% 100%; animation: graf-onda 1.4s ease-in-out infinite;
}
@keyframes graf-onda { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { .graf-attesa { animation: none; } }

/* Sparkline: vive dentro una cella di tabella, quindi non ha cornice ne' titolo. */
.graf-nuda { gap: 0; }
.graf-spark { width: 92px; height: 26px; }

/* Griglia di riquadri: sotto i 768px una colonna sola. Due grafici affiancati
   su un tablet in verticale sarebbero due grafici illeggibili. */
.graf-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.graf-griglia > * { min-width: 0; }
@media (min-width: 1024px) { .graf-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------ sidebar ------------------------------ */
.nav-g {
  padding: 16px 20px 7px; font-size: 10.5px; font-weight: 600; color: #6D839C;
  text-transform: uppercase; letter-spacing: .08em;
}
.nav-a {
  position: relative; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 20px;
  color: var(--side-txt); font-size: 13px; font-weight: 500; text-decoration: none;
}
.nav-a svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.nav-a:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-a.on { color: #fff; background: rgba(26,124,149,.18); font-weight: 600; }
.nav-a.on::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--pri);
}
.nav-a.on svg { color: var(--pri); opacity: 1; }
.nav-b {
  margin-left: auto; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  border-radius: 20px; padding: 2px 7px; min-width: 20px; text-align: center;
}
.b-pri { background: var(--pri); color: #fff; }
.b-red { background: #DB4B60; color: #fff; }
.b-gray { background: rgba(255,255,255,.13); color: #C3CFDE; }

/* ------------------------------ vari ------------------------------ */
.rec {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%; text-decoration: none;
  color: var(--ink); font-weight: 500; min-width: 0;
}
.rec:hover .rec-n { color: var(--pri-testo); text-decoration: underline; text-underline-offset: 2px; }
.rec-av {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: #fff; font-weight: 600; font-size: 10px;
}
.rec-t { min-width: 0; line-height: 1.25; }
.rec-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-s { font-size: 11px; color: var(--mut); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbd {
  font-family: inherit; font-size: 10.5px; font-weight: 500; border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; color: var(--mut); background: #fff;
}
.link { color: var(--pri-testo); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; text-underline-offset: 2px; }
.sep { width: 1px; height: 20px; background: var(--line); flex: none; }
.brd { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut); }
.brd a { color: var(--mut); text-decoration: none; }
.brd a:hover { color: var(--pri-testo); }

.menu {
  position: absolute; z-index: 40; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-lg); padding: 5px; min-width: 200px;
}
.menu-i {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 32px; padding: 0 9px; border: 0;
  background: none; border-radius: 5px; font-size: 12.5px; color: var(--bodi); cursor: pointer;
  text-align: left; font-family: inherit;
}
.menu-i:hover { background: #F2F6FB; color: var(--ink); }
.menu-i.dan { color: #CB3549; }
.menu-i.dan:hover { background: #FDEDEF; }
.menu-h {
  padding: 7px 9px 4px; font-size: 10.5px; font-weight: 600; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.menu-sep { height: 1px; background: var(--line-2); margin: 5px 0; }

/* Barre delle pagine di elenco, su due righe:
   .barf = filtri di stato e totali, .bar = strumenti e azioni */
.barf {
  min-height: 46px; background: #fff; border-bottom: 1px solid var(--line-2); display: flex;
  align-items: center; gap: 10px; padding: 6px 12px; flex: none; flex-wrap: wrap;
}
@media (min-width: 640px) { .barf { padding: 6px 16px; } }
.bar {
  min-height: 52px; background: #fff; border-bottom: 1px solid var(--line); display: flex;
  align-items: center; gap: 9px; padding: 9px 12px; flex: none; flex-wrap: wrap;
}
@media (min-width: 640px) { .bar { padding: 9px 16px; } }
.bar-tot { text-align: right; line-height: 1.2; }
.bar-tot > span { display: block; font-size: 11px; color: var(--mut); }
.bar-tot > b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.kpi-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.kpi-v {
  font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kpi-l { font-size: 12px; color: var(--mut); font-weight: 500; }
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; }
.t-up { color: #15855C; } .t-dn { color: #CB3549; }

.scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.scroll::-webkit-scrollbar-thumb {
  background: #CBD5E1; border: 3px solid transparent; background-clip: padding-box; border-radius: 8px;
}
.scroll::-webkit-scrollbar-thumb:hover { background: #AEBCCB; background-clip: padding-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------ calendario ------------------------------ */
/* I giorni sono quadretti di misura fissa: una griglia che cambia larghezza
   da un mese all'altro fa spostare i numeri sotto le dita mentre si scorre. */
.cal {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); display: flex; flex-direction: column; min-width: 0;
}

/* barra di navigazione: frecce ai lati, mese e anno al centro */
.cal-barra {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line-2); flex: none;
}
.cal-barra .select { height: 30px; font-size: 12.5px; width: auto; padding-right: 26px; }

/* i mesi: affiancati da 1024px in su, incolonnati sotto */
.cal-mesi { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
@media (min-width: 1024px) {
  .cal-mesi { flex-direction: row; gap: 0; }
  .cal-mese + .cal-mese { border-left: 1px solid var(--line-2); padding-left: 16px; margin-left: 16px; }
}
.cal-mese + .cal-mese { border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 8px; }
@media (min-width: 1024px) {
  .cal-mese + .cal-mese { border-top: 0; padding-top: 0; margin-top: 0; }
}
.cal-mese { min-width: 0; }

.cal-titolo {
  font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center;
  height: 24px; display: flex; align-items: center; justify-content: center;
  text-transform: capitalize;
}

/* intestazione dei giorni della settimana */
.cal-sett {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  margin: 6px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2);
}
.cal-sett span {
  font-size: 10.5px; font-weight: 600; color: var(--mut); text-align: center;
  text-transform: uppercase; letter-spacing: .04em;
}

.cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.cal-g {
  height: 34px; min-width: 34px; border: 0; background: none; border-radius: var(--r-sm);
  font-family: inherit; font-size: 12.5px; color: var(--bodi); cursor: pointer;
  display: flex; align-items: center; justify-content: center; position: relative;
  font-variant-numeric: tabular-nums; padding: 0;
}
.cal-g:hover:not(:disabled) { background: var(--pri-soft); color: var(--ink); }
.cal-g:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pri-testo); z-index: 1; }

/* giorni del mese vicino: si vedono, ma non attirano */
.cal-g.fuori { color: var(--faint); }

/* oggi: un punto sotto il numero, non un riquadro che si confonde con la scelta */
.cal-g.oggi::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--pri);
}

/* dentro l'intervallo */
.cal-g.dentro { background: var(--pri-soft); color: var(--ink); border-radius: 0; }
.cal-g.dentro.oggi::after { background: var(--pri-testo); }

/* estremi dell'intervallo e giorno singolo scelto */
.cal-g.scelto { background: var(--pri); color: #fff; font-weight: 600; }
.cal-g.scelto:hover { background: var(--pri-dark); color: #fff; }
.cal-g.scelto.oggi::after { background: #fff; }
.cal-g.estremo-da { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.cal-g.estremo-a { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cal-g.estremo-da.estremo-a { border-radius: var(--r-sm); }

/* bloccati: si vedono, ma si capisce che non si toccano */
.cal-g:disabled {
  color: #C3CCD6; cursor: not-allowed; background: none;
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.cal-g:disabled.oggi::after { background: #C3CCD6; }

/* filtri rapidi: in colonna a fianco su schermo largo, a capo sotto */
.cal-rapidi {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px;
  border-top: 1px solid var(--line-2);
}
@media (min-width: 1024px) {
  .cal-corpo { display: flex; align-items: stretch; }
  .cal-rapidi {
    flex-direction: column; flex-wrap: nowrap; border-top: 0;
    border-right: 1px solid var(--line-2); padding: 12px; width: 168px; flex: none;
  }
  .cal-rapidi .chip { justify-content: flex-start; }
}

/* --------------------- correzione di una tassonomia ---------------------- */
/* Il segno per correggere sta accanto all'etichetta, piccolo: correggere un
   refuso e' un gesto raro, e un pulsante largo quanto il campo lo metterebbe
   allo stesso livello del campo, che invece si usa sempre. */
.tass { position: relative; }
.tass-b {
  position: absolute; top: -2px; right: 0;
  width: 22px; height: 22px; border: 0; border-radius: 5px;
  display: grid; place-items: center; background: transparent;
  color: var(--faint); cursor: pointer; transition: color .12s, background .12s;
}
.tass-b:hover, .tass-b[aria-expanded='true'] { background: var(--pri-soft); color: var(--pri-testo); }
.tass-b svg { width: 13px; height: 13px; }

.tass-pop {
  position: absolute; z-index: 40; top: 24px; right: 0; width: 260px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-lg); padding: 12px;
}
.tass-pop-t {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--mut); margin-bottom: 9px;
}
.tass-pop-p { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ---------------------------- riga di riepilogo --------------------------- */
/* Sotto la testata di una scheda: le poche cose che si vogliono sapere senza
   leggere il modulo.
   Lo spazio fra una voce e l'altra e' largo per scelta: appiccicate si
   leggevano come una frase sola, e l'occhio non trovava dove finiva un dato e
   cominciava il successivo. */
.sintesi {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 34px;
  min-height: 52px; padding: 9px 12px; flex: none;
  background: #fff; border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .sintesi { padding: 9px 16px; } }

.sintesi-v { min-width: 0; line-height: 1.25; }
.sintesi-e {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 2px;
}
.sintesi-d { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sintesi-val { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sintesi-val.t-mut { font-weight: 500; color: var(--mut); }
.sintesi-val.t-bad { color: #CB3549; }
.sintesi-link { text-decoration: none; }
.sintesi-link:hover { color: var(--pri-testo); }
.sintesi-n { font-size: 11.5px; color: var(--mut); }

/* ------------------------- campi che si ripetono -------------------------- */
/* Intestazioni di fatturazione, recapiti, gruppi: elenchi a cui si aggiunge
   una voce per volta.
   Lo sfondo serve a tenerle insieme e a staccarle dai campi singoli: senza,
   una fila di riquadri bianchi dentro un modulo bianco sembra la
   continuazione del modulo, non si capisce dove finisce una voce e comincia
   l'altra, e il pulsante per aggiungerne una si perde in mezzo. */
.ripeti {
  background: #F4F7FB; border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 8px;
}
.ripeti-v { background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.ripeti-v + .ripeti-v { margin-top: 8px; }
/* La voce aperta si stacca dalle altre: si sta lavorando li'. */
.ripeti-v.on { border-color: var(--pri-line, #9AD9EA); box-shadow: 0 0 0 3px rgba(70, 192, 223, .12); }
.ripeti-v.storta { border-color: #E7A0AC; }

/* Il numero d'ordine: dice quante ne hai davanti senza contarle. */
.ripeti-n {
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center;
  background: #EEF3F9; color: var(--mut);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Aggiungere e' un gesto, non un pulsante qualunque: tratteggiato e largo
   quanto l'elenco, cosi' si vede che il posto libero sta li' sotto. */
.ripeti-piu {
  width: 100%; margin-top: 8px; min-height: 36px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px dashed #B9C7D8; border-radius: 9px; background: #fff;
  color: var(--pri-testo, #1E8FAB); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.ripeti-piu:hover { border-color: var(--pri); background: #F7FCFE; }
/* L'icona ha bisogno della sua misura: dentro un flex, un SVG senza
   larghezza dichiarata si prende tutto lo spazio che trova. */
.ripeti-piu svg { width: 15px; height: 15px; flex: none; }
.ripeti-piu:disabled { opacity: .5; cursor: default; }

/* Quando l'elenco e' vuoto il messaggio sta stretto sopra il pulsante: due
   blocchi con l'aria di un elenco pieno, dentro un riquadro vuoto, sono
   spazio che non dice niente. */
.ripeti-vuoto {
  padding: 4px 4px 6px; text-align: center; font-size: 11.5px; color: var(--mut);
}
.ripeti-vuoto + .ripeti-piu { margin-top: 0; }

/* Il campo della data: si scrive **qui dentro**, non in fondo a una tendina.
   Sembra un `.input` ed e' un contenitore: dentro ci stanno l'icona che apre
   il calendario e uno o due campi di testo con la maschera gg/mm/aaaa. */
.cal-campo {
  display: flex; align-items: center; gap: 2px;
  min-height: 34px; padding: 0 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  transition: border-color .12s, box-shadow .12s;
}
.cal-campo:focus-within, .cal-campo.on { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }
.cal-campo.storto { border-color: #E7A0AC; }
.cal-campo.storto:focus-within { box-shadow: 0 0 0 3px rgba(203, 53, 73, .1); }
.cal-campo.off { background: #F6F8FB; opacity: .7; }

/* I campi non hanno bordo loro: il bordo e' quello del contenitore, come in
   un campo solo. Larghezza fissa: la maschera e' sempre lunga uguale. */
.cal-campo-in {
  width: 96px; flex: none; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-size: 13px; color: var(--ink); padding: 6px 2px;
  font-variant-numeric: tabular-nums; text-align: center;
}
.cal-campo-in::placeholder { color: var(--faint); letter-spacing: .04em; }
.cal-campo-in:disabled { color: var(--mut); }

.cal-campo-b {
  flex: none; width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center; border: 0; background: transparent;
  color: var(--faint); cursor: pointer;
}
.cal-campo-b:hover { background: var(--pri-soft); color: var(--pri-testo); }
.cal-campo-b:disabled { cursor: default; }
.cal-campo-b svg, .cal-campo-i { width: 15px; height: 15px; flex: none; }
.cal-campo-i { color: var(--faint); margin: 0 5px; }

.cal-tratto { color: var(--faint); font-size: 13px; flex: none; }
.cal-storta { font-size: 11.5px; color: #CB3549; margin-top: 5px; }

.cal-piede {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid var(--line-2); background: #FAFBFD;
}
.cal-scelta { font-size: 12.5px; color: var(--bodi); }
.cal-scelta b { color: var(--ink); font-weight: 600; }

/* dropdown: ancorato sotto il campo da 1024px in su, finestra centrata sotto */
.cal-ancora { position: relative; }
.cal-popover { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; }
.cal-popover.a-destra { left: auto; right: 0; }
.cal-velo {
  position: fixed; inset: 0; z-index: 60; background: rgba(29,38,48,.35);
  display: grid; place-items: center; padding: 16px;
}
.cal-velo .cal { max-height: calc(100dvh - 32px); overflow: auto; box-shadow: var(--sh-lg); }

/* ------------------------------ transizioni ------------------------------ */
.fade-enter-active, .fade-leave-active { transition: opacity .13s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
/* Pannelli laterali: entrano da destra. Nel CRM non si usano finestre
   modali centrate, sempre il pannello laterale. */
.dr-enter-active, .dr-leave-active { transition: transform .18s cubic-bezier(.3,0,.2,1); }
.dr-enter-from, .dr-leave-to { transform: translateX(100%); }

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active, .fade-leave-active, .dr-enter-active, .dr-leave-active { transition: none; }
}