/* =====================================================================================================
   Gestionale Domus Clima — stile grafico unico per tutti i moduli (regole complete: docs/stile-grafico.md)

   1. Variabili (colori, misure, ombre): ogni colore e ogni misura si prende da qui, mai scritto a mano
   2. Base e impaginazione (menu a sinistra, contenuto, testate di pagina)
   3. Componenti comuni: pulsanti, campi, menu a tendina, selettori, etichette, messaggi, tabelle, schede, finestre
   4. Moduli: planner, schede attivita', contratti, macchine, allegati, accesso, aggiornamento dati
   ===================================================================================================== */

/* ---------------------------------------------------------------- 1. variabili */
:root {
    /* marchio: #0E3C5F #6FAEDE #78CEFF #B9ECFF */
    --primario: #0e3c5f;          /* blu notte: menu, titoli, testate dei giorni */
    --primario-medio: #2b6a99;
    --azione: #1f6fb2;            /* pulsanti principali, collegamenti, elemento scelto, bordo del campo attivo */
    --azione-scuro: #175a92;
    --azione-tenue: #e8f2fb;      /* sfondo di cio' che e' scelto / evidenziato */
    --accento: #6faede;
    --azzurro: #78ceff;
    --azzurro-chiaro: #b9ecff;
    --azzurro-tenue: #eaf5fc;

    /* neutri (grigio-azzurro) */
    --sfondo: #f4f5f7;            /* fondo della pagina: grigio neutro, diverso dall'azzurro del menu */
    --carta: #ffffff;             /* fondo di schede, tabelle, campi */
    --superficie: #edf2f7;        /* fondo di selettori, testate di tabella, zone secondarie */
    --fascia: linear-gradient(90deg, #0e3c5f 0%, #1a5a8c 55%, #1f6fb2 100%);   /* fascia in alto delle pagine: blu del marchio */
    --fascia-bordo: #0a2d48;
    --fascia-testo: #ffffff;
    --fascia-tenue: rgba(255, 255, 255, .78);
    --bordo: #e1e8ef;
    --bordo-forte: #c6d3df;       /* bordo dei campi */
    --testo: #142536;
    --testo-tenue: #5c6e80;
    --testo-lieve: #8796a5;

    /* significati: testo / sfondo / bordo */
    --ok: #1d8556;       --ok-tenue: #e6f5ed;       --ok-bordo: #bfe3cf;
    --avviso: #8a5a00;   --avviso-tenue: #fff5dc;   --avviso-bordo: #f1d899;
    --pericolo: #b42d2d; --pericolo-tenue: #fdecec; --pericolo-bordo: #f4c7c7;
    --rosso: #d64545;    /* scaduto */

    /* menu laterale */
    /* (l'intestazione del menu usa lo stesso blu della fascia: --fascia) */
    --menu-sfondo: #cfe3f4;         /* voci del menu: azzurro del marchio, ben diverso dal grigio della pagina */
    --menu-bordo: #a9cae6;
    --menu-hover: rgba(14, 60, 95, .09);
    --menu-attivo: #ffffff;
    --menu-testo: #133049;
    --menu-tenue: #48627a;
    --menu-icona: #1f5f94;

    /* misure */
    --larghezza-menu: 236px;
    --altezza-barra: 0px;         /* barra in alto: solo sul telefono (vedi in fondo) */
    --margine-pagina: 24px;
    --altezza-controllo: 34px;    /* pulsanti piccoli, menu a tendina, selettori: tutti alti uguali */
    --raggio-s: 6px;
    --raggio-m: 9px;
    --raggio-l: 14px;
    --ombra-1: 0 1px 2px rgba(14, 60, 95, .06), 0 1px 3px rgba(14, 60, 95, .08);
    --ombra-2: 0 6px 18px rgba(14, 60, 95, .14);
    --ombra-3: 0 24px 60px rgba(14, 60, 95, .35);
    --anello: 0 0 0 3px rgba(31, 111, 178, .22);   /* bordo luminoso del campo attivo */
    --carattere: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;   /* carattere di tutto il gestionale (quello di Windows) */
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6e80' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 2. base e impaginazione */
* { box-sizing: border-box; }
body {
    margin: 0;
    font: 15px/1.45 var(--carattere);
    font-variant-numeric: tabular-nums;   /* cifre tutte larghe uguali: gli importi restano in colonna */
    color: var(--testo); background: var(--sfondo);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--azione); }
.icona { width: 20px; height: 20px; flex: none; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--azione); outline-offset: 2px; }

/* barra in alto: solo sul telefono, con il pulsante del menu e il logo */
.barra {
    display: none; position: fixed; top: 0; right: 0; left: 0; height: var(--altezza-barra); z-index: 30;
    align-items: center; gap: 12px; padding: 0 16px;
    background: var(--carta); border-bottom: 1px solid var(--bordo); color: var(--testo);
}
.barra-menu { display: flex; cursor: pointer; padding: 6px; margin-left: -6px; border-radius: var(--raggio-s); color: var(--primario); }
.barra-menu .icona { width: 24px; height: 24px; }
.barra-logo img { height: 36px; display: block; }

/* menu laterale: intestazione blu (come la fascia in alto delle pagine) con logo, data e utente,
   poi le voci su fondo chiaro: si vede subito dove inizia il menu */
.menu {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--larghezza-menu); z-index: 40;
    display: flex; flex-direction: column; overflow-y: auto; padding: 0 12px;
    background: var(--menu-sfondo); color: var(--menu-testo);
    border-right: 2px solid var(--menu-bordo); box-shadow: 4px 0 14px -6px rgba(14, 60, 95, .25);
    scrollbar-width: thin; scrollbar-color: var(--menu-bordo) transparent;
}
.menu-intestazione {
    margin: 0 -12px 12px; padding: 0 12px 10px;
    background: var(--fascia); color: var(--fascia-testo);
    border-bottom: 1px solid var(--fascia-bordo); box-shadow: 0 6px 16px -6px rgba(14, 60, 95, .45);
}
.menu-marchio { display: flex; justify-content: center; padding: 14px 8px 6px; }
.menu-marchio img { height: 56px; display: block; }
.menu-data { text-align: center; font-size: 12px; color: var(--fascia-tenue); padding-bottom: 8px; }
.menu-data::first-letter { text-transform: uppercase; }
/* utente: riga compatta; cliccando si aprono "Suono dei clic", "Cambia password", "Esci" */
.utente { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 8px; }
.utente summary {
    display: flex; align-items: center; gap: 10px; padding: 4px 6px; cursor: pointer; list-style: none; border-radius: var(--raggio-s);
}
.utente summary::-webkit-details-marker { display: none; }
.utente summary:hover { background: rgba(255, 255, 255, .1); }
.utente-avatar {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--azzurro); color: var(--primario); font-weight: 700; font-size: 13px;
}
.utente-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.utente-nome strong { color: var(--fascia-testo); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utente-nome small { color: var(--fascia-tenue); font-size: 12px; }
.utente .menu-freccia { margin-left: auto; color: var(--fascia-testo); }
.utente[open] .menu-freccia { transform: rotate(90deg); }
.utente-tendina { padding: 4px 0 0; }
.utente-tendina a, .utente-tendina button {
    display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: var(--raggio-s); background: none;
    font: inherit; font-size: 13.5px; color: var(--fascia-tenue); text-decoration: none; cursor: pointer;
}
.utente-tendina a:hover, .utente-tendina button:hover { background: rgba(255, 255, 255, .12); color: var(--fascia-testo); }
.utente-tendina form { margin: 0; }
/* "Nuova attivita'": il pulsante piu' importante del gestionale, bianco sul blu dell'intestazione, in ogni pagina */
.pulsante.nuova-attivita {
    width: 100%; height: 44px; margin-top: 10px; gap: 10px; justify-content: flex-start; padding: 0 10px 0 6px;
    background: var(--carta); color: var(--primario); font-size: 15px; font-weight: 700; border-radius: var(--raggio-m);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}
.pulsante.nuova-attivita:hover { background: var(--azzurro-chiaro); }
.nuova-attivita-piu {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--azione); color: #fff; font-size: 22px; font-weight: 700; line-height: 1;
}
.nuova-attivita kbd {
    margin-left: auto; font: inherit; font-size: 11px; font-weight: 700; color: var(--testo-tenue);
    border: 1px solid var(--bordo-forte); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px;
}
/* sul telefono (menu chiuso): pulsante tondo fisso in basso a destra */
.nuova-attivita-volante { display: none; }

/* voci del menu su fondo chiaro: la voce della pagina aperta e' bianca, con la barretta blu a sinistra */
.menu-sezione {
    margin: 16px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--menu-tenue);
}
.menu-voce {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: 1px 0; border-radius: var(--raggio-m);
    color: var(--menu-testo); text-decoration: none; font-size: 14.5px; font-weight: 500;
    cursor: pointer; list-style: none; user-select: none; transition: background .12s, color .12s;
}
.menu-voce::-webkit-details-marker { display: none; }
.menu-voce .icona { color: var(--menu-icona); transition: color .12s; }
.menu-voce:hover { background: var(--menu-hover); color: var(--primario); }
.menu-voce:hover .icona { color: var(--azione); }
.menu-voce.attiva { background: var(--menu-attivo); color: var(--azione-scuro); font-weight: 700; box-shadow: var(--ombra-1); }
.menu-voce.attiva::before {
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--azione);
}
.menu-voce.attiva .icona, .menu-voce.aperta .icona { color: var(--azione); }
.menu-gruppo[open] > .menu-voce { color: var(--primario); }
.menu-freccia { margin-left: auto; display: flex; transition: transform .15s; opacity: .6; }
.menu-freccia .icona { width: 16px; height: 16px; color: currentColor; }
.menu-gruppo[open] .menu-freccia { transform: rotate(90deg); }
.menu-sottovoci { margin: 2px 0 6px 22px; padding-left: 12px; border-left: 1px solid var(--menu-bordo); }
.menu-sottovoce {
    display: block; padding: 6px 10px; margin: 1px 0; border-radius: var(--raggio-s);
    color: var(--menu-tenue); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background .12s, color .12s;
}
.menu-sottovoce:hover { background: var(--menu-hover); color: var(--primario); }
.menu-sottovoce.attiva { color: var(--azione-scuro); background: var(--menu-attivo); font-weight: 700; }
.menu-piede { margin-top: auto; padding: 16px 12px 14px; font-size: 11px; letter-spacing: .06em; color: var(--menu-tenue); opacity: .8; }
.menu-velo { display: none; }
/* pulsante provvisorio "Aggiorna dati da Access" in fondo al menu */
.menu-aggiorna {
    display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding: 9px 12px; border-radius: var(--raggio-m);
    border: 1px dashed var(--azione); color: var(--azione); font-size: 13.5px; font-weight: 700; text-decoration: none;
    transition: background .12s;
}
.menu-aggiorna:hover, .menu-aggiorna.attiva { background: var(--menu-attivo); color: var(--azione-scuro); }
.menu-aggiorna + .menu-piede { margin-top: 0; }

/* contenuto: tutta la larghezza a destra del menu */
.contenuto { margin-left: var(--larghezza-menu); padding: calc(var(--altezza-barra) + 20px) var(--margine-pagina) 40px; }
.pagina-titolo { margin: 0; font-size: 24px; font-weight: 700; color: var(--primario); letter-spacing: -.01em; line-height: 1.2; }
.pagina-sotto { margin: 4px 0 20px; color: var(--testo-tenue); font-size: 14px; }
.sezione-titolo { font-size: 17px; font-weight: 700; color: var(--primario); margin: 28px 0 12px; }
.vuoto { color: var(--testo-tenue); }
/* fascia in alto di ogni pagina (.testa-pagina, nel planner .planner-testa): blu, a tutta larghezza, fissa mentre
   si scorre, tutto su una riga (va a capo solo se manca spazio): titolo | ricerca e filtri | azione principale a destra */
.testa-pagina, .planner-testa {
    position: sticky; top: var(--altezza-barra); z-index: 7;
    display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
    margin: -20px calc(-1 * var(--margine-pagina)) 16px; padding: 10px var(--margine-pagina); min-height: 56px;
    background: var(--fascia); border-bottom: 1px solid var(--fascia-bordo); box-shadow: 0 6px 16px -6px rgba(14, 60, 95, .45);
    color: var(--fascia-testo);
}
.testa-pagina .pagina-titolo { font-size: 18px; }
.testa-pagina .pagina-sotto { margin: 1px 0 0; font-size: 12px; }
.testa-pagina > :last-child:not(:first-child) { margin-left: auto; }
/* elementi sopra la fascia blu: testi chiari, selettori velati, pulsante principale azzurro */
:is(.testa-pagina, .planner-testa) .pagina-titolo { color: var(--fascia-testo); }
:is(.testa-pagina, .planner-testa) .pagina-sotto { color: var(--fascia-tenue); }
:is(.testa-pagina, .planner-testa) .pagina-sotto :is(a, strong) { color: var(--fascia-testo); }
:is(.testa-pagina, .planner-testa) .selettore { background: rgba(255, 255, 255, .14); }
:is(.testa-pagina, .planner-testa) .selettore a { color: var(--fascia-tenue); }
:is(.testa-pagina, .planner-testa) .selettore a:hover { color: var(--fascia-testo); }
:is(.testa-pagina, .planner-testa) .selettore a.attivo { background: var(--carta); color: var(--primario); }
:is(.testa-pagina, .planner-testa) .selettore a:not(.attivo) .conta-pannello { background: rgba(255, 255, 255, .22); color: var(--fascia-testo); }
:is(.testa-pagina, .planner-testa) .pulsante.primario { background: var(--azzurro); color: var(--primario); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
:is(.testa-pagina, .planner-testa) .pulsante.primario:hover { background: #a3defe; }
:is(.testa-pagina, .planner-testa) .pulsante.primario .conta-pannello { background: var(--primario); color: #fff; }
:is(.testa-pagina, .planner-testa) .pulsante.secondario { border-color: transparent; }
:is(.testa-pagina, .planner-testa) .filtro-operatore select { border-color: transparent; }
:is(.testa-pagina, .planner-testa) .filtro-operatore select.filtro-attivo { background-color: var(--azzurro-chiaro); color: var(--primario); border-color: var(--azzurro); }
:is(.testa-pagina, .planner-testa) .separatore { background: rgba(255, 255, 255, .28); }
:is(.testa-pagina, .planner-testa) .azzera-filtri { color: #ffc9c9; }
:is(.testa-pagina, .planner-testa) .azzera-filtri:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- 3. componenti comuni */

/* pulsanti: .pulsante + .primario (azione principale) / .secondario / .pericolo; .piccolo = alto come i menu a tendina */
.pulsante {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font: inherit; font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: var(--raggio-m); border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s, transform .08s;
}
.pulsante.primario { background: var(--azione); color: #fff; box-shadow: var(--ombra-1); }
.pulsante.primario:hover { background: var(--azione-scuro); }
.pulsante.secondario { background: var(--carta); color: var(--testo); border-color: var(--bordo-forte); }
.pulsante.secondario:hover { background: var(--superficie); border-color: var(--bordo-forte); }
.pulsante.pericolo { color: var(--pericolo); border-color: var(--pericolo-bordo); }
.pulsante.pericolo:hover { background: var(--pericolo-tenue); }
.pulsante.piccolo { font-size: 13px; height: var(--altezza-controllo); padding: 0 12px; border-radius: var(--raggio-s); }
.pulsante.largo { width: 100%; }
.pulsante.disattivo { opacity: .45; pointer-events: none; }
/* effetto "premuto" (insieme al clic sonoro, vedi layouts/app) */
:is(.pulsante, .selettore a, .riquadro, .scheda-nota, .chiudi-pannello):active { transform: scale(.96); }
.selettore a, .scheda-nota, .chiudi-pannello { transition: background .12s, color .12s, transform .08s; }
.pulsante.freccia { width: var(--altezza-controllo); padding: 0; font-size: 18px; }
a.pulsante { text-decoration: none; }

/* menu a tendina compatti (filtri): .filtro-operatore contiene uno o piu' select */
.filtro-operatore { display: flex; align-items: center; gap: 8px; }
.filtro-operatore select {
    font: inherit; font-size: 13px; font-weight: 500; color: var(--testo); height: var(--altezza-controllo);
    padding: 0 30px 0 10px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); cursor: pointer;
    appearance: none; background: var(--carta) var(--chevron) no-repeat right 8px center / 15px;
    transition: border-color .12s, box-shadow .12s;
}
.filtro-operatore select:hover { border-color: var(--testo-lieve); }
.filtro-operatore select:focus { outline: none; border-color: var(--azione); box-shadow: var(--anello); }
/* filtro impostato: evidenziato, cosi' si capisce subito che non si sta vedendo tutto */
.filtro-operatore select.filtro-attivo { background-color: var(--azione-tenue); border-color: var(--azione); color: var(--azione-scuro); font-weight: 700; }

/* selettore a pulsanti (Per giorno | Per operatore): l'elemento scelto e' una "pastiglia" bianca */
.selettore { display: inline-flex; align-items: center; height: var(--altezza-controllo); padding: 3px; background: var(--superficie); border-radius: var(--raggio-m); }
.selettore a {
    display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 12px; border-radius: var(--raggio-s);
    font-size: 13px; font-weight: 500; color: var(--testo-tenue); text-decoration: none; white-space: nowrap; transition: background .12s, color .12s;
}
.selettore a:hover { color: var(--testo); }
.selettore a.attivo { background: var(--carta); color: var(--azione-scuro); font-weight: 700; box-shadow: var(--ombra-1); }

/* campo di ricerca */
.campo-cerca {
    font: inherit; font-size: 13px; height: var(--altezza-controllo); padding: 0 12px 0 32px; min-width: 260px;
    border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); color: var(--testo);
    background: var(--carta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238796a5' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 10px center / 15px;
}
.campo-cerca:focus { outline: none; border-color: var(--azione); box-shadow: var(--anello); }

/* moduli: .modulo contiene .campo (etichetta + campo + suggerimento) */
.modulo { max-width: 440px; display: flex; flex-direction: column; gap: 16px; }
.modulo-largo { max-width: none; }
.modulo-largo .campo input { font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: 13.5px; font-weight: 500; color: var(--testo); }
.campo small { font-size: 12.5px; color: var(--testo-tenue); }
.campo input, .campo select, .campo textarea {
    font: inherit; font-size: 15px; padding: 9px 12px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m);
    background: var(--carta); color: var(--testo); transition: border-color .12s, box-shadow .12s;
}
.campo select { appearance: none; padding-right: 34px; background: var(--carta) var(--chevron) no-repeat right 10px center / 16px; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azione); box-shadow: var(--anello); }
.spunta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--testo-tenue); cursor: pointer; }
.spunta input { width: 16px; height: 16px; accent-color: var(--azione); }
.nota-modulo { margin: 0; font-size: 13px; color: var(--testo-tenue); }

/* riquadro bianco generico */
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); padding: 22px; box-shadow: var(--ombra-1); }

/* messaggi: .messaggio + .ok / .avviso / .errore */
.messaggio { padding: 10px 14px; border-radius: var(--raggio-m); font-size: 14px; margin-bottom: 16px; border: 1px solid; border-left-width: 4px; }
.modulo .messaggio, .accesso-scheda .messaggio { margin-bottom: 0; }
.messaggio.ok { background: var(--ok-tenue); color: var(--ok); border-color: var(--ok-bordo); border-left-color: var(--ok); }
.messaggio.avviso { background: var(--avviso-tenue); color: var(--avviso); border-color: var(--avviso-bordo); border-left-color: var(--avviso); max-width: 820px; }
.messaggio.errore { background: var(--pericolo-tenue); color: var(--pericolo); border-color: var(--pericolo-bordo); border-left-color: var(--pericolo); }
/* conferma dopo un salvataggio (session 'avviso'): riquadro a comparsa in alto a destra, sparisce da solo */
.avviso-volante {
    position: fixed; z-index: 70; top: calc(var(--altezza-barra) + 14px); right: 18px; max-width: min(420px, calc(100vw - 36px));
    display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px 11px 14px; border-radius: var(--raggio-m);
    background: var(--carta); color: var(--testo); font-size: 14px; border: 1px solid var(--ok-bordo); border-left: 4px solid var(--ok);
    box-shadow: var(--ombra-2); animation: avviso-entra .25s ease-out;
}
.avviso-volante::before { content: "✓"; color: var(--ok); font-weight: 700; }
.avviso-volante button { margin-left: auto; border: 0; background: none; color: var(--testo-lieve); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.avviso-volante.esce { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s; }
@keyframes avviso-entra { from { opacity: 0; transform: translateY(-8px); } }
.riga-azione { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: none; }
.riga-azione form { margin: 0; }

/* etichette (date e stati): .etichetta + .scaduta / .vicina / .fatta / .annullata / .da-completare */
.etichetta {
    display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap;
    background: var(--superficie); color: var(--primario);
}
.etichetta.scaduta { background: var(--pericolo-tenue); color: var(--pericolo); }
.etichetta.vicina, .etichetta.da-completare { background: var(--avviso-tenue); color: var(--avviso); }
.etichetta.da-completare { font-weight: 500; }
.etichetta.fatta { background: var(--ok-tenue); color: var(--ok); }
.etichetta.annullata { background: var(--superficie); color: var(--testo-lieve); text-decoration: line-through; }
.etichetta-fatta { font-size: 12px; font-weight: 500; color: var(--ok); background: var(--ok-tenue); padding: 1px 8px; border-radius: 20px; }
.esito { font-weight: 700; }
.esito.completata { color: var(--ok); }
.esito.errore { color: var(--pericolo); }
/* numeretto dentro pulsanti e testate */
.conta-pannello { background: var(--azione-tenue); color: var(--azione-scuro); font-size: 11.5px; font-weight: 700; padding: 0 7px; border-radius: 9px; line-height: 18px; }

/* tabelle: .tabella-semplice (+ .tabella-larga a tutta larghezza); righe cliccabili con .riga-link */
.tabella-scorre { overflow-x: auto; }
.tabella-semplice {
    border-collapse: separate; border-spacing: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l);
    overflow: hidden; max-width: 1000px; width: 100%; font-size: 13.5px; box-shadow: var(--ombra-1);
}
.tabella-semplice th, .tabella-semplice td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella-semplice tbody tr:last-child > * { border-bottom: 0; }
.tabella-semplice th {
    background: var(--superficie); color: var(--testo-tenue); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.tabella-semplice small { color: var(--testo-tenue); }
.tabella-larga { max-width: none; }
.tabella-larga td { vertical-align: middle; }
.riga-link { cursor: pointer; }
.riga-link:hover td { background: var(--azione-tenue); }
.riga-link a { color: var(--primario); font-weight: 700; text-decoration: none; }
.pagine { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pagine-testo { font-size: 13.5px; color: var(--testo-tenue); }

/* riquadri con i numeri, che fanno anche da filtro */
.riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.riquadro {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--raggio-l); text-decoration: none;
    background: var(--carta); border: 1px solid var(--bordo); color: var(--testo-tenue); font-size: 13.5px; box-shadow: var(--ombra-1);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.riquadro strong { font-size: 26px; color: var(--primario); line-height: 1.1; }
.riquadro:hover { border-color: var(--accento); transform: translateY(-1px); box-shadow: var(--ombra-2); }
.riquadro.allarme strong { color: var(--rosso); }
.riquadro.attivo { border-color: var(--azione); box-shadow: 0 0 0 2px var(--azione) inset; }
.barra-filtri { flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

/* finestra a comparsa: .finestra-velo > .finestra > .finestra-testa + .finestra-corpo; sopra tutto tranne
   i riquadri di note e mappa (z-index 60), che devono vedersi anche qui */
.finestra-velo { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 24px; background: rgba(14, 37, 54, .45); backdrop-filter: blur(2px); }
.finestra-velo[hidden] { display: none; }
body.finestra-aperta { overflow: hidden; }
.finestra {
    width: min(1240px, 100%); height: min(860px, calc(100vh - 48px)); display: flex; flex-direction: column;
    background: var(--sfondo); border-radius: 16px; overflow: hidden; box-shadow: var(--ombra-3);
}
.finestra-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--carta); border-bottom: 1px solid var(--bordo); }
.finestra-testa .filtro-operatore select { font-weight: 700; }
.finestra-testa .filtra-lista { flex: 1; min-width: 180px; }
.finestra-corpo { flex: 1; overflow-y: auto; padding: 0 16px 18px; scrollbar-width: thin; scrollbar-color: var(--bordo-forte) transparent; }
.chiudi-pannello {
    flex: none; width: var(--altezza-controllo); height: var(--altezza-controllo); border-radius: var(--raggio-s); border: 1px solid var(--bordo-forte);
    background: var(--carta); color: var(--testo-tenue); font-size: 22px; line-height: 1; cursor: pointer;
}
.chiudi-pannello:hover { color: var(--testo); background: var(--superficie); }

/* ---------------------------------------------------------------- 4. moduli */

/* planner: la fascia e' la stessa delle altre pagine (vedi .testa-pagina) */
.planner-navigazione { display: flex; align-items: center; gap: 6px; }
.planner-periodo { font-size: 15px; font-weight: 700; color: var(--fascia-testo); white-space: nowrap; }
.planner-periodo small { display: block; font-size: 11.5px; font-weight: 500; color: var(--fascia-tenue); letter-spacing: .02em; }
.gruppo-strumenti { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.separatore { width: 1px; align-self: stretch; margin: 2px 2px; background: var(--bordo-forte); }
.azzera-filtri { font-size: 13px; font-weight: 700; color: var(--pericolo); text-decoration: none; padding: 6px 8px; border-radius: var(--raggio-s); white-space: nowrap; }
.azzera-filtri:hover { background: var(--pericolo-tenue); }
.apri-pannello { margin-left: auto; }
.apri-pannello.attivo { background: var(--azione-scuro); }
.pulsante.primario .conta-pannello { background: rgba(255, 255, 255, .22); color: #fff; }

/* finestra "Da programmare": schede su piu' colonne, gruppi con testata fissa, titoletti delle zone */
.griglia-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; padding: 12px 6px 6px 0; }
.voce-lista[hidden], .nessun-risultato[hidden], .zona-titolo[hidden] { display: none; }
.zona-titolo {
    grid-column: 1 / -1; margin: 6px 0 -2px; padding-bottom: 4px; border-bottom: 2px solid var(--azzurro-chiaro);
    font-size: 14px; font-weight: 700; color: var(--primario-medio);
}
.pannello-testa { border-radius: var(--raggio-m); margin-top: 14px; position: sticky; top: 8px; z-index: 2; box-shadow: var(--ombra-2); }
.pannello-testa.scaduti { background: var(--rosso); }

/* vista per giorno: una colonna per giorno con le schede impilate (come in Access).
   Niente scorrimento interno: serve perche' le testate dei giorni restino fisse scorrendo la pagina */
.colonne-giorni {
    /* colonne tutte alte come la piu' lunga: cosi' ogni testata resta fissa fino in fondo alla pagina */
    display: grid; grid-template-columns: repeat(var(--colonne, 5), minmax(175px, 1fr)); gap: 12px; align-items: stretch; padding-bottom: 4px;
}
.colonna-giorno { min-width: 0; }
.colonna-giorno .colonna-testa {
    border-radius: var(--raggio-m); position: sticky; top: calc(var(--altezza-barra) + var(--altezza-planner, 60px)); z-index: 5; box-shadow: var(--ombra-2);
}
.colonna-testa { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--primario); color: #fff; }
.colonna-nome { flex: 1; font-weight: 700; font-size: 14px; }
.colonna-nome::first-letter { text-transform: uppercase; }
.colonna-conta { background: rgba(255, 255, 255, .18); font-weight: 700; font-size: 12.5px; padding: 1px 9px; border-radius: 10px; }
/* "+" nella testata del giorno: nuova attivita' su quel giorno */
.giorno-aggiungi {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: 18px; font-weight: 700; line-height: 1; text-decoration: none;
    transition: background .12s, color .12s, transform .08s;
}
.giorno-aggiungi:hover { background: var(--carta); color: var(--primario); }
.giorno-aggiungi:active { transform: scale(.9); }
.intestazione-giorno { position: relative; }
.intestazione-giorno .giorno-aggiungi { position: absolute; right: 8px; top: 50%; margin-top: -12px; background: var(--azione-tenue); color: var(--azione); }
.intestazione-giorno .giorno-aggiungi:hover { background: var(--azione); color: #fff; }
.colonna-giorno.oggi .colonna-testa { background: var(--azione); }
.colonna-giorno.festivo .colonna-testa { background: #5d7489; }
.colonna-schede { display: flex; flex-direction: column; gap: 10px; padding: 10px 8px 10px 0; }
.colonna-vuota { margin: 6px 2px; font-size: 13px; color: var(--testo-tenue); }

/* scheda attivita' compatta: dati a sinistra, pulsanti in colonna a destra (come nel planner Access).
   Bordo ben visibile, striscia colorata a sinistra (azzurra = dal cliente, blu notte = in sede); al passaggio si solleva */
.scheda-attivita {
    display: flex; gap: 6px; padding: 7px 7px 7px 10px; border-radius: var(--raggio-m);
    background: var(--carta); border: 1.5px solid #a9bacb; border-left: 5px solid var(--accento); font-size: 12.5px; line-height: 1.3;
    box-shadow: 0 1px 2px rgba(14, 60, 95, .08), 0 3px 8px -2px rgba(14, 60, 95, .16);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.scheda-attivita:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(14, 60, 95, .32); border-color: var(--primario-medio); }
.scheda-attivita.interna { border-left-color: var(--primario); }
.scheda-attivita.interna:hover, .scheda-attivita.fatta:hover { border-left-color: var(--primario); }
.scheda-attivita.esterna:hover { border-left-color: var(--accento); }
/* attivita' chiusa: scheda "spenta" (grigia e attenuata); l'etichetta del tipo resta a colori */
.scheda-attivita.fatta { background: #e6eaee; border-color: #bcc7d1; border-left-color: #98a6b2; box-shadow: none; }
.scheda-attivita.fatta :is(.scheda-cliente, .scheda-operatore, .scheda-ora, .scheda-tenue, .scheda-tenue a, .scheda-entro, .scheda-fatta) { color: #86939e; }
.scheda-attivita.fatta :is(.scheda-nota, .scheda-lato) { filter: grayscale(1); opacity: .6; transition: opacity .18s; }
.scheda-attivita.fatta:hover :is(.scheda-nota, .scheda-lato) { opacity: .85; }
.scheda-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.scheda-testa { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.scheda-cliente { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheda-fatta { color: var(--ok); font-weight: 700; }
.scheda-entro { font-size: 11px; color: var(--testo-tenue); white-space: nowrap; }
.scheda-entro.scaduta { color: var(--rosso); font-weight: 700; }
.scheda-riga { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 7px; min-width: 0; }
.scheda-tipo {
    font-size: 11px; font-weight: 700; color: var(--primario); background: var(--azzurro-tenue);
    padding: 0 6px; border-radius: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scheda-ora { font-weight: 700; color: var(--primario-medio); font-variant-numeric: tabular-nums; }
.scheda-operatore { font-weight: 500; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheda-tenue { color: var(--testo-tenue); font-size: 12px; }
.scheda-tenue a { color: var(--primario-medio); text-decoration: none; border-bottom: 1px dotted currentColor; }
.scheda-telefono { font-variant-numeric: tabular-nums; }
/* pulsante "Note" della scheda: i pallini dicono quali note ci sono (colori come nella finestra delle note) */
.scheda-nota {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 5px; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 700; background: var(--superficie); color: var(--testo); border: 1px solid var(--bordo-forte);
}
.scheda-nota::before { content: ""; width: 9px; height: 10px; background: currentColor; opacity: .7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M0 0h6l3 3v7H0z M1.5 4.5h6v1h-6z M1.5 6.8h6v1h-6z' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M0 0h6l3 3v7H0z M1.5 4.5h6v1h-6z M1.5 6.8h6v1h-6z' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain; }
.scheda-nota:hover { border-color: var(--azione); color: var(--azione-scuro); }
.pallino-nota { width: 7px; height: 7px; border-radius: 50%; }
/* colori delle tre note: cliente = viola, attivita' = giallo, tecnico = azzurro */
.pallino-nota.cliente, .nota-blocco.cliente { --colore-nota: #7b5cc4; --fondo-nota: #f4f0fc; }
.pallino-nota.attivita, .nota-blocco.attivita { --colore-nota: #c99a06; --fondo-nota: #fdf7e2; }
.pallino-nota.tecnico, .nota-blocco.tecnico { --colore-nota: #2b8fd6; --fondo-nota: #eaf5fc; }
.pallino-nota { background: var(--colore-nota); }

/* finestra delle note: sopra anche alla finestra "Da programmare" */
.finestra-note-velo { z-index: 55; }
.finestra-note { width: min(720px, 100%); height: auto; max-height: calc(100vh - 48px); }
.finestra-titolo { flex: 1; margin: 0; font-size: 16px; font-weight: 700; color: var(--primario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finestra-note .finestra-corpo { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.nota-blocco { background: var(--fondo-nota); border-left: 4px solid var(--colore-nota); border-radius: var(--raggio-m); padding: 10px 14px 12px; }
.nota-blocco h3 { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--colore-nota); }
.nota-testo { white-space: pre-line; font-size: 14px; line-height: 1.5; color: var(--testo); overflow-wrap: anywhere; }
.nota-blocco.vuota { background: var(--carta); border-left-color: var(--bordo-forte); }
.nota-blocco.vuota h3 { color: var(--testo-lieve); }
.nota-blocco.vuota .nota-testo { color: var(--testo-lieve); font-size: 13px; }
/* il margine verticale e' un bordo dello stesso colore: cosi' la riga tagliata non si intravede sotto */
.scheda-note {
    margin: 1px 0 0; padding: 0 6px; border: solid #fbf7e6; border-width: 3px 0; border-radius: 5px;
    background: #fbf7e6; color: #4f4520; font-size: 11.5px; line-height: 1.3;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.scheda-note.tecnico { background: var(--azzurro-tenue); border-color: var(--azzurro-tenue); color: var(--testo); -webkit-line-clamp: 1; }
.scheda-lato { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.scheda-azione {
    display: grid; place-items: center; width: 38px; height: 26px; border-radius: 7px;
    border: 1px solid var(--bordo); color: var(--primario-medio); background: var(--carta); transition: background .12s;
}
.scheda-azione svg { width: 15px; height: 15px; }
.scheda-azione:hover { background: var(--azzurro-tenue); }
.scheda-azione.whatsapp { color: #fff; background: #25d366; border-color: #25d366; }
.scheda-azione.whatsapp:hover { background: #1ebe5b; }
/* mini mappa di Roma (circa 1 cm) */
.minimappa { display: block; width: 38px; height: 38px; border-radius: var(--raggio-s); overflow: hidden; border: 1px solid var(--bordo); flex: none; }
.minimappa svg { display: block; width: 100%; height: 100%; }
.minimappa:hover { border-color: var(--accento); box-shadow: 0 0 0 2px rgba(111, 174, 222, .3); }
.scheda-numero { width: 38px; height: 20px; display: grid; place-items: center; border-radius: var(--raggio-s); background: #f5a623; color: #fff; font-weight: 700; font-size: 12px; }
.scheda-numero.tenue { background: #fbe3b5; color: #8a5a00; }

/* riquadro con la mappa grande (circa 5x5 cm) al passaggio del mouse */
.popup-mappa {
    position: fixed; z-index: 60; width: 200px; pointer-events: none;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); overflow: hidden; box-shadow: var(--ombra-2);
}
.popup-mappa[hidden] { display: none; }
.popup-mappa-testa { display: flex; flex-direction: column; padding: 6px 10px; border-bottom: 1px solid var(--bordo); }
.popup-mappa-titolo { font-weight: 700; font-size: 13px; color: var(--primario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popup-mappa-precisione { font-size: 11px; color: var(--testo-tenue); }
.popup-mappa-schema { display: block; width: 200px; height: 200px; --spessore-gra: .7px; --spessore-tevere: .9px; }
.popup-mappa-zone text {
    font: 500 1.6px var(--carattere); fill: #3f5566; text-anchor: middle;
    paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: .45px; stroke-linejoin: round;
}
.popup-mappa-nord path { fill: #7f98ab; }
.popup-mappa-nord text { font: 700 1.8px system-ui, sans-serif; fill: #7f98ab; text-anchor: middle; }
.popup-mappa-punto { fill: #e53935; stroke: #fff; stroke-width: .5; }
.popup-mappa-punto.fuori { fill: #fff; stroke: #e53935; stroke-width: .7; }
.popup-mappa-alone { fill: #e53935; opacity: .18; }
/* sui dispositivi senza mouse il riquadro non serve: la mini mappa apre Google Maps */
@media (hover: none) { .popup-mappa { display: none !important; } }

/* vista per operatore: tabella operatori x giorni (scorre in orizzontale sugli schermi stretti) */
.tabella-settimana-contenitore {
    overflow-x: auto; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-1);
    scrollbar-width: thin; scrollbar-color: var(--bordo-forte) transparent;
}
.tabella-settimana { width: 100%; min-width: 1100px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tabella-settimana th, .tabella-settimana td { border-bottom: 1px solid var(--bordo); border-left: 1px solid var(--bordo); vertical-align: top; text-align: left; }
.tabella-settimana tr > :first-child { border-left: 0; }
.tabella-settimana tbody tr:last-child > * { border-bottom: 0; }
.tabella-settimana thead th { padding: 0; background: var(--superficie); font-weight: 500; }
.intestazione-giorno { display: flex; flex-direction: column; padding: 9px 12px; }
.intestazione-giorno span { font-weight: 700; color: var(--primario); text-transform: capitalize; }
.intestazione-giorno small { font-size: 12px; color: var(--testo-tenue); }
.tabella-settimana thead th.oggi { background: var(--azione-tenue); box-shadow: inset 0 -3px 0 var(--azione); }
.tabella-settimana thead th.festivo span { color: #8c9aa6; }
.tabella-settimana td.festivo { background: #fafbfc; }
.tabella-settimana td.oggi { background: #f6faff; }
.tabella-settimana .col-operatore { width: 170px; position: sticky; left: 0; z-index: 1; background: var(--carta); padding: 10px 12px; vertical-align: top; }
.tabella-settimana thead .col-operatore { background: var(--superficie); color: var(--testo-tenue); font-size: 13px; vertical-align: middle; }
.tabella-settimana td { padding: 6px; }
.pallino { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--accento); vertical-align: middle; margin-right: 6px; }
.agenda-nome { font-weight: 700; color: var(--primario); vertical-align: middle; }
.agenda-conta { display: inline-block; margin-top: 6px; background: var(--azzurro-tenue); color: var(--primario); font-weight: 700; font-size: 12.5px; padding: 1px 9px; border-radius: 10px; }
.voce-settimana {
    display: flex; gap: 8px; padding: 6px 8px; margin-bottom: 4px; border-radius: var(--raggio-s);
    background: var(--azzurro-tenue); border-left: 3px solid var(--accento); font-size: 13px; line-height: 1.3;
}
.voce-settimana:last-child { margin-bottom: 0; }
/* interne (in sede): bordo blu notte; esterne (dal cliente): bordo azzurro */
.voce-settimana.interna { border-left-color: var(--primario); background: #eef2f6; }
.voce-settimana.fatta { background: #f1f4f6; border-left-color: #b7c4cd; }
.voce-settimana.fatta strong { color: var(--testo-tenue); }
.voce-ora { font-weight: 700; color: var(--primario-medio); font-variant-numeric: tabular-nums; flex: none; }
.voce-testo { display: flex; flex-direction: column; min-width: 0; }
.voce-testo strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce-testo small { color: var(--testo-tenue); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* contratti: stato, scheda con i dati, scadenze */
.stato-contratto { display: inline-block; vertical-align: middle; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: var(--ok-tenue); color: var(--ok); }
.pagina-titolo .stato-contratto { font-size: 12.5px; margin-left: 6px; }
.stato-contratto.sospeso { background: var(--avviso-tenue); color: var(--avviso); }
.stato-contratto.disdetto { background: var(--superficie); color: var(--testo-tenue); }
.dati-contratto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; max-width: 1100px; }
.dati-contratto dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; align-content: start; font-size: 14px; }
.dati-contratto dt { color: var(--testo-tenue); }
.dati-contratto dd { margin: 0; }
.dati-contratto a { color: var(--azione); }
.note-contratto { grid-column: 1 / -1; padding: 10px 12px; border-radius: var(--raggio-m); background: var(--superficie); font-size: 13.5px; }
.tabella-scadenze tr.chiusa td { color: var(--testo-tenue); }
.azioni-scadenza { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.azioni-scadenza input { font: inherit; font-size: 13px; height: var(--altezza-controllo); padding: 0 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); }
.azioni-scadenza input[type="text"] { width: 170px; }
.azioni-scadenza input:focus { outline: none; border-color: var(--azione); box-shadow: var(--anello); }
.elimina-contratto { margin-top: 32px; }
/* moduli di contratti e macchine: campi in griglia, divisi in gruppi */
.modulo-contratto { max-width: 1000px; }
.modulo-contratto fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.modulo-contratto legend { font-size: 15px; font-weight: 700; color: var(--primario); padding: 0; margin-bottom: 10px; }
.modulo-contratto .largo { grid-column: 1 / -1; }
.modulo-contratto [hidden] { display: none; }
.campo-spunta { align-self: end; padding-bottom: 10px; }
.scelta-macchine { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); }
.scelta-macchine .spunta { color: var(--testo); }
.scelta-macchine .spunta.dismessa { color: var(--testo-tenue); }
.scelta-macchine .vuoto { margin: 0; font-size: 14px; }

/* modulo attivita': stessa griglia dei contratti; i tipi piu' usati come pulsanti rapidi sopra l'elenco */
.modulo-attivita fieldset[hidden], .modulo-attivita [hidden] { display: none; }
.tipi-rapidi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tipo-rapido {
    display: inline-flex; align-items: center; gap: 7px; height: var(--altezza-controllo); padding: 0 12px;
    font: inherit; font-size: 13.5px; font-weight: 500; color: var(--testo); cursor: pointer; text-decoration: none;
    background: var(--carta); border: 1px solid var(--bordo-forte); border-radius: 999px;
    transition: background .12s, border-color .12s, transform .08s;
}
.tipo-rapido::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--colore-tipo, var(--azione)); }
.tipo-rapido:hover { background: var(--superficie); }
.tipo-rapido:active { transform: scale(.96); }
.tipo-rapido.attivo { background: var(--azione-tenue); border-color: var(--azione); color: var(--azione-scuro); font-weight: 700; }
/* operatori dell'attivita': pastiglie da spuntare, uno o piu' (piu' di uno = squadra) */
.scelta-operatori { display: flex; flex-wrap: wrap; gap: 6px; }
.scelta-operatori input { position: absolute; opacity: 0; pointer-events: none; }
.scelta-operatori span {
    display: inline-flex; align-items: center; gap: 6px; height: var(--altezza-controllo); padding: 0 14px; cursor: pointer;
    font-size: 13.5px; font-weight: 500; color: var(--testo); background: var(--carta); border: 1px solid var(--bordo-forte); border-radius: 999px;
    transition: background .12s, border-color .12s;
}
.scelta-operatori span:hover { background: var(--superficie); }
.scelta-operatori input:checked + span { background: var(--azione-tenue); border-color: var(--azione); color: var(--azione-scuro); font-weight: 700; }
.scelta-operatori input:checked + span::before { content: "✓"; }
.scelta-operatori input:focus-visible + span { outline: 2px solid var(--azione); outline-offset: 1px; }
.scelta-operatori input:disabled + span { opacity: .5; cursor: default; }
/* Dal cliente | In sede: come il selettore, con i pulsanti di scelta */
.scelta-luogo { align-self: flex-start; height: 40px; }
.scelta-luogo label { height: 100%; }
.scelta-luogo input { position: absolute; opacity: 0; pointer-events: none; }
.scelta-luogo span {
    display: inline-flex; align-items: center; height: 100%; padding: 0 16px; border-radius: var(--raggio-s); cursor: pointer;
    font-size: 14px; font-weight: 500; color: var(--testo-tenue); transition: background .12s, color .12s;
}
.scelta-luogo input:checked + span { background: var(--carta); color: var(--azione-scuro); font-weight: 700; box-shadow: var(--ombra-1); }
.scelta-luogo input:focus-visible + span { outline: 2px solid var(--azione); outline-offset: 1px; }
/* nota del cliente: viola come nella finestra delle note */
.nota-cliente-modulo textarea { background: #f8f5fd; border-left: 4px solid #7b5cc4; }
.nota-cliente-modulo span small { font-weight: 400; }
/* campi da compilare per questo tipo (gialli come in Access): non bloccano il salvataggio */
.modulo-attivita .campo .consigliato { background-color: #fff8d6; border-color: #e7c84d; }
/* modulo attivita' (.finestra-attivita): testata, tre colonne che stanno in una schermata, piede con Fatta e Salva.
   Di solito dentro la finestra a comparsa (body.in-finestra, iframe di .velo-attivita); sul telefono le colonne vanno una sotto l'altra */
.finestra-attivita {
    display: flex; flex-direction: column; height: calc(100vh - var(--altezza-barra) - 60px); min-height: 560px; overflow: hidden;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-1);
}
body.in-finestra { background: var(--carta); }
.in-finestra .finestra-attivita { height: 100vh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.fa-testa { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 22px; background: var(--fascia); color: var(--fascia-testo); }
.fa-testa > div { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.fa-testa h1 { margin: 0; font-size: 17px; font-weight: 700; }
.fa-testa small { color: var(--fascia-tenue); font-size: 12.5px; }
.fa-chiudi {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    color: var(--fascia-testo); font-size: 24px; line-height: 1; text-decoration: none; transition: background .12s;
}
.fa-chiudi:hover { background: rgba(255, 255, 255, .16); }
.fa-pratica { padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: var(--fascia-testo); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-pratica:hover { background: rgba(255, 255, 255, .26); }
.fa-messaggi { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 22px 0; }
.fa-messaggi .messaggio { margin: 0; max-width: none; padding: 7px 12px; font-size: 13.5px; }
.fa-corpo {
    flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1.12fr);
    grid-template-rows: minmax(0, 1fr);
}
.fa-colonna { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; padding: 14px 20px 16px; overflow: auto; scrollbar-width: thin; }
.fa-colonna + .fa-colonna { border-left: 1px solid var(--bordo); }
.fa-colonna h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primario); }
.fa-colonna h2:not(:first-child) { margin-top: 6px; }
.fa-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fa-riga[hidden] { display: none; }
.fa-riga-3 { grid-template-columns: 1.35fr 1fr 1fr; }
.fa-riga-via { grid-template-columns: 3fr 1fr; }
.fa-riga-citta { grid-template-columns: 2fr 1fr .8fr; }
/* campi piu' bassi che nelle altre pagine: tutto deve stare in vista */
.finestra-attivita .campo { gap: 4px; min-width: 0; }
.finestra-attivita .campo > span { font-size: 12.5px; color: var(--testo-tenue); }
.finestra-attivita .campo input, .finestra-attivita .campo select, .finestra-attivita .campo textarea { font-size: 14px; padding: 7px 10px; min-width: 0; }
.finestra-attivita .campo select { padding-right: 30px; background-position: right 8px center; }
.finestra-attivita .campo > small:not(:empty) { font-size: 12px; }
.finestra-attivita .campo > small:empty { display: none; }
.finestra-attivita .tipi-rapidi { gap: 5px; margin-bottom: 2px; }
.finestra-attivita .tipo-rapido { height: 30px; padding: 0 10px; font-size: 13px; }
.finestra-attivita .scelta-operatori span { height: 30px; padding: 0 12px; font-size: 13px; }
.finestra-attivita .nota-cliente-modulo textarea { resize: none; }
.fa-luogo { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-luogo .scelta-luogo { height: 36px; }
.fa-luogo .scelta-luogo span { padding: 0 12px; font-size: 13.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 30px; }
.fa-in-sede { margin: 0; font-size: 13px; color: var(--testo-tenue); }
.fa-pannello { flex: none; margin: 0; padding: 0; border: 0; }
.fa-pannello[hidden] { display: none; }
.fa-nota { flex: 1; min-height: 140px; }
.fa-nota textarea { flex: 1; resize: none; }
.fa-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.fa-griglia .largo { grid-column: 1 / -1; }
.fa-griglia[hidden] { display: none; }
.fa-spunte { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 4px; }
/* piede: Fatta, Importante, Elimina a sinistra; Annulla e Salva a destra */
.fa-piede { flex: none; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--bordo); background: var(--carta); }
.fa-piede .scorciatoia { margin-left: auto; }
.fa-piede .elimina-attivita { margin-left: 0; }
.spunta-fatta { font-size: 15px; font-weight: 700; color: var(--ok); }
.passi-successivi { display: flex; flex-direction: column; gap: 6px; }
.passi-successivi .vuoto { margin: 0; font-size: 13px; }
/* proposte non ancora spuntate: solo il nome, su una riga; spuntandole compaiono operatore, giorno, ora e durata */
.passo-successivo:not(.scelto):not(.libera) :is(.passo-operatore, .passo-data, .passo-ora, .passo-durata) { display: none; }
.passo-successivo:not(.scelto):not(.libera) .spunta { grid-column: 1 / -1; }
.passo-successivo {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-items: center;
    padding: 6px 8px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-m);
}
@media (max-width: 1000px) {
    .finestra-attivita { height: auto; min-height: 0; overflow: visible; }
    .in-finestra .finestra-attivita { height: auto; min-height: 100vh; }
    .fa-testa { position: sticky; top: 0; z-index: 2; }
    .fa-corpo { display: block; overflow: visible; }
    .fa-colonna { overflow: visible; }
    .fa-colonna + .fa-colonna { border-left: 0; border-top: 1px solid var(--bordo); }
    .fa-nota textarea { min-height: 160px; }
    .fa-piede { position: sticky; bottom: 0; z-index: 2; }
}

/* finestra a comparsa del modulo attivita' (aperta da layouts.app): velo + iframe */
.velo-attivita { z-index: 80; }
.velo-attivita iframe {
    width: min(1760px, 100%); height: min(860px, calc(100vh - 48px)); border: 0; border-radius: 16px;
    background: var(--carta); box-shadow: var(--ombra-3);
}
@media (max-width: 760px) { .velo-attivita iframe { width: 100%; height: 100%; border-radius: 0; } }
/* contratto o pratica di un'attivita' (layouts.app, apriScheda): al centro, sopra anche il modulo attivita'.
   La pagina dentro (html.in-cornice) e' senza menu, barra e pannello; la × chiude la finestra */
.velo-scheda { z-index: 90; }
.velo-scheda iframe {
    width: min(1600px, 100%); height: min(900px, calc(100vh - 48px)); border: 0; border-radius: 16px;
    background: var(--sfondo); box-shadow: var(--ombra-3);
}
@media (max-width: 760px) { .velo-scheda iframe { width: 100%; height: 100%; border-radius: 0; } }
.in-cornice .menu, .in-cornice .barra, .in-cornice .menu-velo, .in-cornice .pannello-linguetta,
.in-cornice .pannello, .in-cornice .nuova-attivita-volante { display: none !important; }
.in-cornice .contenuto { margin-left: 0; padding: 20px var(--margine-pagina) 32px; }
.in-cornice .testa-pagina { top: 0; padding-right: 64px; }
.in-cornice .contenuto:has(> .finestra-attivita) { padding: 0; }
.in-cornice .finestra-attivita { height: 100vh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.cornice-chiudi {
    position: fixed; top: 10px; right: 14px; z-index: 50; display: grid; place-items: center; width: 36px; height: 36px;
    border: 1px solid var(--bordo); border-radius: 50%; background: var(--carta); color: var(--testo);
    font: inherit; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--ombra-1);
}
.cornice-chiudi:hover { border-color: var(--azione); color: var(--azione); }
/* nel modulo attivita': contratto o vendita scelti nella finestra (o l'invito a scegliere il cliente), con "Apri" */
.scheda-scelta {
    display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 6px 6px 6px 12px;
    font-size: 13px; font-weight: 600; color: var(--azione);
    background: var(--azione-tenue); border: 1px solid var(--azione); border-radius: var(--raggio-s);
}
.scheda-scelta[hidden] { display: none; }
.crea-cliente-apri { justify-self: start; align-self: start; }
/* finestra "Nuovo cliente" del modulo attivita': griglia a 5 colonne (nc-1 ... nc-5 = quante ne prende il campo) */
.finestra-cliente { width: min(720px, 100%); }
.nc-corpo h3 { margin: 4px 0 0; font-size: 14px; color: var(--primario); }
.nc-corpo h3 small { font-weight: 500; color: var(--testo-tenue); }
.nc-griglia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 10px; }
.nc-griglia[hidden] { display: none; }
.nc-griglia .campo { gap: 3px; }
.nc-griglia .campo > span { font-size: 12.5px; }
.nc-1 { grid-column: span 1; } .nc-2 { grid-column: span 2; } .nc-3 { grid-column: span 3; } .nc-4 { grid-column: span 4; } .nc-5 { grid-column: 1 / -1; }
.nc-griglia small { color: var(--testo-tenue); font-size: 12.5px; }
.nc-azioni { display: flex; justify-content: flex-end; gap: 8px; }
.nc-errore[hidden] { display: none; }
@media (max-width: 560px) { .nc-griglia { grid-template-columns: 1fr 1fr; } .nc-griglia > * { grid-column: 1 / -1; } }
.scheda-scelta span { flex: 1; min-width: 0; }
.passo-successivo .scheda-scelta { grid-column: 1 / -1; margin-top: 0; }
/* nel modulo attivita': macchina del cliente (menu + "Elenco") e finestra per sceglierla */
.riga-macchina { display: flex; gap: 6px; }
.riga-macchina select { flex: 1; min-width: 0; }
.finestra-macchine { width: min(640px, 100%); height: auto; max-height: calc(100vh - 48px); }
.finestra-macchine .finestra-testa h2 { flex: 1; margin: 0; font-size: 18px; color: var(--primario); }
.finestra-macchine .finestra-corpo { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.elenco-macchine { display: flex; flex-direction: column; gap: 8px; }
.voce-macchina {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; text-align: left; font: inherit; color: var(--testo);
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-s); cursor: pointer;
}
.voce-macchina:hover, .voce-macchina:focus-visible, .voce-macchina.scelta { border-color: var(--azione); background: var(--azione-tenue); }
.voce-macchina strong { font-size: 15px; }
.voce-macchina small { color: var(--testo-tenue); font-size: 13px; }
.nessuna-macchina { align-self: flex-start; }
/* scheda intervento: le quattro fasi in riquadri, due per riga; macchina scelta con le stesse voci della finestra */
/* tutto in una schermata, in larghezza: le quattro fasi affiancate (due per riga sotto i 1200px), campi uno sotto l'altro */
.modulo-intervento { max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; padding: 12px; }
.modulo-intervento > .messaggio, .modulo-intervento > input { grid-column: 1 / -1; }
.modulo-intervento fieldset.fase {
    grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px;
    padding: 10px 12px 12px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-m);
}
.modulo-intervento fieldset.fase legend { float: left; width: 100%; display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 14px; }
.modulo-intervento .campo { gap: 3px; }
.modulo-intervento .campo > span { font-size: 12.5px; }
.modulo-intervento .campo small { display: none; }
.modulo-intervento .campo textarea { min-height: 0; }
.modulo-intervento .riga-due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.modulo-intervento .riga-due .campo-spunta { padding-bottom: 8px; }
.modulo-intervento .elenco-macchine { gap: 4px; }
.modulo-intervento .voce-macchina { padding: 5px 8px; }
.modulo-intervento .voce-macchina strong { font-size: 13.5px; }
.modulo-intervento .campo .voce-macchina small { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modulo-intervento .uscita.vuota, .modulo-intervento .nota-post { color: var(--testo-tenue); font-size: 12.5px; }
@media (max-width: 1000px) { .modulo-intervento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* prima dell'intervento solo segnalazione e diagnosi, a meta' larghezza ciascuna */
.modulo-intervento.solo-prime-fasi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modulo-intervento fieldset.fase[hidden] { display: none; }
.modulo-intervento .nota-chiusura { margin: 0; padding: 6px 10px; font-size: 12.5px; color: var(--testo-tenue); background: var(--sfondo); border-radius: var(--raggio-s); }
.modulo-intervento .nota-chiusura[hidden] { display: none; }
.modulo-intervento fieldset.fase legend small { font-weight: 500; color: var(--testo-tenue); }
.modulo-intervento fieldset.fase:disabled { background: var(--sfondo); }
.fase-numero { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primario); color: #fff; font-size: 13px; }
.modulo-intervento .voce-macchina { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.modulo-intervento .voce-macchina input { margin: 0; align-self: center; }
.modulo-intervento .voce-macchina small { flex-basis: 100%; padding-left: 22px; }
.modulo-intervento .voce-macchina:has(input:checked) { border-color: var(--azione); background: var(--azione-tenue); }
.modulo-intervento .uscita, .modulo-intervento .precedenti p { margin: 0; font-size: 14px; }
.modulo-intervento .precedenti { gap: 4px; padding: 8px 12px; background: var(--avviso-tenue); border-radius: var(--raggio-s); }
.modulo-intervento .precedenti .post-installazione { color: var(--avviso); }
@media (max-width: 520px) { .modulo-intervento { grid-template-columns: 1fr; } }
.passo-successivo.scelto { border-color: var(--azione); background: var(--azione-tenue); }
.passo-successivo .spunta { color: var(--testo); font-weight: 500; }
.passo-successivo select, .passo-successivo input:not([type=checkbox]) {
    font: inherit; font-size: 13px; height: var(--altezza-controllo); padding: 0 8px; min-width: 0;
    border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); color: var(--testo);
}
.passo-successivo :disabled { opacity: .45; }
.passo-successivo:not(.libera) .passo-tipo { display: none; }
.passo-successivo:not(.libera) .spunta { grid-column: span 2; }
.elimina-attivita { margin-left: auto; }
.modulo-attivita .campo input:disabled, .modulo-attivita .campo select:disabled { background: var(--superficie); color: var(--testo-tenue); }
.scorciatoia { font-size: 12.5px; color: var(--testo-lieve); }
/* nome scritto che non e' in anagrafica: proposta di creare il cliente */
.spunta.nuovo-cliente { flex-direction: row; align-items: flex-start; padding: 9px 12px; color: var(--testo); background: var(--avviso-tenue); border: 1px solid var(--avviso-bordo); border-radius: var(--raggio-m); }
.spunta.nuovo-cliente input { margin-top: 2px; flex: none; }

/* scheda cliente (.scheda-anagrafica): stessa impaginazione della finestra attivita' (.finestra-attivita),
   tre colonne in una schermata: dati del cliente | prodotti, contratti, pratiche, documenti | attivita' */
.scheda-anagrafica .fa-corpo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.scheda-anagrafica .fa-testa > div { flex-wrap: wrap; }
.fa-testa .sc-cerca { flex: none; width: min(300px, 40vw); min-width: 0; border-color: transparent; }
.sc-campi { flex: 1 0 auto; display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sc-nome { display: flex; align-items: flex-end; gap: 8px; }
.sc-nome .campo { flex: 1; }
.sc-nome .campo input { font-size: 16px; font-weight: 700; }
.sc-contatti { display: flex; gap: 6px; padding-bottom: 2px; }
.sc-contatti .scheda-azione { width: 36px; height: 34px; }
.sc-ruoli { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 52px; }
.sc-ruoli .spunta { color: var(--testo); }
.sc-provvigione { flex-direction: row; align-items: center; gap: 8px; }
.sc-provvigione[hidden] { display: none; }
.sc-provvigione input { width: 70px; }
.sc-note { flex: 1; min-height: 120px; }
.sc-testa-colonna { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-testa-colonna:not(:first-child) { margin-top: 6px; }
.sc-vuoto { margin: 0; font-size: 13px; color: var(--testo-tenue); }
.sc-attivita { background: var(--superficie); }
/* indirizzi del cliente: residenza e altre abitazioni; aggiunta e modifica nella riga stessa */
.sc-testa-colonna:has(> .sc-aggiungi-indirizzo) { flex-wrap: wrap; }
.sc-aggiungi-indirizzo > summary { list-style: none; cursor: pointer; }
.sc-aggiungi-indirizzo > summary::-webkit-details-marker { display: none; }
.sc-aggiungi-indirizzo[open] { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sc-indirizzo { grid-template-columns: minmax(0, 1fr) auto auto; }
.sc-modifica-indirizzo > summary { cursor: pointer; font-size: 12px; color: var(--azione); }
.sc-modifica-indirizzo[open] { grid-column: 1 / -1; }
.sc-modulo-indirizzo {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .7fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .6fr); gap: 6px 8px;
    align-items: end; width: 100%; margin-top: 6px; padding: 10px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-m);
}
.sc-modulo-indirizzo .campo > span { font-size: 11.5px; }
.sc-modulo-indirizzo .campo input { padding: 5px 8px; font-size: 13px; }
.sc-modulo-indirizzo .sc-ind-nome { grid-column: span 3; }
.indirizzo-installazione { grid-column: span 3; }
.nuovo-indirizzo {
    grid-column: 1 / -1; display: grid; gap: 8px;
    grid-template-columns: minmax(0, 2fr) minmax(0, .7fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .6fr);
}
.nuovo-indirizzo .campo input { min-width: 0; width: 100%; }
.nuovo-indirizzo[hidden] { display: none; }
.nuovo-indirizzo .campo:last-of-type { grid-column: span 3; }
.nuovo-indirizzo small { grid-column: 1 / -1; color: var(--testo-tenue); }
/* modulo attivita': quarta colonna con le attivita' del cliente, questa evidenziata */
.fa-storico { position: relative; padding-left: 14px; padding-right: 14px; }
.fa-storico .sc-voce { gap: 8px; padding: 6px 8px; }
.fa-storico .sc-numero { min-width: 50px; }
.fa-storico .sc-voce.questa { border-color: var(--azione); box-shadow: inset 3px 0 0 var(--azione); background: var(--azione-tenue); }
/* voci degli elenchi (prodotti, contratti, attivita'): riquadri cliccabili */
.sc-elenco { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sc-voce {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-m); color: var(--testo); text-decoration: none;
    font-size: 13px; transition: border-color .12s, background .12s;
}
.sc-voce.sc-macchina { grid-template-columns: minmax(0, 1fr) auto; }
.sc-voce:hover { border-color: var(--azione); background: var(--azione-tenue); }
.sc-voce > span { min-width: 0; }
.sc-voce strong, .sc-voce small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-voce strong { color: var(--primario); }
.sc-voce small { font-size: 12px; color: var(--testo-tenue); }
.sc-voce.spenta { opacity: .6; }
div.sc-voce:hover { border-color: var(--bordo); background: var(--carta); }
/* numero dell'attivita': verde fatta, blu da fare, rosso scaduta */
.sc-numero {
    min-width: 54px; padding: 3px 8px; border-radius: 999px; text-align: center;
    background: var(--ok); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sc-numero.aperta { background: var(--azione); }
.sc-numero.scaduta { background: var(--rosso); }
.sc-date { text-align: right; font-size: 11.5px; line-height: 1.4; color: var(--testo-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-date .fatta { color: var(--ok); font-weight: 700; }
/* scheda della vendita (pratica): stesse tre colonne; il modulo abbraccia le prime due (display: contents),
   la terza e' la checklist con i suoi pulsanti */
.scheda-vendita .fa-corpo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.sv-modulo { display: contents; }
.sv-campi { margin: 0; border: 0; }
.sv-checklist { border-left: 1px solid var(--bordo); }
.sv-titolo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.sv-titolo:first-child { margin-top: 0; }
.sv-completato { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; cursor: pointer;
    background: var(--superficie); color: var(--testo-tenue); font-size: 12px; font-weight: 600; }
.sv-completato input { width: 14px; height: 14px; accent-color: var(--ok); }
.sv-completato:has(input:checked) { background: var(--ok-tenue); color: var(--ok); }
.sv-spunte { padding-top: 0; }
.sv-spunte .spunta, .sv-campi > .spunta { color: var(--testo); }
.sv-descrizione textarea { resize: vertical; }
/* incasso: totale, poi una riga per voce con importo e data di arrivo */
.sv-incasso { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.sv-incasso .sv-totale { grid-column: 1 / -1; display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 10px; }
.sv-incasso .sv-totale input { font-weight: 700; }
.sv-intesta { grid-column: span 1; font-size: 11.5px; color: var(--testo-tenue); }
.sv-intesta:first-of-type { grid-column: 2; }
.sv-voce { font-size: 13px; color: var(--testo); }
.sv-incasso > input {
    font: inherit; font-size: 14px; padding: 6px 10px; min-width: 0; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m);
    background: var(--carta); color: var(--testo);
}
.sv-incasso > input:focus { outline: none; border-color: var(--azione); box-shadow: var(--anello); }
.sv-incasso > input:disabled { background: var(--superficie); color: var(--testo-tenue); }
.sv-resta { margin: 0; font-size: 13px; color: var(--avviso); }
.sv-resta.ok { color: var(--ok); }
/* checklist nella colonna stretta: una fase per riquadro, dati su due colonne, pulsanti sotto */
.checklist.compatta { margin: 0; gap: 6px; }
.checklist.compatta .fase-pratica { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px 8px 12px; }
.checklist.compatta .fase-nome strong { font-size: 14px; }
.checklist.compatta .fase-dati { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; font-size: 12.5px; }
.checklist.compatta .fase-azioni { justify-content: flex-start; }
.checklist.compatta .fase-azioni .pulsante { height: 28px; padding: 0 10px; font-size: 12.5px; }
.checklist.compatta .modulo-assegna { left: 0; right: auto; width: min(420px, 80vw); }
.sv-storico summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primario); }
.sv-storico .tabella-semplice { margin-top: 8px; font-size: 12px; }
/* elenco delle vendite: sezioni completate (lettere colorate) */
.tabella-vendite .numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella-vendite .descrizione-vendita { max-width: 280px; color: var(--testo-tenue); }
.tabella-vendite tfoot td { background: var(--superficie); font-weight: 700; color: var(--primario); border-top: 1px solid var(--bordo-forte); }
.sezioni-vendita { display: inline-flex; gap: 3px; }
.sezione-pallino {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--superficie); color: var(--testo-lieve); font-size: 10.5px; font-weight: 700;
}
.sezione-pallino.fatta { background: var(--ok); color: #fff; }
@media (max-width: 1000px) {
    .sv-checklist { border-left: 0; }
    .fa-testa .sc-cerca { width: 100%; order: 3; }
    .scheda-anagrafica .fa-testa { flex-wrap: wrap; }
}


/* pratiche: checklist delle fasi. Colore a sinistra: grigio da assegnare, blu assegnata, verde completata, rosso scaduta */
.checklist { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 1200px; counter-reset: fase; }
.fase-pratica {
    --colore-fase: var(--bordo-forte);
    display: grid; grid-template-columns: minmax(200px, 1.1fr) minmax(0, 2.4fr) 340px; gap: 8px 18px; align-items: center;
    padding: 10px 14px 10px 16px; background: var(--carta); border: 1px solid var(--bordo); border-left: 5px solid var(--colore-fase);
    border-radius: var(--raggio-m); box-shadow: var(--ombra-1);
}
.fase-pratica.blu { --colore-fase: var(--azione); }
.fase-pratica.verde { --colore-fase: var(--ok); }
.fase-pratica.rosso { --colore-fase: var(--rosso); background: var(--pericolo-tenue); }
.fase-pratica.grigio.bloccata { background: var(--superficie); }
.fase-pratica.bloccata .fase-nome strong, .fase-pratica.non-applicabile .fase-nome strong { color: var(--testo-tenue); }
.fase-pratica.non-applicabile .fase-nome strong { text-decoration: line-through; }
.fase-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fase-nome strong { font-size: 15px; color: var(--primario); }
.fase-nome strong::before { counter-increment: fase; content: counter(fase) ". "; color: var(--testo-tenue); font-weight: 500; }
.fase-stato { font-size: 12.5px; color: var(--colore-fase); font-weight: 600; }
.fase-pratica.grigio .fase-stato { color: var(--testo-tenue); font-weight: 500; }
.fase-dati { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; font-size: 13.5px; }
.fase-dati small { display: block; font-size: 11.5px; color: var(--testo-tenue); }
.fase-azioni { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.fase-azioni form { margin: 0; }
.fase-ok { color: var(--ok); }
/* modulo di assegnazione: si apre sotto la riga */
.assegna-fase > summary { list-style: none; cursor: pointer; }
.assegna-fase > summary::-webkit-details-marker { display: none; }
.modulo-assegna {
    position: absolute; z-index: 5; right: 0; margin-top: 6px; width: min(560px, 90vw);
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-2);
}
.assegna-fase { position: relative; }
.modulo-assegna .largo { grid-column: 1 / -1; }
.modulo-assegna .campo input, .modulo-assegna .campo select { font-size: 14px; padding: 7px 10px; }
.modulo-assegna .pulsante { grid-column: 1 / -1; justify-self: end; }
/* stato della pratica e barra di avanzamento nell'elenco */
.stato-pratica { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: middle; background: var(--azione-tenue); color: var(--azione-scuro); }
.stato-pratica.chiusa { background: var(--ok-tenue); color: var(--ok); }
.stato-pratica.annullata { background: var(--superficie); color: var(--testo-tenue); }
.avanzamento { display: inline-block; width: 90px; height: 7px; margin-right: 6px; vertical-align: middle; border-radius: 999px; background: var(--superficie); overflow: hidden; }
.avanzamento span { display: block; height: 100%; background: var(--ok); }
.pallino-fase { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--bordo-forte); }
.pallino-fase.blu { background: var(--azione); }
.pallino-fase.verde { background: var(--ok); }
.pallino-fase.rosso { background: var(--rosso); }
@media (max-width: 1000px) {
    .fase-pratica { grid-template-columns: 1fr; }
    .fase-dati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fase-azioni { justify-content: flex-start; }
    .modulo-assegna { left: 0; right: auto; }
}

/* importazione lead: le due fonti del file affiancate */
.lead-sorgenti { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 16px 0; max-width: 1100px; }
.lead-sorgenti .modulo { max-width: none; }
.lead-sorgenti .sezione-titolo { margin: 0; }
.lead-sorgenti .messaggio { margin: 0; }
.come-funziona { max-width: 1100px; margin-bottom: 16px; padding: 12px 18px; }
.come-funziona summary { cursor: pointer; font-weight: 700; color: var(--primario); }
.come-funziona ul { margin: 10px 0 0; padding-left: 20px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }

/* foto e documenti */
.allegati { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.allegati-documenti { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.allegati-documenti li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-1); }
.allegati-documenti form { margin: 0; }
.allegato-nome { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; color: var(--testo); text-decoration: none; font-size: 14px; }
.allegato-nome small { display: block; color: var(--testo-tenue); font-size: 12.5px; }
.allegato-nome:hover strong { color: var(--azione); }
.allegato-icona { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--raggio-m); background: var(--pericolo-tenue); color: var(--pericolo); font-size: 11px; font-weight: 700; }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.galleria figure { margin: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); overflow: hidden; box-shadow: var(--ombra-1); }
.galleria img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--superficie); }
.galleria figcaption { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 12.5px; color: var(--testo-tenue); min-height: 30px; }
.galleria figcaption span, .galleria figcaption a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galleria figcaption a { color: var(--azione); text-decoration: none; }
.galleria figcaption form { margin: 0; }
.galleria figure.altra { border-style: dashed; }
.galleria-elimina { border: 0; background: none; color: var(--pericolo); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.carica-allegati {
    display: grid; grid-template-columns: 2fr 1fr 1.5fr auto; gap: 10px 14px; align-items: end; padding: 14px 16px;
    background: var(--carta); border: 1.5px dashed var(--bordo-forte); border-radius: var(--raggio-l);
}
.carica-allegati input[type="file"] { font: inherit; font-size: 13.5px; }
.carica-allegati .campo input[type="text"], .carica-allegati .campo select { font-size: 14px; padding-top: 7px; padding-bottom: 7px; }
.carica-allegati .pulsante { margin-bottom: 2px; }

/* pagina di accesso */
.pagina-accesso {
    min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
    background: radial-gradient(circle at 20% 0%, #1b5a88 0%, var(--primario) 55%, #0a2d48 100%);
}
.accesso { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; }
.accesso-logo { height: 130px; margin-bottom: 24px; }
.accesso-scheda {
    width: 100%; display: flex; flex-direction: column; gap: 16px;
    background: var(--carta); border-radius: 16px; padding: 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.accesso-scheda h1 { margin: 0 0 4px; font-size: 22px; color: var(--primario); }
.accesso-piede { margin-top: 18px; font-size: 13px; color: var(--azzurro-chiaro); opacity: .85; }

/* pagina in costruzione */
.cartello { margin-top: 16px; background: var(--carta); border: 1px dashed var(--accento); border-radius: var(--raggio-l); padding: 8px 24px; max-width: 560px; }

/* pagina istruzioni aggiornamento dati da Access */
.passi { list-style: none; counter-reset: passo; padding: 0; margin: 20px 0; max-width: 820px; display: flex; flex-direction: column; gap: 14px; }
.passo {
    counter-increment: passo; position: relative; padding: 16px 20px 16px 64px;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-1);
}
.passo::before {
    content: counter(passo); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; background: var(--primario); color: #fff; font-weight: 700;
}
.passo h2 { margin: 3px 0 8px; font-size: 16px; color: var(--primario); }
.passo p { margin: 6px 0; }
.passo a.pulsante.primario { font-size: 14px; padding: 9px 16px; margin-right: 8px; }
.nota-passo { font-size: 13px; color: var(--testo-tenue); }
.percorso { display: inline-block; padding: 6px 10px; border-radius: var(--raggio-s); background: var(--superficie); border: 1px solid var(--bordo); font-size: 13.5px; user-select: all; }
.comando { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comando code { flex: 1; min-width: 260px; padding: 9px 12px; border-radius: var(--raggio-s); background: #102a3d; color: #dbe8f2; font-size: 13px; overflow-wrap: anywhere; }
/* percorsi da copiare: chiari, per distinguerli dal comando (scuro) */
.comando code.percorso { background: var(--superficie); color: var(--testo); border: 1px solid var(--bordo); }
.impostazioni-percorsi { max-width: 820px; margin: 4px 0 8px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); }
.impostazioni-percorsi > summary { padding: 12px 18px; cursor: pointer; font-weight: 700; color: var(--primario); }
.impostazioni-percorsi[open] > summary { border-bottom: 1px solid var(--bordo); }
.impostazioni-percorsi .modulo { padding: 16px 18px 18px; }
/* piccoli pulsanti "copia" dentro il testo */
.collegamento-copia {
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--azione); background: var(--azione-tenue);
    border: 1px solid var(--azzurro-chiaro); border-radius: var(--raggio-s); padding: 1px 8px; margin-left: 4px; cursor: pointer;
}
.collegamento-copia:hover { background: #d9ebf9; }
/* promemoria accanto a "Salva percorsi" */
.salva-percorsi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.non-salvato { font-size: 13px; font-weight: 500; color: var(--avviso); background: var(--avviso-tenue); border: 1px solid var(--avviso-bordo); border-radius: var(--raggio-s); padding: 5px 10px; }
.non-salvato[hidden] { display: none; }

/* ---------------------------------------------------------------- tablet e telefono */
/* il menu diventa a scomparsa, compare la barra in alto con il pulsante del menu */
@media (max-width: 760px) {
    :root { --altezza-barra: 56px; --margine-pagina: 16px; }
    .barra { display: flex; }
    .accesso-logo { height: 100px; }
    .menu { transform: translateX(-100%); transition: transform .2s; }
    .menu-interruttore:checked ~ .menu { transform: none; box-shadow: 0 0 24px rgba(0, 0, 0, .2); }
    .menu-interruttore:checked ~ .menu-velo { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(14, 60, 95, .35); }
    .contenuto { margin-left: 0; padding-top: calc(var(--altezza-barra) + 16px); }
    .pagina-titolo { font-size: 22px; }
    .tabella-settimana .col-operatore { width: 120px; }
    /* sul telefono i giorni vanno uno sotto l'altro */
    .colonne-giorni { grid-template-columns: 1fr; overflow-x: visible; }
    .planner-testa, .testa-pagina { margin-top: -16px; }
    .apri-pannello { margin-left: 0; }
    .finestra-velo { padding: 0; }
    .finestra { height: 100%; border-radius: 0; }
    .carica-allegati { grid-template-columns: 1fr; }
    .campo-cerca { min-width: 0; flex: 1; }
    .dati-contratto dl { grid-template-columns: 95px 1fr; }
    .nuova-attivita-volante {
        display: grid; place-items: center; position: fixed; right: 18px; bottom: 18px; z-index: 30;
        width: 58px; height: 58px; border-radius: 50%; background: var(--azione); color: #fff;
        font-size: 32px; font-weight: 700; line-height: 1; text-decoration: none; box-shadow: var(--ombra-2);
    }
    .nuova-attivita-volante:active { transform: scale(.94); }
    .nuova-attivita kbd { display: none; }
    .passo-successivo { grid-template-columns: 1fr 1fr; }
    .passo-successivo .spunta { grid-column: 1 / -1; }
}
.scheda-vendita .fa-riga-3 { grid-template-columns: 1.1fr .8fr 1.1fr; }
/* elenco delle vendite compatto, come in Access: una riga per vendita */
.tabella-vendite td { padding-top: 6px; padding-bottom: 6px; }
.tabella-vendite .prodotto-vendita { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabella-vendite .descrizione-vendita { font-size: 12.5px; line-height: 1.3; }
/* checklist compatta (scheda della vendita): una riga per fase con colore, stato e data, tutte in vista;
   cliccando la riga si aprono responsabile, date e pulsanti */
.checklist.compatta .fase-pratica { display: block; padding: 0; }
.fase-apri > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: var(--raggio-m); }
.fase-apri > summary::-webkit-details-marker { display: none; }
.fase-apri > summary:hover { background: rgba(14, 60, 95, .04); }
.fase-riassunto strong { flex: 1; min-width: 0; font-size: 13.5px; color: var(--primario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fase-riassunto strong::before { counter-increment: fase; content: counter(fase) ". "; color: var(--testo-tenue); font-weight: 500; }
.fase-breve { flex: none; max-width: 55%; font-size: 12px; font-weight: 600; color: var(--colore-fase); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fase-pratica.grigio .fase-breve { color: var(--testo-tenue); font-weight: 500; }
.fase-riassunto::after { content: "›"; flex: none; color: var(--testo-lieve); font-weight: 700; transition: transform .15s; }
.fase-apri[open] > .fase-riassunto::after { transform: rotate(90deg); }
.fase-pratica.bloccata .fase-riassunto strong, .fase-pratica.non-applicabile .fase-riassunto strong { color: var(--testo-tenue); }
.fase-pratica.non-applicabile .fase-riassunto strong { text-decoration: line-through; }
.fase-dettaglio { display: flex; flex-direction: column; gap: 8px; padding: 6px 10px 10px; border-top: 1px dashed var(--bordo); }
.fase-dettaglio .fase-nome { display: none; }
/* scheda della vendita: campi bassi e fitti, cosi' vendita, incasso e sezioni stanno in una schermata senza scorrere */
.scheda-vendita .sv-campi { gap: 7px; padding: 10px 18px 10px; }
.scheda-vendita .sv-campi h2 { font-size: 11.5px; }
.scheda-vendita .sv-campi .campo { gap: 2px; }
.scheda-vendita .sv-campi .campo > span { font-size: 11.5px; }
.scheda-vendita .sv-campi .campo input, .scheda-vendita .sv-campi .campo select, .scheda-vendita .sv-campi .campo textarea,
.scheda-vendita .sv-incasso > input { font-size: 13px; padding: 4px 8px; height: 30px; }
.scheda-vendita .sv-campi .campo textarea { height: auto; }
.scheda-vendita .sv-campi .campo select { padding-right: 26px; background-position: right 6px center; }
.scheda-vendita .sv-campi .fa-riga { gap: 8px; }
.scheda-vendita .sv-campi .spunta { font-size: 13px; }
.scheda-vendita .sv-campi .spunta input { width: 15px; height: 15px; }
.scheda-vendita .sv-titolo { margin-top: 4px; }
.scheda-vendita .sv-titolo:first-child { margin-top: 0; }
.scheda-vendita .sv-completato { padding: 1px 9px 1px 7px; font-size: 11.5px; }
.sv-riga-prodotto { grid-template-columns: 1.3fr 1fr 64px; }
.sv-importo-totale { font-weight: 700; }
.scheda-vendita .sv-incasso { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 8px; }
.scheda-vendita .sv-intesta { font-size: 11px; line-height: 1; }
.sv-spunte-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.sv-riga-installazione { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 12px; align-items: end; }
.sv-riga-installazione .sv-spunte-griglia { padding-bottom: 4px; }
.scheda-vendita .sv-resta { font-size: 12px; }
.sv-riga-installazione { grid-template-columns: 150px minmax(0, 1fr); }
.sv-riga-installazione .sv-spunte-griglia { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sv-riga-installazione .spunta span { white-space: nowrap; }
/* checklist a gruppi (es. 25 fasi in 5 gruppi): titolo del gruppo con fasi chiuse/totali, righe basse
   per vederle tutte nella colonna destra; facoltative con il bordo tratteggiato */
.checklist-gruppo {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; padding: 0 2px 2px;
    border-bottom: 1px solid var(--bordo); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--primario);
}
.checklist-gruppo:first-child { margin-top: 0; }
.checklist-gruppo small { font-size: 11.5px; font-weight: 600; color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.checklist-gruppo.fatto small { color: var(--ok); }
.fase-pratica.facoltativa { border-left-style: dashed; }
.fase-nota { margin: 0; font-size: 12px; font-style: italic; color: var(--testo-tenue); }
.checklist.compatta { gap: 2px; }
.checklist.compatta .fase-pratica { border-left-width: 4px; box-shadow: none; }
.checklist.compatta .fase-apri > summary { padding: 3px 8px; }
.checklist.compatta .fase-riassunto strong { font-size: 12.5px; }
.checklist.compatta .fase-breve { font-size: 11.5px; }
.checklist.compatta .fase-apri > summary { line-height: 18px; padding: 2px 8px; min-height: 0; }
.checklist.compatta .fase-riassunto::after { line-height: 18px; }
.fase-pratica.facoltativa .fase-riassunto strong { font-weight: 500; }
.checklist.compatta { gap: 1px; }
.checklist.compatta .fase-apri > summary { line-height: 16px; padding: 1px 8px; }
.checklist.compatta .fase-riassunto::after { line-height: 16px; }
.checklist.compatta .checklist-gruppo { margin-top: 4px; line-height: 16px; }
.checklist.compatta .fase-pratica { border-top: 0; border-bottom: 0; border-right: 0; border-radius: 0; background: transparent; }
.checklist.compatta .fase-pratica.rosso { background: var(--pericolo-tenue); }
.checklist.compatta .fase-pratica:has(.fase-apri[open]) { background: var(--carta); box-shadow: var(--ombra-1); }
.checklist.compatta .checklist-gruppo { margin-top: 3px; padding-bottom: 1px; line-height: 15px; }
.sv-checklist .sc-testa-colonna { margin-bottom: 0; }
/* casella a inizio riga della checklist compatta: vuota = da fare (clic = fatta), verde = fatta, trattino = non serve */
.fase-spunta {
    flex: none; align-self: center; display: grid; place-items: center; width: 15px; height: 15px; padding: 0; margin: 0;
    border: 1.5px solid var(--bordo-forte); border-radius: 4px; background: var(--carta); font-size: 11px; line-height: 1; color: #fff;
}
button.fase-spunta { cursor: pointer; border-color: var(--azione); }
button.fase-spunta:hover { background: var(--ok-tenue); border-color: var(--ok); }
button.fase-spunta:hover::after { content: "✓"; color: var(--ok); font-weight: 700; }
.fase-spunta.fatta { background: var(--ok); border-color: var(--ok); }
.fase-spunta.fatta::after { content: "✓"; font-weight: 700; }
.fase-spunta.saltata { border-style: dashed; }
.fase-spunta.saltata::after { content: "–"; color: var(--testo-tenue); }
.fase-pratica.bloccata .fase-spunta { opacity: .5; }
/* home (cruscotto): numeri in alto, poi tabella per persona e, a destra, le mie attivita' e i tipi */
.cruscotto-numeri { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cruscotto { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.cruscotto-colonna { display: flex; flex-direction: column; gap: 16px; }
.cruscotto-pannello { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-1); padding: 12px 14px; }
.cruscotto-pannello h2 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--primario); }
.tabella-cruscotto { font-size: 13px; }
.tabella-cruscotto td, .tabella-cruscotto th { padding-top: 5px; padding-bottom: 5px; }
.tabella-cruscotto .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella-cruscotto .scaduto, .cruscotto-data.scaduto { color: var(--rosso); font-weight: 700; }
.tabella-cruscotto tr.tenue td { color: var(--testo-tenue); }
.nota-cruscotto { margin: 8px 0 0; font-size: 12px; color: var(--testo-tenue); }
.cruscotto-riga { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 5px 4px; border-bottom: 1px solid var(--bordo); text-decoration: none; color: var(--testo); font-size: 13px; }
.cruscotto-riga:last-child { border-bottom: 0; }
.cruscotto-riga:hover { background: var(--azione-tenue); }
.cruscotto-riga small { color: var(--testo-tenue); }
.cruscotto-data { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--primario); }
.cruscotto-data small { display: block; font-weight: 400; }
.tabella-figure .campo-figura { width: 100%; min-width: 180px; font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); }
.tabella-figure .campo-figura:focus { outline: none; border-color: var(--azione); box-shadow: var(--anello); }
.tabella-figure td { vertical-align: middle; }
.tabella-figure .numero { text-align: right; }
.tenue { color: var(--testo-tenue); }
@media (max-width: 1100px) { .cruscotto { grid-template-columns: 1fr; } }
/* home tutta a vista, senza scorrere: riquadri bassi, tre pannelli affiancati, righe singole */
.cruscotto-numeri { gap: 10px; margin-bottom: 12px; }
.cruscotto-numeri .riquadro { padding: 8px 12px; font-size: 12.5px; flex-direction: row; align-items: baseline; gap: 8px; }
.cruscotto-numeri .riquadro strong { font-size: 22px; }
.cruscotto { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, .75fr); gap: 12px; }
.cruscotto-pannello { padding: 10px 12px; }
.tabella-cruscotto { font-size: 12.5px; }
.tabella-cruscotto td, .tabella-cruscotto th { padding: 4px 6px; }
.tabella-cruscotto th { font-size: 10.5px; }
.cruscotto-riga { grid-template-columns: 92px minmax(0, 1fr); padding: 4px; font-size: 12.5px; white-space: nowrap; }
.cruscotto-riga > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cruscotto-data small { display: inline; margin-left: 4px; font-size: 11px; }
@media (max-width: 1300px) { .cruscotto { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .cruscotto > :last-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .cruscotto { grid-template-columns: 1fr; } }
.cruscotto { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, .7fr); }
.tabella-cruscotto td:first-child small { white-space: nowrap; }
/* operatori e figure: una colonna per figura, spunte al centro */
.tabella-operatori .colonna-figura { text-align: center; white-space: nowrap; font-size: 12px; }
.tabella-operatori th.colonna-figura { cursor: help; }
.tabella-operatori input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ok); }
.tabella-operatori input[type="checkbox"]:disabled:checked { accent-color: var(--testo-lieve); }
/* checklist da 29 fasi: righe da 18px perche' stiano tutte nella colonna su uno schermo da 1080 */
.checklist.compatta .fase-apri > summary { line-height: 15px; padding: 1px 6px; }
.checklist.compatta .fase-riassunto::after { line-height: 15px; }
.checklist.compatta .fase-riassunto strong { font-size: 12px; }
.checklist.compatta .fase-breve { font-size: 11px; }
.checklist.compatta .fase-spunta { width: 13px; height: 13px; font-size: 10px; }
.checklist.compatta .checklist-gruppo { margin-top: 2px; font-size: 10.5px; line-height: 14px; }
.checklist.compatta .checklist-gruppo small { font-size: 10.5px; }
/* fase con scelta (es. materiale disponibile si'/no): due caselle con ✓ e ✗ in chiaro; quella scelta si colora */
.fase-spunta.scelta::after { content: "✓"; color: var(--testo-lieve); font-weight: 700; }
.fase-spunta.scelta.no::after { content: "✗"; }
button.fase-spunta.scelta:hover::after { color: var(--ok); }
button.fase-spunta.scelta.no:hover { background: var(--pericolo-tenue); border-color: var(--rosso); }
button.fase-spunta.scelta.no:hover::after { content: "✗"; color: var(--rosso); }
.fase-spunta.scelta.fatta::after { color: #fff; }
.fase-spunta.scelta.no.fatta { background: var(--rosso); border-color: var(--rosso); }
.fase-spunta.scelta + .fase-spunta.scelta { margin-left: -4px; }
/* messaggi al cliente nella pratica (sopra lo storico) */
.sv-messaggi { margin-top: 6px; }
.sv-messaggi .conta-pannello { margin-left: 6px; }
.elenco-messaggi { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.messaggio-cliente { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 6px; border-left: 3px solid var(--bordo-forte); background: var(--carta); font-size: 12.5px; }
.messaggio-cliente.da_inviare { border-left-color: var(--avviso); background: var(--avviso-tenue); }
.messaggio-cliente.errore { border-left-color: var(--rosso); background: var(--pericolo-tenue); }
.messaggio-cliente.inviato { border-left-color: var(--ok); }
.messaggio-cliente.annullato { opacity: .6; }
.messaggio-titolo { display: flex; flex-direction: column; min-width: 0; }
.messaggio-titolo small { color: var(--testo-tenue); }
.messaggio-azioni { display: flex; gap: 4px; flex: none; }
.messaggio-azioni form { margin: 0; }
.messaggio-azioni .pulsante { height: 24px; padding: 0 8px; font-size: 12px; }
.riga-gruppo td { background: var(--superficie); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--primario); }
/* checklist compatta: le fasi "non applicabili" (e i gruppi rimasti vuoti) nascoste; si rivedono col collegamento */
.checklist.compatta.nascondi-na > .fase-pratica.non-applicabile,
.checklist.compatta.nascondi-na > .checklist-gruppo.vuoto { display: none; }
.mostra-na { display: block; margin: 6px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--azione); cursor: pointer; text-decoration: underline; }
/* Tabelle › Messaggi WhatsApp: testo dei messaggi al cliente */
.tabella-messaggi td { vertical-align: top; }
.tabella-messaggi td:first-child { width: 260px; }
.tabella-messaggi td:last-child { width: 220px; }
.tabella-messaggi .campo-testo-messaggio { width: 100%; min-width: 320px; font: inherit; font-size: 13px; line-height: 1.4; padding: 6px 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); resize: vertical; }
.tabella-messaggi .campo-testo-messaggio:focus { outline: none; border-color: var(--azione); box-shadow: var(--anello); }
/* Impostazioni › Funnel: regole dei messaggi legati alle attivita' e anteprima */
.interruttore-funnel { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); cursor: pointer; }
.interruttore-funnel.acceso { border-color: var(--azione); background: var(--azione-tenue); }
.interruttore-funnel input { margin-top: 3px; }
.interruttore-funnel small { display: block; color: var(--testo-tenue); }
.tabella-funnel td { vertical-align: middle; padding-top: 4px; padding-bottom: 2px; }
.tabella-funnel select, .tabella-funnel input[type=text], .tabella-funnel input[type=number] { font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); max-width: 100%; }
.tabella-funnel input[type=text] { width: 100%; min-width: 170px; }
.tabella-funnel .campo-corto { width: 64px; }
.tabella-funnel tr.funnel-spiega td { border-top: 0; padding-top: 0; padding-bottom: 6px; }
.tabella-funnel tr.da-eliminare td { text-decoration: line-through; opacity: .5; }
.tabella-funnel tr.funnel-nuova td { background: var(--azione-tenue); }
.funnel-anteprima { margin-top: 18px; }
.funnel-anteprima h2 { font-size: 15px; margin: 0 0 8px; }
/* Messaggi: coda dei messaggi da inviare */
.coda-messaggi { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-m); }
.coda-messaggi .messaggio-cliente { padding: 8px 12px; }
.coda-recenti { margin-top: 14px; }
/* home: sette riquadri su una riga (con i messaggi da inviare) */
.cruscotto-numeri { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tabella-funnel select { max-width: 190px; }
.tabella-funnel input[type=text] { min-width: 150px; }
/* Schema elenco-dettaglio (riutilizzabile): elenco delle voci a sinistra, a destra solo la voce scelta
   con le sue righe (.ed-riga: interruttore, testo, azioni) e il modulo per inserire / modificare (.ed-modulo) */
.elenco-dettaglio { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.ed-elenco, .ed-dettaglio { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-m); padding: 12px; }
.ed-elenco h2, .ed-dettaglio h2 { font-size: 15px; margin: 0 0 8px; }
.ed-elenco nav { display: flex; flex-direction: column; gap: 2px; }
.ed-voce { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: var(--raggio-m); text-decoration: none; color: var(--testo); }
.ed-voce small { color: var(--testo-tenue); white-space: nowrap; }
.ed-voce:hover { background: var(--azione-tenue); }
.ed-voce.attiva { background: var(--primario); color: #fff; }
.ed-voce.attiva small { color: rgba(255, 255, 255, .8); }
.ed-aggiungi { margin-top: 10px; }
.ed-aggiungi select { width: 100%; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); color: var(--testo-tenue); }
.ed-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ed-testa h2 { margin: 0; }
.ed-righe { list-style: none; margin: 0; padding: 0; }
.ed-riga { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--bordo); }
.ed-riga.spenta .ed-testo { opacity: .5; }
.ed-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ed-testo small { color: var(--testo-tenue); }
.ed-azioni { display: flex; gap: 6px; }
.ed-interruttore input { width: 18px; height: 18px; cursor: pointer; }
.ed-modulo { list-style: none; background: var(--azione-tenue); border: 1px solid var(--azione); border-radius: var(--raggio-m); padding: 10px 12px; margin: 6px 0; }
.ed-modulo h3, .ed-anteprima h3 { font-size: 14px; margin: 0 0 8px; }
.ed-campi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
.ed-campi label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--testo-tenue); }
.ed-campi .ed-largo { grid-column: span 2; }
.ed-campi input, .ed-campi select { font: inherit; font-size: 13px; color: var(--testo); padding: 5px 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); }
.ed-campi input:focus, .ed-campi select:focus { outline: none; border-color: var(--azione); box-shadow: var(--anello); }
.ed-pulsanti { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.ed-anteprima { margin-top: 16px; }
.ed-anteprima-riga { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 4px; border-bottom: 1px solid var(--bordo); font-size: 13px; }
.testa-pagina .interruttore-funnel { margin: 0; padding: 6px 12px; align-items: center; }
@media (max-width: 900px) { .elenco-dettaglio { grid-template-columns: 1fr; } .ed-campi { grid-template-columns: 1fr 1fr; } }
.testa-pagina .interruttore-funnel { color: var(--testo); gap: 8px; }
.testa-pagina .interruttore-funnel.acceso { color: var(--primario); }
.ed-anteprima-riga { grid-template-columns: 120px minmax(0, 1fr); }
.ed-anteprima-riga .cruscotto-data small { display: inline; margin-left: 4px; }
/* elenco-dettaglio: elenco diviso in gruppi, testo lungo nel dettaglio */
.ed-elenco h2.ed-gruppo { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); margin: 12px 0 4px; }
.ed-elenco h2.ed-gruppo:first-child { margin-top: 0; }
.ed-elenco .ed-voce { font-size: 13px; padding: 5px 10px; }
.ed-usato .etichetta { margin-right: 4px; text-decoration: none; }
.ed-modulo-testo .campo-testo-messaggio { width: 100%; font: inherit; font-size: 13px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); resize: vertical; }
.ed-modulo-testo .campo-testo-messaggio:focus { outline: none; border-color: var(--azione); box-shadow: var(--anello); }
.anteprima-whatsapp { white-space: pre-wrap; max-width: 520px; padding: 10px 12px; border-radius: 10px; background: #dcf8c6; color: #111; font-size: 13px; line-height: 1.45; }
/* CRM: una colonna per tipo di attivita' (pipeline dell'operatore), ognuna scorre da sola come in Access */
.crm-operatore { font: inherit; font-size: 14px; font-weight: 700; padding: 5px 10px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); color: var(--testo); min-width: 200px; }
.crm-tavola { display: flex; gap: 12px; overflow-x: auto; align-items: stretch; height: calc(100vh - 130px); padding-bottom: 6px; }
.crm-colonna { flex: 0 0 280px; display: flex; flex-direction: column; min-height: 0; background: var(--sfondo-tenue, rgba(0, 0, 0, .03)); border-radius: var(--raggio-m); overflow: hidden; }
.crm-colonna .colonna-testa { flex: none; }
.crm-colonna .colonna-schede { flex: 1; overflow-y: auto; padding: 8px; }
/* elenco-dettaglio: numero di posizione nelle righe ordinate */
.ed-posizione { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--azione-tenue); color: var(--primario); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.ed-azioni form { display: inline; }
/* Pannello a destra (layouts.app): linguetta sul bordo, pannello a scomparsa; "fissato" sugli schermi larghi resta
   accanto alla pagina, che si stringe */
.pannello-linguetta { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 0; border-radius: 10px 0 0 10px; background: var(--primario); color: #fff; cursor: pointer; box-shadow: -2px 2px 8px rgba(0, 0, 0, .18); }
.pannello-linguetta:hover { background: var(--azione); }
.pannello-linguetta svg { width: 20px; height: 20px; }
.pannello-conta { min-width: 20px; padding: 1px 5px; border-radius: 10px; background: #e53935; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.pannello { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 92vw; z-index: 70; display: flex; flex-direction: column; background: var(--carta); border-left: 1px solid var(--bordo); box-shadow: -6px 0 18px rgba(0, 0, 0, .15); }
.pannello[hidden] { display: none; }
.pannello-testa { display: flex; align-items: center; gap: 6px; padding: 12px 12px 10px 16px; background: var(--primario); color: #fff; }
.pannello-testa strong { flex: 1; font-size: 15px; }
.pannello-testa button { border: 0; background: transparent; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.pannello-testa button:hover { background: rgba(255, 255, 255, .15); }
.pannello-fissa { font-size: 14px !important; opacity: .55; }
.pannello-fissa[aria-pressed=true] { opacity: 1; background: rgba(255, 255, 255, .2) !important; }
.pannello-corpo { flex: 1; overflow-y: auto; padding: 4px 12px 16px; }
.pannello-sezione { border-bottom: 1px solid var(--bordo); padding: 8px 0; }
.pannello-sezione summary { cursor: pointer; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--primario); padding: 4px 0; }
.pannello-scrivi { display: grid; gap: 6px; margin: 6px 0 8px; }
.pannello-scrivi select, .pannello-scrivi textarea, .pannello-note { width: 100%; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); color: var(--testo); resize: vertical; }
.pannello-scrivi button { justify-self: end; }
.pannello-messaggi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.pannello-messaggi li { padding: 6px 9px; border-radius: 8px; background: var(--azione-tenue); font-size: 13px; display: flex; flex-direction: column; gap: 2px; margin-right: 24px; }
.pannello-messaggi li.mio { background: #e8f5e9; margin: 0 0 0 24px; }
.pannello-messaggi li.nuovo { box-shadow: inset 3px 0 0 #e53935; }
.pannello-messaggi li small { color: var(--testo-tenue); font-size: 11.5px; }
.pannello-messaggi li span { white-space: pre-wrap; word-break: break-word; }
.pannello-riga { display: flex; flex-direction: column; padding: 5px 6px; border-radius: 6px; text-decoration: none; color: var(--testo); font-size: 13px; }
.pannello-riga:hover { background: var(--azione-tenue); }
.pannello-riga small { color: var(--testo-tenue); }
.pannello-lead { display: flex; flex-direction: column; gap: 1px; padding: 6px; border-radius: 6px; text-decoration: none; color: var(--testo); font-size: 13px; }
.pannello-lead:hover { background: var(--azione-tenue); }
.pannello-note { margin-top: 6px; line-height: 1.45; }
body.pannello-fissato .pannello { box-shadow: none; z-index: 40; }
body.pannello-fissato .pannello-linguetta { display: none; }
body.pannello-fissato .contenuto { margin-right: 340px; }
body.pannello-fissato .avviso-volante { right: 356px; }
@media print { .pannello, .pannello-linguetta { display: none !important; } }
/* CRM: colonne strette; nella scheda tipo e operatore non servono (sono il titolo della colonna e l'operatore scelto) */
.crm-colonna { flex-basis: 215px; }
.crm-tavola { gap: 8px; }
.crm-colonna .colonna-testa { padding: 7px 8px 7px 10px; gap: 6px; }
.crm-colonna .colonna-nome { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-colonna .colonna-schede { padding: 6px; gap: 8px; }
.crm-colonna .scheda-tipo, .crm-colonna .scheda-operatore { display: none; }
.crm-colonna .scheda-cliente { white-space: normal; text-overflow: clip; overflow: visible; overflow-wrap: anywhere; line-height: 1.25; }
.crm-colonna .scheda-testa { align-items: flex-start; }
.crm-colonna .scheda-riga.solo-tipo { display: none; }
/* Prima nota: filtri a pulsanti, elenco con saldo progressivo, movimento a destra */
.pn-filtri { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pn-riga { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.pn-riga select, .pn-riga input[type=search] { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); color: var(--testo); }
.pn-riga input[type=search] { min-width: 220px; }
.pn-chip-gruppo { display: flex; flex-wrap: wrap; gap: 3px; }
.pn-chip { padding: 4px 9px; border: 1px solid var(--bordo-forte); border-radius: 14px; background: var(--carta); color: var(--testo); text-decoration: none; font-size: 12.5px; white-space: nowrap; }
.pn-chip:hover { border-color: var(--azione); }
.pn-chip.oggi { border-color: var(--azione); }
.pn-chip.attivo { background: var(--primario); border-color: var(--primario); color: #fff; }
.pn-chip small { font-variant-numeric: tabular-nums; color: var(--testo-tenue); margin-left: 3px; }
.pn-chip.attivo small { color: rgba(255, 255, 255, .85); }
.pn-chip small.negativo { color: #c62828; }
.pn-chip.attivo small.negativo { color: #ffcdd2; }
.pn-azzera { font-size: 12.5px; }
.pn-tabella table { width: 100%; font-size: 12.5px; }
.pn-tabella thead th { position: sticky; top: 0; z-index: 1; background: var(--primario); color: #fff; }
.pn-tabella td { padding: 3px 6px; white-space: nowrap; }
.pn-tabella tbody tr { cursor: pointer; }
.pn-tabella tbody tr:hover td { background: var(--azione-tenue); }
.pn-tabella tr.selezionato td { background: #c8f7d8; }
.pn-tabella tr.scelto td { background: #ffe9a8; }
.pn-tabella .pn-descrizione { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.pn-tabella .pn-nome { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.pn-tabella .numero { text-align: right; font-variant-numeric: tabular-nums; }
.pn-tabella .pn-saldo { font-weight: 600; }
.negativo { color: #c62828; }
.positivo { color: #2e7d32; }
.pn-chiudi { font-size: 20px; text-decoration: none; color: var(--testo-tenue); line-height: 1; }
.pn-modulo { display: flex; flex-direction: column; gap: 8px; }
.pn-modulo .campo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--testo-tenue); }
.pn-modulo input, .pn-modulo select, .pn-modulo textarea { font: inherit; font-size: 13px; color: var(--testo); padding: 5px 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); width: 100%; }
.pn-modulo .campo small { font-size: 11px; }
.pn-due { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pn-importo { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pulsante.pericolo { color: #c62828; border-color: #e57373; }
.pn-tabella > table.tabella-semplice { width: 100%; min-width: 100%; display: table; }
/* prima nota: somma dei selezionati nell'intestazione "Descrizione" */
.pn-th-descrizione { white-space: nowrap; }
.pn-somma { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 2px 4px 2px 8px; border-radius: 12px; background: #c8f7d8; color: #1b5e20; font-weight: 700; text-transform: none; letter-spacing: 0; }
.pn-somma[hidden] { display: none; }
.pn-somma small { font-weight: 400; }
.pn-somma button { border: 0; border-radius: 10px; padding: 2px 8px; background: #fff; color: #1b5e20; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.pn-somma button:hover { background: #e8f5e9; }
.pn-tabella .pn-cella-sel { cursor: default; }
.pn-tabella tr.selezionato.scelto td { background: #b7ecc7; box-shadow: inset 0 2px 0 #f9a825, inset 0 -2px 0 #f9a825; }
/* prima nota: righe fino a oggi su fondo arancio chiaro,
   movimento in una finestra al centro, totali fissi in fondo */
.prima-nota .pn-tabella { overflow: auto; height: 60vh; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-m); }
.prima-nota .pn-tabella table { font-size: 14px; font-variant-numeric: tabular-nums; }
.prima-nota .pn-tabella td { padding: 5px 8px; color: #1a1a1a; }
.prima-nota .pn-tabella thead th { font-size: 13px; padding: 8px; text-transform: none; letter-spacing: 0; }
.prima-nota .pn-tabella .pn-id { color: #6b7280; font-size: 13px; }
.prima-nota .pn-tabella tr.passato td { background: #ffe6c7; }
.prima-nota .pn-tabella tbody tr:hover td { background: #ffd199; }
.prima-nota .pn-tabella tr.selezionato td { background: #c8f7d8; }
.prima-nota .pn-tabella tr.scelto td { background: #ffd54f; }
.prima-nota .pn-tabella .negativo { color: #b71c1c; }
.prima-nota .pn-tabella .positivo { color: #1b5e20; }
.prima-nota .pn-tabella .pn-descrizione { max-width: 320px; }
.prima-nota .pn-tabella .pn-nome { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.prima-nota .pn-chip { font-size: 13.5px; }
.prima-nota .pn-chip-saldo { font-size: 12.5px; color: var(--testo-tenue); margin-left: 3px; }
.prima-nota .pn-chip.attivo .pn-chip-saldo { color: rgba(255, 255, 255, .85); }
.prima-nota .pn-chip-saldo.negativo { color: #c62828; }
.prima-nota .pn-chip.attivo .pn-chip-saldo.negativo { color: #ffcdd2; }
.pn-somma span { font-weight: 400; }
.pn-totali { position: fixed; left: var(--larghezza-menu); right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline; padding: 10px var(--margine-pagina); background: #fff8e1; border-top: 2px solid #f9a825; box-shadow: 0 -3px 10px rgba(0, 0, 0, .08); font-size: 15px; }
.pn-totali strong { font-size: 17px; margin-left: 4px; }
.pn-totali .negativo { color: #b71c1c; }
.pn-totali .positivo { color: #1b5e20; }
.pn-totali-titolo { font-weight: 700; color: var(--primario); margin-right: auto; }
body.pannello-fissato .pn-totali { right: 340px; }
.pn-finestra { width: min(760px, 100%); height: auto; max-height: calc(100vh - 48px); }
.pn-finestra .finestra-testa h2 { flex: 1; margin: 0; font-size: 18px; color: var(--primario); }
.pn-finestra .finestra-corpo { padding: 16px; }
.pn-finestra .pn-modulo { display: flex; flex-direction: column; gap: 12px; }
.pn-finestra .campo span { font-size: 13px; font-weight: 600; color: var(--testo-tenue); }
.pn-finestra .campo input, .pn-finestra .campo select, .pn-finestra .campo textarea { font-family: inherit; font-size: 15px; }
.pn-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pn-finestra .pn-importo { font-size: 17px !important; }
.pn-piede { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--carta); border-top: 1px solid var(--bordo); }
.pn-piede form { margin: 0; }
.pn-spazio { flex: 1; }
@media (max-width: 760px) { .pn-totali { left: 0; } .pn-tre { grid-template-columns: 1fr; } }

/* prima nota: tendina con un filtro attivo */
.pn-filtri select.pn-filtrato { border-color: var(--azione); background-color: var(--azione-tenue); color: var(--azione-scuro); font-weight: 600; }

/* prima nota: menu a spunta per competenza e conto (se ne scelgono uno o piu') */
.pn-multi { position: relative; }
.pn-multi summary { list-style: none; cursor: pointer; font-size: 13px; padding: 5px 30px 5px 8px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta) var(--chevron) no-repeat right 8px center / 14px; color: var(--testo); }
.pn-multi summary::-webkit-details-marker { display: none; }
.pn-multi.pn-filtrato summary { border-color: var(--azione); background-color: var(--azione-tenue); color: var(--azione-scuro); font-weight: 600; }
.pn-multi-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 260px; max-height: 70vh; overflow: auto; padding: 6px; background: var(--carta); border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); box-shadow: var(--ombra-2); }
.pn-multi-menu label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--raggio-s); cursor: pointer; font-size: 14px; white-space: nowrap; }
.pn-multi-menu label:hover { background: var(--azzurro-tenue); }
.pn-multi-menu input { width: 16px; height: 16px; margin: 0; }
.pn-multi-saldo { margin-left: auto; padding-left: 16px; color: var(--testo-tenue); font-size: 13px; }
.pn-multi-saldo.negativo { color: #c62828; }
.pn-multi-piede { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--bordo); }
.pn-multi-nessuno { border: 0; background: none; color: var(--azione); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.pn-multi-mesi { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; min-width: 280px; }
.pn-multi-mesi .pn-multi-piede { grid-column: 1 / -1; }

/* modulo attivita': nota per chi riceve l'attivita' successiva; elenco delle attivita' collegate (stesso IdRiferimento) */
.passo-successivo .passo-nota { grid-column: 1 / -1; }
.passo-successivo:not(.scelto):not(.libera) .passo-nota { display: none; }
.fa-collegate { position: relative; flex: none; }
.fa-collegate summary { list-style: none; cursor: pointer; display: inline-block; }
.fa-collegate summary::-webkit-details-marker { display: none; }
.fa-collegate summary::after { content: " ▾"; }
.fa-collegate-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 520px; max-height: 60vh; overflow: auto; padding: 6px; background: var(--carta); color: var(--testo); border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); box-shadow: var(--ombra-2); }
.fa-collegate-menu a { display: grid; grid-template-columns: 62px 1.6fr 1.1fr 72px 62px; white-space: nowrap; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: var(--raggio-s); color: var(--testo); text-decoration: none; font-size: 13.5px; }
.fa-collegate-menu a:hover { background: var(--azzurro-tenue); }
.fa-collegate-menu .n { color: var(--testo-lieve); font-size: 12.5px; }
.fa-collegate-menu .stato { color: var(--avviso); font-size: 12.5px; text-align: right; }
.fa-collegate-menu a.fatta .stato { color: var(--ok); }
.passo-successivo:not(.scelto):not(.libera) .passo-operatori { display: none; }

/* tendina a scelta multipla (details + caselle): sul pulsante chiuso le voci spuntate */
.tendina-multipla { position: relative; min-width: 0; }
.tendina-multipla summary { list-style: none; cursor: pointer; height: var(--altezza-controllo); line-height: calc(var(--altezza-controllo) - 2px); padding: 0 28px 0 8px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta) var(--chevron) no-repeat right 7px center / 14px; color: var(--testo); }
.tendina-multipla summary::-webkit-details-marker { display: none; }
.tendina-multipla[open] summary { border-color: var(--azione); box-shadow: var(--anello); }
.tendina-multipla-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 200px; max-height: 300px; overflow: auto; padding: 5px; background: var(--carta); border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); box-shadow: var(--ombra-2); }
.tendina-multipla-menu label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--raggio-s); cursor: pointer; font-size: 14px; white-space: nowrap; }
.tendina-multipla-menu label:hover { background: var(--azzurro-tenue); }
.tendina-multipla-menu input { width: 16px; height: 16px; margin: 0; }
.tendina-multipla:has(:disabled) summary { opacity: .45; pointer-events: none; }
.passo-successivo .passo-operatori { grid-column: 1 / -1; order: -1; }
.passo-successivo .spunta { order: -2; }
.passo-successivo.scelto .spunta, .passo-successivo.libera .spunta { grid-column: 1 / -1; }
.passo-successivo .tendina-multipla-menu { right: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* "Attivita' terminata": in cima alla scheda Chiusura, sopra date del lavoro, incasso e attivita' successive */
.fa-pannello.chiusura .spunta-fatta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; font-size: 16px; background: var(--carta); border: 1px solid var(--ok-bordo); border-radius: var(--raggio-m); cursor: pointer; }
.fa-pannello.chiusura .spunta-fatta:has(:checked) { background: var(--ok-tenue); border-color: var(--ok); }
.fa-pannello.chiusura .spunta-fatta input { width: 20px; height: 20px; }
/* sotto le 4 attivita' successive piu' frequenti: le altre (tendina a scelta multipla) e "+ Nuova" */
.passi-altre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.passi-altre .tendina-multipla { flex: 1; min-width: 200px; }
.passi-altre .tendina-multipla[hidden] { display: none; }
.passi-altre .tendina-multipla-menu { min-width: 100%; max-height: 260px; }

/* ---------- KPI vendite: tutto in una schermata ---------- */
.kpi { display: flex; flex-direction: column; height: calc(100vh - 60px); min-height: 640px; }
.kpi .testa-pagina { margin-bottom: 10px; }
.kpi-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kpi-mese { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fascia-tenue); }
.kpi-mese :is(input, select) { height: var(--altezza-controllo); font: inherit; font-size: 13px; padding: 0 8px; border: 0; border-radius: var(--raggio-s); background: var(--carta); color: var(--testo); }
.kpi-attivi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kpi-attivi button { font: inherit; font-size: 12px; padding: 4px 10px; border: 1px solid var(--azione); border-radius: 99px; background: var(--azione-tenue); color: var(--azione-scuro); cursor: pointer; }
.kpi-attivi .kpi-togli-tutti { border-color: var(--bordo-forte); background: var(--carta); color: var(--testo-tenue); }
.kpi-tessere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.kpi-tessera { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-1); }
.kpi-tessera-titolo { font-size: 12px; color: var(--testo-tenue); }
.kpi-tessera strong { font-size: 24px; line-height: 1.15; color: var(--testo); font-variant-numeric: tabular-nums; }
.kpi-delta { font-size: 12px; color: var(--testo-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-delta small { font-size: 11px; color: var(--testo-lieve); }
.kpi .su, .kpi-delta.su, .kpi-tip .su { color: var(--ok); font-weight: 600; }
.kpi .giu, .kpi-delta.giu, .kpi-tip .giu { color: var(--pericolo); font-weight: 600; }
.kpi-griglia { flex: 1; min-height: 0; display: grid; gap: 10px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.kpi-pannello { grid-column: span 4; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 6px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-1); }
.kpi-mensile { grid-column: span 8; }
.kpi-pannello header { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; }
.kpi-pannello h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--primario); }
.kpi-pannello h2 span { font-weight: 400; color: var(--testo-tenue); font-size: 12px; }
.kpi-nota { margin-left: auto; font-size: 11px; color: var(--testo-lieve); display: inline-flex; align-items: center; gap: 5px; }
.kpi-piccolo { height: 26px; padding: 2px; }
.kpi-piccolo a { padding: 0 8px; font-size: 12px; }
.kpi-legenda { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: var(--testo-tenue); margin-left: auto; }
.kpi-legenda span { display: inline-flex; align-items: center; gap: 4px; }
.kpi-legenda i, .kpi-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.kpi i.tratteggio { width: 14px; height: 0; border-top: 2px dashed var(--testo-tenue); border-radius: 0; }
.kpi-segno { display: inline-block; width: 2px; height: 12px; background: var(--testo); }
.kpi-grafico { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.kpi-grafico svg { position: absolute; inset: 0; display: block; }
.kpi-grafico .griglia { stroke: var(--bordo); stroke-width: 1; }
.kpi-grafico .asse { stroke: var(--bordo-forte); stroke-width: 1; }
.kpi-grafico .etich { font-size: 11px; fill: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.kpi-grafico .etich.valore { fill: var(--testo); font-weight: 600; }
.kpi-grafico .etich.nome { fill: var(--testo); }
.kpi-grafico tspan.su { fill: var(--ok); }
.kpi-grafico tspan.giu { fill: var(--pericolo); }
.kpi-grafico tspan.nuovo { fill: var(--testo-lieve); font-weight: 400; }
.kpi-grafico .linea-prima { fill: none; stroke: var(--testo-tenue); stroke-width: 2; stroke-dasharray: 5 4; }
.kpi-grafico .punto-prima { fill: var(--testo-tenue); stroke: var(--carta); stroke-width: 2; }
.kpi-grafico .anello { stroke: var(--carta); stroke-width: 2; }
.kpi-grafico .segno-prima { stroke: var(--testo); stroke-width: 2; }
.kpi-grafico .sensibile { fill: transparent; }
.kpi-grafico .sensibile.sopra { fill: rgba(14, 60, 95, .05); }
.kpi-grafico .cliccabile { cursor: pointer; }
.kpi-grafico .voce.spenta { opacity: .45; }
.kpi-grafico .voce.scelta .nome { font-weight: 700; }
.kpi-vuoto { margin: 30px 0; text-align: center; color: var(--testo-lieve); font-size: 13px; }
.kpi-tip { position: fixed; z-index: 50; pointer-events: none; min-width: 160px; padding: 8px 10px; background: var(--carta); border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); box-shadow: 0 6px 20px rgba(14, 60, 95, .18); font-size: 12px; color: var(--testo); }
.kpi-tip strong { display: block; margin-bottom: 4px; color: var(--primario); }
.kpi-tip table { border-collapse: collapse; }
.kpi-tip td { padding: 1px 0 1px 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-tip td:first-child { padding-left: 0; text-align: left; }
.kpi-tip td:first-child i { margin-right: 6px; vertical-align: -1px; }
.kpi-tip td.tenue { color: var(--testo-tenue); }
.kpi-tip .kpi-tip-testa td { font-size: 10px; color: var(--testo-lieve); text-transform: uppercase; letter-spacing: .03em; }
.kpi-tip .kpi-tip-tot td { font-weight: 700; border-bottom: 1px solid var(--bordo); padding-bottom: 3px; }
@media (max-width: 1100px) {
    .kpi { height: auto; }
    .kpi-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-griglia { grid-template-rows: none; grid-auto-rows: 300px; }
    .kpi-pannello, .kpi-mensile { grid-column: 1 / -1; }
}
.kpi-tessera.negativo strong { color: var(--pericolo); }
.kpi-spunta { cursor: pointer; }
.kpi-spunta input { width: 15px; height: 15px; accent-color: var(--azzurro); }
/* pulsante secondario sulla fascia blu */
.testa-pagina .pulsante.in-fascia { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: var(--fascia-testo); }
.testa-pagina .pulsante.in-fascia:hover { background: rgba(255, 255, 255, .24); }

/* ---------- KPI conto economico ---------- */
.ce-griglia .ce-tabella-pannello { grid-column: span 5; grid-row: 1 / 3; }
.ce-griglia .ce-cascata, .ce-griglia .ce-mensile { grid-column: span 7; }
.ce-tabella-box { flex: 1; min-height: 0; overflow: auto; }
.ce-tabella { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ce-tabella th { position: sticky; top: 0; background: var(--carta); font-size: 11px; font-weight: 600; color: var(--testo-lieve); text-align: left; padding: 2px 6px 4px; border-bottom: 1px solid var(--bordo); }
.ce-tabella td { padding: 3px 6px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.ce-tabella .num { text-align: right; }
.ce-tabella td:first-child { white-space: normal; }
.ce-tabella tr.voce td:first-child { padding-left: 16px; color: var(--testo); }
.ce-tabella tr.sub td { font-weight: 700; color: var(--primario); background: var(--azzurro-tenue); }
.ce-tabella tr.sub-ebitda td, .ce-tabella tr.sub-risultato td { background: #d9ebf8; font-size: 13px; }
.ce-tabella tr.escluso td { color: var(--testo-lieve); font-style: italic; }
.ce-tabella td.meno { color: var(--pericolo); }
.ce-tabella td.tenue { color: var(--testo-tenue); }
.ce-tabella tr[data-riga]:not([data-riga=""]) { cursor: pointer; }
.ce-tabella tr.sopra td { background: var(--azione-tenue); }
.ce-tabella tr.scelta td:first-child { box-shadow: inset 3px 0 0 var(--azione); }
.ce-quota { font-size: 12px; font-weight: 600; color: var(--testo-tenue); }
.kpi-tessera[data-riga] { cursor: pointer; }
.kpi-tessera.scelta { border-color: var(--azione); box-shadow: 0 0 0 1px var(--azione); }
.kpi-grafico .ce-ponte { stroke: var(--testo-lieve); stroke-width: 1; stroke-dasharray: 3 3; }
.ce-competenze { position: relative; }
.ce-competenze summary { list-style: none; display: inline-flex; align-items: center; height: var(--altezza-controllo); padding: 0 12px; border-radius: var(--raggio-s); background: var(--carta); color: var(--testo); font-size: 13px; cursor: pointer; }
.ce-competenze summary::after { content: '▾'; margin-left: 8px; color: var(--testo-tenue); }
.ce-competenze-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 180px; padding: 6px; background: var(--carta); border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); box-shadow: 0 8px 24px rgba(14, 60, 95, .18); }
.ce-competenze-menu label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--raggio-s); color: var(--testo); font-size: 13px; cursor: pointer; }
.ce-competenze-menu label:hover { background: var(--azione-tenue); }
.ce-dialogo { width: min(980px, 96vw); max-height: 90vh; padding: 0; border: 0; border-radius: var(--raggio-l); box-shadow: 0 20px 60px rgba(14, 60, 95, .35); }
.ce-dialogo::backdrop { background: rgba(14, 37, 54, .45); }
.ce-dialogo form { display: flex; flex-direction: column; max-height: 90vh; }
.ce-dialogo-testa { display: flex; align-items: flex-start; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--bordo); }
.ce-dialogo-testa h2 { margin: 0; font-size: 17px; color: var(--primario); }
.ce-dialogo-testa p { margin: 3px 0 0; font-size: 12.5px; color: var(--testo-tenue); }
.ce-dialogo-testa .azioni { margin-left: auto; display: flex; gap: 8px; }
.ce-dialogo-corpo { overflow: auto; padding: 4px 18px 14px; }
.ce-voci { width: 100%; border-collapse: collapse; font-size: 13px; }
.ce-voci th { position: sticky; top: 0; background: var(--carta); text-align: left; font-size: 11px; color: var(--testo-lieve); padding: 8px 6px 4px; }
.ce-voci td { padding: 3px 6px; border-bottom: 1px solid var(--bordo); }
.ce-voci .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--testo-tenue); white-space: nowrap; }
.ce-voci select { width: 100%; font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); }
@media (max-width: 1100px) { .ce-griglia .ce-tabella-pannello { grid-row: auto; grid-column: 1 / -1; } .ce-griglia .kpi-pannello { grid-column: 1 / -1; } }
.ce-tabella th { white-space: nowrap; }
.ce-tabella td:first-child { white-space: nowrap; max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 820px) { .ce-tabella { font-size: 12px; } .ce-tabella td { padding: 2px 6px; } .ce-tabella tr.sub-ebitda td, .ce-tabella tr.sub-risultato td { font-size: 12.5px; } }
/* indici e valutazione */
.ce-indici-box { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.ce-giudizio { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: var(--raggio-m); border: 1px solid var(--bordo); font-size: 12px; color: var(--testo-tenue); }
.ce-giudizio > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ce-giudizio.stato-buono { background: var(--ok-tenue); border-color: var(--ok-bordo); }
.ce-giudizio.stato-attenzione { background: var(--avviso-tenue); border-color: var(--avviso-bordo); }
.ce-giudizio.stato-critico { background: var(--pericolo-tenue); border-color: var(--pericolo-bordo); }
.ce-punteggio { display: flex; align-items: baseline; gap: 1px; color: var(--testo); }
.ce-punteggio strong { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.ce-giudizio-titolo { font-size: 14px; font-weight: 700; color: var(--testo); }
.ce-tag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 99px; white-space: nowrap; }
.ce-tag.buono { color: var(--ok); background: var(--ok-tenue); }
.ce-tag.attenzione { color: var(--avviso); background: var(--avviso-tenue); }
.ce-tag.critico { color: var(--pericolo); background: var(--pericolo-tenue); }
.ce-indici { display: flex; flex-direction: column; }
.ce-indice { display: grid; grid-template-columns: minmax(0, 1fr) 74px 90px 84px; align-items: center; gap: 8px; padding: 3px 4px; border-bottom: 1px solid var(--bordo); }
.ce-indice.sopra { background: var(--azione-tenue); }
.ce-indice-nome { font-size: 12.5px; font-weight: 600; color: var(--testo); min-width: 0; }
.ce-indice-nome small { display: block; font-size: 11px; font-weight: 400; color: var(--testo-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-indice-valore { text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ce-indice-valore small { display: block; font-size: 10.5px; font-weight: 400; color: var(--testo-lieve); }
.ce-indice-barra { position: relative; height: 8px; border-radius: 4px; }
.ce-indice-barra i { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: var(--testo); box-shadow: 0 0 0 2px var(--carta); }
.ce-indice-barra b { position: absolute; top: -2px; width: 2px; height: 12px; margin-left: -1px; background: var(--testo-lieve); }
.ce-indice-stato { text-align: right; }
.ce-tabella-pannello header .selettore { margin-right: auto; }
.ce-griglia.vista-indici .ce-tabella-pannello { grid-column: span 7; }
.ce-griglia.vista-indici .ce-cascata, .ce-griglia.vista-indici .ce-mensile { grid-column: span 5; }
.ce-indici { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0 14px; }
.ce-indice { display: flex; flex-direction: column; gap: 4px; padding: 5px 4px; }
.ce-indice-riga { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ce-indice-riga .ce-indice-nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-indice-riga .ce-indice-valore { text-align: right; white-space: nowrap; }
.ce-indice-riga .ce-indice-valore small { display: inline; }
.ce-indice-testo { font-size: 11px; color: var(--testo-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-indice-barra { height: 6px; margin: 3px 0 1px; }
.ce-indice-barra i { top: -4px; }
.ce-indice-barra b { top: -3px; }
@media (max-width: 1100px) { .ce-griglia.vista-indici .kpi-pannello { grid-column: 1 / -1; } }
.ce-indici .ce-indice { align-items: stretch; min-width: 0; }
.ce-indici .ce-indice { padding: 3px 4px; gap: 2px; }
.ce-giudizio { padding: 4px 10px; }
.ce-indici-box { gap: 4px; }

/* ---------- previsione di cassa ---------- */
.pc-tessere { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pc-griglia .pc-grafico, .pc-griglia .pc-settimane { grid-column: span 8; }
.pc-griglia .pc-attese { grid-column: span 4; grid-row: 1 / 3; }
.pc-tabella td { white-space: nowrap; }
.pc-tabella td:first-child { width: auto; max-width: none; }
.pc-tabella .pc-saldo { font-weight: 700; }
.pc-tabella tr.voce td:first-child { padding-left: 6px; }
.kpi-grafico .pc-rosso { fill: var(--pericolo-tenue); opacity: .6; }
.pc-modulo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--bordo); }
.pc-modulo .pc-tipo, .pc-modulo input[name=descrizione], .pc-errore { grid-column: 1 / -1; }
.pc-modulo input[type=date], .pc-modulo input[type=text], .pc-modulo input[type=number] { font: inherit; font-size: 13px; height: var(--altezza-controllo); padding: 0 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); color: var(--testo); min-width: 0; }
.pc-modulo .pulsante { grid-column: 1 / -1; justify-content: center; }
.pc-tipo { display: flex; }
.pc-tipo label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%; border-radius: var(--raggio-s); font-size: 13px; color: var(--testo-tenue); cursor: pointer; }
.pc-tipo label:has(input:checked) { background: var(--carta); color: var(--azione-scuro); font-weight: 700; box-shadow: var(--ombra-1); }
.pc-tipo input { display: none; }
.pc-errore { margin: 0; font-size: 12px; color: var(--pericolo); }
.pc-elenco { flex: 1; min-height: 0; overflow: auto; padding-top: 4px; }
.pc-voce { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 24px; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid var(--bordo); font-size: 13px; }
.pc-data { color: var(--testo-tenue); font-size: 12px; }
.pc-descr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-voce.entrata strong { color: var(--ok); }
.pc-voce.uscita strong { color: var(--pericolo); }
.pc-togli { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--testo-lieve); font-size: 16px; cursor: pointer; }
.pc-togli:hover { background: var(--pericolo-tenue); color: var(--pericolo); }
.pc-vuoto, .pc-nota { font-size: 12px; color: var(--testo-tenue); margin: 8px 0 0; }
.pc-nota { color: var(--testo-lieve); }
@media (max-width: 1100px) { .pc-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-griglia .kpi-pannello { grid-column: 1 / -1; grid-row: auto; } }
.pc-griglia { grid-template-rows: minmax(0, 1fr) auto; }
.pc-griglia .pc-grafico { grid-column: 1 / 9; grid-row: 1; }
.pc-griglia .pc-settimane { grid-column: 1 / 9; grid-row: 2; max-height: 52vh; }
.pc-griglia .pc-attese { grid-column: 9 / 13; grid-row: 1 / 3; }
.pc-tabella td { padding-top: 2px; padding-bottom: 2px; }

/* ---------- KPI tecnici ---------- */
.kpi-tecnici .kpi-tessere { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-tecnici .kpi-tessera { gap: 1px; padding: 8px 12px; }
.kpi-tecnici .kpi-tessera strong { font-size: 22px; }
.kpi-tecnici .kpi-mensile { grid-column: span 6; }
.kpi-tecnici .kpi-annuale { grid-column: span 2; }
.kpi-tecnici .kt-classifica { grid-column: span 4; }
.kpi-tecnici .kt-anni { grid-column: span 3; }
.kpi-tecnici .kt-cosa { grid-column: span 3; }
.kpi-tecnici .kt-qualita { grid-column: span 6; }
.kt-avviso { margin: 0 0 8px; padding: 6px 12px; font-size: 13px; color: var(--avviso); background: var(--avviso-tenue); border-radius: var(--raggio-m); }
.kt-avviso a { color: inherit; font-weight: 700; }
.kt-tabella-box { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.kt-tabella { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kt-tabella th { position: sticky; top: 0; background: var(--carta); font-size: 11px; font-weight: 600; color: var(--testo-tenue); text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.kt-tabella td { text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.kt-tabella :is(th, td):first-child { text-align: left; max-width: 0; width: 100%; min-width: 120px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1500px) { .kt-tabella { font-size: 12px; } .kt-tabella :is(th, td) { padding: 3px 4px; } .kt-tabella th { font-size: 10.5px; white-space: normal; line-height: 1.15; } }
.kt-tabella td:first-child i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.kt-tabella tbody tr { cursor: pointer; }
.kt-tabella tbody tr:hover { background: var(--azione-tenue); }
.kt-tabella tr.scelta td { font-weight: 700; }
.kt-tabella tr.spenta { opacity: .45; }
.kt-tabella tfoot td { font-weight: 600; color: var(--testo-tenue); border-bottom: 0; }
@media (max-width: 1100px) { .kpi-tecnici .kpi-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-tecnici .kpi-pannello { grid-column: 1 / -1; } }

/* ---------- tabelle voci interventi e ambienti: l'elenco scorre da solo, tutto in una schermata ---------- */
.vi { display: flex; flex-direction: column; height: calc(100vh - 60px); min-height: 520px; }
.vi .testa-pagina { margin-bottom: 10px; }
.vi-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.vi-filtri .selettore small { color: var(--testo-lieve); font-size: 11px; margin-left: 3px; }
.vi-filtri :is(select, input[type=search]) { height: var(--altezza-controllo); font: inherit; font-size: 13px; padding: 0 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); }
.vi-griglia { flex: 1; min-height: 0; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: stretch; }
.vi-elenco { display: flex; flex-direction: column; min-height: 0; }
.vi-elenco nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.vi-dettaglio { min-height: 0; overflow-y: auto; }
.vi-testo { display: flex; flex-direction: column; min-width: 0; }
.vi-testo small { font-size: 11px; color: var(--testo-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-voce.attiva .vi-testo small { color: rgba(255, 255, 255, .8); }
.ed-voce.tenue { opacity: .55; }
.vi-attenzione { color: var(--avviso); font-weight: 700; }
.ed-voce.attiva .vi-attenzione { color: #ffd76a; }
.vi-nuova { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bordo); }
.vi-nuova :is(input, select) { flex: 1; min-width: 120px; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); }
.vi-nuova.riga { border-top: 0; max-width: 620px; }
.vi-percorso { margin: 0 0 8px; font-size: 12.5px; color: var(--testo-tenue); }
.vi-percorso a { color: var(--azione); }
.vi-modifica { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vi-modifica input[type=text] { flex: 1; min-width: 240px; max-width: 620px; font: inherit; font-size: 15px; font-weight: 600; padding: 7px 10px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); }
.vi-info { margin: 6px 0 12px; }
.vi-doppioni { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; margin-bottom: 12px; background: var(--avviso-tenue); border-radius: var(--raggio-m); font-size: 13px; }
.vi-doppioni strong { color: var(--avviso); }
.vi-doppione { display: inline-flex; align-items: center; gap: 6px; }
.vi-doppione form { margin: 0; }
.vi-unisci { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--testo-tenue); }
.vi-unisci select { min-width: 260px; max-width: 480px; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); }
.vi-sotto-titolo { margin: 8px 0 4px; font-size: 14px; color: var(--primario); }
.vi-figli { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 24px; }
.vi-figli li { break-inside: avoid; display: flex; justify-content: space-between; gap: 8px; padding: 4px 2px; border-bottom: 1px solid var(--bordo); font-size: 13px; }
.vi-figli li.tenue { opacity: .55; }
.vi-figli a { color: var(--testo); text-decoration: none; }
.vi-figli a:hover { color: var(--azione); }
.vi-figli small { color: var(--testo-tenue); white-space: nowrap; }
.vi-fuori { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 10px; font-size: 13px; }
@media (max-width: 900px) { .vi { height: auto; } }

/* ---------- moduli in larghezza (contratto, macchina): una colonna per sezione, Salva nella fascia in alto ---------- */
.modulo-colonne { max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; align-items: stretch; padding: 12px; }
.modulo-colonne > :not(fieldset) { grid-column: 1 / -1; }
.modulo-colonne fieldset {
    grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; min-width: 0;
    padding: 10px 12px 12px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-m);
}
.modulo-colonne legend { float: left; width: 100%; margin: 0 0 2px; font-size: 14px; }
.modulo-colonne .campo { gap: 3px; }
.modulo-colonne .campo > span { font-size: 12.5px; }
.modulo-colonne .campo small { font-size: 11.5px; line-height: 1.3; }
.modulo-colonne .scelta-macchine { max-height: 240px; overflow-y: auto; }
.modulo-colonne fieldset > * { grid-column: 1 / -1; }
.modulo-colonne .nuovo-indirizzo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px; }
.modulo-colonne .nuovo-indirizzo[hidden] { display: none; }
.modulo-colonne .nuovo-indirizzo > * { grid-column: auto; }
.modulo-colonne .nuovo-indirizzo > :is(.campo:first-of-type, .campo:last-of-type, small) { grid-column: 1 / -1; }
.modulo-colonne .nota-modulo { margin: 0; font-size: 12px; color: var(--testo-tenue); }
.testa-pagina .azioni { display: flex; gap: 8px; align-items: center; }

/* ---------- schede in larghezza (contratto, macchina, pratica): colonne alte quanto la finestra, ognuna scorre da sola ---------- */
.contenuto:has(> .pagina-colonne) { display: flex; flex-direction: column; height: 100vh; padding-bottom: 14px; }
.pagina-colonne { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 14px; }
.pagina-colonne.tre { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); }
.pagina-colonne.pratica { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.pc-colonna { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.pc-colonna > .sezione-titolo:first-child { margin-top: 0; }
.pc-colonna .sezione-titolo { margin: 18px 0 8px; font-size: 15px; }
.pc-colonna .dati-contratto { grid-template-columns: 1fr; gap: 10px; }
.pc-colonna .dati-contratto dl { grid-template-columns: 105px 1fr; gap: 5px 10px; font-size: 13.5px; }
.pc-colonna .tabella-semplice { font-size: 13px; }
.pc-colonna .elimina-contratto { margin-top: 14px; }
.pc-colonna { overflow-x: hidden; }
.pc-colonna .carica-allegati { grid-template-columns: minmax(0, 1fr); }
.pc-colonna .tabella-scorre { overflow-x: visible; }
.pc-colonna .tabella-scadenze :is(th, td) { padding: 6px 8px; }
.pc-colonna .azioni-scadenza { gap: 4px; max-width: 290px; }
.pc-colonna .azioni-scadenza .pulsante { padding-left: 9px; padding-right: 9px; }
.pc-colonna .azioni-scadenza input[type="date"] { width: 128px; padding: 0 4px; }
.pc-colonna .azioni-scadenza input[type="text"] { order: 3; flex-basis: 100%; height: 28px; font-size: 12.5px; }
@media (max-width: 1000px) {
    .contenuto:has(> .pagina-colonne) { height: auto; }
    .pagina-colonne, .pagina-colonne.tre, .pagina-colonne.pratica { grid-template-columns: 1fr; }
    .pc-colonna { overflow: visible; }
}

/* ---------- squadre passate ---------- */
.sp-modulo { display: grid; grid-template-columns: minmax(220px, 360px) minmax(200px, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.sp-modulo .campo input { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); }
.tendina-gruppo { margin: 6px 8px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); }
.sp-colonne { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 18px; }
.sp-colonne h3 { margin: 0 0 6px; font-size: 14px; color: var(--primario); }
.sp-indizi { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.sp-indizi li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--bordo); }
.sp-attivita { font-size: 12.5px; }
.sp-attivita td { padding: 3px 6px; white-space: nowrap; }
.sp-attivita td:last-child { white-space: normal; max-width: 420px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
@media (max-width: 900px) { .sp-modulo, .sp-colonne { grid-template-columns: 1fr; } }

/* ---------- mappa delle attivita' (attivita/mappa): mappa e giornata degli operatori a sinistra, elenchi a destra ---------- */
.contenuto:has(> .mappa-pagina) { display: flex; flex-direction: column; height: 100vh; padding-bottom: 14px; }
.mp-al-planner { margin-left: auto; }
.planner-testa .selettore a.oggi:not(.attivo) { box-shadow: inset 0 -2px 0 var(--azzurro); }
.mappa-pagina { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; }
.mp-sinistra { min-height: 0; display: grid; grid-template-rows: minmax(260px, 1fr) auto; gap: 12px; }
.mp-mappa-box { position: relative; min-height: 0; border: 1px solid var(--bordo); border-radius: var(--raggio-l); overflow: hidden; box-shadow: var(--ombra-1); background: var(--superficie); }
.mp-mappa { position: absolute; inset: 0; }
.mp-mappa.leaflet-container { font-family: var(--carattere); }
.mp-cerca { position: absolute; top: 10px; left: 56px; z-index: 500; padding: 5px 12px; border-radius: 20px; background: var(--carta); box-shadow: var(--ombra-2); font-size: 12.5px; color: var(--testo-tenue); }
.mp-lato { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.mp-blocco { padding: 12px 14px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-1); }
.mp-tappe-blocco { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mp-titolo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; color: var(--primario); }
.mp-titolo #mp-titolo-tappe::first-letter { text-transform: uppercase; }
.mp-conta { margin-left: auto; padding: 0 7px; min-width: 22px; text-align: center; border-radius: 10px; background: var(--superficie); font-size: 12px; font-weight: 700; color: var(--testo-tenue); }
.mp-lista { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; cursor: pointer; }
.mp-lista input { margin: 0; accent-color: var(--azione); }
.mp-nota { margin: 6px 0 0; font-size: 12px; color: var(--testo-tenue); }
.mp-vuoto { margin: 8px 0; font-size: 13px; color: var(--testo-tenue); }
.mp-tappe { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; margin-right: -6px; padding-right: 6px; }
.mp-giorno { margin: 12px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--bordo); font-size: 12.5px; color: var(--primario); }
.mp-giorno::first-letter { text-transform: uppercase; }
.mp-gruppo { margin-bottom: 8px; }
.mp-gruppo-testa { display: flex; align-items: center; gap: 6px; padding: 4px 0 2px; font-size: 13px; }
.mp-gruppo-testa i, .mp-g-nome i, .mp-op i, .mp-legenda i { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.mp-gruppo-testa span { margin-left: auto; font-size: 12px; color: var(--testo-tenue); white-space: nowrap; }
.mp-tappa { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr); gap: 6px; align-items: center; padding: 4px 6px; border-radius: var(--raggio-s); color: var(--testo); text-decoration: none; }
.mp-tappa:hover { background: var(--azione-tenue); }
.mp-tappa.fatta { opacity: .55; }
.mp-num { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #fff; font-size: 10.5px; font-weight: 700; }
.mp-tappa-ora { font-size: 12px; color: var(--testo-tenue); }
.mp-tappa-testo { min-width: 0; }
.mp-tappa-testo strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-tappa-testo small { display: block; font-size: 11.5px; color: var(--testo-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* segni sulla mappa: cerchio colorato col numero della tappa (o la lettera del giorno), tratteggiato se la posizione
   e' approssimata; spillo per le attivita' da programmare, scuro se scadute */
.mp-segno { background: none; border: 0; }
.mp-punto {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--c); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    font: 700 11px/1 var(--carattere); transition: transform .12s;
}
.mp-punto.approssimato { background: #fff; color: var(--c); border: 2px dashed var(--c); }
.mp-punto.fatto { opacity: .55; }
.mp-pin {
    display: grid; place-items: center; width: 22px; height: 22px; margin: 1px 0 0 2px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); background: #9aa5b1; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transition: transform .12s;
}
.mp-pin b { transform: rotate(45deg); color: #fff; font: 700 10px/1 var(--carattere); }
.mp-pin.scaduto { background: #1f2933; }
.mp-pin.piccolo { display: inline-block; flex: none; width: 12px; height: 12px; margin: 0 2px; border-width: 1px; box-shadow: none; vertical-align: -1px; }
.mp-segno.evidenziato { z-index: 2000 !important; }
.mp-segno.evidenziato .mp-punto { transform: scale(1.4); }
.mp-segno.evidenziato .mp-pin { transform: rotate(-45deg) scale(1.3); }
.mp-legenda { max-height: 260px; overflow-y: auto; padding: 8px 12px; background: var(--carta); border-radius: var(--raggio-m); box-shadow: var(--ombra-2); font-size: 12px; line-height: 1.6; }
.mp-legenda b { display: block; margin-top: 4px; color: var(--primario); }
.mp-legenda b:first-child { margin-top: 0; }
.mp-legenda i { margin-right: 6px; }
.mp-legenda .mp-pin.piccolo { margin: 0 8px 0 1px; }
.mp-leg-appross i { background: #fff; border: 2px dashed var(--testo-tenue); width: 12px; height: 12px; vertical-align: -2px; }

/* fumetto dei punti */
.mp-mappa .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.45; }
.mp-mappa .leaflet-popup-content-wrapper { border-radius: var(--raggio-m); }
.mp-pop-testa { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 14.5px; color: var(--primario); }
.mp-fatta { color: var(--ok); font-weight: 700; }
.mp-pop-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; }
.mp-pop-riga.tenue { color: var(--testo-tenue); }
.mp-pop-riga.avviso { color: var(--avviso); font-size: 12px; }
.mp-pop-riga.pericolo { color: var(--pericolo); font-weight: 700; }
.mp-chip { padding: 1px 8px; border-radius: 10px; color: #fff; font-size: 11.5px; font-weight: 600; }
.mp-chip.scuro { background: var(--primario); }
.mp-op { display: inline-flex; align-items: center; gap: 5px; }
.mp-pop-nota { margin-top: 6px; padding: 6px 8px; border-radius: var(--raggio-s); background: var(--superficie); font-size: 12.5px; }
.mp-vicine { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--bordo); }
.mp-vicine b { display: block; margin-bottom: 2px; font-size: 12px; color: var(--primario); }
.mp-vicine a { display: block; padding: 2px 0; font-size: 12.5px; text-decoration: none; }
.mp-vicine a:hover { text-decoration: underline; }
.mp-vicine a span { display: inline-block; min-width: 52px; font-weight: 700; }
.mp-pop-azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mp-mappa .leaflet-popup-content a.pulsante { height: 28px; }
.mp-mappa .leaflet-popup-content a.pulsante.primario { color: #fff; }
.mp-mappa .leaflet-popup-content a.pulsante.secondario { color: var(--testo); }

/* giornata degli operatori sotto la mappa: una riga per operatore (per giorno e operatore con tutta la settimana) */
.mp-gantt { max-height: 34vh; overflow-y: auto; scrollbar-width: thin; padding: 0 14px 8px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-1); }
.mp-gantt .mp-vuoto { margin: 12px 0 4px; }
.mp-g-testa, .mp-g-riga { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; align-items: center; }
.mp-g-testa { position: sticky; top: 0; z-index: 3; height: 30px; background: var(--carta); font-size: 11.5px; color: var(--testo-tenue); }
.mp-g-testa small { margin-left: 8px; color: var(--avviso); }
.mp-g-scala { position: relative; height: 100%; }
.mp-g-scala span { position: absolute; top: 8px; transform: translateX(-50%); }
.mp-g-riga { height: 28px; border-top: 1px solid var(--bordo); }
.mp-g-riga.nuovo-giorno { border-top: 2px solid var(--bordo-forte); }
.mp-g-nome { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-g-nome b { color: var(--primario); }
.mp-g-linea { position: relative; height: 22px; }
.mp-g-ora { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--bordo); }
.mp-g-adesso { position: absolute; top: -4px; bottom: -4px; z-index: 2; width: 2px; background: var(--rosso); }
.mp-barra {
    position: absolute; top: 2px; height: 18px; padding: 0 5px; border-radius: 4px; background: var(--c); color: #fff;
    font-size: 11px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
    box-shadow: 0 0 0 1px #fff;
}
.mp-barra:hover { filter: brightness(1.12); z-index: 2; }
.mp-barra.senza-durata { background: repeating-linear-gradient(135deg, var(--c) 0 5px, color-mix(in srgb, var(--c) 65%, #fff) 5px 10px); }
.mp-barra.sovrapposta { outline: 2px solid var(--pericolo); outline-offset: 1px; z-index: 1; }
.mp-barra.fatta { opacity: .55; }
@media (max-width: 1000px) {
    .contenuto:has(> .mappa-pagina) { height: auto; }
    .mappa-pagina { grid-template-columns: 1fr; }
    .mp-sinistra { grid-template-rows: 60vh auto; }
    .mp-g-testa, .mp-g-riga { grid-template-columns: 130px minmax(0, 1fr); }
}
.mp-colori { position: absolute; top: 10px; right: 10px; z-index: 500; background: var(--carta); box-shadow: var(--ombra-2); }
.mp-colori a.attivo { background: var(--azione-tenue); }
.mp-in-sede { padding: 2px 6px 0 34px; font-size: 11.5px; color: var(--testo-lieve); }

/* ---------- finestra "Sposta" (partials.sposta-attivita): sopra anche alla mappa ---------- */
button.scheda-azione { padding: 0; font: inherit; cursor: pointer; }
.sposta-velo { z-index: 1100; }
.finestra-sposta { width: min(520px, 100%); height: auto; overflow: visible; }
.finestra-sposta .finestra-titolo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sposta-corpo { overflow: visible; padding-top: 4px; }
.sposta-sotto { margin: 8px 0 10px; font-size: 13px; color: var(--testo-tenue); }
.sposta-riga { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sposta-corpo .tendina-multipla-menu { right: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.sposta-corpo .tendina-gruppo { grid-column: 1 / -1; }
.sposta-errore { margin: 12px 0 0; }
@media (max-width: 560px) { .sposta-riga { grid-template-columns: 1fr 1fr; } }

/* ---------- KPI commerciali: tempi tra le fasi in alto a sinistra, commerciali sotto ---------- */
.kpi-commerciali .kpi-tessere { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-commerciali .kpi-tessera { gap: 1px; padding: 8px 12px; }
.kpi-commerciali .kpi-tessera strong { font-size: 22px; }
.kpi-commerciali .kc-tempi { grid-column: span 5; }
.kpi-commerciali .kpi-mensile { grid-column: span 5; }
.kpi-commerciali .kpi-annuale { grid-column: span 2; }
.kpi-commerciali .kc-classifica { grid-column: span 3; }
.kpi-commerciali .kc-cosa { grid-column: span 3; }
.kpi-commerciali .kc-tabella { grid-column: span 6; }
.kpi-commerciali .kc-nascosto { display: none; }
.kc-tempi-box { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; font-size: 13px; }
.kc-fase { display: grid; grid-template-columns: 130px minmax(0, 1fr) 96px 96px; gap: 10px; align-items: center; }
.kc-fase b { font-weight: 600; color: var(--testo); white-space: nowrap; }
.kc-testa { font-size: 11px; color: var(--testo-tenue); }
.kc-testa span:nth-child(n+3), .kc-gg { text-align: right; }
.kc-gg { font-weight: 700; color: var(--primario); white-space: nowrap; }
.kc-gg small { font-weight: 400; color: var(--testo-tenue); font-size: 11px; }
.kc-barra { position: relative; height: 22px; border-radius: 5px; background: var(--superficie); overflow: hidden; }
.kc-barra i { position: absolute; inset: 0 auto 0 0; background: #2a78d6; border-radius: 5px; }
.kc-barra em { position: absolute; left: 8px; top: 0; line-height: 22px; font-style: normal; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .45); white-space: nowrap; }
@media (max-width: 1500px) { .kc-fase { grid-template-columns: 110px minmax(0, 1fr) 82px 82px; gap: 6px; font-size: 12.5px; } }
@media (max-width: 1100px) { .kpi-commerciali .kpi-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-commerciali .kpi-pannello { grid-column: 1 / -1; } }
.kc-barra em.fuori { left: calc(var(--x) + 6px); color: var(--testo); text-shadow: none; }
.kpi-commerciali .kc-tabella .kt-tabella :is(th, td):first-child { min-width: 100px; }

/* ---------- Scheda intervento: fase della telefonata (segnalazione | domande al cliente | interventi gia' fatti) ---------- */
.modulo-intervento.telefonata { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); }
.modulo-intervento.solo-prime-fasi:has(.fase-domande) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modulo-intervento .fase-domande, .modulo-intervento .fase-storia { display: flex; flex-direction: column; gap: 6px; }
.modulo-intervento .fase-domande legend, .modulo-intervento .fase-storia legend { font-weight: 600; }
.fase-domande #domande { display: flex; flex-direction: column; gap: 8px; }
.fase-domande .domanda { display: flex; flex-direction: column; gap: 4px; padding-bottom: 7px; border-bottom: 1px solid var(--bordo); }
.fase-domande .domanda:last-child { border-bottom: 0; }
.fase-domande .domanda > p { margin: 0; font-size: 13px; font-weight: 500; }
.fase-domande .domanda-scelte { display: flex; flex-wrap: wrap; gap: 4px; }
.fase-domande .domanda-scelte label { position: relative; cursor: pointer; }
.fase-domande .domanda-scelte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fase-domande .domanda-scelte span { display: inline-block; padding: 2px 10px; font-size: 12.5px; border: 1px solid var(--bordo-forte); border-radius: 999px; background: var(--carta); }
.fase-domande .domanda-scelte input:checked + span { background: var(--azione); border-color: var(--azione); color: #fff; }
.fase-domande .domanda-scelte input:focus-visible + span { box-shadow: var(--anello); }
.fase-domande .domanda input[type=text] { height: 30px; font-size: 13px; }
.fase-domande .domanda-consiglio { margin: 0; padding: 5px 8px; font-size: 12.5px; background: var(--azione-tenue); border-radius: var(--raggio-s); }
.fase-domande .domanda-consiglio.urgente, .fase-domande .domande-urgente { background: var(--errore-tenue, #fde8e8); color: var(--errore, #b42318); font-weight: 600; }
.fase-domande .domanda-consiglio[hidden], .fase-domande .domande-urgente[hidden], .fase-domande .domande-nota[hidden] { display: none; }
.fase-domande .domande-urgente { margin: 0; padding: 5px 8px; border-radius: var(--raggio-s); font-size: 13px; }
.fase-domande .domande-nota { margin: 0; font-size: 12.5px; color: var(--testo-tenue); }
.fase-storia #storia { display: flex; flex-direction: column; gap: 6px; }
.fase-storia .storia-voce { margin: 0; font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--bordo); }
.fase-storia .storia-voce:last-child { border-bottom: 0; }
.fase-storia .storia-voce small { display: block; color: var(--testo-tenue); font-size: 12px; }
.fase-storia .storia-voce em { color: var(--testo-tenue); font-size: 12px; }
.fase-storia .storia-voce.da-fare a { font-style: italic; }
.fase-storia .storia-vuota { margin: 0; font-size: 13px; color: var(--testo-tenue); }
@media (max-width: 1000px) { .modulo-intervento.telefonata { grid-template-columns: 1fr 1fr; } }
.modulo-intervento.telefonata { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.modulo-intervento.telefonata .fase-domande #domande { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-content: start; }
.modulo-intervento.telefonata .fase-domande .domanda:last-child { border-bottom: 1px solid var(--bordo); }
@media (max-width: 1000px) { .modulo-intervento.telefonata { grid-template-columns: 1fr 1fr; } .modulo-intervento.telefonata .fase-domande #domande { grid-template-columns: 1fr; } }

/* elenco delle voci della scheda intervento (guasto, causa, soluzione...): piu' largo della casella, le voci vanno a capo */
.menu-voci { position: fixed; z-index: 1200; overflow-y: auto; padding: 4px; background: var(--carta); border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); box-shadow: var(--ombra-2); }
.menu-voci[hidden] { display: none; }
.menu-voci button { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--raggio-s); background: none; color: var(--testo); font: inherit; font-size: 14px; line-height: 1.35; text-align: left; white-space: normal; cursor: pointer; }
.menu-voci button:hover, .menu-voci button.attiva { background: var(--azzurro-tenue); }
.menu-voci button + button { border-top: 1px solid var(--bordo); border-radius: 0; }
.menu-voci button small { display: block; color: var(--testo-tenue); font-size: 12px; }

/* maschera attivita': campo cliente in evidenza, con l'esempio di ricerca sempre visibile */
.campo-cliente-evidente > span { font-size: 14px; font-weight: 700; color: var(--azione); }
.campo-cliente-evidente input#cerca-cliente { height: 44px; font-size: 16px; font-weight: 500; border: 2px solid var(--azione); background: var(--azione-tenue); }
.campo-cliente-evidente input#cerca-cliente:focus { background: var(--carta); }
.campo-cliente-evidente input#cerca-cliente::placeholder { color: var(--testo); opacity: .7; }
.campo-cliente-evidente .esempio-cliente { display: block; font-size: 12.5px; color: var(--testo); }
.campo-cliente-evidente .esempio-cliente b { font-weight: 600; padding: 0 4px; border-radius: 4px; background: var(--sfondo); }

/* finestra "Crea cliente": clienti simili gia' in anagrafica */
.nc-simili { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--avviso, #b45309); border-radius: var(--raggio-m); background: var(--avviso-tenue, #fff7ed); }
.nc-simili[hidden] { display: none; }
.nc-simili > p { margin: 0 0 8px; font-size: 14px; }
.nc-simili-elenco { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.nc-simile { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--carta); border-radius: var(--raggio-s); }
.nc-simile > div { flex: 1; min-width: 0; }
.nc-simile strong { display: block; font-size: 14px; }
.nc-simile small { display: block; font-size: 12px; color: var(--testo-tenue); }
.campo.campo-cliente-evidente { padding: 8px 10px 10px; margin: 2px 0; background: var(--azione-tenue); border: 1px solid var(--azione); border-radius: var(--raggio-m); gap: 5px; }
.campo.campo-cliente-evidente > span { font-size: 15px; font-weight: 700; color: var(--azione); }
.campo.campo-cliente-evidente input#cerca-cliente { height: 46px; font-size: 17px; background: var(--carta); }
.campo.campo-cliente-evidente .esempio-cliente { line-height: 1.7; }
.campo.campo-cliente-evidente .esempio-cliente b { background: var(--carta); }

/* mappa aperta per programmare un nuovo intervento: stella e attivita' vicine con "Qui" */
.mp-nuovo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f5b301; color: #fff; font-size: 22px; line-height: 1; border: 3px solid #fff; box-shadow: 0 0 0 2px #b45309, 0 2px 8px rgba(0,0,0,.35); }
.mp-vicina { display: flex; align-items: center; gap: 6px; }
.mp-vicina a { flex: 1; min-width: 0; }
.mp-vicina .pulsante { flex: none; padding: 2px 10px; }

/* maschera attivita': programma ora / da programmare */
.fa-programma { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fa-programma[hidden] { display: none; }
.fa-programma-scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fa-programma-scelte label { position: relative; cursor: pointer; }
.fa-programma-scelte input { position: absolute; opacity: 0; }
.fa-programma-scelte span { display: flex; flex-direction: column; gap: 1px; height: 100%; padding: 6px 10px; border: 1.5px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); }
.fa-programma-scelte b { font-size: 14px; }
.fa-programma-scelte small { font-size: 11.5px; color: var(--testo-tenue); }
.fa-programma-scelte input:checked + span { border-color: var(--azione); background: var(--azione-tenue); box-shadow: inset 0 0 0 1px var(--azione); }
.fa-programma-scelte input:focus-visible + span { box-shadow: var(--anello); }
.fa-programma #apri-mappa-nuovo[hidden] { display: none; }

/* scheda intervento: urgenza proposta dalle risposte */
.urgenza-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; background: var(--sfondo); border-radius: var(--raggio-m); }
.urgenza-scelta .urgenza-titolo { font-weight: 700; font-size: 13px; margin-right: 4px; }
.urgenza-scelta label { position: relative; cursor: pointer; }
.urgenza-scelta input { position: absolute; opacity: 0; }
.urgenza-scelta label > span { display: inline-block; padding: 3px 12px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--bordo-forte); border-radius: 999px; background: var(--carta); }
.urgenza-scelta small { font-weight: 400; color: var(--testo-tenue); }
.urgenza-scelta .urgenza-alta input:checked + span { background: #c62828; border-color: #c62828; color: #fff; }
.urgenza-scelta .urgenza-media input:checked + span { background: #e08a1e; border-color: #e08a1e; color: #fff; }
.urgenza-scelta .urgenza-normale input:checked + span { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.urgenza-scelta input:checked + span small { color: rgba(255,255,255,.85); }
.urgenza-scelta input:focus-visible + span { box-shadow: var(--anello); }
.urgenza-scelta .urgenza-perche { flex-basis: 100%; font-size: 12px; color: var(--testo-tenue); }
.mp-proposte { margin: 6px 0; padding: 6px 8px; background: var(--azione-tenue); border-radius: var(--raggio-s); }
.mp-proposte > b { display: block; margin-bottom: 4px; font-size: 12.5px; }
.mp-proposta { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--bordo); font-size: 12.5px; }
.mp-proposta > div { flex: 1; min-width: 0; }
.mp-proposta small { display: block; color: var(--testo-tenue); font-size: 11.5px; }
.mp-proposta.fuori-tempo strong { color: var(--avviso, #b45309); }
.mp-proposta .pulsante { flex: none; padding: 2px 10px; }
.modulo-attivita .nascosto-programma, .nascosto-programma { display: none !important; }

/* tipo di attivita' scelto ben visibile: pulsante pieno nel colore del tipo, gli altri attenuati */
.tipo-rapido.attivo {
    background: var(--colore-tipo, var(--azione)); border-color: var(--colore-tipo, var(--azione)); color: #fff;
    font-weight: 700; box-shadow: 0 0 0 3px color-mix(in srgb, var(--colore-tipo, var(--azione)) 30%, transparent);
}
.tipo-rapido.attivo::before { content: "✓"; width: auto; height: auto; background: none; font-weight: 800; }
.tipi-rapidi.con-scelta .tipo-rapido:not(.attivo) { opacity: .55; }
.tipi-rapidi.con-scelta .tipo-rapido:not(.attivo):hover { opacity: 1; }
select#tipo.tipo-scelto {
    border: 2px solid var(--azione); background-color: var(--azione-tenue); color: var(--azione-scuro); font-weight: 700;
}

/* urgenza in fondo alle domande al cliente */
.fase-domande .urgenza-scelta { margin-top: 12px; }

/* scheda intervento alla chiamata: Crea intervento in fondo, dopo l'urgenza */
.salva-in-fondo { display: flex; justify-content: flex-end; margin-top: 12px; }
.salva-in-fondo[hidden] { display: none; }
#salva-in-alto[hidden], #mostra-diagnosi[hidden] { display: none; }

/* gantt della mappa: le barre si trascinano (ora in orizzontale, giorno/operatore cambiando riga) */
.mp-barra[data-vai] { cursor: grab; touch-action: none; user-select: none; }
.mp-barra.trascinata { cursor: grabbing; z-index: 5; pointer-events: none; overflow: visible; box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 0 0 2px #fff; }
.mp-barra.fatta { cursor: pointer; }
.mp-g-riga.bersaglio { background: var(--azione-tenue); }
/* mappa: i livelli di Leaflet (z-index fino a 1000) restano dentro la mappa, cosi' le finestre a comparsa (scheda attivita', Sposta) le stanno sopra */
.leaflet-container { isolation: isolate; z-index: 0; }
.mp-mappa-box { isolation: isolate; }

/* schede piccole (planner, da programmare): la matita che apre il dettaglio piu' grande e in evidenza */
.scheda-azione.scheda-modifica { height: 34px; color: #fff; background: var(--azione); border-color: var(--azione); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.scheda-azione.scheda-modifica svg { width: 20px; height: 20px; stroke-width: 2.2; }
.scheda-azione.scheda-modifica:hover { background: var(--azione-scuro); border-color: var(--azione-scuro); }

/* riquadro della scheda tecnica / contratto / pratica nel modulo attivita': testo su tutta la riga, pulsante sotto */
.finestra-attivita .scheda-scelta { flex-wrap: wrap; }
.finestra-attivita .scheda-scelta > span { flex: 1 1 100%; line-height: 1.35; }
.finestra-attivita .scheda-scelta > button { margin-left: auto; }

/* esito della scheda tecnica (schede del planner e modulo attivita') */
.esito-tecnico { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.4; }
.esito-tecnico::before { margin-right: 4px; }
.esito-tecnico.esito-ok { background: var(--ok-tenue); color: var(--ok); }
.esito-tecnico.esito-ok::before { content: "✓"; }
.esito-tecnico.esito-parziale { background: #fdf1dc; color: #9a5b00; }
.esito-tecnico.esito-no { background: #fde4e4; color: var(--pericolo); }
.esito-tecnico.esito-no::before { content: "✗"; }
.esito-tecnico.esito-rientro { background: #c62828; color: #fff; }
.esito-tecnico.esito-rientro::before { content: "↻"; }
.esito-tecnico.esito-attesa { background: var(--sfondo); color: var(--testo-tenue); font-weight: 600; }
.finestra-attivita p.esito-tecnico { display: block; margin: 6px 0 0; padding: 7px 12px; border-radius: var(--raggio-s); font-size: 13.5px; }
.finestra-attivita p.esito-tecnico[hidden] { display: none; }

/* ------------------------------------------------------------------------------------------------------------------
   Modulo attivita' (attivita/modulo): scheda unica per tutti i tipi, i campi in vista dipendono dal tipo
   che cosa e dove | il lavoro | controllo dell'ufficio | chiusura
   ------------------------------------------------------------------------------------------------------------------ */
#modulo-attivita .fa-corpo { position: relative; gap: 10px; padding: 10px; background: var(--sfondo); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
/* nessun campo per la colonna del controllo: tre colonne */
#modulo-attivita.senza-controllo .fa-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); }
#modulo-attivita.senza-controllo .fa-schede { display: none; }
/* uscite: importi ridotti a totale, incassato, conto, da fatturare, in garanzia */
#modulo-attivita.uscita [data-scheda="importi"] :is([data-campo="importo2"], [data-campo="incassare"], .spunta[data-campo="incassato"], .prima-nota, label:has(input[name="incasso_del"])) { display: none !important; }

/* Nuovo Lead: cosa vuole il cliente e su che prodotto */
.richiesta-lead { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--azione); border-radius: var(--raggio-m); background: var(--azione-tenue); }
.richiesta-lead[hidden] { display: none; }
.scelte-lead { display: flex; flex-wrap: wrap; gap: 6px; }
.scelte-lead button { height: 34px; padding: 0 12px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.scelte-lead button.attivo { border-color: var(--azione); background: var(--azione); color: #fff; }
.scelte-lead[hidden] { display: none; }
.scelte-lead .esito-lead:not(.attivo) { color: var(--testo-tenue); }
/* il lead mostra solo il cliente, le due domande e la nota: niente indirizzo, impianto, programmazione, chiusura */
.fa-quando { display: contents; }
.fa-quando > h2 { margin-top: 6px; }
#modulo-attivita.lead .fa-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
#modulo-attivita.lead :is(.fa-schede, .fa-chiusura, .fa-dove, .fa-quando, [data-scheda="impianto"]) { display: none !important; }
/* sopralluogo: terza colonna */
.controllo-sopralluogo { display: flex; flex-direction: column; gap: 10px; }
.controllo-sopralluogo[hidden] { display: none; }
/* scheda aperta dal lead: sotto non si vede altro */
#modulo-attivita.in-intervista :is(.fa-corpo, .fa-piede) { visibility: hidden; }

/* colonne distinte: riquadri con una riga di colore in cima */
#modulo-attivita .fa-corpo > .fa-colonna { border: 1px solid var(--bordo); border-top: 4px solid var(--colore-colonna, var(--bordo-forte)); border-radius: var(--raggio-l); background: var(--carta); }
#modulo-attivita .fa-corpo > .fa-colonna:first-child { --colore-colonna: #5b7fa6; }
#modulo-attivita .fa-corpo > .fa-lavoro { --colore-colonna: var(--azione); }
#modulo-attivita .fa-corpo > .fa-schede { --colore-colonna: #e08a1e; background: #fffaf2; }
#modulo-attivita .fa-corpo > .fa-chiusura { --colore-colonna: var(--ok); background: #f6fbf7; }
#modulo-attivita .fa-corpo > .fa-colonna > h2:first-of-type { color: var(--colore-colonna); }

/* riquadri dentro le colonne */
.fa-dove { display: flex; flex-direction: column; gap: 10px; }
.fa-note:not([hidden]) { display: flex; flex-direction: column; gap: 10px; }
.fa-titolo { grid-column: 1 / -1; padding: 0; margin: 4px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primario); }
.fa-titolo small { margin-left: 6px; font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--testo-tenue); }
.fa-lavoro > h2:first-of-type { margin-top: 6px; }
.fa-lavoro .fa-nota { min-height: 0; flex: none; }
.fa-lavoro .fa-nota textarea { min-height: 70px; height: 80px; }
.fa-schede p.esito-tecnico { margin: 0 0 4px; }

/* programmazione */
.fa-programma-scelte[hidden] { display: none !important; }
.fa-programma #apri-mappa-nuovo:not([hidden]) { align-self: stretch; width: 100%; justify-content: center; white-space: normal; height: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; }
#cancella-programmazione { align-self: flex-start; color: var(--pericolo); }
#cancella-programmazione[hidden] { display: none; }

/* dati della scheda tecnica, solo da vedere */
.impianto-scheda { grid-column: 1 / -1; margin: 0; padding: 10px 12px; font-size: 14px; font-weight: 600; background: var(--carta); border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-m); }
.impianto-scheda.vuoto { font-weight: 400; color: var(--testo-tenue); }
.dalla-scheda[hidden] { display: none; }
.dalla-scheda dl { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; padding: 10px 12px; background: var(--carta); border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-m); font-size: 13.5px; }
.dalla-scheda dt { margin-top: 4px; font-size: 11.5px; color: var(--testo-tenue); }
.dalla-scheda dt:first-child { margin-top: 0; }
.dalla-scheda dd { margin: 0; font-weight: 600; white-space: pre-line; }
.dalla-scheda dd.vuoto { font-weight: 400; color: var(--testo-lieve, var(--testo-tenue)); font-style: italic; }
.dalla-scheda dd.rientro { color: var(--pericolo); }
.fa-pannello.solo-vista #elenco-macchine { display: none; }
.resta-incassare { order: 3; font-size: 12px; font-weight: 600; color: var(--pericolo); }
.resta-incassare:empty { display: none; }

/* destinazioni della chiusura: una riga per voce, in ordine fisso (fattura, sospeso, prima nota, rientro) */
.destinazioni[hidden], .destinazione-voce[hidden] { display: none; }
.destinazioni:not([hidden]) { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--ok-bordo, var(--bordo)); border-radius: var(--raggio-m); background: var(--carta); }
.destinazioni > span small { font-weight: 400; color: var(--testo-tenue); }
#destinazioni { display: contents; }
.destinazione-voce, #destinazioni .passo-successivo { margin: 0; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: var(--superficie); }
.destinazione-voce span, #destinazioni .passo-successivo .passo-nome { font-weight: 600; }
#destinazioni .passo-successivo > :not(.spunta):not(.passo-scheda) { display: none; }
#destinazioni .dest-fattura { order: 1; }
#destinazioni .dest-sospeso { order: 2; }
#dest-prima-nota { order: 3; }
#destinazioni .dest-rientro { order: 4; border-color: #c62828; background: #fdecec; }

/* "Attivita' del cliente": pannello a scomparsa, si apre con la linguetta sul bordo destro */
#modulo-attivita .fa-corpo > .fa-storico {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: min(380px, 90%); margin: 0;
    border: 1px solid var(--bordo); border-radius: 0; box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
    transform: translateX(105%); transition: transform .2s; visibility: hidden;
}
#modulo-attivita .fa-corpo > .fa-storico.aperto { transform: none; visibility: visible; }
#modulo-attivita .fa-storico h2 { display: flex; align-items: center; gap: 6px; }
#modulo-attivita .fa-storico #chiudi-storico { margin-left: auto; }
.linguetta-storico {
    position: absolute; top: 90px; right: 0; z-index: 19; padding: 12px 7px; border: 1px solid var(--bordo); border-right: 0;
    border-radius: var(--raggio-m) 0 0 var(--raggio-m); background: var(--azione); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700;
    writing-mode: vertical-rl; transform: rotate(180deg); cursor: pointer; box-shadow: var(--ombra-1);
}
.linguetta-storico:hover { background: var(--azione-scuro); }
.linguetta-storico[aria-expanded="true"] { visibility: hidden; }

/* intervista telefonica (interviste/modulo): tre colonne di domande, nell'ordine della telefonata */
.iv-colonne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.iv-colonne > div { display: flex; flex-direction: column; gap: 12px; }
.iv-domanda { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 10px 14px 12px; border: 1px solid var(--bordo); border-radius: var(--raggio-l); background: var(--carta); }
.iv-domanda h3 { display: flex; align-items: center; margin: 0; font-size: 14.5px; font-weight: 700; color: var(--primario); }
.iv-domanda h3 b { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--azione); color: #fff; font-size: 12.5px; }
.iv-sotto { font-size: 13px; color: var(--testo-tenue); }
.iv-scelte { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-scelte input { position: absolute; opacity: 0; pointer-events: none; }
.iv-scelte span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.iv-scelte input:checked + span { border-color: var(--azione); background: var(--azione); color: #fff; }
.iv-scelte input:focus-visible + span { box-shadow: var(--anello); }
.iv-mono { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.iv-mono [hidden] { display: none; }
.iv-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.iv-dual summary { font-size: 13px; font-weight: 600; color: var(--azione-scuro); cursor: pointer; }
.iv-dual .iv-griglia { margin-top: 8px; }
.iv-note textarea { width: 100%; resize: vertical; font: inherit; }
@media (max-width: 1000px) { .iv-colonne { grid-template-columns: 1fr; } }
.iv-marca { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 8px; }
.iv-passo { border-color: var(--azione); background: var(--azione-tenue); }

/* pulsante Salva sempre in basso a destra, nell'angolo: si vede senza scorrere la pagina */
.pulsante.salva-fissa { position: fixed; right: 24px; bottom: 18px; z-index: 40; height: 42px; padding: 0 24px; font-size: 15px; box-shadow: var(--ombra-1); }
.pulsante.salva-fissa[hidden] { display: none; }
body.pannello-fissato .pulsante.salva-fissa { right: 364px; }
.contenuto:has(.salva-fissa:not([hidden])) { padding-bottom: 76px; }
.testa-pagina .pulsante.salva-fissa { border-color: var(--azione); background: var(--azione); color: #fff; }
.testa-pagina .pulsante.salva-fissa:hover { border-color: var(--azione-scuro); background: var(--azione-scuro); color: #fff; }

/* catalogo articoli */
.ar-filtri { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)) 110px auto; gap: 8px; align-items: end; margin-bottom: 10px; }
.ar-filtri .campo { min-width: 0; }
.ar-azzera { align-self: end; }
.ar-scheda { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
.ar-scheda .ed-elenco { max-height: calc(100vh - 210px); overflow: auto; }
.ar-scheda .ed-voce span { min-width: 0; }
.ar-modulo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ar-gruppo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: var(--raggio-m); }
.ar-gruppo legend { padding: 0 6px; font-weight: 700; color: var(--primario); }
.ar-prezzi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ar-risultato { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px; border-radius: var(--raggio-s); background: var(--sfondo); }
.ar-risultato b { font-size: 16px; }
.ar-vendita { background: var(--azione-tenue); }
.ar-storico { grid-column: 1 / -1; }
.ar-storico h3 { margin: 0 0 6px; font-size: 14px; }
.ar-strumenti { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ar-strumento { flex: 1; min-width: 380px; display: flex; flex-wrap: wrap; align-items: end; gap: 8px 10px; padding: 8px 12px; border: 1px solid var(--bordo); border-radius: var(--raggio-m); background: var(--carta); }
.ar-strumento strong { width: 100%; font-size: 13.5px; color: var(--primario); }
.ar-strumento .campo { flex: 1; min-width: 110px; }
.ar-anteprima { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--azione); border-radius: var(--raggio-m); background: var(--azione-tenue); }
.ar-anteprima h3 { margin: 0 0 8px; font-size: 14px; }
.ar-conferma { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ar-griglia { max-height: calc(100vh - 300px); overflow: auto; }
.ar-griglia thead th { position: sticky; top: 0; z-index: 1; background: var(--primario); color: #fff; }
.ar-griglia td { padding-top: 3px; padding-bottom: 3px; }
.ar-griglia input { width: 84px; height: 30px; padding: 0 6px; text-align: right; font: inherit; font-size: 13.5px; border: 1px solid var(--bordo); border-radius: var(--raggio-s); }
.ar-griglia input:focus { border-color: var(--azione); outline: none; box-shadow: var(--anello); }
.ar-griglia tr.ar-cambiata td { background: var(--azione-tenue); }
.ar-manuale { color: #b26a00; font-weight: 600; }
@media (max-width: 1000px) { .ar-filtri, .ar-modulo, .ar-scheda { grid-template-columns: 1fr; } }

/* caratteristiche degli articoli */
.ar-sezioni { display: inline-flex; margin-bottom: 8px; }
.ar-caratteristiche { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ar-gruppo-c { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-griglia-c th { min-width: 120px; white-space: normal; vertical-align: bottom; }
.ar-griglia-c th small { display: block; font-weight: 400; opacity: .75; }
.ar-griglia-c td { text-align: center; }
.ar-griglia-c td.ar-fissa { text-align: left; }
.ar-griglia-c input[type=text] { width: 110px; text-align: left; }
.ar-griglia-c input[type=checkbox] { width: 18px; height: 18px; }
.ar-griglia-c .ar-fissa { position: sticky; left: 0; z-index: 1; min-width: 240px; background: var(--carta); }
.ar-griglia-c thead .ar-fissa { z-index: 2; background: var(--primario); }
.ar-titoli input:not([type=checkbox]), .ar-titoli select { width: 100%; height: 32px; padding: 0 8px; text-align: left; font: inherit; font-size: 13.5px; border: 1px solid var(--bordo); border-radius: var(--raggio-s); }
.ar-titoli input[type=checkbox] { width: 18px; height: 18px; }
.ar-titoli .numero input { width: 70px; text-align: right; }
.ar-titoli .ar-nuovo td { background: var(--azione-tenue); }
@media (max-width: 1000px) { .ar-caratteristiche { grid-template-columns: 1fr; } }

/* griglie degli articoli: caratteri piu' grandi, titoli azzurri sempre in vista, offerta in arancione */
.ar-griglia { font-size: 15.5px; }
.ar-griglia small { font-size: 14px; }
.ar-griglia thead th, .ar-griglia-c thead .ar-fissa { position: sticky; top: 0; z-index: 3; padding-top: 9px; padding-bottom: 9px; background: var(--azione); color: #fff; font-size: 14.5px; }
.ar-griglia-c thead .ar-fissa { left: 0; z-index: 4; }
.ar-griglia td { padding-top: 4px; padding-bottom: 4px; }
.ar-griglia input { height: 34px; font-size: 15.5px; }
.ar-griglia { max-height: calc(100vh - 350px); }
.ar-griglia table { overflow: visible; }
.ar-griglia td, .ar-griglia td strong { font-size: 15.5px; }
.ar-griglia td small { font-size: 14px; }
.ar-griglia input.ar-offerta, input.ar-offerta { border-color: #e69500; background: #ffc000; color: #1f1400; font-weight: 700; }

/* griglia prezzi con tutti i campi */
.ar-griglia:not(.ar-griglia-c):not(.ar-titoli) input:not(.ar-testo):not([type=checkbox]) { width: 76px; }
.ar-griglia input.ar-testo { width: 110px; text-align: left; }
.ar-griglia input[type=checkbox] { width: 18px; height: 18px; }
.ar-griglia td.ar-iva { text-align: center; }
.ar-griglia th, .ar-griglia td { padding-left: 7px; padding-right: 7px; }
.ar-sotto { display: block; font-size: 12.5px; font-weight: 600; color: var(--testo-tenue); }
.ed-voce.attiva .ar-sotto { color: rgba(255, 255, 255, .8); }

/* parte alta degli articoli come la maschera: tre tendine per riga, poi viste e azioni in colonna */
.ar-testata { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 10px; }
.ar-testata > * { box-sizing: border-box; padding: 8px 14px 10px; border: 1px solid var(--bordo-forte); border-top: 3px solid var(--azione); border-radius: var(--raggio-m); background: var(--carta); }
.ar-testata .ar-filtri { display: grid; grid-template-columns: repeat(3, 180px); gap: 6px 14px; margin: 0; }
.ar-testata .campo > span { font-size: 13.5px; }
.ar-testata select, .ar-testata input[type=search] { height: 30px; padding-top: 0; padding-bottom: 0; font-size: 14px; }
.ar-etichetta { display: flex; justify-content: space-between; align-items: center; min-height: 22px; }
.ar-testata .ar-filtri label:nth-of-type(3) { grid-column: 1; }
.ar-destra { display: flex; align-items: stretch; gap: 12px; }
.ar-cerca { display: flex; flex-direction: column; gap: 4px; width: 190px; }
.ar-anche { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; font-size: 12.5px; color: var(--testo-tenue); cursor: pointer; }
.ar-anche input { width: 14px; height: 14px; margin: 0; }
.ar-viste, .ar-azioni { display: grid; grid-auto-rows: 1fr; gap: 6px; width: 130px; }
.ar-viste a, .ar-azioni a, .ar-azioni button { display: grid; place-items: center; width: 100%; height: 100%; padding: 0 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--azione-tenue); font: inherit; font-size: 14px; font-weight: 600; color: var(--azione-scuro); text-decoration: none; cursor: pointer; }
.ar-viste a:hover, .ar-azioni a:hover, .ar-azioni button:hover:enabled { border-color: var(--azione); }
.ar-viste a.attivo { border-color: var(--azione); background: var(--azione); color: #fff; }
.ar-azioni button:disabled { opacity: .45; cursor: default; }
.ar-riga-sezioni { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-width: 1000px) { .ar-testata .ar-filtri { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .ar-testata .ar-filtri label:nth-of-type(3) { grid-column: auto; } .ar-destra { flex-wrap: wrap; width: 100%; } .ar-testata .ar-strumenti { flex-wrap: wrap; } .ar-cerca { width: 100%; } .ar-viste, .ar-azioni { flex: 1; } }
.ar-testata .ar-strumenti { flex: 1 1 460px; flex-wrap: nowrap; gap: 12px; margin: 0; }
.ar-testata .ar-strumento:first-child { padding-left: 0; border-left: 0; }
.ar-testata .ar-strumento { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 6px; align-content: center; padding: 0 0 0 12px; border: 0; border-left: 1px solid var(--bordo); border-radius: 0; background: none; }
.ar-testata .ar-strumento strong { grid-column: 1 / -1; }
.ar-testata .ar-strumento .pulsante { grid-column: 2; grid-row: 2; height: 30px; font-size: 14px; }
.ar-testata .ar-strumento select { grid-column: 1; grid-row: 2; min-width: 0; }
.ar-testata .ar-strumento select, .ar-testata .ar-strumento input:not([type=file]) { height: 30px; padding: 0 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); font: inherit; font-size: 14px; }
.ar-testata .ar-strumento input { grid-column: 1 / -1; grid-row: 3; width: 100%; min-width: 0; }
.ar-testata .ar-strumento input[type=file] { height: 30px; padding: 3px 0; border: 0; font-size: 12.5px; }
.ar-griglia { max-height: calc(100vh - 255px); }
.ar-griglia-c { max-height: calc(100vh - 300px); }

/* scheda articolo a linguette: tutta in una schermata */
.ar-testa-scheda { display: flex; align-items: stretch; gap: 10px; margin-bottom: 10px; }
.ar-nome { flex: 1; min-width: 0; align-self: center; }
.ar-nome h2 { margin: 0 0 2px; font-size: 19px; }
.ar-nome small { color: var(--testo-tenue); }
.ar-testa-scheda .ar-risultato { flex-direction: column; justify-content: center; gap: 0; min-width: 160px; padding: 5px 14px; }
.ar-testa-scheda .ar-risultato span { font-size: 12.5px; color: var(--testo-tenue); }
.ar-testa-scheda .ar-risultato b { font-size: 20px; }
.ar-testa-scheda .ar-vendita b { color: var(--azione-scuro); font-size: 24px; }
.ar-modulo { display: block; }
.ar-linguette { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px; border-bottom: 2px solid var(--bordo); }
.ar-linguette button { margin-bottom: -2px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--testo-tenue); cursor: pointer; }
.ar-linguette button small { font-weight: 400; font-size: 12px; opacity: .75; }
.ar-linguette button:hover { color: var(--testo); }
.ar-linguette button.attivo { border-bottom-color: var(--azione); color: var(--azione-scuro); }
.ar-dati { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ar-colonna { display: flex; flex-direction: column; gap: 10px; }
.ar-modulo .ar-gruppo { gap: 6px 10px; padding: 6px 12px 10px; border-color: var(--bordo-forte); }
.ar-modulo .campo { gap: 3px; min-width: 0; }
.ar-modulo .campo > span { font-size: 13px; }
.ar-modulo .campo input { height: 34px; padding-top: 0; padding-bottom: 0; }
.ar-modulo .ar-prezzi { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.ar-modulo .ar-prezzi .spunta { height: 34px; }
.ar-modulo .ar-gruppo-c { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; align-items: end; padding: 12px; }
.ar-modulo .ar-gruppo-c .spunta { min-height: 26px; color: var(--testo); }
.ar-largo2 { grid-column: span 2; }
.ar-coppia { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; min-width: 0; }
.ar-nota { grid-column: 1 / -1; color: var(--testo-tenue); }
.ar-modulo .ar-riga-spunte { display: flex; gap: 28px; }
.ar-scheda .ed-elenco { max-height: calc(100vh - 255px); }
@media (max-width: 1000px) { .ar-dati { grid-template-columns: 1fr; } .ar-modulo .ar-gruppo-c { grid-template-columns: 1fr 1fr; } .ar-testa-scheda { flex-wrap: wrap; } }

/* vista Serie */
.ar-viste { gap: 4px; }
.ar-viste a { font-size: 13.5px; }
.ar-foto-serie { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ar-foto-serie textarea { min-height: 220px; }
.ar-riepilogo-serie { display: flex; gap: 18px; align-items: flex-start; }
.ar-riepilogo-serie > div { flex: 1; min-width: 0; }
.ar-foto img { display: block; width: 240px; max-height: 240px; object-fit: contain; border: 1px solid var(--bordo); border-radius: var(--raggio-m); background: var(--carta); }
.ar-comuni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 44px; margin: 0; }
.ar-comuni div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--bordo); }
.ar-comuni dt { color: var(--testo-tenue); }
.ar-comuni dd { margin: 0; font-weight: 600; text-align: right; }
@media (max-width: 1000px) { .ar-foto-serie { grid-template-columns: 1fr; } .ar-comuni { grid-template-columns: 1fr; } .ar-riepilogo-serie { flex-direction: column; } }

/* griglia caratteristiche: caselle a piena colonna sotto il loro titolo */
.ar-griglia-c th { min-width: 96px; text-align: left; }
.ar-griglia-c th small { color: #fff; opacity: .8; font-size: 12px; text-transform: none; }
.ar-griglia-c td { text-align: left; }
.ar-griglia-c input[type=text] { width: 100%; box-sizing: border-box; }
.ar-griglia-c input[type=checkbox] { display: block; margin: 0; }

/* regole dei prezzi */
.ar-tutta { grid-column: 1 / -1; }
.ar-foto-serie .ar-auto { grid-column: 2; align-items: flex-start; color: var(--testo); }
@media (max-width: 1000px) { .ar-foto-serie .ar-auto { grid-column: 1; } }

/* scheda articolo: Salva anche in testa */
.ar-salva-testa { align-self: center; white-space: nowrap; }
.ar-sola-lettura { align-self: center; max-width: 180px; font-size: 13px; font-weight: 600; color: #b26a00; }

/* caratteristiche come un foglio di Excel: celle compatte con la griglia, scheda tecnica a destra */
.ar-tasti { flex: 1; font-size: 12.5px; color: var(--testo-tenue); text-align: right; }
.ar-foglio-area { display: flex; gap: 10px; align-items: stretch; }
.ar-foglio-area > .ar-foglio { flex: 1; min-width: 0; }
.ar-griglia.ar-foglio { max-height: calc(100vh - 290px); border: 1px solid #b9c4d2; border-radius: 0; background: #fff; }
.ar-foglio table { border-collapse: separate; border-spacing: 0; width: max-content; }
.ar-foglio .ar-tit { overflow-wrap: anywhere; }
.ar-foglio th, .ar-foglio td { padding: 0; border: 0; border-right: 1px solid #d4dbe5; border-bottom: 1px solid #d4dbe5; font-size: 14px; }
.ar-foglio thead th { padding: 5px 6px; min-width: 0; max-width: 220px; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0; white-space: normal; vertical-align: bottom; border-color: rgba(255, 255, 255, .35); }
.ar-foglio thead tr.ar-banda th { top: 0; height: 24px; box-sizing: border-box; padding: 3px 8px; background: var(--primario); font-size: 13px; text-align: left; vertical-align: middle; }
.ar-foglio thead tr.ar-banda + tr th { top: 24px; }
.ar-foglio thead th.ar-di-serie { background: #3d7a5e; }
.ar-foglio thead th small { display: inline; margin-left: 3px; font-size: 11px; }
.ar-foglio .ar-inizio { border-left: 2px solid #8f9db0; }
.ar-foglio thead .ar-inizio { border-left-color: #fff; }
.ar-foglio tbody tr:nth-child(even) td, .ar-foglio tbody tr:nth-child(even) th { background: #f6f8fb; }
.ar-foglio td.ar-di-serie { background: #f1f8f3; }
.ar-foglio tbody tr:nth-child(even) td.ar-di-serie { background: #e8f3ec; }
.ar-foglio input[type=text] { display: block; width: 100%; box-sizing: border-box; height: 26px; padding: 0 6px; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 14px; text-align: left; box-shadow: none; }
.ar-foglio input[type=text]:focus { outline: 2px solid var(--azione); outline-offset: -2px; background: #fff; box-shadow: none; }
.ar-foglio td.ar-si-no { text-align: center; }
.ar-foglio td.ar-si-no input { display: inline-block; width: 16px; height: 16px; margin: 5px auto; vertical-align: middle; }
.ar-foglio tr.ar-cambiata td { background: #fff; }
.ar-foglio tr.ar-cambiata:nth-child(even) td { background: #f6f8fb; }
.ar-foglio tr.ar-cambiata td.ar-di-serie { background: #f1f8f3; }
.ar-foglio td.ar-mod { background: #fff4c2 !important; }
.ar-foglio tr.ar-cambiata th.ar-fissa { box-shadow: inset 4px 0 0 #e69500; }
.ar-foglio tbody .ar-fissa { position: sticky; left: 0; z-index: 2; display: table-cell; min-width: 0; width: 250px; max-width: 250px; padding: 2px 6px; background: #fff; text-align: left; font-weight: 400; border-right: 2px solid #8f9db0; }
.ar-foglio thead .ar-fissa { left: 0; z-index: 5; width: 250px; border-right: 2px solid #fff; }
.ar-foglio tbody .ar-fissa { width: 270px; max-width: 270px; height: 26px; padding: 0 6px; white-space: nowrap; overflow: hidden; line-height: 26px; }
.ar-foglio thead .ar-fissa { width: 270px; }
.ar-foglio .ar-chi { display: block; overflow: hidden; text-overflow: ellipsis; }
.ar-foglio .ar-chi a { font-size: 13.5px; font-weight: 600; text-transform: none; }
.ar-foglio .ar-chi small { font-size: 12px; font-weight: 400; color: var(--testo-tenue); }
.ar-apri-scheda { float: right; margin: 4px 0 0 6px; line-height: 15px; padding: 1px 5px; border: 1px solid #c0392b; border-radius: 3px; background: #fff; color: #c0392b; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.ar-foglio .ar-apri-scheda { box-sizing: border-box; height: 18px; min-height: 0; padding: 0 5px; line-height: 16px; }
.ar-apri-scheda:hover, .ar-apri-scheda.attivo { background: #c0392b; color: #fff; }
.ar-foglio-scheda { display: flex; flex-direction: column; flex: 0 0 44%; max-height: calc(100vh - 290px); border: 1px solid #b9c4d2; background: #fff; }
.ar-foglio-scheda[hidden] { display: none; }
.ar-foglio-scheda-testa { display: flex; gap: 6px; align-items: center; padding: 6px; border-bottom: 1px solid #d4dbe5; }
.ar-foglio-scheda-testa select { flex: 1; min-width: 0; height: 30px; font: inherit; font-size: 13.5px; }
.ar-foglio-scheda iframe { flex: 1; width: 100%; min-height: 300px; border: 0; }
@media (max-width: 1000px) { .ar-foglio-area { flex-direction: column; } .ar-foglio-scheda { flex-basis: 70vh; } .ar-tasti { display: none; } }

/* linguette Scheda tecnica e Foto: file delle serie e invio su WhatsApp */
.ar-sezioni a.ar-sezione-file { margin-left: 6px; border-left: 2px solid var(--bordo-forte); }
.ar-sezioni a.ar-sezione-file + a.ar-sezione-file { margin-left: 0; border-left: 0; }
.ar-file-testa { display: flex; align-items: flex-end; gap: 14px; margin: 4px 0 10px; }
.ar-file-testa .campo { width: 230px; }
.ar-file-testa input { height: 32px; }
.ar-file-testa .campo small { font-weight: 400; color: var(--testo-tenue); }
.ar-file-nota { flex: 1; margin: 0; font-size: 12.5px; color: var(--testo-tenue); }
.ar-wa-avviso { margin-bottom: 10px; padding: 8px 12px; border: 1px solid #25a35a; border-radius: var(--raggio-m); background: #e9f8ef; font-size: 14px; }
.ar-file-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 10px; max-height: calc(100vh - 340px); overflow: auto; align-content: start; }
.ar-file-foto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ar-file-serie { padding: 8px 10px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); background: var(--carta); }
.ar-file-serie[hidden] { display: none; }
.ar-file-serie header { display: flex; flex-direction: column; margin-bottom: 6px; }
.ar-file-serie header small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--testo-tenue); }
.ar-file-voci { display: flex; flex-direction: column; gap: 6px; }
.ar-file-foto .ar-file-voci { flex-direction: row; flex-wrap: wrap; }
.ar-file-voce { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ar-file-foto .ar-file-voce { flex-direction: column; align-items: stretch; width: 180px; gap: 4px; }
.ar-file-nome { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; }
.ar-file-pdf { display: inline-block; padding: 0 4px; border: 1px solid #c0392b; border-radius: 3px; color: #c0392b; font-size: 11px; font-weight: 700; }
.ar-file-anteprima img { display: block; width: 180px; height: 110px; object-fit: contain; border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: #fff; }
.ar-file-azioni { display: flex; flex-wrap: wrap; gap: 4px; }
.ar-file-foto .ar-file-azioni { flex-wrap: nowrap; }
.ar-file-foto .ar-file-azioni .pulsante { flex: 1; padding-left: 4px; padding-right: 4px; }
.pulsante.ar-wa { border-color: #1f9d55; background: #25d366; color: #fff; font-weight: 700; }
.pulsante.ar-wa:hover { background: #1fb457; }
.ar-file-manca { margin: 0; font-size: 13px; color: var(--testo-tenue); }
@media (max-width: 1000px) { .ar-file-testa { flex-wrap: wrap; } .ar-file-elenco { grid-template-columns: 1fr; } }

/* WhatsApp da mandare dopo un'operazione: riquadro in basso a sinistra */
.wa-apri { position: fixed; left: 270px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 6px; width: 360px; padding: 12px 14px; border: 1px solid #1f9d55; border-left: 5px solid #25d366; border-radius: var(--raggio-m); background: var(--carta); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.wa-chiudi { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--testo-tenue); cursor: pointer; }
.wa-prova { display: inline-block; width: fit-content; padding: 1px 6px; border-radius: 3px; background: #fff4c2; color: #8a5a00; font-size: 12px; font-weight: 600; }
.wa-voce { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-voce span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.wa-voce small, .wa-nota { font-size: 12px; color: var(--testo-tenue); }
.wa-bloccato { margin: 0; font-size: 12.5px; color: #b26a00; }
@media (max-width: 1000px) { .wa-apri { left: 12px; right: 12px; width: auto; } }

/* cartella del cliente su Google Drive */
.scheda-azione.drive { background: #fff; }
.scheda-azione.drive svg { width: 17px; height: 17px; }
.sc-drive { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -2px 0 8px; font-size: 13.5px; color: var(--testo-tenue); }
.sc-drive > span { flex: 1 1 100%; }
.sc-drive-campo { display: flex; flex: 1 1 100%; gap: 8px; }
.sc-drive-campo[hidden] { display: none; }
.sc-drive-cambia { padding: 0; border: 0; background: none; font: inherit; color: var(--azione); text-decoration: underline; cursor: pointer; }
.sc-drive input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); font: inherit; font-size: 13px; }
.link-drive { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: -2px 0 6px; font-size: 13.5px; }
.link-drive svg { width: 16px; height: 16px; }

/* scheda attivita': pulsanti su una striscia in basso, il testo usa tutta la larghezza e la scheda e' piu' bassa */
.scheda-attivita { flex-direction: column; gap: 5px; padding: 7px 8px 6px 10px; }
.scheda-lato { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; padding-top: 5px; border-top: 1px solid #dde5ee; }
.scheda-lato .scheda-azione { width: 32px; height: 26px; }
.scheda-lato .scheda-azione.scheda-modifica { width: 40px; height: 26px; }
.scheda-lato .scheda-azione.scheda-modifica svg { width: 17px; height: 17px; }
.scheda-lato .minimappa { width: 26px; height: 26px; }
.scheda-lato > .scheda-numero { width: 30px; height: 22px; margin-left: auto; }
.scheda-lato > .scheda-numero + .scheda-numero { margin-left: 0; }

/* CRM: le colonne si allargano a tutto lo schermo; ce ne stanno 9 senza scorrere (oltre si scorre di lato) */
.crm-colonna { flex: 1 1 0; min-width: calc((100% - 8 * 8px) / 9); max-width: 420px; }
.crm-colonna .scheda-lato { gap: 4px; }
.crm-colonna .scheda-lato .scheda-azione { width: 27px; }
.crm-colonna .scheda-lato .scheda-azione.scheda-modifica { width: 32px; }

/* lead diretti dalla Pagina Facebook */
.lead-facebook { margin-bottom: 14px; }
.lead-facebook form + form { margin-top: 10px; }
.lead-moduli { margin: 0 0 10px; padding-left: 20px; font-size: 13.5px; }

/* scheda del Preventivo: intervista telefonica e resoconto del sopralluogo */
.per-preventivo { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid #d9cdee; border-left: 4px solid #8e5bd1; border-radius: var(--raggio-s); background: #faf7fe; font-size: 13.5px; }
.per-preventivo[hidden] { display: none; }
.per-preventivo .pp-riga { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.per-preventivo .pp-resoconto { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 2px 0 0; }
.per-preventivo .pp-resoconto dt { color: var(--testo-tenue); }
.per-preventivo .pp-resoconto dd { margin: 0; white-space: pre-line; }
.per-preventivo .pp-vuoto { margin: 0; color: var(--testo-tenue); }
.per-preventivo .pp-note { max-height: 160px; overflow-y: auto; padding: 6px 8px; border-radius: var(--raggio-s); background: #fff; border: 1px solid #e6dcf3; white-space: pre-line; font-size: 13px; }

/* scheda intervista (SchedaIntervista): una schermata in larghezza, vista telefono o completa */
.scheda-intervista.vista-telefono .solo-completa { display: none; }
.si-viste { display: inline-flex; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); overflow: hidden; }
.si-viste button { padding: 6px 16px; border: 0; background: var(--carta); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.si-viste button.attiva { background: var(--azione); color: #fff; }
.si-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 8px; align-items: start; }
.si-griglia .iv-domanda { padding: 6px 10px 8px; gap: 5px; }
.si-griglia .iv-domanda h3 { font-size: 13.5px; }
.si-griglia .si-impianto { grid-column: 1 / -1; }
.si-griglia .si-note, .si-griglia .iv-passo { grid-column: span 2; }
.si-tabella { overflow-x: auto; }
.si-tabella table { border-collapse: collapse; }
.si-tabella th { padding: 0 4px 3px; font-size: 12px; font-weight: 600; color: var(--testo-tenue); text-align: left; white-space: nowrap; }
.si-tabella td { padding: 1px 4px; }
.si-tabella td.si-n { font-size: 12px; font-weight: 700; color: var(--testo-tenue); }
.si-tabella td.si-centro { text-align: center; }
.si-tabella select { height: 28px; padding: 0 4px; font-size: 13px; }
.si-tabella td:last-child select { min-width: 210px; }
.si-campi { display: flex; flex-wrap: wrap; gap: 4px 5px; }
.si-campi .campo { flex: 1 1 100px; min-width: 0; }
.si-campi .campo.si-largo { flex-basis: 100%; }
.si-campi .campo span { font-size: 12.5px; }
.si-campi select, .si-campi input[type=text] { height: 30px; font-size: 13px; }
.si-campi textarea { width: 100%; resize: vertical; font: inherit; font-size: 13.5px; }
.si-spunta input { position: absolute; opacity: 0; pointer-events: none; }
.si-spunta span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.si-tabella .si-spunta span { min-height: 26px; padding: 0 8px; color: transparent; }
.si-spunta input:checked + span { border-color: var(--azione); background: var(--azione); color: #fff; }
.si-spunta input:focus-visible + span { box-shadow: var(--anello); }
.si-piede { display: flex; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 700px) { .si-griglia .si-note, .si-griglia .iv-passo { grid-column: auto; } }
.si-campi label.campo:not(.si-largo) { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
.si-campi label.campo:not(.si-largo) select { flex: none; width: 92px; height: 26px; padding: 0 4px; }
.si-situazione .si-campi label.campo:not(.si-largo) select { width: 108px; }
/* schermo largo: impianto e "E adesso?" in alto, le altre sezioni e le note in una riga sotto */
@media (min-width: 1500px) {
    .si-griglia { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-flow: row dense; }
    .si-griglia .si-impianto { grid-column: 1 / span 6; grid-row: 1; }
    .si-griglia .iv-passo { grid-column: 7 / span 2; grid-row: 1; }
    .si-griglia .si-note { grid-column: auto; }
    .vista-telefono .si-griglia .si-impianto { grid-column: 1 / span 4; }
    .vista-telefono .si-griglia .iv-passo { grid-column: 5 / span 3; }
}
/* scheda intervista: BTU come la maschera di Access (tipo dalla quantita' di split, motore dal Dual) */
#si-btu tr[hidden] { display: none; }
#si-btu td.si-tipo { min-width: 54px; font-size: 13px; font-weight: 700; color: var(--azione-scuro); }
#si-btu td.si-split select { width: 84px; }
#si-btu td.si-motore.si-spento select { visibility: hidden; }
#si-btu td:last-child select { min-width: 170px; }
/* marchi trattati: una colonna per marchio */
.si-marchi { display: flex; gap: 8px; align-items: flex-start; }
.si-marchi-colonna { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.si-marchio { display: flex; flex-direction: column; gap: 3px; }
.si-marchio strong { font-size: 12.5px; text-align: center; color: var(--primario); }
.si-marchio .si-spunta span { width: 100%; justify-content: center; }
/* domande a pulsanti (quanti ambienti, nuova o sostituzione) */
.si-domanda { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; }
.si-domanda > span { font-size: 13px; font-weight: 600; }
.si-pulsanti span { min-height: 28px; padding: 0 9px; font-size: 13px; }
@media (min-width: 1500px) {
    .si-griglia .si-richiesta { grid-column: 1 / span 2; grid-row: 1; }
    .si-griglia .si-impianto { grid-column: 3 / span 6; grid-row: 1; }
    .si-griglia .si-marche { grid-column: 1 / span 3; grid-row: 2; }
    .si-griglia .iv-passo { grid-column: 4 / span 2; grid-row: 2; }
    .vista-telefono .si-griglia .si-impianto { grid-column: 3 / span 4; }
    .vista-telefono .si-griglia .iv-passo { grid-column: 7 / span 2; grid-row: 1; }
}
/* vista completa: BTU a tutta larghezza (ha tutte le colonne tecniche), sotto richiesta, marchi e "E adesso?" */
@media (min-width: 1500px) {
    .vista-completa .si-griglia .si-impianto { grid-column: 1 / -1; grid-row: 1; }
    .vista-completa .si-griglia .si-richiesta { grid-column: 1 / span 2; grid-row: 2; }
    .vista-completa .si-griglia .si-marche { grid-column: 3 / span 3; grid-row: 2; }
    .vista-completa .si-griglia .iv-passo { grid-column: 6 / span 2; grid-row: 2; }
}
.vista-completa #si-btu td:last-child select { min-width: 200px; }
/* scheda intervista: le colonne della riga si vedono anche al telefono, quindi BTU a tutta larghezza in tutte e due le viste */
@media (min-width: 1500px) {
    .scheda-intervista .si-griglia .si-impianto { grid-column: 1 / -1; grid-row: 1; }
    .scheda-intervista .si-griglia .si-richiesta { grid-column: 1 / span 2; grid-row: 2; }
    .scheda-intervista .si-griglia .si-marche { grid-column: 3 / span 3; grid-row: 2; }
    .scheda-intervista .si-griglia .iv-passo { grid-column: 6 / span 2; grid-row: 2; }
}
/* scheda intervista: in alto richiesta, marchi trattati, esigenze e agevolazioni; poi BTU; sotto le altre sezioni
   e "E adesso?" in basso a destra (uguale nelle due viste) */
@media (min-width: 1500px) {
    .scheda-intervista .si-griglia .si-richiesta { grid-column: 1 / span 2; grid-row: 1; }
    .scheda-intervista .si-griglia .si-marche { grid-column: 3 / span 3; grid-row: 1; }
    .scheda-intervista .si-griglia .si-esigenze { grid-column: 6; grid-row: 1; }
    .scheda-intervista .si-griglia .si-agevolazioni { grid-column: 7; grid-row: 1; }
    .scheda-intervista .si-griglia .si-impianto { grid-column: 1 / -1; grid-row: 2; }
    .scheda-intervista .si-griglia .si-situazione,
    .scheda-intervista .si-griglia .si-installazione,
    .scheda-intervista .si-griglia .si-accessori,
    .scheda-intervista .si-griglia .si-attrezzature,
    .scheda-intervista .si-griglia .si-note { grid-row: 3; }
    .scheda-intervista .si-griglia .iv-passo { grid-column: 7 / span 2; grid-row: 3; }
}
.si-campi label.campo.si-numero select { width: 58px; }
.si-campi label.campo.si-numero > span { white-space: nowrap; }
/* scheda intervista: esigenze e agevolazioni in basso con le altre sezioni (9 colonne, "E adesso?" sempre in basso a destra) */
@media (min-width: 1500px) {
    .scheda-intervista .si-griglia { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .scheda-intervista .si-griglia .si-esigenze,
    .scheda-intervista .si-griglia .si-agevolazioni { grid-column: auto; grid-row: 3; }
    .scheda-intervista .si-griglia .iv-passo { grid-column: 8 / span 2; grid-row: 3; }
}
@media (min-width: 1500px) {
    .scheda-intervista .si-griglia .si-richiesta { grid-column: 1 / span 3; }
    .scheda-intervista .si-griglia .si-marche { grid-column: 4 / span 4; }
}
/* scheda intervista: caselle della tabella BTU piu' strette */
#si-btu td { padding: 1px 2px; }
#si-btu th { padding: 0 2px 3px; font-size: 11.5px; }
#si-btu select { height: 26px; padding: 0 2px; font-size: 12.5px; }
#si-btu td.si-split select { width: 70px; }
#si-btu td[data-campo=motore] select { width: 70px; }
#si-btu td[data-campo=lavoro] select { width: 104px; }
#si-btu td[data-campo=posizione] select { width: 70px; }
#si-btu td[data-campo=rame] select, #si-btu td[data-campo=canalina] select, #si-btu td[data-campo=cavo] select, #si-btu td[data-campo=condensa] select { width: 46px; }
#si-btu td[data-campo=marca] select { width: 96px; }
#si-btu td[data-campo=modello] select, .vista-completa #si-btu td:last-child select, #si-btu td:last-child select { width: 130px; min-width: 0; }
#si-btu td.si-tipo { min-width: 46px; }
#si-btu .si-spunta span { min-height: 24px; padding: 0 6px; }
/* scheda intervista: "Per tutte le righe" in alto a destra (solo vista completa) */
.si-tutte .si-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.si-tutte .si-domanda { flex: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
.si-tutte .si-domanda > span { font-weight: 400; font-size: 12.5px; }
.si-tutte .si-pulsanti span { min-height: 24px; padding: 0 7px; font-size: 12.5px; }
.si-tutte .si-campi label.campo:not(.si-largo) select { width: 100px; }
.si-tutte .si-campi label.campo.si-numero select { width: 58px; }
@media (min-width: 1500px) {
    .scheda-intervista .si-griglia .si-tutte { grid-column: 8 / span 2; grid-row: 1; }
}
/* "Per tutte le righe" in una colonna, tra la richiesta e i marchi trattati */
.si-tutte .si-campi { grid-template-columns: 1fr; }
@media (min-width: 1500px) {
    .scheda-intervista .si-griglia .si-richiesta { grid-column: 1 / span 3; grid-row: 1; }
    .scheda-intervista .si-griglia .si-tutte { grid-column: 4 / span 2; grid-row: 1; }
    .scheda-intervista .si-griglia .si-marche { grid-column: 6 / span 4; grid-row: 1; }
    .vista-telefono .si-griglia .si-marche { grid-column: 4 / span 4; }
}
/* "Per tutte le righe": scelta subito dopo l'etichetta, stessa posizione nelle due viste */
.si-tutte .si-domanda, .si-tutte .si-campi label.campo:not(.si-largo) { justify-content: flex-start; gap: 8px; }
.si-tutte .si-domanda > span, .si-tutte .si-campi label.campo > span { flex: none; width: 92px; }
@media (min-width: 1500px) {
    .vista-telefono .si-griglia .si-marche { grid-column: 6 / span 4; }
}
/* scheda intervista: in alto le caselle larghe quanto il contenuto e "E adesso?" a destra; poi BTU; poi le sezioni in fila */
.scheda-intervista .si-griglia { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.scheda-intervista .si-griglia > * { flex: 1 1 170px; min-width: 0; }
.scheda-intervista .si-griglia .si-richiesta { order: 1; flex: 0 0 auto; }
.scheda-intervista .si-griglia .si-tutte { order: 2; flex: 0 0 auto; }
.scheda-intervista .si-griglia .si-marche { order: 3; flex: 0 0 auto; }
.scheda-intervista .si-griglia .iv-passo { order: 4; flex: 1 1 300px; }
.scheda-intervista .si-griglia .si-impianto { order: 5; flex: 1 1 100%; }
.scheda-intervista .si-griglia > section:not(.si-richiesta):not(.si-tutte):not(.si-marche):not(.iv-passo):not(.si-impianto) { order: 6; }
.scheda-intervista .si-richiesta .si-domanda { flex: none; }
.si-tutte .si-campi { width: max-content; }
.scheda-intervista .si-richiesta .si-campi { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; width: max-content; max-width: 380px; }
.scheda-intervista .si-richiesta .si-pulsanti { flex-wrap: wrap; }
/* scheda intervista regolare: stesse misure per etichette, tendine e pulsanti; note grandi; tutto in una schermata */
.scheda-intervista .testa-pagina { margin-bottom: 8px; }
.scheda-intervista .messaggio { margin-bottom: 8px; padding-top: 6px; padding-bottom: 6px; }
.scheda-intervista .si-griglia { gap: 6px; }
.scheda-intervista .si-griglia .iv-domanda { padding: 6px 10px 8px; gap: 4px; }
.scheda-intervista .si-griglia .iv-domanda h3 { font-size: 13px; }
.scheda-intervista .si-campi { gap: 3px 4px; }
.scheda-intervista .si-campi label.campo:not(.si-largo) > span,
.scheda-intervista .si-domanda > span { flex: none; width: 84px; font-size: 12.5px; font-weight: 400; }
.scheda-intervista .si-campi label.campo:not(.si-largo) { justify-content: flex-start; gap: 6px; }
.scheda-intervista .si-campi select { height: 26px; font-size: 12.5px; }
.scheda-intervista .si-campi label.campo:not(.si-largo) select { width: 100px; }
.scheda-intervista .si-campi label.campo.si-numero select { width: 58px; }
.scheda-intervista .si-spunta span, .scheda-intervista .si-pulsanti span { min-height: 26px; padding: 0 8px; font-size: 12.5px; font-weight: 600; }
.scheda-intervista .si-richiesta .si-domanda { flex-direction: row; align-items: center; gap: 6px; }
.scheda-intervista .si-richiesta .si-domanda > span { width: 70px; }
.scheda-intervista .si-richiesta .si-campi { max-width: 470px; }
.scheda-intervista .iv-passo .iv-scelte span { min-height: 28px; font-size: 12.5px; }
/* note: la sezione piu' larga, le caselle alte quanto le altre sezioni */
.scheda-intervista .si-griglia .si-note { flex: 2.5 1 360px; align-self: stretch; }
.scheda-intervista .si-note .si-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: calc(100% - 22px); }
.scheda-intervista .si-note .campo { height: 100%; }
.scheda-intervista .si-note textarea { flex: 1; min-height: 110px; resize: none; }
.scheda-intervista.vista-telefono .si-note .si-campi { grid-template-columns: 1fr; }
/* BTU: motore prima degli split, un po' di spazio dopo lo split 4, poi marca e modello */
#si-btu td[data-campo=split4] { padding-right: 18px; }
#si-btu td[data-campo=condensa] select { width: 46px; min-width: 0; }
#si-btu td[data-campo=modello] select { width: 130px; }
.scheda-intervista.vista-completa #si-btu td[data-campo=condensa] select, .scheda-intervista #si-btu td[data-campo=condensa] select { width: 46px; min-width: 0; }
/* scheda intervista: pulsante ✎ nel titolo dei riquadri e finestra delle voci */
.scheda-intervista .iv-domanda h3 { display: flex; align-items: center; gap: 6px; }
.si-modifica { margin-left: auto; padding: 0 6px; height: 20px; border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: var(--carta); color: var(--testo-tenue); font-size: 12px; line-height: 1; cursor: pointer; }
.si-modifica:hover { color: var(--primario); border-color: var(--bordo-forte); background: var(--azione-tenue); }
.si-dialogo { width: min(760px, 96vw); }
.si-voci input[type=text] { width: 100%; font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); }
.si-voci input[type=text]:disabled { background: var(--sfondo, #f3f5f7); color: var(--testo-tenue); }
.si-voci th.si-centro, .si-voci td.si-centro { text-align: center; width: 70px; }
.si-voci tr.si-tolta input[type=text], .si-voci tr.si-tolta select { text-decoration: line-through; opacity: .55; }
.si-aggiungi { margin-top: 8px; }
.si-voci input:disabled::placeholder { color: transparent; }
/* BTU: colonna "Alt. a" (riga alternativa a un'altra) e righe alternative in evidenza */
.scheda-intervista #si-btu td[data-campo=alternativa] select { width: 46px; min-width: 0; }
.scheda-intervista #si-btu tr.si-alternativa td { background: var(--avviso-tenue); }
.scheda-intervista #si-btu tr.si-alternativa .si-tipo::after { content: ' alt.'; font-weight: 400; color: var(--testo-tenue); }
.scheda-intervista #si-btu .si-tipo { white-space: nowrap; }
/* Impostazioni › Parametri preventivi: gruppi affiancati, prova del calcolo a destra, tutto in una schermata */
.pp-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); grid-template-rows: auto auto; gap: 10px; align-items: start; }
.pp-griglia .pp-installazione { grid-column: 1; grid-row: 1 / span 2; }
.pp-griglia .pp-extra { grid-column: 2; grid-row: 1; }
.pp-griglia .pp-prezzo { grid-column: 2; grid-row: 2; }
.pp-griglia .pp-agevolazioni { grid-column: 3; grid-row: 1; }
.pp-griglia .pp-rate { grid-column: 3; grid-row: 2; }
.pp-griglia .pp-prova { grid-column: 4; grid-row: 1 / span 2; }
.pp-gruppo { padding: 10px 14px 12px; margin: 0; }
.pp-gruppo .sezione-titolo { margin: 0 0 6px; font-size: 14px; }
.pp-riga { display: grid; grid-template-columns: 1fr 86px 52px; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--bordo); font-size: 13px; }
.pp-riga:last-child { border-bottom: 0; }
.pp-etichetta small { display: block; font-size: 11px; color: var(--testo-tenue); line-height: 1.25; }
.pp-riga input { width: 100%; text-align: right; font: inherit; padding: 4px 6px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); }
.pp-unita { font-size: 12px; color: var(--testo-tenue); }
.pp-prova-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 8px; }
.pp-prova-campi label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.pp-prova-campi input[type=number] { width: 72px; text-align: right; font: inherit; padding: 3px 6px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); }
.pp-prova-campi .pp-spunta { justify-content: flex-start; }
.pp-conto { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-conto th { text-align: left; font-weight: 400; padding: 3px 0; }
.pp-conto td { text-align: right; padding: 3px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-conto tr.pp-somma th, .pp-conto tr.pp-somma td { font-weight: 600; border-top: 1px solid var(--bordo); }
.pp-conto tfoot th, .pp-conto tfoot td { border-top: 1px solid var(--bordo); }
.pp-conto tr.pp-totale th, .pp-conto tr.pp-totale td { font-weight: 700; font-size: 15px; color: var(--primario); }
@media (max-width: 1300px) { .pp-griglia { grid-template-columns: 1fr 1fr; } .pp-griglia > section { grid-column: auto !important; grid-row: auto !important; } }
/* parametri preventivi: il confronto invernale sotto l'installazione */
.pp-griglia .pp-installazione { grid-row: 1; }
.pp-griglia .pp-inverno { grid-column: 1; grid-row: 2; }
/* parametri preventivi senza scorrere: note come suggerimento sull'etichetta, colonne bilanciate */
.pp-etichetta.pp-nota { text-decoration: underline dotted var(--testo-tenue); text-underline-offset: 3px; cursor: help; }
.pp-griglia { grid-template-rows: auto auto auto; }
.pp-griglia .pp-installazione { grid-column: 1; grid-row: 1 / span 2; }
.pp-griglia .pp-inverno { grid-column: 1; grid-row: 3; }
.pp-griglia .pp-extra { grid-column: 2; grid-row: 1; }
.pp-griglia .pp-prezzo { grid-column: 2; grid-row: 2; }
.pp-griglia .pp-rate { grid-column: 2; grid-row: 3; }
.pp-griglia .pp-agevolazioni { grid-column: 3; grid-row: 1 / span 3; }
.pp-griglia .pp-prova { grid-column: 4; grid-row: 1 / span 3; }
.pp-riga { padding: 2px 0; }
.pp-riga input { padding: 3px 6px; }
/* parametri preventivi: colonne di riquadri impilati (al posto della griglia a righe) */
.pp-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); grid-template-rows: none; gap: 10px; align-items: start; }
.pp-griglia > * { grid-column: auto !important; grid-row: auto !important; }
.pp-colonna { display: flex; flex-direction: column; gap: 10px; }
.pp-conto td, .pp-conto th { padding: 2px 0; }
@media (max-width: 1300px) { .pp-griglia { grid-template-columns: 1fr 1fr; } }
/* parametri preventivi: un riquadrino per pratica (F-gas, ENEA, GSE) e Chiudi accanto a Salva */
.pp-riquadrino { margin: 6px 0 8px; padding: 2px 10px 4px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); }
.pp-riquadrino legend { padding: 0 6px; font-size: 12.5px; font-weight: 600; color: var(--primario); }
.parametri-preventivo .si-piede { display: flex; justify-content: flex-end; gap: 8px; }
/* Preventivi: elenco a sinistra, versioni affiancate a destra */
.pv-pagina { grid-template-columns: 280px minmax(0, 1fr); }
.pv-cerca input { width: 100%; font: inherit; font-size: 13px; padding: 5px 8px; margin-bottom: 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); }
.pv-pagina .ed-voce span { min-width: 0; }
.pv-versioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 10px; margin-top: 12px; }
.pv-versione { border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.pv-versione.pv-consigliato { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
.pv-versione.pv-esclusa { opacity: .55; }
.pv-versione header { display: flex; align-items: center; gap: 8px; }
.pv-versione h3 { margin: 0; font-size: 14px; flex: 1; min-width: 0; color: var(--primario); }
.pv-versione header select { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); }
.pv-inclusa { font-size: 12px; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.pv-righe { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pv-righe th { text-align: left; font-size: 11px; color: var(--testo-lieve); font-weight: 600; padding: 2px 4px; }
.pv-righe td { padding: 1px 4px; border-top: 1px solid var(--bordo); }
.pv-righe .num { text-align: right; white-space: nowrap; }
.pv-righe input { width: 100%; font: inherit; font-size: 12.5px; padding: 2px 4px; border: 1px solid transparent; border-radius: var(--raggio-s); background: transparent; }
.pv-righe input:hover, .pv-righe input:focus { border-color: var(--bordo-forte); background: var(--carta); }
.pv-righe td.num input { width: 70px; text-align: right; }
.pv-righe tr.pv-installazione td { color: var(--testo-tenue); }
.pv-righe tr.pv-da_scegliere td { background: var(--avviso-tenue); }
.pv-righe tr.pv-titolo td { padding: 5px 4px 2px; font-size: 11.5px; font-weight: 700; color: var(--testo); border-top: 1px solid var(--bordo-forte); }
.pv-versione footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; border-top: 1px solid var(--bordo); padding-top: 6px; margin-top: auto; }
.pv-costo { color: var(--testo-tenue); }
.pv-costo .pv-margine-basso { color: var(--errore, #b42318); }
.pv-versione footer input { width: 90px; text-align: right; font: inherit; padding: 3px 6px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); margin-left: 4px; }
.pv-note { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--testo-tenue); margin-top: 10px; }
.pv-note textarea { font: inherit; font-size: 13px; color: var(--testo); padding: 5px 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-m); }
.pv-piede { justify-content: space-between; }
.scheda-intervista .testa-pagina .si-crea-preventivo { margin-left: auto; margin-right: 10px; }
/* preventivi: tre versioni per riga */
.pv-versioni { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.pv-righe td.num input { width: 56px; }
.pv-versione footer { flex-wrap: wrap; }
.pv-versione footer input { width: 76px; }
.pv-righe th:nth-child(2), .pv-righe td:nth-child(2) { width: 38px; }
.pv-righe td:nth-child(2) input { width: 36px; }
.pv-righe th:nth-child(4), .pv-righe td:nth-child(4) { width: 68px; }
/* parametri preventivi: tre colonne + pezzi dell'intervista a sinistra, prova del calcolo a destra */
.pp-griglia { grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr); }
.pp-sinistra { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-colonne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pp-pezzi .sezione-titolo small { font-weight: 400; font-size: 12px; color: var(--testo-tenue); }
.pp-pezzi-righe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 18px; }
.pp-pezzi-righe .pp-riga { grid-template-columns: 1fr 64px 34px; }
.pp-pezzi-righe .pp-riga:last-child { border-bottom: 1px solid var(--bordo); }
@media (max-width: 1300px) { .pp-griglia { grid-template-columns: 1fr; } .pp-colonne { grid-template-columns: 1fr 1fr; } .pp-pezzi-righe { grid-template-columns: 1fr 1fr; } }
/* preventivi: tasto per togliere la riga, riga tolta barrata */
.pv-righe th:nth-child(5), .pv-righe td.pv-togli { width: 22px; padding: 0; text-align: center; }
.pv-togli button { border: 0; background: none; color: var(--testo-tenue); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: var(--raggio-s); }
.pv-togli button:hover { color: var(--pericolo); background: var(--pericolo-tenue); }
.pv-righe tr.pv-tolta td { opacity: .45; }
.pv-righe tr.pv-tolta input[type=text] { text-decoration: line-through; }
.pv-righe tr.pv-pezzo td { color: var(--testo-tenue); }
/* parametri preventivi: pezzi con articolo del catalogo (il prezzo scritto vale solo senza articolo) */
.pp-pezzi-righe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-pezzi-righe .pp-riga.pp-pezzo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) 56px 30px; }
.pp-pezzo input[data-articolo] { text-align: left; font-size: 12px; }
.pp-riga.pp-materiale { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) 46px 18px 50px 30px; gap: 4px; }
.pp-materiale .pp-etichetta small { display: block; color: var(--testo-tenue); font-size: 11px; }
.pp-materiale-testa { font-size: 11px; color: var(--testo-tenue); border-bottom: 1px solid var(--bordo-forte); }
.pp-materiale input[data-articolo] { text-align: left; font-size: 12px; }
.pp-pezzo input.pp-prezzo-articolo { color: var(--testo-tenue); text-decoration: line-through; }
/* BTU: tasto per togliere un impianto (svuota la riga) */
.scheda-intervista #si-btu td.si-togli { width: 24px; padding: 0 2px; text-align: center; }
.scheda-intervista #si-btu td.si-togli button { border: 0; background: none; color: var(--testo-tenue); cursor: pointer; font-size: 12px; padding: 3px 5px; border-radius: var(--raggio-s); }
.scheda-intervista #si-btu td.si-togli button:hover { color: var(--pericolo); background: var(--pericolo-tenue); }
/* preventivi: le versioni comparative mostrano solo prodotti e prezzo; la principale tutto */
.pv-versioni { align-items: start; }
.pv-versione.pv-compatta tr.pv-installazione, .pv-versione.pv-compatta tr.pv-pezzo, .pv-versione.pv-compatta tr.pv-titolo-accessori, .pv-versione.pv-compatta footer .pv-netto { display: none; }
.pv-dettagli { border: 1px solid var(--bordo-forte); background: var(--carta); color: var(--testo-tenue); font: inherit; font-size: 11.5px; padding: 1px 6px; border-radius: var(--raggio-s); cursor: pointer; }
.pv-dettagli:hover { color: var(--primario); border-color: var(--primario); }
/* BTU: il ✕ sta accanto al numero della riga (niente colonna in piu') */
.scheda-intervista #si-btu td.si-n.si-togli { width: auto; padding: 0 2px 0 4px; white-space: nowrap; text-align: left; }
.scheda-intervista #si-btu td.si-n.si-togli button { padding: 1px 3px; margin-left: 1px; font-size: 10px; opacity: .45; }
.scheda-intervista #si-btu tr:hover td.si-n.si-togli button { opacity: 1; }
/* BTU: qualche pixel in meno per stare nella larghezza senza barra orizzontale */
.scheda-intervista.vista-completa #si-btu td[data-campo=marca] select, .scheda-intervista #si-btu td[data-campo=marca] select { width: 88px; min-width: 0; }
.scheda-intervista.vista-completa #si-btu td[data-campo=modello] select, .scheda-intervista #si-btu td[data-campo=modello] select { width: 116px; min-width: 0; }
.scheda-intervista.vista-completa #si-btu td[data-campo=lavoro] select, .scheda-intervista #si-btu td[data-campo=lavoro] select { width: 96px; min-width: 0; }
.scheda-intervista #si-btu td[data-campo=alternativa] select { width: 42px; }
/* preventivi: per soluzione la versione completa a sinistra, le altre a destra una sotto l'altra;
   testata colorata per fascia (pastello fisso: Essential verde, Consigliato azzurro, Premium oro) */
.pv-soluzione { margin-top: 12px; }
.pv-soluzione-titolo { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue); }
.pv-soluzione-griglia { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.pv-soluzione-griglia.pv-sola { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.pv-altre { display: flex; flex-direction: column; gap: 10px; }
.pv-versione { padding: 0 10px 8px; overflow: hidden; }
.pv-versione.pv-principale { border-color: var(--bordo-forte); box-shadow: none; }
.pv-versione h3 { margin: 4px 0 0; }
.pv-fascia { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -10px; padding: 5px 10px; }
.pv-fascia select { border: 0; background: transparent; color: inherit; font: inherit; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 0; cursor: pointer; }
.pv-fascia .pv-inclusa { color: inherit; }
.pv-fascia-essential { background: #e3f1e6; color: #2f6b45; }
.pv-fascia-consigliato { background: #dce9f7; color: #1f4f86; }
.pv-fascia-premium { background: #f7ecd0; color: #7a5a12; }
.pv-fascia-nessuna { background: #eceef1; color: #5b6573; }
/* preventivi: azioni in testata (intervista, anteprima per il cliente, WhatsApp) */
.pv-azioni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pv-visto { font-size: 12px; color: var(--ok, #2e8b57); background: var(--ok-tenue, #e3f1e6); border-radius: 999px; padding: 2px 10px; }
/* parametri preventivi: indirizzo pubblico dei link nella testata */
.pp-indirizzo { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: rgba(255, 255, 255, .85); min-width: 320px; }
.pp-indirizzo input { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--carta); color: var(--testo); }
.pv-avviso-link { font-size: 12px; color: var(--avviso-testo, #8a5a00); background: var(--avviso-tenue); border-radius: 999px; padding: 2px 10px; }