/* ==========================================================================
   Akra Bike — Design system (claude/DESIGN.md)
   CSS puro: token, override Bootstrap 5, componenti comuni, layout pubblico e
   backoffice, stampa. Gli stili specifici di un'area vanno in styles/area/*.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --clr-blu: #123A5A;
    --clr-blu-profondo: #0C2A42;
    --clr-ocra: #D89A3F;
    --clr-ocra-scuro: #B67C2A;
    --clr-ocra-testo: #8A5C15;

    /* Superfici */
    --clr-bg: #FAF8F4;
    --clr-surface: #FFFFFF;
    --clr-surface-alt: #F2EDE4;
    --clr-surface-dark: #0C2A42;

    /* Testo */
    --clr-text: #1B1F24;
    --clr-text-muted: #5B6169;
    --clr-text-disabled: #98A0A8;
    --clr-text-on-dark: #FFFFFF;

    /* Bordi */
    --clr-border: #D8D0C1;
    --clr-border-strong: #B9AF9C;
    --clr-divider: #E4DDD0;
    --clr-border-accent: rgba(216, 154, 63, 0.45);

    /* Stati semantici */
    --clr-success: #2F7D52;
    --clr-success-bg: #E5F2EA;
    --clr-warning: #B5761F;
    --clr-warning-bg: #FBF0DC;
    --clr-danger: #B03A2E;
    --clr-danger-bg: #F8E3E0;
    --clr-info: #2C6E9B;
    --clr-info-bg: #E4EFF7;

    /* Podio */
    --clr-oro: #B08A32;
    --clr-argento: #8A8F96;
    --clr-bronzo: #9A6A45;

    /* Ombre */
    --shadow-hover: 0 2px 6px rgba(27, 31, 36, 0.07), 0 8px 20px rgba(27, 31, 36, 0.05);
    --shadow-elevato: 0 8px 24px rgba(27, 31, 36, 0.14);
    --focus-ring: 0 0 0 0.2rem rgba(216, 154, 63, 0.35);

    /* Tipografia */
    --font-titoli: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-testo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Layout */
    --header-h: 72px;
    --admin-header-h: 56px;
    --sidebar-w: 236px;
    --contenuto-max: 1200px;
    --admin-max: 1280px;

    /* Area (default = associazione) */
    --clr-area: #123A5A;
    --clr-area-surface: #E6EDF3;
    --clr-area-border: #C3D3E0;

    /* Override Bootstrap */
    --bs-primary: #123A5A;
    --bs-primary-rgb: 18, 58, 90;
    --bs-secondary: #5B6169;
    --bs-secondary-rgb: 91, 97, 105;
    --bs-success: #2F7D52;
    --bs-success-rgb: 47, 125, 82;
    --bs-warning: #B5761F;
    --bs-warning-rgb: 181, 118, 31;
    --bs-danger: #B03A2E;
    --bs-danger-rgb: 176, 58, 46;
    --bs-info: #2C6E9B;
    --bs-info-rgb: 44, 110, 155;
    --bs-body-bg: #FAF8F4;
    --bs-body-bg-rgb: 250, 248, 244;
    --bs-body-color: #1B1F24;
    --bs-body-color-rgb: 27, 31, 36;
    --bs-body-font-family: var(--font-testo);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-secondary-color: #5B6169;
    --bs-tertiary-bg: #F2EDE4;
    --bs-secondary-bg: #F2EDE4;
    --bs-emphasis-color: #1B1F24;
    --bs-heading-color: #123A5A;
    --bs-border-color: #D8D0C1;
    --bs-border-color-translucent: rgba(27, 31, 36, 0.12);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-link-color: #123A5A;
    --bs-link-color-rgb: 18, 58, 90;
    --bs-link-hover-color: #0C2A42;
    --bs-link-hover-color-rgb: 12, 42, 66;
    --bs-focus-ring-color: rgba(216, 154, 63, 0.35);
    --bs-highlight-bg: #FBF0DC;
    --bs-code-color: #8E5572;
}

[data-area="associazione"] {
    --clr-area: #123A5A;
    --clr-area-surface: #E6EDF3;
    --clr-area-border: #C3D3E0;
}

[data-area="eventi"] {
    --clr-area: #B15A2B;
    --clr-area-surface: #F8EADF;
    --clr-area-border: #EBD0B8;
}

[data-area="squadra"] {
    --clr-area: #2F6D4F;
    --clr-area-surface: #E5F1EA;
    --clr-area-border: #C5DFD1;
}

[data-area="territorio"] {
    --clr-area: #8E5572;
    --clr-area-surface: #F4E7EE;
    --clr-area-border: #E3CBD8;
}

[data-area="backoffice"] {
    --clr-area: #5B6169;
    --clr-area-surface: #EFEDE9;
    --clr-area-border: #DAD5CC;
}

/* --------------------------------------------------------------------------
   2. Base e tipografia
   -------------------------------------------------------------------------- */
html {
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: var(--font-testo);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, .h1, .h2 {
    font-family: var(--font-titoli);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--clr-blu);
    line-height: 1.1;
}

h1, .h1 { font-size: 2.5rem; font-weight: 700; }
h2, .h2 { font-size: 1.75rem; font-weight: 600; }

h3, .h3 {
    font-family: var(--font-titoli);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--clr-text);
    line-height: 1.2;
}

h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-testo);
    font-weight: 600;
    color: var(--clr-text);
}

h4, .h4 { font-size: 1.05rem; }
h5, .h5 { font-size: 0.95rem; }

a {
    color: var(--clr-blu);
    transition: color 0.1s ease;
}

a:hover { color: var(--clr-blu-profondo); }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 0.25rem;
}

::selection { background: rgba(216, 154, 63, 0.3); }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.1em;
    vertical-align: middle;
    line-height: 1;
    color: inherit;
    user-select: none;
}

.occhiello, .eyebrow {
    font-family: var(--font-testo);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-area);
    margin: 0 0 0.35rem;
    display: block;
}

.occhiello .material-symbols-outlined { font-size: 1.2em; vertical-align: -0.25em; }

.sommario, .lead {
    font-size: 1.0625rem;
    color: var(--clr-text-muted);
    line-height: 1.6;
    font-weight: 400;
}

.testo-lungo { line-height: 1.65; max-width: 68ch; }
.testo-lungo p { margin-bottom: 1.1rem; }
.testo-lungo h2 { margin-top: 2.25rem; }
.testo-lungo h3 { margin-top: 1.75rem; }

.text-muted, .testo-secondario { color: var(--clr-text-muted) !important; }
.text-area { color: var(--clr-area) !important; }
.text-blu { color: var(--clr-blu) !important; }

/* Numeri e dati di gara */
.mono, .numeric, .distanza, .dislivello, .tempo, .posizione, .dato-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.distanza, .dislivello, .tempo, .posizione { font-weight: 500; font-size: 0.9rem; }

.unita {
    font-family: var(--font-testo);
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    font-weight: 400;
}

.tabular { font-variant-numeric: tabular-nums; }

.contenitore, .container-akra {
    width: 100%;
    max-width: calc(var(--contenuto-max) + 2rem);
    margin: 0 auto;
    padding: 0 1rem;
}

.visually-hidden-focusable:focus {
    position: fixed !important;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    background: var(--clr-ocra);
    color: var(--clr-text);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

/* --------------------------------------------------------------------------
   3. Pulsanti
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-family: var(--font-testo);
    --bs-btn-font-size: 0.9rem;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-border-radius: 0.375rem;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: var(--focus-ring);
    text-transform: none;
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn .material-symbols-outlined { font-size: 1.2em; }

.btn-sm {
    --bs-btn-padding-x: 0.85rem;
    --bs-btn-padding-y: 0.4rem;
    --bs-btn-font-size: 0.8rem;
}

.btn-lg {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: 0.85rem;
    --bs-btn-font-size: 1rem;
}

.btn-primary {
    --bs-btn-color: #1B1F24;
    --bs-btn-bg: #D89A3F;
    --bs-btn-border-color: #D89A3F;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #B67C2A;
    --bs-btn-hover-border-color: #B67C2A;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #B67C2A;
    --bs-btn-active-border-color: #B67C2A;
    --bs-btn-disabled-color: #1B1F24;
    --bs-btn-disabled-bg: #E8C796;
    --bs-btn-disabled-border-color: #E8C796;
    --bs-btn-focus-shadow-rgb: 216, 154, 63;
}

.btn-secondary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #123A5A;
    --bs-btn-border-color: #123A5A;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #0C2A42;
    --bs-btn-hover-border-color: #0C2A42;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #0C2A42;
    --bs-btn-active-border-color: #0C2A42;
    --bs-btn-disabled-bg: #5B7C97;
    --bs-btn-disabled-border-color: #5B7C97;
    --bs-btn-focus-shadow-rgb: 216, 154, 63;
}

.btn-outline, .btn-outline-secondary, .btn-outline-primary, .btn-light {
    --bs-btn-color: #1B1F24;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #B9AF9C;
    --bs-btn-hover-color: #1B1F24;
    --bs-btn-hover-bg: #F2EDE4;
    --bs-btn-hover-border-color: #B9AF9C;
    --bs-btn-active-color: #1B1F24;
    --bs-btn-active-bg: #E4DDD0;
    --bs-btn-active-border-color: #B9AF9C;
    --bs-btn-disabled-color: #98A0A8;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #D8D0C1;
    --bs-btn-focus-shadow-rgb: 216, 154, 63;
}

.btn-check:checked + .btn-outline,
.btn-check:checked + .btn-outline-secondary {
    background: #FFFFFF;
    border-color: var(--clr-ocra);
    box-shadow: inset 0 0 0 1px var(--clr-ocra);
    color: var(--clr-text);
}

.btn-outline-danger {
    --bs-btn-color: #B03A2E;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #B03A2E;
    --bs-btn-hover-color: #B03A2E;
    --bs-btn-hover-bg: #F8E3E0;
    --bs-btn-hover-border-color: #B03A2E;
    --bs-btn-active-color: #B03A2E;
    --bs-btn-active-bg: #F1CFCA;
    --bs-btn-active-border-color: #B03A2E;
    --bs-btn-focus-shadow-rgb: 176, 58, 46;
}

.btn-danger {
    --bs-btn-bg: #B03A2E;
    --bs-btn-border-color: #B03A2E;
    --bs-btn-hover-bg: #8F2E24;
    --bs-btn-hover-border-color: #8F2E24;
    --bs-btn-active-bg: #8F2E24;
}

.btn-ghost, .btn-link {
    --bs-btn-color: #123A5A;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #0C2A42;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #0C2A42;
    --bs-btn-active-border-color: transparent;
    --bs-btn-padding-x: 0.25rem;
    text-decoration: none;
}

.btn-ghost:hover, .btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Su fondo scuro: il secondario diventa outline bianco */
.su-scuro .btn-secondary, .btn-su-scuro, .btn-outline-light {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 255, 255, 0.6);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.18);
    --bs-btn-active-border-color: #FFFFFF;
}

.su-scuro .btn-ghost { --bs-btn-color: #FFFFFF; --bs-btn-hover-color: #FFFFFF; }

.btn-icona {
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.4rem;
    min-width: 2.25rem;
}

/* --------------------------------------------------------------------------
   4. Form
   -------------------------------------------------------------------------- */
.form-label, .col-form-label {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--clr-text);
    margin-bottom: 0.35rem;
}

.form-label.required::after, .obbligatorio::after {
    content: ' *';
    color: var(--clr-danger);
}

.form-control, .form-select {
    background-color: #FFFFFF;
    border: 1px solid var(--clr-border);
    border-radius: 0.375rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    color: var(--clr-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-select { padding-right: 2.25rem; }

.form-control-sm, .form-select-sm { padding: 0.35rem 0.6rem; font-size: 0.85rem; }

.form-control::placeholder { color: var(--clr-text-disabled); opacity: 1; }

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--clr-ocra);
    box-shadow: var(--focus-ring);
    outline: 0;
}

.form-control:disabled, .form-select:disabled, .form-control[readonly].is-disabled {
    background-color: var(--clr-surface-alt);
    color: var(--clr-text-disabled);
}

.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--clr-danger);
    background-image: none;
    padding-right: 0.85rem;
}

.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    border-color: var(--clr-danger);
    box-shadow: 0 0 0 0.2rem rgba(176, 58, 46, 0.25);
}

.invalid-feedback { color: var(--clr-danger); font-size: 0.78rem; }

.form-text { font-size: 0.78rem; color: var(--clr-text-muted); }

.form-control.numeric, .form-control[data-numerico], input[type="number"].form-control, .form-control[data-valuta] {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    text-align: right;
}

.input-group-text {
    background: var(--clr-surface-alt);
    color: var(--clr-text-muted);
    font-size: 0.8rem;
    border-color: var(--clr-border);
}

.form-check-input {
    border-color: var(--clr-border-strong);
}

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

.form-check-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231B1F24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.consenso, .consenso .form-check-label {
    font-size: 0.85rem;
    line-height: 1.5;
}

.consenso a { text-decoration: underline; }

/* Campi affiancati in griglia: spazio errori riservato */
.akra-campo { display: flex; flex-direction: column; }
.akra-campo .form-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akra-campo__errori {
    min-height: 2rem;
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--clr-danger);
    padding-top: 0.25rem;
}
.akra-campo__errori .invalid-feedback { display: block; margin: 0; }

/* --------------------------------------------------------------------------
   5. Card
   -------------------------------------------------------------------------- */
.card {
    --bs-card-bg: #FFFFFF;
    --bs-card-border-color: var(--clr-border);
    --bs-card-border-radius: 0.5rem;
    --bs-card-inner-border-radius: calc(0.5rem - 1px);
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-cap-padding-y: 0.85rem;
    --bs-card-cap-bg: #F2EDE4;
    box-shadow: none;
}

.card-header {
    border-bottom: 1px solid var(--clr-divider);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-header .card-header__titolo { margin: 0; font: inherit; color: inherit; }

.card-footer {
    background: #FFFFFF;
    border-top: 1px solid var(--clr-divider);
}

.card-evidenza, .card-in-evidenza { border-top: 3px solid var(--clr-area); }

/* Card cliccabili: contenuto, evento, itinerario */
.card-contenuto, .card-evento, .card-cliccabile {
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-contenuto:hover, .card-evento:hover, .card-cliccabile:hover,
.card-contenuto:focus-within, .card-evento:focus-within, .card-cliccabile:focus-within {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.card-contenuto:focus-within, .card-evento:focus-within, .card-cliccabile:focus-within {
    box-shadow: var(--shadow-hover), var(--focus-ring);
}

.card-contenuto .stretched-link:focus-visible,
.card-evento .stretched-link:focus-visible,
.card-cliccabile .stretched-link:focus-visible { box-shadow: none; }

.card-contenuto:hover .card-title, .card-evento:hover .card-title, .card-cliccabile:hover .card-title {
    color: var(--clr-blu);
}

.card-copertina {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
    background: var(--clr-surface-alt);
}

.card-copertina--segnaposto {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.35rem;
    background:
        radial-gradient(circle at 80% 20%, rgba(216, 154, 63, 0.35), transparent 45%),
        linear-gradient(135deg, #123A5A, #0C2A42);
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    padding: 1rem;
}

.card-copertina--segnaposto .material-symbols-outlined { font-size: 2.75rem; color: var(--clr-ocra); }
.card-copertina--segnaposto span:not(.material-symbols-outlined) {
    font-family: var(--font-titoli);
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-contenuto .card-body, .card-evento .card-body { display: flex; flex-direction: column; }

.card-contenuto .card-title, .card-evento .card-title {
    font-family: var(--font-titoli);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--clr-text);
    text-transform: none;
    margin-bottom: 0.4rem;
    transition: color 0.1s ease;
}

.card-sommario {
    color: var(--clr-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.card-meta {
    margin-top: auto;
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.card-evento__fascia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.6rem 1.25rem;
    background: var(--clr-surface-alt);
    border-bottom: 1px solid var(--clr-divider);
}

.card-evento__dati {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    white-space: nowrap;
}

.card-evento__cta { position: relative; z-index: 2; margin-top: 0.75rem; align-self: flex-start; }

/* KPI tile (backoffice) */
.kpi {
    background: #FFFFFF;
    border: 1px solid var(--clr-border);
    border-radius: 0.5rem;
    padding: 1rem 1.15rem;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    height: 100%;
}

.kpi__icona {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--clr-area-surface);
    color: var(--clr-area);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi__icona .material-symbols-outlined { font-size: 1.35rem; }

.kpi__valore {
    font-family: var(--font-titoli);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--clr-blu);
    font-variant-numeric: tabular-nums;
}

.kpi__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
    margin-top: 0.35rem;
}

.kpi__delta { font-size: 0.78rem; margin-top: 0.25rem; font-family: var(--font-mono); }
.kpi__delta--su { color: var(--clr-success); }
.kpi__delta--giu { color: var(--clr-danger); }
.kpi__delta--neutro { color: var(--clr-text-muted); }

/* --------------------------------------------------------------------------
   6. Tabelle
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: #FFFFFF;
    --bs-table-color: var(--clr-text);
    --bs-table-border-color: var(--clr-divider);
    --bs-table-hover-bg: #FAF8F4;
    --bs-table-hover-color: var(--clr-text);
    --bs-table-striped-bg: #FCFBF8;
    --bs-table-active-bg: #F2EDE4;
    font-size: 0.875rem;
    margin-bottom: 0;
    border-color: var(--clr-divider);
}

.table > :not(caption) > * > * {
    padding: 0.55rem 0.75rem;
    border-bottom-width: 1px;
    vertical-align: middle;
}

.table > thead > tr > th, .table > thead > tr > td {
    background: var(--clr-surface-alt);
    border-bottom: 2px solid var(--clr-border-strong);
    padding: 0.6rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
    white-space: nowrap;
}

.table > :not(caption) > * > .numeric, .table th.numeric {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.table > tbody > tr > td.numeric { font-size: 0.85rem; font-weight: 500; }

.table-sticky thead th { position: sticky; top: 0; z-index: 2; }

.table-compact > :not(caption) > * > *,
.table-compact > thead > tr > th { padding: 0.35rem 0.5rem; }
.table-compact { font-size: 0.825rem; }

.tabella-contenitore, .table-wrap {
    background: #FFFFFF;
    border: 1px solid var(--clr-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.tabella-contenitore .table-responsive { margin: 0; }
.tabella-contenitore .table > tbody > tr:last-child > * { border-bottom: 0; }

/* Classifica */
.classifica .posizione { width: 4.5rem; }
.classifica .riga-squadra > * { background-color: rgba(47, 109, 79, 0.07) !important; }
.classifica .riga-squadra .atleta, .classifica .riga-squadra .nome { font-weight: 600; }

.marca-squadra {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2F6D4F;
    margin-left: 0.35rem;
}

.podio { display: inline-flex; align-items: center; gap: 0.2rem; }
.podio .material-symbols-outlined { font-size: 1.25rem; }
.podio--1 .material-symbols-outlined { color: var(--clr-oro); }
.podio--2 .material-symbols-outlined { color: var(--clr-argento); }
.podio--3 .material-symbols-outlined { color: var(--clr-bronzo); }

.table .azioni { white-space: nowrap; text-align: right; }
.table .azioni .btn { --bs-btn-padding-x: 0.45rem; --bs-btn-padding-y: 0.25rem; }

/* --------------------------------------------------------------------------
   7. Badge
   -------------------------------------------------------------------------- */
.badge {
    --bs-badge-padding-x: 0.55rem;
    --bs-badge-padding-y: 0.22rem;
    --bs-badge-font-size: 0.72rem;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 0.25rem;
    --bs-badge-color: #5B6169;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-testo);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--clr-surface-alt);
    line-height: 1.3;
}

.badge .material-symbols-outlined { font-size: 1.05em; }

.badge-stato--aperte, .badge-stato--pubblicato, .badge-stato--successo { background: var(--clr-success-bg); color: var(--clr-success); }
.badge-stato--arrivo, .badge-stato--bozza, .badge-stato--attesa { background: var(--clr-warning-bg); color: var(--clr-warning); }
.badge-stato--chiusa, .badge-stato--annullata, .badge-stato--pericolo { background: var(--clr-danger-bg); color: var(--clr-danger); }
.badge-stato--passata, .badge-stato--archiviato, .badge-stato--info { background: var(--clr-info-bg); color: var(--clr-info); }
.badge-stato--neutro { background: var(--clr-surface-alt); color: var(--clr-text-muted); }

.badge-area {
    background: var(--clr-area-surface);
    border: 1px solid var(--clr-area-border);
    color: var(--clr-area);
}

.badge-patrocinio {
    background: rgba(216, 154, 63, 0.16);
    color: var(--clr-ocra-testo);
}

.badge-squadra { background: #E5F1EA; color: #2F6D4F; }

.badge-contatore {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--clr-ocra);
    color: var(--clr-text);
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. Alert
   -------------------------------------------------------------------------- */
.alert {
    --bs-alert-padding-x: 1.15rem;
    --bs-alert-padding-y: 0.85rem;
    --bs-alert-border-radius: 0.375rem;
    border: 0;
    border-left: 4px solid var(--bs-alert-color);
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-size: 0.9rem;
}

.alert > .material-symbols-outlined { font-size: 1.3rem; margin-top: 0.05rem; flex-shrink: 0; }
.alert .alert-corpo { flex: 1; }
.alert .btn-close { margin-left: auto; padding: 0.35rem; }
.alert-dismissible { padding-right: 1.15rem; }
.alert-dismissible .btn-close { position: static; }

.alert-success { --bs-alert-bg: #E5F2EA; --bs-alert-color: #2F7D52; --bs-alert-link-color: #24603F; }
.alert-warning { --bs-alert-bg: #FBF0DC; --bs-alert-color: #8E5C17; --bs-alert-link-color: #8E5C17; border-left-color: #B5761F; }
.alert-danger { --bs-alert-bg: #F8E3E0; --bs-alert-color: #B03A2E; --bs-alert-link-color: #8F2E24; }
.alert-info { --bs-alert-bg: #E4EFF7; --bs-alert-color: #2C6E9B; --bs-alert-link-color: #22587D; }
.alert-mockup { --bs-alert-bg: rgba(216, 154, 63, 0.12); --bs-alert-color: #6F4A10; border-left-color: #D89A3F; }

/* --------------------------------------------------------------------------
   9. Modal, dropdown, accordion, nav, paginazione, breadcrumb
   -------------------------------------------------------------------------- */
.modal-content {
    background: #FFFFFF;
    border: 1px solid var(--clr-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-elevato);
}

.modal-header {
    background: var(--clr-surface-alt);
    border-bottom: 1px solid var(--clr-divider);
    padding: 0.85rem 1.15rem;
    border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}

.modal-title {
    font-family: var(--font-titoli);
    font-size: 1.375rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--clr-blu);
}

.modal-footer { border-top: 1px solid var(--clr-divider); }
.modal-backdrop { --bs-backdrop-bg: #0C2A42; --bs-backdrop-opacity: 0.55; }
.modal.fade .modal-dialog { transition: transform 0.25s ease-out; }

.dropdown-menu {
    --bs-dropdown-border-color: var(--clr-border);
    --bs-dropdown-border-radius: 0.5rem;
    --bs-dropdown-link-color: var(--clr-text);
    --bs-dropdown-link-hover-bg: var(--clr-surface-alt);
    --bs-dropdown-link-hover-color: var(--clr-text);
    --bs-dropdown-link-active-bg: var(--clr-area-surface);
    --bs-dropdown-link-active-color: var(--clr-blu);
    --bs-dropdown-font-size: 0.9rem;
    --bs-dropdown-item-padding-y: 0.45rem;
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-header-color: var(--clr-text-muted);
    box-shadow: var(--shadow-elevato);
    padding: 0.4rem 0;
}

.dropdown-item { display: flex; align-items: center; gap: 0.5rem; }
.dropdown-item .material-symbols-outlined { color: var(--clr-text-muted); }
.dropdown-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.accordion {
    --bs-accordion-bg: #FFFFFF;
    --bs-accordion-border-color: var(--clr-divider);
    --bs-accordion-border-radius: 0.5rem;
    --bs-accordion-inner-border-radius: calc(0.5rem - 1px);
    --bs-accordion-btn-bg: var(--clr-surface-alt);
    --bs-accordion-active-bg: var(--clr-surface-alt);
    --bs-accordion-active-color: var(--clr-blu);
    --bs-accordion-btn-color: var(--clr-text);
    --bs-accordion-btn-focus-box-shadow: var(--focus-ring);
    --bs-accordion-btn-padding-y: 0.85rem;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B6169' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B6169' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.accordion-button { font-weight: 600; font-size: 0.95rem; gap: 0.5rem; }
.accordion-button:not(.collapsed) { box-shadow: inset 0 -1px 0 var(--clr-divider); }
.accordion-body { line-height: 1.65; }

.nav-tabs {
    --bs-nav-tabs-border-color: var(--clr-divider);
    --bs-nav-tabs-link-active-bg: #FFFFFF;
    --bs-nav-tabs-link-active-color: var(--clr-blu);
    --bs-nav-tabs-link-active-border-color: var(--clr-divider) var(--clr-divider) #FFFFFF;
    --bs-nav-link-color: var(--clr-text-muted);
    --bs-nav-link-hover-color: var(--clr-blu);
    --bs-nav-link-font-size: 0.9rem;
    --bs-nav-link-font-weight: 500;
}

.nav-tabs .nav-link.active { font-weight: 600; box-shadow: inset 0 3px 0 var(--clr-area); }

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--clr-blu);
    --bs-nav-pills-link-active-color: #FFFFFF;
    --bs-nav-link-color: var(--clr-text);
    --bs-nav-link-hover-color: var(--clr-blu);
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-font-weight: 500;
    gap: 0.35rem;
}

.nav-pills .nav-link { border: 1px solid var(--clr-border); background: #FFFFFF; }
.nav-pills .nav-link.active { border-color: var(--clr-blu); }

.nav-sezioni {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--clr-divider);
    scrollbar-width: thin;
}

.nav-sezioni a {
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.nav-sezioni a:hover { color: var(--clr-blu); }
.nav-sezioni a.active, .nav-sezioni a[aria-current="true"] {
    color: var(--clr-blu);
    font-weight: 600;
    border-bottom-color: var(--clr-area);
}

.pagination {
    --bs-pagination-color: var(--clr-blu);
    --bs-pagination-border-color: var(--clr-border);
    --bs-pagination-hover-bg: var(--clr-surface-alt);
    --bs-pagination-hover-color: var(--clr-blu-profondo);
    --bs-pagination-hover-border-color: var(--clr-border);
    --bs-pagination-active-bg: var(--clr-blu);
    --bs-pagination-active-border-color: var(--clr-blu);
    --bs-pagination-focus-box-shadow: var(--focus-ring);
    --bs-pagination-font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.breadcrumb {
    --bs-breadcrumb-divider: '›';
    --bs-breadcrumb-font-size: 0.8rem;
    --bs-breadcrumb-item-active-color: var(--clr-text);
    --bs-breadcrumb-divider-color: var(--clr-text-muted);
    --bs-breadcrumb-margin-bottom: 0.75rem;
    color: var(--clr-text-muted);
}

.breadcrumb a { color: var(--clr-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--clr-blu); text-decoration: underline; }

.progress {
    --bs-progress-bg: var(--clr-surface-alt);
    --bs-progress-bar-bg: var(--clr-ocra);
    --bs-progress-border-radius: 999px;
    --bs-progress-height: 0.6rem;
}

.list-group {
    --bs-list-group-border-color: var(--clr-divider);
    --bs-list-group-action-hover-bg: var(--clr-bg);
    --bs-list-group-active-bg: var(--clr-area-surface);
    --bs-list-group-active-color: var(--clr-blu);
    --bs-list-group-active-border-color: var(--clr-area-border);
}

.toast {
    --bs-toast-border-color: var(--clr-border);
    --bs-toast-header-bg: var(--clr-surface-alt);
    box-shadow: var(--shadow-elevato);
}

.tooltip { --bs-tooltip-bg: #0C2A42; --bs-tooltip-font-size: 0.78rem; }

.offcanvas { --bs-offcanvas-transition: transform 0.3s ease-out; }

hr { border-color: var(--clr-divider); opacity: 1; }

/* --------------------------------------------------------------------------
   10. Header di pagina, sezioni, fasce, hero
   -------------------------------------------------------------------------- */
.page-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--clr-divider);
    margin-bottom: 2rem;
}

.page-header__icon {
    font-size: 2rem;
    color: var(--clr-area);
    line-height: 1;
    margin-top: 1.1rem;
}

.page-header__corpo { flex: 1; min-width: 0; }

.page-header__crumb {
    font-family: var(--font-testo);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-area);
    margin: 0 0 0.25rem;
}

.page-header__title {
    font-family: var(--font-titoli);
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--clr-blu);
    margin: 0;
    line-height: 1.05;
}

.page-header__title::after {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 0.5rem;
    background: var(--clr-ocra);
}

.page-header__sottotitolo {
    margin: 0.75rem 0 0;
    font-size: 1.0625rem;
    color: var(--clr-text-muted);
    line-height: 1.6;
    max-width: 68ch;
}

.page-header__azioni { display: flex; gap: 0.5rem; flex-wrap: wrap; align-self: flex-end; }

.titolo-sezione {
    font-family: var(--font-titoli);
    font-size: 1.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--clr-blu);
    margin: 0 0 1.25rem;
}

.titolo-sezione--sottolineato::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 0.4rem;
    background: var(--clr-ocra);
}

.intestazione-sezione {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.intestazione-sezione .titolo-sezione { margin: 0; }

.sezione { padding-block: 4rem; }
.sezione--stretta { padding-block: 2.5rem; }

#akra-main-pubblico { flex: 1 0 auto; }

.contenuto-pagina { padding-block: 2.5rem 4rem; }

/* Fasce full-bleed: usabili anche dentro .container */
.fascia {
    position: relative;
    padding: 4rem 0;
}

.fascia--sabbia { background: var(--clr-surface-alt); }

.fascia--scura {
    background: var(--clr-surface-dark);
    color: rgba(255, 255, 255, 0.85);
}

.fascia--scura h2, .fascia--scura h3, .fascia--scura .titolo-sezione { color: #FFFFFF; }
.fascia--scura a:not(.btn) { color: #FFFFFF; }
.fascia--scura .occhiello { color: var(--clr-ocra); }

.fascia--area { background: var(--clr-area-surface); }

.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Hero */
.hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    color: #FFFFFF;
    background-color: var(--clr-blu-profondo);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 42, 66, 0.25), rgba(12, 42, 66, 0.75));
    pointer-events: none;
}

.hero__contenuto {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 3.5rem;
    padding-bottom: 3rem;
}

.hero__occhiello {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.hero__occhiello::before {
    content: '';
    width: 28px;
    height: 3px;
    background: var(--clr-ocra);
}

.hero__titolo {
    font-family: var(--font-titoli);
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #FFFFFF;
    margin: 0 0 0.75rem;
    max-width: 18ch;
}

.hero__sommario {
    font-size: 1.125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    max-width: 56ch;
    margin-bottom: 1.5rem;
}

.hero__azioni { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

.hero__credito {
    position: absolute;
    right: 1rem;
    bottom: 0.6rem;
    z-index: 1;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

.hero--compatto { min-height: 40vh; }

.hero-scheda {
    background: rgba(12, 42, 66, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-top: 3px solid var(--clr-ocra);
    border-radius: 0.5rem;
    padding: 1rem 1.15rem;
    color: rgba(255, 255, 255, 0.9);
}

.hero-scheda .badge-stato--arrivo { background: var(--clr-warning-bg); }

.hero-scheda__dati {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.hero-scheda__dati li { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.hero-scheda__dati .material-symbols-outlined { color: var(--clr-ocra); align-self: center; }
.hero-scheda__dati .dati-gara { color: #FFFFFF; font-size: 1rem; }
.hero-scheda__dati .unita { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; }

.hero--home { min-height: 62vh; }

/* Countdown */
.countdown {
    display: inline-flex;
    gap: 0.5rem;
    align-items: stretch;
}

.countdown__cella {
    min-width: 4.25rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-align: center;
}

.countdown__valore {
    display: block;
    font-family: var(--font-titoli);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown__unita {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
    margin-top: 0.25rem;
}

.countdown--chiaro .countdown__cella { background: #FFFFFF; border-color: var(--clr-border); color: var(--clr-blu); }
.countdown--chiaro .countdown__unita { color: var(--clr-text-muted); opacity: 1; }

/* --------------------------------------------------------------------------
   11. Numeri-manifesto e scheda percorso, dati gara
   -------------------------------------------------------------------------- */
.numero-manifesto { text-align: center; }

.numero-manifesto__valore {
    font-family: var(--font-titoli);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--clr-blu);
    font-variant-numeric: tabular-nums;
}

.numero-manifesto__unita {
    font-family: var(--font-testo);
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    margin-left: 0.2rem;
}

.numero-manifesto__label {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
}

.fascia--scura .numero-manifesto__valore { color: #FFFFFF; }
.fascia--scura .numero-manifesto__unita,
.fascia--scura .numero-manifesto__label { color: rgba(255, 255, 255, 0.75); }

.scheda-percorso {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.scheda-percorso--3 { grid-template-columns: repeat(3, 1fr); }

.scheda-percorso__riquadro, .scheda-percorso > .numero-manifesto {
    background: var(--clr-surface-alt);
    border: 1px solid var(--clr-divider);
    border-radius: 0.5rem;
    padding: 1.15rem 0.75rem;
    text-align: center;
}

.dati-gara {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--clr-text);
}

.dati-gara .unita { font-size: 0.8rem; }

.riquadro-dati {
    background: var(--clr-surface-alt);
    border: 1px solid var(--clr-divider);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.riquadro-dati__titolo {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
    margin-bottom: 0.5rem;
}

.riquadro-dati dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; }
.riquadro-dati dt { font-weight: 500; font-size: 0.875rem; color: var(--clr-text-muted); }
.riquadro-dati dd {
    margin: 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    font-weight: 500;
}

.lista-dati {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-dati li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--clr-divider);
    font-size: 0.9rem;
}

.lista-dati li:last-child { border-bottom: 0; }
.lista-dati .valore { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }

/* --------------------------------------------------------------------------
   12. Blocchi editoriali
   -------------------------------------------------------------------------- */
.citazione {
    border-left: 4px solid var(--clr-ocra);
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 1.75rem 0;
    font-size: 1.0625rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--clr-text);
}

.citazione p:last-of-type { margin-bottom: 0.5rem; }

.citazione__autore, .citazione footer {
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--clr-text-muted);
}

.figura { margin: 1.75rem 0; }
.figura img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    display: block;
    background: var(--clr-surface-alt);
}

.figura figcaption, .didascalia {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    line-height: 1.45;
}

.credito { font-size: 0.75rem; color: var(--clr-text-muted); font-style: italic; }

.galleria-griglia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.galleria-griglia a, .galleria-griglia figure { display: block; margin: 0; position: relative; }

.galleria-griglia img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.375rem;
    display: block;
    background: var(--clr-surface-alt);
    transition: opacity 0.2s ease;
}

.galleria-griglia a:hover img { opacity: 0.88; }

.avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--clr-area-surface);
    color: var(--clr-area);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.avatar--lg { width: 6rem; height: 6rem; font-size: 2rem; }
.avatar--sm { width: 2rem; height: 2rem; font-size: 0.8rem; }

/* Banner sponsor */
.slot-banner {
    background: #FFFFFF;
    border: 1px solid var(--clr-divider);
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin: 0 auto;
    width: 100%;
}

.slot-banner__etichetta {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-disabled);
    margin-bottom: 0.35rem;
    line-height: 1;
}

.slot-banner__creativo {
    display: block;
    width: 100%;
    border-radius: 0.25rem;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.slot-banner__creativo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slot-banner--leaderboard { max-width: calc(970px + 1rem + 2px); }
.slot-banner--leaderboard .slot-banner__creativo { aspect-ratio: 970 / 250; }
.slot-banner--banner { max-width: calc(728px + 1rem + 2px); }
.slot-banner--banner .slot-banner__creativo { aspect-ratio: 728 / 90; }
.slot-banner--rettangolo { max-width: calc(300px + 1rem + 2px); }
.slot-banner--rettangolo .slot-banner__creativo { aspect-ratio: 300 / 250; }
.slot-banner--mezza-pagina { max-width: calc(300px + 1rem + 2px); }
.slot-banner--mezza-pagina .slot-banner__creativo { aspect-ratio: 300 / 600; }
.slot-banner--mobile { max-width: calc(320px + 1rem + 2px); }
.slot-banner--mobile .slot-banner__creativo { aspect-ratio: 320 / 100; }

.creativo-segnaposto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    padding: 0.5rem 1rem;
    background:
        linear-gradient(115deg, transparent 0 62%, rgba(216, 154, 63, 0.22) 62% 64%, transparent 64%),
        linear-gradient(135deg, #123A5A 0%, #0C2A42 100%);
    color: #FFFFFF;
    text-align: center;
}

.creativo-segnaposto__nome {
    font-family: var(--font-titoli);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(1rem, 2.6vw, 2rem);
    line-height: 1;
}

.creativo-segnaposto__claim {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.78);
}

.creativo-segnaposto__cta {
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--clr-ocra);
    color: var(--clr-text);
    border-radius: 0.25rem;
    padding: 0.3rem 0.65rem;
    white-space: nowrap;
}

.slot-banner--rettangolo .creativo-segnaposto,
.slot-banner--mezza-pagina .creativo-segnaposto { flex-direction: column; }
.slot-banner--leaderboard .creativo-segnaposto { flex-direction: column; }
.slot-banner--banner .creativo-segnaposto__claim,
.slot-banner--mobile .creativo-segnaposto__claim { display: none; }
.slot-banner--mobile .creativo-segnaposto__nome { font-size: 1.1rem; }

/* Blocco 5×1000 / Sostienici */
.blocco-5x1000 {
    background: var(--clr-surface-alt);
    border-top: 4px solid var(--clr-ocra);
    padding: 2.5rem 0;
}

.blocco-5x1000__riquadro {
    background: #FFFFFF;
    border: 1px solid var(--clr-border-accent);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.blocco-5x1000__cf, .codice-copiabile {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--clr-text);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.blocco-5x1000__label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
    display: block;
    margin-bottom: 0.15rem;
}

.blocco-5x1000__icona {
    font-size: 3rem;
    color: var(--clr-blu);
}

[data-copia].copiato { border-color: var(--clr-success); color: var(--clr-success); }

.stato-vuoto {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--clr-text-muted);
}

.stato-vuoto .material-symbols-outlined { font-size: 2.5rem; color: var(--clr-text-disabled); display: block; margin: 0 auto 0.5rem; }
.stato-vuoto .btn { display: inline-flex; }
.stato-vuoto .btn .material-symbols-outlined { font-size: 1.2em; color: inherit; display: inline-block; margin: 0; }

/* Banner cookie informativo */
.banner-cookie {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1060;
    max-width: 24rem;
    background: #FFFFFF;
    border: 1px solid var(--clr-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-elevato);
    padding: 1rem 1.15rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.banner-cookie[hidden] { display: none; }
.banner-cookie__titolo { font-weight: 600; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.4rem; }
.banner-cookie__azioni { display: flex; gap: 0.5rem; margin-top: 0.75rem; align-items: center; }

/* Nastro «Mockup» */
.nastro-mockup {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1070;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem 0.35rem 0.8rem;
    border-radius: 999px;
    background: #1B1F24;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    box-shadow: var(--shadow-elevato);
}

.nastro-mockup__etichetta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.nastro-mockup__etichetta::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--clr-ocra);
}

.nastro-mockup__link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.nastro-mockup__link:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }
.nastro-mockup__link.attivo { background: var(--clr-ocra); color: #1B1F24; font-weight: 600; }

/* Flash */
.flash-zona { padding-top: 1rem; }
.flash-zona .alert { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   13. Header pubblico, off-canvas, footer
   -------------------------------------------------------------------------- */
#akra-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--clr-blu);
    color: #FFFFFF;
    height: var(--header-h);
    transition: box-shadow 0.2s ease;
}

#akra-header.scrollato { box-shadow: 0 1px 3px rgba(27, 31, 36, 0.15); }

.akra-header__barra {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.akra-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #FFFFFF;
    text-decoration: none;
    flex-shrink: 0;
}

.akra-logo:hover { color: #FFFFFF; }

/* Marchio: ritaglio della sola bici dal logo negativo (il testo è reso dal logotipo) */
.akra-marchio { display: block; width: 80px; height: 41px; overflow: hidden; flex-shrink: 0; }
.akra-marchio img { display: block; height: 66px; width: auto; max-width: none; margin-left: -13px; }
.akra-marchio--sm { width: 68px; height: 35px; }
.akra-marchio--sm img { height: 56px; margin-left: -11px; }

.akra-logo__testo {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.akra-logo__nome {
    font-family: var(--font-titoli);
    font-size: 1.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.akra-logo__luogo {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--clr-ocra);
    margin-top: 0.15rem;
}

.akra-menu {
    display: flex;
    align-items: stretch;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.15rem;
}

.akra-menu > li { display: flex; position: relative; }

.akra-menu__link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    background: none;
    border-left: 0;
    border-right: 0;
    transition: color 0.1s ease;
}

.akra-menu__link:hover, .akra-menu__link:focus-visible, .akra-menu__link.show { color: #FFFFFF; }

.akra-menu__link.attivo {
    font-weight: 600;
    color: #FFFFFF;
    border-bottom-color: var(--clr-area);
}

/* Sul blu, il colore d'area associazione coincide col fondo: l'attivo usa l'ocra */
[data-area="associazione"] .akra-menu__link.attivo { border-bottom-color: var(--clr-ocra); }
[data-area="eventi"] #akra-header .akra-menu__link.attivo { border-bottom-color: #E08A5A; }
[data-area="squadra"] #akra-header .akra-menu__link.attivo { border-bottom-color: #6FB08F; }
[data-area="territorio"] #akra-header .akra-menu__link.attivo { border-bottom-color: #C893AE; }

.akra-menu__link.dropdown-toggle::after {
    border: 0;
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    vertical-align: middle;
    margin-left: 0.05rem;
    line-height: 1;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
}

.akra-menu .dropdown-menu { margin-top: 0 !important; min-width: 15rem; }

.akra-header__strumenti {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.akra-header__icona {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    background: none;
    border: 0;
    position: relative;
}

.akra-header__icona:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
.akra-header__icona .material-symbols-outlined { font-size: 1.5rem; }

.akra-header__lingua {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.25rem;
    padding: 0.2rem 0.45rem;
}

.akra-header__lingua:hover { color: #FFFFFF; border-color: #FFFFFF; }

/* Off-canvas mobile */
.akra-offcanvas {
    --bs-offcanvas-width: min(22rem, 88vw);
    --bs-offcanvas-bg: #123A5A;
    --bs-offcanvas-color: #FFFFFF;
    --bs-offcanvas-border-color: transparent;
}

.akra-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.akra-offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.akra-offcanvas__menu { list-style: none; margin: 0; padding: 0; }

.akra-offcanvas__menu > li > a, .akra-offcanvas__menu summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.5rem 0.25rem;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    list-style: none;
}

.akra-offcanvas__menu summary::-webkit-details-marker { display: none; }
.akra-offcanvas__menu summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    margin-left: auto;
    font-size: 1.3rem;
    transition: transform 0.2s ease;
}
.akra-offcanvas__menu details[open] summary::after { transform: rotate(180deg); }
.akra-offcanvas__menu .material-symbols-outlined { color: var(--clr-ocra); }

.akra-offcanvas__sotto { list-style: none; padding: 0.25rem 0 0.5rem 2.1rem; margin: 0; }
.akra-offcanvas__sotto a {
    display: block;
    padding: 0.55rem 0;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.92rem;
}

.akra-offcanvas__sotto a:hover, .akra-offcanvas__menu a:hover { color: #FFFFFF; }
.akra-offcanvas .attivo { color: #FFFFFF; font-weight: 600; }

/* Footer */
#akra-footer {
    background: var(--clr-surface-dark);
    color: rgba(255, 255, 255, 0.82);
    padding: 3.5rem 0 0;
    font-size: 0.9rem;
    margin-top: auto;
}

#akra-footer a { color: #FFFFFF; text-decoration: none; }
#akra-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer__titolo {
    font-family: var(--font-titoli);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    margin-bottom: 1rem;
}

.footer__titolo::after {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    margin-top: 0.35rem;
    background: var(--clr-ocra);
}

.footer__lista { list-style: none; padding: 0; margin: 0; }
.footer__lista li { padding: 0.25rem 0; }
.footer__lista .material-symbols-outlined { color: var(--clr-ocra); margin-right: 0.35rem; }

.footer__evento { display: flex; gap: 0.75rem; padding: 0.4rem 0; }
.footer__evento-data {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
}

.footer__5x1000 {
    border: 1px solid rgba(216, 154, 63, 0.5);
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
}

.footer__5x1000 .codice {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}

.footer__social { display: flex; gap: 0.25rem; margin-bottom: 1rem; }

.footer__social a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.footer__social a:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none !important; }
.footer__social svg { width: 18px; height: 18px; fill: #FFFFFF; }

.footer__newsletter .form-control {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.footer__newsletter .form-control::placeholder { color: rgba(255, 255, 255, 0.55); }

.footer__legale {
    margin-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1.25rem 0 1.5rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
}

#akra-footer .footer__legale a { color: rgba(255, 255, 255, 0.75); }
.footer__legale-link { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }

/* --------------------------------------------------------------------------
   14. Backoffice
   -------------------------------------------------------------------------- */
body.layout-admin { background: var(--clr-bg); }

.layout-admin #akra-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--admin-header-h);
}


.admin-header__nome {
    font-family: var(--font-titoli);
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    padding-left: 0.85rem;
    white-space: nowrap;
}

.admin-ricerca {
    position: relative;
    flex: 1;
    max-width: 26rem;
}

.admin-ricerca .material-symbols-outlined {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.admin-ricerca input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.375rem;
    padding: 0.4rem 0.75rem 0.4rem 2.2rem;
    color: #FFFFFF;
    font-size: 0.875rem;
}

.admin-ricerca input::placeholder { color: rgba(255, 255, 255, 0.55); }
.admin-ricerca input:focus { outline: 0; border-color: var(--clr-ocra); box-shadow: var(--focus-ring); background: rgba(255, 255, 255, 0.14); }

.admin-utente {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #FFFFFF;
    background: none;
    border: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
}

.admin-utente:hover { background: rgba(255, 255, 255, 0.1); }
.admin-utente .avatar { background: var(--clr-ocra); color: #1B1F24; }
.admin-utente__ruolo { display: block; font-size: 0.7rem; color: rgba(255, 255, 255, 0.65); line-height: 1.1; }
.admin-utente__nome { display: block; font-weight: 600; line-height: 1.2; text-align: left; }

#akra-sidebar {
    position: fixed;
    top: var(--admin-header-h);
    bottom: 0;
    left: 0;
    width: var(--sidebar-w);
    z-index: 40;
    background: var(--clr-surface-alt);
    border-right: 1px solid var(--clr-divider);
    overflow-y: auto;
    padding-bottom: 2rem;
    scrollbar-width: thin;
}

.sidebar__gruppo { padding-bottom: 0.25rem; }

.sidebar__label {
    padding: 1rem 1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-area);
    margin: 0;
}

.sidebar__lista { list-style: none; margin: 0; padding: 0; }

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--clr-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color 0.1s ease;
}

.sidebar__link .material-symbols-outlined { font-size: 1.2rem; color: var(--clr-text-muted); }
.sidebar__link:hover { background: var(--clr-divider); color: var(--clr-text); }

.sidebar__link.attivo {
    background: #FFFFFF;
    font-weight: 600;
    color: var(--clr-area);
    border-left-color: var(--clr-area);
}

.sidebar__link.attivo .material-symbols-outlined { color: var(--clr-area); }

.sidebar__contatore {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-mono);
    background: var(--clr-warning-bg);
    color: var(--clr-warning);
    border-radius: 999px;
    padding: 0 0.45rem;
}

#akra-main {
    padding-top: var(--admin-header-h);
    padding-left: var(--sidebar-w);
    flex: 1 0 auto;
}

.admin-contenuto {
    max-width: var(--admin-max);
    padding: 1.5rem 1.5rem 2rem;
}

.admin-intestazione {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.admin-intestazione .breadcrumb { margin-bottom: 0.35rem; }

.admin-titolo {
    font-family: var(--font-titoli);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--clr-blu);
    margin: 0;
    line-height: 1.05;
}

.admin-azioni { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.layout-admin .card { --bs-card-spacer-x: 1rem; --bs-card-spacer-y: 1rem; --bs-card-cap-padding-x: 1rem; --bs-card-cap-padding-y: 0.65rem; }
.layout-admin .table > :not(caption) > * > * { padding: 0.5rem 0.75rem; }
.layout-admin .row { --bs-gutter-x: 1rem; }

.barra-filtri {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--clr-border);
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 1rem;
}

.barra-filtri .form-control, .barra-filtri .form-select { width: auto; min-width: 10rem; padding: 0.35rem 0.6rem; font-size: 0.85rem; }

/* Barra azioni fissa per form lunghi */
.barra-azioni {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin: 2rem -1.5rem -2rem;
    padding: 0.75rem 1.5rem;
    background: #FFFFFF;
    border-top: 1px solid var(--clr-border);
    box-shadow: 0 -4px 12px rgba(27, 31, 36, 0.06);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.barra-azioni__stato { margin-right: auto; font-size: 0.8rem; color: var(--clr-text-muted); display: inline-flex; align-items: center; gap: 0.35rem; }

/* Layout accesso */
.layout-accesso {
    background:
        linear-gradient(180deg, rgba(12, 42, 66, 0.92), rgba(12, 42, 66, 0.97)),
        var(--clr-blu-profondo);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.accesso-card {
    width: 100%;
    max-width: 26rem;
    background: #FFFFFF;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-elevato);
    overflow: hidden;
}

.accesso-card__testa {
    background: var(--clr-blu);
    padding: 1.5rem;
    text-align: center;
    border-bottom: 4px solid var(--clr-ocra);
}

.accesso-card__testa img { height: 64px; }
.accesso-card__corpo { padding: 1.75rem 1.75rem 1.5rem; }
.accesso-card__piede {
    padding: 0.85rem 1.75rem;
    background: var(--clr-surface-alt);
    border-top: 1px solid var(--clr-divider);
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

/* --------------------------------------------------------------------------
   15. Animazioni
   -------------------------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.ruota { animation: spin 0.9s linear infinite; display: inline-block; }

.skeleton {
    background: linear-gradient(90deg, #F2EDE4 0%, #FAF8F4 50%, #F2EDE4 100%);
    background-size: 800px 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 0.375rem;
}

.fade-up { animation: fade-up 0.3s ease-out both; }
.fade-up:nth-child(2) { animation-delay: 0.05s; }
.fade-up:nth-child(3) { animation-delay: 0.1s; }
.fade-up:nth-child(4) { animation-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }

    .fade-up { animation: none; }
    .card-contenuto:hover, .card-evento:hover, .card-cliccabile:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .akra-menu__link { padding: 0 0.5rem; font-size: 0.85rem; }
    .akra-logo__luogo { display: none; }
}

@media (max-width: 1023.98px) {
    .scheda-percorso { grid-template-columns: repeat(2, 1fr); }
    .galleria-griglia { grid-template-columns: repeat(2, 1fr); }
    :root { --sidebar-w: 200px; }
}

@media (max-width: 991.98px) {
    #akra-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease-out;
        width: 260px;
        box-shadow: var(--shadow-elevato);
    }

    #akra-sidebar.show, #akra-sidebar.aperta { transform: none; }
    #akra-main { padding-left: 0; }
    .admin-header__nome { display: none; }
}

@media (max-width: 767.98px) {
    :root { --header-h: 60px; }
    .sezione, .fascia { padding-block: 2.5rem; }
    .hero { min-height: 45vh; }
    .hero__titolo { font-size: 2rem; }
    .hero__sommario { font-size: 1rem; }
    .page-header__title { font-size: 2rem; }
    .page-header__icon { font-size: 1.6rem; margin-top: 0.9rem; }
    .titolo-sezione { font-size: 1.5rem; }
    .scheda-percorso, .scheda-percorso--3 { grid-template-columns: 1fr 1fr; }
    .galleria-griglia { grid-template-columns: 1fr; }
    .akra-marchio { width: 68px; height: 35px; }
    .akra-marchio img { height: 56px; margin-left: -11px; }
    .admin-contenuto { padding: 1rem 1rem 1.5rem; }
    .barra-azioni { margin: 1.5rem -1rem -1.5rem; padding: 0.75rem 1rem; }
    .admin-titolo { font-size: 1.6rem; }
    .countdown__cella { min-width: 3.5rem; }
    .countdown__valore { font-size: 1.6rem; }
    .banner-cookie { left: 1rem; right: 1rem; bottom: 4rem; max-width: none; }
    .nastro-mockup__etichetta span { display: none; }
    .table-responsive .table { font-size: 0.825rem; }
    .blocco-5x1000__cf { font-size: 1.2rem; }
    .slot-banner--leaderboard.sostituibile, .slot-banner--banner.sostituibile { display: none; }
}

@media (min-width: 768px) {
    .slot-banner--mobile.sostituto { display: none; }
}

@media (max-width: 479.98px) {
    .scheda-percorso, .scheda-percorso--3 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   17. Stampa (§11)
   -------------------------------------------------------------------------- */
@media print {
    @page { size: A4; margin: 1cm 1.5cm; }

    body {
        background: #FFFFFF !important;
        color: #000000;
        font-size: 10pt;
        display: block;
    }

    #akra-header, #akra-footer, #akra-sidebar, .akra-offcanvas, .slot-banner, .banner-cookie, .nastro-mockup,
    .btn, .hero__azioni, .flash-zona, .barra-azioni, .barra-filtri, .no-print, .breadcrumb, .page-header__icon,
    .foto-decorativa, .hero__media, nav, .admin-azioni {
        display: none !important;
    }

    #akra-main { padding: 0 !important; }
    .admin-contenuto, .container, .contenitore { max-width: 100% !important; padding: 0 !important; }

    h1, .h1, .page-header__title, .admin-titolo { font-size: 13pt; }
    h2, .h2, .titolo-sezione { font-size: 12pt; }

    .hero { min-height: 0; color: #000; background: none; }
    .hero::after { display: none; }
    .hero__titolo, .hero__sommario { color: #000; }

    .fascia, .fascia--scura, .fascia--sabbia, .blocco-5x1000 { background: none !important; color: #000; padding: 0.5cm 0; }
    .fascia--scura h2, .fascia--scura .titolo-sezione { color: #000; }

    .card, .tabella-contenitore, .scheda-percorso__riquadro, .riquadro-dati, .table-wrap {
        border-color: #888 !important;
        box-shadow: none !important;
        transform: none !important;
        break-inside: avoid;
    }

    .table > :not(caption) > * > * { border-color: #888 !important; }
    .table > thead > tr > th { background: #EEE !important; border-bottom-color: #555 !important; color: #000; }
    .table, .classifica, .dati-gara, .numeric { font-family: var(--font-mono); }

    a { color: #000; text-decoration: none; }

    body::after {
        content: 'A.S.D. Akra Bike Agrigento — ' attr(data-url-stampa) ' — stampato il ' attr(data-data-stampa);
        display: block;
        margin-top: 1cm;
        padding-top: 0.25cm;
        border-top: 1px solid #888;
        font-size: 8pt;
        color: #333;
    }
}