/* ==============================================================================
   BRIA - STILE UNIFICATO
   Foglio di stile consolidato per l'unificazione del design system.
   Versione: 1.9.2 (16/10/2026: outline, bianco solo su hover e :active (premuto), non su focus ne su .active)
             1.9.0 (12/10/2026: menu laterale 225px, il 10% in meno, e margini
             laterali dell'area centrale a un quarto - Michele, Issue #348)
   1.8.0 (08/10/2026: luce del --vetro-fondo spostabile con --luce-x/--luce-y)
   1.7.1 (06/10/2026: tolto --vetro-blu, la benzina e' a bande verdi)
   1.7.0 (06/10/2026: + --vetro-blu e --vetro-nero, le bande del carburante)
   1.6.0 (06/10/2026: + --vetro-azzurro, l'elettrico del portale)
   1.5.0 (02/10/2026: cornice del gruppo della scala SCP, in coda)
             1.4.0 (02/10/2026: cella della scala SCP, in coda)
   Data: 2026-10-02
   Descrizione: Consolidamento di layout, componenti, Toast, Skeleton, Dark Mode
                e compatibilità responsiva per browser Chromium, Safari e Firefox.
   ============================================================================== */

:root {
    /* --- DESKTOP VARIABLES --- */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --sidebar-width: 225px;            /* 12/10/2026: era 250, il 10% in meno (#348) */
    --sidebar-width-collapsed: 70px;
    
    /* Palette Colori Standardizzata Desktop */
    --color-success: #10b981; /* Emerald */
    --color-success-hover: #059669;
    --color-info: #3b82f6; /* Blue */
    --color-warning: #f59e0b; /* Amber */
    --color-danger: #ef4444; /* Red */
    --color-danger-hover: #dc2626;
    --color-dark: #1f2937; /* Slate 800 */
    --color-muted: #64748b; /* Slate 500 */
    --color-bg-light: #f8fafc; /* Slate 50 */
    --color-card-bg: #ffffff;
    --color-text-main: #1e293b;
    
    /* --- LA SCALA DEGLI STATI - sei gradini (guida_stile §2.3) -----------
       Fonte della REGOLA: app/scala_stati.py. Qui ci sono solo i colori:
       il nome del gradino e' lo stesso in tutti e tre i posti (Python,
       token, classe CSS), cosi' leggendo l'HTML reso si sa quale gradino
       e' senza tradurre niente.
       Tre gradini riusano la palette che c'e' gia' e NON riscrivono
       l'esadecimale: se un domani il verde di BRIA cambia, cambia anche
       il verde della scala (Regola #18). Tre sono nuovi.
       `--color-warning` (#f59e0b, Amber) NON entra nella scala: sta in
       mezzo fra giallo e arancione e li renderebbe indistinguibili a
       colpo d'occhio, che e' l'unico posto dove questi colori servono. */
    --stato-grigio:    var(--color-muted);      /* Slate 500  - gia' in palette */
    --stato-verde:     var(--color-success);    /* Emerald    - gia' in palette */
    --stato-giallo:    #eab308;                 /* Yellow 500 - nuovo */
    --stato-arancione: #f97316;                 /* Orange 500 - nuovo */
    --stato-rosso:     var(--color-danger);     /* Red        - gia' in palette */
    --stato-viola:     #a855f7;                 /* Purple 500 - nuovo */

    /* PERCHE' OGNI GRADINO HA TRE TONI E NON UNO SOLO
       Un pallino colorato si accontenta del colore pieno. Una pastiglia
       con dentro una scritta no: MISURATO il 17/09, su #a855f7 pieno il
       testo bianco sta a 3,96:1 e quello scuro a 3,70:1 - sotto il minimo
       leggibile (4,5:1) in tutti e due i casi, e il viola e' proprio il
       gradino che deve farsi leggere ("chiama qualcuno"). Quindi la
       pastiglia usa il tono 100 come sfondo e il tono 700 come testo:
       stessa famiglia, stesso significato, e il contrasto sale a 4,52:1
       nel caso peggiore (arancione) e 9,45:1 nel migliore (grigio).
       Sono i toni Tailwind delle stesse tinte, non colori inventati. */
    --stato-grigio-tenue:    #f1f5f9;   --stato-grigio-forte:    #334155;
    --stato-verde-tenue:     #d1fae5;   --stato-verde-forte:     #047857;
    --stato-giallo-tenue:    #fef9c3;   --stato-giallo-forte:    #a16207;
    --stato-arancione-tenue: #ffedd5;   --stato-arancione-forte: #c2410c;
    --stato-rosso-tenue:     #fee2e2;   --stato-rosso-forte:     #b91c1c;
    --stato-viola-tenue:     #f3e8ff;   --stato-viola-forte:     #7e22ce;

    /* --- LA TAVOLOZZA DELLA SCALA C-P - sedici colori -------------------
       PROGETTO_REPORT_CLIENTI.md sez. 3.7-F.2. La scala Clienti-Prospect ha
       dodici caselle, dal nero (11, non piu' attivo) al verde acceso (0,
       ordine nel mese). NON usa la scala degli stati (§2.3): quella risponde
       a "quanto e' grave", questa e' una CLASSIFICAZIONE con scala propria,
       come gli Score Creditsafe - e la guida dice esplicitamente che li' la
       scala degli stati non si applica.

       IL TOKEN PORTA IL NOME DEL COLORE, NON DELLA CASELLA. Quale colore usi
       ogni casella lo dice il DB (`scala_stati_cp.colore`), e si cambia dalla
       plancia in Gestione Sistema: se il token si chiamasse `--cp-11`,
       cambiare colore a una casella vorrebbe dire toccare il CSS.

       Tre toni per colore, per lo stesso motivo della scala degli stati: una
       pastiglia con dentro una scritta non si legge sul colore pieno. Sfondo
       = tono tenue, testo = tono forte. Sono i toni Tailwind delle stesse
       tinte, non colori inventati. I sedici sono dodici in uso piu' quattro
       di riserva, cosi' la plancia ha da scegliere. ------------------- */
    --cp-nero:           #1f2937;  --cp-nero-tenue:           #e2e8f0;  --cp-nero-forte:           #0f172a;
    --cp-grigio-chiaro:  #cbd5e1;  --cp-grigio-chiaro-tenue:  #f8fafc;  --cp-grigio-chiaro-forte:  #475569;
    --cp-grigio:         #94a3b8;  --cp-grigio-tenue:         #f1f5f9;  --cp-grigio-forte:         #334155;
    --cp-ardesia:        #64748b;  --cp-ardesia-tenue:        #f1f5f9;  --cp-ardesia-forte:        #334155;
    --cp-lilla:          #a78bfa;  --cp-lilla-tenue:          #ede9fe;  --cp-lilla-forte:          #6d28d9;
    --cp-viola:          #8b5cf6;  --cp-viola-tenue:          #ede9fe;  --cp-viola-forte:          #6d28d9;
    --cp-indaco-chiaro:  #818cf8;  --cp-indaco-chiaro-tenue:  #e0e7ff;  --cp-indaco-chiaro-forte:  #4338ca;
    --cp-indaco:         #6366f1;  --cp-indaco-tenue:         #e0e7ff;  --cp-indaco-forte:         #4338ca;
    --cp-cielo:          #0ea5e9;  --cp-cielo-tenue:          #e0f2fe;  --cp-cielo-forte:          #0369a1;
    --cp-blu:            #3b82f6;  --cp-blu-tenue:            #dbeafe;  --cp-blu-forte:            #1d4ed8;
    --cp-ciano:          #06b6d4;  --cp-ciano-tenue:          #cffafe;  --cp-ciano-forte:          #0e7490;
    --cp-verdeacqua:     #14b8a6;  --cp-verdeacqua-tenue:     #ccfbf1;  --cp-verdeacqua-forte:     #0f766e;
    --cp-smeraldo:       #10b981;  --cp-smeraldo-tenue:       #d1fae5;  --cp-smeraldo-forte:       #047857;
    --cp-verde:          #22c55e;  --cp-verde-tenue:          #dcfce7;  --cp-verde-forte:          #15803d;
    --cp-ambra:          #f59e0b;  --cp-ambra-tenue:          #fef3c7;  --cp-ambra-forte:          #b45309;
    --cp-rosa:           #f43f5e;  --cp-rosa-tenue:           #ffe4e6;  --cp-rosa-forte:           #be123c;

    /* Ombre e Bordi */
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
    --border-radius-lg: 12px;
    --border-radius-md: 8px;

    /* --- MOBILE VARIABLES (Prefix --m-) --- */
    --m-blu: #0d47a1;
    --m-blu-scuro: #093170;
    --m-sfondo: #f4f6f9;
    --m-card: #ffffff;
    --m-testo: #1b2330;
    --m-testo-sec: #687284;
    --m-bordo: #e3e8ef;
    --m-ombra: 0 2px 10px rgba(16, 32, 60, 0.08);
    /* 27/10 (#387, restyling mobile passo 1): i colori che mobile.css
       scriveva a mano, uno per ruolo. Valori = quelli di prima, nessun
       cambio a video. Il tema Vetro li ridefinisce tutti insieme. */
    --m-su-blu: #ffffff;                 /* testo e icone su fondo pieno */
    --m-link: #0d47a1;                   /* blu dei TESTI (link, titoli): nel Vetro schiarisce */
    --m-testata: #0d47a1;                /* fondo delle fasce: intestazioni, piede, splash */
    --m-testo-terz: #8a93a2;             /* suggerimenti, date, segnaposto */
    --m-superficie: #eef2f8;             /* secondo piano: campi, righe premute */
    --m-accento-tenue: #eaf1fb;          /* azzurro di chip e tasti secondari */
    --m-accento-tenue-forte: #d8e6fa;    /* lo stesso, premuto */
    --m-bordo-forte: #cfd6e2;            /* bordi dei campi, icone vuote */
    --m-ok: #2e7d32;
    --m-ok-tenue: #e6f6ec;
    --m-errore: #c62828;
    --m-errore-tenue: #fdecea;
    --m-avviso: #8a5a00;
    --m-avviso-forte: #ef6c00;           /* arancione di righe e pallini 'attenzione' */
    --m-avviso-tenue: #fff7e6;
    --m-avviso-bordo: #f5d98a;
    --m-viola: #6a3fb0;
    --m-viola-tenue: #f3f0fb;
    --m-toast: #1b2330;                  /* fondo dei messaggi a scomparsa */
    --m-velo: rgba(0, 0, 0, 0.45);       /* dietro finestre e grafico */

    /* --- SUPERFICIE "VETRO" - porta d'ingresso (guida_stile 9 p.4) --------
       Valori STRUTTURALI, non di palette: fondo brand, cornice, sfocatura.
       Fonte UNICA (Regola #18/#24): li usano sia il login desktop
       (templates/auth/_styles.html, body.auth-vetro) sia le due pagine di
       ingresso mobile (static/mobile/ingresso.css, body.m-login-page).
       Il vetro vale SOLO per l'ingresso: le pagine di servizio restano
       con la card bianca / il tema chiaro (PROGETTO_LOGIN_EMAIL.md 117.2). */
    --vetro-fondo: radial-gradient(760px 460px at var(--luce-x, 50%) var(--luce-y, 42%), #2b527f 0%, #1a3455 42%, transparent 72%),
                   linear-gradient(160deg, #16304f 0%, #0b1220 100%);
    --vetro-pannello-opaco: rgba(18, 38, 66, 0.82);   /* ripiego senza backdrop-filter */
    --vetro-pannello:       rgba(226, 238, 255, 0.10);
    --vetro-sfocatura:      blur(18px);
    --vetro-cornice:        rgba(226, 238, 255, 0.24);
    --vetro-ombra:          0 44px 90px -26px rgba(0, 0, 0, 0.75),
                            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    --vetro-campo:          rgba(8, 15, 30, 0.28);
    --vetro-campo-focus:    rgba(8, 15, 30, 0.42);
    --vetro-campo-bordo:    rgba(226, 238, 255, 0.26);
    --vetro-autofill:       #14263f;
    --vetro-testo:          #f2f6fb;
    --vetro-etichetta:      #cddcee;
    --vetro-testo-sec:      #9db4d1;
    --vetro-testo-terz:     #7c9bc2;
    --vetro-placeholder:    #8ba2bd;
    --vetro-accento:        #60a5fa;
    /* Lo stesso accento come SFONDO (12%): il riempimento tenue dei
       tasti del vetro a riposo e al passaggio del mouse. Scritto a
       mano stava in due posti e sarebbe divergito dall'accento il
       giorno di un ritocco (18/09). */
    --vetro-accento-tenue:  rgba(96, 165, 250, 0.12);
    /* Semaforo degli avvisi sul vetro (16/09). I tre colori della guida
       (§ badge score) sono tarati su fondo BIANCO: qui il fondo e' scuro,
       quindi si usano le tinte chiare della stessa famiglia, se no il
       rosso sparisce dentro il blu notte. "Spento" non e' un quarto
       colore: e' il grigio del testo terziario, cioe' "non c'e'", che
       non deve somigliare a un guaio. */
    --vetro-ok:             #34d399;
    --vetro-attenzione:     #fbbf24;
    --vetro-allarme:        #f87171;
    /* I due gradini nati il 17/09 con la scala degli stati (guida_stile
       §2.3). Stessa logica dei tre di sopra: le tinte 400 di Tailwind,
       chiare, perche' le 500 del team su fondo notte si spengono.
       `--vetro-viola` oggi non lo produce nessuno nel portale - e'
       dichiarato perche' il gradino esiste e il giorno che arrivera' il
       primo caso non deve mancare il colore (Regola #24). */
    --vetro-arancione:      #fb923c;   /* Orange 400 */
    --vetro-viola:          #c084fc;   /* Purple 400 */
    /* Azzurro FISSO (06/10): l'elettrico del donut Alimentazione nel
       portale. Non e' l'accento, che cambia col Tema dell'utente. */
    --vetro-azzurro:        #38bdf8;   /* Sky 400 */
    /* Le bande del carburante nel portale (06/10): nero il diesel. Fisso
       anche lui: non segue il Tema. */
    --vetro-nero:           #0b0f17;
}

/* ==============================================================================
   0. OVERRIDES TEMA SCURO (DARK MODE) NATIVO (Bootstrap 5.3)
   ============================================================================== */
[data-bs-theme="dark"] {
    /* Desktop Dark Overrides */
    --color-bg-light: #0f172a; /* Slate 900 */
    --color-card-bg: #1e293b; /* Slate 800 */
    --color-text-main: #f8fafc;
    --color-dark: #f8fafc;
    
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

    /* Mobile Dark Overrides */
    --m-sfondo: #0f172a;
    --m-card: #1e293b;
    --m-testo: #f8fafc;
    --m-testo-sec: #94a3b8;
    --m-bordo: #334155;
    --m-ombra: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ==============================================================================
   0-bis. TEMA "VETRO" DI BRIA MOBILE (27/10, #387 restyling)
   Il secondo tema dell'app, scelto dall'utente (menu > Tema). Stessi token
   --m-* del tema Chiaro, valori del vetro dell'ingresso (--vetro-*): una
   regola per tutte le pagine, niente CSS doppio. Lo attiva
   <html data-tema="vetro"> (mobile/_base.html); il desktop non lo usa mai.
   ============================================================================== */
html[data-tema="vetro"] {
    --m-blu: #2563eb;                       /* fondi pieni: col bianco sopra regge */
    --m-blu-scuro: #1d4ed8;
    --m-link: #93c5fd;                      /* testi blu: chiari, su fondo notte */
    --m-testata: rgba(11, 18, 32, 0.55);    /* fasce: notte velata, non blu pieno */
    --m-sfondo: transparent;                /* il fondo e' il gradiente su <html> */
    --m-card: var(--vetro-pannello);
    --m-testo: var(--vetro-testo);
    --m-testo-sec: var(--vetro-etichetta);
    --m-testo-terz: var(--vetro-testo-sec);
    --m-bordo: rgba(226, 238, 255, 0.16);
    --m-bordo-forte: var(--vetro-campo-bordo);
    --m-ombra: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
    --m-superficie: var(--vetro-campo);
    --m-accento-tenue: rgba(96, 165, 250, 0.16);
    --m-accento-tenue-forte: rgba(96, 165, 250, 0.30);
    --m-ok: var(--vetro-ok);
    --m-ok-tenue: rgba(52, 211, 153, 0.16);
    --m-errore: var(--vetro-allarme);
    --m-errore-tenue: rgba(248, 113, 113, 0.16);
    --m-avviso: var(--vetro-attenzione);
    --m-avviso-forte: var(--vetro-arancione);
    --m-avviso-tenue: rgba(251, 191, 36, 0.14);
    --m-avviso-bordo: rgba(251, 191, 36, 0.40);
    --m-viola: var(--vetro-viola);
    --m-viola-tenue: rgba(192, 132, 252, 0.16);
    --m-toast: var(--vetro-nero);
    --m-velo: rgba(0, 0, 0, 0.55);
}

/* ==============================================================================
   1. REGOLAZIONE GENERALE & LAYOUT (DESKTOP)
   ============================================================================== */
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background-color: var(--color-bg-light);
    color: var(--color-text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Area Contenuto Principale */
.main-content {
    margin-left: var(--sidebar-width);
    padding: 2rem;
    padding-left: .5rem;               /* 12/10/2026: lati a un quarto (2rem -> .5rem), piu' spazio al centro (#348) */
    padding-right: .5rem;
    padding-top: calc(2rem + 50px);
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-width-collapsed);
}

.main-content.mc-fullwidth {
    margin-left: 0 !important;
}

/* ==============================================================================
   1b. MEDIA QUERIES COMPATIBILITÀ MONITOR (13" A 17" E OLTRE)
   ============================================================================== */
/* Schermi Laptop Standard (13" e 14" - Risoluzione larghezza fino a 1366px) */
@media (max-width: 1366px) {
    .main-content {
        padding: 1.25rem;
        padding-left: .3125rem;        /* 12/10/2026: lati a un quarto (#348) */
        padding-right: .3125rem;
        padding-top: calc(1.25rem + 50px);
    }
    .stat-card {
        padding: 1rem;
    }
    .stat-card .stat-value {
        font-size: 1.6rem; /* Riduce font per evitare overflow del box */
    }
    .card-header {
        padding: 0.75rem 1.25rem;
    }
}

/* Schermi Tablet (Risoluzione larghezza fino a 1024px) */
@media (max-width: 1024px) {
    /* Ottimizza flexbox delle griglie per evitare sballi */
    .riga-stretch {
        flex-direction: column;
    }
    .riga-stretch > div {
        width: 100% !important;
        margin-bottom: 1rem;
    }
}

/* ==============================================================================
   2. CARD & PANNELLI
   ============================================================================== */
.card {
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    background: var(--color-card-bg);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    padding: 1rem 1.5rem;
    font-weight: 600;
}

[data-bs-theme="dark"] .card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* La coppia etichetta/valore dentro una card (promossa qui il 25/09).
   Era definita due volte, uguale, dentro il <style> di `veicolo.html` e
   di `admin/utente_dettaglio.html`, col grigio scritto a mano: stessa
   cosa in due posti, e due posti divergono (guida sez. 10, Regola #18).
   Il grigio ora e' il token, quindi segue anche il tema scuro. */
.info-label {
    font-size: 0.8rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.info-value {
    font-size: 1.2rem;
    font-weight: 600;
}

/* Card affiancate con altezza uniforme (Compatibile Safari legacy) */
.riga-stretch {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.riga-stretch > div {
    display: -webkit-flex;
    display: flex;
}
.riga-stretch > div > div {
    width: 100%;
}
.riga-stretch > div > div > .card {
    height: 100%;
    margin-bottom: 0;
}

/* Card ad altezza fissa (es. seconda riga dettaglio) */
#riga2-compatta > div > .card {
    height: 160px !important;
    overflow: hidden;
    margin-bottom: 0 !important;
}

/* Card Statistica Rapida */
.stat-card {
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    background: var(--color-card-bg);
    box-shadow: var(--card-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}
.stat-card.clickable {
    cursor: pointer;
}
.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.stat-card .stat-label {
    color: var(--color-muted);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* ==============================================================================
   3. SCORE BADGES & TAGS
   ============================================================================== */
.score-badge, .score-badge-ns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffffff !important;
}

.score-badge-ns {
    background-color: var(--color-muted);
    font-size: 0.85rem;
}

/* Classi di punteggio unificate */
.score-A { background-color: var(--color-success); }
.score-B { background-color: var(--color-info); }
.score-C { background-color: var(--color-warning); }
.score-D { background-color: var(--color-danger); }
.score-E { background-color: var(--color-dark); }
.score-NS { background-color: var(--color-muted); }

/* Badge Ridotti (per tabelle e elenchi compatti) */
td .score-badge, td .score-badge-ns {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
}

/* ==============================================================================
   4. TABELLE INTERATTIVE (RESIZABLE & STICKY - Safari & Firefox Compat)
   ============================================================================== */
.table-resizable {
    table-layout: fixed;
    width: 100%;
    /* border-collapse separate e border-spacing 0 risolvono il bug dei bordi sticky su Firefox */
    border-collapse: separate;
    border-spacing: 0;
}

.table-resizable > :not(caption) > * > * {
    border-bottom: 1px solid rgba(222, 226, 230, 0.5);
}

[data-bs-theme="dark"] .table-resizable > :not(caption) > * > * {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.table-resizable thead th {
    border-bottom: 2px solid rgba(222, 226, 230, 0.8);
    font-weight: 600;
    color: var(--color-muted);
    background-color: var(--color-bg-light);
    position: relative;
}

.table-resizable td {
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Elemento di ridimensionamento (Resizer) */
.table-resizable th .resizer {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 8px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
}
.table-resizable th .resizer:hover {
    background: rgba(37, 99, 235, 0.2);
}
.table-resizable th .resizer.resizing {
    background: var(--primary-color);
}

/* --- Colonne Sticky (Supporta Safari con -webkit-sticky) --- */
/* Colonna Cliente (Sinistra) */
.col-cliente,
td.col-cliente,
#clienti-table thead th:first-child,
#clienti-table tbody td:first-child {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 2;
    background-color: var(--color-card-bg);
}
#clienti-table thead th:first-child {
    z-index: 4;
    background-color: var(--color-bg-light);
}
.col-cliente::after,
td.col-cliente::after,
#clienti-table thead th:first-child::after,
#clienti-table tbody td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6px;
    width: 6px;
    height: 100%;
    pointer-events: none;
    box-shadow: inset 4px 0 4px -4px rgba(0, 0, 0, 0.15);
}

/* Colonna Azioni (Destra) */
.col-azioni-header,
td.td-azioni {
    position: -webkit-sticky !important;
    position: sticky !important;
    right: 0 !important;
    z-index: 2;
    background-color: var(--color-card-bg);
}
.col-azioni-header {
    z-index: 4;
    background-color: var(--color-bg-light);
}
.col-azioni-header::before,
td.td-azioni::before {
    content: '';
    position: absolute;
    top: 0;
    left: -6px;
    width: 6px;
    height: 100%;
    pointer-events: none;
    box-shadow: inset -4px 0 4px -4px rgba(0, 0, 0, 0.15);
}

/* Hover righe con override per le celle sticky */
.table-resizable tbody tr:hover td {
    background-color: rgba(37, 99, 235, 0.05) !important;
}

/* --- Layout Azioni Tabella --- */
.col-azioni {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: center;
    align-items: center;
    gap: 4px;
}
.slot-icona {
    width: 24px;
    height: 24px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    flex-shrink: 0;
}
.slot-icona.slot-vuoto {
    display: none;
}
.slot-icona i {
    font-size: 1.1rem;
}

/* --- Colonne Collassabili --- */
th.collapsed, td.collapsed {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    text-align: center !important;
}
th.collapsed .col-content,
th.collapsed .col-toggle-btn,
th.collapsed .resizer,
td.collapsed .col-content {
    display: none !important;
}
th.collapsed .col-icon,
td.collapsed .col-icon {
    display: inline-block !important;
}
.col-toggle-btn {
    cursor: pointer;
    opacity: 0.4;
    margin-left: 4px;
    font-size: 0.75rem;
}
.col-toggle-btn:hover {
    opacity: 1;
    color: var(--color-danger);
}

/* ==============================================================================
   5. BUTTONS, FORMS & INPUTS
   ============================================================================= */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Evidenziazione Focus */
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Feedback Campi Form */
.nc-field-ok { color: var(--color-success) !important; }
.nc-field-error { color: var(--color-danger) !important; }
.nc-field-warn { color: var(--color-warning) !important; }

/* Preferiti stella */
.btn-star-ref {
    color: #ffc107;
    padding: 2px 6px;
    transition: color 0.15s, background-color 0.15s;
}
.btn-star-ref:hover {
    color: #e0a800;
    background-color: rgba(255, 193, 7, 0.15);
    border-radius: var(--border-radius-md);
}

/* LA STELLA DEL REFERENTE (08/10) - un posto solo per i suoi colori.
   Lo stato lo decide censimento_requisiti.stato_stella, l'icona la disegna
   la macro templates/stella_referente/_icona.html (scheda e ricerca).
   Uno stato nuovo = una riga qui + una voce in stato_stella. */
.stella-referente--normale { color: var(--bs-warning); }
.stella-referente--rossa   { color: var(--stato-rosso); }
/* 08/10 Guasto 7: andata su Zoho, ma senza nome o senza cognome */
.stella-referente--incompleta { color: var(--stato-arancione); }

/* ==============================================================================
   6. WIZARD STEP INDICATOR
   ============================================================================== */
.nc-step-indicator {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    white-space: nowrap;
    color: var(--color-muted);
}
.nc-step-indicator .nc-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(200, 200, 200, 0.5);
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.nc-step-indicator.attivo {
    color: var(--primary-color);
    font-weight: 600;
}
.nc-step-indicator.attivo .nc-step-num {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #ffffff;
}
.nc-step-indicator.completato {
    color: var(--color-success);
}
.nc-step-indicator.completato .nc-step-num {
    border-color: var(--color-success);
    background: var(--color-success);
    color: #ffffff;
}
.nc-step-separatore {
    color: rgba(200, 200, 200, 0.5);
    font-size: 0.75rem;
    padding: 0 2px;
    flex-shrink: 0;
}

/* Card Selezione Tipo nel Wizard */
.nc-tipo-card {
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    cursor: pointer;
    border: 1px solid rgba(220, 220, 220, 0.5) !important;
}
.nc-tipo-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
}
.nc-tipo-card.selezionato {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ==============================================================================
   7. UTENTI ONLINE, SAVING DOTS & PANNELLI
   ============================================================================== */
.presence-bar {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: var(--ingombro-destra, 0px);   /* 12/10/2026: si ferma alla colonna avvisi (#348) */
    height: 56px;
    padding: 8px 16px;
    background: var(--color-card-bg);
    border-top: 1px solid rgba(227, 230, 240, 0.5);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 16px;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
    z-index: 999;
    transition: left 0.3s ease, background-color 0.3s;
}

[data-bs-theme="dark"] .presence-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.sidebar-collapsed .presence-bar {
    left: var(--sidebar-width-collapsed);
}

.presence-avatars {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    gap: 0;
    flex: 1;
    overflow: visible;
    min-height: 36px;
}

.presence-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    margin-left: -6px;
    transition: transform 0.15s ease;
    cursor: default;
    border: 2px solid var(--color-card-bg);
    border-radius: 50%;
    background: var(--color-card-bg);
    overflow: hidden;
}

.presence-avatar:first-child {
    margin-left: 0;
}

.presence-avatar:hover {
    transform: translateY(-3px) scale(1.12);
    z-index: 10;
    overflow: visible;
}

.presence-overflow {
    margin-left: -6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e9ecef;
    color: #495057;
    border: 2px solid var(--color-card-bg);
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: default;
}

[data-bs-theme="dark"] .presence-overflow {
    background: #334155;
    color: #f1f5f9;
}

/* Indicatore Salvataggio Nota */
.nota-save-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: background-color 0.4s ease;
    flex-shrink: 0;
}
.nota-save-dot.dot-idle    { background-color: rgba(200, 200, 200, 0.5); }
.nota-save-dot.dot-unsaved { background-color: var(--color-warning); }
.nota-save-dot.dot-saving  { background-color: #ffc107; }
.nota-save-dot.dot-saved   { background-color: var(--color-success); }
.nota-save-dot.dot-error   { background-color: var(--color-danger); }

/* ==============================================================================
   8. COMPONENTI AVANZATI (TOAST, SKELETON, EMPTY STATES)
   ============================================================================== */

/* --- Toast Personalizzati --- */
.toast {
    background-color: var(--color-card-bg);
    color: var(--color-text-main);
    border: none;
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--color-muted);
}
.toast.toast-success { border-left-color: var(--color-success); }
.toast.toast-error { border-left-color: var(--color-danger); }
.toast.toast-warning { border-left-color: var(--color-warning); }
.toast.toast-info { border-left-color: var(--color-info); }

/* --- Skeleton Shimmer Loader --- */
.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.1) 25%,
        rgba(148, 163, 184, 0.25) 50%,
        rgba(148, 163, 184, 0.1) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-animation 1.5s infinite linear;
}

[data-bs-theme="dark"] .skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.04) 75%
    );
    background-size: 200% 100%;
}

@keyframes shimmer-animation {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    width: 100%;
    display: inline-block;
}
.skeleton-text.header { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 75%; }

.skeleton-image {
    height: 120px;
    border-radius: var(--border-radius-md);
    width: 100%;
    display: block;
}

.skeleton-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
}

/* --- Empty States --- */
.empty-state {
    padding: 3rem 1.5rem;
    border-radius: var(--border-radius-lg);
    background: var(--color-card-bg);
    border: 1px dashed rgba(148, 163, 184, 0.3);
}
.empty-state i {
    opacity: 0.6;
    color: var(--color-muted);
}

/* ==============================================================================
   9. COMPONENTI BRIA MOBILE (Replica e Unificazione)
   ============================================================================== */

/* Card Mobile */
.m-card {
    background: var(--m-card);
    border: 1px solid var(--m-bordo);
    border-radius: 14px;
    box-shadow: var(--m-ombra);
    padding: 16px;
    margin-bottom: 12px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.m-cli-nome {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px;
    color: var(--m-testo);
}

.m-kv {
    font-size: .92rem;
    margin: 4px 0;
    color: var(--m-testo);
}

.m-kv .k {
    color: var(--m-testo-sec);
}

.m-stato {
    display: inline-block;
    margin-top: 8px;
    font-size: .8rem;
    background: var(--color-bg-light);
    border-radius: 20px;
    padding: 4px 12px;
    color: var(--m-testo-sec);
}

/* Action Chips pastello Mobile */
.m-chip {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    padding: 7px 13px;
    border-radius: 22px;
    transition: filter 0.15s;
}
.m-chip:active {
    filter: brightness(0.92);
}
.m-chip-tel  { background-color: rgba(37, 99, 235, 0.12); color: #0d47a1; }
.m-chip-cel  { background-color: rgba(16, 185, 129, 0.12); color: #1b7a3d; }
.m-chip-mail { background-color: rgba(139, 92, 246, 0.12); color: #6a3fb0; }

[data-bs-theme="dark"] .m-chip-tel  { background-color: rgba(37, 99, 235, 0.25); color: #38bdf8; }
[data-bs-theme="dark"] .m-chip-cel  { background-color: rgba(16, 185, 129, 0.25); color: #4ade80; }
[data-bs-theme="dark"] .m-chip-mail { background-color: rgba(139, 92, 246, 0.25); color: #c084fc; }

/* Toast Mobile */
.m-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    background: #1b2330;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 22px;
    font-size: .9rem;
    z-index: 1050;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Collasso Mobile */
.m-collapse-arrow {
    color: var(--primary-color);
    font-size: 1.3rem;
    transition: transform .2s ease;
}
.m-collapse.open .m-collapse-arrow {
    transform: rotate(180deg);
}

/* ============================================================
   Pulsanti: outline a riposo con testo scuro, pieni all'hover
   (guida di stile §3.7 — regola globale riusabile, 2026-07-07)
   16/10/2026: il bianco SOLO dove Bootstrap riempie lo sfondo (hover,
   active): sul :focus dopo un click lo sfondo resta chiaro e il testo
   bianco spariva ("i tasti restano bianchi", Michele).
   ============================================================ */
.btn-outline-primary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-secondary {
    color: var(--color-text-main);
}
.btn-outline-primary:hover, .btn-outline-primary:active { color: #fff; }
.btn-outline-success:hover, .btn-outline-success:active { color: #fff; }
.btn-outline-danger:hover,  .btn-outline-danger:active  { color: #fff; }
.btn-outline-warning:hover, .btn-outline-warning:active { color: var(--color-dark); }
.btn-outline-secondary:hover, .btn-outline-secondary:active { color: #fff; }


/* ==============================================================================
   LA SCALA DEGLI STATI - le sei classi (guida di stile §2.3, 2026-09-17)
   ==============================================================================
   Fonte della REGOLA: app/scala_stati.py. `classe_css('arancione')` produce
   `stato--arancione`: il nome del gradino e' identico in Python, nel token e
   nella classe, cosi' il collaudo puo' leggere l'HTML reso di OGNI porta e
   dire che gradino e' senza tradurre niente (Regola #32 punto 4).

   COME E' FATTO, E PERCHE' COSI'
   Una classe `.stato--rosso` che scrivesse direttamente `color: rosso` andrebbe
   bene per un pallino e sarebbe inservibile per una pastiglia, che il colore lo
   vuole nello SFONDO. Con due famiglie di classi, un giorno divergerebbero.
   Quindi il gradino non dipinge niente: dichiara **di che colore si sta
   parlando**, in tre variabili locali. A dipingere sono le FORME, e ogni forma
   pesca dalla variabile che le serve. Un gradino, tante forme, un posto solo.

       <span class="stato-punto stato--arancione" title="..."></span>
       <span class="stato-pastiglia stato--rosso">PA</span>
       <i class="bi bi-file-earmark stato-icona stato--viola"></i>

   E' anche cio' che permette a una porta col vestito diverso di rivestire la
   scala senza toccare ne' il modulo ne' l'HTML: il Portale Clienti ridefinisce
   i token dentro `.portale-body` e le stesse classi si accendono coi colori del
   vetro (Regola #32 punto 3 - il modulo dichiara lo STATO, non l'aspetto).
   ============================================================================== */

/* --- I SEI GRADINI. Non dipingono: dichiarano. --- */
.stato--grigio    { --stato-tinta: var(--stato-grigio);
                    --stato-fondo: var(--stato-grigio-tenue);
                    --stato-scritta: var(--stato-grigio-forte); }
.stato--verde     { --stato-tinta: var(--stato-verde);
                    --stato-fondo: var(--stato-verde-tenue);
                    --stato-scritta: var(--stato-verde-forte); }
.stato--giallo    { --stato-tinta: var(--stato-giallo);
                    --stato-fondo: var(--stato-giallo-tenue);
                    --stato-scritta: var(--stato-giallo-forte); }
.stato--arancione { --stato-tinta: var(--stato-arancione);
                    --stato-fondo: var(--stato-arancione-tenue);
                    --stato-scritta: var(--stato-arancione-forte); }
.stato--rosso     { --stato-tinta: var(--stato-rosso);
                    --stato-fondo: var(--stato-rosso-tenue);
                    --stato-scritta: var(--stato-rosso-forte); }
.stato--viola     { --stato-tinta: var(--stato-viola);
                    --stato-fondo: var(--stato-viola-tenue);
                    --stato-scritta: var(--stato-viola-forte); }

/* --- LE FORME ---------------------------------------------------------------
   Il ripiego di ogni `var()` e' il GRIGIO, non il verde: una forma usata senza
   gradino non deve poter dire "va tutto bene" su una cosa che nessuno ha
   guardato (Regola #24 - distinguere i due zeri). */

/* IL PUNTO: il pallino di una colonna, senza scritta dentro. Tiene il suo
   posto anche da spento, se no le colonne si disallineano di riga in riga. */
.stato-punto {
    display: inline-block;
    width: .7rem; height: .7rem;
    border-radius: 50%;
    -webkit-flex-shrink: 0; flex-shrink: 0;
    background: var(--stato-tinta, var(--stato-grigio));
    vertical-align: middle;
}

/* L'ICONA: quando il gradino veste un `<i class="bi bi-*">` gia' esistente.
   Tocca solo il colore e non la dimensione: l'icona resta quella che era. */
.stato-icona { color: var(--stato-tinta, var(--stato-grigio)); }

/* IL TESTO: quando il gradino veste un valore gia' scritto - la data in un
   campo, un numero in una cella - senza aggiungere niente intorno.
   Nata il 17/09 per la data di un documento SCADUTO, che dev'essere viola
   ("BRIA non puo' risolverlo da sola": una patente scaduta si rinnova
   fuori di qui). Prima quel campo usava `text-danger` scritto a mano nel
   JS, cioe' un colore deciso sul momento invece di un gradino - §9.
   Il grassetto e' leggero apposta: dev'essere una data che si nota, non
   un allarme che grida in mezzo a un modulo da compilare. */
.stato-testo {
    color: var(--stato-tinta, var(--stato-grigio));
    font-weight: 600;
}
/* Vale anche quando il valore sta dentro un campo disabilitato: Bootstrap
   sbiadisce il testo dei `:disabled`, e una data viola sbiadita non si
   legge piu' come viola. */
input.stato-testo:disabled, input.stato-testo[readonly] {
    color: var(--stato-tinta, var(--stato-grigio));
    -webkit-text-fill-color: var(--stato-tinta, var(--stato-grigio));
    opacity: 1;
}

/* LA PASTIGLIA: ha una scritta dentro (una sigla, un numero di giorni), quindi
   NON usa il colore pieno - vedi la nota sui tre toni nel `:root`. Sfondo
   tenue, scritta forte, cornice della stessa famiglia. */
.stato-pastiglia {
    display: inline-block;
    padding: .12rem .4rem;
    border-radius: var(--border-radius-md);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    background: var(--stato-fondo, var(--stato-grigio-tenue));
    color: var(--stato-scritta, var(--stato-grigio-forte));
    border: 1px solid var(--stato-tinta, var(--stato-grigio));
}

/* LA FILA DI SLOT: il contenitore che tiene in riga piu' gradini che parlano
   della stessa persona (patente, codice fiscale, veicolo...), ognuno nel suo
   posto FISSO.

   Perche' gli slot e non semplicemente delle icone in fila: se un'icona
   comparisse solo quando ha qualcosa da dire, le altre scorrerebbero di
   lato e la stessa informazione starebbe in una colonna diversa a ogni
   riga. Con lo slot il posto e' sempre occupato - vuoto o pieno - e
   l'occhio impara "il primo e' la patente" una volta sola.

   NATA NEL PORTALE, PORTATA QUI IL 17/09 (passo 4 della scala).
   Era `.portale-slot` / `.portale-slot-fila` dentro `templates/portale/
   _styles.html`: finche' l'ha usata solo il portale andava bene, ma la
   colonna Note della lista referenti del TEAM deve avere lo stesso
   connettore (chiesto da Michele) - e una stanza non importa il foglio di
   un'altra stanza per riusarne una misura (Regola #18: una capacita', un
   posto solo). Qui e' di tutta BRIA, come `.stato-icona`.

   Il colore NON si dichiara qui: lo slot e' un contenitore, il gradino sta
   sull'elemento dentro (`.stato-icona stato--<nome>`). Cosi' il portale,
   che ridefinisce i token nel proprio corpo, continua a vestirli col vetro
   senza che questo file sappia niente del vetro (Regola #32 punto 3). */
.stato-slot-fila {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    gap: 0;
}
.stato-slot {
    width: 1.6rem; height: 1.6rem;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    -webkit-flex-shrink: 0; flex-shrink: 0;
    font-size: .95rem;
}
/* Uno slot che deve tenere icona + numero (o icona + sigla) e' l'unico che
   puo' crescere, e cresce di una misura dichiarata, non a seconda di cosa
   ci finisce dentro. */
.stato-slot--largo { width: 3.4rem; }

/* IL GRIGIO SI FA DA PARTE. Non e' un gradino piu' debole degli altri: e' "la
   domanda non si pone". Deve vedersi che c'e' - il posto resta occupato - ma
   non deve chiamare l'occhio come fa un colore. */
.stato-punto.stato--grigio     { opacity: .45; }
.stato-pastiglia.stato--grigio { opacity: .75; }

/* CHI PUO' ESSERE PREMUTO SI COMPORTA DA TASTO, MA NON CAMBIA COLORE: il
   colore e' l'informazione, e un hover che lo sposta la falsa. */
a.stato-icona, a.stato-punto, a.stato-pastiglia { text-decoration: none; }
a.stato-icona:hover, a.stato-punto:hover, a.stato-pastiglia:hover {
    -webkit-filter: brightness(1.12); filter: brightness(1.12);
}
button.stato-icona, button.stato-punto, button.stato-pastiglia {
    background-color: transparent; border: 0; padding: 0;
    font: inherit; line-height: 1; cursor: pointer;
}
button.stato-pastiglia {
    padding: .12rem .4rem;
    background: var(--stato-fondo, var(--stato-grigio-tenue));
    border: 1px solid var(--stato-tinta, var(--stato-grigio));
}
.stato-punto:focus-visible, .stato-icona:focus-visible,
.stato-pastiglia:focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 2px;
}


/* ===================================================================
   IL CONFRONTO DENTRO LA FINESTRA UNICA (18/09)
   Markup: componenti/_modal_conferma.html - "ora c'e' X / diventerebbe
   Y". Due numeri in colonna si leggono a colpo d'occhio; dentro una
   frase si contano le cifre. Sta nel globale e non in un _styles.html
   perche' lo usano due stanze: BRIA interno e il Portale Clienti
   (guida_stile §10). Nessun colore a mano: solo token (§9).
   =================================================================== */
.bria-confronto {
    margin-top: .75rem;
    padding: .5rem .75rem;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-md);
}
.bria-confronto-titolo {
    font-size: .8rem;
    color: var(--color-muted);
    margin-bottom: .25rem;
}
.bria-confronto-tab { width: 100%; font-size: .86rem; }
.bria-confronto-tab td { padding: .15rem 0; }
.bria-confronto-tab td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* === TASTI DELLA SCALA C-P (guida §2, §3.7, §4.5, §6.4, §10, §11) ======
   Dodici pastiglie filtro sulla pagina clienti.

   §3.7 - A RIPOSO SONO VUOTI, PIENI AL PASSAGGIO. Il colore della casella
   vive nel BORDO, non nello sfondo: cosi' la scala cromatica dal nero al
   verde si legge lo stesso, ma dodici pastiglie piene non gridano tutte
   insieme sopra la lista clienti. Hover e stato attivo riempiono.

   §11 - Il conteggio e' il dato che si va a leggere: niente opacita', e il
   focus resta visibile perche' sono link a tutti gli effetti.

   §4.5 - Il nome si tronca e si legge intero nel `title`: e' il contenuto
   ad adattarsi al riquadro, mai il contrario. I nomi delle caselle si
   cambiano dalla plancia e nessuno sa quanto saranno lunghi domani.

   Quale classe porti ogni casella lo dice il DB (`scala_stati_cp.colore`):
   qui ci sono i colori, non le caselle. ================================ */
.cp-tasti {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    gap: .35rem;
}

.cp-tasto {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    gap: .35rem;
    max-width: 15rem;
    min-width: 0;
    padding: .2rem .55rem;
    border-radius: var(--border-radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-main);
    font-size: .8rem;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease,
                box-shadow .12s ease;
}

.cp-tasto:hover { text-decoration: none; }

/* §11 - focus visibile, con l'alone di §3.3. */
.cp-tasto:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.cp-tasto .cp-numero { font-weight: 700; -webkit-flex-shrink: 0; flex-shrink: 0; }

/* §4.5 - il nome si tronca, il title lo mostra intero. */
.cp-tasto .cp-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* §11 - il conteggio si legge: nessuna opacita'. */
.cp-tasto .cp-conteggio { font-weight: 600; -webkit-flex-shrink: 0; flex-shrink: 0; }

/* Il tasto "Tutti": non e' una casella, quindi non prende nessun colore
   della tavolozza - sarebbe un tredicesimo stato che non esiste. */
.cp-tasto-tutti { border-color: var(--color-muted); }

.cp-tasto-tutti:hover,
.cp-tasto-tutti.attivo {
    background: var(--color-muted);
    border-color: var(--color-muted);
    color: #ffffff;
}

/* Un colore per riga (§3.7): bordo a riposo, pieno all'hover e da attivo. */
.cp-c-nero { border-color: var(--cp-nero); }
.cp-c-nero:hover, .cp-c-nero.attivo { background: var(--cp-nero); border-color: var(--cp-nero-forte); color: #ffffff; }
.cp-c-grigio-chiaro { border-color: var(--cp-grigio-chiaro); }
.cp-c-grigio-chiaro:hover, .cp-c-grigio-chiaro.attivo { background: var(--cp-grigio-chiaro); border-color: var(--cp-grigio-chiaro-forte); color: #ffffff; }
.cp-c-grigio { border-color: var(--cp-grigio); }
.cp-c-grigio:hover, .cp-c-grigio.attivo { background: var(--cp-grigio); border-color: var(--cp-grigio-forte); color: #ffffff; }
.cp-c-ardesia { border-color: var(--cp-ardesia); }
.cp-c-ardesia:hover, .cp-c-ardesia.attivo { background: var(--cp-ardesia); border-color: var(--cp-ardesia-forte); color: #ffffff; }
.cp-c-lilla { border-color: var(--cp-lilla); }
.cp-c-lilla:hover, .cp-c-lilla.attivo { background: var(--cp-lilla); border-color: var(--cp-lilla-forte); color: #ffffff; }
.cp-c-viola { border-color: var(--cp-viola); }
.cp-c-viola:hover, .cp-c-viola.attivo { background: var(--cp-viola); border-color: var(--cp-viola-forte); color: #ffffff; }
.cp-c-indaco-chiaro { border-color: var(--cp-indaco-chiaro); }
.cp-c-indaco-chiaro:hover, .cp-c-indaco-chiaro.attivo { background: var(--cp-indaco-chiaro); border-color: var(--cp-indaco-chiaro-forte); color: #ffffff; }
.cp-c-indaco { border-color: var(--cp-indaco); }
.cp-c-indaco:hover, .cp-c-indaco.attivo { background: var(--cp-indaco); border-color: var(--cp-indaco-forte); color: #ffffff; }
.cp-c-cielo { border-color: var(--cp-cielo); }
.cp-c-cielo:hover, .cp-c-cielo.attivo { background: var(--cp-cielo); border-color: var(--cp-cielo-forte); color: #ffffff; }
.cp-c-blu { border-color: var(--cp-blu); }
.cp-c-blu:hover, .cp-c-blu.attivo { background: var(--cp-blu); border-color: var(--cp-blu-forte); color: #ffffff; }
.cp-c-ciano { border-color: var(--cp-ciano); }
.cp-c-ciano:hover, .cp-c-ciano.attivo { background: var(--cp-ciano); border-color: var(--cp-ciano-forte); color: #ffffff; }
.cp-c-verdeacqua { border-color: var(--cp-verdeacqua); }
.cp-c-verdeacqua:hover, .cp-c-verdeacqua.attivo { background: var(--cp-verdeacqua); border-color: var(--cp-verdeacqua-forte); color: #ffffff; }
.cp-c-smeraldo { border-color: var(--cp-smeraldo); }
.cp-c-smeraldo:hover, .cp-c-smeraldo.attivo { background: var(--cp-smeraldo); border-color: var(--cp-smeraldo-forte); color: #ffffff; }
.cp-c-verde { border-color: var(--cp-verde); }
.cp-c-verde:hover, .cp-c-verde.attivo { background: var(--cp-verde); border-color: var(--cp-verde-forte); color: #ffffff; }
.cp-c-ambra { border-color: var(--cp-ambra); }
.cp-c-ambra:hover, .cp-c-ambra.attivo { background: var(--cp-ambra); border-color: var(--cp-ambra-forte); color: #ffffff; }
.cp-c-rosa { border-color: var(--cp-rosa); }
.cp-c-rosa:hover, .cp-c-rosa.attivo { background: var(--cp-rosa); border-color: var(--cp-rosa-forte); color: #ffffff; }

/* I toni chiari della tavolozza vogliono testo scuro, se no il bianco su
   bianco non si legge (§11, stessa ragione dell'ambra in §3.7 punto 2). */
.cp-c-grigio-chiaro:hover, .cp-c-grigio-chiaro.attivo,
.cp-c-lilla:hover, .cp-c-lilla.attivo,
.cp-c-indaco-chiaro:hover, .cp-c-indaco-chiaro.attivo,
.cp-c-ambra:hover, .cp-c-ambra.attivo { color: var(--color-dark); }

/* La bandierina dell'ordine nel mese: non e' una casella, e' una cosa che
   si SOVRAPPONE - per questo la cornice e' tratteggiata e non piena. */
.cp-tasto-caldo { border-style: dashed; border-width: 2px; }

/* "I miei" non e' una casella: non prende un colore della tavolozza, prende
   il primario del programma (guida sez. 9). Cosi' si legge come un gesto di
   un'altra natura rispetto ai dodici tasti, che e' quello che e'. */
.cp-tasto-miei { border-color: var(--primary-color); }
.cp-tasto-miei:hover,
.cp-tasto-miei.attivo {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

/* "Mio Team" + casellina "Solo Miei" (29/09): due link attaccati che a
   vedersi fanno un tasto solo - stessa cornice, il bordo in comune sparisce.
   La casellina segue §3.7 (vuota a riposo, piena al passaggio e da
   spuntata) e §11 (l'icona cambia: quadrato vuoto / spuntato, non solo il
   colore). */
.cp-miei-gruppo {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.cp-miei-gruppo .cp-tasto-miei {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.cp-flag-solo {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 .4rem;
    border: 1px solid var(--primary-color);
    border-left-width: 0;
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    background: transparent;
    color: var(--primary-color);
    font-size: .8rem;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.cp-flag-solo:hover,
.cp-flag-solo.attivo {
    background: var(--primary-color);
    color: #ffffff;
    text-decoration: none;
}
.cp-flag-solo:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* §6.4 passo 5 - sotto soglia si compatta il denso. Doppia condizione: una
   finestra puo' dichiarare 1600px CSS su un monitor fisico da 1280. */
@media (max-width: 1366px), (max-device-width: 1366px) {
    .cp-tasti { gap: .25rem; }
    .cp-tasto {
        max-width: 11rem;
        padding: .15rem .4rem;
        font-size: .75rem;
    }
}

/* === CONTEGGI PER SPECIE IN TESTATA (F.11, guida sez. 10, sez. 11) ====== */
.cp-conti {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: baseline;
    align-items: baseline;
    gap: .9rem;
    font-size: .8rem;
}

.cp-conto { white-space: nowrap; color: var(--color-text-main); }
.cp-conto strong { font-weight: 700; }

/* La nota si', quella e' secondaria (sez. 11). */
.cp-conto-nota { color: var(--color-muted); font-size: .75rem; }

/* Un congelamento saltato non e' un dettaglio: si vede, e non solo dal
   colore - c'e' anche l'icona (sez. 11). */
.cp-conto-manca { color: var(--stato-arancione); font-weight: 600; }

@media (max-width: 1366px), (max-device-width: 1366px) {
    .cp-conti { gap: .6rem; font-size: .75rem; }
}
/* ==========================================================================
   SCALA C-P SULLA SCHEDA CLIENTE (28/09, passo 7)
   Progetto: documentazione/PROGETTO_REPORT_CLIENTI.md sez. 3.7-F, passo 7
   Satellite: templates/dettaglio/scala_cp/_riquadro.html

   Perche' sta nel globale e non in un `_styles.html` di pagina (guida sez.
   10): la barra della scala nascera' anche nella plancia (passo 11) e nelle
   viste del Report Lavori C-P. Una definizione, piu' chiamanti (#18).

   La pastiglia della casella NON ha stili suoi: riusa `.cp-tasto` +
   `.cp-c-<colore>` + `.attivo` dei tasti di /clienti, cosi' la stessa
   casella si presenta identica nelle due pagine. Qui si aggiunge soltanto
   cio' che sulla scheda c'e' e sulla lista no: la barra e la tendina.

   sez. 9 - nessun esadecimale: la tinta arriva dai token `--cp-*` della
   tavolozza, passando da una proprieta' custom cosi' la barra resta UNA
   sola regola e le sedici classi dicono solo QUALE colore.
   sez. 6.3 - prefissi -webkit- sulle proprieta' flex (Safari, #11).
   ========================================================================== */

/* La pastiglia e' un'etichetta, non un tasto: non si clicca. */
.cp-statico { cursor: default; }

.cp-scheda-titolo { white-space: nowrap; }

/* La percentuale e' il dato che si va a leggere: niente muted (sez. 11). */
.cp-scheda-perc {
    font-weight: 700;
    font-size: .8rem;
    color: var(--color-text-main);
}

/* F.25: il counter della riga 1 e' un dato da leggere (sez. 11), non muted. */
.cp-scheda-contatore {
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text-main);
    white-space: nowrap;
}

/* --- La barra ---------------------------------------------------------- */
.cp-barra { height: 10px; }
.cp-barra .progress-bar {
    background: var(--cp-barra-tinta, var(--primary-color));
}

.cp-b-nero          { --cp-barra-tinta: var(--cp-nero); }
.cp-b-grigio-chiaro { --cp-barra-tinta: var(--cp-grigio-chiaro); }
.cp-b-grigio        { --cp-barra-tinta: var(--cp-grigio); }
.cp-b-ardesia       { --cp-barra-tinta: var(--cp-ardesia); }
.cp-b-lilla         { --cp-barra-tinta: var(--cp-lilla); }
.cp-b-viola         { --cp-barra-tinta: var(--cp-viola); }
.cp-b-indaco-chiaro { --cp-barra-tinta: var(--cp-indaco-chiaro); }
.cp-b-indaco        { --cp-barra-tinta: var(--cp-indaco); }
.cp-b-cielo         { --cp-barra-tinta: var(--cp-cielo); }
.cp-b-blu           { --cp-barra-tinta: var(--cp-blu); }
.cp-b-ciano         { --cp-barra-tinta: var(--cp-ciano); }
.cp-b-verdeacqua    { --cp-barra-tinta: var(--cp-verdeacqua); }
.cp-b-smeraldo      { --cp-barra-tinta: var(--cp-smeraldo); }
.cp-b-verde         { --cp-barra-tinta: var(--cp-verde); }
.cp-b-ambra         { --cp-barra-tinta: var(--cp-ambra); }
.cp-b-rosa          { --cp-barra-tinta: var(--cp-rosa); }

/* --- La tendina e il tasto Sposta -------------------------------------- */
.cp-scheda-form {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    gap: .5rem;
}

/* Larghezza sua, non il 100% della card: accanto ci sta il tasto. */
.cp-scheda-tendina {
    width: auto;
    min-width: 15rem;
    max-width: 100%;
}

.cp-scheda-motivo { color: var(--color-muted); }

/* Passo 8: il motivo accanto alla tendina (obbligatorio solo per l'11). */
.cp-scheda-motivo-campo {
    width: auto;
    min-width: 16rem;
    max-width: 100%;
    -webkit-flex: 1 1 16rem;
    flex: 1 1 16rem;
}

/* sez. 6.4 passo 5 - sotto 1366px la tendina si stringe invece di mandare
   il tasto a capo da sola. */
@media (max-width: 1366px), (max-device-width: 1366px) {
    .cp-scheda-tendina { min-width: 11rem; font-size: .8rem; }
    .cp-scheda-perc { font-size: .75rem; }
    .cp-scheda-contatore { font-size: .75rem; }
}

/* === CELLA DELLA SCALA SCP (PROGETTO_SCALA_SCP_GRAFICA F3, 02/10) ==========
   Una cella sola per la pagina Clienti e per la plancia (guida sez. 10, #32).
   Primo piano = il cerchio: .scp-pr-<colore> (valori di scala_cp.COLORI).
   Secondo piano = lo sfondo: .scp-<valore> (valori di scala_cp_aspetto.SFONDI,
   prefisso scp- per non urtare le .sf-* del menu laterale).
   Generato da uno script: il testo sugli sfondi pieni e bianco solo se il
   contrasto misurato sul token e almeno 3 (guida sez. 11). */
.scp-cella { display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: column; flex-direction: column;
    -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
    min-width: 64px; padding: 5px 7px; border: 1px solid transparent; border-radius: var(--border-radius-md);
    line-height: 1.1; color: var(--color-text-main); text-decoration: none; }
a.scp-cella:hover { text-decoration: none; }
.scp-cella:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-color); }
.scp-cella-cerchio { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    color: #ffffff; font-weight: 700; font-size: 12px; margin-bottom: 3px; }
.scp-cella-conteggio { font-weight: 600; font-size: 12px; }
.scp-cella.scp-cella-mini { min-width: 40px; padding: 3px 5px; }
.scp-cella.scp-cella-mini .scp-cella-cerchio { width: 20px; height: 20px; font-size: 11px; margin: 0; }
.scp-cella.scp-cliccabile { cursor: pointer; }
a.scp-cella:hover, .scp-cella.scp-cliccabile:hover, .scp-cella.attivo { box-shadow: 0 0 0 3px var(--primary-color); }
a.scp-cella:hover .scp-cella-cerchio, .scp-cella.attivo .scp-cella-cerchio { box-shadow: 0 0 0 2px #ffffff; }
.scp-pr-nero .scp-cella-cerchio { background: var(--cp-nero); }
.scp-pr-grigio-chiaro .scp-cella-cerchio { background: var(--cp-grigio-chiaro-forte); }
.scp-pr-grigio .scp-cella-cerchio { background: var(--cp-grigio); }
.scp-pr-ardesia .scp-cella-cerchio { background: var(--cp-ardesia); }
.scp-pr-lilla .scp-cella-cerchio { background: var(--cp-lilla-forte); }
.scp-pr-viola .scp-cella-cerchio { background: var(--cp-viola); }
.scp-pr-indaco-chiaro .scp-cella-cerchio { background: var(--cp-indaco-chiaro-forte); }
.scp-pr-indaco .scp-cella-cerchio { background: var(--cp-indaco); }
.scp-pr-cielo .scp-cella-cerchio { background: var(--cp-cielo); }
.scp-pr-blu .scp-cella-cerchio { background: var(--cp-blu); }
.scp-pr-ciano .scp-cella-cerchio { background: var(--cp-ciano); }
.scp-pr-verdeacqua .scp-cella-cerchio { background: var(--cp-verdeacqua); }
.scp-pr-smeraldo .scp-cella-cerchio { background: var(--cp-smeraldo); }
.scp-pr-verde .scp-cella-cerchio { background: var(--cp-verde); }
.scp-pr-ambra .scp-cella-cerchio { background: var(--cp-ambra-forte); }
.scp-pr-rosa .scp-cella-cerchio { background: var(--cp-rosa); }
.scp-sf-bianco { background: #ffffff; border-color: var(--cp-grigio-chiaro); }
.scp-sf-tratteggio-verde { background: repeating-linear-gradient(45deg, var(--cp-smeraldo-tenue) 0 5px, #ffffff 5px 10px);
    border-color: var(--cp-smeraldo); }
.scp-sf-nero-tenue { background: var(--cp-nero-tenue); border-color: var(--cp-nero); }
.scp-sf-nero { background: var(--cp-nero); color: #ffffff; }
.scp-sf-nero-forte { background: var(--cp-nero-forte); color: #ffffff; }
.scp-sf-grigio-chiaro-tenue { background: var(--cp-grigio-chiaro-tenue); border-color: var(--cp-grigio-chiaro); }
.scp-sf-grigio-chiaro { background: var(--cp-grigio-chiaro); color: var(--color-text-main); }
.scp-sf-grigio-chiaro-forte { background: var(--cp-grigio-chiaro-forte); color: #ffffff; }
.scp-sf-grigio-tenue { background: var(--cp-grigio-tenue); border-color: var(--cp-grigio); }
.scp-sf-grigio { background: var(--cp-grigio); color: var(--color-text-main); }
.scp-sf-grigio-forte { background: var(--cp-grigio-forte); color: #ffffff; }
.scp-sf-ardesia-tenue { background: var(--cp-ardesia-tenue); border-color: var(--cp-ardesia); }
.scp-sf-ardesia { background: var(--cp-ardesia); color: #ffffff; }
.scp-sf-ardesia-forte { background: var(--cp-ardesia-forte); color: #ffffff; }
.scp-sf-lilla-tenue { background: var(--cp-lilla-tenue); border-color: var(--cp-lilla); }
.scp-sf-lilla { background: var(--cp-lilla); color: var(--color-text-main); }
.scp-sf-lilla-forte { background: var(--cp-lilla-forte); color: #ffffff; }
.scp-sf-viola-tenue { background: var(--cp-viola-tenue); border-color: var(--cp-viola); }
.scp-sf-viola { background: var(--cp-viola); color: #ffffff; }
.scp-sf-viola-forte { background: var(--cp-viola-forte); color: #ffffff; }
.scp-sf-indaco-chiaro-tenue { background: var(--cp-indaco-chiaro-tenue); border-color: var(--cp-indaco-chiaro); }
.scp-sf-indaco-chiaro { background: var(--cp-indaco-chiaro); color: var(--color-text-main); }
.scp-sf-indaco-chiaro-forte { background: var(--cp-indaco-chiaro-forte); color: #ffffff; }
.scp-sf-indaco-tenue { background: var(--cp-indaco-tenue); border-color: var(--cp-indaco); }
.scp-sf-indaco { background: var(--cp-indaco); color: #ffffff; }
.scp-sf-indaco-forte { background: var(--cp-indaco-forte); color: #ffffff; }
.scp-sf-cielo-tenue { background: var(--cp-cielo-tenue); border-color: var(--cp-cielo); }
.scp-sf-cielo { background: var(--cp-cielo); color: var(--color-text-main); }
.scp-sf-cielo-forte { background: var(--cp-cielo-forte); color: #ffffff; }
.scp-sf-blu-tenue { background: var(--cp-blu-tenue); border-color: var(--cp-blu); }
.scp-sf-blu { background: var(--cp-blu); color: #ffffff; }
.scp-sf-blu-forte { background: var(--cp-blu-forte); color: #ffffff; }
.scp-sf-ciano-tenue { background: var(--cp-ciano-tenue); border-color: var(--cp-ciano); }
.scp-sf-ciano { background: var(--cp-ciano); color: var(--color-text-main); }
.scp-sf-ciano-forte { background: var(--cp-ciano-forte); color: #ffffff; }
.scp-sf-verdeacqua-tenue { background: var(--cp-verdeacqua-tenue); border-color: var(--cp-verdeacqua); }
.scp-sf-verdeacqua { background: var(--cp-verdeacqua); color: var(--color-text-main); }
.scp-sf-verdeacqua-forte { background: var(--cp-verdeacqua-forte); color: #ffffff; }
.scp-sf-smeraldo-tenue { background: var(--cp-smeraldo-tenue); border-color: var(--cp-smeraldo); }
.scp-sf-smeraldo { background: var(--cp-smeraldo); color: var(--color-text-main); }
.scp-sf-smeraldo-forte { background: var(--cp-smeraldo-forte); color: #ffffff; }
.scp-sf-verde-tenue { background: var(--cp-verde-tenue); border-color: var(--cp-verde); }
.scp-sf-verde { background: var(--cp-verde); color: var(--color-text-main); }
.scp-sf-verde-forte { background: var(--cp-verde-forte); color: #ffffff; }
.scp-sf-ambra-tenue { background: var(--cp-ambra-tenue); border-color: var(--cp-ambra); }
.scp-sf-ambra { background: var(--cp-ambra); color: var(--color-text-main); }
.scp-sf-ambra-forte { background: var(--cp-ambra-forte); color: #ffffff; }
.scp-sf-rosa-tenue { background: var(--cp-rosa-tenue); border-color: var(--cp-rosa); }
.scp-sf-rosa { background: var(--cp-rosa); color: #ffffff; }
.scp-sf-rosa-forte { background: var(--cp-rosa-forte); color: #ffffff; }

/* ---- CORNICE DEL GRUPPO DELLA SCALA SCP (1.5.0, 02/10 - PROGETTO_SCALA_SCP_GRAFICA) ----
   Facoltativa, una per gruppo, colore scelto dalla plancia (scala_cp_gruppi.cornice).
   Il posto c'e' sempre (bordo trasparente): accenderla non sposta niente.
   Stesso tono del cerchio .scp-pr-* (i toni chiari il forte, guida 11).
   La usano la pagina Clienti (.scpb-gruppo) e la plancia (.scc-righe). */
.scp-cornice { border: 2px solid transparent; border-radius: var(--border-radius-md); padding: .2rem .45rem .45rem; }
.scp-cornice.scp-co-nero { border-color: var(--cp-nero); }
.scp-cornice.scp-co-grigio-chiaro { border-color: var(--cp-grigio-chiaro-forte); }
.scp-cornice.scp-co-grigio { border-color: var(--cp-grigio); }
.scp-cornice.scp-co-ardesia { border-color: var(--cp-ardesia); }
.scp-cornice.scp-co-lilla { border-color: var(--cp-lilla-forte); }
.scp-cornice.scp-co-viola { border-color: var(--cp-viola); }
.scp-cornice.scp-co-indaco-chiaro { border-color: var(--cp-indaco-chiaro-forte); }
.scp-cornice.scp-co-indaco { border-color: var(--cp-indaco); }
.scp-cornice.scp-co-cielo { border-color: var(--cp-cielo); }
.scp-cornice.scp-co-blu { border-color: var(--cp-blu); }
.scp-cornice.scp-co-ciano { border-color: var(--cp-ciano); }
.scp-cornice.scp-co-verdeacqua { border-color: var(--cp-verdeacqua); }
.scp-cornice.scp-co-smeraldo { border-color: var(--cp-smeraldo); }
.scp-cornice.scp-co-verde { border-color: var(--cp-verde); }
.scp-cornice.scp-co-ambra { border-color: var(--cp-ambra-forte); }
.scp-cornice.scp-co-rosa { border-color: var(--cp-rosa); }
/* Il pallino accanto alla tendina della plancia: vuoto = nessuna cornice. */
.scp-pallino { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px dashed var(--color-muted); -webkit-flex-shrink: 0; flex-shrink: 0; }
.scp-pallino.scp-co-nero { background: var(--cp-nero); border: 1px solid var(--cp-nero); }
.scp-pallino.scp-co-grigio-chiaro { background: var(--cp-grigio-chiaro-forte); border: 1px solid var(--cp-grigio-chiaro-forte); }
.scp-pallino.scp-co-grigio { background: var(--cp-grigio); border: 1px solid var(--cp-grigio); }
.scp-pallino.scp-co-ardesia { background: var(--cp-ardesia); border: 1px solid var(--cp-ardesia); }
.scp-pallino.scp-co-lilla { background: var(--cp-lilla-forte); border: 1px solid var(--cp-lilla-forte); }
.scp-pallino.scp-co-viola { background: var(--cp-viola); border: 1px solid var(--cp-viola); }
.scp-pallino.scp-co-indaco-chiaro { background: var(--cp-indaco-chiaro-forte); border: 1px solid var(--cp-indaco-chiaro-forte); }
.scp-pallino.scp-co-indaco { background: var(--cp-indaco); border: 1px solid var(--cp-indaco); }
.scp-pallino.scp-co-cielo { background: var(--cp-cielo); border: 1px solid var(--cp-cielo); }
.scp-pallino.scp-co-blu { background: var(--cp-blu); border: 1px solid var(--cp-blu); }
.scp-pallino.scp-co-ciano { background: var(--cp-ciano); border: 1px solid var(--cp-ciano); }
.scp-pallino.scp-co-verdeacqua { background: var(--cp-verdeacqua); border: 1px solid var(--cp-verdeacqua); }
.scp-pallino.scp-co-smeraldo { background: var(--cp-smeraldo); border: 1px solid var(--cp-smeraldo); }
.scp-pallino.scp-co-verde { background: var(--cp-verde); border: 1px solid var(--cp-verde); }
.scp-pallino.scp-co-ambra { background: var(--cp-ambra-forte); border: 1px solid var(--cp-ambra-forte); }
.scp-pallino.scp-co-rosa { background: var(--cp-rosa); border: 1px solid var(--cp-rosa); }