/* =========================================================================
   theme-vivido.css — palette ufficiale DocentiCosmo
   Tutte le variabili CSS sono pensate per soddisfare WCAG AA su sfondo bianco
   o scuro (verificare i contrasti se si introducono varianti).
   ========================================================================= */

:root {
    /* Primario blu (azione principale, link, header) */
    --cosmo-primario: #1D4ED8;
    --cosmo-primario-scuro: #1E3A8A;
    --cosmo-primario-chiaro: #3B82F6;
    /* Evidenziazione titoli home ospiti: contrasto AA su bianco (testo grande) */
    --cosmo-primario-enfasi-titolo: #2563eb;

    /* Accento arancio (CTA secondaria, evidenziazioni) */
    --cosmo-accento-arancio: #F59E0B;
    --cosmo-accento-arancio-scuro: #D97706;

    /* Accento verde (successo, conferme) */
    --cosmo-accento-verde: #10B981;
    --cosmo-accento-verde-scuro: #059669;

    /* Accento teal (home percorso scuola — mockup ingresso) */
    --cosmo-accento-teal: #14B8A6;
    --cosmo-accento-teal-scuro: #0D9488;

    /* Persona docente (funnel e back-office docenti). Distinto da --cosmo-accento-verde (stato successo). */
    --cosmo-docente-primario: #047857;
    --cosmo-docente-primario-scuro: #065f46;
    --cosmo-docente-primario-chiaro: #10b981;
    --cosmo-docente-enfasi-titolo: #059669;

    /* Persona scuola (= palette blu Cosmo; token per scope esplicito) */
    --cosmo-scuola-primario: #1d4ed8;
    --cosmo-scuola-primario-scuro: #1e3a8a;
    --cosmo-scuola-primario-chiaro: #3b82f6;
    --cosmo-scuola-enfasi-titolo: #2563eb;

    /* Errori e blocchi */
    --cosmo-errore: #DC2626;
    --cosmo-errore-scuro: #B91C1C;

    /* Neutri */
    --cosmo-bianco: #FFFFFF;
    --cosmo-grigio-100: #F9FAFB;
    --cosmo-grigio-200: #E5E7EB;
    --cosmo-grigio-300: #D1D5DB;
    --cosmo-grigio-400: #9CA3AF;
    --cosmo-grigio-500: #6B7280;
    --cosmo-grigio-700: #374151;
    --cosmo-nero: #111827;

    /* Tipografia */
    --cosmo-font-base: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --cosmo-font-titoli: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Bottoni mobile-first: tap target >= 44px */
    --cosmo-tap-target: 44px;
    --cosmo-radius: 0.5rem;
    --cosmo-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);

    /* Altezza approssimativa navbar collassata (sticky): usata dalla fascia hero scheda docente */
    --cosmo-site-header-offset: 3.75rem;

    /* Sistema 3 livelli card (pilota personalità visiva) */
    --cosmo-elev-1: 0 1px 3px rgba(17, 24, 39, 0.08);
    --cosmo-elev-2: 0 8px 22px rgba(29, 78, 216, 0.18);
    --cosmo-elev-3: 0 18px 48px rgba(17, 24, 39, 0.18);
    --cosmo-superficie-3: #F4F7FF;
    --cosmo-bordo-accent: var(--cosmo-primario);

    /* T28 — token derivati: nascono per riassorbire colori semitrasparenti
       cablati in più punti del tema/ delle viste. Non aggiungono colore:
       danno un nome stabile a ciò che il tema usa già. */
    --cosmo-focus-ring: rgba(29, 78, 216, 0.18);
    --cosmo-focus-ring-strong: rgba(29, 78, 216, 0.35);
    --cosmo-superficie-2-selezionata: #f8faff;
    --cosmo-hero-border: rgba(255, 255, 255, 0.35);
    --cosmo-hero-chip-bg: rgba(255, 255, 255, 0.12);
    --cosmo-hero-strip-bg: rgba(255, 255, 255, 0.92);
    --cosmo-shadow-strong: 0 18px 48px rgba(17, 24, 39, 0.18);

    /* Soft tint per gli alert Cosmo (sfondi coerenti con palette token) */
    --cosmo-alert-danger-bg: rgba(220, 38, 38, 0.08);
    --cosmo-alert-danger-border: rgba(220, 38, 38, 0.30);
    --cosmo-alert-success-bg: rgba(16, 185, 129, 0.10);
    --cosmo-alert-success-border: rgba(16, 185, 129, 0.35);
    --cosmo-alert-warning-bg: rgba(245, 158, 11, 0.12);
    --cosmo-alert-warning-border: rgba(245, 158, 11, 0.40);
    --cosmo-alert-info-bg: rgba(29, 78, 216, 0.08);
    --cosmo-alert-info-border: rgba(29, 78, 216, 0.30);

    /* Layering globale (evita collisioni menu mobile vs contenuti sticky). */
    --cosmo-z-header: 1030;
    --cosmo-z-sticky-content: 1020;
    --cosmo-z-offcanvas-backdrop: 1071;
    --cosmo-z-offcanvas: 1072;
}

@media (max-width: 575.98px) {
    :root {
        --cosmo-site-header-offset: 4rem;
    }
}

/* Ancore e focus: rispetta la barra sticky (variabile aggiornata da site.js quando c'è JS). */
html {
    scroll-padding-top: var(--cosmo-site-header-offset, 3.75rem);
}

/* Override Bootstrap mirati */
body {
    background-color: var(--cosmo-grigio-100);
    color: var(--cosmo-nero);
    font-family: var(--cosmo-font-base);
}

a {
    color: var(--cosmo-primario);
}

a:hover {
    color: var(--cosmo-primario-scuro);
}

.btn-primary,
.btn-cosmo-primario {
    background-color: var(--cosmo-primario);
    border-color: var(--cosmo-primario);
    color: var(--cosmo-bianco);
    min-height: var(--cosmo-tap-target);
    border-radius: var(--cosmo-radius);
    font-weight: 600;
}

.btn-primary:hover,
.btn-cosmo-primario:hover {
    background-color: var(--cosmo-primario-scuro);
    border-color: var(--cosmo-primario-scuro);
    color: var(--cosmo-bianco);
}

.btn-cosmo-arancio {
    background-color: var(--cosmo-accento-arancio);
    border-color: var(--cosmo-accento-arancio);
    color: var(--cosmo-nero);
    min-height: var(--cosmo-tap-target);
    border-radius: var(--cosmo-radius);
    font-weight: 600;
}

.btn-cosmo-arancio:hover {
    background-color: var(--cosmo-accento-arancio-scuro);
    border-color: var(--cosmo-accento-arancio-scuro);
    color: var(--cosmo-bianco);
}

.btn-cosmo-verde {
    background-color: var(--cosmo-accento-verde);
    border-color: var(--cosmo-accento-verde);
    color: var(--cosmo-bianco);
    min-height: var(--cosmo-tap-target);
    border-radius: var(--cosmo-radius);
    font-weight: 600;
}

.btn-cosmo-verde:hover {
    background-color: var(--cosmo-accento-verde-scuro);
    border-color: var(--cosmo-accento-verde-scuro);
    color: var(--cosmo-bianco);
}

/* Header sitewide: resta in vista durante lo scroll */
.cosmo-site-header {
    position: sticky;
    top: 0;
    z-index: var(--cosmo-z-header);
    background-color: var(--cosmo-bianco);
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08);
}

.navbar.cosmo-header {
    background-color: var(--cosmo-bianco);
    border-bottom: 2px solid var(--cosmo-primario);
    box-shadow: none;
}

/* Spazio sotto la navbar (equivalente all'ex mb-3 sulla nav) */
.cosmo-main-after-header {
    padding-top: 1rem;
}

.navbar.cosmo-header .navbar-brand,
.navbar.cosmo-header .nav-link {
    color: var(--cosmo-nero);
    font-weight: 600;
}

.navbar.cosmo-header .cosmo-navbar-brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--cosmo-tap-target);
    padding: 0.2rem 0;
    margin-right: 1.2rem;
    text-decoration: none;
}

.navbar.cosmo-header .cosmo-navbar-brand-logo {
    display: block;
    width: auto;
    height: clamp(28px, 3.3vw, 38px);
    max-width: min(44vw, 220px);
    object-fit: contain;
}

.navbar.cosmo-header .cosmo-navbar-brand:focus-visible {
    outline: 2px solid var(--cosmo-primario);
    outline-offset: 3px;
    border-radius: 0.35rem;
}

.navbar.cosmo-header .nav-link:hover {
    color: var(--cosmo-primario);
}

.navbar.cosmo-header .cosmo-main-nav-links {
    position: relative;
    align-items: center;
}

.navbar.cosmo-header .cosmo-main-nav-links .nav-link {
    position: relative;
    z-index: 1;
    border-radius: 999px;
    padding: 0.38rem 0.72rem;
    transition: color 0.22s ease, font-weight 0.22s ease;
}

.navbar-collapse .cosmo-main-nav-links::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--cosmo-nav-badge-w, 0px);
    height: var(--cosmo-nav-badge-h, 0px);
    transform: translate3d(var(--cosmo-nav-badge-x, 0px), var(--cosmo-nav-badge-y, 0px), 0);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.42) 100%);
    border: 1px solid rgba(29, 78, 216, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 4px rgba(17, 24, 39, 0.09);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s ease-out, width 0.24s ease-out, opacity 0.24s ease-out;
}

.navbar-collapse .cosmo-main-nav-links.has-active::before {
    opacity: 1;
}

.navbar.cosmo-header .cosmo-main-nav-links .nav-link.is-active {
    color: var(--cosmo-primario-scuro);
    font-weight: 700;
}

/* Menu mobile: pulsante hamburger con area tocco comoda */
.navbar.cosmo-header .cosmo-nav-toggler {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.5rem;
}

/* Pannello laterale menu (solo mobile; desktop usa #mainNavPanel) */
.cosmo-nav-offcanvas {
    /* Deve stare sopra stack sticky/filtri mobile globali (1046-1070). */
    --bs-offcanvas-zindex: var(--cosmo-z-offcanvas);
    --bs-offcanvas-width: min(22rem, 92vw);
    background: linear-gradient(180deg, var(--cosmo-superficie-3) 0%, var(--cosmo-bianco) 14%);
    border-right: 1px solid rgba(29, 78, 216, 0.22);
    box-shadow: var(--cosmo-elev-2);
}

/* Backdrop del menu mobile sopra i layer pagina, sotto il pannello offcanvas. */
.offcanvas-backdrop.show {
    z-index: var(--cosmo-z-offcanvas-backdrop);
}

.cosmo-nav-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 1rem 1.1rem;
    border-bottom: 1px solid rgba(29, 78, 216, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 247, 255, 0.98) 100%);
}

.cosmo-nav-drawer__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.cosmo-nav-drawer__brand-mark {
    flex-shrink: 0;
    line-height: 0;
    border-radius: 0.35rem;
}

.cosmo-nav-drawer__brand-mark:focus-visible {
    outline: 2px solid var(--cosmo-primario);
    outline-offset: 2px;
}

.cosmo-nav-drawer__logo {
    display: block;
    height: clamp(26px, 7vw, 34px);
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.cosmo-nav-drawer__brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.cosmo-nav-drawer__brand-name {
    font-family: var(--cosmo-font-titoli);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--cosmo-primario-scuro);
    line-height: 1.2;
}

.cosmo-nav-drawer__brand-tagline {
    font-size: 0.78rem;
    color: var(--cosmo-grigio-500);
    line-height: 1.25;
}

.cosmo-nav-drawer__close {
    margin-top: 0.15rem;
    opacity: 0.72;
}

.cosmo-nav-drawer__body {
    background-color: var(--cosmo-bianco);
    min-height: 0;
}

.cosmo-nav-drawer__scroll {
    min-height: 0;
}

.cosmo-nav-drawer__foot {
    background: rgba(249, 250, 251, 0.92);
    margin-top: auto;
}

.cosmo-nav-drawer-welcome {
    border-radius: var(--cosmo-radius);
    border: 1px solid rgba(29, 78, 216, 0.14);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(244, 247, 255, 0.9));
    box-shadow: var(--cosmo-elev-1);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.cosmo-nav-drawer-welcome__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cosmo-primario-scuro);
}

.cosmo-nav-drawer-userchip {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: var(--cosmo-radius);
    border: 1px solid var(--cosmo-grigio-200);
    background: var(--cosmo-grigio-100);
}

.cosmo-nav-drawer-userchip__badge {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cosmo-bianco);
    background: linear-gradient(145deg, var(--cosmo-primario) 0%, var(--cosmo-primario-scuro) 100%);
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

.cosmo-nav-drawer-userchip__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cosmo-nav-drawer-userchip__name {
    font-weight: 600;
    color: var(--cosmo-nero);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cosmo-nav-drawer-section-label {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0 0.2rem;
}

.cosmo-nav-drawer-section-label:first-child {
    padding-top: 0;
}

/* Livello 1–2: Legale segue subito Area di lavoro senza “slot” verticale da sezione assente. */
.cosmo-nav-offcanvas .cosmo-main-nav-links .cosmo-nav-drawer-section-label.cosmo-nav-drawer-section-label--after-work {
    padding-top: 0.12rem;
}

.cosmo-nav-drawer-section-title {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cosmo-grigio-500);
}

.cosmo-nav-tecnico-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: calc(var(--cosmo-z-offcanvas, 1050) + 2);
    margin-top: 0;
    border: 1px solid rgba(29, 78, 216, 0.18);
    border-radius: var(--cosmo-radius);
    padding: 0.35rem;
    min-width: 10.5rem;
    pointer-events: none;
}

.cosmo-nav-tecnico-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.35rem;
    vertical-align: 0.2em;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
    color: currentColor;
    opacity: 0.65;
}

@media (min-width: 576px) {
    .cosmo-nav-tecnico:hover .cosmo-nav-tecnico-dropdown,
    .cosmo-nav-tecnico:focus-within .cosmo-nav-tecnico-dropdown {
        display: block;
        pointer-events: auto;
    }

    .cosmo-nav-tecnico-collapse {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .cosmo-nav-tecnico-dropdown {
        display: none !important;
    }
}

.cosmo-nav-tecnico-dropdown .dropdown-item {
    border-radius: calc(var(--cosmo-radius) - 2px);
    font-weight: 600;
    padding: 0.45rem 0.75rem;
}

.cosmo-nav-tecnico-dropdown .dropdown-item:hover,
.cosmo-nav-tecnico-dropdown .dropdown-item:focus {
    background-color: rgba(29, 78, 216, 0.08);
    color: var(--cosmo-primario-scuro);
}

.cosmo-nav-tecnico-dropdown .cosmo-nav-tecnico-sub-link.is-active,
.cosmo-nav-tecnico-dropdown .cosmo-nav-tecnico-sub-link:active {
    background-color: rgba(29, 78, 216, 0.12);
    color: var(--cosmo-primario-scuro);
}

.cosmo-nav-offcanvas .cosmo-nav-tecnico-collapse-links {
    padding: 0.15rem 0 0.35rem 0.35rem;
    border-left: 2px solid rgba(29, 78, 216, 0.16);
    margin-left: 0.65rem;
}

.cosmo-nav-offcanvas .cosmo-nav-tecnico-collapse-links .cosmo-nav-drawer-link {
    padding: 0.45rem 0.65rem;
    min-height: var(--cosmo-tap-target);
}

.cosmo-nav-offcanvas .cosmo-nav-tecnico-toggle[data-bs-toggle="collapse"] .cosmo-nav-drawer-link__chev .cosmo-icon {
    transition: transform 0.2s ease;
}

.cosmo-nav-offcanvas .cosmo-nav-tecnico-toggle[aria-expanded="true"] .cosmo-nav-drawer-link__chev .cosmo-icon {
    transform: rotate(180deg);
}

.cosmo-header .cosmo-nav-tecnico.dropdown {
    position: relative;
}

.cosmo-header .cosmo-nav-tecnico-toggle--desktop {
    cursor: default;
}

.cosmo-nav-drawer-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-decoration: none;
    border-radius: var(--cosmo-radius);
}

.cosmo-nav-drawer-link__label {
    flex: 1 1 auto;
    min-width: 0;
}

.cosmo-nav-drawer-link__chev {
    flex-shrink: 0;
    opacity: 0.35;
}

.cosmo-nav-drawer-link__icon .cosmo-icon,
.cosmo-nav-drawer-link__chev .cosmo-icon {
    display: block;
    color: var(--cosmo-primario);
}

.cosmo-nav-offcanvas .cosmo-nav-panel-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-height: 0;
    flex: 1 1 auto;
}

.cosmo-nav-offcanvas .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.cosmo-nav-offcanvas .cosmo-main-nav-links {
    margin-bottom: 0.35rem;
}

.cosmo-nav-offcanvas .cosmo-nav-login-list {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--cosmo-grigio-200);
}

.cosmo-nav-offcanvas .nav-link.cosmo-nav-drawer-link {
    padding: 0.55rem 0.65rem;
    min-height: var(--cosmo-tap-target);
}

.cosmo-nav-offcanvas .nav-link.cosmo-nav-drawer-link:hover {
    background-color: rgba(29, 78, 216, 0.06);
}

.cosmo-nav-offcanvas .nav-link.cosmo-nav-drawer-link.is-active {
    background: rgba(29, 78, 216, 0.11);
    border: 1px solid rgba(29, 78, 216, 0.18);
    color: var(--cosmo-primario-scuro);
    font-weight: 700;
}

.cosmo-nav-offcanvas .cosmo-nav-auth-cta {
    justify-content: center;
    font-weight: 700;
    color: var(--cosmo-bianco) !important;
    background: linear-gradient(180deg, var(--cosmo-primario-chiaro) 0%, var(--cosmo-primario) 55%, var(--cosmo-primario-scuro) 100%);
    border: 1px solid rgba(30, 58, 138, 0.35);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.28);
    margin-top: 0.35rem;
}

.cosmo-nav-offcanvas .cosmo-nav-auth-cta:hover {
    filter: brightness(1.03);
    background: linear-gradient(180deg, var(--cosmo-primario-chiaro) 0%, var(--cosmo-primario) 55%, var(--cosmo-primario-scuro) 100%);
}

.cosmo-nav-offcanvas .cosmo-nav-auth-cta .cosmo-icon {
    color: var(--cosmo-bianco);
}

.cosmo-nav-offcanvas .cosmo-nav-auth-cta .cosmo-nav-drawer-link__chev .cosmo-icon {
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
}

.cosmo-nav-offcanvas .cosmo-nav-logout-form {
    width: 100%;
    margin: 0;
}

.cosmo-nav-offcanvas .cosmo-nav-logout-form .nav-link.btn-link {
    color: var(--cosmo-nero);
}

.cosmo-nav-offcanvas .form-inline .nav-link.btn-link {
    padding: 0.55rem 0.65rem;
    text-align: left;
}

@media (min-width: 576px) {
    .cosmo-header .navbar-collapse .cosmo-nav-panel-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-grow: 1;
        width: 100%;
        gap: 0.5rem;
        min-width: 0;
    }

    .cosmo-header .navbar-collapse .cosmo-nav-login-list {
        flex-direction: row;
        align-items: center;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .cosmo-header .cosmo-nav-panel-inner .cosmo-nav-drawer-link__icon--mobile,
    .cosmo-header .cosmo-nav-panel-inner .cosmo-nav-drawer-link__chev {
        display: none !important;
    }

    .cosmo-header .cosmo-nav-panel-inner .cosmo-nav-drawer-link {
        display: inline-flex;
        width: auto;
        min-height: 0;
        padding: 0.38rem 0.72rem;
        gap: 0.25rem;
    }

    .cosmo-header .cosmo-nav-panel-inner .nav-link.cosmo-nav-drawer-link.is-active {
        border: none;
        background: transparent;
    }

    .cosmo-header .cosmo-nav-panel-inner .cosmo-nav-auth-cta {
        margin-top: 0;
        font-weight: 600;
        color: var(--cosmo-primario) !important;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0.38rem 0.72rem;
        border-radius: 999px;
    }

    .cosmo-header .cosmo-nav-panel-inner .cosmo-nav-auth-cta:hover {
        filter: none;
        background-color: rgba(29, 78, 216, 0.06);
    }

    .cosmo-header .cosmo-nav-panel-inner .cosmo-nav-auth-cta .cosmo-icon {
        color: var(--cosmo-primario);
    }

    .cosmo-header .cosmo-nav-panel-inner .cosmo-nav-logout-form .nav-link.cosmo-nav-drawer-link {
        padding-left: 0;
        padding-right: 0;
    }

    .cosmo-header .cosmo-nav-tecnico-toggle--desktop.is-active {
        color: var(--cosmo-primario-scuro);
        font-weight: 700;
    }
}

@media (prefers-reduced-motion: reduce) {
    .offcanvas.cosmo-nav-offcanvas {
        transition: none !important;
    }

    .navbar-collapse .cosmo-main-nav-links::before,
    .navbar.cosmo-header .cosmo-main-nav-links .nav-link {
        transition: none !important;
    }
}

.cosmo-card {
    background: var(--cosmo-bianco);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: var(--cosmo-radius);
    box-shadow: var(--cosmo-shadow);
    padding: 1.25rem;
}

.cosmo-card-disabled {
    background: #f7f7f8;
    border-color: #d7d9de;
    color: #4b5563;
}

.cosmo-card-disabled h2,
.cosmo-card-disabled p {
    color: #4b5563;
}

.cosmo-btn-notifica {
    position: relative;
    padding-right: 1.8rem;
}

.cosmo-notifica-dot {
    position: absolute;
    top: 0.2rem;
    right: 0.28rem;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: #ef4444;
    border: 2px solid var(--cosmo-bianco);
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.18);
}

.cosmo-pratica-card {
    position: relative;
    padding-right: 3.5rem;
}

.cosmo-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: 999px;
    background: transparent;
    color: var(--cosmo-grigio-500);
    text-decoration: none;
    line-height: 1;
    font-size: 1.1rem;
}

.cosmo-icon-btn:hover {
    color: var(--cosmo-primario);
    border-color: var(--cosmo-primario);
}

.cosmo-icon-btn:focus-visible {
    color: var(--cosmo-primario);
    border-color: var(--cosmo-primario);
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--cosmo-focus-ring);
}

.cosmo-gestione-matita-btn {
    min-width: 1.75rem;
    min-height: 1.75rem;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Bootstrap modal-dialog-scrollable: il form deve partecipare al flex column (pattern Lista scuole). */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
}

.modal-dialog-scrollable .modal-content > form .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cosmo-profilo-azione-salva {
    color: var(--cosmo-verde-600, #198754);
    border-color: var(--cosmo-verde-200, #a3cfbb);
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cosmo-profilo-azione-salva:hover,
.cosmo-profilo-azione-salva:focus-visible {
    color: var(--cosmo-verde-700, #146c43);
    border-color: var(--cosmo-verde-600, #198754);
}

.cosmo-profilo-azione-annulla {
    color: var(--cosmo-rosso-600, #dc3545);
    border-color: var(--cosmo-rosso-200, #f1aeb5);
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cosmo-profilo-azione-annulla:hover,
.cosmo-profilo-azione-annulla:focus-visible {
    color: var(--cosmo-rosso-700, #b02a37);
    border-color: var(--cosmo-rosso-600, #dc3545);
}

.cosmo-profilo-sticky-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: #fff;
    border-top: 1px solid rgba(4, 120, 87, 0.18);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cosmo-profilo-sticky-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding-block: 0.65rem;
}

.cosmo-profilo-sticky-footer__text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cosmo-primario-scuro, #065f46);
}

.cosmo-profilo-sticky-footer__actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

body.cosmo-profilo-has-pending-edits {
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
}

body.cosmo-profilo-has-pending-edits footer.cosmo-footer {
    margin-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 575.98px) {
    .cosmo-icon-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

.cosmo-gear-btn {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
}

.cosmo-back-btn {
    margin-left: 0.25rem;
}

/* Stesso «stampo» visivo della card hero blu nelle liste (T30 coerenza tra pagine). */
.cosmo-hero {
    background: linear-gradient(135deg, var(--cosmo-primario) 0%, var(--cosmo-primario-chiaro) 100%);
    color: var(--cosmo-bianco);
    border: none;
    border-radius: var(--cosmo-radius);
    box-shadow: var(--cosmo-elev-2);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.25rem;
    overflow: visible;
}

.cosmo-hero-brand {
    display: inline-flex;
    align-items: center;
    max-width: min(100%, 560px);
    background: var(--cosmo-hero-chip-bg);
    border: 1px solid var(--cosmo-hero-border);
    border-radius: 0.75rem;
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.85rem;
}

.cosmo-hero-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(38px, 5vw, 64px);
    object-fit: contain;
}

.cosmo-hero-tagline {
    max-width: 44rem;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.45;
    opacity: 1;
}

.cosmo-hero h1 {
    color: var(--cosmo-bianco);
    font-weight: 700;
    margin-bottom: 0.35rem;
}

@media (max-width: 576px) {
    .cosmo-hero-brand {
        padding: 0.45rem 0.6rem;
        border-radius: 0.6rem;
    }
}

.cosmo-tag {
    display: inline-block;
    background: var(--cosmo-grigio-200);
    color: var(--cosmo-nero);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.cosmo-badge {
    display: inline-block;
    background: var(--cosmo-primario);
    color: var(--cosmo-bianco);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.cosmo-tag.cosmo-tag-verde {
    background: var(--cosmo-accento-verde);
    color: var(--cosmo-bianco);
}

.cosmo-tag.cosmo-tag-arancio {
    background: var(--cosmo-accento-arancio);
    color: var(--cosmo-nero);
}

.cosmo-tag.cosmo-tag-soft {
    background: var(--cosmo-grigio-100, #f3f4f6);
    color: var(--cosmo-nero);
    font-weight: 500;
}

/* Form: campi grandi su mobile */
.form-control,
.form-select {
    min-height: var(--cosmo-tap-target);
    border-radius: var(--cosmo-radius);
    border-color: var(--cosmo-grigio-200);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cosmo-primario);
    box-shadow: 0 0 0 0.2rem var(--cosmo-focus-ring);
}

.cosmo-required-label::after {
    content: " *";
    color: var(--cosmo-errore);
    font-weight: 700;
}

.cosmo-form .form-control.is-invalid,
.cosmo-form .form-select.is-invalid {
    border-color: var(--cosmo-errore);
}

.cosmo-form .form-control.is-invalid:focus,
.cosmo-form .form-select.is-invalid:focus {
    border-color: var(--cosmo-errore);
    box-shadow: 0 0 0 0.2rem var(--cosmo-alert-danger-bg);
}

.cosmo-form .form-control.is-valid,
.cosmo-form .form-select.is-valid {
    border-color: var(--cosmo-accento-verde);
}

.cosmo-form .form-control.is-valid:focus,
.cosmo-form .form-select.is-valid:focus {
    border-color: var(--cosmo-accento-verde);
    box-shadow: 0 0 0 0.2rem var(--cosmo-alert-success-bg);
}

.cosmo-form .form-control.is-valid {
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2310B981' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m4.5 10.4 3.6 3.7 7.4-7.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    background-position: right 0.7rem center;
}

.invalid-feedback {
    color: var(--cosmo-errore);
    font-weight: 600;
}

.cosmo-form fieldset {
    background: var(--cosmo-bianco);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: var(--cosmo-radius);
    padding: 1rem;
}

.cosmo-form fieldset + fieldset {
    margin-top: 1rem;
}

.cosmo-form legend {
    width: auto;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

/* T36 corridoio: CTA invio sempre a portata di pollice su moduli lunghi (sticky in viewport). */
.cosmo-corridor-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    margin-top: 1.5rem;
    padding: 0.75rem 0 1rem;
    background: var(--cosmo-bianco);
    border-top: 1px solid var(--cosmo-grigio-200);
    box-shadow: 0 -6px 18px rgba(17, 24, 39, 0.07);
}

.cosmo-filters-panel {
    background: var(--cosmo-bianco);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: var(--cosmo-radius);
    box-shadow: var(--cosmo-shadow);
}

.cosmo-filters-body {
    padding: 1rem;
}

.cosmo-filters-body .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cosmo-grigio-700);
}

.cosmo-applied-filters {
    background: var(--cosmo-bianco);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: var(--cosmo-radius);
    box-shadow: var(--cosmo-shadow);
    padding: 0.75rem 1rem;
}

.cosmo-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--cosmo-grigio-100);
    border: 1px solid var(--cosmo-grigio-200);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cosmo-nero);
}

/* Paginazione Bootstrap: con molti numeri (es. elenco docenti carico) la fila non deve
   forzare scroll orizzontale su schermo stretto */
.pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.35rem;
}

footer.cosmo-footer {
    color: var(--cosmo-grigio-500);
    border-top: 1px solid var(--cosmo-grigio-200);
    padding: 1rem 0;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    background-color: var(--cosmo-bianco);
}

/* Link legali in footer: etichetta distinta dal menu + area tocco comoda su mobile */
footer.cosmo-footer .cosmo-footer-legal-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--cosmo-tap-target);
    padding: 0.25rem 0.35rem;
    margin: -0.25rem -0.35rem;
    font-weight: 600;
    color: var(--cosmo-primario);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

footer.cosmo-footer .cosmo-footer-legal-link:hover {
    color: var(--cosmo-primario-scuro);
}

footer.cosmo-footer .cosmo-footer-legal-link:focus-visible {
    outline: 2px solid var(--cosmo-primario);
    outline-offset: 3px;
    border-radius: 0.25rem;
}

/* -------------------------------------------------------------------------
   Home ospiti — ingresso docente / scuola (mockup bianco, card orizzontali)
   ------------------------------------------------------------------------- */

/* Home ospiti: sfondo bianco; card con accenti blu/teal propri (nessuna classe persona su body). */
body.cosmo-page-home-guest {
    background-color: var(--cosmo-bianco);
}

/* Persona docente: remap variabili consumate da link, navbar, bottoni primari, hero card, focus ring */
/* Collaborazioni docente: lista scuole, fase conferma con card in basso */
.cosmo-collab-richiesta-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cosmo-collab-scuole-scroll {
    flex: 1 1 auto;
    max-height: min(52vh, 28rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.15rem;
}

.cosmo-collab-scuola-card {
    border: 1px solid var(--cosmo-bordo-chiaro, #e5e7eb);
    background-color: var(--cosmo-bianco, #fff);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cosmo-collab-scuola-card:hover:not(.cosmo-collab-scuola-card--disabilitata),
.cosmo-collab-scuola-card:focus-visible {
    border-color: var(--cosmo-docente-primario, #047857);
    box-shadow: 0 0 0 0.15rem var(--cosmo-focus-ring, rgba(4, 120, 87, 0.22));
    outline: none;
}

.cosmo-collab-scuola-card--bloccata {
    cursor: pointer;
}

.cosmo-collab-scuola-card--disabilitata,
.cosmo-collab-scuola-card-static {
    cursor: default;
    opacity: 0.75;
}

.cosmo-collab-scuola-card--selezionata {
    border-color: var(--cosmo-docente-primario, #047857);
    box-shadow: 0 0 0 0.1rem var(--cosmo-focus-ring, rgba(4, 120, 87, 0.22));
}

.cosmo-collab-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cosmo-collab-body--conferma {
    min-height: min(70vh, 32rem);
    min-height: min(70dvh, 32rem);
}

.cosmo-collab-richiesta--conferma .cosmo-collab-scuole-scroll {
    flex: 1 1 auto;
    max-height: none;
    overflow: hidden;
}

.cosmo-collab-slot-selezionata {
    flex: 0 0 auto;
    margin-top: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.cosmo-collab-panel {
    flex: 0 0 auto;
}

body.cosmo-page-docente {
    --cosmo-primario: var(--cosmo-docente-primario);
    --cosmo-primario-scuro: var(--cosmo-docente-primario-scuro);
    --cosmo-primario-chiaro: var(--cosmo-docente-primario-chiaro);
    --cosmo-primario-enfasi-titolo: var(--cosmo-docente-enfasi-titolo);
    --cosmo-bordo-accent: var(--cosmo-docente-primario);
    --cosmo-focus-ring: rgba(4, 120, 87, 0.22);
    --cosmo-focus-ring-strong: rgba(4, 120, 87, 0.45);
    --bs-primary: #047857;
    --bs-primary-rgb: 4, 120, 87;
    --bs-link-color: #047857;
    --bs-link-hover-color: #065f46;
}

/* Persona scuola: blu Cosmo (allineato al default :root; utile se il brand base cambia) */
body.cosmo-page-scuola {
    --cosmo-primario: var(--cosmo-scuola-primario);
    --cosmo-primario-scuro: var(--cosmo-scuola-primario-scuro);
    --cosmo-primario-chiaro: var(--cosmo-scuola-primario-chiaro);
    --cosmo-primario-enfasi-titolo: var(--cosmo-scuola-enfasi-titolo);
    --cosmo-bordo-accent: var(--cosmo-scuola-primario);
    --cosmo-focus-ring: rgba(29, 78, 216, 0.22);
    --cosmo-focus-ring-strong: rgba(29, 78, 216, 0.38);
    --bs-primary: #1d4ed8;
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color: #1d4ed8;
    --bs-link-hover-color: #1e3a8a;
}

.cosmo-footer-home-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: var(--cosmo-grigio-500);
    font-size: 0.9rem;
}

.cosmo-footer-home-stack .cosmo-footer-legal-link {
    margin: 0;
}

.cosmo-home-guest {
    padding-bottom: 0.25rem;
}

.cosmo-home-guest-title {
    margin: 0 0 1.35rem;
    font-family: var(--cosmo-font-titoli);
    font-size: clamp(1.45rem, 4.6vw, 2.05rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--cosmo-primario-scuro);
    letter-spacing: -0.02em;
    text-align: center;
}

.cosmo-home-guest-title .cosmo-home-guest-row {
    display: block;
    text-align: center;
}

.cosmo-home-guest-title .cosmo-home-guest-row1::after {
    content: "";
}

.cosmo-home-guest-em {
    color: var(--cosmo-primario-enfasi-titolo);
    font-weight: 700;
}

@media (min-width: 992px) {
    .cosmo-home-guest-title .cosmo-home-guest-row {
        display: inline;
        text-align: inherit;
    }

    .cosmo-home-guest-title .cosmo-home-guest-row1::after {
        content: " ";
    }
}

.cosmo-home-path-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--cosmo-bianco);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: 0.85rem;
    box-shadow: var(--cosmo-elev-2);
    overflow: hidden;
    min-height: 5.5rem;
}

a.cosmo-home-path-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

a.cosmo-home-path-card:hover {
    border-color: var(--cosmo-grigio-300);
    box-shadow: var(--cosmo-elev-3);
}

a.cosmo-home-path-card:focus {
    outline: none;
}

a.cosmo-home-path-card:focus-visible {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 0.2rem var(--cosmo-focus-ring);
}

a.cosmo-home-path-card:hover .cosmo-home-path-point-chevron {
    opacity: 1;
    color: var(--cosmo-primario);
}

a.cosmo-home-path-card--docente:hover .cosmo-home-path-point-chevron {
    color: var(--cosmo-docente-primario);
}

a.cosmo-home-path-card--scuola:hover .cosmo-home-path-point-chevron {
    color: var(--cosmo-scuola-primario-scuro);
}

.cosmo-home-path-accent {
    width: 6px;
    flex-shrink: 0;
}

.cosmo-home-path-card--docente .cosmo-home-path-accent {
    background: var(--cosmo-docente-primario-chiaro);
}

.cosmo-home-path-card--scuola .cosmo-home-path-accent {
    background: var(--cosmo-scuola-primario-chiaro);
}

.cosmo-home-path-card--azioni .cosmo-home-path-accent {
    background: var(--cosmo-grigio-400);
}

.cosmo-home-path-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.75rem 1rem 1rem 0.85rem;
    min-width: 0;
}

.cosmo-home-path-title {
    margin: 0;
    width: 100%;
    font-size: clamp(1.12rem, 2.4vw, 1.35rem);
    font-weight: 600;
    line-height: 1.28;
    color: var(--cosmo-primario-scuro);
    text-align: center;
    letter-spacing: -0.015em;
}

.cosmo-percorso-profilo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cosmo-percorso-profilo-title {
    margin: 0;
    text-align: center;
    font-size: clamp(2rem, 6vw, 2.55rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cosmo-primario-scuro);
}

.cosmo-percorso-profilo .cosmo-home-path-card {
    min-height: clamp(14rem, 38vh, 19rem);
}

.cosmo-percorso-profilo .cosmo-home-path-inner {
    padding-top: clamp(1.1rem, 3.2vw, 1.5rem);
    padding-bottom: clamp(0.95rem, 2.7vw, 1.2rem);
}

.cosmo-percorso-profilo .cosmo-home-path-icon {
    width: clamp(6.6rem, 32vw, 9rem);
    height: auto;
    aspect-ratio: 1;
}

.cosmo-percorso-profilo .cosmo-home-path-icon .cosmo-icon {
    --icon-size: clamp(84px, 24vw, 124px);
}

.cosmo-percorso-profilo .cosmo-home-path-title {
    font-size: clamp(2rem, 6vw, 2.35rem);
    margin-top: 0.2rem;
}

.cosmo-home-path-card--docente .cosmo-home-path-title {
    color: var(--cosmo-docente-primario-scuro);
}

.cosmo-home-path-card--scuola .cosmo-home-path-title {
    color: var(--cosmo-scuola-primario-scuro);
}

.cosmo-home-path-card--azioni .cosmo-home-path-title {
    color: var(--cosmo-grigio-700);
}

/* Icona principale: sotto il titolo, centrata */
.cosmo-home-path-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: clamp(4rem, 11vw, 5.25rem);
    height: clamp(4rem, 11vw, 5.25rem);
    flex: 0 0 auto;
    border-radius: 0;
    background: transparent;
    color: var(--cosmo-primario);
    border: none;
    box-shadow: none;
    opacity: 0.94;
}

.cosmo-home-path-card--scuola .cosmo-home-path-icon {
    color: var(--cosmo-scuola-primario);
    opacity: 0.98;
}

.cosmo-home-path-card--docente .cosmo-home-path-icon {
    color: var(--cosmo-docente-primario);
}

.cosmo-home-path-card--azioni .cosmo-home-path-icon {
    color: var(--cosmo-grigio-700);
}

.cosmo-home-path-icon .cosmo-icon {
    --icon-size: clamp(32px, 5vw, 42px);
}

.cosmo-home-path-desc {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--cosmo-primario-scuro);
}

/* Home ospiti: freccia in basso (card interamente link → Percorsi) */
.cosmo-home-path-continue {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.cosmo-home-path-points {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cosmo-home-path-points > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cosmo-home-path-point {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--cosmo-grigio-700);
}

a.cosmo-home-path-point-link {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--cosmo-tap-target);
    margin: 0 -0.35rem;
    padding: 0.35rem 0.45rem;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--cosmo-grigio-700);
    text-decoration: none;
    border: 1px solid transparent;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

a.cosmo-home-path-point-link:hover {
    background: var(--cosmo-grigio-100);
    color: var(--cosmo-primario-scuro);
}

a.cosmo-home-path-point-link:focus-visible {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 0.2rem var(--cosmo-focus-ring);
}

.cosmo-home-path-card--scuola a.cosmo-home-path-point-link:hover {
    color: var(--cosmo-scuola-primario-scuro);
}

.cosmo-home-path-point-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.88;
    color: var(--cosmo-primario-chiaro);
}

.cosmo-home-path-card--scuola .cosmo-home-path-point-chevron {
    color: var(--cosmo-scuola-primario);
    opacity: 0.9;
}

.cosmo-home-path-card--docente .cosmo-home-path-point-chevron {
    color: var(--cosmo-docente-primario);
}

.cosmo-home-path-card--azioni .cosmo-home-path-point-chevron {
    color: var(--cosmo-grigio-700);
}

.cosmo-home-path-point-link:hover .cosmo-home-path-point-chevron {
    opacity: 1;
    color: var(--cosmo-primario);
}

.cosmo-home-path-card--scuola .cosmo-home-path-point-link:hover .cosmo-home-path-point-chevron {
    color: var(--cosmo-scuola-primario-scuro);
}

a.cosmo-home-path-card--azioni:hover .cosmo-home-path-point-chevron {
    color: var(--cosmo-grigio-700);
    opacity: 1;
}

.cosmo-dashboard-scuole .cosmo-percorso-profilo-title {
    font-size: clamp(1.35rem, 4.8vw, 1.8rem);
}

.cosmo-home-path-point-chevron .cosmo-icon {
    --icon-size: 20px;
}

.cosmo-home-path-point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.45rem;
    background: rgba(29, 78, 216, 0.08);
    color: var(--cosmo-primario-chiaro);
}

.cosmo-home-path-card--scuola .cosmo-home-path-point-icon {
    background: rgba(59, 130, 246, 0.12);
    color: var(--cosmo-scuola-primario);
}

.cosmo-home-path-card--docente .cosmo-home-path-point-icon {
    background: rgba(16, 185, 129, 0.14);
    color: var(--cosmo-docente-primario);
}

.cosmo-home-path-point-icon .cosmo-icon {
    --icon-size: 19px;
}

.cosmo-home-path-point-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    a.cosmo-home-path-point-link,
    a.cosmo-home-path-card {
        transition: none;
    }
}

/* Home ospiti: mobile — card a altezza contenuto, icona proporzionata, lista sempre visibile */
@media (max-width: 991.98px) {
    .cosmo-home-guest-cards.row {
        flex-direction: column;
        flex-wrap: nowrap;
        min-height: 0;
    }

    .cosmo-home-guest-cards > [class*="col-"] {
        display: flex;
        flex: 0 1 auto;
        min-height: 0;
    }

    .cosmo-home-path-card {
        width: 100%;
        min-height: 0;
        height: auto;
    }

    .cosmo-home-path-inner {
        align-items: stretch;
        gap: clamp(0.35rem, 2vw, 0.55rem);
        padding: clamp(0.85rem, 3vw, 1.2rem) clamp(0.95rem, 3vw, 1.15rem) clamp(0.85rem, 3vw, 1.15rem)
            clamp(0.75rem, 2.5vw, 1rem);
    }

    .cosmo-home-path-icon {
        width: clamp(6.5rem, 38vw, 10rem);
        height: auto;
        aspect-ratio: 1;
        max-height: min(32vh, 11rem);
        max-width: min(42vw, 10rem);
        align-self: center;
        flex-shrink: 0;
        opacity: 0.94;
    }

    .cosmo-home-path-icon .cosmo-icon {
        --icon-size: clamp(72px, min(28vw, 22vh), 112px);
    }

    .cosmo-home-path-card--scuola .cosmo-home-path-icon .cosmo-icon {
        --icon-size: clamp(64px, min(25vw, 20vh), 100px);
    }

    .cosmo-home-path-title {
        margin-bottom: 0.15rem;
        font-size: clamp(1.12rem, 3.8vw, 1.32rem);
        font-weight: 600;
    }

    .cosmo-percorso-profilo-title {
        font-size: clamp(1.9rem, 9vw, 2.35rem);
    }

    .cosmo-percorso-profilo .cosmo-home-path-title {
        font-size: clamp(2rem, 8.6vw, 2.35rem);
    }

    .cosmo-percorso-profilo .cosmo-home-path-icon {
        width: clamp(7rem, 36vw, 9rem);
    }

    .cosmo-percorso-profilo .cosmo-home-path-icon .cosmo-icon {
        --icon-size: clamp(88px, 23vw, 124px);
    }

    .cosmo-home-path-points {
        gap: 0.45rem;
        flex-shrink: 0;
    }

    .cosmo-home-path-continue {
        flex-shrink: 0;
    }

    a.cosmo-home-path-point-link {
        font-size: clamp(0.86rem, 2.9vw, 0.95rem);
    }

    .cosmo-home-path-point-icon {
        width: clamp(1.85rem, 5.5vw, 2.15rem);
        height: clamp(1.85rem, 5.5vw, 2.15rem);
    }

    .cosmo-home-path-point-icon .cosmo-icon {
        --icon-size: clamp(18px, 4.5vw, 22px);
    }

    .cosmo-home-path-point-chevron .cosmo-icon {
        --icon-size: clamp(19px, 4.2vw, 22px);
    }
}

/* Home ospiti: due colonne — icona flat, dimensioni moderate */
@media (min-width: 992px) {
    .cosmo-home-path-inner {
        align-items: center;
    }

    .cosmo-percorso-profilo {
        gap: 1.2rem;
    }

    .cosmo-percorso-profilo-title {
        font-size: clamp(2.2rem, 3vw, 2.8rem);
    }

    .cosmo-percorso-profilo .cosmo-home-path-title {
        font-size: clamp(2.05rem, 2.4vw, 2.45rem);
    }

    .cosmo-home-path-icon {
        width: clamp(4.25rem, 12vw, 5.5rem);
        height: clamp(4.25rem, 12vw, 5.5rem);
        opacity: 1;
    }

    .cosmo-home-path-icon .cosmo-icon {
        --icon-size: clamp(36px, 4.5vw, 48px);
    }

    .cosmo-home-path-card--scuola .cosmo-home-path-icon .cosmo-icon {
        --icon-size: clamp(34px, 4.2vw, 44px);
    }

    .cosmo-home-path-points {
        gap: 0.4rem;
    }

    a.cosmo-home-path-point-link {
        font-size: 0.87rem;
    }
}

@media (max-width: 575.98px) {
    .navbar.cosmo-header .cosmo-navbar-brand {
        margin-right: 0.5rem;
        padding: 0.1rem 0;
    }

    .navbar.cosmo-header .cosmo-navbar-brand-logo {
        height: 30px;
        max-width: min(62vw, 190px);
    }

    .navbar.cosmo-header .navbar-nav .nav-link {
        min-height: var(--cosmo-tap-target);
        display: flex;
        align-items: center;
    }
}

/* Evita zoom automatico iOS al focus: campi floating a 16px */
@media (max-width: 575.98px) {
    .form-floating > .form-control,
    .form-floating > .form-select {
        font-size: 16px;
    }
}

.cosmo-multigiorno {
    position: relative;
}

.cosmo-multigiorno-trigger {
    list-style: none;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cosmo-multigiorno-trigger::-webkit-details-marker {
    display: none;
}

.cosmo-multigiorno-panel {
    position: absolute;
    z-index: 20;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.75rem;
    background: var(--cosmo-bianco);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: var(--cosmo-radius);
    box-shadow: var(--cosmo-shadow);
}

.cosmo-multigiorno-list {
    max-height: 12rem;
    overflow: auto;
}

.cosmo-multigiorno .form-check {
    margin-bottom: 0.35rem;
}

.cosmo-checkcard {
    position: relative;
    margin-bottom: 0.35rem;
}

.cosmo-checkcard-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cosmo-checkcard-label {
    display: block;
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: 0.45rem;
    background: var(--cosmo-bianco);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    user-select: none;
}

.cosmo-checkcard-input:checked + .cosmo-checkcard-label {
    background: var(--cosmo-superficie-2-selezionata);
    border-color: var(--cosmo-primario);
    color: var(--cosmo-primario-scuro);
    font-weight: 600;
}

.cosmo-checkcard-input:focus-visible + .cosmo-checkcard-label {
    outline: 2px solid var(--cosmo-focus-ring-strong);
    outline-offset: 1px;
}

.cosmo-checkcard.is-invalid .cosmo-checkcard-label {
    border-color: var(--cosmo-errore);
    box-shadow: 0 0 0 0.12rem var(--cosmo-alert-danger-bg);
    color: var(--cosmo-errore);
}

.cosmo-cv-upload input.visually-hidden.is-invalid ~ label[for="cvFile"] {
    border-color: var(--cosmo-errore);
    color: var(--cosmo-errore);
}

.cosmo-multigiorno-actions {
    display: flex;
    justify-content: flex-end;
}

.cosmo-giorno-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    border: 1px solid var(--cosmo-grigio-300);
    background: var(--cosmo-grigio-200);
    color: var(--cosmo-grigio-700);
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.15s ease-in-out;
}

.cosmo-giorno-submit.is-active {
    border-color: var(--cosmo-primario);
    background: var(--cosmo-primario);
    color: var(--cosmo-bianco);
    box-shadow: 0 0 0 0.12rem var(--cosmo-focus-ring);
}

.cosmo-giorno-submit:disabled {
    cursor: not-allowed;
}

.cosmo-giorno-submit:not(:disabled):hover {
    background: var(--cosmo-primario-scuro);
    border-color: var(--cosmo-primario-scuro);
    color: var(--cosmo-bianco);
}

.cosmo-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cosmo-tap-target);
    height: var(--cosmo-tap-target);
    border-radius: var(--cosmo-radius);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

#docenti-filtri-form .cosmo-icon-action {
    width: 2.5rem;
    height: 2.5rem;
}

#docenti-filtri-form.is-submitting .cosmo-icon-action-primary {
    opacity: 0.75;
    pointer-events: none;
}

#scuole-risultati-region[aria-busy="true"] {
    opacity: 0.6;
    transition: opacity 0.15s ease-in-out;
}

.cosmo-docenti-filtri-feedback {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.cosmo-docenti-filtri-feedback.is-info {
    color: var(--cosmo-primario-scuro);
}

.cosmo-docenti-filtri-feedback.is-pending {
    color: var(--cosmo-grigio-700);
}

.cosmo-docenti-active-rows {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    margin-top: 0.35rem;
}

.cosmo-docenti-active-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.cosmo-docenti-active-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 1.52rem;
    max-width: 100%;
    padding: 0.18rem 0.5rem 0.22rem;
    border-radius: 999px;
    border: 1px solid var(--cosmo-grigio-300);
    background: var(--cosmo-grigio-100);
    color: var(--cosmo-grigio-700);
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 1rem;
}

.cosmo-docenti-active-chip-x {
    position: absolute;
    right: 0.06rem;
    bottom: 0.02rem;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cosmo-bianco);
    background: var(--cosmo-errore);
}

.cosmo-docenti-active-chip--giorno {
    border-color: rgba(220, 38, 38, 0.26);
}

.cosmo-docenti-active-chip.cosmo-docenti-active-chip--readonly {
    padding-right: 0.5rem;
    cursor: default;
}

@media (min-width: 768px) {
    .cosmo-docenti-active-rows {
        display: none;
    }

    .cosmo-docenti-active-rows.cosmo-docenti-active-rows--readonly {
        display: flex;
        margin-top: 0;
    }
}

/* Lista docenti — filtri a striscia orizzontale + dropdown (solo < md, 768px) */
@media (max-width: 767.98px) {
    /* Striscia sopra l’overlay oscurante così le pill restano tappabili */
    #docenti-filtri-form .cosmo-docenti-filtri-row {
        position: relative;
        z-index: 1053;
        background: var(--cosmo-bianco);
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        flex-wrap: nowrap !important;
        gap: 0.5rem;
        row-gap: 0.5rem;
        padding-bottom: 0.35rem;
        margin-bottom: 0;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }

    #docenti-filtri-form .cosmo-docenti-filtri-row > .cosmo-docenti-filter-cell,
    #docenti-filtri-form .cosmo-docenti-filtri-row > .cosmo-docenti-filter-actions {
        flex: 0 0 auto;
        width: auto !important;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    #docenti-filtri-form .cosmo-docenti-filter-cell .cosmo-docenti-filter-dd,
    #docenti-filtri-form .cosmo-docenti-filter-cell #giorno-picker {
        width: max-content;
        max-width: min(88vw, 20rem);
    }

    #docenti-filtri-form .cosmo-docenti-filter-actions {
        min-width: 0;
        align-self: flex-end;
        padding-bottom: 0.15rem;
    }

    #docenti-filtri-form .cosmo-docenti-filter-giorno-desktop-label {
        display: none;
    }

    #docenti-filtri-form .cosmo-docenti-filter-dd > summary.cosmo-docenti-filter-pill {
        list-style: none;
        cursor: pointer;
        user-select: none;
        touch-action: manipulation;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        max-width: 100%;
        min-height: var(--cosmo-tap-target);
        padding: 0.35rem 0.65rem;
        margin: 0;
        border-radius: 999px;
        border: 1px solid var(--cosmo-grigio-300);
        background: var(--cosmo-grigio-100);
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--cosmo-nero);
        box-shadow: none;
    }

    #docenti-filtri-form .cosmo-docenti-filter-dd > summary.cosmo-docenti-filter-pill::-webkit-details-marker {
        display: none;
    }

    #docenti-filtri-form .cosmo-docenti-filter-pill-k {
        flex-shrink: 0;
        color: var(--cosmo-grigio-600);
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    #docenti-filtri-form .cosmo-docenti-filter-pill-v {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        font-weight: 700;
        color: var(--cosmo-nero);
    }

    #docenti-filtri-form .cosmo-docenti-filter-pill-v:empty,
    #docenti-filtri-form .cosmo-giorno-summary-val:empty {
        display: none;
    }

    #docenti-filtri-form .cosmo-docenti-filter-panel-label {
        display: none;
    }

    /* Pannello ancorato sotto la pill via JS (position: fixed + top/left/width) */
    #docenti-filtri-form .cosmo-docenti-filter-dd-panel {
        z-index: 1065;
        padding: 0.5rem 0.65rem 0.65rem;
        background: var(--cosmo-bianco);
        border: 1px solid var(--cosmo-grigio-300);
        border-top: none;
        border-radius: 0 0 0.85rem 0.85rem;
        box-shadow: 0 10px 28px rgba(17, 24, 39, 0.16);
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
    }

    #docenti-filtri-form .cosmo-docenti-filter-dd[open] > summary.cosmo-docenti-filter-pill {
        border-bottom-left-radius: 0.35rem;
        border-bottom-right-radius: 0.35rem;
        border-bottom-color: transparent;
        box-shadow: none;
    }

    /* Select resta nel DOM per GET ma non è il controllo visivo (lista pulsanti sotto). */
    #docenti-filtri-form .cosmo-docenti-filter-dd-panel .form-select {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
        appearance: none !important;
    }

    #docenti-filtri-form .cosmo-docenti-filter-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
        -webkit-user-select: none;
        user-select: none;
    }

    #docenti-filtri-form .cosmo-docenti-filter-mobile-opt {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0.55rem 0.6rem;
        text-align: left;
        font-size: 0.95rem;
        font-weight: 500;
        line-height: 1.25;
        color: var(--cosmo-nero);
        background: var(--cosmo-grigio-100);
        border: 1px solid transparent;
        border-radius: 0.45rem;
        cursor: pointer;
        touch-action: manipulation;
        min-height: 2.65rem;
        transition: background-color 0.12s ease, border-color 0.12s ease;
    }

    #docenti-filtri-form .cosmo-docenti-filter-mobile-opt:focus-visible {
        outline: 2px solid var(--cosmo-focus-ring-strong);
        outline-offset: 1px;
    }

    #docenti-filtri-form .cosmo-docenti-filter-mobile-opt.is-selected {
        background: rgba(37, 99, 235, 0.12);
        border-color: var(--cosmo-primario);
        color: var(--cosmo-primario-scuro);
        font-weight: 700;
    }

    #docenti-filtri-form #giorno-picker .cosmo-multigiorno-actions--panel-done {
        justify-content: flex-end;
    }

    #docenti-filtri-form #giorno-picker .cosmo-multigiorno-actions--panel-done .btn {
        touch-action: manipulation;
    }

    #docenti-filtri-form .cosmo-docenti-filter-dd-overlay {
        position: fixed;
        inset: 0;
        z-index: 1048;
        background: rgba(17, 24, 39, 0.38);
        cursor: pointer;
    }

    #docenti-filtri-form #giorno-picker > summary.cosmo-multigiorno-trigger.cosmo-docenti-filter-pill--giorno {
        width: auto;
        max-width: 100%;
        appearance: none;
        -webkit-appearance: none;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        border: 1px solid var(--cosmo-grigio-300);
        background-color: var(--cosmo-grigio-100);
        background-image: none;
        padding: 0.35rem 0.65rem;
        min-height: var(--cosmo-tap-target);
        font-size: 0.82rem;
        font-weight: 600;
        box-shadow: none;
        list-style: none;
        cursor: pointer;
        user-select: none;
        touch-action: manipulation;
    }

    #docenti-filtri-form #giorno-picker > summary.cosmo-multigiorno-trigger::-webkit-details-marker {
        display: none;
    }

    #docenti-filtri-form #giorno-picker .cosmo-docenti-filter-pill-k--giorno {
        flex-shrink: 0;
    }

    #docenti-filtri-form #giorno-picker .cosmo-multigiorno-panel {
        margin-top: 0;
        overflow: auto;
        z-index: 1070;
        padding: 0.5rem 0.65rem 0.65rem;
        background: var(--cosmo-bianco);
        border: 1px solid var(--cosmo-grigio-300);
        border-top: none;
        border-radius: 0 0 0.85rem 0.85rem;
        box-shadow: 0 10px 28px rgba(17, 24, 39, 0.16);
        box-sizing: border-box;
    }

    #docenti-filtri-form #giorno-picker[open] > summary.cosmo-multigiorno-trigger.cosmo-docenti-filter-pill--giorno {
        border-bottom-left-radius: 0.35rem;
        border-bottom-right-radius: 0.35rem;
        border-bottom-color: transparent;
        box-shadow: none;
    }

    #scuole-filtri-form .cosmo-docenti-filtri-row {
        position: relative;
        z-index: 1053;
        background: var(--cosmo-bianco);
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        flex-wrap: nowrap !important;
        gap: 0.5rem;
        row-gap: 0.5rem;
        padding-bottom: 0.35rem;
        margin-bottom: 0;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }

    #scuole-filtri-form .cosmo-docenti-filtri-row > .cosmo-docenti-filter-cell,
    #scuole-filtri-form .cosmo-docenti-filtri-row > .cosmo-docenti-filter-actions {
        flex: 0 0 auto;
        width: auto !important;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    #scuole-filtri-form .cosmo-docenti-filter-cell .cosmo-docenti-filter-dd {
        width: max-content;
        max-width: min(88vw, 20rem);
    }

    #scuole-filtri-form .cosmo-docenti-filter-actions {
        min-width: 0;
        align-self: flex-end;
        padding-bottom: 0.15rem;
    }

    #scuole-filtri-form .cosmo-docenti-filter-dd > summary.cosmo-docenti-filter-pill {
        list-style: none;
        cursor: pointer;
        user-select: none;
        touch-action: manipulation;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        max-width: 100%;
        min-height: var(--cosmo-tap-target);
        padding: 0.35rem 0.65rem;
        margin: 0;
        border-radius: 999px;
        border: 1px solid var(--cosmo-grigio-300);
        background: var(--cosmo-grigio-100);
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--cosmo-nero);
        box-shadow: none;
    }

    #scuole-filtri-form .cosmo-docenti-filter-dd > summary.cosmo-docenti-filter-pill::-webkit-details-marker {
        display: none;
    }

    #scuole-filtri-form .cosmo-docenti-filter-pill-k {
        flex-shrink: 0;
        color: var(--cosmo-grigio-600);
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    #scuole-filtri-form .cosmo-docenti-filter-pill-v {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        font-weight: 700;
        color: var(--cosmo-nero);
    }

    #scuole-filtri-form .cosmo-docenti-filter-pill-v:empty {
        display: none;
    }

    #scuole-filtri-form .cosmo-docenti-filter-panel-label {
        display: none;
    }

    #scuole-filtri-form .cosmo-docenti-filter-dd-panel {
        z-index: 1065;
        padding: 0.5rem 0.65rem 0.65rem;
        background: var(--cosmo-bianco);
        border: 1px solid var(--cosmo-grigio-300);
        border-top: none;
        border-radius: 0 0 0.85rem 0.85rem;
        box-shadow: 0 10px 28px rgba(17, 24, 39, 0.16);
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
    }

    #scuole-filtri-form .cosmo-docenti-filter-dd[open] > summary.cosmo-docenti-filter-pill {
        border-bottom-left-radius: 0.35rem;
        border-bottom-right-radius: 0.35rem;
        border-bottom-color: transparent;
        box-shadow: none;
    }

    #scuole-filtri-form .cosmo-docenti-filter-dd-panel .form-select {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
        appearance: none !important;
    }

    #scuole-filtri-form .cosmo-docenti-filter-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
        -webkit-user-select: none;
        user-select: none;
    }

    #scuole-filtri-form .cosmo-docenti-filter-mobile-opt {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0.55rem 0.6rem;
        text-align: left;
        font-size: 0.95rem;
        font-weight: 500;
        line-height: 1.25;
        color: var(--cosmo-nero);
        background: var(--cosmo-grigio-100);
        border: 1px solid transparent;
        border-radius: 0.45rem;
        cursor: pointer;
        touch-action: manipulation;
        min-height: 2.65rem;
        transition: background-color 0.12s ease, border-color 0.12s ease;
    }

    #scuole-filtri-form .cosmo-docenti-filter-mobile-opt:focus-visible {
        outline: 2px solid var(--cosmo-focus-ring-strong);
        outline-offset: 1px;
    }

    #scuole-filtri-form .cosmo-docenti-filter-mobile-opt.is-selected {
        background: rgba(37, 99, 235, 0.12);
        border-color: var(--cosmo-primario);
        color: var(--cosmo-primario-scuro);
        font-weight: 700;
    }

    #scuole-filtri-form .cosmo-docenti-filter-dd-overlay {
        position: fixed;
        inset: 0;
        z-index: 1048;
        background: rgba(17, 24, 39, 0.38);
        cursor: pointer;
    }
}

@media (min-width: 768px) {
    #docenti-filtri-form .cosmo-docenti-filter-mobile-list {
        display: none !important;
    }

    #docenti-filtri-form .cosmo-docenti-filter-dd > summary.cosmo-docenti-filter-pill {
        display: none !important;
    }

    #docenti-filtri-form .cosmo-docenti-filter-dd .cosmo-docenti-filter-dd-panel {
        display: block !important;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        position: static;
        max-height: none;
        overflow: visible;
    }

    #docenti-filtri-form .cosmo-docenti-filter-dd-overlay {
        display: none !important;
        pointer-events: none;
    }

    #docenti-filtri-form .cosmo-docenti-filter-pill-k--giorno {
        display: none !important;
    }

    #docenti-filtri-form #giorno-picker .cosmo-multigiorno-trigger.cosmo-docenti-filter-pill--giorno {
        width: 100%;
    }

    #docenti-filtri-form #giorno-picker .cosmo-giorno-summary-val {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #scuole-filtri-form .cosmo-docenti-filter-mobile-list {
        display: none !important;
    }

    #scuole-filtri-form .cosmo-docenti-filter-dd > summary.cosmo-docenti-filter-pill {
        display: none !important;
    }

    #scuole-filtri-form .cosmo-docenti-filter-dd .cosmo-docenti-filter-dd-panel {
        display: block !important;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        position: static;
        max-height: none;
        overflow: visible;
    }

    #scuole-filtri-form .cosmo-docenti-filter-dd-overlay {
        display: none !important;
        pointer-events: none;
    }
}

@media (max-width: 767.98px) {
    #scuole-filtri-form .cosmo-docenti-filtri-row > #municipio-block {
        display: none;
    }

    #scuole-filtri-form .cosmo-docenti-filtri-row > #municipio-block[style*="display: block"] {
        display: block !important;
    }
}

.cosmo-icon-action:focus-visible {
    outline: 2px solid var(--cosmo-focus-ring-strong);
    outline-offset: 2px;
}

.cosmo-icon-action-primary {
    background: var(--cosmo-primario);
    color: var(--cosmo-bianco);
    border-color: var(--cosmo-primario);
}

.cosmo-icon-action-primary:hover,
.cosmo-icon-action-primary:focus-visible {
    background: var(--cosmo-primario-scuro);
    border-color: var(--cosmo-primario-scuro);
    color: var(--cosmo-bianco);
}

.cosmo-icon-action-danger {
    background: var(--cosmo-errore);
    color: var(--cosmo-bianco);
    border-color: var(--cosmo-errore);
}

.cosmo-icon-action-danger:hover,
.cosmo-icon-action-danger:focus-visible {
    background: var(--cosmo-errore-scuro);
    border-color: var(--cosmo-errore-scuro);
    color: var(--cosmo-bianco);
}

.cosmo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(17, 24, 39, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cosmo-modal {
    width: min(100%, 26rem);
    background: var(--cosmo-bianco);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: 0.75rem;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.2);
    padding: 1rem;
}

.cosmo-stili-open {
    cursor: pointer;
}

.cosmo-stili-modal-backdrop {
    z-index: 1090;
}

.cosmo-stili-modal {
    width: min(100%, 40rem);
    max-height: min(85vh, 46rem);
    display: flex;
    flex-direction: column;
}

.cosmo-stili-modal-list {
    margin-top: 0.25rem;
    max-height: min(65vh, 32rem);
    overflow-y: auto;
    padding-right: 0.2rem;
}

.cosmo-stili-modal-list .cosmo-checkcard {
    margin-bottom: 0.45rem;
}

@media (max-width: 576px) {
    .cosmo-filters-body {
        padding: 0.85rem;
    }

    .cosmo-multigiorno-panel {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
        max-height: 70vh;
        overflow: auto;
        border-radius: 0.85rem;
    }

    .cosmo-stili-modal {
        width: min(100%, 100vw - 1.2rem);
        max-height: 88vh;
    }

    .cosmo-stili-modal-list {
        max-height: 68vh;
    }
}

.cosmo-choice-grid {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.cosmo-choice-card {
    width: min(100%, 24rem);
    background: var(--cosmo-bianco);
    color: var(--cosmo-nero);
    border-color: var(--cosmo-grigio-200);
    box-shadow: var(--cosmo-elev-2);
    text-align: center;
}

.cosmo-choice-card:hover {
    border-color: var(--cosmo-primario);
    background: var(--cosmo-superficie-2-selezionata);
}

.cosmo-choice-card p {
    color: var(--cosmo-grigio-700);
}

.cosmo-choice-card .btn.btn-primary {
    background: var(--cosmo-primario);
    border-color: var(--cosmo-primario);
    color: var(--cosmo-bianco);
    box-shadow: 0 6px 14px var(--cosmo-focus-ring-strong);
    font-weight: 700;
}

.cosmo-choice-card .btn.btn-primary:hover {
    background: var(--cosmo-primario-scuro);
    border-color: var(--cosmo-primario-scuro);
}

.cosmo-choice-note {
    margin: 0 auto;
    margin-top: 1rem;
    max-width: 46rem;
    text-align: center;
    font-size: 0.86rem;
    color: var(--cosmo-grigio-500);
    line-height: 1.45;
}

/* Scheda docente: fascia superiore (nome, contatti, azioni) resta visibile durante lo scroll */
.cosmo-scheda-hero-sticky {
    position: sticky;
    top: var(--cosmo-site-header-offset, 0px);
    z-index: 1020;
    isolation: isolate;
    background-color: var(--cosmo-bianco, #fff);
    margin-top: -1rem;
    padding-top: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
    /* Nessun bordo/ombra sul wrapper: la sola cornice è quella della .cosmo-card interna (evita “doppia cornice”). */
}

/* Scheda docente: respiro orizzontale extra per hero e card (testo non “attaccato” al bordo) */
.cosmo-page-scheda-docente .cosmo-scheda-hero-sticky {
    padding-inline: clamp(0.5rem, 2.5vw, 1.15rem);
}

.cosmo-page-scheda-docente .cosmo-card {
    padding: 1.5rem 1.65rem;
}

.cosmo-page-scheda-docente--has-footer {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

/* Schede (Docenti/Scheda, Scuole/Gestione): il contenuto sottostante resta sotto la fascia sticky in scroll. */
.cosmo-page-scheda-docente .cosmo-scheda-hero-sticky ~ .alert,
.cosmo-page-scheda-docente .cosmo-scheda-hero-sticky ~ .cosmo-scheda-body-alert,
.cosmo-page-scheda-docente .cosmo-scheda-hero-sticky ~ .cosmo-scheda-body {
    position: relative;
    z-index: 0;
}

.cosmo-scheda-body {
    padding-inline: clamp(0.5rem, 2.5vw, 1.15rem);
    max-width: 72rem;
    margin-inline: auto;
}

/* Scheda docente: altri dati anagrafici (etichetta/valore, senza separatori) */
.cosmo-scheda-anagrafica-dl {
    margin: 0;
}

.cosmo-scheda-anagrafica-dl > div {
    display: grid;
    grid-template-columns: minmax(9rem, 42%) 1fr;
    gap: 0.1rem 1rem;
    padding: 0.3rem 0;
}

.cosmo-scheda-anagrafica-dl dt {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.cosmo-scheda-anagrafica-dl dd {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--bs-body-color);
}

.cosmo-scheda-anagrafica-gruppo:last-child {
    margin-bottom: 0 !important;
}

.cosmo-scheda-profile-header-card {
    max-width: 72rem;
    margin-inline: auto;
    margin-bottom: 0;
    /* Ombra da .cosmo-card (var(--cosmo-shadow)), come le altre card pagina. */
}

.cosmo-scheda-profile-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem 1.5rem;
}

.cosmo-scheda-profile-header-main {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    flex: 1 1 16rem;
    min-width: 0;
}

.cosmo-scheda-avatar-placeholder {
    flex: 0 0 auto;
    flex-shrink: 0;
    align-self: flex-start;
    width: 5rem;
    height: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    border-radius: 50%;
    border: 2px dashed var(--cosmo-grigio-200, #e5e7eb);
    background: linear-gradient(145deg, var(--cosmo-grigio-100, #f3f4f6), var(--cosmo-bianco, #fff));
}

.cosmo-scheda-profile-identity {
    flex: 1 1 12rem;
    min-width: 0;
}

.cosmo-scheda-profile-name {
    word-break: break-word;
}

.cosmo-scheda-profile-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.625rem;
}

.cosmo-scheda-profile-discipline {
    font-weight: 600;
    font-size: 1.05rem;
}

.cosmo-scheda-profile-meta .cosmo-scheda-meta-sep {
    margin-inline: 0.35rem;
}

.cosmo-scheda-profile-actions {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.cosmo-scheda-icon-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Il .cosmo-back-btn globale ha margin-left per altre pagine; qui i gap flex bastano. */
.cosmo-scheda-icon-actions .cosmo-back-btn {
    margin-left: 0;
}

a.cosmo-scheda-round-btn,
button.cosmo-scheda-round-btn,
span.cosmo-scheda-round-btn {
    box-sizing: border-box;
}

.cosmo-scheda-round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--cosmo-grigio-200, #e5e7eb);
    background: var(--cosmo-bianco, #fff);
    color: var(--cosmo-primario, #1d4ed8);
    text-decoration: none;
    line-height: 1;
    overflow: hidden;
    flex-shrink: 0;
}

.cosmo-scheda-round-btn:hover {
    border-color: var(--cosmo-primario, #1d4ed8);
    color: var(--cosmo-primario, #1d4ed8);
}

.cosmo-scheda-round-btn:focus-visible {
    border-color: var(--cosmo-primario, #1d4ed8);
    color: var(--cosmo-primario, #1d4ed8);
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--cosmo-focus-ring);
}

.cosmo-scheda-round-btn--disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    color: var(--cosmo-grigio-500, #6b7280);
}

.cosmo-scheda-round-btn--cv {
    flex-direction: column;
    gap: 0.06rem;
    padding-top: 0.12rem;
    background: linear-gradient(180deg, #fff7ed 0%, var(--cosmo-bianco) 55%);
    border-color: rgba(234, 88, 12, 0.45);
    color: var(--cosmo-nero, #111827);
}

.cosmo-scheda-round-btn--cv svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.cosmo-scheda-round-btn--cv:hover,
.cosmo-scheda-round-btn--cv:focus-visible {
    border-color: var(--cosmo-accento-arancio, #ea580c);
    color: var(--cosmo-nero, #111827);
}

.cosmo-scheda-cv-label {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
}

@media (min-width: 992px) {
    .cosmo-scheda-profile-header {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .cosmo-scheda-profile-actions {
        align-items: flex-end;
        margin-left: auto;
    }

    .cosmo-scheda-icon-actions {
        justify-content: flex-end;
    }
}

/* Gestione scuola (layout tipo scheda docente): logo in cornice quadrata o orizzontale */
.cosmo-page-scheda-scuola .cosmo-scheda-scuola-logo-box {
    flex: 0 0 auto;
    flex-shrink: 0;
    align-self: flex-start;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cosmo-grigio-200, #e5e7eb);
    background: linear-gradient(145deg, var(--cosmo-grigio-100, #f3f4f6), var(--cosmo-bianco, #fff));
    overflow: hidden;
}

.cosmo-page-scheda-scuola .cosmo-scheda-scuola-logo-box--square {
    width: 5rem;
    height: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    border-radius: 0.5rem;
}

.cosmo-page-scheda-scuola .cosmo-scheda-scuola-logo-box--wide {
    width: 11rem;
    height: 4.5rem;
    min-width: 11rem;
    min-height: 4.5rem;
    border-radius: 0.5rem;
}

.cosmo-page-scheda-scuola .cosmo-scheda-scuola-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.cosmo-page-scheda-scuola .cosmo-scheda-scuola-logo-placeholder {
    border-style: dashed;
}

.cosmo-page-scheda-scuola button.cosmo-scheda-scuola-logo-box {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.cosmo-page-scheda-scuola button.cosmo-scheda-scuola-logo-box:focus {
    outline: none;
}

.cosmo-page-scheda-scuola button.cosmo-scheda-scuola-logo-box:focus-visible {
    outline: 2px solid var(--cosmo-primario, #2563eb);
    outline-offset: 2px;
}

.cosmo-scheda-scuola-logo-wrap {
    position: relative;
    flex: 0 0 auto;
    align-self: flex-start;
}

.cosmo-scheda-media-edit-btn {
    position: absolute;
    right: 0.28rem;
    bottom: 0.28rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--cosmo-grigio-200, #e5e7eb);
    background: var(--cosmo-bianco, #fff);
    color: var(--cosmo-primario, #2563eb);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    cursor: pointer;
}

.cosmo-scheda-media-edit-btn:hover,
.cosmo-scheda-media-edit-btn:focus-visible {
    border-color: var(--cosmo-primario, #2563eb);
    background: var(--cosmo-grigio-100, #f3f4f6);
    outline: none;
}

.cosmo-scheda-media-edit-btn .cosmo-icon {
    display: block;
}

/* Miniatura con immagine: matita sempre visibile, più leggera fino a hover/focus */
.cosmo-scheda-media-edit-btn.cosmo-scheda-media-edit-btn--thumb-muted {
    opacity: 0.82;
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--cosmo-grigio-200, #e5e7eb);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.cosmo-scheda-media-edit-btn.cosmo-scheda-media-edit-btn--thumb-muted:hover,
.cosmo-scheda-media-edit-btn.cosmo-scheda-media-edit-btn--thumb-muted:focus-visible {
    opacity: 1;
    border-color: var(--cosmo-primario, #2563eb);
    background: var(--cosmo-grigio-100, #f3f4f6);
}

/* Lightbox foto docente / logo scuola */
.cosmo-scheda-avatar-thumb-btn {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    display: block;
    line-height: 0;
}

.cosmo-scheda-avatar-thumb-btn:focus {
    outline: none;
}

.cosmo-scheda-avatar-thumb-btn:focus-visible {
    outline: 2px solid var(--cosmo-primario, #2563eb);
    outline-offset: 2px;
    border-radius: 0.35rem;
}

.cosmo-scheda-avatar-thumb-btn.cosmo-scheda-avatar-placeholder {
    cursor: pointer;
}

.cosmo-page-scheda-scuola button.cosmo-scheda-avatar-thumb-btn.cosmo-scheda-scuola-logo-placeholder {
    cursor: pointer;
}

.cosmo-media-lightbox-modal .modal-content {
    background: var(--cosmo-bianco, #fff);
    border: none;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

/* Modali foto/logo: NON mettere dentro .cosmo-scheda-hero-sticky (isolation+z-index blocca sopra backdrop 1050). */

.cosmo-media-lightbox-body {
    position: relative;
    padding-bottom: 1.25rem;
}

.cosmo-media-lightbox__toolbar {
    position: absolute;
    top: 0.2rem;
    right: 0.65rem;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.cosmo-media-lightbox__toolbar .cosmo-scheda-round-btn {
    width: 2.15rem;
    height: 2.15rem;
    min-width: 2.15rem;
    min-height: 2.15rem;
}

.cosmo-media-lightbox__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(50vh, 20rem);
    max-height: min(85vh, 36rem);
    padding: 0.5rem 0.75rem 1rem;
    background: linear-gradient(145deg, var(--cosmo-grigio-100, #f3f4f6), var(--cosmo-bianco, #fff));
    border-radius: 0.5rem;
    border: 1px solid var(--cosmo-grigio-200, #e5e7eb);
}

.cosmo-media-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: min(80vh, 32rem);
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.cosmo-media-lightbox__tool-btn--danger {
    color: #b91c1c;
    border-color: #fecaca;
}

.cosmo-media-lightbox__tool-btn--close {
    color: var(--cosmo-primario, #2563eb);
    border-color: var(--cosmo-grigio-200, #e5e7eb);
}

.cosmo-media-lightbox__tool-btn--danger:hover,
.cosmo-media-lightbox__tool-btn--danger:focus-visible {
    border-color: #b91c1c;
    background: #fef2f2;
}

.cosmo-media-lightbox__tool-btn--close:hover,
.cosmo-media-lightbox__tool-btn--close:focus-visible {
    border-color: var(--cosmo-primario, #2563eb);
    background: var(--cosmo-grigio-100, #f3f4f6);
}

.cosmo-media-edit-modal .modal-content {
    border: none;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
}

.cosmo-media-edit-modal__form {
    width: 100%;
    min-width: min(100%, 16rem);
}

.cosmo-media-edit-modal__file {
    font-size: 1rem;
}

@media (min-width: 576px) {
    .cosmo-media-edit-modal__file {
        font-size: 0.875rem;
    }
}

.cosmo-scheda-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    align-self: flex-start;
}

.cosmo-scheda-avatar-img {
    flex: 0 0 auto;
    flex-shrink: 0;
    align-self: flex-start;
    width: 5rem;
    height: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    border-radius: 50%;
    border: 2px solid var(--cosmo-grigio-200, #e5e7eb);
    object-fit: cover;
    object-position: center;
    background: var(--cosmo-grigio-100, #f3f4f6);
}

.cosmo-page-scheda-scuola .cosmo-scheda-scuola-flow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.cosmo-page-scheda-scuola .cosmo-scheda-scuola-logo-forms {
    width: 100%;
    max-width: 28rem;
}

.cosmo-page-scheda-scuola .cosmo-scheda-scuola-stato-strip {
    max-width: 72rem;
    margin-inline: auto;
}

.cosmo-scheda-body-alert {
    max-width: 72rem;
    margin-inline: auto;
    margin-bottom: 0.75rem;
    padding-inline: clamp(0.5rem, 2.5vw, 1.15rem);
}

.cosmo-scheda-disponibilita-split {
    min-width: 0;
}

@media (min-width: 768px) {
    .cosmo-scheda-disponibilita-split > .col-md-6:first-child {
        padding-inline-end: 1.25rem;
        border-inline-end: 1px solid var(--cosmo-grigio-200, #e5e7eb);
    }

    .cosmo-scheda-disponibilita-split > .col-md-6:last-child {
        padding-inline-start: 1.25rem;
    }
}

.cosmo-scheda-day-chip {
    display: inline-block;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.14);
    color: #0f5132;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.cosmo-scheda-prov-chip {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: var(--cosmo-radius, 0.5rem);
    font-size: 0.88rem;
    font-weight: 600;
    background: var(--cosmo-grigio-100, #f3f4f6);
    border: 1px solid var(--cosmo-grigio-200, #e5e7eb);
}

.cosmo-scheda-disc-subcard {
    border: 1px solid var(--cosmo-grigio-200, #e5e7eb);
    border-left: 4px solid var(--cosmo-accento-verde);
    border-radius: var(--cosmo-radius, 0.5rem);
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--cosmo-bianco, #fff) 52%);
    box-shadow: 0 1px 0 rgba(16, 185, 129, 0.12);
}

.cosmo-scheda-disc-title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
}

.cosmo-scheda-disc-badge {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    letter-spacing: 0.02em;
    max-width: 100%;
    white-space: normal;
    text-align: start;
    line-height: 1.25;
}

.cosmo-scheda-titoli-in-disc li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.cosmo-scheda-page-footer {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    margin-top: auto;
}

.cosmo-scheda-page-footer-inner {
    max-width: 72rem;
    margin-inline: auto;
    padding: 0.65rem clamp(0.5rem, 2.5vw, 1.15rem) calc(0.65rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    align-items: center;
    background: var(--cosmo-bianco, #fff);
    border-top: 1px solid var(--cosmo-grigio-200, #e5e7eb);
    box-shadow: 0 -4px 14px rgba(17, 24, 39, 0.06);
}

.cosmo-scheda-allegato {
    border: 1px solid var(--cosmo-grigio-200, #e5e7eb);
    border-radius: var(--cosmo-radius, 0.5rem);
    padding: 1rem 1.15rem;
    background: var(--cosmo-grigio-100, #f9fafb);
}

.cosmo-scheda-allegato-icon {
    flex: 0 0 auto;
    color: var(--cosmo-primario, #1d4ed8);
}

.cosmo-scheda-feedback-list .cosmo-scheda-feedback-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
   Lista scuole: card orizzontali; selezione e barra solo con permesso email gruppo
   ------------------------------------------------------------------------- */

.cosmo-scuole-lista-has-risultati {
    padding-bottom: 1.25rem;
}

.cosmo-scuole-lista-has-risultati.cosmo-scuole-lista-has-risultati--selezione {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}

.cosmo-scuola-card.cosmo-scuola-card--selectable {
    cursor: pointer;
}

.cosmo-scuola-card-select-wrap {
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 0.2rem;
}

.cosmo-scuola-card.cosmo-scuola-card--selectable .cosmo-scuola-card-select:focus-visible {
    outline: 2px solid var(--cosmo-primario);
    outline-offset: 2px;
}

.cosmo-scuola-card.is-selected {
    border-color: var(--cosmo-primario);
    box-shadow: 0 0 0 1px var(--cosmo-primario);
    background: linear-gradient(180deg, var(--cosmo-superficie-2-selezionata) 0%, var(--cosmo-bianco) 38%);
}

.cosmo-scuola-card.cosmo-scuola-card--current-school {
    border-color: var(--cosmo-primario);
    box-shadow: 0 0 0 1px var(--cosmo-primario);
}

.cosmo-scuole-email-dialog {
    width: min(36rem, 100%);
}

.cosmo-scuole-email-quill {
    min-height: 12rem;
    background: var(--cosmo-bianco);
}

.cosmo-scuole-email-quill .ql-container {
    min-height: 9rem;
    font-size: 0.95rem;
}

.cosmo-scuola-card {
    width: 100%;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cosmo-scuola-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--cosmo-grigio-200);
}

.cosmo-scuola-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cosmo-scuola-card-title {
    flex: 0 1 auto;
    min-width: 0;
    word-break: break-word;
}

.cosmo-scuola-card-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem 0.5rem;
}

.cosmo-scuole-gestione-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--cosmo-primario);
}

.cosmo-scuole-gestione-link:hover .cosmo-scuole-gestione-badge,
.cosmo-scuole-gestione-link:focus-visible .cosmo-scuole-gestione-badge {
    border-color: var(--cosmo-primario);
    background: var(--cosmo-bianco);
}

.cosmo-scuole-gestione-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cosmo-tap-target);
    min-height: var(--cosmo-tap-target);
    border-radius: 999px;
    border: 1px solid var(--cosmo-grigio-200);
    background: var(--cosmo-grigio-100);
    color: var(--cosmo-primario);
}

.cosmo-scuola-circuito-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cosmo-tap-target);
    min-height: var(--cosmo-tap-target);
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--cosmo-grigio-200);
    background: var(--cosmo-grigio-100);
    cursor: pointer;
}

.cosmo-scuola-circuito-toggle--escludi {
    color: var(--bs-danger, #dc3545);
}

.cosmo-scuola-circuito-toggle--ammetti {
    color: var(--cosmo-verde, #198754);
}

.cosmo-scuola-circuito-toggle:hover,
.cosmo-scuola-circuito-toggle:focus-visible {
    border-color: currentColor;
    background: var(--cosmo-bianco);
}

.cosmo-scuole-gestione-badge svg {
    display: block;
}

.cosmo-scuola-card-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0.55rem;
    padding-bottom: 0.05rem;
    font-size: 0.9rem;
}

.cosmo-scuola-zone {
    min-width: 0;
    padding: 0.4rem 0.35rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.cosmo-scuola-zone--sede {
    flex: 1 1 46%;
    background: var(--cosmo-grigio-100);
    border-radius: 0.35rem;
}

.cosmo-scuola-zone--referente {
    flex: 0 1 24%;
    border-left: 1px solid var(--cosmo-grigio-200);
}

.cosmo-scuola-zone--contatti {
    flex: 0 1 28%;
    border-left: 1px solid var(--cosmo-grigio-200);
}

.cosmo-scuola-zone-empty {
    font-size: 0.95rem;
}

.cosmo-scuola-sede-riga,
.cosmo-scuola-contacts-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.cosmo-scuola-zone--contatti .cosmo-scuola-contacts-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.2rem 0;
}

.cosmo-scuola-zone--contatti .cosmo-scuola-zone-sep {
    display: none;
}

.cosmo-scuola-sede-indirizzo-completo {
    font-size: 0.86rem;
    line-height: 1.3;
    color: var(--cosmo-nero);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.cosmo-scuola-sede-citta,
.cosmo-scuola-sede-indirizzo {
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--cosmo-nero);
}

.cosmo-scuola-referente-nome {
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--cosmo-nero);
}

.cosmo-scuola-referente-ruolo {
    font-size: 0.86rem;
}

.cosmo-scuola-zone-sep {
    display: inline-block;
    flex: 0 0 auto;
    width: 1px;
    height: 1.05em;
    background: var(--cosmo-grigio-300, #d1d5db);
    align-self: center;
}

.cosmo-scuola-contact-link {
    color: var(--cosmo-primario);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.35;
    min-width: 0;
}

.cosmo-scuola-contact-mail {
    word-break: break-all;
}

.cosmo-scuola-contact-link:hover,
.cosmo-scuola-contact-link:focus-visible {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .cosmo-scuola-card-body {
        flex-direction: column;
        flex-wrap: nowrap;
        margin-inline: 0;
    }

    .cosmo-scuola-zone--sede {
        border-radius: 0.35rem;
    }

    .cosmo-scuola-zone--referente,
    .cosmo-scuola-zone--contatti {
        border-left: none;
        border-top: 1px solid var(--cosmo-grigio-200);
        padding-top: 0.55rem;
    }

    .cosmo-scuola-zone--sede {
        padding-top: 0.5rem;
    }
}

/* -------------------------------------------------------------------------
   Lista docenti: card full-width, selezione, barra azioni (mobile-first)
   ------------------------------------------------------------------------- */

.cosmo-docenti-lista-has-risultati {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}

.cosmo-docente-card {
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    /* Leggermente più definita rispetto alla pagina, senza pesare sul tema globale .cosmo-card */
    border-color: var(--cosmo-grigio-300);
    box-shadow: 0 1px 4px rgba(17, 24, 39, 0.11);
}

.cosmo-docente-card-select-wrap {
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 0.2rem;
}

.cosmo-docente-card-select:focus-visible {
    outline: 2px solid var(--cosmo-primario);
    outline-offset: 2px;
}

.cosmo-docente-card.is-selected {
    border-color: var(--cosmo-primario);
    box-shadow: 0 0 0 1px var(--cosmo-primario);
    background: linear-gradient(180deg, var(--cosmo-superficie-2-selezionata) 0%, var(--cosmo-bianco) 38%);
}

.cosmo-docente-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--cosmo-grigio-200);
}

.cosmo-docente-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cosmo-docente-card-title {
    flex: 0 1 auto;
    min-width: 0;
    word-break: break-word;
}

.cosmo-docente-eta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1.2;
}

.cosmo-docente-eta-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cosmo-grigio-700);
}

.cosmo-docente-eta-value {
    font-weight: 700;
    font-size: 1rem;
    color: var(--cosmo-nero);
    font-variant-numeric: tabular-nums;
}

.cosmo-docente-card-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem 0.5rem;
}

.cosmo-docenti-scheda-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--cosmo-primario);
}

.cosmo-docenti-scheda-link:hover .cosmo-docenti-scheda-badge,
.cosmo-docenti-scheda-link:focus-visible .cosmo-docenti-scheda-badge {
    border-color: var(--cosmo-primario);
    background: var(--cosmo-bianco);
}

.cosmo-docenti-scheda-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cosmo-tap-target);
    min-height: var(--cosmo-tap-target);
    border-radius: 999px;
    border: 1px solid var(--cosmo-grigio-200);
    background: var(--cosmo-grigio-100);
    color: var(--cosmo-primario);
}

.cosmo-docente-card-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0.55rem;
    padding-bottom: 0.05rem;
    font-size: 0.9rem;
}

.cosmo-docente-zone {
    min-width: 0;
    padding: 0.45rem 0.65rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.cosmo-docente-zone--skills {
    flex: 1 1 55%;
    background: var(--cosmo-grigio-100);
    border-radius: 0.35rem;
}

.cosmo-docente-zone--context {
    flex: 1 1 45%;
    border-left: 1px solid var(--cosmo-grigio-200);
}

.cosmo-docente-zone-empty {
    font-size: 0.95rem;
}

.cosmo-docenti-skill-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
}

.cosmo-docenti-skill-unit {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.45rem;
    max-width: 100%;
}

.cosmo-docenti-skill-stili {
    font-size: 0.86rem;
    line-height: 1.25;
    color: var(--cosmo-grigio-700);
}

.cosmo-docente-context-row,
.cosmo-docente-contacts-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.cosmo-docente-context-aree,
.cosmo-docente-context-giorni {
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--cosmo-nero);
}

.cosmo-docente-zone-sep {
    display: inline-block;
    flex: 0 0 auto;
    width: 1px;
    height: 1.05em;
    background: var(--cosmo-grigio-300, #d1d5db);
    align-self: center;
}

.cosmo-docente-contact-email {
    min-width: 0;
}

/* Contatti lista docenti: trigger + flyout azione (tel / email) */
.cosmo-docenti-contact-trigger {
    display: inline;
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--cosmo-primario);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    word-break: break-word;
    overflow-wrap: anywhere;
    border-radius: 0.2rem;
}

.cosmo-docenti-contact-trigger:hover,
.cosmo-docenti-contact-trigger:focus-visible {
    text-decoration: underline;
    color: var(--cosmo-primario-scuro);
    outline: none;
}

.cosmo-docenti-contact-trigger:focus-visible {
    box-shadow: 0 0 0 2px var(--cosmo-bianco), 0 0 0 4px var(--cosmo-primario);
}

.cosmo-docenti-contact-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(15, 23, 42, 0.22);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.cosmo-docenti-contact-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.cosmo-docenti-contact-flyout {
    position: fixed;
    z-index: 1046;
    padding: 0.2rem;
    opacity: 0;
    transform: translateY(10px) scale(0.86);
    transition:
        opacity 0.24s ease,
        transform 0.32s cubic-bezier(0.22, 1.1, 0.36, 1);
    pointer-events: none;
    filter: drop-shadow(0 10px 24px rgba(17, 24, 39, 0.2));
}

.cosmo-docenti-contact-flyout.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cosmo-docenti-contact-flyout-title {
    margin: 0;
}

.cosmo-docenti-contact-flyout-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    min-height: 4rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--cosmo-bianco);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cosmo-docenti-contact-flyout-link:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.22);
}

.cosmo-docenti-contact-flyout-link:focus-visible {
    outline: 3px solid var(--cosmo-bianco);
    outline-offset: 3px;
}

.cosmo-docenti-contact-flyout--tel .cosmo-docenti-contact-flyout-link {
    background: linear-gradient(145deg, var(--cosmo-accento-verde), var(--cosmo-accento-verde-scuro));
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.cosmo-docenti-contact-flyout--mail .cosmo-docenti-contact-flyout-link {
    background: linear-gradient(145deg, var(--cosmo-primario), var(--cosmo-primario-scuro));
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.cosmo-docenti-contact-flyout-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cosmo-docenti-contact-flyout-svg {
    flex-shrink: 0;
}

/* Scheda docente — flyout collaborazioni (due azioni o solo report) */
.cosmo-scheda-collab-flyout-dual {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.cosmo-scheda-collab-flyout-tel {
    background: linear-gradient(145deg, var(--cosmo-accento-verde), var(--cosmo-accento-verde-scuro));
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.cosmo-scheda-collab-flyout-mail {
    background: linear-gradient(145deg, var(--cosmo-primario), var(--cosmo-primario-scuro));
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.cosmo-scheda-collab-flyout-report .cosmo-scheda-collab-flyout-mail {
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .cosmo-docenti-contact-backdrop,
    .cosmo-docenti-contact-flyout,
    .cosmo-docenti-contact-flyout-link {
        transition-duration: 0.01ms;
    }

    .cosmo-docenti-contact-flyout.is-open {
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 767.98px) {
    .cosmo-docente-card-body {
        flex-direction: column;
        flex-wrap: nowrap;
        margin-inline: 0;
    }

    .cosmo-docente-zone--skills {
        border-radius: 0.35rem;
    }

    .cosmo-docente-zone--context {
        border-left: none;
        border-top: 1px solid var(--cosmo-grigio-200);
        padding-top: 0.55rem;
    }

    .cosmo-docente-zone--skills {
        padding-top: 0.5rem;
    }
}

.cosmo-docenti-contact-link {
    color: var(--cosmo-primario);
    text-decoration: none;
}

.cosmo-docenti-contact-link:hover,
.cosmo-docenti-contact-link:focus-visible {
    text-decoration: underline;
}

.cosmo-docenti-selezione-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--cosmo-bianco);
    border-top: 1px solid var(--cosmo-grigio-200);
    box-shadow: 0 -6px 18px rgba(17, 24, 39, 0.08);
}

.cosmo-docenti-selezione-count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.15rem;
    min-width: 1.5ch;
}

.cosmo-docenti-selezione-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex: 1 1 auto;
}

.cosmo-docenti-selezione-btn {
    min-width: var(--cosmo-tap-target);
    min-height: var(--cosmo-tap-target);
    padding: 0;
    border-radius: var(--cosmo-radius);
    border: 1px dashed var(--cosmo-grigio-400);
    background: var(--cosmo-grigio-100);
}

.cosmo-docenti-selezione-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cosmo-docenti-selezione-btn--round {
    width: var(--cosmo-tap-target);
    border-radius: 50%;
    border: 1px solid var(--cosmo-grigio-300);
    background: var(--cosmo-bianco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cosmo-grigio-700);
}

.cosmo-docenti-selezione-btn--round:not(:disabled):hover,
.cosmo-docenti-selezione-btn--round:not(:disabled):focus-visible {
    border-color: var(--cosmo-primario);
    color: var(--cosmo-primario);
    background: var(--cosmo-superficie-2-selezionata);
}

.cosmo-docenti-selezione-btn--mail:not(:disabled) {
    color: var(--cosmo-primario);
    border-color: color-mix(in srgb, var(--cosmo-primario) 35%, var(--cosmo-grigio-300));
}

.cosmo-docenti-selezione-btn--carriera:not(:disabled) {
    color: #1f7a4d;
    border-color: color-mix(in srgb, #1f7a4d 35%, var(--cosmo-grigio-300));
}

/* Go-live — pannello operatore */
.cosmo-golive-hero .h3 {
    margin-bottom: 0.25rem;
}

.cosmo-golive-sequenza {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.35rem;
    list-style: none;
    padding: 0;
}

.cosmo-golive-sequenza__voce {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: min(100%, 10rem);
    padding: 0.45rem 0.55rem;
    border-radius: var(--cosmo-radius);
    background: rgba(29, 78, 216, 0.06);
    border: 1px solid rgba(29, 78, 216, 0.1);
    font-size: 0.8rem;
    line-height: 1.25;
}

.cosmo-golive-sequenza__voce--opzionale {
    background: var(--cosmo-grigio-100, #f3f4f6);
    border-color: var(--cosmo-grigio-200);
    color: var(--cosmo-grigio-500);
}

.cosmo-golive-sequenza__n {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--cosmo-primario);
    color: var(--cosmo-bianco);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cosmo-golive-sequenza__voce--opzionale .cosmo-golive-sequenza__n {
    background: var(--cosmo-grigio-400, #9ca3af);
}

.cosmo-golive-sequenza__label {
    font-weight: 600;
    color: var(--cosmo-nero);
}

.cosmo-golive-sequenza__voce--opzionale .cosmo-golive-sequenza__label {
    font-weight: 500;
}

.cosmo-golive-step--opzionale {
    border-style: dashed;
    border-color: var(--cosmo-grigio-300);
    background: rgba(249, 250, 251, 0.8);
}

.cosmo-golive-step__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.cosmo-golive-step__actions--solo-controllo {
    flex-direction: column;
    align-items: flex-start;
}

.cosmo-golive-azione-tipo {
    line-height: 1.3;
}

.cosmo-golive-esito {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--cosmo-radius);
    background: var(--cosmo-grigio-100, #f3f4f6);
    border: 1px solid var(--cosmo-grigio-200);
}

.cosmo-golive-esito__titolo {
    font-weight: 600;
    margin: 0;
    font-size: 0.85rem;
}

.cosmo-golive-riservata {
    border: 1px solid rgba(220, 38, 38, 0.25);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.5) 0%, rgba(255, 255, 255, 1) 28%);
}

.cosmo-golive-riservata__lista {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.cosmo-golive-riservata__voce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(220, 38, 38, 0.12);
}

.cosmo-golive-riservata__voce:first-child {
    border-top: none;
    padding-top: 0;
}

.cosmo-golive-pre {
    font-size: 0.72rem;
    max-height: 12rem;
    overflow: auto;
    background: var(--cosmo-grigio-100, #f3f4f6);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: var(--cosmo-radius);
    padding: 0.65rem;
    margin: 0;
}

.cosmo-golive-accordion .accordion-button {
    font-size: 0.9rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .cosmo-golive-sequenza__voce {
        flex: 1 1 0;
        min-width: 0;
    }
}

.cosmo-golive-btn--preview:not(:disabled) {
    color: var(--cosmo-primario);
    border-color: color-mix(in srgb, var(--cosmo-primario) 35%, var(--cosmo-grigio-300));
}

.cosmo-golive-btn--allinea:not(:disabled) {
    color: #1f7a4d;
    border-color: color-mix(in srgb, #1f7a4d 35%, var(--cosmo-grigio-300));
}

.cosmo-golive-btn--email:not(:disabled) {
    color: #7c3aed;
    border-color: color-mix(in srgb, #7c3aed 35%, var(--cosmo-grigio-300));
}

.cosmo-golive-btn--close:not(:disabled),
.cosmo-golive-btn--confirm:not(:disabled) {
    color: #15803d;
    border-color: color-mix(in srgb, #15803d 40%, var(--cosmo-grigio-300));
}

.cosmo-golive-btn--riapri:not(:disabled) {
    color: #b45309;
    border-color: color-mix(in srgb, #b45309 40%, var(--cosmo-grigio-300));
}

/* Tag livello applicativo della scuola (icona romana, nessun testo lungo) */
.cosmo-livello-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    border: 1.5px solid var(--cosmo-grigio-300);
    background: var(--cosmo-bianco);
    margin-right: 0.25rem;
    font-weight: 700;
    line-height: 1;
}

.cosmo-livello-tag-romano {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.cosmo-livello-tag--liv1 { color: #1f7a4d; border-color: #1f7a4d; background: color-mix(in srgb, #1f7a4d 10%, var(--cosmo-bianco)); }
.cosmo-livello-tag--liv2 { color: #1d4ed8; border-color: #1d4ed8; background: color-mix(in srgb, #1d4ed8 10%, var(--cosmo-bianco)); }
.cosmo-livello-tag--liv3 { color: #b45309; border-color: #b45309; background: color-mix(in srgb, #b45309 10%, var(--cosmo-bianco)); }

/* Modal carriera (gemella della modal email) */
.cosmo-scuole-carriera-dialog {
    width: min(28rem, 100%);
}

.cosmo-carriera-livelli {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cosmo-carriera-livello {
    border-radius: var(--cosmo-radius);
    border: 2px solid var(--cosmo-grigio-300);
    background: var(--cosmo-bianco);
    padding: 0.85rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 4.5rem;
    color: var(--cosmo-grigio-700);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.cosmo-carriera-livello:disabled {
    cursor: default;
}

.cosmo-carriera-livello-romano {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.cosmo-carriera-livello-icon {
    opacity: 0.85;
}

.cosmo-carriera-livello.is-corrente {
    background: var(--cosmo-grigio-100);
    border-style: dashed;
    color: var(--cosmo-grigio-700);
}

.cosmo-carriera-livello.is-target {
    border-color: var(--cosmo-primario);
    color: var(--cosmo-primario);
    background: var(--cosmo-superficie-2-selezionata);
}

.cosmo-carriera-livello--liv1.is-target { border-color: #1f7a4d; color: #1f7a4d; background: color-mix(in srgb, #1f7a4d 12%, var(--cosmo-bianco)); }
.cosmo-carriera-livello--liv2.is-target { border-color: #1d4ed8; color: #1d4ed8; background: color-mix(in srgb, #1d4ed8 12%, var(--cosmo-bianco)); }

.cosmo-carriera-utente-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--cosmo-radius);
    border: 1px solid var(--cosmo-grigio-300);
    background: var(--cosmo-bianco);
    text-align: left;
    cursor: pointer;
}

.cosmo-carriera-utente-row[aria-checked="true"] {
    border-color: var(--cosmo-primario);
    background: var(--cosmo-superficie-2-selezionata);
}

.cosmo-carriera-utente-iniziali {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--cosmo-grigio-200);
    color: var(--cosmo-grigio-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.cosmo-carriera-utente-nome {
    flex: 1 1 auto;
    color: var(--cosmo-grigio-800);
    font-weight: 500;
}

.cosmo-carriera-utente-livello {
    font-weight: 700;
    color: var(--cosmo-grigio-600);
    min-width: 1.5rem;
    text-align: right;
}

/* /Admin/UtentiApp — riga utente */
.cosmo-utente-app-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: var(--cosmo-radius);
    background: var(--cosmo-bianco);
    flex-wrap: wrap;
}

.cosmo-utente-app-identity {
    display: flex;
    flex-direction: column;
    flex: 1 1 14rem;
    min-width: 0;
}

.cosmo-utente-app-nome {
    font-weight: 600;
    color: var(--cosmo-grigio-800);
}

.cosmo-utente-app-email {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cosmo-utente-app-scuola {
    font-size: 0.85rem;
}

.cosmo-utente-app-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.cosmo-utente-app-btn {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0 0.6rem;
    border-radius: var(--cosmo-radius);
    border: 1px solid var(--cosmo-grigio-300);
    background: var(--cosmo-bianco);
    color: var(--cosmo-grigio-700);
    font-weight: 700;
    line-height: 1;
}

.cosmo-utente-app-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cosmo-utente-app-btn:not(:disabled):hover,
.cosmo-utente-app-btn:not(:disabled):focus-visible {
    border-color: var(--cosmo-primario);
    color: var(--cosmo-primario);
    background: var(--cosmo-superficie-2-selezionata);
}

.cosmo-utente-app-btn--liv1:not(:disabled) { color: #1f7a4d; border-color: color-mix(in srgb, #1f7a4d 35%, var(--cosmo-grigio-300)); }
.cosmo-utente-app-btn--liv2:not(:disabled) { color: #1d4ed8; border-color: color-mix(in srgb, #1d4ed8 35%, var(--cosmo-grigio-300)); }
.cosmo-utente-app-btn--liv3:not(:disabled) { color: #b45309; border-color: color-mix(in srgb, #b45309 35%, var(--cosmo-grigio-300)); }

.cosmo-utente-app-btn--attivazione {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.cosmo-docenti-rapporto-modal-open {
    overflow: hidden;
}

.cosmo-docenti-rapporto-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(17, 24, 39, 0.45);
}

.cosmo-docenti-rapporto-dialog {
    width: min(32rem, 100%);
    max-height: min(90vh, 100%);
    overflow: auto;
    background: var(--cosmo-bianco);
    border-radius: var(--cosmo-radius);
    box-shadow: 0 18px 48px rgba(17, 24, 39, 0.18);
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--cosmo-grigio-200);
}

.cosmo-docenti-rapporto-title {
    margin: 0;
}

.cosmo-docenti-rapporto-table-wrap {
    max-height: 45vh;
    overflow: auto;
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: var(--cosmo-radius);
}

.cosmo-docenti-rapporto-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cosmo-docenti-rapporto-iconbtn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cosmo-docenti-rapporto-iconbtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cosmo-docenti-rapporto-iconbtn:not(:disabled):hover,
.cosmo-docenti-rapporto-iconbtn:not(:disabled):focus-visible {
    transform: scale(1.04);
}

.cosmo-docenti-rapporto-iconbtn--ok {
    background: var(--cosmo-accento-verde);
    color: var(--cosmo-bianco);
    box-shadow: 0 2px 8px var(--cosmo-alert-success-border);
}

.cosmo-docenti-rapporto-iconbtn--ok:not(:disabled):focus-visible {
    outline: 2px solid var(--cosmo-accento-verde-scuro);
    outline-offset: 2px;
}

.cosmo-docenti-rapporto-iconbtn--danger {
    background: var(--cosmo-errore);
    color: var(--cosmo-bianco);
    box-shadow: 0 2px 8px var(--cosmo-alert-danger-border);
}

.cosmo-docenti-rapporto-iconbtn--danger:not(:disabled):focus-visible {
    outline: 2px solid var(--cosmo-errore-scuro);
    outline-offset: 2px;
}

/* =========================================================================
   Sistema 3 livelli card — personalità visiva (pilota)
   -------------------------------------------------------------------------
   Convenzione bottoni:
   - Azione primaria di pagina             : .btn.btn-primary
   - Conferma irreversibile (Abilita...)   : .btn.btn-cosmo-verde
   - Distruttiva (Disabilita, Elimina)     : .btn.btn-outline-danger + icona
   - CTA che richiama attenzione (raro)    : .btn.btn-cosmo-arancio
   - Secondaria neutra (Cerca, Pulisci)    : .btn.btn-outline-primary
   - Back tondo                            : .cosmo-icon-btn.cosmo-back-btn
   I .cosmo-card senza modifier restano identici a oggi (zero regressioni).
   ========================================================================= */

/* Docenti/Lista e Scuole/Lista: hero + chip filtri + pannello filtri in un solo blocco sticky.
   Il respiro di 1rem sotto la navbar è padding interno, non top: offset+1rem (altrimenti resta
   una fascia di viewport scoperta e il testo che scorre si vede negli “interstizi”).
   margin-top negativo + padding-top: copre anche la striscia del padding di .cosmo-main-after-header. */
.cosmo-lista-sticky-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: var(--cosmo-site-header-offset, 3.75rem);
    z-index: var(--cosmo-z-sticky-content);
    isolation: isolate;
    background-color: var(--cosmo-bianco);
    margin-top: -1rem;
    padding-top: 1rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

/* Il contenuto sotto lo stack non deve dipingere sopra la fascia sticky in scroll. */
.cosmo-main-after-header .cosmo-lista-sticky-stack ~ .cosmo-docenti-lista-has-risultati,
.cosmo-main-after-header .cosmo-lista-sticky-stack ~ .cosmo-scuole-lista-has-risultati,
.cosmo-main-after-header .cosmo-lista-sticky-stack ~ .alert.alert-info,
.cosmo-main-after-header .cosmo-abilitazioni-scuole-sticky ~ .alert,
.cosmo-main-after-header .cosmo-abilitazioni-scuole-sticky ~ #formAbilitazioniScuole,
.cosmo-main-after-header .cosmo-abilitazioni-docenti-sticky ~ .alert,
.cosmo-main-after-header .cosmo-abilitazioni-docenti-sticky ~ #formAbilitazioniDocenti,
.cosmo-main-after-header .cosmo-onboarding-docenti-sticky ~ .alert,
.cosmo-main-after-header .cosmo-onboarding-docenti-sticky ~ #formOnboardingDocenti,
.cosmo-main-after-header .cosmo-onboarding-docenti-sticky ~ .text-muted {
    position: relative;
    z-index: 0;
}

.cosmo-abilitazioni-scuole-filtri .btn,
.cosmo-abilitazioni-docenti-filtri .btn,
.cosmo-stato-area-docente-filtri .btn {
    min-width: 6.5rem;
}

.cosmo-page-abilitazioni-scuole--has-footer {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

.cosmo-abilitazioni-scuole-page-footer {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    margin-top: 0;
}

.cosmo-abilitazioni-scuole-page-footer-inner {
    max-width: 72rem;
    margin-inline: auto;
    padding: 0.65rem clamp(0.5rem, 2.5vw, 1.15rem) calc(0.65rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    align-items: center;
    justify-content: flex-end;
    background: var(--cosmo-bianco, #fff);
    border-top: 1px solid var(--cosmo-grigio-200, #e5e7eb);
    box-shadow: 0 -4px 14px rgba(17, 24, 39, 0.06);
}

.cosmo-lista-sticky-stack > .cosmo-card--hero {
    margin-bottom: 0;
}

.cosmo-lista-sticky-stack > .cosmo-page-toolbar {
    margin-bottom: 0;
}

/* Lista docenti mobile: stack sopra la barra selezione fissa (z1040) così overlay/sheet filtri restano utilizzabili */
@media (max-width: 767.98px) {
    .cosmo-main-after-header .cosmo-lista-sticky-stack--docenti-filtri {
        z-index: 1046;
        isolation: auto;
    }
}

/* Stile hero (card blu): sticky è sullo stack .cosmo-lista-sticky-stack, non sulla card. */
.cosmo-card--hero {
    background: linear-gradient(135deg, var(--cosmo-primario) 0%, var(--cosmo-primario-chiaro) 100%);
    color: var(--cosmo-bianco);
    border: none;
    box-shadow: var(--cosmo-elev-2);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.25rem;
    overflow: visible;
}

.cosmo-card--hero h1,
.cosmo-card--hero h2,
.cosmo-card--hero .h1,
.cosmo-card--hero .h2,
.cosmo-card--hero .h3,
.cosmo-card--hero .h4 {
    color: var(--cosmo-bianco);
    margin-bottom: 0.35rem;
}

.cosmo-card--hero .text-muted,
.cosmo-card--hero .text-body {
    color: var(--cosmo-bianco) !important;
    opacity: 0.85;
}

.cosmo-card--hero a:not(.btn):not(.cosmo-icon-btn) {
    color: var(--cosmo-bianco);
    text-decoration: underline;
}

.cosmo-page-hero-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.cosmo-page-hero-text {
    flex: 1 1 auto;
    min-width: 0;
}

@media (min-width: 576px) {
    .cosmo-page-hero-text {
        flex-basis: 18rem;
    }
}

.cosmo-page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.cosmo-page-hero-actions .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cosmo-page-hero-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
}

.cosmo-page-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    align-items: center;
    margin-top: 0.6rem;
}

/* Tag/badge neutro su hero: pillola bianca piena, testo blu scuro grassetto.
   Le varianti -arancio/-verde restano colorate (sono già a contrasto pieno). */
.cosmo-card--hero .cosmo-tag,
.cosmo-card--hero .cosmo-badge {
    background: var(--cosmo-bianco);
    color: var(--cosmo-primario-scuro);
    border: 1px solid var(--cosmo-bianco);
    font-weight: 700;
}

.cosmo-card--hero .cosmo-tag.cosmo-tag-arancio {
    background: var(--cosmo-accento-arancio);
    color: var(--cosmo-nero);
    border-color: rgba(255, 255, 255, 0.5);
}

.cosmo-card--hero .cosmo-tag.cosmo-tag-verde {
    background: var(--cosmo-accento-verde);
    color: var(--cosmo-bianco);
    border-color: rgba(255, 255, 255, 0.5);
}

.cosmo-card--hero .btn-primary,
.cosmo-card--hero .btn-cosmo-primario {
    background: var(--cosmo-bianco);
    color: var(--cosmo-primario-scuro);
    border-color: var(--cosmo-bianco);
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.18);
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

.cosmo-card--hero .btn-primary:hover,
.cosmo-card--hero .btn-cosmo-primario:hover {
    background: var(--cosmo-primario-scuro);
    color: var(--cosmo-bianco);
    border-color: var(--cosmo-bianco);
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.28);
}

.cosmo-card--hero .btn-primary:focus-visible,
.cosmo-card--hero .btn-cosmo-primario:focus-visible {
    outline: 2px solid var(--cosmo-bianco);
    outline-offset: 2px;
}

.cosmo-card--hero .btn-primary:active,
.cosmo-card--hero .btn-cosmo-primario:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.22);
}

.cosmo-card--hero .btn-outline-primary {
    background: transparent;
    color: var(--cosmo-bianco);
    border-color: rgba(255, 255, 255, 0.7);
}

.cosmo-card--hero .btn-outline-primary:hover,
.cosmo-card--hero .btn-outline-primary:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: var(--cosmo-bianco);
    border-color: var(--cosmo-bianco);
}

/* Distruttiva su hero: bianco a riposo con alone rosso interno; pieno rosso in azione */
.cosmo-card--hero .btn-outline-danger {
    background: var(--cosmo-bianco);
    color: var(--cosmo-errore);
    border-color: var(--cosmo-bianco);
    box-shadow:
        inset 0 0 0 1px rgba(220, 38, 38, 0.35),
        0 2px 6px rgba(17, 24, 39, 0.18);
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

.cosmo-card--hero .btn-outline-danger:hover,
.cosmo-card--hero .btn-outline-danger:focus-visible,
.cosmo-card--hero .btn-outline-danger:active {
    background: var(--cosmo-errore);
    color: var(--cosmo-bianco);
    border-color: var(--cosmo-errore);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
}

.cosmo-card--hero .btn-outline-danger:focus-visible {
    outline: 2px solid var(--cosmo-bianco);
    outline-offset: 2px;
}

.cosmo-card--hero .btn-outline-danger:active {
    transform: translateY(1px);
}

/* Conferma irreversibile su hero: verde pieno con stacco e feedback in azione */
.cosmo-card--hero .btn-cosmo-verde {
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

.cosmo-card--hero .btn-cosmo-verde:hover {
    background: var(--cosmo-accento-verde-scuro);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.5);
}

.cosmo-card--hero .btn-cosmo-verde:focus-visible {
    outline: 2px solid var(--cosmo-bianco);
    outline-offset: 2px;
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.45);
}

.cosmo-card--hero .btn-cosmo-verde:active {
    transform: translateY(1px);
    box-shadow: 0 3px 6px rgba(16, 185, 129, 0.4);
}

/* Bottoni icona tondi su hero: cerchio leggibile + inversione blu/bianco in azione */
.cosmo-card--hero .cosmo-icon-btn {
    background: var(--cosmo-bianco);
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: var(--cosmo-primario);
    text-decoration: none;
    box-shadow:
        inset 0 0 0 1px rgba(29, 78, 216, 0.18),
        0 2px 6px rgba(17, 24, 39, 0.15);
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

.cosmo-card--hero .cosmo-icon-btn .cosmo-icon {
    --icon-size: 22px;
    stroke-width: 2.4;
}

.cosmo-card--hero .cosmo-icon-btn:hover {
    background: var(--cosmo-primario);
    color: var(--cosmo-bianco);
    border-color: var(--cosmo-bianco);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 4px 12px rgba(17, 24, 39, 0.25);
}

.cosmo-card--hero .cosmo-icon-btn:focus-visible {
    outline: 2px solid var(--cosmo-bianco);
    outline-offset: 2px;
    /* sopra il focus ring globale: su hero serve contrasto chiaro su blu */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 4px 12px rgba(17, 24, 39, 0.25);
}

.cosmo-card--hero .cosmo-icon-btn:active {
    transform: translateY(1px);
}

/* Banner di stato annidato dentro la hero (es. pratica in attesa) */
.cosmo-hero-stato-strip {
    margin-top: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.45rem;
    background: var(--cosmo-hero-strip-bg);
    color: var(--cosmo-nero);
    border-left: 4px solid var(--cosmo-accento-arancio);
    font-size: 0.92rem;
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.05);
}

.cosmo-hero-stato-strip strong {
    color: var(--cosmo-accento-arancio-scuro, var(--cosmo-nero));
}

/* Section card: contenitore principale, con bordo sinistro blu accentato */
.cosmo-card--section {
    border: 1px solid var(--cosmo-grigio-200);
    border-left: 4px solid var(--cosmo-bordo-accent);
    box-shadow: var(--cosmo-elev-1);
    padding: 1.25rem 1.4rem;
}

.cosmo-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cosmo-section-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cosmo-section-head-text > h2,
.cosmo-section-head-text > .h2,
.cosmo-section-head-text > .h5,
.cosmo-section-head-text > .h6 {
    margin: 0;
    line-height: 1.2;
}

.cosmo-section-head-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cosmo-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 0.6rem;
    background: var(--cosmo-superficie-3);
    color: var(--cosmo-primario);
    border: 1px solid rgba(29, 78, 216, 0.18);
}

.cosmo-section-icon .cosmo-icon {
    --icon-size: 22px;
}

/* Sub card: contenuti annidati dentro una Section */
.cosmo-card--sub {
    background: var(--cosmo-superficie-3);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: 0.4rem;
    box-shadow: none;
    padding: 0.9rem 1rem;
}

.cosmo-card--sub .cosmo-card-sub-title {
    margin-bottom: 0.5rem;
    color: var(--cosmo-primario-scuro);
}

/* Toolbar di pagina: striscia bianca sotto la hero per filtri e azioni */
.cosmo-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    background: var(--cosmo-bianco);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: var(--cosmo-radius);
    box-shadow: var(--cosmo-elev-1);
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
}

.cosmo-page-toolbar > .cosmo-page-toolbar-titolo {
    font-weight: 600;
    color: var(--cosmo-grigio-500);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.25rem;
}

.cosmo-page-toolbar-spacer {
    flex: 1 1 auto;
}

.cosmo-page-toolbar > .cosmo-applied-filters,
.cosmo-page-toolbar > .cosmo-filters-panel {
    flex: 1 1 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

.cosmo-page-toolbar-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-left: auto;
}

.cosmo-docenti-riepilogo-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: var(--cosmo-bianco);
    border: 1px solid var(--cosmo-grigio-200);
    border-radius: var(--cosmo-radius);
    box-shadow: var(--cosmo-elev-1);
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.9rem;
}

.cosmo-docenti-riepilogo-count {
    font-size: 0.9rem;
    color: var(--cosmo-grigio-700);
}

.cosmo-docenti-riepilogo-count strong {
    color: var(--cosmo-nero);
}

.cosmo-docenti-riepilogo-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
}

.cosmo-filter-chip--muted {
    color: var(--cosmo-grigio-500);
    background: var(--cosmo-grigio-100);
}

/* Icona Lucide unificata (sprite SVG) */
.cosmo-icon {
    width: var(--icon-size, 20px);
    height: var(--icon-size, 20px);
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.btn .cosmo-icon {
    --icon-size: 18px;
    margin-right: 0.4rem;
}

.btn .cosmo-icon:last-child:not(:first-child) {
    margin-right: 0;
    margin-left: 0.4rem;
}

.btn .cosmo-icon:only-child {
    margin: 0;
}

/* Adattamenti mobile per le card del nuovo sistema */
@media (max-width: 575.98px) {
    .cosmo-hero {
        padding: 0.9rem 1rem;
    }

    .cosmo-card--hero {
        /* hero compatta in stato sticky su mobile per non mangiare la viewport */
        padding: 0.9rem 1rem;
    }

    .cosmo-card--section {
        padding: 1rem 1.05rem;
    }

    .cosmo-section-icon {
        width: 2.1rem;
        height: 2.1rem;
    }

    .cosmo-section-icon .cosmo-icon {
        --icon-size: 19px;
    }

    .cosmo-page-hero-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .cosmo-docenti-riepilogo-toolbar {
        padding: 0.5rem 0.7rem;
    }
}

/* Riduzione movimento: transizioni/spostamenti disattivati sui controlli nella hero */
@media (prefers-reduced-motion: reduce) {
    .cosmo-card--hero .btn-primary,
    .cosmo-card--hero .btn-cosmo-primario,
    .cosmo-card--hero .btn-outline-danger,
    .cosmo-card--hero .cosmo-icon-btn,
    .cosmo-card--hero .btn-cosmo-verde {
        transition: none;
    }

    .cosmo-card--hero .btn-primary:active,
    .cosmo-card--hero .btn-cosmo-primario:active,
    .cosmo-card--hero .btn-outline-danger:active,
    .cosmo-card--hero .cosmo-icon-btn:active,
    .cosmo-card--hero .btn-cosmo-verde:active {
        transform: none;
    }
}

/* =========================================================================
   T28 — Alert Cosmo (4 varianti) — sostituiscono `alert-danger/-success/-warning/-info`
   di Bootstrap nelle viste, usando token e palette Cosmo. Funzionano sia
   come classe singola (`cosmo-alert cosmo-alert-warning`) sia in addizione
   alle classi Bootstrap già presenti, perché ridefiniscono in cascata
   `--bs-alert-bg/-color/-border-color`. Le icone Lucide del tema sono
   gestite dalle viste (gli alert non importano un'icona da soli).
   ========================================================================= */

.alert,
.cosmo-alert {
    border-radius: var(--cosmo-radius);
    border-width: 1px;
    border-style: solid;
    box-shadow: var(--cosmo-elev-1);
    font-weight: 500;
}

.alert.alert-danger,
.cosmo-alert.cosmo-alert-danger {
    --bs-alert-bg: var(--cosmo-alert-danger-bg);
    --bs-alert-color: var(--cosmo-errore-scuro);
    --bs-alert-border-color: var(--cosmo-alert-danger-border);
    --bs-alert-link-color: var(--cosmo-errore-scuro);
    background-color: var(--cosmo-alert-danger-bg);
    color: var(--cosmo-errore-scuro);
    border-color: var(--cosmo-alert-danger-border);
    border-left: 4px solid var(--cosmo-errore);
}

.alert.alert-success,
.cosmo-alert.cosmo-alert-success {
    --bs-alert-bg: var(--cosmo-alert-success-bg);
    --bs-alert-color: var(--cosmo-accento-verde-scuro);
    --bs-alert-border-color: var(--cosmo-alert-success-border);
    --bs-alert-link-color: var(--cosmo-accento-verde-scuro);
    background-color: var(--cosmo-alert-success-bg);
    color: var(--cosmo-accento-verde-scuro);
    border-color: var(--cosmo-alert-success-border);
    border-left: 4px solid var(--cosmo-accento-verde);
}

.alert.alert-warning,
.cosmo-alert.cosmo-alert-warning {
    --bs-alert-bg: var(--cosmo-alert-warning-bg);
    --bs-alert-color: var(--cosmo-accento-arancio-scuro);
    --bs-alert-border-color: var(--cosmo-alert-warning-border);
    --bs-alert-link-color: var(--cosmo-accento-arancio-scuro);
    background-color: var(--cosmo-alert-warning-bg);
    color: var(--cosmo-nero);
    border-color: var(--cosmo-alert-warning-border);
    border-left: 4px solid var(--cosmo-accento-arancio);
}

.alert.alert-info,
.cosmo-alert.cosmo-alert-info {
    --bs-alert-bg: var(--cosmo-alert-info-bg);
    --bs-alert-color: var(--cosmo-primario-scuro);
    --bs-alert-border-color: var(--cosmo-alert-info-border);
    --bs-alert-link-color: var(--cosmo-primario-scuro);
    background-color: var(--cosmo-alert-info-bg);
    color: var(--cosmo-primario-scuro);
    border-color: var(--cosmo-alert-info-border);
    border-left: 4px solid var(--cosmo-primario);
}

.alert hr {
    border-top-color: currentColor;
    opacity: 0.18;
}

.alert .btn-close {
    /* Bottoni di chiusura sugli alert: stesso colore del testo dell'alert */
    color: inherit;
    opacity: 0.7;
}

.alert .btn-close:hover,
.alert .btn-close:focus-visible {
    opacity: 1;
}

/* Validazione form: il riepilogo errori usa di solito `alert-danger`.
   Manteniamo la stessa firma cromatica dei nostri alert anche se la classe
   `validation-summary-errors` viene applicata da MVC senza alert-* esplicito. */
.validation-summary-errors:not(.alert),
ul.validation-summary-errors:not(.alert) {
    background-color: var(--cosmo-alert-danger-bg);
    color: var(--cosmo-errore-scuro);
    border: 1px solid var(--cosmo-alert-danger-border);
    border-left: 4px solid var(--cosmo-errore);
    border-radius: var(--cosmo-radius);
    padding: 0.75rem 1rem;
    box-shadow: var(--cosmo-elev-1);
}

/* Login Identity — mostra / nascondi password */
.cosmo-login-password-field .cosmo-login-password-input {
    padding-right: 2.75rem;
}

.cosmo-login-password-toggle {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cosmo-grigio-600);
    cursor: pointer;
    line-height: 0;
}

.cosmo-login-password-toggle:hover,
.cosmo-login-password-toggle:focus-visible {
    color: var(--cosmo-primario);
    background: var(--cosmo-superficie-2-selezionata);
    outline: none;
}

/* Login Identity — prompt biometrico principale */
.cosmo-passkey-sheet-wrap {
    min-height: min(72vh, 520px);
    display: flex;
    align-items: flex-end;
}

.cosmo-passkey-sheet {
    width: 100%;
    background: #fff;
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.2);
    padding: 1.5rem 1rem 1.1rem;
}

.cosmo-passkey-sheet__title {
    margin: 0;
    text-align: center;
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--cosmo-nero);
}

.cosmo-passkey-sheet__icon {
    margin: 1rem auto 0.55rem;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    color: var(--cosmo-grigio-600);
}

.cosmo-passkey-sheet__subtitle {
    margin: 0 0 1rem;
    text-align: center;
    color: var(--cosmo-grigio-700);
    font-size: 0.98rem;
}

/* Login passkey — attesa prima del prompt di sistema */
.cosmo-passkey-sheet-wrap--signin-wait {
    align-items: center;
    min-height: min(78vh, 560px);
}

.cosmo-passkey-sheet.cosmo-passkey-signin {
    border-radius: 1.25rem;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    padding: 1.75rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.cosmo-passkey-signin__top {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.cosmo-passkey-signin__logo {
    height: auto;
    width: min(200px, 72vw);
    max-height: 48px;
    object-fit: contain;
}

.cosmo-passkey-signin__wait {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 12rem;
}

.cosmo-passkey-signin__message {
    margin: 0;
    max-width: 22rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cosmo-nero);
}

.cosmo-passkey-signin__line {
    display: block;
}

.cosmo-passkey-signin__line--sub {
    margin-top: 0.35rem;
    font-weight: 500;
    color: var(--cosmo-grigio-700);
    font-size: 0.98rem;
}

.cosmo-passkey-signin__ellipsis {
    display: inline-block;
    vertical-align: baseline;
    overflow: hidden;
    max-width: 3ch;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
    font-weight: 500;
}

.cosmo-passkey-signin__ellipsis-dots {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    animation: cosmoPasskeyEllipsisCycle 1.6s ease-in-out infinite;
}

@keyframes cosmoPasskeyEllipsisCycle {
    0%,
    6% {
        width: 0;
    }

    18%,
    30% {
        width: 1ch;
    }

    42%,
    54% {
        width: 2ch;
    }

    66%,
    78% {
        width: 3ch;
    }

    94%,
    100% {
        width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cosmo-passkey-signin__ellipsis-dots {
        animation: none;
        width: 3ch;
    }
}

.cosmo-passkey-signin--error .cosmo-passkey-signin__wait {
    display: none;
}

.cosmo-passkey-signin--error {
    justify-content: flex-start;
}

/* Schermata errore autenticazione */
body.cosmo-auth-error-page {
    background: #000;
    color: #fff;
}

body.cosmo-auth-error-page .cosmo-site-header,
body.cosmo-auth-error-page .offcanvas,
body.cosmo-auth-error-page .cosmo-footer {
    display: none !important;
}

body.cosmo-auth-error-page .container {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.cosmo-auth-error-page .cosmo-main-after-header {
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
}

.cosmo-auth-error-screen {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    padding: 1.75rem 1rem;
}

.cosmo-auth-error-screen__icon {
    color: #f59e0b;
}

.cosmo-auth-error-screen__title {
    margin: 0;
    font-size: clamp(1.4rem, 4.4vw, 1.85rem);
    color: #fff;
    font-weight: 800;
}

.cosmo-auth-error-screen__subtitle {
    margin: 0;
    color: #d1d5db;
    font-size: 1rem;
}

.cosmo-auth-error-screen__actions {
    width: min(100%, 34rem);
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.cosmo-auth-error-screen__actions form {
    margin: 0;
}

/* Dashboard scuole (D) - viewport fit */
.cosmo-dashboard-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.1rem 0.2rem 0.2rem 0.2rem;
}

.cosmo-dashboard-intro-title {
    font-size: clamp(1.52rem, 5.9vw, 1.9rem);
    font-weight: 700;
    line-height: 1.08;
    color: var(--cosmo-primario-scuro);
    letter-spacing: -0.015em;
}

.cosmo-dashboard-intro-subtitle {
    font-size: clamp(1rem, 3.8vw, 1.16rem);
    line-height: 1.2;
    font-weight: 500;
    color: var(--cosmo-grigio-700);
}

.cosmo-dashboard-scuole {
    gap: 0.6rem;
}

.cosmo-dashboard-scuole-grid {
    align-items: stretch;
}

.cosmo-dashboard-scuole .cosmo-home-path-card {
    min-height: clamp(8.1rem, 19vh, 10.4rem);
}

.cosmo-dashboard-scuole .cosmo-home-path-inner {
    gap: clamp(0.3rem, 1.2vh, 0.55rem);
    padding: clamp(0.7rem, 1.8vh, 0.95rem) 0.9rem 0.7rem 0.8rem;
}

.cosmo-dashboard-scuole .cosmo-home-path-title {
    margin-top: 0;
    font-size: clamp(1.95rem, 7.1vw, 2.35rem);
    line-height: 1.12;
}

.cosmo-dashboard-scuole .cosmo-home-path-icon {
    width: clamp(4.3rem, 15vw, 5.6rem);
    height: auto;
}

.cosmo-dashboard-scuole .cosmo-home-path-icon .cosmo-icon,
.cosmo-dashboard-scuole .cosmo-home-path-card--scuola .cosmo-home-path-icon .cosmo-icon {
    --icon-size: clamp(64px, 13vw, 86px);
}

.cosmo-dashboard-scuole .cosmo-home-path-continue {
    margin-top: auto;
}

@media (max-width: 575.98px) {
    .cosmo-dashboard-scuole .cosmo-home-path-card {
        min-height: clamp(7.4rem, 18vh, 9.2rem);
    }

    .cosmo-dashboard-scuole .cosmo-home-path-title {
        font-size: clamp(1.82rem, 7.6vw, 2.12rem);
    }

    .cosmo-dashboard-scuole .cosmo-home-path-icon .cosmo-icon,
    .cosmo-dashboard-scuole .cosmo-home-path-card--scuola .cosmo-home-path-icon .cosmo-icon {
        --icon-size: clamp(56px, 12.6vw, 78px);
    }
}

@media (min-width: 992px) {
    .cosmo-dashboard-intro {
        padding: 0.15rem 0.2rem 0.15rem 0.25rem;
    }

    .cosmo-dashboard-intro-title {
        font-size: clamp(1.42rem, 1.9vw, 1.88rem);
    }

    .cosmo-dashboard-intro-subtitle {
        font-size: clamp(0.95rem, 1.2vw, 1.12rem);
    }

    .cosmo-dashboard-scuole .cosmo-home-path-card {
        min-height: clamp(9.4rem, 25vh, 12.2rem);
    }

    .cosmo-dashboard-scuole .cosmo-home-path-inner {
        gap: 0.75rem;
        padding: 0.95rem 0.95rem 0.85rem 0.85rem;
    }

    .cosmo-dashboard-scuole .cosmo-home-path-title {
        font-size: clamp(1.92rem, 2.15vw, 2.4rem);
    }

    .cosmo-dashboard-scuole .cosmo-home-path-icon .cosmo-icon,
    .cosmo-dashboard-scuole .cosmo-home-path-card--scuola .cosmo-home-path-icon .cosmo-icon {
        --icon-size: clamp(60px, 3.4vw, 90px);
    }
}

/* --- Ricerca docenti: schermata filtri E (card espandibile, altezza dal contenuto) --- */
.cosmo-page-filtri-docenti .cosmo-filtri-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cosmo-filtri-card-inner {
    position: relative;
}

/* Chiuso: solo il fronte è in flusso; il retro è rimosso dal layout e dalla navigazione tastiera */
.cosmo-filtri-card-inner:not(.is-flipped) .cosmo-filtri-card-retro {
    display: none;
}

.cosmo-filtri-card-inner:not(.is-flipped) .cosmo-filtri-card-fronte {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Aperto: retro in flusso (altezza intrinseca); fronte nascosto */
.cosmo-filtri-card-inner.is-flipped .cosmo-filtri-card-fronte {
    display: none;
}

.cosmo-filtri-card-fronte,
.cosmo-filtri-card-retro {
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.cosmo-filtri-card-inner.is-flipped .cosmo-filtri-card-retro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
}

/* Single-select (e strumento): retro limitato in altezza */
.cosmo-page-filtri-docenti .cosmo-filtri-card:not([data-kind="multi"]) .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-card-retro {
    max-height: min(82dvh, calc(100svh - 5.5rem));
}

/* Multi-select: overlay viewport — solo le opzioni scrollano, OK sempre sul fondo schermo */
.cosmo-page-filtri-docenti .cosmo-filtri-card[data-kind="multi"] .cosmo-filtri-card-inner.is-flipped {
    position: fixed;
    inset: 0;
    /* Sopra navbar (1030), sotto offcanvas menu (1072) */
    z-index: 1045;
    display: flex;
    flex-direction: column;
    padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
    padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    background: #f8fafc;
    overflow: hidden;
    overscroll-behavior: contain;
}

.cosmo-page-filtri-docenti .cosmo-filtri-card[data-kind="multi"] .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-card-retro {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
}

/* Stile musicale: selezionati in fascia fissa sopra; solo il resto dell’elenco scorre */
.cosmo-page-filtri-docenti .cosmo-filtri-card--stile.cosmo-filtri-card[data-kind="multi"] .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-multi-split {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: 0.5rem;
}

.cosmo-page-filtri-docenti .cosmo-filtri-card--stile.cosmo-filtri-card[data-kind="multi"] .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-opt-pinned {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex-shrink: 0;
    max-height: min(28vh, 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cosmo-page-filtri-docenti .cosmo-filtri-card--stile.cosmo-filtri-card[data-kind="multi"] .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-opt-stack--scroll[data-role="stile-scroll"] {
    flex: 1 1 0;
    min-height: 0;
}

.cosmo-page-filtri-docenti .cosmo-filtri-card[data-kind="multi"] .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-opt-stack--scroll,
.cosmo-page-filtri-docenti .cosmo-filtri-card[data-kind="multi"] .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-opt-stack--giorni,
.cosmo-page-filtri-docenti .cosmo-filtri-card[data-kind="multi"] .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-loc-scroll {
    flex: 1 1 0;
    min-height: 0;
}

.cosmo-page-filtri-docenti .cosmo-filtri-card[data-kind="multi"] .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-ok {
    flex-shrink: 0;
    margin-top: 0.75rem;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06);
}

body.cosmo-filtri-multi-panel-open {
    overflow: hidden;
}

/* Barra «Cerca» nascosta mentre il retro di un filtro è aperto (evita confusione con OK) */
.cosmo-page-filtri-docenti .cosmo-filtri-form--card-open .cosmo-filtri-cta-sticky {
    display: none;
}

.cosmo-page-filtri-docenti .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-retro-title,
.cosmo-page-filtri-docenti .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-segmented {
    flex-shrink: 0;
}

/* Solo l’elenco opzioni scorre; OK resta nel pannello visibile */
.cosmo-page-filtri-docenti .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-opt-stack--scroll,
.cosmo-page-filtri-docenti .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-opt-stack--giorni {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cosmo-page-filtri-docenti .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-loc-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cosmo-page-filtri-docenti .cosmo-filtri-card-inner.is-flipped .cosmo-filtri-ok {
    flex-shrink: 0;
    margin-top: auto;
}

.cosmo-filtri-card-fronte {
    text-align: left;
    cursor: pointer;
    border: none;
    font: inherit;
    color: inherit;
}

.cosmo-filtri-card-accent {
    flex: 0 0 5px;
    border-radius: 4px;
    align-self: stretch;
}

.cosmo-filtri-card-accent--docente {
    background: linear-gradient(180deg, #059669, #10b981);
}

.cosmo-filtri-card-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: #059669;
}

.cosmo-filtri-card-icon .cosmo-icon {
    --icon-size: 22px;
}

.cosmo-filtri-card-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
}

.cosmo-page-filtri-docenti .cosmo-filtri-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    width: 100%;
}

.cosmo-page-filtri-docenti .cosmo-filtri-card-head .cosmo-filtri-card-title {
    min-width: 0;
}

.cosmo-page-filtri-docenti .cosmo-filtri-applied {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 999px;
    background: linear-gradient(145deg, #059669, #10b981);
    box-shadow: 0 1px 4px rgba(5, 150, 105, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.cosmo-page-filtri-docenti .cosmo-filtri-applied-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.cosmo-page-filtri-docenti .cosmo-filtri-applied-icon .cosmo-icon {
    --icon-size: 15px;
    color: #fff;
}

.cosmo-filtri-card-title {
    font-weight: 650;
    font-size: 1rem;
    color: #064e3b;
}

.cosmo-filtri-badge {
    font-size: 0.78rem;
    font-weight: 500;
    color: #047857;
    line-height: 1.25;
    word-break: break-word;
}

.cosmo-filtri-card-chevron {
    flex: 0 0 auto;
    align-self: center;
    opacity: 0.45;
}

.cosmo-filtri-retro-title {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #334155;
    letter-spacing: -0.01em;
}

.cosmo-filtri-opt-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 0 1 auto;
    min-height: 0;
}

.cosmo-filtri-opt-stack--scroll {
    max-height: min(42vh, 260px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cosmo-filtri-opt-stack--giorni {
    max-height: min(55vh, 340px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tile selezionabili (radio/checkbox) */
.cosmo-page-filtri-docenti .cosmo-filtri-radio-row,
.cosmo-page-filtri-docenti .cosmo-filtri-check-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.65rem 0.75rem;
    min-height: 2.75rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.0625rem;
    line-height: 1.35;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fafafa;
    color: #0f172a;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cosmo-page-filtri-docenti .cosmo-filtri-radio-row:hover,
.cosmo-page-filtri-docenti .cosmo-filtri-check-row:hover {
    background: rgba(5, 150, 105, 0.07);
    border-color: rgba(5, 150, 105, 0.35);
}

.cosmo-page-filtri-docenti .cosmo-filtri-radio-row:has(input:checked),
.cosmo-page-filtri-docenti .cosmo-filtri-check-row:has(input:checked) {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.11);
    box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.35);
    font-weight: 550;
}

.cosmo-page-filtri-docenti .cosmo-filtri-radio-row input[type="radio"],
.cosmo-page-filtri-docenti .cosmo-filtri-check-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: #059669;
}

/* P.IVA: segmented control */
.cosmo-page-filtri-docenti .cosmo-filtri-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 3px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(241, 245, 249, 0.9);
}

.cosmo-page-filtri-docenti .cosmo-filtri-segment {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 2.75rem;
    padding: 0.4rem 0.35rem;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 550;
    line-height: 1.25;
    text-align: center;
    color: #334155;
    border-radius: 9px;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.cosmo-page-filtri-docenti .cosmo-filtri-segment input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.cosmo-page-filtri-docenti .cosmo-filtri-segment:hover {
    background: rgba(255, 255, 255, 0.85);
    color: #064e3b;
}

.cosmo-page-filtri-docenti .cosmo-filtri-segment:has(input:checked) {
    background: #fff;
    color: #047857;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(5, 150, 105, 0.45);
}

.cosmo-page-filtri-docenti .cosmo-filtri-segment:has(input:focus-visible) {
    outline: 2px solid #059669;
    outline-offset: 2px;
    z-index: 1;
}

.cosmo-filtri-loc-grid {
    gap: 0.45rem;
}

.cosmo-filtri-loc-grid--row {
    display: flex;
    flex-wrap: wrap;
}

.cosmo-filtri-loc-grid--4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.cosmo-filtri-loc-grid--stack {
    display: flex;
    flex-direction: column;
}

.cosmo-filtri-loc-cell {
    flex: 1 1 auto;
    min-width: min(100%, 140px);
}

.cosmo-filtri-ok {
    min-height: 2.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.cosmo-filtri-cta-sticky {
    position: sticky;
    bottom: 0;
    z-index: 30;
    padding: 0.65rem 0  calc(0.65rem + env(safe-area-inset-bottom, 0));
    margin-top: 0.5rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.92) 28%, #f8fafc 100%);
    backdrop-filter: blur(6px);
}

.cosmo-page-filtri-docenti .cosmo-filtri-cta-sticky {
    display: flex;
    justify-content: flex-end;
}

.cosmo-page-filtri-docenti .cosmo-filtri-cerca-btn {
    width: auto;
}

.cosmo-filtri-cerca-btn:disabled {
    opacity: 0.55;
}