/* Pagina pubblica della credenziale — /assertions/{guid} (issue #117).

   Namespace: ca- (credential assertion). Tutte le regole sono figlie di .ca-page.

   PALETTE — pagina bianca e accento del tenant. L'accento arriva dai token --tenant-*
   dichiarati in assets/tenants/{slug}/css/theme.css (caricato da _LayoutPublic prima di
   questo file); i fallback riproducono il blu C-Box. Impaginazione, tipografia e neutri
   sono identici per tutti i tenant: cambia solo l'accento.
   I colori di stato (valida / revocata) restano semantici e fissi, conformi WCAG AA;
   lo stato "scaduta" è neutro perché l'ambra è fuori palette.

   LAYOUT — la rail sinistra sticky raccoglie attestato, verifica, dati e issuer. Quando
   supera l'altezza del viewport scorre autonomamente; su mobile torna nel flusso normale.

   Non tocca badge-detail.css né assertion.css: quelli restano a BadgeClass e Claim. */

/* I token stanno su :root e non su .ca-page perche' i modali (condividi, verifica
   1EdTech, JSON della credenziale) vengono resi fuori dal contenitore della pagina:
   agganciandoli a .ca-page i bottoni dentro i modali resterebbero senza colori.
   Il file lo carica solo Views/Assertion/Assertion.cshtml, quindi resta comunque
   confinato a questa pagina. */
:root {
    /* Accento del tenant, blu C-Box come fallback. --ca-violet fa sia da testo su bianco
       sia da fondo sotto --ca-on-accent: ogni tenant lo dichiara con contrasto >= 4.5:1
       sul bianco. Le tre gradazioni tenui si ricavano da lì, così un tenant deve
       dichiarare due soli colori. */
    --ca-violet: var(--tenant-accent, #354f9a);
    --ca-violet-strong: var(--tenant-accent-strong, #263d7d);
    --ca-violet-soft: color-mix(in srgb, var(--ca-violet) 7%, #fff);
    --ca-violet-tint: color-mix(in srgb, var(--ca-violet) 12%, #fff);
    --ca-violet-line: color-mix(in srgb, var(--ca-violet) 22%, #fff);
    --ca-on-accent: var(--tenant-on-accent, #fdfdff);

    --ca-ink: #1f1c33;
    --ca-muted: #5b5872;
    --ca-faint: #817e97;
    --ca-surface: #fff;
    --ca-surface-2: #fafafd;
    --ca-border: #e6e4ef;
    --ca-border-soft: #efedf6;
    --ca-shadow: 0 .4rem 1.2rem rgba(31, 28, 51, .05);
    --ca-shadow-strong: 0 .7rem 1.8rem rgba(31, 28, 51, .1);

    /* Stato: semantici e fissi, indipendenti dal tema tenant */
    --ca-ok: #146c43;
    --ca-ok-soft: #eaf4ee;
    --ca-ok-line: #c3e0d0;
    --ca-ko: #b02a37;
    --ca-ko-soft: #fbeef0;
    --ca-ko-line: #eecace;
    --ca-warn: #4a4763;
    --ca-warn-soft: #f4f4f8;
    --ca-warn-line: #dfdee9;

    --ca-r-sm: .55rem;
    --ca-r: 1rem;
    --ca-r-lg: 1.25rem;
    --ca-t: .2s cubic-bezier(.4, 0, .2, 1);
}

.ca-page {
    color: var(--ca-ink);
    font-family: inherit;
}

/* ─────────────────────────────────────────────────────────
   IMPIANTO: ATTESTATO STICKY + COLONNA PRINCIPALE
   ───────────────────────────────────────────────────────── */
.ca-shell {
    align-items: start;
    display: grid;
    /* riga: intestazione ↔ contenuti; colonna: attestato ↔ testo */
    gap: 1.15rem 2rem;
    grid-template-areas:
        "art head"
        "art main";
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    margin: 0 auto;
    max-width: 1160px;
    padding: 2rem 1.5rem 3rem;
}

.ca-art {
    align-content: start;
    display: grid;
    gap: .8rem;
    grid-area: art;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem;
    position: sticky;
    scrollbar-color: var(--ca-violet-line) transparent;
    scrollbar-width: thin;
    top: 1.25rem;
}

.ca-main {
    display: grid;
    gap: 1.15rem;
    grid-area: main;
    min-width: 0;
}

/* ─────────────────────────────────────────────────────────
   ATTESTATO: CORNICE E IMMAGINE
   ───────────────────────────────────────────────────────── */
.ca-frame {
    background: var(--ca-surface);
    border: 1px solid var(--ca-violet-line);
    border-radius: var(--ca-r-lg);
    box-shadow: var(--ca-shadow-strong);
    margin: 0;
    padding: .9rem;
    position: relative;
    width: 100%;
}

.ca-frame-mat {
    background: var(--ca-violet-soft);
    border-radius: var(--ca-r);
    display: block;
    overflow: hidden;
    padding: 1rem;
    position: relative;
}

.ca-frame-mat img {
    display: block;
    height: auto;
    max-height: 44vh;
    object-fit: contain;
    width: 100%;
}

/* Credenziale scaduta o revocata: immagine desaturata e fascia di stato */
.ca-frame.is-invalid .ca-frame-mat img {
    filter: grayscale(.9);
}

.ca-frame-veil {
    background: rgba(31, 28, 51, .78);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    left: 0;
    letter-spacing: .14em;
    padding: .5rem .4rem;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 50%;
    transform: translateY(-50%);
}

/* ─────────────────────────────────────────────────────────
   INTESTAZIONE DELLA CREDENZIALE
   ───────────────────────────────────────────────────────── */
.ca-head {
    grid-area: head;
    padding: .25rem 0 .3rem;
}

.ca-owner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 0 0 .9rem;
}

.ca-owner-img {
    border: 1px solid var(--ca-border);
    border-radius: 50%;
    flex: none;
    height: 44px;
    object-fit: cover;
    width: 44px;
}

.ca-owner strong {
    display: block;
    font-size: .95rem;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.ca-owner-job {
    color: var(--ca-muted);
    display: block;
    font-size: .78rem;
}

.ca-owner a {
    color: var(--ca-violet);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.ca-owner a:hover,
.ca-owner a:focus {
    color: var(--ca-violet-strong);
    text-decoration: underline;
}

.ca-eyebrow {
    color: var(--ca-violet);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    margin: 0 0 .4rem;
    text-transform: uppercase;
}

.ca-title {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin: 0 0 .5rem;
    text-wrap: balance;
}

.ca-issuer-line {
    color: var(--ca-muted);
    font-size: .95rem;
    margin: 0 0 .35rem;
}

.ca-issuer-line a {
    color: var(--ca-violet);
    font-weight: 600;
    text-decoration: none;
}

.ca-issuer-line a:hover,
.ca-issuer-line a:focus {
    color: var(--ca-violet-strong);
    text-decoration: underline;
}

.ca-endorsers {
    color: var(--ca-muted);
    font-size: .85rem;
    margin: 0 0 .35rem;
}

.ca-endorsers a {
    color: var(--ca-violet);
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────
   BOTTONI
   Selettori a doppia classe (.ca-btn.ca-btn-accent): il guscio pubblico colora tutti
   gli <a> con body.cbox-public a, che vale piu' di una classe singola — senza la doppia
   classe il bottone finiva con testo blu su sfondo blu. Vale dentro e fuori .ca-page,
   quindi funziona anche per i bottoni dentro i modali.
   ───────────────────────────────────────────────────────── */
.ca-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

/* Nella colonna dell'attestato le azioni occupano tutta la larghezza */
.ca-art .ca-actions {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.ca-art .ca-actions .ca-btn {
    justify-content: center;
}

.ca-art .ca-actions .ca-btn-wide {
    grid-column: 1 / -1;
}

.ca-btn {
    align-items: center;
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--ca-r-sm);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    gap: .45rem;
    padding: .62rem 1.1rem;
    text-decoration: none;
    transition: transform var(--ca-t), box-shadow var(--ca-t), background var(--ca-t), border-color var(--ca-t);
    white-space: nowrap;
}

.ca-btn:hover {
    transform: translateY(-1px);
}

.ca-btn.ca-btn-accent,
body.cbox-public a.ca-btn.ca-btn-accent {
    background: var(--ca-violet);
    box-shadow: 0 .35rem .9rem rgba(53, 79, 154, .22);
    color: var(--ca-on-accent);
}

.ca-btn.ca-btn-accent:hover,
.ca-btn.ca-btn-accent:focus,
body.cbox-public a.ca-btn.ca-btn-accent:hover,
body.cbox-public a.ca-btn.ca-btn-accent:focus {
    background: var(--ca-violet-strong);
    box-shadow: 0 .5rem 1.2rem rgba(53, 79, 154, .3);
    color: var(--ca-on-accent);
}

.ca-btn.ca-btn-ghost {
    background: var(--ca-violet-soft);
    border-color: var(--ca-violet-line);
    color: var(--ca-violet-strong);
}

.ca-btn.ca-btn-ghost:hover,
.ca-btn.ca-btn-ghost:focus {
    background: var(--ca-violet-tint);
    border-color: var(--ca-violet);
    color: var(--ca-violet-strong);
}

.ca-btn.ca-btn-quiet {
    background: var(--ca-surface);
    border-color: var(--ca-border);
    color: var(--ca-violet-strong);
    font-size: .82rem;
    padding: .5rem .85rem;
}

.ca-btn.ca-btn-quiet:hover,
.ca-btn.ca-btn-quiet:focus {
    background: var(--ca-violet-soft);
    border-color: var(--ca-violet-line);
    color: var(--ca-violet-strong);
}

/* ─────────────────────────────────────────────────────────
   CARD
   ───────────────────────────────────────────────────────── */
.ca-card {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-r);
    box-shadow: var(--ca-shadow);
}

.ca-card-title {
    color: var(--ca-faint);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    margin: 0 0 .85rem;
    text-transform: uppercase;
}

.ca-accordion {
    overflow: hidden;
    width: 100%;
}

.ca-accordion > summary {
    cursor: pointer;
    list-style: none;
}

.ca-accordion > summary::-webkit-details-marker {
    display: none;
}

.ca-accordion .ca-verify-head {
    border-bottom: 0;
    border-radius: var(--ca-r);
}

.ca-accordion[open] .ca-verify-head {
    border-bottom: 1px solid var(--ca-violet-line);
    border-radius: var(--ca-r) var(--ca-r) 0 0;
}

.ca-verify-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.ca-accordion-chevron {
    color: var(--ca-violet-strong);
    flex: none;
    font-size: .75rem;
    transition: transform var(--ca-t);
}

.ca-accordion[open] .ca-accordion-chevron {
    transform: rotate(180deg);
}

.ca-accordion-body {
    background: var(--ca-surface);
}

/* ─────────────────────────────────────────────────────────
   CARD DI VERIFICA
   ───────────────────────────────────────────────────────── */
.ca-verify-head {
    align-items: center;
    background: var(--ca-violet-soft);
    border-bottom: 1px solid var(--ca-violet-line);
    border-radius: var(--ca-r) var(--ca-r) 0 0;
    display: flex;
    gap: .7rem;
    padding: 1rem 1.15rem;
}

.ca-seal {
    align-items: center;
    background: var(--ca-surface);
    border: 1px solid var(--ca-violet-line);
    border-radius: 12px;
    color: var(--ca-faint);
    display: flex;
    flex: none;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.ca-seal.is-ok {
    background: var(--ca-ok-soft);
    border-color: var(--ca-ok-line);
    color: var(--ca-ok);
}

.ca-seal.is-ko {
    background: var(--ca-ko-soft);
    border-color: var(--ca-ko-line);
    color: var(--ca-ko);
}

.ca-verify-head strong {
    display: block;
    font-size: .95rem;
    letter-spacing: -.01em;
}

.ca-verify-head span {
    color: var(--ca-muted);
    font-size: .78rem;
}

/* Le voci di verifica stanno su due colonne: la card è larga, non deve allungarsi */
.ca-checks {
    display: grid;
    gap: .1rem .6rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    list-style: none;
    margin: 0;
    padding: .5rem .65rem .6rem;
}

.ca-checks li {
    align-items: center;
    border-radius: var(--ca-r-sm);
    display: flex;
    font-size: .84rem;
    gap: .6rem;
    padding: .45rem .6rem;
}

.ca-checks .ca-tick {
    align-items: center;
    color: var(--ca-faint);
    display: flex;
    flex: none;
    height: 16px;
    justify-content: center;
    width: 16px;
}

.ca-checks li.is-ok .ca-tick { color: var(--ca-ok); }
.ca-checks li.is-ko .ca-tick { color: var(--ca-ko); }

.ca-checks .ca-lbl {
    flex: 1 1 auto;
}

.ca-checks .ca-val {
    color: var(--ca-muted);
    font-size: .78rem;
    text-align: right;
}

.ca-checks li.is-ko .ca-val {
    color: var(--ca-ko);
    font-weight: 600;
}

/* Puntini di caricamento mentre le verifiche sono in corso */
.ca-spin {
    animation: ca-pulse 1s ease-in-out infinite;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    height: .5rem;
    width: .5rem;
}

@keyframes ca-pulse {
    0%, 100% { opacity: .25; }
    50% { opacity: 1; }
}

.ca-verify-foot {
    border-top: 1px solid var(--ca-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .75rem .95rem;
}

.ca-art .ca-checks {
    grid-template-columns: minmax(0, 1fr);
}

.ca-art .ca-verify-foot .ca-btn {
    flex: 1 1 0;
    justify-content: center;
}

/* ─────────────────────────────────────────────────────────
   SEZIONI DI CONTENUTO
   ───────────────────────────────────────────────────────── */
.ca-sec {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-r);
    box-shadow: var(--ca-shadow);
    overflow: hidden;
}

.ca-sec > header {
    align-items: center;
    background: var(--ca-violet-soft);
    border-bottom: 1px solid var(--ca-violet-line);
    display: flex;
    gap: .6rem;
    padding: .85rem 1.25rem;
}

.ca-sec > header h2,
.ca-sec > header h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
}

.ca-sec > header .ca-count {
    background: var(--ca-surface);
    border: 1px solid var(--ca-violet-line);
    border-radius: 99px;
    color: var(--ca-muted);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-left: auto;
    padding: .1rem .5rem;
}

.ca-sec-body {
    padding: 1.15rem 1.25rem;
}

.ca-sec-body > *:last-child {
    margin-bottom: 0;
}

.ca-sec-body p {
    margin: 0 0 .8rem;
    max-width: 66ch;
}

.ca-sec-body a {
    color: var(--ca-violet-strong);
    text-decoration: underline;
}

.ca-sec-body ul,
.ca-sec-body ol {
    margin: 0 0 .8rem;
    padding-left: 1.2rem;
}

.ca-lede {
    font-size: 1.02rem;
}

/* Griglia di coppie etichetta/valore (dati credenziale, durata, crediti, livello, evento) */
.ca-facts {
    display: grid;
    gap: .9rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0;
}

.ca-facts dt {
    color: var(--ca-faint);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ca-facts dd {
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
}

.ca-side-section {
    width: 100%;
}

.ca-side-section .ca-sec-body {
    padding: .95rem 1rem;
}

.ca-side-section .ca-facts {
    gap: .7rem .9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ca-side-section .ca-facts dt {
    font-size: .64rem;
}

.ca-side-section .ca-facts dd {
    font-size: .84rem;
}

.ca-views {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
}

/* ─────────────────────────────────────────────────────────
   COMPETENZE COME CHIP
   ───────────────────────────────────────────────────────── */
.ca-skills {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ca-skill {
    align-items: center;
    background: var(--ca-violet-soft);
    border: 1px solid var(--ca-violet-line);
    border-radius: 99px;
    color: var(--ca-ink);
    display: inline-flex;
    font-size: .84rem;
    font-weight: 600;
    gap: .4rem;
    padding: .4rem .8rem .4rem .55rem;
}

.ca-skill-src {
    background: var(--ca-surface);
    border: 1px solid var(--ca-violet-line);
    border-radius: 99px;
    color: var(--ca-violet-strong);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .1rem .38rem;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────
   FRAMEWORK, ALLEGATI E PERGAMENE
   ───────────────────────────────────────────────────────── */
.ca-tiles {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.ca-tiles .ca-tile {
    background: var(--ca-surface-2);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-r-sm);
    color: inherit;
    display: block;
    padding: .8rem .9rem;
    text-decoration: none !important;
    transition: transform var(--ca-t), box-shadow var(--ca-t), border-color var(--ca-t);
}

.ca-tiles .ca-tile:hover,
.ca-tiles .ca-tile:focus {
    background: var(--ca-violet-soft);
    border-color: var(--ca-violet-line);
    box-shadow: var(--ca-shadow);
    color: inherit;
    transform: translateY(-2px);
}

.ca-tile-k {
    color: var(--ca-faint);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ca-tile-n {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-top: .12rem;
}

.ca-tile-d {
    color: var(--ca-muted);
    display: block;
    font-size: .78rem;
    margin-top: .2rem;
}

.ca-file {
    align-items: center;
    display: flex;
    gap: .7rem;
}

.ca-file-ic {
    align-items: center;
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: 9px;
    color: var(--ca-muted);
    display: flex;
    flex: none;
    font-size: .62rem;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    letter-spacing: .04em;
    text-transform: uppercase;
    width: 34px;
}

.ca-file-nm {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ca-file-mt {
    color: var(--ca-muted);
    display: block;
    font-size: .74rem;
}

/* Toggle di visibilità degli allegati (solo titolare) */
.ca-att-toggle {
    background: none;
    border: 1px solid var(--ca-border);
    border-radius: 99px;
    color: var(--ca-muted);
    cursor: pointer;
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    margin-top: .5rem;
    padding: .2rem .6rem;
}

.ca-att-toggle:hover {
    border-color: var(--ca-violet-line);
    color: var(--ca-violet-strong);
}

.ca-att-note {
    color: var(--ca-muted);
    font-size: .8rem;
    margin-bottom: .8rem;
}

/* Pergamene: visibili solo a titolare e superadmin */
.ca-parchments {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ca-parchment {
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-r-sm);
    display: block;
    margin-bottom: .6rem;
    max-width: 100%;
}

/* ─────────────────────────────────────────────────────────
   CARD ENTE EMITTENTE
   ───────────────────────────────────────────────────────── */
.ca-issuer {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
}

.ca-issuer-logo-wrap {
    flex: none;
    position: relative;
}

.ca-issuer-logo {
    border: 1px solid var(--ca-border);
    border-radius: 14px;
    flex: none;
    height: 62px;
    object-fit: contain;
    width: 62px;
}

.ca-issuer-verified {
    align-items: center;
    background: var(--ca-violet);
    border: 2px solid var(--ca-surface);
    border-radius: 50%;
    bottom: -4px;
    box-shadow: 0 2px 6px rgba(31, 28, 51, .22);
    color: var(--ca-on-accent);
    display: inline-flex;
    font-size: .62rem;
    height: 23px;
    justify-content: center;
    position: absolute;
    right: -4px;
    width: 23px;
}

.ca-issuer-copy {
    min-width: 0;
}

.ca-issuer h3 {
    font-size: 1rem;
    letter-spacing: -.015em;
    margin: 0 0 .25rem;
}

.ca-issuer p {
    color: var(--ca-muted);
    font-size: .87rem;
    margin: 0 0 .7rem;
    max-width: 60ch;
}

.ca-issuer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* ─────────────────────────────────────────────────────────
   BANNER DI STATO
   ───────────────────────────────────────────────────────── */
.ca-notice {
    align-items: flex-start;
    background: var(--ca-warn-soft);
    border: 1px solid var(--ca-warn-line);
    border-left: 4px solid var(--ca-warn);
    border-radius: var(--ca-r-sm);
    display: flex;
    font-size: .88rem;
    gap: .7rem;
    margin: 0;
    padding: .85rem 1rem;
}

.ca-notice.is-ko {
    background: var(--ca-ko-soft);
    border-color: var(--ca-ko-line);
    border-left-color: var(--ca-ko);
}

.ca-notice strong {
    display: block;
}

.ca-notice .ca-notice-ic {
    flex: none;
    margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────
   CTA FINALE
   ───────────────────────────────────────────────────────── */
.ca-cta {
    align-items: center;
    background: var(--ca-violet-soft);
    border: 1px solid var(--ca-violet-line);
    border-radius: var(--ca-r);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding: 1.5rem;
}

.ca-cta > div {
    flex: 1 1 300px;
    min-width: 0;
}

.ca-cta h2 {
    font-size: 1.2rem;
    letter-spacing: -.02em;
    margin: 0 0 .3rem;
}

.ca-cta p {
    color: var(--ca-muted);
    font-size: .89rem;
    margin: 0;
    max-width: 52ch;
}

/* ─────────────────────────────────────────────────────────
   MODALI DELLA PAGINA
   Condividi/Scarica (_SocialModal / _SocialModalExternal, partial condivisi con le altre
   pagine), dettaglio verifica 1EdTech, notarizzazione e JSON della credenziale.
   Le regole stanno qui e non nei partial: questo CSS lo carica solo questa pagina, quindi
   le altre pagine non vengono toccate. Dove il partial usa i suoi colori (il navy #0a2463)
   si vince per specificita' con #shareModal, senza modificarlo.
   ───────────────────────────────────────────────────────── */
.modal-content {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-r);
    box-shadow: var(--ca-shadow-strong);
    color: var(--ca-ink);
}

.modal-header {
    align-items: center;
    background: var(--ca-violet-soft);
    border-bottom: 1px solid var(--ca-violet-line);
    border-radius: calc(var(--ca-r) - 1px) calc(var(--ca-r) - 1px) 0 0;
    gap: .75rem;
    padding: .85rem 1.25rem;
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
}

.modal-body {
    padding: 1.15rem 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--ca-border-soft);
    gap: .5rem;
    padding: .85rem 1.25rem;
}

/* Bootstrap mette un margine su ogni figlio del footer: con il gap raddoppierebbe */
.modal-footer > * {
    margin: 0;
}

.modal .form-control {
    border-color: var(--ca-border);
    color: var(--ca-ink);
}

.modal .form-control:focus,
.modal .btn:focus-visible,
.modal .btn-close:focus {
    border-color: var(--ca-violet);
    box-shadow: 0 0 0 .2rem rgba(53, 79, 154, .25);
    outline: none;
}

/* Bottoni Bootstrap eventualmente presenti nei partial condivisi */
.modal .btn-primary {
    background-color: var(--ca-violet);
    border-color: var(--ca-violet);
    color: var(--ca-on-accent);
}

.modal .btn-primary:hover,
.modal .btn-primary:focus {
    background-color: var(--ca-violet-strong);
    border-color: var(--ca-violet-strong);
}

.modal .btn-secondary,
.modal .btn-danger {
    background-color: var(--ca-surface);
    border-color: var(--ca-border);
    color: var(--ca-violet-strong);
}

.modal .btn-secondary:hover,
.modal .btn-danger:hover {
    background-color: var(--ca-violet-soft);
    border-color: var(--ca-violet-line);
    color: var(--ca-violet-strong);
}

/* Esiti della verifica 1EdTech: erano colori scritti a mano nel markup */
.ca-modal-ok {
    color: var(--ca-ok);
}

.ca-modal-ko {
    color: var(--ca-ko);
    font-weight: 600;
}

#EdTechVerify .modal-body .row + .row {
    border-top: 1px solid var(--ca-border-soft);
}

#EdTechVerify .modal-body h3 {
    color: var(--ca-faint);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#EdTechVerify .modal-body p {
    font-size: .9rem;
}

#EdTechVerify .modal-body .fa-check {
    color: var(--ca-ok);
}

/* ── Modale Condividi/Scarica: allineo gli accenti del partial condiviso ── */
/* Le linguette inattive erano grigio chiaro: illeggibili, ancora di più sulla fascia */
#shareModal .nav-link {
    color: var(--ca-muted);
    font-weight: 600;
}

#shareModal .nav-link:hover {
    color: var(--ca-violet);
}

#shareModal .nav-link.active,
#shareModal .nav-link.active:hover {
    color: var(--ca-violet-strong) !important;
}

#shareModal .btn-custom {
    background-color: var(--ca-violet);
    border-radius: var(--ca-r-sm);
    color: var(--ca-on-accent);
    font-weight: 700;
}

#shareModal .btn-custom:hover,
#shareModal .btn-custom:focus,
#shareModal .btn-custom:active {
    background-color: var(--ca-violet-strong);
    color: var(--ca-on-accent);
}

#shareModal #carousel-next,
#shareModal #carousel-prev {
    background-color: var(--ca-violet);
    color: var(--ca-on-accent);
}

#shareModal #carousel-next:hover,
#shareModal #carousel-prev:hover {
    background-color: var(--ca-violet-strong);
}

#shareModal .btn-check:checked + label {
    background-color: var(--ca-violet);
    border-color: var(--ca-violet);
    color: var(--ca-on-accent);
}

#shareModal .btn-copy-link {
    color: var(--ca-violet-strong) !important;
    font-weight: 600;
}

#shareModal .fa-cloud-download,
#shareModal .fa-images {
    color: var(--ca-violet);
}

/* ─────────────────────────────────────────────────────────
   BARRA AZIONI MOBILE
   ───────────────────────────────────────────────────────── */
.ca-mobile-actions {
    display: none;
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE — breakpoint Bootstrap 5.1.3
   ───────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ca-shell {
        gap: 1.35rem;
        grid-template-areas: none;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        padding: 1.5rem 1rem 2.5rem;
    }

    /* L'attestato non è più una colonna a sé: si scioglie nella griglia della
       pagina, così l'intestazione (nome del badge e dintorni) può salire subito
       sotto l'immagine e le altre schede scendono dopo, nell'ordine originale.
       Se display: contents non è supportato si torna alla pila di prima. */
    .ca-art {
        display: contents;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        position: static;
        top: auto;
    }

    .ca-art > *,
    .ca-head,
    .ca-main {
        grid-area: auto;
        order: 3;
    }

    .ca-frame {
        order: 1;
    }

    .ca-frame,
    .ca-art .ca-actions,
    .ca-art .ca-card,
    .ca-art .ca-side-section {
        margin-inline: auto;
        max-width: 420px;
        width: 100%;
    }

    .ca-head {
        order: 2;
        text-align: center;
    }

    .ca-owner {
        justify-content: center;
    }

    .ca-issuer-line,
    .ca-endorsers {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767.98px) {
    .ca-title {
        font-size: 1.45rem;
    }

    .ca-frame {
        padding: .7rem;
    }

    .ca-frame-mat {
        padding: .8rem;
    }

    .ca-hide-mobile {
        display: none !important;
    }

    /* Condividi e Scarica sono già nella barra fissa in fondo */
    .ca-art .ca-actions {
        display: none;
    }

    .ca-mobile-actions {
        backdrop-filter: blur(8px);
        background: rgba(255, 255, 255, .92);
        border-top: 1px solid var(--ca-border);
        bottom: 0;
        display: flex;
        gap: .5rem;
        padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
        position: sticky;
        z-index: 20;
    }

    .ca-mobile-actions .ca-btn {
        flex: 1 1 0;
        justify-content: center;
        min-height: 2.75rem;
    }

    .ca-issuer {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-accordion-chevron,
    .ca-btn,
    .ca-tile {
        transition: none;
    }

    .ca-btn:hover,
    .ca-tile:hover {
        transform: none;
    }

    .ca-spin {
        animation: none;
        opacity: .5;
    }
}