@font-face {
    font-family: 'OCRExtendida'; 
    src: url('../fonts/ocraextended.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

:root {
    --color-cabecera: #000000; 
    --color-fondo: #d1cece; 
    --color-fondo-perfil:#fafafa;
    --color-lienzo: #080808;          
    --color-acento: #f39c12; 
    --color-incrementos: #eeee46;
    --color-destacado: #acabab;         
    --color-pestana-inactiva: #000000;
    --color-texto-oscuro: #1a1a1a;
    --color-texto-claro: #ffffff;
    --color-texto-acento: #f39c12; 
    --color-placeholder: #a4c9e8;
    --color-fondo-entrada: #ffffff; 
    --color-texto-entrada: #000000;
    --color-cancelar: #8e8f91c5;
    
    --color-comp1: #005792;
    --color-comp2: #44c5f8;
    --color-comp3: #4A90E2;
    --color-comp4: #B3E5FC;

    --fuente-principal: system-ui, -apple-system, sans-serif;
    --fuente-botones: 'OCRExtendida', monospace; 

    --ancho-pestanas: 190px;
    
    --corte-x: 20px; 
    --corte-y: 12px; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo); 
    color: var(--color-texto-oscuro);
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
}

body.vista-privada {
    background-color: var(--color-fondo-perfil); 
}

.contenedor-maestro { 
    width: 100%; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
}

.marco-global { 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}

/* =========================================
   CABECERA OSCURA 
   ========================================= */
.cabecera-principal {
    background-color: var(--color-cabecera);
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
    height: 75px;
    padding-right: 30px;
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - var(--corte-y)), 
        calc(100% - var(--corte-x)) 100%, 
        var(--corte-x) 100%, 
        0 calc(100% - var(--corte-y))
    );
}

.bloque-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px; 
    height: 100%;
    margin-left: 25px;
}

.logo-imagen {
    max-height: 65px; 
    max-width: 90%;   
    height: auto;     
    display: block;
}

.logo-texto {
    font-family: var(--fuente-principal);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-texto-claro);
}

.bloque-eslogan .eslogan-texto {
    font-family: var(--fuente-botones);
    color: var(--color-acento);
    font-size: 1.8rem;    
    font-style: italic;
    font-weight: bold;
    line-height: 1.1;     
    word-wrap: break-word; 
    display: block;  
    text-align: left;
    margin-right: auto;   
    flex-grow: 1;        
    justify-self: start;  
}

/* --- ZONA DE USUARIO E IDIOMA --- */
.bloque-usuario {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--fuente-botones);
    font-size: 0.8rem;
    margin-left: auto;
}

.info-textos { display: flex; flex-direction: column; justify-content: center;}
.texto-acento { color: var(--color-acento); font-weight: bold; margin-bottom: 2px;}
.texto-claro { color: var(--color-texto-claro); cursor: pointer; }

/* --- NUEVO: MICRO-PANEL DE ACCESO --- */
.formulario-acceso {
    display: flex;
    gap: 0px;
    align-items: stretch; 
    height: 50px; 
    font-family: var(--fuente-principal); 
}

.columna-apilada {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}

/* --- NUEVA GEOMETRÍA DEL FORMULARIO DE ACCESO --- */

.input-cabecera {
    height: 46%; 
    width: 140px; 
    padding: 0 15px; 
    font-size: 0.95rem;
    border: none; 
    outline: none;
    color: var(--color-texto-oscuro);
    background-color: var(--color-texto-claro);
}

.input-usuario {
    clip-path: polygon(
        8px 0,
        100% 0,
        calc(100% - 8px) 100%,
        0 100%
    );
}

.input-clave {
    clip-path: polygon(
        0 0,
        calc(100% - 8px) 0,
        100% 100%,
        8px 100%
    );
}

.boton-doble {
    padding: 0 25px 0 20px; 
    font-family: var(--fuente-botones);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
    background-color: var(--color-acento);
    color: var(--color-texto-claro);
    border: none;
    border-radius: 0; 
    transition: filter 0.2s;

    clip-path: polygon(
        8px 0,               
        100% 0,               
        calc(100% - 8px) 50%,
        100% 100%,            
        8px 100%,            
        0 50%                 
    );
}

.boton-doble:hover {
    filter: brightness(1.1);
}

.enlaces-acceso {
    justify-content: space-around; 
    margin-left: 15px;
}

.enlaces-acceso a {
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap; 
}

.enlaces-acceso a:hover {
    text-decoration: underline;
}

.boton-general {
    padding: 12px 24px; 
    font-family: var(--fuente-botones, sans-serif);
    font-weight: 600; /* Un poco más de grosor para que destaque */
    text-transform: uppercase;
    font-size: 1.1rem;
    font-style: normal; /* Quitamos la cursiva para un look más limpio */
    cursor: pointer;
    background-color: var(--color-acento);
    color: var(--color-texto-claro, #fff);
    border: none;
    border-radius: 2px; /* Esquinas ligeramente redondeadas (diseño moderno) */
    transition: all 0.2s ease; /* Transición suave para todos los efectos */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.boton-general:hover {
    filter: brightness(1.1);
    transform: translateY(-1px); /* Pequeño efecto de elevación al pasar el ratón */
}

.boton-general.boton-cancelar {
    background-color: var(--color-cancelar, #666); 
}

/* --- AJUSTE SIMÉTRICO DEL SELECTOR DE IDIOMA --- */
.idioma-bloque {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    height: 50px; 
    align-items: center; 
}

.fila-bandera {
    height: auto; 
    display: flex;
    align-items: center;
}

.bandera-cabecera {
    height: 26px; 
    width: 39px;  
    border-radius: 2px; 
    display: block;
}

.fila-texto-idioma {
    height: auto; 
    display: flex;
    align-items: center;
}

.fila-texto-idioma .texto-acento {
    margin-bottom: 0; 
    font-size: 0.9rem;
}

/* =========================================
   LA SANGRÍA
   ========================================= */
.menu-nivel-1, .menu-nivel-2, .lienzo-principal {
    margin-left: var(--corte-x);
    margin-right: var(--corte-x);
}

/* =========================================
   MENÚ NIVEL 1 
   ========================================= */
.menu-nivel-1 { 
    background-color: transparent; 
    height: 45px; 
    margin-top: -1px; 
    position: relative; 
    z-index: 10;
}

.menu-nivel-1 ul { 
    list-style: none; 
    display: flex; 
    padding-left: 0; 
    height: 100%; 
}

.menu-nivel-1 li {
    font-family: var(--fuente-botones);
    font-size: 1.15rem;
    font-weight: bold;
    color: #333;
    width: var(--ancho-pestanas);
    display: flex;
    align-items: flex-start; 
    justify-content: center;
    cursor: pointer;
    background-color: transparent; 
}

.menu-nivel-1 li a {
    text-decoration: none;
    color: inherit;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    padding-top: 8px;
}

.menu-nivel-1 li.activo {
    background-color: var(--color-cabecera);
    color: var(--color-acento);
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - var(--corte-y)), 
        calc(100% - var(--corte-x)) 100%, 
        var(--corte-x) 100%, 
        0 calc(100% - var(--corte-y))
    );
    filter: drop-shadow(0px 4px 3px rgba(0,0,0,0.4));
}

.menu-nivel-1 li:not(.activo):hover {
    color: var(--color-acento);
    transition: color 0.2s ease;
}

/* =========================================
   MENÚ NIVEL 2 
   ========================================= */
.menu-nivel-2 { 
    background-color: transparent; 
    display: flex; 
    align-items: flex-end; 
    height: 40px; 
    margin-top: 15px; 
}

.menu-nivel-2 ul { 
    list-style: none; 
    display: flex; 
    height: 100%; 
    align-items: flex-end; 
    padding-left: 0; 
    gap: 5px;
}

.menu-nivel-2 li {
    font-family: var(--fuente-botones);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    width: var(--ancho-pestanas);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px; 
    background-color: var(--color-pestana-inactiva);
    color: #e9e7e7;
    /* --- BLINDAJE ANTISOBRESCRITURA --- */
    clip-path: polygon(
        30px 0, 
        calc(100% - 30px) 0, 
        100% 15px, 
        100% 100%, 
        0 100%, 
        0 15px
    ) !important;
    filter: drop-shadow(0px -2px 3px rgba(0,0,0,0.2));
}

.menu-nivel-2 li.activo { 
    background-color: var(--color-lienzo); 
    color: var(--color-acento); 
    font-size: 1.15rem;
}

/* =========================================
   LIENZO PRINCIPAL 
   ========================================= */
.lienzo-principal {
    background-color: var(--color-lienzo);
    min-height: 500px;
    padding: 20px; 
    margin-top: -1px; 
    flex-grow: 1; 
}

/* =========================================
   DASHBOARD: COMPONENTES REUTILIZABLES
   ========================================= */

.bisel-tl-br {
    clip-path: polygon(
        var(--corte-x) 0, 
        100% 0, 
        100% calc(100% - var(--corte-y)), 
        calc(100% - var(--corte-x)) 100%, 
        0 100%, 
        0 var(--corte-y)
    );
}

.bisel-tr-bl {
    clip-path: polygon(
        0 0, 
        calc(100% - var(--corte-x)) 0, 
        100% var(--corte-y), 
        100% 100%, 
        var(--corte-x) 100%, 
        0 calc(100% - var(--corte-y))
    );
}

.bisel-tl-br-bl {
    clip-path: polygon(
        var(--corte-x) 0,                  /* Fin corte Arriba-Izquierda */
        100% 0,                            /* Arriba-Derecha (Recta) */
        100% calc(100% - var(--corte-y)),  /* Inicio corte Abajo-Derecha */
        calc(100% - var(--corte-x)) 100%,  /* Fin corte Abajo-Derecha */
        var(--corte-x) 100%,               /* Inicio corte Abajo-Izquierda (Nuevo) */
        0 calc(100% - var(--corte-y)),     /* Fin corte Abajo-Izquierda (Nuevo) */
        0 var(--corte-y)                   /* Inicio corte Arriba-Izquierda */
    );
}

.bisel-tr-br-bl {
    clip-path: polygon(
        0 0,                               /* Arriba-Izquierda (Recta) */
        calc(100% - var(--corte-x)) 0,     /* Inicio corte Arriba-Derecha */
        100% var(--corte-y),               /* Fin corte Arriba-Derecha */
        100% calc(100% - var(--corte-y)),  /* Inicio corte Abajo-Derecha */
        calc(100% - var(--corte-x)) 100%,  /* Fin corte Abajo-Derecha */
        var(--corte-x) 100%,               /* Inicio corte Abajo-Izquierda */
        0 calc(100% - var(--corte-y))      /* Fin corte Abajo-Izquierda */
    );
}

.bisel-tl-tr-bl {
    clip-path: polygon(
        var(--corte-x) 0, 
        calc(100% - var(--corte-x)) 0, 
        100% var(--corte-y), 
        100% 100%, 
        var(--corte-x) 100%, 
        0 calc(100% - var(--corte-y)), 
        0 var(--corte-y)
    );
}

.entrada-datos {
    background-color: var(--color-fondo-entrada);
    color: var(--color-texto-entrada);
    border: 2px solid var(--color-cabecera, #2c3e50); 
    font-family: var(--fuente-principal, sans-serif); 
    font-size: 0.95rem;
    padding: 6px 12px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.entrada-datos:focus {
    border-color: var(--color-acento, #f39c12); 
}

.entrada-datos-etiqueta {
    color: var(--color-cabecera, #2c3e50);
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-align: right; 
}

.tarjeta-general {
    background-color: var(--color-fondo, #e0e4e8);
    padding: 40px;
    border-top: 4px solid var(--color-acento, #f39c12);
    width: 100%;
    max-width: 650px;
    box-sizing: border-box;
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.4));
}



/* =========================================
   DASHBOARD: COLUMNAS ALINEADAS CON FLEXBOX
   ========================================= */

.contenedor-dashboard {
    display: grid;
    grid-template-columns: 220px 1fr 230px; 
    gap: 20px;
    align-items: stretch; 
}

.columna-izquierda, 
.columna-derecha {
    min-width: 0; 
}

.columna-centro {
    min-width: 0; 
    min-height: 0; /* MAGIA: Evita que la columna cree alturas artificiales */
    display: flex;
    flex-direction: column;
    gap: 20px; 
}

/* 1. CAJA USUARIO: Bisel TR-BL */
.caja-usuario-contexto {
    background-color: var(--color-destacado);
    color: var(--color-texto-claro); 
    font-family: var(--fuente-principal); 
    text-transform: uppercase; 
    letter-spacing: 1px;
    padding: 15px;
    margin-bottom: 20px; 
}

.caja-usuario-contexto select {
    width: 100%;
    padding: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-cabecera);
    font-weight: bold;
    border-radius: 2px;
}

/* Bisel en la esquina inferior derecha */
.bisel-br {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

/* 2. BLOQUE ÚNICO COLECCIONABLES: Bisel TL-BR */
.bloque-coleccionables-unico {
    background-color: var(--color-texto-claro);
    overflow: hidden; 
    padding-bottom: 0px; 
    /* ¡ELIMINADO el height: 100% que causaba el estiramiento infinito! */
}

.cabecera-bloque {
    background-color: var(--color-destacado);
    color: var(--color-texto-claro); 
    font-family: var(--fuente-principal); 
    font-size: 0.9rem;
    font-weight: bold;
    padding: 15px;
    letter-spacing: 1px;
    text-align: center;
    border-bottom: 2px solid rgba(0,0,0,0.1);
}

.lista-categorias {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categoria-item {
    background-color: transparent; 
    transition: background 0.2s ease;
}

.categoria-item a {
    display: block;
    padding: 12px 15px;
    color: var(--color-texto-oscuro);
    text-decoration: none;
    font-weight: bold;
    font-family: var(--fuente-principal);
    border-bottom: 1px solid rgba(0,0,0,0.03); 
}

.categoria-item.cat-activa {
    background-color: transparent; 
    border-left: 4px solid var(--color-acento);
}

.categoria-item.cat-activa a {
    color: var(--color-acento);
    border-bottom-color: transparent;
}

.categoria-item:hover:not(.cat-activa) {
    background-color: rgba(0,0,0,0.05);
}

/* Estilo para los coleccionables desactivados (Corregido: sin el 'span' fantasma) */
.lista-categorias .cat-desactivada {
    cursor: default;
    color: #999999 !important; 
    display: block;
    font-size: inherit; 
    font-weight: bold;
    padding: 12px 15px; /* Aquí está el margen para que se alineen con Botellas */
    border-bottom: 1px solid rgba(0,0,0,0.03); /* Para que mantengan la rayita separadora */
}

/* El ansiado respiro final para la caja blanca (Ahora sí funcionará) */
.lista-categorias > :last-child {
    padding-bottom: 15px !important;
}

/* COLUMNAS CENTRAL Y DERECHA */

.tarjeta-grafica {
    background-color: var(--color-texto-claro);
    /* Cambiamos el tercer número (bottom) de 25px a 5px */
    padding: 20px 25px 20px 25px; 
    margin-bottom: 0; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    
    flex: 1; 
    display: flex;
    flex-direction: column;
    min-width: 0; 
    min-height: 0; /* MAGIA: Evita que la tarjeta dependa de sus hijos */
}

.tarjeta-estadistica {
    background-color: var(--color-texto-claro);
    /* Desglosamos el 'padding: 20px' original para dejar solo 5px abajo */
    /* El orden es: Arriba (20px) Derecha (20px) Abajo (5px) Izquierda (20px) */
    padding: 20px 20px 5px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    border-left: 4px solid var(--color-acento);
}

.tarjeta-grafica h3, .tarjeta-estadistica h4 {
    margin-top: 0;
    color: var(--color-cabecera);
    margin-bottom: 0px;
}

.espacio-grafica {
    position: relative;
    width: 100%;
    /* Quitamos el flex: 1 y el min-height: 0 que lo hacían colapsar */
    min-height: 330px; /* MAGIA REAL: Nunca encogerá por debajo de esto */
    flex-grow: 1;
}
/*
.espacio-grafica canvas {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
*/
.dato-destacado {
    font-size: 2.2rem;
    font-family: var(--fuente-botones);
    color: var(--color-acento);
    margin: 5px 0 0 0;
    line-height: 1;
}

.sub-dato {
    margin: 8px 0 0 0;
    font-size: 0.8rem;
    color: var(--color-texto-oscuro);
    font-weight: bold;
}

/* BLOQUE DE AJUSTES DERECHA */
.bloque-ajustes {
    background-color: var(--color-texto-claro);
    margin-top: 20px;
}

.cuerpo-ajustes {
    padding: 15px;
}

.grupo-ajuste {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.grupo-ajuste .titulo-seccion {
    font-family: var(--fuente-principal);
    font-size: 1rem; 
    font-weight: bold;
    color: #000000;
    text-transform: none; 
    margin: 0;
}

.selector-opciones {
    display: flex;
    gap: 12px;
}

.selector-opciones input[type="radio"] {
    display: none;
}

.selector-opciones label {
    font-family: var(--fuente-principal);
    font-size: 1rem; 
    color: #999999;
    text-transform: none; 
    cursor: pointer;
    transition: all 0.2s;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.selector-opciones input[type="radio"]:checked + label {
    color: var(--color-acento);
    border-bottom: 2px solid var(--color-acento);
}

.contenedor-reset {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

#opcion_ahora.activo {
    color: var(--color-acento);
    border-bottom: 2px solid var(--color-acento);
}

.texto-reset {
    font-family: var(--fuente-principal);
    font-size: 1rem;
    font-weight: bold;
    color: #000000;
    text-transform: none;
}

.boton-ahora {
    background: none;
    border: none;
    padding: 0;
    padding-bottom: 2px;
    font-family: var(--fuente-principal);
    font-size: 1rem;
    color: var(--color-acento);
    text-transform: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.boton-ahora:hover {
    border-bottom: 2px solid var(--color-acento);
}

/* =========================================
   PIE DE PÁGINA 
   ========================================= */
.pie-principal {
    background-color: var(--color-cabecera);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; 
    clip-path: polygon(
        var(--corte-x) 0, 
        calc(100% - var(--corte-x)) 0, 
        100% var(--corte-y), 
        100% 100%, 
        0 100%, 
        0 var(--corte-y)
    );
}

.enlaces-pie {
    list-style: none;
    display: flex;
    gap: 20px;
    color: var(--color-acento);
    font-family: var(--fuente-botones);
    font-weight: bold;
    font-size: 0.95rem;
}

.enlaces-pie li {
    cursor: pointer;
}

/* --- SISTEMA DE DESPLEGABLE DE IDIOMAS POR CLICK --- */

.idioma-bloque {
    position: relative;
}

.idioma-bloque .idioma-desplegable {
    display: none;
    position: absolute;
    top: 0;
    right: 100%;
    background-color: #1a2229; 
    border: 1px solid var(--color-acento, #f39c12);
    min-width: max-content;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    z-index: 9999;
    margin-right: 10px;
    padding: 4px 0;
}

.idioma-bloque.abierto .idioma-desplegable {
    display: flex;
    flex-direction: row;
}

.idioma-desplegable .idioma-opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-family: var(--fuente-botones);
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

.idioma-desplegable .idioma-opcion:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-acento, #f39c12);
}

.idioma-desplegable .bandera-menu {
    width: 30px;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 3px;
}

/* =========================================
   SISTEMA DE RADAR DE RIVALES (CALL-OUTS) 
   ========================================= */

.bloque-radar {
    margin-bottom: 20px;
    border-left: none !important;
}

.timeline-rivales {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px; /* (3) Interespaciado entre clasificados al mínimo */
    padding: 16px 15px 18px 15px; /* (1) Rebajado drásticamente el espacio superior e inferior */
    min-height: 220px;
}

.nodo-rival {
    display: flex;
    align-items: center; 
    position: relative;
    padding: 1px 0;
}

/* (1) LA LÍNEA VERTICAL: Ajustada 1px más a la izquierda y con continuidad */
.nodo-rival::after {
    content: '';
    position: absolute;
    left: 4px;  /* Movida al eje exacto solicitado */
    top: 50%;   /* Nace clavada en el centro del punto del #1 */
    height: calc(100% + 9px); /* Rompe el vacío uniendo los bloques a través del nuevo gap */
    width: 2px;
    background-color: var(--color-destacado); 
    z-index: 1;
}

/* El tramo intermedio entre el líder y tu zona mantiene el punteado continuo y visible */
.tramo-punteado::after {
    background-color: transparent !important;
    width: 0 !important;
    border-left: 2px dotted var(--color-destacado) !important;
}

/* (1) Prolongación por debajo del último punto para dar sensación de continuidad */
.nodo-rival:last-of-type::after {
    display: block !important;
    height: 12px; /* Supera el último punto y se extiende limpiamente hacia el final de la caja */
}

/* --- ELEMENTOS DEL EJE --- */
.punto-eje {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    z-index: 4;
}

.linea-guia {
    width: 12px; 
    height: 2px;
    flex-shrink: 0;
}

/* CAJAS SIN FONDOS PARA EL RESTO */
.caja-rival {
    flex-grow: 1;
    padding: 3px 10px; 
    display: flex;
    flex-direction: column;
    gap: 1px; 
    min-width: 0; 
    background-color: transparent;
}

/* --- JUEGO DE COLORES DE LA INTERFAZ --- */

/* OTROS USUARIOS (GRIS) */
.nodo-gris .punto-eje { background-color: var(--color-destacado); }
.nodo-gris .linea-guia { background-color: var(--color-destacado); }

/* NÚMERO 1 (AZUL CABECERA) */
.nodo-top1 .punto-eje { background-color: var(--color-cabecera); }
.nodo-top1 .linea-guia { background-color: var(--color-cabecera); }
.nodo-top1 .rival-nombre-linea { color: var(--color-cabecera); }

/* (3) USUARIO ACTUAL: RECUPERA EL FONDO DE DESTACADO INTEGRADO */
.nodo-yo .punto-eje { background-color: var(--color-acento); }
.nodo-yo .linea-guia { background-color: var(--color-acento); }
.nodo-yo .rival-nombre-linea { color: var(--color-acento); }

.nodo-yo .caja-rival {
    background-color: rgba(243, 156, 18, 0.08); /* Fondo limpio, sutil y corporativo */
    border-left: 3px solid var(--color-acento);
    clip-path: polygon(
        6px 0, 
        100% 0, 
        100% calc(100% - 6px), 
        calc(100% - 6px) 100%, 
        0 100%, 
        0 6px
    );
    padding: 8px 10px;
}

/* (4) DESTACAR EL PUESTO DEL USUARIO (#7) EN LA CAJA ACTIVADA */
.nodo-yo .rival-puesto-mini {
    background-color: var(--color-acento);
    color: var(--color-texto-claro);
    padding: 2px 5px;
    padding: 0px 5px;
    border-radius: 2px;
    font-weight: bold;
}

/* --- TEXTOS UNIFICADOS (SIN OCR) --- */
.rival-nombre-linea {
    font-weight: bold;
    font-family: var(--fuente-principal); 
    color: var(--color-texto-oscuro);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    display: block;
    width: 100%;
    line-height: 1.2;
}

.rival-datos-linea {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-family: var(--fuente-principal);
    font-size: 0.85rem; 
    line-height: 1.2;
}

.rival-puesto-mini {
    font-family: var(--fuente-principal); 
    font-weight: bold;
    color: var(--color-cabecera);
    transition: all 0.2s;
}

.rival-total-mini {
    font-weight: bold;
}

.rival-distancia-mini {
    font-weight: bold;
    font-family: var(--fuente-principal); 
}

/* Estilos para los enlaces de los nombres en el ránking */
a.enlace-rival {
    text-decoration: none !important; /* Cero subrayados, nunca */
    color: inherit; /* Mantiene su color original en reposo */
    cursor: pointer;
    transition: color 0.2s ease, text-shadow 0.2s ease; /* Transición suave */
}

a.enlace-rival:hover {
    color: var(--color-acento) !important; /* Al pasar el ratón se vuelve naranja */
    
}



/* COLORES DE INTERFACES DE COMPETICIÓN */
.dif-positiva { color: #27ae60; } 
.dif-negativa { color: #e74c3c; }

/* Quita la línea divisoria del último ajuste para que no flote en la nada */
.cuerpo-ajustes .grupo-ajuste:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.modal-fondo-oscuro {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex; /* Cambiado de none a flex cuando se activa */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(3px);
}

.modal-caja {
    width: 100%;
    max-width: 850px;
    animation: aparecerModal 0.3s ease-out;
}

.grid-idiomas {
    display: grid;
    /* Fuerza exactamente 4 columnas de igual tamaño */
    grid-template-columns: repeat(4, 1fr); 
    /* Aumentamos el gap para que respiren mejor */
    gap: 15px; 
    max-height: 50vh;
    overflow-y: auto;
}

.opcion-idioma-grid {
    display: flex; 
    align-items: center; 
    gap: 12px;
    /* Aumentamos el padding para que la caja sea más robusta y ancha visualmente */
    padding: 8px; 
    border: 2px solid #ecf0f1;
    border-radius: 0px;
    text-decoration: none;
    color: var(--color-texto-oscuro, #333);
    font-weight: bold;
    background-color: #fcfcfc;
    transition: all 0.2s ease;
}

.opcion-idioma-grid:hover {
    border-color: var(--color-acento, #e67e22);
    background-color: #fff;
}

.opcion-idioma-grid.idioma-activo {
    border-color: var(--color-acento, #e67e22);
    background-color: var(--color-acento, #e67e22);
}

.bandera-modal { width: 32px; height: auto; border-radius: 3px; }

@keyframes aparecerModal {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}


/* --- ESTILO GENERAL (RECTANGULAR) --- */
.fila-coleccion-general, 
.contenedor-barra-general, 
.barra-progreso-general,
.columna-logros-general {
    border-radius: 0 !important;
}

.fila-coleccion-general {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 50px;
    background: #fcfcfc;
    border: 1px solid #dcdcdc;
    margin-bottom: 10px;
    padding: 0 10px;
}

.icono-general {
    width: 32px;
    height: 32px;
    border: 1px solid #999;
}

.contenedor-barra-general {
    flex-grow: 1;
    height: 12px;
    background: #e0e0e0;
    border: 1px solid #999;
    position: relative;
}

.barra-progreso-general {
    height: 100%;
    background: var(--color-acento);
}

.texto-puesto-general {
    width: 70px;
    font-family: monospace;
    font-size: 0.85rem;
    text-align: right;
    font-weight: bold;
}

/* --- ICONOS DE DISTINCIONES (BEERCORANK) --- */
.distincion-icono { width: 20px; height: 20px; display: inline-block; flex-shrink: 0; }
.triangulo-invertido-azul { background-color: #007BFF; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.estrella-amarilla { background-color: #FFD700; clip-path: polygon(50% 0%, 65% 33%, 100% 33%, 72% 57%, 82% 95%, 50% 73%, 18% 95%, 28% 57%, 0% 33%, 35% 33%); }
.estrella-naranja { background-color: #FF8C00; clip-path: polygon(50% 0%, 65% 33%, 100% 33%, 72% 57%, 82% 95%, 50% 73%, 18% 95%, 28% 57%, 0% 33%, 35% 33%); }.rombo-amarillo { background-color: #FFD700; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.rombo-naranja { background-color: #FF8C00; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.punto-rojo { background-color: #DC3545; border-radius: 50%; }
.chevron-rojo { background-color: #DC3545; clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }
.chevron-negro { background-color: #222222; clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }


/* Flecha del selector de países (Escritorio por defecto) */
.flecha-contexto {
    position: absolute;
    bottom: 0;
    right: 0px;
    font-size: 0.65rem;
    color: #555555;
    line-height: 1;
}

/* Ocultamos los controles móviles en PC por defecto */
.controles-moviles { display: none; }

/* =========================================
   TABLAS DESLIZABLES (EFECTO CHINCHETA MÓVIL)
   ========================================= */

/* Damos un color de fondo base a las filas para que los datos que pasan por debajo de la chincheta no se transparenten */
.fila-tabla-datos {
    background-color: #ffffff;
}
.fila-tabla-datos:hover {
    background-color: #f4f4f4 !important;
}


/* 1. Volvemos a ponerlos uno al lado del otro */
    #bloque-central-historico {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    /* 2. El gráfico vuelve a la izquierda y ocupa el espacio disponible */
    .caja-grafico-historica {
        flex: 1 1 auto !important;
        min-width: 0 !important; /* Vital para que Highcharts no desborde la pantalla */
    }

    /* 3. La tabla vuelve a su sitio a la derecha */
    .caja-tabla-historica {
        flex: 0 0 auto !important;
        margin-left: 20px !important; /* Separación original entre el gráfico y los datos */
    }

    /* =========================================
   ESTILOS PARA PÁGINAS LEGALES (BASE Y PC)
   ========================================= */
.tarjeta-legal {
    max-width: 1050px; 
    width: 100%; 
    height: 70vh; 
    display: flex; 
    flex-direction: column; 
    padding: 35px; 
    box-sizing: border-box;
}

.cabecera-legal {
    display: flex; 
    align-items: center; 
    gap: 25px; 
    margin-bottom: 20px; 
    border-bottom: 2px solid #e0e0e0; 
    padding-bottom: 15px; 
    flex-shrink: 0;
}

.logo-legal {
    height: 55px; 
    width: auto;
    max-width: 100%;
}

.titulo-legal {
    color: var(--color-cabecera, #2c3e50); 
    margin: 0; 
    font-family: var(--fuente-botones, sans-serif); 
    text-transform: uppercase; 
    font-style: italic; 
    letter-spacing: 1px; 
    font-size: 1.5rem;
}

.cuerpo-legal {
    background-color: #ffffff; 
    color: var(--color-texto, #333); 
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 30px; 
    border: 1px solid #ccc; 
    box-sizing: border-box; 
    line-height: 1.6; 
    font-size: 0.95rem; 
    text-align: left; 
    display: flex; 
    flex-direction: column; 
    gap: 20px;
}

/* =========================================
   MODO MÓVIL (APP NATIVA) < 1024px
   ========================================= */
@media (max-width: 1280px) {

    /* =========================================================
       DOMINAR EL TACTO SOBRE EL GRÁFICO (SOLO MÓVIL)
       ========================================================= */
       
    /* Opción A: Le decimos al navegador que priorice el deslizamiento (scroll) */
    #bloque-central-historico .caja-grafico-historica,
    .highcharts-container,
    .highcharts-root {
        touch-action: pan-x pan-y !important; 
    }

    /* Reducción proporcional de todas las fuentes en móvil */
    html {
        font-size: 16px !important; /* El original suele ser 16px */
    }
    
    /* --- 1. CABECERA --- */
    .cabecera-principal {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
        height: 65px !important;
        clip-path: none !important;
    }
    
    .bloque-logo {
        width: auto !important;
        margin: 0 !important;
    }
    
    .logo-imagen {
        max-height: 40px !important; 
    }

    .bloque-eslogan {
        display: none !important; 
    }

    .formulario-acceso, 
    .usuario-logueado,
    .menu-nivel-1, 
    .menu-nivel-2 { /* <-- Vuelve aquí para ocultar las tabs */
        display: none !important; 
    }

    /* --- 2. COLUMNAS Y CONTENIDO --- */
    .contenedor-dashboard {
        grid-template-columns: 1fr !important; 
        padding: 10px 0 !important; 
        gap: 20px !important;
    }

    .lienzo-principal {
        margin: 0 !important;
        padding: 15px !important;
    }

    /* --- 3. PIE DE PÁGINA --- */
    .pie-principal {
        clip-path: none !important;
        height: auto !important;
        padding: 15px !important;
    }
    
    .enlaces-pie {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        text-align: center;
    }

    /* =========================================
       4. CONTROLES MÓVIL (Avatar, Idioma, Menú)
       ========================================= */
    .banner-verificacion { display: none !important; }
    .bloque-usuario .idioma-bloque { display: none !important; }

    .controles-moviles {
        display: flex !important;
        align-items: center;
        gap: 10px; 
    }

    /* Cajas cuadradas maestras */
    .btn-movil-icono {
        background: var(--color-cabecera, #000);
        border: 2px solid var(--color-acento, #ff9800) !important;
        border-radius: 2px !important; 
        width: 38px !important;
        height: 38px !important;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        box-sizing: border-box;
    }
    
    .btn-movil-icono svg {
        width: 22px;
        height: 22px;
        stroke: var(--color-acento, #ff9800);
        stroke-width: 2.5; 
        fill: none;
        stroke-linecap: square; 
        stroke-linejoin: miter;
    }

    .avatar-movil {
        width: 100%;
        height: 100%;
        border-radius: 0; 
        object-fit: cover;
    }

    .btn-movil-icono.btn-idioma-txt {
        color: var(--color-acento, #ff9800) !important;
        font-family: var(--fuente-botones, sans-serif) !important;
        font-weight: bold !important;
        font-size: 1.15rem !important;
    }

    .punto-rojo-notif {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 14px;
        height: 14px;
        background-color: #d65454;
        border-radius: 50%;
        border: 2px solid #000;
    }

    /* ARREGLO BOTÓN COMPARTIR (Blindaje absoluto) */
    body .header-fab-bar { 
        top: auto !important; 
        bottom: 25px !important; 
        position: fixed !important; 
        z-index: 9999999 !important; /* Capa máxima por encima de cualquier menú */
        display: flex !important; /* Forzamos a que la barra no colapse */
        visibility: visible !important;
    }
    
    .header-fab-bar .header-fab {
        display: none !important;
    }
    
    .header-fab-bar #ayuda-fab-compartir {
        display: flex !important;
        width: 55px !important;
        height: 55px !important;
        border-radius: 50% !important;
        background-color: var(--color-acento) !important;
        border: none !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .header-fab-bar #ayuda-fab-compartir svg {
        stroke: #ffffff !important;
        width: 24px !important;
        height: 24px !important;
        stroke-width: 2 !important;
    }

    /* --- DROPDOWNS --- */
    .wrap-dropdown-movil { position: relative; }

    .caja-dropdown-movil {
        display: none; 
        position: absolute;
        top: 48px; 
        right: 0;
        background: var(--color-cabecera, #000);
        border: 2px solid var(--color-acento, #ff9800); 
        border-radius: 2px;
        width: 220px;
        z-index: 99999;
        flex-direction: column;
        box-shadow: 0 10px 25px rgba(0,0,0,0.8);
        overflow: hidden;
    }

    .caja-login { padding: 15px; }
    
    /* Inputs del login en el móvil (Ahora en BLANCO) */
    .inp-drop {
        width: 100%;
        padding: 10px;
        margin-bottom: 12px;
        box-sizing: border-box;
        background: #ffffff; /* Fondo blanco */
        border: 1px solid #ccc; /* Borde gris suave */
        color: #000000; /* Texto oscuro */
        font-family: var(--fuente-principal);
        border-radius: 2px;
    }
    .inp-drop:focus { outline: none; border-color: var(--color-acento, #ff9800); }
    
    .btn-drop-naranja {
        width: 100%;
        background: var(--color-acento, #ff9800);
        color: #000;
        border: none;
        padding: 12px;
        font-weight: bold;
        cursor: pointer;
        text-transform: uppercase;
        font-family: var(--fuente-botones);
        border-radius: 2px;
    }

    .enlaces-drop {
        display: flex;
        flex-direction: column; /* Los apilamos de arriba a abajo */
        align-items: center; /* Los centramos bien bonitos */
        gap: 12px; /* Le damos 12px de aire entre uno y otro */
        margin-top: 15px;
    }
    .enlaces-drop a { color: var(--color-acento, #ff9800); font-size: 0.85rem; text-decoration: none; font-weight: bold; }

    /* El nombre del usuario (sin el 'Hola') */
    .item-drop-texto {
        padding: 12px 15px;
        color: var(--color-acento, #ff9800);
        font-size: 1.05rem;
        font-weight: bold;
        border-bottom: 1px solid #333;
    }
    .item-drop-enlace {
        display: block;
        padding: 14px 15px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        border-bottom: 1px solid #333;
        font-family: var(--fuente-botones);
        transition: background 0.2s;
    }
    .item-drop-enlace:last-child { border-bottom: none; }
    
    /* La alerta de email discreta abajo */
    .item-drop-alerta-discreta {
        display: block;
        padding: 10px 15px;
        background: #111; 
        color: #ff9800 !important; /* Forzamos el naranja para evitar el azul de los links */
        text-decoration: none !important; /* Adiós subrayado feo */
        font-size: 0.85rem;
        border-top: 1px solid #333;
        text-align: center;
        transition: background 0.2s;
    }
    .item-drop-alerta-discreta:hover {
        background: #222;
    }

    /* --- ESTILOS DE LAS PERSIANAS (ACORDEONES) --- */
    .item-grupo-movil {
        border-bottom: 1px solid #333;
    }
    .item-grupo-movil:last-child {
        border-bottom: none;
    }
    
    .btn-persiana {
        width: 100%;
        text-align: left;
        background: transparent;
        color: #fff;
        border: none;
        padding: 14px 15px;
        font-weight: bold;
        font-family: var(--fuente-botones);
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .btn-persiana .icono-flecha {
        font-size: 0.8rem;
        color: var(--color-acento, #ff9800);
        transition: transform 0.2s ease;
    }
    
    .contenido-persiana {
        display: none; /* Oculto por defecto */
        background: #111; /* Un tono más oscuro para diferenciar el submenú */
        border-top: 1px dashed #333;
    }
    
    /* El enlace del submenú */
    .item-drop-enlace.sub-item {
        padding: 12px 15px 12px 30px; /* Más padding izquierdo para hacer sangría */
        font-size: 1rem;
        color: #ccc;
        border-bottom: 1px dashed #222;
        font-weight: normal;
    }

    /* =========================================
       ARREGLO MODALES (Idiomas, Compartir, etc.)
       ========================================= */
    .modal-caja {
        width: 92% !important; /* Deja un pequeño margen respecto a la pantalla */
        padding: 20px 15px !important; /* Menos padding lateral para ganar espacio */
        max-height: 85vh !important; /* Evita que se salga por arriba/abajo */
        overflow-y: auto !important; /* Añade scroll si hay muchos idiomas */
        box-sizing: border-box !important;
    }

    /* Ajuste de la cabecera del modal para que no se corte "LANGUAGE" */
    #modal-idiomas .modal-caja > div:first-child {
        gap: 10px !important; /* Acercamos el logo al texto */
        justify-content: center !important; /* Centramos todo para que respire */
        flex-wrap: wrap !important; /* Si la palabra es enorme, baja de línea */
    }
    
    #modal-idiomas .modal-caja > div:first-child h2 {
        font-size: 1.25rem !important; /* Reducimos el tamaño de la letra */
        text-align: center !important;
    }
    
    #modal-idiomas .modal-caja > div:first-child img {
        height: 30px !important; /* Encogemos un poco el logo */
    }
    
    /* Ajuste de los botones de idioma para que quepan en 2 columnas exactas */
    .grid-idiomas {
        grid-template-columns: 1fr 1fr !important; /* ¡Esta es la clave! Fuerza 2 columnas iguales */
        gap: 10px !important;
    }
    .opcion-idioma-grid {
        padding: 8px 5px !important;
        font-size: 0.9rem !important;
    }

    /* =========================================
       ACORDEÓN DE COLECCIONABLES (MÓVIL DEFINITIVO)
       ========================================= */
    ul.lista-categorias:not(.desplegado) li.categoria-item:not(.cat-activa) {
        display: none !important;
    }
    
    ul.lista-categorias.desplegado li.categoria-item:not(.cat-activa) {
        display: block !important;
    }
    
    ul.lista-categorias:not(.desplegado) li.categoria-item.cat-activa a::after {
        content: ' ▼';
        float: right;
        color: var(--color-acento);
    }
    
    ul.lista-categorias.desplegado li.categoria-item.cat-activa a::after {
        content: ' ▲';
        float: right;
        color: var(--color-acento);
    }

    /* =========================================
       CAJAS DE AJUSTES UNIVERSALES (MÓVIL)
       ========================================= */
    /* 1. Ocultamos el cuerpo de la caja por defecto */
    .bloque-ajustes-universal:not(.desplegado) .cuerpo-ajustes-plegable {
        display: none !important;
    }
    
    /* 2. Lo mostramos cuando tiene la clase desplegado */
    .bloque-ajustes-universal.desplegado .cuerpo-ajustes-plegable {
        display: block !important;
    }
    
    /* 3. Estilizamos la cabecera para que parezca un botón */
    .bloque-ajustes-universal .gatillo-ajustes {
        cursor: pointer;
        user-select: none;
    }
    
    /* 4. Flecha hacia ABAJO (Cerrado) - AHORA NEGRA */
    .bloque-ajustes-universal:not(.desplegado) .gatillo-ajustes::after {
        content: ' ▼';
        float: right;
        color: #000000; /* Color negro forzado */
    }
    
    /* 5. Flecha hacia ARRIBA (Abierto) - AHORA NEGRA */
    .bloque-ajustes-universal.desplegado .gatillo-ajustes::after {
        content: ' ▲';
        float: right;
        color: #000000; /* Color negro forzado */
    }



    /* =========================================================
   TABLA DESLIZABLE MÓVIL (ESCUDO SÓLIDO SIN GRIETAS)
   ========================================================= */


    
    /* 1. El carril que aísla el scroll lateral */
    .envoltorio-scroll-movil {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        padding-bottom: 15px; 
    }

    /* 2. Ancho de la tabla (Mantiene tu grid y tus "..." intactos) */
    .envoltorio-scroll-movil #grid-tabla-central {
        min-width: 800px !important; 
        grid-template-columns: 50px 40px 140px 1fr minmax(75px, max-content) max-content max-content max-content max-content !important;
    }
    .envoltorio-scroll-movil.sin-banderas #grid-tabla-central {
        grid-template-columns: 50px 140px 1fr minmax(75px, max-content) max-content max-content max-content max-content !important;
    }

    /* ----------------------------------------------------
       3. CHINCHETAS Y MURO DE HORMIGÓN (Adiós transparencias y sombras)
       ---------------------------------------------------- */
       
    /* Columna 1: Nº */
    .envoltorio-scroll-movil #grid-tabla-central > div > div:nth-child(1) {
        position: sticky !important; left: 0; z-index: 20 !important;
        background-color: #ffffff !important;
        /* -15px tapa la fuga izquierda, 12px tapa el gap derecho */
        box-shadow: -15px 0 0 #ffffff, 12px 0 0 #ffffff; 
    }

    /* --- SI HAY BANDERAS --- */
    /* Columna 2: Bandera */
    .envoltorio-scroll-movil:not(.sin-banderas) #grid-tabla-central > div > div:nth-child(2) {
        position: sticky !important; left: 62px; z-index: 20 !important;
        background-color: #ffffff !important;
        box-shadow: -12px 0 0 #ffffff, 12px 0 0 #ffffff; 
    }
    /* Columna 3: Nombre */
    .envoltorio-scroll-movil:not(.sin-banderas) #grid-tabla-central > div > div:nth-child(3) {
        position: sticky !important; left: 114px; z-index: 20 !important;
        background-color: #ffffff !important;
        /* Sombra sólida plana (sin difuminar) para tapar el último gap */
        box-shadow: -12px 0 0 #ffffff, 12px 0 0 #ffffff; 
    }

    /* --- SI NO HAY BANDERAS --- */
    /* Columna 2: Nombre */
    .envoltorio-scroll-movil.sin-banderas #grid-tabla-central > div > div:nth-child(2) {
        position: sticky !important; left: 62px; z-index: 20 !important;
        background-color: #ffffff !important;
        box-shadow: -12px 0 0 #ffffff, 12px 0 0 #ffffff;
    }

    /* ----------------------------------------------------
       4. HOVER NATIVO (Las columnas fijas copian el fondo gris)
       ---------------------------------------------------- */
    .envoltorio-scroll-movil #grid-tabla-central > div:hover > div:nth-child(1) {
        background-color: #f4f4f4 !important;
        box-shadow: -15px 0 0 #f4f4f4, 12px 0 0 #f4f4f4;
    }
    .envoltorio-scroll-movil:not(.sin-banderas) #grid-tabla-central > div:hover > div:nth-child(2) {
        background-color: #f4f4f4 !important;
        box-shadow: -12px 0 0 #f4f4f4, 12px 0 0 #f4f4f4;
    }
    .envoltorio-scroll-movil:not(.sin-banderas) #grid-tabla-central > div:hover > div:nth-child(3) {
        background-color: #f4f4f4 !important;
        box-shadow: -12px 0 0 #f4f4f4, 12px 0 0 #f4f4f4;
    }
    .envoltorio-scroll-movil.sin-banderas #grid-tabla-central > div:hover > div:nth-child(2) {
        background-color: #f4f4f4 !important;
        box-shadow: -12px 0 0 #f4f4f4, 12px 0 0 #f4f4f4;
    }

    /* EXCEPCIÓN CABECERA (Nunca se pone gris) */
    .envoltorio-scroll-movil #grid-tabla-central > div:first-child:hover > div:nth-child(1) {
        background-color: #ffffff !important;
        box-shadow: -15px 0 0 #ffffff, 12px 0 0 #ffffff;
    }
    .envoltorio-scroll-movil:not(.sin-banderas) #grid-tabla-central > div:first-child:hover > div:nth-child(2) {
        background-color: #ffffff !important;
        box-shadow: -12px 0 0 #ffffff, 12px 0 0 #ffffff;
    }
    .envoltorio-scroll-movil:not(.sin-banderas) #grid-tabla-central > div:first-child:hover > div:nth-child(3) {
        background-color: #ffffff !important;
        box-shadow: -12px 0 0 #ffffff, 12px 0 0 #ffffff;
    }
    .envoltorio-scroll-movil.sin-banderas #grid-tabla-central > div:first-child:hover > div:nth-child(2) {
        background-color: #ffffff !important;
        box-shadow: -12px 0 0 #ffffff, 12px 0 0 #ffffff;
    }


    /* ----------------------------------------------------
       5. REDISTRIBUCIÓN DE BISELES (SOLO MÓVIL)
       ---------------------------------------------------- */
       
    /* Caja 3 (Gráfico): Arriba-Derecha y Abajo-Izquierda */
    .tarjeta-grafica {
        clip-path: polygon(0 0, calc(100% - var(--corte-x)) 0, 100% var(--corte-y), 100% 100%, var(--corte-x) 100%, 0 calc(100% - var(--corte-y))) !important;
    }

    /* Polígono Arriba-Izquierda y Abajo-Derecha (bisel-tl-br) */
    #panel_ajustes,
    #ayuda-vision-general,
    #ayuda-ajustes,
    #ayuda-puesto-nacional, /* <-- CAMBIADO AQUÍ */
    #ayuda-acciones,
    #tarjeta-galeria-derecha,
    #ayuda-panel-acciones,
    #ayuda-panel-nuevo-reto,
    #ayuda-lista-noticias {
        clip-path: polygon(var(--corte-x) 0, 100% 0, 100% calc(100% - var(--corte-y)), calc(100% - var(--corte-x)) 100%, 0 100%, 0 var(--corte-y)) !important;
    }

    /* Polígono Arriba-Derecha y Abajo-Izquierda (bisel-tr-bl) */
    #ctrl-entorno,
    #ayuda-puesto-mundial, /* <-- CAMBIADO AQUÍ */
    #caja-ajustes {
        clip-path: polygon(0 0, calc(100% - var(--corte-x)) 0, 100% var(--corte-y), 100% 100%, var(--corte-x) 100%, 0 calc(100% - var(--corte-y))) !important;
    }

   /* =========================================================
   HISTÓRICO MÓVIL: DISEÑO ORIGINAL CON CHINCHETAS
   ========================================================= */


    /* 1. Activamos el carril de scroll maestro */
    #bloque-central-historico {
        display: flex !important;
        flex-direction: row !important; /* De izquierda a derecha */
        flex-wrap: nowrap !important; /* Prohíbe que salten de línea */
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px !important;
        align-items: flex-start !important;
    }

    /* 2. PROTECCIÓN ANTI-APLASTAMIENTO (El secreto para que haya scroll) */
    
    /* El Gráfico (Primer elemento) */
    #bloque-central-historico > div:nth-child(1) {
        min-width: 750px !important; /* Anchura mínima garantizada */
        flex-shrink: 0 !important; /* Prohibido encogerse */
    }

    /* La Tabla (Segundo elemento) */
    #bloque-central-historico > div:nth-child(2) {
        min-width: max-content !important; 
        flex-shrink: 0 !important; /* Prohibido encogerse */
        padding-right: 20px !important;
    }

    /* 3. Las Chinchetas de la tabla */
    #bloque-central-historico .col-num,
    #bloque-central-historico .col-pais,
    #bloque-central-historico .col-nom {
        position: sticky !important;
        z-index: 20 !important;
        background-color: #ffffff !important; /* Fondo opaco */
    }

    /* Posiciones de anclaje a la izquierda */
    #bloque-central-historico .col-num  { left: 0 !important; }
    #bloque-central-historico .col-pais { left: 35px !important; }
   #bloque-central-historico .col-nom  { left: 75px !important; }

    /* Ajuste si tu JS oculta el país en Ajustes */
    #bloque-central-historico .col-pais[style*="display: none"] ~ .col-nom { 
        left: 35px !important; 
    }

    /* Mantenemos el color gris del hover */
    #bloque-central-historico .fila-usuario:hover .col-num,
    #bloque-central-historico .fila-usuario:hover .col-pais,
    #bloque-central-historico .fila-usuario:hover .col-nom {
        background-color: #f4f4f4 !important;
    }

    /* =========================================================
   PERFIL COLECCIONISTA: ESTRUCTURA MÓVIL
   ========================================================= */


    /* 1. Apilamiento vertical de las columnas principales */
    .contenedor-dashboard {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .columna-izquierda, 
    .columna-centro {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Desactivar las alturas fijas pensadas para el PC */
    #ayuda-tarjeta-coleccionista {
        min-height: auto !important;
    }

    #ayuda-descripcion, 
    #ayuda-distinciones, 
    #ayuda-medios {
        height: 320px !important; /* Mantenemos una altura controlada para que funcione el scroll interno sin ocupar 2 pantallas */
    }

    /* 3. Aprovechamiento del espacio (reducción de paddings gigantes) */
    .columna-centro .tarjeta-grafica {
        padding: 15px !important; 
        gap: 20px !important; 
    }

    /* 4. Ajuste fino de la Galería para que encaje mejor en la mano */
    #galeria-scroll-container > div {
        width: 280px !important; /* Hacemos las fotos un poco más compactas */
    }
    
    #galeria-scroll-container img {
        height: 240px !important; 
    }
    
    /* Hacemos los botones del carrusel un poco más sutiles en móvil */
    .carrusel-btn {
        padding: 10px 8px !important;
    }

    /* Ocultar menú coleccionables SOLO en Visión General (Móvil) */
    .vista-general #ayuda-menu-coleccionables {
        display: none !important;
    }

    /* Quitar el margen sobrante al ocultar coleccionables (evita doble gap) */
    .vista-general .caja-usuario-contexto {
        margin-bottom: 0 !important;
    }

    /* =========================================================
       TABLA VISIÓN GENERAL (BARRAS): SCROLL HORIZONTAL
       ========================================================= */
    #tabla-central-datos {
        -webkit-overflow-scrolling: touch; /* Scroll suave en móviles */
        padding-bottom: 15px !important; /* Respiro para la barra de scroll */
    }

    /* Obligamos a la cabecera y a las filas a no encogerse por debajo de 600px */
    #tabla-central-datos > div {
        min-width: 600px !important; 
    }

    /* 1. Incrementos (Evolución): Arriba-Izquierda y Abajo-Derecha */
    .vista-evolucion #ayuda-grafico-incrementos {
        clip-path: polygon(var(--corte-x) 0, 100% 0, 100% calc(100% - var(--corte-y)), calc(100% - var(--corte-x)) 100%, 0 100%, 0 var(--corte-y)) !important;
    }

    /* 2. Ajustes (Evolución): Arriba-Derecha y Abajo-Izquierda */
    .vista-evolucion #ayuda-ajustes {
        clip-path: polygon(0 0, calc(100% - var(--corte-x)) 0, 100% var(--corte-y), 100% 100%, var(--corte-x) 100%, 0 calc(100% - var(--corte-y))) !important;
    }

    /* 1. Líderes (Exploración): Arriba-Izquierda y Abajo-Derecha */
    .vista-mundo #ayuda-lideres {
        clip-path: polygon(var(--corte-x) 0, 100% 0, 100% calc(100% - var(--corte-y)), calc(100% - var(--corte-x)) 100%, 0 100%, 0 var(--corte-y)) !important;
    }

    /* 2. Radar/Tu Posición (Exploración): Arriba-Derecha y Abajo-Izquierda */
    .vista-mundo #ayuda-radar {
        clip-path: polygon(0 0, calc(100% - var(--corte-x)) 0, 100% var(--corte-y), 100% 100%, var(--corte-x) 100%, 0 calc(100% - var(--corte-y))) !important;
    }

    /* =========================================================
       DIRECTORIO DE COLECCIONISTAS (MÓVIL)
       ========================================================= */
    
    /* 1. Evitar el colapso de altura de Flexbox */
    .vista-directorio .columna-centro,
    .vista-directorio #ayuda-directorio-resultados {
        flex: none !important;
        min-height: 600px !important; 
        max-height: none !important;
        overflow: visible !important;
    }

    /* 2. Habilitar scroll táctil horizontal en la lista */
    .vista-directorio #contenedor-scroll-lista {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px; /* Respiro para la barra de scroll */
    }

    /* 3. Forzar un ancho mínimo para que las columnas no se aplasten */
    .vista-directorio #grid-tabla-central {
        min-width: 900px !important; 
    }

    /* 6. Sellado definitivo del sub-píxel fantasma a la izquierda */
    .vista-directorio .cabecera-nombre,
    .vista-directorio .celda-nombre {
        position: sticky !important;
        left: -1px !important; /* Desplaza 1 píxel hacia fuera para solapar el borde */
        background-color: #ffffff !important;
        box-shadow: -2px 0 0 #ffffff !important; /* Extensión blanca sólida que bloquea cualquier fuga sin ser una sombra */
    }

    .vista-directorio .celda-nombre {
        z-index: 2 !important;
    }

    .vista-directorio .cabecera-nombre {
        z-index: 20 !important;
    }

    /* 5. Sellar el borde izquierdo eliminando holguras del scroll */
    .vista-directorio #contenedor-scroll-lista {
        padding-left: 0 !important;
    }

    /* Pasamos el respiro visual directamente al contenido de la celda fija */
    .vista-directorio .cabecera-nombre,
    .vista-directorio .celda-nombre {
        padding-left: 12px !important;
    }

    /* Ajustes (Directorio Coleccionistas): Arriba-Izquierda y Abajo-Derecha */
    .vista-directorio #ayuda-panel-ajustes {
        clip-path: polygon(var(--corte-x) 0, 100% 0, 100% calc(100% - var(--corte-y)), calc(100% - var(--corte-x)) 100%, 0 100%, 0 var(--corte-y)) !important;
    }

    /* =========================================================
       PORTADA DE NOTICIAS (MÓVIL)
       ========================================================= */
    #ayuda-portada-noticias {
        grid-template-columns: 1fr !important; /* Pasa de 3 columnas a 1 sola */
        grid-template-rows: auto !important;   /* Las filas miden lo que mida su contenido */
        height: auto !important;               /* Libera la altura fija de la pantalla */
        min-height: auto !important;
    }

    #ayuda-portada-noticias .bloque-coleccionables-unico {
        height: auto !important;               /* Permite que cada caja crezca según su texto */
    }

    /* =========================================
       REGLAS ESPECÍFICAS PARA MÓVIL
       ========================================= */
    
        .columna-centro {
            display: flex !important;
            flex-direction: column !important;
        }

        #ayuda-graficos-crecimiento {
            height: auto !important;
        }

        .contenedor-sensor-movil {
            height: 250px !important;
            flex: none !important;
        }

        .contenedor-tabla-scroll {
            overflow-x: auto;
            width: 100%;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 15px;
        }

        /* Novedad: Obligamos a que el gráfico y la tabla compartan el mismo ancho mínimo */
        .contenido-sincronizado {
            min-width: 700px; 
        }

        .tabla-telemetria-grid {
            width: 100%; /* Ya no necesita forzar los 700px aquí, lo hereda del padre */
        }
    
/* =========================================
   ADAPTACIÓN LEGALES (MÓVIL)
   ========================================= */
.tarjeta-legal {
    padding: 15px; 
    height: 80vh;  
}
.cabecera-legal {
    flex-direction: column; 
    gap: 10px;
    text-align: center;
}
.logo-legal {
    height: 40px; 
}
.titulo-legal {
    font-size: 1.2rem; 
}
.cuerpo-legal {
    padding: 15px; 
}

/* Polígono Arriba-Derecha y Abajo-Izquierda (bisel-tr-bl) */
    #ctrl-entorno,
    #ayuda-privacidad {
        clip-path: polygon(0 0, calc(100% - var(--corte-x)) 0, 100% var(--corte-y), 100% 100%, var(--corte-x) 100%, 0 calc(100% - var(--corte-y))) !important;
    }


}