/* =========================================================================
   🏆 ESTILOS_CLASIFICACION.CSS (PARTE 1 DE 2): CHASIS Y COMPONENTES EN VIVO
   ========================================================================= */
body { 
    font-family: Arial, sans-serif; 
    background: #eef2f3; 
    padding: 15px; 
    margin: 0; 
    color: #333; 
}

.wrapper { 
    max-width: 950px; 
    margin: 0 auto; 
}

/* ⚽ PARRILLA DE TARJETAS DE PARTIDOS RESPONSIVE */
.grid-partidos { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 12px; 
    margin-bottom: 30px; 
}

.card-partido { 
    background: white; 
    padding: 10px; 
    padding-top: 10px; 
    border-radius: 6px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    text-align: center; 
    position: relative; 
    transition: background-color 0.5s ease, transform 0.3s ease; 
}

.row-marcador { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-weight: bold; 
    margin-top: 8px; 
}

.equipo-flex { 
    width: 40%; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 14px; 
}

.equipo-flex.local { justify-content: flex-end; text-align: right; }
.equipo-flex.visitante { justify-content: flex-start; text-align: left; }

/* 🛡️ REAJUSTE DE ESCUDOS */
.escudo-logo, .celda-equipo-fija img { 
    width: 24px !important; 
    height: 24px !important; 
    object-fit: contain; 
    background: transparent; 
    flex-shrink: 0; 
}

/* 🔴 MEDALLAS DE ESTADOS Y CAPAS */
.badge { 
    padding: 3px 8px; 
    border-radius: 10px; 
    font-size: 11px; 
    color: white; 
    font-weight: bold; 
    text-transform: uppercase;
}

.badge-no_iniciado { background: #bdc3c7; } 
.badge-en_juego { background: #e67e22; animation: pulse 1.5s infinite; } 
.badge-finalizado { background: #34495e; }
.badge-descanso { background: #f1c40f; color: #333 !important; }

/* 🌟 FLASH PREMIUM DE ALERTA DE GOL EN CALIENTE */
.alerta-gol { 
    background-color: #d4edda !important; 
    border-color: #c3e6cb !important; 
    transform: scale(1.02); 
}

.pulso-gol { 
    color: #27ae60 !important; 
    transform: scale(1.3); 
}

@keyframes pulse { 
    0% { opacity: 0.7; } 
    50% { opacity: 1; } 
    100% { opacity: 0.7; } 
}

/* ⚙️ SELECTORES Y BOTONERAS INTERIORES */
.header-box { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    justify-content: space-between; 
    align-items: center; 
    background: #34495e; 
    padding: 15px; 
    border-radius: 6px; 
    color: white; 
    margin-bottom: 20px; 
}

select { 
    padding: 8px 12px; 
    font-size: 15px; 
    border-radius: 4px; 
    outline: none; 
}
/* =========================================================================
   🏆 ESTILOS_CLASIFICACION.CSS (PARTE 2 DE 2): TABLA FIJA Y MARQUESINAS
   ========================================================================= */

.tabla-contenedor { 
    background: white; 
    border-radius: 8px; 
    overflow-x: auto; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}

/* --- CONFIGURACIÓN DE TABLA INDESTRUCTIBLE CONTRA EL SCROLL --- */
table { 
    width: 100%; 
    border-collapse: separate !important; 
    border-spacing: 0 !important; 
    min-width: 500px; 
}

table th, table td { border-bottom: 1px solid #edf2f7 !important; }
table th, td { padding: 2px 15px; text-align: left; } 
table th { background: #2c3e50; color: white; }
table tr:nth-child(even) { background: #f8f9fa; } 
table td.puntos { font-weight: bold; color: #27ae60;}

table th:nth-child(1), table td:nth-child(1),
table th:nth-child(2), table td:nth-child(2) { border-right: none !important; }

/* --- 1. COLUMNA 1: POSICIÓN (Nº) --- */
table th:nth-child(1), table td:nth-child(1) {
    position: -webkit-sticky !important; position: sticky !important; left: 0px !important; 
    width: 40px !important; min-width: 40px !important; max-width: 40px !important;
    box-sizing: border-box !important; border-right: none !important;
}
table td:nth-child(1) { padding-left: 8px !important; }

/* --- 2. COLUMNA 2: EQUIPO --- */
table th:nth-child(2) {
    position: -webkit-sticky !important; position: sticky !important; left: 40px !important; z-index: 22 !important;
    background: #2c3e50 !important; color: white !important; padding: 6px 6px 6px 2px !important; 
    width: 125px !important; min-width: 125px !important; max-width: 125px !important;
    text-align: left; box-sizing: border-box !important; overflow: hidden;
}
table td:nth-child(2) {
    position: -webkit-sticky !important; position: sticky !important; left: 40px !important; z-index: 10 !important;
    white-space: nowrap; padding: 6px 6px 6px 2px !important; 
    width: 125px !important; min-width: 125px !important; max-width: 125px !important;
    box-sizing: border-box !important; overflow: hidden;
}

/* --- 3. COLUMNA 3: PUNTOS --- */
table th:nth-child(3), table th.puntos {
    position: -webkit-sticky !important; position: sticky !important; left: 165px !important; z-index: 22 !important;
    background: #2c3e50 !important; color: #f1c40f !important; 
    width: 38px !important; min-width: 38px !important; max-width: 38px !important;
    padding: 6px 4px !important; text-align: center; box-sizing: border-box !important; overflow: hidden;
    border-right: none !important;
}
table td:nth-child(3), table td.puntos {
    position: -webkit-sticky !important; position: sticky !important; left: 165px !important; z-index: 20 !important;
    width: 38px !important; min-width: 38px !important; max-width: 38px !important;
    padding: 6px 4px !important; text-align: center; font-weight: 800 !important; font-size: 16px !important; 
    box-sizing: border-box !important; overflow: hidden; border-right: none !important;
}

/* --- 4. COLOR DE FONDO FIJO Y CAPAS DE BLINDAJE --- */
table tbody tr:nth-child(odd) td:nth-child(1),
table tbody tr:nth-child(odd) td:nth-child(2),
table tbody tr:nth-child(odd) td:nth-child(3) { background-color: #ffffff !important; }

table tbody tr:nth-child(even) td:nth-child(1),
table tbody tr:nth-child(even) td:nth-child(2),
table tbody tr:nth-child(even) td:nth-child(3) { background-color: #f8f9fa !important; }

/* =========================================================================
   CUCHILLA DIVISORIA DEFINTIVA: SOLDADA A LA DERECHA DE LOS PUNTOS
   ========================================================================= */
table th:nth-child(3)::after, table th.puntos::after,
table td:nth-child(3)::after, table td.puntos::after {
    content: ""; position: absolute; right: 0px !important; top: 0; bottom: 0;
    width: 0px; background-color: #cbd5e1 !important; z-index: 25 !important;
    pointer-events: none; transition: width 0.1s ease;
}
.tabla-scrolleada th:nth-child(3)::after, .tabla-scrolleada th.puntos::after,
.tabla-scrolleada td:nth-child(3)::after, .tabla-scrolleada td.puntos::after {
    width: 2px; box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

/* --- 5. ENVOLTORIO FLEXIBLE PARA EL NOMBRE --- */
.celda-equipo-fija {
    display: inline-flex; align-items: center; gap: 6px; font-weight: bold; font-size: 13px; 
    width: 115px !important; max-width: 115px !important; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* --- 6. BARRA LATERAL DE LAS 5 ZONAS REGLAMENTARIAS DE COLOR --- */
table tr td:nth-child(1).zona-ascenso::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2ed573; z-index: 16;
}
table tr td:nth-child(1).zona-ascenso b { color: #2ed573 !important; }

table tr td:nth-child(1).zona-playoff::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #ffa502; z-index: 16;
}
table tr td:nth-child(1).zona-playoff b { color: #ffa502 !important; }

table tr td:nth-child(1).zona-copa::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #9b59b6; z-index: 16;
}
table tr td:nth-child(1).zona-copa b { color: #9b59b6 !important; }

table tr td:nth-child(1).zona-promocion::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #e67e22; z-index: 16;
}
table tr td:nth-child(1).zona-promocion b { color: #e67e22 !important; }

table tr td:nth-child(1).zona-descenso::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #ff4757; z-index: 16;
}
table tr td:nth-child(1).zona-descenso b { color: #ff4757 !important; }

/* =========================================================================
   CHASIS DE MARQUESINA RESPONSIVE ULTRA-COMPACTA
   ========================================================================= */
.marquesina-chasis-elastico {
    display: flex !important; flex-direction: column !important;
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important;
}

#banderas-viento, #barra-equipaciones-fluida {
    display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; 
    width: 100% !important; padding: 0 10px !important; box-sizing: border-box !important; gap: 12px !important; transition: all 0.2s ease-in-out;
}
#barra-equipaciones-fluida { padding-top: 8px !important; }

#banderas-viento::-webkit-scrollbar, #barra-equipaciones-fluida::-webkit-scrollbar { display: none; }

.bloque-bandera-contenedor, .bloque-equipacion-contenedor {
    flex: 0 1 100px !important; min-width: 65px !important; box-sizing: border-box !important; transition: all 0.2s ease;
}
.bandera-viento, .bloque-equipacion-contenedor img { max-width: 100% !important; height: auto !important; }

/* INDICADORES DE TENDENCIA HORIZONTALES CON COCHÓN DE AIRE */
.celda-pos-bloque {
    display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important;
    gap: 3px !important; width: 100% !important; height: 100% !important; box-sizing: border-box !important; padding: 0 8px 0 18px !important; 
}
.tendencia-contenedor {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 12px !important; min-width: 12px !important; max-width: 12px !important; font-size: 8.5px !important;
    font-weight: bold; box-sizing: border-box !important; text-align: center; line-height: 1 !important;
}
.tendencia-sube { color: #16a34a !important; }
.tendencia-baja { color: #dc2626 !important; }
.tendencia-igual { color: #94a3b8 !important; font-size: 13px !important; margin-top: -1px !important; }

/* NAVEGACIÓN Y MEDIA QUERIES COMPUTADORAS */
@media (max-width: 768px) {
    #banderas-viento, #barra-equipaciones-fluida { justify-content: flex-start !important; overflow-x: auto !important; }
}
@media (min-width: 922px) {
    #banderas-viento, #barra-equipaciones-fluida { justify-content: center !important; }
}
@media (min-width: 992px) {
    #banderas-viento, #barra-equipaciones-fluida { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: hidden !important; padding: 0 10px !important; margin-left: 0 !important; }
    #barra-equipaciones-fluida { padding: 10px 10px 0 10px !important; }
    #banderas-viento .bloque-bandera-contenedor, #barra-equipaciones-fluida .bloque-equipacion-contenedor { flex: 0 1 100px !important; transition: transform 0.2s ease; }
    #banderas-viento .bloque-bandera-contenedor:first-child, #barra-equipaciones-fluida .bloque-equipacion-contenedor:first-child { margin-left: 0 !important; }
}


.celda-equipo-fija span {
        max-width: 200px !important; /* 👈 Baja este número si quieres que entre más la DG */
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }





/* =========================================================================
   📱 COMPRESIÓN INICIAL MÓVIL: SINCRO DE COLOR Y ANCHOS SIN CORTES (VIP)
   ========================================================================= */
@media (max-width: 480px) {
    /* 1. Reducimos el colchón (padding) interno de las celdas numéricas uniformemente */
    #cuerpo-tabla td, 
    .tabla-contenedor th {
        padding: 8px 3px !important; /* Espacio mínimo lateral para compactar */
        font-size: 11.5px !important; /* Letra compacta pero muy legible */
    }

    /* 2. Forzamos un ancho máximo al nombre del equipo para que no empuje la tabla */
    .celda-equipo-fija span {
        max-width: 75px !important; /* Corta con (...) justo a tiempo para que entre DG */
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 3. Estrechamos los anchos de las columnas numéricas intermedias */
    /* Pts, PJ, PG, PE, PP, GF, GC y DG */
    .tabla-contenedor th:nth-child(3), .tabla-contenedor td:nth-child(3), /* Pts */
    .tabla-contenedor th:nth-child(4), .tabla-contenedor td:nth-child(4), /* PJ */
    .tabla-contenedor th:nth-child(5), .tabla-contenedor td:nth-child(5), /* PG */
    .tabla-contenedor th:nth-child(6), .tabla-contenedor td:nth-child(6), /* PE */
    .tabla-contenedor th:nth-child(7), .tabla-contenedor td:nth-child(7), /* PP */
    .tabla-contenedor th:nth-child(8), .tabla-contenedor td:nth-child(8), /* GF */
    .tabla-contenedor th:nth-child(9), .tabla-contenedor td:nth-child(9), /* GC */
    .tabla-contenedor th:nth-child(10), .tabla-contenedor td:nth-child(10) /* DG */ {
        min-width: 20px !important; /* Evita que el navegador les dé aire de más */
        width: 24px !important;
        text-align: center !important;
    }

    /* 4. 🎯 REPARADO DE CORTE: Forzamos que la columna DG mantenga el mismo color de fondo
       nativo que el resto de sus filas hermanas, eliminando la línea vertical intrusa */
    .tabla-contenedor th:nth-child(10) {
        background: transparent !important; /* Hereda el color del <thead> sin parches */
        font-weight: 800 !important;
    }
    .tabla-contenedor td:nth-child(10) {
        background: transparent !important; /* Hereda el color blanco/alterno del <tbody> */
        font-weight: 800 !important;
  
}


 /* 4. 🎯 EL CERROJAZO DEL COLOR: Forzamos el color negro puro en el th para soldar la cabecera 
       y que no haga ningún corte visual con el resto de las columnas */
    .tabla-contenedor th:nth-child(10) {
        background: #1e293b !important; /* 🔥 Cámbialo por el código de tu negro exacto si usas #000000 o #2c3e50 */
        color: #ffffff !important;
        font-weight: 800 !important;
    }
    
    .tabla-contenedor td:nth-child(10) {
        background: transparent !important; /* El cuerpo se queda limpio heredando la fila */
        font-weight: 800 !important;
    }
/* 2. 🎯 RECORTE ESTRATÉGICO DE 12PX: Reducimos el ancho del nombre del equipo 
       para liberar el espacio horizontal exacto que le falta a la columna DG */
       .ddcelda-equipo-fija span {
        max-width: 75px !important; /* 🔥 Ajustado de 75px a 63px para ganar los 12px de aire */
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


   .celda-equipo-fija span {
    max-width: none !important;      /* 🟢 Quitamos el límite de ancho */
    display: inline !important;
    white-space: normal !important;   /* 🟢 Permitimos que el texto fluya libre */
    overflow: visible !important;     /* 🟢 Todo se vuelve visible */
    text-overflow: clip !important;   /* 🟢 Exterminamos los tres puntos (...) */
	   
}



}

 






/* =========================================================================
   📊 BLOQUE MAESTRO modular: CSS EXCLUSIVO DE LA CLASIFICACIÓN GENERAL
   ========================================================================= */

/* -------------------------------------------------------------------------
   1️⃣ SECCIÓN 1: EL ENVOLTORIO RESPONSIVO Y BASE DE LA TABLA
   ------------------------------------------------------------------------- */
.tabla-contenedor {
    width: 100%;
    overflow-x: auto; /* Activa el scroll horizontal elástico si el contenido se desborda */
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    background: #ffffff;
    box-sizing: border-box;
}

.tabla-contenedor table {
    width: 100%;
    border-collapse: collapse; /* Evita que las celdas dupliquen bordes */
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}


/* -------------------------------------------------------------------------
   2️⃣ SECCIÓN 2: MAQUETACIÓN DE LA CABECERA (THEAD)
   ------------------------------------------------------------------------- */
.tabla-contenedor thead tr {
    background: #1e293b; /* Color oscuro base de tu cabecera corporativa */
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

.tabla-contenedor th {
    padding: 10px 6px;
    text-align: center;
    font-weight: 700;
}

/* Forzamos alineación a la izquierda nativa solo en la columna del nombre del equipo */
.tabla-contenedor th:nth-child(2) {
    text-align: left;
}

/* -------------------------------------------------------------------------
   3️⃣ SECCIÓN 3: LAS CELDAS DEL CUERPO (TBODY) Y NÚMEROS
   ------------------------------------------------------------------------- */
.tabla-contenedor tbody tr {
    border-bottom: 1px solid #edf2f7;
    transition: background 0.15s ease;
}

/* Efecto cebra: filas alternas con un gris ultra-suave */
.tabla-contenedor tbody tr:nth-child(even) {
    background: #f8fafc;
}

/* Ilumina la fila entera cuando pasas el ratón por encima (Solo en PC) */
.tabla-contenedor tbody tr:hover {
    background: #f1f5f9;
}

.tabla-contenedor td {
    padding: 10px 6px;
    font-size: 13px;
    color: #334155;
    text-align: center;
    vertical-align: middle;
}

/* Destacamos la celda de los puntos netos */
.tabla-contenedor td.puntos {
    font-weight: 800;
    color: #1e293b;
    font-size: 13.5px;
}

/* -------------------------------------------------------------------------
   4️⃣ SECCIÓN 4: EL CAJETÍN DEL CLUB (ESCUDO + SPAN)
   ------------------------------------------------------------------------- */
.celda-equipo-fija {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio de separación entre el escudo mini y las letras */
    text-align: left;
}

.escudo-logo-tabla {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0; /* Prohibido encogerse ante textos largos */
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.1));
}

.celda-equipo-fija span {
    font-weight: 600;
    color: #1e293b;
}

/* -------------------------------------------------------------------------
   5️⃣ SECCIÓN 5: FRANJAS DE COLORES Y FLECHAS DE TENDENCIA (ZONAS)
   ------------------------------------------------------------------------- */
.celda-pos-bloque {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Los 5 colores elásticos en el lateral de la posición */
.zona-ascenso   { border-left: 2px solid #16a34a !important; } /* Verde */
.zona-playoff   { border-left: 2px solid #d97706 !important; } /* Amarillo */
.zona-copa      { border-left: 2px solid #2563eb !important; } /* Azul */
.zona-promocion { border-left: 2px solid #ea580c !important; } /* Naranja */
.zona-descenso  { border-left: 2px solid #dc2626 !important; } /* Rojo */

/* Estilos de las flechas dinámicas de la tabla */
.tendencia-contenedor { font-size: 9px; margin-left: 2px; font-weight: 800; }
.tendencia-sube  { color: #16a34a; }
.tendencia-baja  { color: #dc2626; }
.tendencia-igual { color: #94a3b8; font-size: 12px; }


/* =========================================================================
   🎛️ SECCIÓN 6: ZONA DE CALIBRACIÓN MANUAL EXCLUSIVA PARA MÓVILES (SMARTPHONES)
   ========================================================================= */
  @media (max-width: 480px)

{
    
    /* 🧩 Control de respiro: Ajusta este padding para comprimir las celdas numéricas */
    #cuerpo-tabla td, 
    .tabla-contenedor th {
        padding: 8px 3px !important; /* Modifica el 3px si quieres pegar más los números */
        font-size: 14px !important;  /* Tamaño de la fuente en móviles */
    }

    /* 📏 CONTROL DE LOS 12PX DEL NOMBRE DEL EQUIPO (CRÍTICO)
       Ajusta este max-width para obligar a que el texto del club se acorte con (...)
       y empuje la columna DG hacia el campo visual izquierdo del smartphone */
       .celda-equipo-fija span {
        max-width: 120px !important; /* 👈 Baja este número si quieres que entre más la DG */
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 📐 CONTROL DE ANCHOS DE COLUMNAS INTERMEDIAS
       Forzamos a que el navegador asigne un ancho idéntico a las celdas numéricas */
    .tabla-contenedor th:nth-child(3), .tabla-contenedor td:nth-child(3), /* Pts */
    .tabla-contenedor th:nth-child(4), .tabla-contenedor td:nth-child(4), /* PJ */
    .tabla-contenedor th:nth-child(5), .tabla-contenedor td:nth-child(5), /* PG */
    .tabla-contenedor th:nth-child(6), .tabla-contenedor td:nth-child(6), /* PE */
    .tabla-contenedor th:nth-child(7), .tabla-contenedor td:nth-child(7), /* PP */
    .tabla-contenedor th:nth-child(8), .tabla-contenedor td:nth-child(8), /* GF */
    .tabla-contenedor th:nth-child(9), .tabla-contenedor td:nth-child(9), /* GC */
    .tabla-contenedor th:nth-child(10), .tabla-contenedor td:nth-child(10) /* DG */ {
        min-width: 20px !important;
        width: 20px !important; /* 👈 Modifica este ancho si quieres celdas más estrechas */
        text-align: center !important;
    }

    /* 🎨 REPARADOR DE LA COLUMNA DG EN MÓVILES
       Mantenemos la simetría y soldamos la cabecera forzando el color negro puro de fondo */
    .tabla-contenedor th:nth-child(10) {
        background: #1e293b !important; /* 👈 Setea tu negro exacto (#000000, #2c3e50, etc) */
        color: #ffffff !important;
        font-weight: 800 !important;
    }
    
    .tabla-contenedor td:nth-child(10) {
        background: transparent !important; /* Mantiene la fila limpia libre de parches visuales */
        font-weight: 800 !important;
    }

    /* Escudo mini adaptado a la rejilla compacta del teléfono */
    .escudo-logo-tabla {
        width: 14px !important;
        height: 14px !important;
    }
}

/* =========================================================================
   💻 DEMOLICIÓN ABSOLUTA: ELIMINA PUNTITOS EN CUALQUIER SUB-CLASE EN PC (VIP V180)
   ========================================================================= */
@media (min-width: 1024px) {
    /* 1. Forzamos a la celda contenedora a estirarse de forma infinita */
    table th:nth-child(2), 
    table td:nth-child(2),
    .nombre-equipo-col, 
    .team-name-cell {
        width: auto !important;
        min-width: 280px !important;
        max-width: none !important;
        overflow: visible !important;
    }

    /* 2. 🚀 LA JUGADA MAESTRA: Buscamos CUALQUIER elemento interno (span, div, a, p) 
       dentro de esa celda y le reventamos los candados ocultos que causan los puntos */
    table td:nth-child(2) *, 
    .nombre-equipo-col *, 
    .team-name-cell * {
        width: auto !important;          /* Liberamos el ancho fijo interno */
        max-width: none !important;      /* Destruimos el tope invisible */
        white-space: nowrap !important;  /* Forzamos que vaya en una sola hilera premium */
        overflow: visible !important;    /* Permitimos que las letras respiren */
        text-overflow: clip !important;   /* 🎯 ¡FUEGO A LOS PUNTITOS! Desaparecen por completo */
    }
}









/* =========================================================================
   🎪 FOOTER MONUMENTAL PREMIUM: COLOR DE LA CABECERA COMPLETA (VIP V600)
   ========================================================================= */
   .footer-monumental-completo {
    background-color: #2c3e50 !important; /* 🎨 El mismo tono oscuro corporativo */
    color: #ffffff !important;
    width: 100vw !important;              /* 🚀 Fuerza el 100% del ancho de la pantalla */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;        /* 🔥 El truco de pizarra para romper márgenes en PC y móviles */
    margin-right: -50vw !important;
    padding: 45px 20px 30px 20px;          /* Aire generoso interior: alto y premium */
    box-sizing: border-box !important;
    border-top: 5px solid #F5B041;        /* 🏆 Línea de gala con tu color ámbar/dorado de la marquesina */
}

/* El chasis interno para que los textos no se desparramen a los lados en pantallas grandes */
.footer-interior-centrado {
    max-width: 1000px;                    /* Alineado al milímetro con tu tabla clasificatoria */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    text-align: left;
}

.footer-columna {
    flex: 1;
    min-width: 220px;                     /* Se vuelve responsivo e hila columnas en vertical en el smartphone */
}

.footer-columna h4 {
    margin: 0 0 15px 0;
    color: #F5B041;                       /* Texto ámbar para los títulos del pie */
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.footer-columna p, .footer-columna span {
    font-size: 13px;
    color: #cbd5e1;                       /* Gris claro pulcro y legible */
    line-height: 1.6;
    margin: 0;
}

.footer-creditos-barra {
    max-width: 1000px;
    margin: 35px auto 0 auto;
    border-top: 1px solid #475569;        /* Línea fina de respiro interior */
    padding-top: 18px;
    text-align: center;
    font-size: 11.5px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}





/* El año o marca de cierre también destella en oro */
.footer-creditos-barra span {
    color: #D4AF37 !important;
    font-size: 11px !important;
}