/* =====================================================================
   Tema SmartEvolution — palette del sito istituzionale smartevolution.it
   (blu pieno #0D4DA1, nessun gradiente):
     - Topbar:   #0D4DA1 piatto, testo bianco
     - Sidebar:  bianca, voce attiva a tint chiaro con barra blu a sinistra
     - Body:     #F5F7FA
     - Primario: #0D4DA1 (scuro #093A7D)
     - Badge:    #3EB839

   La sezione 13 in fondo contiene la revisione grafica del 2026-09-23
   ("look clinico") e SOVRASCRIVE alcune scelte delle sezioni precedenti:
   se una regola qui sopra sembra non avere effetto, cercala lì.
   ===================================================================== */

:root {
    --se-primary: #0D4DA1;
    --se-primary-dark: #093A7D;
    --se-topbar-start: #0D4DA1;
    --se-topbar-end: #0D4DA1;
    --se-body-bg: #F5F7FA;
    --se-menu-hover: #EEF3FB;
    --se-badge: #3EB839;
    --se-text: #1B2330;
    --se-text-secondary: #67748A;
    --se-border: #E6EBF2;

    /* --- Superfici, raggi e ombre (revisione grafica 2026-09-23) ------------
       Look "clinico": bordi tenui, raggi ampi, ombre basse e diffuse. Sono
       token, non valori sparsi: per cambiare il carattere dell'interfaccia si
       toccano questi, non le singole regole. */
    --se-surface: #FFFFFF;
    --se-surface-muted: #F8FAFC;
    --se-border-soft: #EDF1F7;
    --se-border-strong: #D6DEEA;
    --se-radius-sm: 8px;
    --se-radius: 12px;
    --se-radius-lg: 16px;
    --se-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
    --se-shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
    --se-primary-soft: #EAF1FC;
    --se-error: #A94442;
    --se-success: #5CB85C;
    --se-info: #5BC0DE;
    --se-warning: #F0AD4E;
    --se-danger: #D9534F;

    /* Varianti -rgb (per rgba() negli hover/focus) e accento: usate dal layer
       effetti (sezione 12 di questo file, vedi docs/rules/ui-effects.md) ma
       finora MAI definite qui — gli hover/focus con colore accento erano
       silenziosamente trasparenti (var() su una custom property inesistente
       non genera errore, semplicemente non applica nulla). Accento = --se-info
       (unico colore della palette gia' distinto dal primario navy). */
    --se-primary-rgb: 13, 77, 161;
    --se-primary-dark-rgb: 9, 58, 125;
    --se-accent: var(--se-info);
    --se-accent-rgb: 91, 192, 222;
    --se-accent-soft: #DCF1F8;

    /* Override variabili Radzen (tema material). !important necessario perché
       <RadzenTheme> inietta il suo material-base.css nell'<head> a runtime,
       DOPO questo file: a parità di specificità (:root) vince l'ultimo
       caricato, quindi senza !important il --rz-primary di Radzen (#4340D2)
       sovrascriverebbe il nostro. */
    --rz-primary: #0D4DA1 !important;
    --rz-primary-dark: #093A7D !important;
    --rz-primary-light: #3B6FB5 !important;
    --rz-secondary: #5BC0DE !important;
    --rz-header-background-color: #0D4DA1 !important;
    --rz-header-color: #FFFFFF !important;
    --rz-sidebar-background-color: #FFFFFF !important;
    --rz-body-background-color: #F5F7FA !important;
    --rz-success: #5CB85C !important;
    --rz-danger: #D9534F !important;
    --rz-warning: #F0AD4E !important;
    --rz-info: #5BC0DE !important;

    /* Focus/hover ring dei campi (RadzenFormField): Radzen consuma questi token
       tramite "border: var(--rz-input-focus-border)" — un override puntuale su
       border-color non basta perché e' lo shorthand "border" (non "border-color")
       a vincere in questa variante Material. Rimappare qui, non stilare
       .rz-form-field-content a parte (ui-theme.md). Larghezza/stile coerenti con
       il bordo di riposo esistente (1px solid), solo il colore cambia. */
    --rz-input-focus-border: 1px solid var(--se-accent) !important;
    --rz-input-hover-border: 1px solid var(--se-accent) !important;
}

body {
    background-color: var(--se-body-bg);
    color: var(--se-text);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Topbar blu piatto SmartEvolution (come il sito istituzionale) */
.rz-header {
    background: var(--se-primary) !important;
    color: #FFFFFF !important;
}

.rz-header .rz-sidebar-toggle {
    color: #FFFFFF !important;
}

/* Sidebar bianca con voce attiva blu */
.rz-sidebar {
    background-color: #FFFFFF !important;
    border-right: 1px solid var(--se-border);
}

/* Hover e stato attivo della voce di menu: vedi sezione 13.5 (il blocco blu
   pieno e' stato sostituito da un tint chiaro con barra a sinistra). */
.rz-navigation-item-icon {
    color: var(--se-primary-dark);
}

/* Peso dei bottoni; il raggio e' in sezione 13.6. */
.rz-button {
    font-weight: 600 !important;
}

/* Badge contatori (stile app vecchia: cerchietto verde) */
.se-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: var(--se-badge);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
}

.se-badge-rosso {
    background-color: var(--se-danger);
}

/* Convenzioni griglie (ereditate da NaturaVita):
   titoli colonne mai troncati + scrollbar orizzontale sempre visibile */
.rz-grid-table th .rz-column-title {
    white-space: normal;
    word-break: break-word;
}

/* Scroll orizzontale a livello di PAGINA: quando le colonne eccedono la
   larghezza, la griglia si allarga al proprio contenuto e a scorrere è il
   body (scrollbar sempre in fondo alla finestra), non la griglia stessa.
   Nei dialog (fuori da .rz-body) resta lo scroll interno alla griglia. */
.rz-body {
    overflow-x: auto;
}

.rz-body .rz-data-grid {
    overflow: visible;
    width: max-content;
    min-width: 100%;
    max-width: none;
}

.rz-body .rz-data-grid .rz-data-grid-data {
    overflow: visible !important;
}

/* La larghezza in px della tabella (somma delle colonne visibili) viene
   impostata dal helper JS in index.html; min-width garantisce che le
   griglie strette riempiano comunque la pagina. */
.rz-body .rz-data-grid .rz-grid-table-fixed {
    min-width: 100%;
}

.rz-dialog .rz-data-grid .rz-data-grid-data {
    overflow-x: scroll !important;
}

/* Card/pannelli (bordo, raggio e ombra in sezione 13.3) */
.se-card {
    background: var(--se-surface);
    padding: 1rem;
}

/* Titoli pagina (colore e spaziatura affinati in sezione 13.9) */
.se-page-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

/* =====================================================================
   RESPONSIVE — regole globali
   Le pagine usano queste utility per adattarsi a tablet e smartphone.
   ===================================================================== */

/* Toolbar di pagina (filtri + bottoni): si impila su schermi stretti */
.se-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.se-toolbar > * {
    flex: 0 1 auto;
}

/* Griglia di card responsive (dashboard, elenchi a schede) */
.se-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Form a due colonne che collassa a una su mobile */
.se-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem 1rem;
    /* I <fieldset> hanno per specifica min-width:min-content e non si lasciano comprimere:
       senza questo, in una pagina con una griglia piu' larga della finestra (es. Lead, 2.000px)
       il pannello di ricerca spinge il contenuto e schiaccia la barra laterale. */
    min-width: 0;
}

.se-ricerca {
    min-width: 0;
}

@media (max-width: 768px) {
    .rz-body {
        padding: 0.5rem !important;
    }

    .se-page-title {
        font-size: 1.15rem;
    }

    /* I filtri della toolbar occupano tutta la larghezza */
    .se-toolbar > * {
        flex: 1 1 100%;
    }

    /* Dialog Radzen quasi a tutto schermo su mobile */
    .rz-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
    }
}

@media (max-width: 480px) {
    .rz-data-grid .rz-paginator {
        flex-wrap: wrap;
    }
}

/* =====================================================================
   Colonne griglia a priorità (responsive):
   - se-col-lg: visibile solo su schermi larghi (>1024px) — colonne terziarie
   - se-col-md: nascosta su mobile (<768px) — colonne secondarie
   Le colonne chiave (identificativo, stato, azioni) non hanno classe e
   restano sempre visibili.
   Applicare SIA CssClass SIA HeaderCssClass sulla RadzenDataGridColumn.
   ===================================================================== */
@media (max-width: 1024px) {
    .rz-data-grid .se-col-lg {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .rz-data-grid .se-col-md {
        display: none !important;
    }

    /* Scheduler: su mobile scorre orizzontalmente invece di comprimersi */
    .rz-scheduler {
        overflow-x: auto;
    }

    /* Bottoni azione delle griglie piu' compatti su mobile */
    .rz-data-grid .rz-button.rz-button-md {
        padding: 0.25rem 0.4rem;
    }
}

/* =====================================================================
   EFFETTI & MICRO-INTERAZIONI — layer standard Diesys
   (docs/rules/ui-effects.md — riferimento SioPROD sio-theme.css)
   Feedback e profondità, non decorazione: solo transform / box-shadow /
   opacity / colori, durate 0.15-0.30s, chiusura con prefers-reduced-motion.
   ===================================================================== */

/* ---------- 1. Bottoni: lift, press e shine ---------- */
.rz-button {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease !important;
    position: relative;
    overflow: hidden;
}

.rz-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--se-primary-rgb), .22);
}

.rz-button:not(:disabled):active {
    transform: translateY(0) scale(.97);
    transition-duration: .06s !important;
}

.rz-button:disabled {
    filter: saturate(.4) opacity(.75);
    cursor: not-allowed;
}

/* riflesso di luce solo sui bottoni primari */
.rz-button.rz-primary::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80%;
    width: 50%;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
    transform: skewX(-20deg);
    pointer-events: none;
}

.rz-button.rz-primary:not(:disabled):hover::after {
    animation: seShine .7s ease;
}

@keyframes seShine {
    from { left: -80%; }
    to { left: 130%; }
}

/* pop dei bottoni-icona nelle griglie */
.rz-data-grid .rz-button-sm:not(:disabled):hover {
    transform: translateY(-1px) scale(1.1);
}

/* ---------- 2. Focus ring accento su tutti gli input ---------- */
.rz-textbox, .rz-password, .rz-textarea, .rz-dropdown, .rz-multiselect,
.rz-datepicker .rz-inputtext, .rz-numeric .rz-textbox {
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

.rz-textbox:focus, .rz-password:focus, .rz-textarea:focus,
.rz-dropdown.rz-state-focused, .rz-multiselect.rz-state-focused,
.rz-datepicker .rz-inputtext:focus, .rz-numeric .rz-textbox:focus {
    border-color: var(--se-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--se-accent-rgb), .18) !important;
    outline: none !important;
}

.rz-form-field:focus-within .rz-form-field-label {
    color: var(--se-accent) !important;
}

/* nei RadzenFormField il bordo visibile sta sul wrapper, non sull'input */
.rz-form-field .rz-form-field-content {
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

.rz-form-field:focus-within .rz-form-field-content,
.rz-form-field.rz-state-focused .rz-form-field-content {
    border-color: var(--se-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--se-accent-rgb), .18) !important;
}

/* ---------- 3. Griglie: riga viva, header con separatore accento ---------- */
.rz-data-grid .rz-grid-table tbody tr.rz-data-row {
    transition: background-color .15s ease, box-shadow .15s ease;
}

/* Hover di riga piatto: niente gradiente né barra accento a sinistra
   (revisione grafica 2026-09-23 — vedi sezione 13). */
.rz-data-grid .rz-grid-table tbody tr.rz-data-row:hover {
    background: var(--se-surface-muted) !important;
}

/* paginazione a pillole */
.rz-paginator .rz-paginator-page {
    border-radius: 999px !important;
    transition: all .15s ease !important;
}

.rz-paginator .rz-paginator-page:hover {
    background: var(--se-accent-soft) !important;
    transform: translateY(-1px);
}

.rz-paginator .rz-paginator-page.rz-state-active {
    background: var(--se-primary) !important;
    color: #fff !important;
}

/* ---------- 4. Card: ingresso a cascata + lift sulle card cliccabili ---------- */
.rz-body .rz-card,
.rz-body .se-card {
    animation: seRise .35s ease backwards;
}

.rz-body .rz-card:nth-child(2), .se-card-grid .rz-card:nth-child(2) { animation-delay: .05s; }
.rz-body .rz-card:nth-child(3), .se-card-grid .rz-card:nth-child(3) { animation-delay: .10s; }
.rz-body .rz-card:nth-child(4), .se-card-grid .rz-card:nth-child(4) { animation-delay: .15s; }
.rz-body .rz-card:nth-child(n+5), .se-card-grid .rz-card:nth-child(n+5) { animation-delay: .20s; }

@keyframes seRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* lift solo dove il click porta da qualche parte (tile dashboard, card cliccabili) */
.se-card-grid .rz-card,
.rz-card[style*="cursor:pointer"],
.rz-card[style*="cursor: pointer"] {
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
    border: 1px solid transparent;
}

.se-card-grid .rz-card:hover,
.rz-card[style*="cursor:pointer"]:hover,
.rz-card[style*="cursor: pointer"]:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--se-accent-rgb), .35);
    box-shadow: 0 10px 24px rgba(var(--se-primary-dark-rgb), .18);
}

/* ---------- 5. Stat tile (KPI dashboard): barra accento che cresce ---------- */
.se-stat {
    position: relative;
    overflow: hidden;
}

.se-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--se-accent), var(--se-primary));
    transition: width .2s ease;
}

.se-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(var(--se-primary-dark-rgb), .20);
}

.se-stat:hover::before {
    width: 7px;
}

.se-stat-value {
    transition: transform .2s ease;
    transform-origin: left bottom;
    display: inline-block;
}

.se-stat:hover .se-stat-value {
    transform: scale(1.04);
}

/* ---------- 6. Dialog e notifiche: ingresso scenico ---------- */
.rz-dialog-mask {
    background: rgba(var(--se-primary-dark-rgb), .45) !important;
    backdrop-filter: blur(3px);
    animation: seFade .2s ease;
}

.rz-dialog {
    animation: seDialogIn .28s cubic-bezier(.21, 1.02, .55, 1.01);
}

@keyframes seDialogIn {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes seFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rz-notification-item {
    animation: seNotifIn .3s cubic-bezier(.21, 1.02, .55, 1.01);
}

/* Dialog con footer (azioni) ancorato in basso, sempre visibile, e area centrale
   scrollabile indipendentemente (usato da DialogStudioMedico e riusabile altrove). */
.rz-dialog-content:has(> .se-dialog-sticky-footer) {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.se-dialog-sticky-footer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.se-dialog-sticky-footer > .se-dialog-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
}

.se-dialog-sticky-footer > .se-dialog-footer {
    flex: 0 0 auto;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--se-border);
}

@keyframes seNotifIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: none; }
}

/* ---------- 7. Menu laterale: voci che scivolano, icone vive, attivo con glow ---------- */
.rz-navigation-item-link {
    transition: background-color .18s ease, color .18s ease, transform .18s ease !important;
}

/* Rimossi (revisione grafica 2026-09-23): scivolamento della voce al passaggio
   del mouse, rotazione/ingrandimento dell'icona, glow sulla voce attiva e
   shimmer animato sulla topbar. Erano vezzi che leggevano come "giocoso":
   un gestionale clinico vuole un'interfaccia ferma. Lo stato attivo del menu
   e' ridisegnato nella sezione 13. */

/* ---------- 8. Titolo pagina: entra da sinistra + linea che si disegna ---------- */
.se-page-title {
    animation: seSlideRight .3s ease;
}

.se-page-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 6px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--se-accent), var(--se-primary));
    animation: seGrowBar .5s ease .15s backwards;
}

@keyframes seSlideRight {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: none; }
}

@keyframes seGrowBar {
    from { width: 0; opacity: 0; }
    to { width: 48px; opacity: 1; }
}

/* ---------- 9. Tab: sottolineatura accento animata ---------- */
.rz-tabview .rz-tabview-nav li a {
    position: relative;
}

.rz-tabview .rz-tabview-nav li a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 3px;
    background: var(--se-accent);
    border-radius: 2px 2px 0 0;
    transition: left .22s ease, right .22s ease;
}

.rz-tabview .rz-tabview-nav li.rz-tabview-selected a::after,
.rz-tabview .rz-tabview-nav li a:hover::after {
    left: 10%;
    right: 10%;
}

/* ---------- 10. Skeleton shimmer (stati di caricamento) ---------- */
.se-skeleton {
    position: relative;
    overflow: hidden;
    background: #f5f6f8;
    border-radius: 6px;
    min-height: 14px;
}

.se-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    transform: translateX(-100%);
    animation: seSkeleton 1.4s ease infinite;
}

@keyframes seSkeleton {
    to { transform: translateX(100%); }
}

/* ---------- 11. Finiture: scrollbar, selezione, empty state, login ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--se-primary) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: var(--se-primary);
    border-radius: 8px;
    border: 2px solid var(--se-body-bg);
}

::selection {
    background: var(--se-accent-soft);
    color: var(--se-primary-dark);
}

/* empty state: icona che fluttua */
.se-empty-icon {
    animation: seFloat 3s ease-in-out infinite;
}

@keyframes seFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* login: schermata a due pannelli — marchio a sinistra, accesso a destra
   (revisione grafica 2026-10-05: sostituisce la card centrata su fondo blu
   con i blob radiali). Markup: Layout/LoginLayout.razor + Pages/Login.razor.
   L'azzurro #7BBBDD e' campionato dal logo ed e' l'unico accento del pannello
   scuro; il logo li' dentro e' la variante per fondi scuri (-bianco). */
.se-login {
    --se-login-azzurro: #7BBBDD;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    background: var(--se-surface-muted);
    font-family: var(--se-font);
}

/* ----- pannello sinistro: marchio ----- */
.se-login-marchio {
    position: relative;
    isolation: isolate; /* tiene la filigrana (z-index:-1) dentro al pannello */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: clamp(2rem, 4vw, 3.75rem);
    background: linear-gradient(155deg, var(--se-primary) 0%, #0A3C7E 48%, #06264F 100%);
    color: #FFFFFF;
}

/* filigrana: il solo simbolo del logo, che esce dal bordo in basso a destra */
.se-login-marchio::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -16%;
    bottom: -24%;
    width: min(660px, 82%);
    aspect-ratio: 1;
    background: url("../img/logo-smartevolution-simbolo.png") center / contain no-repeat;
    opacity: .11;
    pointer-events: none;
}

.se-login-logo {
    width: clamp(190px, 19vw, 250px);
    height: auto;
}

.se-login-claim {
    max-width: 40ch;
}

/* segnalibro azzurro sopra il titolo */
.se-login-segno {
    display: block;
    width: 7px;
    height: 46px;
    margin-bottom: 1.75rem;
    border-radius: 0 0 4px 4px;
    background: var(--se-login-azzurro);
}

.se-login-claim h1 {
    margin: 0 0 1.1rem;
    font-size: clamp(2.1rem, 3.2vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 600;
}

.se-login-claim p {
    margin: 0;
    max-width: 44ch;
    font-size: clamp(.92rem, 1.05vw, 1.02rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, .74);
}

.se-login-nota {
    font-size: .78rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .5);
}

/* ----- pannello destro: form ----- */
.se-login-pannello {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}

.se-login-form {
    width: 100%;
    max-width: 380px;
    animation: seRise .4s ease;
}

.se-login-form h2 {
    margin: 0 0 .45rem;
    font-size: clamp(1.5rem, 2.2vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--se-primary-dark);
}

.se-login-sottotitolo {
    margin: 0 0 2rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--se-text-secondary);
}

/* Campi a tutta larghezza su superficie bianca (il pannello e' appena tinto).
   Specificita' 0,3,0: il material-base.css di Radzen viene iniettato DOPO
   questo file, a parita' di specificita' vincerebbe lui (vedi :root in testa). */
.se-login-form .rz-form-field { width: 100%; }
.se-login-form .rz-form-field .rz-form-field-content { background: var(--se-surface); }
.se-login-form .rz-form-field :is(input, .rz-textbox) { width: 100%; }

/* Il contorno verde di ".valid.modified" (app.css, default del template Blazor)
   qui e' rumore: il campo ha gia' il focus ring del tema. */
.se-login-form .valid.modified:not([type=checkbox]) { outline: none; }

/* mostra/nascondi password: il pulsante sta sopra il campo, non dentro Radzen */
.se-login-campo-password { position: relative; }
.se-login-campo-password .rz-form-field input { padding-right: 42px; }

.se-login-occhio {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-flex;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--se-text-secondary);
    cursor: pointer;
    line-height: 0;
}

.se-login-occhio:hover { background: var(--se-primary-soft); color: var(--se-primary); }
.se-login-occhio:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 1px; }

.se-login-form .rz-button.se-login-accedi {
    width: 100%;
    min-height: 46px;
    margin-top: .5rem;
    border-radius: var(--se-radius-sm);
    background: var(--se-primary);
    font-size: .95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 8px 20px rgba(var(--se-primary-rgb), .22);
}

.se-login-form .rz-button.se-login-accedi:hover:not(:disabled) { background: var(--se-primary-dark); }

.se-login-form .rz-button.se-login-link {
    align-self: flex-start;
    padding-left: 0;
    color: var(--se-primary);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.se-login-aiuto {
    margin: 2.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--se-border);
    font-size: .8rem;
    line-height: 1.6;
    color: var(--se-text-secondary);
}

/* Sotto i 900px il marchio diventa una fascia in alto e il form scorre sotto */
@media (max-width: 900px) {
    .se-login {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .se-login-marchio {
        justify-content: flex-start;
        gap: 1.5rem;
        padding: 1.75rem 1.5rem 2rem;
    }

    .se-login-marchio::after {
        right: -20%;
        bottom: auto;
        top: -45%;
        width: 360px;
    }

    .se-login-logo { width: 170px; }
    .se-login-claim { max-width: none; }
    .se-login-segno { display: none; }
    .se-login-claim h1 { font-size: 1.45rem; margin-bottom: 0; }
    .se-login-claim p,
    .se-login-nota { display: none; }

    .se-login-pannello {
        align-items: flex-start;
        padding: 2.25rem 1.25rem 3rem;
    }
}

/* ---------- 12. OBBLIGATORIO: riduzione movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =====================================================================
   13. REVISIONE GRAFICA 2026-09-23 — look "clinico": premium e fermo
   ---------------------------------------------------------------------
   Principi: superfici bianche su fondo appena tinto, bordi tenui, raggi
   ampi, ombre basse, accenti di colore solo dove portano informazione
   (stato, azione primaria). Niente gradienti decorativi, niente glow.
   Tutto passa dai token in :root — per cambiare carattere si toccano
   quelli, non le regole qui sotto.

   LIMITE NOTO: molte pagine hanno ancora colori hardcoded inline nei
   .razor (es. Style="color:#093A7D"), che questo file non raggiunge.
   Vanno ripuliti pagina per pagina, non da qui.
   ===================================================================== */

/* ---------- 13.1 Campi: etichetta sempre in alto ----------
   Con la variante "floating label" di Radzen, l'etichetta di un campo VUOTO
   resta al centro del riquadro e si legge come se fosse il valore del campo.
   Qui l'etichetta e' sempre nella posizione alta (sul bordo): un campo vuoto
   si vede che e' vuoto. I valori replicano la regola con cui Radzen stesso
   fa "salire" l'etichetta, cosi' il comportamento resta identico al suo. */
.rz-form-field.rz-floating-label .rz-form-field-label {
    inset-inline-end: auto;
    inset-block-start: var(--rz-form-field-label-floating-top);
    padding-block: 0;
    transform: translate(0, 0);
    font-size: .75rem;
    line-height: 1rem;
    max-width: calc(100% - 1.5rem);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--se-text-secondary);
    background-color: var(--rz-form-field-label-floating-background-color, #FFF);
}

/* Campo vuoto: fondo appena tinto, cosi' "vuoto" si legge a colpo d'occhio
   anche scorrendo un form lungo. Torna bianco appena contiene un valore. */
.rz-form-field.rz-variant-outlined .rz-state-empty {
    background-color: var(--se-surface-muted);
}

.rz-form-field.rz-variant-outlined .rz-state-empty:focus,
.rz-form-field.rz-variant-outlined.rz-state-focused .rz-state-empty {
    background-color: var(--se-surface);
}

/* ---------- 13.2 Fieldset ----------
   Legenda in grassetto (richiesta esplicita). */
.rz-fieldset-legend-text {
    font-weight: 700;
    color: var(--se-primary-dark);
    letter-spacing: .01em;
}

.rz-fieldset {
    border: 1px solid var(--se-border) !important;
    border-radius: var(--se-radius) !important;
    background: var(--se-surface);
}

/* ---------- 13.3 Superfici: card, dialog, pannelli ---------- */
.rz-body .rz-card,
.se-card {
    border: 1px solid var(--se-border) !important;
    border-radius: var(--se-radius) !important;
    box-shadow: var(--se-shadow-sm) !important;
}

.rz-dialog {
    border-radius: var(--se-radius-lg) !important;
    box-shadow: var(--se-shadow) !important;
    overflow: hidden;
}

.rz-dialog-titlebar {
    border-bottom: 1px solid var(--se-border-soft);
}

/* ---------- 13.4 Griglie: intestazioni sobrie, righe ariose ---------- */
.rz-data-grid,
.rz-datatable {
    border: 1px solid var(--se-border) !important;
    border-radius: var(--se-radius) !important;
    background: var(--se-surface);
    box-shadow: var(--se-shadow-sm);
}

.rz-data-grid .rz-grid-table thead th {
    background: var(--se-surface-muted) !important;
    border-bottom: 1px solid var(--se-border) !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--se-text-secondary);
}

.rz-data-grid .rz-grid-table tbody td {
    border-bottom: 1px solid var(--se-border-soft) !important;
    padding-block: .7rem;
}

.rz-data-grid .rz-grid-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Le righe alternate a bande rendono "contabile" una tabella clinica:
   meglio righe bianche separate da una linea tenue. */
.rz-data-grid .rz-grid-table tbody tr.rz-datatable-odd,
.rz-data-grid .rz-grid-table tbody tr.rz-data-row.rz-datatable-odd {
    background-color: var(--se-surface) !important;
}

.rz-paginator {
    border-top: 1px solid var(--se-border-soft) !important;
    background: var(--se-surface) !important;
}

/* ---------- 13.5 Menu laterale: voce attiva a tint, non a blocco pieno ----------
   Il blocco blu pieno e' molto "amministrativo" e pesa parecchio in una
   sidebar lunga; il tint chiaro con testo blu e barra sottile a sinistra
   e' piu' leggero e resta leggibilissimo. */
.rz-sidebar {
    border-right: 1px solid var(--se-border) !important;
}

.rz-navigation-item-link {
    border-radius: var(--se-radius-sm);
    margin: 1px .4rem;
}

.rz-navigation-item-link:hover {
    background-color: var(--se-menu-hover) !important;
}

.rz-navigation-item-link.rz-navigation-item-link-active,
.rz-navigation-item-link[aria-current="page"] {
    background-color: var(--se-primary-soft) !important;
    color: var(--se-primary) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--se-primary);
}

.rz-navigation-item-link.rz-navigation-item-link-active .rz-navigation-item-icon,
.rz-navigation-item-link[aria-current="page"] .rz-navigation-item-icon {
    color: var(--se-primary) !important;
}

/* ---------- 13.6 Bottoni ---------- */
.rz-button {
    border-radius: var(--se-radius-sm) !important;
    letter-spacing: .01em;
}

.rz-button.rz-secondary,
.rz-button.rz-light {
    background: var(--se-surface) !important;
    border: 1px solid var(--se-border-strong) !important;
    color: var(--se-text) !important;
}

.rz-button.rz-secondary:hover,
.rz-button.rz-light:hover {
    background: var(--se-surface-muted) !important;
}

/* ---------- 13.7 Badge di stato: pillola tenue, non blocco saturo ---------- */
.rz-badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    padding: .2rem .6rem !important;
}

/* ---------- 13.8 Input e select: raggio coerente con le superfici ---------- */
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-numeric,
.rz-datepicker,
.rz-autocomplete,
.rz-lookup {
    border-radius: var(--se-radius-sm) !important;
}

/* ---------- 13.9 Titolo pagina e toolbar ---------- */
.se-page-title {
    color: var(--se-text);
    letter-spacing: -.01em;
}

.se-toolbar .rz-button {
    box-shadow: none !important;
}

/* =====================================================================
   14. DESIGN SYSTEM V2 — "Clinico premium" (2026-10-02, decisione D4 = B)
   Pulito come la sezione 13, ma con piu' informazione: tipografia Inter con
   cifre tabulari, palette di stato semantica (sostituisce i colori Bootstrap 3
   #5CB85C/#D9534F/#F0AD4E/#5BC0DE), componenti dashboard (KPI con trend e
   sparkline, pannelli grafico, pipeline stati, classifiche).
   Specifiche: SmartSpecificheV2/DESIGN_SYSTEM.md. I colori dei grafici
   Radzen sono in Services/ColoriStato.cs (RadzenChart non legge var(--x)):
   tenerli allineati a questi token.
   ===================================================================== */

:root {
    --se-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Stato: colore pieno / tinta / testo su tinta */
    --se-status-success: #16A34A;  --se-status-success-soft: #DCFCE7; --se-status-success-text: #166534;
    --se-status-warning: #D97706;  --se-status-warning-soft: #FEF3C7; --se-status-warning-text: #92400E;
    --se-status-danger:  #DC2626;  --se-status-danger-soft:  #FEE2E2; --se-status-danger-text:  #991B1B;
    --se-status-info:    #0284C7;  --se-status-info-soft:    #E0F2FE; --se-status-info-text:    #075985;
    --se-status-neutral: #64748B;  --se-status-neutral-soft: #F1F5F9; --se-status-neutral-text: #334155;
    --se-status-violet:  #7C3AED;  --se-status-violet-soft:  #EDE9FE; --se-status-violet-text:  #5B21B6;

    /* Bordi dei blocchi "soft": servono a staccare il riquadro dal bianco della riga di griglia.
       Tinta del colore di stato, non grigio: un bordo neutro su fondo colorato sembra sporco. */
    --se-status-success-border: #A9E2BE;
    --se-status-warning-border: #F0DBA4;
    --se-status-danger-border:  #F6C6C6;
    --se-status-info-border:    #A9D9F2;

    /* I token storici puntano alla nuova palette: badge e componenti che li usano si allineano */
    --se-success: var(--se-status-success);
    --se-warning: var(--se-status-warning);
    --se-danger: var(--se-status-danger);
    --se-info: var(--se-status-info);
    --se-error: var(--se-status-danger-text);
    --se-accent-rgb: 2, 132, 199;
    --se-accent-soft: var(--se-status-info-soft);
    --rz-success: #16A34A !important;
    --rz-danger: #DC2626 !important;
    --rz-warning: #D97706 !important;
    --rz-info: #0284C7 !important;
    --rz-secondary: #0284C7 !important;

    --se-space-1: 4px; --se-space-2: 8px; --se-space-3: 12px; --se-space-4: 16px;
    --se-space-5: 20px; --se-space-6: 24px; --se-space-8: 32px;
}

body,
.rz-body,
.rz-header,
.rz-sidebar,
.rz-dialog,
.rz-button,
.rz-inputtext,
.rz-dropdown,
.rz-datatable,
.rz-data-grid {
    font-family: var(--se-font);
}

.se-num { font-variant-numeric: tabular-nums; }

/* ---------- 14.1 Testata pagina dashboard ---------- */
.se-dash-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--se-space-4);
    margin-bottom: var(--se-space-2);
}
.se-dash-hero h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--se-text);
}
.se-dash-hero-sub {
    margin-top: var(--se-space-1);
    color: var(--se-text-secondary);
    font-size: .925rem;
}
.se-dash-hero-sub a { color: var(--se-primary); font-weight: 500; text-decoration: none; }
.se-dash-hero-sub a:hover { text-decoration: underline; }
.se-dash-periodo { display: flex; align-items: center; gap: var(--se-space-2); }
.se-dash-periodo label { color: var(--se-text-secondary); font-size: .85rem; }

.se-section-title {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--se-text-secondary);
    margin: var(--se-space-6) 0 var(--se-space-3);
}

/* ---------- 14.2 Griglie della dashboard ---------- */
.se-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--se-space-3);
}
.se-dash-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--se-space-4);
    margin-top: var(--se-space-4);
}
.se-dash-row.se-dash-row-eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) {
    .se-dash-row, .se-dash-row.se-dash-row-eq { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 14.3 KPI ---------- */
.se-kpi {
    position: relative;
    background: var(--se-surface);
    border: 1px solid var(--se-border-soft);
    border-radius: var(--se-radius);
    box-shadow: var(--se-shadow-sm);
    padding: var(--se-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--se-space-1);
    min-width: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.se-kpi.se-kpi-link { cursor: pointer; }
.se-kpi.se-kpi-link:hover { border-color: var(--se-border-strong); box-shadow: var(--se-shadow); transform: translateY(-1px); }
.se-kpi.se-kpi-link:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 2px; }
.se-kpi-label {
    display: flex;
    align-items: center;
    gap: var(--se-space-2);
    color: var(--se-text-secondary);
    font-size: .825rem;
    font-weight: 500;
}
.se-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 18px !important;
    flex: none;
}
.se-kpi-valore {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--se-space-2);
    margin-top: var(--se-space-1);
}
.se-kpi-numero {
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--se-text);
    font-variant-numeric: tabular-nums;
}
.se-kpi-trend {
    font-size: .78rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
}
.se-kpi-trend.su { color: var(--se-status-success-text); background: var(--se-status-success-soft); }
.se-kpi-trend.giu { color: var(--se-status-danger-text); background: var(--se-status-danger-soft); }
.se-kpi-trend.pari { color: var(--se-status-neutral-text); background: var(--se-status-neutral-soft); }
.se-kpi-nota { color: var(--se-text-secondary); font-size: .76rem; }
.se-kpi-spark { width: 100%; height: 28px; margin-top: var(--se-space-1); display: block; overflow: visible; }
.se-kpi-azione {
    margin-top: var(--se-space-1);
    font-size: .78rem;
    color: var(--se-primary);
    font-weight: 500;
}

/* Tinte delle icone per significato */
.se-tono-primary { color: var(--se-primary); background: var(--se-primary-soft); }
.se-tono-success { color: var(--se-status-success-text); background: var(--se-status-success-soft); }
.se-tono-warning { color: var(--se-status-warning-text); background: var(--se-status-warning-soft); }
.se-tono-danger  { color: var(--se-status-danger-text);  background: var(--se-status-danger-soft); }
.se-tono-info    { color: var(--se-status-info-text);    background: var(--se-status-info-soft); }
.se-tono-neutral { color: var(--se-status-neutral-text); background: var(--se-status-neutral-soft); }
.se-tono-violet  { color: var(--se-status-violet-text);  background: var(--se-status-violet-soft); }

/* ---------- 14.4 Pannelli (grafici, liste) ---------- */
.se-panel {
    background: var(--se-surface);
    border: 1px solid var(--se-border-soft);
    border-radius: var(--se-radius);
    box-shadow: var(--se-shadow-sm);
    padding: var(--se-space-4) var(--se-space-5);
    min-width: 0;
}
.se-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--se-space-1) var(--se-space-3);
    margin-bottom: var(--se-space-3);
}
.se-panel-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--se-text); }
.se-panel-sub { color: var(--se-text-secondary); font-size: .8rem; }
.se-panel-vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--se-space-2);
    min-height: 220px;
    color: var(--se-text-secondary);
    font-size: .9rem;
    text-align: center;
}
.se-panel-vuoto .rzi { font-size: 32px; color: var(--se-border-strong); }

/* ---------- 14.5 Barre orizzontali (pipeline stati, classifiche) ---------- */
.se-barre { display: flex; flex-direction: column; gap: 2px; }
.se-barra {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.5rem auto;
    align-items: center;
    gap: var(--se-space-3);
    padding: 6px var(--se-space-2);
    border-radius: var(--se-radius-sm);
    font: inherit;
    font-size: .85rem;
    border: none;
    background: none;
    text-align: left;
    color: inherit;
    width: 100%;
}
button.se-barra { cursor: pointer; }
button.se-barra:hover { background: var(--se-surface-muted); }
button.se-barra:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 1px; }
.se-barra-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--se-text); }
.se-barra-traccia { height: 10px; background: var(--se-surface-muted); border-radius: 999px; overflow: hidden; }
.se-barra-riempimento { height: 100%; border-radius: 999px; animation: seRiempi .6s ease both; transform-origin: left center; }
/* NB: non usare seGrowBar (sezione 9): anima la width fino a 48px fissi e "both" la blocca li'. */
@keyframes seRiempi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.se-barra-valore { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Freccia "si puo' cliccare". Le barre portavano gia' all'elenco filtrato dal 2026-10-05,
   ma sembravano un grafico e nessuno ci aveva provato (R-033): resta tenue e si accende
   passandoci sopra, senza diventare un secondo pulsante. */
.se-barra-vai {
    color: var(--se-text-secondary);
    opacity: .4;
    font-size: 1.05rem;
    transition: opacity .12s ease, color .12s ease;
}
button.se-barra:hover .se-barra-vai,
button.se-barra:focus-visible .se-barra-vai { opacity: 1; color: var(--se-primary); }

/* ---------- 14.6 Alert compatti ---------- */
.se-alert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--se-space-3);
}
.se-alert {
    display: flex;
    align-items: center;
    gap: var(--se-space-3);
    background: var(--se-surface);
    border: 1px solid var(--se-border-soft);
    border-radius: var(--se-radius);
    padding: var(--se-space-3) var(--se-space-4);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.se-alert:hover { border-color: var(--se-border-strong); box-shadow: var(--se-shadow-sm); }
.se-alert:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 2px; }
.se-alert-numero { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.se-alert-testo { color: var(--se-text-secondary); font-size: .8rem; line-height: 1.3; }
/* Riga "apre l'elenco" sotto il testo delle tessere che aprono un popup. */
.se-alert-apre { display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; font-size: .72rem; color: var(--se-primary); }
.se-alert-apre .rzi { font-size: 15px; }

/* Popup degli alert (sezione 1): elenchi in sola lettura dentro SeDialog. */
.se-alert-nota {
    display: flex;
    gap: var(--se-space-2);
    align-items: flex-start;
    background: var(--se-status-warning-soft);
    color: var(--se-status-warning-text);
    border-radius: var(--se-radius-sm);
    padding: 9px 11px;
    font-size: .82rem;
    margin-bottom: var(--se-space-3);
}
.se-alert-nota .rzi { font-size: 18px; }
.se-alert-nota-info { background: var(--se-status-info-soft); color: var(--se-status-info-text); margin: var(--se-space-3) 0 0; }
/* Elenco a righe semplice dentro un SeCampo (es. le scadenze del dialog data inizio terapia). */
.se-elenco-semplice { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.se-elenco-semplice li { display: flex; justify-content: space-between; gap: var(--se-space-2); padding: 6px 0; border-bottom: 1px dashed var(--se-border-soft); }
.se-elenco-semplice li:last-child { border-bottom: 0; }
/* Pillola cliccabile in una cella di griglia (es. "Inizio terapia da indicare"). In una
   colonna stretta va a capo invece di essere tagliata. */
.se-pill-azione { border: 0; cursor: pointer; font: inherit; margin-top: 4px; }
.se-pill.se-pill-azione, .se-pill.se-pill-griglia { white-space: normal; text-align: left; margin-top: 4px; }
.se-pill-azione:hover { filter: brightness(.96); }

/* "Prossimo passo" nella testata del dialog prescrizione (R-052): i passi possibili dallo
   stato attuale, sotto il percorso del caso. */
.se-passi-stato {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--se-space-2);
    margin-top: var(--se-space-3);
    padding: 8px 10px;
    border: 1px dashed var(--se-border-strong);
    border-radius: var(--se-radius-sm);
    background: var(--se-surface-muted);
}
.se-passi-stato-lbl { font-size: .76rem; font-weight: 600; color: var(--se-text-secondary); margin-right: 2px; }
.se-passi-stato .se-passi-stato-mano { margin-left: auto; }
.se-passi-motivo {
    margin-top: var(--se-space-2);
    padding: 10px 12px;
    border: 1px solid var(--se-border);
    border-radius: var(--se-radius-sm);
    background: var(--se-surface);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.se-passi-motivo label { font-size: .84rem; font-weight: 600; }
.se-passi-motivo .se-req { color: var(--se-status-danger-text); }
.se-passi-motivo-azioni { display: flex; justify-content: flex-end; gap: var(--se-space-2); }
.se-passi-mano { flex-direction: row; flex-wrap: wrap; align-items: center; }
@media (max-width: 767px) {
    .se-passi-stato .se-passi-stato-mano { margin-left: 0; }
}
.se-pill-azione:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 2px; }
.se-alert-sub { display: block; font-size: .76rem; color: var(--se-text-secondary); white-space: normal; }
.se-alert-cerca { width: 100%; max-width: 340px; margin-bottom: var(--se-space-3); }
.se-alert-vuoto { color: var(--se-text-secondary); text-align: center; margin: var(--se-space-5) 0; }
.se-alert-chi { display: flex; align-items: center; gap: var(--se-space-2); min-width: 0; }
.se-alert-foto {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    background: var(--se-status-neutral-soft);
    color: var(--se-status-neutral-text);
    font-size: .75rem;
    font-weight: 600;
}

/* ---------- 14.7 Skeleton dashboard ---------- */
.se-skel-kpi { height: 116px; border-radius: var(--se-radius); }
.se-skel-panel { height: 300px; border-radius: var(--se-radius); }

@media (max-width: 767px) {
    .se-dash-hero h1 { font-size: 1.25rem; }
    .se-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--se-space-2); }
    .se-kpi { padding: var(--se-space-3); }
    .se-kpi-numero { font-size: 1.3rem; }
    .se-kpi-spark { display: none; }
    .se-panel { padding: var(--se-space-3); }
    .se-barra { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 3rem auto; gap: var(--se-space-2); }
    .se-alert-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .se-kpi, .se-alert { transition: none; }
    .se-kpi.se-kpi-link:hover { transform: none; }
    .se-barra-riempimento { animation: none; }
}

/* 14.8 Assi dei grafici: testo piu' piccolo e secondario */
.se-panel .rz-axis text,
.se-panel .rz-legend-item-text { font-size: 11px; fill: var(--se-text-secondary); color: var(--se-text-secondary); }

/* Su telefono 12 mesi non ci stanno: un'etichetta dell'asse categorie su due */
@media (max-width: 767px) {
    .se-panel .rz-category-axis .rz-tick:nth-of-type(even) .rz-tick-text { display: none; }
}

/* =====================================================================
   15. FORM V2 — dialog-form (2026-10-03, revisione delle form)
   Componenti: Shared/Components/SeDialog, SeSezione, SeCampo, SeSchede, StatoPill;
   opzioni: Services/DialogHelper.Form(); modifiche non salvate: Services/StatoModifiche.
   Struttura: testata fissa (identita' del record, stato, percorso, schede), corpo che scorre,
   piede fisso con le azioni (una sola azione principale blu). Campi con etichetta sopra,
   "obbligatorio"/"facoltativo" per esteso, errore sotto il campo. Su mobile: schermo intero.
   ===================================================================== */

/* ---------- 15.1 Contenitore Radzen ---------- */
.rz-dialog.se-dlg-host,
.rz-dialog:has(> .rz-dialog-content > .se-dlg) {
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 32px);
    max-height: min(900px, calc(100dvh - 48px));
    padding: 0 !important;
}

/* Dialog con schede: altezza fissa, la finestra non cambia misura tra una scheda e l'altra */
.rz-dialog.se-dlg-alto { height: min(900px, calc(100dvh - 48px)); }

.se-dlg-host > .rz-dialog-content,
.rz-dialog-content:has(> .se-dlg) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden !important;
}

.se-dlg {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    font-family: var(--se-font);
    color: var(--se-text);
}

/* Nei form V2 i bottoni non sono in maiuscolo (default Material) */
.se-dlg .rz-button { text-transform: none; letter-spacing: 0; }

/* ---------- 15.2 Testata: chi/cosa si sta modificando ---------- */
.se-dlg-head {
    flex: 0 0 auto;
    padding: var(--se-space-5) var(--se-space-6) 0;
    border-bottom: 1px solid var(--se-border);
    background: var(--se-surface);
}
.se-dlg-head:not(:has(.se-schede)) { padding-bottom: var(--se-space-4); }

.se-dlg-id { display: flex; align-items: flex-start; gap: var(--se-space-3); }
.se-dlg-avatar {
    flex: 0 0 44px;
    height: 44px;
    border-radius: var(--se-radius);
    background: var(--se-primary-soft);
    color: var(--se-primary);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
}
.se-dlg-avatar .rzi { font-size: 22px; }
.se-dlg-id-testo { flex: 1 1 auto; min-width: 0; }
.se-dlg-tipo { margin: 0 0 1px; font-size: .8rem; font-weight: 500; color: var(--se-text-secondary); }
.se-dlg-titolo {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -.015em;
    line-height: 1.25;
    color: var(--se-text);
    overflow-wrap: anywhere;
}
.se-dlg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--se-space-4);
    margin-top: 6px;
    font-size: .82rem;
    color: var(--se-text-secondary);
}
.se-dlg-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.se-dlg-meta .rzi { font-size: 16px; color: #94A0B4; }
.se-dlg-stato { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--se-space-2); align-items: center; padding-top: 2px; }
.se-dlg-chiudi {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: -4px -8px 0 0;
    border: 0;
    border-radius: var(--se-radius-sm);
    background: none;
    color: var(--se-text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.se-dlg-chiudi:hover { background: var(--se-surface-muted); color: var(--se-text); }
.se-dlg-chiudi:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 1px; }

/* ---------- 15.3 Pillola di stato ---------- */
.se-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.35;
}
.se-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }

/* ---------- 15.3b Passi del widget di inserimento (R-036) ---------- */
/* Tre passi in testa al dialog di "Nuovo paziente": dicono dove si e' e quanto manca.
   Si puo' tornare su un passo gia' fatto (e' un pulsante vero), non saltare avanti. */
.se-passi {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 0 var(--se-space-4);
    padding: 0;
}

.se-passi li { display: flex; align-items: center; min-width: 0; }

.se-passi li:not(:last-child)::after {
    content: "";
    width: 26px;
    height: 1.5px;
    background: var(--se-border-strong);
    margin: 0 var(--se-space-2);
    flex: 0 0 auto;
}

.se-passo button {
    display: flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: none;
    font: inherit;
    font-size: .82rem;
    color: var(--se-text-secondary);
    padding: 2px 0;
    cursor: default;
    min-width: 0;
}

.se-passo-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.se-passo-n {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--se-border-strong);
    background: var(--se-surface);
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 700;
    flex: 0 0 22px;
}

.se-passo.att button { color: var(--se-text); font-weight: 600; }
.se-passo.att .se-passo-n { background: var(--se-primary); border-color: var(--se-primary); color: var(--se-surface); }

.se-passo.fatto button { color: var(--se-text); cursor: pointer; }
.se-passo.fatto button:hover .se-passo-t { text-decoration: underline; }
.se-passo.fatto .se-passo-n {
    background: var(--se-status-success);
    border-color: var(--se-status-success);
    color: var(--se-surface);
}
.se-passo button:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 2px; border-radius: 6px; }

/* ---------- 15.3c Sezione avanzata richiudibile ---------- */
/* Chiusa di suo: si apre solo se serve, e solo allora si chiedono all'API le sue tendine. */
.se-avanzate {
    border: 1px dashed var(--se-border-strong);
    border-radius: var(--se-radius-sm);
    background: var(--se-surface-muted);
    margin-top: var(--se-space-3);
}

.se-avanzate.aperta { background: var(--se-surface); }

.se-avanzate-h {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--se-text);
    padding: var(--se-space-3);
    cursor: pointer;
    text-align: left;
}

.se-avanzate-h:hover { color: var(--se-primary); }
.se-avanzate-h:focus-visible { outline: 2px solid var(--se-primary); outline-offset: -2px; border-radius: var(--se-radius-sm); }
.se-avanzate-ch { color: var(--se-text-secondary); font-size: 1.15rem; }
.se-avanzate-d { font-weight: 400; font-size: .76rem; color: var(--se-text-secondary); margin-left: auto; text-align: right; }
.se-avanzate.aperta > .se-sez { margin: 0 var(--se-space-3) var(--se-space-3); }

/* ---------- 15.3d Elenco dei file scelti ---------- */
.se-elenco-file { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.se-elenco-file li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--se-border);
    border-radius: var(--se-radius-sm);
    background: var(--se-surface);
    font-size: .82rem;
}

.se-elenco-file .rzi { color: var(--se-text-secondary); font-size: 1.05rem; }
.se-elenco-file-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-elenco-file-peso { margin-left: auto; color: var(--se-text-secondary); font-size: .76rem; white-space: nowrap; }

@media (max-width: 560px) {
    .se-passo-t { display: none; }
    .se-avanzate-d { display: none; }
}

/* ---------- 15.4 Percorso della prescrizione ---------- */
.se-percorso { display: flex; list-style: none; margin: var(--se-space-4) 0 0; padding: 0; }
.se-percorso li {
    --c: var(--se-primary);
    --c-soft: var(--se-primary-soft);
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    padding-top: 22px;
    text-align: center;
    font-size: .76rem;
    font-weight: 500;
    color: #94A0B4;
}
.se-percorso li::before {
    content: "";
    position: absolute;
    top: 6px; left: 0; right: 0;
    height: 3px;
    background: var(--se-border);
}
.se-percorso li:first-child::before { left: 50%; }
.se-percorso li:last-child::before { right: 50%; }
.se-percorso li::after {
    content: "";
    position: absolute;
    top: 1px; left: 50%;
    width: 13px; height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    background: var(--se-surface);
    border: 3px solid var(--se-border-strong);
    box-sizing: border-box;
}
.se-percorso li > span { display: block; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-percorso li.fatta { color: var(--se-text-secondary); }
.se-percorso li.fatta::before { background: var(--se-primary); }
.se-percorso li.fatta::after { background: var(--se-primary); border-color: var(--se-primary); }
.se-percorso li.fatta.ultima { color: var(--se-text); font-weight: 650; }
.se-percorso li.ora { color: var(--se-text); font-weight: 650; }
.se-percorso li.ora::before { background: linear-gradient(90deg, var(--se-primary) 50%, var(--se-border) 50%); }
.se-percorso li.ora:first-child::before { background: var(--se-border); }
.se-percorso li.ora::after {
    top: -1px;
    width: 17px; height: 17px;
    margin-left: -8.5px;
    border-color: var(--c);
    box-shadow: 0 0 0 4px var(--c-soft);
}
.se-percorso li.se-perc-primary { --c: var(--se-primary);         --c-soft: var(--se-primary-soft); }
.se-percorso li.se-perc-warning { --c: var(--se-status-warning); --c-soft: var(--se-status-warning-soft); }
.se-percorso li.se-perc-info    { --c: var(--se-status-info);    --c-soft: var(--se-status-info-soft); }
.se-percorso li.se-perc-success { --c: var(--se-status-success); --c-soft: var(--se-status-success-soft); }
.se-percorso li.se-perc-danger  { --c: var(--se-status-danger);  --c-soft: var(--se-status-danger-soft); }
.se-percorso li.se-perc-violet  { --c: var(--se-status-violet);  --c-soft: var(--se-status-violet-soft); }
.se-percorso li.se-perc-neutral { --c: var(--se-status-neutral); --c-soft: var(--se-status-neutral-soft); }
.se-percorso.fermo li::after { border-style: dashed; }
.se-percorso-nota { margin: 6px 0 0; font-size: .78rem; color: var(--se-text-secondary); }

/* ---------- 15.5 Schede (tab) nella testata ---------- */
.se-schede { display: flex; gap: 2px; margin-top: var(--se-space-3); overflow-x: auto; scrollbar-width: none; }
.se-scheda {
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--se-text-secondary);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 12px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    cursor: pointer;
}
.se-scheda:hover:not(:disabled) { color: var(--se-text); }
.se-scheda.attiva { color: var(--se-primary); border-bottom-color: var(--se-primary); }
.se-scheda:disabled { color: var(--se-border-strong); cursor: not-allowed; }
.se-scheda:focus-visible { outline: 2px solid var(--se-primary); outline-offset: -2px; border-radius: 6px; }
.se-scheda-n {
    font-size: .72rem;
    font-weight: 600;
    line-height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--se-surface-muted);
    border: 1px solid var(--se-border);
    color: var(--se-text-secondary);
    font-variant-numeric: tabular-nums;
}
.se-scheda.attiva .se-scheda-n { background: var(--se-primary-soft); border-color: transparent; color: var(--se-primary); }

/* ---------- 15.6 Corpo e sezioni ---------- */
.se-dlg-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--se-space-1) var(--se-space-6) var(--se-space-2);
}
.se-sez {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--se-space-5);
    padding: var(--se-space-5) 0;
    border-bottom: 1px solid var(--se-border-soft);
}
.se-sez:last-child { border-bottom: 0; }
.se-sez-titolo { margin: 2px 0 4px; font-size: .9rem; font-weight: 650; color: var(--se-text); letter-spacing: 0; }
.se-sez-desc { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--se-text-secondary); }
.se-sez-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--se-space-4); align-content: start; }
.se-sez-campi-1 { grid-template-columns: minmax(0, 1fr); }

/* ---------- 15.7 Campi ---------- */
.se-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; position: relative; }
.se-campo-largo { grid-column: 1 / -1; }
.se-campo-etichetta { font-size: .8rem; font-weight: 600; color: var(--se-text); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.se-campo-obb { color: var(--se-status-danger-text); font-weight: 600; }
.se-campo-fac { color: var(--se-text-secondary); font-weight: 500; }
.se-campo-aiuto { font-size: .78rem; color: var(--se-text-secondary); }
.se-campo-msg-errore { font-size: .78rem; color: var(--se-status-danger-text); display: flex; gap: 5px; align-items: flex-start; }
.se-campo-msg-errore .rzi { font-size: 16px; }
/* Valore cambiato e non salvato: segno a sinistra del campo */
.se-campo-mod::before {
    content: "";
    position: absolute;
    left: -10px; top: 22px; bottom: 4px;
    width: 3px;
    border-radius: 3px;
    background: var(--se-status-warning);
}

/* Input: riquadro unico per tutti i controlli Radzen dentro un SeCampo */
.se-campo .rz-textbox,
.se-campo .rz-textarea,
.se-campo .rz-dropdown,
.se-campo .rz-datepicker,
.se-campo .rz-numeric {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--se-border-strong) !important;
    border-radius: var(--se-radius-sm) !important;
    background-color: var(--se-surface) !important;
    box-shadow: none !important;
    font-size: .9rem;
    color: var(--se-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.se-campo .rz-textbox,
.se-campo .rz-textarea { padding-inline: 12px !important; }
.se-campo .rz-textarea { padding-block: 9px !important; line-height: 1.5; resize: vertical; }
.se-campo .rz-datepicker > .rz-inputtext,
.se-campo .rz-numeric > .rz-inputtext {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-inline: 12px !important;
}
.se-campo .rz-dropdown { padding-inline: 12px 8px !important; }
.se-campo .rz-dropdown .rz-dropdown-label,
.se-campo .rz-dropdown .rz-placeholder { padding-inline-start: 0 !important; }
.se-campo :is(.rz-textbox, .rz-textarea, .rz-dropdown, .rz-datepicker, .rz-numeric):hover:not(.rz-state-disabled):not(:disabled) {
    border-color: var(--se-text-secondary) !important;
}
.se-campo :is(.rz-textbox, .rz-textarea):focus,
.se-campo :is(.rz-dropdown, .rz-datepicker, .rz-numeric):focus-within,
.se-campo .rz-dropdown.rz-state-focused {
    border-color: var(--se-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--se-primary-rgb), .14) !important;
    outline: none;
}
.se-campo-errore :is(.rz-textbox, .rz-textarea, .rz-dropdown, .rz-datepicker, .rz-numeric) {
    border-color: var(--se-status-danger) !important;
    box-shadow: 0 0 0 3px var(--se-status-danger-soft) !important;
}
.se-campo :is(.rz-textbox, .rz-textarea, .rz-dropdown, .rz-datepicker, .rz-numeric).rz-state-disabled,
.se-campo :is(.rz-textbox, .rz-textarea):disabled {
    background-color: var(--se-surface-muted) !important;
    color: var(--se-text) !important;
    opacity: 1;
    border-style: dashed !important;
}
.se-campo ::placeholder { color: #94A0B4; opacity: 1; }

/* Interruttore con testo accanto (es. "Puo' accedere all'app") */
.se-interruttore { display: flex; align-items: center; gap: 10px; font-size: .9rem; min-height: 40px; }

/* Riquadro riservato (note interne: solo Assistenza) */
.se-riservato {
    grid-column: 1 / -1;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: var(--se-radius);
    padding: var(--se-space-3) var(--se-space-4);
}
.se-riservato .se-campo-etichetta { color: var(--se-status-warning-text); }
.se-riservato .se-campo-etichetta .rzi { font-size: 16px; }

/* Stato di caricamento del dialog */
.se-dlg-caricamento {
    display: flex; align-items: center; justify-content: center; gap: var(--se-space-3);
    padding: var(--se-space-8); color: var(--se-text-secondary);
}

/* Elenchi dentro le schede (allegati) */
.se-dlg-lista { list-style: none; margin: 0; padding: 0; }
.se-dlg-lista > li {
    display: flex; align-items: center; gap: var(--se-space-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--se-border-soft);
    min-width: 0;
}
.se-dlg-lista > li:last-child { border-bottom: 0; }
.se-dlg-lista .rzi { color: var(--se-text-secondary); }
.se-dlg-lista-testo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.se-dlg-lista-sub { display: block; font-size: .78rem; color: var(--se-text-secondary); }
.se-dlg-vuoto { color: var(--se-text-secondary); font-size: .88rem; padding: var(--se-space-4) 0; margin: 0; }

/* R-016: dati fiscali dell'indirizzo predefinito, in sola lettura nell'anagrafica dello studio */
.se-dlg-fiscali {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--se-space-3) var(--se-space-5);
    border: 1px solid var(--se-border);
    border-radius: var(--se-radius);
    background: var(--se-surface-muted);
    padding: var(--se-space-4);
}
.se-dlg-fiscali-testa { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--se-space-3); min-width: 0; }
.se-dlg-fiscali-testa .se-pill { margin-right: 4px; }
.se-dlg-fiscali-k { font-size: .72rem; color: var(--se-text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.se-dlg-fiscali-v { font-size: .88rem; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 640px) { .se-dlg-fiscali { grid-template-columns: 1fr; } }
.se-dlg-carica {
    border: 1px dashed var(--se-border-strong);
    border-radius: var(--se-radius);
    padding: var(--se-space-4);
    background: var(--se-surface-muted);
}
.se-dlg-carica-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--se-space-3); }

/* Avviso studi medici (R-031): confronto fra immagine attuale e nuova, e conteggio dei
   destinatari. L'immagine E' il contenuto dell'avviso, quindi si guarda prima di pubblicare. */
.se-dlg-img-confronto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--se-space-3);
    width: 100%;
}
.se-dlg-img-uno {
    border: 1px solid var(--se-border);
    border-radius: var(--se-radius-sm);
    overflow: hidden;
    background: var(--se-surface);
}
.se-dlg-img-et {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: var(--se-space-1) var(--se-space-2);
    background: var(--se-surface-muted);
    border-bottom: 1px solid var(--se-border-soft);
    color: var(--se-text-secondary);
}
/* contain e non cover: l'immagine caricata puo' avere proporzioni qualsiasi */
.se-dlg-img-tela {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--se-space-2);
    background: var(--se-surface-muted);
}
.se-dlg-img-tela img { max-width: 100%; max-height: 100%; object-fit: contain; }
.se-dlg-img-vuota { font-size: .78rem; color: var(--se-text-secondary); text-align: center; }
.se-dlg-img-pie {
    padding: var(--se-space-2);
    font-size: .74rem;
    color: var(--se-text-secondary);
    word-break: break-all;
    border-top: 1px solid var(--se-border-soft);
}

.se-dlg-destinatari {
    font-size: .82rem;
    line-height: 1.5;
    background: var(--se-surface-muted);
    border: 1px solid var(--se-border-soft);
    border-radius: var(--se-radius-sm);
    padding: var(--se-space-2) var(--se-space-3);
    color: var(--se-text-secondary);
    width: 100%;
}
.se-dlg-destinatari b { color: var(--se-primary-dark); }
.se-dlg-dest-calc { font-style: italic; }
.se-dlg-dest-zero { color: var(--se-status-warning-text); }
.se-dlg-dest-zero b { color: var(--se-status-warning-text); }

/* Visore a tutta pagina per un'immagine (R-031): nella scheda l'avviso si vede in piccolo
   (nel banner del medico sta in 200px), e un volantino li' dentro non si legge.
   E' un dialog Radzen, non un div fisso: .rz-body ha transform translateZ(0) e un
   position:fixed dentro di esso si ancora a quel riquadro invece che allo schermo. */
.se-visore-host .rz-dialog-content { padding: 0; }
.se-visore-corpo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--se-surface-muted);
    border-radius: var(--se-radius-sm);
    padding: var(--se-space-3);
    cursor: zoom-out;
    min-height: 120px;
}
.se-visore-corpo img { max-width: 100%; max-height: 78vh; object-fit: contain; }

/* Avvisi degli studi medici nella home del medico (R-031). Immagine a sinistra, a destra
   per quali studi vale: con piu' studi, senza quell'indicazione l'avviso e' ambiguo. */
.se-avvisi-home { display: flex; flex-direction: column; gap: var(--se-space-3); margin-bottom: var(--se-space-5); }

/* Scheda bassa, testo centrato in verticale, filetto di marchio a sinistra.
   Il poster e' RITAGLIATO dall'alto (cover), non contenuto: le immagini caricate sono
   volantini verticali (quella su DEV e' 1800x3099) e intere, rimpicciolite, non si
   leggono; in cima invece c'e' il titolo del volantino. */
.se-avviso-home {
    display: grid;
    grid-template-columns: 140px 1fr;
    min-height: 152px;
    border: 1px solid var(--se-border);
    border-left: 4px solid var(--se-primary);
    border-radius: var(--se-radius);
    background: var(--se-surface);
    box-shadow: var(--se-shadow);
    overflow: hidden;
}

/* ⚠️ L'immagine va TOLTA dal calcolo dell'altezza. Con height:100% dentro una riga di
   griglia ad altezza automatica ricade sulle proporzioni native e si trascina dietro la
   scheda: misurato 180px invece di 152. In posizione assoluta non contribuisce, e
   l'altezza la decide il testo. */
.se-avviso-home-tela {
    position: relative;
    overflow: hidden;
    background: var(--se-surface-muted);
    border-right: 1px solid var(--se-border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--se-text-secondary);
}
.se-avviso-home-tela img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    cursor: zoom-in;
}
.se-avviso-home-testo {
    padding: var(--se-space-3) var(--se-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--se-space-2);
    justify-content: center;
}
.se-avviso-home-riga1 { display: flex; align-items: center; gap: var(--se-space-2); flex-wrap: wrap; }
.se-avviso-home-fino { font-size: .74rem; color: var(--se-text-secondary); }
.se-avviso-home-titolo { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--se-text); }
.se-avviso-home-vale { margin: 0; font-size: .82rem; color: var(--se-text-secondary); line-height: 1.5; }
.se-avviso-home-vale b { color: var(--se-text); font-weight: 600; }
.se-avviso-home-azioni { display: flex; gap: var(--se-space-2); margin-top: var(--se-space-1); flex-wrap: wrap; }

/* Sotto i 640px il poster verticale non si legge comunque: sparisce e resta il titolo,
   che e' esattamente il motivo per cui la colonna Titolo esiste (script 014). */
@media (max-width: 640px) {
    .se-avviso-home { grid-template-columns: 1fr; min-height: 0; }
    .se-avviso-home-tela { display: none; }
    .se-avviso-home-testo { padding: var(--se-space-3); }
}

/* Storico: linea del tempo */
.se-storico { list-style: none; margin: 0; padding: var(--se-space-4) 0 0; }
.se-storico li { position: relative; padding: 0 0 var(--se-space-4) 22px; }
.se-storico li::before {
    content: ""; position: absolute; left: 4px; top: 5px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--se-surface); border: 2px solid var(--se-primary);
}
.se-storico li::after {
    content: ""; position: absolute; left: 9px; top: 19px; bottom: 2px;
    width: 1px; background: var(--se-border);
}
.se-storico li:last-child::after { display: none; }
.se-storico-quando { font-size: .78rem; color: var(--se-text-secondary); font-variant-numeric: tabular-nums; }
.se-storico-nota { font-size: .9rem; margin-top: 2px; overflow-wrap: anywhere; }

/* Timeline del caso (R-054): la stessa linea dello storico, con un'icona colorata per tipo
   di evento al posto del pallino, un titolo e un filtro per tipo. */
.se-timeline-filtri { display: flex; flex-wrap: wrap; gap: var(--se-space-2); padding-top: var(--se-space-3); }
.se-timeline li { padding-left: 34px; }
.se-timeline li::before { display: none; }
.se-timeline li::after { left: 12px; top: 26px; }
.se-tl-icona {
    position: absolute; left: 0; top: 0; width: 25px; height: 25px; border-radius: 50%;
    display: grid; place-items: center; background: var(--se-status-neutral-soft); color: var(--se-status-neutral-text);
}
.se-tl-icona .rzi { font-size: 15px; }
.se-tl-stato .se-tl-icona { background: var(--se-primary-soft); color: var(--se-primary); }
.se-tl-setup .se-tl-icona { background: var(--se-status-violet-soft); color: var(--se-status-violet-text); }
.se-tl-foto .se-tl-icona { background: var(--se-status-info-soft); color: var(--se-status-info-text); }
.se-tl-file .se-tl-icona { background: var(--se-status-warning-soft); color: var(--se-status-warning-text); }
.se-tl-nota .se-tl-icona { background: var(--se-status-success-soft); color: var(--se-status-success-text); }
.se-tl-titolo { font-size: .9rem; font-weight: 600; margin-top: 1px; }

/* ---------- 15.8 Piede: azioni sempre visibili ---------- */
.se-dlg-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--se-space-2) var(--se-space-3);
    padding: var(--se-space-3) var(--se-space-6);
    border-top: 1px solid var(--se-border);
    background: var(--se-surface);
}
.se-dlg-foot-info { flex: 1 1 240px; display: flex; align-items: center; gap: var(--se-space-3); min-width: 0; }
.se-dlg-foot-info .rz-textbox {
    flex: 1 1 auto; min-width: 0; height: 38px;
    border: 1px solid var(--se-border-strong) !important;
    border-radius: var(--se-radius-sm) !important;
    background: var(--se-surface) !important;
    box-shadow: none !important;
    padding-inline: 12px !important;
    font-size: .88rem;
}
.se-dlg-foot-info .rz-textbox:focus { border-color: var(--se-primary) !important; box-shadow: 0 0 0 3px rgba(var(--se-primary-rgb), .14) !important; }
.se-dlg-mod {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 600; white-space: nowrap;
    color: var(--se-status-warning-text);
}
.se-dlg-mod::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--se-status-warning); }
.se-dlg-azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--se-space-2); margin-left: auto; align-items: center; }
.se-dlg-azioni .rz-button { min-height: 38px; }
.se-dlg-azioni .rz-dropdown {
    min-height: 38px;
    border: 1px solid var(--se-border-strong) !important;
    border-radius: var(--se-radius-sm) !important;
    background: var(--se-surface) !important;
    box-shadow: none !important;
}
.se-dlg-azioni .rz-dropdown { padding-inline: 12px 8px !important; }
.se-dlg-azioni .rz-dropdown .rz-dropdown-label,
.se-dlg-azioni .rz-dropdown .rz-placeholder { padding-inline-start: 0 !important; }
.se-tasto {
    font-size: .68rem; font-weight: 600; line-height: 16px;
    padding: 0 4px; margin-left: 4px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 4px;
    opacity: .9;
}

/* ---------- 15.9 Mobile: schermo intero, una colonna, tocco 44px ---------- */
@media (max-width: 767px) {
    .rz-dialog.se-dlg-host,
    .rz-dialog:has(> .rz-dialog-content > .se-dlg) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        animation: none;
    }
    .se-dlg-head { padding: var(--se-space-3) var(--se-space-4) 0; }
    .se-dlg-head:not(:has(.se-schede)) { padding-bottom: var(--se-space-3); }
    .se-dlg-titolo { font-size: 1.1rem; }
    .se-dlg-stato { display: none; }
    .se-dlg-body { padding: 0 var(--se-space-4) var(--se-space-2); }
    .se-sez { grid-template-columns: minmax(0, 1fr); gap: var(--se-space-3); padding: var(--se-space-4) 0; }
    .se-sez-campi { grid-template-columns: minmax(0, 1fr); }
    .se-campo :is(.rz-textbox, .rz-dropdown, .rz-datepicker, .rz-numeric) { min-height: 44px; }
    .se-campo-mod::before { left: -8px; }
    .se-percorso li > span { display: none; }
    .se-percorso li.ora > span { display: block; overflow: visible; }
    .se-dlg-foot { padding: var(--se-space-2) var(--se-space-4) var(--se-space-3); }
    .se-dlg-foot-info { flex-basis: 100%; }
    .se-dlg-azioni { width: 100%; margin-left: 0; }
    .se-dlg-azioni .rz-button { min-height: 44px; flex: 1 1 auto; justify-content: center; }
    .se-dlg-azioni .rz-dropdown { flex: 1 1 55%; min-width: 0 !important; min-height: 44px; }
    /* Con piu' di due azioni la principale va su una riga sua, in fondo */
    .se-dlg-azioni:has(> :nth-child(3)) .rz-button.rz-primary { flex-basis: 100%; order: 99; }
    /* "Esci" duplica la X della testata: su telefono si risparmia una riga */
    .se-dlg-azioni .se-esci { display: none; }
    /* Testata piu' bassa: resta la prima informazione di contesto */
    .se-dlg-meta > span + span { display: none; }
    .se-tasto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .se-campo :is(.rz-textbox, .rz-textarea, .rz-dropdown, .rz-datepicker, .rz-numeric) { transition: none; }
}

/* ---------- 15.10 Caricamento file e galleria foto ---------- */
/* Pulsante "Carica ..." costruito su <label> + InputFile nascosto: clic e tastiera nativi */
.se-btn-file {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--se-border-strong);
    border-radius: var(--se-radius-sm);
    background: var(--se-surface);
    color: var(--se-primary);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.se-btn-file:hover { background: var(--se-primary-soft); border-color: var(--se-primary); }
.se-btn-file:focus-within { outline: 2px solid var(--se-primary); outline-offset: 2px; }
.se-btn-file .rzi { font-size: 18px; }
.se-btn-file input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; font-size: 0; }
.se-btn-file.occupato { opacity: .6; pointer-events: none; }

.se-galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--se-space-2); }
.se-galleria-foto {
    position: relative;
    border: 1px solid var(--se-border);
    border-radius: var(--se-radius-sm);
    background: var(--se-surface);
    overflow: hidden;
}
.se-galleria-foto img { display: block; width: 100%; height: 96px; object-fit: cover; cursor: zoom-in; }
.se-galleria-didascalia {
    padding: 4px 6px;
    font-size: .72rem;
    color: var(--se-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.se-galleria-foto .rz-button { position: absolute; top: 4px; right: 4px; }
@media (max-width: 767px) {
    .se-galleria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .se-btn-file { min-height: 44px; }
}


/* =====================================================================
   16. GRIGLIE: PANNELLO DI RICERCA E BLOCCHI INFO (2026-10-05, R-014)
   Pannello di ricerca unico al posto dei filtri dentro le intestazioni di colonna
   (RadzenDataGrid con AllowFiltering="false"): si filtra in un posto solo e il
   pannello dichiara quanti filtri sono attivi.
   Blocchi .se-info: riprendono la forma della vecchia app (un numero per riga con
   accanto il nome della fase) perche' era piu' leggibile di "4/47/0"; i colori
   vengono dai token di stato invece che dai pieni saturi del legacy.
   ===================================================================== */

/* ---------- 16.1 Pannello di ricerca ---------- */
.se-ricerca {
    margin-bottom: var(--se-space-4);
}

/* Intestazione del fieldset Radzen: titolo a sinistra, conteggio a destra. */
.se-ricerca .rz-fieldset-legend-text {
    font-weight: 600;
}

.se-ricerca-conta {
    font-size: 0.78rem;
    color: var(--se-text-secondary);
    font-variant-numeric: tabular-nums;
}

.se-ricerca-piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--se-space-3);
    margin-top: var(--se-space-3);
    padding-top: var(--se-space-3);
    border-top: 1px solid var(--se-border-soft);
}

.se-ricerca-attivi {
    font-size: 0.78rem;
    color: var(--se-text-secondary);
}

.se-ricerca-azioni {
    display: flex;
    gap: var(--se-space-2);
    margin-left: auto;
}

/* ---------- 16.1b Filtri rapidi ---------- */
/* Le tre condizioni che si guardano tutti i giorni, a portata di un clic (R-033). Non sono
   un filtro in piu': sono una scorciatoia alla tendina "Stato prescrizione", e la pastiglia
   accesa e' quella selezionata li' — cosi' i due comandi non possono raccontare cose diverse. */
.se-filtri-rapidi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--se-space-2);
    margin-bottom: var(--se-space-3);
}

.se-filtri-rapidi-eti {
    font-size: 0.72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--se-text-secondary);
}

.se-chip-filtro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.4;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--se-border-strong);
    background: var(--se-surface);
    color: var(--se-text);
    cursor: pointer;
}

.se-chip-filtro .rzi { font-size: 1rem; }
.se-chip-filtro:hover { border-color: var(--se-primary); color: var(--se-primary); }
.se-chip-filtro:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 1px; }

.se-chip-filtro-attivo,
.se-chip-filtro-attivo:hover {
    background: var(--se-primary);
    border-color: var(--se-primary);
    color: var(--se-surface);
}

/* ---------- 16.2 Interruttore a segmenti (Attivi / Non attivi / Tutti) ---------- */
/* Tre opzioni che si escludono: un interruttore si legge e si cambia con un clic solo,
   una tendina ne chiede due e nasconde le alternative. L'etichetta sta sopra perche'
   qui non c'e' un input Radzen a cui agganciare la label flottante di RadzenFormField. */
.se-campo-seg {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.se-seg-etichetta {
    font-size: 0.72rem;
    color: var(--se-text-secondary);
    margin-bottom: 4px;
    padding-left: 2px;
}

.se-seg {
    display: flex;
    border: 1px solid var(--se-border-strong);
    border-radius: var(--se-radius-sm);
    overflow: hidden;
    width: 100%;
}

.se-seg button {
    flex: 1;
    border: 0;
    border-right: 1px solid var(--se-border-soft);
    background: var(--se-surface);
    font: inherit;
    font-size: 0.82rem;
    line-height: 1;
    padding: 0.6rem 0.35rem;
    color: var(--se-text-secondary);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.se-seg button:last-child { border-right: 0; }
.se-seg button:hover { background: var(--se-surface-muted); }

.se-seg button.attivo {
    background: var(--se-primary-soft);
    color: var(--se-primary-dark);
    font-weight: 600;
}

.se-seg button:focus-visible {
    outline: 2px solid var(--se-primary);
    outline-offset: -2px;
}

/* ---------- 16.3 Blocchi INFO FOTO / INFO FILE ---------- */
.se-info {
    display: block;
    width: fit-content;
    min-width: 108px;
    padding: 4px 8px;
    border-radius: var(--se-radius-sm);
    border: 1px solid transparent;
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: left;
}

/* Nelle celle centrate il blocco si centra da solo; due blocchi si impilano. */
.rz-data-grid td.se-cella-centro .se-info { margin-left: auto; margin-right: auto; }
.se-info + .se-info { margin-top: 3px; }

/* Numero a destra in colonna fissa: 4 e 47 restano incolonnati fra righe diverse. */
.se-info-r {
    display: grid;
    grid-template-columns: 2.1em 1fr;
    gap: 6px;
}

.se-info-r b {
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Stati. La regola e' la stessa del filtro "stato foto":
   verde = iniziali e finali - giallo = solo iniziali - bianco = solo finali - rosso = nessuna. */
.se-info.ok {
    background: var(--se-status-success-soft);
    color: var(--se-status-success-text);
    border-color: var(--se-status-success-border);
}

.se-info.parziale {
    background: var(--se-status-warning-soft);
    color: var(--se-status-warning-text);
    border-color: var(--se-status-warning-border);
}

.se-info.manca {
    background: var(--se-status-danger-soft);
    color: var(--se-status-danger-text);
    border-color: var(--se-status-danger-border);
}

/* "Solo finali senza iniziali" e' un caso anomalo ma non un errore: resta bianco. */
.se-info.neutro {
    background: var(--se-surface);
    color: var(--se-text-secondary);
    border-color: var(--se-border-strong);
}

/* Altri allegati: informativo, non blocca niente. */
.se-info.accessorio {
    background: var(--se-status-info-soft);
    color: var(--se-status-info-text);
    border-color: var(--se-status-info-border);
}

/* ---------- 16.3b Errore del server dentro un dialog ---------- */
/* Un errore che arriva dall'API non appartiene a un campo: va nel piede, vicino al pulsante
   che l'ha provocato, e il dialog resta aperto con i dati gia' scritti. */
.se-dlg-errore-api {
    display: flex;
    align-items: center;
    gap: var(--se-space-2);
    flex: 1 1 100%;
    padding: var(--se-space-2) var(--se-space-3);
    border-radius: var(--se-radius-sm);
    background: var(--se-status-danger-soft);
    color: var(--se-status-danger-text);
    border: 1px solid var(--se-status-danger-border);
    font-size: 0.82rem;
}

.se-dlg-errore-api .rzi { font-size: 1.05rem; flex: none; }

/* ---------- 16.3c Intestazione di gruppo fra piu' SeSezione ---------- */
/* Separa il blocco "Impostazioni avanzate" dalla richiesta vera e propria nella form
   prescrizione: le sezioni sotto restano distinte, ma si capisce che sono un insieme. */
.se-sez-gruppo {
    margin: var(--se-space-6) 0 var(--se-space-2);
    padding-top: var(--se-space-4);
    border-top: 1px solid var(--se-border);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--se-text);
}

.se-sez-gruppo span {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--se-text-secondary);
    margin-top: 2px;
}

/* ---------- 16.4 Celle di griglia ---------- */
/* Seconda riga sotto il valore principale (email sotto il nome, data sotto lo stato). */
.se-cella-sub {
    display: block;
    font-size: 0.72rem;
    color: var(--se-text-secondary);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.se-cella-principale {
    font-weight: 600;
}

/* "Niente" detto senza gridarlo: il rosso resta per cio' che manca davvero. */
.se-cella-vuota {
    color: var(--se-border-strong);
}

/* Contatore cliccabile (note, audio): sembra un link solo quando c'e' qualcosa da aprire. */
.se-conta-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 0;
    background: none;
    padding: 2px 4px;
    border-radius: var(--se-radius-sm);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--se-status-warning-text);
    cursor: pointer;
    transition: background-color .15s ease;
}

.se-conta-link:hover { background: var(--se-status-warning-soft); }

.se-conta-link:focus-visible {
    outline: 2px solid var(--se-primary);
    outline-offset: 1px;
}

.se-conta-link .rzi { font-size: 1rem; }

/* L'audio non e' un avviso: tono informativo, non attenzione. */
.se-conta-link.se-conta-audio { color: var(--se-status-info-text); }
.se-conta-link.se-conta-audio:hover { background: var(--se-status-info-soft); }

@media (max-width: 767px) {
    .se-ricerca-azioni { width: 100%; }
    .se-ricerca-azioni .rz-button { flex: 1; }
    .se-seg button { padding: 0.75rem 0.35rem; }
}

/* =====================================================================
   15. MENU LATERALE NAVY (2026-10-06, R-021 — proposta P2 "navy clinico")
   Scelta fra tre proposte (SmartSpecificheV2/mockup/menu_proposte_v2.html):
   colonna navy piu' profonda della topbar, voce attiva con barra teal,
   gruppi diventati sezioni sempre aperte (niente piu' accordion).
   Gerarchia voluta: topbar = marchio, colonna = struttura, corpo = carta.
   SOVRASCRIVE la 13.5 (sidebar bianca a tint): sta dopo nel file, stessa
   specificita'. Se una regola della 13.5 sembra non avere effetto, e' qui.
   ===================================================================== */
:root {
    --se-sidebar-bg: #0A2D5C;
    --se-sidebar-text: rgba(255, 255, 255, .80);
    --se-sidebar-text-forte: #FFFFFF;
    --se-sidebar-icona: rgba(255, 255, 255, .60);
    --se-sidebar-etichetta: rgba(255, 255, 255, .46);
    --se-sidebar-hover: rgba(255, 255, 255, .08);
    --se-sidebar-attiva: rgba(255, 255, 255, .12);
    --se-sidebar-bordo: rgba(255, 255, 255, .14);
    /* Accento del menu: l'azzurrino del logo SmartEvolution, campionato dal
       file (il logo ha due soli colori: #204E9C e #7BBBDD). Scelto al posto
       del teal perche' l'accento dell'interfaccia richiami il marchio.
       Su navy #0A2D5C fa 6,5:1 di contrasto, quindi regge anche come testo. */
    --se-azzurro-logo: #7BBBDD;
    --se-sidebar-accento: var(--se-azzurro-logo);
    --se-sidebar-accento-chiaro: var(--se-azzurro-logo);
    --rz-sidebar-background-color: #0A2D5C !important;

    /* Icone piu' sottili in tutta l'app. Erano gia' outline (il font
       Material Symbols di Radzen ha FILL 0 di default): a pesare era il
       tratto, non il glifo. Il font e' variabile (wght 100-700) e Radzen
       espone il peso come token, quindi basta questo. !important perche'
       material-base.css ridefinisce :root dopo di noi. */
    --rz-icon-weight: 300 !important;

    /* Spazio fra icona ed etichetta della voce di menu. Radzen mette
       "margin-inline: 0 1rem" sull'icona del panel menu, che si SOMMAVA al
       "gap: 10px" della voce: 26px in tutto, troppi, e con le etichette lunghe
       ("Studi medici in cui operi") era spazio rubato al testo. Azzerato il
       margine: la distanza la decide solo il gap. Si tocca il token e non la
       regola perche' .rz-panel-menu .rz-navigation-item-icon ha la stessa
       specificita' della nostra .rz-sidebar .rz-navigation-item-icon e
       material-base.css e' iniettato dopo, quindi vincerebbe lui.
       !important per lo stesso motivo degli altri --rz-* qui sopra. */
    --rz-panel-menu-icon-margin-inline: 0 !important;
}

.rz-sidebar {
    background: var(--se-sidebar-bg) !important;
    border-right: none !important;
}

/* L'<ul> del panel menu, le <li> e il wrapper della voce hanno un fondo
   bianco proprio (tema material di Radzen): senza questo coprono il navy
   della colonna e si vede solo la fascia del piede. */
.rz-sidebar .rz-panel-menu,
.rz-sidebar .rz-navigation-item,
.rz-sidebar .rz-navigation-item-wrapper,
.rz-sidebar .rz-navigation-item-wrapper-active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.rz-sidebar .rz-panel-menu {
    padding: var(--se-space-2) 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

/* Etichetta di sezione: non e' un gruppo da aprire, e' un titolo.
   <li> e non <div>: il contenuto di RadzenPanelMenu finisce dentro un <ul>. */
.se-nav-sez {
    list-style: none;
    padding: var(--se-space-4) 18px var(--se-space-1);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--se-sidebar-etichetta);
}

.se-nav-sez:first-child { padding-top: var(--se-space-1); }

.rz-sidebar .rz-navigation-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px !important;
    margin: 1px 8px;
    border-radius: var(--se-radius-sm);
    /* transparent, non il radial-gradient del ripple Radzen: su fondo navy
       l'onda chiara al clic lampeggia (stessa scelta della sezione 7). */
    background: transparent !important;
    color: var(--se-sidebar-text) !important;
    font-size: .845rem;
    font-weight: 500;
    box-shadow: none;
}

/* Qui c'erano anche "width: 20px; height: 20px", tolte il 2026-10-07 perche'
   non avevano effetto: la casella dell'icona resta 24x24 (il valore Radzen
   --rz-panel-menu-icon-width/height) sia con sia senza, provato ricaricando il
   CSS nei due stati. Stessa specificita' della regola Radzen, ma material-base
   e' iniettato dopo di noi, quindi vince lui: per cambiare la misura si tocca
   il token, come per il margine qui sopra.
   ⚠️ Misurare a font assestato (await document.fonts.ready): finche' Material
   Symbols non e' caricato l'icona misura 20px di largo e sembra che le due
   righe funzionino. */
.rz-sidebar .rz-navigation-item-icon {
    color: var(--se-sidebar-icona) !important;
    font-size: 20px !important;
}

.rz-sidebar .rz-navigation-item-link:hover {
    background: var(--se-sidebar-hover) !important;
    color: var(--se-sidebar-text-forte) !important;
}

.rz-sidebar .rz-navigation-item-link:hover .rz-navigation-item-icon {
    color: var(--se-sidebar-text-forte) !important;
}

.rz-sidebar .rz-navigation-item-link.rz-navigation-item-link-active,
.rz-sidebar .rz-navigation-item-link[aria-current="page"] {
    background: var(--se-sidebar-attiva) !important;
    color: var(--se-sidebar-text-forte) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--se-sidebar-accento);
}

.rz-sidebar .rz-navigation-item-link.rz-navigation-item-link-active .rz-navigation-item-icon,
.rz-sidebar .rz-navigation-item-link[aria-current="page"] .rz-navigation-item-icon {
    color: var(--se-sidebar-accento-chiaro) !important;
}

/* Colonna collassata: l'etichetta diventa un filetto, altrimenti il testo
   viene tagliato a meta' dalla larghezza ridotta. */
.rz-sidebar-collapsed .se-nav-sez {
    height: 1px;
    padding: 0;
    margin: var(--se-space-3) 14px;
    font-size: 0;
    background: var(--se-sidebar-bordo);
}

.rz-sidebar-collapsed .rz-navigation-item-link { justify-content: center; }

/* ---------- 15.1 Piede: utente, cambio password, uscita ---------- */
.se-nav-piede {
    border-top: 1px solid var(--se-sidebar-bordo);
    padding: var(--se-space-3);
}

.se-nav-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: rgba(123, 187, 221, .20);
    color: var(--se-sidebar-accento-chiaro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.se-nav-utente { min-width: 0; flex: 1; }

.se-nav-utente-nome {
    font-size: .8rem;
    font-weight: 600;
    color: var(--se-sidebar-text-forte);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.se-nav-utente-ruolo {
    font-size: .7rem;
    color: var(--se-sidebar-etichetta);
}

/* I bottoni chiari della 13.6 su navy diventano due macchie bianche. */
.se-nav-piede .rz-button.rz-light {
    background: transparent !important;
    border: 1px solid var(--se-sidebar-bordo) !important;
    color: rgba(255, 255, 255, .75) !important;
}

.se-nav-piede .rz-button.rz-light:hover {
    background: var(--se-sidebar-hover) !important;
    color: var(--se-sidebar-text-forte) !important;
}

.rz-sidebar-collapsed .se-nav-piede { padding: var(--se-space-3) 0; }
.rz-sidebar-collapsed .se-nav-utente,
.rz-sidebar-collapsed .se-nav-piede .rz-button { display: none; }

/* Testo delle voci con badge: il Template sostituisce il Text, quindi
   l'etichetta la mettiamo noi e il badge resta appoggiato a destra. */
.se-nav-voce-et {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rz-sidebar-collapsed .se-nav-voce-et { display: none; }

/* ---------- 17. Diario delle attività sullo studio (R-034) ---------- */
/* Una linea del tempo dentro una scheda del dialog studio medico. Due generi di voce:
   quelle scritte a mano dagli agenti (pallino pieno, azzurrino) e i fatti che
   l'applicazione già conosce (pallino vuoto, tratteggiato). La differenza si deve
   cogliere senza leggere l'etichetta. */

.se-diario-barra {
    display: flex;
    align-items: center;
    gap: var(--se-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--se-space-3);
}

.se-diario-filtri { display: flex; gap: 6px; flex-wrap: wrap; }
.se-diario-barra > .rz-button { margin-left: auto; }

.se-diario-pill {
    font-size: 0.74rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--se-border-strong);
    background: var(--se-surface);
    color: var(--se-text-secondary);
    cursor: pointer;
    font-family: inherit;
}

.se-diario-pill:hover { border-color: var(--se-primary); color: var(--se-primary); }

.se-diario-pill.on {
    background: var(--se-primary);
    border-color: var(--se-primary);
    color: #fff;
    font-weight: 600;
}

/* la linea verticale */
.se-diario { position: relative; padding-left: 30px; }

.se-diario::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--se-border);
}

.se-diario-mese {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--se-text-secondary);
    margin: 10px 0 8px;
}

.se-diario-mese:first-child { margin-top: 0; }

.se-diario-ev { position: relative; padding-bottom: 14px; }
.se-diario-ev:last-child { padding-bottom: 2px; }

.se-diario-pt {
    position: absolute;
    left: -30px;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--se-surface);
    border: 2px solid var(--se-border-strong);
    color: var(--se-text-secondary);
}

.se-diario-pt .rzi { font-size: 0.85rem; }

/* scritta a mano: pieno e in evidenza */
.se-diario-ev.man .se-diario-pt {
    border-color: var(--se-primary);
    background: var(--se-primary-soft);
    color: var(--se-primary);
}

/* ricostruita: tratteggiata, resta sullo sfondo */
.se-diario-ev.auto .se-diario-pt { border-style: dashed; }

.se-diario-testa {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

.se-diario-tipo { font-size: 0.86rem; font-weight: 700; }
.se-diario-quando,
.se-diario-chi { font-size: 0.74rem; color: var(--se-text-secondary); }
.se-diario-chi b { color: var(--se-text); font-weight: 600; }

.se-diario-bollo {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--se-neutral-soft, #F1F5F9);
    color: var(--se-text-secondary);
}

.se-diario-bollo.mano { background: var(--se-primary-soft); color: var(--se-primary); }

.se-diario-testo {
    font-size: 0.84rem;
    line-height: 1.55;
    margin-top: 2px;
    white-space: pre-wrap;
}

.se-diario-azioni { display: flex; gap: 6px; margin-top: 6px; }

/* sotto i 640px la linea si stringe: il testo conta più del disegno */
@media (max-width: 640px) {
    .se-diario { padding-left: 24px; }
    .se-diario::before { left: 8px; }
    .se-diario-pt { left: -24px; width: 19px; height: 19px; }
    .se-diario-pt .rzi { font-size: 0.72rem; }
    .se-diario-barra > .rz-button { margin-left: 0; width: 100%; }
}

/* ---------- 17b. Vista d'insieme delle attività agenti (R-034) ---------- */
/* Le schede in cima rispondono alla domanda che porta su questa pagina — "chi ha fatto
   cosa" — prima che si debba leggere la griglia. */

.se-attiv-riepilogo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--se-space-3);
}

.se-attiv-card {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: var(--se-radius);
    padding: var(--se-space-3);
    box-shadow: var(--se-shadow-sm, 0 1px 2px rgba(16,30,54,.06));
}

.se-attiv-card-n {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--se-primary);
}

.se-attiv-card-chi {
    font-size: 0.86rem;
    font-weight: 600;
    margin-top: 2px;
}

.se-attiv-card-det {
    font-size: 0.74rem;
    color: var(--se-text-secondary);
    margin-top: 3px;
    line-height: 1.45;
}

.se-attiv-tipo { display: inline-flex; align-items: center; gap: 5px; }
.se-attiv-tipo .rzi { font-size: 0.95rem; color: var(--se-text-secondary); }

/* il testo dell'attività può essere lungo: va a capo invece di tagliare la riga */
.se-attiv-testo {
    display: block;
    white-space: normal;
    line-height: 1.5;
    padding: 2px 0;
}

/* =====================================================================
   17. MENU AZIONI DI RIGA E RIGHE DI COSTO (2026-10-16, sezione 2)
   Il menu della griglia Pazienti e' passato da 9 a 16 voci portando la
   parita' con la vecchia app: a quel punto un elenco piatto non si legge
   piu'. Le voci sono raggruppate per argomento (mockup
   SmartSpecificheV2/mockup/pazienti_azioni_riga_v2.html).
   Decisione del 2026-10-16: niente numerazione come nell'app storica, dove
   i numeri cambiavano per ruolo e "la 5" non era la stessa voce per tutti.
   Il menu non e' una lista di ContextMenuItem ma un RenderFragment: Radzen
   8.7.5 non ha ne' intestazioni di gruppo ne' sottomenu su quel tipo.
   ===================================================================== */
.se-menu-azioni {
    min-width: 268px;
    padding: var(--se-space-1);
    display: flex;
    flex-direction: column;
    /* Aperto con un RenderFragment, Radzen non disegna il pannello del menu: il popup
       esce come .rz-tooltip, trasparente e senza ombra. La carta la mettiamo qui. */
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: var(--se-radius);
    box-shadow: var(--se-shadow);
    /* Con 16 voci il menu arriva a ~740px e, aperto su una riga a meta' pagina,
       sborda sotto il bordo della finestra: Radzen posiziona il popup sul punto
       del clic e non lo ribalta. Si limita qui e si scorre dentro. */
    max-height: min(62vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.se-menu-gruppo {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--se-text-secondary);
    padding: var(--se-space-3) var(--se-space-3) var(--se-space-1);
}

.se-menu-gruppo:first-child { padding-top: var(--se-space-2); }

.se-menu-voce {
    display: flex;
    align-items: center;
    gap: var(--se-space-2);
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--se-text);
    text-align: left;
    padding: var(--se-space-2) var(--se-space-3);
    border-radius: var(--se-radius-sm);
    cursor: pointer;
}

.se-menu-voce .rzi { font-size: 1.15rem; color: var(--se-text-secondary); flex: 0 0 auto; }
.se-menu-voce:hover:not(:disabled) { background: var(--se-primary-soft); }
.se-menu-voce:focus-visible { outline: 2px solid var(--se-primary); outline-offset: -2px; }

.se-menu-voce:disabled { color: var(--se-text-secondary); opacity: .55; cursor: default; }

.se-menu-voce.pericolo { color: var(--se-danger); }
.se-menu-voce.pericolo .rzi { color: var(--se-danger); }
.se-menu-voce.pericolo:hover:not(:disabled) { background: var(--se-status-danger-soft, var(--se-surface-muted)); }

/* conteggio a destra della voce (note, file dello studio) */
.se-menu-conta {
    margin-left: auto;
    background: var(--se-surface-muted);
    border: 1px solid var(--se-border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--se-text-secondary);
    padding: 1px 7px;
}

/* ---- righe di costo del dialog "Mostra costo" ---- */
.se-costo { margin: 0; }

.se-costo-riga {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--se-space-4);
    padding: var(--se-space-2) 0;
}

.se-costo-riga dt { color: var(--se-text-secondary); font-size: 0.86rem; margin: 0; }
.se-costo-riga dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.se-costo-tot {
    border-top: 1px solid var(--se-border);
    margin-top: var(--se-space-1);
    padding-top: var(--se-space-3);
}

.se-costo-tot dt { color: var(--se-text); font-weight: 700; font-size: 0.95rem; }
.se-costo-tot dd { font-size: 1.05rem; font-weight: 700; }

.se-costo-promo {
    display: flex;
    gap: var(--se-space-2);
    align-items: flex-start;
    background: var(--se-status-info-soft);
    color: var(--se-status-info-text);
    border-radius: var(--se-radius-sm);
    padding: var(--se-space-2) var(--se-space-3);
    font-size: 0.82rem;
    margin-bottom: var(--se-space-2);
}

.se-costo-promo .rzi { font-size: 1.05rem; }

/* riga che spiega perche' una pagina si e' aperta gia' filtrata da un'altra pagina */
.se-filtro-arrivo {
    display: flex;
    align-items: center;
    gap: var(--se-space-3);
    background: var(--se-status-info-soft);
    color: var(--se-status-info-text);
    border: 1px solid var(--se-status-info-border);
    border-radius: var(--se-radius);
    padding: var(--se-space-2) var(--se-space-3);
    font-size: 0.85rem;
}

.se-filtro-arrivo > div { flex: 1 1 auto; }
.se-filtro-arrivo .rzi { font-size: 1.1rem; flex: 0 0 auto; }

/* ---------- 18. Caricamento di una griglia (SeCaricamentoGriglia) ---------- */
/* Un solo loader per tutte le griglie dell'applicazione: card, cerchio nel colore
   primario e una riga di testo, centrati. Prima del 2026-10-19 ne giravano quattro
   versioni diverse pagina per pagina (DESIGN_SYSTEM.md §12). */
.se-griglia-caricamento .rz-card-content {
    padding: var(--se-space-6) var(--se-space-4);
}

.se-griglia-caricamento .rz-text-body1 {
    color: var(--se-text-secondary);
}

/* ---------- 19. Pazienti su telefono (R-053, 2026-10-30) ----------
   Sotto i 768px: barra con ricerca e "Filtri (n)", pannello filtri che sale dal basso,
   schede al posto della griglia, "Nuovo" fluttuante. Sopra i 768px non cambia niente:
   queste classi restano nascoste e la griglia e il pannello sono quelli di sempre. */
.se-paz-mobile-barra,
.se-paz-schede,
.se-paz-filtri-testa,
.se-paz-filtri-export,
.se-fab,
.se-paz-velo { display: none; }

@media (max-width: 767px) {
    .se-solo-desktop { display: none !important; }

    .se-paz-mobile-barra { display: block; margin-bottom: var(--se-space-2); }
    .se-paz-mobile-cerca { display: flex; gap: var(--se-space-2); margin-bottom: var(--se-space-2); }
    .se-paz-mobile-cerca .rz-textbox { flex: 1; min-height: 44px; }
    .se-paz-mobile-filtri {
        display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px;
        border: 1px solid var(--se-border-strong); border-radius: var(--se-radius-sm);
        background: var(--se-surface); font: inherit; font-weight: 600; color: var(--se-text); cursor: pointer;
    }
    .se-paz-mobile-filtri b {
        background: var(--se-primary); color: #fff; border-radius: 999px; font-size: .7rem; padding: 1px 7px;
    }
    .se-paz-mobile-barra .se-filtri-rapidi { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .se-paz-mobile-barra .se-filtri-rapidi::-webkit-scrollbar { display: none; }
    .se-paz-mobile-barra .se-chip-filtro { white-space: nowrap; }

    /* Il pannello di sempre, chiuso; aperto sale dal basso sopra un velo. */
    .se-paz-filtri { display: none; }
    .se-paz-filtri.aperto {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
        max-height: 85vh; overflow-y: auto; background: var(--se-surface);
        border-radius: 18px 18px 0 0; box-shadow: var(--se-shadow); padding: var(--se-space-3);
    }
    .se-paz-filtri.aperto .se-ricerca,
    .se-paz-filtri.aperto .se-ricerca .rz-fieldset-content { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0; background: none; }
    .se-paz-filtri.aperto .se-ricerca > legend,
    .se-paz-filtri.aperto .se-filtri-rapidi { display: none; }
    .se-paz-filtri-testa { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--se-space-2); }
    .se-paz-filtri-export { display: flex; justify-content: center; margin-top: var(--se-space-2); }
    .se-paz-velo { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(9, 58, 125, .35); }

    /* Schede al posto della griglia (la griglia resta montata, solo nascosta). */
    .se-paz-griglia { display: none; }
    .se-paz-schede { display: block; padding-bottom: 76px; }
    .se-paz-scheda {
        background: var(--se-surface); border: 1px solid var(--se-border); border-radius: var(--se-radius);
        padding: 10px 12px; margin-bottom: var(--se-space-2);
    }
    .se-paz-scheda-r1 { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--se-space-2); }
    .se-paz-scheda-off { font-size: .95rem; margin-left: 4px; vertical-align: -2px; color: var(--se-text-secondary); }
    .se-paz-scheda-r2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
    .se-paz-scheda-r2 .se-cella-sub { display: inline; }
    .se-paz-scheda-r3 { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .76rem; color: var(--se-text-secondary); }
    .se-paz-scheda-r3 > span, .se-paz-scheda-link { display: inline-flex; align-items: center; gap: 3px; }
    .se-paz-scheda-r3 .rzi { font-size: 15px; }
    .se-paz-scheda-link { border: 0; background: none; padding: 0; font: inherit; color: var(--se-primary); cursor: pointer; }
    .se-paz-scheda-az { display: flex; gap: var(--se-space-2); margin-top: var(--se-space-2); }
    .se-paz-scheda-az .rz-button { min-height: 38px; }
    .se-paz-schede-pagine { display: flex; justify-content: center; align-items: center; gap: var(--se-space-3); font-size: .84rem; margin: var(--se-space-3) 0; }

    /* "Nuovo" fluttuante, raggiungibile col pollice. Verde come ogni "+ Nuovo" (R-023). */
    .se-fab {
        display: inline-flex; align-items: center; gap: 6px; position: fixed; right: 16px; bottom: 16px; z-index: 900;
        background: var(--rz-success); color: #fff; border: 0; border-radius: 999px;
        padding: 12px 18px; font: inherit; font-weight: 600; box-shadow: 0 6px 18px rgba(22, 163, 74, .35); cursor: pointer;
    }
    .se-fab .rzi { font-size: 20px; }
}

/* ---------- 20. Lead (R-055, 2026-10-30) ----------
   Griglia compilabile come Excel (task 6179 della vecchia app), pipeline per esito,
   import da Excel, link Naviga/Chiama per gli agenti in giro. */
.se-lead-griglia .rz-data-row { cursor: pointer; }
.se-lead-griglia .se-lead-riga-modifica > td { background: var(--se-primary-soft) !important; }
.se-lead-griglia .rz-cell-data .rz-textbox,
.se-lead-griglia .rz-cell-data .rz-dropdown,
.se-lead-griglia .rz-cell-data .rz-datepicker { width: 100%; min-height: 32px; font-size: .84rem; }
.se-lead-indirizzo { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 4px; }
/* Colonna "Località" (regione, provincia, città, indirizzo in una): in modifica regione e
   provincia affiancate, sotto città e poi via + numero a tutta larghezza. */
.se-lead-localita { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
.se-lead-localita > .rz-textbox, .se-lead-localita > .se-lead-indirizzo { grid-column: 1 / -1; }
.se-lead-localita .rz-dropdown, .se-lead-localita .rz-textbox { width: 100%; }
.se-lead-localita-testo { display: inline-flex; flex-direction: column; vertical-align: middle; max-width: calc(100% - 34px); }
.se-lead-localita-testo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-lead-azione {
    display: inline-flex; align-items: center; border: 0; background: none; padding: 0 3px;
    color: var(--se-primary); cursor: pointer; vertical-align: middle; text-decoration: none;
}
.se-lead-azione .rzi { font-size: 17px; }
.se-lead-ritardo { color: var(--se-status-danger-text); font-weight: 600; }
/* Esito leggibile per intero: il badge va a capo invece di essere troncato. */
.se-lead-griglia td.se-lead-col-esito .rz-cell-data { white-space: normal; overflow: visible; }
.se-lead-griglia td.se-lead-col-esito .rz-badge {
    white-space: normal; text-align: left; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere;
}
/* Regola generale (2026-11-02, griglia Appuntamenti): colonna che va a capo invece di tagliare,
   badge compresi. Su CssClass e HeaderCssClass della colonna. */
.rz-data-grid td.se-col-acapo .rz-cell-data { white-space: normal; overflow: visible; }
/* a capo solo fra parole: una parola sola (APPUNTAMENTO) non si spezza, la colonna e' larga abbastanza */
.rz-data-grid td.se-col-acapo .rz-badge { white-space: normal; text-align: left; line-height: 1.25; max-width: 100%; }
.rz-data-grid th.se-col-acapo .rz-column-title-content, .rz-data-grid th.se-col-acapo .rz-column-title { white-space: normal; }
/* Griglia Appuntamenti: lead con data, tratteggiato come nel calendario (R-056). */
.rz-badge.se-badge-lead { background: var(--se-cal-lead-soft) !important; color: var(--se-cal-lead-testo) !important; border: 1px dashed var(--se-cal-lead); }
/* Riga in modifica: pulsanti uno sotto l'altro, cosi' la colonna Azioni resta stretta. */
.se-lead-azioni-modifica { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.se-lead-azioni-modifica .rz-button { justify-content: flex-start; }
/* Vista Griglia | Pipeline: due pulsanti con icona, quello attivo pieno. */
.se-vista {
    display: inline-flex; padding: 3px; gap: 3px;
    border: 1px solid var(--se-border-strong); border-radius: var(--se-radius); background: var(--se-surface);
}
.se-vista button {
    display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--se-radius-sm);
    background: none; font: inherit; font-size: .88rem; font-weight: 600; padding: .45rem .9rem;
    color: var(--se-text-secondary); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.se-vista button .rzi { font-size: 20px; }
.se-vista button:hover { background: var(--se-surface-muted); color: var(--se-primary-dark); }
.se-vista button.attivo { background: var(--se-primary); color: var(--se-surface); }
.se-vista button:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 2px; }

.se-pipeline {
    display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: var(--se-space-3);
    overflow-x: auto; padding-bottom: var(--se-space-2); align-items: start;
}
.se-pipeline-col {
    background: var(--se-surface-muted); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius);
    padding: var(--se-space-2); min-height: 160px; transition: border-color .15s ease, background .15s ease;
}
.se-pipeline-col.sopra { border-color: var(--se-primary); background: var(--se-primary-soft); }
.se-pipeline-testa {
    display: flex; justify-content: space-between; align-items: center; margin: 0 0 var(--se-space-2);
    padding: 5px 9px; border-radius: var(--se-radius-sm); font-size: .82rem; font-weight: 700;
}
.se-pipeline-conta { font-variant-numeric: tabular-nums; }
.se-pipeline-scheda {
    background: var(--se-surface); border: 1px solid var(--se-border); border-radius: var(--se-radius-sm);
    padding: 8px 10px; margin-bottom: var(--se-space-2); cursor: grab; display: flex; flex-direction: column; gap: 2px;
    position: relative;
}
.se-pipeline-scheda:hover { border-color: var(--se-border-strong); box-shadow: var(--se-shadow-sm); }
.se-pipeline-scheda.trascinata { opacity: .5; }
.se-pipeline-scheda b { font-size: .86rem; padding-right: 28px; }
/* R-056: col mouse le azioni compaiono passando sulla scheda (come nel mockup); col dito restano sempre. */
@media (hover: hover) {
    .se-pipeline-azioni { opacity: 0; transition: opacity .12s; }
    .se-pipeline-scheda:hover .se-pipeline-azioni, .se-pipeline-scheda:focus-within .se-pipeline-azioni { opacity: 1; }
}
.se-pipeline-data { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; color: var(--se-text-secondary); }
.se-pipeline-data .rzi { font-size: 14px; }
.se-pipeline-data.ritardo { color: var(--se-status-danger-text); font-weight: 600; }
.se-pipeline-azioni { display: flex; gap: 2px; justify-content: flex-end; margin-top: 2px; }
.se-pipeline-azioni a { color: var(--se-primary); display: inline-flex; padding: 2px; }
.se-pipeline-azioni .rzi { font-size: 17px; }
/* R-056: "Sposta in..." e' una tendina nativa trasparente sopra l'icona: col dito si apre il
   selettore del telefono, dove il drag & drop HTML5 non arriva. */
.se-pipeline-sposta { position: relative; display: inline-flex; padding: 2px; color: var(--se-text-secondary); cursor: pointer; }
.se-pipeline-sposta:hover, .se-pipeline-sposta:focus-within { color: var(--se-primary); }
.se-pipeline-sposta select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.se-pipeline-altri:disabled { cursor: progress; opacity: .7; }
.se-pipeline-altri {
    width: 100%; border: 1px dashed var(--se-border-strong); background: none; border-radius: var(--se-radius-sm);
    padding: 6px; font: inherit; font-size: .8rem; color: var(--se-text-secondary); cursor: pointer;
}

.se-import-riepilogo { display: flex; flex-wrap: wrap; gap: var(--se-space-2); margin-bottom: var(--se-space-2); }
.se-import-righe { max-height: 260px; overflow-y: auto; }
.se-import-errore { color: var(--se-status-danger-text); text-align: right; }
.se-import-doppio { color: var(--se-status-warning-text); text-align: right; }

/* Feed iCal (R-056): dialog "Calendario sul telefono". */
.se-feed-nota { margin: var(--se-space-2) 0 0; font-size: .8rem; color: var(--se-text-secondary); }
.se-feed-passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--se-space-3); }
.se-feed-passi > div { border: 1px solid var(--se-border); border-radius: var(--se-radius-sm); padding: 10px 12px; }
.se-feed-titolo { display: flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 700; }
.se-feed-titolo .rzi { font-size: 18px; color: var(--se-primary); }
.se-feed-passi p { margin: 6px 0 0; font-size: .82rem; color: var(--se-text-secondary); }

/* Agenda dell'agente (R-055): una colonna di voci, leggibile sul telefono. */
.se-agenda { max-width: 760px; }
.se-agenda-alert {
    display: flex; gap: var(--se-space-2); align-items: center; padding: 10px 12px; margin-bottom: var(--se-space-3);
    background: var(--se-status-warning-soft); color: var(--se-status-warning-text); border-radius: var(--se-radius-sm);
}
.se-agenda-periodo { display: flex; align-items: center; gap: var(--se-space-2); margin-bottom: var(--se-space-2); font-size: .84rem; color: var(--se-text-secondary); }
.se-agenda-giorno {
    margin: var(--se-space-4) 0 var(--se-space-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--se-text-secondary); font-weight: 700;
}
.se-agenda-giorno.ritardo { color: var(--se-status-danger-text); }
.se-agenda-voce {
    background: var(--se-surface); border: 1px solid var(--se-border); border-radius: var(--se-radius);
    padding: 10px 12px; margin-bottom: var(--se-space-2); display: flex; flex-direction: column; gap: 2px;
}
.se-agenda-voce.ritardo { border-color: var(--se-status-danger-soft); border-left: 4px solid var(--se-status-danger-text); border-radius: 0 var(--se-radius) var(--se-radius) 0; }
.se-agenda-voce-testa { display: flex; justify-content: space-between; gap: var(--se-space-2); flex-wrap: wrap; }
.se-agenda-ora { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; font-size: .86rem; }
.se-agenda-ora .rzi { font-size: 17px; color: var(--se-primary); }
.se-agenda-voce.ritardo .se-agenda-ora { color: var(--se-status-danger-text); }
.se-agenda-titolo { font-size: .95rem; }
.se-agenda-azioni { display: flex; flex-wrap: wrap; gap: var(--se-space-2); margin-top: var(--se-space-2); }
.se-agenda-azioni .rz-button { min-height: 38px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.se-agenda-azioni .rzi { font-size: 18px; }
@media (max-width: 767px) {
    .se-agenda-azioni .rz-button { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}

/* =============================================================================
   19. CALENDARIO DEGLI AGENTI (R-056) — mockup agenda_lead_wow_v2.html
   Componente Pages/Components/CalendarioAgenti.razor, gesti in js/se-calendario.js.
   ============================================================================= */
:root {
    /* categorie: colore pieno (bordo), tinta (fondo), testo su tinta */
    --se-cal-app: #0D4DA1;   --se-cal-app-soft: #E3ECFB;  --se-cal-app-testo: #0B3A78;
    --se-cal-call: #0E9F6E;  --se-cal-call-soft: #DDF5EA; --se-cal-call-testo: #065F46;
    --se-cal-lead: #D97706;  --se-cal-lead-soft: #FDF0D8; --se-cal-lead-soft2: #FEF6E7; --se-cal-lead-testo: #7C3E06;
    --se-cal-int: #7C3AED;   --se-cal-int-soft: #EEE7FD;  --se-cal-int-testo: #4C1D95;
    --se-cal-adesso: #DC2626;
    --se-cal-oggi-col: #FAFCFF;
    --se-cal-weekend: #FBFCFD;
    --se-cal-ombra-pop: 0 18px 48px rgba(9, 58, 125, .22), 0 2px 6px rgba(16, 24, 40, .08);
    /* un colore per agente (vista dell'Assistenza) */
    --se-ag-1: #0D4DA1; --se-ag-2: #0E9F6E; --se-ag-3: #7C3AED; --se-ag-4: #D97706;
    --se-ag-5: #DB2777; --se-ag-6: #0891B2; --se-ag-7: #65A30D; --se-ag-8: #64748B;
}
.se-ag-1 { --se-ag: var(--se-ag-1); } .se-ag-2 { --se-ag: var(--se-ag-2); } .se-ag-3 { --se-ag: var(--se-ag-3); }
.se-ag-4 { --se-ag: var(--se-ag-4); } .se-ag-5 { --se-ag: var(--se-ag-5); } .se-ag-6 { --se-ag: var(--se-ag-6); }
.se-ag-7 { --se-ag: var(--se-ag-7); } .se-ag-8 { --se-ag: var(--se-ag-8); }

.se-cal {
    display: grid; grid-template-columns: 248px 1fr; min-height: 640px;
    background: var(--se-surface); border: 1px solid var(--se-border); border-radius: var(--se-radius-lg);
    box-shadow: var(--se-shadow-sm); overflow: hidden;
}
.se-cal-btn {
    font: inherit; font-size: .82rem; font-weight: 600; border: 1px solid var(--se-border-strong); background: var(--se-surface);
    color: var(--se-text); border-radius: var(--se-radius-sm); padding: 6px 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-decoration: none;
}
.se-cal-btn .rzi { font-size: 18px; }
.se-cal-btn:hover { border-color: var(--se-primary); color: var(--se-primary); }
.se-cal-btn.blu { background: var(--se-primary); border-color: var(--se-primary); color: var(--se-surface); }
.se-cal-btn.blu:hover { background: var(--se-primary-dark); color: var(--se-surface); }
.se-cal-btn.ghost { border-color: transparent; background: none; }
.se-cal-btn.tondo { border-radius: 999px; padding: 5px 7px; }
.se-cal-btn.largo { width: 100%; padding: 10px; margin-top: 6px; }
.se-cal-btn:disabled { opacity: .5; cursor: default; }

/* ── lato ── */
.se-cal-lato { border-right: 1px solid var(--se-border); padding: 14px; display: flex; flex-direction: column; gap: 16px; background: var(--se-surface-muted); }
.se-cal-lato h4 { margin: 0 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--se-text-muted); display: flex; align-items: center; gap: 4px; }
.se-cal-lato h4 .rzi { font-size: 16px; }
.se-cal-rapido {
    display: flex; align-items: center; gap: 8px; background: var(--se-surface); border: 1px solid var(--se-border-strong);
    border-radius: var(--se-radius); padding: 8px 10px; box-shadow: var(--se-shadow-sm);
}
.se-cal-rapido:focus-within { border-color: var(--se-primary); }
.se-cal-rapido input { border: 0; outline: 0; font: inherit; font-size: .82rem; flex: 1; min-width: 0; background: none; color: var(--se-text); }
.se-cal-rapido .rzi { color: var(--se-primary); font-size: 20px; }
.se-cal-parse { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.se-cal-parse > span {
    font-size: .72rem; font-weight: 600; background: var(--se-primary-soft); color: var(--se-primary);
    border-radius: 999px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 3px;
}
.se-cal-parse > span .rzi { font-size: 13px; }
.se-cal-parse > span.ko { background: var(--se-status-danger-soft); color: var(--se-status-danger-text); }
.se-cal-parse > span.invio { background: var(--se-primary); color: var(--se-surface); }

.se-cal-mini-testa { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .82rem; margin-bottom: 4px; }
.se-cal-mini-testa button { border: 0; background: none; cursor: pointer; color: var(--se-text-secondary); padding: 0; }
.se-cal-mini-testa .rzi { font-size: 18px; }
.se-cal-mini table { width: 100%; border-collapse: collapse; font-size: .72rem; text-align: center; }
.se-cal-mini th { color: var(--se-text-muted); font-weight: 600; padding: 2px 0; }
.se-cal-mini td { padding: 1px 0; }
.se-cal-mini td button {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 0; background: none;
    cursor: pointer; position: relative; font: inherit; color: var(--se-text);
}
.se-cal-mini td button:hover { background: var(--se-border-soft); }
.se-cal-mini td.fuori button { color: var(--se-text-muted); }
.se-cal-mini td.sett button { background: var(--se-primary-soft); }
.se-cal-mini td.oggi button { background: var(--se-primary); color: var(--se-surface); font-weight: 700; }
.se-cal-mini td.pieno button::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--se-cal-lead); }

.se-cal-recupero { background: var(--se-surface); border: 1px solid var(--se-status-warning-border); border-radius: var(--se-radius); padding: 10px; }
.se-cal-recupero h4 { color: var(--se-status-warning-text); }
.se-cal-rec-riga { display: flex; align-items: center; gap: 6px; font-size: .78rem; padding: 6px 0; border-top: 1px dashed var(--se-border); }
.se-cal-rec-riga:first-of-type { border-top: 0; }
.se-cal-rec-riga .testo { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; color: var(--se-text); }
.se-cal-rec-riga .testo b { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-cal-rec-riga .testo small { color: var(--se-status-danger-text); font-weight: 600; }

.se-cal-calendari label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .82rem; margin-bottom: 6px; }
.se-cal-calendari input { accent-color: var(--se-primary); }
.se-cal-calendari i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 12px; }
.se-cal-calendari h4.sotto { margin-top: 10px; }
.se-cal-calendari i.se-ag { background: var(--se-ag); border-radius: 50%; }
.se-cal-calendari .nome { flex: 1; min-width: 0; }
.se-cal-calendari .conta { font-size: .7rem; font-weight: 600; color: var(--se-text-secondary); background: var(--se-surface); border: 1px solid var(--se-border); border-radius: 999px; padding: 0 7px; }
.se-cal-calendari label.vuoto .nome { color: var(--se-text-muted); }

/* colori per categoria (pallini, bordi, schede) */
i.se-cat-appuntamento { background: var(--se-cal-app); }
i.se-cat-chiamata { background: var(--se-cal-call); }
i.se-cat-lead { background: var(--se-cal-lead); }
i.se-cat-interno { background: var(--se-cal-int); }

/* ── principale ── */
.se-cal-principale { display: flex; flex-direction: column; min-width: 0; }
.se-cal-barra { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--se-border); flex-wrap: wrap; }
.se-cal-titolo { font-size: 1.2rem; font-weight: 600; margin: 0 8px 0 4px; letter-spacing: -.01em; }
.se-cal-spazio { flex: 1; }
.se-cal-carica { font-size: .78rem; color: var(--se-text-muted); }
.se-cal-seg { display: inline-flex; background: var(--se-surface); border: 1px solid var(--se-border-strong); border-radius: 999px; padding: 3px; gap: 2px; }
.se-cal-seg button { font: inherit; font-weight: 600; font-size: .78rem; border: 0; background: none; padding: 5px 12px; border-radius: 999px; color: var(--se-text-secondary); cursor: pointer; }
.se-cal-seg button[aria-pressed=true] { background: var(--se-primary); color: var(--se-surface); }

.se-cal-scroll { overflow: auto; flex: 1; max-height: 68vh; position: relative; }
.se-cal-sett-testa { display: grid; position: sticky; top: 0; z-index: 6; background: var(--se-surface); border-bottom: 1px solid var(--se-border); }
.se-cal-sett-testa > button, .se-cal-sett-testa > div {
    padding: 8px 6px 6px; text-align: center; font-size: .7rem; color: var(--se-text-secondary); text-transform: uppercase;
    letter-spacing: .04em; font-weight: 600; border: 0; background: none; font-family: inherit; cursor: pointer;
}
.se-cal-sett-testa b { display: block; font-size: 1.35rem; font-weight: 500; color: var(--se-text); letter-spacing: 0; line-height: 1.3; }
.se-cal-sett-testa .oggi b { background: var(--se-primary); color: var(--se-surface); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; margin: 2px auto 0; }
.se-cal-giornata { display: grid; border-bottom: 1px solid var(--se-border); position: sticky; top: 72px; z-index: 5; background: var(--se-surface); }
.se-cal-etich { font-size: .66rem; color: var(--se-text-muted); text-align: right; padding: 6px 8px 0 0; }
.se-cal-cella { border-left: 1px solid var(--se-border-soft); padding: 3px; min-height: 28px; display: flex; flex-direction: column; gap: 2px; }
.se-cal-allday {
    font: inherit; font-size: .72rem; font-weight: 600; border: 0; border-radius: 6px; padding: 3px 8px; text-align: left; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.se-cal-corpo { display: grid; position: relative; }
.se-cal-ore div { font-size: .66rem; color: var(--se-text-muted); text-align: right; padding-right: 8px; transform: translateY(-7px); }
.se-cal-col {
    position: relative; border-left: 1px solid var(--se-border-soft); touch-action: none;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 51px, var(--se-border-soft) 51px, var(--se-border-soft) 52px);
}
.se-cal-col.weekend { background-color: var(--se-cal-weekend); }
.se-cal-col.oggi { background-color: var(--se-cal-oggi-col); }
.se-cal-adesso { position: absolute; left: 0; right: 0; height: 2px; background: var(--se-cal-adesso); z-index: 4; pointer-events: none; }
.se-cal-adesso::before { content: ""; position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--se-cal-adesso); }

.se-cal-ev {
    position: absolute; border-radius: 8px; padding: 4px 7px; font-size: .74rem; line-height: 1.25; overflow: hidden;
    cursor: grab; border-left: 3px solid; z-index: 2; box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    transition: box-shadow .15s, transform .15s; user-select: none;
}
.se-cal-ev:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, .16); z-index: 3; }
.se-cal-ev.trasc { cursor: grabbing; opacity: .92; box-shadow: 0 14px 32px rgba(16, 24, 40, .25); z-index: 9; transition: none; }
.se-cal-ev b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 18px; }
.se-cal-ev small { display: block; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-cal-ev.ritardo { box-shadow: inset 0 0 0 1px var(--se-status-danger-border); }
.se-cal-ev-maniglia { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.se-ag-sigla {
    position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--se-ag); color: var(--se-surface);
    font-size: .55rem; font-weight: 700; display: grid; place-items: center;
}
.se-cat-appuntamento.se-cal-ev, .se-cat-appuntamento.se-cal-allday, .se-cat-appuntamento.se-cal-mese-ev, .se-calm-ev.se-cat-appuntamento {
    background: var(--se-cal-app-soft); border-color: var(--se-cal-app); color: var(--se-cal-app-testo);
}
.se-cat-chiamata.se-cal-ev, .se-cat-chiamata.se-cal-allday, .se-cat-chiamata.se-cal-mese-ev, .se-calm-ev.se-cat-chiamata {
    background: var(--se-cal-call-soft); border-color: var(--se-cal-call); color: var(--se-cal-call-testo);
}
.se-cat-lead.se-cal-ev, .se-cat-lead.se-cal-allday, .se-cat-lead.se-cal-mese-ev, .se-calm-ev.se-cat-lead {
    background: repeating-linear-gradient(135deg, var(--se-cal-lead-soft) 0 8px, var(--se-cal-lead-soft2) 8px 16px);
    border-color: var(--se-cal-lead); color: var(--se-cal-lead-testo); border-left-style: dashed;
}
.se-cat-interno.se-cal-ev, .se-cat-interno.se-cal-allday, .se-cat-interno.se-cal-mese-ev, .se-calm-ev.se-cat-interno {
    background: var(--se-cal-int-soft); border-color: var(--se-cal-int); color: var(--se-cal-int-testo);
}
.se-cal-viaggio {
    position: absolute; right: 10px; font-size: .66rem; color: var(--se-text-secondary); display: flex; align-items: center; gap: 3px;
    z-index: 1; pointer-events: none; border-left: 2px dotted var(--se-text-muted); padding-left: 6px; white-space: nowrap; overflow: hidden;
}
.se-cal-viaggio .rzi { font-size: 14px; }
.se-cal-viaggio.stretto { color: var(--se-status-danger-text); border-color: var(--se-status-danger); }
.se-cal-conflitto { position: absolute; right: 2px; z-index: 5; background: var(--se-status-danger); color: var(--se-surface); border-radius: 999px; font-size: .62rem; font-weight: 700; padding: 1px 6px; pointer-events: none; }
.se-cal-fantasma {
    position: absolute; left: 4px; right: 6px; border: 2px dashed var(--se-primary); border-radius: 8px; background: var(--se-primary-soft);
    font-size: .7rem; color: var(--se-primary); padding: 3px 6px; z-index: 2; pointer-events: none;
}

/* ── mese ── */
.se-cal-mese { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: 1; }
.se-cal-mese-intest { font-size: .7rem; text-transform: uppercase; color: var(--se-text-secondary); font-weight: 600; text-align: center; padding: 8px 0; border-bottom: 1px solid var(--se-border); }
.se-cal-mese-cella { min-height: 104px; border-right: 1px solid var(--se-border-soft); border-bottom: 1px solid var(--se-border-soft); padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.se-cal-mese-cella.fuori { background: var(--se-surface-muted); }
.se-cal-mese-cella.fuori .se-cal-mese-num { color: var(--se-text-muted); }
.se-cal-mese-num { align-self: center; border: 0; background: none; font: inherit; font-size: .78rem; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; color: var(--se-text); }
.se-cal-mese-cella.oggi .se-cal-mese-num { background: var(--se-primary); color: var(--se-surface); font-weight: 700; }
.se-cal-mese-ev { font: inherit; font-size: .7rem; text-align: left; border: 0; border-left: 3px solid; border-radius: 5px; padding: 2px 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-cal-mese-ev span { font-weight: 700; }
.se-cal-mese-altri { font: inherit; font-size: .7rem; font-weight: 600; color: var(--se-primary); border: 0; background: none; text-align: left; cursor: pointer; padding: 0 5px; }

/* ── elenco ── */
.se-cal-elenco { padding: 8px 18px 18px; overflow: auto; max-height: 68vh; }
.se-cal-elenco h4 { margin: 14px 0 6px; font-size: .78rem; color: var(--se-text-secondary); }
.se-cal-elenco h4.oggi { color: var(--se-primary); }
.se-cal-elenco-riga {
    display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--se-border); background: var(--se-surface);
    border-radius: var(--se-radius-sm); padding: 8px 10px; margin-bottom: 6px; font: inherit; text-align: left; cursor: pointer; color: var(--se-text);
}
.se-cal-elenco-riga:hover { border-color: var(--se-border-strong); box-shadow: var(--se-shadow-sm); }
.se-cal-elenco-riga .ora { font-weight: 700; width: 44px; font-variant-numeric: tabular-nums; }
.se-cal-elenco-riga i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.se-cal-elenco-riga b { display: block; font-size: .86rem; }
.se-cal-elenco-riga small { color: var(--se-text-secondary); font-size: .76rem; }
.se-cal-vuoto { color: var(--se-text-muted); font-size: .86rem; padding: 20px 0; }

/* ── scheda evento e creazione rapida ── */
/* ⚠️ .rz-body ha una trasformazione: un position:fixed qui dentro si aggancia a lei e non allo
   schermo (vedi il visore degli avvisi). Il velo si allarga oltre i bordi; la scheda la mette
   al suo posto seCalendario.posiziona, che misura l'origine vera. */
.se-cal-pop-velo { position: fixed; inset: -3000px; z-index: 1000; }
.se-cal-pop {
    position: fixed; z-index: 1001; width: 310px; max-width: calc(100vw - 16px); background: var(--se-surface); border-radius: 14px;
    box-shadow: var(--se-cal-ombra-pop); padding: 14px; font-size: .82rem; color: var(--se-text);
}
.se-cal-pop.piccolo { width: 290px; }
.se-cal-pop .chiudi { position: absolute; top: 8px; right: 8px; }
.se-cal-pop-testa { display: flex; gap: 10px; align-items: flex-start; padding-right: 26px; }
.se-cal-pop-testa i { width: 12px; height: 12px; border-radius: 3px; margin-top: 5px; flex: 0 0 12px; }
.se-cal-pop h3 { margin: 0; font-size: 1rem; }
.se-cal-pop .quando { color: var(--se-text-secondary); font-size: .8rem; }
.se-cal-pop-riga { color: var(--se-text-secondary); font-size: .8rem; display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; }
.se-cal-pop-riga .rzi { font-size: 17px; color: var(--se-text-muted); }
.se-cal-pop-riga.ritardo { color: var(--se-status-danger-text); font-weight: 600; }
.se-cal-pop-riga.ritardo .rzi { color: var(--se-status-danger-text); }
.se-cal-pop-azioni { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.se-cal-pop-azioni.fine { justify-content: flex-end; }
.se-cal-pop-esiti-titolo { font-size: .7rem; color: var(--se-text-muted); margin-top: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.se-cal-pop-esiti, .se-cal-scelte { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.se-cal-pop-esiti button, .se-cal-scelte button {
    font: inherit; font-size: .72rem; font-weight: 600; border: 1px solid var(--se-border-strong); background: var(--se-surface);
    border-radius: 999px; padding: 4px 10px; cursor: pointer; color: var(--se-text);
}
.se-cal-pop-esiti button:hover, .se-cal-scelte button:hover { border-color: var(--se-primary); color: var(--se-primary); }
.se-cal-scelte button.on { background: var(--se-primary-soft); border-color: var(--se-primary); color: var(--se-primary); }
.se-cal-input { width: 100%; font: inherit; font-size: .9rem; border: 0; border-bottom: 2px solid var(--se-primary); padding: 8px 2px; margin-top: 8px; outline: 0; color: var(--se-text); background: none; }

/* ── telefono (sotto i 768px) ── */
.se-calm { position: relative; background: var(--se-surface); border-radius: var(--se-radius-lg); border: 1px solid var(--se-border); min-height: 70vh; }
/* Le schede Radzen hanno overflow:auto: diventerebbero il contenitore dello sticky (che non
   scorre) e pulsante + e foglio non resterebbero in fondo allo schermo. */
.rz-tabview-panels:has(.se-calm) { overflow: visible; }
.se-calm-testa { padding: 10px 12px 6px; }
.se-calm-r1 { display: flex; align-items: center; justify-content: space-between; }
.se-calm-r1 h3 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.se-calm-r1 h3 span { color: var(--se-cal-adesso); }
.se-calm-oggi { font: inherit; font-weight: 600; font-size: .82rem; border: 1px solid var(--se-border-strong); border-radius: 999px; background: none; padding: 4px 12px; color: var(--se-primary); }
.se-calm-strip { display: grid; grid-template-columns: 22px repeat(7, 1fr) 22px; align-items: center; text-align: center; margin-top: 8px; }
.se-calm-freccia { border: 0; background: none; padding: 0; color: var(--se-text-muted); }
.se-calm-giorno { border: 0; background: none; font: inherit; font-size: .68rem; color: var(--se-text-muted); font-weight: 600; padding: 0; cursor: pointer; }
.se-calm-giorno b { display: grid; place-items: center; width: 34px; height: 34px; margin: 4px auto 2px; border-radius: 50%; font-size: 1rem; color: var(--se-text); font-weight: 500; }
.se-calm-giorno.oggi b { color: var(--se-cal-adesso); font-weight: 700; }
.se-calm-giorno.sel b { background: var(--se-cal-adesso); color: var(--se-surface); font-weight: 700; }
.se-calm-giorno i { display: block; width: 5px; height: 5px; margin: 0 auto; border-radius: 50%; background: var(--se-text-muted); }
.se-calm-giorno i.no { visibility: hidden; }
.se-calm-banner { margin: 6px 12px 4px; background: var(--se-status-warning-soft); color: var(--se-status-warning-text); border-radius: var(--se-radius); padding: 8px 10px; font-size: .8rem; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.se-calm-banner button { margin-left: auto; font: inherit; font-size: .76rem; font-weight: 600; border: 1px solid var(--se-status-warning-border); background: var(--se-surface); border-radius: var(--se-radius-sm); padding: 3px 8px; color: var(--se-status-warning-text); }
.se-calm-recupero { margin: 0 12px 6px; padding: 4px 10px; border: 1px solid var(--se-status-warning-border); border-radius: var(--se-radius); }
.se-calm-giornata { padding: 4px 12px; }
.se-calm-vuoto { color: var(--se-text-muted); text-align: center; padding: 30px 0; font-size: .86rem; }
.se-calm-riga { display: grid; grid-template-columns: 44px 1fr; gap: 8px; }
.se-calm-riga .h { font-size: .7rem; color: var(--se-text-muted); padding-top: 12px; text-align: right; }
.se-calm-ev { border-radius: 12px; padding: 9px 11px; margin: 3px 0; font-size: .82rem; border-left: 4px solid; cursor: pointer; }
.se-calm-ev b { display: block; font-size: .9rem; }
.se-calm-ev small { opacity: .85; display: block; }
.se-calm-ev .az { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.se-calm-ev .az a { display: inline-flex; align-items: center; gap: 3px; font-size: .76rem; font-weight: 600; background: rgba(255, 255, 255, .75); border-radius: 999px; padding: 3px 9px; color: inherit; text-decoration: none; }
.se-calm-ev .az .rzi { font-size: 16px; }
.se-calm-viaggio { font-size: .72rem; color: var(--se-text-secondary); display: flex; align-items: center; gap: 4px; padding: 2px 0 2px 6px; border-left: 2px dotted var(--se-text-muted); margin: 4px 0 0 4px; }
.se-calm-viaggio .rzi { font-size: 15px; }
.se-calm-viaggio.stretto { color: var(--se-status-danger-text); border-color: var(--se-status-danger); }
.se-calm-ora { position: relative; height: 0; border-top: 2px solid var(--se-cal-adesso); margin: 8px 0 8px 52px; }
.se-calm-ora::before { content: attr(data-ora); position: absolute; left: -52px; top: -9px; font-size: .7rem; font-weight: 700; color: var(--se-cal-adesso); width: 44px; text-align: right; }
/* Pulsante + e foglio "Nuovo": sticky in fondo al calendario invece che fixed (vedi sopra), cosi'
   restano in fondo allo schermo mentre si scorre la giornata. */
.se-calm-fab {
    position: sticky; bottom: 20px; margin: 8px 16px 16px auto; width: 56px; height: 56px; border-radius: 18px; background: var(--se-primary); color: var(--se-surface);
    display: grid; place-items: center; box-shadow: 0 10px 24px rgba(13, 77, 161, .4); border: 0; cursor: pointer; z-index: 20;
}
.se-calm-fab .rzi { font-size: 28px; }
.se-calm-velo { position: fixed; inset: -3000px; background: rgba(15, 17, 21, .25); z-index: 1002; opacity: 0; pointer-events: none; transition: opacity .3s; }
.se-calm-velo.aperto { opacity: 1; pointer-events: auto; }
.se-calm-foglio {
    position: sticky; bottom: 0; display: none; background: var(--se-surface); border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(16, 24, 40, .22); padding: 8px 16px 28px; z-index: 1003;
}
.se-calm-foglio.aperto { display: block; animation: seFoglioSu .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes seFoglioSu { from { transform: translateY(100%); } to { transform: none; } }
.se-calm-maniglia { width: 38px; height: 5px; border-radius: 3px; background: var(--se-border-strong); margin: 2px auto 12px; }
.se-calm-foglio h4 { margin: 0 0 8px; font-size: 1rem; }
.se-calm-foglio .se-cal-rapido input { font-size: 16px; }

/* =============================================================================
   20. LEAD "WOW" (R-056): focus, schede della pipeline, scheda laterale, mappa, andamento
   ============================================================================= */
.se-focus { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--se-space-3); }
.se-focus button {
    font: inherit; display: flex; align-items: center; gap: 8px; border: 1px solid var(--se-border); background: var(--se-surface);
    border-radius: var(--se-radius); padding: 7px 12px; cursor: pointer; font-size: .8rem; color: var(--se-text-secondary);
}
.se-focus button b { font-size: 1.05rem; color: var(--se-text); font-variant-numeric: tabular-nums; }
.se-focus button.on { border-color: var(--se-primary); background: var(--se-primary-soft); color: var(--se-primary); }
.se-focus .punto { width: 8px; height: 8px; border-radius: 50%; }
.se-focus-rosso { background: var(--se-status-danger); }
.se-focus-giallo { background: var(--se-status-warning); }
.se-focus-grigio { background: var(--se-text-muted); }
.se-focus-blu { background: var(--se-cal-app); }

.se-pipeline-barra { height: 4px; border-radius: 2px; background: var(--se-border); margin: -4px 4px 8px; overflow: hidden; }
.se-pipeline-barra i { display: block; height: 100%; }
.se-pipeline-barra i.se-tono-neutral { background: var(--se-text-muted); }
.se-pipeline-barra i.se-tono-warning { background: var(--se-status-warning); }
.se-pipeline-barra i.se-tono-primary { background: var(--se-primary); }
.se-pipeline-barra i.se-tono-success { background: var(--se-status-success); }
.se-pipeline-barra i.se-tono-danger { background: var(--se-status-danger); }
.se-pipeline-sigla {
    position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--se-primary);
    color: var(--se-surface); font-size: .6rem; font-weight: 700; display: grid; place-items: center;
}
.se-pipeline-riga2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.se-pipeline-riga2:empty { display: none; }
.se-pipeline-chip {
    font-size: .68rem; font-weight: 600; border-radius: 999px; padding: 1px 7px; display: inline-flex; align-items: center; gap: 3px;
    background: var(--se-status-neutral-soft); color: var(--se-status-neutral-text);
}
.se-pipeline-chip .rzi { font-size: 13px; }
.se-pipeline-temp { display: inline-flex; gap: 1px; }
.se-pipeline-temp i { width: 4px; height: 10px; border-radius: 1px; background: var(--se-border-strong); }
.se-pipeline-temp.t3 i { background: var(--se-status-danger); }
.se-pipeline-temp.t2 i:nth-child(-n+2) { background: var(--se-status-warning); }
.se-pipeline-temp.t1 i:first-child { background: var(--se-text-muted); }

/* scheda laterale (side dialog di Radzen) */
.se-scheda-lato .rz-dialog-side-content { padding: 0 !important; }
.se-scheda { display: flex; flex-direction: column; min-height: 100%; outline: none; }
.se-scheda-testa { padding: 14px 18px 12px; border-bottom: 1px solid var(--se-border); }
.se-scheda-nav { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.se-scheda-pos { font-size: .72rem; color: var(--se-text-muted); margin-left: 4px; }
.se-scheda-testa h3 { margin: 0; font-size: 1.15rem; }
.se-scheda-testa .sub { color: var(--se-text-secondary); font-size: .8rem; }
.se-scheda-nastro { display: flex; gap: 3px; margin-top: 12px; }
.se-scheda-nastro button {
    flex: 1 1 auto; font: inherit; font-size: .64rem; font-weight: 600; border: 0; background: var(--se-status-neutral-soft); color: var(--se-status-neutral-text);
    padding: 7px 6px 7px 11px; white-space: nowrap; cursor: pointer; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%, 7px 50%);
}
.se-scheda-nastro button:first-child { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); border-radius: 6px 0 0 6px; }
.se-scheda-nastro button:hover { background: var(--se-primary-soft); color: var(--se-primary); }
.se-scheda-nastro button.on { background: var(--se-primary); color: var(--se-surface); }
.se-scheda-nastro button.ko { background: var(--se-status-danger-soft); color: var(--se-status-danger-text); }
.se-scheda-azioni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.se-scheda-azioni a, .se-scheda-azioni .spento {
    display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; font-weight: 600; color: var(--se-primary);
    background: var(--se-primary-soft); border-radius: var(--se-radius-sm); padding: 8px 2px; text-decoration: none;
}
.se-scheda-azioni .spento { color: var(--se-text-muted); background: var(--se-surface-muted); }
.se-scheda-corpo { padding: 14px 18px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.se-scheda-box { border: 1px solid var(--se-border); border-radius: var(--se-radius); padding: 12px; }
.se-scheda-box h4 { margin: 0 0 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--se-text-muted); }
.se-scheda-box.prossima { background: var(--se-status-warning-soft); border-color: var(--se-status-warning-border); }
.se-scheda-box.prossima h4 { color: var(--se-status-warning-text); }
.se-scheda-box.prossima .scelte { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.se-scheda-box.prossima .scelte button {
    font: inherit; font-size: .74rem; font-weight: 600; border: 1px solid var(--se-status-warning-border); background: var(--se-surface);
    border-radius: 999px; padding: 4px 10px; cursor: pointer; color: var(--se-status-warning-text);
}
.se-scheda-nota { display: flex; gap: 6px; }
.se-scheda-nota input { flex: 1; font: inherit; font-size: .82rem; border: 1px solid var(--se-border-strong); border-radius: var(--se-radius-sm); padding: 6px 10px; min-width: 0; }
.se-scheda-vuoto { color: var(--se-text-muted); font-size: .8rem; margin: 0; }
.se-scheda-storia { list-style: none; margin: 0; padding: 0; }
.se-scheda-storia li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding-bottom: 12px; position: relative; font-size: .8rem; }
.se-scheda-storia li::before { content: ""; position: absolute; left: 12px; top: 24px; bottom: 0; width: 2px; background: var(--se-border); }
.se-scheda-storia li:last-child::before { display: none; }
.se-scheda-storia .ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--se-status-neutral-soft); color: var(--se-status-neutral-text); }
.se-scheda-storia .ic .rzi { font-size: 15px; }
.se-scheda-storia .ic.se-storia-esito { background: var(--se-status-warning-soft); color: var(--se-status-warning-text); }
.se-scheda-storia .ic.se-storia-chiamata, .se-scheda-storia .ic.se-storia-chiamata-cal { background: var(--se-cal-call-soft); color: var(--se-cal-call); }
.se-scheda-storia .ic.se-storia-appuntamento { background: var(--se-cal-app-soft); color: var(--se-cal-app); }
.se-scheda-storia small { color: var(--se-text-muted); }
.se-scheda-piede { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--se-border); position: sticky; bottom: 0; background: var(--se-surface); }

/* doppioni nel dialog lead */
.se-lead-doppione {
    display: flex; gap: 8px; align-items: flex-start; background: var(--se-status-warning-soft); border: 1px solid var(--se-status-warning-border);
    color: var(--se-status-warning-text); border-radius: var(--se-radius-sm); padding: 8px 10px; font-size: .8rem;
}
.se-lead-doppione .rzi { font-size: 18px; }

/* mappa */
.se-mappa { position: relative; height: 68vh; min-height: 460px; border-radius: var(--se-radius-lg); overflow: hidden; border: 1px solid var(--se-border); background: var(--se-surface-muted); }
.se-mappa-tela { position: absolute; inset: 0; z-index: 0; }
.se-mappa-lato {
    position: absolute; top: 12px; left: 56px; width: 290px; max-height: calc(100% - 24px); overflow: auto; z-index: 500;
    background: var(--se-surface); border-radius: 14px; box-shadow: var(--se-cal-ombra-pop); padding: 12px; font-size: .8rem;
}
.se-mappa-lato h4 { margin: 0 0 6px; font-size: .9rem; }
.se-mappa-tappa-riga { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--se-border-soft); }
.se-mappa-tappa-riga .n { width: 22px; height: 22px; border-radius: 50%; background: var(--se-primary); color: var(--se-surface); font-size: .7rem; font-weight: 700; display: grid; place-items: center; flex: 0 0 22px; }
.se-mappa-tappa-riga small { color: var(--se-text-secondary); display: block; }
.se-mappa-vicini { display: flex; gap: 8px; background: var(--se-status-warning-soft); border-radius: var(--se-radius-sm); padding: 8px; margin-top: 8px; color: var(--se-status-warning-text); }
.se-mappa-vicini small { display: block; margin-bottom: 4px; }
.se-mappa-vicini button { display: block; border: 0; background: none; padding: 2px 0; font: inherit; font-size: .76rem; color: var(--se-primary); cursor: pointer; text-align: left; }
.se-mappa-legenda { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; font-size: .7rem; color: var(--se-text-secondary); }
.se-mappa-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.se-mappa-nota { color: var(--se-text-muted); font-size: .72rem; margin: 8px 0 0; }
.se-mappa-tappa span {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--se-primary); color: var(--se-surface);
    font-weight: 700; font-size: .75rem; border: 2px solid var(--se-surface); box-shadow: 0 2px 6px rgba(16, 24, 40, .3);
}

/* mappa del calendario (R-056): studi medici (quadrati viola) e lead (pallini per esito) */
.se-mappa-cal { height: 68vh; border: 0; border-radius: 0; }
.se-mappa-punto, .se-mappa-studio { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--se-surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .35); }
.se-mappa-punto { border-radius: 50%; }
.se-mappa-studio { border-radius: 3px; background: var(--se-cal-int); }
.se-mappa-punto.vicino, .se-mappa-studio.vicino { width: 16px; height: 16px; border-color: var(--se-status-warning-text); border-width: 3px; }
.se-mappa-scheda { margin-top: 10px; padding: 10px; border: 1px solid var(--se-border); border-radius: var(--se-radius-sm); background: var(--se-surface-muted); }
.se-mappa-scheda .tipo { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--se-text-muted); font-weight: 700; }
.se-mappa-scheda b { display: block; font-size: .86rem; }
.se-mappa-scheda small { display: block; color: var(--se-text-secondary); }
.se-mappa-scheda .azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.se-mappa-vicini button .rzi { font-size: 14px; vertical-align: -2px; margin-right: 3px; }
.se-mappa-filtri { display: flex; gap: 12px; margin-top: 10px; font-size: .76rem; }
.se-mappa-filtri label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.se-mappa-filtri input { accent-color: var(--se-primary); }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: rgba(13, 77, 161, .25); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: rgba(13, 77, 161, .75); color: var(--se-surface); font-weight: 700; }

/* andamento */
.se-andamento { display: flex; flex-direction: column; gap: var(--se-space-4); }
.se-andamento-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--se-space-3); }
.se-andamento-passo { background: var(--se-surface); border: 1px solid var(--se-border); border-radius: var(--se-radius); padding: 12px; }
.se-andamento-passo .testa { display: flex; justify-content: space-between; font-size: .8rem; color: var(--se-text-secondary); }
.se-andamento-passo .testa b { font-size: 1.2rem; color: var(--se-text); }
.se-andamento-passo .barra { height: 6px; border-radius: 3px; background: var(--se-border-soft); margin: 8px 0 4px; overflow: hidden; }
.se-andamento-passo .barra i { display: block; height: 100%; }
.se-andamento-passo .barra i.se-tono-neutral { background: var(--se-text-muted); }
.se-andamento-passo .barra i.se-tono-warning { background: var(--se-status-warning); }
.se-andamento-passo .barra i.se-tono-primary { background: var(--se-primary); }
.se-andamento-passo .barra i.se-tono-success { background: var(--se-status-success); }
.se-andamento-passo .barra i.se-tono-danger { background: var(--se-status-danger); }
.se-andamento-passo small { color: var(--se-text-muted); font-size: .72rem; }
.se-andamento-tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--se-space-3); }
.se-andamento-tessere div { background: var(--se-primary-soft); border-radius: var(--se-radius); padding: 12px; display: flex; flex-direction: column; }
.se-andamento-tessere b { font-size: 1.4rem; color: var(--se-primary); }
.se-andamento-tessere span { font-size: .78rem; color: var(--se-text-secondary); }
.se-andamento-tabella { width: 100%; border-collapse: collapse; background: var(--se-surface); border: 1px solid var(--se-border); border-radius: var(--se-radius); overflow: hidden; font-size: .82rem; }
.se-andamento-tabella th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--se-text-muted); padding: 8px 10px; background: var(--se-surface-muted); }
.se-andamento-tabella td { padding: 8px 10px; border-top: 1px solid var(--se-border-soft); font-variant-numeric: tabular-nums; }
.se-andamento-nota { color: var(--se-text-muted); font-size: .76rem; margin: 0; }
@media (max-width: 767px) {
    .se-mappa-lato { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 45%; }
    .se-andamento-tabella { display: block; overflow-x: auto; }
}
.se-scheda:focus, .se-scheda:focus-visible { outline: none; box-shadow: none; }