/* =====================================================
   CICLISMO JUNIOR Y CADETE — Design System
   Stylesheet propio (sin dependencia de Bootstrap).
   Implementa el look limpio estilo FirstCycling / PCS
   y da estilo a las clases de utilidad (btn, badge,
   row, col-*, d-flex, table-striped, nav-tabs...) que
   las plantillas ya usaban.
   ===================================================== */

:root {
    --c-bg: #f4f5f7;
    --c-surface: #ffffff;
    --c-border: #e3e6ea;
    --c-text: #1b1f24;
    --c-muted: #6b7280;
    --c-primary: #c8102e;      /* rojo ciclismo */
    --c-primary-dark: #9c0c23;
    --c-accent: #0a3d62;       /* azul profundo */
    --c-dark: #16202b;
    --c-gold: #d4a200;
    --c-silver: #9aa0a6;
    --c-bronze: #b07b46;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
    --shadow-md: 0 4px 16px rgba(16,24,40,.08);
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-primary); text-decoration: none; }

h1, h2, h3, h4, h5 { font-weight: 700; margin: 0 0 .6rem; line-height: 1.25; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }

/* =====================================================
   CABECERA / NAV
   ===================================================== */
.fc-header {
    background: var(--c-dark);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-md);
}
.fc-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 8px 18px;
    min-height: 58px;
}
.fc-logo {
    font-weight: 800;
    letter-spacing: .5px;
    font-size: 1.15rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fc-logo .fc-logo-badge {
    background: var(--c-primary);
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: .95rem;
}
.fc-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}
.fc-nav a {
    color: #cfd6dd;
    font-weight: 600;
    font-size: .9rem;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
}
.fc-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.fc-nav a.active { color: #fff; background: var(--c-primary); }

/* Buscador de la cabecera */
.fc-search { flex: 0 1 260px; }
.fc-search input {
    width: 100%;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: .85rem;
    font-family: var(--font);
    outline: none;
    transition: background .15s, border-color .15s;
}
.fc-search input::placeholder { color: #9aa4ad; }
.fc-search input:focus { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); }

/* Selector de idioma */
.fc-lang select {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .82rem;
    font-family: var(--font);
    cursor: pointer;
    outline: none;
}
.fc-lang select option { color: #1b1f24; background: #fff; }

/* =====================================================
   LAYOUT
   ===================================================== */
.container {
    max-width: 1080px;
    margin: 22px auto;
    padding: 0 18px;
}
section { margin-bottom: 26px; }

.page-title {
    font-size: 1.55rem;
    font-weight: 800;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fc-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}

/* grid utilitaria estilo bootstrap */
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row > [class*="col-"] { padding: 0 12px; }
.col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
@media (max-width: 820px) {
    .col-md-4, .col-md-8, .col-md-6 { flex: 0 0 100%; max-width: 100%; }
}

/* =====================================================
   UTILIDADES (compat. con clases tipo bootstrap)
   ===================================================== */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: .5rem; }
.text-center { text-align: center; }
.text-dark { color: var(--c-text) !important; }
.text-muted { color: var(--c-muted); }
.img-fluid { max-width: 100%; height: auto; }
.rounded { border-radius: var(--radius); }
.shadow-sm { box-shadow: var(--shadow); }
.w-100 { width: 100%; }
.display-4 { font-size: 2rem; font-weight: 800; }

.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.me-3{margin-right:1rem}.ms-2{margin-left:.5rem}

/* =====================================================
   BOTONES (pills modernos)
   ===================================================== */
.btn {
    display: inline-block;
    font-weight: 600;
    font-size: .85rem;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
    transition: all .15s;
    margin: 0 4px 6px 0;
    line-height: 1.2;
}
.btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn-sm { padding: 5px 11px; font-size: .8rem; }

.btn-dark, .btn-primary { background: var(--c-dark); color: #fff; border-color: var(--c-dark); }
.btn-dark:hover, .btn-primary:hover { background: #000; color: #fff; }
.btn-outline-dark { background: #fff; color: var(--c-text); border-color: #cfd4da; }
.btn-outline-dark:hover { background: var(--c-dark); color: #fff; }
.btn-outline-primary { background: #fff; color: var(--c-accent); border-color: var(--c-accent); }
.btn-outline-primary:hover { background: var(--c-accent); color: #fff; }
.btn-outline-secondary { background: #fff; color: var(--c-muted); }
.btn-outline-secondary:hover { background: #eef0f2; color: var(--c-text); }
.btn-outline-danger { background: #fff; color: var(--c-primary); border-color: var(--c-primary); }
.btn-outline-danger:hover { background: var(--c-primary); color: #fff; }
.btn.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* =====================================================
   BADGES
   ===================================================== */
.badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.4;
    color: #fff;
    vertical-align: middle;
}
.bg-dark { background: var(--c-dark); }
.bg-secondary { background: var(--c-muted); }
.bg-primary { background: var(--c-accent); }
.bg-success { background: #1c8a4a; }
.bg-warning { background: #e8a400; }
.bg-warning.text-dark { color: #3a2c00 !important; }
.bg-danger { background: #b3261e; }
.live-badge {
    background: var(--c-primary);
    color: #fff;
    font-weight: 800;
    animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* =====================================================
   TABLAS
   ===================================================== */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-surface);
    font-size: .9rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.table thead th {
    background: #f5f7f8;
    text-align: left;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-muted);
    padding: 7px 11px;
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}
.table tbody td {
    padding: 6px 11px;
    border-bottom: 1px solid #eef0f2;
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table-striped tbody tr:nth-of-type(odd) { background: #fafbfc; }
.table tbody tr:hover { background: #fff5f6; }
.table-bordered, .table-bordered td, .table-bordered th { border: 1px solid var(--c-border); }
.table-light th { background: #f0f2f5; }

.col-pos { width: 42px; text-align: center; font-weight: 700; }
.col-bib { width: 56px; text-align: center; color: var(--c-muted); }
.col-time { width: 90px; text-align: right; }
.col-points { width: 60px; text-align: right; font-weight: 700; }

.fc-pos { font-weight: 700; }
.fc-time, .col-time, .col-dif {
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--c-muted);
    font-size: .82rem;
}
.col-dif { width: 82px; text-align: right; }
.fc-team { color: var(--c-muted); font-size: .85rem; }

/* ===== PODIO =====
   Antes las tres primeras filas iban pintadas de oro/plata/bronce de lado a
   lado: tres bandas de color que se comian la tabla entera. Ahora el color va
   solo en el numero del puesto, que es lo que de verdad hay que distinguir. */
.table tbody tr.row-gold td,
.table tbody tr.row-silver td,
.table tbody tr.row-bronze td { background: transparent; }
.table tbody tr.row-gold .col-pos,
.table tbody tr.row-silver .col-pos,
.table tbody tr.row-bronze .col-pos { font-weight: 800; }
.row-gold .col-pos   { color: #a37d00; }
.row-silver .col-pos { color: #6b7280; }
.row-bronze .col-pos { color: #8c5a2b; }

/* ===== FOTO MINI EN TABLAS (clasificación / startlist / ranking) ===== */
.fc-rider-cell { display: flex; align-items: center; gap: 9px; }
.fc-mini-photo {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    background: #e8eaed;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.fc-photo-placeholder {
    display: inline-block;
    background: #e8eaed url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23aab0b7"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg>') center/60% no-repeat;
}

/* ===== BANDERA DEL PAÍS (antes de la foto) ===== */
.fc-mini-flag {
    width: 22px; height: 15px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.10);
}
.fc-flag-placeholder { background: #eef0f2; display: inline-block; }

/* ===== MAILLOT / ESCUDO DEL EQUIPO (antes del nombre del equipo) ===== */
.fc-team-cell { display: flex; align-items: center; gap: 7px; }
.fc-mini-kit {
    width: 22px; height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
    background: #fff;
}

/* =====================================================
   TABS (controladas por JS propio, sin Bootstrap)
   ===================================================== */
.nav-tabs, .fc-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    border-bottom: 2px solid var(--c-border);
    gap: 4px;
    flex-wrap: wrap;
}
.nav-tabs .nav-item, .fc-tabs .nav-item { margin: 0; }
.nav-link {
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: .9rem;
    color: var(--c-muted);
    padding: 9px 16px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.nav-link:hover { color: var(--c-text); }
.nav-link.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; animation: fadein .2s ease; }
@keyframes fadein { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* =====================================================
   CABECERA DE CARRERA / FICHA DE ETAPA
   ===================================================== */
.race-header {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}
.race-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; }
.race-subtitle { font-size: .85rem; color: var(--c-muted); }
.race-meta { font-size: .85rem; color: var(--c-muted); margin-top: 8px; display:flex; flex-wrap:wrap; gap: 14px; }
.race-meta span strong { color: var(--c-text); }

.stage-card, .stage-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
}
.stage-info { display: flex; flex-wrap: wrap; gap: 18px; }
.stage-profile img, .stage-box img { width: 100%; object-fit: contain; border-radius: var(--radius-sm); }

/* =====================================================
   TARJETA DE CARRERA (home / calendario)
   ===================================================== */
.race-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
    transition: box-shadow .15s, transform .15s;
}
.race-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.race-card-header { display: flex; align-items: center; gap: 8px; }
.race-name { font-weight: 700; color: var(--c-text); font-size: 1rem; }
.race-name:hover { color: var(--c-primary); }
.race-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.race-flag, .fc-flag {
    width: 22px; height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    flex-shrink: 0;
}

/* =====================================================
   FILTROS (calendario / equipos)
   ===================================================== */
.fc-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.fc-filter-row > strong {
    min-width: 92px;
    color: var(--c-muted);
    font-size: .85rem;
}

/* Selector de meses: fila de pills que envuelve limpio (sin descolgar Dic.) */
.fc-month-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-border);
}
.fc-month {
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-muted);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all .15s;
}
.fc-month:hover { color: var(--c-text); background: #eef0f2; }
.fc-month.active { color: #fff; background: var(--c-primary); border-color: var(--c-primary); }

/* =====================================================
   CALENDARIO
   ===================================================== */
.fc-date-header {
    background: var(--c-accent);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    text-transform: capitalize;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}
.fc-race-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 6px;
    transition: box-shadow .15s;
}
.fc-race-row:hover { box-shadow: var(--shadow); }
.fc-race-name { font-weight: 600; color: var(--c-text); }
.fc-race-name:hover { color: var(--c-primary); }
.fc-race-meta { margin-left: auto; font-size: .8rem; color: var(--c-muted); }

/* =====================================================
   LISTADO DE CORREDORES
   ===================================================== */
.fc-rider-row {
    display: flex;
    align-items: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 6px;
}
.fc-rider-photo {
    width: 52px; height: 52px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 14px;
    background: #eef0f2;
    flex-shrink: 0;
}
.fc-rider-name { font-size: 1rem; font-weight: 700; }
.fc-rider-name a { color: var(--c-text); }
.fc-rider-name a:hover { color: var(--c-primary); }
.fc-rider-info { font-size: .85rem; color: var(--c-muted); }
.fc-rider-points { margin-left: auto; font-weight: 800; color: var(--c-primary); }

/* equipos */
.fc-team-row { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-sm); margin-bottom:6px; }
.fc-team-row.fc-team-active { border-color: var(--c-primary); background:#fff5f6; }
.fc-team-rank { width:28px; font-weight:800; color:var(--c-muted); text-align:center; }
.fc-team-logo { width:34px; height:34px; object-fit:contain; }
.fc-team-name { font-weight:600; }
.fc-team-points { margin-left:auto; font-weight:800; color:var(--c-primary); }

/* =====================================================
   TOP-3 / PALMARÉS
   ===================================================== */
.top-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 10px;
}
.top-box .gold { color: var(--c-gold); }
.top-box .silver { color: var(--c-silver); }
.top-box .bronze { color: var(--c-bronze); }

.flag { width: 22px; height: auto; vertical-align: middle; border-radius: 2px; }

/* =====================================================
   BANNERS PUBLICITARIOS REALES
   ===================================================== */
.ad-container-top { margin-bottom: 0; }

.ad-banner {
    display: block;
    margin: 16px 0;
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;                 /* elimina el hueco bajo la imagen */
    box-shadow: var(--shadow);
    transition: box-shadow .15s, transform .15s;
}
.ad-banner:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.ad-banner img {
    display: block;
    width: 100%;
    height: auto;                   /* mantiene la proporción al reducirse */
}

/* Contenedor del banner secundario al pie: discreto y separado del contenido */
.ad-container-bottom { margin-top: 28px; }

/* El secundario no debe competir con el principal: más pequeño y centrado */
.ad-banner--innovatap {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    opacity: .92;
}
.ad-banner--innovatap:hover { opacity: 1; }

/* En móvil los banners tan alargados se leerían diminutos:
   se muestran a ancho completo y sin sombra para que no estorben. */
@media (max-width: 600px) {
    .ad-banner { margin: 12px 0; border-radius: var(--radius-sm); }
    .ad-banner--innovatap { max-width: 100%; }
}

/* =====================================================
   ESPACIOS PUBLICITARIOS LIBRES (demo con ?ads=demo)
   ===================================================== */
.ad-slot {
    border: 2px dashed var(--c-primary);
    border-radius: var(--radius);
    background: repeating-linear-gradient(
        45deg,
        #fff5f6, #fff5f6 14px,
        #ffeceb 14px, #ffeceb 28px
    );
    color: var(--c-primary);
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .06em;
    padding: 26px 12px;
    margin: 16px 0;
}
.ad-slot span {
    display: block;
    margin-top: 5px;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .02em;
    color: #a05560;
}

/* =====================================================
   PANEL DE GESTIÓN
   ===================================================== */
.nav-panel { background: rgba(255,255,255,.12); }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}
.panel-head .page-title { margin-bottom: 0; }

.panel-help ol { margin: 8px 0 0; padding-left: 20px; }
.panel-help li { margin-bottom: 5px; }

.panel-form .form-row { margin-bottom: 16px; display: flex; flex-direction: column; }
.panel-form label { font-weight: 700; font-size: .85rem; margin-bottom: 5px; }
.panel-form input[type="text"],
.panel-form input[type="number"],
.panel-form input[type="date"],
.panel-form select,
.panel-form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: .92rem;
    font-family: var(--font);
    background: #fff;
    color: var(--c-text);
    outline: none;
}
.panel-form textarea { font-family: ui-monospace, Menlo, Consolas, monospace; }
.panel-form input:focus,
.panel-form select:focus,
.panel-form textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(10,61,98,.10); }
.panel-form small { margin-top: 4px; }

.field-error { color: var(--c-primary); font-size: .82rem; margin-top: 4px; font-weight: 600; }
.detected {
    margin-top: 8px;
    font-size: .85rem;
    color: #1c8a4a;
    background: #eaf7ef;
    border-radius: var(--radius-sm);
    padding: 7px 11px;
}

/* Avisos */
.alert {
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: .9rem;
    border: 1px solid transparent;
}
.alert-success { background: #eaf7ef; border-color: #b9e3c8; color: #14683a; }
.alert-info    { background: #eaf1f8; border-color: #bcd4ea; color: #14496e; }
.alert-warning { background: #fdf4e3; border-color: #f0dcae; color: #7a5a12; }
.alert-error   { background: #fdecee; border-color: #f5c2c9; color: #8c1c2b; }

/* =====================================================
   AVISO DE COOKIES
   ===================================================== */
.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 780px;
    background: var(--c-dark);
    color: #e7eaee;
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,.28);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .85rem;
    z-index: 200;
}
.cookie-banner[hidden] { display: none; }
.cookie-text { flex: 1 1 320px; line-height: 1.45; }
.cookie-text a { color: #9fd0ff; text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; margin-left: auto; }
.cookie-actions .btn { margin: 0; }
.cookie-actions .btn-dark { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.cookie-actions .btn-dark:hover { background: var(--c-primary-dark); }

/* =====================================================
   PANEL DE VISITAS
   ===================================================== */
.stat-num { font-size: 2.1rem; font-weight: 800; color: var(--c-primary); line-height: 1.1; }
.stat-label { font-size: .8rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

.chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 160px;
    margin-top: 12px;
    padding-top: 8px;
}
.chart-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.chart-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--c-primary), #e0566c);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: opacity .15s;
}
.chart-bar-wrap:hover .chart-bar { opacity: .7; }
.chart-axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--c-muted); margin-top: 6px; }

/* =====================================================
   PÁGINAS LEGALES
   ===================================================== */
.legal-page { line-height: 1.65; }
.legal-page h2 { font-size: 1.05rem; margin-top: 22px; margin-bottom: 6px; }
.legal-page ul { padding-left: 20px; }
.legal-page li { margin-bottom: 8px; }

/* =====================================================
   FOOTER
   ===================================================== */
.fc-footer {
    max-width: 1080px;
    margin: 40px auto 0;
    padding: 22px 18px;
    border-top: 1px solid var(--c-border);
    color: var(--c-muted);
    font-size: .8rem;
    text-align: center;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
/* Tablas anchas: que se desplace LA TABLA, no la página entera.
   Sin esto, en el móvil la clasificación (unos 530px) ensanchaba el documento
   y la cabecera, que mide el ancho de la pantalla, se quedaba corta: se veía
   todo descuadrado al desplazarse a la derecha. Lo reportó Daniel. */
.fc-tabla {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.fc-tabla > .table { margin-bottom: 0; }

@media (max-width: 600px) {
    /* La cabecera ocupaba 240px Y era pegajosa: en un móvil tapaba un cuarto
       de la pantalla todo el rato. Ahora va en una sola barra y no se pega. */
    .fc-header { position: static; }
    .fc-header-inner {
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 12px;
        gap: 8px 10px;
        min-height: 0;
    }
    .fc-logo { font-size: .86rem; gap: 6px; flex: 1 1 auto; }
    .fc-logo .fc-logo-badge { font-size: .8rem; padding: 3px 6px; }
    .fc-lang { flex: 0 0 auto; margin-left: auto; }
    .fc-lang select { font-size: .8rem; padding: 3px 6px; }
    /* En columna, flex-basis se convierte en altura: anularlo */
    .fc-search { flex: 1 1 100%; order: 3; width: 100%; }
    /* El menú en UNA fila que se desliza, en vez de partirse en dos */
    .fc-nav {
        margin-left: 0;
        flex: 1 1 100%;
        order: 4;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 2px;
        scrollbar-width: none;
    }
    .fc-nav::-webkit-scrollbar { display: none; }
    .fc-nav a { white-space: nowrap; }
    /* El menú se desliza, pero sin barra de desplazamiento no hay forma de
       saberlo: en un móvil de 375 px caben cuatro secciones de seis, así que
       "Traspasos" y "Crónicas" no las encontraba nadie. El degradado del borde
       derecho es la pista de que hay más. */
    .fc-nav {
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }

    .table { font-size: .82rem; }
    .table thead th, .table tbody td { padding: 8px 7px; }
    .table td.fc-team { font-size: .8rem; }
    .fc-mini-photo { width: 22px; height: 22px; }
    h1, .page-title { font-size: 1.3rem; }

    /* Cabecera de la ficha de equipo: el escudo encima y el nombre debajo,
       que en una sola fila el titulo salia partido en tres lineas */
    .fc-team-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .fc-team-header h1 { font-size: 1.35rem; }

    /* "0 pts" se partia en dos lineas */
    .fc-rider-points, .fc-team-points { white-space: nowrap; }

    /* Calendario: nombre arriba y categoria debajo, en vez de apretados */
    .fc-race-row { flex-wrap: wrap; }
    .fc-race-meta { margin-left: 0; flex: 1 1 100%; }

    /* Filtros: caben mas por fila */
    .fc-filter-row .btn { padding: 4px 9px; font-size: .78rem; }

    /* Celdas montadas con flex (el nombre del equipo en /teams/): sin esto el
       nombre no puede partirse y la tabla se iba a 482px en una pantalla de 320 */
    .table td.d-flex { flex-wrap: wrap; gap: 4px 0; }
    .table td.d-flex > a { min-width: 0; overflow-wrap: break-word; }
}

/* Fichaje anunciado para una temporada futura (ficha del corredor) */
.fc-fichaje {
    background: #fff6e5;
    border-left: 3px solid #e8a33d;
    padding: 7px 11px;
    border-radius: 4px;
    display: inline-block;
}

/* =====================================================
   TEXTOS INTRODUCTORIOS Y RESUMENES
   Bloques de texto propio en las paginas de listado y en
   las fichas de carrera y corredor.
   ===================================================== */
.fc-intro,
.fc-resumen {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.fc-intro p,
.fc-resumen p {
    margin: 0 0 10px;
    color: var(--c-text);
    font-size: .95rem;
    line-height: 1.6;
    max-width: 70ch;
}

.fc-intro p:last-child,
.fc-resumen p:last-child { margin-bottom: 0; }

.fc-resumen h2 {
    font-size: 1.05rem;
    margin: 0 0 8px;
    color: var(--c-accent);
}

/* Aviso de carrera o etapa anulada */
.fc-cancelada {
    background: #fdf0ef;
    border: 1px solid #e6b3af;
    border-left: 4px solid #b3261e;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.fc-cancelada strong {
    display: block;
    color: #b3261e;
    margin-bottom: 4px;
}

.fc-cancelada p {
    margin: 0;
    color: var(--c-text);
    font-size: .95rem;
    line-height: 1.6;
    max-width: 70ch;
}

/* Paginas de contenido (Quienes somos, Contacto, Privacidad) */
.fc-pagina {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 22px 26px;
    margin-bottom: 20px;
}
.fc-pagina h2 { font-size: 1.15rem; margin: 22px 0 8px; color: var(--c-accent); }
.fc-pagina h2:first-of-type { margin-top: 0; }
.fc-pagina p, .fc-pagina li { line-height: 1.65; max-width: 72ch; }
.fc-pagina ul { padding-left: 20px; }

/* =====================================================
   BLOG — cronicas, entrevistas y analisis
   ===================================================== */
.fc-post {
    display: flex;
    gap: 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 14px;
}
.fc-post-foto { flex: 0 0 190px; }
.fc-post-foto img {
    width: 100%; height: 120px; object-fit: cover;
    border-radius: 4px; display: block;
}
.fc-post-texto { flex: 1 1 auto; min-width: 0; }
.fc-post-texto h2 { font-size: 1.15rem; margin: 6px 0 4px; }
.fc-post-texto h2 a { color: var(--c-text); }
.fc-post-texto h2 a:hover { color: var(--c-primary); }
.fc-post-texto p { margin: 0 0 8px; line-height: 1.55; }
.fc-post-meta { font-size: .8rem; color: var(--c-muted); }

.fc-articulo {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 26px 30px;
    max-width: 760px;
    margin: 0 auto;
}
.fc-articulo h1 { font-size: 1.8rem; margin: 8px 0 6px; }
.fc-articulo p { line-height: 1.75; margin: 0 0 16px; font-size: 1.02rem; }
.fc-articulo .fc-entradilla {
    font-size: 1.12rem; font-weight: 600; color: var(--c-accent);
    border-left: 3px solid var(--c-primary); padding-left: 14px;
}
.fc-articulo-foto {
    width: 100%; max-height: 380px; object-fit: cover;
    border-radius: 5px; margin: 14px 0 18px; display: block;
}
.fc-articulo-carrera {
    background: #f4f6f8; border-radius: 5px; padding: 12px 14px; font-weight: 600;
}

@media (max-width: 600px) {
    .fc-post { flex-direction: column; }
    .fc-post-foto { flex: 0 0 auto; }
    .fc-post-foto img { height: 160px; }
    .fc-articulo { padding: 18px 16px; }
    .fc-articulo h1 { font-size: 1.35rem; }
}

/* =====================================================
   VUELTAS POR ETAPAS: pestanas y maillots
   ===================================================== */
.fc-etapas {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.fc-etapas-titulo {
    display: block;
    font-weight: 700;
    color: var(--c-accent);
    margin-bottom: 8px;
}

.fc-maillots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.fc-maillot {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 5px solid var(--c-muted);
    border-radius: 6px;
    padding: 8px 14px;
    min-width: 190px;
}
.fc-maillot-etiqueta {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-muted);
}
.fc-maillot a { font-weight: 600; }

/* Los colores de siempre en el ciclismo */
.fc-maillot-lider   { border-left-color: #d4a200; }   /* amarillo/oro */
.fc-maillot-montana { border-left-color: #c8102e; }   /* lunares rojos */
.fc-maillot-joven   { border-left-color: #1f6fb2; }   /* blanco/azul */
.fc-maillot-puntos  { border-left-color: #2e9e4f; }   /* verde */

@media (max-width: 600px) {
    .fc-maillot { min-width: 0; flex: 1 1 100%; }
}

/* PDF colgados de una cronica (lista de inscritos, guia tecnica...) */
.fc-articulo-adjuntos {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 18px 0;
}

.fc-articulo-adjuntos strong {
    display: block;
    margin-bottom: 6px;
    font-size: .95rem;
}

.fc-articulo-adjuntos ul {
    margin: 0;
    padding-left: 18px;
    list-style: none;
}

.fc-articulo-adjuntos li { margin: 4px 0; font-size: .95rem; }

/* =====================================================
   PÁGINA DE CARRERA — maqueta densa
   Es la página más visitada y la que más datos tiene. Antes la clasificación
   ocupaba media pantalla porque la cabecera, las etapas y los maillots se
   llevaban la otra media. Ahora la cabecera es compacta y los maillots y los
   datos de la etapa se van a una columna lateral, así se ven el doble de
   corredores sin desplazar.
   ===================================================== */
.fc-carrera-cabecera { margin-bottom: 14px; }

.fc-carrera-miga {
    font-size: .76rem;
    color: var(--c-muted);
    margin-bottom: 4px;
}
.fc-carrera-miga a { color: var(--c-muted); }
.fc-carrera-miga a:hover { color: var(--c-primary); }
.fc-carrera-miga .sep { color: #c5cad0; margin: 0 4px; }

.fc-carrera-titulo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 3px;
}
.fc-carrera-titulo h1 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}
.fc-carrera-datos {
    font-size: .8rem;
    color: var(--c-muted);
}
.fc-carrera-datos .sep { color: #c5cad0; margin: 0 5px; }

/* --- Barra de etapas: segmentada, no botones sueltos --- */
.fc-etapas {
    display: flex;
    align-items: stretch;
    background: var(--c-surface);
    border: 1px solid #dde1e5;
    border-radius: var(--radius-sm);
    padding: 0;
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.fc-etapas-titulo {
    display: flex;
    align-items: center;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-muted);
    font-weight: 600;
    padding: 8px 12px;
    background: #f5f7f8;
    border-right: 1px solid #dde1e5;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.fc-etapas .btn {
    margin: 0;
    border: none;
    border-right: 1px solid #eef0f2;
    border-radius: 0;
    padding: 9px 15px;
    font-size: .84rem;
    font-weight: 500;
    color: #4b5563;
    background: transparent;
    white-space: nowrap;
    flex-shrink: 0;
}
.fc-etapas .btn:hover { background: #f5f7f8; color: var(--c-accent); }
.fc-etapas .btn.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    font-weight: 700;
}

/* --- Dos columnas: clasificación + panel lateral --- */
.fc-carrera-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: start;
}
.fc-carrera-lateral {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fc-panel {
    background: var(--c-surface);
    border: 1px solid #dde1e5;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.fc-panel-titulo {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-muted);
    font-weight: 600;
    padding: 8px 12px;
    background: #f5f7f8;
    border-bottom: 1px solid #dde1e5;
}
.fc-panel-dato {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .82rem;
    padding: 6px 12px;
}
.fc-panel-dato + .fc-panel-dato { border-top: 1px solid #f1f3f4; }
.fc-panel-dato span:last-child {
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* --- Maillots dentro del panel --- */
.fc-carrera-lateral .fc-maillots {
    display: block;
    margin: 0;
    padding: 4px 0;
}
.fc-carrera-lateral .fc-maillot {
    border: none;
    border-left: 3px solid var(--c-muted);
    border-radius: 0;
    padding: 6px 12px;
    margin: 4px 0;
    min-width: 0;
}

@media (max-width: 900px) {
    .fc-carrera-cols { grid-template-columns: 1fr; }
    /* En móvil el panel va DEBAJO de la clasificación, que es lo que se
       viene a ver. */
    .fc-carrera-lateral { order: 2; }
}

/* =====================================================
   CLASIFICACIÓN EN MÓVIL Y EN VENTANA ESTRECHA
   Una tabla de seis columnas no cabe en 390 px: se desplazaba en horizontal y
   había que arrastrar para ver el tiempo. Cada fila pasa a ser una ficha:
   puesto a la izquierda, corredor con su equipo debajo, y tiempo y diferencia
   a la derecha.

   OJO: el corte va a 900 px, el MISMO que el del panel lateral (arriba), no a
   640 px como al principio. Lo vio José con la ventana del navegador a un
   ancho intermedio (ni pantalla grande ni móvil): con el panel ya apilado
   debajo pero la tabla todavía en modo tabla de 6 columnas, "Tiempo" y "Dif"
   quedaban tan apretadas contra el borde que parecían no estar — el texto
   seguía ahí, pero ilegible. Entre 640 y 900 px no hay ningún ancho
   garantizado para la tabla ancha, así que las fichas tienen que empezar
   donde empieza la columna única, no antes.
   ===================================================== */
@media (max-width: 900px) {
    .fc-tabla-fichas thead { display: none; }

    .fc-tabla-fichas tbody tr {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        align-items: center;
        gap: 1px 9px;
        padding: 8px 11px;
        border-bottom: 1px solid #eef0f2;
    }
    .fc-tabla-fichas tbody td {
        display: block;
        padding: 0;
        border: none;
        min-width: 0;
    }
    .fc-tabla-fichas tbody td.col-pos   { grid-column: 1; grid-row: 1 / span 2; text-align: center; }
    .fc-tabla-fichas tbody td.col-rider { grid-column: 2; grid-row: 1; width: auto; }
    .fc-tabla-fichas tbody td.fc-team   { grid-column: 2; grid-row: 2; font-size: .75rem; width: auto; }
    .fc-tabla-fichas tbody td.col-time  { grid-column: 3; grid-row: 1; text-align: right; }
    .fc-tabla-fichas tbody td.col-dif   { grid-column: 3; grid-row: 2; text-align: right; width: auto; font-size: .75rem; }
    /* Los puntos se quitan en móvil: con ellos al nombre le quedaban 131 px y
       "Lorenzo Mark Finn" se cortaba. Son un dato derivado y se ven enteros en
       la ficha del corredor y en el ranking. */
    .fc-tabla-fichas tbody td.col-points{ display: none; }

    /* El nombre y el equipo se recortan con puntos suspensivos en vez de
       ensanchar la fila. */
    .fc-tabla-fichas .fc-rider-cell,
    .fc-tabla-fichas .fc-team-cell { min-width: 0; }
    .fc-tabla-fichas .fc-rider-cell a,
    .fc-tabla-fichas .fc-team-cell a {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* La foto se quita: en 390 px el nombre necesita ese sitio. */
    .fc-tabla-fichas .fc-mini-photo { display: none; }
}

/* --- Ajustes medidos sobre la página ya montada ---------------------------
   El perfil de la etapa se pintaba a 659 px de alto y empujaba la primera fila
   de la clasificación hasta los 1.320 px de scroll: había que bajar media
   pantalla para ver al ganador. Y cada fila medía 54 px porque el nombre del
   equipo partía en dos líneas. */
.stage-box .img-fluid {
    max-height: 230px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.fc-tabla-fichas .fc-mini-photo { width: 26px; height: 26px; }
.fc-tabla-fichas .fc-mini-kit { width: 18px; height: 18px; }

/* La tabla se salía de su contenedor y tapaba el panel lateral (lo vio José:
   "en pc se corta el final"). Sin table-layout:fixed, un <a> con
   white-space:nowrap dentro de una celda hace que el navegador calcule el
   ancho de esa columna por el texto COMPLETO ("Red Bull - BORA - hansgrohe
   Rookies"), ignorando el max-width del <td> — así la tabla medía 765 px
   dentro de un hueco de 732, y esos 33 px de más quedaban debajo del panel de
   maillots. Con table-layout:fixed el navegador respeta los anchos de una vez
   (los toma del <thead>) y ya no puede ensancharse por el contenido; a cambio,
   TODAS las columnas necesitan su ancho aquí, si no se reparten a partes
   iguales el hueco que sobre. */
.fc-tabla-fichas { table-layout: fixed; }
.fc-tabla-fichas th.col-rider,
.fc-tabla-fichas td.col-rider { width: 40%; }
.fc-tabla-fichas th.fc-team,
.fc-tabla-fichas td.fc-team { width: 26%; max-width: none; }

.fc-tabla-fichas .fc-team-cell,
.fc-tabla-fichas .fc-rider-cell {
    min-width: 0;
    white-space: nowrap;
}
.fc-tabla-fichas .fc-team-cell a,
.fc-tabla-fichas .fc-rider-cell a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

@media (max-width: 640px) {
    /* En móvil manda la regla de fichas de más arriba: sin límite de ancho. */
    .fc-tabla-fichas td.fc-team { max-width: none; }

    /* Las columnas llevan ancho fijo pensado para la tabla de escritorio
       (42 px el puesto, 90 el tiempo, 60 los puntos). Dentro de la ficha eso
       le dejaba al NOMBRE solo 104 px y se cortaba en "Lorenzo Mar…". Aquí
       cada dato ocupa lo que necesita y el nombre se queda con el resto. */
    .fc-tabla-fichas tbody td.col-pos,
    .fc-tabla-fichas tbody td.col-time,
    .fc-tabla-fichas tbody td.col-dif,
    .fc-tabla-fichas tbody td.col-points { width: auto; }

    /* El perfil de la etapa a 230 px se come dos tercios de la pantalla de un
       móvil antes de llegar a la clasificación. */
    .stage-box .img-fluid { max-height: 150px; }
}

/* La publicidad tiene que distinguirse del contenido: lo pide la política de
   Google y, sin etiqueta, dos banners con aspecto de tira informativa se leen
   como si fueran parte de la web. */
.ad-etiqueta {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #9aa0a6;
    font-weight: 600;
    margin-bottom: 3px;
    text-align: center;
}

/* Medalla del podio: círculo de color con el puesto dentro. Se dibuja con CSS
   en vez de usar 🥇🥈🥉 porque los emoji cambian de dibujo en cada móvil, no
   se recolorean y no escalan con el texto. */
.fc-medalla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: .76rem;
    line-height: 1;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
}
.row-gold   .fc-medalla { background: var(--c-gold); }
.row-silver .fc-medalla { background: var(--c-silver); }
.row-bronze .fc-medalla { background: var(--c-bronze); }

/* Las dos vistas del ranking (puntos / victorias) */
.fc-pestanas-ranking {
    display: flex;
    gap: 6px;
    margin: -6px 0 16px;
}

/* Enlace a la crónica desde la carrera. El texto escrito es lo que Google
   valora y estaba escondido: solo se llegaba a él desde el listado de
   crónicas, nunca desde la carrera de la que habla. */
.fc-cronica-enlace a {
    display: block;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-accent);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 8px;
    color: var(--c-text);
}
.fc-cronica-enlace a:hover {
    border-left-color: var(--c-primary);
    box-shadow: var(--shadow-md);
    color: var(--c-text);
}
.fc-cronica-etiqueta {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--c-accent);
    margin-bottom: 2px;
}
.fc-cronica-enlace strong { display: block; font-size: 1.02rem; }
.fc-cronica-resumen {
    display: block;
    font-size: .85rem;
    color: var(--c-muted);
    margin-top: 3px;
}