/* ============================================================
   COPILOT TIMING — Campeonato
   ============================================================ */

body { padding-top: 72px; background: var(--surface); }

/* ---- Hero ---- */
.live-hero {
    background: var(--on-surface);
    padding: 2.5rem 2rem 3rem;
}
.live-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(181,0,11,0.15);
    border: 1px solid rgba(181,0,11,0.3);
    color: #e30613;
    font-family: var(--font-headline);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    margin-bottom: 0.75rem;
}
.live-title {
    font-family: var(--font-headline);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 700;
    color: white;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.live-subtitle {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.45);
    margin-top: 0.4rem;
}

/* ---- Main ---- */
.live-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

/* ---- Controls bar ---- */
.controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--surface-container-high);
    margin-bottom: 0;
    flex-wrap: wrap;
}

.cat-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cat-select-wrap::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--secondary);
    pointer-events: none;
}
.cat-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-headline);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-container-high);
    border-radius: 0.375rem;
    padding: 0.55rem 2.25rem 0.55rem 1rem;
    cursor: pointer;
    outline: none;
    transition: var(--transition);
    min-width: 200px;
}
.cat-select:hover { border-color: var(--primary); }
.cat-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(181,0,11,0.1); }

.search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.search-wrap i {
    position: absolute;
    left: 10px;
    color: var(--secondary);
    font-size: 0.8rem;
    pointer-events: none;
}
.search-input {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-container-high);
    border-radius: 0.375rem;
    padding: 0.52rem 1rem 0.52rem 2rem;
    outline: none;
    width: 240px;
    transition: var(--transition);
}
.search-input::placeholder { color: var(--secondary); opacity: 0.6; }
.search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(181,0,11,0.08);
    width: 280px;
}

/* ---- Export bar ---- */
.export-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 1rem 0;
}
.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-headline);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--surface-container-high);
    background: var(--surface-container-lowest);
    color: var(--secondary);
    cursor: pointer;
    transition: var(--transition);
}
.btn-export:hover { background: var(--surface-container-low); color: var(--on-surface); border-color: var(--surface-container-highest); }
.btn-export-excel:hover { color: #16a34a; border-color: #16a34a; }
.btn-export-pdf:hover   { color: var(--primary); border-color: var(--primary); }
.btn-export i { font-size: 0.85rem; }

/* ---- Table wrap ---- */
.results-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid var(--surface-container-high);
}
table.live-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

/* Thead principal */
table.live-table thead tr {
    background: var(--on-surface);
}
table.live-table thead th {
    padding: 0.75rem;
    font-family: var(--font-headline);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    text-align: left;
    white-space: nowrap;
    border: none;
}
table.live-table thead th:first-child { width: 52px; text-align: center; }
table.live-table thead th.right { text-align: right; }

/* Filas */
table.live-table tbody tr {
    border-bottom: 1px solid var(--surface-container-low);
    background: var(--surface-container-lowest);
    transition: background 0.2s ease;
}
table.live-table tbody tr:hover { background: var(--surface-container-low); }
table.live-table tbody tr:last-child { border-bottom: none; }

/* Podio */
table.live-table tbody tr.pos-1 { background: linear-gradient(90deg, rgba(255,215,0,0.08) 0%, transparent 60%); }
table.live-table tbody tr.pos-2 { background: linear-gradient(90deg, rgba(192,192,192,0.08) 0%, transparent 60%); }
table.live-table tbody tr.pos-3 { background: linear-gradient(90deg, rgba(205,127,50,0.08) 0%, transparent 60%); }

table.live-table tbody td {
    padding: 0.65rem 0.75rem;
    border: none;
    font-size: 0.875rem;
    color: var(--on-surface);
}

/* ---- Separador de categoría (rojo) ---- */
table.live-table tbody tr.cat-separator {
    background: var(--primary) !important;
}
table.live-table tbody tr.cat-separator td {
    padding: 0.5rem 0.75rem !important;
    font-family: var(--font-headline) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    border: none !important;
}

/* ---- Mini-header de columnas por categoría ---- */
table.live-table tbody tr.cat-col-header {
    background: var(--on-surface) !important;
}
table.live-table tbody tr.cat-col-header td {
    padding: 0.4rem 0.75rem !important;
    font-family: var(--font-headline) !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.55) !important;
    text-align: left !important;
    border: none !important;
}
table.live-table tbody tr.cat-col-header td.right { text-align: right !important; }

/* ---- Posición ---- */
.pos-cell {
    text-align: center;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1rem;
}
.pos-medal { font-size: 1.15rem; line-height: 1; }
.pos-num   { font-family: var(--font-headline); font-weight: 700; color: var(--secondary); }

/* ---- Corredor ---- */
.td-corredor { min-width: 140px; }
.corredor-name {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--on-surface);
    line-height: 1.2;
}
.corredor-num {
    font-size: 0.72rem;
    color: var(--secondary);
    margin-top: 1px;
}

/* Chips de etapas — solo visibles en mobile */
.etapas-mobile { display: none; }

/* ---- Equipo ---- */
td.equipo {
    font-size: 0.8rem;
    color: var(--secondary);
    white-space: nowrap;
}

/* ---- Etapas ---- */
td.etapa {
    font-family: var(--font-headline);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--on-surface);
    text-align: right;
    white-space: nowrap;
}
.no-time { color: var(--surface-dim); }

/* ---- Puntos ---- */
td.puntos { text-align: right; }
.puntos-badge {
    display: inline-block;
    background: var(--surface-container-high);
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 2rem;
}

/* ---- Loading / Error ---- */
.table-loading {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--secondary);
}
.table-loading i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
    display: block;
    animation: spin 1s linear infinite;
}
.table-error {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--secondary);
}
.table-error i {
    font-size: 2rem;
    color: var(--surface-dim);
    display: block;
    margin-bottom: 0.75rem;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- Vuelta chips (reutilizado de resultados-live) ---- */
.vuelta-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-headline);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--secondary);
    background: var(--surface-container-low);
    border-radius: 4px;
    padding: 2px 5px;
}
.vuelta-chip b {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--secondary);
    opacity: 0.7;
}

/* ---- Sistema de Puntos ---- */
.puntos-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--surface-container-high);
}
.puntos-title {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--on-surface);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}
.puntos-grid {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.puntos-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-container-high);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 160px;
}
.puntos-emoji { font-size: 1.5rem; line-height: 1; }
.puntos-lugar {
    font-family: var(--font-headline);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.puntos-valor {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

/* ---- Badges de inscripciones ---- */
.badge-registrado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-headline);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    background: rgba(22,163,74,0.1);
    color: #16a34a;
    border: 1px solid rgba(22,163,74,0.25);
    white-space: nowrap;
}

.badge-tc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-headline);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    background: rgba(22,163,74,0.1);
    color: #16a34a;
    border: 1px solid rgba(22,163,74,0.25);
    white-space: nowrap;
}

/* Badges en móvil dentro del td-corredor */
.insc-mobile-badges {
    display: none;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

/* Columnas Estado/TC → solo desktop */
.insc-desktop { display: table-cell; }


/* ============================================================
   RESPONSIVE MÓVIL
   ============================================================ */
@media (max-width: 640px) {
    .live-hero   { padding: 1.75rem 1rem 2rem; }
    .live-main   { padding: 0 0.75rem 3rem; }

    /* Controls */
    .controls-bar { flex-direction: column; align-items: stretch; padding: 0.75rem 0; }
    .cat-select   { min-width: 0; width: 100%; }
    .cat-select-wrap { width: 100%; }
    .search-wrap  { width: 100%; }
    .search-input { width: 100% !important; }

    /* Export */
    .export-bar { justify-content: flex-start; }
    .btn-export span { display: none; }

    /* Puntos */
    .puntos-grid { gap: 0.5rem; }
    .puntos-card { min-width: 130px; padding: 0.75rem 1rem; }

    /* ---- Tabla → modo card ---- */
    .results-table-wrap { border: none; border-radius: 0; overflow: visible; }
    table.live-table { display: block; width: 100%; min-width: 0; }

    /* Ocultar thead principal en móvil */
    table.live-table thead { display: none; }

    table.live-table tbody { display: flex; flex-direction: column; gap: 6px; }

    /* Separador de categoría: full width */
    table.live-table tr.cat-separator { display: flex; width: 100%; border-radius: 6px; }
    table.live-table tr.cat-separator td { display: block; width: 100%; border-radius: 6px; }

    /* Mini-header: oculto en móvil */
    table.live-table tbody tr.cat-col-header { display: none !important; }

    /* Fila de corredor → card */
    table.live-table tbody tr:not(.cat-separator):not(.cat-col-header) {
        display: flex;
        align-items: flex-start;
        gap: 0;
        background: var(--surface-container-lowest);
        border: 1px solid var(--surface-container-high);
        border-radius: 10px;
        padding: 10px 12px;
        position: relative;
    }
    table.live-table tbody tr.pos-1:not(.cat-separator) { border-left: 3px solid #FFD700; background: rgba(255,215,0,0.05); }
    table.live-table tbody tr.pos-2:not(.cat-separator) { border-left: 3px solid #C0C0C0; background: rgba(192,192,192,0.05); }
    table.live-table tbody tr.pos-3:not(.cat-separator) { border-left: 3px solid #CD7F32; background: rgba(205,127,50,0.05); }

    /* Ocultar todas las celdas salvo pos + corredor + puntos */
    table.live-table tbody tr:not(.cat-separator):not(.cat-col-header) td { display: none; }

    /* Mostrar: posición */
    table.live-table tbody tr:not(.cat-separator):not(.cat-col-header) td.pos-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        padding: 0;
    }
    /* Mostrar: corredor (incluye chips de etapas) */
    table.live-table tbody tr:not(.cat-separator):not(.cat-col-header) td.td-corredor {
        display: block;
        flex: 1;
        padding: 0 10px;
    }
    /* Mostrar: puntos */
    table.live-table tbody tr:not(.cat-separator):not(.cat-col-header) td.puntos {
        display: flex;
        align-items: center;
        padding: 0;
    }

    /* Chips de etapas → visibles en móvil */
    .etapas-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 5px;
    }

    /* Equipo/Tienda → ocultos en móvil */
    table.live-table tbody tr:not(.cat-separator):not(.cat-col-header) td.equipo { display: none !important; }

    /* Columnas Estado/TC desktop → ocultas en móvil */
    td.insc-desktop { display: none !important; }

    /* Badges en móvil → visibles dentro del td-corredor */
    .insc-mobile-badges { display: flex; }
}


/* ---- Logo de equipo ---- */
.equipo-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.equipo-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--surface-container-high, #e2e8f0);
    background: var(--surface-container, #f1f5f9);
}

/* Mobile equipo — visible solo en móvil dentro del td-corredor */
.mobile-equipo {
    display: none;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--secondary);
}
@media (max-width: 700px) {
    .mobile-equipo { display: flex; }
}

/* ---- Print ---- */
@media print {
    .navbar, .live-hero, .refresh-band, .controls-bar, .export-bar,
    .puntos-section, section#contacto { display: none !important; }
    body { padding: 0; background: white; }
    .live-main { padding: 1rem; }
    td.equipo { display: table-cell !important; }
    .equipo-cell { display: flex !important; }
    .equipo-logo { display: inline-block !important; width: 20px; height: 20px; }
    .cat-separator td { background: #171c21 !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cat-col-header { background: #b5000b !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cat-separator, .cat-col-header { display: table-row !important; }
    tr.pos-1, tr.pos-2, tr.pos-3 { background: #fff8e1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}