/* /Pages/Shared/_Layout.cshtml.rz.scp.css */
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand[b-c8gp9j2xo4] {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

a[b-c8gp9j2xo4] {
  color: #0077cc;
}

.btn-primary[b-c8gp9j2xo4] {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active[b-c8gp9j2xo4], .nav-pills .show > .nav-link[b-c8gp9j2xo4] {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.border-top[b-c8gp9j2xo4] {
  border-top: 1px solid #e5e5e5;
}
.border-bottom[b-c8gp9j2xo4] {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow[b-c8gp9j2xo4] {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy[b-c8gp9j2xo4] {
  font-size: 1rem;
  line-height: inherit;
}

.footer[b-c8gp9j2xo4] {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}
/* /Pages/Sorteos.cshtml.rz.scp.css */
:root[b-8ru7owwyvg] {
    --bg-dark-core: #0a0c14;
    --neon-green: #39ff14;
    --glass-bg: rgba(16, 20, 36, 0.65);
    --border-glass: rgba(255, 255, 255, 0.08);
}

html[b-8ru7owwyvg], body[b-8ru7owwyvg], .bingo-dashboard[b-8ru7owwyvg] {
    /* 1. Ruta de tu imagen institucional (puedes guardarla en wwwroot/images/fondo-bcp.jpg) */
    background-image: url("../image/tableroBingoStGeorge2026.png") !important;
    /* 2. SOLUCIÓN CRÍTICA: Fuerza a la imagen a encajar de forma exacta al 100% 
          del ancho y alto de la pantalla, eliminando cualquier tipo de recorte */
    background-size: 100% 100% !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    /* 3. Forzar el contenedor a ser rígido con el tamaño de la pantalla */
    height: 100vh !important;
    width: 100vw !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 10px !important; /* Margen interno mínimo de seguridad */
    position: relative;
    overflow: hidden !important; /* Evita barras de desplazamiento accidentales */
}
/* Tipografías de tamaño masivo para lectura a gran distancia */
.font-giant[b-8ru7owwyvg] {
    font-size: 1.6rem !important;
    font-weight: 700;
}
.rotulo_sorteo[b-8ru7owwyvg] {
    height: 60px;
    /*background-color: rgb(237, 212, 177);*/
    background-color: rgba(255, 90, 15, 0.7);
    /*background-color: rgb(37, 48, 109);*/
    /*color: rgb(56, 86, 86);*/
    color: rgba(255,255,255, 1);
    /*background-color: rgba(255,255,255,0.5);*/
    border-radius: 35px;
    /*color: rgb(235, 167, 0);*/
    /*align-items: center;*/
    font-size: 35px;
    font-weight: bold;
}


.cajaSorteo[b-8ru7owwyvg] {
    box-shadow: inset 0 0 15px rgba(135, 135, 135, .1), 0 0 18px 3px rgba(0, 0, 0, .3);
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 160px;
    font-weight: bold;
    background-color: rgba(255, 90, 15, 0.9);
    /*background-color: rgb(37, 48, 109);*/
    color: white;
    animation: flicker-b-8ru7owwyvg 1.5s infinite alternate;
}


/* 1. BOTÓN PLAY: Estilo Ultra Neón Firme y Dinámico */
#btnPlay[b-8ru7owwyvg] {
    background: linear-gradient(135deg, #11ff00, #00aa50) !important;
    color: #000000 !important; /* Texto oscuro para máximo contraste sobre fondo brillante */
    border: none !important;
    font-weight: 900 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.6), 0 0 30px rgba(57, 255, 20, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

    #_btn_play:hover[b-8ru7owwyvg] {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(57, 255, 20, 0.9), 0 0 50px rgba(57, 255, 20, 0.5) !important;
    }

.btn-neon-green[b-8ru7owwyvg] {
    background: transparent;
    color: var(--neon-green);
    border: 2px solid var(--neon-green);
    font-weight: bold;
    transition: all 0.3s;
}

    .btn-neon-green:hover[b-8ru7owwyvg] {
        background: var(--neon-green);
        color: #000;
        box-shadow: 0 0 20px var(--neon-green);
    }

/* Flickering animation */
@keyframes flicker-b-8ru7owwyvg {

    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa;
    }

    20%, 24%, 25% {
        text-shadow: none;
    }
}



/* /Pages/TableroBingo.cshtml.rz.scp.css */
/* ================= CONFIGURACIÓN DE FONDO CORPORATIVO CON IMAGEN ================= */

html[b-u66htpmkyx], body[b-u66htpmkyx], .bingo-dashboard[b-u66htpmkyx] {
    /* 1. Ruta de tu imagen institucional (puedes guardarla en wwwroot/images/fondo-bcp.jpg) */
    background-image: url("../image/tableroBingoStGeorge2026.png") !important;
    /* 2. SOLUCIÓN CRÍTICA: Fuerza a la imagen a encajar de forma exacta al 100% 
          del ancho y alto de la pantalla, eliminando cualquier tipo de recorte */
    background-size: 100% 100% !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    /* 3. Forzar el contenedor a ser rígido con el tamaño de la pantalla */
    height: 100vh !important;
    width: 100vw !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 10px !important; /* Margen interno mínimo de seguridad */
    position: relative;
    overflow: hidden !important; /* Evita barras de desplazamiento accidentales */
}
/* Tipografías de tamaño masivo para lectura a gran distancia */
.font-giant[b-u66htpmkyx] {
    font-size: 1.6rem !important;
    font-weight: 700;
}
.border-neon-cyan[b-u66htpmkyx] {
    border: 2px solid var(--neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

/* Ajuste de prioridad para que los componentes queden por encima del fondo */
.header-branding-container[b-u66htpmkyx],
.body-game-container[b-u66htpmkyx] {
    position: relative;
    z-index: 1;
}
/* --- REJILLA (GRID) DEL TABLERO DE BINGO --- */
.bingo-grid-container[b-u66htpmkyx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bingo-row[b-u66htpmkyx] {
    display: grid;
    grid-template-columns: 1.0fr repeat(15, 1fr); /* La letra es el doble de grande que los números */
    gap:5px;
    width: 95%;
}
/* Estilos de las Letras Iniciales (B-I-N-G-O) */
.bingo-letter[b-u66htpmkyx] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    font-weight: 1000;
    border-radius: 12px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

.letter-b[b-u66htpmkyx] {
    /*background: linear-gradient(135deg, rgb(56, 86, 86), rgb(56, 86, 86));*/
    /*background: linear-gradient(135deg, rgba(56, 86, 86, 0.4), rgba(56, 86, 86, 0.4));*/
    background: linear-gradient(135deg, rgba(255, 90, 15, 0.8), rgba(255, 90, 15, 0.8));
    box-shadow: 0 0 15px rgba(56, 86, 86,0.4);
}
/* Celdas de números inactivas */
.bingo-number[b-u66htpmkyx] {
    background-color: white !important;
    /*background-color: rgba(255, 255, 255, 0.05) !important;*/
    /* letra azul Borde naranja */
    /*color: rgb(56, 32, 128);
    border: 5px, solid, rgb(235, 167, 0);*/
    /* letra y borde verde pizarra */
    /*color: rgb(56, 86, 86);*/
    color: #011e90;
    border: 5px, solid, #011e90;
    /*border: 5px, solid, rgb(56, 86, 86);*/
    /*color: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;*/
    border-radius: 20px;
    font-size: 3.2rem !important;
    font-weight: 800;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(56, 86, 86,0.4);
}
/* Secuenciador inferior (Historial) */
.sequence-container .seq-box[b-u66htpmkyx] {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #1a1f36;
    border: 2px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}

.sequence-container .seq-latest[b-u66htpmkyx] {
    background: linear-gradient(135deg, var(--neon-purple), #da70d6);
    border-color: #fff;
    box-shadow: 0 0 15px var(--neon-purple);
    transform: scale(1.1);
}

/* Animación sutil de espera en íconos */
.shadow-pulse[b-u66htpmkyx] {
    animation: iconFloat-b-u66htpmkyx 3s ease-in-out infinite alternate;
}
/* 1. BOTÓN PLAY: Estilo Ultra Neón Firme y Dinámico */
#btn_play[b-u66htpmkyx] {
    background: linear-gradient(135deg, #11ff00, #00aa50) !important;
    color: #000000 !important; /* Texto oscuro para máximo contraste sobre fondo brillante */
    border: none !important;
    font-weight: 900 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.6), 0 0 30px rgba(57, 255, 20, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}
    #btn_play:hover[b-u66htpmkyx] {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(57, 255, 20, 0.9), 0 0 50px rgba(57, 255, 20, 0.5) !important;
    }
/* Display de Bolilla Actual (Círculo Superior Grande) */
.bolilla-display[b-u66htpmkyx] {
    width: 140px !important; /* Ajustamos el tamaño para que sea el gran centro de atención */
    height: 70px !important; /* Formato rectangular estilizado moderno para pantallas LED */
    background: linear-gradient(135deg, #E56D00, #FB7424) !important;
    /*Fusión perfecta de los neones del tablero*/
    border: 3.2px solid #ffffff !important;
    border-radius: 12px !important;
    font-size: 3rem !important; /* Tamaño masivo */
    font-weight: 900 !important;
    color: #ffffff !important; /* Texto blanco sólido ultra brillante */
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    /* Efecto multicapa de sombras neón púrpura/rosa */
    box-shadow: 0 0 20px #b026ff, 0 0 40px rgba(255, 0, 85, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.5) !important;
    /* ANIMACIÓN AUTOMÁTICA: Hace el efecto de resaltado ("hover automático") cada 2 segundos */
    animation: pulsoNeonResaltado 2s infinite ease-in-out;
    transition: all 0.3s ease;
}
/* ESTADO CRÍTICO: Bolilla marcada/cantada en el tablero (Brillo Neón Absoluto) */
.bingo-number.bolillaOk[b-u66htpmkyx] {
    /*background: linear-gradient(135deg, #ff0055, #ff00aa) !important;*/
    background: linear-gradient(135deg, #FB7424, #E56D00) !important;
    /* Al activarse, el número pasa a blanco sólido ultra brillante */
    color: #ffffff !important;
    /*border-color: #ff00ff !important;*/
    border-color: #FB7424 !important;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ff0055;
    box-shadow: 0 0 20px #E56D00, inset 0 0 8px rgba(255,255,255,0.6) !important;
    animation: neonPulse-b-u66htpmkyx 2s infinite alternate;
}
/* Animación de pulso continuo para los números ya cantados */
@keyframes neonPulse-b-u66htpmkyx {
    0% {
        /*box-shadow: 0 0 12px #ff0055, inset 0 0 6px rgba(255,255,255,0.4);*/
        box-shadow: 0 0 12px #ff0055, inset 0 0 6px rgba(255,255,255,0.4);
    }

    100% {
        /*box-shadow: 0 0 22px #ff00aa, inset 0 0 12px rgba(255,255,255,0.7);*/
        box-shadow: 0 0 22px #ff00aa, inset 0 0 12px rgba(255,255,255,0.7);
    }
}
/* Animación sutil de espera en íconos */
.shadow-pulse[b-u66htpmkyx] {
    animation: iconFloat-b-u66htpmkyx 3s ease-in-out infinite alternate;
}

@keyframes iconFloat-b-u66htpmkyx {
    0% {
        transform: translateY(0px);
        filter: drop-shadow(0 0 5px var(--neon-pink));
    }

    100% {
        transform: translateY(-8px);
        filter: drop-shadow(0 0 15px var(--neon-pink));
    }
}
/* /Pages/TableroBingoOLD.cshtml.rz.scp.css */
.container-fluid[b-gk7vjrw0zx] {
    /*background-color: #00ff90 !important;*/
}

/****** TABLERO BINGO ******/
.header_tablero_bingo[b-gk7vjrw0zx] {
    height: 60px;
    background-color: rgb(237, 212, 177);
    /*background-color: rgb(235, 167, 0);*/
    color: rgb(56, 86, 86);
    /*color: rgb(37, 48, 109);*/
    border-radius: 35px;
    align-items: center;
    font-size: 45px;
    font-weight: bold;
}

.letra_tablero_bingo[b-gk7vjrw0zx] {
    background-color: rgb(56, 86, 86);
    background-color: rgb(37, 48, 109);
    color: white;
    border: 5px, solid, rgb(237, 212, 177);
    border: 5px, solid, rgb(235, 167, 0);
    font-size: 40px;
    font-weight: bold;
}

.numero_tablero_bingo[b-gk7vjrw0zx] {
    background-color: white;
    color: rgb(56, 32, 128);
    border: 5px, solid, rgb(56, 86, 86);
    border: 5px, solid, rgb(235, 167, 0);
    font-size: 45px;
    font-weight: bolder;
}

.footer_tablero_bingo[b-gk7vjrw0zx] {
    background-color: rgb(56, 86, 86);
    background-color: rgb(37, 48, 109);
}

.secuencia_tablero_bingo[b-gk7vjrw0zx] {
    background-color: rgb(237, 212, 177);
}

#sec02[b-gk7vjrw0zx], #sec03[b-gk7vjrw0zx], #sec04[b-gk7vjrw0zx], #sec05[b-gk7vjrw0zx] {
    background-color: rgb(56, 86, 86);
    background-color: rgb(37, 48, 109);
    color: white;
    font-size: 40px;
    font-weight: bold;
    border-radius: 20px;
}

#sec01[b-gk7vjrw0zx] {
    background-color: rgb(159, 16, 3);
    color: white;
    font-size: 40px;
    font-weight: bold;
    border-radius: 20px;
}

.bolillaOk[b-gk7vjrw0zx] {
    background-color: rgb(159, 16, 3) !important;
    color: white !important;
    font-weight: bolder !important;
}

.play[b-gk7vjrw0zx] {
    display: flex;
    align-items: center;
    font-size: 45px;
    font-weight: bold;
    color: rgb(56, 86, 86);
    color: rgb(37, 48, 109);
}

    .play:hover[b-gk7vjrw0zx] {
        color: rgb(237, 212, 177);
        color: rgb(235, 167, 0);
    }

.bolilla[b-gk7vjrw0zx] {
    display: flex;
    align-items: center;
    background-color: rgb(159, 16, 3);
    border-radius: 50%;
    width: 130px;
    height: 130px;
    font-size: 50px;
    font-weight: bold;
    color: white;
}

    .bolilla:hover[b-gk7vjrw0zx] {
        align-items: center;
        background-color: rgb(56, 86, 86);
        background-color: rgb(37, 48, 109);
        color: white;
    }

.bolilla_spinner[b-gk7vjrw0zx] {
    display: flex;
    align-items: center;
    font-size: 40px;
    width: 130px;
    height: 130px;
    font-weight: bold;
    color: rgb(159, 16, 3)
}

.btn_on[b-gk7vjrw0zx] {
    background-color: rgb(159, 16, 3);
    align-items: center;
    font-weight: bold;
    color: rgb(237, 212, 177);
}

.btn_off[b-gk7vjrw0zx] {
    background-color: rgb(237, 212, 177);
    align-items: center;
    font-weight: bold;
    color: rgb(159, 16, 3)
}

/* /Pages/TableroBingoOLD1.cshtml.rz.scp.css */
```css
/* Variables de paleta Cyberpunk sobria y ultra brillante */
:root[b-nvqe7zevat] {
    --bg-dark-core: #0a0c14;
    --neon-cyan: #00f0ff;
    --neon-pink: #ff007f;
    --neon-green: #39ff14;
    --neon-purple: #b026ff;
    --neon-orange: #ffaa00;
    --glass-bg: rgba(16, 20, 36, 0.65);
    --border-glass: rgba(255, 255, 255, 0.08);
}

/* Forzar el fondo oscuro absoluto sobre el layout base */
html[b-nvqe7zevat], body[b-nvqe7zevat], .bingo-dashboard[b-nvqe7zevat] {
    /*background-color: rgba(255,255,255,0.8) !important;*/
    background-image: url('/wwwroot/image/tableroBingoMarkham.jpeg') !important;
    /* 2. Asegura que la imagen cubra toda la pantalla gigante sin repetirse */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /*background-color: #06070d !important;
    background-image: radial-gradient(circle at center, #111424 0%, #05060b 100%) !important;*/
    min-height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
}
    /* 3. CAPA TRANSLÚCIDA DE CONTRASTE: Importante para pantallas LED gigantes.
   Agrega una película oscura muy sutil por encima de la imagen para que los 
   números sigan resaltando con total nitidez y no se pierdan con los dibujos */
    .bingo-dashboard[b-nvqe7zevat]::before {
        position: absolute;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(10, 12, 20, 0.45); /* 45% de oscuridad sobre la imagen */
        z-index: 0;
        pointer-events: none; /* Permite hacer clic a través de la capa */
    }

/* ================= SECCIÓN DE BRANDING Y LOGOTIPOS CORREGIDOS ================= */
.header-branding-container[b-nvqe7zevat], .body-game-container[b-nvqe7zevat] {
    height: 120px !important; /* Altura fija estricta para proteger la matriz del bingo */
    display: flex;
    align-items: center;
}
/* Contenedores rígidos de los logotipos */
.branding-logo-wrapper[b-nvqe7zevat] {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

    .branding-logo-wrapper.text-start[b-nvqe7zevat] {
        justify-content: flex-start;
    }

    .branding-logo-wrapper.text-end[b-nvqe7zevat] {
        justify-content: flex-end;
    }
/* Formateo de las imágenes para que se ajusten solas */
.logo-branding[b-nvqe7zevat] {
    max-height: 90px !important; /* Altura máxima permitida */
    width: auto;
    max-width: 100%; /* No se sale de sus 3 columnas */
    object-fit: contain; /* Ajuste inteligente sin estirarse */
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4)); /* Brillo sutil de integración */
    transition: all 0.3s ease;
}

/* Línea guía temporal para ver el espacio exacto del logo (Puedes quitarla al poner los reales) */
.border-branding-ref[b-nvqe7zevat] {
    border: 1px dashed rgba(255, 255, 255, 0.3);
    padding: 4px;
    background: rgba(255, 255, 255, 0.02);
}

/* Espaciado del contenedor central */
.branding-center-wrapper[b-nvqe7zevat] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.border-neon-bottom[b-nvqe7zevat] {
    border-bottom: 3px solid var(--neon-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 240, 255, 0.25);
}

.logo-branding[b-nvqe7zevat] {
    max-height: 85px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.body-game-container[b-nvqe7zevat] {
    height: calc(100vh - 150px) !important; /* El resto de la pantalla se calcula automáticamente */
}

/* Modificadores de la tipografía del título institucional */
.header-title-neon h1[b-nvqe7zevat] {
    font-size: 2.3rem !important;
    letter-spacing: 4px;
}

/* Base del Dashboard */
.bingo-dashboard[b-nvqe7zevat] {
    background-color: var(--bg-dark-core) !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #ffffff;
}

/* Efecto de cristal translúcido para pantallas gigantes */
.bg-glass[b-nvqe7zevat] {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Transición suave para colapso del tablero principal */
.main-transition[b-nvqe7zevat] {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Sidebar Estilo Panel Flotante Deslizante */
#sidebarGanador[b-nvqe7zevat] {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
    /* Si el sidebar tiene la utilidad 'd-none', forzamos la desaparición absoluta */
    #sidebarGanador.d-none[b-nvqe7zevat] {
        display: none !important;
    }

    /* Cuando se activa el buscador, se reconfigura como un contenedor flexible vertical */
    #sidebarGanador.active[b-nvqe7zevat] {
        display: flex !important;
    }

/* Tipografías de tamaño masivo para lectura a gran distancia */
.font-giant[b-nvqe7zevat] {
    font-size: 1.6rem !important;
    font-weight: 700;
}

.font-mega[b-nvqe7zevat] {
    font-size: 2.2rem !important;
    font-weight: 800;
}

/* Contenedores de fondos opacos de apoyo */
.bg-dark-trans[b-nvqe7zevat] {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Bordes de Neón */
.border-neon[b-nvqe7zevat] {
    border: 1px solid var(--border-glass);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.border-neon-cyan[b-nvqe7zevat] {
    border: 2px solid var(--neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.border-neon-pink[b-nvqe7zevat] {
    border: 2px solid var(--neon-pink) !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.2);
}

/* Textos brillantes */
.text-neon-cyan[b-nvqe7zevat] {
    color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

.text-neon-pink[b-nvqe7zevat] {
    color: var(--neon-pink);
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}

.text-neon-green[b-nvqe7zevat] {
    color: var(--neon-green);
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
}

/* Encabezado del Tablero */
.header-title-neon h1[b-nvqe7zevat] {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px var(--neon-purple);
}

/* Botonera Neón de alto contraste */
.btn-neon-cyan[b-nvqe7zevat] {
    background: transparent;
    color: var(--neon-cyan);
    border: 2px solid var(--neon-cyan);
    font-weight: bold;
    transition: all 0.3s;
}

    .btn-neon-cyan:hover[b-nvqe7zevat] {
        background: var(--neon-cyan);
        color: #000;
        box-shadow: 0 0 20px var(--neon-cyan);
    }

.btn-neon-green[b-nvqe7zevat] {
    background: transparent;
    color: var(--neon-green);
    border: 2px solid var(--neon-green);
    font-weight: bold;
    transition: all 0.3s;
}

    .btn-neon-green:hover[b-nvqe7zevat] {
        background: var(--neon-green);
        color: #000;
        box-shadow: 0 0 20px var(--neon-green);
    }

.btn-neon-pink[b-nvqe7zevat] {
    background: transparent;
    color: var(--neon-pink);
    border: 2px solid var(--neon-pink);
    font-weight: bold;
    transition: all 0.3s;
}

    .btn-neon-pink:hover[b-nvqe7zevat] {
        background: var(--neon-pink);
        color: #000;
        box-shadow: 0 0 20px var(--neon-pink);
    }

.btn-neon-purple[b-nvqe7zevat] {
    background: transparent;
    color: var(--neon-purple);
    border: 2px solid var(--neon-purple);
    font-weight: bold;
    transition: all 0.3s;
}

    .btn-neon-purple:hover[b-nvqe7zevat] {
        background: var(--neon-purple);
        color: #fff;
        box-shadow: 0 0 20px var(--neon-purple);
    }

/* --- REJILLA (GRID) DEL TABLERO DE BINGO --- */
.bingo-grid-container[b-nvqe7zevat] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bingo-row[b-nvqe7zevat] {
    display: grid;
    grid-template-columns: 2fr repeat(15, 1fr); /* La letra es el doble de grande que los números */
    gap: 8px;
    width: 100%;
}

.header_tablero_bingo[b-nvqe7zevat] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(56, 86, 86) !important;
    font-size: 3.2rem !important;
    font-weight: 1000;
    border-radius: 35px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

/* Estilos de las Letras Iniciales (B-I-N-G-O) */
.bingo-letter[b-nvqe7zevat] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 1000;
    border-radius: 12px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

.letter-b[b-nvqe7zevat] {
    background: linear-gradient(135deg, rgb(56, 86, 86), rgb(56, 86, 86));
    box-shadow: 0 0 15px rgba(56, 86, 86,0.4);
}
/* Celdas de números inactivas */
.bingo-number[b-nvqe7zevat] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    /* letra azul Borde naranja */
    /*color: rgb(56, 32, 128);
    border: 5px, solid, rgb(235, 167, 0);*/
    /* letra y borde verde pizarra */
    color: rgb(56, 86, 86);
    border: 5px, solid, rgb(56, 86, 86);
    /*color: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;*/

    border-radius: 10px;
    font-size: 3.2rem !important;
    font-weight: 800;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(56, 86, 86,0.4);
}

    /* ESTADO CRÍTICO: Bolilla marcada/cantada en el tablero (Brillo Neón Absoluto) */
    .bingo-number.bolillaOk[b-nvqe7zevat] {
        background: linear-gradient(135deg, #ff0055, #ff00aa) !important;
        /* Al activarse, el número pasa a blanco sólido ultra brillante */
        color: #ffffff !important;
        border-color: #ff00ff !important;
        text-shadow: 0 0 10px #ffffff, 0 0 20px #ff0055;
        box-shadow: 0 0 20px #ff0055, inset 0 0 10px rgba(255,255,255,0.6) !important;
        animation: neonPulse-b-nvqe7zevat 2s infinite alternate;
    }

/* Animación de pulso continuo para los números ya cantados */
@keyframes neonPulse-b-nvqe7zevat {
    0% {
        box-shadow: 0 0 12px #ff0055, inset 0 0 6px rgba(255,255,255,0.4);
    }

    100% {
        box-shadow: 0 0 22px #ff00aa, inset 0 0 12px rgba(255,255,255,0.7);
    }
}
/* ================= OPTIMIZACIÓN DE ELEMENTOS DE ACCIÓN (HEADER) ================= */

/* 1. BOTÓN PLAY: Estilo Ultra Neón Firme y Dinámico */
#btn_play[b-nvqe7zevat] {
    background: linear-gradient(135deg, #11ff00, #00aa50) !important;
    color: #000000 !important; /* Texto oscuro para máximo contraste sobre fondo brillante */
    border: none !important;
    font-weight: 900 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.6), 0 0 30px rgba(57, 255, 20, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

    #btn_play:hover[b-nvqe7zevat] {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(57, 255, 20, 0.9), 0 0 50px rgba(57, 255, 20, 0.5) !important;
    }
/* Display de Bolilla Actual (Círculo Superior Grande) */
.bolilla-display[b-nvqe7zevat] {
    width: 140px !important; /* Ajustamos el tamaño para que sea el gran centro de atención */
    height: 70px !important; /* Formato rectangular estilizado moderno para pantallas LED */
    background: linear-gradient(135deg, #ff0055, #b026ff) !important; /* Fusión perfecta de los neones del tablero */
    border: 3px solid #ffffff !important;
    border-radius: 12px !important;
    font-size: 3rem !important; /* Tamaño masivo */
    font-weight: 900 !important;
    color: #ffffff !important; /* Texto blanco sólido ultra brillante */
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    /* Efecto multicapa de sombras neón púrpura/rosa */
    box-shadow: 0 0 20px #b026ff, 0 0 40px rgba(255, 0, 85, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.5) !important;
    /* ANIMACIÓN AUTOMÁTICA: Hace el efecto de resaltado ("hover automático") cada 2 segundos */
    animation: pulsoNeonResaltado-b-nvqe7zevat 2s infinite ease-in-out;
    transition: all 0.3s ease;
}

/* Secuenciador inferior (Historial) */
.sequence-container .seq-box[b-nvqe7zevat] {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #1a1f36;
    border: 2px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}

.sequence-container .seq-latest[b-nvqe7zevat] {
    background: linear-gradient(135deg, var(--neon-purple), #da70d6);
    border-color: #fff;
    box-shadow: 0 0 15px var(--neon-purple);
    transform: scale(1.1);
}

/* Animación sutil de espera en íconos */
.shadow-pulse[b-nvqe7zevat] {
    animation: iconFloat-b-nvqe7zevat 3s ease-in-out infinite alternate;
}

@keyframes iconFloat-b-nvqe7zevat {
    0% {
        transform: translateY(0px);
        filter: drop-shadow(0 0 5px var(--neon-pink));
    }

    100% {
        transform: translateY(-8px);
        filter: drop-shadow(0 0 15px var(--neon-pink));
    }
}
/* Animación que simula un "Hover" automático intensificando el color y brillo cíclicamente */
@keyframes pulsoNeonResaltado-b-nvqe7zevat {
    0% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 20px #b026ff, 0 0 40px rgba(255, 0, 85, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.4) !important;
    }

    50% {
        transform: scale(1.05); /* Se agranda sutilmente en el pico del brillo */
        filter: brightness(1.3); /* Resalta e intensifica los colores del gradiente automáticamente */
        box-shadow: 0 0 35px #ff007f, 0 0 60px #b026ff, 0 0 80px rgba(176, 38, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.8) !important;
        border-color: #ffffff;
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 20px #b026ff, 0 0 40px rgba(255, 0, 85, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.4) !important;
    }
}

/* Ajuste complementario para el Buscador cuando está inactivo */
#btnToggleSidebar[b-nvqe7zevat] {
    border: 2px solid var(--neon-purple) !important;
    color: #ffffff !important;
    background-color: rgba(176, 38, 255, 0.1) !important;
    box-shadow: 0 0 10px rgba(176, 38, 255, 0.3) !important;
}

    #btnToggleSidebar:hover[b-nvqe7zevat] {
        background-color: var(--neon-purple) !important;
        color: #ffffff !important;
        box-shadow: 0 0 20px var(--neon-purple) !important;
    }


/* ================= COMPONENTES DEL CARTÓN DIGITAL DE VERIFICACIÓN ================= */
.ticket-header-grid[b-nvqe7zevat] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    font-size: 1.6rem;
    font-weight: 900;
    text-shadow: 0 0 5px #fff;
}

.ticket-bingo-grid[b-nvqe7zevat] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

/* Celdas del cartón individual */
.ticket-cell[b-nvqe7zevat] {
    background-color: #161b30;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-weight: 800;
    border-radius: 8px;
    transition: all 0.25s;
}

    /* Estado de coincidencia: El número del cartón coincide con una bolilla ya cantada */
    .ticket-cell.match-ok[b-nvqe7zevat] {
        background: linear-gradient(135deg, #00f0ff, #0044ff) !important;
        border-color: #00ffff !important;
        box-shadow: 0 0 12px var(--neon-cyan);
        text-shadow: 0 0 5px #fff;
    }

.central-free[b-nvqe7zevat] {
    background: rgba(176, 38, 255, 0.25) !important;
    color: var(--neon-purple) !important;
    border-color: var(--neon-purple) !important;
    font-size: 0.9rem !important;
}

.item-empty[b-nvqe7zevat] {
    opacity: 0.3;
}
/* /Pages/TableroBingoOLD2.cshtml.rz.scp.css */
```css
/* Variables de paleta Cyberpunk sobria y ultra brillante */
:root[b-bpjo486p4o] {
    --bg-dark-core: #0a0c14;
    --neon-cyan: #00f0ff;
    --neon-pink: #ff007f;
    --neon-green: #39ff14;
    --neon-purple: #b026ff;
    --neon-orange: #ffaa00;
    --glass-bg: rgba(16, 20, 36, 0.65);
    --border-glass: rgba(255, 255, 255, 0.08);
}

/* Forzar el fondo oscuro absoluto sobre el layout base */
html[b-bpjo486p4o], body[b-bpjo486p4o], .bingo-dashboard[b-bpjo486p4o] {
    background-color: #06070d !important;
    background-image: radial-gradient(circle at center, #111424 0%, #05060b 100%) !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
/* ================= SECCIÓN DE BRANDING Y LOGOTIPOS CORREGIDOS ================= */
.header-branding-container[b-bpjo486p4o] {
    height: 120px !important; /* Altura fija estricta para proteger la matriz del bingo */
    display: flex;
    align-items: center;
}
/* Contenedores rígidos de los logotipos */
.branding-logo-wrapper[b-bpjo486p4o] {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

    .branding-logo-wrapper.text-start[b-bpjo486p4o] {
        justify-content: flex-start;
    }

    .branding-logo-wrapper.text-end[b-bpjo486p4o] {
        justify-content: flex-end;
    }
/* Formateo de las imágenes para que se ajusten solas */
.logo-branding[b-bpjo486p4o] {
    max-height: 90px !important; /* Altura máxima permitida */
    width: auto;
    max-width: 100%; /* No se sale de sus 3 columnas */
    object-fit: contain; /* Ajuste inteligente sin estirarse */
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4)); /* Brillo sutil de integración */
    transition: all 0.3s ease;
}

/* Línea guía temporal para ver el espacio exacto del logo (Puedes quitarla al poner los reales) */
.border-branding-ref[b-bpjo486p4o] {
    border: 1px dashed rgba(255, 255, 255, 0.3);
    padding: 4px;
    background: rgba(255, 255, 255, 0.02);
}

/* Espaciado del contenedor central */
.branding-center-wrapper[b-bpjo486p4o] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.border-neon-bottom[b-bpjo486p4o] {
    border-bottom: 3px solid var(--neon-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 240, 255, 0.25);
}

.logo-branding[b-bpjo486p4o] {
    max-height: 85px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.body-game-container[b-bpjo486p4o] {
    height: calc(100vh - 150px) !important; /* El resto de la pantalla se calcula automáticamente */
}

/* Modificadores de la tipografía del título institucional */
.header-title-neon h1[b-bpjo486p4o] {
    font-size: 2.3rem !important;
    letter-spacing: 4px;
}

/* Base del Dashboard */
.bingo-dashboard[b-bpjo486p4o] {
    background-color: var(--bg-dark-core) !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #ffffff;
}

/* Efecto de cristal translúcido para pantallas gigantes */
.bg-glass[b-bpjo486p4o] {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Transición suave para colapso del tablero principal */
.main-transition[b-bpjo486p4o] {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Sidebar Estilo Panel Flotante Deslizante */
#sidebarGanador[b-bpjo486p4o] {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
    /* Si el sidebar tiene la utilidad 'd-none', forzamos la desaparición absoluta */
    #sidebarGanador.d-none[b-bpjo486p4o] {
        display: none !important;
    }

    /* Cuando se activa el buscador, se reconfigura como un contenedor flexible vertical */
    #sidebarGanador.active[b-bpjo486p4o] {
        display: flex !important;
    }

/* Tipografías de tamaño masivo para lectura a gran distancia */
.font-giant[b-bpjo486p4o] {
    font-size: 1.6rem !important;
    font-weight: 700;
}

.font-mega[b-bpjo486p4o] {
    font-size: 2.2rem !important;
    font-weight: 800;
}

/* Contenedores de fondos opacos de apoyo */
.bg-dark-trans[b-bpjo486p4o] {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Bordes de Neón */
.border-neon[b-bpjo486p4o] {
    border: 1px solid var(--border-glass);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.border-neon-cyan[b-bpjo486p4o] {
    border: 2px solid var(--neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.border-neon-pink[b-bpjo486p4o] {
    border: 2px solid var(--neon-pink) !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.2);
}

/* Textos brillantes */
.text-neon-cyan[b-bpjo486p4o] {
    color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

.text-neon-pink[b-bpjo486p4o] {
    color: var(--neon-pink);
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}

.text-neon-green[b-bpjo486p4o] {
    color: var(--neon-green);
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
}

/* Encabezado del Tablero */
.header-title-neon h1[b-bpjo486p4o] {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px var(--neon-purple);
}

/* Botonera Neón de alto contraste */
.btn-neon-cyan[b-bpjo486p4o] {
    background: transparent;
    color: var(--neon-cyan);
    border: 2px solid var(--neon-cyan);
    font-weight: bold;
    transition: all 0.3s;
}

    .btn-neon-cyan:hover[b-bpjo486p4o] {
        background: var(--neon-cyan);
        color: #000;
        box-shadow: 0 0 20px var(--neon-cyan);
    }

.btn-neon-green[b-bpjo486p4o] {
    background: transparent;
    color: var(--neon-green);
    border: 2px solid var(--neon-green);
    font-weight: bold;
    transition: all 0.3s;
}

    .btn-neon-green:hover[b-bpjo486p4o] {
        background: var(--neon-green);
        color: #000;
        box-shadow: 0 0 20px var(--neon-green);
    }

.btn-neon-pink[b-bpjo486p4o] {
    background: transparent;
    color: var(--neon-pink);
    border: 2px solid var(--neon-pink);
    font-weight: bold;
    transition: all 0.3s;
}

    .btn-neon-pink:hover[b-bpjo486p4o] {
        background: var(--neon-pink);
        color: #000;
        box-shadow: 0 0 20px var(--neon-pink);
    }

.btn-neon-purple[b-bpjo486p4o] {
    background: transparent;
    color: var(--neon-purple);
    border: 2px solid var(--neon-purple);
    font-weight: bold;
    transition: all 0.3s;
}

    .btn-neon-purple:hover[b-bpjo486p4o] {
        background: var(--neon-purple);
        color: #fff;
        box-shadow: 0 0 20px var(--neon-purple);
    }

/* --- REJILLA (GRID) DEL TABLERO DE BINGO --- */
.bingo-grid-container[b-bpjo486p4o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bingo-row[b-bpjo486p4o] {
    display: grid;
    grid-template-columns: 2fr repeat(15, 1fr); /* La letra es el doble de grande que los números */
    gap: 8px;
    width: 100%;
}

/* Estilos de las Letras Iniciales (B-I-N-G-O) */
.bingo-letter[b-bpjo486p4o] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 900;
    border-radius: 12px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

.letter-b[b-bpjo486p4o] {
    background: linear-gradient(135deg, #0055ff, #00d4ff);
    box-shadow: 0 0 15px rgba(0,212,255,0.4);
}

/* Celdas de números inactivas */
.bingo-number[b-bpjo486p4o] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 10px;
    font-size: 3.1rem !important;
    font-weight: 800;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    /* ESTADO CRÍTICO: Bolilla marcada/cantada en el tablero (Brillo Neón Absoluto) */
    .bingo-number.bolillaOk[b-bpjo486p4o] {
        background: linear-gradient(135deg, #ff0055, #ff00aa) !important;
        /* Al activarse, el número pasa a blanco sólido ultra brillante */
        color: #ffffff !important;
        border-color: #ff00ff !important;
        text-shadow: 0 0 10px #ffffff, 0 0 20px #ff0055;
        box-shadow: 0 0 20px #ff0055, inset 0 0 10px rgba(255,255,255,0.6) !important;
        animation: neonPulse-b-bpjo486p4o 2s infinite alternate;
    }

/* Animación de pulso continuo para los números ya cantados */
@keyframes neonPulse-b-bpjo486p4o {
    0% {
        box-shadow: 0 0 12px #ff0055, inset 0 0 6px rgba(255,255,255,0.4);
    }

    100% {
        box-shadow: 0 0 22px #ff00aa, inset 0 0 12px rgba(255,255,255,0.7);
    }
}
/* ================= OPTIMIZACIÓN DE ELEMENTOS DE ACCIÓN (HEADER) ================= */

/* 1. BOTÓN PLAY: Estilo Ultra Neón Firme y Dinámico */
#_btn_play[b-bpjo486p4o] {
    background: linear-gradient(135deg, #11ff00, #00aa50) !important;
    color: #000000 !important; /* Texto oscuro para máximo contraste sobre fondo brillante */
    border: none !important;
    font-weight: 900 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.6), 0 0 30px rgba(57, 255, 20, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

    #_btn_play:hover[b-bpjo486p4o] {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(57, 255, 20, 0.9), 0 0 50px rgba(57, 255, 20, 0.5) !important;
    }
/* Display de Bolilla Actual (Círculo Superior Grande) */
.bolilla-display[b-bpjo486p4o] {
    width: 140px !important; /* Ajustamos el tamaño para que sea el gran centro de atención */
    height: 70px !important; /* Formato rectangular estilizado moderno para pantallas LED */
    background: linear-gradient(135deg, #ff0055, #b026ff) !important; /* Fusión perfecta de los neones del tablero */
    border: 3px solid #ffffff !important;
    border-radius: 12px !important;
    font-size: 3rem !important; /* Tamaño masivo */
    font-weight: 900 !important;
    color: #ffffff !important; /* Texto blanco sólido ultra brillante */
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    /* Efecto multicapa de sombras neón púrpura/rosa */
    box-shadow: 0 0 20px #b026ff, 0 0 40px rgba(255, 0, 85, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.5) !important;
    /* ANIMACIÓN AUTOMÁTICA: Hace el efecto de resaltado ("hover automático") cada 2 segundos */
    animation: pulsoNeonResaltado-b-bpjo486p4o 2s infinite ease-in-out;
    transition: all 0.3s ease;
}

/* Secuenciador inferior (Historial) */
.sequence-container .seq-box[b-bpjo486p4o] {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #1a1f36;
    border: 2px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}

.sequence-container .seq-latest[b-bpjo486p4o] {
    background: linear-gradient(135deg, var(--neon-purple), #da70d6);
    border-color: #fff;
    box-shadow: 0 0 15px var(--neon-purple);
    transform: scale(1.1);
}

/* Animación sutil de espera en íconos */
.shadow-pulse[b-bpjo486p4o] {
    animation: iconFloat-b-bpjo486p4o 3s ease-in-out infinite alternate;
}

@keyframes iconFloat-b-bpjo486p4o {
    0% {
        transform: translateY(0px);
        filter: drop-shadow(0 0 5px var(--neon-pink));
    }

    100% {
        transform: translateY(-8px);
        filter: drop-shadow(0 0 15px var(--neon-pink));
    }
}
/* Animación que simula un "Hover" automático intensificando el color y brillo cíclicamente */
@keyframes pulsoNeonResaltado-b-bpjo486p4o {
    0% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 20px #b026ff, 0 0 40px rgba(255, 0, 85, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.4) !important;
    }

    50% {
        transform: scale(1.05); /* Se agranda sutilmente en el pico del brillo */
        filter: brightness(1.3); /* Resalta e intensifica los colores del gradiente automáticamente */
        box-shadow: 0 0 35px #ff007f, 0 0 60px #b026ff, 0 0 80px rgba(176, 38, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.8) !important;
        border-color: #ffffff;
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 20px #b026ff, 0 0 40px rgba(255, 0, 85, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.4) !important;
    }
}

/* Ajuste complementario para el Buscador cuando está inactivo */
#btnToggleSidebar[b-bpjo486p4o] {
    border: 2px solid var(--neon-purple) !important;
    color: #ffffff !important;
    background-color: rgba(176, 38, 255, 0.1) !important;
    box-shadow: 0 0 10px rgba(176, 38, 255, 0.3) !important;
}

    #btnToggleSidebar:hover[b-bpjo486p4o] {
        background-color: var(--neon-purple) !important;
        color: #ffffff !important;
        box-shadow: 0 0 20px var(--neon-purple) !important;
    }


/* ================= COMPONENTES DEL CARTÓN DIGITAL DE VERIFICACIÓN ================= */
.ticket-header-grid[b-bpjo486p4o] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    font-size: 1.6rem;
    font-weight: 900;
    text-shadow: 0 0 5px #fff;
}

.ticket-bingo-grid[b-bpjo486p4o] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

/* Celdas del cartón individual */
.ticket-cell[b-bpjo486p4o] {
    background-color: #161b30;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-weight: 800;
    border-radius: 8px;
    transition: all 0.25s;
}

    /* Estado de coincidencia: El número del cartón coincide con una bolilla ya cantada */
    .ticket-cell.match-ok[b-bpjo486p4o] {
        background: linear-gradient(135deg, #00f0ff, #0044ff) !important;
        border-color: #00ffff !important;
        box-shadow: 0 0 12px var(--neon-cyan);
        text-shadow: 0 0 5px #fff;
    }

.central-free[b-bpjo486p4o] {
    background: rgba(176, 38, 255, 0.25) !important;
    color: var(--neon-purple) !important;
    border-color: var(--neon-purple) !important;
    font-size: 0.9rem !important;
}

.item-empty[b-bpjo486p4o] {
    opacity: 0.3;
}