/*
 * Pagine pubbliche (Bootstrap 5.3 + template MyResume aggiornato).
 * Palette e font del sito attuale (assets/css/style.css del template MyResume).
 */

/* Font ospitati sul sito (licenza OFL): nessuna richiesta a server
   esterni, quindi nessun dato del visitatore inviato a terzi */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans.woff2") format("woff2");
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/raleway.woff2") format("woff2");
}

:root {
    --sci-primario: #0563bb;
    --sci-primario-chiaro: #0678e3;
    --sci-primario-scuro: #044f96;
    --sci-testo: #45505b;
    --ivao-blu: #0d2c99;

    --bs-primary: var(--sci-primario);
    --bs-primary-rgb: 5, 99, 187;
    --bs-link-color: var(--sci-primario);
    --bs-link-color-rgb: 5, 99, 187;
    --bs-link-hover-color: var(--sci-primario-chiaro);
    --bs-link-hover-color-rgb: 6, 120, 227;
    --bs-body-color: var(--sci-testo);
    --bs-body-font-family: "Open Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    color: var(--sci-testo);
}

.btn-primary {
    --bs-btn-bg: var(--sci-primario);
    --bs-btn-border-color: var(--sci-primario);
    --bs-btn-hover-bg: var(--sci-primario-chiaro);
    --bs-btn-hover-border-color: var(--sci-primario-chiaro);
    --bs-btn-active-bg: var(--sci-primario-scuro);
    --bs-btn-active-border-color: var(--sci-primario-scuro);
    --bs-btn-disabled-bg: var(--sci-primario);
    --bs-btn-disabled-border-color: var(--sci-primario);
    --bs-btn-focus-shadow-rgb: 5, 99, 187;
}

.btn-outline-primary {
    --bs-btn-color: var(--sci-primario);
    --bs-btn-border-color: var(--sci-primario);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sci-primario-chiaro);
    --bs-btn-hover-border-color: var(--sci-primario-chiaro);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sci-primario-scuro);
    --bs-btn-active-border-color: var(--sci-primario-scuro);
    --bs-btn-focus-shadow-rgb: 5, 99, 187;
}

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

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #82b1dd;
    box-shadow: 0 0 0 .25rem rgba(5, 99, 187, .25);
}

/* Titoli di sezione come nel sito attuale: linea blu sotto il titolo */
.sezione-titolo h1 {
    position: relative;
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
}

.sezione-titolo h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: var(--sci-primario);
}

.informativa h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
}

/* ------------------------------------------------------------
   Navbar (tutte le pagine). In home è fissa e trasparente sopra
   l'hero e diventa opaca allo scroll (sito.js aggiunge .scorrendo);
   nelle altre pagine è sempre opaca e resta in cima (sticky).
   ------------------------------------------------------------ */
.sito-navbar {
    --altezza-navbar: 72px;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .06);
    transition: background-color .3s, box-shadow .3s;
    z-index: 1030;
}

.sito-navbar.trasparente {
    background: transparent;
    box-shadow: none;
}

.sito-navbar.trasparente.scorrendo,
.sito-navbar.trasparente.menu-aperto {
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .06);
}

.sito-navbar .navbar {
    min-height: var(--altezza-navbar);
}

.sito-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    color: var(--sci-testo);
}

.sito-navbar .navbar-brand img {
    height: 44px;
    width: auto;
}

/* Home: sopra l'hero logo e nome sono già in grande, quindi il marchio della
   navbar compare solo allo scroll (o con il menu mobile aperto).
   visibility, non display: il pulsante del menu resta al suo posto */
.sito-navbar .navbar-brand {
    transition: opacity .3s, visibility .3s;
}

.sito-navbar.trasparente:not(.scorrendo):not(.menu-aperto) .navbar-brand {
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .sito-navbar .navbar-brand {
        transition: none;
    }
}

.sito-navbar .navbar-toggler {
    border: 0;
    color: var(--sci-testo);
    padding: .25rem .5rem;
}

.sito-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(5, 99, 187, .25);
}

.sito-navbar .nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--sci-testo);
    padding: .5rem .9rem;
    border-radius: 50px;
    transition: color .3s, background-color .3s;
}

/* Icone SVG a linea (iconaNav() in sito.php): colore dal testo del link */
.sito-navbar .icona-nav {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    stroke-width: 2.25;
}

.sito-navbar .navbar-toggler .icona-nav {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    stroke-width: 2.25;
}

.sito-navbar .nav-link:hover,
.sito-navbar .nav-link:focus-visible,
.sito-navbar .nav-link.active {
    color: #fff;
    background: var(--sci-primario);
}

/* Tendina di una voce (SOTTOVOCI_MENU in sito.php): senza il JavaScript
   dei dropdown di Bootstrap, così il clic sulla voce porta alla sezione */
.sito-navbar .dropdown-toggle::after {
    margin-left: .15rem;
}

.sito-navbar .sottomenu {
    border: 0;
    border-radius: 10px;
    padding: .4rem;
    min-width: 13rem;
}

.sito-navbar .sottomenu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--sci-testo);
    padding: .45rem .8rem;
    border-radius: 6px;
}

.sito-navbar .sottomenu .dropdown-item i {
    color: var(--sci-primario);
    font-size: 1rem;
}

.sito-navbar .sottomenu .dropdown-item:hover,
.sito-navbar .sottomenu .dropdown-item:focus-visible,
.sito-navbar .sottomenu .dropdown-item.active {
    color: #fff;
    background: var(--sci-primario);
}

.sito-navbar .sottomenu .dropdown-item:hover i,
.sito-navbar .sottomenu .dropdown-item:focus-visible i,
.sito-navbar .sottomenu .dropdown-item.active i {
    color: #fff;
}

@media (max-width: 991.98px) {
    .sito-navbar .navbar-nav {
        padding: .5rem 0 1rem;
        gap: .25rem;
    }

    /* Menu mobile: sottovoci sempre visibili, rientrate sotto la voce */
    .sito-navbar .sottomenu {
        display: block;
        position: static;
        padding: 0 0 0 1.5rem;
        background: transparent;
    }

    .sito-navbar .dropdown-toggle::after {
        display: none;
    }
}

@media (min-width: 992px) {
    .sito-navbar .navbar-nav {
        gap: .25rem;
    }

    .sito-navbar .sottomenu {
        top: 100%;
        right: 0;
        left: auto;
        margin-top: 0;
        box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    }

    .sito-navbar .dropdown:hover > .sottomenu,
    .sito-navbar .dropdown:focus-within > .sottomenu {
        display: block;
    }
}

/* Le ancore non finiscono sotto la navbar fissa */
[id] {
    scroll-margin-top: 80px;
}

/* ------------------------------------------------------------
   Footer (tutte le pagine)
   ------------------------------------------------------------ */
.sito-footer {
    background: #f7f8f9;
    border-top: 1px solid #e3e7ec;
    color: var(--sci-testo);
    font-size: 14px;
    text-align: center;
    padding: 30px 0;
}

/* Simbolo IVAO inline (iconaIvao()). Più grande dei glifi di Bootstrap Icons:
   a 1em anello e aereo sono troppo sottili per leggersi */
.icona-ivao {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -.3em;
}

.sito-footer .social-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 25px 0;
}

.sito-footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 50%;
    background: var(--sci-primario);
    color: #fff;
    transition: background-color .3s;
}

.sito-footer .social-links a:hover {
    background: var(--sci-primario-chiaro);
    color: #fff;
}

.sito-footer .copyright {
    margin: 0 0 5px 0;
}

.sito-footer .credits {
    font-size: 13px;
}

.scroll-top {
    position: fixed;
    right: 15px;
    bottom: -15px;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    background: var(--sci-primario);
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: all .4s;
}

.scroll-top i {
    font-size: 24px;
    line-height: 0;
}

.scroll-top:hover {
    background: var(--sci-primario-chiaro);
    color: #fff;
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
}

/* ------------------------------------------------------------
   Sezioni del template MyResume (home e pagine della scuola)
   ------------------------------------------------------------ */
.sezione {
    padding: 60px 0;
    overflow: clip;
}

.section-title {
    text-align: center;
    padding-bottom: 30px;
}

.section-title h2 {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.section-title h2::before {
    content: "";
    position: absolute;
    display: block;
    width: 120px;
    height: 1px;
    background: #ddd;
    bottom: 1px;
    left: calc(50% - 60px);
}

.section-title h2::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 3px;
    background: var(--sci-primario);
    bottom: 0;
    left: calc(50% - 20px);
}

.section-title p {
    margin-bottom: 0;
}

.sottotitolo {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    margin: 20px 0;
}

.testo-primario {
    color: var(--sci-primario);
}

/* Hero */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 0 60px;
}

.hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
    z-index: 1;
}

/* Carousel di sfondo (sfondoHero() in sito.php): dissolvenza lenta */
.hero-sfondo,
.hero-sfondo .carousel-inner,
.hero-sfondo .carousel-item {
    height: 100%;
}

.hero-sfondo {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-sfondo.carousel-fade .carousel-item {
    transition-duration: 1.5s;
}

/* L'immagine uscente resta sotto finché l'entrante non è del tutto visibile
   (Bootstrap la toglie dopo .6s); Bootstrap usa questo ritardo come durata */
.hero-sfondo.carousel-fade .active.carousel-item-start,
.hero-sfondo.carousel-fade .active.carousel-item-end {
    transition: opacity 0s 1.5s;
}

.hero-sfondo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .8);
    z-index: 2;
}

.hero .container {
    position: relative;
    z-index: 3;
}

.hero h1 {
    margin: 0;
    font-size: 64px;
    line-height: 1;
}

.hero p {
    margin: 15px 0 0 0;
    font-size: 26px;
    font-family: "Raleway", sans-serif;
}

.hero p .typed {
    color: var(--sci-primario);
    letter-spacing: 1px;
    border-bottom: 2px solid var(--sci-primario);
}

/* Cursore di typed.js (il suo CSS automatico è disattivato, vedi sito.js) */
.typed-cursor {
    opacity: 1;
    animation: typedjs-blink .7s infinite;
}

@keyframes typedjs-blink {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .typed-cursor {
        animation: none;
    }
}

.hero .social-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.hero .social-links a {
    font-size: 24px;
    line-height: 1;
    color: var(--sci-testo);
    transition: color .3s;
}

.hero .social-links a:hover {
    color: var(--sci-primario);
}

/* Il brand kit IVAO ammette solo il blu IVAO o il bianco su fondo scuro */
.hero .social-links .icona-ivao {
    color: var(--ivao-blu);
}

.hero .partner {
    display: inline-block;
    margin-top: 30px;
}

@media (max-width: 991.98px) {
    .hero {
        text-align: center;
    }

    .hero .social-links {
        justify-content: center;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        margin-top: 10px;
        font-size: 20px;
    }
}

/* Chi siamo */
.about .content h3 {
    font-weight: 700;
    font-size: 26px;
    color: #728394;
}

.about .content ul {
    list-style: none;
    padding: 0;
}

.about .content ul li {
    display: flex;
    gap: .25rem;
    padding-bottom: 10px;
}

.about .content ul i {
    font-size: 18px;
    color: var(--sci-primario);
    line-height: 1.4;
}

/* Introduzione a tutta larghezza: logo a sinistra e testo accanto,
   centrati in verticale; su telefono il logo va sopra, centrato */
.about .intro-chi-siamo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.about .logo-chi-siamo {
    flex-shrink: 0;
    width: 180px;
    height: auto;
}

@media (min-width: 576px) {
    .about .intro-chi-siamo {
        flex-direction: row;
        gap: 2rem;
    }

    .about .logo-chi-siamo {
        width: 210px;
    }
}

/* Motto e saluto centrati sotto le due colonne */
.about .chiusura-chi-siamo {
    margin-top: 2rem;
    text-align: center;
}

.about .chiusura-chi-siamo .motto {
    font-size: 26px;
    color: #728394;
}

.about .chiusura-chi-siamo p {
    margin: 1rem 0 0;
}

/* Premessa accanto a Chi siamo, con i pulsanti dei popup delle regole */
.riquadro-ingresso {
    text-align: center;
}

.riquadro-ingresso p {
    font-size: .9375rem;
    color: #5d6975;
}

/* Un pulsante per riga, stessa larghezza */
.pulsanti-regole {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.pulsanti-regole .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    max-width: 18rem;
}

/* Popup delle regole: stesso riquadro grigio della legenda; testo a
   sinistra (un elenco numerato centrato si legge male) */
.riquadro-regole {
    position: relative;
    font-size: .9375rem;
}

.riquadro-regole .btn-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

.riquadro-regole .legenda-titolo {
    padding: 0 2rem;
}

.riquadro-regole .modal-body {
    padding: 0;
}

.riquadro-regole ol {
    padding-left: 1.25rem;
    margin-bottom: 0;
}

.riquadro-regole li {
    padding-bottom: .5rem;
}

.riquadro-regole ul {
    padding-left: 1.25rem;
    margin-top: .5rem;
}

.riquadro-regole .conclusione {
    margin: 1.25rem 0 0;
    text-align: center;
    font-style: italic;
}

/* Stesse regole per esteso nel modulo di iscrizione, ognuna seguita dalla
   casella da spuntare */
.regole-iscrizione {
    margin-bottom: .75rem;
}

/* Timeline (regole e pagine della scuola) */
.resume .resume-title {
    font-size: 26px;
    font-weight: 700;
    margin: 20px 0;
}

.resume .resume-item {
    padding: 0 0 20px 20px;
    margin-top: -2px;
    border-left: 2px solid var(--sci-primario);
    position: relative;
}

.resume .resume-item h4 {
    line-height: 18px;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--sci-primario);
    margin-bottom: 10px;
}

.resume .resume-item h5 {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 16px;
    background: #f7f8f9;
    padding: 5px 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

.resume .resume-item ul,
.resume .resume-item ol {
    padding-left: 20px;
}

.resume .resume-item li {
    padding-bottom: 10px;
}

.resume .resume-item:last-child {
    padding-bottom: 0;
}

.resume .resume-item::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50px;
    left: -9px;
    top: 0;
    background: #fff;
    border: 2px solid var(--sci-primario);
}

/* Card Scuola e Servizi (icone ridotte rispetto al template: 64px) */
.services .service-item {
    position: relative;
    height: 100%;
    padding: 50px 20px 60px;
    text-align: center;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 90px 0 rgba(110, 123, 131, .1);
    transition: box-shadow .3s;
}

.services .service-item:hover {
    box-shadow: 0 0 35px 0 rgba(0, 0, 0, .12);
}

.services .service-item .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

.services .service-item .icon svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.services .service-item .icon svg path {
    fill: #f5f5f5;
    transition: fill .5s;
}

.services .service-item .icon i {
    position: relative;
    font-size: 24px;
    line-height: 1;
    transition: color .5s;
}

.services .service-item h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 10px 0 15px;
}

.services .service-item h3 a {
    color: var(--sci-testo);
    text-decoration: none;
}

.services .service-item h3 a::after {
    /* tutta la card è cliccabile */
    content: "";
    position: absolute;
    inset: 0;
}

.services .service-item p {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.services .service-item:hover .icon i {
    color: #fff;
}

.services .item-blue   { --colore-card: #47aeff; }
.services .item-orange { --colore-card: #ffa76e; }
.services .item-pink   { --colore-card: #e80368; }
.services .item-yellow { --colore-card: #ffbb2c; }

.services .service-item .icon i {
    color: var(--colore-card);
}

.services .service-item:hover .icon path {
    fill: var(--colore-card);
}

/* Sezioni Scuola e Servizi della home: card più piccole */
.services.compatti .service-item {
    padding: 28px 16px 30px;
}

.services.compatti .service-item .icon {
    width: 48px;
    height: 48px;
}

.services.compatti .service-item .icon i {
    font-size: 19px;
}

.services.compatti .service-item h3 {
    font-size: 18px;
    margin: 8px 0;
}

.services.compatti .service-item p {
    font-size: 13px;
    line-height: 20px;
}

/* Pagine della scuola e organigramma */
.nastrino {
    height: 30px;
    width: auto;
}

.nastrino-piccolo {
    height: 20px;
    width: auto;
}

.nastrino-ruolo {
    display: block;
    height: 40px;
    width: auto;
    margin: 0 auto .75rem;
}

.badge-rating {
    height: 170px;
    width: auto;
}

/* Organigramma (organization.php): una card per ruolo dello staff, con
   la testata grigia come le intestazioni della tabella piloti */
.card-ruolo {
    border: 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    border-top: 3px solid var(--sci-primario);
}

.card-ruolo-testa {
    padding: 1.25rem 1.25rem 1rem;
    text-align: center;
    background: #f7f8f9;
    border-bottom: 1px solid var(--bs-border-color);
}

.card-ruolo-titolo {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.card-ruolo-persona {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem .75rem;
    margin: .5rem 0 0;
    font-weight: 600;
}

.card-ruolo-id {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: #728394;
    font-variant-numeric: tabular-nums;
}

.card-ruolo-id a {
    text-decoration: none;
}

.card-ruolo-id a:hover,
.card-ruolo-id a:focus-visible {
    text-decoration: underline;
}

.card-ruolo .card-body {
    padding: 1.25rem;
    font-size: .9375rem;
}

.card-ruolo ul {
    padding-left: 1.1rem;
}

.card-ruolo li {
    padding-bottom: .35rem;
}

.card-ruolo .card-body > :last-child {
    margin-bottom: 0;
}

.card-ruolo-sottotitolo {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #728394;
    margin-bottom: .5rem;
}

.card-ruolo-nota {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

/* Nastrini degli altri incarichi nella tabella dell'organigramma */
.tabella-piloti .gruppo-nastrini {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .375rem;
    vertical-align: middle;
}

.tabella-piloti .gruppo-nastrini img {
    display: block;
    height: 24px;
    width: auto;
}

/* Extra (extra.php): livree accanto al video */
.elenco-livree li + li {
    border-top: 1px solid var(--bs-border-color);
}

.elenco-livree a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 0;
    font-weight: 600;
    text-decoration: none;
}

.elenco-livree a:hover,
.elenco-livree a:focus-visible {
    text-decoration: underline;
}

.elenco-livree .bi {
    font-size: .875rem;
}

.callsign {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-weight: 700;
}

/* Pilota eliminato nel flight log: "ex SCI###" (callsignVolo in sito.php) */
.callsign .ex {
    font-family: var(--bs-body-font-family);
    font-style: italic;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* Lista piloti (piloti.php) */
.statistica {
    border: 0;
    border-left: 3px solid var(--sci-primario);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.statistica-etichetta {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #728394;
}

.statistica-valore {
    display: block;
    font-family: "Raleway", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sci-testo);
    font-variant-numeric: tabular-nums;
}

/* Statistiche della home (sezioneStatistiche in sito.php): un riquadro
   con due colonne, separate da una linea verticale (orizzontale su mobile) */
.riquadro-statistiche {
    max-width: 1080px;
    margin: 0 auto;
    background: #fff;
    border-top: 3px solid var(--sci-primario);
    border-radius: 5px;
    box-shadow: 0 0 25px rgba(0, 0, 0, .08);
}

.colonna-statistiche {
    padding: 2rem;
}

.colonna-statistiche + .colonna-statistiche {
    border-top: 1px solid #e3e7ec;
}

@media (min-width: 768px) {
    .colonna-statistiche {
        padding: 2.25rem 2.5rem;
    }

    .colonna-statistiche + .colonna-statistiche {
        border-top: 0;
        border-left: 1px solid #e3e7ec;
    }

    /* Colonna sinistra, più corta: l'intestazione resta allineata a quella
       di destra e i valori si distribuiscono nell'altezza rimanente */
    .colonna-spaziata {
        display: flex;
        flex-direction: column;
    }

    .colonna-spaziata .statistiche-corpo {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .colonna-spaziata .statistiche-valore,
    .colonna-spaziata .statistiche-di-cui {
        margin: 0;
    }
}

.statistiche-intestazione {
    margin-bottom: 1.25rem;
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #728394;
}

.statistiche-valore {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .5rem;
    font-size: 1.0625rem;
}

.statistiche-valore .bi {
    flex: none;
    width: 1.75rem;
    font-size: 1.5rem;
    color: var(--sci-primario);
    align-self: center;
}

.statistiche-valore strong {
    font-family: "Raleway", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sci-testo);
    font-variant-numeric: tabular-nums;
}

/* Intestazione di ogni barra (h4, con il testo normale del sito) */
.requisito-frase {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 1.5rem 0 .6rem;
    font-family: var(--bs-body-font-family);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sci-testo);
}

.requisito-frase strong {
    font-weight: 700;
}

/* Logo della rete (logoNetwork in sito.php): riquadro di larghezza fissa,
   così i testi delle due barre partono allineati qualunque sia il logo */
.requisito-frase .logo-network {
    flex: none;
    width: 4.5rem;
    height: 1.75rem;
    margin-right: .4rem;
    object-fit: contain;
    object-position: left center;
}

.requisito-frase .bi {
    flex: none;
    width: 1.75rem;
    margin-right: .25rem;
    font-size: 1.25rem;
    color: var(--sci-primario);
    text-align: center;
}

/* "di cui" centrato verticalmente accanto alle ore degli ultimi tre mesi,
   allineato al testo dei valori (dopo la colonna delle icone) */
.statistiche-di-cui {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .25rem;
    padding-left: 2.35rem;
    font-size: .9375rem;
}

.statistiche-di-cui .di-cui {
    font-style: italic;
    color: #728394;
}

.statistiche-di-cui ul {
    margin: 0;
    padding-left: .75rem;
    list-style: none;
    border-left: 2px solid #e3e7ec;
}

.statistiche-di-cui li + li {
    margin-top: .15rem;
}

.statistiche-di-cui strong {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    color: var(--sci-testo);
    font-variant-numeric: tabular-nums;
}

.requisito-barra {
    height: 1.25rem;
    background: #e9eef3;
}

.requisito-percentuale {
    padding: 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Barra quasi vuota: percentuale subito dopo la parte piena (.progress è flex) */
.requisito-percentuale.fuori {
    align-self: center;
    color: var(--sci-testo);
}

/* Larghezza impostata da sito.js (data-percentuale) */
.requisito-barra .progress-bar {
    width: 0;
    background-color: var(--sci-primario);
    transition: width 1s ease-out;
}

.requisito-barra .progress-bar.bg-success {
    background-color: var(--bs-success);
}

@media (prefers-reduced-motion: reduce) {
    .requisito-barra .progress-bar {
        transition: none;
    }
}

.requisito-dettaglio {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: #728394;
    font-variant-numeric: tabular-nums;
}

/* Nessuno scorrimento dentro la cornice: la pagina scorre con la barra
   del browser. Gli angoli arrotondati della card tagliano la tabella. */
.card-piloti {
    overflow: hidden;
}

.tabella-piloti {
    --bs-table-hover-bg: rgba(5, 99, 187, .05);
    font-size: 1.0625rem;
}

.tabella-piloti > :not(caption) > * > * {
    padding: 1rem .75rem;
}

.tabella-piloti thead th {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #728394;
    background: #f7f8f9;
    white-space: nowrap;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.tabella-piloti th:first-child,
.tabella-piloti td:first-child {
    padding-left: 1.25rem;
}

.tabella-piloti th:last-child,
.tabella-piloti td:last-child {
    padding-right: 1.25rem;
}

.tabella-piloti .callsign {
    color: var(--sci-primario);
}

.tabella-piloti .nome-pilota {
    font-weight: 600;
}

.tabella-piloti .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tabella-piloti a {
    text-decoration: none;
}

.tabella-piloti a:hover,
.tabella-piloti a:focus-visible {
    text-decoration: underline;
}

/* Rank (nastrino SVG 3:1) e rating alti come una riga di testo e mezza */
.tabella-piloti img.rank {
    display: block;
    height: 28px;
    width: auto;
    border-radius: 3px;
}

/* Rank principale + rank staff affiancati, stessa altezza */
.tabella-piloti .gruppo-rank {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .375rem;
    vertical-align: middle;
}

.tabella-piloti .gruppo-rating {
    display: inline-flex;
    gap: .375rem;
    vertical-align: middle;
}

.tabella-piloti img.rating {
    display: block;
    height: 28px;
    width: 28px;
}

/* Nome del pilota: link al profilo con il colore del testo */
.tabella-piloti .link-profilo {
    color: inherit;
}

/* Sotto xl le otto colonne non stanno in larghezza: ogni pilota diventa
   una scheda con etichetta e valore, senza scorrimento orizzontale */
@media (max-width: 1199.98px) {
    .tabella-piloti thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .tabella-piloti,
    .tabella-piloti tbody,
    .tabella-piloti tr,
    .tabella-piloti td {
        display: block;
        width: 100%;
    }

    .tabella-piloti tr {
        padding: .75rem 1.25rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .tabella-piloti tr:last-child {
        border-bottom: 0;
    }

    .tabella-piloti > :not(caption) > * > * {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .4rem 0;
        border-bottom: 0;
        text-align: right;
    }

    .tabella-piloti td:first-child,
    .tabella-piloti td:last-child {
        padding-left: 0;
        padding-right: 0;
    }

    .tabella-piloti td::before {
        content: attr(data-label);
        font-size: .8125rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #728394;
        text-align: left;
    }
}

/* ------------------------------------------------------------
   Flight log (flightlog.php). La tabella usa gli stili di
   .tabella-piloti, comprese le schede sotto xl.
   ------------------------------------------------------------ */

/* Bottoni delle viste a pillola come le voci della navbar; quello
   attivo è pieno (btn-primary), gli altri solo bordati */
.filtri-voli [data-vista] {
    border-radius: 50px;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    letter-spacing: .05em;
}

/* Su telefono i tre bottoni stanno su una riga */
@media (max-width: 575.98px) {
    .filtri-voli [data-vista] {
        --bs-btn-padding-x: .7rem;
        --bs-btn-font-size: .875rem;
    }
}

@media (min-width: 576px) {
    .filtri-voli [data-vista] {
        min-width: 8.5rem;
    }
}

.filtri-voli [data-vista][aria-pressed="true"] {
    box-shadow: 0 .25rem .75rem rgba(5, 99, 187, .3);
}

/* Avviso provvisorio sul periodo senza voli: rosa/rosso del template
   (card "item-pink", #e80368) su fondo tenue, icona a sinistra */
.avviso-voli {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1.25rem;
    border-left: 3px solid #e80368;
    border-radius: 5px;
    background: rgba(232, 3, 104, .07);
    color: #8f0a45;
    font-size: .9375rem;
}

.avviso-voli .bi {
    flex-shrink: 0;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #e80368;
}

/* Cambio di vista: sito.js aggiunge .in-uscita, sostituisce le righe e la
   toglie (durata uguale a durataTransizione in sito.js) */
.voli-vista {
    transition: opacity .18s ease, transform .18s ease;
}

.voli-vista.in-uscita {
    opacity: 0;
    transform: translateY(.5rem);
}

@media (prefers-reduced-motion: reduce) {
    .voli-vista {
        transition: none;
    }
}

.tabella-voli .icao {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.tabella-voli .rotta {
    white-space: nowrap;
}

.tabella-voli .rotta .bi {
    margin: 0 .4rem;
    color: #728394;
}

.tabella-voli .rete {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 50px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.tabella-voli .rete-ivao {
    color: var(--sci-primario-scuro);
    background: rgba(5, 99, 187, .1);
}

.tabella-voli .rete-vatsim {
    color: #1b6e46;
    background: rgba(41, 180, 115, .15);
}

.tabella-voli .data-volo,
.tabella-voli .orario {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Fine sessione il giorno dopo l'inizio: "+1" in apice */
.tabella-voli .giorni-dopo {
    margin-left: .15rem;
    font-size: .75em;
    font-weight: 700;
    vertical-align: super;
    color: var(--sci-primario);
    cursor: help;
}

/* Cella Route: icona della route ed eventuale triangolo di attenzione
   affiancati e centrati */
.cella-route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

/* Remark IVAOVA/SCI assente: triangolo giallo del template (card
   "item-yellow", #ffbb2c) su cerchio tenue, stessa misura dell'icona route */
.avviso-remark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 187, 44, .2);
    color: #e09b00;
    font-size: .95rem;
    line-height: 1;
    cursor: help;
}

/* Icona della route: apre il popover .popover-route (sito.js) */
.btn-route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(5, 99, 187, .08);
    color: var(--sci-primario);
    font-size: 1rem;
    line-height: 1;
    cursor: help;
    transition: background-color .3s, color .3s;
}

.btn-route:hover,
.btn-route:focus-visible,
.btn-route[aria-describedby] {
    background: var(--sci-primario);
    color: #fff;
}

.btn-route:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(5, 99, 187, .25);
}

/* Popover della route come le card del template: bianco, ombra morbida,
   titolo Raleway con la linea blu, rotta in monospace. Entra con
   dissolvenza e un breve scorrimento verso l'alto (la trasformazione è
   sui figli: quella del popover la usa Popper per posizionarlo) */
.popover-route {
    --bs-popover-max-width: 24rem;
    --bs-popover-border-width: 0;
    --bs-popover-border-radius: 5px;
    --bs-popover-box-shadow: 0 0 35px 0 rgba(0, 0, 0, .12);
    --bs-popover-header-bg: #fff;
    --bs-popover-header-color: var(--sci-testo);
    --bs-popover-header-padding-x: 1rem;
    --bs-popover-header-padding-y: .75rem;
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .75rem;
    --bs-popover-body-color: var(--sci-testo);
    box-shadow: var(--bs-popover-box-shadow);
}

.popover-route.fade {
    transition: opacity .25s ease;
}

.popover-route > :not(.popover-arrow) {
    transform: translateY(.4rem);
    transition: transform .25s ease;
}

.popover-route.show > :not(.popover-arrow) {
    transform: none;
}

.popover-route .popover-header {
    position: relative;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: .9375rem;
    border-bottom: 1px solid #eee;
}

.popover-route .popover-header::after {
    content: "";
    position: absolute;
    left: 1rem;
    bottom: -1px;
    width: 40px;
    height: 3px;
    background: var(--sci-primario);
}

.popover-route .popover-body {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .8125rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .popover-route > :not(.popover-arrow) {
        transform: none;
        transition: none;
    }
}

/* Riquadro grigio (come intestazioni delle tabelle e footer) con titolo
   maiuscolo centrato: legenda del Flight Log e premessa/regole della home */
.riquadro-legenda {
    padding: 1.5rem;
    background: #f7f8f9;
    border: 1px solid #e3e7ec;
    border-radius: 5px;
    font-size: .875rem;
    line-height: 1.5;
}

.riquadro-legenda .legenda-titolo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #728394;
}

.riquadro-legenda .legenda-titolo .bi {
    color: var(--sci-primario);
}

/* Legenda sotto la tabella: titolo e voci centrati, due colonne da sm */
.legenda-voli {
    margin-top: 1.5rem;
    text-align: center;
}

.legenda-voli dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem 2.5rem;
    max-width: 52rem;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .legenda-voli dl {
        grid-template-columns: 1fr 1fr;
    }
}

/* L'ultima voce, se resta da sola, occupa tutta la riga (centrata) */
@media (min-width: 576px) {
    .legenda-voli dl > div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.legenda-voli dt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: .25rem;
    font-weight: 700;
    color: var(--sci-testo);
}

.legenda-voli dt .bi {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #fff;
    color: var(--sci-primario);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .06);
}

.legenda-voli dt .legenda-avviso {
    background: rgba(255, 187, 44, .2);
    color: #e09b00;
    box-shadow: none;
}

.legenda-voli dd {
    margin: 0;
    color: #5d6975;
}

.legenda-voli .regole-elenco {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem .9rem;
    margin-top: .4rem;
}

.legenda-voli .voce-regola {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* Lettere un po' più piccole che in tabella (colori e forma dalle regole
   .tabella-voli .regole più sotto) */
.legenda-voli .tabella-voli .regole {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .8125rem;
}

.legenda-voli .esempio {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-weight: 700;
    color: var(--sci-testo);
}

/* Lettera delle regole di volo (I, V, Y, Z) */
.tabella-voli .regole {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-weight: 700;
    font-size: .875rem;
    color: var(--sci-testo);
    background: #f0f2f4;
    cursor: help;
}

.tabella-voli .regole-i {
    color: var(--sci-primario-scuro);
    background: rgba(5, 99, 187, .1);
}

.tabella-voli .regole-v {
    color: #1b6e46;
    background: rgba(41, 180, 115, .15);
}

.tabella-voli .regole-y,
.tabella-voli .regole-z {
    color: #8a5a00;
    background: rgba(255, 187, 44, .2);
}

/* Paginazione dei voli: pillole come i bottoni delle viste */
.pagination-voli {
    --bs-pagination-color: var(--sci-primario);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--sci-primario-chiaro);
    --bs-pagination-hover-border-color: var(--sci-primario-chiaro);
    --bs-pagination-focus-color: var(--sci-primario);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(5, 99, 187, .25);
    --bs-pagination-active-bg: var(--sci-primario);
    --bs-pagination-active-border-color: var(--sci-primario);
    --bs-pagination-disabled-color: #9aa5b1;
    gap: .375rem;
}

.pagination-voli .page-link {
    min-width: 2.5rem;
    text-align: center;
    border-radius: 50px !important;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: color .3s, background-color .3s, border-color .3s;
}

.pagination-voli .page-item:not(:first-child) .page-link {
    margin-left: 0;
}

.pagination-voli .page-item.disabled .page-link {
    border-color: transparent;
    background: transparent;
}

/* BY MONTHS: mesi senza voli attenuati */
.tabella-voli .riga-vuota > * {
    color: #9aa5b1;
}

/* Campo trappola anti-spam: fuori dallo schermo, non usare display:none
   (alcuni bot saltano i campi nascosti in quel modo) */
.campo-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------
   Tour (tours.php e tour_dettaglio.php)
   ------------------------------------------------------------ */

/* Griglia dei tour: card bianca con l'ombra della lista piloti e la
   copertina 16:9 in alto; tutta la card è cliccabile (.stretched-link) */
.card-tour {
    border: 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    transition: transform .3s ease, box-shadow .3s ease;
}

.card-tour:hover,
.card-tour:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 .5rem 2rem rgba(5, 99, 187, .2);
}

.card-tour-copertina {
    background: #eef3f9;
}

.card-tour-copertina img {
    object-fit: cover;
    transition: transform .4s ease;
}

.card-tour:hover .card-tour-copertina img {
    transform: scale(1.04);
}

.card-tour-segnaposto {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #b5c6d8;
}

.card-tour-titolo {
    margin: 0;
    font-size: 1.25rem;
}

.card-tour-titolo a {
    color: var(--sci-testo);
    text-decoration: none;
}

.card-tour:hover .card-tour-titolo a,
.card-tour-titolo a:focus-visible {
    color: var(--sci-primario);
}

/* Leg, distanza e rank richiesto del tour: etichette come le intestazioni
   della tabella piloti, su fondo grigio in fondo alla card. La colonna del
   rank è più larga per il nastrino */
.card-tour-dati {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    margin: auto 0 0;
    background: #f7f8f9;
    border-top: 1px solid var(--bs-border-color);
}

/* Altezza fissa: la striscia è uguale in tutte le card, con o senza
   nastrino, e i valori sono centrati nello spazio sotto l'etichetta */
.card-tour-dati > div {
    display: flex;
    flex-direction: column;
    padding: .65rem .75rem;
    text-align: center;
}

.card-tour-dati > div + div {
    border-left: 1px solid var(--bs-border-color);
}

.card-tour-dati dt {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #728394;
}

.card-tour-dati dd {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    /* alta quanto il nastrino più grande (105 x 35) */
    min-height: 35px;
    margin: .25rem 0 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Nastrino del rank minimo (3:1): occupa l'85% della colonna, al massimo
   105 x 35 px (1.25 volte quello della lista piloti) */
.card-tour-dati .rank-richiesto {
    display: block;
    width: 85%;
    max-width: 105px;
    height: auto;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .card-tour,
    .card-tour-copertina img {
        transition: none;
    }

    .card-tour:hover,
    .card-tour:focus-within,
    .card-tour:hover .card-tour-copertina img {
        transform: none;
    }
}

.link-tour-indietro {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: .9375rem;
    text-decoration: none;
}

.copertina-tour-dettaglio img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 5px;
}

/* Cinque bottoni: su telefono vanno a capo (stile da .filtri-voli) */
@media (min-width: 576px) {
    .filtri-schede [data-vista] {
        min-width: 7.5rem;
    }
}

/* Contenuto delle schede in una colonna centrata sotto la copertina.
   Status fa eccezione: la tabella è larga quanto le leg e si centra da
   sola (.card-status) */
.scheda-tour:not(#scheda-status) {
    max-width: 52rem;
    margin-inline: auto;
}

.filtri-lingua {
    text-align: center;
}

.filtri-lingua .btn {
    min-width: 3.75rem;
    border-radius: 50px;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    letter-spacing: .05em;
}

/* Cambio di lingua: stessa dissolvenza dei cambi di scheda */
.scheda-tour {
    transition: opacity .18s ease, transform .18s ease;
}

.scheda-tour.in-uscita {
    opacity: 0;
    transform: translateY(.5rem);
}

@media (prefers-reduced-motion: reduce) {
    .scheda-tour {
        transition: none;
    }
}

.testo-tour {
    line-height: 1.7;
}

/* Rules: regolamento in una tabella grigia numerata. Stesso carattere
   del testo di Information (Open Sans) ma più scuro e un po' spaziato
   per un tono più formale; intestazione maiuscola spaziata e
   bordo scuro a sinistra */
/* Grigi semitrasparenti (colore del testo, #45505b, a bassa opacità):
   la tabella resta leggera e lascia trasparire lo sfondo della pagina */
.regolamento {
    overflow: hidden;
    border: 1px solid rgba(69, 80, 91, .07);
    border-left: 3px solid rgba(69, 80, 91, .2);
    border-radius: 5px;
}

.tabella-regole {
    --bs-table-bg: rgba(69, 80, 91, .015);
    --bs-table-color: #262d33;
    --bs-table-border-color: rgba(69, 80, 91, .06);
    font-size: 1rem;
    letter-spacing: .01em;
    line-height: 1.65;
}

.tabella-regole thead th {
    --bs-table-bg: rgba(69, 80, 91, .04);
    padding: .85rem 1.25rem;
    font-family: "Raleway", sans-serif;
    font-size: .8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #45505b;
}

.tabella-regole thead .bi {
    margin-right: .35rem;
    font-size: 1rem;
    vertical-align: -.1em;
}

.tabella-regole tbody > tr > * {
    padding: .9rem 1.25rem;
    vertical-align: top;
}

.tabella-regole tbody tr:last-child > * {
    border-bottom: 0;
}

.tabella-regole .regola-numero {
    width: 3.5rem;
    padding-right: 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #45505b;
    text-align: right;
}

.tabella-regole .regola-numero::after {
    content: ".";
}

/* Riquadri delle schede Legs (numero della leg in un cerchio blu a
   sinistra) e Information (solo la descrizione): card bianca con ombra
   leggera */
.riquadro-tour {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
}

.riquadro-tour-icona {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--sci-primario);
    color: #fff;
    font-family: "Raleway", sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
}

.riquadro-tour-corpo {
    min-width: 0;
}

.riquadro-tour-titolo {
    margin: .3rem 0 .5rem;
    font-size: 1.25rem;
}

.titolo-scheda {
    font-size: 1.125rem;
}

/* Award di fine tour: riquadro con bordo blu come .statistica */
.award-tour {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--sci-primario);
    border-radius: 5px;
    background: rgba(5, 99, 187, .05);
}

.award-tour strong {
    display: block;
    font-family: "Raleway", sans-serif;
    font-size: 1.125rem;
}

.award-tour-etichetta {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #728394;
}

.award-tour-icona {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.award-tour-segnaposto {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    font-size: 1.75rem;
    color: var(--sci-primario);
}

.risorse-tour {
    padding-left: 0;
    list-style: none;
}

.risorse-tour li {
    margin-bottom: .375rem;
}

.risorse-tour .bi {
    margin-right: .375rem;
    color: #728394;
}

/* Legs: un .riquadro-tour per leg, con rotta e dati */
.elenco-leg {
    display: grid;
    gap: 1rem;
    padding-left: 0;
    list-style: none;
}

.leg-tour-titolo .icao {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.leg-tour-titolo .bi {
    margin: 0 .4rem;
    font-size: 1rem;
    color: #728394;
}

.leg-tour-dati {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    font-size: .9375rem;
}

.leg-tour-dati .bi {
    color: var(--sci-primario);
}

.leg-tour-info {
    margin-top: .75rem;
    font-size: .9375rem;
}

/* Status: nessuno scorrimento dentro la cornice. La card è larga quanto
   la tabella e centrata; con molte leg supera il contenitore e la pagina
   scorre con la barra del browser. Gli angoli arrotondati tagliano la
   tabella (overflow sulla card, che però non è mai più stretta di lei) */
.card-status {
    width: max-content;
    min-width: min(100%, 24rem);
    margin-inline: auto;
    overflow: hidden;
}

.tabella-status {
    width: 100%;
}

.tabella-status > :not(caption) > * > * {
    padding: .75rem 1.25rem;
}

.tabella-status td {
    min-width: 5.5rem;
}

.tabella-status thead th {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #728394;
    background: #f7f8f9;
    white-space: nowrap;
}

.tabella-status tbody th,
.tabella-status thead th:first-child {
    min-width: 11rem;
    box-shadow: inset -1px 0 0 var(--bs-border-color);
}

.tabella-status .callsign {
    color: var(--sci-primario);
}

/* Marcatore dello stato: cerchio colorato con icona */
.stato-leg {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

.stato-approvato {
    background: rgba(41, 180, 115, .15);
    color: #1b6e46;
}

.stato-revisione {
    background: rgba(255, 187, 44, .2);
    color: #8a5a00;
}

.stato-rifiutato {
    background: rgba(232, 3, 104, .1);
    color: #b0024f;
}

.stato-nessuno {
    background: #f1f3f5;
    color: #9aa5b1;
}

/* Commento dello staff: pallino blu in alto a destra, tooltip al passaggio */
.stato-leg.con-commento {
    cursor: help;
}

.stato-leg.con-commento::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: .6rem;
    height: .6rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--sci-primario);
}

.stato-leg.con-commento:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(5, 99, 187, .25);
}

/* Legenda centrata sotto la tabella */
.legenda-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.5rem;
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto 0;
    padding: 1rem 1.25rem;
    border-radius: 5px;
    background: #f7f8f9;
    list-style: none;
    font-size: .875rem;
}

.legenda-status li {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.legenda-status .stato-leg {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .75rem;
}

.tooltip-status {
    --bs-tooltip-max-width: 18rem;
    --bs-tooltip-bg: var(--sci-testo);
    --bs-tooltip-font-size: .8125rem;
}

/* ------------------------------------------------------------
   Profilo pilota (pilota.php): due colonne alla TrendyAdmin, con
   card, ombre e colori del sito
   ------------------------------------------------------------ */
.profilo-card {
    border: 0;
    border-radius: 5px;
    box-shadow: 0 0 29px 0 rgba(68, 88, 144, .12);
}

.profilo-card > .card-body {
    padding: 1.5rem;
}

/* Colonna sinistra: avatar, callsign e nome centrati, dati sotto */
.profilo-identita {
    text-align: center;
}

.profilo-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: .5rem auto 1rem;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #eef3f9;
    box-shadow: 0 0 0 3px var(--sci-primario);
    color: #b5c6d8;
    font-size: 4.5rem;
    line-height: 1;
    overflow: hidden;
}

/* Avatar caricato dall'admin: riempie il cerchio */
.profilo-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profilo-callsign {
    margin: 0;
    font-size: 1.5rem;
    color: var(--sci-primario);
}

.profilo-nome {
    margin: .15rem 0 0;
    font-family: "Raleway", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sci-testo);
}

/* Pilota onorario: giallo del template (#ffbb2c) come le leg "in revisione" */
.etichetta-onorario {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .6rem;
    padding: .25rem .75rem;
    border-radius: 50px;
    background: rgba(255, 187, 44, .2);
    color: #8a5a00;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.profilo-dati {
    margin: 1.5rem 0 0;
    text-align: left;
}

.profilo-dati > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-top: 1px solid #eee;
}

.profilo-dati dt {
    font-weight: 600;
    color: #728394;
}

.profilo-dati dt .bi {
    margin-right: .35rem;
    color: var(--sci-primario);
}

/* Il simbolo è più largo di un glifo (1.4em): stesso spazio dal testo,
   colore fisso per il brand kit IVAO */
.profilo-dati dt .icona-ivao {
    margin-right: .2rem;
    margin-left: -.2em;
    color: var(--ivao-blu);
}

/* Icona VATSIM (iconaVatsim()): stesso ingombro del simbolo IVAO */
.icona-vatsim {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -.3em;
}

.profilo-dati dt .icona-vatsim {
    margin-right: .2rem;
    margin-left: -.2em;
}

.profilo-dati dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.profilo-dati a {
    text-decoration: none;
}

.profilo-dati a:hover,
.profilo-dati a:focus-visible {
    text-decoration: underline;
}

/* Colonna destra: sezioni separate da una riga */
.profilo-sezione + .profilo-sezione {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

.profilo-sezione-titolo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.profilo-sezione-titolo .bi {
    color: var(--sci-primario);
}

.profilo-qualifica {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .4rem;
    font-weight: 600;
}

.profilo-qualifica img.rank {
    display: block;
    height: 28px;
    width: auto;
    border-radius: 3px;
}

/* Rank principale + rank staff affiancati, stessa altezza */
.profilo-qualifica .gruppo-rank {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.profilo-qualifica .gruppo-rating {
    display: inline-flex;
    gap: .375rem;
}

.profilo-qualifica img.rating {
    display: block;
    height: 28px;
    width: 28px;
}

/* Nessun award nella sezione: testo neutro */
.profilo-vuoto {
    margin: 0;
    font-style: italic;
    color: #728394;
}

/* Award: riquadri con icona e nome, due colonne da md */
.elenco-award-profilo {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .elenco-award-profilo {
        grid-template-columns: 1fr 1fr;
    }
}

.elenco-award-profilo li {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--sci-primario);
    border-radius: 5px;
    background: rgba(5, 99, 187, .05);
}

.elenco-award-profilo strong {
    font-family: "Raleway", sans-serif;
}

.award-profilo-icona {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.award-profilo-segnaposto {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    font-size: 1.4rem;
    color: var(--sci-primario);
}

/* Award del profilo: l'immagine è protagonista, nome sotto. Due colonne
   su telefono, tre da md. Ogni riquadro è un pulsante che apre il popup
   (modal Bootstrap) con l'award più grande e la data di assegnazione */
.elenco-award-grande {
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

@media (min-width: 768px) {
    .elenco-award-grande {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Riconoscimenti nella colonna sinistra (stretta): sempre due colonne */
.profilo-riconoscimenti .elenco-award-grande {
    grid-template-columns: 1fr 1fr;
}

.elenco-award-grande li {
    display: block;
    padding: 0;
    border-left: 0;
    border-top: 3px solid var(--sci-primario);
}

.award-apri {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    width: 100%;
    height: 100%;
    padding: .6rem .75rem;
    border: 0;
    border-radius: 0 0 5px 5px;
    background: transparent;
    color: inherit;
    text-align: center;
    cursor: zoom-in;
    transition: background-color .15s ease;
}

.award-apri:hover,
.award-apri:focus-visible {
    background: rgba(5, 99, 187, .08);
}

.award-apri:focus-visible {
    outline: 2px solid var(--sci-primario);
    outline-offset: -2px;
}

/* Dimensioni reali dell'immagine entro i limiti, in proporzione */
.elenco-award-grande .award-profilo-icona {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70px;
}

.elenco-award-grande .award-profilo-segnaposto {
    width: 64px;
    height: 64px;
    font-size: 2rem;
}

.elenco-award-grande strong {
    font-size: .85rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Popup dell'award: immagine un po' più grande che nel riquadro */
.award-popup .modal-title {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
}

/* Ingrandita anche se il file è piccolo, in proporzione; mai più alta
   del 60% dello schermo */
.award-popup .award-popup-icona {
    display: block;
    width: min(100%, 360px);
    height: auto;
    max-height: 60vh;
    margin: 0 auto;
    object-fit: contain;
}

.award-popup .award-popup-icona.award-profilo-segnaposto {
    display: flex;
    width: 160px;
    height: 160px;
    font-size: 5rem;
    background: rgba(5, 99, 187, .05);
}

.award-popup-descrizione {
    margin: 1rem 0 0;
    font-size: .9rem;
}

.award-popup-data {
    margin: .75rem 0 0;
    font-size: .75rem;
    color: #8a97a6;
}


/* ------------------------------------------------------------
   Il corso (basics.php): testata, percorso dei moduli, timeline
   delle sessioni. Un modulo visibile alla volta (sito.js).
   ------------------------------------------------------------ */
.corso-testata {
    background: linear-gradient(135deg, #eef4fc 0%, #fff 60%);
    border-bottom: 1px solid #e3eaf3;
    padding: 56px 0 36px;
}

.corso-occhiello {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 99px;
    background: rgba(5, 99, 187, .08);
    color: var(--sci-primario);
    font: 600 .8rem "Raleway", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.corso-testata h1 {
    margin: 1rem 0 .75rem;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
}

.corso-intro {
    max-width: 720px;
    margin: 0;
    font-size: 1.05rem;
}

.corso-numeri {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 720px;
    margin: 32px 0 0;
}

.corso-numeri > div {
    padding: 14px 16px;
    border: 1px solid #e3eaf3;
    border-radius: 12px;
    background: #fff;
}

.corso-numeri dt {
    color: var(--sci-primario);
    font: 800 1.6rem/1.1 "Raleway", sans-serif;
}

.corso-numeri dd {
    margin: 0;
    font-size: .85rem;
}

/* Percorso: resta sotto la navbar mentre si scorre */
.corso-percorso {
    position: sticky;
    top: 72px; /* --altezza-navbar */
    z-index: 1020;
    border-bottom: 1px solid #e3eaf3;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    scroll-margin-top: 72px;
}

.corso-percorso ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
}

.corso-percorso a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.corso-percorso a:hover {
    background: #f5f8fd;
}

.corso-percorso a[aria-current] {
    border-color: var(--sci-primario);
    background: #fff;
    box-shadow: 0 6px 20px rgba(5, 99, 187, .12);
}

.corso-passo-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid #e3eaf3;
    border-radius: 50%;
    background: #f5f8fd;
    color: var(--sci-primario);
    font: 700 .95rem "Raleway", sans-serif;
}

.corso-percorso a[aria-current] .corso-passo-num {
    border-color: var(--sci-primario);
    background: var(--sci-primario);
    color: #fff;
}

.corso-passo-testo small {
    display: block;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75;
}

.corso-passo-testo b {
    font-family: "Raleway", sans-serif;
    font-size: .98rem;
    color: var(--sci-testo);
}

/* Modulo: scheda riassuntiva a sinistra, timeline a destra */
.corso-modulo {
    padding: 48px 0 56px;
    scroll-margin-top: 110px; /* navbar + percorso, meno il padding */
}

.corso-modulo[hidden] {
    display: none;
}

.corso-modulo-griglia {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: start;
}

.corso-scheda {
    position: sticky;
    top: 170px; /* navbar + percorso */
    padding: 28px;
    border-radius: 16px;
    background: #f5f8fd;
}

.corso-etichetta {
    color: var(--sci-primario);
    font: 700 .8rem "Raleway", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.corso-scheda h2 {
    margin: .35rem 0 .75rem;
    font-size: 1.6rem;
    font-weight: 800;
}

.corso-scheda p {
    margin-bottom: 1.25rem;
    font-size: .95rem;
}

.corso-chip-riga {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.corso-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border: 1px solid #e3eaf3;
    border-radius: 99px;
    background: #fff;
    font-size: .8rem;
    font-weight: 600;
}

/* Colori dei tre tipi di tappa */
.corso-chip.teoria   { color: var(--sci-primario); }
.corso-chip.pratica  { color: #b85a17; }
.corso-chip.check    { color: #1a9c5b; }

.corso-legenda {
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid #e3eaf3;
    list-style: none;
    font-size: .85rem;
}

.corso-legenda li {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.corso-pallino {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.corso-pallino.teoria  { background: var(--sci-primario); }
.corso-pallino.pratica { background: #ff8a3d; }
.corso-pallino.check   { background: #1a9c5b; }

/* Timeline delle sessioni */
.corso-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.corso-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 19px;
    width: 2px;
    background: #e3eaf3;
}

.corso-tappa {
    position: relative;
    margin-bottom: 18px;
    padding-left: 60px;
}

.corso-tappa-icona {
    position: absolute;
    top: 14px;
    left: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--sci-primario);
    border-radius: 50%;
    background: #fff;
    color: var(--sci-primario);
    font-size: 1.05rem;
}

.corso-tappa-card {
    padding: 18px 22px;
    border: 1px solid #e3eaf3;
    border-radius: 14px;
    background: #fff;
    transition: box-shadow .2s, transform .2s;
}

.corso-tappa-card:hover {
    box-shadow: 0 10px 30px rgba(31, 42, 54, .08);
    transform: translateY(-2px);
}

.corso-tappa-testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.corso-tappa-testa h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.corso-tipo {
    color: var(--sci-primario);
    font: 700 .72rem "Raleway", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.corso-argomenti {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.corso-argomenti li {
    position: relative;
    padding-left: 18px;
    font-size: .93rem;
}

.corso-argomenti li::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--sci-primario);
    opacity: .5;
}

.corso-tappa.pratica .corso-tappa-icona       { border-color: #ff8a3d; color: #ff8a3d; }
.corso-tappa.pratica .corso-tappa-card        { border-color: #ffdcc2; background: #fff3ea; }
.corso-tappa.pratica .corso-tipo              { color: #b85a17; }
.corso-tappa.pratica .corso-argomenti li::before { background: #ff8a3d; }

.corso-tappa.check .corso-tappa-icona         { border-color: #1a9c5b; background: #1a9c5b; color: #fff; }
.corso-tappa.check .corso-tappa-card          { border-color: #c4ead6; background: #e8f7ef; }
.corso-tappa.check .corso-tipo                { color: #1a9c5b; }
.corso-tappa.check .corso-argomenti li::before { border-radius: 50%; background: #1a9c5b; }

.corso-avanti {
    margin-top: 28px;
    padding-left: 60px;
}

/* Numero della sessione nel cerchio (tappe senza icona) */
.corso-tappa-icona.numero {
    font: 700 .9rem "Raleway", sans-serif;
}

/* Tappa con paragrafo al posto dell'elenco (gradi del ranking) */
.corso-tappa-testo {
    margin: 0;
    font-size: .95rem;
}

.corso-tappa-testa h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

/* Badge del rating e rank richiesto (ratings.php) */
.corso-scheda-immagine {
    margin-bottom: 1rem;
    text-align: center;
}

.corso-scheda-immagine .badge-rating {
    height: 130px;
}

.corso-scheda .corso-requisito {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    border: 1px solid #e3eaf3;
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
}

.corso-requisito > span {
    color: var(--sci-primario);
    font: 700 .72rem "Raleway", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Pagina con un solo modulo: niente percorso sotto la navbar */
.corso-modulo.senza-percorso .corso-scheda {
    top: 96px;
}

/* Avvertenza sotto la timeline (ranking.php) */
.corso-nota {
    display: flex;
    gap: .75rem;
    margin-top: 28px;
    margin-left: 60px;
    padding: 16px 20px;
    border-left: 3px solid var(--sci-primario);
    border-radius: 0 10px 10px 0;
    background: #f5f8fd;
    font-size: .93rem;
}

.corso-nota .bi {
    flex: none;
    color: var(--sci-primario);
    font-size: 1.1rem;
}

.corso-nota p {
    margin: 0;
}

@media (max-width: 991.98px) {
    .corso-modulo-griglia {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .corso-scheda {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .corso-numeri {
        grid-template-columns: repeat(2, 1fr);
    }

    .corso-percorso a {
        flex-direction: column;
        gap: 4px;
        padding: 8px 4px;
        text-align: center;
    }

    .corso-passo-testo small {
        display: none;
    }

    .corso-passo-testo b {
        font-size: .8rem;
    }

    .corso-argomenti {
        grid-template-columns: 1fr;
    }

    .corso-tappa,
    .corso-avanti {
        padding-left: 52px;
    }

    .corso-nota {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .corso-tappa-card:hover {
        transform: none;
    }
}