/* assets/style.css */

/* --- Variables --- */
:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --accent: #2196F3; /* Un azul más vibrante */
  --accent-light: #64b5f6; /* Color para el resplandor */
  --muted: #6b7280;
  --text-dark: #0f172a;
  --text-light: white;
  --green-dark: #1a5e20; /* Color verde oscuro elegante */
  --blue-bingo-card: linear-gradient(135deg, #0077b6, #00b4d8);
  --blue-bingo-cell-bg: #caf0f8;
  --blue-bingo-cell-text: #03045e;
  --blue-bingo-marked: #008000;
}

/* --- Base & Utilities --- */
* {
  box-sizing: border-box;
  font-family: Inter, system-ui, Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-dark);
  font-size: 25px;
}

.container {
  max-width: 50%;
  margin: 50px auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.main {
  display: flex;
  gap: 20px;
  max-width: 100%;

  margin: 20px auto;
  padding: 10px;
}

.card {
  background: var(--card);
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(11, 20, 40, 0.06);
   max-width: 600px;
  height: 600px;

}



.topbar {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--card);
  box-shadow: 0 6px 18px rgba(11, 20, 40, .06);
}



.left {width: 50%;}
.right { width: 50%; }

.button, button {
  background: var(--accent);
  border: none;
  color: var(--text-light);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
}

/* Estilo para la sección "left" */
.main .left {
  /* Fondo con degradado lineal de azul oscuro a morado */
   background: linear-gradient(180deg,#6495ED, #555555);
  color: white; /* Para que el texto sea legible sobre el fondo oscuro */
  
  border-radius: 15px; /* Bordes redondeados para un aspecto más moderno */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Sombra sutil para profundidad */
  /* Ajusta otras propiedades de layout si es necesario */
}
.main .right {
  /* Fondo con degradado lineal de azul oscuro a morado */
   background: linear-gradient(180deg, #6495ED, #cccccc);
  color: white; /* Para que el texto sea legible sobre el fondo oscuro */
  padding: 20px;
  border-radius: 15px; /* Bordes redondeados para un aspecto más moderno */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Sombra sutil para profundidad */
  /* Ajusta otras propiedades de layout si es necesario */
}
/* Opcional: para un degradado más vibrante */
.main .left.vibrant {
  background: linear-gradient(180deg, #FF6F61, #DE4313); /* Tonos cálidos de naranja y rojo */
  color: white;
}

/* Fin Estilo para la sección "left" */

.small {
  font-size: 50px;
  font-weight: bold;
  color: var(--write);
}

/* --- Bingo Cards --- */
/* Espacio entre los cartones */
#myCards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Puedes ajustar este valor para aumentar o disminuir la separación */
  justify-content: center;
}

.bingo-card {
  background: var(--blue-bingo-card);
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(11, 20, 40, 0.2);
  color: var(--text-light);
 width: 100%;
}

.card-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 10px; /* Esta línea crea la separación */

}

.card-table .num {
  background: var(--blue-bingo-cell-bg);
  color: var(--blue-bingo-cell-text);
  font-weight: bold;
  font-size: 100%;
  border-radius: 8px;
  transition: transform 0.2s;
  text-align: center;
}

.card-table .letter1 {
  background: var(--blue-bingo-cell-bg);
  color: green; /* Cambia el color del texto a blanco */
  font-weight: bold;
  font-size: 100%;
  border-radius: 8px;
  transition: transform 0.2s;
  text-align: center;
}

.card-table .num:hover {
  transform: scale(1.05);
}

.card-table .num.mark {
  background: var(--blue-bingo-marked);
  color: var(--text-light);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}



/* --- Main Bingo Board (Admin) --- */
.elegant-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: var(--green-dark);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  max-width: 1000px;
  margin: 20px auto;
}

.board-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 400px;
  margin-bottom: 10px;
}

.board-header-cell {
  flex: 1;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: var(--text-light);
  background-color: var(--green);
  border-radius: 8px;
  padding: 10px 0;
}

.board-columns-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.board-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background-color: var(--green-dark);
  border-radius: 8px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

.board-number {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  font-size: 18px;
  font-weight: bold;
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.board-number:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.board-number.drawn {
  background-color: var(--accent);
  color: #333;
  box-shadow: 0 0 10px var(--accent-light);
  transform: scale(1.05);
}

/* --- Last Drawn Numbers --- */
.billiard-ball-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}



/* esfera grande ultimo numero */
.last-drawn-circle {
    width: 70px;
    height: 70px;
    
      /* Degradado de color de azul claro a verde */
    background: linear-gradient(145deg, #5F9EA0, #2E8B57);
    
    /* Estilo de esfera 3D usando box-shadow */
    border-radius: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center; 
    font-size: 15px;
    font-weight: bold;
    color: white;
    margin: 10px auto;
    
    /* Sombras para el efecto 3D */
    box-shadow: 
        inset 0 0 10px rgba(255, 255, 255, 0.5), /* Sombra interior para brillo */
        0 10px 20px rgba(0, 0, 0, 0.3), /* Sombra exterior para efecto de elevación */
        0 0 10px rgba(255, 255, 255, 0.2) inset; /* Brillo adicional */
}

/* Estilo para las letras y los números dentro del círculo */
.last-drawn-circle span {
    line-height: 1; /* Asegura que no haya espacio extra entre las líneas */
}
/* fin esfera grande ultimo numero */



/* Estilos para el contenedor de historial con efecto 3D */
.card-3d {
    background-color: #f0f0f0; /* Color gris claro */
    padding: 5px;
    width:100%;
    border-radius: 10px;
    margin-top: 10px;
    
    /* Sombra para el efecto de relieve */
    box-shadow: 
        inset 5px 5px 10px rgba(0, 0, 0, 0.1), /* Sombra interior para "hundir" */
        inset -5px -5px 10px rgba(255, 255, 255, 0.5); /* Luz interior para "hundir" */
    
    font-size: 1.2em;
    color: #333;
    text-align: center;
}

/* Estilos para cada número-esfera */
.circled-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 12px;
    border-radius: 50%; /* Esto crea la forma de círculo */
    font-weight: bold;
    color: white;
    margin: 1px;
    
    /* Degradado y sombra para efecto de esfera 3D */
    background: radial-gradient(circle at 30% 30%, #4a90e2, #1f508a); /* Degradado circular para la luz */
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.4), /* Sombra principal */
        inset 0 0 10px rgba(255, 255, 255, 0.4); /* Sombra interior para brillo */
    
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para el número */
    
    /* Transición para una animación suave si se añaden o remueven */
    transition: all 0.3s ease-in-out;
}




/* assets/style.css */

/* Ocultar el topbar en pantallas pequeñas y viceversa */
@media (max-width: 991.98px) {
  .topbar {
    display: none;
  }
}

@media (min-width: 992px) {
  .topbar {
    display: flex; /* o grid, o lo que mejor se ajuste a tu diseño */
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--card);
    box-shadow: 0 6px 18px rgba(11, 20, 40, .06);
  }
}

/* assets/style.css */



/* Estilos para el contenedor de los botones de administrador */
.admin-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espacio entre los botones */
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

/* Estilos base para todos los botones de control */
.admin-controls button {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px; /* Esquinas más suaves */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Efecto al pasar el cursor (hover) */
.admin-controls button:hover {
    transform: translateY(-2px); /* Mover el botón ligeramente hacia arriba */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para efecto de elevación */
}

/* Estilos específicos para cada tipo de botón */

/* Botón "Sacar esfera" y "Sorteo Automático" */
#drawBtn, #autoDrawBtn {
    background: linear-gradient(135deg, #4CAF50, #2E8B57); /* Degradado verde */
    color: white;
}

/* Botón "Resetear esferas" */
#resetDrawsBtn {
    background: linear-gradient(135deg, #FFC107, #FFA000); /* Degradado amarillo/naranja */
    color: #333;
}

/* Botón "Reiniciar Juego Completo" (rojo) */
#resetGameBtn {
    background: linear-gradient(135deg, #F44336, #D32F2F); /* Degradado rojo */
    color: white;
}

/* fin Estilos para el contenedor de los botones de administrador */

/* figura ganadora */

.pattern-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 5px;
    width: 100px;
    margin: 10px auto;
}

.pattern-cell {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
}

.pattern-cell.marked {
    background-color: #3b5998; /* Color azul, puedes usar el mismo de las esferas */
    border-color: #3b5998;
}

/* fin figura ganadora */

/*Sala Chat*/
.chat-container {
    position: fixed;
    top: 70px;
    right: 0px;
    width: 300px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    z-index: 1000;
}

.chat-container.minimized .chat-body {
    display: none;
}

.chat-header {
    background-color: #007bff;
    color: white;
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.chat-title {
    margin: 0;
    font-size: 16px;
}

.chat-toggle-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.chat-container.minimized .chat-toggle-icon::before {
    content: "+";
}

.chat-container:not(.minimized) .chat-toggle-icon::before {
    content: "-";
}

.chat-body {
    height: 300px;
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9;
    word-wrap: break-word; /* Para evitar desbordamientos de texto */
}

.chat-message {
    margin-bottom: 10px;
    line-height: 1.4;
}

.chat-message .username {
    font-weight: bold;
    margin-right: 5px;
}

.chat-input {
    padding: 10px;
    display: flex;
    gap: 5px;
}

#chatInput {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#chatSendButton {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.unread-count {
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 10px;
    display: none; /* Oculto por defecto */
}

.chat-container.has-unread .unread-count {
    display: inline-block; /* Muestra el contador cuando hay mensajes */
}
.chat-header {
    /* ... estilos existentes ... */
    cursor: grab; /* Indica que el elemento se puede arrastrar */
}

.chat-header:active {
    cursor: grabbing; /* Cambia el cursor mientras se arrastra */
}
/*FIN Sala Chat*/

/*Notificaciones en la etiqueta notificaciones*/

#notificaciones {
    /* Estilos del contenedor principal */
    perspective: 1000px; /* Define la perspectiva para el efecto 3D */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacio entre las tarjetas */
    max-height: 400px; /* Altura máxima para hacer el contenedor desplazable */
    overflow-y: auto; /* Permite el desplazamiento vertical */
    padding: 15px;
    background-color: #f0f2f5;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.notification-message {
    /* Estilos para cada tarjeta individual de notificación */
    position: relative;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    transform-style: preserve-3d; /* Permite a los hijos tener un contexto 3D */
}

/* Efecto de inclinación 3D al pasar el ratón */
.notification-message:hover {
    transform: rotateX(5deg) rotateY(5deg) scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.15);
}

.notification-message span {
    font-weight: 600;
    color: #333;
    z-index: 10;
}

/* Pseudo-elemento para el efecto de luz y sombra */
.notification-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 50%
    );
    border-radius: inherit;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.notification-message:hover::before {
    opacity: 1;
}

/* fin Notificaciones en la etiqueta notificaciones*/




/* assets/style.css */
#oneAwayCards {
  background-color: #f8f9fa; /* Color de fondo gris claro */
  border: 1px solid #e2e3e5; /* Borde sutil para definir la caja */
  color: #333333;
  border-radius: 8px; /* Bordes redondeados */
  padding: 15px; /* Espaciado interno */
  margin-top: 15px; /* Margen superior para separarlo del contenido anterior */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave para darle profundidad */
}
#oneAwayCards p {
  margin: 0;
  color: #6c757d; /* Color de texto gris */
  font-style: italic;
}

.pattern-mark {
    background-color: #ffc107; /* Un color diferente para el patrón ganador */
    border: 2px solid #ff0000;
}


#alert-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    z-index: 1050; /* Un z-index alto para asegurar que flote sobre otros elementos */
}


/* ////////////////////////////////////////////////////////////////////////////////// */
/* Contenedor principal del menú flotante */
#float-action-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Estilos para el botón principal (el disparador) */
.float-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #dc3545; /* Rojo de Bootstrap para destacar */
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    font-size: 24px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2; /* Se coloca al final (abajo) del flex container */
}

/* Rotar el icono del botón principal cuando está activo */
#float-action-menu.active .float-btn {
    background-color: #007bff; /* Cambia de color cuando está abierto */
    transform: rotate(45deg); /* Efecto de rotación */
}

/* Contenedor de las opciones secundarias */
.float-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    max-height: 0; /* Inicialmente oculto */
    overflow: hidden;
    transition: max-height 0.3s ease-out, margin-bottom 0.3s ease-out;
    order: 1; /* Se coloca arriba de las opciones */
}

/* Mostrar las opciones cuando el menú está activo */
#float-action-menu.active .float-options {
    max-height: 300px; /* Suficiente para mostrar todas las opciones */
    margin-bottom: 15px;
}

/* Estilo para cada opción del menú */
.float-option-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #6c757d; /* Gris de Bootstrap */
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

/* Colores específicos para WhatsApp */
.float-option-item:nth-child(2) { /* Segundo ícono (Grupo de WA) */
    background-color: #25D366;
}
.float-option-item:nth-child(3) { /* Tercer ícono (Compartir WA) */
    background-color: #1FAF59;
}

.float-option-item:hover {
    background-color: #007bff;
}

/* ESTILO AÑADIDO PARA EL LOGO */
.logo {
    width: 120px; /* Ajusta el tamaño según sea necesario */
    height: auto;
    margin-bottom: 20px;
    border-radius: 50%; /* Opcional: para logos circulares */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}