/* =====================================================================
   style.css - personalizzazioni del progetto (stesso sistema visivo di ERPSuite)
   ---------------------------------------------------------------------
   Caricato DOPO bootstrap.min.css e dopo i CSS di pagina: tutte le regole
   qui sovrascrivono Bootstrap. Contiene il sistema visivo condiviso:
   font, colori, barra superiore, barra di stato, pulsanti, card KPI,
   pannelli, schede, tabelle, badge, modali e form.
   I CSS di pagina (login.css, dashboard.css, leadflow.css) usano le stesse
   variabili --es-*.
   ===================================================================== */

/* ---- Font locali (estratti dal template, sottoinsieme latin) -------- */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

/* ---- Variabili del tema + override Bootstrap ----------------------- */
:root {
    --es-navy:      #0b2a5b;
    --es-blue:      #1f5fa8;
    --es-blue-dark: #194f8c;
    --es-amber:     #f2a71b;
    --es-ink:       #0f1b33;
    --es-muted:     #566177;
    --es-line:      #d3dae6;
    --es-line-soft: #e9edf4;
    --es-bg:        #f3f5f9;
    --es-hover:     #e9edf4;
    --es-outline:   #8792a6;
    --es-success:   #1d7d45;
    --es-danger:    #bb3329;
    --es-font:      'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --es-mono:      'IBM Plex Mono', ui-monospace, monospace;

    --bs-primary:          var(--es-blue);
    --bs-primary-rgb:      31, 95, 168;
    --bs-body-font-family: var(--es-font);
    --bs-body-color:       var(--es-ink);
    --bs-body-bg:          var(--es-bg);
    --bs-border-color:     var(--es-line);
    --bs-link-color:       var(--es-blue);
    --bs-link-color-rgb:   31, 95, 168;
    --bs-link-hover-color: var(--es-navy);
}

body {
    margin: 0;
    background: var(--es-bg);
    color: var(--es-ink);
    font-family: var(--es-font);
    font-size: 14px;
    line-height: 21px;
}

a { color: var(--es-blue); }
a:hover { color: var(--es-navy); }

b, strong { font-weight: 700; }

[hidden] { display: none !important; }

/* ---- Animazioni condivise ------------------------------------------ */
@keyframes es-up    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes es-row   { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes es-grow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes es-growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.anim-up { animation: es-up .55s cubic-bezier(.2, .8, .2, 1) both; }

/* Ritardi progressivi per le entrate a cascata */
.delay-1  { animation-delay: .05s; }
.delay-2  { animation-delay: .12s; }
.delay-3  { animation-delay: .19s; }
.delay-4  { animation-delay: .26s; }
.delay-5  { animation-delay: .30s; }
.delay-6  { animation-delay: .34s; }
.delay-7  { animation-delay: .39s; }
.delay-8  { animation-delay: .44s; }
.delay-9  { animation-delay: .49s; }
.delay-10 { animation-delay: .54s; }
.delay-11 { animation-delay: .59s; }
.delay-12 { animation-delay: .64s; }
.delay-13 { animation-delay: .70s; }
.delay-14 { animation-delay: .78s; }
.delay-15 { animation-delay: .86s; }

/* ---- Struttura pagina autenticata ---------------------------------- */
.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-head {
    position: sticky;
    top: var(--es-topbar-h, 60px);
    z-index: 20;
    margin: -28px -24px 0;
    padding: 28px 24px 14px;
    background: var(--es-bg);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.page-head.is-staccata { box-shadow: 0 12px 18px -16px rgba(15, 27, 51, .45); }

.page-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--es-muted);
}

.page-title {
    margin: 4px 0 0;
    font-size: 38px;
    line-height: 44px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.section-title {
    margin: 0;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
}

/* ---- Barra superiore (inc/menu.php) -------------------------------- */
.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 10px 24px;
    box-sizing: border-box;
    background: var(--es-navy);
    color: #ffffff;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
}

.brand:hover { color: #ffffff; }

.brand-text { display: flex; flex-direction: column; }
.brand-name { font-weight: 800; font-size: 17px; line-height: 19px; }
.brand-sub  { font-weight: 500; font-size: 11px; line-height: 14px; opacity: .75; }

.topbar-search {
    flex: 1 1 260px;
    max-width: 460px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin: 0;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
}

.topbar-search input {
    all: unset;
    flex: 1;
    min-width: 0;
    color: #ffffff;
}

.topbar-search input::placeholder { color: rgba(255, 255, 255, .7); }
.topbar-search:focus-within { box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); }

.topbar-search kbd {
    font: 500 11px var(--es-mono);
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
    box-shadow: none;
}

.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.topbar-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-weight: 700;
    color: #ffffff;
}

.topbar-pill--admin {
    background: var(--es-amber);
    color: var(--es-ink);
}

.icobtn {
    all: unset;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    transition: background .15s;
}

.icobtn:hover { background: rgba(255, 255, 255, .12); }

.avatar {
    all: unset;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--es-amber);
    color: var(--es-ink);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12px;
}

.icobtn:focus-visible,
.avatar:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.user-menu {
    min-width: 240px;
    padding: 8px;
    border: 1px solid var(--es-line);
    border-radius: 14px;
    box-shadow: 0 18px 30px -14px rgba(15, 27, 51, .35);
    font-size: 14px;
}

.user-menu-head { display: flex; flex-direction: column; padding: 6px 10px; }
.user-menu-name { font-weight: 700; }
.user-menu-mail { font-size: 12px; color: var(--es-muted); word-break: break-all; }

.user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 8px 10px;
    font-weight: 600;
}

.user-menu .dropdown-item:hover { background: var(--es-hover); }

/* ---- Menu laterale (inc/menu.php, utenti dei tenant) --------------- */
.layout-app .topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.app-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: 288px;
    transition: margin-left .2s ease;
}

.sidebar-chiusa .app-main { margin-left: 0; }

/* Menu laterale fisso: dalla barra superiore al fondo della finestra, non scorre con la pagina */
.sidebar {
    flex: none;
    width: 288px;
    position: fixed;
    top: var(--es-topbar-h, 60px);
    bottom: 0;
    left: 0;
    z-index: 25;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    border-right: 1px solid var(--es-line);
    padding: 12px 10px 24px;
    box-sizing: border-box;
    transition: margin-left .2s ease;
}

/* Desktop: menu nascosto con il pulsante della barra */
.sidebar-chiusa .sidebar { margin-left: -288px; }

.nav-tree,
.nav-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-sub {
    display: none;
    margin: 2px 0 4px 15px;
    padding-left: 10px;
    border-left: 1px solid var(--es-line-soft);
}

.nav-gruppo.is-open > .nav-sub { display: block; }

.nav-toggle,
.nav-voce {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--es-ink);
    font-family: var(--es-font);
    font-size: 13.5px;
    line-height: 19px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.nav-toggle:hover,
.nav-voce:hover { background: var(--es-bg); color: var(--es-ink); }

.nav-toggle:focus-visible,
.nav-voce:focus-visible { outline: 2px solid var(--es-blue); outline-offset: -2px; }

.nav-sezione > .nav-toggle,
.nav-voce--home {
    padding: 7px 8px;
    font-size: 14px;
    font-weight: 700;
}

.nav-sezione + .nav-sezione,
.nav-home + .nav-sezione { margin-top: 2px; }

.nav-gruppo:not(.nav-sezione) > .nav-toggle { font-weight: 600; color: var(--es-ink); }
.nav-voce { color: var(--es-muted); }

.nav-voce.is-active {
    background: #e3edf9;
    color: var(--es-blue);
    font-weight: 700;
}

.nav-ico {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14);
}

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

.nav-chevron {
    flex: none;
    color: var(--es-outline);
    transition: transform .15s ease;
}

.nav-gruppo.is-open > .nav-toggle > .nav-chevron { transform: rotate(90deg); }

/* Ricerca: evidenzia le voci trovate */
.nav-voce mark {
    padding: 0;
    background: #fbefd9;
    color: inherit;
    border-radius: 3px;
}

.nav-vuoto {
    margin: 12px 8px;
    font-size: 13px;
    color: var(--es-muted);
}

/* Piede del menu: profilo e uscita ancorati in basso; scorre solo l'albero delle voci */
.sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.sidebar > nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 10px 16px;
}

.nav-piede {
    flex: none;
    padding: 10px 10px 12px;
    border-top: 1px solid var(--es-line);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-voce--piede {
    padding: 7px 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--es-ink);
}

.nav-voce--piede .nav-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    box-shadow: none;
}

.nav-ico--profilo { background: var(--es-line-soft); color: var(--es-muted); }
.nav-ico--esci { background: #fde4e1; color: var(--es-danger); }

.nav-voce--esci,
.nav-voce--esci:hover { color: var(--es-danger); }
.nav-voce--esci:hover { background: #fdf1ef; }

.sidebar-velo {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(15, 27, 51, .45);
}

/* ---- Barra di stato (inc/footer.php) ------------------------------- */
/* Barra di stato fissa in basso, sempre visibile; con il menu laterale parte dal suo bordo destro */
.statusbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding: 8px 24px;
    background: #ffffff;
    border-top: 1px solid var(--es-line);
    font-size: 12px;
    font-weight: 500;
    color: var(--es-muted);
}

.statusbar b { color: var(--es-ink); }

.app-main .statusbar { left: 288px; transition: left .25s ease; }
.sidebar-chiusa .app-main .statusbar { left: 0; }

/* Spazio in fondo alle pagine per non finire sotto la barra di stato */
.layout-app .app { padding-bottom: 34px; }

.statusbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot-ok {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-success);
}

/* ---- Pulsanti ------------------------------------------------------ */
.es-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: var(--es-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .15s, border-color .15s;
}

.es-btn:hover { transform: translateY(-1px); }
.es-btn:focus-visible { outline: 2px solid var(--es-blue); outline-offset: 2px; }
.es-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.es-btn--primary { background: var(--es-blue); color: #ffffff; }
.es-btn--primary:hover { background: var(--es-blue-dark); color: #ffffff; }

.es-btn--outline { background: #ffffff; border-color: var(--es-outline); color: var(--es-ink); }
.es-btn--outline:hover { background: var(--es-bg); color: var(--es-ink); }

.es-btn--danger { background: var(--es-danger); color: #ffffff; }
.es-btn--danger:hover { background: #9d2a22; color: #ffffff; }

.es-btn--sm {
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
}

/* ---- Card indicatori (KPI) ----------------------------------------- */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.kpi {
    background: #ffffff;
    border: 1px solid var(--es-line);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--es-muted);
}

.kpi-value {
    font: 500 26px/30px var(--es-mono);
    letter-spacing: -.02em;
    color: var(--es-ink);
}

.kpi-note { font-size: 12px; color: var(--es-muted); }

.kpi-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.kpi-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
}

/* ---- Toni (chip, badge) e colori di modulo ------------------------- */
.tone-success { background: #e3f2e9; color: var(--es-success); }
.tone-warning { background: #fbefd9; color: #9a5b00; }
.tone-danger  { background: #f8e3e1; color: var(--es-danger); }
.tone-brand   { background: #e3edf9; color: var(--es-blue); }
.tone-none    { background: var(--es-line-soft); color: var(--es-muted); }

.bg-slate  { background: #3f6283; }
.bg-orange { background: #c76a00; }
.bg-red    { background: #c0432a; }
.bg-teal   { background: #0d7f81; }
.bg-green  { background: #26834a; }
.bg-purple { background: #7d3a8c; }
.bg-gray   { background: #5f6775; }
.bg-blue   { background: var(--es-blue); }
.bg-navy   { background: var(--es-navy); }

.badge-es {
    display: inline-flex;
    height: 22px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Pannelli, schede, tabelle ------------------------------------- */
.panel {
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--es-line);
    border-radius: 18px;
    overflow: hidden;
}

.panel-pad { padding: 16px 18px; }

.panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 0;
}

.panel-title {
    margin: 0;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
}

.panel-link {
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.es-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 10px 18px 0;
    border-bottom: 1px solid var(--es-line);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

/* Schede: stesse linguette delle schede di inserimento (.sk-scheda, Anagrafica Clienti) */
.es-tab {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    flex: none;
    white-space: nowrap;
    height: 42px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: -1px;
    border: 1px solid var(--es-line);
    border-radius: 12px 12px 0 0;
    background: var(--es-line-soft);
    font-size: 13px;
    font-weight: 700;
    color: var(--es-muted);
    transition: color .15s, background .15s, height .15s;
}

.es-tab:hover { background: #ffffff; color: var(--es-ink); }
.es-tab:focus-visible { outline: 2px solid var(--es-blue); outline-offset: -4px; }

/* Linguetta attiva: più alta, bianca, riga blu in alto, aperta sul contenuto */
.es-tab.is-active {
    height: 48px;
    background: #ffffff;
    border-bottom-color: #ffffff;
    color: var(--es-navy);
    box-shadow: inset 0 3px 0 var(--es-blue);
    z-index: 1;
}

.es-tab-count {
    margin-left: 6px;
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    background: var(--es-line-soft);
    color: var(--es-muted);
}

.es-tab-count { background: #ffffff; }
.es-tab.is-active .es-tab-count { background: var(--es-blue); color: #ffffff; }

/* Schede a pulsanti (.es-tabs--schede): riquadri come quelli del Riepilogo della dashboard, con icona colorata,
   titolo, nota e numero. Il colore di ogni scheda arriva da --rp e --rp-soft sul pulsante. */
.es-tabs.es-tabs--schede { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: stretch; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--es-line-soft); overflow: visible; }
.es-tabs.es-tabs--schede .es-tab { --rp: var(--es-blue); --rp-soft: #e3edf9; height: auto; margin: 0; padding: 12px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 8px;
    white-space: normal; border: 1.5px solid #e3e8f0; border-radius: 16px; background: #ffffff; color: var(--es-ink); box-shadow: none; font-size: 13px;
    transition: transform .18s ease, box-shadow .2s, background .2s, border-color .2s; }
.es-tabs.es-tabs--schede .es-tab:hover { transform: translateY(-2px); background: #ffffff; }
.es-tabs.es-tabs--schede .es-tab:focus-visible { outline: 2px solid var(--es-blue); outline-offset: 2px; }
.es-tabs.es-tabs--schede .es-tab.is-active { height: auto; border-color: var(--rp); background: var(--rp-soft); box-shadow: 0 14px 24px -18px var(--rp); color: var(--es-ink); }
.es-tabs--schede .es-tab-ico { grid-column: 1; grid-row: 1; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--rp); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); }
.es-tabs--schede .es-tab-count { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; font: 500 26px/28px var(--es-mono); color: var(--es-ink); }
.es-tabs--schede .es-tab.is-active .es-tab-count { background: none; color: var(--rp); }
.es-tabs--schede .es-tab-l { grid-column: 1 / -1; margin-top: 10px; font-size: 13px; line-height: 17px; font-weight: 800; color: var(--es-ink); }
.es-tabs--schede .es-tab-h { grid-column: 1 / -1; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--es-muted); }
@media (prefers-reduced-motion: reduce) { .es-tabs.es-tabs--schede .es-tab:hover { transform: none; } }
/* telefono: due per riga, icona e titolo sulla stessa riga, senza nota */
@media (max-width: 575.98px) {
    .es-tabs.es-tabs--schede { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
    .es-tabs.es-tabs--schede .es-tab { padding: 8px 10px; grid-template-columns: auto 1fr auto; border-radius: 14px; }
    .es-tabs--schede .es-tab-ico { width: 30px; height: 30px; }
    .es-tabs--schede .es-tab-l { grid-column: 2; grid-row: 1; margin-top: 0; }
    .es-tabs--schede .es-tab-count { grid-column: 3; font-size: 18px; line-height: 20px; }
    .es-tabs--schede .es-tab-h { display: none; }
}

.es-table-wrap { overflow-x: auto; }

.es-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.es-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--es-muted);
    padding: 10px 18px;
    border-bottom: 1px solid var(--es-line);
    white-space: nowrap;
}

.es-table td {
    padding: 11px 18px;
    border-bottom: 1px solid var(--es-line-soft);
    vertical-align: middle;
}

.es-table tbody tr { animation: es-row .35s ease both; }
.es-table tbody tr:hover td { background: var(--es-hover); }

.es-table .num {
    text-align: right;
    font-family: var(--es-mono);
    font-weight: 500;
    white-space: nowrap;
}

.es-table .strong { font-weight: 700; }
.es-table .muted  { color: var(--es-muted); }
.es-table .nowrap { white-space: nowrap; }

.es-empty {
    margin: 0;
    padding: 36px 18px;
    text-align: center;
    color: var(--es-muted);
}

/* ---- Modali e form (Bootstrap ritoccato) ---------------------------
   Le modali dei dati (.modal-header) hanno lo stile della ricerca (inc/modale_ricerca.php, .sk-rm): testata blu
   con tessera ambra, titolo bianco e chiusura chiara, corpo bianco, piede grigio. */
.modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 40px 80px -30px rgba(11, 42, 91, .55);
}

.modal-header {
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--es-navy) 0%, #163f7a 100%);
    color: #ffffff;
}
/* tessera ambra con l'icona della scheda, come nella ricerca */
.modal-header::before {
    content: "";
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--es-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2a5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / 22px no-repeat;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
}
.modal-header > div { min-width: 0; }
.modal-title  { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -.01em; color: #ffffff; }
/* sottotitolo nella testata (classi delle pagine: *-sotto, po-nota, kpi-note, ...) */
.modal-header .modal-title + *, .modal-header p, .modal-header small { margin: 2px 0 0; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.modal-header .btn-close {
    flex: none;
    width: 36px;
    height: 36px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 10px;
    opacity: 1;
    background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 18px no-repeat;
    transition: background-color .15s;
}
.modal-header .btn-close:hover { background-color: rgba(255, 255, 255, .2); }
.modal-header .btn-close:focus { box-shadow: none; outline: 2px solid var(--es-amber); outline-offset: 2px; }
.modal-body   { padding: 22px; background: #ffffff; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--es-line); background: var(--es-bg); gap: 8px; }
.modal-footer > * { margin: 0; }
/* titoli e riquadri dentro il corpo */
.modal-body h3 { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--es-muted); }
@media (max-width: 575px) {
    .modal-header { padding: 14px 16px; }
    .modal-header::before { width: 36px; height: 36px; background-size: 19px; }
    .modal-title { font-size: 17px; line-height: 22px; }
    .modal-body { padding: 16px; }
}

.form-label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.form-control,
.form-select {
    min-height: 44px;
    border: 1.5px solid var(--es-line);
    border-radius: 12px;
    background-color: var(--es-bg);
    color: var(--es-ink);
    font-weight: 500;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--es-blue);
    box-shadow: 0 0 0 4px rgba(31, 95, 168, .16);
    background-color: #ffffff;
}

/* campi non modificabili: sfondo grigio, uguale a quello delle schede (css/scheda.css) */
.form-control:disabled, .form-control[readonly], .form-control[readonly]:focus, .form-select:disabled { background-color: #e4e9f1; border-color: #c6cfdd; color: #3d485c; -webkit-text-fill-color: #3d485c; opacity: 1; cursor: not-allowed; }
.form-control[readonly], .form-control[readonly]:focus { cursor: default; }

.form-select-sm { min-height: 36px; border-radius: 10px; font-size: 13px; }

.form-text { font-size: 12px; color: var(--es-muted); }

.form-check-input:checked {
    background-color: var(--es-blue);
    border-color: var(--es-blue);
}

.form-check-input:focus { box-shadow: 0 0 0 4px rgba(31, 95, 168, .16); }

/* ---- Combo Select2 (main.js: iniziaSelect2) ------------------------ */
/* .es-s2 = come .form-select; --scheda = come .sk-in (scheda.css); --sm = come .form-select-sm */
.select2-container--default .select2-selection--single.es-s2 {
    height: 44px;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--es-line);
    border-radius: 12px;
    background: var(--es-bg);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.select2-container--default .es-s2 .select2-selection__rendered {
    flex: 1;
    min-width: 0;
    padding: 0 34px 0 12px;
    line-height: normal;
    font-family: var(--es-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--es-ink);
}

.select2-container--default .es-s2 .select2-selection__placeholder { color: var(--es-outline); }
.select2-container--default .es-s2 .select2-selection__arrow { top: 0; right: 8px; height: 100%; }

.select2-container--default.select2-container--focus .es-s2,
.select2-container--default.select2-container--open .es-s2 {
    border-color: var(--es-blue);
    box-shadow: 0 0 0 4px rgba(31, 95, 168, .16);
    background-color: #ffffff;
    outline: none;
}

.select2-container--default .select2-selection--single.es-s2--scheda { height: 42px; border-radius: 10px; background: #ffffff; }
.select2-container--default .es-s2--scheda .select2-selection__rendered { font-size: 14px; }
.select2-container--default .select2-selection--single.es-s2--sm { height: 36px; border-radius: 10px; }
.select2-container--default .es-s2--sm .select2-selection__rendered { font-size: 13px; }

.select2-container--default .select2-selection--single.es-s2.is-modificato { border-color: #8db3e2; background-color: #f5f9fe; }
.select2-container--default .es-s2.is-errore .select2-selection__rendered { color: var(--es-danger); }
.select2-container--default .select2-selection--single.es-s2.is-invalido { border-color: var(--es-danger); box-shadow: 0 0 0 4px rgba(187, 51, 41, .15); }

.select2-container--default.select2-container--disabled .select2-selection--single.es-s2 { background: #e4e9f1; border-color: #c6cfdd; cursor: not-allowed; }
.select2-container--default.select2-container--disabled .es-s2 .select2-selection__arrow { display: none; }

.es-s2-dropdown {
    border: 1px solid var(--es-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 30px -16px rgba(15, 27, 51, .45);
    font-family: var(--es-font);
    font-size: 14px;
}

.select2-container--open .es-s2-dropdown.select2-dropdown--below { margin-top: 4px; border-top: 1px solid var(--es-line); }
.select2-container--open .es-s2-dropdown.select2-dropdown--above { margin-top: -4px; border-bottom: 1px solid var(--es-line); }
.es-s2-dropdown .select2-results__option { padding: 8px 12px; }
.select2-container--default .es-s2-dropdown .select2-results__option--highlighted.select2-results__option--selectable { background: var(--es-blue); }
.select2-container--default .es-s2-dropdown .select2-results__option--selected { background: var(--es-line-soft); }
.select2-container--default .es-s2-dropdown .select2-search--dropdown .select2-search__field {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--es-line);
    border-radius: 8px;
    outline: none;
}
.select2-container--default .es-s2-dropdown .select2-search--dropdown .select2-search__field:focus { border-color: var(--es-blue); }

/* Le modali di Bootstrap stanno sopra il contenuto: il menu di Select2 deve stare sopra le modali */
.select2-container--open { z-index: 1060; }

/* ---- Novita' (icona nella barra superiore + modale) ---------------- */
.icobtn { position: relative; }

.icobtn-punto {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--es-amber);
    box-shadow: 0 0 0 2px var(--es-navy);
}

.icobtn-punto--avviso { background: #e5484d; }

/* Contatori nelle voci del menu laterale (helpdesk) */
.nav-conta { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e5484d; color: #ffffff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.nav-conta[hidden] { display: none; }
.nav-conta--neutro { background: rgba(15, 27, 51, .1); color: var(--es-ink); }

/* ---- Pulsanti di riga a icona (pulsanteIcona in main.js) ------------ */
.az-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: 5px; border: 1px solid var(--es-line); border-radius: 9px; background: #ffffff; color: var(--es-muted); text-decoration: none; vertical-align: middle; transition: background .15s, color .15s, border-color .15s; }
.az-btn:first-child { margin-left: 0; }
.az-btn:hover { background: #eef5fd; color: var(--es-blue); border-color: #9fc3ea; }
.az-btn:disabled { opacity: .5; cursor: progress; }
.az-btn--rosso { color: #d93a3a; }
.az-btn--rosso:hover { background: #ffecec; color: #c22626; border-color: #f1a9a9; }
.tooltip { --bs-tooltip-bg: #0f1b33; --bs-tooltip-font-size: 12px; font-family: var(--es-font); }

/* ---- Notifiche e popup --------------------------------------------- */
#toast-container > div { font-family: var(--es-font); border-radius: 12px; opacity: 1; }

/* ---- SweetAlert2: finestre di conferma e di avviso -------------------
   Stessa grafica dell'altro applicativo (classi es-swal-*, assegnate a tutti i Swal.fire dal mixin in main.js):
   fascia colorata in alto, icona grande a cerchio con anello pulsante, pulsanti affiancati a tutta larghezza,
   sfondo sfocato. I colori di base seguono la tavolozza di ERPSuite. */
.es-swal-popup {
  --c-500: #2f7fd6; --c-700: var(--es-blue); --c-900: var(--es-ink); --c-400: #7fb2ee;
  --ink: var(--es-ink); --ink-2: var(--es-muted); --line: var(--es-line); --surface-2: var(--es-bg);
  --ease: cubic-bezier(.22,.61,.36,1);
}
.swal2-container.es-swal-container-top { z-index: 2000 !important; }

/* Backdrop scuro + blur  */
.swal2-container.swal2-backdrop-show,
.es-swal-container-top.swal2-backdrop-show {
  background: rgba(5, 40, 55, .35) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
}

/* Popup: card bianca, radius 24px, banda colore in cima via ::before */
.es-swal-popup {
  position: relative !important;
  border-radius: 24px !important;
  padding: 40px 0 0 !important;
  width: 100% !important;
  max-width: 460px !important;
  font-family: var(--es-font) !important;
  background: #FFFFFF !important;
  box-shadow: 0 30px 80px -10px rgba(0,82,115,.55), 0 1px 2px rgba(2,40,60,.10) !important;
  border: 0 !important;
  overflow: hidden !important;
}
/* Animazione scale-in elastica (cubic-bezier "bouncy") */
.es-swal-popup.swal2-show {
  animation: es-swal-in .45s cubic-bezier(.34,1.56,.64,1) !important;
}
.es-swal-popup.swal2-hide {
  animation: es-swal-out .25s cubic-bezier(.22,.61,.36,1) !important;
}
@keyframes es-swal-in {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes es-swal-out {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(.92); opacity: 0; }
}

/* Banda colore in cima (6px) — colore default ciano brand */
.es-swal-popup::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--c-500), var(--c-700));
  z-index: 1;
}
.es-swal-popup.swal2-icon-success::before { background: linear-gradient(90deg, #34D87A, #1FA055); }
.es-swal-popup.swal2-icon-error::before   { background: linear-gradient(90deg, #FF8A80, #E33E2B); }
.es-swal-popup.swal2-icon-warning::before { background: linear-gradient(90deg, #FFD66B, #FF9500); }
.es-swal-popup.swal2-icon-info::before    { background: linear-gradient(90deg, #5AC8FA, #0A84FF); }
.es-swal-popup.swal2-icon-question::before{ background: linear-gradient(90deg, #BF96FF, #7A3DF2); }

/* Hero icon: cerchio 88x88 con gradient + ring pulsante */
.es-swal-popup .swal2-icon {
  width: 88px !important; height: 88px !important;
  border: 0 !important;
  border-radius: 50% !important;
  margin: 16px auto 24px !important;
  position: relative !important;
  display: grid !important; place-items: center !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -10px 18px rgba(0,0,0,.08),
    0 14px 30px rgba(0,113,155,.30) !important;
  overflow: visible !important;
}
/* Ring pulsante intorno all'icona (animazione "ring" del template) */
.es-swal-popup .swal2-icon::after {
  content: ""; position: absolute; inset: -12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .28;
  animation: es-swal-ring 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes es-swal-ring {
  0%   { transform: scale(.85); opacity: .4; }
  100% { transform: scale(1.20); opacity: 0;  }
}

/* Attesa (Swal.showLoading senza icona, es. "Cancellazione in corso"): lo spinner gira dentro il cerchio dell'icona,
   non sotto il testo; niente anello pulsante e niente spinner di SweetAlert tra i pulsanti */
.es-swal-popup.swal2-loading .swal2-icon:not(.swal2-success):not(.swal2-error):not(.swal2-warning):not(.swal2-info):not(.swal2-question)::before {
  content: ""; box-sizing: border-box; width: 50px; height: 50px; border-radius: 50%;
  border: 5px solid #dbe7f5; border-top-color: var(--es-blue);
  animation: es-swal-gira .8s linear infinite;
}
.es-swal-popup.swal2-loading { padding-bottom: 30px !important; }
.es-swal-popup.swal2-loading .swal2-icon:not(.swal2-success):not(.swal2-error):not(.swal2-warning):not(.swal2-info):not(.swal2-question)::after { display: none; }
.es-swal-popup.swal2-loading .swal2-actions { display: none !important; }
@keyframes es-swal-gira { to { transform: rotate(360deg); } }

/* Backgrounds & glow per ogni tipo (gradient interno + ombra colorata) */
.es-swal-popup .swal2-icon.swal2-success {
  background: linear-gradient(160deg, #5BE49B, #1FA055) !important;
  color: #1FA055 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.08), 0 14px 30px rgba(31,160,85,.35) !important;
}
.es-swal-popup .swal2-icon.swal2-error {
  background: linear-gradient(160deg, #FF8A80, #E33E2B) !important;
  color: #E33E2B !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.08), 0 14px 30px rgba(227,62,43,.35) !important;
}
.es-swal-popup .swal2-icon.swal2-warning {
  background: linear-gradient(160deg, #FFD66B, #FF9500) !important;
  color: #FF9500 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.08), 0 14px 30px rgba(255,149,0,.40) !important;
}
.es-swal-popup .swal2-icon.swal2-info {
  background: linear-gradient(160deg, #5AC8FA, #0A84FF) !important;
  color: #0A84FF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.08), 0 14px 30px rgba(10,132,255,.35) !important;
}
.es-swal-popup .swal2-icon.swal2-question {
  background: linear-gradient(160deg, #BF96FF, #7A3DF2) !important;
  color: #7A3DF2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.08), 0 14px 30px rgba(122,61,242,.35) !important;
}

/* Nascondo gli elementi interni di Swal per le icone — usiamo invece un
   pseudo-element con la giusta SVG (impossibile via CSS puro), quindi NASCONDO
   tutto e disegno una checkmark/X/etc. solamente via SVG presente nei nodi
   originali, ma forziamo i colori e dimensioni white. */
.es-swal-popup .swal2-icon .swal2-icon-content { display: none !important; }

/* SUCCESS: checkmark SVG (replica esatta del modello grafico sez. ICONS).
   Nascondo le linee/ring nativi di Swal e disegno un check via SVG inline come per
   l'icona warning, cosi' lo stroke e' coerente con il prototipo. */
.es-swal-popup .swal2-icon.swal2-success [class^="swal2-success"],
.es-swal-popup .swal2-icon.swal2-success .swal2-success-ring,
.es-swal-popup .swal2-icon.swal2-success .swal2-success-circular-line-left,
.es-swal-popup .swal2-icon.swal2-success .swal2-success-circular-line-right,
.es-swal-popup .swal2-icon.swal2-success .swal2-success-fix,
.es-swal-popup .swal2-icon.swal2-success .swal2-success-line-tip,
.es-swal-popup .swal2-icon.swal2-success .swal2-success-line-long {
  display: none !important;
}
.es-swal-popup .swal2-icon.swal2-success {
  font-size: 0 !important;
}
.es-swal-popup .swal2-icon.swal2-success::before {
  content: ""; position: absolute; inset: 0;
  display: grid; place-items: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px 48px;
  z-index: 1;
}
/* Bounce in entrata uguale a warning (modello grafico: scale 0.2 -> 1.18 -> 1) */
.es-swal-popup.swal2-show .swal2-icon.swal2-success {
  animation: es-swal-icon-pop .6s cubic-bezier(.34,1.85,.64,1) .1s both;
}
/* Ring pulsante esterno dell'icona success: verde (currentColor = #1FA055).
   Aumento opacity rispetto al default .28 per renderlo piu' visibile su sfondo
   bianco del popup, come nel prototipo. */
.es-swal-popup .swal2-icon.swal2-success::after {
  border-color: #1FA055 !important;
  border-width: 2.5px !important;
  opacity: .42 !important;
}

/* ERROR: X SVG (replica esatta del modello grafico sez. ICONS).
   Nascondo le line native di Swal e disegno una X via SVG inline. */
.es-swal-popup .swal2-icon.swal2-error [class^="swal2-x-mark"],
.es-swal-popup .swal2-icon.swal2-error .swal2-x-mark-line-left,
.es-swal-popup .swal2-icon.swal2-error .swal2-x-mark-line-right {
  display: none !important;
}
.es-swal-popup .swal2-icon.swal2-error {
  font-size: 0 !important;
}
.es-swal-popup .swal2-icon.swal2-error::before {
  content: ""; position: absolute; inset: 0;
  display: grid; place-items: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px 48px;
  z-index: 1;
}
.es-swal-popup.swal2-show .swal2-icon.swal2-error {
  animation: es-swal-icon-pop .6s cubic-bezier(.34,1.85,.64,1) .1s both;
}
.es-swal-popup .swal2-icon.swal2-error::after {
  border-color: #E33E2B !important;
  border-width: 2.5px !important;
  opacity: .42 !important;
}

/* ERROR template: il bottone OK/Chiudi assume gradient ROSSO coerente con il
   modello grafico.error (l'errore non e' una conferma "positiva",
   serve un'azione visivamente coerente con l'icona rossa). Override del
   verde di default solo quando il popup ha l'icona error. */
.es-swal-popup.swal2-icon-error .swal2-actions .swal2-confirm.es-swal-btn-primary {
    background: linear-gradient(135deg, #FF8A80, #E33E2B) !important;
    box-shadow: 0 4px 12px rgba(227,62,43,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.es-swal-popup.swal2-icon-error .swal2-actions .swal2-confirm.es-swal-btn-primary:hover {
    box-shadow: 0 8px 20px rgba(227,62,43,.45) !important;
}
.es-swal-popup.swal2-icon-error .swal2-actions .swal2-confirm.es-swal-btn-primary:focus {
    box-shadow: 0 0 0 4px rgba(227,62,43,.25) !important;
}

/* WARNING: triangolo "!" SVG bianco (replica esatta del modello grafico sez. ICONS) */
.es-swal-popup .swal2-icon.swal2-warning {
  font-size: 0 !important;
}
.es-swal-popup .swal2-icon.swal2-warning::before {
  content: ""; position: absolute; inset: 0;
  display: grid; place-items: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.7 3.86a2 2 0 00-3.4 0z'/><path d='M12 9v4M12 17h.01'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px 48px;
  z-index: 1;
}
/* Ring pulsante esterno dell'icona warning: arancio (su sfondo bianco del popup,
   il bianco era invisibile). currentColor = #FF9500 ereditato da .swal2-warning. */
.es-swal-popup .swal2-icon.swal2-warning::after {
  border-color: #FF9500 !important;
  border-width: 2.5px !important;
  opacity: .45 !important;
}

/* Effetto entrata + pulse continuo dell'icona warning (replica modello grafico).
   Due animazioni in sequenza:
     1. es-swal-icon-pop  → bounce iniziale: scale .2 → 1.18 → 1 (0.6s, 1 volta)
     2. es-swal-icon-pulse → battito perpetuo: scale 1 → 1.06 → 1 (1.8s, infinite)
   Insieme al ring pulsante esterno (.swal2-icon::after) creano la sensazione di
   un allarme che attira l'attenzione. */
.es-swal-popup.swal2-show .swal2-icon.swal2-warning {
  animation:
    es-swal-icon-pop   .6s cubic-bezier(.34,1.85,.64,1) .1s both,
    es-swal-icon-pulse 1.8s ease-in-out .8s infinite;
}
@keyframes es-swal-icon-pop {
  0%   { transform: scale(.2);  opacity: 0; }
  50%  { transform: scale(1.18); opacity: 1; }
  80%  { transform: scale(.96); }
  100% { transform: scale(1);   }
}
@keyframes es-swal-icon-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -10px 18px rgba(0,0,0,.08),
      0 14px 30px rgba(255,149,0,.40);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -10px 18px rgba(0,0,0,.08),
      0 22px 50px rgba(255,149,0,.75);
  }
}

/* Bottoni del modello grafico.warning (eccezione alla REGOLA #2 dei colori fissi):
   - Annulla   = ghost bianco/grigio (border: #line, bg: --surface-2)
   - Procedi   = arancio gradient #FFD66B -> #FF9500 (.mb-btn.warning del template)
   Si attiva quando la popup ha la classe swal2-icon-warning (Swal la mette quando icon='warning'). */
.es-swal-popup.swal2-icon-warning .swal2-actions .swal2-cancel.es-swal-btn-ghost {
  background: var(--surface-2, #F2FBFE) !important;
  border: 1px solid var(--line, #C9E5EF) !important;
  color: var(--ink-2, #2B5C70) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.es-swal-popup.swal2-icon-warning .swal2-actions .swal2-cancel.es-swal-btn-ghost:hover {
  background: #fff !important;
  border-color: var(--c-400, #5AC8E9) !important;
}
.es-swal-popup.swal2-icon-warning .swal2-actions .swal2-confirm.es-swal-btn-primary {
  background: linear-gradient(135deg, #FFD66B, #FF9500) !important;
  box-shadow: 0 4px 12px rgba(255,149,0,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #fff !important;
}
.es-swal-popup.swal2-icon-warning .swal2-actions .swal2-confirm.es-swal-btn-primary:hover {
  box-shadow: 0 8px 20px rgba(255,149,0,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: translateY(-2px);
}

/* INFO: "i" bianca */
.es-swal-popup .swal2-icon.swal2-info {
  font-size: 0 !important;
}
.es-swal-popup .swal2-icon.swal2-info::before {
  content: "i"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 56px/1 "Georgia", "SF Pro Display", serif;
  color: #fff;
  z-index: 1;
}

/* QUESTION: "?" bianca */
.es-swal-popup .swal2-icon.swal2-question {
  font-size: 0 !important;
}
.es-swal-popup .swal2-icon.swal2-question::before {
  content: "?"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 52px/1 -apple-system, "SF Pro Display", "Inter", sans-serif;
  color: #fff;
  z-index: 1;
}

/* Titolo: 22px bold, centrato */
.es-swal-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--c-900) !important;
  margin: 0 !important;
  padding: 0 32px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* Testo (htmlContainer): 14.5px, centrato */
.es-swal-html {
  font-size: 14.5px !important;
  color: var(--ink-2) !important;
  line-height: 1.55 !important;
  padding: 10px 32px 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
.es-swal-html b { color: var(--c-900); }
/* secondo messaggio accodato nello stesso riquadro (main.js, messaggio) */
.es-swal-altro { margin-top: 10px; }
.es-swal-altro:first-child { margin-top: 0; }
.es-swal-html a { color: var(--c-accent, #2563eb); font-weight: 600; }

/* Actions: bottoni "split" full-width come nel template */
.es-swal-popup .swal2-actions {
  display: flex !important;
  gap: 12px !important;
  padding: 30px 26px 28px !important;
  margin: 0 !important;
  width: 100% !important;
  justify-content: center !important;
}
.es-swal-btn {
  flex: 1 !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  border: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  cursor: pointer;
  /* NO !important su display: Swal nasconde i bottoni non usati con
     style="display:none" inline; con !important quell'inline veniva
     sovrascritto e il bottone Cancel appariva anche negli appAlert
     (showCancelButton:false). Niente !important = inline style vince. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff !important;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease) !important;
  outline: none !important;
}
/* Safety net: se per qualche motivo lo style inline non c'e' ma la classe
   swal2-hide e' applicata (animation di chiusura), forziamo display:none. */
.es-swal-popup .swal2-actions .swal2-styled.swal2-hide,
.es-swal-popup .swal2-actions [style*="display: none"],
.es-swal-popup .swal2-actions [style*="display:none"] {
  display: none !important;
}
.es-swal-btn:hover { transform: translateY(-2px); }
.es-swal-btn:focus { box-shadow: 0 0 0 4px rgba(0,176,239,.25) !important; }

/* CONFIRM = verde gradient */
.es-swal-btn-primary {
  background: linear-gradient(135deg, #34D87A, #1FA055) !important;
  box-shadow: 0 4px 12px rgba(31,160,85,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.es-swal-btn-primary:hover { box-shadow: 0 8px 20px rgba(31,160,85,.45) !important; }
.es-swal-btn-primary:focus { box-shadow: 0 0 0 4px rgba(31,160,85,.25) !important; }

/* CANCEL = rosso gradient */
.es-swal-btn-ghost {
  background: linear-gradient(135deg, #FF8A80, #E33E2B) !important;
  box-shadow: 0 4px 12px rgba(227,62,43,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.es-swal-btn-ghost:hover { box-shadow: 0 8px 20px rgba(227,62,43,.45) !important; }
.es-swal-btn-ghost:focus { box-shadow: 0 0 0 4px rgba(227,62,43,.25) !important; }

/* Danger: alias (denyButton è bandito, ma resta per retro-compat) */
.es-swal-btn-danger {
  background: linear-gradient(135deg, #FF8A80, #E33E2B) !important;
  box-shadow: 0 4px 12px rgba(227,62,43,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.es-swal-btn-danger:hover { box-shadow: 0 8px 20px rgba(227,62,43,.45) !important; }

/* Input nel prompt */
.es-swal-input {
  width: calc(100% - 64px) !important;
  margin: 0 32px 14px !important;
  background: var(--surface-2) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font: inherit !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  outline: none !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease) !important;
}
.es-swal-input:focus {
  border-color: var(--c-500) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(0,176,239,.18) !important;
}

/* Spaziatura header (la-icon ha gia' suo margin), niente padding ulteriore */
.es-swal-popup .swal2-header { padding: 0 !important; }
.es-swal-popup .swal2-content { padding: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .es-swal-popup.swal2-show, .es-swal-popup .swal2-icon, .es-swal-popup .swal2-icon::after { animation: none !important; }
}

/* ---- Schermi piccoli ----------------------------------------------- */
/* Tablet e telefoni: il menu laterale diventa un pannello a scomparsa sopra la pagina */
@media (max-width: 991.98px) {
    .app-main .statusbar { left: 0; }
    .app-main { margin-left: 0; }
    .sidebar {
        position: fixed;
        top: 0;
        bottom: auto;
        left: 0;
        z-index: 1040;
        height: 100vh;
        margin-left: -300px;
        box-shadow: 0 0 40px rgba(15, 27, 51, .3);
    }
    .sidebar-aperta .sidebar { margin-left: 0; }
    .sidebar-chiusa .sidebar { margin-left: -300px; }
}

@media (max-width: 640px) {
    .topbar { padding: 10px 16px; }
    .topbar-search { order: 3; flex-basis: 100%; max-width: none; }
    .topbar-search kbd { display: none; }
    .page { padding: 20px 16px 28px; }
    .page-head { margin: -20px -16px 0; padding: 20px 16px 12px; }
    .page-title { font-size: 30px; line-height: 36px; }
    .statusbar { padding: 8px 16px; }
    .layout-app .app { padding-bottom: 54px; }
}

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

/* =====================================================================
   MENU LATERALE A PIÙ LIVELLI (template «Menu a più livelli»; js/main.js, iniziaMenuLaterale)
   barra scura dei moduli (88 px) + pannello del modulo (320 px) che scende di livello
   ===================================================================== */
:root { --mn-rail: 88px; --mn-pan: 320px; }
.sidebar.mn-pronto { width: calc(var(--mn-rail) + var(--mn-pan)); padding: 0; flex-direction: row; overflow: hidden; border-right: 0; background: transparent; }
.sidebar .mn-sorgente[hidden] { display: none !important; }
.app-main { margin-left: calc(var(--mn-rail) + var(--mn-pan)); }
.app-main .statusbar { left: calc(var(--mn-rail) + var(--mn-pan)); }
.sidebar-chiusa .sidebar.mn-pronto { margin-left: 0; width: var(--mn-rail); }
.sidebar-chiusa .mn-pannello { display: none; }
.sidebar-chiusa .app-main { margin-left: var(--mn-rail); }
.sidebar-chiusa .app-main .statusbar { left: var(--mn-rail); }

@keyframes mn-fwd { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes mn-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes mn-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mn-fwd { animation: mn-fwd .28s cubic-bezier(.2, .8, .2, 1) both; }
.mn-back { animation: mn-back .28s cubic-bezier(.2, .8, .2, 1) both; }
.mn-fade { animation: mn-fade .25s ease both; }

/* barra dei moduli */
.mn-rail { flex: none; width: var(--mn-rail); background: #0b2a5b; padding: 12px 10px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px;
           overflow-y: auto; overflow-x: hidden; scrollbar-width: none; border-top: 1px solid rgba(255, 255, 255, .08); }
.mn-rail::-webkit-scrollbar { display: none; }
.mn-rail-voce { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 68px; padding: 8px 0 7px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 5px;
                color: #c9d4e6; font: 700 10.5px/12px var(--es-font); text-align: center; text-decoration: none; transition: background .15s, color .15s; }
.mn-rail-voce:hover { background: rgba(255, 255, 255, .08); color: #ffffff; }
.mn-rail-voce:focus-visible { outline: 2px solid #f2a71b; outline-offset: 2px; }
.mn-ri { position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14);
         transition: transform .2s cubic-bezier(.2, .9, .3, 1.4), box-shadow .2s; }
.mn-rail-voce:hover .mn-ri { transform: scale(1.07); }
.mn-rail-voce.is-on { background: rgba(255, 255, 255, .12); color: #ffffff; }
.mn-rail-voce.is-on .mn-ri { box-shadow: 0 0 0 2px #0b2a5b, 0 0 0 4px #ffffff; }
.mn-ri--home { background: rgba(255, 255, 255, .16); }
.mn-rl { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-rail-piede { margin-top: auto; padding-top: 10px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; border-top: 1px solid rgba(255, 255, 255, .12); }
.mn-rail-voce--piede { padding: 6px 0; }
.mn-ri--piede { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #ffffff; box-shadow: none; }
.mn-rail-voce.is-esci .mn-ri--piede { background: rgba(242, 108, 90, .22); color: #ffb3a8; }
.mn-ri-conta { position: absolute; top: -6px; right: -8px; margin: 0 !important; box-shadow: 0 0 0 2px #0b2a5b; }

/* pannello del modulo */
.mn-pannello { flex: none; width: var(--mn-pan); background: #ffffff; border-right: 1px solid #d3dae6; display: flex; flex-direction: column; min-height: 0;
               box-shadow: 12px 0 24px -20px rgba(15, 27, 51, .35); --acc: #3f6283; --acc-soft: #e6edf4; --acc-ink: #2e4a66; }
.mn-barra { flex: none; height: 4px; background: var(--acc); }
.mn-testa { flex: none; padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid #e9edf4; }
.mn-modulo { display: flex; align-items: center; gap: 12px; }
.mn-mico { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
.mn-eti { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #566177; }
.mn-titolo { font-size: 19px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--es-ink); }
.mn-sbox { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 12px; border: 1.5px solid #d3dae6; border-radius: 11px; background: #f3f5f9; transition: border-color .2s, box-shadow .2s; }
.mn-sbox:focus-within { border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.mn-cerca { all: unset; box-sizing: border-box; flex: 1; min-width: 0; font: 500 14px/20px var(--es-font); color: var(--es-ink); }
.mn-cerca::placeholder { color: #7a8496; }
.mn-nav { flex: none; padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 10px; }
.mn-nav:empty { display: none; }
.mn-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mn-sep { color: #8792a6; font-size: 12px; }
.mn-crumb { all: unset; cursor: pointer; padding: 3px 8px; border-radius: 999px; font: 700 12px/16px var(--es-font); color: #566177; background: #e9edf4; white-space: nowrap; transition: background .15s, color .15s; }
.mn-crumb:hover, .mn-crumb.is-ultimo { background: var(--acc-soft); color: var(--acc-ink); }
.mn-crumb.is-ultimo { cursor: default; }
.mn-crumb:focus-visible, .mn-back-btn:focus-visible, .mn-row:focus-visible { outline: 2px solid #f2a71b; outline-offset: 2px; }
.mn-livello { display: flex; align-items: center; gap: 10px; }
.mn-back-btn { all: unset; cursor: pointer; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 1px solid #d3dae6; background: #ffffff; color: var(--es-ink); transition: background .15s, transform .15s; }
.mn-back-btn:hover { background: #e9edf4; transform: translateX(-2px); }
.mn-livello-t { flex: 1; min-width: 0; }
.mn-livello-n { font-size: 16px; line-height: 21px; font-weight: 800; color: var(--es-ink); }
.mn-livello-i { font-size: 12px; color: #566177; }
.mn-liv { flex: none; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--acc-soft); color: var(--acc-ink); font-size: 11px; font-weight: 800; line-height: 22px; }
.mn-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 16px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.mn-gruppo-t { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #566177; }
.mn-gruppo-t.is-dopo { padding-top: 12px; }
.mn-risultati { padding: 4px 8px 8px; font-size: 12px; font-weight: 700; color: #566177; }
.mn-row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 10px; border-radius: 12px;
          color: var(--es-ink); font: 600 14px/19px var(--es-font); text-decoration: none; transition: background .15s, transform .15s; }
.mn-row:hover { background: var(--acc-soft); transform: translateX(2px); color: var(--es-ink); }
.mn-row:hover .mn-go { transform: translateX(3px); color: var(--acc); }
.mn-on, .mn-on:hover { background: var(--acc-soft); color: var(--acc-ink); font-weight: 800; box-shadow: inset 3px 0 0 var(--acc); }
.mn-cico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--acc-soft); display: grid; place-items: center; }
.mn-fico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.mn-rtesto { flex: 1; min-width: 0; }
.mn-rtesto small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: #566177; }
.mn-num { flex: none; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: #e9edf4; color: #566177; font-size: 11px; font-weight: 800; line-height: 22px; text-align: center; }
.mn-go { flex: none; display: grid; color: #8792a6; transition: transform .2s, color .2s; }
.mn-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; margin: 0 6px; }
.mn-conta { margin-left: 0; }

/* piede della barra: solo icone (nome nel tooltip), così i moduli restano tutti visibili */
.mn-rail-voce--piede { width: 44px; padding: 4px 0; border-radius: 12px; }
.mn-rail-voce--piede .mn-rl { display: none; }
.mn-rail-piede { gap: 4px; }
/* finestre basse: moduli più compatti */
@media (max-height: 940px) {
    .mn-rail { padding: 8px 10px; gap: 2px; }
    .mn-rail-voce { padding: 5px 0 4px; gap: 3px; }
    .mn-rail-voce:not(.mn-rail-voce--piede) .mn-ri { width: 38px; height: 38px; border-radius: 11px; }
    .mn-rail-voce--piede .mn-ri--piede { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .mn-fwd, .mn-back, .mn-fade { animation: none; } .mn-row:hover { transform: none; } }

/* tablet e telefono: menu sopra la pagina, aperto con il pulsante della barra */
@media (max-width: 991.98px) {
    .app-main, .sidebar-chiusa .app-main { margin-left: 0; }
    .app-main .statusbar, .sidebar-chiusa .app-main .statusbar { left: 0; }
    .sidebar.mn-pronto { width: min(calc(var(--mn-rail) + var(--mn-pan)), 100vw); margin-left: -110vw; }
    .sidebar-aperta .sidebar.mn-pronto { margin-left: 0; }
    .sidebar-chiusa .mn-pannello { display: flex; }
    .mn-pannello { flex: 1; width: auto; min-width: 0; }
}
a.icobtn { text-decoration: none; }
.icobtn.is-active { background: rgba(255, 255, 255, .16); }
.icobtn--esci { color: #ffb3a8; }
.icobtn--esci:hover { background: rgba(242, 108, 90, .22); color: #ffffff; }

/* ---- Telefoni: barra superiore su due righe ------------------------------------------------------------------
   1ª riga: menu, logo e icone (campanella, bug, helpdesk, novità, esci, utente) allineate a destra;
   2ª riga: azienda e ricerca. Il contenitore delle icone si «scioglie» (display: contents) così l'azienda può andare
   a capo da sola; ::after spezza la riga. Barra di stato su una riga (l'azienda è già in alto). */
@media (max-width: 640px) {
    .topbar { gap: 10px 4px; padding: 8px 12px 10px; padding-top: max(8px, env(safe-area-inset-top, 0px)); }
    .topbar::after { content: ''; order: 9; flex-basis: 100%; height: 0; }
    .topbar #sidebar-toggle { order: 1; }
    .brand { order: 2; margin-left: 4px; }
    .brand-text { display: none; }
    .topbar-actions { display: contents; }
    .topbar-actions > * { order: 3; }
    .topbar-actions > .ntf-ancora { margin-left: auto; }
    .topbar-actions .icobtn { width: 38px; height: 38px; }
    .topbar-actions .avatar { margin-left: 4px; }
    .topbar-actions > .topbar-pill { order: 10; flex: none; height: 38px; box-sizing: border-box; padding: 0 12px; margin-right: 6px; border-radius: 10px; }
    .topbar-search { order: 11; flex: 1 1 0; min-width: 0; }
    .statusbar-azienda { display: none; }
    .statusbar { flex-wrap: nowrap; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .layout-app .app { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}
/* telefoni: la barra superiore scorre via con la pagina (resta in cima), così le intestazioni fisse partono dall'alto */
@media (max-width: 640px) {
    .layout-app .topbar { position: relative; }
    .page-head { top: 0; }
}
@media (max-width: 360px) {
    .topbar { padding-left: 8px; padding-right: 8px; gap: 10px 2px; }
    .topbar #sidebar-toggle { width: 32px; }
    .brand img { width: 28px; height: 28px; }
    .topbar-actions .icobtn { width: 32px; }
    .topbar-actions .avatar { width: 32px; height: 32px; margin-left: 2px; }
    .topbar-actions > .topbar-pill { padding: 0 10px; margin-right: 4px; }
}

/* ---- Stampe in PDF preparate dalla pagina (apriStampa, main.js) ----------
   #stampa-attesa: velo con «Preparazione della stampa…» mentre il server genera il PDF;
   #stampa-visore: il PDF a tutta pagina quando il browser non lascia aprire la nuova scheda. */
.stampa-attesa { position: fixed; inset: 0; z-index: 1900; display: flex; align-items: center; justify-content: center; background: rgba(11, 42, 91, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.stampa-attesa ~ .sk-attesa { display: none; }      /* un solo avviso d'attesa: quello delle schede non compare sopra il velo */
.stampa-attesa-box { display: flex; align-items: center; gap: 14px; padding: 16px 26px; border-radius: 16px; background: var(--es-navy); color: #ffffff; font-size: 14px; font-weight: 700; box-shadow: 0 18px 40px -18px rgba(11, 42, 91, .7); }
.stampa-attesa-giro { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #ffffff; animation: stampa-giro .7s linear infinite; }
@keyframes stampa-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stampa-attesa-giro { animation-duration: 2s; } }
.stampa-visore { position: fixed; inset: 0; z-index: 1900; display: flex; flex-direction: column; background: #ffffff; }
.stampa-visore-barra { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--es-line); background: var(--es-bg); }
.stampa-visore iframe { flex: 1; width: 100%; border: 0; }
@media print { .stampa-attesa, .stampa-visore { display: none; } }

/* =====================================================================
   AVANZAMENTO DELLE CHIAMATE (js/main.js, regola 19): barra in cima e, all'arrivo nella pagina, avviso al centro
   ===================================================================== */
.es-avanza { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 2100; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; }
.es-avanza.is-on { opacity: 1; }
.es-avanza span { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, #f2a71b 40%, #f2a71b 60%, transparent); }
.es-avanza.is-on span { animation: es-avanza 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes es-avanza { to { left: 100%; } }
.es-carica { position: fixed; left: 50%; top: 44%; transform: translateX(-50%); z-index: 1790; display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-radius: 14px;
             background: var(--es-navy); color: #ffffff; font-size: 14px; font-weight: 600; box-shadow: 0 18px 40px -18px rgba(11, 42, 91, .7); animation: es-carica-in .2s ease-out both; }
.es-carica-giro { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #ffffff; animation: es-carica-giro .7s linear infinite; }
@keyframes es-carica-giro { to { transform: rotate(360deg); } }
@keyframes es-carica-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .es-avanza.is-on span { animation-duration: 3s; } .es-carica-giro { animation-duration: 2s; } }
@media print { .es-avanza, .es-carica { display: none; } }

/* =====================================================================
   LEADFLOW: componenti comuni delle pagine del flusso (lead, chiamate, appuntamenti, contratti, incassi)
   ===================================================================== */

/* toni in più per gli stati del flusso */
.tone-teal   { background: #dff1f1; color: #085d5f; }
.tone-purple { background: #f1e5f3; color: #5e2a6a; }
.tone-orange { background: #fbeedd; color: #8a4a00; }

/* avviso in cima alla pagina (pagina non permessa, ...) */
.lf-avviso { margin: 16px 24px 0; padding: 12px 16px; border-radius: 14px; background: #fff4dc; border: 1px solid #f2c96b; color: #7a4b00; font-size: 13.5px; font-weight: 600; }

/* pannello dell'elenco: schede, barra dei filtri, tabella */
.lf-pannello { display: flex; flex-direction: column; }
.lf-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--es-line-soft); }
.lf-filtri .lf-cerca { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--es-line); border-radius: 12px; background: var(--es-bg); color: var(--es-muted); }
.lf-filtri .lf-cerca:focus-within { border-color: var(--es-blue); background: #ffffff; box-shadow: 0 0 0 4px rgba(31, 95, 168, .16); }
.lf-filtri .lf-cerca input { all: unset; flex: 1; min-width: 0; color: var(--es-ink); font-size: 14px; }
.lf-filtri .form-control, .lf-filtri .form-select { min-height: 40px; width: auto; }
.lf-filtri .lf-data { width: 150px; }
.lf-filtri .lf-f-select { min-width: 170px; }
.lf-filtri .select2-container { min-width: 170px; }
.lf-filtri .lf-spazio { flex: 1; }
.lf-filtri label.lf-eti { margin: 0; font-size: 12px; font-weight: 700; color: var(--es-muted); }

/* azioni su più righe selezionate */
.lf-massa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 18px; background: #eef5fd; border-bottom: 1px solid #c9dcf2; font-size: 13px; font-weight: 700; color: #184c86; }
.lf-massa[hidden] { display: none; }
.lf-massa .select2-container { min-width: 200px; }

/* righe cliccabili, prima colonna con nome e sotto-riga */
.es-table tr.is-clic { cursor: pointer; }
.es-table .lf-sel { width: 36px; padding-right: 0; }
.es-table .lf-azioni { text-align: right; white-space: nowrap; width: 1%; }
.lf-nome { display: block; font-weight: 700; color: var(--es-ink); }
.lf-sotto { display: block; font-size: 12px; color: var(--es-muted); }
.lf-sotto a { color: inherit; }
.lf-fonte { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.lf-fonte::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lf-c, #8792a6); flex: none; }
.lf-ritardo { color: var(--es-danger); font-weight: 700; }
.lf-tel { font-family: var(--es-mono); font-size: 13px; white-space: nowrap; text-decoration: none; }

/* piede dell'elenco: totale e pagine */
.lf-piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; font-size: 13px; color: var(--es-muted); }
.lf-pagine { display: flex; align-items: center; gap: 6px; }

/* scheda (modale grande): dati a sinistra, diario a destra */
.lf-scheda { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 991.98px) { .lf-scheda { grid-template-columns: 1fr; } }
.lf-gruppo { margin: 0 0 18px; padding: 14px 16px 16px; border: 1px solid var(--es-line); border-radius: 16px; }
.lf-gruppo > legend { float: none; width: auto; margin: 0; padding: 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--es-blue); }
.lf-gruppo .form-label { margin-bottom: 4px; font-size: 12.5px; }
.lf-riassunto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; background: var(--es-bg); font-size: 13px; }
.lf-riassunto b { font-weight: 700; }
.lf-recapiti { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-recapito { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--es-line); background: #ffffff; font-size: 13px; font-weight: 600; color: var(--es-ink); text-decoration: none; }
.lf-recapito:hover { border-color: var(--es-blue); color: var(--es-blue); }
.lf-collegati { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lf-collegato { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--es-line-soft); border-radius: 12px; font-size: 13px; color: inherit; text-decoration: none; }
a.lf-collegato:hover { border-color: #c5cfdd; background: var(--es-bg); color: inherit; }
.lf-collegato .lf-spazio { flex: 1; min-width: 0; }

/* diario del lead */
.lf-diario { display: flex; flex-direction: column; gap: 0; max-height: 520px; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.lf-voce { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.lf-voce::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--es-line-soft); }
.lf-voce:last-child::before { display: none; }
.lf-voce-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #ffffff; }
.lf-voce-corpo { min-width: 0; padding-top: 2px; font-size: 13.5px; }
.lf-voce-quando { display: block; font-size: 11.5px; color: var(--es-muted); }
.lf-nota-nuova { display: flex; gap: 8px; margin-bottom: 14px; }
.lf-nota-nuova textarea { min-height: 44px; resize: vertical; }

/* scelta dell'esito: tessere a scelta singola */
.lf-esiti { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 8px; margin-bottom: 14px; }
.lf-esito { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--es-line); border-radius: 14px; background: #ffffff;
    font-size: 13px; font-weight: 700; color: var(--es-ink); transition: border-color .15s, background .15s, transform .15s; }
.lf-esito:hover { transform: translateY(-1px); border-color: var(--es-outline); }
.lf-esito:focus-visible { outline: 2px solid var(--es-blue); outline-offset: 2px; }
.lf-esito-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--lf-c, var(--es-blue)); color: #ffffff; }
.lf-esito.is-on { border-color: var(--lf-c, var(--es-blue)); background: #f7faff; box-shadow: 0 0 0 3px rgba(31, 95, 168, .14); }
.lf-esito-dati { padding: 14px 16px; border-radius: 16px; background: var(--es-bg); margin-bottom: 14px; }
.lf-esito-dati[hidden] { display: none; }

/* stato vuoto */
.lf-vuoto { padding: 40px 18px; text-align: center; color: var(--es-muted); }
.lf-vuoto b { display: block; font-size: 15px; color: var(--es-ink); margin-bottom: 4px; }

/* righe del contratto e piano rate */
.lf-righe .form-control, .lf-righe .form-select { min-height: 40px; }
.lf-righe td { padding: 6px 6px; border-bottom: 0; }
.lf-righe .lf-importo { width: 140px; }
.lf-totali { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; padding: 10px 6px 0; font-size: 13px; color: var(--es-muted); }
.lf-totali b { font-family: var(--es-mono); font-weight: 500; font-size: 16px; color: var(--es-ink); }
.lf-piano { margin-top: 8px; }
.lf-piano td, .lf-piano th { padding: 6px 10px; }
.lf-pagata { color: var(--es-success); font-weight: 700; }

@media (max-width: 640px) {
    .lf-filtri { padding: 12px; }
    .lf-filtri .lf-data { width: calc(50% - 5px); }
    .lf-avviso { margin: 12px 16px 0; }
}

/* colori delle tessere degli esiti di chiamata e degli stati dell'appuntamento (inc/modali_flusso.php, js/flusso.js) */
.lf-esito[data-esito="AP"], .lf-esito[data-stato="C"] { --lf-c: #26834a; }
.lf-esito[data-esito="RI"], .lf-esito[data-stato="N"], .lf-esito[data-stato="R"] { --lf-c: #c76a00; }
.lf-esito[data-esito="NT"], .lf-esito[data-stato="X"] { --lf-c: #5f6775; }
.lf-esito[data-esito="NI"], .lf-esito[data-stato="A"] { --lf-c: #c0432a; }
.lf-esito[data-esito="IN"], .lf-esito[data-stato="L"] { --lf-c: #1f5fa8; }
.lf-esito[data-esito="SC"], .lf-esito[data-stato="T"] { --lf-c: #7d3a8c; }
.lf-esito[data-stato="S"], .lf-esito[data-stato="V"] { --lf-c: #0d7f81; }
.lf-esito.is-attuale { cursor: default; border-color: var(--lf-c); background: #f7faff; }

/* icone del diario per tipo di evento */
.lf-voce-ico[data-tipo="nota"]         { background: #5f6775; }
.lf-voce-ico[data-tipo="chiamata"]     { background: #c76a00; }
.lf-voce-ico[data-tipo="appuntamento"] { background: #0d7f81; }
.lf-voce-ico[data-tipo="contratto"]    { background: #26834a; }
.lf-voce-ico[data-tipo="sistema"]      { background: #1f5fa8; }
.lf-scheda.lf-scheda--sola { grid-template-columns: 1fr; }

/* schede degli incassi (incassi.php): colore di ogni riquadro */
.es-tabs--schede .inc-scadute      { --rp: #c0432a; --rp-soft: #f9e5e0; }
.es-tabs--schede .inc-in_scadenza  { --rp: #c76a00; --rp-soft: #fbeedd; }
.es-tabs--schede .inc-da_incassare { --rp: #1f5fa8; --rp-soft: #e3edf9; }
.es-tabs--schede .inc-incassate    { --rp: #26834a; --rp-soft: #e1f1e7; }
.lf-filtri .select2-container { width: auto !important; min-width: 190px; max-width: 260px; }