/* ---------------------------------------------------------------------------
   Stile condiviso dei mockup — Gestionale TMEC
   I valori sono campionati dal gestionale in produzione il 21/07/2026
   (getComputedStyle su gestionale.tmec.it), non stimati a occhio.
   --------------------------------------------------------------------------- */

:root {
    --bg:        #F6F9FA;   /* sfondo pagina        */
    --card:      #FBFCFD;   /* card                 */
    --white:     #FFFFFF;
    --azzurro:   #20AEE3;   /* titoli e link        */
    --rosso:     #FF5C6C;   /* pulsanti azione      */
    --ink:       #1A1D1F;
    --ink-soft:  #5B676D;   /* etichette            */
    --ink-faint: #97A2A8;
    --line:      #EEEFF0;   /* bordo campi          */
    --line-mid:  #DFE3E5;
    --grey-bg:   #ECEFF1;

    /* stato: coerenti con i badge attuali, contrasto verificato AA */
    --ok:      #2E7D52;  --ok-bg:   #DCF2E4;
    --warn:    #8A5A12;  --warn-bg: #FCF1DC;
    --crit:    #B3283A;  --crit-bg: #FDE6E9;

    /* nell'app il font e' Montserrat, servito dal server */
    --ui:   Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------- telaio dell'applicazione ---------- */

.app { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }

.side { background: var(--white); border-right: 1px solid var(--line); padding: 16px 0; }
.side .brand {
    padding: 0 18px 20px; font-weight: 700; font-size: 12px;
    letter-spacing: .1em; color: var(--ink-faint);
}
.side a {
    display: block; padding: 9px 18px; color: var(--ink-soft);
    text-decoration: none; font-size: 13.5px; border-left: 3px solid transparent;
}
.side a:hover { background: var(--bg); }
.side a.on { color: var(--azzurro); border-left-color: var(--azzurro); font-weight: 600; }
.side a:focus-visible { outline: 2px solid var(--azzurro); outline-offset: -2px; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 12px 24px; display: flex; align-items: center; gap: 12px;
}
.topbar .who { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); }

.titles { padding: 20px 24px 14px; display: flex; align-items: flex-start; gap: 16px; }
.titles h1 { margin: 0; color: var(--azzurro); font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
.crumb {
    font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-faint); margin-top: 4px;
}

.body { padding: 0 24px 28px; flex: 1; }

/* ---------- pannelli ---------- */

.panel { background: var(--card); border: 1px solid var(--line); }
.panel-head {
    background: var(--grey-bg); padding: 10px 16px; font-size: 13.5px;
    font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--line);
}
.panel-body { padding: 16px; }

.cols2 { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row-inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* ---------- campi ---------- */

label, .lbl { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 5px; }
.req::after { content: " *"; color: var(--rosso); }

.inp {
    width: 100%; height: 39px; padding: 0 12px; font: inherit; font-size: 14px;
    color: var(--ink); background: var(--white);
    border: 1px solid var(--line); border-radius: 0;
}
textarea.inp { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.55; }
.inp::placeholder { color: var(--ink-faint); }
.inp:focus-visible { outline: 2px solid var(--azzurro); outline-offset: -1px; border-color: var(--azzurro); }

.btn {
    font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; color: #fff;
    background: var(--rosso); border: 1px solid transparent;
    border-radius: 3.2px; padding: 9px 20px;
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-mid); }
.btn.blu { background: var(--azzurro); }
.btn.tondo { border-radius: 50%; width: 38px; height: 38px; padding: 0; font-size: 21px; line-height: 1; }

/* i tipi di intervento: i 14 valori reali estratti dai 3.095 ticket */
.tipi { display: flex; flex-wrap: wrap; gap: 6px; }
.tipo {
    font-size: 12px; padding: 6px 11px; cursor: pointer; border-radius: 3.2px;
    border: 1px solid var(--line-mid); background: var(--white); color: var(--ink-soft);
}
.tipo:hover { border-color: var(--azzurro); color: var(--azzurro); }
.tipo.on { background: var(--azzurro); border-color: var(--azzurro); color: #fff; font-weight: 500; }
.tipo .k { color: var(--ink-faint); font-size: 10.5px; }
.tipo.on .k { color: rgba(255,255,255,.68); }

/* ---------- badge di stato ---------- */

.badge {
    display: inline-block; font-size: 11px; padding: 3px 10px;
    border-radius: 3.2px; background: var(--grey-bg); color: var(--ink-soft);
}
.badge.ok   { background: var(--ok-bg);   color: var(--ok); }
.badge.crit { background: var(--crit-bg); color: var(--crit); font-weight: 600; }
.badge.warn { background: var(--warn-bg); color: var(--warn); font-weight: 600; }

/* ---------- tabelle ---------- */

.scroll-x { overflow-x: auto; }

table.lista { width: 100%; border-collapse: collapse; background: var(--card); font-size: 13px; }
table.lista th {
    text-align: left; padding: 11px 13px; font-weight: 600; font-size: 12.5px;
    color: var(--ink-soft); border-bottom: 1px solid var(--line-mid); white-space: nowrap;
}
table.lista td { padding: 10px 13px; border-bottom: 1px solid var(--line); }
table.lista tbody tr:hover { background: var(--white); }
table.lista .id  { color: var(--azzurro); font-family: var(--mono); font-size: 12px; }
table.lista .sog { color: var(--azzurro); }
.num-col { font-variant-numeric: tabular-nums; }
tr.inline-new { background: var(--white); box-shadow: inset 3px 0 0 var(--azzurro); }
tr.appena     { background: var(--ok-bg); }

/* ---------- dati del cliente ---------- */

dl.kv { margin: 0; font-size: 12.5px; }
dl.kv > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 6px 0; border-bottom: 1px solid var(--line);
}
dl.kv > div:last-child { border-bottom: 0; }
dl.kv dt { color: var(--ink-soft); }
dl.kv dd { margin: 0; text-align: right; font-weight: 500; }

.hist { font-size: 12.5px; }
.hist > div { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hist > div:last-child { border-bottom: 0; }
.hist .d { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); flex: none; width: 58px; }
.hist .t { color: var(--azzurro); flex: none; }

/* ---------- nota del mockup (non fa parte dell'interfaccia) ---------- */

.mock-note {
    background: #2B333A; color: #D7DEE3; font-size: 12.5px;
    padding: 10px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.mock-note b { color: #fff; }
.mock-note a { color: #7FD3F0; }
.mock-note .tag {
    background: var(--azzurro); color: #fff; font-weight: 700;
    padding: 2px 9px; border-radius: 3.2px; font-size: 11px;
}

@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .side { display: none; }
    .cols2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ===========================================================================
   Schermata Supporto — aggiunte rispetto ai mockup
   =========================================================================== */

.doppia { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
@media (max-width: 1180px) { .doppia { grid-template-columns: 1fr; } }

.scheda { position: sticky; top: 18px; }
.scheda .panel-head { display: flex; align-items: center; gap: 8px; }
.scheda .chiudi {
    margin-left: auto; background: none; border: 0; cursor: pointer;
    color: var(--ink-faint); font-size: 18px; line-height: 1; padding: 0 3px;
}
.scheda .chiudi:hover { color: var(--ink); }

.colonna-avvisi  { display: flex; flex-direction: column; gap: 6px; }
.colonna-servizi { display: flex; flex-wrap: wrap; gap: 5px; }
.avvisi          { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* tendina della ricerca */
.drop {
    position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
    background: var(--white); border: 1px solid var(--line-mid); border-top: 0;
    box-shadow: 0 8px 20px -10px rgba(26,29,31,.28);
    max-height: 320px; overflow-y: auto;
}
.drop-titolo {
    padding: 7px 13px; background: var(--bg); border-bottom: 1px solid var(--line);
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}
.drop-foot  { padding: 7px 13px; background: var(--bg); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-faint); }
.drop-vuoto { padding: 16px 13px; text-align: center; color: var(--ink-faint); font-size: 13px; }

.ris {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 14px;
    padding: 9px 13px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.ris:last-child { border-bottom: 0; }
.ris:hover, .ris.sel { background: #F1F9FD; box-shadow: inset 3px 0 0 var(--azzurro); }
.ris .nome  { font-size: 13.5px; }
.ris .cod   { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); text-align: right; }
.ris .sotto { grid-column: 1; font-size: 12px; color: var(--ink-soft); display: flex; gap: 10px; flex-wrap: wrap; }
.ris .segn  { grid-column: 2; text-align: right; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }

/* i tipi sono <button>: azzero lo stile nativo */
button.tipo { font: inherit; }

.riepilogo { font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; }

.avviso-ok {
    background: var(--ok-bg); color: var(--ok); border-left: 3px solid var(--ok);
    padding: 10px 14px; margin: 0 0 16px; font-size: 13.5px;
}
.avviso-ko {
    background: var(--crit-bg); color: var(--crit); border-left: 3px solid var(--crit);
    padding: 10px 14px; margin: 0 0 16px; font-size: 13.5px;
}

.topbar .who { margin-left: auto; }
.esci {
    font: inherit; font-size: 12.5px; color: var(--ink-soft);
    background: none; border: 0; cursor: pointer; padding: 4px 8px; margin-left: 14px;
}
.esci:hover { color: var(--rosso); }
.esci:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 2px; }

/* ===========================================================================
   Messaggio WhatsApp al salone
   =========================================================================== */

/* il pulsante nella riga dell'intervento: discreto finche' non serve */
button.wa {
    font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
    background: none; border: 1px solid transparent; border-radius: 3.2px;
    color: var(--ink-faint); padding: 3px 7px;
}
button.wa:hover { color: var(--ok); border-color: var(--line-mid); background: var(--white); }
button.wa:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 1px; }

dialog.modale {
    border: 0; padding: 0; background: transparent;
    width: min(560px, calc(100vw - 32px));
}
dialog.modale::backdrop { background: rgba(26, 29, 31, .38); }
dialog.modale .panel { box-shadow: 0 24px 48px -20px rgba(26, 29, 31, .45); }
dialog.modale .panel-head { display: flex; align-items: center; gap: 8px; }
dialog.modale .chiudi {
    margin-left: auto; background: none; border: 0; cursor: pointer;
    color: var(--ink-faint); font-size: 18px; line-height: 1; padding: 0 3px;
}
dialog.modale .chiudi:hover { color: var(--ink); }

/* il testo e' il cuore della schermata: piu' grande di un campo qualsiasi */
#msg-testo {
    width: 100%; resize: vertical; line-height: 1.5; font-size: 13.5px;
    font-family: var(--ui);
}

.msg-meta { margin: 6px 0 0; font-size: 12px; color: var(--ink-faint); }
.msg-meta b { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.msg-voce { flex: 1; min-width: 0; }
.msg-nota { color: var(--crit); }

/* lo storico degli invii: righe brevi, il testo intero sta nel title */
#msg-storico > div { align-items: baseline; }
#msg-storico .badge { font-size: 10px; padding: 1px 7px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* il secondo pulsante di riga: passa a un collega */
button.passa {
    font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
    background: none; border: 1px solid transparent; border-radius: 3.2px;
    color: var(--ink-faint); padding: 3px 7px;
}
button.passa:hover { color: var(--azzurro); border-color: var(--line-mid); background: var(--white); }
button.passa:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 1px; }

td.azioni { white-space: nowrap; }
td.azioni .badge { font-size: 10px; padding: 1px 6px; margin-left: 2px; }

/* nella scelta del collega il ruolo sta accanto al nome, piu' tenue */
#ric-colleghi .tipo .k { color: var(--ink-faint); font-size: 10.5px; }
#ric-colleghi .tipo.on .k { color: rgba(255,255,255,.68); }
#ric-testo { width: 100%; resize: vertical; line-height: 1.5; font-size: 13.5px; font-family: var(--ui); }

/* l'attributo hidden deve vincere sulle classi che impostano display:
   .stack e' display:flex, e senza questa riga un pannello nascosto
   resterebbe visibile */
[hidden] { display: none !important; }

/* ===========================================================================
   Le mie richieste
   =========================================================================== */

.ric-riga {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 12px 0; border-bottom: 1px solid var(--line);
}
.ric-riga:first-child { padding-top: 0; }
.ric-riga:last-child  { border-bottom: 0; padding-bottom: 0; }
.ric-riga.fatta .ric-capo, .ric-riga.fatta .ric-testo { color: var(--ink-soft); }

.ric-corpo  { flex: 1; min-width: 0; }
.ric-azione { flex: none; align-self: center; }

.ric-capo   { font-size: 13.5px; }
.ric-salone { color: var(--azzurro); }
.ric-testo  { font-size: 13px; color: var(--ink); margin-top: 3px; line-height: 1.45; }
.ric-meta   { font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; }
.ric-meta .badge { font-size: 10px; padding: 1px 7px; margin-left: 4px; }
.ric-capo .badge { font-size: 10px; padding: 1px 7px; margin-left: 6px; }

/* l'ora e' passata e nessuno l'ha chiusa: si vede senza doverla cercare */
.ric-riga.scaduta { border-left: 2px solid var(--rosso, #c0392b); padding-left: 10px; margin-left: -12px; }

/* lo spostamento sta chiuso finche' non serve: la lista deve restare
   una lista, non un modulo da compilare */
.ric-rinvio { margin-top: 7px; }
.ric-rinvio > summary {
    font-size: 11.5px; color: var(--ink-faint); cursor: pointer;
    width: fit-content; list-style: none;
}
.ric-rinvio > summary::before { content: '↻ '; }
.ric-rinvio > summary::-webkit-details-marker { display: none; }
.ric-rinvio > summary:hover { color: var(--azzurro); }
.ric-rinvio .row-inline { margin-top: 6px; gap: 6px; flex-wrap: wrap; }
.ric-rinvio .inp { width: auto; font-size: 12px; padding: 4px 7px; }

.vuoto { color: var(--ink-faint); font-size: 13px; margin: 0; }

/* ------------------------------------------------------------------ clienti */

.cli-filtri { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cli-filtri .k { margin-right: 2px; }
.cli-sep { width: 1px; height: 16px; background: var(--line); margin: 0 6px; }

.cli-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 11.5px; color: var(--ink-faint); text-decoration: none;
}
.cli-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cli-chip:hover { border-color: var(--azzurro); text-decoration: none; }
.cli-chip.on { background: var(--azzurro); border-color: var(--azzurro); color: #fff; }
.cli-chip.on b { color: #fff; }
/* il colore dice l'urgenza anche da spento: le scadute restano rosse */
.cli-chip.crit b { color: var(--rosso, #c0392b); }
.cli-chip.warn b { color: #b26a00; }
.cli-chip.on.crit, .cli-chip.on.warn { background: var(--rosso, #c0392b); border-color: var(--rosso, #c0392b); }
.cli-chip.on.crit b, .cli-chip.on.warn b { color: #fff; }

.cli-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cli-tab th {
    text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-faint);
    padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.cli-tab td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cli-tab tr:last-child td { border-bottom: 0; }
.cli-tab tbody tr:hover { background: color-mix(in srgb, var(--azzurro) 4%, transparent); }
.cli-tab tr.sospeso td { opacity: .6; }
.cli-tab .k { font-size: 11px; }
.cli-tab a { text-decoration: none; }
.cli-tab a:hover { text-decoration: underline; }

/* le scadenze in cima alla scheda */
.cli-scadenze { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.cli-scad {
    flex: 1; min-width: 170px;
    border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--card, #fff);
}
.cli-scad b { font-size: 14px; }
.cli-scad.crit { border-color: color-mix(in srgb, var(--rosso, #c0392b) 45%, transparent); }
.cli-scad .badge { align-self: flex-start; margin-top: 3px; }

.cli-colonne { display: flex; gap: 16px; align-items: flex-start; }
.cli-lato { width: 320px; flex: none; }

.cli-griglia { display: flex; flex-wrap: wrap; gap: 10px; }
.cli-campo { flex: 1 1 170px; min-width: 150px; display: flex; flex-direction: column; gap: 3px; }
.cli-campo.lungo { flex: 1 1 100%; }
.cli-campo .inp { width: 100%; }

@media (max-width: 1100px) {
    .cli-colonne { flex-direction: column; }
    .cli-lato { width: 100%; }
}

/* la spunta dell'avviso: accesa di regola, si toglie di rado */
.ric-avvisa { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.ric-avvisa input { margin: 0; }
.ric-avvisa .k { font-size: 11.5px; }

/* ------------------------------------------------------------------ calendario
   La griglia e' costruita su due costanti: --ora (altezza di un'ora) e
   --ore (quante ne disegniamo). Le righe di sfondo e la posizione degli
   eventi usano la stessa base, ed e' quello che li tiene allineati. */

.cal-barra {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.cal-naviga { display: flex; align-items: center; gap: 6px; }
.cal-titolo { margin-left: 8px; font-size: 14px; }
.cal-naviga .inp { width: auto; padding: 5px 8px; font-size: 12.5px; }

.cal { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card, #fff); }

.cal-teste, .cal-interi, .cal-griglia {
    display: grid;
    grid-template-columns: 54px repeat(var(--colonne, 1), minmax(0, 1fr));
}
.cal-teste  { border-bottom: 1px solid var(--line); }
.cal-angolo { border-right: 1px solid var(--line); }

.cal-testa {
    padding: 7px 8px; border-right: 1px solid var(--line);
    font-size: 12.5px; display: flex; flex-direction: column; gap: 1px;
}
.cal-testa:last-child { border-right: 0; }
.cal-testa.oggi { background: color-mix(in srgb, var(--azzurro) 8%, transparent); }
.cal-testa .k { font-size: 10.5px; }

.cal-interi { border-bottom: 1px solid var(--line); min-height: 26px; }
.cal-ore-etichetta { padding: 5px 6px; font-size: 10px; text-align: right; border-right: 1px solid var(--line); }
.cal-interi-cella { padding: 4px; border-right: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 3px; }
.cal-interi-cella:last-child { border-right: 0; }
.cal-intero {
    font-size: 10.5px; padding: 1px 6px; border-radius: 3px;
    background: color-mix(in srgb, var(--tinta, #7986cb) 22%, transparent);
    border-left: 3px solid var(--tinta, #7986cb);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.cal-griglia { position: relative; }

.cal-ore { border-right: 1px solid var(--line); }
.cal-ora {
    height: var(--ora); position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.cal-ora span {
    position: absolute; top: -7px; right: 6px;
    font-size: 10px; color: var(--ink-faint); background: var(--card, #fff); padding: 0 2px;
}
.cal-ora:first-child span { top: 1px; }

.cal-colonna { position: relative; border-right: 1px solid var(--line); }
.cal-colonna:last-child { border-right: 0; }
.cal-colonna.oggi { background: color-mix(in srgb, var(--azzurro) 4%, transparent); }
.cal-fascia { height: var(--ora); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }

/* a che punto e' la giornata */
.cal-adesso { position: absolute; left: 0; right: 0; height: 2px; background: var(--rosso, #c0392b); z-index: 3; }
.cal-adesso::before {
    content: ''; position: absolute; left: -3px; top: -3px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--rosso, #c0392b);
}

/* il colore e' quello che il calendario ha su Google: chi lo riconosce
   la' deve riconoscerlo qui, senza rimparare una seconda legenda */
.cal-evento {
    position: absolute; z-index: 2; overflow: hidden;
    border-radius: 4px; font-size: 11px; line-height: 1.25;
    background: color-mix(in srgb, var(--tinta, #7986cb) 17%, var(--card, #fff));
    border-left: 3px solid var(--tinta, #7986cb);
}
/* nato dal gestionale: doppio bordo, perche' su questo si puo' agire */
.cal-evento.nostro { box-shadow: inset 0 0 0 1px var(--tinta, #7986cb); }

/* scelta dei calendari da mostrare */
.cal-scelta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.cal-spunta {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 7px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 11.5px; cursor: pointer; user-select: none; color: var(--ink-faint);
}
.cal-spunta.on { color: var(--ink); border-color: color-mix(in srgb, var(--ink-faint) 45%, transparent); }
.cal-spunta input { display: none; }
.cal-spunta:hover { border-color: var(--azzurro); }
.cal-pallino {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none;
}
.cal-spunta:not(.on) .cal-pallino { opacity: .3; }
.cal-testa .cal-pallino { margin-right: 4px; }
.cal-evento-link { display: block; padding: 3px 5px; color: inherit; text-decoration: none; height: 100%; }
.cal-evento-link:hover { text-decoration: none; }

/* si puo' prendere e spostare */
.cal-evento[data-evento] { cursor: grab; touch-action: none; }
.cal-evento.in-mano {
    cursor: grabbing; z-index: 9; opacity: .9;
    box-shadow: 0 3px 10px rgba(0,0,0,.22); transition: none;
}
.cal-evento.in-salvataggio { opacity: .5; pointer-events: none; }

/* dove si sta per lasciarlo */
.cal-colonna.mira { background: color-mix(in srgb, var(--azzurro) 7%, transparent); }
.cal-colonna.vietata {
    background: color-mix(in srgb, var(--rosso, #c0392b) 7%, transparent);
    cursor: not-allowed;
}
.cal-evento:hover { filter: brightness(0.97); }
.cal-evento-ora { color: var(--ink-faint); font-size: 10px; margin-right: 4px; }
.cal-evento-titolo { font-weight: 500; }

/* appuntamenti brevi: ora e titolo sulla stessa riga, o non ci stanno */
.cal-evento.breve .cal-evento-link { padding: 1px 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.cal-errore {
    position: absolute; inset: 0; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; color: var(--ink-faint);
    background: repeating-linear-gradient(45deg, transparent, transparent 6px,
                color-mix(in srgb, var(--ink-faint) 7%, transparent) 6px,
                color-mix(in srgb, var(--ink-faint) 7%, transparent) 12px);
}

/* il contatore nella barra laterale */
.side a .badge { font-size: 10px; padding: 1px 7px; vertical-align: 1px; }