/* =======================================================
   BASE GENERAL
   ======================================================= */
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}


/* =======================================================
   CUADRADOS DE COLORES
   ======================================================= */
/* === CUADRADOS DE CONTADORES === */
.square {
    height: 45px;                    
    width: 45px;
    border-radius: 8px;

    display: inline-flex !important;
    flex-direction: column-reverse !important;  /* 🔥 invierte el orden */
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;

    padding: 0 !important;
    margin: 3px !important;
}

/* Etiqueta pequeña (INSC, ASIS…) */
.square p:first-child {
    font-size: 10px !important;
   
    font-weight: bold;
    margin: 5px !important;
    line-height: 1 !important;
}

/* Número grande */
.square p:last-child {
    font-size: 12px !important;
    font-weight: bold !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Forzar que <br> NO haga nada */
.square br {
    display: none !important;
}

.blue   { background-color: blue; }
.red    { background-color: red; }
.yellow { background-color: #9a7d0a; }
.green  { background-color: green; }
.orange { background-color: orange; }
.black  { background-color: black; }

main { column-count: 3; }

.navbar-center { margin-left: auto; margin-right: auto; }
.navbar-custom { height: 170px; }

br { font-size: 1px; vertical-align: -4px; }

/* =======================================================
   COUNTDOWN
   ======================================================= */
.img-container { text-align: center; float: left; }

small, .small { font-size: 0.5em; }

.countdown-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 36px;
}

.unit p:first-child {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    line-height: 1;
}

.label {
    font-size: 11px;
    margin: 0;
    line-height: 1;
}

.sep {
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 22px;
    margin-top: -12px;
}

.sep-days { width: 10px; }

#countdown {
    margin-top: -5px !important;
    margin-bottom: 5px !important;
}
/* =======================================================
   FORZAR TEXTO BLANCO EN TODA LA CABECERA
   ======================================================= */

/* Todo el texto que está DENTRO del navbar será blanco SIEMPRE */
.header-evento *,
.contadores-conchip *,
.img-container *,
nav.navbar .navbar-brand * {
    color: white !important;
}

/* =======================================================
   DATA TABLES – DISEÑO PRINCIPAL
   ======================================================= */

/* Quitar flechas de ordenación */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    display: none !important;
}
table#tablaUsuarios thead span.dt-column-order {
    display: none !important;
}

table#tablaUsuarios {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

div.dataTables_wrapper {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

table.dataTable {
    border: none !important;
    background-color: transparent !important;
}

/* Cabecera */
table#tablaUsuarios thead th {
    background: linear-gradient(to bottom, #e8f1ff, #c2d9ff) !important;
    color: #003366 !important;
    font-weight: bold !important;
    padding: 10px !important;
    text-align: center !important;
    border-bottom: 2px solid #003366 !important;
}

table#tablaUsuarios thead th:first-child {
    border-top-left-radius: 6px !important;
}
table#tablaUsuarios thead th:last-child {
    border-top-right-radius: 6px !important;
}

/* Celdas */
table#tablaUsuarios tbody td {
    border: none !important;
    padding: 8px 10px !important;
}
#tablaUsuarios tbody tr:hover {
    background-color: #e7d157 !important;  /* amarillo suave */
    cursor: pointer;
}


  /* =======================================================
   PREMIACIÓN – DETALLES ORIGINALES (RECUPERADOS)
   ======================================================= */
/* =======================================================
   PREMIACIÓN – ESTILOS DEFINITIVOS
   (adaptados a #tablaPremiacion)
   ======================================================= */
/* ===========================
   PREMIACIONES – ocultar buscar
   =========================== */
body.premiacion #tablaUsuarios_filter {
    display: none !important;
}
div {
    border-radius: 8px;
}

.bolded { font-weight: bold; }
.texto-rojo { color: red !important; font-weight: bold; }

th { font-size: 14px; }
td { font-size: 14px; }
tr { height: 30px; }
/* 🔥 En premiación NO hay cabecera fija */
body.premiacion #tablaPremiacion thead {
    display: none;
}
/* =======================================================
   TÍTULO DE PREMIACIONES
   ======================================================= */
body.premiacion .titulo-premiacion {
    display: block !important;
    text-align: center;
    margin: 15px 0 20px 0;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #003366;
    text-transform: uppercase;
}
/* =======================================================
   RESET ABSOLUTO (importantísimo)
   ======================================================= */
body.premiacion #tablaPremiacion td {
    border-radius: 0 !important;
}

/* =======================================================
   SEPARADOR DE SEXO / CATEGORÍA (fila superior del grupo)
   ======================================================= */
/* =======================================================
   BANDA DE SEXO (sin efecto tabla)
   ======================================================= */
body.premiacion #tablaPremiacion tr.separador-sexo td {
    background-color: #003366 !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;

    padding: 12px 0 !important;

    border: none !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.25);
}

/* ✅ SOLO las 2 esquinas superiores */
body.premiacion #tablaPremiacion tr.separador-sexo td:first-child {
    border-top-left-radius: 10px !important;
}
body.premiacion #tablaPremiacion tr.separador-sexo td:last-child {
    border-top-right-radius: 10px !important;
}
/* posicion (col 1) */
body.premiacion #tablaPremiacion td:nth-child(1),
body.premiacion #tablaPremiacion th:nth-child(1) {
    text-align: center !important;
}
/* Dorsal (col 2) */
body.premiacion #tablaPremiacion td:nth-child(2),
body.premiacion #tablaPremiacion th:nth-child(2) {
    text-align: center !important;
}

/* Tiempo (col 7) */
body.premiacion #tablaPremiacion td:nth-child(7),
body.premiacion #tablaPremiacion th:nth-child(7) {
    text-align: center !important;
    font-variant-numeric: tabular-nums; /* ⏱️ tiempos alineados */
}

/* Velocidad (col 8) */
body.premiacion #tablaPremiacion td:nth-child(8),
body.premiacion #tablaPremiacion th:nth-child(8) {
    text-align: center !important;
}
/* =======================================================
   SUBCABECERA (fila inferior azul del grupo)
   ======================================================= */
body.premiacion #tablaPremiacion tr.subcabecera-premiacion td {
    background-color: #003366 !important;
    color: white !important;
    font-weight: bold !important;
    padding: 8px !important;
    text-align: center !important;
}

/* ✅ SOLO las 2 esquinas inferiores */
body.premiacion #tablaPremiacion tr.subcabecera-premiacion td:first-child {
    border-bottom-left-radius: 10px !important;
}
body.premiacion #tablaPremiacion tr.subcabecera-premiacion td:last-child {
    border-bottom-right-radius: 10px !important;
}

/* =======================================================
   COLORES DE PODIO
   ======================================================= */

/* 🥇 ORO */
body.premiacion #tablaPremiacion tr.fila-oro td {
    background-color: #FFD700 !important;
    color: black !important;
    font-weight: bold !important;
}

/* 🥈 PLATA */
body.premiacion #tablaPremiacion tr.fila-plata td {
    background-color: #C0C0C0 !important;
    color: black !important;
    font-weight: bold !important;
}

/* 🥉 BRONCE */
body.premiacion #tablaPremiacion tr.fila-bronce td {
    background-color: #CD7F32 !important;
    color: white !important;
    font-weight: bold !important;
}
/* Colores de columnas */
td.oro    { background-color: gold !important; }
td.plata  { background-color: silver !important; }
td.bronce { background-color: #D2B48C !important; }

/* (Opcional) por si reutilizas en algún sitio */
tr.fila-oro    { background-color: gold !important; }
tr.fila-plata  { background-color: silver !important; }
tr.fila-bronce { background-color: #D2B48C !important; }
/* Premiaciones ocultas por defecto */
#tablaPremiacion_wrapper {
    display: none;
}

/* =======================================================
   BOTÓN "+", DETALLES RESPONSIVE
   ======================================================= */
/* =======================================================
   BOTÓN "+" — RECUPERADO AL ESTILO ORIGINAL
   ======================================================= */
td.dt-control {
    width: 1% !important;
    text-align: center !important;
    cursor: pointer !important;
    padding: 0 !important;

    /* 🔥 ESTA LÍNEA ES LA CLAVE */
    vertical-align: middle !important;

    /* 🔥 Y ESTA TAMBIÉN */
    line-height: 0 !important;
}

td.dt-control:before {
    content: "+" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px;
    height: 20px;

    border-radius: 50%;
    background-color: #28a745 !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 12px !important;
    border: 2px solid white !important;

    box-shadow: 0 0 3px rgba(0,0,0,0.25);

    /* 🔥 CLAVE: elimina desplazamientos verticales */
    margin: 0 auto !important;
    transform: translateY(3px);  /* ← ajuste fino, baja el símbolo */
}

td.dt-control:hover:before {
    transform: translateY(2px) scale(1.2);
}

/* Cuando la fila está abierta */
tr.shown td.dt-control:before {
    content: "−" !important;
    background-color: #dc3545 !important;
}


/* =======================================================
   AJUSTES DE COLUMNAS (NO ROMPEN RESPONSIVE)
   ======================================================= */

/* Nombre */
#tablaUsuarios td:nth-child(3),
#tablaUsuarios th:nth-child(3) {
    max-width: 160px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding-left: 10px !important;
    padding-right: 2px !important;
    text-align: left !important;
    line-height: 1.15 !important;
}
/* Categoría */
#tablaUsuarios td:nth-child(4),
#tablaUsuarios th:nth-child(4) {
    max-width: 55px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    padding-left: 10px !important;   /* 🔥 */
    text-align: left !important;
}

/* Club */
#tablaUsuarios td:nth-child(6),
#tablaUsuarios th:nth-child(6) {
    max-width: 85px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 10px !important;   /* 🔥 */
    text-align: left !important;
}


/* Tiempo en negrita */
#tablaUsuarios td:nth-child(9),
#tablaUsuarios th:nth-child(9) {
    font-weight: bold !important;
}

/* =======================================================
   🔵 VISTA MÓVIL VERTICAL (max-width: 768px)
   ======================================================= */
@media (max-width: 768px) {

    /* Eliminar márgenes laterales del DataTable */
    #tablaUsuarios {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    div.dataTables_wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Posición y Dorsal muy compactos */
    #tablaUsuarios th:nth-child(1),
    #tablaUsuarios td:nth-child(1),
    #tablaUsuarios th:nth-child(2),
    #tablaUsuarios td:nth-child(2) {
        width: 30px !important;
        max-width: 30px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Nombre → permitir 2 líneas */
    #tablaUsuarios td:nth-child(3),
    #tablaUsuarios th:nth-child(3) {
        max-width: 110px !important;
        white-space: normal !important;     /* 🔥 PERMITE SALTOS */
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.2 !important;
    }

    /* Categoría / Club compactos */
    #tablaUsuarios td:nth-child(4),
    #tablaUsuarios th:nth-child(4),
    #tablaUsuarios td:nth-child(6),
    #tablaUsuarios th:nth-child(6) {
        max-width: 70px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    /* Tiempo muy compacto */
    #tablaUsuarios td:nth-child(9),
    #tablaUsuarios th:nth-child(9) {
        width: 55px !important;
        max-width: 55px !important;
        white-space: nowrap !important;
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Detalle responsive con scroll */
    .detalle-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* =======================================================
   MÓVIL HORIZONTAL / TABLETS (480–1000px)
   ======================================================= */
/* =======================================================
   🔵 MÓVIL HORIZONTAL / TABLETS (480px – 1000px)
   ======================================================= */
@media (min-width: 480px) and (max-width: 1000px) {

    /* General: compactar tabla */
    #tablaUsuarios td,
    #tablaUsuarios th {
        padding-left: 3px !important;
        padding-right: 3px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* Pos y Dorsal más ajustados */
    #tablaUsuarios th:nth-child(1),
    #tablaUsuarios td:nth-child(1),
    #tablaUsuarios th:nth-child(2),
    #tablaUsuarios td:nth-child(2) {
        width: 40px !important;
        max-width: 40px !important;
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Nombre algo más ancho, pero sin romper tabla */
    #tablaUsuarios td:nth-child(3),
    #tablaUsuarios th:nth-child(3) {
        max-width: 160px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Categoría y Club compactos */
    #tablaUsuarios th:nth-child(4),
    #tablaUsuarios td:nth-child(4),
    #tablaUsuarios th:nth-child(6),
    #tablaUsuarios td:nth-child(6) {
        max-width: 90px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    /* Tiempo (columna 9) mantiene visibilidad */
    #tablaUsuarios td:nth-child(9),
    #tablaUsuarios th:nth-child(9) {
        width: 70px !important;
        max-width: 70px !important;
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Asegurar que el botón "+" no se deforma */
    td.dt-control:before {
        width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
    }

    /* Para evitar scroll horizontal salvo en detalle */
    div.dataTables_wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Detalle responsive si se abre */
    .detalle-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}
/* =======================================================
   DETALLES RESPONSIVE — ESTILO ORIGINAL RECUPERADO
   ======================================================= */

/* Cabecera del desplegable (TH) */
table.dataTable tbody tr.child th {
    background-color: #003366 !important;   /* azul oscuro */
    color: white !important;                /* letras blancas */
    font-weight: bold !important;
    padding: 6px !important;
    border-bottom: 2px solid #001f4d !important;
}

/* Celdas del detalle */
table.dataTable tbody tr.child td {
    background-color: #f2f6ff !important;   /* 🔥 fondo suave azul claro */
    color: #222 !important;
    padding: 6px !important;
    border-bottom: 1px solid #d0ddf0 !important;
}
/* =======================================================
   DETALLE DESPLEGABLE (fila hija DataTables)
   ======================================================= */

/* 🔹 Título con categoría y club */
.detalle-wrapper .detalle-titulo td {
    background-color: #eef4ff !important;  /* fondo azul suave */
    color: #003366 !important;
    padding: 8px !important;
    font-weight: bold !important;
    border-bottom: 2px solid #cdd9ee !important;
    text-align: center !important;
}

/* 🔹 Cabecera del detalle */
.detalle-wrapper .detalle-cabecera td {
    background-color: #003366 !important;  /* azul oscuro */
    color: white !important;
    font-weight: bold !important;
    padding: 6px !important;
    text-align: center !important;
    border-bottom: 2px solid #001f4d !important;
}

/* 🔹 Filas del detalle */
.detalle-wrapper table.detalle-table tr:not(.detalle-titulo):not(.detalle-cabecera) td {
    background-color: #bacae8 !important;  /* azul muy suave */
    color: #222 !important;
    padding: 6px !important;
    text-align: center !important;
}
/* CENTRAR NOMBRE + DESCRIPCIÓN DEL EVENTO SIN ROMPER NADA */

.navbar-brand h6 {
    display: block !important;
    width: 100% !important;
}
/* =======================================================
   DETALLE RESPONSIVE — ESQUINAS EXTREMAS SIN MARCO
   ======================================================= */

/* 🔹 Esquinas superiores: PRIMERA fila del detalle */
.detalle-wrapper table.detalle-table tr:first-child td:first-child {
    border-top-left-radius: 10px !important;
}
.detalle-wrapper table.detalle-table tr:first-child td:last-child {
    border-top-right-radius: 10px !important;
}

/* 🔹 Esquinas inferiores: ÚLTIMA fila del detalle */
.detalle-wrapper table.detalle-table tr:last-child td:first-child {
    border-bottom-left-radius: 10px !important;
}
.detalle-wrapper table.detalle-table tr:last-child td:last-child {
    border-bottom-right-radius: 10px !important;
}

/* 🔹 Sin marco alrededor del bloque */
.detalle-wrapper {
    border: none !important;
    overflow: visible !important;
}
/* Centrar completamente el bloque del detalle */
.detalle-wrapper .detalle-table {
    margin: 0 auto !important;
    width: auto !important;     /* mantiene tamaño natural */
    display: table;             /* evita que se expanda a 100% */
}



/*  DETALLE RESPONSIVE – AJUSTE FINO DE COLUMNAS */
  


/* Centrar completamente el bloque del detalle */
.detalle-wrapper .detalle-table {
    margin: 5px auto !important;
    width: auto !important;     /* mantiene tamaño natural */
    display: table;             /* evita que se expanda a 100% */
}



/*
.detalle-wrapper table.detalle-table td {
    min-width: 35px !important;
    outline: 1px dashed red !important;  
    text-align: center !important;
    vertical-align: middle !important;
}
.detalle-wrapper table.detalle-table th {
    outline: 1px dashed blue !important;
}
*/
/* =======================================================
   ALINEACIÓN DE COLUMNAS – TABLA PRINCIPAL
   ======================================================= */

/* Columna 1 */
#tablaUsuarios th:nth-child(1),
#tablaUsuarios td:nth-child(1) {
    text-align: center !important;
}

/* Columna 2 */
#tablaUsuarios th:nth-child(2),
#tablaUsuarios td:nth-child(2) {
    text-align: center !important;
}

/* Columna 3 */
#tablaUsuarios th:nth-child(3),
#tablaUsuarios td:nth-child(3) {
    text-align: left !important;
}

/* Columna 4 */
#tablaUsuarios th:nth-child(4),
#tablaUsuarios td:nth-child(4) {
    text-align: left !important;
}

/* Columna 5 */
#tablaUsuarios th:nth-child(5),
#tablaUsuarios td:nth-child(5) {
    text-align: center !important;
}

/* Columna 6 */
#tablaUsuarios th:nth-child(6),
#tablaUsuarios td:nth-child(6) {
    text-align: left !important;
}

/* Columna 7 */
#tablaUsuarios th:nth-child(7),
#tablaUsuarios td:nth-child(7) {
    text-align: left !important;
}

/* =======================================================
   CENTRAR DETALLE SOLO EN MÓVIL VERTICAL (max-width: 480px)
   ======================================================= */
@media (max-width: 480px) {
/* ALTURA REAL PARA EL NAVBAR EN MOVIL */
nav.navbar {
    position: relative !important;
    min-height: 120px !important;   /* 🔥 espacio para logo + nombre + crono */
}
    /* Forzar a centrar el TD generado por DataTables */
    table.dataTable tr.child td {
        text-align: center !important;        /* centra el contenido */
        padding-left: 0 !important;           /* quita desplazamiento a la izquierda */
        padding-right: 0 !important;          /* quita espacio extra */
        display: table-cell !important;       /* 🔥 evita que aparezca a un lado */
    }

    /* Asegurar que la tabla interna se centra */
    .detalle-wrapper .detalle-table {
        margin: 1px auto !important;
        display: table !important;
        width: auto !important;
    }
    /* =======================================================
   DETALLE RESPONSIVE — AJUSTE PERFECTO PARA MÓVIL
   ======================================================= */

/* Anchura de CONTROL (columna 1) */
.detalle-wrapper table.detalle-table td:nth-child(1),
.detalle-wrapper table.detalle-table th:nth-child(1) {
    min-width: 50px !important;      /* antes 70 → más compacto */
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Anchura de TIEMPO (columna 2) */
.detalle-wrapper table.detalle-table td:nth-child(2),
.detalle-wrapper table.detalle-table th:nth-child(2) {
    min-width: 50px !important;      /* antes 75 → más compacto */
    padding-left: 4px !important;
    padding-right: 4px !important;
}


/* Demás columnas compactadas */
.detalle-wrapper table.detalle-table td:nth-child(n+3),
.detalle-wrapper table.detalle-table th:nth-child(n+3) {
    min-width: 15px !important;      /* antes 30 → mejora para móvil */
    padding-left: 1px !important;
    padding-right: 1px !important;
    text-overflow: ellipsis !important;
  
}

/* LOGO arriba a la izquierda */
    .img-container a.navbar-brand {
        position: absolute !important;
        top: 0px !important;
        left: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .img-container a.navbar-brand img {
        width: 40px !important;
        height: auto !important;
        margin: 0 !important;
    }

    .img-container a.navbar-brand h6 {
        margin: 2px 0 0 !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

  /* NOMBRE + DESCRIPCIÓN en la misma línea y arriba */
/* =======================================================
   ARREGLO DEFINITIVO CABECERA MOVIL
   ======================================================= */

.encabezado-evento {
    position: absolute !important;
    top: 5px !important;              /* logo ya está perfecto, subimos nombre */
    left: 70px !important;
    width: calc(100% - 80px) !important;
}

/* 🔥 Nombre + Descripción EN MISMA LÍNEA */
.encabezado-lateral {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;   /* 🔥 ESTO LOS CENTRA */
    white-space: nowrap !important;
}

/* Nombre */
.encabezado-lateral .nombre {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Descripción AL LADO DEL NOMBRE */
.encabezado-lateral .descripcion {
    margin: 0 !important;
    font-size: 12px !important;
    
    font-weight: bold !important;
}

/* 🔥 CRONO — CENTRADO EN TODA LA PANTALLA REAL */
#countdown {
    position: relative !important;     /* 💥 Esto es lo que lo arregla */
    bottom: 0 !important;
    margin-top: 10px !important;       /* baja crono debajo del nombre */
    width: 100% !important;
    text-align: center !important;
    transform: scale(.9);
}

    /* CONTADORES centrados */
    .contadores-conchip {
    margin-top: -10px !important;   /* 🔥 BAJAMOS LOS CONTADORES */
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
}
/* Reducir ligeramente el tamaño de los contadores en móvil */
.square {
    width: 38px !important;     /* antes 45px → un poco más compacto */
    height: 38px !important;
    padding: 0 !important;
}
 /* Botón más pequeño para que quepan los dos */
    #tablaUsuarios_wrapper .btn-premiaciones {
        padding: 4px 6px;
        font-size: 11px;
        white-space: nowrap;
    }

    #tablaUsuarios_wrapper .dt-top {
        gap: 4px;
    }

    /* El filtro usa solo parte del ancho, no todo */
    #tablaUsuarios_wrapper .dt-top .dataTables_filter input {
        margin-top: -10px !important;
        width: 120px;      /* 🔹 si ves que caben de sobra, sube a 130–140 */
        max-width: 120px;
        height: 28px;
        font-size: 12px;
    }
    /* 1️⃣ Ocultar columnas que sobran */
    body.premiacion #tablaPremiacion th:nth-child(6),
    body.premiacion #tablaPremiacion td:nth-child(6), /* Sexo */
    body.premiacion #tablaPremiacion th:nth-child(8),
    body.premiacion #tablaPremiacion td:nth-child(8)  /* Vel */
    {
        display: none !important;
    }

   /* Nombre = columna principal */
    body.premiacion #tablaPremiacion td:nth-child(3) {
        width: 55% !important;
        max-width: 55% !important;
    }

    /* Club = secundaria */
    body.premiacion #tablaPremiacion td:nth-child(5) {
        width: 25% !important;
        max-width: 25% !important;
        font-size: 0.85em;
     
        white-space: normal !important;
    }

    /* 3️⃣ Centrar mejor números */
    body.premiacion #tablaPremiacion td:nth-child(1), /* Pos */
    body.premiacion #tablaPremiacion td:nth-child(2), /* Dorsal */
    body.premiacion #tablaPremiacion td:nth-child(7)  /* Tiempo */
    {
        text-align: center !important;
    }

    /* 4️⃣ Ajustar tamaño general */
    body.premiacion #tablaPremiacion td {
        padding: 6px 6px !important;
        font-size: 14px;
    }

    body.premiacion #tablaPremiacion tr.subcabecera-premiacion td {
        font-size: 13px;
    }
    body.premiacion.premiacion-categorias #tablaPremiacion th:nth-child(4),
    body.premiacion.premiacion-categorias #tablaPremiacion td:nth-child(4) {
        display: none !important;
    }
    
   /* =========================
       ESQUINAS DERECHAS (MÓVIL)
       ========================= */

    /* Separador (parte superior) */
    body.premiacion #tablaPremiacion tr.separador-sexo td:nth-child(7) {
        border-top-right-radius: 10px !important;
    }

    /* Subcabecera (parte inferior) */
    body.premiacion #tablaPremiacion tr.subcabecera-premiacion td:nth-child(7) {
        border-bottom-right-radius: 10px !important;
    }
}

@media (min-width: 481px) and (max-width: 991px) {

    /* ===============================
       NAV = GRID DE 3 COLUMNAS
       =============================== */
    .navbar {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: start;
    }

    /* IZQUIERDA: LOGO + DISTANCIA */
    .img-container {
        display: flex;
        flex-direction: column;
        align-items: center;   /* 🔥 CLAVE */
        text-align: center;
    }

    .img-container img {
        width: 90px;
        height: auto;
    }
/* Evitar que Bootstrap empuje el brand */
    .img-container .navbar-brand {
        margin-right: 0 !important;
        text-align: center;
    }
   /* Texto de distancia */
    .img-container h6 {
        margin-top: 6px;
        line-height: 1.2;
        text-align: center;
    }

    /* CENTRO REAL */
    .header-evento {
        grid-column: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
       
    }

    /* COLUMNA DERECHA FANTASMA (equilibrio visual) */
    .navbar::after {
        content: "";
        grid-column: 3;
        width: 70px; /* mismo ancho visual que el logo */
    }

    /* ===============================
       CONTENIDO CENTRAL
       =============================== */

    .encabezado-lateral {
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 10px;
    }

    .encabezado-lateral .nombre {
        font-size: 22px;
        font-weight: bold;
    }

    .encabezado-lateral .descripcion {
        font-size: 14px;
        font-weight: bold;
    }

    /* CRONO */
    #countdown {
    transform: translateY(-18px) scale(0.95);
    margin-bottom: 6px;

    }

    /* CONTADORES */
    .contadores-conchip {
        margin-top: -28px;
        transform: scale(0.9);
    }
    /* ===============================
       NOMBRE – máx 2 líneas
       =============================== */


   

   


}

@media (min-width: 992px) {

    /* ===============================
       NAVBAR BASE
       =============================== */
    .navbar {
        position: relative;
        justify-content: flex-start !important;
        min-height: 220px;   /* altura cómoda desktop */
    }

    /* ===============================
       LOGO + DISTANCIA (izquierda fija)
       =============================== */
    .img-container {
        position: absolute;
        left: 30px;
        top: 20px;
        text-align: center;
    }

    .img-container img {
        width: 120px;
        height: auto;
    }

    .img-container h6 {
        margin-top: 6px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }

    /* ===============================
       BLOQUE CENTRAL (centro real)
       =============================== */
    .header-evento {
        position: absolute;
        left: 50%;
        top: 25px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: calc(100% - 300px);  /* 🔥 usa casi todo el ancho */
    max-width: 1000px;
    }

    /* Nombre */
    .encabezado-lateral {
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 10px;
    }

    .encabezado-lateral .nombre {
        margin-top: -20px;
      font-size: 32px;
        font-weight: bold;
      
    }

    .encabezado-lateral .descripcion {
       
        font-size: 32px;
        font-weight: bold;
       
        margin: 0;
    }

    /* Crono */
    #countdown {
        margin: 18px 0 14px 0;
        transform: scale(1.5);
    }

    /* Contadores */
    .contadores-conchip {
        margin-top: 10px;
        transform: scale(1);
    }
     /* ===============================
       AJUSTE DE ANCHOS – DESKTOP
       =============================== */

    /* Nombre */
    #tablaUsuarios td:nth-child(3),
    #tablaUsuarios th:nth-child(3) {
        max-width: 220px !important;
    }

    /* Club */
    #tablaUsuarios td:nth-child(6),
    #tablaUsuarios th:nth-child(6) {
        max-width: 200px !important;
    }

    /* Categoría (más estrecha) */
    #tablaUsuarios td:nth-child(4),
    #tablaUsuarios th:nth-child(4) {
        max-width: 90px !important;
    }

    /* Sexo (muy estrecha) */
    #tablaUsuarios td:nth-child(7),
    #tablaUsuarios th:nth-child(7) {
        max-width: 50px !important;
        text-align: center;
    }
 /* ===============================
       NOMBRE – 2 líneas, fila uniforme
       =============================== */
   #tablaUsuarios .cell-nombre,
    #tablaUsuarios .cell-club {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.25em;
    }
     /* ===============================
       COLUMNAS NUMÉRICAS – MÁS ESTRECHAS
       =============================== */

    /* Posición general */
    #tablaUsuarios th:nth-child(1),
    #tablaUsuarios td:nth-child(1) {
        width: 40px !important;
        max-width: 40px !important;
        text-align: center;
    }
    /* Posición general */
    #tablaUsuarios th:nth-child(2),
    #tablaUsuarios td:nth-child(2) {
        width: 40px !important;
        max-width: 40px !important;
        text-align: center;
    }


    /* Posición por sexo */
    #tablaUsuarios th:nth-child(8),
    #tablaUsuarios td:nth-child(8) {
        width: 40px !important;
        max-width: 40px !important;
        text-align: center;
    }

    /* Velocidad media */
    #tablaUsuarios th:nth-child(9),
    #tablaUsuarios td:nth-child(9) {
        width: 65px !important;
        max-width: 65px !important;
        text-align: center;
    }

    /* Nº control */
    #tablaUsuarios th:nth-child(10),
    #tablaUsuarios td:nth-child(10) {
        width: 55px !important;
        max-width: 55px !important;
        text-align: center;
    }

    /* ===============================
       TEXTO – MÁS ANCHO REAL
       =============================== */

    /* Nombre */
    #tablaUsuarios th:nth-child(3),
    #tablaUsuarios td:nth-child(3) {
        min-width: 260px !important;
    }

    /* Club */
    #tablaUsuarios th:nth-child(6),
    #tablaUsuarios td:nth-child(6) {
        min-width: 200px !important;
    }


}

/* =======================================================
   GENERAL — RESALTAR PARTICIPANTE SELECCIONADO AL ABRIR "+"
   ======================================================= */
#tablaUsuarios tr.shown td {
    background-color: #003366 !important;  /* azul oscuro igual que cabecera */
    color: white !important;                /* texto blanco */
    font-weight: bold !important;
}
/* === DATATABLES TOP GENERAL (#tablaUsuarios) === */

#tablaUsuarios_wrapper .dt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* botón izq, buscar dcha */
    gap: 8px;
    width: 100%;

}

/* Botón “Premiaciones” */
#tablaUsuarios_wrapper .btn-premiaciones {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    padding: 4px 10px;
    font-size: 14px;
    white-space: nowrap;
}

/* Contenedor del filtro (buscar) */
#tablaUsuarios_wrapper .dt-top .dataTables_filter {
    margin: 0;
}

/* Que el label no meta margen raro */
#tablaUsuarios_wrapper .dt-top .dataTables_filter label {
    margin: 0;
}

/* Input de buscar en ESCRITORIO: ancho fijo razonable */
#tablaUsuarios_wrapper .dt-top .dataTables_filter input {
    width: 220px;          /* 🔹 aquí mandas tú: 180, 200, 220… */
    max-width: 220px;
    box-sizing: border-box;
    height: 32px;
    font-size: 14px;
}
/* En premiaciones no tiene sentido buscar */
body.premiacion .dataTables_filter {
    display: none !important;
}
/* =========================================
   CLASIFICACIÓN – TODO EN NEGRITA
   ========================================= */
#tablaUsuarios td,
#tablaUsuarios th {
    font-weight: bold !important;
}

#tablaUsuarios .detalle-wrapper table.detalle-table {
    width: 100% !important;
    table-layout: fixed !important;   /* 🔑 CLAVE */
}
  #tablaUsuarios .detalle-wrapper table.detalle-table th,
#tablaUsuarios .detalle-wrapper table.detalle-table td {
    text-align: center !important;
    padding: 4px 2px !important;   /* 🔥 aquí está la magia */
}
/* =======================================================
   TITULO DETALLE (Categoria | Club)
   ======================================================= */
.detalle-wrapper .detalle-titulo td {
    background-color: #003366 !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 8px !important;
    border-bottom: 2px solid #001f4d !important;
}