/* PanelUtente ora ha una sidebar (UtenteSideBar) identica per struttura/comportamento a quella di
   PanelAdmin: admin-topbar/admin-main usano quindi le regole di default di
   DeskOnline.SharedUI/wwwroot/admin.css (offset a sinistra pari a var(--sidebar-w), compreso lo
   stato sidebar-collapsed), senza override qui. */

/* Layout pagine di autenticazione (Login/Registrati/ResetPassword/ecc.), portato da
   PanelAdmin/Components/Pages/Authentication/Login.razor.css: qui vive globale (non come
   Login.razor.css scoped) perché le classi auth-* sono condivise da tutte le pagine in
   Components/Pages/Authentication, non da una sola. */
.auth-shell {
    min-height: 100vh;
    display: flex;
}

.auth-brand {
    display: none;
    width: 42%;
    flex-shrink: 0;
    background: var(--c-black);
    position: relative;
    overflow: hidden;
    padding: 48px;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .auth-brand {
        display: flex;
    }
}

.auth-brand__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 20% 80%, rgba(224,0,122,.35) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 20%, rgba(224,0,122,.18) 0%, transparent 60%);
}

.auth-brand__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.auth-brand__content {
    position: relative;
    z-index: 1;
}

.auth-brand__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.auth-brand__logo-mark {
    width: 36px;
    height: 36px;
    background: var(--c-fuxia);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .auth-brand__logo-mark svg {
        width: 18px;
        height: 18px;
        fill: var(--c-white);
    }

.auth-brand__logo-text {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-white);
    letter-spacing: -.4px;
}

.auth-brand__headline {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    color: var(--c-white);
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 20px;
}

    .auth-brand__headline em {
        font-style: normal;
        color: var(--c-fuxia-light);
    }

.auth-brand__sub {
    font-size: 15px;
    color: var(--c-grey-400);
    line-height: 1.7;
    max-width: 340px;
}

.auth-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.auth-stat__value {
    font-size: 26px;
    font-weight: 700;
    color: var(--c-white);
    letter-spacing: -1px;
    line-height: 1;
}

.auth-stat__label {
    font-size: 12px;
    color: var(--c-grey-500);
    margin-top: 3px;
}

.auth-quote {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    backdrop-filter: blur(4px);
}

.auth-quote__text {
    font-size: 14px;
    color: rgba(255,255,255,.8);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 14px;
}

.auth-quote__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-quote__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-fuxia);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-white);
}

.auth-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: var(--surface-bg);
    overflow-y: auto;
}

.auth-card {
    width: 100%;
    max-width: 440px;
}

.auth-mobile-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 32px;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .auth-mobile-logo {
        display: none;
    }
}

.auth-mobile-logo__mark {
    width: 32px;
    height: 32px;
    background: var(--c-fuxia);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .auth-mobile-logo__mark svg {
        width: 16px;
        height: 16px;
        fill: var(--c-white);
    }

.auth-mobile-logo__text {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-black);
    letter-spacing: -.4px;
}

.auth-tabs {
    display: flex;
    background: var(--c-grey-100);
    border-radius: var(--r-pill);
    padding: 3px;
    margin-bottom: 32px;
}

.auth-tab {
    flex: 1;
    padding: 8px;
    border-radius: var(--r-pill);
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-grey-500);
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base), box-shadow var(--t-base);
}

    .auth-tab.active {
        background: var(--c-white);
        color: var(--c-black);
        box-shadow: var(--shadow-xs);
    }

.auth-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-black);
    letter-spacing: -.5px;
    margin-bottom: 6px;
}

.auth-subheading {
    font-size: 13.5px;
    color: var(--c-grey-500);
    margin-bottom: 28px;
}

.btn-social {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 42px;
    border: 1px solid var(--c-grey-300);
    border-radius: var(--r-md);
    background: var(--c-white);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-black);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}

    .btn-social:hover {
        background: var(--c-grey-50);
        border-color: var(--c-grey-400);
    }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: var(--c-grey-400);
    font-size: 12px;
}

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--c-grey-200);
    }

.input-icon-wrap {
    position: relative;
}

    .input-icon-wrap .form-control {
        padding-left: 38px !important;
    }

    .input-icon-wrap .input-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--c-grey-400);
        font-size: 13px;
        pointer-events: none;
    }

    .input-icon-wrap .input-icon-right {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--c-grey-400);
        font-size: 13px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 4px;
        line-height: 1;
    }

.btn-auth {
    width: 100%;
    height: 44px;
    font-size: 14px;
    font-weight: 600;
}

.step-indicator {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
}

.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-grey-200);
    color: var(--c-grey-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background var(--t-base), color var(--t-base);
}

    .step-dot.active {
        background: var(--c-fuxia);
        color: var(--c-white);
    }

    .step-dot.done {
        background: #0a9a5c;
        color: var(--c-white);
    }

.step-line {
    flex: 1;
    height: 2px;
    background: var(--c-grey-200);
}

.step-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--c-grey-500);
    text-align: center;
    margin-top: 4px;
}

.auth-footer {
    text-align: center;
    font-size: 12.5px;
    color: var(--c-grey-400);
    margin-top: 32px;
}

    .auth-footer a {
        color: var(--c-fuxia);
        text-decoration: none;
    }

        .auth-footer a:hover {
            text-decoration: underline;
        }

/* Mini-app PWA per evento (/app/{eventoUid}): shell mobile a tutta pagina, deliberatamente separata
   da .admin-shell/.utente-shell (niente topbar/sidebar admin) — vedi MiniAppLayout.razor.
   Template "standard" (v1, unico attualmente disponibile): tutto lo stile passa da questi token,
   così un futuro secondo template (riservato a livello di Ambiente, vedi
   AmbienteConfig.MiniAppTemplate) potrà limitarsi a ridefinirli sotto un'altra classe
   .miniapp-theme-* invece di forkare i widget. Navigazione a due livelli: Home (griglia di tile,
   niente Sezione in URL) → drill-in per sezione (topbar con back + FAB per tornare alla Home) — vedi
   MiniAppShell.razor. --miniapp-primario è impostato inline da MiniAppShell.razor coi colori di
   EventoMiniAppConfig. */
.miniapp-shell {
    --miniapp-primario: #0d6efd;
    --miniapp-primario-scuro: color-mix(in srgb, var(--miniapp-primario) 70%, black);
    --miniapp-bg: #f3f5f9;
    --miniapp-radius-lg: 22px;
    --miniapp-radius-md: 14px;
    --miniapp-shadow-card: 0 2px 10px rgba(15, 23, 42, .07);
    --miniapp-shadow-fab: 0 8px 20px rgba(15, 23, 42, .22);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--miniapp-bg);
}

/* Topbar slim, solo nelle sotto-pagine (drill-in): back-arrow + titolo sezione. Niente topbar nella Home,
   che ha invece l'hero qui sotto. */
.miniapp-topbar {
    background: var(--miniapp-primario);
    color: #fff;
    padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.miniapp-topbar__back {
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.miniapp-topbar__title {
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hero della Home: banner evento (se presente) + titolo/periodo, angoli arrotondati in basso. */
.miniapp-hero {
    background: linear-gradient(160deg, var(--miniapp-primario), var(--miniapp-primario-scuro));
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 30px;
    border-radius: 0 0 var(--miniapp-radius-lg) var(--miniapp-radius-lg);
    position: relative;
    overflow: hidden;
}

    .miniapp-hero::after {
        /* Overlay per leggibilità del testo quando c'è un'immagine banner di sfondo. */
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .38));
        pointer-events: none;
    }

.miniapp-hero__eyebrow {
    position: relative;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .22);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.miniapp-hero__title {
    position: relative;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

.miniapp-hero__meta {
    position: relative;
    font-size: 12.5px;
    opacity: .92;
    margin-top: 6px;
}

.miniapp-content {
    flex: 1 1 auto;
    padding: 16px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

/* Griglia di tile della Home: una per sezione visibile, "risale" leggermente sotto l'hero. */
.miniapp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: -18px;
    position: relative;
}

.miniapp-tile {
    background: #fff;
    border-radius: var(--miniapp-radius-md);
    box-shadow: var(--miniapp-shadow-card);
    padding: 16px 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.miniapp-tile__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--miniapp-primario) 12%, white);
    color: var(--miniapp-primario);
    font-size: 17px;
}

.miniapp-tile__label {
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    color: var(--c-grey-700, #333);
}

/* Card generica di contenuto nelle sotto-pagine: stessi token di raggio/ombra della griglia — i
   widget (Agenda/Programma/Badge/...) la usano al posto di ".card" per restare nel linguaggio
   visivo della mini-app invece che in quello di PanelAdmin/PanelUtente. */
.miniapp-card {
    background: #fff;
    border-radius: var(--miniapp-radius-md);
    box-shadow: var(--miniapp-shadow-card);
    padding: 14px;
}

/* Pulsante flottante "torna alla Home", visibile solo nelle sotto-pagine (mai in Home). */
.miniapp-fab {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--miniapp-primario);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: var(--miniapp-shadow-fab);
    z-index: 20;
    text-decoration: none;
}

/* "Ticket" digitale del Badge: card con gradiente + pannello bianco per il QR, invece di una card piatta. */
.miniapp-ticket {
    background: linear-gradient(135deg, var(--miniapp-primario), var(--miniapp-primario-scuro));
    border-radius: var(--miniapp-radius-md);
    box-shadow: var(--miniapp-shadow-card);
    padding: 22px 18px;
    color: #fff;
    text-align: center;
}

.miniapp-ticket__qr {
    background: #fff;
    border-radius: var(--miniapp-radius-md);
    padding: 16px;
    display: inline-block;
    margin-bottom: 14px;
}

.miniapp-ticket__nome {
    font-weight: 700;
    font-size: 16px;
}

.miniapp-ticket__hint {
    font-size: 12px;
    opacity: .85;
    margin-top: 4px;
}

/* EventoCard.razor / MieiEventi.razor (/miei-eventi), layout a griglia stile inagenda.it — vedi
   CLAUDE.md root. L'allineamento in altezza tra i box della stessa riga è demandato a Bootstrap
   (row-cols + <div class="col d-flex">, stretch di default), qui solo lo stile del singolo box. */
.evento-grid-card {
    background: var(--c-white);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--c-grey-200);
    transition: box-shadow var(--t-base), transform var(--t-base);
}

.evento-grid-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* I banner reali sono quasi sempre molto larghi e poco alti, e variano leggermente di formato da
   evento a evento: il box che li contiene ha un'altezza fissa (uguale su tutte le card, righe
   diverse comprese — non demandata allo stretch di Bootstrap come il resto della card), l'immagine
   usa object-fit:contain (mai cover) così è **sempre visibile per intero, mai ritagliata** — un
   formato più stretto o più largo del box lascia solo dello spazio vuoto ai lati/sopra-sotto
   (centrato, via align-items/justify-content), non un ritaglio. */
.evento-grid-card__img-wrap {
    position: relative;
    height: 150px;
    background: var(--c-grey-100);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evento-grid-card__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

.evento-grid-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-grey-300);
    font-size: 32px;
}

/* Badge tipo evento/Iscritto/ECM: sotto l'immagine (non più sovrapposti), in cima al card-body. */
.evento-grid-card__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.evento-grid-card__titolo {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 2px;
}

.evento-grid-card__sottotitolo {
    color: var(--c-grey-500);
    font-size: 12.5px;
    margin-bottom: 8px;
}

.evento-grid-card__meta-riga {
    display: block;
    font-size: 12px;
    color: var(--c-grey-500);
    margin-top: 4px;
}

.evento-grid-card__meta-riga--link {
    color: var(--c-fuxia);
    text-decoration: none;
}

.evento-grid-card__meta-riga--link:hover {
    text-decoration: underline;
}

.evento-grid-card__dettagli {
    align-self: flex-start;
    margin-top: 8px;
    padding-left: 0;
}

.evento-grid-card__buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--c-grey-200);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
}

/* admin.css fissa .btn a height:38px (i bottoni normali di PanelAdmin sono sempre una riga) — qui invece
   il bottone form può avere titolo + motivo di blocco su due righe, quindi height:auto e un
   min-height per non perdere l'allineamento verticale con i bottoni a riga singola. */
.evento-grid-card__buttons .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: auto;
    min-height: 38px;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
}

/* Ogni bottone dentro .evento-grid-card__buttons è flex-direction:column (vedi sopra): senza questo
   wrapper icona+testo diventerebbero due flex item separati e andrebbero ognuno su una riga propria. */
.evento-grid-card__btn-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.evento-grid-card__btn-ecm {
    margin-left: 6px;
    font-size: 10px;
    opacity: .85;
}

.evento-grid-card__btn-motivo {
    font-size: 10px;
    font-weight: 400;
    opacity: .8;
}

.evento-grid-card__badge-riga {
    text-align: center;
    padding: 6px;
    font-size: 11px;
}

.evento-grid-card__nota {
    font-size: 10.5px;
    color: var(--c-grey-500);
    text-align: center;
}

/* Accordion "Dettaglio iscrizioni" (<details> nativo: niente JS/componente, comportamento e
   accessibilità gratis). Sostituisce i bottoni per-form una volta che l'utente è già iscritto,
   per tenere la card pulita — vedi CLAUDE.md root. */
.evento-grid-card__accordion {
    border-top: 1px solid var(--c-grey-200);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
}

.evento-grid-card__accordion summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-grey-700, #333);
    list-style: none;
}

.evento-grid-card__accordion summary::-webkit-details-marker {
    display: none;
}

.evento-grid-card__accordion-chevron {
    font-size: 10px;
    transition: transform var(--t-fast);
}

.evento-grid-card__accordion[open] .evento-grid-card__accordion-chevron {
    transform: rotate(90deg);
}

.evento-grid-card__accordion-count {
    font-weight: 400;
    color: var(--c-grey-500);
}

.evento-grid-card__accordion-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.evento-grid-card__iscrizione-box {
    background: var(--c-grey-50);
    border: 1px solid var(--c-grey-200);
    border-radius: var(--r-md);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.evento-grid-card__iscrizione-titolo {
    font-weight: 600;
    font-size: 12.5px;
}

.evento-grid-card__iscrizione-meta {
    font-size: 11px;
    color: var(--c-grey-500);
}

.evento-grid-card__iscrizione-extra {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Ghost login (UtenteTopBar/UtenteSideBar): bordo glowing fuxia sul cerchio avatar, unico indicatore
   visivo che l'amministratore sta navigando come utente in modalità Ghost (vede sempre tutto,
   TestMode incluso; nessuna email viene mai inviata all'utente — vedi CLAUDE.md/IGhostEmailGuard). */
.avatar-ghost {
    box-shadow: 0 0 0 2px var(--c-fuxia), 0 0 10px 2px var(--c-fuxia-light);
    animation: avatar-ghost-glow 1.8s ease-in-out infinite;
}

@keyframes avatar-ghost-glow {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--c-fuxia), 0 0 6px 1px var(--c-fuxia-light);
    }
    50% {
        box-shadow: 0 0 0 2px var(--c-fuxia-light), 0 0 14px 4px var(--c-fuxia-light);
    }
}

/* ── Verifica attestati (pagine pubbliche /verifica e /v/{codice}, dominio centrale) ── */
.verifica-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-bg);
}

.verifica-header {
    padding: 16px;
    border-bottom: 1px solid var(--c-grey-100);
    background: var(--surface-card);
}

.verifica-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--c-black);
    text-decoration: none;
    font-weight: 700;
}

    .verifica-brand i {
        color: var(--c-fuxia);
        font-size: 1.3rem;
    }

    .verifica-brand small {
        font-weight: 400;
        color: var(--c-grey-500);
        margin-left: 4px;
    }

.verifica-main {
    flex: 1;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 16px;
}

.verifica-card {
    background: var(--surface-card);
    border: 1px solid var(--c-grey-100);
    border-radius: 12px;
    padding: 24px;
}

.verifica-titolo {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.verifica-sottotitolo {
    font-size: 13.5px;
    color: var(--c-grey-500);
}

.verifica-form {
    margin-top: 16px;
}

.verifica-separatore {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 4px;
    color: var(--c-grey-400);
    font-size: 12px;
}

    .verifica-separatore::before,
    .verifica-separatore::after {
        content: "";
        flex: 1;
        border-top: 1px solid var(--c-grey-100);
    }

.verifica-risultato {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--c-grey-100);
}

.verifica-esito {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 10px;
    margin: 12px 0 16px;
}

.verifica-esito__icona {
    font-size: 1.6rem;
    line-height: 1;
}

.verifica-esito__titolo {
    font-weight: 700;
    font-size: 15px;
}

.verifica-esito__testo {
    font-size: 13px;
    margin-top: 2px;
}

.verifica-esito--ok {
    background: #e6f7f0;
    color: #0a7a4a;
}

.verifica-esito--ko {
    background: var(--c-red-dim);
    color: var(--c-red);
}

.verifica-esito--neutro {
    background: var(--c-grey-50);
    color: var(--c-grey-700);
}

:root[data-theme="dark"] .verifica-esito--ok {
    background: #0a9a5c26;
    color: #4fd39a;
}

.verifica-dati {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: 8px 16px;
    font-size: 13.5px;
    margin: 0;
}

    .verifica-dati dt {
        font-weight: 500;
        color: var(--c-grey-500);
    }

    .verifica-dati dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

.verifica-logo {
    max-height: 28px;
    max-width: 120px;
    margin-right: 8px;
    vertical-align: middle;
}

.verifica-controllo {
    font-size: 13px;
    margin-top: 16px;
}

.verifica-sezione {
    font-size: 14px;
    font-weight: 600;
    margin: 20px 0 8px;
}

.verifica-firma {
    font-size: 12.5px;
    padding: 10px 12px;
    border: 1px solid var(--c-grey-100);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.verifica-azioni {
    margin-top: 20px;
}

.verifica-footer {
    text-align: center;
    font-size: 11.5px;
    color: var(--c-grey-500);
    padding: 16px;
}

@media (max-width: 480px) {
    .verifica-dati {
        grid-template-columns: 1fr;
        gap: 2px;
    }

        .verifica-dati dd {
            margin-bottom: 8px;
        }

    .verifica-form .d-flex {
        flex-direction: column;
    }
}