/* ---------------------------------------------------------------------------
   Gestionale TMEC — i colori, i caratteri e le misure di tutta l'interfaccia.

   Vale una regola sola, e regge tutto il resto: il colore che attira
   l'occhio significa «fai questo», il rosso significa «qualcosa non va».
   Nel gestionale vecchio erano lo stesso colore — il pulsante Salva era
   rosso come una verifica scaduta — e in una schermata dove sedici
   verifiche sono fuori norma il rosso deve poter dire una cosa sola.

   L'arancione è quello di SalePro POS, il software che i nostri clienti
   hanno davanti tutto il giorno: chi passa dall'uno all'altro non cambia
   mondo, e a un cliente in visita si vede che li fa la stessa azienda.
   --------------------------------------------------------------------------- */

/* Fira Sans e Fira Code, serviti da noi: nessuna chiamata a Google, e le
   cifre a larghezza fissa fanno incolonnare date e codici nelle tabelle. */
@font-face { font-family: 'Fira Sans'; font-weight: 400; font-display: swap; src: url('../fonts/fira-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 500; font-display: swap; src: url('../fonts/fira-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 600; font-display: swap; src: url('../fonts/fira-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Fira Code'; font-weight: 400; font-display: swap; src: url('../fonts/fira-code-400.woff2') format('woff2'); }

:root {
    --accento:      #F47C20;   /* le azioni: pulsanti, filtro acceso, colonna ordinata */
    --accento-cupo: #D4640D;   /* la stessa azione, premuta                            */
    --accento-velo: #FFF3E8;   /* fondo appena tinto, per lo stato acceso              */

    --bg:        #F0F2F5;   /* sfondo pagina                */
    --card:      #FFFFFF;   /* pannelli e tabelle           */
    --white:     #FFFFFF;
    --lato:      #1A1A1A;   /* la navigazione, scura come in SalePro POS */

    --ink:       #1F2328;
    --ink-soft:  #5B6570;   /* etichette                    */
    --ink-faint: #8B95A1;
    --line:      #E5E7EB;   /* bordi                        */
    --line-mid:  #D8DCE2;
    --grey-bg:   #F7F8FA;   /* fondi appena staccati        */

    /* stato: contrasto verificato AA sul proprio fondo */
    --ok:      #15803D;  --ok-bg:   #E7F6EC;
    --warn:    #B45309;  --warn-bg: #FEF3C7;
    --crit:    #B91C1C;  --crit-bg: #FEE9E9;

    --ombra:   0 1px 3px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06);
    --ombra-2: 0 4px 10px rgba(16,24,40,.10), 0 12px 28px rgba(16,24,40,.10);

    --ui:   'Fira Sans', "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: 'Fira Code', "Cascadia Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }

/*
   I collegamenti prendono il colore dell'azione, mai il blu del browser.
   Fanno eccezione i nomi dentro le tabelle e le schede — lì il testo è
   contenuto, non azione: si comporta da link solo quando ci passi sopra.
*/
a { color: var(--accento); }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 3px; }

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

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

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

/*
   La navigazione è scura e non si tocca mai: sta ferma mentre tutto il
   resto cambia, e per quello non deve competere con la pagina. È anche
   il pezzo che rende il gestionale riconoscibile accanto a SalePro POS.
*/
.side { background: var(--lato); padding-bottom: 16px; }
.side .brand {
    background: var(--accento); color: #fff;
    padding: 15px 20px; margin-bottom: 12px;
    font-weight: 700; font-size: 13px; letter-spacing: .07em;
}
.side a {
    display: block; margin: 2px 8px; padding: 9px 12px; border-radius: 7px;
    color: #9AA4B0; text-decoration: none; font-size: 13.5px;
}
.side a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side a.on { background: var(--accento); color: #fff; font-weight: 600; }
.side a:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* I titoletti dei gruppi. Ventitré voci in fila avevano tutte lo stesso peso
   e nessun ordine leggibile: questi dicono in che parte del gestionale si sta.

   ⚠ Sono etichette, non link: non si cliccano e non si accendono. Un titolo
   che sembra premibile e non fa niente è peggio del disordine che risolve.

   ⚠ Il primo tentativo era un grigio scuro appena accennato, e l'utente ha
   detto «non si capisce»: un'intestazione più smorta delle voci che deve
   guidare non separa niente. Adesso fanno tre cose insieme — una RIGA che
   taglia la colonna, il testo PIÙ CHIARO delle voci, e ARIA sopra — perché il
   distacco si veda anche con la coda dell'occhio, mentre si scorre. */
.side .gruppo {
    margin: 16px 0 6px;
    padding: 7px 20px;
    background: rgba(255,255,255,.07);
    border-left: 3px solid rgba(255,255,255,.22);
    font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: #EDF1F6;
}
/* il primo sta attaccato al marchio: lì il confine c'è già */
.side .gruppo:first-of-type { margin-top: 0; }

/* I gruppi che si aprono e si chiudono (24/09/2026). Il titoletto ora è un
   <summary>: stesso aspetto di prima, più la freccia e — a gruppo chiuso — la
   somma dei numeri delle voci, così un avviso non resta chiuso dentro.
   ⚠ `:first-of-type` qui sopra varrebbe per ogni summary (ognuno è il primo
   del suo details): il margine lo decide il details, non il titolo. */
.side .menu-gruppo .gruppo { margin: 0; }
.side .menu-gruppo + .menu-gruppo { margin-top: 10px; }
.side .menu-gruppo > .gruppo {
    display: flex; align-items: center; gap: 8px;
    list-style: none; cursor: pointer; user-select: none;
    margin-bottom: 4px;
}
.side .menu-gruppo > .gruppo::-webkit-details-marker { display: none; }
.side .menu-gruppo > .gruppo::before {
    content: ''; flex: none; width: 6px; height: 6px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s; opacity: .8;
}
.side .menu-gruppo[open] > .gruppo::before { transform: rotate(45deg) translate(-1px, -1px); }
.side .menu-gruppo > .gruppo:hover { background: rgba(255,255,255,.12); }
.side .menu-gruppo > .gruppo:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
.side .menu-gruppo:not([open]) > .gruppo { margin-bottom: 0; }
.side .menu-gruppo .somma {
    margin-left: auto; letter-spacing: 0; text-transform: none;
    font-size: 10px; padding: 1px 7px;
}
.side .menu-gruppo[open] .somma { display: none; }

/* le impostazioni: una voce sola, staccata in fondo */
.side .menu-impostazioni {
    display: flex; align-items: center; gap: 8px;
    margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1);
    border-radius: 0 0 7px 7px;
}
.side .menu-impostazioni.on { border-radius: 7px; }
@media (prefers-reduced-motion: reduce) { .side .menu-gruppo > .gruppo::before { transition: none; } }

.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); }

/* "Guarda come": il controllo da admin nella barra in alto */
.guarda-come { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.guarda-come .k { margin-right: 2px; }
.guarda-come button {
    font: inherit; font-size: 12px; cursor: pointer; height: 26px; padding: 0 9px;
    background: transparent; color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: 6px;
}
.guarda-come button:hover { border-color: var(--accento); color: var(--accento); }
.guarda-come button[aria-pressed="true"] { background: var(--accento); border-color: var(--accento); color: #fff; }
.guarda-come button:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.guarda-come select {
    font: inherit; font-size: 12px; height: 26px; padding: 0 6px; max-width: 190px; cursor: pointer;
    background: transparent; color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: 6px;
}
.guarda-come select:hover, .guarda-come select:focus-visible { border-color: var(--accento); color: var(--ink); outline: none; }
.guarda-come select option { background: var(--card); color: var(--ink); }

/* la fascia che ricorda l'anteprima di ruolo, sotto la barra */
.anteprima-ruolo {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    background: var(--warn-bg); color: var(--warn);
    border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
    padding: 7px 24px; font-size: 12.5px;
}
.anteprima-ruolo b { color: var(--warn); }
.anteprima-esci-form { display: inline; margin: 0; }
.anteprima-esci {
    font: inherit; font-size: 12.5px; color: var(--warn); font-weight: 600;
    background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.anteprima-esci:hover { text-decoration: none; }
.anteprima-esci:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }

.titles { padding: 20px 24px 12px; display: flex; align-items: flex-start; gap: 16px; }
.titles h1 { margin: 0; color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.crumb {
    font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-faint); margin-top: 3px;
}

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

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

.panel {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden; box-shadow: var(--ombra);
}
.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; }

/* ---------- pannelli che si chiudono ----------
   L'intestazione diventa un interruttore (lo fa il JS, che aggiunge
   .apribile: senza JS resta tutto aperto, com'era prima). La freccia sta a
   destra e ruota, così si capisce che è cliccabile senza doverci passare
   sopra col mouse. */
.panel-head.apribile {
    cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 8px;
}
.panel-head.apribile::after {
    content: '⌄'; margin-left: auto; font-size: 15px; line-height: 1;
    color: var(--ink-faint); transition: transform .15s;
}
.panel.chiuso > .panel-head.apribile::after { transform: rotate(-90deg); }
.panel.chiuso > .panel-head { border-bottom: 0; }
.panel.chiuso > .panel-body,
.panel.chiuso > form { display: none; }
.panel-head.apribile:hover { color: var(--ink); }

.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(--crit); }

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

/* un solo pulsante pieno per schermata: quello è ciò che si è venuti a fare */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; color: #fff;
    text-decoration: none; white-space: nowrap;
    background: var(--accento); border: 1px solid transparent;
    border-radius: 8px; padding: 8px 16px;
    transition: background-color .14s ease;
}
.btn:hover { background: var(--accento-cupo); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.btn.ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-mid); }
.btn.ghost:hover { background: var(--accento-velo); border-color: var(--accento); color: var(--accento); }
.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: 7px;
    border: 1px solid var(--line-mid); background: var(--white); color: var(--ink-soft);
}
.tipo:hover { border-color: var(--accento); color: var(--accento); background: var(--accento-velo); }
.tipo.on { background: var(--accento); border-color: var(--accento); 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: 2px 9px;
    border-radius: 6px; 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(--accento); font-family: var(--mono); font-size: 12px; }
table.lista .sog { color: var(--accento); }
.num-col { font-variant-numeric: tabular-nums; }
tr.inline-new { background: var(--white); box-shadow: inset 3px 0 0 var(--accento); }
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(--accento); 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(--accento); color: #fff; font-weight: 700;
    padding: 2px 9px; border-radius: 3.2px; font-size: 11px;
}

/* Il menu dal telefono (24/09/2026). Prima qui c'era solo `.side { display:
   none }`: il menu spariva e dal telefono non si andava da nessuna parte.
   Ora sotto i 900px la colonna diventa un pannello che entra da sinistra
   col ☰ della barra in alto, sopra un velo che chiude toccandolo. */
.menu-apri { display: none; }
.menu-velo { display: none; }

@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .cols2 { grid-template-columns: 1fr; }

    .side {
        position: fixed; z-index: 90; top: 0; bottom: 0; left: 0;
        width: min(280px, 85vw); overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(-100%); transition: transform .2s ease;
        visibility: hidden;
    }
    .app.menu-aperto .side { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0,0,0,.35); }
    .app.menu-aperto .menu-velo { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(15,18,20,.45); }
    .side a { padding: 11px 12px; }          /* un dito, non un puntatore */

    .menu-apri {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 38px; height: 38px; padding: 0; cursor: pointer;
        background: transparent; color: var(--ink);
        border: 1px solid var(--line); border-radius: 8px;
    }
    .menu-apri:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

    /* la barra in alto va a capo invece di uscire dallo schermo */
    .topbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
    .topbar .who { order: 10; flex-basis: 100%; margin-left: 0; font-size: 12px; }
    .topbar .esci { margin-left: 0; }
    .guarda-come .k { display: none; }       /* la tendina basta: dice «Io» */
    .guarda-come select { max-width: 110px; }
    .titles { padding: 14px 16px 10px; flex-wrap: wrap; }
    .body   { padding: 0 16px 24px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .side { transition: none; } }
@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: var(--accento-velo); box-shadow: inset 3px 0 0 var(--accento); }
.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(--crit); }
.esci:focus-visible { outline: 2px solid var(--accento); 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(--accento); 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(--accento); border-color: var(--line-mid); background: var(--white); }
button.passa:focus-visible { outline: 2px solid var(--accento); 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(--accento); }
.ric-testo  { font-size: 13px; color: var(--ink); margin-top: 3px; line-height: 1.45; white-space: pre-line; }  /* la «Nota:» va a capo (24/09/2026) */
.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(--crit); 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(--accento); }
.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 */

/* la ricerca istantanea: il campo fa da àncora alla tendina che gli cade
   sotto. La tendina riusa le classi .drop/.ris della ricerca di Supporto. */
.cli-cerca-campo { position: relative; flex: 1; max-width: 360px; }
.cli-cerca-campo .inp { width: 100%; }

/* quando si sceglie un salone da una tendina (pagina Chiamate): il campo
   deve dire a colpo d'occhio se la scelta e' avvenuta davvero, perche' il
   testo scritto a mano e il salone scelto sono due cose diverse */
.inp.scelto { border-color: var(--accento); background: var(--accento-velo); }
.inp.manca  { border-color: var(--crit, #c0392b); animation: tmec-scuoti .3s; }

@keyframes tmec-scuoti {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.cli-filtri { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cli-filtri .k { margin-right: 2px; }
/* un gruppo di chip non si spezza a fine riga: «Versione» con metà delle
   sue voci sopra e metà sotto si legge come due elenchi diversi */
.cli-gruppo { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
.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(--accento); text-decoration: none; }
.cli-chip.on { background: var(--accento); border-color: var(--accento); 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(--crit); }
.cli-chip.warn b { color: var(--warn); }
/* un filtro acceso tiene il colore di ciò che seleziona: rosso per le
   scadute, ambra per quelle che scadono. Erano tutti e due rossi, e
   «scade fra novanta giorni» non è la stessa notizia di «è scaduta». */
.cli-chip.on.crit { background: var(--crit); border-color: var(--crit); }
.cli-chip.on.warn { background: var(--warn); border-color: var(--warn); }
.cli-chip.on.crit b, .cli-chip.on.warn b { color: #fff; }

/* la scorciatoia che riassume: un numero grande e cosa significa */
.cli-invito {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px; margin-bottom: 12px; text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--accento) 40%, transparent);
    border-left: 3px solid var(--accento);
    border-radius: 6px;
    background: color-mix(in srgb, var(--accento) 6%, transparent);
}
.cli-invito b { font-size: 14px; color: var(--ink); }
.cli-invito span { font-size: 11.5px; color: var(--ink-faint); }
.cli-invito:hover { background: color-mix(in srgb, var(--accento) 11%, transparent); text-decoration: none; }
.cli-invito.on { background: color-mix(in srgb, var(--accento) 14%, transparent); }

/* i tre inviti del commerciale: le cose che meritano una telefonata questa
   settimana, affiancate e in ordine di urgenza. Il colore dice quale delle
   tre viene prima — rosso è l'obbligo di legge, ambra la scadenza che
   arriva, arancione il lavoro di sempre. */
.cli-inviti { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cli-inviti .cli-invito { flex: 1; min-width: 260px; margin: 0; }

.cli-inviti .cli-invito.crit {
    border-color: color-mix(in srgb, var(--crit) 40%, transparent);
    border-left-color: var(--crit);
    background: color-mix(in srgb, var(--crit) 6%, transparent);
}
.cli-inviti .cli-invito.crit:hover { background: color-mix(in srgb, var(--crit) 12%, transparent); }
.cli-inviti .cli-invito.warn {
    border-color: color-mix(in srgb, var(--warn) 40%, transparent);
    border-left-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 6%, transparent);
}
.cli-inviti .cli-invito.warn:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); }

/* un invito a zero resta in pagina ma si spegne: «nessuna verifica scaduta»
   è una notizia, e un riquadro che sparisce fa sembrare la pagina rotta */
.cli-inviti .cli-invito.neutro {
    border-color: var(--line); border-left-color: var(--ink-faint);
    background: var(--grey-bg);
}
.cli-inviti .cli-invito.neutro:hover { background: var(--grey-bg); border-color: var(--accento); }
/* .statico: non c'è niente da cliccare, quindi non finge di essere un link */
.cli-inviti .cli-invito.statico { cursor: default; }

/* i KPI-filtro del tecnico: la sua coda di ticket aperti, in cima a Clienti.
   Due riquadri affiancati — «a tuo nome» è azione (arancione), «in tutto» è
   contesto (spento finché non lo si clicca). */
.tk-kpi { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tk-kpi .cli-invito { flex: 1; min-width: 240px; margin: 0; }
.tk-kpi .cli-invito.neutro {
    border-color: var(--line); border-left-color: var(--ink-faint);
    background: var(--grey-bg);
}
.tk-kpi .cli-invito.neutro:hover { background: var(--grey-bg); border-color: var(--accento); }
.tk-kpi .cli-invito.neutro.on {
    background: color-mix(in srgb, var(--accento) 14%, transparent);
    border-color: var(--accento); border-left-color: var(--accento);
}

/* ---------------------------------------------------------------------------
   Registrare un contatto: quattro bottoni sotto il numero.

   Pesano tutti uguale, ed e' una scelta di sostanza e non di grafica: se
   «non risponde» costasse un clic o un'esitazione in piu' di «parlato»,
   verrebbe registrato di meno e il tasso di risposta risulterebbe falso.
--------------------------------------------------------------------------- */
.ct-avvio {
    display: block; margin-top: 3px; padding: 0;
    background: none; border: 0; cursor: pointer;
    font-size: 10.5px; color: var(--ink-faint); text-decoration: underline dotted;
}
.ct-avvio:hover { color: var(--accento); }

.ct-esiti {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 5px; padding: 5px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--grey-bg);
}
.ct-esiti.in-corso { opacity: .55; pointer-events: none; }
.ct-esito {
    padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg); color: var(--ink); font-size: 11px; cursor: pointer;
    white-space: nowrap;
}
.ct-esito:hover { border-color: var(--accento); color: var(--accento); }
.ct-fatto { font-size: 11px; color: var(--ok, var(--accento)); }
.ct-fatto.errore { color: var(--crit); }

/* la storia commerciale nella scheda del salone */
.ct-riga { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); }
.ct-riga:last-child { border-bottom: 0; }
/* ⚠ da quando la data porta davanti il giorno della settimana («ven
   05/06/2026»), questa colonna e' piu' larga: senza flex-shrink:0 il testo
   con white-space:nowrap uscirebbe dalla sua cella invece di stringersi. */
.ct-quando { font-size: 11px; color: var(--ink-faint); white-space: nowrap; min-width: 104px; flex: 0 0 auto; }
.ct-canale { font-size: 11px; color: var(--ink-faint); }
.ct-nota { font-size: 12px; color: var(--ink); }
/* un esito «non ha risposto» non e' un fallimento da colorare di rosso:
   e' meta' del dato che serve, e va letto senza allarme */
.ct-esito-eti { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); }
.ct-esito-eti.risposto { border-color: var(--accento); color: var(--accento); }

.pr-riga { padding: 7px 0; border-bottom: 1px solid var(--line); }
.pr-riga:last-child { border-bottom: 0; }
.pr-stato { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); }
.pr-stato.aperta { border-color: var(--accento); color: var(--accento); }
.pr-stato.vinta  { border-color: var(--ok, var(--accento)); }
.pr-stato.persa  { color: var(--ink-faint); }
.pr-abbandono { font-size: 11px; color: var(--warn); }

/* la colonna delle azioni rapide nell'elenco ticket */
.tk-az { white-space: nowrap; text-align: right; }

/* ─────────────────────────────────────────────────────────────────────────
   Cosa c'era scritto nel ticket, e di cosa chiede questo salone (14/09/2026).

   ⚠ Fino a oggi l'elenco diceva il TIPO e basta: per sapere se un salone
   chiede sempre la stessa cosa bisognava aprire i ticket uno per uno, e a
   quel punto non lo faceva nessuno.
   ───────────────────────────────────────────────────────────────────────── */
.tk-cosa { max-width: 520px; }
.tk-cosa .badge { margin-left: 6px; font-size: 10px; padding: 1px 7px; }
/* la nota su due righe al massimo: deve far capire di cosa si parlava, non
   sostituire la pagina del ticket */
.tk-detto {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px; font-size: 12px; color: var(--ink-soft); line-height: 1.45;
}

.tk-insiste {
    margin: 0 0 10px; padding: 9px 12px;
    background: var(--warn-bg, rgba(240,160,40,.12));
    border-left: 3px solid var(--warn);
    border-radius: 6px; font-size: 13px;
}

.tk-argomenti { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-argomento {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 12.5px; color: var(--ink-soft);
}
.tk-argomento b { color: var(--ink); }
/* quello che si ripete più di tutti: è la risposta alla domanda */
.tk-argomento.primo { border-color: var(--warn); color: var(--ink); font-weight: 600; }
.tk-az .btn { font-size: 11.5px; padding: 4px 9px; }
.tk-az .wa.wa-azione { font-size: 11.5px; padding: 4px 9px; }

/* le azioni di riga restano smorzate finché non si passa sulla riga, come le
   card: meno rumore sulle liste lunghe. Su touch restano dimmate ma tappabili. */
.cli-tab .tk-az { opacity: .5; transition: opacity .14s ease; }
.cli-tab tr:hover .tk-az,
.cli-tab tr:focus-within .tk-az { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cli-tab .tk-az { transition: none; } }

/* il pulsante WhatsApp come azione con etichetta (elenco e dettaglio ticket).
   Due classi per vincere sulla regola `button.wa` del pulsante discreto. */
.wa.wa-azione {
    font: inherit; font-size: 12px; line-height: 1.2; cursor: pointer;
    color: var(--ink-soft); background: transparent;
    border: 1px solid var(--line-mid); border-radius: 8px; padding: 5px 11px;
}
.wa.wa-azione:hover { color: var(--ok); border-color: var(--ok); background: var(--white); }
.wa.wa-azione:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }

.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(--accento) 4%, transparent); }
.cli-tab tr.sospeso td { opacity: .6; }
.cli-tab .k { font-size: 11px; }
.cli-tab a { color: var(--ink); text-decoration: none; font-weight: 600; }
.cli-tab a:hover { text-decoration: underline; }

/*
   Intestazioni che ordinano.

   La freccia sta su tutte le colonne ordinabili ma è invisibile finché
   non serve: piena su quella attiva, smorzata al passaggio del mouse
   sulle altre. Metterle tutte visibili riempirebbe la riga di frecce
   che non dicono niente.

   Valgono anche per le tabelle «lista» (le Proposte, dal 14/09/2026):
   solo le intestazioni, il resto di quelle tabelle resta com'è.
*/
.cli-tab th { padding: 0; }
.cli-tab th:not(:has(.ord)) { padding: 8px 12px; }
table.lista th:has(.ord) { padding: 0; }
:is(.cli-tab, table.lista) .ord {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 12px; color: inherit; text-decoration: none;
}
table.lista .ord { padding: 10px 13px; font-weight: inherit; }
:is(.cli-tab, table.lista) .ord:hover { color: var(--accento); text-decoration: none; }
:is(.cli-tab, table.lista) .ord .frec { opacity: 0; flex: none; transition: opacity .12s; }
:is(.cli-tab, table.lista) .ord:hover .frec { opacity: .45; }
:is(.cli-tab, table.lista) th[aria-sort] .ord { color: var(--ink); }
:is(.cli-tab, table.lista) th[aria-sort] .ord .frec { opacity: 1; color: var(--accento); }
:is(.cli-tab, table.lista) th[aria-sort="descending"] .ord .frec { transform: rotate(180deg); }
:is(.cli-tab, table.lista) .ord:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }

/*
   Elenco o schede.

   Sta accanto al titolo perché è una scelta sulla pagina intera, non un
   filtro: i filtri cambiano quali clienti si vedono, questo cambia come.
*/
.viste {
    display: inline-flex; align-self: center; gap: 2px; padding: 2px;
    background: var(--grey-bg); border: 1px solid var(--line); border-radius: 8px;
}
.viste button {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 12px; cursor: pointer; height: 28px; padding: 0 11px;
    background: transparent; color: var(--ink-soft); border: 0; border-radius: 6px;
}
.viste button svg { width: 14px; height: 14px; }
.viste button:hover { color: var(--ink); }
.viste button[aria-pressed="true"] {
    background: var(--white); color: var(--ink); font-weight: 600;
    box-shadow: 0 1px 2px rgba(16,24,40,.10);
}
.viste button:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }

/* ---------- l'elenco letto a schede ---------- */

.cli-schede {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px; padding: 14px;
}

.cli-scheda {
    position: relative; overflow: hidden;
    background: var(--white); border: 1px solid var(--line); border-radius: 8px;
    padding: 13px 15px 11px;
    transition: box-shadow .16s ease, transform .16s ease;
}
.cli-scheda:hover { box-shadow: 0 4px 12px rgba(16,24,40,.09); transform: translateY(-1px); }

/* la tacca di stato: l'unica cosa che si legge senza leggere */
.cli-scheda::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ok); }
.cli-scheda.warn::before { background: var(--warn); }
.cli-scheda.crit::before { background: var(--crit); }

.cli-scheda .capo { display: flex; align-items: flex-start; gap: 10px; }
.cli-scheda .nome { flex: 1; min-width: 0; }
.cli-scheda .nome a { color: var(--ink); text-decoration: none; }
.cli-scheda .nome a:hover { text-decoration: underline; }
.cli-scheda .nome b { font-size: 14.5px; font-weight: 600; }
.cli-scheda .ragione {
    font-size: 10.5px; color: var(--ink-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cli-scheda .cod { flex: none; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.cli-scheda .dove { font-size: 11.5px; color: var(--ink-soft); margin-top: 5px; }

/* quanto manca alla scadenza dell'assistenza, su una finestra di un anno */
.cli-scheda .copertura { margin: 11px 0 3px; }
.cli-scheda .righello { height: 5px; border-radius: 3px; background: var(--grey-bg); overflow: hidden; }
.cli-scheda .righello .pieno { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.cli-scheda .righello .pieno.scaduto { background: var(--crit); }
.cli-scheda .righe {
    display: flex; justify-content: space-between; gap: 8px;
    margin-top: 5px; font-size: 10.5px; color: var(--ink-faint);
}
.cli-scheda .righe .crit { color: var(--crit); font-weight: 600; }
.cli-scheda .righe .warn { color: var(--warn); font-weight: 600; }
.cli-scheda .righe .ok   { color: var(--ok); }

.cli-scheda .spie { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.cli-scheda .spia {
    font-size: 11px; padding: 1px 8px; border-radius: 5px;
    background: var(--grey-bg); color: var(--ink-soft);
}
.cli-scheda .spia.warn { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.cli-scheda .spia.crit { background: var(--crit-bg); color: var(--crit); font-weight: 600; }

.cli-scheda .roba { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.cli-scheda .roba span {
    font-size: 10.5px; color: var(--ink-faint);
    border: 1px solid var(--line); border-radius: 5px; padding: 0 6px;
}

/* le azioni restano smorzate finché non si passa sulla scheda */
.cli-scheda .azioni {
    display: flex; gap: 6px; margin-top: 11px; padding-top: 10px;
    border-top: 1px solid var(--line);
    opacity: .5; transition: opacity .16s ease;
}
.cli-scheda:hover .azioni, .cli-scheda:focus-within .azioni { opacity: 1; }
.cli-scheda .azioni .btn { flex: 1; text-align: center; font-size: 11.5px; padding: 5px 8px; }

/*
   Il gesto più frequente è chiamare il salone, ma quaranta pulsanti
   arancioni tutti insieme sono rumore: si accende solo quello della
   scheda che si sta guardando.
*/
.cli-scheda:hover .azioni .chiama, .cli-scheda:focus-within .azioni .chiama {
    background: var(--accento); border-color: var(--accento); color: #fff;
}
.cli-scheda .azioni .chiama:hover { background: var(--accento-cupo); border-color: var(--accento-cupo); color: #fff; }

/* cifre a larghezza fissa: date e telefoni si incolonnano e si confrontano */
.cifre { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

@media (prefers-reduced-motion: reduce) {
    .cli-scheda, .cli-scheda .azioni, .cli-tab .frec { transition: none; }
}

/* 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(--crit) 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; }

/* ---------------------------------------------------------------- Firefox
   Firefox dà a ogni <input> e <select> una larghezza MINIMA intrinseca
   (l'eredità dell'attributo size, ~180px) e non li comprime sotto quella
   quando stanno in un contenitore flex. Chrome invece li stringe quanto
   serve. Lo stesso markup produce quindi due layout diversi, e chi sviluppa
   guardando un browser solo non lo vede mai — successo il 31/07/2026 sulla
   scheda cliente, dove un form nella colonna destra la sfondava.

   Azzerare quella larghezza minima allinea i due browser.

   Solo sui CAMPI, pero': i contenitori che hanno un min-width scritto
   apposta (.cli-campo sta a 150px perche' un campo piu' stretto non si
   legge) vanno lasciati stare, altrimenti si «aggiusta» Firefox rompendo
   Chrome. */
.inp, input, select, textarea { min-width: 0; }

.cli-lato .inp, .cli-lato input, .cli-lato select { max-width: 100%; }
.cli-lato form, .cli-lato .stack, .cli-lato .row-inline { min-width: 0; }

.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%; }
}

/* i servizi come pastiglie verdi: se c'e' la pastiglia, il servizio e' attivo;
   se non c'e', non ce l'ha. Niente campi vuoti da interpretare. */
.cli-servizi { display: flex; flex-wrap: wrap; gap: 8px; }
.srv-chip {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-size: 12.5px; padding: 4px 12px; border-radius: 999px;
    background: var(--ok-bg); color: var(--ok); font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
.srv-chip .k { font-weight: 400; font-size: 11px; opacity: .85; }

/* le caselle di presenza (switch, lettore barcode): un si'/no, non un testo */
.cli-flag { flex: 1 1 170px; min-width: 150px; display: flex; align-items: center; gap: 8px; padding-top: 20px; }
.cli-flag input { width: 16px; height: 16px; margin: 0; }
.cli-flag .lbl { margin: 0; }

/* 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-naviga { flex-wrap: wrap; }
/* «Vai a…»: il mini-calendario (24/09/2026). Arancione pieno = il giorno
   che si guarda, anello = oggi, velo arancione = la settimana in vista. */
.cal-vai { margin: 0; position: relative; }
.cal-vai-apri { display: inline-flex; align-items: center; gap: 6px; }
.cal-vai-apri[aria-expanded="true"] { border-color: var(--accento); color: var(--accento); }

.cal-mini {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
    width: 272px; padding: 10px;
    background: var(--white); color: var(--ink);
    border: 1px solid var(--line-mid); border-radius: 10px;
    box-shadow: 0 14px 34px -12px rgba(26,29,31,.35);
}
.cal-mini.in-corso { opacity: .55; pointer-events: none; }

.cal-mini-testa { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.cal-mini-mese  { flex: 1; text-align: center; font-size: 14px; font-weight: 600; text-transform: capitalize; }
.cal-mini-freccia {
    width: 30px; height: 30px; border: 0; border-radius: 7px; cursor: pointer;
    background: transparent; color: var(--ink-soft); font: inherit; font-size: 18px; line-height: 1;
}
.cal-mini-freccia:hover { background: var(--accento-velo); color: var(--accento); }

.cal-mini-griglia { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.cal-mini-gs {
    text-align: center; padding: 4px 0 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-faint);
}
.cal-mini-g {
    position: relative; height: 34px; border: 0; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--ink); font: inherit; font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.cal-mini-g:hover { background: var(--accento-velo); }
.cal-mini-g:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
.cal-mini-g.festa  { color: var(--ink-soft); }
.cal-mini-g.fuori  { color: var(--ink-faint); opacity: .55; }
.cal-mini-g.oggi   { box-shadow: inset 0 0 0 1.5px var(--accento); font-weight: 700; color: var(--accento); }
.cal-mini-g.scelto { background: var(--accento); color: #fff; font-weight: 700; }
.cal-mini-g.scelto.oggi { box-shadow: inset 0 0 0 2px #fff; }

/* la settimana in vista: una fascia unica, arrotondata solo ai due capi */
.cal-mini-g.in-settimana { background: var(--accento-velo); border-radius: 0; }
.cal-mini-g.in-settimana.primo  { border-radius: 8px 0 0 8px; }
.cal-mini-g.in-settimana.ultimo { border-radius: 0 8px 8px 0; }
.cal-mini-g.in-settimana:hover  { background: var(--accento); color: #fff; }

.cal-mini-salti {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.cal-mini-salto {
    padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
    background: transparent; color: var(--ink-soft); font: inherit; font-size: 12.5px;
}
.cal-mini-salto:hover { border-color: var(--accento); color: var(--accento); background: var(--accento-velo); }

@media (max-width: 640px) {
    .cal-mini { width: min(300px, calc(100vw - 32px)); }
    .cal-mini-g { height: 38px; }
}

.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(--accento) 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(--accento) 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(--crit); z-index: 3; }
.cal-adesso::before {
    content: ''; position: absolute; left: -3px; top: -3px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--crit);
}

/* 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(--accento); }
.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(--accento) 7%, transparent); }
.cal-colonna.vietata {
    background: color-mix(in srgb, var(--crit) 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; }

/* ===========================================================================
   La coda del commerciale, in cima alla dashboard

   Otto riquadri, ognuno una porta verso una lista di nomi e numeri. Il
   colore non decora: dice in che ordine si chiama. Rosso l'obbligo di
   legge, ambra la scadenza che arriva e il «ci penso» che si sta
   raffreddando, arancione il lavoro di sempre, verde il termometro di cosa
   si e' venduto, grigio cio' che oggi non chiede niente.

   Tutti alti uguale, in griglia: sono alternative fra cui scegliere, e uno
   piu' grande degli altri deciderebbe la giornata al posto di chi la fa.
   =========================================================================== */

.dash-coda {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 10px;
}

.dash-riq {
    display: flex; flex-direction: column; gap: 3px;
    padding: 11px 14px; text-decoration: none;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-faint);
    border-radius: 6px;
    background: var(--card);
}
.dash-riq b { font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.dash-riq span { font-size: 11.5px; color: var(--ink-faint); line-height: 1.45; }
.dash-riq:hover { text-decoration: none; border-color: var(--accento); }

/* un riquadro senza lista dietro non finge di essere un bottone */
.dash-riq.statico { cursor: default; }
.dash-riq.statico:hover { border-color: var(--line); }

.dash-riq.azione {
    border-color: color-mix(in srgb, var(--accento) 40%, transparent);
    border-left-color: var(--accento);
    background: color-mix(in srgb, var(--accento) 6%, transparent);
}
.dash-riq.azione:hover { background: color-mix(in srgb, var(--accento) 12%, transparent); }

.dash-riq.crit {
    border-color: color-mix(in srgb, var(--crit) 40%, transparent);
    border-left-color: var(--crit);
    background: color-mix(in srgb, var(--crit) 6%, transparent);
}
.dash-riq.crit:hover { background: color-mix(in srgb, var(--crit) 12%, transparent); }

.dash-riq.warn {
    border-color: color-mix(in srgb, var(--warn) 40%, transparent);
    border-left-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 6%, transparent);
}
.dash-riq.warn:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); }

.dash-riq.ok {
    border-color: color-mix(in srgb, var(--ok) 35%, transparent);
    border-left-color: var(--ok);
    background: color-mix(in srgb, var(--ok) 6%, transparent);
}
.dash-riq.ok:hover { background: color-mix(in srgb, var(--ok) 12%, transparent); }

.dash-riq.neutro { background: var(--grey-bg); border-left-color: var(--line-mid); }

/* il termometro: una riga sola, in fondo, dove non ruba l'occhio ai riquadri */
.dash-piede {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 12px;
}

/* ===========================================================================
   Tema scuro

   Tutta l'interfaccia legge i colori dai token in cima a questo file: il
   tema scuro non tocca una regola sola, riscrive quei token. La regola che
   li tiene insieme non cambia — l'arancione resta l'azione, il rosso resta
   l'allarme, e l'arancione e' *lo stesso* di SalePro POS, perche' quello e'
   il marchio e non dipende dallo sfondo.

   Il tema lo sceglie la persona e lo scrive il server sull'attributo
   data-tema del tag <html>, prima che il browser disegni: niente lampo
   bianco al caricamento. Senza scelta, resta il chiaro.
   =========================================================================== */

:root { color-scheme: light; }

:root[data-tema="scuro"] {
    color-scheme: dark;

    /* l'azione e il suo premuto non cambiano: e' il marchio.
       Cambia solo il velo, che al chiaro schiariva e al buio accecherebbe. */
    --accento-velo: #2A2018;   /* fondo appena tinto d'arancione, per lo stato acceso */

    --bg:        #15181B;   /* sfondo pagina            */
    --card:      #1E2226;   /* pannelli e tabelle       */
    --white:     #262C31;   /* la superficie che si alza: campi, righe sotto il mouse, tendine */
    --lato:      #101214;   /* la navigazione, un gradino sotto la pagina */

    --ink:       #E7EAED;
    --ink-soft:  #A9B2BA;   /* etichette                */
    --ink-faint: #737C86;
    --line:      #2C3339;   /* bordi                    */
    --line-mid:  #3A424A;
    --grey-bg:   #191D21;   /* fondi appena staccati    */

    /* stato: testo chiaro su fondo scuro tinto, contrasto verificato */
    --ok:      #4ADE80;  --ok-bg:   #12281C;
    --warn:    #FBBF24;  --warn-bg: #2C2411;
    --crit:    #F87171;  --crit-bg: #2E1618;

    /* al buio un'ombra chiara sparisce: si scurisce e si rinforza */
    --ombra:   0 1px 3px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.30);
    --ombra-2: 0 4px 12px rgba(0,0,0,.45), 0 14px 32px rgba(0,0,0,.40);
}

/* l'interruttore nella barra in alto */
.tema {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin-left: 4px;
    color: var(--ink-faint); background: none;
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}
.tema:hover {
    color: var(--accento); background: var(--accento-velo);
    border-color: color-mix(in srgb, var(--accento) 40%, transparent);
}
.tema:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.tema svg { display: block; }

/* di giorno si offre la luna (porta allo scuro), di notte il sole */
.tema .ico-sole { display: none; }
:root[data-tema="scuro"] .tema .ico-luna { display: none; }
:root[data-tema="scuro"] .tema .ico-sole { display: block; }

/* ---------------------------------------------------------------------------
   La finestra «Azioni» del singolo salone.

   Stretta e alta, con il nome del salone in cima: e' l'unica cosa che
   distingue questa finestra da quella che si sarebbe aperta sulla riga
   sopra, e va letta per prima.

   Le voci sono righe alte, non voci di menu: si aprono col dito su un
   portatile appoggiato sul bancone, e una lista di righe da 14px con 4px
   d'aria si sbaglia a cliccare.
--------------------------------------------------------------------------- */
.az-modale {
    width: min(380px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px;
    background: var(--card); color: var(--ink); box-shadow: var(--ombra-2);
}
.az-modale::backdrop { background: rgba(15, 18, 21, .45); }

.az-testa {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 13px 14px; border-bottom: 1px solid var(--line);
}
.az-testa b { font-size: 14px; line-height: 1.25; }
.az-sotto { margin-top: 2px; }

.az-chiudi {
    flex: none; width: 26px; height: 26px; padding: 0; margin: -2px -2px 0 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--ink-faint);
    background: none; border: 1px solid transparent; border-radius: 7px; cursor: pointer;
}
.az-chiudi:hover { color: var(--ink); background: var(--grey-bg); border-color: var(--line); }

.az-corpo { padding: 6px 8px 10px; }

/* il mestiere a cui appartengono le voci sotto */
.az-gruppo {
    padding: 10px 6px 4px; font-size: 10px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}
.az-lista { display: flex; flex-direction: column; }

.az-voce {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    width: 100%; padding: 9px 10px; text-align: left;
    font-size: 13px; color: var(--ink); text-decoration: none;
    background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.az-voce:hover, .az-voce:focus-visible {
    background: var(--accento-velo); color: var(--accento); text-decoration: none;
}
.az-voce:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
.az-t { font-weight: 500; }
.az-d { flex: none; max-width: 55%; font-size: 11px; text-align: right; }

/* i quattro esiti del contatto, aperti da dentro la finestra */
.az-lista .ct-esiti { margin: 2px 10px 6px; }

/* il numero sulla scheda: spinto a destra, lontano dai due pulsanti */
.az-numero { margin-left: auto; }

/* ---------------------------------------------------------------------------
   Il messaggio WhatsApp, dentro la stessa finestra.

   Non apre WhatsApp Web: si scrive qui e parte dalla nostra coda. Per
   questo il pannello mostra il numero vero in alto e cosa gli è già stato
   mandato in basso — le due cose che si vogliono sapere prima di premere.
--------------------------------------------------------------------------- */
.wa { padding: 4px 10px 10px; }

.wa-testa {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 8px;
}
.wa-indietro {
    padding: 3px 6px 3px 2px; font-size: 12px; color: var(--ink-faint);
    background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.wa-indietro:hover { color: var(--accento); }

.wa-modelli { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.wa-modello {
    padding: 4px 9px; font-size: 11px; color: var(--ink-soft);
    background: var(--grey-bg); border: 1px solid var(--line); border-radius: 20px; cursor: pointer;
}
.wa-modello:hover { color: var(--accento); border-color: var(--accento); background: var(--accento-velo); }

.wa-testo { width: 100%; resize: vertical; font-size: 13px; line-height: 1.45; }

.wa-motivi { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.wa-motivo {
    padding: 4px 9px; font-size: 11px; color: var(--ink-soft);
    background: none; border: 1px solid var(--line); border-radius: 20px; cursor: pointer;
}
.wa-motivo.on {
    color: var(--accento); border-color: var(--accento); background: var(--accento-velo); font-weight: 600;
}

.wa-piede { display: flex; align-items: center; gap: 10px; }
.wa-esito { font-size: 11px; }
.wa-ko { color: var(--crit); font-size: 12px; }

.wa-storico { margin-top: 12px; border-top: 1px solid var(--line); }
.wa-riga { padding: 6px 0; border-bottom: 1px solid var(--line); }
.wa-riga:last-child { border-bottom: 0; }
.wa-riga .k { display: block; font-size: 10px; }
/* l'anteprima si ferma a due righe: serve a riconoscere il messaggio,
   non a rileggerlo */
.wa-anteprima {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 12px; color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   I modelli di messaggio.

   Due colonne per riga: a sinistra si scrive, a destra si vede come arriva.
   Non è una tabella perché un modello non si giudica dal nome: si giudica
   compilato su un salone vero, dove si scopre la riga che resta a metà
   quando quel salone non ha il canone in anagrafica.
--------------------------------------------------------------------------- */
.md-riga {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
    padding: 14px; border-bottom: 1px solid var(--line);
}
.md-riga:last-child { border-bottom: 0; }
.md-riga.spento { opacity: .6; }

.md-form { display: flex; flex-direction: column; gap: 8px; }
.md-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-nome { flex: 1; min-width: 160px; font-weight: 600; }
.md-servizio { max-width: 190px; font-size: 12px; }

.md-campo { display: flex; flex-direction: column; gap: 3px; }
.md-testo { font-family: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
.md-video { display: flex; gap: 8px; flex-wrap: wrap; }
.md-video .inp { flex: 1; min-width: 150px; font-size: 12px; }
.md-azioni { display: flex; gap: 8px; }

/* l'anteprima: si legge come la leggerà il salone */
.md-anteprima { display: flex; flex-direction: column; gap: 6px; }
.md-oggetto {
    padding: 6px 10px; font-weight: 600; font-size: 13px;
    background: var(--grey-bg); border: 1px solid var(--line); border-radius: 8px;
}
.md-bolla {
    padding: 10px 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap;
    background: var(--white); border: 1px solid var(--line); border-radius: 12px;
}
/* la bolla di WhatsApp ha l'angolo mangiato, come quella vera: si capisce
   in un colpo d'occhio su quale canale si sta guardando il messaggio */
.md-bolla.whatsapp { border-bottom-left-radius: 3px; max-width: 420px; }
.md-sotto { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }

.md-segnaposto { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.md-sp { padding: 2px 0; font-size: 12px; }
.md-sp code {
    padding: 1px 5px; font-size: 11px; color: var(--accento);
    background: var(--accento-velo); border-radius: 5px;
}

@media (max-width: 900px) {
    .md-riga { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Chi ti sta chiamando                                                */
/* ------------------------------------------------------------------ */
/* Arancione, non rosso: una telefonata in arrivo è un'AZIONE (rispondi,
   apri la scheda), non un allarme. Il rosso qui griderebbe per una cosa
   che succede venti volte al giorno, e in una settimana nessuno lo
   guarderebbe più. */
.al-telefono {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: color-mix(in srgb, var(--accento) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accento) 45%, transparent);
    padding: 9px 24px; font-size: 13.5px;
}
.al-telefono .pallino {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accento); flex: none;
}
/* pulsa solo MENTRE squilla: quando si sta già parlando il movimento
   non serve più a niente e diventa un fastidio sotto gli occhi */
.al-telefono.squilla .pallino { animation: al-telefono-pulsa 1.1s ease-in-out infinite; }
@keyframes al-telefono-pulsa {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.72); }
}
@media (prefers-reduced-motion: reduce) {
    .al-telefono.squilla .pallino { animation: none; }
}
.al-telefono .chi     { font-weight: 700; font-size: 15px; }
.al-telefono .k       { color: var(--ink-faint); }
.al-telefono .numero  { font-variant-numeric: tabular-nums; color: var(--ink-faint); }
/* «ce n'è un'altra»: un contorno, non un secondo titolo. Deve farsi
   notare da chi sta per alzare la cornetta senza rubare l'occhio al nome
   del salone, che è l'unica cosa che serve leggere in fretta. */
.al-telefono .altre {
    font-size: 12px; font-weight: 600; color: var(--accento);
    border: 1px solid color-mix(in srgb, var(--accento) 40%, transparent);
    border-radius: 999px; padding: 1px 9px; white-space: nowrap;
}
.al-telefono .az {
    margin-left: auto; display: inline-flex; gap: 8px; align-items: center;
}
.al-telefono .az a {
    background: var(--accento); color: #fff; text-decoration: none;
    padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
}
.al-telefono .az a.secondario {
    background: transparent; color: var(--accento);
    border: 1px solid color-mix(in srgb, var(--accento) 45%, transparent);
}
/* Il guardiano non si fa sentire. Ambra e non rosso: non è successo
   niente di grave, ma non si deve credere che «nessuno sta chiamando». */
.al-telefono.muto {
    background: var(--warn-bg); color: var(--warn);
    border-bottom-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
.al-telefono.muto .pallino { background: var(--warn); animation: none; }

/* ------------------------------------------------------------------ */
/* Chi ALTRO è al telefono (fascia, solo per un amministratore)         */
/* ------------------------------------------------------------------ */
/* Grigia, non arancione. Quella sopra chiede di fare qualcosa — rispondi,
   apri la scheda — e per questo si prende l'arancione. Questa racconta
   soltanto com'è messo l'ufficio: due fasce dello stesso colore, una
   sopra l'altra, competerebbero per lo stesso sguardo e la prima
   perderebbe forza proprio nel momento in cui serve.
   Un filo più bassa e più piccola, per la stessa ragione. */
.in-linea-fascia {
    display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
    background: var(--grey-bg);
    border-bottom: 1px solid var(--line);
    padding: 6px 24px; font-size: 12.5px; color: var(--ink);
}
/* fermo: sta parlando, non sta chiamando. Il movimento qui sarebbe un
   richiamo per una cosa che non chiede niente a chi la legge. */
.in-linea-fascia .pallino {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accento); flex: none;
}
.in-linea-fascia .k   { color: var(--ink-faint); }
.in-linea-fascia .chi { display: inline-flex; align-items: baseline; gap: 6px; }
.in-linea-fascia .chi + .chi {
    border-left: 1px solid var(--line-mid); padding-left: 14px;
}
.in-linea-fascia .chi b { font-weight: 700; }
.in-linea-fascia .chi a { color: var(--ink); text-decoration: underline; font-weight: 700; }
.in-linea-fascia .tutti {
    margin-left: auto; color: var(--ink-soft); text-decoration: none;
    border: 1px solid var(--line-mid); border-radius: 999px;
    padding: 2px 10px; font-size: 11.5px; white-space: nowrap;
}
.in-linea-fascia .tutti:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ------------------------------------------------------------------ */
/* Chi è al telefono adesso                                            */
/* ------------------------------------------------------------------ */
/* Una riga per persona, non una griglia di riquadri: la domanda è «chi è
   libero?», e una colonna si scorre con l'occhio in un secondo mentre
   delle schede affiancate vanno cercate una per una. Il pallino sta a
   sinistra di tutto perché è la sola cosa che serva davvero leggere. */
.in-linea { display: flex; flex-direction: column; gap: 2px; }
.in-linea-riga {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 8px;
}
.in-linea-riga + .in-linea-riga { border-top: 1px solid var(--line); }
/* chi sta parlando si stacca dal fondo: è l'informazione che si cerca.
   Lo stesso vale per il cellulare che sta squillando adesso — è l'unica riga
   dell'elenco che può dirlo, perché quel telefono suona in tasca a qualcuno e
   non nella stanza. */
.in-linea-riga.conversazione,
.in-linea-riga.squilla {
    background: color-mix(in srgb, var(--accento) 9%, transparent);
}
.in-linea-riga .pallino { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.in-linea-riga .chi     { min-width: 190px; display: flex; align-items: baseline; gap: 8px; }
.in-linea-riga .chi b   { font-size: 15px; }
.in-linea-riga .cosa    { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.in-linea-riga .numero  { font-variant-numeric: tabular-nums; color: var(--ink-faint); }

/* Le telefonate che stanno suonando e non ha ancora preso nessuno: stanno
   sopra l'elenco perché non sono di nessuno — il centralino fa squillare
   tutti gli apparecchi insieme. Stesso arancione della fascia, che è
   azione e non allarme. */
.in-linea-squillano {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px; padding: 9px 12px; border-radius: 8px;
    background: color-mix(in srgb, var(--accento) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accento) 40%, transparent);
}
.in-linea-squillano .pallino {
    width: 9px; height: 9px; border-radius: 50%; background: var(--accento); flex: none;
    animation: al-telefono-pulsa 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .in-linea-squillano .pallino { animation: none; }
}
.in-linea-squillano .chi    { font-weight: 700; }
.in-linea-squillano .numero { font-weight: 400; margin-left: 6px; }

.in-linea-note { margin: 0; padding-left: 18px; }
.in-linea-note li { margin-bottom: 8px; line-height: 1.55; }
.in-linea-note li:last-child { margin-bottom: 0; }

/* ---------- Video: i copioni e chi li sta girando ---------- */

/* Chi sta lavorando adesso. Il riquadro per cui esiste la pagina: a distanza,
   l'alternativa a saperlo e' chiedere. */
.vid-corso {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; flex-wrap: wrap;
    padding: 9px 0; border-bottom: 1px solid var(--line);
}
.vid-corso:last-child { border-bottom: none; }
.vid-chi {
    display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600;
    color: var(--accento-cupo);
}
.vid-quando { font-size: 12px; color: var(--ink-soft); }
.vid-trascorso { color: var(--ink-faint); }
.vid-durata { margin-left: 6px; font-size: 12px; color: var(--ink-faint); }

/* I fermi. Stanno in alto perche' sono lavoro per chi scrive i copioni. */
.vid-fermi { box-shadow: inset 3px 0 0 var(--crit); }
.vid-fermo { padding: 9px 0; border-bottom: 1px solid var(--line); }
.vid-fermo:last-child { border-bottom: none; }
.vid-motivo {
    margin: 5px 0; padding: 8px 12px; background: var(--crit-bg);
    border-radius: 6px; font-size: 13px; line-height: 1.55;
}

/* I moduli, con quanto manca alla fine di ognuno. */
.vid-moduli { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vid-modulo {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 13px; border: 1px solid var(--line-mid); border-radius: 8px;
    background: var(--card); color: var(--ink); text-decoration: none; font-size: 13px;
}
.vid-modulo:hover { border-color: var(--accento); }
.vid-modulo.on { background: var(--accento-velo); border-color: var(--accento); }
.vid-modulo-nome { font-weight: 600; }
.vid-modulo-conto { color: var(--ink-soft); font-size: 12.5px; }

/* Lo stato, che non e' una colonna in banca dati ma si legge dalle date. */
.vid-stato {
    display: inline-block; font-size: 11.5px; font-weight: 600;
    padding: 2px 9px; border-radius: 6px;
    background: var(--grey-bg); color: var(--ink-soft);
}
.vid-stato-in_corso   { background: var(--accento-velo); color: var(--accento-cupo); }
.vid-stato-fatto      { background: var(--warn-bg);      color: var(--warn); }
.vid-stato-pubblicato { background: var(--ok-bg);        color: var(--ok); }
.vid-stato-bloccato   { background: var(--crit-bg);      color: var(--crit); }

.vid-azione { display: inline; }
.vid-preso-da { font-size: 13px; color: var(--ink-soft); }

/* La barra del lavoro, in cima alla scheda: un pulsante per volta. */
.vid-barra { margin-bottom: 16px; box-shadow: inset 3px 0 0 var(--accento); }
.vid-barra-riga {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
}
.vid-barra-stato  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vid-barra-azioni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vid-pubblica { display: flex; gap: 8px; align-items: center; }
.vid-pubblica .inp { width: 320px; max-width: 46vw; }
.vid-tempi {
    display: flex; flex-wrap: wrap; gap: 6px 20px;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--ink-soft);
}
.vid-quando-cerca { margin: 0; font-size: 14px; line-height: 1.6; }

/* ---------- il copione ----------
   La tabella del parlato e' l'unica cosa di questa pagina che si guarda
   MENTRE si fa altro: si legge di sbieco, con le mani sulla tastiera. Per
   questo e' piu' grande di qualunque altro testo del gestionale. */
.vid-copione h3, .vid-copione h4, .vid-copione h5 { margin: 22px 0 8px; font-size: 15px; }
.vid-copione p  { line-height: 1.62; }
.vid-copione hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }
.vid-copione ul, .vid-copione ol { padding-left: 20px; line-height: 1.62; }
.vid-copione li { margin-bottom: 6px; }
.vid-copione blockquote {
    margin: 14px 0; padding: 12px 16px; background: var(--grey-bg);
    border-left: 3px solid var(--accento); border-radius: 0 6px 6px 0;
}
.vid-copione blockquote p:last-child { margin-bottom: 0; }
.vid-copione .scorre { overflow-x: auto; margin: 14px 0 18px; }

.vid-copione table {
    width: 100%; border-collapse: collapse;
    border: 1px solid var(--line-mid); border-radius: 8px; overflow: hidden;
}
.vid-copione th {
    text-align: left; padding: 9px 13px; font-size: 11.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--accento-cupo); background: var(--grey-bg);
    border-bottom: 1px solid var(--line-mid);
}
.vid-copione td { padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vid-copione tr:last-child td { border-bottom: none; }

.vid-copione table.parlato { font-size: 15px; line-height: 1.6; }
.vid-copione table.parlato td:first-child {
    width: 44%; color: var(--ink-soft); font-size: 14px;
    border-right: 1px solid var(--line);
}
.vid-copione table.parlato td:last-child { font-weight: 500; }
.vid-copione table.dati { font-size: 13px; }
/* la riga con la sola pausa non e' un passo: e' un respiro */
.vid-copione tr.respiro td { background: var(--grey-bg); padding: 4px 13px; }

.vid-copione .pausa {
    display: inline-block; font-size: 11px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--accento-cupo); border: 1px solid var(--accento);
    border-radius: 5px; padding: 1px 8px; white-space: nowrap;
}
.vid-copione .attenzione { color: var(--crit); font-weight: 700; }

/* i blocchi di servizio in coda al copione: quando si registra si CERCA
   «dati di prova», non lo si legge in mezzo agli altri paragrafi */
.vid-copione .scheda {
    padding: 11px 15px; margin: 0 0 11px; border-radius: 8px;
    background: var(--grey-bg); font-size: 13.5px; line-height: 1.6;
}
.vid-copione .scheda.prova         { box-shadow: inset 3px 0 0 var(--accento); }
.vid-copione .scheda.pubblicazione { color: var(--ink-soft); }
.vid-copione .scheda.tip           { box-shadow: inset 3px 0 0 var(--ok); }
/* i due blocchi dei copioni social: la prova che regge il video, e cosa non
   si puo' dire. Il secondo e' rosso perche' sbagliarlo non fa un video
   brutto — fa un video da togliere dopo averlo pubblicato */
.vid-copione .scheda.azione        { box-shadow: inset 3px 0 0 var(--ok); }
.vid-copione .scheda.divieto       { box-shadow: inset 3px 0 0 var(--crit); background: var(--crit-bg); }

/* segnalare invece di aggiustare: e' la via d'uscita, non un'azione di tutti
   i giorni, quindi sta chiusa finche' non serve */
.vid-blocca summary { cursor: pointer; }
.vid-blocca summary::marker { color: var(--ink-faint); }

.vid-naviga {
    display: flex; justify-content: space-between; gap: 20px;
    margin-top: 20px; font-size: 13px;
}
.vid-naviga a { color: var(--ink-soft); text-decoration: none; }
.vid-naviga a:hover { color: var(--accento-cupo); }

/* --------------------------------------------------- video social
   La seconda biblioteca: quello che Tommaso gira per Facebook. Riusa tutto
   il vestito della sezione dei tecnici — stati, pannelli, tabella — e
   aggiunge le due cose che li' non servono: il GANCIO e il CALENDARIO. */

/* Il gancio in elenco. E' la riga su cui si sceglie cosa girare oggi: il
   titolo dice di cosa parla, il gancio dice se il video sta in piedi.
   Corsivo e rientrato perche' e' parlato, non didascalia. */
.vid-gancio {
    margin-top: 4px; padding-left: 9px;
    border-left: 2px solid var(--line);
    font-size: 12.5px; font-style: italic; color: var(--ink-soft);
    line-height: 1.5;
}

/* Nella scheda invece e' un riquadro suo, grande, prima del copione: e'
   l'unica frase che si dice parola per parola, e letta di sfuggita in mezzo
   agli altri paragrafi si finisce per improvvisarla. */
.vid-gancio-riquadro { margin-bottom: 16px; box-shadow: inset 3px 0 0 var(--accento); }
.vid-gancio-testo {
    margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500;
}

/* Il calendario di uscita */
.vid-uscita .vid-corso { align-items: baseline; }
.vid-data-uscita {
    display: inline-block; min-width: 74px;
    font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--ink-soft); text-transform: capitalize;
}
/* la data passata su un video non ancora girato: non e' un allarme, e'
   un promemoria — quindi il colore dell'attenzione, non quello critico */
.vid-data-uscita.tardi { color: var(--warn); }
.vid-dove { margin-left: 6px; font-size: 12px; color: var(--ink-faint); }

/* «dove» sta accanto all'indirizzo nel form di pubblicazione: due campi
   sulla stessa riga, e il secondo e' corto perche' ci sta «Facebook» */
.inp-corto { width: 170px; max-width: 40vw; }

/* ------------------------------------------------ quando ci chiamano
   Due riquadri della pagina Chiamate: in che giorni della settimana ci
   telefonano e a che ora. La domanda sotto e' di turni — il venerdi' in
   ufficio non c'e' tutta la squadra — quindi il numero che comanda e' la
   MEDIA A GIORNATA, e il disegno deve farla vedere per prima. */

/* la colonna che decide: numero grande + barra, come nel riquadro dei minuti */
.qc-media { font-size: 19px; font-weight: 700; line-height: 1.1; }
.qc-barra { height: 6px; border-radius: 3px; background: var(--accento); margin-top: 5px; min-width: 4px; }

/* il giorno senza nessuno al telefono non e' un giorno normale piu' scarico:
   sabato e domenica stanno sotto una riga di stacco e si leggono a parte */
.qc-tab tr.chiuso td { color: var(--ink-soft); background: var(--grey-bg); }
.qc-tab tr.stacco td { border-top: 2px solid var(--line-mid); }
/* il numero che va guardato due volte, dentro una tabella. Vale in tutte le
   tabelle e non solo in quella dei giorni: la seconda che ne ha avuto bisogno
   e' stata quella del fuori orario, il giorno dopo. */
.cli-tab .attenzione { color: var(--crit); }

/* l'istogramma delle ore: barre impilate, perche' «quante ne arrivano» e
   «quante ne perdiamo» a quell'ora sono la stessa domanda.

   ⚠ La colonna del grafico e' un contenitore ALTO E VUOTO (.qc-spazio) con la
   pila ancorata al fondo. La prima versione dava alla pila un'altezza in
   percentuale dentro un flex item alto quanto il suo contenuto: percentuale
   di niente, e le barre non si disegnavano affatto. */
.qc-ore { display: flex; align-items: stretch; gap: 5px; height: 150px; margin: 0 0 4px; }
.qc-ora { flex: 1; display: flex; flex-direction: column; text-align: center; min-width: 0; }
.qc-spazio { flex: 1; position: relative; }
.qc-pila { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
.qc-pila i { display: block; width: 100%; }
.qc-pila i.risposte    { background: var(--accento); }
.qc-pila i.perse       { background: var(--crit); }
.qc-pila i.fuori       { background: var(--line-mid); }
.qc-pila i:first-child { border-radius: 3px 3px 0 0; }
.qc-ora .et { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }

.qc-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.qc-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.qc-legenda b { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* la griglia giorno x ora: e' qui che si legge «il venerdi' alle 9», che e'
   la domanda vera. Le celle dicono la media a giornata, non il totale: i
   totali confronterebbero cinque lunedi' con quattro venerdi'. */
.qc-griglia { border-collapse: collapse; font-size: 12px; }
.qc-griglia th { font-weight: 600; color: var(--ink-soft); padding: 4px 6px; font-size: 11.5px; white-space: nowrap; }
.qc-griglia th.giorno { text-align: right; padding-right: 10px; }
.qc-griglia td {
    width: 40px; height: 30px; text-align: center; padding: 0;
    border: 1px solid var(--card); border-radius: 3px;
    background: color-mix(in srgb, var(--accento) calc(var(--peso, 0) * 1%), var(--grey-bg));
}
.qc-griglia td.forte { font-weight: 700; }
.qc-griglia td.vuota { color: var(--ink-faint); }

/* il segno: a quell'ora, in quel giorno, una telefonata su quattro non ha
   trovato nessuno.
   ⚠ Il rosso sta nel bordo e NON nel numero: sul fondo arancione carico delle
   ore di punta, al tema scuro, un numero rosso non si legge piu' — e sono
   proprio quelle le caselle che devono farsi leggere. */
.qc-griglia td.buco { box-shadow: inset 0 -4px 0 var(--crit); font-weight: 700; }

/* una riga che si apre tutta: il puntatore lo dice, e lo sfondo lo conferma
   quando ci si passa sopra. ⚠ Il link dentro resta — serve alla tastiera e a
   chi apre in una scheda nuova — quindi qui NON si tolgono le sottolineature. */
tr[data-vai] { cursor: pointer; }
tr[data-vai]:hover > td { background: var(--grey-bg); }

/* ===========================================================================
   Le chat WhatsApp dell'assistenza
   ===========================================================================

   Sono fumetti, e lo sembrano: chi apre questa pagina ha in testa WhatsApp,
   non una tabella. Ma restano dentro un pannello del gestionale — niente
   verde WhatsApp, niente sfondo a trama: i colori sono quelli di casa, e
   l'arancione continua a voler dire «azione» e il rosso «qualcosa non va».

   ⚠ L'altezza della zona dei messaggi e' fissa e scorre da sola. Senza, una
   conversazione di due anni allungherebbe la pagina all'infinito e la casella
   per rispondere finirebbe fuori dallo schermo — cioe' proprio la cosa per
   cui si e' aperta la pagina. */

.avviso-nota {
    background: var(--grey-bg); color: var(--ink-soft);
    border-left: 3px solid var(--line-mid);
    padding: 10px 14px; margin: 0 0 16px; font-size: 13.5px;
}

/* l'elenco: la conversazione che aspetta si stacca dalle altre */
.chat-nuova > td { background: var(--accento-velo); }
.chat-nuova > td:first-child { box-shadow: inset 3px 0 0 var(--accento); }
.chat-nuova .chat-anteprima { font-weight: 600; color: var(--ink); }
.chat-anteprima { color: var(--ink-soft); }

/* la conversazione */
.chat-scorri {
    max-height: 58vh; overflow-y: auto; padding: 14px 16px;
    background: var(--grey-bg);
    /* ⚠ scroll-behavior sta qui e non nel JS: chi scorre indietro a leggere
       non deve essere riportato in fondo di scatto a ogni aggiornamento */
    overscroll-behavior: contain;
}

.chat-giorno {
    text-align: center; margin: 12px 0 10px; font-size: 12px;
    color: var(--ink-faint); text-transform: lowercase;
}
.chat-giorno:first-child { margin-top: 0; }

.chat-riga { display: flex; margin-bottom: 8px; }
.chat-riga.sua { justify-content: flex-start; }
.chat-riga.mia { justify-content: flex-end; }

.chat-bolla {
    max-width: min(74ch, 78%);
    padding: 8px 12px 6px; border-radius: 10px;
    background: var(--card); border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
/* i nostri messaggi tinti d'accento, ma appena: il colore dell'azione non
   deve gridare da dentro un archivio di conversazioni */
.chat-riga.mia .chat-bolla {
    background: var(--accento-velo);
    border-color: color-mix(in srgb, var(--accento) 30%, var(--line));
}

.chat-testo { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.chat-piede {
    margin-top: 4px; font-size: 11.5px; color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.chat-piede .attenzione { color: var(--crit); font-weight: 600; }

.chat-allegato {
    padding: 6px 8px; margin-bottom: 4px; border-radius: 6px;
    background: var(--grey-bg); border: 1px dashed var(--line-mid); font-size: 13px;
}
.chat-riga.mia .chat-allegato { background: var(--card); }

/* la casella per rispondere */
.chat-scrivi textarea {
    width: 100%; resize: vertical; min-height: 56px;
    font: inherit; font-size: 14px; line-height: 1.5;
    padding: 9px 11px; border: 1px solid var(--line-mid); border-radius: 6px;
    background: var(--card); color: var(--ink);
}
.chat-scrivi textarea:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }

.chat-sotto {
    display: flex; align-items: center; gap: 12px; margin-top: 8px;
    flex-wrap: wrap;
}
/* ⚠ il testo di servizio prende lo spazio che avanza e il pulsante resta a
   destra: senza `flex:1` su un solo figlio, in Firefox i due si spartiscono
   la riga in parti uguali e il pulsante finisce in mezzo */
.chat-sotto .k { flex: 1 1 auto; min-width: 0; }
.chat-sotto .btn { flex: 0 0 auto; }

/* ---------- collegare il telefono a WhatsApp ----------
   Il codice QR è l'unica cosa che si guarda mentre si tiene il telefono in
   mano: sta grande, da solo, su fondo bianco.
   ⚠ Il fondo bianco NON è decorazione e non segue il tema: un QR chiaro su
   fondo scuro molti telefoni non lo leggono. */
/* ⚠ Le proporzioni sono rovesciate rispetto a `.cols2`: qui la colonna
   stretta è quella del CODICE, non quella del testo. Le istruzioni si leggono
   mentre si tiene il telefono in mano, e in una colonna da 300px diventavano
   una striscia di parole alta uno schermo. */
.wa-cols { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .wa-cols { grid-template-columns: 1fr; } }

.wa-qr { text-align: center; padding: 8px 0; }
.wa-qr img {
    width: 100%; max-width: 320px; height: auto; image-rendering: pixelated;
    background: #FFFFFF; padding: 12px; border-radius: 8px; border: 1px solid var(--line);
}

.wa-riga { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.wa-pallino { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.wa-pallino.ok   { background: var(--ok); }
.wa-pallino.warn { background: var(--warn); }
.wa-pallino.crit { background: var(--crit); }

.wa-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-passi { margin: 0; padding-left: 20px; }
.wa-passi li { margin-bottom: 7px; line-height: 1.55; }
.wa-passi li:last-child { margin-bottom: 0; }

.k.errore { color: var(--crit); font-weight: 600; }

/* la foto che ha mandato il cliente: si vede, non si annuncia.
   ⚠ L'altezza è limitata perché una foto verticale scattata col telefono
   riempirebbe tre schermate e spingerebbe fuori vista la conversazione. Si
   apre a grandezza piena cliccandoci sopra. */
.chat-foto { display: block; margin-bottom: 4px; }
.chat-foto img {
    display: block; max-width: 100%; max-height: 320px; width: auto;
    border-radius: 8px; border: 1px solid var(--line); background: var(--grey-bg);
}
.chat-foto:hover img { border-color: var(--accento); }

/* il vocale del cliente: si ascolta dentro la conversazione.
   ⚠ Il lettore di serie del browser è largo quanto gli pare — in Firefox
   arriva a 300px fissi e sfonda la bolla su schermo stretto. Qui si adatta
   alla bolla e non la allarga. */
.chat-vocale { margin-bottom: 4px; }
.chat-vocale audio { display: block; width: 100%; max-width: 320px; min-width: 200px; height: 40px; }

.chat-allegato.apribile { display: block; text-decoration: none; color: inherit; }
.chat-allegato.apribile:hover { border-color: var(--accento); background: var(--accento-velo); }
.chat-allegato.apribile:hover .k { color: var(--accento); }

/* guardare una foto senza uscire dalla conversazione.
   ⚠ Il fondo è scuro in entrambi i temi, non solo al buio: una foto di un
   display si legge meglio senza niente di chiaro intorno, ed è esattamente
   quello che si sta cercando di leggere. */
.chat-lente {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(8, 10, 12, .88);
    align-items: center; justify-content: center; padding: 32px;
    cursor: zoom-out;
}
.chat-lente.aperta { display: flex; }
.chat-lente img {
    max-width: 100%; max-height: 100%;
    border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
    cursor: default;
}
.chat-lente-chiudi {
    position: absolute; top: 14px; right: 18px;
    width: 40px; height: 40px; padding: 0;
    font: inherit; font-size: 26px; line-height: 1;
    color: #fff; background: rgba(255, 255, 255, .12);
    border: 0; border-radius: 50%; cursor: pointer;
}
.chat-lente-chiudi:hover { background: rgba(255, 255, 255, .24); }
.chat-lente-chiudi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* la pagina sotto non scorre: senza, girando la rotellina per guardare la
   foto si scorre la conversazione dietro */
body.con-lente { overflow: hidden; }

/* chi ha risposto al cliente: si stacca dall'ora e dallo stato, che sono
   dettagli, perché è l'informazione che si cerca rileggendo una
   conversazione di due settimane fa */
.chat-chi { color: var(--ink-soft); font-weight: 600; }

/* ------------------------------------------------------------- paginazione

   ⚠ Il paginatore di Laravel è scritto per Tailwind, che qui non c'è: in
   pagina usciva come una riga di testo senza bottoni, e la seconda pagina
   diventava una cosa che non si capiva come raggiungere (02/09/2026, elenco
   delle conversazioni WhatsApp cresciuto da 4 a 224).

   Due bottoni ai lati e la posizione in mezzo: chi guarda un elenco lungo
   vuole «indietro», «avanti» e sapere dove si trova, non una fila di numeri
   da cercare con gli occhi. */
.cli-pagine {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 12px; flex-wrap: wrap;
}

/* ⚠ spento ma presente: un bottone che sparisce sposta gli altri, e chi
   torna indietro finisce per premere dove non c'è più niente */
.cli-pagine .disattivo {
    opacity: .4; cursor: default; pointer-events: none;
}

/* ====================================================================
   «Manca un ultimo passo»: il permesso alle notifiche
   ==================================================================== */

/* Ambra e non rosso: non e' successo niente di grave, ma non si deve nemmeno
   credere che gli avvisi funzionino gia'. Chiede un gesto, quindi si fa
   vedere piu' della fascia «chi e' in linea», che invece informa e basta. */
.avvisi-fascia {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--warn-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    padding: 9px 24px; font-size: 13.5px; color: var(--ink);
}
.avvisi-fascia .campanella { font-size: 15px; flex: none; line-height: 1; }
.avvisi-fascia .dice       { flex: 1; min-width: 220px; }
.avvisi-fascia .btn        { flex: none; padding: 5px 14px; font-size: 12.5px; }

/* Bloccata dal browser: da qui il codice non puo' fare piu' niente, e non
   c'e' nessun bottone da premere. Resta rossa e resta li', perche' finche'
   e' cosi' quella persona i messaggi dei saloni non li sente. */
.avvisi-fascia.bloccata {
    background: var(--crit-bg);
    border-bottom-color: color-mix(in srgb, var(--crit) 40%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────
   Lavori: a che punto siamo su Social, Magazine, Beauty Book, Landing, Sito

   ⚠ La riga è fatta per essere LETTA IN FILA, non aperta una per una: tutto
   quello che serve a decidere sta su una riga sola — salone, servizio, stato,
   da quanto, di chi è — e i bottoni per aggiornare stanno lì accanto. È la
   ragione per cui esiste la sezione: se per sapere come va un lavoro bisogna
   aprirlo, nessuno guarda quelli degli altri, e si torna a «lo sa solo chi lo
   segue».
   ───────────────────────────────────────────────────────────────────────── */
.lav-riga {
    padding: 11px 0 11px 10px;
    border-bottom: 1px solid var(--line);
    border-left: 2px solid transparent;
    margin-left: -12px;
}
.lav-riga:last-child { border-bottom: 0; }

/* la tacca a sinistra: il colore lo decide il modello, non la pagina */
.lav-riga.warn { border-left-color: var(--warn); }
.lav-riga.crit { border-left-color: var(--crit); }

.lav-capo {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    font-size: 13.5px;
}
.lav-salone   { color: var(--accento); text-decoration: none; }
.lav-servizio { color: var(--ink); }
/* dentro un blocco per salone il servizio è il nome della riga, e pesa come
   pesava il salone quando stava davanti */
.lav-servizio.primo { font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────
   Il cappello del salone (14/09/2026).

   ⚠ Serve a far vedere DOVE CAMBIA IL CLIENTE. Prima le righe erano sciolte
   e un salone con quattro lavori compariva in quattro punti diversi: per
   sapere «come stiamo messi con questo cliente» — la domanda vera quando lo
   si ha al telefono — bisognava scorrere tutto e tenere a mente.

   Perciò non è un titoletto smorto ma una fascia: fondo, riga sopra e nome
   grosso. Lo stacco deve vedersi mentre si scorre, non solo se lo si cerca.
   ───────────────────────────────────────────────────────────────────────── */
.lav-salone-capo {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
    margin: 20px -16px 0; padding: 10px 16px;
    /* ⚠ non `--riga-alt`: quella variabile non è definita e il colore restava
       il fallback quasi invisibile. Il grigio qui è scritto apposta, e deve
       vedersi mentre si scorre */
    background: rgba(127,127,127,.16);
    border-top: 2px solid var(--line);
    border-left: 3px solid transparent;
    font-size: 16px; font-weight: 700;
}
.lav-salone-capo:first-child { margin-top: -4px; border-top: 0; }
.lav-salone-capo a { color: var(--ink); text-decoration: none; }
.lav-salone-capo a:hover { color: var(--accento); }
.lav-salone-capo .k { font-weight: 400; font-size: 12px; }
/* la data della prima consegna va a destra: si legge scorrendo la colonna */
.lav-salone-quando { margin-left: auto; }
/* un salone con un problema aperto si vede prima di leggerlo */
.lav-salone-capo.guarda { border-left: 3px solid var(--crit); }

/* le righe rientrano sotto il loro cappello: è il rientro che dice
   «queste appartengono a quello» */
.lav-salone-lavori { padding-left: 14px; }
.lav-salone-lavori .lav-riga:last-child { border-bottom: 0; }

@media (max-width: 640px) {
    .lav-salone-capo { margin-left: -10px; margin-right: -10px; padding: 8px 10px; }
    .lav-salone-quando { margin-left: 0; }
    .lav-salone-lavori { padding-left: 6px; }
}

/* di chi è: a destra, staccato. Si legge scorrendo la colonna, che è come
   si cerca «cosa ha in mano Silvia» */
.lav-chi { margin-left: auto; font-size: 12px; color: var(--ink-faint); }

.lav-capo .badge { font-size: 10px; padding: 1px 7px; }

.lav-nota {
    font-size: 12.5px; color: var(--ink-soft);
    margin-top: 4px; line-height: 1.45; max-width: 90ch;
}

/* i bottoni: piccoli e in fila, perché sono il gesto quotidiano */
.lav-azioni {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px;
    margin-top: 7px;
}
/* ⚠ Solo i figli DIRETTI: dentro le azioni c'è anche il riquadro delle
   consegne, e i suoi moduli sono righe intere. Senza il `>` finivano in
   linea con i bottoni e il campo «cosa va consegnato» si ritrovava accanto a
   «post al mese». */
.lav-azioni > form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.lav-azioni .btn { font-size: 11.5px; padding: 3px 9px; }
.lav-azioni .inp { font-size: 11.5px; padding: 2px 6px; height: auto; }

/* ⚠ «Tutto a posto» è il bottone che si preme nove volte su dieci: sta per
   primo e si distingue, se no si finisce per cercare ogni volta quale dei
   cinque premere e la conferma smette di costare un clic */
.lav-conferma .btn { font-weight: 600; }

/* il problema chiede di scrivere, quindi sta chiuso finché non serve: la
   lista deve restare una lista, non un modulo da compilare */
.lav-problema > summary {
    display: inline-block; list-style: none; cursor: pointer;
}
.lav-problema > summary::-webkit-details-marker { display: none; }
.lav-problema[open] > form {
    display: flex; gap: 6px; margin-top: 6px; align-items: center;
}
.lav-problema[open] > form .inp { min-width: 320px; }

.lav-filtri { display: flex; gap: 14px; align-items: flex-end; }
.lav-filtri label { display: flex; flex-direction: column; gap: 3px; }

/* la data di consegna: il campo è corto, non serve la larghezza di una nota */
.lav-consegna[open] > form .inp { min-width: 0; width: 150px; }

/* lo scadenzario dentro la riga: chiuso finché non serve, e quando si apre
   dev'essere un elenco leggibile, non un modulo */
/* ⚠ Aperto va a capo e si prende la riga: dentro una fila di bottoni, un
   riquadro alto spingerebbe gli altri a metà altezza e lascerebbe mezza riga
   vuota — è successo alla prima prova. */
.lav-scadenzario[open] { flex-basis: 100%; }

.lav-scadenzario[open] > .lav-elenco-scadenze {
    margin-top: 8px; padding: 10px 12px;
    background: var(--grey-bg); border: 1px solid var(--line); border-radius: 8px;
    max-width: 760px;
}
.lav-scadenza {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 12.5px;
}
.lav-scadenza + .lav-scadenza { border-top: 1px solid var(--line); }
.lav-scadenza form { display: inline; margin: 0; }
.lav-scadenza-titolo { flex: 1; min-width: 0; }

/* ⚠ la spunta è un pulsante vero e non un quadratino disegnato: si preme
   sul telefono, si raggiunge col tab, e dice cosa fa passandoci sopra */
.lav-spunta {
    font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
    width: 22px; height: 22px; padding: 0;
    background: var(--white); color: var(--ink-soft);
    border: 1px solid var(--line-mid); border-radius: 50%;
}
.lav-spunta:hover { border-color: var(--accento); color: var(--accento); }
.lav-scadenza.ok .lav-spunta { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bg); }
.lav-scadenza.ok .lav-scadenza-titolo { color: var(--ink-faint); text-decoration: line-through; }

.lav-scadenza-nuova {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
/* ⚠ `width: auto`: la regola base di `.inp` è larghezza piena, e dentro una
   riga flex quello manda a capo tutto quello che viene dopo — il campo della
   data e il pulsante finivano su tre righe diverse. */
.lav-scadenza-nuova .inp { font-size: 12px; height: 30px; width: auto; }
.lav-scadenza-nuova .inp[name="titolo"] { flex: 1; min-width: 140px; }
/* nel mockup l'input del titolo non ha il name: si allarga uguale */
.lav-scadenza-nuova .inp:not([type]) { flex: 1; min-width: 140px; }

/* ---------------------------------------------------------------------------
   Report demo: l'attesa lunga

   Un annuale ci mette anche due minuti. Il pezzo di interfaccia che conta
   non è la barra: è la riga di testo sotto, che cambia mentre passa il
   tempo e porta i secondi in chiaro. Una barra che si muove da sola, dopo
   il primo minuto, smette di distinguersi da una pagina bloccata.

   Arancione e non rosso: è un'azione in corso, non un allarme.

   ⚠ Con «prefers-reduced-motion» la regola generale spegne l'animazione, e
   una barra ferma a un ventesimo di larghezza si legge come «avanzamento
   bloccato al 5%». Lì si tinge tutta: dice che sta lavorando senza
   promettere un avanzamento che nessuno sta misurando.
   --------------------------------------------------------------------------- */
/* ⚠ Un pulsante spento deve SEMBRARE spento.

   Il gestionale non aveva ancora un pulsante che nasce disabilitato: qui
   ce ne sono due momenti — prima di aver scelto salone e report, e per i
   due minuti in cui il report si sta generando — e senza questa regola
   restavano arancioni pieni, cioè identici a un pulsante che si può
   premere. La regola è generale perché il problema lo è: vale per
   qualunque comando spento, ovunque compaia. */
.btn:disabled, .btn[disabled] {
    opacity: .45; cursor: not-allowed;
}
.btn:disabled:hover, .btn[disabled]:hover { background: var(--accento); }
.btn.ghost:disabled:hover { background: transparent; border-color: var(--line-mid); color: var(--ink-soft); }
.inp:disabled { background: var(--grey-bg); color: var(--ink-faint); cursor: not-allowed; }

.rd-attesa { margin-top: 14px; }

.rd-barra {
    height: 4px; border-radius: 3px; overflow: hidden;
    background: var(--accento-velo); border: 1px solid var(--line);
}
.rd-barra span {
    display: block; height: 100%; width: 32%; border-radius: 3px;
    background: var(--accento);
    animation: rd-scorre 1.5s ease-in-out infinite;
}
.rd-dice { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }

@keyframes rd-scorre {
    0%   { transform: translateX(-105%); }
    100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
    .rd-barra span { width: 100%; }
}

/* «Altre opzioni» del Report demo: i due facoltativi, chiusi.

   La pagina deve restare due tendine e un pulsante — chi la apre per fare
   quello che fa sempre non deve incontrare niente in piu'. Chi ha il caso
   storto (un agosto vuoto, un salone aperto da poco) apre di qui.

   <details> e non un pannello con il suo JavaScript: si apre da sola, si
   raggiunge col tab e funziona anche se lo script non parte. */
.rd-altre { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.rd-altre > summary {
    cursor: pointer; user-select: none; width: fit-content;
    font-size: 12px; color: var(--ink-faint);
}
.rd-altre > summary:hover { color: var(--accento); }
.rd-altre > summary:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 3px; }
.rd-altre[open] > summary { color: var(--ink-soft); }

/* ─────────────────────────────────────────────────────────────────────────
   Giornata: cosa si e' fatto oggi, con chi e quanto (ANTEPRIMA)

   La pagina non si apre vuota: assistenze, telefonate e lavori sono gia'
   dentro coi loro minuti, e alla persona restano le poche cose che il
   gestionale non puo' sapere. E' la lezione del registro precedente, dove il
   campo da compilare a mano e' rimasto vuoto nel 90% dei casi.
   ───────────────────────────────────────────────────────────────────────── */

/* La scala della barra e' grigia di proposito: l'unico colore acceso e'
   l'arancione del tempo NON spiegato, che e' l'unica cosa che chiede di fare
   qualcosa. Al buio la scala si ribalta — le fette diventano piu' chiare del
   fondo — altrimenti sparirebbero dentro il pannello. */
:root {
    --gio-1: #3A4550;  --gio-2: #5B6570;  --gio-3: #8B95A1;  --gio-4: #C3CAD2;
    --gio-testo: #FFFFFF;  --gio-testo-4: #1F2328;
}
:root[data-tema="scuro"] {
    --gio-1: #B4BDC6;  --gio-2: #98A2AC;  --gio-3: #79838E;  --gio-4: #525C67;
    --gio-testo: #12161A;  --gio-testo-4: #E7EAED;
}

/* La fascia dell'anteprima. Nomi di saloni e minuti su una pagina che sembra
   finita si leggono come una cosa che gia' funziona: senza questa riga, chi
   guarda prende decisioni su numeri inventati. Stessa lezione del menu sotto
   «guarda come tecnico» — un'anteprima che mente e' peggio che non averla. */
.gio-finta {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--warn-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    /* ⚠ niente margini negativi: .main non ha padding, e i -24px la
       facevano uscire a destra — la pagina scorreva di lato (visto l'11/09) */
    padding: 10px 24px; margin: 0 0 4px;
    font-size: 13px; color: var(--ink);
}
.gio-finta .tag {
    flex: none; background: var(--warn); color: #fff; font-weight: 700;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 5px;
}
.gio-finta .dice { flex: 1; min-width: 260px; }

.gio-barra {
    display: flex; height: 28px; border-radius: 7px; overflow: hidden;
    border: 1px solid var(--line); background: var(--grey-bg);
}
.gio-barra > span {
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--gio-testo); white-space: nowrap; overflow: hidden;
    font-variant-numeric: tabular-nums;
}
.gio-q-assist { background: var(--gio-1); }
.gio-q-tel    { background: var(--gio-2); }
.gio-q-lavori { background: var(--gio-3); }
.gio-q-mano   { background: var(--gio-4); color: var(--gio-testo-4); }
.gio-q-buco   { background: var(--accento); color: #fff; font-weight: 600; }

/* il tempo che deve ancora arrivare: ne' fatto ne' mancante, solo giornata
   che non c'e' stata. Alle 10:40 sei ore non vissute non sono un buco. */
.gio-q-futuro {
    background: repeating-linear-gradient(135deg,
        var(--grey-bg), var(--grey-bg) 5px, var(--line) 5px, var(--line) 10px);
    color: var(--ink-faint);
}

.gio-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 9px; font-size: 12px; color: var(--ink-soft); }
.gio-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.gio-legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* La riga: ora a sinistra, cosa, con chi, quanto, e i bottoni. Si legge in
   fila come un diario, dall'alto in basso. */
.gio-riga {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 190px 66px 216px;
    gap: 12px; align-items: center;
    padding: 10px 0 10px 10px; margin-left: -12px;
    border-bottom: 1px solid var(--line);
    border-left: 2px solid transparent;
}
.gio-riga:last-child { border-bottom: 0; }

/* la domanda della sera: e' l'unica cosa che chiede di fare qualcosa */
.gio-riga.chiede { border-left-color: var(--accento); background: var(--accento-velo); }

/* la stessa domanda di mattina: c'e', si vede, e non urla. Una pagina che
   chiede qualcosa ogni volta che ci si passa si smette di aprire. */
.gio-riga.dopo { border-left-color: var(--line-mid); background: var(--grey-bg); }

.gio-riga .quando { display: flex; flex-direction: column; gap: 3px; }
.gio-riga .quando .h {
    font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.gio-riga .cosa { font-size: 13.5px; }
.gio-riga .cosa .k { display: block; font-size: 11.5px; color: var(--ink-faint); }
.gio-riga .chi { font-size: 13px; color: var(--ink-soft); }
.gio-riga .chi a { color: var(--ink); text-decoration: none; }
.gio-riga .chi a:hover { color: var(--accento); text-decoration: underline; }
.gio-riga .min { text-align: right; font-size: 14px; font-weight: 600; }
.gio-riga .az { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.gio-riga .az .btn { padding: 5px 10px; font-size: 12px; }

/* da dove viene quel tempo, e quindi perche' non c'e' niente da compilare */
.gio-fonte {
    display: inline-block; font-size: 10.5px; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 5px; text-transform: uppercase;
    background: var(--grey-bg); color: var(--ink-soft); border: 1px solid var(--line);
}
.gio-fonte.mano {
    background: var(--accento-velo); color: var(--accento-cupo);
    border-color: color-mix(in srgb, var(--accento) 35%, transparent);
}

/* La risposta si da' li' dove e' stata fatta la domanda: aprire una pagina
   nuova per dire «era un'assistenza» costa piu' del lavoro che registra. */
.gio-dentro {
    grid-column: 1 / -1;
    margin: 10px 0 2px; padding: 14px;
    background: var(--white); border: 1px solid var(--line-mid); border-radius: 8px;
    box-shadow: var(--ombra);
}
.gio-dentro .titolo {
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 12px;
}
.gio-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.gio-dentro .fondo { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.gio-dentro .fondo .nota { flex: 1; min-width: 220px; font-size: 12px; color: var(--ink-soft); }

.gio-nuova {
    display: grid; grid-template-columns: 232px 1fr 214px auto;
    gap: 10px; align-items: end;
    padding: 14px; border: 1px dashed var(--line-mid); border-radius: 8px;
    background: var(--grey-bg);
}

/* i minuti si danno con un tocco: il campo libero resta per i casi storti */
.gio-min-rapidi { display: flex; gap: 5px; }
.gio-min-rapidi button {
    font: inherit; font-size: 12.5px; cursor: pointer; height: 34px; width: 44px;
    background: var(--white); color: var(--ink-soft);
    border: 1px solid var(--line-mid); border-radius: 6px;
}
.gio-min-rapidi button:hover { border-color: var(--accento); color: var(--accento); background: var(--accento-velo); }
.gio-min-rapidi button.on { background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 600; }
.gio-min-rapidi button:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.gio-min-rapidi .inp { width: 62px; text-align: center; }

.gio-piede {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 14px 16px; margin-top: 16px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card);
    box-shadow: var(--ombra);
}
.gio-piede .dice { flex: 1; min-width: 280px; font-size: 13px; color: var(--ink-soft); }
.gio-piede .dice b { color: var(--ink); font-size: 15px; }
.gio-piede.finita { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-bg); }
.gio-piede.calmo  { box-shadow: none; background: var(--grey-bg); }

.gio-naviga { display: flex; align-items: center; gap: 8px; }
.gio-naviga a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px; text-decoration: none;
    border: 1px solid var(--line-mid); color: var(--ink-soft); background: var(--white);
}
.gio-naviga a:hover { border-color: var(--accento); color: var(--accento); text-decoration: none; }
.gio-naviga b { font-size: 14px; min-width: 200px; text-align: center; }

@media (max-width: 1100px) {
    .gio-riga { grid-template-columns: 82px minmax(0, 1fr) 150px 60px; }
    .gio-riga .az { grid-column: 1 / -1; justify-content: flex-start; }
    .gio-nuova { grid-template-columns: 1fr; }
}

/* «Ho fatto una cosa»: il bottone nella barra in alto, su ogni pagina.

   Non e' il pulsante piu' importante della schermata — quello e' sempre
   dentro la pagina che si sta guardando — ma dev'essere trovabile senza
   cercarlo, sempre nello stesso punto. Sta a sinistra di «Guarda come» e
   dell'interruttore del tema, che sono comandi e non lavoro. */
.topbar .gio-fatto {
    flex: none; margin-left: auto;
    padding: 6px 13px; font-size: 12.5px; white-space: nowrap;
}
/* quando c'e' il bottone, e' lui a spingere a destra: il nome della persona
   torna ad essere solo testo e non deve piu' fare da distanziatore */
.topbar .who:has(~ .gio-fatto) { margin-left: 0; }

@media (max-width: 700px) {
    .topbar .gio-fatto { padding: 6px 10px; font-size: 12px; }
}

/* il riquadro: la stessa finestra delle azioni sul cliente, con dentro tre
   domande invece di un elenco di voci */
.gio-riquadro { width: min(430px, calc(100vw - 32px)); }
.gio-riquadro .az-corpo { padding: 14px; }

/* ⚠ Il riquadro deve poter scorrere: dall'11/09 le domande sono fino a
   sei, e su un portatile basso il fondo con «Fatto» finirebbe sotto il
   bordo dello schermo. Ma un <dialog> che scorre taglia quello che esce, e
   la tendina dei saloni prima cadeva FUORI (si vedevano due nomi e mezzo).
   Quindi qui la tendina non galleggia: sta dentro, e spinge giù il resto. */
.gio-riquadro { overflow-y: auto; max-height: calc(100vh - 32px); }
.gio-riquadro .cli-cerca-campo { max-width: none; }
.gio-riquadro .drop { position: static; max-height: 220px; border-top: 1px solid var(--line-mid); }

.gio-riquadro-campo { margin-bottom: 12px; }
.gio-riquadro-campo label { display: block; }
.gio-riquadro-campo .k { color: var(--ink-faint); font-weight: 400; }

.gio-riquadro-avviso {
    margin: 0 0 14px; padding: 8px 11px; border-radius: 7px;
    background: var(--warn-bg); color: var(--ink);
    border-left: 3px solid var(--warn); font-size: 12px;
}

.gio-riquadro-fondo {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
}

/* la conferma resta dentro la finestra: chi ha appena scritto una cosa vuole
   sapere che e' arrivata, non cambiare pagina */
.gio-riquadro-esito {
    margin: 14px 0 0; padding: 9px 11px; border-radius: 7px;
    background: var(--ok-bg); color: var(--ok);
    font-size: 12.5px; line-height: 1.45;
}

/* quello che manca per chiudere: detto in parole, dentro il riquadro, e il
   riquadro resta aperto. Chi preme «Fatto» e non succede niente pensa che il
   gestionale sia rotto. */
.gio-riquadro-manca {
    margin: 14px 0 0; padding: 9px 11px; border-radius: 7px;
    background: var(--warn-bg); color: var(--ink);
    border-left: 3px solid var(--warn); font-size: 12.5px;
}

/* i tasti dei minuti portano anche «½ giornata»: larghi quanto il loro
   testo, non 44 pixel fissi */
.gio-min-rapidi button { width: auto; min-width: 44px; padding: 0 10px; }
.gio-min-libero { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.gio-min-libero .inp { width: 70px; text-align: center; }

/* «è finita»: tre scelte, e l'ora compare solo quando serve */
.gio-etichetta { display: block; margin-bottom: 4px; }
.gio-quando { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.gio-quando button {
    font: inherit; font-size: 12.5px; cursor: pointer; height: 34px; padding: 0 11px;
    background: var(--white); color: var(--ink-soft);
    border: 1px solid var(--line-mid); border-radius: 6px;
}
.gio-quando button:hover { border-color: var(--accento); color: var(--accento); background: var(--accento-velo); }
.gio-quando button.on { background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 600; }
.gio-quando .inp { width: 110px; }

/* le due viste, e di chi: schede piccole, non un secondo menu */
.gio-viste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
.gio-schede { display: inline-flex; border: 1px solid var(--line-mid); border-radius: 7px; overflow: hidden; }
.gio-schede a {
    padding: 6px 14px; font-size: 13px; text-decoration: none;
    color: var(--ink-soft); background: var(--white);
}
.gio-schede a + a { border-left: 1px solid var(--line-mid); }
.gio-schede a:hover { color: var(--accento); text-decoration: none; }
.gio-schede a.on { background: var(--ink); color: var(--white); font-weight: 600; }

/* quando è stata scritta o corretta: c'è, e non urla */
.gio-traccia {
    display: block; margin-top: 3px; font-size: 11px; color: var(--ink-faint);
    font-style: italic;
}
.gio-traccia::before { content: "↺ "; font-style: normal; }

/* il parlato misurato dal centralino, sotto i minuti che valgono */
.gio-al-tel { display: block; font-size: 11px; font-weight: 400; color: var(--ink-faint); }

.gio-certezza { margin: 0 0 8px; font-size: 12px; }

/* l'ora di pranzo non è un buco: sta sotto la barra, dove nasce la domanda */
.gio-pausa { margin: 10px 0 0; font-size: 12px; }

/* il report: dove va il tempo, una riga per tipo di lavoro.
   La barra è l'unico grafico della pagina, e serve a far vedere in un colpo
   d'occhio se una voce sola si mangia il mese. */
.gio-tipo {
    display: flex; align-items: center; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--line);
}
.gio-tipo:last-child { border-bottom: 0; }
.gio-tipo-nome { flex: 0 0 clamp(140px, 26%, 260px); min-width: 0; }
.gio-tipo-nome b { display: block; font-size: 14px; }
.gio-tipo-nome .k { display: block; font-size: 11px; }
.gio-tipo-barra { flex: 1; height: 10px; background: var(--riga-alt, rgba(127,127,127,.15)); border-radius: 5px; overflow: hidden; }
.gio-tipo-barra span { display: block; height: 100%; background: var(--accento); border-radius: 5px; }
.gio-tipo-min { flex: 0 0 96px; text-align: right; font-size: 14px; font-weight: 600; }
.gio-tipo-min .k { display: block; font-weight: 400; font-size: 11px; }

@media (max-width: 640px) {
    .gio-tipo { flex-wrap: wrap; }
    .gio-tipo-nome { flex-basis: 100%; }
    .gio-tipo-min { flex-basis: auto; }
}

/* il mestiere accanto al nome: dice perché quella riga ha più arancione */
.gio-mestiere {
    display: block; font-weight: 400; font-size: 11.5px;
    text-transform: lowercase; letter-spacing: .02em;
}

/* la settimana: una riga per persona, una casella per giorno. La tabella è
   l'unica cosa che può essere più larga dello schermo, e scorre da sola. */
.gio-tabella-scorre { overflow-x: auto; }
.gio-settimana { width: 100%; border-collapse: collapse; min-width: 640px; }
.gio-settimana th, .gio-settimana td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gio-settimana thead th { font-size: 12px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.gio-settimana tbody th { font-size: 14px; white-space: nowrap; }
.gio-settimana tbody tr:last-child > * { border-bottom: 0; }
.gio-ore { display: block; font-weight: 400; font-size: 11.5px; }
/* ⚠ solo il link fa da blocco: una <td> in display:block esce dalla tabella,
   e le caselle della settimana finivano una sotto l'altra */
.gio-cella a { display: block; text-decoration: none; color: var(--ink); }
.gio-cella a:hover { text-decoration: none; }
.gio-cella a:hover .cifre:first-child { color: var(--accento); }
.gio-cella .cifre:first-child { font-size: 15px; font-weight: 600; }
.gio-cella .k { display: block; font-size: 11px; }
.gio-cella.assente { background: var(--grey-bg); color: var(--ink-faint); }
.gio-cella.totale { background: var(--grey-bg); }
/* un'ora o più senza nome è l'unica casella che chiede di essere aperta */
.gio-senza { display: block; font-size: 11.5px; color: var(--accento-cupo); font-weight: 600; }
.gio-cella.guarda { box-shadow: inset 3px 0 0 var(--accento); }

.gio-note { margin: 12px 0 0; padding-left: 18px; font-size: 12px; color: var(--ink-soft); }
.gio-note li { margin-bottom: 3px; }

.gio-saloni { width: 100%; border-collapse: collapse; min-width: 560px; }
.gio-saloni th, .gio-saloni td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
.gio-saloni thead th { font-size: 12px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.gio-saloni .num { text-align: right; }
.gio-saloni td.k { font-size: 12px; }
.gio-saloni a { color: var(--ink); text-decoration: none; }
.gio-saloni a:hover { color: var(--accento); text-decoration: underline; }
/* sotto i 20 € per ora di lavoro: è lì che un contratto va riguardato */
.gio-poco { color: var(--crit); font-weight: 600; }
.gio-come { font-size: 12px; line-height: 1.45; min-width: 190px; }
.gio-come > span { display: block; }

/* la storia del prezzo, sotto i servizi: si legge dall'alto in basso, dal
   piu' recente. Stessa forma del diario dei lavori. */
.cli-storia { font-size: 12.5px; }
.cli-storia > div {
    display: grid; grid-template-columns: 78px 1fr; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--line);
}
.cli-storia > div:last-child { border-bottom: 0; }
.cli-storia .quando {
    font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.cli-storia .chi { color: var(--ink-faint); }
.cli-storia b { font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────
   Il prezzo di un servizio su un salone.

   ⚠ Il primo disegno metteva i quattro campi dentro la riga della tabella,
   e il campo «perche'» finiva largo tre caratteri. Nella riga ci va il
   NUMERO — quanto paga — e per cambiarlo si apre un riquadro, dove i campi
   hanno lo spazio per spiegarsi. Bocciato dall'utente il 09/09/2026.
   ───────────────────────────────────────────────────────────────────────── */

/* la riga: quanto paga, e sotto in piccolo il confronto */
.srv-paga b { font-size: 14.5px; }
.srv-paga .invece,
.srv-paga .margine { display: block; font-size: 11.5px; color: var(--ink-faint); }
.srv-paga .margine.perde { color: var(--crit); font-weight: 600; }

/* il riquadro: piu' largo della modale delle azioni, perche' qui si legge
   una spiegazione e non si sceglie una voce */
.srv-modale { width: min(520px, calc(100vw - 32px)); }
.srv-modale .az-corpo { padding: 16px; }

/* La scelta fra percentuale e prezzo pattuito, con scritto cosa cambia.
   Non e' contorno: sbagliarla si paga al primo aumento di listino, e la
   differenza non e' ovvia per chi non ci ha pensato. */
.srv-scelta { display: grid; gap: 8px; margin-bottom: 16px; }
.srv-scelta label {
    display: flex; gap: 10px; align-items: flex-start; margin: 0;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.srv-scelta label:hover { border-color: var(--accento); background: var(--accento-velo); }
.srv-scelta input { margin: 2px 0 0; width: auto; flex: none; }
.srv-scelta b { display: block; font-size: 13.5px; }
.srv-scelta .k { display: block; font-size: 11.5px; line-height: 1.4; }
.srv-scelta label:has(input:checked) {
    border-color: var(--accento); background: var(--accento-velo);
}

.srv-campi { margin-bottom: 14px; }
.srv-campi label { display: block; margin: 0; }

/* il campo con la sua unita' attaccata: «50 %», «12,50 €» */
.srv-unita { display: flex; align-items: center; gap: 8px; }
.srv-unita .inp { width: 120px; text-align: right; font-size: 15px; }
.srv-unita > span { font-size: 14px; color: var(--ink-soft); }

/* i tre sconti che si fanno davvero, piu' il gratis da cui e' nata la
   richiesta: a un tocco, perche' scrivere «100» a mano per dire «non lo
   paga» e' il genere di cosa che si rimanda */
.srv-rapidi { display: flex; gap: 6px; margin-top: 8px; }
.srv-rapidi button {
    font: inherit; font-size: 12.5px; cursor: pointer; height: 30px; padding: 0 12px;
    background: var(--white); color: var(--ink-soft);
    border: 1px solid var(--line-mid); border-radius: 6px;
}
.srv-rapidi button:hover { border-color: var(--accento); color: var(--accento); background: var(--accento-velo); }

.srv-riga { display: block; margin: 0 0 14px; }
.srv-riga .inp { width: 100%; }
.srv-riga .inp-corto { width: 170px; }
.srv-riga > .k { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.45; }

/* il conto, gia' fatto, prima di salvare: e' la domanda per cui si e' aperta
   la finestra. In rosso quando su quel salone ci rimettiamo — il numero che
   il titolare ha chiesto di poter vedere. */
.srv-conto {
    margin: 0 0 14px; padding: 10px 12px; border-radius: 7px;
    background: var(--grey-bg); font-size: 13px; line-height: 1.5;
    border-left: 3px solid var(--line-mid);
}
.srv-conto.perde { background: var(--crit-bg); color: var(--crit); border-left-color: var(--crit); font-weight: 500; }
.srv-conto.avvisa { background: var(--warn-bg); color: var(--ink); border-left-color: var(--warn); }

.srv-fondo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ===========================================================================
   IL LISTINO — 16/09/2026

   Prima era sei pannelli, uno per categoria, con dentro sei tabelle diverse:
   le colonne non si allineavano mai fra una categoria e l'altra, e ogni riga
   era un form con quattro caselle di testo sempre aperte. Con i campi nuovi
   (codice, descrizione, pagamento annuale, quantita', IVA) non ci stava piu'
   niente: adesso la tabella e' una sola, si legge, e si modifica da un popup.
   =========================================================================== */

/* la riga che apre una famiglia dentro l'unica tabella */
.lst-fam td {
    background: var(--grey-bg); font-size: 11.5px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
    padding: 7px 12px; border-bottom: 1px solid var(--line-mid);
}

.lst-cod  { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.lst-desc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; max-width: 46ch; }
.lst-alt  { font-size: 11px; color: var(--ink-faint); display: block; margin-top: 2px; }
.lst-neg  { color: var(--crit); }

/* Listino, colonna «Ce l'hanno»: due liste che si aprono.
   ⚠ Il secondo numero è quello che vale — «312 saloni non hanno gli SMS» non è
   una statistica, è il bacino di una campagna — quindi è scritto come
   un'azione e non come un dato in più. */
.lst-chi a       { color: var(--accento); text-decoration: none; }
.lst-chi a:hover { text-decoration: underline; }
.lst-chi .lst-no { font-weight: 600; }
.lst-chi .lst-sep { color: var(--ink-faint); margin: 0 2px; }
.lst-nome { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.lst-prezzo b { font-size: 13.5px; }

/* il popup di modifica: e' il <dialog class="modale"> di sempre, con due
   differenze.

   ⚠ Piu' largo dei 560px di serie: dentro ci sono dodici campi, e a 560
     andrebbero tutti in colonna facendo una finestra lunga due schermate.
   ⚠ Scorre. E' la lezione del riquadro della Giornata (11/09): un <dialog>
     che non scorre, su un portatile basso, si porta il fondo con «Salva»
     sotto il bordo dello schermo. */
dialog.modale.lst-modale {
    width: min(780px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.lst-griglia  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.lst-griglia3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
@media (max-width: 620px) {
    .lst-griglia, .lst-griglia3 { grid-template-columns: minmax(0, 1fr); }
}

.lst-fondo {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
}
.lst-fondo .k { flex: 1; min-width: 200px; }

/* «hai cambiato il prezzo»: compare solo quando e' cambiato qualcosa che
   costa, e porta con se' il campo del perche' */
.lst-cambiato {
    margin: 16px 0 0; padding: 8px 11px; border-radius: 7px;
    background: var(--warn-bg); color: var(--ink);
    border-left: 3px solid var(--warn); font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Le idee (23/09/2026)
   Nell'elenco solo quanti voti: a chi piace si legge aprendo l'idea.
   --------------------------------------------------------------------------- */
.idee-riga {
    display: grid; grid-template-columns: 70px minmax(0, 1fr) 150px 110px; gap: 14px;
    padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: start;
}
.idee-riga:last-child { border-bottom: 0; }
.idee-riga:hover { background: var(--grey-bg); }
.idee-titolo { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.idee-sotto { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* il voto: il numero, e sotto il pulsante. Votata = tutta arancione */
.voti { margin: 0; }
.voti button {
    width: 100%; border: 1px solid var(--line-mid); border-radius: 6px; text-align: center;
    padding: 6px 0 0; background: var(--card); cursor: pointer; line-height: 1.1;
    font: inherit; color: var(--ink); overflow: hidden;
}
.voti button:hover { border-color: var(--accento); }
.voti button:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.voti b { display: block; font-size: 18px; }
.voti .pul { display: block; font-size: 11px; font-weight: 600; color: var(--accento-cupo); padding: 3px 0 4px; margin-top: 2px; }
.voti.mio button { border-color: var(--accento); background: var(--accento-velo); }
.voti.mio b { color: var(--accento); }
.voti.mio .pul { color: #fff; background: var(--accento); }

/* per cosa è: un colore per prodotto, sempre lo stesso */
.prod { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.prod.image    { background: #E8F1FB; color: #1D4E89; }
.prod.bbook    { background: #F5E9F7; color: #7A2E8A; }
.prod.magazine { background: #E9F5F2; color: #1F6B5A; }
.prod.altro    { background: var(--grey-bg); color: var(--ink-soft); border: 1px solid var(--line); }

.stato-idea { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 12px; white-space: nowrap; display: inline-block; }
.stato-idea.nuova     { background: var(--warn-bg); color: var(--warn); }
.stato-idea.valutare  { background: var(--grey-bg); color: var(--ink-soft); border: 1px solid var(--line); }
.stato-idea.programma { background: #E8F1FB; color: #1D4E89; }
.stato-idea.lavoro    { background: var(--accento-velo); color: var(--accento-cupo); }
.stato-idea.fatta     { background: var(--ok-bg); color: var(--ok); }
.stato-idea.scartata  { background: var(--crit-bg); color: var(--crit); }

:root[data-tema="scuro"] .prod.image,
:root[data-tema="scuro"] .stato-idea.programma { background: #1C2A3B; color: #9CC3F0; }
:root[data-tema="scuro"] .prod.bbook    { background: #2E2033; color: #D9A6E5; }
:root[data-tema="scuro"] .prod.magazine { background: #1B2E29; color: #8FD3BF; }

.tabs-prod { display: flex; border-bottom: 1px solid var(--line-mid); margin-bottom: 14px; flex-wrap: wrap; }
.tabs-prod a {
    padding: 9px 16px; color: var(--ink-soft); font-size: 13.5px; border-bottom: 2px solid transparent;
    margin-bottom: -1px; text-decoration: none;
}
.tabs-prod a b { color: var(--ink-faint); font-weight: 500; margin-left: 4px; }
.tabs-prod a.on { color: var(--ink); border-bottom-color: var(--accento); font-weight: 600; }

.scelta-prod { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.scelta-prod label {
    border: 1px solid var(--line-mid); border-radius: 6px; padding: 12px; cursor: pointer;
    display: flex; flex-direction: column; gap: 3px; background: var(--card); font-weight: 400;
}
.scelta-prod label:has(input:checked) { border-color: var(--accento); background: var(--accento-velo); box-shadow: 0 0 0 1px var(--accento); }
.scelta-prod label:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; }
.scelta-prod label b { font-size: 14px; }
.scelta-prod input { position: absolute; opacity: 0; pointer-events: none; }

.pillole { display: flex; gap: 8px; flex-wrap: wrap; }
.pillole label {
    border: 1px solid var(--line-mid); border-radius: 16px; padding: 5px 12px; font-size: 13px;
    cursor: pointer; font-weight: 400; margin: 0;
}
.pillole label:has(input:checked) { border-color: var(--accento); background: var(--accento-velo); color: var(--accento-cupo); font-weight: 600; }
.pillole input { position: absolute; opacity: 0; pointer-events: none; }

.idee-simile { padding: 10px 0; border-bottom: 1px dashed var(--line-mid); }
.idee-simile:last-child { border-bottom: 0; }

.idee-persona { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.idee-persona:last-child { border-bottom: 0; }
.idee-persona.stretta { padding: 5px 0; border-bottom: 0; }
.idee-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: #3A4450; color: #fff;
    display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.idee-avatar.io { background: var(--accento); }
.idee-testo { white-space: pre-wrap; overflow-wrap: anywhere; }

.idee-due { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }

@media (max-width: 900px) {
    .idee-riga { grid-template-columns: 58px minmax(0, 1fr); }
    .idee-riga > :nth-child(3), .idee-riga > :nth-child(4) { grid-column: 2; }
    .scelta-prod { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .idee-due { grid-template-columns: minmax(0, 1fr); }
}

/* il dettaglio di un'idea (23/09/2026): cosa chiede si deve notare per primo */
.blocco-idea { border-radius: 8px; padding: 14px 18px; }
.blocco-idea .etichetta {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 6px;
}
.blocco-idea p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.blocco-idea.vuole { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accento); }
.blocco-idea.vuole .etichetta { color: var(--accento-cupo); }
.blocco-idea.oggi { background: var(--warn-bg); border: 1px solid var(--warn-bg); border-left: 4px solid var(--warn); }
.blocco-idea.oggi .etichetta { color: var(--warn); }

.cifre-idea { display: flex; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cifre-idea > div { flex: 1 1 160px; padding: 12px 16px; border-right: 1px solid var(--line); }
.cifre-idea > div:last-child { border-right: 0; }
.cifre-idea b { display: block; font-size: 20px; color: var(--ink); }
.cifre-idea b.parole { font-size: 15px; padding-top: 4px; }
.cifre-idea span { font-size: 12px; color: var(--ink-soft); }

/* il voto si toglie ripremendo: sotto il mouse lo si dice (23/09/2026) */
.voti.mio button:hover .pul { font-size: 0; background: var(--accento-cupo); }
.voti.mio button:hover .pul::after { content: '✕ togli'; font-size: 11px; }

/* ---------- un interruttore sì/no (24/09/2026, la propria scheda) ----------
   Una casella vera sotto, nascosta alla vista ma non alla tastiera: il
   segno è solo il disegno. Acceso = arancione, come ogni cosa che agisce. */
.interruttore { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; max-width: 620px; }
.interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruttore-segno {
    flex: none; position: relative; width: 38px; height: 22px; margin-top: 1px;
    background: var(--line-mid); border-radius: 11px; transition: background .15s;
}
.interruttore-segno::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.interruttore input:checked + .interruttore-segno { background: var(--accento); }
.interruttore input:checked + .interruttore-segno::after { transform: translateX(16px); }
.interruttore input:focus-visible + .interruttore-segno { outline: 2px solid var(--accento); outline-offset: 2px; }

/* ---------- la finestra dopo un «vinta» (24/09/2026) ----------
   Era una fascia in cima alla pagina, e chi premeva «Vinta» in fondo a un
   elenco non la vedeva. Dentro restano gli stessi riquadri di prima. */
.sv-finestra { width: min(600px, calc(100vw - 32px)); }
.sv-corpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sv-corpo .cli-invito { margin: 0; }
.sv-corpo .cli-invito > b { display: block; margin-bottom: 4px; }
.sv-fondo { display: flex; justify-content: flex-end; padding: 0 14px 12px; }
/* la nota per chi riceve il servizio venduto: un campo e basta */
.sv-nota { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sv-nota textarea { width: 100%; resize: vertical; font-size: 13px; }

/* La quota dei video, in cima a ogni pagina di chi li gira (25/09/2026).
   Neutra quando si è in pari, rossa quando si è indietro o c'è qualcosa di
   scaduto, verde a quota fatta: il colore è tutto quello che si legge
   passando, il testo è per chi si ferma. */
.quota-video {
    display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
    background: var(--card); color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
    padding: 7px 24px; font-size: 12.5px;
}
.quota-video b { color: var(--ink); }
.quota-video.indietro { background: var(--crit-bg); color: var(--crit); border-bottom-color: color-mix(in srgb, var(--crit) 35%, transparent); }
.quota-video.indietro b { color: var(--crit); }
.quota-video.fatta { background: var(--ok-bg); color: var(--ok); }
.quota-video.fatta b { color: var(--ok); }
.quota-video a { color: inherit; font-weight: 600; }
.vid-scaduto { color: var(--crit); font-weight: 600; }
@media (max-width: 900px) { .quota-video { padding: 7px 16px; } }

/* Video dei tecnici (25/09/2026): i filtri per stato, il link accanto a
   «Fatto», il video da controllare in evidenza. */
.vid-stati { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.vid-stati a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 12.5px; color: var(--ink-soft); text-decoration: none; background: var(--card);
}
.vid-stati a:hover { border-color: var(--accento); color: var(--ink); }
.vid-stati a.on { border-color: var(--accento); background: var(--accento-velo); color: var(--accento-cupo); font-weight: 600; }
.vid-stati a.da-guardare:not(.on) { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.vid-stati a.grave:not(.on) { border-color: color-mix(in srgb, var(--crit) 40%, transparent); color: var(--crit); }
.vid-stati .num-col { font-weight: 600; }
.vid-col-link { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vid-col-link .inp { min-width: 0; flex: 1 1 170px; }
.vid-guarda { margin-top: 6px; display: inline-block; }
.vid-da-guardare {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin-top: 12px; padding: 10px 12px; border-radius: 8px;
    background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.vid-da-guardare .vid-col-link { flex: 1 1 280px; }
.vid-link-testo { word-break: break-all; }