/* ==========================================================================
   Calendario Lezioni - stile della parte interna (gestione)
   (ottobre 2026)

   Stessi colori del calendario (calendario.css): ardesia per le intestazioni,
   nebbia per lo sfondo, una sola tinta per ogni azione (blu modifica, rosso
   elimina). Carattere Titillium Web, quello dei siti della pubblica
   amministrazione italiana (Designers Italia), salvato nel sito.

   Vale per le pagine con il body di classe "gestione" (main_layout.php e
   info_layout.php); le pagine senza login hanno anche "pubblico" (accesso,
   recupero password, chi siamo, contatti, privacy: sezione in fondo).
   Il totem (lezioni/ledisplay) resta fuori.
   Togliendo questo file dal layout si torna allo stile precedente.
   ========================================================================== */

@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/titillium/titillium-web-400.woff2") format("woff2");
}
@font-face {
    font-family: "Titillium Web";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/titillium/titillium-web-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/titillium/titillium-web-600.woff2") format("woff2");
}
@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/titillium/titillium-web-700.woff2") format("woff2");
}

:root {
    --g-font: "Titillium Web", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

    --g-inchiostro: #1e2b37;
    --g-ardesia: #2f3c48;
    --g-ardesia-scuro: #222d37;
    --g-ardesia-chiaro: #46525e;
    --g-tenue: #5b6875;
    --g-segnaposto: #8793a0;
    --g-nebbia: #eef1f4;
    --g-superficie: #f7f9fb;
    --g-linea: #dde3e9;
    --g-linea-campo: #c9d2db;
    --g-adesso: #c2410c;

    --g-blu: #2563a6;        --g-blu-sfondo: #eaf2fb;
    --g-rosso: #b42318;      --g-rosso-sfondo: #fdeeed;
    --g-verde: #0f766e;      --g-verde-sfondo: #e8f5f3;
    --g-ambra: #a16207;      --g-ambra-sfondo: #fbf4e6;

    --g-r-campo: 10px;
    --g-r-scheda: 14px;
    --g-r-finestra: 18px;

    --g-ombra-1: 0 1px 2px rgba(30, 43, 55, .05), 0 2px 8px rgba(30, 43, 55, .04);
    --g-ombra-2: 0 10px 30px rgba(30, 43, 55, .14);
    --g-ombra-finestra: 0 28px 70px rgba(30, 43, 55, .32);
    --g-anello: 0 0 0 4px rgba(37, 99, 166, .18);
}


/* --------------------------------------------------------------------------
   Base: sfondo, carattere, titoli
   -------------------------------------------------------------------------- */

body.gestione {
    background: var(--g-nebbia);
    color: var(--g-inchiostro);
}

/* custom-style.css forza Arial su BODY/DIV/P/TH: qui vale il carattere nuovo */
body.gestione,
.gestione :is(div, p, span, a, label, li, td, th, small, strong, b, em, h1, h2, h3, h4, h5, h6, legend, input, select, textarea, button, option) {
    font-family: var(--g-font);
}

.gestione :is(div, p) {
    font-size: 15.5px;
}

/* niente colore fisso: i titoli prendono quello del riquadro (bianco nelle fasce scure) */
.gestione :is(h1, h2, h3, h4, h5, h6) {
    letter-spacing: -.01em;
}

/* Solo i link veri (es. le email): i pulsanti fatti con <a>, come le icone modifica/elimina
   del calendario, tengono i loro colori (prima diventavano blu su fondo colorato) */
.gestione :where(a:not(.btn)) {
    color: var(--g-blu);
}

.gestione ::selection {
    background: rgba(37, 99, 166, .18);
}

.gestione :focus-visible {
    outline: 2px solid var(--g-blu);
    outline-offset: 2px;
}

.gestione .text-muted {
    color: var(--g-tenue) !important;
}


/* --------------------------------------------------------------------------
   Barra in alto: bianca, voci con sfondo morbido al passaggio del mouse
   -------------------------------------------------------------------------- */

.gestione #topbar.navbar {
    background: #fff !important;
    border-bottom: 1px solid var(--g-linea);
    box-shadow: 0 1px 0 rgba(30, 43, 55, .02), 0 6px 18px rgba(30, 43, 55, .05);
}

.gestione #topbar .navbar-nav .nav-link {
    color: var(--g-inchiostro);
    font-weight: 600;
    border-radius: var(--g-r-campo);
    padding: .45rem .8rem;
    transition: background-color .15s ease, color .15s ease;
}

.gestione #topbar .navbar-nav .nav-link:hover,
.gestione #topbar .navbar-nav .show > .nav-link {
    background: var(--g-nebbia);
    color: var(--g-inchiostro);
}

.gestione #topbar .navbar-nav .nav-link.active {
    background: var(--g-nebbia);
    box-shadow: inset 0 -2px 0 var(--g-adesso);
}

.gestione #topbar .navbar-nav .nav-link .fa {
    color: var(--g-tenue);
    margin-right: .15rem;
}

/* voce della sezione aperta (anche quando la pagina è dentro il suo sottomenu) */
.gestione #topbar .navbar-nav .nav-link.active .fa {
    color: var(--g-inchiostro);
}

/* Utente collegato: logo o foto in un cerchio, oppure le iniziali */
.gestione #topbar .nav-link.dropdown-toggle:has(.menu-avatar) {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 40px;
    min-width: 40px;
    max-width: 112px;
    padding: 5px 7px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--g-linea);
    box-shadow: 0 1px 3px rgba(30, 43, 55, .10);
    overflow: hidden;
    vertical-align: middle;
}

.menu-avatar img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 98px;
    object-fit: contain;
}

.menu-avatar-iniziali {
    width: 40px;
    padding: 0;
    border-radius: 50%;
    background: var(--g-ardesia);
    border-color: var(--g-ardesia);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.gestione .menu-saluto {
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Menu a tendina
   -------------------------------------------------------------------------- */

.gestione .dropdown-menu {
    border: 1px solid var(--g-linea);
    border-radius: var(--g-r-scheda);
    box-shadow: var(--g-ombra-2);
    padding: .4rem;
}

.gestione .dropdown-item {
    border-radius: 8px;
    padding: .5rem .8rem;
    color: var(--g-inchiostro);
    font-weight: 500;
}

.gestione .dropdown-item:hover,
.gestione .dropdown-item:focus {
    background: var(--g-nebbia);
    color: var(--g-inchiostro);
}

.gestione .dropdown-item.active,
.gestione .dropdown-item:active {
    background: var(--g-ardesia);
    color: #fff;
}

/* Tendine docenti e insegnamenti in Gestione lezioni: alte al massimo quanto lo schermo, ricerca
   ferma in cima. Prima la tendina docenti era alta 2.500 px, si apriva verso l'alto e i primi
   nomi finivano sotto la barra del menu. */
.gestione .filtro-tendina-menu {
    max-height: min(65vh, 520px);
    min-width: 280px;
    max-width: min(90vw, 440px);
    overflow-y: auto;
    padding-top: 0;
}

/* Gli insegnamenti hanno nomi lunghi: vanno a capo invece di allargare la tendina */
.gestione .filtro-tendina-menu .dropdown-item {
    white-space: normal;
}

.filtro-tendina-cerca {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -.4rem .3rem;
    padding: .5rem .4rem;
    background: #fff;
    border-bottom: 1px solid var(--g-linea);
}

.filtro-tendina-vuoto {
    margin: 0;
    padding: .5rem .8rem;
    color: var(--g-tenue);
}

.gestione .dropdown-item.active .fa,
.gestione .dropdown-item:active .fa {
    color: #fff;
}

.gestione .dropdown-item .fa {
    width: 1.2em;
    color: var(--g-tenue);
}

.gestione .dropdown-item img {
    height: 18px;
    width: auto;
}

.gestione .dropdown-divider {
    border-color: var(--g-linea);
    margin: .35rem .2rem;
}


/* --------------------------------------------------------------------------
   Intestazione delle pagine (elenchi, schede, moduli)
   -------------------------------------------------------------------------- */

.gestione section.page > .bg-light:first-child {
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 1.6rem !important;
    padding-bottom: .9rem !important;
    margin-bottom: .4rem !important;
}

.gestione .record-title,
.gestione .page-title,
.gestione section.page h4.record-title {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--g-inchiostro);
}

/* Pulsante "Nuovo ..." accanto alla ricerca, non in mezzo alla pagina.
   Con due pulsanti (Docenti: «Nuovo docente» e «Università di più docenti») vanno a capo:
   su una riga sola uscivano dallo schermo del telefono e la pagina scorreva di lato */
.gestione section.page > .bg-light:first-child .row > .col-sm-3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: .5rem;
}

/* Con due pulsanti la colonna (col-sm-3, un quarto della riga) si allarga quanto serve:
   sul computer restano su una riga invece di andare a capo */
@media (min-width: 576px) {
    .gestione section.page > .bg-light:first-child .row > .col-sm-3:has(> .btn ~ .btn) {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
}

.gestione form.search .form-control {
    border-radius: var(--g-r-campo) 0 0 var(--g-r-campo);
    min-height: 44px;
}

.gestione form.search .btn {
    border-radius: 0 var(--g-r-campo) var(--g-r-campo) 0;
    min-width: 46px;
}

.gestione .page-header-breadcrumbs .breadcrumb {
    background: #fff;
    border: 1px solid var(--g-linea);
    border-radius: 999px;
    padding: .3rem .9rem !important;
    display: inline-flex;
    font-size: .9rem;
}


/* --------------------------------------------------------------------------
   Schede bianche (contenuto di elenchi, moduli e schede di dettaglio)
   -------------------------------------------------------------------------- */

.gestione section.page .page-content {
    background: #fff !important;
    border: 1px solid var(--g-linea);
    border-radius: var(--g-r-scheda);
    box-shadow: var(--g-ombra-1);
}

.gestione section.page .page-content.p-3 {
    padding: 1.6rem 1.75rem !important;
}

.gestione .card {
    border: 1px solid var(--g-linea);
    border-radius: var(--g-r-scheda);
    box-shadow: var(--g-ombra-1);
}

.gestione .card > .card-header:first-child {
    border-radius: calc(var(--g-r-scheda) - 1px) calc(var(--g-r-scheda) - 1px) 0 0;
}

.gestione .card-header {
    background: var(--g-superficie);
    border-bottom: 1px solid var(--g-linea);
    font-weight: 700;
    padding: .9rem 1.25rem;
}

.gestione .card-header :is(h1, h2, h3, h4, h5, h6),
.gestione .card-title {
    font-weight: 700;
    font-size: 1.3rem;
}

/* Le intestazioni scure come le targhe del calendario */
.gestione .card-header.bg-primary,
.gestione .card-header.bg-success,
.gestione .card-header.bg-dark,
.gestione .card-header.bg-info {
    background: var(--g-ardesia) !important;
    border-bottom-color: var(--g-ardesia);
    color: #fff;
}

.gestione hr {
    border-color: var(--g-linea);
}


/* --------------------------------------------------------------------------
   Pulsanti
   -------------------------------------------------------------------------- */

.gestione .btn {
    border-radius: var(--g-r-campo);
    font-weight: 600;
    letter-spacing: .01em;
    padding: .5rem 1.05rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.gestione .btn:active {
    transform: translateY(1px);
}

.gestione .btn:focus,
.gestione .btn.focus {
    box-shadow: var(--g-anello);
}

.gestione .btn-sm {
    border-radius: 8px;
    padding: .32rem .7rem;
    font-size: .875rem;
}

.gestione .btn-lg {
    border-radius: 12px;
}

.gestione .btn-primary,
.gestione .btn-primary:disabled {
    background: var(--g-ardesia);
    border-color: var(--g-ardesia);
    color: #fff;
}

.gestione .btn-primary:hover,
.gestione .btn-primary:not(:disabled):not(.disabled):active,
.gestione .btn-primary:not(:disabled):not(.disabled).active,
.gestione .show > .btn-primary.dropdown-toggle {
    background: var(--g-ardesia-scuro);
    border-color: var(--g-ardesia-scuro);
    color: #fff;
}

.gestione .btn-secondary,
.gestione .btn-light {
    background: #fff;
    border: 1px solid var(--g-linea-campo);
    color: var(--g-inchiostro);
}

.gestione .btn-secondary:hover,
.gestione .btn-light:hover,
.gestione .btn-secondary:not(:disabled):not(.disabled):active,
.gestione .btn-light:not(:disabled):not(.disabled):active {
    background: var(--g-nebbia);
    border-color: var(--g-linea-campo);
    color: var(--g-inchiostro);
}

/* Fuori dalla griglia del calendario (che ha già i suoi colori) */
.gestione .btn-danger:not(.cal-griglia *) {
    background: var(--g-rosso);
    border-color: var(--g-rosso);
    color: #fff;
}

.gestione .btn-danger:not(.cal-griglia *):hover,
.gestione .btn-danger:not(.cal-griglia *):not(:disabled):not(.disabled):active {
    background: #912018;
    border-color: #912018;
}

.gestione .btn-success:not(.cal-griglia *) {
    background: var(--g-verde);
    border-color: var(--g-verde);
    color: #fff;
}

.gestione .btn-success:not(.cal-griglia *):hover,
.gestione .btn-success:not(.cal-griglia *):not(:disabled):not(.disabled):active {
    background: #0b5c56;
    border-color: #0b5c56;
}

.gestione .btn-info:not(.cal-griglia *) {
    background: var(--g-blu);
    border-color: var(--g-blu);
    color: #fff;
}

.gestione .btn-info:not(.cal-griglia *):hover,
.gestione .btn-info:not(.cal-griglia *):not(:disabled):not(.disabled):active {
    background: #1d4f86;
    border-color: #1d4f86;
}

.gestione .btn-warning {
    background: var(--g-ambra);
    border-color: var(--g-ambra);
    color: #fff;
}

.gestione .btn-outline-primary {
    color: var(--g-ardesia);
    border-color: var(--g-linea-campo);
}

.gestione .btn-outline-primary:hover {
    background: var(--g-ardesia);
    border-color: var(--g-ardesia);
    color: #fff;
}

/* Esporta: pulsante leggero, non deve rubare l'occhio */
.gestione .export-btn-holder > .btn {
    background: #fff;
    border: 1px solid var(--g-linea-campo);
    color: var(--g-inchiostro);
}

.gestione .export-btn-holder > .btn:hover,
.gestione .export-btn-holder.show > .btn {
    background: var(--g-nebbia);
    color: var(--g-inchiostro);
}


/* --------------------------------------------------------------------------
   Elenchi (docenti, utenti, aule, insegnamenti, lezioni ...)
   -------------------------------------------------------------------------- */

.gestione section.page .page-content:has(> [id$="-list-records"]) {
    padding: 0 !important;
    overflow: hidden;
}

.gestione :is(.page-content, .card) table.table:not(.cal-griglia):not(.tab_calendario):not(.tab_calendario_lcd) {
    margin-bottom: 0;
    color: var(--g-inchiostro);
}

.gestione :is(.page-content, .card) table.table:not(.cal-griglia):not(.tab_calendario):not(.tab_calendario_lcd) > thead > tr > th {
    background: var(--g-superficie) !important;
    color: var(--g-tenue);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .85rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--g-linea);
    white-space: nowrap;
    vertical-align: middle;
}

.gestione :is(.page-content, .card) table.table > thead .th-sort-link,
.gestione :is(.page-content, .card) table.table > thead a {
    color: inherit;
    text-decoration: none;
}

.gestione :is(.page-content, .card) table.table:not(.cal-griglia):not(.tab_calendario):not(.tab_calendario_lcd) > tbody > tr > :is(td, th) {
    padding: .75rem 1rem;
    border: 0;
    border-top: 1px solid #edf0f3;
    vertical-align: middle;
    font-size: .95rem;
}

.gestione :is(.page-content, .card) table.table:not(.cal-griglia):not(.tab_calendario):not(.tab_calendario_lcd) > tbody > tr:first-child > :is(td, th) {
    border-top: 0;
}

/* niente righe a strisce grigie: solo un'evidenza leggera sotto il mouse */
.gestione :is(.page-content, .card) table.table-striped:not(.cal-griglia) > tbody > tr:nth-of-type(odd) {
    background: transparent;
}

.gestione :is(.page-content, .card) table.table:not(.cal-griglia):not(.tab_calendario):not(.tab_calendario_lcd) > tbody > tr {
    transition: background-color .12s ease;
}

.gestione :is(.page-content, .card) table.table:not(.cal-griglia):not(.tab_calendario):not(.tab_calendario_lcd) > tbody > tr:hover {
    background: #f4f7fa;
}

.gestione :is(.page-content, .card) table.table td a[href^="mailto:"] {
    color: var(--g-blu);
    text-decoration: none;
}

.gestione :is(.page-content, .card) table.table td a[href^="mailto:"]:hover {
    text-decoration: underline;
}

/* Valori modificabili con un clic: sottolineatura discreta */
.gestione td .is-editable,
.gestione td.value .is-editable {
    border-bottom: 1px dashed var(--g-linea-campo);
    cursor: pointer;
}

.gestione td .is-editable:hover {
    border-bottom-color: var(--g-blu);
    color: var(--g-blu);
}

/* Foto e loghi negli elenchi */
.gestione :is(.page-content, .card) table.table td.td-foto img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--g-linea);
    border-radius: 10px;
    padding: 3px;
}

/* Azioni di riga: icone morbide, il colore pieno solo al passaggio del mouse */
.gestione :is(.page-content, .card) table.table .td-btn {
    white-space: nowrap;
    text-align: right;
    width: 1%;
}

.gestione :is(.page-content, .card) table.table .td-btn .btn-sm {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid transparent;
    margin-left: 2px;
    font-size: .95rem;
}

.gestione :is(.page-content, .card) table.table .td-btn .btn-sm:has(> .fa + *),
.gestione :is(.page-content, .card) table.table .td-btn .btn-sm.btn-primary {
    width: auto;
    padding: 0 .7rem;
    gap: .3rem;
}

.gestione :is(.page-content, .card) table.table .td-btn .btn-success {
    background: var(--g-nebbia);
    border-color: var(--g-nebbia);
    color: var(--g-ardesia);
}

.gestione :is(.page-content, .card) table.table .td-btn .btn-info {
    background: var(--g-blu-sfondo);
    border-color: var(--g-blu-sfondo);
    color: var(--g-blu);
}

.gestione :is(.page-content, .card) table.table .td-btn .btn-danger {
    background: var(--g-rosso-sfondo);
    border-color: var(--g-rosso-sfondo);
    color: var(--g-rosso);
}

.gestione :is(.page-content, .card) table.table .td-btn .btn-success:hover {
    background: var(--g-ardesia);
    border-color: var(--g-ardesia);
    color: #fff;
}

.gestione :is(.page-content, .card) table.table .td-btn .btn-info:hover {
    background: var(--g-blu);
    border-color: var(--g-blu);
    color: #fff;
}

.gestione :is(.page-content, .card) table.table .td-btn .btn-danger:hover {
    background: var(--g-rosso);
    border-color: var(--g-rosso);
    color: #fff;
}

/* Piede dell'elenco: esporta, conteggio, pagine */
.gestione [id$="-list-records"] > .border-top {
    border-color: var(--g-linea) !important;
    background: var(--g-superficie);
    margin-top: 0 !important;
}

.gestione .pagination-form small,
.gestione .ajax-pagination-form small {
    color: var(--g-tenue) !important;
    font-size: .88rem;
}

.gestione .pagination .page-link {
    border: 1px solid var(--g-linea);
    border-radius: 8px !important;
    margin: 0 2px;
    color: var(--g-inchiostro);
    min-width: 34px;
    text-align: center;
}

.gestione .pagination .page-item.active .page-link {
    background: var(--g-ardesia);
    border-color: var(--g-ardesia);
    color: #fff;
}

.gestione .pagination .page-link:hover {
    background: var(--g-nebbia);
    color: var(--g-inchiostro);
}

/* Nessun risultato */
.gestione [id$="-list-records"] h4.text-muted {
    background: transparent !important;
    border: 0 !important;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 2.5rem 1rem !important;
    animation: none;
}

.gestione [id$="-list-records"] h4.text-muted .fa {
    display: block;
    font-size: 1.8rem;
    margin-bottom: .6rem;
    color: var(--g-linea-campo);
}


/* --------------------------------------------------------------------------
   Elenchi sul telefono: ogni riga diventa una scheda
   (le etichette data-label le mette responsive-enhancements.js)
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .gestione section.page .page-content:has(> [id$="-list-records"]) {
        background: transparent !important;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    .gestione #page-report-body.table-responsive:has(> table.table-mobile-cards) {
        overflow: visible;
    }

    .gestione #page-report-body > table.table-mobile-cards,
    .gestione #page-report-body > table.table-mobile-cards > tbody {
        display: block;
        width: 100%;
    }

    .gestione #page-report-body > table.table-mobile-cards > thead {
        display: none;
    }

    .gestione #page-report-body > table.table-mobile-cards > tbody > tr {
        display: block;
        background: #fff !important;
        border: 1px solid var(--g-linea);
        border-radius: var(--g-r-scheda);
        box-shadow: var(--g-ombra-1);
        margin-bottom: .75rem;
        padding: .6rem 1rem .75rem;
    }

    .gestione #page-report-body > table.table-mobile-cards > tbody > tr > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        text-align: right !important;
        padding: .35rem 0 !important;
        border: 0 !important;
        overflow-wrap: anywhere;
    }

    .gestione #page-report-body > table.table-mobile-cards > tbody > tr > td + td {
        border-top: 1px solid #f0f2f5 !important;
    }

    .gestione #page-report-body > table.table-mobile-cards > tbody > tr > td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        text-align: left;
        color: var(--g-tenue);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .gestione #page-report-body > table.table-mobile-cards > tbody > tr > td:first-child {
        font-weight: 700;
        font-size: 1.02rem;
    }

    .gestione #page-report-body > table.table-mobile-cards > tbody > tr > th.td-btn {
        display: flex;
        justify-content: flex-end;
        gap: .4rem;
        width: 100%;
        padding: .7rem 0 0 !important;
        margin-top: .35rem;
        border: 0 !important;
        border-top: 1px solid var(--g-linea) !important;
    }

    /* Pulsanti con sola icona larghi 44px; quelli con una parola (es. «Permessi» nei Ruoli) si allargano
       quanto serve: con la larghezza fissa la parola veniva tagliata e l'icona finiva sul pulsante accanto */
    .gestione #page-report-body > table.table-mobile-cards > tbody > tr > th.td-btn .btn-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        min-width: 44px;
        height: 40px;
        white-space: nowrap;
    }

    /* Numero di riga (#) inutile nella scheda; la casella per la scelta multipla resta in alto a sinistra */
    .gestione #page-report-body > table.table-mobile-cards > tbody > tr > th.td-sno {
        display: none;
    }

    .gestione #page-report-body > table.table-mobile-cards > tbody > tr > th.td-checkbox {
        display: block;
        width: 100%;
        padding: 0 0 .35rem !important;
        border: 0 !important;
        text-align: left;
    }

    .gestione section.page > .bg-light:first-child .row > .col-sm-3 {
        justify-content: flex-start;
        margin: .4rem 0;
    }
}


/* --------------------------------------------------------------------------
   Moduli
   -------------------------------------------------------------------------- */

.gestione .form-group {
    margin-bottom: 1.15rem;
}

.gestione .control-label,
.gestione label.col-form-label {
    font-weight: 600;
    color: var(--g-inchiostro);
    font-size: .95rem;
}

@media (min-width: 576px) {
    /* etichetta alla stessa altezza del testo del campo accanto */
    .gestione .form-group > .row > [class*="col-sm-"] > .control-label {
        padding-top: .62rem;
    }
}

.gestione .control-label .text-danger {
    color: var(--g-adesso) !important;
    margin-left: 1px;
}

.gestione .form-control,
.gestione .custom-select {
    min-height: 44px;
    padding: .55rem .85rem;
    border: 1px solid var(--g-linea-campo);
    border-radius: var(--g-r-campo);
    background-color: #fff;
    color: var(--g-inchiostro);
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.gestione .form-control-sm {
    min-height: 32px;
    padding: .2rem .5rem;
    border-radius: 8px;
    font-size: .875rem;
}

.gestione .custom-select {
    padding-right: 2.2rem;
}

.gestione textarea.form-control {
    min-height: 120px;
    line-height: 1.5;
}

/* Testo esteso con colori, grassetto e sottolineato (assets/js/testo-esteso.js) */
.testo-formattato {
    display: grid;
    gap: 6px;
}

.tf-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tf-barra button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 38px;
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--g-linea-campo);
    border-radius: 8px;
    background: #fff;
    color: var(--g-inchiostro);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.tf-barra button:hover {
    background: var(--g-nebbia);
}

.tf-barra button:focus-visible {
    outline: none;
    box-shadow: var(--g-anello);
}

.tf-pallino {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: currentColor;
}

.tf-barra .tf-rosso { color: var(--g-rosso); }
.tf-barra .tf-verde { color: var(--g-verde); }
.tf-barra .tf-blu { color: var(--g-blu); }
.tf-barra .tf-togli { color: var(--g-tenue); }
.tf-grassetto span { font-weight: 800; }
.tf-sottolineato span { text-decoration: underline; }

/* Pulsante evidenziato: il cursore è su un testo con quel formato */
.tf-barra button[aria-pressed="true"] {
    background: currentColor;
    border-color: currentColor;
}

.tf-barra button[aria-pressed="true"] span {
    color: #fff;
}

.tf-barra button[aria-pressed="true"] .tf-pallino {
    background: #fff;
}

.testo-formattato .tf-campo.form-control {
    height: auto;
    min-height: 120px;
    max-height: 320px;
    overflow-y: auto;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--g-inchiostro);
    cursor: text;
}

.tf-campo:empty::before {
    content: attr(data-segnaposto);
    color: var(--g-segnaposto);
    pointer-events: none;
}

.gestione .form-control::placeholder {
    color: var(--g-segnaposto);
    opacity: 1;
}

.gestione .form-control:hover,
.gestione .custom-select:hover {
    border-color: #b3bfca;
}

.gestione .form-control:focus,
.gestione .custom-select:focus {
    border-color: var(--g-blu);
    box-shadow: var(--g-anello);
    outline: 0;
}

.gestione .form-control:disabled,
.gestione .form-control[readonly],
.gestione .custom-select:disabled {
    background-color: var(--g-superficie);
    color: var(--g-tenue);
}

.gestione .was-validated .form-control:valid,
.gestione .form-control.is-valid,
.gestione .was-validated .custom-select:valid,
.gestione .custom-select.is-valid {
    border-color: #7fb8b1;
}

.gestione .was-validated .form-control:invalid,
.gestione .form-control.is-invalid,
.gestione .was-validated .custom-select:invalid,
.gestione .custom-select.is-invalid {
    border-color: var(--g-rosso);
}

.gestione .form-control.is-invalid:focus,
.gestione .was-validated .form-control:invalid:focus {
    box-shadow: 0 0 0 4px rgba(180, 35, 24, .15);
}

.gestione .invalid-feedback {
    color: var(--g-rosso);
    font-size: .86rem;
    font-weight: 600;
}

.gestione .check-status small {
    display: inline-block;
    margin-top: .3rem;
    font-weight: 600;
}

/* Campo + pulsante attaccato (occhio della password, calendario) */
.gestione .input-group > .form-control:not(:last-child),
.gestione .input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.gestione .input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* calendario (flatpickr): il campo visibile viene dopo quello nascosto, ma è il primo a sinistra */
.gestione .input-group > input[type="hidden"]:first-child + .form-control {
    border-top-left-radius: var(--g-r-campo);
    border-bottom-left-radius: var(--g-r-campo);
}

.gestione .input-group-append .input-group-text,
.gestione .input-group-append .btn {
    border-top-right-radius: var(--g-r-campo) !important;
    border-bottom-right-radius: var(--g-r-campo) !important;
}

.gestione .input-group-prepend .input-group-text,
.gestione .input-group-prepend .btn {
    border-top-left-radius: var(--g-r-campo) !important;
    border-bottom-left-radius: var(--g-r-campo) !important;
}

.gestione .input-group-text {
    background: var(--g-superficie);
    border-color: var(--g-linea-campo);
    color: var(--g-tenue);
    min-width: 46px;
    justify-content: center;
}

.gestione .btn-toggle-password:hover .input-group-text {
    background: var(--g-nebbia);
    color: var(--g-inchiostro);
}

/* Campi con ricerca (selectize): stessi angoli e altezza degli altri */
.gestione .selectize-control.single .selectize-input,
.gestione .selectize-control.multi .selectize-input {
    min-height: 44px;
    border-radius: var(--g-r-campo);
    border-color: var(--g-linea-campo);
    box-shadow: none;
}

.gestione .selectize-control .selectize-input.focus {
    border-color: var(--g-blu);
    box-shadow: var(--g-anello);
}

.gestione .selectize-dropdown {
    border-radius: 12px;
    border-color: var(--g-linea);
    box-shadow: var(--g-ombra-2);
    overflow: hidden;
}

/* Interruttori e caselle */
.gestione .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--g-ardesia);
    border-color: var(--g-ardesia);
}

.gestione .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--g-anello);
}

/* Pulsante di invio: in fondo a destra, separato da una linea
   (moduli "nuovo": .form-submit-btn-holder; moduli "modifica": .form-group.text-center) */
.gestione .form-group.text-center:has(> button[type="submit"]),
.gestione .form-submit-btn-holder {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .6rem;
    margin-top: 1.6rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid var(--g-linea);
}

.gestione .form-group.text-center:has(> button[type="submit"]) > .btn,
.gestione .form-submit-btn-holder .btn {
    min-width: 10rem;
    padding: .65rem 1.4rem;
}

@media (max-width: 575.98px) {
    .gestione .form-group.text-center:has(> button[type="submit"]) > .btn,
    .gestione .form-submit-btn-holder .btn {
        flex: 1 1 auto;
    }
}

/* Caricamento file (foto, loghi) */
.gestione .dropzone {
    border: 2px dashed var(--g-linea-campo) !important;
    border-radius: var(--g-r-scheda);
    background: var(--g-superficie);
    min-height: 120px;
    padding: 1rem;
    transition: border-color .15s ease, background-color .15s ease;
}

.gestione .dropzone:hover,
.gestione .dropzone.dz-drag-hover {
    border-color: var(--g-blu) !important;
    background: #fff;
}

.gestione .dropzone .dz-message {
    margin: 1.4rem 0;
    color: var(--g-tenue);
    font-weight: 600;
}

.gestione .dropzone .dz-message::before {
    content: "\f0ee";
    font-family: FontAwesome;
    display: block;
    font-size: 1.9rem;
    color: var(--g-blu);
    margin-bottom: .35rem;
    font-weight: normal;
}

.gestione .dropzone .dz-preview .dz-image {
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--g-linea);
}

.gestione .dropzone .dz-preview .dz-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gestione .dropzone .dz-preview .dz-remove {
    display: inline-block;
    margin-top: .4rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--g-rosso-sfondo);
    color: var(--g-rosso);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.gestione .dropzone .dz-preview .dz-error-message {
    background: var(--g-rosso);
    border-radius: 10px;
    font-weight: 600;
}

.gestione .uploaded-file-holder .card {
    border-radius: 12px;
}

/* Sicurezza della password: barra chiara, scritta leggibile */
.gestione .progress.password-meter {
    height: 1.35rem;
    margin-top: .5rem !important;
    border-radius: 999px;
    background: #e7ebef;
    font-size: .78rem;
    overflow: hidden;
}

.gestione .progress.password-meter .progress-bar {
    min-width: 4.8rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
    transition: width .25s ease, background-color .25s ease;
}

.gestione .progress.password-meter .progress-bar[style*="width: 0"] {
    min-width: 0;
}

.gestione .progress.password-meter .bg-danger {
    background: var(--g-rosso) !important;
}

.gestione .progress.password-meter .bg-warning {
    background: var(--g-ambra) !important;
}

.gestione .progress.password-meter .bg-success {
    background: var(--g-verde) !important;
}

.gestione .password-strength-msg {
    margin-top: .5rem;
}

.gestione .password-strength-msg .font-weight-bold {
    color: var(--g-tenue);
    font-size: .8rem;
    margin-right: .2rem;
}

.gestione .password-strength-msg .chip {
    display: inline-block;
    background: var(--g-nebbia);
    border: 1px solid var(--g-linea);
    border-radius: 999px;
    padding: .1rem .55rem;
    margin: .1rem .1rem;
    font-size: .78rem;
    color: var(--g-tenue);
}

/* finché il campo è vuoto i suggerimenti e la barra non servono */
.gestione [class*="col-"]:has(> .input-group > input.password-strength:placeholder-shown) :is(.password-strength-msg, .password-meter) {
    display: none;
}


/* --------------------------------------------------------------------------
   Finestre (nuovo, modifica, dettaglio, conferme)
   -------------------------------------------------------------------------- */

.gestione .modal-backdrop {
    background: var(--g-inchiostro);
}

.gestione .modal-backdrop.show {
    opacity: .5;
}

.gestione .modal-content {
    border: 0;
    border-radius: var(--g-r-finestra);
    box-shadow: var(--g-ombra-finestra);
}

.gestione .modal.fade .modal-dialog {
    transform: translateY(12px) scale(.98);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
}

.gestione .modal.show .modal-dialog {
    transform: none;
}

/* Intestazione della pagina caricata dentro la finestra */
.gestione .modal .modal-body section.page > .bg-light:first-child {
    background: #fff !important;
    border-bottom: 1px solid var(--g-linea);
    border-radius: var(--g-r-finestra) var(--g-r-finestra) 0 0;
    padding: 1.2rem 4.5rem 1.1rem 1.75rem !important;
    margin-bottom: 0 !important;
}

.gestione .modal .modal-body section.page > .bg-light:first-child .container,
.gestione .modal .modal-body section.page > .bg-light:first-child .container-fluid {
    padding: 0;
}

.gestione .modal .modal-body section.page .record-title {
    font-size: 1.35rem;
}

.gestione .modal .modal-body section.page .page-content {
    border: 0;
    box-shadow: none;
    border-radius: 0 0 var(--g-r-finestra) var(--g-r-finestra);
}

/* il modulo ha già il suo margine interno (custom-style.css): qui niente doppio margine */
.gestione .modal .modal-body section.page .page-content.p-3 {
    padding: 0 !important;
}

.gestione .modal .modal-body section.page form.page-form {
    padding: 1.5rem 1.75rem 1.4rem;
}

.gestione .modal .modal-body section.page > .bg-light:first-child .row > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
}

.gestione .modal .modal-body section.page > div > :is(.container, .container-fluid) {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.gestione .modal .modal-body section.page > div > :is(.container, .container-fluid) > .row {
    margin-left: 0;
    margin-right: 0;
}

.gestione .modal .modal-body section.page > div > :is(.container, .container-fluid) > .row > .comp-grid {
    padding-left: 0;
    padding-right: 0;
}

/* La "x" per chiudere: un cerchio discreto, non più il quadratino rosso */
.gestione .modal-content > .position-absolute {
    top: 14px !important;
    right: 14px !important;
}

.gestione .modal-content > .position-absolute > .btn[data-dismiss="modal"] {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: var(--g-nebbia);
    border: 0;
    color: var(--g-tenue);
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1;
    box-shadow: none;
}

.gestione .modal-content > .position-absolute > .btn[data-dismiss="modal"]:hover {
    background: var(--g-linea);
    color: var(--g-inchiostro);
}

/* Finestre con intestazione di Bootstrap (es. conferma eliminazione) */
.gestione .modal-header {
    border-bottom: 1px solid var(--g-linea);
    padding: 1.15rem 1.5rem;
    align-items: center;
}

.gestione .modal-title {
    font-weight: 700;
    font-size: 1.2rem;
}

.gestione .modal-header .close {
    width: 38px;
    height: 38px;
    margin: -.4rem -.6rem -.4rem auto;
    padding: 0;
    border-radius: 50%;
    background: var(--g-nebbia);
    opacity: 1;
    color: var(--g-tenue);
    text-shadow: none;
    font-weight: 400;
}

.gestione .modal-header .close:hover {
    background: var(--g-linea);
    color: var(--g-inchiostro);
}

.gestione .modal-body {
    font-size: 1rem;
}

.gestione #delete-record-modal-confirm .modal-body {
    padding: 1.25rem 1.5rem;
    color: var(--g-inchiostro);
}

.gestione .modal-footer {
    border-top: 0;
    padding: 0 1.5rem 1.25rem;
    gap: .5rem;
}

.gestione .modal-footer > * {
    margin: 0;
}

@media (max-width: 575.98px) {
    .gestione .modal-dialog {
        margin: .6rem;
    }

    .gestione .modal .modal-body section.page > .bg-light:first-child {
        padding: 1rem 4rem 1rem 1.15rem !important;
    }

    .gestione .modal .modal-body section.page form.page-form {
        padding: 1.15rem 1.15rem 1.2rem;
    }
}

/* Caricamento dentro le finestre */
.gestione .ajax-loader {
    width: 38px;
    height: 38px;
    margin: 3rem auto 0;
    border: 3px solid var(--g-linea);
    border-top-color: var(--g-ardesia);
    border-radius: 50%;
    box-shadow: none;
    font-size: 0;
    animation: g-gira .75s linear infinite;
}

@keyframes g-gira {
    to { transform: rotate(360deg); }
}


/* --------------------------------------------------------------------------
   Schede di dettaglio ("Visualizza ...")
   -------------------------------------------------------------------------- */

.gestione [data-page-type="view"] .page-content {
    overflow: hidden;
}

.gestione [data-page-type="view"] table.table {
    margin: 0;
}

.gestione [data-page-type="view"] table.table-striped > tbody > tr:nth-of-type(odd) {
    background: transparent;
}

.gestione [data-page-type="view"] .page-content table.table:not(.cal-griglia):not(.tab_calendario):not(.tab_calendario_lcd) > tbody > tr > th.title {
    width: 34%;
    padding: .9rem 1.75rem;
    color: var(--g-tenue);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: middle;
    border-top: 1px solid #edf0f3;
}

.gestione [data-page-type="view"] .page-content table.table:not(.cal-griglia):not(.tab_calendario):not(.tab_calendario_lcd) > tbody > tr > td.value {
    padding: .9rem 1.75rem;
    font-size: 1rem;
    border-top: 1px solid #edf0f3;
}

.gestione [data-page-type="view"] .page-content table.table:not(.cal-griglia):not(.tab_calendario):not(.tab_calendario_lcd) > tbody > tr:first-child > :is(th, td) {
    border-top: 0;
}

.gestione [data-page-type="view"] table.table-hover > tbody > tr:hover {
    background: #f7f9fb;
}

.gestione [data-page-type="view"] .page-content > .p-3.d-flex {
    gap: .5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--g-linea);
    background: var(--g-superficie);
    padding: 1rem 1.75rem !important;
}

.gestione [data-page-type="view"] .page-content > .p-3.d-flex .export-btn-holder {
    margin: 0 auto 0 0 !important;
}


/* Il mio account: foto o logo su fondo bianco arrotondato, leggibile sulla fascia scura */
.gestione .profile .avatar img {
    width: auto !important;
    height: 100px !important;
    max-width: 260px;
    max-height: none;
    padding: 10px;
    background: #fff;
    border-radius: 18px;
    object-fit: contain;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------------------
   Pagina iniziale (dashboard)
   -------------------------------------------------------------------------- */

.gestione .header-pretitle {
    color: var(--g-tenue);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.gestione .header-title {
    font-size: 2.2rem;
    font-weight: 700;
}

.gestione a.record-count {
    background: #fff !important;
    border: 1px solid var(--g-linea);
    border-radius: var(--g-r-scheda);
    box-shadow: var(--g-ombra-1);
    padding: 1rem 1.15rem !important;
    color: var(--g-inchiostro) !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.gestione a.record-count:hover {
    transform: translateY(-2px);
    box-shadow: var(--g-ombra-2);
    border-color: #c8d3de;
    background: #fff !important;
}

.gestione a.record-count .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--g-blu-sfondo);
    color: var(--g-blu);
    font-size: 1.1rem;
}

.gestione a.record-count .title {
    font-weight: 700;
    padding-top: .55rem;
}

.gestione a.record-count .value {
    top: 50%;
    right: 1.15rem;
    transform: translateY(-50%);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--g-ardesia);
    opacity: 1;
}

.gestione .alert {
    border: 0;
    border-radius: 12px;
}

.gestione .alert-secondary,
.gestione .alert-info {
    background: var(--g-blu-sfondo);
    color: #1d4f86;
}

.gestione .alert-success {
    background: var(--g-verde-sfondo);
    color: #0b5c56;
}

.gestione .alert-warning {
    background: var(--g-ambra-sfondo);
    color: #7a4a05;
}

.gestione .alert-danger {
    background: var(--g-rosso-sfondo);
    color: #8f1c13;
}

.gestione .badge {
    border-radius: 999px;
    font-weight: 600;
    padding: .3em .65em;
}


/* --------------------------------------------------------------------------
   Messaggi dopo un salvataggio: un avviso che compare in basso
   -------------------------------------------------------------------------- */

.gestione .flash-msg-container .alert {
    background: #fff;
    color: var(--g-inchiostro);
    border-left: 4px solid var(--g-verde);
    box-shadow: var(--g-ombra-2);
    font-weight: 600;
    padding: .85rem 1.2rem;
}

.gestione .flash-msg-container .alert-warning {
    border-left-color: var(--g-ambra);
}

.gestione .flash-msg-container .alert-danger {
    border-left-color: var(--g-rosso);
}


/* --------------------------------------------------------------------------
   Schede (tab) di Impostazioni e simili
   -------------------------------------------------------------------------- */

.gestione .nav-tabs {
    border-bottom: 1px solid var(--g-linea);
    gap: .25rem;
}

.gestione .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--g-tenue);
    font-weight: 600;
    padding: .65rem .9rem;
    background: transparent;
}

.gestione .nav-tabs .nav-link:hover {
    color: var(--g-inchiostro);
    border-bottom-color: var(--g-linea-campo);
}

.gestione .nav-tabs .nav-link.active,
.gestione .nav-tabs .nav-item.show .nav-link {
    color: var(--g-inchiostro);
    background: transparent;
    border-bottom-color: var(--g-adesso);
}

/* Account: menu laterale a pillole */
.gestione .nav-pills .nav-link {
    border-radius: var(--g-r-campo);
    color: var(--g-inchiostro);
    font-weight: 600;
}

.gestione .nav-pills .nav-link.active,
.gestione .nav-pills .show > .nav-link {
    background: var(--g-ardesia);
    color: #fff;
}

.gestione .popover {
    border: 1px solid var(--g-linea);
    border-radius: 12px;
    box-shadow: var(--g-ombra-2);
}


/* --------------------------------------------------------------------------
   Piede di pagina
   -------------------------------------------------------------------------- */

.gestione .footer,
.gestione .page-footer,
.gestione footer {
    color: var(--g-tenue);
    font-size: .88rem;
    background: transparent;
}

.gestione .footer a,
.gestione footer a {
    color: var(--g-tenue);
}

/* Piede del sito (appfooter.php): nome del servizio, link alle pagine informative, dati di SPS */
.gestione footer.piede {
    margin-top: 3rem;
    padding: 1.3rem clamp(1rem, 3vw, 2rem) 1.5rem;
    background: #fff;
    border-top: 1px solid var(--g-linea);
}

.gestione .piede-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
}

.gestione .piede-nome {
    color: var(--g-inchiostro);
    font-size: .95rem;
    font-weight: 600;
}

.gestione .piede-nome span {
    color: var(--g-tenue);
    font-weight: 400;
}

.gestione .piede-link {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-right: -.6rem;
}

.gestione footer.piede .piede-link a {
    color: var(--g-inchiostro);
    font-weight: 600;
    padding: .35rem .6rem;
    border-radius: 8px;
    text-decoration: none;
}

.gestione footer.piede .piede-link a:hover {
    background: var(--g-nebbia);
}

/* pagina aperta: linea arancione sotto (disegnata come sfondo, senza aloni ai lati) */
.gestione footer.piede .piede-link a[aria-current="page"] {
    background-image: linear-gradient(var(--g-adesso), var(--g-adesso));
    background-position: left bottom;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    border-radius: 0;
}

.gestione .piede-legale {
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--g-tenue);
}

.gestione footer.piede .piede-legale a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--g-linea-campo);
    text-underline-offset: 2px;
}

.gestione footer.piede .piede-legale a:hover {
    color: var(--g-inchiostro);
}

@media (max-width: 575.98px) {
    .gestione .piede-link {
        margin-left: -.6rem;
        margin-right: 0;
    }
}


/* --------------------------------------------------------------------------
   Pagine pubbliche: accesso, recupero password, chi siamo, contatti, privacy
   (body "gestione pubblico"). Stessi colori della parte interna; l'arancione
   è lo stesso dell'ora attuale nel calendario e si usa solo per "adesso / oggi".
   -------------------------------------------------------------------------- */

/* Il piede resta in fondo allo schermo anche quando la pagina è corta */
body.pubblico {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.pubblico > #page-wrapper,
.pubblico #main-content {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

/* min-height 75vh di custom-style.css non serve più: allunga solo le pagine corte */
.pubblico #page-content {
    flex: 1 0 auto;
    min-height: 0;
}

.gestione.pubblico footer.piede {
    margin-top: 2.5rem;
}

/* Accesso: la scheda sta al centro dello spazio libero */
.pubblico #page-content:has(> .accesso) {
    display: flex;
    flex-direction: column;
}

.pubblico #page-content > .accesso {
    flex: 1 0 auto;
}

/* Logo UNICA (verticale, alto come il logo DISEA) in fondo ai loghi: il manuale UNICA chiede
   spazio libero intorno al marchio, quindi un po' più di distanza dal logo UNISS */
.header-logo-unica {
    margin-left: 6px;
}

/* Sotto i 1200px il menu dell'utente va nel pulsante a tre righe (appheader.php: navbar-expand-xl):
   con il menu aperto i quattro loghi e le voci non ci stavano su una riga (si sovrapponevano o la
   barra andava su 2-3 righe). Loghi e pulsante restano su una riga; il menu aperto va sotto. */
@media (max-width: 1199.98px) {
    .gestione #topbar > .container-fluid {
        flex-wrap: nowrap;
    }

    .gestione #topbar > .container-fluid:has(> .navbar-collapse.show, > .navbar-collapse.collapsing) {
        flex-wrap: wrap;
    }

    .gestione #topbar .navbar-brand {
        max-width: none;
        min-width: 0;
    }

    .gestione #topbar .navbar-brand .header-logos-container {
        flex-wrap: nowrap;
    }

    .gestione #topbar .navbar-toggler {
        flex-shrink: 0;
        margin-left: auto;
    }
}

/* Telefono e app installata: i quattro loghi restano su una riga anche sugli schermi stretti.
   L'altezza --h-logo segue la larghezza (loghi + spazi valgono ~9,4 volte l'altezza, più ~118px
   per bordi, margini e pulsante) e non supera i 28px di prima, così la barra non si alza. */
@media (max-width: 767.98px) {
    .gestione #topbar {
        --h-logo: clamp(16px, calc((100vw - 118px) / 9.4), 28px);
    }

    .gestione #topbar .navbar-brand .header-logos-container {
        gap: calc(var(--h-logo) * .28);
    }

    .gestione #topbar .header-logo {
        height: var(--h-logo);
    }

    .gestione #topbar .header-logo-main {
        height: calc(var(--h-logo) * 1.15);
    }

    .gestione #topbar .header-logo-unica {
        margin-left: calc(var(--h-logo) * .22);
    }

}

/* Pulsante "Accedi" nella barra in alto (non sulla pagina di accesso) */
.gestione #topbar .header-accedi {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .45rem;
    width: auto; /* responsive-enhancements.css allarga a tutta riga i pulsanti della barra sul telefono */
    margin: 0 0 0 auto;
    padding: .45rem 1rem;
    font-size: .95rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .gestione #topbar .header-accedi {
        padding: .4rem .75rem;
        font-size: .9rem;
    }
}

/* telefoni stretti: solo l'icona, così i loghi (quattro, con UNICA) restano su una riga
   (responsive-enhancements.css limita i loghi al 75% e li manda a capo) */
@media (max-width: 419.98px) {
    .gestione #topbar .header-accedi-testo {
        display: none;
    }

    /* solo senza accesso: con l'accesso c'è anche il pulsante del menu */
    body#index.pubblico #topbar .navbar-brand {
        max-width: none;
    }

    body#index.pubblico #topbar .navbar-brand .header-logos-container {
        flex-wrap: nowrap;
    }
}

/* --- Accesso ------------------------------------------------------------ */

.pubblico .accesso {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem 0;
}

.pubblico .accesso-scheda {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    width: 100%;
    max-width: 980px;
    background: #fff;
    border: 1px solid var(--g-linea);
    border-radius: var(--g-r-finestra);
    box-shadow: var(--g-ombra-2);
    overflow: hidden;
}

/* Lato scuro: le righe sottili sono le fasce orarie della griglia */
.pubblico .accesso-lato {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.6rem 2.5rem 2.3rem;
    background-color: var(--g-ardesia);
    background-image: repeating-linear-gradient(to bottom, transparent 0 55px, rgba(255, 255, 255, .045) 55px 56px);
    color: #fff;
}

.pubblico .accesso-occhiello {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #c9d2db;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pubblico .accesso-occhiello::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: #f08a4b;
}

.pubblico .accesso-titolo {
    margin: -.4rem 0 0;
    color: #fff;
    font-size: 2.55rem;
    font-weight: 700;
    line-height: 1.05;
}

.pubblico .accesso-testo {
    margin: 0;
    max-width: 34ch;
    color: rgba(255, 255, 255, .8);
    font-size: 1.05rem;
    line-height: 1.5;
}

/* La giornata in piccolo */
.pubblico .accesso-tabellone {
    display: grid;
    gap: .6rem;
    margin: .3rem 0;
}

.pubblico .accesso-riga {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
}

.pubblico .accesso-ora {
    padding: .32rem 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
}

.pubblico .accesso-riga-adesso .accesso-ora {
    background: var(--g-adesso);
    color: #fff;
}

.pubblico .accesso-esempio {
    position: relative;
    display: grid;
    gap: .42rem;
    padding: .62rem .9rem .75rem 1.1rem;
    border-radius: 10px;
    background: var(--cat-sfondo, #fff);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.pubblico .accesso-esempio::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--cat, var(--g-blu));
}

.pubblico .accesso-esempio span {
    color: var(--cat, var(--g-blu));
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pubblico .accesso-esempio b,
.pubblico .accesso-esempio i {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: rgba(30, 43, 55, .14);
}

.pubblico .accesso-esempio b {
    width: 74%;
    height: 8px;
    background: rgba(30, 43, 55, .26);
}

.pubblico .accesso-esempio i {
    width: 46%;
}

.pubblico .accesso-punti {
    display: grid;
    gap: .55rem;
    margin: auto 0 0;
    padding: 1.15rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
    list-style: none;
}

.pubblico .accesso-punti li {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: rgba(255, 255, 255, .88);
    font-size: .98rem;
}

.pubblico .accesso-punti .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .09);
    color: #fff;
    font-size: .95rem;
}

/* Lato del modulo */
.pubblico .accesso-modulo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.6rem 2.5rem 2.2rem;
}

.pubblico .accesso-modulo h2 {
    margin: 0 0 .25rem;
    color: var(--g-inchiostro);
    font-size: 1.95rem;
    font-weight: 700;
}

.pubblico .accesso-sottotitolo {
    margin: 0 0 1.5rem;
    color: var(--g-tenue);
}

.pubblico .accesso-opzioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    margin: -.15rem 0 1.4rem;
}

.pubblico .accesso-opzioni a {
    font-weight: 600;
}

.pubblico .btn.accesso-invio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 48px;
    font-size: 1.05rem;
}

.pubblico .accesso-aiuto {
    margin: 1.5rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--g-linea);
    color: var(--g-tenue);
    font-size: .92rem;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .pubblico .accesso {
        align-items: flex-start;
        padding: 1.1rem .75rem 0;
    }

    .pubblico .accesso-scheda {
        grid-template-columns: minmax(0, 1fr);
        border-radius: var(--g-r-scheda);
    }

    .pubblico .accesso-lato {
        gap: .55rem;
        padding: 1.35rem 1.4rem 1.3rem;
    }

    .pubblico .accesso-titolo {
        margin: 0;
        font-size: 1.75rem;
    }

    .pubblico .accesso-testo {
        font-size: .95rem;
    }

    /* sul telefono conta il modulo: il disegno e l'elenco restano sul computer */
    .pubblico .accesso-tabellone,
    .pubblico .accesso-punti {
        display: none;
    }

    .pubblico .accesso-modulo {
        padding: 1.5rem 1.4rem 1.6rem;
    }

    .pubblico .accesso-modulo h2 {
        font-size: 1.6rem;
    }
}

/* --- Pagine informative: impaginazione comune ----------------------------- */

.pubblico .pagina {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2.4rem clamp(1rem, 3vw, 1.75rem) 1rem;
}

.pubblico .pagina-breve {
    max-width: 560px;
}

.pubblico .pagina-testa {
    margin-bottom: 2rem;
}

.pubblico .pagina-breve .pagina-testa {
    margin-bottom: 1.4rem;
}

.pubblico .pagina-occhiello {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .6rem;
    color: var(--g-tenue);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pubblico .pagina-occhiello::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--g-adesso);
}

.pubblico .pagina-titolo {
    margin: 0 0 .75rem;
    color: var(--g-inchiostro);
    font-size: clamp(1.9rem, 1.35rem + 1.7vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
}

.pubblico .pagina-sommario {
    max-width: 60ch;
    margin: 0;
    color: var(--g-ardesia-chiaro);
    font-size: 1.12rem;
    line-height: 1.55;
}

.pubblico .pagina-scheda {
    background: #fff;
    border: 1px solid var(--g-linea);
    border-radius: var(--g-r-scheda);
    box-shadow: var(--g-ombra-1);
    padding: 1.7rem 1.8rem;
}

.pubblico .pagina-sezione {
    margin-top: 3.2rem;
}

.pubblico .pagina-sezione > h2 {
    margin: 0 0 1.2rem;
    color: var(--g-inchiostro);
    font-size: 1.5rem;
    font-weight: 700;
}

.pubblico .pagina-scheda p,
.pubblico .pagina-sezione p {
    line-height: 1.6;
}

.pubblico .pagina-nota {
    margin: 1rem 0 0;
    color: var(--g-tenue);
    font-size: .92rem;
    line-height: 1.5;
}

/* Pagine brevi (password, messaggio inviato): icona in un cerchio sopra al titolo */
.pubblico .pagina-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--g-blu-sfondo);
    color: var(--g-blu);
    font-size: 1.45rem;
}

.pubblico .pagina-icona-ok {
    background: var(--g-verde-sfondo);
    color: var(--g-verde);
}

.pubblico .pagina-icona-errore {
    background: var(--g-rosso-sfondo);
    color: var(--g-rosso);
}

.pubblico .pagina-breve .pagina-titolo {
    font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem);
}

.pubblico .pagina-breve .pagina-sommario {
    font-size: 1.05rem;
}

.pubblico .pagina-elenco {
    margin: 1.1rem 0 0;
    padding-left: 1.2rem;
    color: var(--g-ardesia-chiaro);
}

.pubblico .pagina-elenco li + li {
    margin-top: .3rem;
}

.pubblico .pagina-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 1.5rem;
}

.pubblico .pagina-azioni .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
}

.pubblico .pagina-ritorno {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.25rem;
    font-weight: 600;
}

/* --- Chi siamo ------------------------------------------------------------ */

.pubblico .chi-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.pubblico .chi-testo p {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

.pubblico .chi-testo p:last-child {
    margin-bottom: 0;
}

.pubblico .chi-citazione {
    margin: 0 0 1.2rem;
    padding: .1rem 0 .1rem 1.1rem;
    border-left: 3px solid var(--g-ardesia);
    color: var(--g-inchiostro);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.45;
}

.pubblico .chi-dati h2 {
    margin: 0 0 1rem;
    color: var(--g-inchiostro);
    font-size: 1.1rem;
    font-weight: 700;
}

.pubblico .chi-dati dl {
    display: grid;
    gap: .8rem;
    margin: 0;
}

.pubblico .chi-dati dt {
    color: var(--g-tenue);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pubblico .chi-dati dd {
    margin: .1rem 0 0;
    color: var(--g-inchiostro);
    line-height: 1.45;
}

/* La storia: gli anni come le targhe delle aule; "oggi" in arancione come la colonna di oggi */
.pubblico .storia {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pubblico .storia::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--g-linea-campo);
}

.pubblico .storia li {
    position: relative;
}

.pubblico .storia-anno {
    display: inline-block;
    position: relative;
    margin-bottom: .85rem;
    padding: .3rem .8rem;
    border-radius: 8px;
    background: var(--g-ardesia);
    box-shadow: 0 0 0 5px var(--g-nebbia);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.pubblico .storia-oggi .storia-anno {
    background: var(--g-adesso);
}

.pubblico .storia h3 {
    margin: 0 0 .35rem;
    color: var(--g-inchiostro);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.pubblico .storia p {
    margin: 0;
    color: var(--g-ardesia-chiaro);
    font-size: .95rem;
    line-height: 1.5;
}

/* Cosa facciamo */
.pubblico .servizi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.pubblico .servizio {
    padding: 1.35rem 1.4rem 1.4rem;
    background: #fff;
    border: 1px solid var(--g-linea);
    border-radius: var(--g-r-scheda);
    box-shadow: var(--g-ombra-1);
}

.pubblico .servizio > .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: .85rem;
    border-radius: 12px;
    background: var(--g-nebbia);
    color: var(--g-ardesia);
    font-size: 1.15rem;
}

.pubblico .servizio h3 {
    margin: 0 0 .35rem;
    color: var(--g-inchiostro);
    font-size: 1.1rem;
    font-weight: 700;
}

.pubblico .servizio p {
    margin: 0;
    color: var(--g-ardesia-chiaro);
    font-size: .96rem;
    line-height: 1.5;
}

/* Il servizio da cui nasce questo calendario */
.pubblico .servizio-nostro {
    border-color: var(--g-ardesia);
    box-shadow: inset 0 3px 0 var(--g-ardesia), var(--g-ombra-1);
}

.pubblico .servizio-nostro > .fa {
    background: var(--g-ardesia);
    color: #fff;
}

.pubblico .servizio-etichetta {
    display: inline-block;
    margin-top: .8rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--g-nebbia);
    color: var(--g-ardesia);
    font-size: .8rem;
    font-weight: 700;
}

/* Invito a scrivere */
.pubblico .invito {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 3.2rem;
    padding: 1.8rem 2rem;
    border-radius: var(--g-r-scheda);
    background: var(--g-ardesia);
    color: #fff;
}

.pubblico .invito h2 {
    margin: 0 0 .3rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}

.pubblico .invito p {
    margin: 0;
    color: rgba(255, 255, 255, .8);
}

.pubblico .invito .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 46px;
    padding: .6rem 1.4rem;
    background: #fff;
    border: 0;
    color: var(--g-ardesia);
}

.pubblico .invito .btn:hover {
    background: var(--g-nebbia);
    color: var(--g-inchiostro);
}

/* --- Contatti --------------------------------------------------------------- */

.pubblico .contatti {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.pubblico .contatti-modulo h2,
.pubblico .contatti-info h2 {
    margin: 0 0 1.1rem;
    color: var(--g-inchiostro);
    font-size: 1.2rem;
    font-weight: 700;
}

.pubblico .contatti-modulo .form-text {
    color: var(--g-tenue);
    font-size: .88rem;
}

.pubblico .contatti-consenso {
    margin: .2rem 0 1.4rem;
}

.pubblico .contatti-consenso .custom-control-label {
    font-size: .95rem;
    line-height: 1.45;
}

.pubblico .contatti-modulo .btn[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 46px;
    padding: .6rem 1.5rem;
}

/* Campo trappola per i programmi che spediscono pubblicità: le persone non lo vedono */
.pubblico .campo-trappola {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pubblico .contatti-info {
    display: grid;
    gap: 1rem;
}

.pubblico .contatti-info .pagina-scheda {
    padding: 1.4rem 1.5rem;
}

.pubblico .contatto {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}

.pubblico .contatto + .contatto {
    margin-top: .95rem;
}

.pubblico .contatto > .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 10px;
    background: var(--g-nebbia);
    color: var(--g-ardesia);
}

.pubblico .contatto-etichetta {
    color: var(--g-tenue);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pubblico .contatto-valore {
    color: var(--g-inchiostro);
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.pubblico .contatto-valore a {
    font-weight: 600;
}

.pubblico .contatto-nota {
    margin-top: .1rem;
    color: var(--g-tenue);
    font-size: .9rem;
}

.pubblico .contatti-info .pagina-nota {
    margin-top: .9rem;
}

/* --- Privacy ---------------------------------------------------------------- */

.pubblico .privacy {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.pubblico .privacy-indice {
    position: sticky;
    top: 90px;
}

.pubblico .privacy-indice ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--g-linea);
}

.pubblico .privacy-indice a {
    display: block;
    margin-left: -2px;
    padding: .35rem 0 .35rem .9rem;
    border-left: 2px solid transparent;
    color: var(--g-ardesia-chiaro);
    font-size: .93rem;
    font-weight: 600;
    text-decoration: none;
}

.pubblico .privacy-indice a:hover {
    border-left-color: var(--g-ardesia);
    color: var(--g-inchiostro);
}

.pubblico .privacy-testo {
    padding: 2rem 2.2rem;
}

.pubblico .privacy-testo section + section {
    margin-top: 2rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--g-linea);
}

.pubblico .privacy-testo section {
    scroll-margin-top: 90px;
}

.pubblico .privacy-testo h2 {
    margin: 0 0 .8rem;
    color: var(--g-inchiostro);
    font-size: 1.3rem;
    font-weight: 700;
}

.pubblico .privacy-testo p,
.pubblico .privacy-testo li {
    color: var(--g-inchiostro);
    font-size: 1rem;
    line-height: 1.6;
}

.pubblico .privacy-testo p {
    margin: 0 0 .8rem;
}

.pubblico .privacy-testo ul {
    margin: 0 0 .8rem;
    padding-left: 1.2rem;
}

.pubblico .privacy-testo li + li {
    margin-top: .35rem;
}

.pubblico .privacy-tabella {
    margin: .4rem 0 .8rem;
    border: 1px solid var(--g-linea);
    border-radius: 12px;
    overflow-x: auto;
}

.pubblico .privacy-tabella table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.pubblico .privacy-tabella th,
.pubblico .privacy-tabella td {
    padding: .7rem .9rem;
    border-top: 1px solid var(--g-linea);
    font-size: .95rem;
    line-height: 1.45;
    text-align: left;
    vertical-align: top;
}

.pubblico .privacy-tabella thead th {
    border-top: 0;
    background: var(--g-superficie);
    color: var(--g-tenue);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pubblico .privacy-aggiornata {
    margin: .9rem 0 0;
    color: var(--g-tenue);
    font-size: .92rem;
}

/* --- Pagine informative sul tablet e sul telefono --------------------------- */

@media (max-width: 991.98px) {
    .pubblico .chi-intro,
    .pubblico .contatti,
    .pubblico .privacy {
        grid-template-columns: minmax(0, 1fr);
    }

    .pubblico .privacy-indice {
        display: none;
    }

    .pubblico .servizi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* la storia diventa una colonna, con la linea a sinistra */
    .pubblico .storia {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.4rem;
        padding-left: 1.4rem;
    }

    .pubblico .storia::before {
        top: .4rem;
        bottom: .4rem;
        left: .3rem;
        right: auto;
        width: 2px;
        height: auto;
    }

    .pubblico .storia-anno {
        margin-bottom: .5rem;
        margin-left: -1.6rem;
    }
}

@media (max-width: 575.98px) {
    .pubblico .pagina {
        padding-top: 1.6rem;
    }

    .pubblico .pagina-scheda,
    .pubblico .privacy-testo {
        padding: 1.3rem 1.2rem;
    }

    .pubblico .servizi {
        grid-template-columns: minmax(0, 1fr);
    }

    .pubblico .pagina-sezione,
    .pubblico .invito {
        margin-top: 2.4rem;
    }

    .pubblico .invito {
        padding: 1.4rem 1.3rem;
    }

    .pubblico .pagina-azioni .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


@media (prefers-reduced-motion: reduce) {
    .gestione .modal.fade .modal-dialog,
    .gestione a.record-count,
    .gestione .btn {
        transition: none;
    }

    .gestione .ajax-loader {
        animation-duration: 2s;
    }
}

/* --------------------------------------------------------------------------
   Università (UNISS, UNICA...): etichette negli elenchi e pagina «Università dei docenti»
   -------------------------------------------------------------------------- */

.badge-ateneo {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--g-ardesia);
    border-radius: 6px;
    color: var(--g-ardesia);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.5;
    white-space: nowrap;
}

.badge-ateneo-vuoto {
    border-color: var(--g-linea);
    color: var(--g-tenue);
}

/* Colore per università (classe da ateneo_badge_html()); le altre sigle restano ardesia */
.badge-ateneo-uniss {
    border-color: #8a1c2b;
    color: #8a1c2b;
}

.badge-ateneo-unica {
    border-color: #1f4e8c;
    color: #1f4e8c;
}

/* «dal docente» accanto all'università nell'elenco insegnamenti */
.ateneo-origine {
    margin-left: 4px;
    color: var(--g-tenue);
    font-size: .78rem;
}

.ud-proposta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--g-linea);
    border-radius: var(--g-r-scheda);
    background: #fff;
}

.ud-proposta label {
    margin: 0;
    font-weight: 600;
}

.ud-proposta .custom-select,
.ud-barra .custom-select {
    width: auto;
    max-width: 100%;
}

.ud-avvisi {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.ud-avviso {
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid #c8dbf1;
    border-radius: 10px;
    background: var(--g-blu-sfondo);
}

.ud-avviso.ud-controlla {
    border-color: #ecd9a8;
    background: var(--g-ambra-sfondo);
}

.ud-avviso.ud-gia {
    border-color: var(--g-linea);
    background: var(--g-superficie);
}

.ud-barra {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--g-ardesia);
    color: #fff;
}

.ud-barra label {
    margin: 0;
}

.ud-conta {
    margin-right: auto;
    font-weight: 700;
}

.ud-tabella td,
.ud-tabella th {
    vertical-align: middle;
}

.ud-tabella .ud-spunta {
    width: 1%;
}

.ud-tabella input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--g-blu);
}

.ud-tabella label {
    margin: 0 6px 0 0;
    font-weight: 600;
    cursor: pointer;
}

.ud-tabella tr.ud-scelto td {
    background: var(--g-blu-sfondo);
}

.ud-stato {
    display: inline-block;
    padding: 0 7px;
    border-radius: 20px;
    background: var(--g-blu);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.ud-stato-controlla {
    background: var(--g-ambra);
}

.ud-nota {
    color: var(--g-tenue);
    font-size: .82rem;
    font-weight: 400;
}

.ud-aula {
    display: inline-block;
    margin: 1px 3px 1px 0;
    padding: 0 8px;
    border-radius: 20px;
    background: var(--g-nebbia);
    font-size: .82rem;
    font-weight: 600;
}

.ud-aula small {
    color: var(--g-tenue);
}

.ud-aula-proposta {
    background: #dbe7f6;
    color: var(--g-blu);
}

/* Telefono: ogni docente su due livelli (spunta, nome e università sopra; aule sotto) invece della
   tabella a quattro colonne, che non ci stava. In cima resta la casella «spunta tutti» con «Docente». */
@media (max-width: 767.98px) {
    .ud-tabella,
    .ud-tabella thead,
    .ud-tabella tbody {
        display: block;
        width: 100%;
    }

    .ud-tabella thead tr {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .5rem .75rem;
        border-bottom: 2px solid var(--g-linea);
    }

    .ud-tabella thead th {
        padding: 0;
        border: 0;
    }

    /* aule e università si leggono nella riga di ogni docente */
    .ud-tabella thead th:nth-child(n+3) {
        display: none;
    }

    .ud-tabella tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .3rem .75rem;
        padding: .65rem .75rem;
        border-bottom: 1px solid var(--g-linea);
    }

    .ud-tabella tbody td {
        display: block;
        padding: 0;
        border: 0;
    }

    .ud-tabella tbody td.ud-spunta {
        grid-row: 1 / span 2;
        width: auto;
    }

    .ud-tabella tbody td:nth-child(3) {
        grid-column: 2 / span 2;
        grid-row: 2;
    }

    .ud-tabella tbody td:nth-child(4) {
        grid-column: 3;
        grid-row: 1;
    }

    .ud-tabella tr.ud-scelto {
        background: var(--g-blu-sfondo);
    }

    .ud-tabella tr.ud-scelto td {
        background: transparent;
    }
}