/* ===========================================================================
   DESK — IL DESIGN SYSTEM (istruzioni di sviluppo §12, PDF pag. 6)
   ---------------------------------------------------------------------------
   Un file solo di token, poi le regole che PULSAR non sa dire (altezze in
   `calc`, colonne che scorrono ognuna per sé, il filo del sottomenu).

   ⚠️ Viene DOPO app.css: ridichiara i ruoli di PULSAR (`--n-*`) sui token di
   Desk, così anche le pagine ereditate (utenti, impostazioni, canali, rubrica,
   media) prendono i colori nuovi senza toccarle una per una.

   Il tema sta sulla classe del <body> (`theme-light|dark|auto`, la mette la
   scatola): chiaro su `.theme-light` e `.theme-auto`, scuro su `.theme-dark` e su
   `.theme-auto` quando il sistema è scuro.
   =========================================================================== */

.theme-light, .theme-auto {
    --d-bg: #F3F4F7;
    --d-surface: #FFFFFF;
    --d-surface-raised: #FFFFFF;
    --d-surface-sunken: #EDEFF3;
    --d-surface-hover: #F0F2F6;
    --d-surface-selected: #E4EAFB;
    --d-border: #DADEE5;
    --d-border-strong: #7C8596;
    --d-text: #1B1F27;
    --d-text-2: #3D4451;
    --d-text-3: #5A6270;
    --d-text-disabled: #9AA1AD;
    --d-primary: #2F4FC4;
    --d-primary-hover: #2643AD;
    --d-primary-pressed: #1F3893;
    --d-primary-tint: #E4EAFB;
    --d-on-primary: #FFFFFF;
    --d-secondary: #0B6E8A;
    --d-secondary-tint: #DFF0F5;
    --d-success: #1E7A44; --d-success-tint: #E2F2E8;
    --d-warning: #94600A; --d-warning-tint: #FBF0DA;
    --d-error: #C62828;   --d-error-tint: #FCE6E6;
    --d-info: #1863A6;    --d-info-tint: #E1EEF9;
    --d-bubble-customer: #FFFFFF;
    --d-bubble-operator: #E4EAFB;
    --d-bubble-scheduled: #EBF0FE;
    --d-note-bg: #FFF5D1;
    --d-note-ink: #5C4A0F;
    --d-note-border: #E8D48A;
    --d-highlight: #FFE8A3;
    --d-st-nuovo: #1D4ED8;      --d-st-nuovo-tint: #E3EAFD;
    --d-st-preso: #6D28D9;      --d-st-preso-tint: #EFE7FC;
    --d-st-lavorazione: #B4400B; --d-st-lavorazione-tint: #FCEBE1;
    --d-st-attesa: #8A5A00;     --d-st-attesa-tint: #FBF1D9;
    --d-st-risolto: #13703A;    --d-st-risolto-tint: #E1F3E7;
    --d-st-chiuso: #4B5563;     --d-st-chiuso-tint: #ECEEF1;
    --d-pr-urgente: #B91C1C;    --d-pr-urgente-tint: #FDE5E5;
    --d-pr-alta: #B4400B;
    --d-pr-normale: #3D4451;
    --d-pr-bassa: #5A6270;
    --d-av-1-bg: #E4EAFB; --d-av-1-fg: #2F4FC4;
    --d-av-2-bg: #FCE7DA; --d-av-2-fg: #A6400F;
    --d-av-3-bg: #DDF1E4; --d-av-3-fg: #1E7A44;
    --d-av-4-bg: #EEE5FB; --d-av-4-fg: #6D28D9;
    --d-av-5-bg: #FBF0D2; --d-av-5-fg: #8A5A00;
    --d-av-6-bg: #DCEFF4; --d-av-6-fg: #0B6E8A;
    --d-shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --d-shadow-2: 0 4px 12px rgba(16, 24, 40, .10), 0 2px 4px rgba(16, 24, 40, .06);
    --d-shadow-3: 0 12px 32px rgba(16, 24, 40, .16), 0 4px 8px rgba(16, 24, 40, .08);
}

.theme-dark {
    --d-bg: #0F1217;
    --d-surface: #171B22;
    --d-surface-raised: #1E232C;
    --d-surface-sunken: #12151B;
    --d-surface-hover: #1F242D;
    --d-surface-selected: #1F2B4D;
    --d-border: #2A303A;
    --d-border-strong: #6B7484;
    --d-text: #E6E9EF;
    --d-text-2: #AEB5C2;
    --d-text-3: #8C95A4;
    --d-text-disabled: #5A6270;
    --d-primary: #8AA2F5;
    --d-primary-hover: #A3B6F8;
    --d-primary-pressed: #B9C8FA;
    --d-primary-tint: #1F2B4D;
    --d-on-primary: #0F1217;
    --d-secondary: #6CC3DC;
    --d-secondary-tint: #15303A;
    --d-success: #6FCF97; --d-success-tint: #17301F;
    --d-warning: #E9B949; --d-warning-tint: #33290F;
    --d-error: #F28B82;   --d-error-tint: #3A1E1C;
    --d-info: #7DB8F0;    --d-info-tint: #172A3D;
    --d-bubble-customer: #1E232C;
    --d-bubble-operator: #1F2B4D;
    --d-bubble-scheduled: #1B2337;
    --d-note-bg: #36301A;
    --d-note-ink: #F1DE9C;
    --d-note-border: #5A4C1E;
    --d-highlight: #4A3D12;
    --d-st-nuovo: #93B4FB;      --d-st-nuovo-tint: #1C2846;
    --d-st-preso: #C4A6F8;      --d-st-preso-tint: #2A2042;
    --d-st-lavorazione: #F7A974; --d-st-lavorazione-tint: #3A2516;
    --d-st-attesa: #EBC65A;     --d-st-attesa-tint: #342B12;
    --d-st-risolto: #7FD39C;    --d-st-risolto-tint: #18301F;
    --d-st-chiuso: #B3BAC5;     --d-st-chiuso-tint: #262B33;
    --d-pr-urgente: #F69A9A;    --d-pr-urgente-tint: #3A1E1E;
    --d-pr-alta: #F7A974;
    --d-pr-normale: #AEB5C2;
    --d-pr-bassa: #8C95A4;
    --d-av-1-bg: #1F2B4D; --d-av-1-fg: #A3B6F8;
    --d-av-2-bg: #3A2516; --d-av-2-fg: #F7A974;
    --d-av-3-bg: #18301F; --d-av-3-fg: #7FD39C;
    --d-av-4-bg: #2A2042; --d-av-4-fg: #C4A6F8;
    --d-av-5-bg: #342B12; --d-av-5-fg: #EBC65A;
    --d-av-6-bg: #15303A; --d-av-6-fg: #6CC3DC;
    --d-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --d-shadow-2: 0 4px 12px rgba(0, 0, 0, .45);
    --d-shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
}

@media (prefers-color-scheme: dark) {
    .theme-auto {
        --d-bg: #0F1217; --d-surface: #171B22; --d-surface-raised: #1E232C; --d-surface-sunken: #12151B;
        --d-surface-hover: #1F242D; --d-surface-selected: #1F2B4D; --d-border: #2A303A; --d-border-strong: #6B7484;
        --d-text: #E6E9EF; --d-text-2: #AEB5C2; --d-text-3: #8C95A4; --d-text-disabled: #5A6270;
        --d-primary: #8AA2F5; --d-primary-hover: #A3B6F8; --d-primary-pressed: #B9C8FA; --d-primary-tint: #1F2B4D; --d-on-primary: #0F1217;
        --d-secondary: #6CC3DC; --d-secondary-tint: #15303A;
        --d-success: #6FCF97; --d-success-tint: #17301F; --d-warning: #E9B949; --d-warning-tint: #33290F;
        --d-error: #F28B82; --d-error-tint: #3A1E1C; --d-info: #7DB8F0; --d-info-tint: #172A3D;
        --d-bubble-customer: #1E232C; --d-bubble-operator: #1F2B4D; --d-bubble-scheduled: #1B2337;
        --d-note-bg: #36301A; --d-note-ink: #F1DE9C; --d-note-border: #5A4C1E; --d-highlight: #4A3D12;
        --d-st-nuovo: #93B4FB; --d-st-nuovo-tint: #1C2846; --d-st-preso: #C4A6F8; --d-st-preso-tint: #2A2042;
        --d-st-lavorazione: #F7A974; --d-st-lavorazione-tint: #3A2516; --d-st-attesa: #EBC65A; --d-st-attesa-tint: #342B12;
        --d-st-risolto: #7FD39C; --d-st-risolto-tint: #18301F; --d-st-chiuso: #B3BAC5; --d-st-chiuso-tint: #262B33;
        --d-pr-urgente: #F69A9A; --d-pr-urgente-tint: #3A1E1E; --d-pr-alta: #F7A974; --d-pr-normale: #AEB5C2; --d-pr-bassa: #8C95A4;
        --d-av-1-bg: #1F2B4D; --d-av-1-fg: #A3B6F8; --d-av-2-bg: #3A2516; --d-av-2-fg: #F7A974;
        --d-av-3-bg: #18301F; --d-av-3-fg: #7FD39C; --d-av-4-bg: #2A2042; --d-av-4-fg: #C4A6F8;
        --d-av-5-bg: #342B12; --d-av-5-fg: #EBC65A; --d-av-6-bg: #15303A; --d-av-6-fg: #6CC3DC;
        --d-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --d-shadow-2: 0 4px 12px rgba(0, 0, 0, .45); --d-shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
    }
}

/* ---------------------------------------------------------------------------
   I RUOLI DI PULSAR SUI TOKEN DI DESK
   ⚠️ Stessi selettori di app.css, e questo foglio viene dopo: vince lui.
   --------------------------------------------------------------------------- */
.theme-light, .theme-dark, .theme-auto {
    --n-bg-0: var(--d-bg);
    --n-bg-1: var(--d-surface);
    --n-bg-2: var(--d-surface-sunken);
    --n-bg-w: var(--d-surface);
    --n-tx-0: var(--d-text);
    --n-tx-1: var(--d-text-2);
    --n-tx-2: var(--d-text-3);
    --n-tx-w: var(--d-text);
    --n-ac: var(--d-primary);
    --n-ink: var(--d-on-primary);
    --n-bd: var(--d-border);
    --v-titolo: var(--d-text);
    --v-vetro-lettura: var(--d-surface);
    --v-vetro-lettura-bd: var(--d-border);
}

/* Il fondale è piatto: niente aloni né vetro (§12). */
html, body { background: var(--d-bg); }
body { color: var(--d-text); }
body .vetro-lettura { background: var(--d-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--d-border); box-shadow: none; border-radius: 10px; }

:focus-visible { outline: 2px solid var(--d-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ===========================================================================
   LA CORNICE: rail da 64 px a sinistra, il resto a destra
   =========================================================================== */
/* Il rail è FISSO e il contenuto gli lascia il posto: le view esistenti aprono
   `.content` (e l'intestazione `.topbar`), la vista Conversazioni `.cv`. */
.content, body .topbar, .cv { margin-left: 64px; }
body .topbar { background: transparent; background-image: none; box-shadow: none; padding-bottom: 0; margin-bottom: 0; }
body .topbar h1, body.theme-dark .topbar h1 { color: var(--d-text); }
body.theme-dark .topbar, body.theme-auto .topbar { background-image: none; }
.content { padding: 20px 32px 40px; }
@media (max-width: 767px) { .content, body .topbar, .cv { margin-left: 56px; } .content { padding: 16px; } }
.d-rail {
    position: fixed; top: 0; left: 0; height: 100dvh; width: 64px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 0; background: var(--d-surface); border-right: 1px solid var(--d-border); z-index: 20;
}
.d-rail-logo { display: flex; width: 40px; height: 40px; margin-bottom: 14px; }
.d-rail-logo img { width: 40px; height: 40px; }
.d-rail-voce {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; color: var(--d-text-2); text-decoration: none;
    background: transparent; border: 0; cursor: pointer;
}
.d-rail-voce:hover { background: var(--d-surface-hover); color: var(--d-text); }
.d-rail-voce.attiva { background: var(--d-primary-tint); color: var(--d-primary); }
.d-rail-voce.attiva::before {
    content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--d-primary);
}
.d-rail-fondo { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.d-contatore {
    position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--d-primary); color: var(--d-on-primary);
    font-size: 11px; line-height: 18px; font-weight: 600; text-align: center;
    box-shadow: 0 0 0 2px var(--d-surface);
}
.d-contatore.err { background: var(--d-error); color: #fff; }
.d-presenza { position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--d-success); box-shadow: 0 0 0 2px var(--d-surface); }

/* Il menu del profilo, dal basso del rail. */
.d-profilo { position: relative; }
.d-profilo > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.d-profilo > summary::-webkit-details-marker { display: none; }
.d-menu {
    position: absolute; z-index: 40; min-width: 240px; padding: 6px;
    background: var(--d-surface-raised); border: 1px solid var(--d-border); border-radius: 10px; box-shadow: var(--d-shadow-2);
}
.d-profilo .d-menu { left: 52px; bottom: 0; }
.d-menu-voce {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 6px;
    color: var(--d-text); text-decoration: none; font: inherit; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.d-menu-voce:hover { background: var(--d-surface-hover); }
.d-menu-sep { height: 1px; margin: 6px 4px; background: var(--d-border); }
.d-menu-titolo { padding: 8px 10px 4px; color: var(--d-text-3); }

.d-main { flex: 1; min-width: 0; }
/* Le pagine «normali» (amministrazione, rubrica…): un'intestazione e il contenuto. */
.d-pagina { padding: 24px 32px 40px; }
.d-pagina-testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.d-pagina-testa h1 { margin: 0; }
@media (max-width: 767px) { .d-pagina { padding: 16px; } }

/* ===========================================================================
   I PEZZI COMUNI: avatar, pulsanti, chip, tag di stato e priorità
   =========================================================================== */
.av { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; font-weight: 600; line-height: 1; }
.av-40 { width: 40px; height: 40px; font-size: 14px; }
.av-32 { width: 32px; height: 32px; font-size: 12px; }
.av-22 { width: 22px; height: 22px; font-size: 9px; }
.av-18 { width: 18px; height: 18px; font-size: 8px; }
.av-1 { background: var(--d-av-1-bg); color: var(--d-av-1-fg); }
.av-2 { background: var(--d-av-2-bg); color: var(--d-av-2-fg); }
.av-3 { background: var(--d-av-3-bg); color: var(--d-av-3-fg); }
.av-4 { background: var(--d-av-4-bg); color: var(--d-av-4-fg); }
.av-5 { background: var(--d-av-5-bg); color: var(--d-av-5-fg); }
.av-6 { background: var(--d-av-6-bg); color: var(--d-av-6-fg); }

.d-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px;
    border-radius: 6px; border: 1px solid var(--d-border-strong); background: var(--d-surface); color: var(--d-text);
    font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.d-btn:hover { background: var(--d-surface-hover); }
.d-btn-primario { background: var(--d-primary); border-color: var(--d-primary); color: var(--d-on-primary); }
.d-btn-primario:hover { background: var(--d-primary-hover); border-color: var(--d-primary-hover); }
.d-btn-ghost { border-color: transparent; background: transparent; }
.d-btn-ghost:hover { background: var(--d-surface-hover); }
.d-btn-icona { width: 36px; padding: 0; border-color: transparent; background: transparent; color: var(--d-text-2); }
.d-btn-icona:hover { background: var(--d-surface-hover); color: var(--d-text); }
.d-btn-piccolo { height: 28px; padding: 0 10px; font-size: 13px; }
.d-btn[disabled], .d-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.d-chip {
    display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px; border-radius: 999px;
    border: 1px solid var(--d-border); background: var(--d-surface); color: var(--d-text-2);
    font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.d-chip:hover { background: var(--d-surface-hover); }
.d-chip.attivo { border-color: var(--d-primary); background: var(--d-primary-tint); color: var(--d-primary); font-weight: 500; }

.d-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.d-tag-neutro { background: var(--d-surface-sunken); color: var(--d-text-2); }
.d-tag-primario { background: var(--d-primary-tint); color: var(--d-primary); }
.d-pallino { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }

.st-nuovo { color: var(--d-st-nuovo); }       .st-bg-nuovo { background: var(--d-st-nuovo-tint); color: var(--d-st-nuovo); }
.st-preso { color: var(--d-st-preso); }       .st-bg-preso { background: var(--d-st-preso-tint); color: var(--d-st-preso); }
.st-lavorazione { color: var(--d-st-lavorazione); } .st-bg-lavorazione { background: var(--d-st-lavorazione-tint); color: var(--d-st-lavorazione); }
.st-attesa { color: var(--d-st-attesa); }     .st-bg-attesa { background: var(--d-st-attesa-tint); color: var(--d-st-attesa); }
.st-risolto { color: var(--d-st-risolto); }   .st-bg-risolto { background: var(--d-st-risolto-tint); color: var(--d-st-risolto); }
.st-chiuso { color: var(--d-st-chiuso); }     .st-bg-chiuso { background: var(--d-st-chiuso-tint); color: var(--d-st-chiuso); }
.pr-urgente { color: var(--d-pr-urgente); }   .pr-bg-urgente { background: var(--d-pr-urgente-tint); color: var(--d-pr-urgente); }
.pr-alta { color: var(--d-pr-alta); }
.pr-normale { color: var(--d-pr-normale); }
.pr-bassa { color: var(--d-pr-bassa); }

.d-non-letti {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--d-primary); color: var(--d-on-primary); font-size: 12px; font-weight: 600;
}
.d-tenue { color: var(--d-text-3); }
.d-tronca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Una tendina nativa (<details>) vestita da menu. */
.d-tendina { position: relative; display: inline-block; }
.d-tendina > summary { list-style: none; }
.d-tendina > summary::-webkit-details-marker { display: none; }
.d-tendina > .d-menu { top: calc(100% + 4px); right: 0; }
.d-tendina.a-sinistra > .d-menu { left: 0; right: auto; }

/* ===========================================================================
   LA VISTA CONVERSAZIONI (§6) — lista clienti · area del cliente
   =========================================================================== */
.cv { display: flex; height: 100dvh; min-width: 0; }
.cv-lista {
    width: 360px; flex: 0 0 360px; display: flex; flex-direction: column; min-height: 0;
    background: var(--d-surface); border-right: 1px solid var(--d-border);
}
@media (max-width: 1280px) { .cv-lista { width: 320px; flex-basis: 320px; } }
.cv-lista-testa { padding: 16px 16px 8px; }
.cv-lista-titolo { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-bottom: 10px; }
.cv-lista-titolo h1 { font-size: 18px; line-height: 26px; margin: 0; }
.cv-cerca { position: relative; display: flex; align-items: center; height: 40px; padding: 0 10px 0 36px; border-radius: 8px; background: var(--d-surface-sunken); }
.cv-cerca > svg { position: absolute; left: 12px; color: var(--d-text-3); }
.cv-cerca input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--d-text); font: inherit; outline: none; }
.cv-cerca input::placeholder { color: var(--d-text-3); }
.cv-cerca kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border: 1px solid var(--d-border); border-radius: 4px; color: var(--d-text-3); background: var(--d-surface); }
/* I filtri stanno su una riga nella colonna della lista (PDF pag. 8): chip
   compatti; se non bastano (lingua, colonna stretta) vanno a capo, mai fuori. */
.cv-filtri { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.cv-filtri .d-chip { font-size: 12.5px; height: 28px; padding: 0 8px; }
.cv-filtri form { display: contents; }
.cv-voci { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px; }
.cv-gruppo { padding: 14px 16px 6px; color: var(--d-text-2); border-top: 1px solid var(--d-border); }
.cv-gruppo:first-child { border-top: 0; }

.cv-voce { display: block; border-bottom: 1px solid var(--d-border); }
.cv-voce.scelta { background: var(--d-surface-selected); }
.cv-voce-riga { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; padding: 12px 16px; align-items: start; text-decoration: none; color: inherit; }
.cv-voce:not(.scelta) .cv-voce-riga:hover { background: var(--d-surface-hover); }
.cv-voce-nome { display: block; font-size: 14px; line-height: 20px; color: var(--d-text); }
.cv-voce-anteprima { display: block; font-size: 13px; line-height: 18px; margin-top: 2px; color: var(--d-text-2); }
.cv-voce-destra { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cv-voce-ora { font-size: 13px; color: var(--d-text-3); }
.cv-voce.aperti .cv-voce-nome { font-weight: 600; }
.cv-voce.non-letti .cv-voce-anteprima { font-weight: 600; color: var(--d-text); }
.cv-voce.non-letti .cv-voce-ora { color: var(--d-primary); font-weight: 600; }
.cv-voce.spento .cv-voce-nome, .cv-voce.spento .cv-voce-anteprima { color: var(--d-text-3); font-weight: 400; }
.cv-ticket-btn {
    display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border-radius: 6px;
    border: 1px solid var(--d-border); color: var(--d-text-2); font-size: 13px; font-weight: 600; background: var(--d-surface);
    list-style: none; cursor: pointer;
}
.cv-ticket-btn::-webkit-details-marker { display: none; }
.cv-sottomenu[open] > summary .cv-ticket-btn,
.cv-sottomenu[open] > .cv-ticket-btn { border-color: var(--d-primary); color: var(--d-primary); }
.cv-sottomenu > summary { list-style: none; }
.cv-sottomenu > summary::-webkit-details-marker { display: none; }
.cv-sub { margin: -4px 16px 10px 36px; padding-left: 12px; border-left: 2px solid var(--d-border); }
.cv-sub-riga {
    position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border-radius: 6px;
    color: var(--d-text); text-decoration: none; font-size: 13px;
}
.cv-sub-riga::before { content: ""; position: absolute; left: -12px; top: 50%; width: 10px; height: 2px; background: var(--d-border); }
.cv-sub-riga:hover { background: var(--d-surface-hover); }
.cv-sub-riga.attivo { background: var(--d-surface); box-shadow: inset 0 0 0 1px var(--d-primary); }
.cv-sub-riga .mono { color: var(--d-primary); }
.cv-vuoto-lista { padding: 32px 20px; text-align: center; color: var(--d-text-3); }

/* L'area del cliente */
.cv-area { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--d-bg); }
.cv-cliente {
    display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 20px;
    background: var(--d-surface); border-bottom: 1px solid var(--d-border);
}
.cv-cliente-nome { font-size: 18px; line-height: 26px; font-weight: 600; margin: 0; }
.cv-cliente-mail { display: flex; align-items: center; gap: 6px; color: var(--d-text-2); font-size: 13px; }
.cv-cliente-azioni { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.cv-tabs { display: flex; align-items: stretch; height: 40px; background: var(--d-surface); border-bottom: 1px solid var(--d-border); }
.cv-tabs-scorre { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cv-tab {
    position: relative; display: flex; align-items: center; gap: 8px; min-width: 120px; max-width: 260px; padding: 0 14px;
    border-right: 1px solid var(--d-border); color: var(--d-text-2); text-decoration: none; font-size: 14px;
}
.cv-tab:hover { background: var(--d-surface-hover); }
.cv-tab.attivo { color: var(--d-text); }
.cv-tab.attivo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--d-primary); }
.cv-tab.non-letto { font-weight: 600; color: var(--d-text); }
.cv-tab .mono { color: inherit; }
.cv-tabs-conta { display: flex; align-items: center; gap: 4px; padding: 0 14px; border-left: 1px solid var(--d-border); color: var(--d-text-2); white-space: nowrap; }

.cv-ticket { padding: 12px 20px 10px; background: var(--d-surface); border-bottom: 1px solid var(--d-border); }
.cv-ticket-r1 { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.cv-ticket-num { color: var(--d-text-3); font-size: 15px; }
.cv-ticket-oggetto { font-size: 18px; line-height: 26px; font-weight: 600; margin: 0; flex: 1; min-width: 0; }
.cv-ticket-azioni { display: flex; align-items: center; gap: 8px; }
.cv-ticket-r2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; color: var(--d-text-2); font-size: 13px; }
.cv-assegnatario {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 4px; border-radius: 999px;
    background: var(--d-surface-sunken); color: var(--d-text); font-size: 14px;
}
.cv-assegnatario.gruppo { background: var(--d-secondary-tint); color: var(--d-secondary); padding-left: 10px; }
.cv-assegnatario form { display: inline; }
.cv-assegnatario button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 2px; display: inline-flex; }
.cv-aggiungi { width: 28px; height: 28px; border-radius: 50%; border: 1px dashed var(--d-border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--d-text-2); cursor: pointer; list-style: none; }
.cv-aggiungi::-webkit-details-marker { display: none; }
.cv-separa { width: 1px; height: 18px; background: var(--d-border); }
.cv-blocco { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--d-text-3); }

.cv-stato-btn { height: 36px; padding: 0 12px; border-radius: 6px; border: 1.5px solid currentColor; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; list-style: none; }
.cv-stato-btn::-webkit-details-marker { display: none; }
.cv-pr-btn { height: 36px; padding: 0 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; list-style: none; }
.cv-pr-btn:hover { background: var(--d-surface-hover); }
.cv-pr-btn::-webkit-details-marker { display: none; }

/* Il flusso dei messaggi */
.cv-flusso { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 24px; }
.cv-data { position: sticky; top: 8px; z-index: 2; display: flex; justify-content: center; margin: 16px 0 8px; }
.cv-data span { padding: 2px 12px; border-radius: 6px; border: 1px solid var(--d-border); background: var(--d-surface); font-size: 13px; font-weight: 500; color: var(--d-text-2); box-shadow: var(--d-shadow-1); }
.cv-evento { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; color: var(--d-text-2); text-align: center; }
.cv-evento b { color: var(--d-text); font-weight: 600; }

.bolla-riga { display: flex; margin: 8px 0; }
.bolla-riga.destra { justify-content: flex-end; }
.bolla-riga.attaccata { margin-top: 2px; }
.bolla {
    position: relative; max-width: min(640px, 72%); padding: 10px 14px 6px; border-radius: 10px;
    background: var(--d-bubble-customer); border: 1px solid var(--d-border); color: var(--d-text);
}
.bolla.operatore { background: var(--d-bubble-operator); border-color: transparent; }
.bolla.nota { background: var(--d-note-bg); border: 1px dashed var(--d-note-border); }
.bolla.programmata { background: var(--d-bubble-scheduled); border: 1px dashed var(--d-primary); }
.bolla-chi { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; font-size: 14px; }
.bolla-chi b { font-weight: 600; }
.bolla-a { display: inline-flex; align-items: center; gap: 4px; color: var(--d-text-2); cursor: pointer; list-style: none; border-radius: 4px; padding: 0 2px; }
.bolla-a::-webkit-details-marker { display: none; }
.bolla-a:hover { background: rgba(127, 127, 127, .12); }
.bolla-dett > .bolla-dett-pannello { margin: 6px 0 8px; padding: 8px 10px; border-radius: 6px; background: var(--d-surface-sunken); font-size: 13px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.bolla-dett-pannello dt { color: var(--d-text-3); }
.bolla-dett-pannello dd { margin: 0; }
.bolla-etichetta-nota { display: inline-flex; align-items: center; gap: 4px; color: var(--d-note-ink); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bolla.nota .bolla-testo { color: var(--d-note-ink); }
.bolla-testo { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 21px; }
.bolla-testo .menzione { color: var(--d-primary); font-weight: 500; }
.bolla-cit {
    display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; margin: 2px 0 8px; padding: 6px 8px; border-radius: 6px;
    background: var(--d-surface-sunken); font-size: 13px; text-decoration: none; color: inherit;
}
.bolla-cit-etichetta { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--d-text-3); }
.bolla-cit-testo { grid-column: 2; color: var(--d-text-2); }
.bolla-allegati { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.allegato { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--d-border); background: var(--d-surface); font-size: 13px; }
.allegato .d-tenue { font-size: 12px; }
.bolla-piede { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--d-text-3); }
.bolla-piede .sx { margin-right: auto; }
.bolla-piede .programmata { color: var(--d-primary); font-weight: 500; }
.bolla-piede .errore { color: var(--d-error); font-weight: 500; }
.tag-modulo { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--d-secondary-tint); color: var(--d-secondary); font-size: 12px; font-weight: 500; }

/* Il compositore */
.cv-scrivi { padding: 12px 24px 16px; background: var(--d-bg); }
.cv-scrivi-pillola {
    display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 16px; border-radius: 999px;
    background: var(--d-surface); border: 1px solid var(--d-border); box-shadow: var(--d-shadow-1); color: var(--d-text-3); cursor: text; list-style: none;
}
.cv-scrivi-pillola::-webkit-details-marker { display: none; }
.cv-scrivi-pillola .grow { flex: 1; }
.cv-scrivi[open] > .cv-scrivi-pillola { display: none; }
.cv-compositore { background: var(--d-surface); border: 1px solid var(--d-border); border-radius: 10px; box-shadow: var(--d-shadow-2); animation: cv-sale .16s cubic-bezier(.2, 0, 0, 1); }
.cv-compositore.nota { background: var(--d-note-bg); border: 1px dashed var(--d-note-border); }
@keyframes cv-sale { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.cv-comp-testa { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--d-border); }
.d-segmentato { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--d-surface-sunken); }
.d-segmentato label { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--d-text-2); }
.d-segmentato input { position: absolute; opacity: 0; pointer-events: none; }
.d-segmentato input:checked + label { background: var(--d-surface); color: var(--d-text); font-weight: 500; box-shadow: var(--d-shadow-1); }
.d-segmentato input:focus-visible + label { outline: 2px solid var(--d-primary); }
.cv-comp-riga { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px; border-bottom: 1px solid var(--d-border); font-size: 14px; }
.cv-comp-riga > .etichetta { width: 36px; color: var(--d-text-3); flex: 0 0 auto; }
.cv-comp-riga .destra { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--d-text-2); font-size: 13px; }
.cv-comp-corpo { padding: 8px 12px; }
.cv-comp-corpo textarea {
    width: 100%; min-height: 120px; resize: vertical; border: 0; outline: none; background: transparent; color: var(--d-text); font: inherit; line-height: 21px;
}
.cv-comp-barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--d-border); }
.cv-comp-barra .sx { margin-right: auto; color: var(--d-text-3); font-size: 13px; }
.cv-avviso { margin: 0 24px 8px; padding: 8px 12px; border-radius: 6px; background: var(--d-warning-tint); color: var(--d-warning); font-size: 13px; }

/* Stati vuoti (§8.1) */
.cv-vuoto { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px; text-align: center; color: var(--d-text-2); }
.cv-vuoto-icona { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--d-primary-tint); color: var(--d-primary); }
.cv-vuoto h2 { margin: 6px 0 0; color: var(--d-text); }

/* Telefono e tablet (§15): la lista si ripiega sopra l'area. */
@media (max-width: 1023px) {
    .cv-lista { width: 300px; flex-basis: 300px; }
}
@media (max-width: 767px) {
    .d-rail { width: 56px; flex-basis: 56px; }
    .cv { flex-direction: column; height: auto; }
    .cv-lista { width: 100%; flex-basis: auto; border-right: 0; }
    /* Il contenitore non porta classi che dipendono dall'area adottata (LUMEN):
       lo dice l'area stessa. */
    .cv:has(> .cv-area[data-con-cliente]) .cv-lista { display: none; }
    .cv:not(:has(> .cv-area[data-con-cliente])) .cv-area { display: none; }
    .bolla { max-width: 88%; }
}

/* La nota interna (§6.7): tutto il compositore prende lo stile della nota, e i
   destinatari spariscono. Senza JavaScript: decide il radio scelto. */
.cv-compositore:has(#tipo-nota:checked) { background: var(--d-note-bg); border: 1px dashed var(--d-note-border); }
.cv-compositore:has(#tipo-nota:checked) .solo-email { display: none; }
.cv-compositore:has(#tipo-nota:checked) .cv-comp-testa,
.cv-compositore:has(#tipo-nota:checked) .cv-comp-barra { border-color: var(--d-note-border); }
.cv-voce-riga a { color: inherit; text-decoration: none; }

/* ===========================================================================
   L'ELENCO TICKET (§8.2, PDF pag. 26)
   =========================================================================== */
.tl { padding: 24px 32px 96px; }
.tl-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.tl-viste { display: flex; gap: 4px; border-bottom: 1px solid var(--d-border); margin: 0 -32px 16px; padding: 0 32px; overflow-x: auto; }
.tl-vista { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; color: var(--d-text-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.tl-vista:hover { color: var(--d-text); }
.tl-vista.attiva { color: var(--d-text); }
.tl-vista.attiva::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--d-primary); border-radius: 3px 3px 0 0; }
.tl-conta { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--d-surface-sunken); color: var(--d-text-2); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.tl-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.tl-tabella-box { background: var(--d-surface); border: 1px solid var(--d-border); border-radius: 10px; overflow-x: auto; }
.tl-tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tl-tabella th { text-align: left; font-weight: 500; color: var(--d-text-2); padding: 12px 12px; border-bottom: 1px solid var(--d-border); white-space: nowrap; }
.tl-tabella td { padding: 10px 12px; border-bottom: 1px solid var(--d-border); vertical-align: middle; }
.tl-tabella tr:last-child td { border-bottom: 0; }
.tl-riga:hover td { background: var(--d-surface-hover); }
.tl-riga:has(.tl-check:checked) td { background: var(--d-surface-selected); }
.tl-riga.non-letto .tl-oggetto .tl-link { font-weight: 600; }
.tl-oggetto { max-width: 360px; }
.tl-oggetto-box { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tl-tabella td { white-space: nowrap; }
.tl-ass { display: flex; gap: 4px; }
.cv-assegnatario { white-space: nowrap; }
.tl-link { color: var(--d-text); text-decoration: none; }
.tl-link.mono { color: var(--d-text-2); }
.tl-link:hover { color: var(--d-primary); }
.tl-sel { width: 44px; }
.tl-check { width: 18px; height: 18px; accent-color: var(--d-primary); cursor: pointer; }
.hidden-vis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-modulo { counter-reset: sel; }
.tl-check:checked { counter-increment: sel; }
.tl-barra {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
    display: none; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-radius: 10px;
    background: #1B1F27; color: #fff; box-shadow: var(--d-shadow-3);
}
.tl-modulo:has(.tl-check:checked) .tl-barra { display: flex; }
.tl-barra-conta::before { content: counter(sel) " "; }
.tl-barra-conta { font-weight: 600; margin-right: 6px; }
.tl-barra-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font: inherit; cursor: pointer; list-style: none; }
.tl-barra-btn::-webkit-details-marker { display: none; }
.tl-barra-btn:hover { background: rgba(255,255,255,.1); }
.tl-barra-sep { width: 1px; height: 22px; background: rgba(255,255,255,.25); }
.tl-barra .d-menu { color: var(--d-text); }
.tl-su > .d-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.tl-piede { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 16px; }
.tl-pagine { display: flex; align-items: center; gap: 4px; }
.tl-pagina { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 6px; color: var(--d-text); text-decoration: none; }
.tl-pagina.attiva { border: 1.5px solid var(--d-primary); color: var(--d-primary); background: var(--d-primary-tint); font-weight: 600; }
.d-toast {
    position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 12px;
    padding: 10px 12px 10px 16px; border-radius: 10px; background: var(--d-surface-raised); border: 1px solid var(--d-border);
    box-shadow: var(--d-shadow-2); animation: cv-sale .2s cubic-bezier(.2, 0, 0, 1);
}
@media (max-width: 767px) { .tl { padding: 16px 16px 96px; } .tl-viste { margin: 0 -16px 12px; padding: 0 16px; } }

/* ── IL BLOCCO «un ticket, un computer» (§6.10) ─────────────────────────── */
.cv-tk { display: contents; }
.cv-corpo { flex: 1; min-height: 0; display: flex; position: relative; }
.cv-colonna { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cv-in-uso { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--d-text-3); }
.cv-in-uso[hidden] { display: none; }
.cv-in-uso + .cv-in-uso { margin-left: 8px; }
.av-56 { width: 56px; height: 56px; font-size: 20px; }
.cv-velo {
    position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: color-mix(in srgb, var(--d-surface-sunken) 72%, transparent); backdrop-filter: blur(3px);
}
.cv-velo[hidden] { display: none; }
.cv-velo-scheda {
    max-width: 440px; padding: 24px; border-radius: 12px; text-align: center; background: var(--d-surface);
    border: 1px solid var(--d-border); box-shadow: var(--d-shadow-3); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cv-velo-scheda h3 { margin: 8px 0 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.cv-velo-scheda p { margin: 0; }
.cv-velo-av { position: relative; display: inline-flex; }
.cv-velo-lucchetto {
    position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--d-surface); border: 1px solid var(--d-border); color: var(--d-text-2);
}
.cv-velo-azioni { display: flex; gap: 8px; margin-top: 8px; }
/* In sola lettura l'intestazione resta visibile, coi comandi spenti. */
.cv-tk.bloccato .cv-ticket-azioni details, .cv-tk.bloccato .cv-ticket-azioni form, .cv-tk.bloccato .cv-ticket-r2 form, .cv-tk.bloccato .cv-ticket-r2 details {
    pointer-events: none; opacity: .5;
}
.cv-tk.bloccato .cv-scrivi { display: none; }
.cv-sola-lettura {
    display: flex; align-items: center; gap: 10px; margin: 12px 24px 16px; padding: 10px 12px 10px 14px; border-radius: 10px;
    background: var(--d-surface-sunken); color: var(--d-text-2); font-size: 13px;
}
.cv-sola-lettura[hidden] { display: none; }
.cv-sola-lettura .grow { flex: 1; }

/* ── LO STORICO (§8.4) ─────────────────────────────────────────────────── */
.cv-storico { width: 360px; flex: none; border-left: 1px solid var(--d-border); background: var(--d-surface); display: flex; flex-direction: column; min-height: 0; }
.cv-storico-testa { display: flex; align-items: center; gap: 4px; padding: 12px 12px 8px 16px; }
.cv-storico-testa h3 { flex: 1; margin: 0; font-size: 15px; font-weight: 600; }
.cv-storico-filtri { display: flex; gap: 4px; padding: 0 12px 8px 16px; border-bottom: 1px solid var(--d-border); flex-wrap: wrap; }
.cv-storico-filtri a { padding: 4px 10px; border-radius: 999px; font-size: 13px; color: var(--d-text-2); text-decoration: none; }
.cv-storico-filtri a:hover { background: var(--d-surface-sunken); }
.cv-storico-filtri a.attivo { background: var(--d-primary-tint); color: var(--d-primary); font-weight: 600; }
.cv-storico-voci { list-style: none; margin: 0; padding: 8px 16px 24px; overflow-y: auto; flex: 1; }
.cv-storico-giorno { margin: 14px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--d-text-3); }
.cv-storico-voce { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 13px; line-height: 19px; }
.cv-storico-voce .grow { flex: 1; min-width: 0; }
.cv-storico-icona { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--d-surface-sunken); color: var(--d-text-2); }
@media (max-width: 1279px) { .cv-storico { position: absolute; right: 0; top: 0; bottom: 0; z-index: 6; box-shadow: var(--d-shadow-3); } }
@media (max-width: 767px) { .cv-storico { width: 100%; } }

/* ── SCORCIATOIE (§6.9) ───────────────────────────────────────────────── */
.cv-scelto > article { outline: 2px solid var(--d-primary); outline-offset: 2px; }
.cv-illumina > article { animation: cv-illumina 1.6s ease-out; }
@keyframes cv-illumina { 0%, 30% { box-shadow: 0 0 0 4px var(--d-primary-tint); } 100% { box-shadow: none; } }
.d-scorciatoie {
    position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px));
    padding: 20px 24px; border-radius: 12px; background: var(--d-surface-raised); border: 1px solid var(--d-border); box-shadow: var(--d-shadow-3);
}
.d-scorciatoie[hidden] { display: none; }
.d-scorciatoie h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.d-scorciatoie dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
.d-scorciatoie dd { margin: 0; color: var(--d-text-2); }
.d-scorciatoie kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--d-border); background: var(--d-surface-sunken); font: 12px/18px "IBM Plex Mono", monospace; text-align: center; }

/* ── I CLIENTI (§8.3) ──────────────────────────────────────────────────── */
.d-btn-pericolo { background: var(--d-error); border-color: var(--d-error); color: #fff; }
.d-btn-pericolo:hover { filter: brightness(.92); }
.d-menu-voce.d-pericolo { color: var(--d-error); }
.cl { max-width: 1280px; }
.cl-testa { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.cl-testa h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.cl-griglia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cl-colonna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cl-card { background: var(--d-surface); border: 1px solid var(--d-border); border-radius: 12px; padding: 20px; }
.cl-card h2 { margin: 0 0 12px; font-size: 15px; line-height: 22px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cl-due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl-regole { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--d-border); }
.cl-regole .t-overline { width: 100%; }
.cl-regola { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--d-surface-sunken); color: var(--d-text); text-decoration: none; font-size: 13px; }
.cl-indirizzi, .cl-note, .cl-ticket, .cl-scelte { list-style: none; margin: 0; padding: 0; }
.cl-indirizzo { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--d-border); color: var(--d-text-2); }
.cl-indirizzo:last-child { border-bottom: 0; }
.cl-indirizzo .grow { flex: 1; min-width: 0; color: var(--d-text); }
.cl-tag-principale { background: var(--d-primary-tint); color: var(--d-primary); }
.cl-sposta > summary { list-style: none; }
.cl-sposta > summary::-webkit-details-marker { display: none; }
.cl-aggiungi { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cl-nota-nuova { margin-bottom: 12px; }
.cl-nota { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--d-border); }
.cl-nota-testo { white-space: pre-wrap; margin-top: 2px; font-size: 14px; line-height: 21px; }
.cl-ticket li { padding: 8px 0; border-bottom: 1px solid var(--d-border); }
.cl-ticket li:last-child { border-bottom: 0; }
.cl-ticket a { display: flex; align-items: center; gap: 8px; color: var(--d-text); text-decoration: none; }
.cl-ticket a:hover .grow { color: var(--d-primary); }
.cl-ticket .grow { flex: 1; min-width: 0; }
.cl-ticket-sotto { display: flex; align-items: center; gap: 4px; margin-top: 2px; padding-left: 52px; }
.cl-unione { max-width: 760px; }
.cl-stepper { display: flex; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; counter-reset: passo; }
.cl-stepper li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--d-surface); border: 1px solid var(--d-border); color: var(--d-text-3); font-size: 13px; font-weight: 500; }
.cl-stepper li.attivo { border-color: var(--d-primary); color: var(--d-primary); background: var(--d-primary-tint); }
.cl-stepper li.fatto { color: var(--d-success); }
.cl-step-n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; font-size: 12px; flex: none; }
.cl-scelte li a { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 8px; color: var(--d-text); text-decoration: none; }
.cl-scelte li a:hover { background: var(--d-surface-sunken); }
.cl-scelte li a > span.grow, .cl-scelte li a > span[css] { display: flex; flex-direction: column; }
.cl-unione-coppia { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; color: var(--d-text-3); }
.cl-unione-chi { display: inline-flex; align-items: center; gap: 8px; color: var(--d-text); }
.cl-riepilogo { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; margin: 12px 0 0; }
.cl-riepilogo dt { display: flex; align-items: center; gap: 6px; color: var(--d-text-2); font-weight: 500; }
.cl-riepilogo dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; flex-direction: column; }
.cl-azioni { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.cl-irreversibile { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--d-error-tint); color: var(--d-error); }
.cl-irreversibile p { color: var(--d-text); }
.cl-errore { color: var(--d-error); margin: 4px 0 0; }
.cl-completato { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px; }
.cl-completato h2 { justify-content: center; }
@media (max-width: 1023px) { .cl-griglia { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .cl-due, .cl-riepilogo { grid-template-columns: 1fr; } .cl-stepper { flex-direction: column; } }

/* ── L'AMMINISTRAZIONE (§8.7) ─────────────────────────────────────────── */
.adm { display: flex; min-height: 100dvh; padding: 0; }
.adm-menu { width: 248px; flex: none; border-right: 1px solid var(--d-border); background: var(--d-surface); padding: 20px 12px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
.adm-menu-titolo { font-size: 18px; line-height: 26px; font-weight: 600; margin: 0 8px 14px; }
.adm-voce { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 8px; color: var(--d-text-2); text-decoration: none; font-size: 14px; }
.adm-voce:hover { background: var(--d-surface-sunken); color: var(--d-text); }
.adm-voce.attiva { background: var(--d-primary-tint); color: var(--d-primary); font-weight: 600; }
.adm-corpo { flex: 1; min-width: 0; padding: 24px 32px 48px; max-width: 1180px; }
.adm-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.adm-testa h2 { margin: 0; font-size: 22px; line-height: 30px; font-weight: 600; }
.adm-testa p { margin: 4px 0 0; color: var(--d-text-2); font-size: 14px; }
.adm-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.adm-card { background: var(--d-surface); border: 1px solid var(--d-border); border-radius: 12px; padding: 20px; }
.adm-card + .adm-card { margin-top: 16px; }
.adm-card h3 { margin: 0 0 12px; font-size: 15px; line-height: 22px; font-weight: 600; }
.adm-campi { display: flex; flex-direction: column; gap: 12px; }
.adm-due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adm-nota { font-size: 13px; color: var(--d-text-3); margin: 4px 0 0; }
.adm-azioni { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.adm-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.adm-toggle input { margin-top: 3px; accent-color: var(--d-primary); width: 16px; height: 16px; }
.adm-toggle small { display: block; color: var(--d-text-3); }
@media (max-width: 1279px) { .adm-griglia { grid-template-columns: 1fr; } }
@media (max-width: 899px) { .adm { flex-direction: column; } .adm-menu { width: auto; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--d-border); } .adm-menu nav { display: flex; overflow-x: auto; gap: 4px; } .adm-voce { white-space: nowrap; } .adm-corpo { padding: 16px; } .adm-due { grid-template-columns: 1fr; } }
.adm-matrice-box { padding: 0; overflow-x: auto; }
.adm-matrice { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-matrice th, .adm-matrice td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--d-border); }
.adm-matrice thead th { font-size: 12px; font-weight: 600; color: var(--d-text-3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.adm-matrice tbody th[scope=row] { font-weight: 400; color: var(--d-text); }
.adm-matrice-sez th { background: var(--d-surface-sunken); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d-text-2); padding-top: 8px; padding-bottom: 8px; }
.adm-matrice td { width: 210px; }
.adm-cella { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 500; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; }
.adm-cella.si { color: var(--d-success); background: var(--d-success-tint); }
.adm-cella.no { color: var(--d-text-3); background: var(--d-surface-sunken); }
.adm-cella.cambiato { border-color: currentColor; border-style: dashed; }
.adm-cella.fissa { cursor: default; }
button.adm-cella:hover { filter: brightness(.95); outline: 2px solid var(--d-primary-tint); }
.d-tag-ok { background: var(--d-success-tint); color: var(--d-success); }
.d-tag-info { background: var(--d-info-tint, var(--d-primary-tint)); color: var(--d-info, var(--d-primary)); }
.d-tag-errore { background: var(--d-error-tint); color: var(--d-error); }
.d-pericolo-testo { color: var(--d-error); }
.av-neutro { background: var(--d-surface-sunken); color: var(--d-text-2); }
.tl-tabella tr.tl-scelta td { background: var(--d-primary-tint); }
.adm-pannello { position: sticky; top: 20px; }
.adm-pannello-testa { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.adm-pannello-gesti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--d-border); }
.adm-ruoli { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: -4px 0 0; font-size: 12px; color: var(--d-text-3); }
.adm-ruoli dt { font-weight: 600; color: var(--d-text-2); }
.adm-ruoli dd { margin: 0; }
.adm-link { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.adm-link code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: var(--d-text); }
.adm-card-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-content: start; }
.adm-gruppo { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--d-surface); border: 1px solid var(--d-border); color: var(--d-text); text-decoration: none; }
.adm-gruppo:hover { border-color: var(--d-border-strong, var(--d-primary)); box-shadow: var(--d-shadow-1); }
.adm-gruppo.scelto { border-color: var(--d-primary); box-shadow: 0 0 0 3px var(--d-primary-tint); }
.adm-gruppo-testa { display: flex; align-items: center; gap: 10px; }
.adm-gruppo-testa b { flex: 1; min-width: 0; }
.adm-gruppo-icona { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--d-primary-tint); color: var(--d-primary); }
.adm-gruppo-membri { display: flex; }
.adm-gruppo-membri .av { margin-right: -6px; box-shadow: 0 0 0 2px var(--d-surface); }
.adm-gruppo-dati { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 0; font-size: 13px; }
.adm-gruppo-dati dt { color: var(--d-text-3); }
.adm-gruppo-dati dd { margin: 0; text-align: right; font-weight: 500; }
.adm-stati { list-style: none; margin: 0; padding: 0; min-height: 44px; }
.adm-stato { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--d-border); background: var(--d-surface); }
.adm-stato:last-child { border-bottom: 0; }
.adm-stato.scelto { background: var(--d-primary-tint); border-radius: 8px; }
.adm-stato.trascinato { opacity: .4; }
.adm-stati.sopra { outline: 2px dashed var(--d-primary); outline-offset: 4px; border-radius: 8px; }
.adm-maniglia { cursor: grab; color: var(--d-text-3); letter-spacing: -2px; user-select: none; }
.adm-stato-nome { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; }
.adm-su svg { transform: rotate(180deg); }
.adm-interruttore { width: 34px; height: 20px; border-radius: 999px; border: 0; padding: 2px; background: var(--d-border-strong, #C5CAD3); cursor: pointer; display: inline-flex; }
.adm-interruttore span { width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.adm-interruttore.acceso { background: var(--d-primary); }
.adm-interruttore.acceso span { transform: translateX(14px); }
.adm-scelte { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.adm-scelte legend { font-size: 13px; font-weight: 500; margin-bottom: 6px; padding: 0; }
.adm-colore { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; min-width: 120px; }
.adm-colore:has(input:checked) { border-color: currentColor; }
.adm-colore input, .adm-icona input { position: absolute; opacity: 0; pointer-events: none; }
.adm-colore-nome { font-weight: 600; font-size: 13px; }
.adm-colore-contrasto { font-size: 11px; opacity: .85; }
.adm-icona { width: 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--d-border); cursor: pointer; position: relative; }
.adm-icona:has(input:checked) { border-color: var(--d-primary); background: var(--d-primary-tint); color: var(--d-primary); }
.adm-colore:focus-within, .adm-icona:focus-within { outline: 2px solid var(--d-primary); outline-offset: 2px; }
.adm-anteprima { display: flex; flex-direction: column; gap: 8px; }
.adm-anteprima-chiaro, .adm-anteprima-scuro { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 8px; }
.adm-anteprima-chiaro { background: #FFFFFF; border: 1px solid #E3E6EB; }
.adm-anteprima-scuro { background: #171B22; }
.adm-anteprima-scuro .adm-nota { color: #8C95A4; }
.adm-anteprima-chiaro .adm-nota { color: #5A6270; }
.adm-tre { display: grid; grid-template-columns: 2fr 90px 1fr; gap: 12px; }
.adm-canali { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.adm-canali-elenco { display: flex; flex-direction: column; gap: 10px; }
.adm-canale { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--d-surface); border: 1px solid var(--d-border); color: var(--d-text); text-decoration: none; }
.adm-canale.scelto { border-color: var(--d-primary); box-shadow: 0 0 0 3px var(--d-primary-tint); }
.adm-canale-piede { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-canale-nuovo { border-style: dashed; color: var(--d-primary); }
.adm-da { padding: 10px 12px; border-radius: 8px; background: var(--d-surface-sunken); font-size: 14px; }
.adm-da .etichetta { color: var(--d-text-3); margin-right: 6px; }
.adm-prova { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.adm-esito { flex: 1; min-width: 200px; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.adm-esito.ok { background: var(--d-success-tint); color: var(--d-success); }
.adm-esito.ko { background: var(--d-error-tint); color: var(--d-error); }
.adm-esito .t-small { color: var(--d-text-2); margin-top: 2px; overflow-wrap: anywhere; }
.adm-impostazioni { padding-bottom: 80px; }
.adm-modifiche { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-radius: 12px; background: var(--d-surface-raised, var(--d-surface)); border: 1px solid var(--d-border); box-shadow: var(--d-shadow-3); }
.adm-modifiche[hidden] { display: none; }
@media (max-width: 1023px) { .adm-canali { grid-template-columns: 1fr; } .adm-tre { grid-template-columns: 1fr 1fr; } }
.adm-regole { list-style: none; margin: 0; padding: 0; }
.adm-regola { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--d-border); background: var(--d-surface); }
.adm-regola.spenta .adm-regola-corpo { opacity: .55; }
.adm-regola.trascinato { opacity: .4; }
.adm-regola-n { width: 22px; text-align: center; color: var(--d-text-3); }
.adm-regola-corpo { flex: 1; min-width: 0; }
.adm-regola-nome { font-weight: 600; color: var(--d-text); text-decoration: none; }
.adm-ripiego { background: var(--d-surface-sunken); border-bottom: 0; border-radius: 0 0 12px 12px; flex-wrap: wrap; }
.adm-ripiego-scelta { display: flex; align-items: flex-end; gap: 8px; }
.adm-condizioni { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.adm-condizione { display: grid; grid-template-columns: 180px 160px 1fr; gap: 10px; padding: 10px; border-radius: 8px; background: var(--d-surface-sunken); }
.adm-guida { margin-top: 12px; font-size: 13px; color: var(--d-text-2); }
.adm-guida p { white-space: pre-line; }
.adm-numero { font-size: 28px; line-height: 34px; color: var(--d-primary); margin-right: 4px; }
[data-ordine-lista].sopra { outline: 2px dashed var(--d-primary); outline-offset: -2px; }
@media (max-width: 899px) { .adm-condizione { grid-template-columns: 1fr; } }
.bolla-citato { margin-top: 6px; font-size: 13px; }
.bolla-citato > summary { cursor: pointer; color: var(--d-text-3); list-style: none; }
.bolla-citato > summary::-webkit-details-marker { display: none; }
.bolla-citato .bolla-testo { margin-top: 6px; color: var(--d-text-2); border-left: 2px solid var(--d-border); padding-left: 10px; }
a.allegato { color: inherit; text-decoration: none; }
a.allegato:hover { border-color: var(--d-primary); }
.bolla-riprova { border: 0; background: none; padding: 0; margin-left: 6px; color: var(--d-error); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ── L'ACCESSO (§8.6) ──────────────────────────────────────────────────── */
.acc { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--d-bg); color: var(--d-text); }
/* La scheda sola: «Troppi tentativi», «Account disattivato» (PDF pag. 35). */
.acc-scheda { width: 100%; max-width: 420px; background: var(--d-surface); border: 1px solid var(--d-border); border-radius: 12px; padding: 28px; box-shadow: var(--d-shadow-2); }
.acc h1 { font-size: 22px; line-height: 30px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.acc-scheda h1 { font-size: 18px; line-height: 26px; margin-top: 20px; }
.acc-sotto { color: var(--d-text-2); font-size: 14px; margin: 4px 0 0; }
.acc-scheda .acc-sotto { font-size: 13px; }
.acc-marchio { display: flex; align-items: center; gap: 10px; }
.acc-marchio img { width: 40px; height: 40px; }
.acc-marchio b { font-size: 22px; font-weight: 600; }
.acc-marchio.piccolo img { width: 28px; height: 28px; }
.acc-marchio.piccolo b { font-size: 16px; }
/* Lo split a due colonne (PDF pag. 34): il pannello tinto, il modulo a destra. */
.acc.acc-diviso { display: grid; grid-template-columns: 61% 1fr; padding: 0; align-items: stretch; background: var(--d-surface); }
.acc-lato { background: var(--d-primary-tint); padding: 48px 56px 56px; display: flex; flex-direction: column; }
.acc-lato-centro { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 520px; }
.acc-frase { font-size: 40px; line-height: 1.17; font-weight: 600; letter-spacing: -.02em; margin: 0 0 24px; color: var(--d-text); }
/* I quattro fumetti, alle misure del PDF (pag. 34) su una larghezza di 484 px. */
.acc-fumetti { display: flex; flex-wrap: wrap; gap: 24px 16px; max-width: 484px; }
.acc-fumetti span { display: block; height: 76px; border-radius: 10px 10px 10px 2px; }
.acc-fumetti .f1 { flex: 0 0 62.4%; background: var(--d-secondary); margin-right: 30%; }
.acc-fumetti .f2 { flex: 0 0 70.9%; height: 96px; margin-left: 29.1%; background: var(--d-primary); border-radius: 10px 10px 2px 10px; display: flex; align-items: center; gap: 8px; padding: 0 32px; }
.acc-fumetti .f2 i { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.acc-fumetti .f3 { flex: 0 0 41.5%; height: 60px; background: var(--d-text); }
.acc-fumetti .f4 { flex: 1; height: 60px; background: var(--d-st-attesa); border-radius: 10px 10px 2px 10px; }
.acc-piede { margin: 0; font-size: 13px; color: var(--d-text-2); }
.acc-destra { display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.acc-contenuto { width: 100%; max-width: 404px; }
.acc-modulo { display: grid; gap: 16px; margin-top: 20px; }
/* Un campo con l'icona dentro (e, per la password, l'occhio): l'etichetta la
   scrive la view, il campo è <#Input/> senza etichetta. */
.acc-campo > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.acc-campo-riga { position: relative; }
.acc-campo-riga input { padding-left: 38px !important; height: 44px; }
.acc-campo-riga.con-occhio input { padding-right: 42px !important; }
.acc-campo-icona { position: absolute; left: 13px; top: 0; height: 44px; display: flex; align-items: center; color: var(--d-text-3); pointer-events: none; z-index: 1; }
.acc-occhio { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border: 0; background: transparent; border-radius: 6px; color: var(--d-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; }
.acc-occhio[hidden] { display: none; }
.acc-occhio:hover { background: var(--d-surface-hover); }
.acc-occhio .no, .acc-occhio[aria-pressed="true"] .si { display: none; }
.acc-occhio[aria-pressed="true"] .no { display: flex; }
.acc-riga { display: flex; justify-content: flex-end; font-size: 13px; margin-top: -4px; }
.acc-link { color: var(--d-primary); font-weight: 600; text-decoration: none; }
.acc-link:hover { text-decoration: underline; }
.acc-indietro { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; margin-bottom: 16px; }
.acc-invio { width: 100%; height: 44px; justify-content: center; }
.acc-centro { text-align: center; margin: 16px 0 0; font-size: 13px; }
.acc-nota { font-size: 12px; line-height: 1.6; color: var(--d-text-2); margin: 20px 0 0; }
.acc-modulo .acc-nota { margin-top: 0; }
.acc-avviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; font-size: 13px; line-height: 1.45; margin-top: 20px; }
.acc-avviso > svg { flex: none; margin-top: 1px; }
.acc-avviso.ko { background: var(--d-error-tint); color: var(--d-error); }
.acc-avviso.ok { background: var(--d-success-tint); color: var(--d-success); }
.acc-avviso.attenzione { background: var(--d-warning-tint); color: var(--d-warning); }
.acc-avviso a { color: inherit; font-weight: 600; }
.acc-icona { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--d-primary-tint); color: var(--d-primary); margin-bottom: 16px; }
.acc-icona.ok { background: var(--d-success-tint); color: var(--d-success); }
.acc-icona.ko { background: var(--d-error-tint); color: var(--d-error); }
.acc-contenuto > .acc-invio { margin-top: 20px; }
.acc-di-nuovo { border: 0; background: none; font: inherit; font-size: 13px; color: var(--d-primary); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.acc-di-nuovo:disabled { color: var(--d-text-3); cursor: default; }
.acc-invio:disabled { background: var(--d-surface-sunken); border-color: var(--d-border); color: var(--d-text-3); cursor: default; }
.acc-coincide { margin: 6px 0 0; font-size: 12px; min-height: 1em; }
.acc-coincide.si { color: var(--d-success); }
.acc-coincide.no { color: var(--d-error); }
@media (max-width: 899px) { .acc.acc-diviso { grid-template-columns: 1fr; } .acc-lato { display: none; } .acc-destra { padding: 32px 16px; } }
.acc-robustezza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: center; margin-top: 8px; }
.acc-robustezza span { height: 4px; border-radius: 2px; background: var(--d-border); }
.acc-robustezza b { grid-column: 1 / -1; font-size: 12px; font-weight: 500; color: var(--d-text-3); }
.acc-robustezza[data-livello="3"] b, .acc-robustezza[data-livello="4"] b { color: var(--d-success); }
.acc-robustezza[data-livello="1"] b { color: var(--d-error); }
.acc-robustezza[data-livello="2"] b { color: var(--d-warning); }
.acc-robustezza[data-livello="1"] span:nth-child(-n+1) { background: var(--d-error); }
.acc-robustezza[data-livello="2"] span:nth-child(-n+2) { background: var(--d-warning); }
.acc-robustezza[data-livello="3"] span:nth-child(-n+3) { background: var(--d-success); }
.acc-robustezza[data-livello="4"] span:nth-child(-n+4) { background: var(--d-success); }

/* ── IL PROFILO (§8.8) ─────────────────────────────────────────────────── */
.prf { max-width: 1180px; }
.prf-notifiche { width: 100%; border-collapse: collapse; font-size: 14px; }
.prf-notifiche th, .prf-notifiche td { padding: 8px 6px; border-bottom: 1px solid var(--d-border); text-align: left; }
.prf-notifiche thead th { font-size: 12px; color: var(--d-text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.prf-notifiche td { width: 110px; }
.prf-notifiche td label > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── LA CAMPANELLA E I TOAST (§8.5) ────────────────────────────────────── */
.d-campanella { position: relative; }
.d-campanella > summary { list-style: none; position: relative; }
.d-campanella > summary::-webkit-details-marker { display: none; }
.d-pannello-notifiche { position: fixed; left: 72px; bottom: 16px; z-index: 60; width: 420px; max-width: calc(100vw - 88px); max-height: min(640px, calc(100dvh - 32px)); display: flex; flex-direction: column; background: var(--d-surface-raised, var(--d-surface)); border: 1px solid var(--d-border); border-radius: 12px; box-shadow: var(--d-shadow-3); }
.d-pn-testa { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.d-pn-schede { display: flex; flex-wrap: wrap; flex: 1; min-height: 0; }
.d-pn-schede > input { position: absolute; opacity: 0; pointer-events: none; }
.d-pn-schede > label { padding: 6px 12px; margin: 0 0 8px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--d-text-2); }
.d-pn-schede > input:checked + label { background: var(--d-primary-tint); color: var(--d-primary); font-weight: 600; }
.d-pn-schede > input:focus-visible + label { outline: 2px solid var(--d-primary); }
.d-pn-corpo { width: 100%; overflow-y: auto; border-top: 1px solid var(--d-border); max-height: 480px; }
#pn-nuove:checked ~ .d-pn-corpo .d-pn-lette { display: none; }
.d-pn-voce { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; color: var(--d-text-2); text-decoration: none; font-size: 13px; line-height: 19px; border-bottom: 1px solid var(--d-border); }
.d-pn-voce.nuova { color: var(--d-text); background: var(--d-primary-tint); }
.d-pn-voce:hover { background: var(--d-surface-sunken); }
.d-pn-voce .grow { flex: 1; min-width: 0; }
.d-pn-vuoto { padding: 20px 16px; color: var(--d-text-3); font-size: 13px; margin: 0; }
.d-pn-piede { padding: 10px 16px; font-size: 13px; color: var(--d-primary); text-decoration: none; border-top: 1px solid var(--d-border); }
.d-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; flex-direction: column; gap: 8px; }
.d-toasts .d-toast { position: static; }
.d-banner-canale { margin-left: 64px; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--d-error-tint); color: var(--d-error); font-size: 13px; }
.d-banner-canale a { color: inherit; font-weight: 600; }
@media (max-width: 767px) { .d-banner-canale { margin-left: 56px; } .d-pannello-notifiche { left: 8px; right: 8px; width: auto; max-width: none; } }

/* ── LA DENSITÀ COMPATTA (§8.8) ────────────────────────────────────────── */
body:has(.d-rail[data-densita="compatta"]) .cv-voce, body:has(.d-rail[data-densita="compatta"]) .tl-tabella td { padding-top: 6px; padding-bottom: 6px; }
body:has(.d-rail[data-densita="compatta"]) .bolla { padding: 8px 12px; }
body:has(.d-rail[data-densita="compatta"]) .cv-flusso { padding-top: 4px; }
body:has(.d-rail[data-densita="compatta"]) .tl-tabella td, body:has(.d-rail[data-densita="compatta"]) .cv-voce { font-size: 13px; }
.cv-novita { display: flex; align-items: center; gap: 10px; margin: 8px 24px 0; padding: 8px 12px; border-radius: 10px; background: var(--d-primary-tint); color: var(--d-primary); font-size: 13px; }
.cv-novita[hidden] { display: none; }
.cv-novita span { flex: 1; }

/* ── IL MODULO WEB (§9) ────────────────────────────────────────────────── */
.wf-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; background: var(--d-surface); border-bottom: 1px solid var(--d-border); }
.wf-marchio { display: flex; align-items: center; gap: 10px; }
.wf-marchio img { height: 32px; }
.wf-orari { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--d-text-2); }
.wf { max-width: 1120px; margin: 0 auto; padding: 32px 24px 48px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; }
.wf-spiega h1 { font-size: 26px; line-height: 34px; margin: 0 0 8px; }
.wf-spiega p { color: var(--d-text-2); }
.wf-passi { list-style: none; counter-reset: p; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 14px; }
.wf-passi li { counter-increment: p; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; font-size: 14px; }
.wf-passi li::before { content: counter(p); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--d-primary-tint); color: var(--d-primary); font-weight: 600; font-size: 13px; }
.wf-passi span { color: var(--d-text-2); }
.wf-riquadro { padding: 12px 14px; border-radius: 10px; background: var(--d-surface-sunken); font-size: 13px; color: var(--d-text-2); }
.wf-scheda { background: var(--d-surface); border: 1px solid var(--d-border); border-radius: 16px; padding: 28px; box-shadow: var(--d-shadow-1); }
.wf-scheda h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 14px; }
.wf-scheda h2 + .adm-campi + h2 { margin-top: 28px; }
.wf-n { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--d-primary); color: var(--d-on-primary); font-size: 13px; }
.wf-civetta { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wf-blocco { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wf-blocco legend { font-size: 13px; font-weight: 500; margin-bottom: 6px; padding: 0; }
.wf-opzione { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--d-border); border-radius: 999px; cursor: pointer; font-size: 14px; }
.wf-opzione:has(input:checked) { border-color: var(--d-primary); background: var(--d-primary-tint); color: var(--d-primary); }
.wf-opzione input { accent-color: var(--d-primary); }
.wf-fondo { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--d-border); display: flex; flex-direction: column; gap: 10px; }
.wf-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.wf-privacy input { margin-top: 3px; accent-color: var(--d-primary); }
.wf-invia { align-self: flex-start; height: 44px; padding: 0 22px; }
.wf-fatto { grid-column: 1 / -1; max-width: 560px; margin: 0 auto; text-align: center; }
.wf-fatto .acc-icona { margin: 0 auto 8px; }
.wf-riepilogo { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; text-align: left; margin: 18px auto; max-width: 420px; font-size: 14px; }
.wf-riepilogo dt { color: var(--d-text-3); }
.wf-riepilogo dd { margin: 0; }
.wf-piede { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; padding: 20px 16px 32px; font-size: 12px; color: var(--d-text-3); }
.wf-piede a { color: inherit; }
@media (max-width: 899px) { .wf { grid-template-columns: 1fr; padding: 20px 16px; } .wf-spiega .wf-passi, .wf-spiega .wf-riquadro { display: none; } .wf-scheda { padding: 20px 16px; } }

/* ── COMPOSITORE, FUMETTI E TAB (§6.4–§6.8) ───────────────────────────── */
.cv-tabs-freccia { flex: none; align-self: center; width: 28px; height: 28px; border: 0; background: transparent; border-radius: 6px; color: var(--d-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cv-tabs-freccia[hidden] { display: none; }
.cv-tabs-freccia:disabled { opacity: .35; cursor: default; }
.cv-tabs-menu { display: flex; }
.cv-tabs-menu > summary { list-style: none; cursor: pointer; height: 100%; }
.cv-tabs-menu > summary::-webkit-details-marker { display: none; }
.cv-tag-prog { margin-left: 8px; white-space: nowrap; }
.bolla-riga { position: relative; }
.bolla-barra { position: absolute; top: -14px; left: 12px; z-index: 3; display: none; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; background: var(--d-surface); border: 1px solid var(--d-border); box-shadow: var(--d-shadow-2); }
.bolla-riga.destra .bolla-barra { left: auto; right: 12px; }
.bolla-riga:hover > .bolla-barra, .bolla-riga:focus-within > .bolla-barra { display: flex; }
.bolla-barra > button, .bolla-barra > form > button, .bolla-barra > details > summary { border: 0; background: transparent; padding: 4px 8px; border-radius: 6px; font: inherit; font-size: 12px; color: var(--d-text-2); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.bolla-barra > button:hover, .bolla-barra > form > button:hover, .bolla-barra > details > summary:hover { background: var(--d-surface-sunken); color: var(--d-text); }
.bolla-barra summary::-webkit-details-marker { display: none; }
/* Il menu ⋯ si apre verso l'interno del fumetto: a destra per quelli del
   cliente (a sinistra c'è la lista), a sinistra per i nostri. */
.bolla-barra .d-tendina > .d-menu { top: calc(100% + 4px); left: 0; right: auto; }
.bolla-riga.destra .bolla-barra .d-tendina > .d-menu { left: auto; right: 0; }
.bolla-riprog { width: 300px; }
.bolla-prog { display: inline-flex; align-items: center; gap: 4px; color: var(--d-primary); font-weight: 500; }
.bolla-testo.lunga { max-height: calc(20 * 1.5em); overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.bolla-tutto { border: 0; background: none; padding: 4px 0 0; color: var(--d-primary); font: inherit; font-size: 13px; cursor: pointer; }
.cv-comp-rif { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--d-text-3); cursor: pointer; max-width: 50%; }
.cv-comp-rif input { position: absolute; opacity: 0; pointer-events: none; }
.cv-comp-rif-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-comp-rif-x { font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.cv-comp-rif:hover .cv-comp-rif-x { background: var(--d-surface-sunken); color: var(--d-text); }
.cv-comp-rif:has(input:checked) .cv-comp-rif-testo { text-decoration: line-through; }
.cv-comp-cc { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--d-text-3); padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.cv-comp-cc[aria-pressed="true"] { color: var(--d-primary); background: var(--d-primary-tint); }
.cv-comp-riga[hidden] { display: none; }
.cv-comp-firma { font-size: 13px; color: var(--d-text-3); white-space: pre-line; padding: 4px 2px 0; }
.cv-comp-firma a { color: var(--d-primary); font-size: 12px; }
.cv-comp-allegati { padding: 0 16px 8px; }
.cv-comp-strumenti { display: inline-flex; gap: 2px; margin-right: 10px; }
.cv-comp-strumenti button { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--d-text-2); font: inherit; display: inline-flex; align-items: center; justify-content: center; }
.cv-comp-strumenti button:hover { background: var(--d-surface-sunken); }
.cv-prog { position: relative; }
.cv-prog > summary { list-style: none; }
.cv-prog > summary::-webkit-details-marker { display: none; }
.d-tendina > .cv-prog-dialogo { max-height: 70vh; overflow: auto; bottom: calc(100% + 6px); top: auto; right: 0; left: auto; width: 340px; }
.cv-prog-campi { display: grid; gap: 10px; padding: 10px; border-top: 1px solid var(--d-border); margin-top: 6px; }
.cv-invia-split { display: inline-flex; }
.cv-invia-split .cv-invia { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cv-invia-split .d-tendina > summary { list-style: none; }
.cv-invia-split .d-tendina > summary::-webkit-details-marker { display: none; }
.cv-invia-freccia { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255,255,255,.35); padding: 0 8px; }
.d-tendina > .cv-invia-stati { bottom: calc(100% + 6px); top: auto; right: 0; left: auto; min-width: 240px; }
.cv-invia-nota { display: none; }
.cv-compositore:has(#tipo-nota:checked) .cv-invia-email { display: none; }
.cv-compositore:has(#tipo-nota:checked) .cv-invia-nota { display: inline; }
.cv-compositore:has(#tipo-nota:checked) .cv-invia-split .d-tendina, .cv-compositore:has(#tipo-nota:checked) .cv-prog { display: none; }
.cv-novita + .cv-sola-lettura { margin-top: 8px; }

/* ── VISUALIZZA ORIGINALE (§6.6) ──────────────────────────────────────── */
.og-pagina { max-width: 960px; }
.og-testa { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; font-size: 13px; }
.og-testa dt { color: var(--d-text-3); }
.og-testa dd { margin: 0; overflow-wrap: anywhere; }
.og-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; }
.og-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.og-avviso { display: inline-flex; align-items: center; gap: 6px; color: var(--d-warning, #9a6700); font-size: 13px; }
.og-corpo { display: block; width: 100%; height: 70vh; min-height: 320px; border: 1px solid var(--d-border); border-radius: 10px; background: #fff; resize: vertical; }
.og-tutte { margin-top: 12px; }
.og-tutte > summary { cursor: pointer; color: var(--d-text-2); font-size: 13px; }
.og-tutte table { border-collapse: collapse; margin-top: 8px; width: 100%; }
.og-tutte th { text-align: left; vertical-align: top; padding: 2px 12px 2px 0; color: var(--d-text-3); white-space: nowrap; font-weight: 500; }
.og-tutte td { padding: 2px 0; overflow-wrap: anywhere; }

/* ── ANTEPRIMA DEI COMPONENTI (M1) ────────────────────────────────────── */
.cmp { max-width: 1100px; }
.cmp-sez { background: var(--d-surface); border: 1px solid var(--d-border); border-radius: 12px; padding: 20px 24px; margin-top: 16px; display: grid; gap: 10px; }
.cmp-sez h2 { margin: 0 0 4px; font-size: 18px; }
.cmp-sez h3 { margin: 8px 0 0; font-size: 13px; color: var(--d-text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cmp-tavolozza { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cmp-tavolozza figure, .cmp-icone figure { margin: 0; display: grid; gap: 4px; justify-items: start; }
.cmp-campione { width: 100%; height: 40px; border-radius: 8px; border: 1px solid var(--d-border); }
.cmp-tavolozza figcaption, .cmp-icone figcaption { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--d-text-3); overflow-wrap: anywhere; }
.cmp-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cmp-pillola { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid currentColor; }
.cmp-pillola[class*="st-bg-"] { border-color: transparent; }
.cmp-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 16px; align-items: start; }
.cmp-flusso { background: var(--d-bg); border-radius: 10px; padding: 12px 16px; }
.cmp-icone { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; color: var(--d-text-2); }
.cmp-icone figure { justify-items: center; text-align: center; }

/* ── DA TELEFONO (§11 «responsive»): niente scorrimento orizzontale ───── */
@media (max-width: 767px) {
    .cv-filtri { flex-wrap: wrap; }
    .cv-cliente { flex-wrap: wrap; }
    .cv-cliente-azioni { margin-left: 0; flex-wrap: wrap; }
    .cv-ticket-r1 { flex-wrap: wrap; }
    .cv-ticket-oggetto { flex-basis: 100%; order: -1; white-space: normal; }
    .cv-ticket-azioni { flex-wrap: wrap; }
    .cv-comp-testa { flex-wrap: wrap; }
    .d-segmentato { max-width: 100%; overflow-x: auto; }
    .d-segmentato label { white-space: nowrap; }
    .cv-comp-rif { margin-left: 0; max-width: 100%; flex-basis: 100%; }
    .d-tendina > .d-menu { max-width: calc(100vw - 72px); }
    .tl-testa { flex-wrap: wrap; }
    .cv-prog-dialogo, .cv-invia-stati { max-width: calc(100vw - 32px); }
    .cv-comp-riga { flex-wrap: wrap; }
    .cv-comp-barra { flex-wrap: wrap; row-gap: 8px; }
    .cv-comp-barra .sx { flex-basis: 100%; }
}

/* ── DESTINATARI: «Nuovo» ed «esterno al dominio» (§6.7 punto 3) ──────── */
.cv-dest-nota { padding: 6px 12px 6px 58px; border-bottom: 1px solid var(--d-border); font-size: 12px; color: var(--d-text-2); display: grid; gap: 4px; }
.cv-dest-nota[hidden] { display: none; }
.cv-dest-nota p { margin: 0; overflow-wrap: anywhere; }
.cv-dest-nota .d-tag { margin-right: 4px; }
.cv-proposta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── ALLEGATI NEL FUMETTO: miniature e «Tutti gli N allegati» (§6.6) ──── */
.allegato-img { display: block; width: 96px; height: 72px; border-radius: 6px; overflow: hidden; border: 1px solid var(--d-border); background: var(--d-surface-sunken); }
.allegato-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bolla-altri-allegati > summary { cursor: pointer; font-size: 13px; color: var(--d-primary); margin-top: 4px; }

/* ── IL COMPOSITORE COME NEL PDF (pag. 9, 14) ─────────────────────────── */
.cv-tipo-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cv-comp-testa { gap: 8px; padding: 8px 12px; }
.cv-tipo > summary { list-style: none; }
.cv-tipo > summary::-webkit-details-marker { display: none; }
.cv-tipo-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--d-border); border-radius: 8px; background: var(--d-surface); font-size: 13px; font-weight: 600; color: var(--d-text); cursor: pointer; white-space: nowrap; }
.cv-tipo-btn:hover { background: var(--d-surface-hover); }
.cv-tipo-btn > span { display: none; align-items: center; gap: 6px; }
.cv-compositore:has(#tipo-risposta:checked) .t-risposta,
.cv-compositore:has(#tipo-tutti:checked) .t-tutti,
.cv-compositore:has(#tipo-inoltro:checked) .t-inoltro,
.cv-compositore:has(#tipo-nota:checked) .t-risposta { display: inline-flex; }
.cv-compositore:has(#tipo-nota:checked) .cv-tipo-btn { font-weight: 400; color: var(--d-text-2); background: transparent; }
.d-tendina > .cv-tipo-menu { left: 0; right: auto; top: calc(100% + 4px); min-width: 210px; }
.cv-tipo-menu .d-menu-voce { cursor: pointer; }
.cv-compositore:has(#tipo-risposta:checked) label[for="tipo-risposta"],
.cv-compositore:has(#tipo-tutti:checked) label[for="tipo-tutti"],
.cv-compositore:has(#tipo-inoltro:checked) label[for="tipo-inoltro"] { color: var(--d-primary); font-weight: 600; }
.cv-tipo-nota { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--d-text-2); cursor: pointer; white-space: nowrap; }
.cv-tipo-nota:hover { background: var(--d-surface-hover); }
.cv-compositore:has(#tipo-nota:checked) .cv-tipo-nota { background: var(--d-note-bg); border-color: var(--d-note-border); color: var(--d-note-ink); }
.cv-compositore:has(.cv-tipo-radio:focus-visible) .cv-tipo-btn { outline: 2px solid var(--d-primary); }
.cv-comp-testa .cv-comp-rif { flex: 1; min-width: 0; max-width: none; margin-left: 4px; display: flex; align-items: center; gap: 10px; cursor: default; color: var(--d-text-3); font-size: 12px; }
.cv-comp-rif-et { white-space: nowrap; }
.cv-comp-rif-box { flex: 1; min-width: 0; display: grid; padding: 4px 12px; border-left: 3px solid var(--d-secondary); background: var(--d-surface-sunken); border-radius: 0 6px 6px 0; line-height: 18px; }
.cv-comp-rif-chi { color: var(--d-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-comp-rif-chi b { color: var(--d-secondary); font-weight: 600; margin-right: 4px; }
.cv-comp-rif-riga { color: var(--d-text-2); font-size: 13px; }
.cv-comp-testa .cv-comp-rif[hidden] { display: none; }
.cv-comp-rif-x { flex: none; display: inline-flex; padding: 6px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--d-text-3); }
.cv-comp-rif-x:hover { background: var(--d-surface-hover); color: var(--d-text); }
.cv-comp-da { font-weight: 600; color: var(--d-text); }
.cv-comp-cc { color: var(--d-primary); }
.cv-comp-cc[aria-pressed="true"] { background: var(--d-primary-tint); }
.cv-comp-corpo textarea { border: 0 !important; box-shadow: none !important; padding: 12px 0; resize: vertical; min-height: 110px; background: transparent; }
.cv-comp-corpo { padding: 4px 16px 8px; }
.cv-comp-firma { border-top: 1px solid var(--d-border); margin-top: 8px; padding-top: 8px; white-space: pre-line; font-size: 13px; color: var(--d-text-2); }
.cv-comp-barra { gap: 10px; }
.cv-comp-barra .cv-comp-strumenti { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
.cv-comp-sep { width: 1px; height: 18px; background: var(--d-border); margin: 0 6px; }
.cv-comp-barra .cv-comp-allegati { padding: 0; display: inline-flex; align-items: center; }
.cv-comp-barra .cv-comp-allegati .nova-allegati-graffetta { width: 28px !important; height: 28px !important; border-radius: 6px !important; color: var(--d-text-2); }
.cv-comp-firma-link { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--d-text-2); }
.cv-comp-firma-link:hover { background: var(--d-surface-sunken); }
.cv-comp-barra .sx { margin-left: auto; margin-right: 0; text-align: right; font-size: 12px; }
.cv-bozza { display: inline-flex; align-items: center; gap: 4px; }

/* ── «PROGRAMMA INVIO»: un dialogo, non una tendina (PDF pag. 15) ─────── */
.cv-prog > summary { list-style: none; }
.cv-prog > summary::-webkit-details-marker { display: none; }
.cv-prog[open] > summary { border-color: var(--d-primary); box-shadow: 0 0 0 1px var(--d-primary); }
.cv-prog-velo { position: fixed; inset: 0; background: rgba(15, 18, 23, .45); z-index: 60; }
.cv-prog-dialogo { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; background: var(--d-surface); color: var(--d-text); border-radius: 12px; box-shadow: var(--d-shadow-3); z-index: 61; padding: 22px 24px 0; text-align: left; }
.cv-prog-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cv-prog-testa h3 { margin: 0; font-size: 18px; line-height: 26px; }
.cv-prog-testa p { margin: 2px 0 0; font-size: 13px; color: var(--d-text-2); }
.cv-prog-rapidi { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; font-size: 13px; }
.cv-prog-rapidi b { margin-right: 4px; }
.cv-prog-chip, .cv-prog-ora { height: 34px; padding: 0 12px; border: 1px solid var(--d-border); border-radius: 8px; background: var(--d-surface); font: inherit; font-size: 13px; color: var(--d-text); cursor: pointer; }
.cv-prog-chip:hover, .cv-prog-ora:hover { background: var(--d-surface-hover); }
.cv-prog-chip.scelto, .cv-prog-ora.scelto { border-color: var(--d-primary); background: var(--d-primary-tint); color: var(--d-primary); font-weight: 600; }
.cv-prog-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cv-prog-et { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.cv-prog-orari { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.cv-prog-ora { padding: 0; }
.cv-prog-scrivi { position: relative; width: 140px; margin-bottom: 16px; }
.cv-prog-scrivi .acc-campo-icona { height: 40px; left: 12px; }
.cv-prog-scrivi input { padding-left: 36px !important; }
.cv-prog-riepilogo { background: var(--d-surface-sunken); border-radius: 10px; padding: 12px 16px; margin-top: 18px; display: grid; gap: 8px; font-size: 13px; }
.cv-prog-riepilogo p { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--d-text); }
.cv-prog-riepilogo p svg { color: var(--d-primary); flex: none; }
.cv-prog-riepilogo .fuso { font-weight: 400; color: var(--d-text-3); }
.cv-prog-piede { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--d-border); margin: 20px -24px 0; padding: 14px 24px; position: sticky; bottom: 0; background: var(--d-surface); }
@media (max-width: 767px) { .cv-prog-corpo { grid-template-columns: 1fr; } .cv-comp-testa .cv-comp-rif { flex-basis: 100%; margin-left: 0; } }
/* La barra della risposta programmata (PDF pag. 16): «Invia ora» in evidenza. */
.bolla-barra-prog > form > button.primario { background: var(--d-primary); color: var(--d-on-primary); font-weight: 600; }
.bolla-barra-prog > form > button.primario:hover { background: var(--d-primary-hover); color: var(--d-on-primary); }
.bolla-barra-prog { right: 12px; left: auto; }
/* Il calendario del dialogo (PDF pag. 15). */
.cv-cal-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.cv-cal-testa button { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 6px; color: var(--d-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cv-cal-testa button:hover:not(:disabled) { background: var(--d-surface-hover); }
.cv-cal-testa button:disabled { opacity: .3; cursor: default; }
.cv-cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cv-cal-sett { font-size: 11px; font-weight: 600; color: var(--d-text-3); padding: 4px 0 6px; }
.cv-cal-g { position: relative; height: 36px; border: 0; background: transparent; border-radius: 8px; font: inherit; font-size: 13px; color: var(--d-text); cursor: pointer; }
.cv-cal-g:hover:not(:disabled) { background: var(--d-surface-hover); }
.cv-cal-g:disabled { color: var(--d-text-disabled); cursor: default; }
.cv-cal-g.oggi { font-weight: 600; }
.cv-cal-g.oggi::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--d-primary); }
.cv-cal-g.scelto { background: var(--d-primary); color: var(--d-on-primary); font-weight: 600; }
.cv-cal-g.scelto::after { background: var(--d-on-primary); }
/* I destinatari come nel PDF (pag. 9): niente riquadro attorno alle etichette,
   etichette chiare; la riga d'aiuto di <#Tags/> (e i suoi rifiuti) solo mentre
   si scrive. Si aggancia alla STRUTTURA del componente, non alle sue classi. */
.cv-comp-dest > div > div > div:first-child { border-color: transparent !important; box-shadow: none !important; background: transparent !important; padding-left: 0 !important; min-height: 36px; }
.cv-comp-dest span:has(> input[type="hidden"][name]) { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; color: var(--d-text) !important; font-weight: 500; }
.cv-comp-dest span:has(> input[type="hidden"][name]) button { color: var(--d-text-3) !important; }
.cv-comp-dest:not(:focus-within) p[id$="-nota"] { display: none; }

/* ── L'EDITOR DEL COMPOSITORE (§6.7 punto 4) e i fumetti formattati ───── */
.cv-editor { min-height: 110px; max-height: 50vh; overflow-y: auto; padding: 12px 0; outline: none; line-height: 1.55; font-size: 14px; color: var(--d-text); overflow-wrap: anywhere; }
.cv-editor.vuoto::before { content: attr(data-placeholder); color: var(--d-text-3); pointer-events: none; position: absolute; }
.cv-editor ul { margin: 4px 0; padding-left: 22px; }
.cv-editor a, .bolla-testo.fmt a { color: var(--d-primary); text-decoration: underline; }
.bolla-testo.fmt { white-space: normal; }

/* ── L'ANTEPRIMA DEGLI ALLEGATI ───────────────────────────────────────── */
.cv-anteprima { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cv-anteprima[hidden] { display: none; }
.cv-anteprima-velo { position: absolute; inset: 0; background: rgba(15, 18, 23, .72); }
.cv-anteprima-scheda { position: relative; width: min(1100px, 100%); height: min(860px, 100%); display: flex; flex-direction: column; background: var(--d-surface); border-radius: 12px; box-shadow: var(--d-shadow-3); overflow: hidden; }
.cv-anteprima-testa { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--d-border); min-width: 0; font-size: 14px; }
.cv-anteprima-testa b { min-width: 0; }
.cv-anteprima-testa .d-tenue { font-size: 12px; white-space: nowrap; }
.cv-anteprima-corpo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--d-surface-sunken); }
.cv-anteprima-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cv-anteprima-corpo iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.cv-anteprima-nessuna { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--d-text-2); font-size: 14px; margin: 0; }
.cv-anteprima-nessuna[hidden] { display: none; }
.cv-anteprima-freccia { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--d-border); background: var(--d-surface); color: var(--d-text); box-shadow: var(--d-shadow-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cv-anteprima-freccia[hidden], .cv-anteprima-testa [hidden] { display: none; }
.cv-anteprima-freccia.sx { left: 16px; }
.cv-anteprima-freccia.dx { right: 16px; }
body.con-anteprima { overflow: hidden; }
a.allegato[data-anteprima], a.allegato-img[data-anteprima] { cursor: pointer; }
@media (max-width: 767px) { .cv-anteprima { padding: 0; } .cv-anteprima-scheda { height: 100%; border-radius: 0; } }
.cv-anteprima-corpo iframe.cv-anteprima-doc { background: #fff; }
.cv-anteprima-attesa { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--d-border); border-top-color: var(--d-primary); animation: cv-gira .8s linear infinite; }
@keyframes cv-gira { to { transform: rotate(360deg); } }
/* Con la nota interna il tipo di risposta non ha senso: resta solo il
   pulsante «Nota interna», che riporta al messaggio. */
.cv-compositore:has(#tipo-nota:checked) .cv-tipo { display: none; }

/* ── LO SKELETON MENTRE SI CARICA L'AREA (PDF pag. 22) ────────────────── */
.cv-area { position: relative; }
.cv-skeleton { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--d-bg); animation: cv-sk-entra .12s ease-out .08s both; }
@keyframes cv-sk-entra { from { opacity: 0; } to { opacity: 1; } }
.cv-sk-barra { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--d-surface-sunken) 0%, var(--d-surface-hover) 50%, var(--d-surface-sunken) 100%); background-size: 200% 100%; animation: cv-sk-luce 1.4s linear infinite; }
@keyframes cv-sk-luce { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cv-sk-testa { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--d-surface); border-bottom: 1px solid var(--d-border); }
.cv-sk-av { width: 40px; height: 40px; border-radius: 50%; background: var(--d-surface-sunken); flex: none; }
.cv-sk-tabs { display: flex; gap: 24px; padding: 14px 20px; background: var(--d-surface); border-bottom: 1px solid var(--d-border); }
.cv-sk-ticket { padding: 14px 20px; background: var(--d-surface); border-bottom: 1px solid var(--d-border); display: grid; gap: 10px; }
.cv-sk-flusso { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.cv-sk-bolla { height: 64px; width: 45%; border-radius: 12px; }
.cv-sk-bolla.destra { align-self: flex-end; width: 50%; height: 84px; }
.cv-sk-attesa { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--d-text-3); padding: 8px; }
.cv-sk-attesa .cv-anteprima-attesa { width: 14px; height: 14px; border-width: 2px; }
.cv-sk-comp { margin: 0 24px 16px; height: 44px; border-radius: 22px; border: 1px solid var(--d-border); background: var(--d-surface); display: flex; align-items: center; padding: 0 18px; font-size: 13px; color: var(--d-text-3); }
@media (prefers-reduced-motion: reduce) { .cv-sk-barra { animation: none; } }

/* ── LA SCHEDA CLIENTE IN UN RIQUADRO (vista conversazioni) ───────────── */
.cv-modale { position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cv-modale[hidden] { display: none; }
.cv-modale-velo { position: absolute; inset: 0; background: rgba(15, 18, 23, .55); }
.cv-modale-scheda { position: relative; width: min(1180px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--d-bg); border-radius: 12px; box-shadow: var(--d-shadow-3); overflow: hidden; }
.cv-modale-testa { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; background: var(--d-surface); border-bottom: 1px solid var(--d-border); font-size: 14px; }
.cv-modale-corpo { position: relative; flex: 1; min-height: 240px; overflow-y: auto; padding: 20px 24px; }
.cv-modale-corpo .cl { max-width: none; }
.cv-modale-corpo .cl-indietro { display: none; }
.cv-modale-attesa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--d-bg); }
.cv-modale-attesa[hidden] { display: none; }
body.con-modale { overflow: hidden; }
@media (max-width: 767px) { .cv-modale { padding: 0; } .cv-modale-scheda { height: 100%; border-radius: 0; } }