/* =========================================================
   VARIABLES GENERALES
   ========================================================= */

:root {
    --club-orange: #c9783b;
    --club-orange-dark: #a85f2d;
    --club-orange-light: #f7eee8;

    --club-text: #2b2b2b;
    --club-text-muted: #666666;

    --club-content-width: 1200px;
}


/* =========================================================
   CABECERA Y BANNER
   ========================================================= */

.container-header {
    color: var(--club-text);
    background: #ffffff;
    background-image: none;
}

/* Zona de la marca */
.container-header .navbar-brand {
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
}

/* El enlace del logotipo ocupa todo el ancho */
.container-header .navbar-brand .brand-logo {
    display: block;
    width: 100%;
}

/* Banner responsive */
.container-header .navbar-brand img {
    display: block;
    width: 100%;
    max-width: 1006px;
    height: auto;
    margin-inline: auto;
}

/* Oculta el texto adicional de Cassiopeia */
.container-header .site-description {
    display: none;
}


/* =========================================================
   CONTENEDOR PRINCIPAL DEL MENÚ
   ========================================================= */

.container-header .container-nav {
    width: 100%;
    max-width: none;

    padding-block: 0.25rem;
    padding-inline: max(
        1rem,
        calc((100% - var(--club-content-width)) / 2)
    );

    background-color: var(--club-orange);
    box-shadow: 0 2px 5px rgb(0 0 0 / 12%);
}

.container-header .container-nav > .navbar {
    width: 100%;
    padding: 0;
}


/* =========================================================
   MENÚ DE ESCRITORIO
   ========================================================= */

@media (min-width: 992px) {

    .container-header .navbar-collapse {
        justify-content: center;
    }

    .container-header .mod-menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;

        width: 100%;
        margin: 0;
        padding: 0.25rem 0;
    }

    .container-header .mod-menu > .nav-item {
        position: relative;
    }

    /* Enlaces principales */
    .container-header .mod-menu > .nav-item > a,
    .container-header .mod-menu > .nav-item > span {
        display: flex;
        align-items: center;

        min-height: 2.75rem;
        padding: 0.65rem 0.85rem;

        color: #ffffff;
        font-size: 0.98rem;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;

        border-bottom: 3px solid transparent;

        transition:
            background-color 160ms ease,
            border-color 160ms ease;
    }

    /* Hover sencillo */
    .container-header .mod-menu > .nav-item > a:hover,
    .container-header .mod-menu > .nav-item > span:hover {
        color: #ffffff;
        background-color: rgb(255 255 255 / 10%);
        border-bottom-color: rgb(255 255 255 / 70%);
    }

    /* Página activa */
    .container-header .mod-menu > .nav-item.current > a,
    .container-header .mod-menu > .nav-item.current > span,
    .container-header .mod-menu > .nav-item.active > a,
    .container-header .mod-menu > .nav-item.active > span,
    .container-header .mod-menu > .nav-item.alias-parent-active > a {
        color: #ffffff;
        background-color: rgb(0 0 0 / 8%);
        border-bottom-color: #ffffff;
    }

    /* Botón para desplegar submenús */
    .container-header .mod-menu__toggle-sub {
        color: #ffffff;
        background: transparent;
        border: 0;
    }

    /* Submenú */
    .container-header .mod-menu__sub {
        min-width: 14rem;
        padding: 0.35rem;

        background-color: #ffffff;
        border: 1px solid rgb(0 0 0 / 12%);
        border-radius: 0.4rem;

        box-shadow: 0 6px 16px rgb(0 0 0 / 16%);
    }

    .container-header .mod-menu__sub a,
    .container-header .mod-menu__sub span {
        display: block;
        padding: 0.6rem 0.75rem;

        color: var(--club-text);
        font-size: 0.95rem;
        font-weight: 500;
        text-decoration: none;

        border-radius: 0.25rem;
    }

    .container-header .mod-menu__sub a:hover {
        color: var(--club-orange-dark);
        background-color: var(--club-orange-light);
    }

    .container-header .mod-menu__sub .current > a,
    .container-header .mod-menu__sub .active > a {
        color: #ffffff;
        background-color: var(--club-orange);
    }
}


/* =========================================================
   MENÚ MÓVIL Y TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .container-header .container-nav {
        padding: 0.5rem 1rem;
    }

    .container-header .navbar {
        width: 100%;
        flex-wrap: wrap;
    }

    /* Botón hamburguesa */
    .container-header .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 2.75rem;
        height: 2.75rem;
        margin-inline-start: auto;
        padding: 0;

        color: #ffffff;
        font-size: 1.25rem;

        background-color: transparent;
        border: 1px solid rgb(255 255 255 / 65%);
        border-radius: 0.35rem;

        box-shadow: none;
    }

    .container-header .navbar-toggler:hover,
    .container-header .navbar-toggler:focus {
        color: #ffffff;
        background-color: rgb(255 255 255 / 10%);
        border-color: #ffffff;
    }

    .container-header .navbar-toggler[aria-expanded="true"] {
        background-color: rgb(0 0 0 / 8%);
    }

    .container-header .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
    }

    .container-header .navbar-collapse.show,
    .container-header .navbar-collapse.collapsing {
        margin-top: 0.5rem;
    }

    /* Lista principal */
    .container-header .mod-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        margin: 0;
        padding: 0;

        background-color: transparent;
    }

    .container-header .mod-menu > .nav-item {
        width: 100%;
        border-bottom: 1px solid rgb(255 255 255 / 20%);
    }

    .container-header .mod-menu > .nav-item:last-child {
        border-bottom: 0;
    }

    .container-header .mod-menu > .nav-item > a,
    .container-header .mod-menu > .nav-item > span {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: 3rem;
        padding: 0.75rem 0.85rem;

        color: #ffffff;
        font-weight: 600;
        text-decoration: none;

        border-left: 3px solid transparent;
    }

    .container-header .mod-menu > .nav-item > a:hover,
    .container-header .mod-menu > .nav-item > span:hover {
        color: #ffffff;
        background-color: rgb(255 255 255 / 8%);
    }

    /* Página activa */
    .container-header .mod-menu > .nav-item.current > a,
    .container-header .mod-menu > .nav-item.current > span,
    .container-header .mod-menu > .nav-item.active > a,
    .container-header .mod-menu > .nav-item.active > span,
    .container-header .mod-menu > .nav-item.alias-parent-active > a {
        color: #ffffff;
        background-color: rgb(0 0 0 / 8%);
        border-left-color: #ffffff;
    }

    /* Botón de submenús */
    .container-header .mod-menu__toggle-sub {
        min-width: 2.5rem;
        min-height: 2.5rem;

        color: #ffffff;
        background: transparent;
        border: 0;
    }

    /* Submenús móviles */
    .container-header .mod-menu__sub {
        position: static;

        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 0 0.5rem 1rem;

        background-color: rgb(0 0 0 / 7%);
        border: 0;
        border-left: 2px solid rgb(255 255 255 / 45%);
        border-radius: 0;

        box-shadow: none;
    }

    .container-header .mod-menu__sub a,
    .container-header .mod-menu__sub span {
        display: block;
        padding: 0.65rem 0.75rem;

        color: #ffffff;
        font-size: 0.95rem;
        text-decoration: none;
    }

    .container-header .mod-menu__sub a:hover {
        color: #ffffff;
        background-color: rgb(255 255 255 / 8%);
    }

    .container-header .mod-menu__sub .current > a,
    .container-header .mod-menu__sub .active > a {
        color: #ffffff;
        font-weight: 700;
        background-color: rgb(0 0 0 / 10%);
    }
}


/* =========================================================
   MANTENER EL MENÚ HAMBURGUESA HASTA 992 PX
   Cassiopeia utiliza navbar-expand-md por defecto
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

    .container-header .navbar-expand-md {
        flex-wrap: wrap;
    }

    .container-header .navbar-expand-md .navbar-toggler {
        display: inline-flex;
    }

    .container-header
    .navbar-expand-md
    .navbar-collapse.collapse:not(.show) {
        display: none !important;
    }

    .container-header
    .navbar-expand-md
    .navbar-collapse.show,
    .container-header
    .navbar-expand-md
    .navbar-collapse.collapsing {
        display: block !important;
    }
}


/* =========================================================
   TARJETAS DE INSCRIPCIÓN Y CARTEL
   ========================================================= */

.club-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 330px;
    height: 100%;
    margin-inline: auto;
    padding: 1rem;

    color: var(--club-text);
    text-align: center;
    text-decoration: none;

    background-color: #ffffff;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 0.75rem;

    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.club-action-card:hover {
    color: var(--club-text);
    text-decoration: none;

    border-color: var(--club-orange);
    box-shadow: 0 8px 20px rgb(0 0 0 / 14%);

    transform: translateY(-3px);
}

.club-action-card img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 400px;

    margin-inline: auto;
}

.club-action-card__title {
    display: block;
    margin-top: 1rem;

    color: var(--club-orange-dark);
    font-size: 1.15rem;
    font-weight: 700;
}

.club-action-card__text {
    display: block;
    margin-top: 0.25rem;

    color: var(--club-text-muted);
    font-size: 0.95rem;
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

.container-header a:focus-visible,
.container-header button:focus-visible,
.club-action-card:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.club-action-card:focus-visible {
    outline-color: var(--club-orange);
}


/* Reduce animaciones cuando el usuario lo solicita */
@media (prefers-reduced-motion: reduce) {

    .container-header a,
    .container-header button,
    .club-action-card {
        transition: none;
    }

    .club-action-card:hover {
        transform: none;
    }
}

/* =========================================================
   TOPBAR
   ========================================================= */

.container-topbar {
    width: 100%;
    padding: 0;

    color: var(--club-text, #2b2b2b);
    background-color: #f6f4f2;
    border-bottom: 1px solid rgb(0 0 0 / 9%);
}

.container-topbar > * {
    width: 100%;
}

.club-topbar {
    width: 100%;
    max-width: var(--club-content-width, 1200px);
    min-height: 2.8rem;

    margin-inline: auto;
    padding: 0.4rem 1rem;

    font-size: 0.9rem;
}


/* Contacto */

.club-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    color: #4d4d4d;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;

    transition: color 160ms ease;
}

.club-contact-icon {
    flex: 0 0 auto;

    width: 1rem;
    height: 1rem;

    fill: var(--club-orange, #c9783b);
}

.club-topbar__link:hover {
    color: var(--club-orange-dark, #a85f2d);
    text-decoration: none;
}


/* Redes sociales */

.club-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;

    color: #555555;
    text-decoration: none;

    background-color: #ffffff;
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: 50%;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.club-social-link svg {
    display: block;

    width: 1.15rem;
    height: 1.15rem;

    fill: currentColor;
}

.club-social-link:hover {
    color: #ffffff;
    text-decoration: none;

    background-color: var(--club-orange, #c9783b);
    border-color: var(--club-orange, #c9783b);

    transform: translateY(-1px);
}

.club-topbar a:focus-visible {
    outline: 3px solid var(--club-orange, #c9783b);
    outline-offset: 2px;
}


/* Adaptación móvil */

@media (max-width: 767.98px) {

    .club-topbar {
        padding-block: 0.6rem;
    }

    .club-topbar__contact,
    .club-topbar__social {
        width: 100%;
    }
}

@media (max-width: 575.98px) {

    .club-topbar__contact {
        flex-direction: column;
        gap: 0.45rem !important;
    }

    .club-topbar__link {
        justify-content: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .club-topbar__link,
    .club-social-link {
        transition: none;
    }

    .club-social-link:hover {
        transform: none;
    }
}

/* =========================================================
   TÍTULOS DE LAS TABLAS DE RÉCORDS
   ========================================================= */

.records-title {
    margin: 2.5rem 0 1rem;
    padding-left: 0.9rem;

    color: #713817;
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;

    border-left: 5px solid #c76b32;
}


/* =========================================================
   CONTENEDOR RESPONSIVE
   ========================================================= */

.tabla-responsive {
    width: 100%;
    margin: 0 0 2.5rem;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    background-color: #ffffff;
    border: 1px solid #e4ddd8;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgb(0 0 0 / 8%);

    scrollbar-width: thin;
    scrollbar-color: #c76b32 #eee8e4;
}

/* Barra de desplazamiento en Chrome, Edge y Safari */

.tabla-responsive::-webkit-scrollbar {
    height: 10px;
}

.tabla-responsive::-webkit-scrollbar-track {
    background-color: #eee8e4;
    border-radius: 10px;
}

.tabla-responsive::-webkit-scrollbar-thumb {
    background-color: #c76b32;
    border: 2px solid #eee8e4;
    border-radius: 10px;
}

.tabla-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #a95424;
}

/* Indicador de foco para navegación con teclado */

.tabla-responsive:focus {
    outline: 3px solid rgb(199 107 50 / 35%);
    outline-offset: 3px;
}


/* =========================================================
   TABLA PRINCIPAL
   ========================================================= */

table.tabla-records {
    width: 100%;
    min-width: 900px;
    margin: 0;

    border: 0;
    border-collapse: separate;
    border-spacing: 0;

    color: #333333;
    font-size: 0.95rem;
    line-height: 1.45;

    background-color: #ffffff;
}

/*
 * Anula las anchuras inline que aparecen actualmente
 * en muchas celdas del HTML.
 */
table.tabla-records th,
table.tabla-records td {
    width: auto !important;
}


/* =========================================================
   CABECERA
   ========================================================= */

table.tabla-records th {
    padding: 0.9rem 0.8rem;

    color: #ffffff;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;

    background-color: #a95424;
    border: 0;
    border-right: 1px solid rgb(255 255 255 / 18%);
    border-bottom: 3px solid #713817;
}

table.tabla-records th:last-child {
    border-right: 0;
}


/* =========================================================
   CELDAS
   ========================================================= */

table.tabla-records td {
    padding: 0.8rem;

    vertical-align: middle;

    background-color: #ffffff;
    border: 0;
    border-right: 1px solid #eee8e4;
    border-bottom: 1px solid #e4ddd8;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

table.tabla-records td:last-child {
    border-right: 0;
}

table.tabla-records tbody tr:last-child td {
    border-bottom: 0;
}


/* Filas alternas */

table.tabla-records tbody tr:nth-child(even) td {
    background-color: #faf6f3;
}


/* Efecto al pasar el ratón */

table.tabla-records tbody tr:hover td {
    background-color: #fff0e6;
}


/* =========================================================
   COLUMNAS DESTACADAS
   ========================================================= */

/* Prueba */

table.tabla-records th:nth-child(1),
table.tabla-records td:nth-child(1) {
    font-weight: 700;
    white-space: nowrap;
}

/* Marca */

table.tabla-records th:nth-child(2),
table.tabla-records td:nth-child(2) {
    text-align: center;
    white-space: nowrap;
}

table.tabla-records td:nth-child(2) {
    color: #8d431e;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Año, categoría y fecha */

table.tabla-records th:nth-child(5),
table.tabla-records td:nth-child(5),
table.tabla-records th:nth-child(6),
table.tabla-records td:nth-child(6),
table.tabla-records th:nth-child(7),
table.tabla-records td:nth-child(7) {
    text-align: center;
    white-space: nowrap;
}

/* Lugar */

table.tabla-records td:nth-child(8) {
    min-width: 140px;
}


/* =========================================================
   PRIMERA COLUMNA FIJA AL DESPLAZARSE
   ========================================================= */

table.tabla-records th:first-child,
table.tabla-records td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;

    box-shadow: 3px 0 5px rgb(0 0 0 / 6%);
}

table.tabla-records th:first-child {
    z-index: 3;
    background-color: #a95424;
}

table.tabla-records tbody tr:nth-child(odd) td:first-child {
    background-color: #ffffff;
}

table.tabla-records tbody tr:nth-child(even) td:first-child {
    background-color: #faf6f3;
}

table.tabla-records tbody tr:hover td:first-child {
    background-color: #fff0e6;
}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 900px) {
    .tabla-responsive {
        border-radius: 8px;
    }

    table.tabla-records {
        min-width: 850px;
        font-size: 0.9rem;
    }

    table.tabla-records th,
    table.tabla-records td {
        padding: 0.7rem;
    }
}


/* =========================================================
   MÓVILES
   ========================================================= */

@media (max-width: 600px) {
    .records-title {
        margin-top: 2rem;
        padding-left: 0.65rem;

        font-size: 1.25rem;
        border-left-width: 4px;
    }

    .tabla-responsive {
        margin-right: -0.5rem;
        margin-left: -0.5rem;
        width: calc(100% + 1rem);

        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: 0 3px 10px rgb(0 0 0 / 7%);
    }

    table.tabla-records {
        min-width: 800px;
        font-size: 0.84rem;
    }

    table.tabla-records th,
    table.tabla-records td {
        padding: 0.65rem 0.6rem;
    }
}