:root{
    --main-bg-color: #0e0f15;
    --main-text-color: #EEEEEE;
}

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

html {
    width: 100%;
    height: 100%;
}

body {
    min-height: 100vh;
    width:100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family:'Anta', sans-serif;
    background:var(--main-bg-color);
    background: radial-gradient(circle,#0f335d 0%, #0e0f15 50%);
    color: var(--main-text-color);
    padding:0 20px;
    justify-content:center;
    align-items:center;
}

.main-nav{
    border-radius:10px;
    background:#0018397f;
    padding:10px;
}
.main-nav ul{
    list-style: none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items: center;
    gap:10px;
}
.main-nav ul li a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 21px;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #ff00aa;
    background:transparent;
    border: 1px solid #ff00aae6;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    font-family: 'Anta', sans-serif;
    box-shadow:
        0 0 8px rgba(255, 0, 170, 0.35),
        0 0 18px rgba(255, 0, 170, 0.2),
        inset 0 0 6px rgba(255, 0, 170, 0.12);
}
.contenido-principal {
  position: relative;
  z-index: 1;
  max-width:1000px;
  width:100%;
  margin: 30px 0;
  border: 1px solid #ffffff66;
  border-radius:5px;
  padding:0;
  overflow:hidden;
}

header{
    position: relative;
    width: 100%;
    height: 50px; /* La altura real de tu encabezado */
    display: flex;
    justify-content: space-evenly; /* Centra el contenido */
    align-items: center; /* Empuja el texto hacia abajo de la curva */
    background:#29196790;
}
.header-ribbon {
  color: #FFFFFF;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:stretch;
  width:100%;
  gap:10px;
  padding:10px;
}
.head-izquierda, .head-derecha{
  width:50%;
  flex-shrink:1;
}
.head-derecha{
  justify-self:flex-end;
  text-align:right;
  font-size:12px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.head-centro{
  width:100px;
  font-size:30px;
  text-align:center;
  font-weight:bold;
}
.head-centro .primdos{
  text-shadow:0px 0px 10px rgba(0, 229, 255, 1),0px 0px 20px rgba(0, 229, 255, 0.8),0px 0px 45px rgba(0, 229, 255, 0.5);
}
.head-centro .segdos{
  text-shadow:0px 0px 10px rgb(247, 0, 255),0px 0px 20px rgba(217, 0, 255, 0.8),0px 0px 45px rgba(255, 0, 251, 0.5);
}
.head-izquierda{
  font-size:12px;
  color: #AAA;
}

/* Botón Neón Magenta - Versión Principal */
.neon-magenta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 21px;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #ff00aa;
    background:transparent;
    border: 1px solid #ff00aae6;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    font-family: 'Anta', sans-serif;
    box-shadow:
        0 0 8px rgba(255, 0, 170, 0.35),
        0 0 18px rgba(255, 0, 170, 0.2),
        inset 0 0 6px rgba(255, 0, 170, 0.12);
}
/* Hover */
.neon-magenta-btn:hover {
    background: rgba(50, 15, 70, 1);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        0 0 14px rgba(255, 0, 170, 0.55),
        0 0 24px rgba(255, 0, 170, 0.35),
        inset 0 0 8px rgba(255, 0, 170, 0.2);
}

/* Active */
.neon-magenta-btn:active {
    transform: scale(0.98);
    box-shadow:
        0 0 10px rgba(255, 0, 170, 0.45),
        inset 0 0 10px rgba(255, 0, 170, 0.25);
}

/* Versión grande */
.neon-magenta-btn-large {
    padding: 16px 36px;
    font-size: 1.15rem;
    border-radius: 50px;
}

/* Variante Outline más sutil */
.neon-magenta-outline {
    background: transparent;
    border: 2px solid #ff00aa;
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.4);
}

.neon-magenta-outline:hover {
    background: rgba(255, 0, 170, 0.08);
    box-shadow: 0 0 18px rgba(255, 0, 170, 0.6);
}


main{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    background: #0a0817f2;
}
main section.main-section{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    gap:20px;
    position:relative;
    background: #0a0817ff;
}
main section.main-section::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/assets/img/iCFaC.jpg') no-repeat top center;
    background-size: contain;
    opacity: 0.6;                /* ← Aquí controlas la transparencia */
    z-index: 1;
}

main section.main-section > * {
  position:relative;
  z-index:2;
}
/*Hero*/
#hero {
    height: 28vmax;
    position: relative;
    overflow: hidden;
    display:flex; flex-direction:row; justify-content:center; align-items:flex-start;
}
#hero div{
  font-size:5vh;
  font-weight:bold;
  text-shadow: 2px 2px 3px #000000ca,-2px 2px 3px #000000ca,2px -2px 3px #000000ca,-2px -2px 3px #000000ca, 0 0 20px #000000;
  text-align:center; 
  margin:20px;
  font-family:'Orbitron',sans-serif;
}
#hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65%;                    /* Ajusta según necesites */
    pointer-events: none;
}

#leaderboard{

  position:relative;
  z-index:99;
}

/* Contenedor para hacer scroll horizontal en la tabla de posiciones */
.leaderboard-table-wrapper {
    width: 100%;
    overflow-x: visible; /* Habilita el scroll horizontal si el contenido excede el ancho */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en dispositivos iOS */
}
/*Formulario de registro a liga*/
#registro-liga{
  width:90%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:10px;
}
.reg-titulo{
  text-shadow:0px 0px 10px rgb(247, 0, 255),0px 0px 20px rgba(217, 0, 255, 0.8),0px 0px 45px rgba(255, 0, 251, 0.5);
  color:white;
  font-size:18px;
}
.registro-info{
  color:#ffffff91;
  font-size:10px;
  text-align:center;
}
.registro-liga-form{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:10px;
}

/*Estilo de tabla de posiciones*/
#tabla-posiciones{
  width:90%;
}
#main-tabla-posiciones{
  width:100%;
  border-collapse:separate;
  border-spacing: 0 3px;
}
#main-tabla-posiciones thead{
  color: #FFF;
  text-shadow:#6200ff 0px 0px 5px;
}
#main-tabla-posiciones tbody tr{
  background:#00e5ff1d;
  border-radius:5px;
  padding:3px;
  font-size:12px;
}
#main-tabla-posiciones th,
#main-tabla-posiciones td {
    padding: 8px 12px;
}

#main-tabla-posiciones tbody tr td:first-child{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-size:1.1em;
  font-family:'Orbitron',sans-serif;
  font-weight:bold;
  text-align:center;
}

#main-tabla-posiciones tbody tr td:last-child{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
#main-tabla-posiciones th:nth-child(3),
#main-tabla-posiciones td:nth-child(3),
#main-tabla-posiciones th:nth-child(4),
#main-tabla-posiciones td:nth-child(4),
#main-tabla-posiciones th:nth-child(5),
#main-tabla-posiciones td:nth-child(5),
#main-tabla-posiciones th:nth-child(6),
#main-tabla-posiciones td:nth-child(6),
#main-tabla-posiciones th:nth-child(7),
#main-tabla-posiciones td:nth-child(7),
#main-tabla-posiciones th:nth-child(8),
#main-tabla-posiciones td:nth-child(8) {
    text-align: center;
}

#main-tabla-posiciones td:nth-child(2){
  display:flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items:center;
  gap:10px;
}

.small-avatar{
  width:25px; height:25px; border-radius:50%;
}
/*Agenda*/

#agenda{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content:space-evenly;
  align-items:stretch;
  width:90%;
  gap:10px;
}

/*Estilo 1*/
.agenda-bloque{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items:stretch;
  gap:5px;
  height:200px;
  border: 2px solid #00e5ff4d;
  border-radius:10px;
  padding:10px;
}

.agenda-bloque .titulo-temporal{
  text-align: center;
}

.agenda-bloque .agenda-container{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:stretch;
  width:100%;
  height:100%;
  gap:10px;
}
.agenda-bloque .agenda-container .agenda-colizquierda, 
.agenda-bloque .agenda-container .agenda-colderecha{
  width:20%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}

.agenda-bloque .agenda-container .agenda-colizquierda .asiento-mesa,
.agenda-bloque .agenda-container .agenda-colderecha .asiento-mesa{
  height:50%;
  background:#00e5ff25;
  border: 2px solid #00e5ff4d;
  border-radius:5px;
}

.agenda-bloque .agenda-container .agenda-col{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.agenda-bloque .agenda-container .agenda-col .agenda-mesa{
  border: 2px solid #00e5ff4d;
  border-radius:5px;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
}

/*Estilo 2*/
.agenda-bloque_2{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items:stretch;
  gap:5px;
  min-height:200px;
  border: 2px solid #00e5ff4d;
  border-radius:10px;
  padding:10px;
}

.agenda-bloque_2 .titulo-temporal{
  text-align: center;
}

.agenda-bloque_2 .agenda-container{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  width:100%;
  height:100%;
  gap:10px;
}
.agenda-bloque_2 .agenda-container .agenda-footer{  
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  align-items: stretch;
  gap:10px;
}

.agenda-bloque_2 .agenda-container .agenda-footer .asiento-mesa{
  width:25%;
  height:30px;
  background:#00e5ff25;
  border: 2px solid #00e5ff4d;
  border-radius:5px;

}

.agenda-bloque_2 .agenda-container .agenda-col{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.agenda-bloque_2 .agenda-container .agenda-col .agenda-mesa{
  border: 2px solid #00e5ff4d;
  border-radius:5px;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:5px;
  padding:10px;
}

.agenda-bloque_2 .agenda-container .agenda-col .agenda-mesa .agenda-colizquierda{
    text-align:left;
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:10px;
}
.agenda-bloque_2 .agenda-container .agenda-col .agenda-mesa .agenda-colderecha{
    text-align:center;
    height:100%;
    width:150px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.agenda-bloque_2 .agenda-container .agenda-col .agenda-mesa .agenda-colderecha .icono-mesa{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items: center;
}
.agenda-bloque_2 .agenda-container .agenda-col .agenda-mesa .agenda-colderecha .resultado-mesa.porconfirmar{
    font-size:10px;
    text-align:center;
    color: #ff0000cc;
}

.agenda-bloque_2 .agenda-container .agenda-col .agenda-mesa .agenda-colderecha .resultado-mesa.porjugar{
    font-size:10px;
    text-align:center;
    color: #00e1ffcc;
}

.agenda-bloque_2 .agenda-container .agenda-col .agenda-mesa .agenda-colderecha .resultado-mesa.completada{
    font-size:10px;
    text-align:center;
    color: #ffd900cc;
}
.token-porconfirmar{
    width:100%;
     fill: #FFFFFF; 
    /* 2. El efecto Neón usando múltiples drop-shadow */
    filter: 
        drop-shadow(0px 0px 4px #ff0000cc)   /* Brillo interno fuerte */
        drop-shadow(0px 0px 12px rgba(255, 0, 0, 0.5))  /* Brillo medio */
        drop-shadow(0px 0px 25px rgba(255, 0, 0, 0.3)); /* Resplandor exterior suave */
}

.token-porjugar{
    width:100%;
     fill: #FFFFFF; 
    /* 2. El efecto Neón usando múltiples drop-shadow */
    filter: 
        drop-shadow(0px 0px 4px #00b3ffcc)   /* Brillo interno fuerte */
        drop-shadow(0px 0px 12px rgba(0, 179, 255, 0.5))  /* Brillo medio */
        drop-shadow(0px 0px 25px rgba(0, 153, 255, 0.3)); /* Resplandor exterior suave */
}

.token-completada{
    width:100%;
     fill: #FFFFFF; 
    /* 2. El efecto Neón usando múltiples drop-shadow */
    filter: 
        drop-shadow(0px 0px 4px #ffd000cc)   /* Brillo interno fuerte */
        drop-shadow(0px 0px 12px rgba(255, 208, 0, 0.5))  /* Brillo medio */
        drop-shadow(0px 0px 25px rgba(255, 204, 0, 0.3)); /* Resplandor exterior suave */
}

.agenda-container .agenda-col .agenda-mesa .token-mesa{
  /* 1. Definir el color base del ícono */
  fill: #00e5ff37; 
  /* 2. El efecto Neón usando múltiples drop-shadow */
  filter: 
    drop-shadow(0px 0px 4px rgba(0, 229, 255, 0.8))   /* Brillo interno fuerte */
    drop-shadow(0px 0px 12px rgba(0, 229, 255, 0.5))  /* Brillo medio */
    drop-shadow(0px 0px 25px rgba(0, 229, 255, 0.3)); /* Resplandor exterior suave */
    
  /* Opcional: Una transición por si quieres animarlo al pasar el cursor (hover) */
  transition: filter 0.3s ease, fill 0.3s ease;
}

/* Ejemplo de cómo hacerlo "encenderse" aún más al pasar el mouse */
.agenda-container .agenda-col .agenda-mesa .token-mesa:hover{
  fill: #ffffff; /* El núcleo se vuelve blanco por la intensidad de la luz */
  filter: 
    drop-shadow(0px 0px 6px rgba(0, 229, 255, 1)) 
    drop-shadow(0px 0px 18px rgba(0, 229, 255, 0.8))
    drop-shadow(0px 0px 40px rgba(0, 229, 255, 0.5));
}

.mesa-jugador{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    gap:10px;
    font-size:12px;
}
.mesa-jugador.ganador .jugador-nombre::after {
    content: ' ★';
    color: #ffd700;
    font-weight: bold;
}
.mesa-jugador.ganador {
    color: #ffd700;
}
.token-ok{
  fill: #bcfcbc; /* El núcleo se vuelve blanco por la intensidad de la luz */
  filter: 
    drop-shadow(0px 0px 2px rgb(0, 255, 38)) 
    drop-shadow(0px 0px 6px rgba(0, 255, 51, 0.8))
    drop-shadow(0px 0px 13px rgba(0, 255, 34, 0.5));
    width:16px;
    height:16px;
}
.token-ok.off{
    fill:#FFFFFF22;
    filter:none;
}
.asiento-mesa{
  width:100%;
  height:100%;
  background:#00e5ff25;
  border: 2px solid #00e5ff4d;
  border-radius:5px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0;
  color: inherit;
}
.asiento-mesa:hover:not(:disabled){
  background: rgba(0, 229, 255, 0.35);
}
.asiento-mesa.confirmado{
  background:#00ff2625 !important;
  border: 2px solid #00ff264d !important;
}
.asiento-mesa.clickable{
  cursor: pointer;
}
.asiento-mesa.disabled{
  cursor: not-allowed;
  opacity: 0.5;
}
.agenda-mesa.mesa-confirmada{
  border: 2px solid #00ff264d !important;
}
.mesa-confirmada .token-mesa{
  /* 1. Definir el color base del ícono */
  fill: #00ff264d !important; 
  /* 2. El efecto Neón usando múltiples drop-shadow */
  filter: 
    drop-shadow(0px 0px 4px rgba(9, 255, 0, 0.8))   /* Brillo interno fuerte */
    drop-shadow(0px 0px 12px rgba(0, 255, 51, 0.5))  /* Brillo medio */
    drop-shadow(0px 0px 25px rgba(0, 255, 47, 0.3)) !important; /* Resplandor exterior suave */
    
  /* Opcional: Una transición por si quieres animarlo al pasar el cursor (hover) */
  transition: filter 0.3s ease, fill 0.3s ease;
}
.mesa-confirmada .token-mesa:hover{
  fill: #ffffff !important; /* El núcleo se vuelve blanco por la intensidad de la luz */
  filter: 
    drop-shadow(0px 0px 6px rgba(9, 255, 0, 1)) 
    drop-shadow(0px 0px 18px rgba(0, 255, 51, 0.8))
    drop-shadow(0px 0px 40px rgba(0, 255, 47, 0.5)) !important;
}

/*Animaciones*/

@keyframes pulso-energia {
  0% {
    /* Estado inicial: brillo sutil */
    box-shadow: 0px 20px 40px rgba(0, 229, 255, 0.15);
    border-bottom: 2px solid rgba(0, 229, 255, 0.1);
  }
  50% {
    /* Estado máximo: brillo más intenso y línea más sólida */
    box-shadow: 0px 25px 60px rgba(0, 229, 255, 0.4);
    border-bottom: 2px solid rgba(0, 229, 255, 0.3);
  }
  100% {
    /* Regresa al estado inicial para cerrar el ciclo suavemente */
    box-shadow: 0px 20px 40px rgba(0, 229, 255, 0.15);
    border-bottom: 2px solid rgba(0, 229, 255, 0.1);
  }
}

/*Reglamento*/
.reglas{
    display:flex; flex-direction:column; justify-content:flex-start;align-items:stretch; gap:10px; padding:10px; width:100%;
}
.reglas-titulo{
    font-weight:bold;
    font-size:18px;
    text-shadow:0px 0px 10px #00e5ff,0px 0px 20px rgba(0, 229, 255, 0.8),0px 0px 45px rgba(0, 229, 255, 0.5);
}

.ficha-regla{
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items:stretch;
    gap:5px;
    padding:10px;
    border:1px solid #008cff8d;
    box-shadow:rgba(13, 255, 251,.3) inset 0 0 10px, rgba(13, 255, 251,.3) 0 0 10px;
    border-radius:10px;
}
.ficha-regla-titulo{
    font-size:14px;
    font-weight:bold;
    text-shadow:0px 0px 10px #00a2ff
}
.ficha-regla-contenido{
    font-size:12px;
    text-align:justify;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.ficha-regla-sancion{
    font-size:12px;
    text-align:justify;
     filter: 
        drop-shadow(0px 0px 4px #ff0000cc)   /* Brillo interno fuerte */
        drop-shadow(0px 0px 12px rgba(255, 0, 0, 0.5))  /* Brillo medio */
        drop-shadow(0px 0px 25px rgba(255, 0, 0, 0.3)); /* Resplandor exterior suave */
}
/* 1. El escenario base (Tu gradiente oscuro) */
.escenario-futurista {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  
  /* 1. Fondo base del espacio oscuro */
  background-color: #0e0f15; 
  
  /* 2. Capas de estrellas y nebulosas */
  background-image: 
    /* Estrellas grandes y brillantes (Blancas) */
    radial-gradient(2px 2px at 40px 60px, #ffffff, transparent),
    radial-gradient(2px 2px at 150px 10px, #ffffff, transparent),
    
    /* Estrellas medianas con ligero tono cian */
    radial-gradient(1.5px 1.5px at 20px 150px, rgba(0, 229, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 90px 40px, rgba(0, 229, 255, 0.8), transparent),
    
    /* Estrellas pequeñas y distantes (Grises/Tenues) */
    radial-gradient(1px 1px at 130px 180px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 180px 90px, rgba(255, 255, 255, 0.4), transparent),
    
    /* Brillos de gas estelar/nebulosa gigantes y muy difuminados */
    radial-gradient(circle at 15% 50%, rgba(15, 51, 93, 0.5) 0%, transparent 60%),
    radial-gradient(circle at 85% 20%, rgba(0, 229, 255, 0.08) 0%, transparent 50%);
    
  /* 3. Desfasar los tamaños de repetición es el truco para que parezca aleatorio */
  background-size: 
    200px 200px, 250px 250px, /* Cajas para estrellas grandes */
    150px 150px, 300px 300px, /* Cajas para estrellas medianas */
    100px 100px, 220px 220px, /* Cajas para estrellas pequeñas */
    100% 100%, 100% 100%;     /* Cajas para las nebulosas (una sola vez por pantalla) */
    
  z-index: -1;
  overflow: hidden;
}

/* 2. El Grid 3D */
.grid-horizonte {
  position: absolute;
  /* Lo hacemos mucho más ancho que la pantalla para que no se vean los bordes al rotarlo */
  width: 200vw;
  height: 115vh;
  left: -50vw; 
  bottom: -20vh; /* Lo empujamos un poco hacia abajo */
  
  /* Dibujamos la cuadrícula con dos gradientes lineales (vertical y horizontal) */
  background-image: 
    linear-gradient(rgba(228, 228, 228, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228, 228, 228, 0.15) 1px, transparent 1px);
  background-size: 20px 20px; /* El tamaño de cada cuadro */
  
  /* LA MAGIA 3D: Le damos perspectiva y lo acostamos hacia atrás (rotateX) */
  transform: perspective(500px) rotateX(85deg);
  transform-origin: top center; /* El punto de fuga */
  
  /* EL HORIZONTE: Una máscara que difumina el grid de arriba (transparente) hacia abajo (visible) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 80%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 80%);
}

@keyframes avanzar-grid {
  0% {
    background-position: 0 0;
  }
  100% {
    /* Este valor debe ser idéntico al alto de tu background-size */
    background-position: 0 20px; 
  }
}
.grid-horizonte {
  /* ... tus otras propiedades ... */
  
  /* Llama a la animación: lineal y continua */
  animation: avanzar-grid 2s linear infinite; 
}

input{
    background:transparent;
    padding:8px;
    border: 1px solid #c1fffe;
    border-radius:5px;
    box-shadow:rgba(13, 255, 251,.3) inset 0 0 10px, rgba(13, 255, 251,.3) 0 0 10px;
    width:100%;
    text-align:center;
    font-size: 16px;
    color: #c1fffe;
    transition:1s all ease;
}

input::placeholder{
    color:#5dbebdcc;
}

input::selection{
    box-shadow:#0dfffb inset 0 0 20px, #0dfffb 0 0 20px;
}

input:focus{
    outline:none;
    box-shadow:#0dfffb inset 0 0 20px, #0dfffb 0 0 20px;
}

/* Estilos para el estado de registro */
.registro-status {
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 5px;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    width:90%;
}

.registro-status p {
    color: #00e5ff;
    font-weight: bold;
    margin: 0;
}

/* Estilos para botones de gestión de ligas */
.btn-activate {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 5px;
}

.btn-deactivate {
    background: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 5px;
}

.btn-close {
    background: #ff9800;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 5px;
}

.btn-distribute {
    background: #2196F3;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 5px;
}

.btn-activate:hover, .btn-deactivate:hover, .btn-close:hover, .btn-distribute:hover {
    opacity: 0.8;
}

.btn-confirm {
    background: #9c27b0;
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
}

.btn-confirm:hover {
    opacity: 0.8;
}

.btn-update {
    background: #607d8b;
    color: white;
    border: none;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 5px;
}

.btn-update:hover {
    opacity: 0.8;
}

.btn-back {
    background: #795548;
    color: white;
    padding: 8px 15px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
}

.btn-back:hover {
    opacity: 0.8;
}

/* ===== ESTILOS PARA TABLA DE LIGAS ===== */
.ligas-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: rgba(10, 8, 23, 0.9);
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);
}

.ligas-table thead {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(255, 0, 170, 0.1));
    color: #00e5ff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ligas-table th {
    padding: 15px 8px;
    text-align: left;
    font-size: 12px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.3);
    white-space: nowrap;
}

.ligas-table td {
    padding: 12px 8px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.1);
    font-size: 11px;
    vertical-align: middle;
}

.ligas-table tbody tr {
    transition: background-color 0.3s ease;
}

.ligas-table tbody tr:hover {
    background: rgba(0, 229, 255, 0.05);
}

.ligas-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* Columnas específicas */
.ligas-table th:nth-child(1),
.ligas-table td:nth-child(1) {
    width: 50px;
    text-align: center;
}

.ligas-table th:nth-child(2),
.ligas-table td:nth-child(2) {
    min-width: 150px;
}

.ligas-table th:nth-child(3),
.ligas-table td:nth-child(3) {
    min-width: 120px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
}

.ligas-table th:nth-child(8),
.ligas-table td:nth-child(8) {
    width: 60px;
    text-align: center;
}

.ligas-table th:nth-child(9),
.ligas-table td:nth-child(9),
.ligas-table th:nth-child(10),
.ligas-table td:nth-child(10) {
    width: 80px;
    text-align: center;
}

.ligas-table th:nth-child(11),
.ligas-table td:nth-child(11) {
    min-width: 200px;
    text-align: center;
}

/* Estilos para status */
.status-active {
    color: #4CAF50;
    font-weight: bold;
}

.status-inactive {
    color: #f44336;
    font-weight: bold;
}

/* Contenedor responsive para la tabla */
.ligas-list {
    width: 100%;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
}

/* Estilo específico para columna de jugadores registrados */
.ligas-table th:nth-child(9),
.ligas-table td:nth-child(9) {
    font-weight: bold;
    color: #00e5ff;
}

/* ===== ESTILOS RESPONSIVE ===== */
@media (max-width: 768px) {
    .ligas-table-container {
        display: none; /* Ocultar tabla en móvil */
    }
    
    .ligas-fichas-container {
        display: block; /* Mostrar fichas en móvil */
    }
}

@media (min-width: 769px) {
    .ligas-table-container {
        display: block; /* Mostrar tabla en desktop */
    }
    
    .ligas-fichas-container {
        display: none; /* Ocultar fichas en desktop */
    }
}

/* ===== ESTILOS PARA FICHAS DE LIGAS (MÓVIL) ===== */
.ligas-fichas {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.liga-ficha {
    background: rgba(10, 8, 23, 0.9);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.liga-ficha:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(0, 229, 255, 0.2);
}

.ficha-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}

.ficha-header h3 {
    margin: 0;
    color: #00e5ff;
    font-size: 18px;
    font-weight: bold;
}

.ficha-id {
    color: #888;
    font-size: 12px;
    font-family: 'Courier New', monospace;
}

.ficha-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.ficha-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.ficha-label {
    color: #aaa;
    font-size: 12px;
    font-weight: bold;
    min-width: 100px;
}

.ficha-value {
    color: #fff;
    font-size: 12px;
    text-align: right;
    flex: 1;
}

.ficha-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 229, 255, 0.2);
}

.ficha-actions .btn-activate,
.ficha-actions .btn-deactivate,
.ficha-actions .btn-close,
.ficha-actions .btn-distribute,
.ficha-actions .btn-confirm {
    width: 100%;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    border: none;
}

.ficha-actions form {
    margin: 0;
}

.ficha-actions form{
    width: 100%;
}

/* ===== ESTILOS PARA TABLA DE LIGAS ===== */
.ligas-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: rgba(10, 8, 23, 0.9);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);
}

.ligas-table thead {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(255, 0, 170, 0.1));
    color: #00e5ff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ligas-table th {
    padding: 15px 8px;
    text-align: left;
    font-size: 12px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.3);
    white-space: nowrap;
}

.ligas-table td {
    padding: 12px 8px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.1);
    font-size: 11px;
    vertical-align: middle;
}

.ligas-table tbody tr {
    transition: background-color 0.3s ease;
}

.ligas-table tbody tr:hover {
    background: rgba(0, 229, 255, 0.05);
}

.ligas-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* Columnas específicas */
.ligas-table th:nth-child(1),
.ligas-table td:nth-child(1) {
    width: 50px;
    text-align: center;
}

.ligas-table th:nth-child(2),
.ligas-table td:nth-child(2) {
    min-width: 150px;
}

.ligas-table th:nth-child(3),
.ligas-table td:nth-child(3) {
    min-width: 120px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
}

.ligas-table th:nth-child(8),
.ligas-table td:nth-child(8) {
    width: 60px;
    text-align: center;
}

.ligas-table th:nth-child(9),
.ligas-table td:nth-child(9),
.ligas-table th:nth-child(10),
.ligas-table td:nth-child(10) {
    width: 80px;
    text-align: center;
}

.ligas-table th:nth-child(11),
.ligas-table td:nth-child(11) {
    min-width: 200px;
    text-align: center;
}

/* Estilos para status */
.status-active {
    color: #4CAF50;
    font-weight: bold;
}

.status-inactive {
    color: #f44336;
    font-weight: bold;
}

/* Contenedor responsive para la tabla */
.ligas-list {
    width: 100%;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
}

/* ===== ESTILOS PARA TABLA DE JUGADORES (CONFIRMAR) ===== */
.jugadores-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: rgba(10, 8, 23, 0.9);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);
}

.jugadores-table thead {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(255, 0, 170, 0.1));
    color: #00e5ff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jugadores-table th,
.jugadores-table td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.1);
    font-size: 11px;
    text-align: left;
}

.jugadores-table tbody tr {
    transition: background-color 0.3s ease;
}

.jugadores-table tbody tr:hover {
    background: rgba(0, 229, 255, 0.05);
}

.jugadores-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* Formulario inline en tabla */
.jugadores-table form {
    display: inline-block;
    margin: 0;
}

.jugadores-table label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 11px;
}

.jugadores-table input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* ===== ESTILOS RESPONSIVE PARA CONFIRMAR JUGADORES ===== */
@media (max-width: 768px) {
    .jugadores-table-container {
        display: none; /* Ocultar tabla en móvil */
    }

    .jugadores-fichas-container {
        display: block; /* Mostrar fichas en móvil */
    }
}

@media (min-width: 769px) {
    .jugadores-table-container {
        display: block; /* Mostrar tabla en desktop */
    }

    .jugadores-fichas-container {
        display: none; /* Ocultar fichas en desktop */
    }
}

/* ===== ESTILOS PARA FICHAS DE JUGADORES (MÓVIL) ===== */
.jugadores-fichas {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.jugador-ficha {
    background: rgba(10, 8, 23, 0.9);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jugador-ficha:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(0, 229, 255, 0.2);
}

.jugador-ficha .ficha-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}

.jugador-ficha .ficha-header h3 {
    margin: 0;
    color: #00e5ff;
    font-size: 18px;
    font-weight: bold;
}

.jugador-ficha .ficha-id {
    color: #888;
    font-size: 12px;
    font-family: 'Courier New', monospace;
}

.jugador-ficha .ficha-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.jugador-ficha .ficha-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.jugador-ficha .ficha-label {
    color: #aaa;
    font-size: 12px;
    font-weight: bold;
    min-width: 100px;
}

.jugador-ficha .ficha-value {
    color: #fff;
    font-size: 12px;
    text-align: right;
    flex: 1;
}

.jugador-ficha .ficha-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 229, 255, 0.2);
}

.jugador-ficha .ficha-actions form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jugador-ficha .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
}

.jugador-ficha .checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.jugador-ficha .btn-update {
    padding: 10px;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    border: none;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.8), rgba(255, 0, 170, 0.8));
    color: #000;
    font-weight: bold;
}

.jugador-ficha .btn-update:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 1), rgba(255, 0, 170, 1));
    transform: translateY(-1px);
}

/* Formulario de Reportar Resultados */
#reportar-resultados {
    width: 90%;
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.neon-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    text-shadow: 0px 0px 10px rgba(0, 229, 255, 1), 0px 0px 20px rgba(0, 229, 255, 0.8);
    color: #00e5ff;
}

.mesa-info {
    text-align: center;
    margin-bottom: 30px;
}

.mesa-info h2 {
    color: #fff;
    margin-bottom: 10px;
}

.mesa-info p {
    color: #ffffff91;
    font-size: 14px;
}

.resultados-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-section {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-section h3 {
    color: #00e5ff;
    margin-bottom: 10px;
    font-size: 16px;
    text-shadow: 0px 0px 5px rgba(0, 229, 255, 0.5);
}

.form-section p {
    color: #ffffff91;
    font-size: 12px;
    margin-bottom: 15px;
}

.participantes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.participante-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
}

.participante-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #00e5ff;
}

.jugador-nombre {
    color: #fff;
}

.neon-select, .neon-input {
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    font-family: 'Anta', sans-serif;
}

.neon-select:focus, .neon-input:focus {
    outline: none;
    border-color: #00e5ff;
    box-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
}

.neon-select option {
    background: #0e0f15;
    color: #fff;
}

.form-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.btn-cancel,
.neon-cyan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 21px;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid #00e5ffe6;
    color: #00e5ff;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Anta', sans-serif;
    letter-spacing: 0.7px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 8px rgba(0, 229, 255, 0.25),
        0 0 16px rgba(0, 229, 255, 0.12);
}

.btn-cancel:hover,
.neon-cyan-btn:hover {
    background: rgba(0, 229, 255, 0.12);
    box-shadow:
        0 0 14px rgba(0, 229, 255, 0.45),
        0 0 24px rgba(0, 229, 255, 0.2);
    transform: translateY(-2px);
}

.btn-cancel:active,
.neon-cyan-btn:active {
    transform: scale(0.98);
    box-shadow:
        0 0 10px rgba(0, 229, 255, 0.35),
        inset 0 0 8px rgba(0, 229, 255, 0.14);
}

/* Botón Reportar Resultados */
.mesa-status-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.btn-reportar-resultados {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 0.6rem;
    font-weight: 400;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.8), rgba(0, 229, 255, 0.6));
    border: 1px solid rgba(0, 229, 255, 0.8);
    color: #000;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Anta', sans-serif;
    margin-top: 5px;
}

.btn-reportar-resultados:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 1), rgba(0, 229, 255, 0.8));
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
    transform: translateY(-2px);
}