/* Importar la fuente Montserrat desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

/* Definición de variables de color y tipografía */
:root {
    --color-amarillo: #FFD300;
    --color-rojo: #E30613;
    --color-negro: #000000;
    --color-blanco: #FFFFFF;
    --color-gris-claro: #f4f4f4;
    --font-principal: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-principal);
    background-color: var(--color-gris-claro);
    color: var(--color-negro);
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: var(--color-blanco);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

h1, h2 {
    font-weight: 900; /* ExtraBold o el más cercano */
    text-align: center;
    color: var(--color-negro);
}

.slogan {
    text-align: center;
    color: var(--color-rojo);
    font-size: 25px ;
    font-weight: 700;
    margin-top: -15px;
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--font-principal);
    box-sizing: border-box;
}

.btn {
    display: block;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-family: var(--font-principal);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.btn-principal {
    background-color: var(--color-amarillo);
    color: var(--color-negro);
}

.btn-principal:hover {
    opacity: 0.9;
}

.boletas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.boleta {
    padding: 15px 5px;
    border-radius: 5px;
    text-align: center;
    font-weight: 700;
    transition: transform 0.2s;
    font-size: 1.2em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ESTADO: DISPONIBLE (Color original, sin cambios) */
.boleta.disponible {
    background-color: #e9ecef;
    color: var(--color-negro);
    border: 1px solid #ccc;
    cursor: pointer;
}
.boleta.disponible:hover {
    transform: scale(1.1);
    background-color: var(--color-amarillo);
}

/* ESTADO: OCUPADO POR OTRO (Nuevo color gris oscuro) */
.boleta.ocupada {
    background-color: #6c757d; /* Gris oscuro */
    color: var(--color-blanco);
    cursor: not-allowed;
    opacity: 0.8;
    text-decoration: line-through;
}

/* ESTADO: OCUPADO POR MÍ (Nuevo color rojo) */
.boleta.ocupada-mia {
    background-color: var(--color-rojo); /* Rojo de la marca */
    color: var(--color-blanco);
    cursor: not-allowed;
    font-weight: 900; /* ExtraBold para destacar */
}

/* ESTADO: SELECCIONADA AHORA (Amarillo de la marca) */
.boleta.seleccionada {
    background-color: var(--color-amarillo);
    border: 2px solid var(--color-negro);
    transform: scale(1.1);
}

.boleta.ocupada {
    text-decoration: line-through; /* Tachar los números ocupados */
}
/* ... (todo tu CSS existente) ... */

/* ESTILO PARA EL ENLACE DE TÉRMINOS Y CONDICIONES */
.enlace-terminos {
    color: var(--color-negro);
    font-weight: bold;
    text-decoration: underline;
}

.enlace-terminos:hover {
    color: var(--color-rojo);
}
/* --- ESTILOS PARA MODALES --- */

/* El fondo oscuro semi-transparente */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed; /* Se queda fijo en la pantalla */
    z-index: 1000; /* Se asegura de que esté por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si el contenido es muy largo */
    background-color: rgba(0, 0, 0, 0.6); /* Negro con 60% de opacidad */
    align-items: center;
    justify-content: center;
}

/* El contenido del modal (la ventana blanca) */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

/* El botón para cerrar (la 'X') */
.modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* --- ESTILOS PARA BOLETAS ASIGNADAS (VISUALES) --- */

.mis-numeros-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espacio entre las boletas */
}

.boleta-asignada {
    background-color: var(--color-amarillo);
    color: var(--color-negro);
    padding: 8px 12px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.2em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    min-width: 60px;
    text-align: center;
}
/* ... (todo tu CSS existente, incluyendo los estilos para modales) ... */

/* ESTILO PARA QUE LAS BOLETAS ASIGNADAS SE VEAN COMO EL TABLERO */
.boleta-asignada-visual {
    padding: 15px 5px;
    border-radius: 5px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1em; /* Un poco más pequeño que en el tablero de selección */
    background-color: var(--color-amarillo);
    color: var(--color-negro);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* --- ESTILOS PARA EL PIE DE PÁGINA --- */
.site-footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    color: #6c757d; /* Un gris suave */
    font-size: 14px;
    border-top: 1px solid #e9ecef; /* Una línea sutil de separación */
}

.site-footer a {
    color: var(--color-negro);
    font-weight: bold;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}
/* ... (todo tu CSS existente) ... */

/* --- ESTILOS PARA LA NUEVA CABECERA DE MARCA --- */
.main-header {
    background-color: var(--color-amarillo); /* El amarillo de tu marca */
    color: var(--color-negro);
    padding: 10px 20px;
    display: flex; /* Para alinear el logo y el texto */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Una sombra sutil */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
}

.main-header-logo {
    max-height: 50px; /* Controla el tamaño del logo */
    margin-right: 15px; /* Espacio entre el logo y el texto */
}

.main-header-title {
    font-size: 1.5em; /* Tamaño del texto de bienvenida */
    font-weight: 900; /* ExtraBold */
    margin: 0; /* Quita márgenes por defecto del h1 */
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 600px) {
    .main-header-title {
        font-size: 1.1em;
    }
    .main-header-logo {
        max-height: 40px;
    }
}
/* ... (todo tu CSS existente) ... */

/* --- ESTILOS PARA TABS EN EL PANEL DE CLIENTE --- */
.client-tab-nav {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap; /* Para que se ajuste en móviles */
}

.client-tab-button {
    background-color: transparent;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    color: #6c757d;
}

.client-tab-button.active {
    border-bottom: 3px solid var(--color-amarillo);
    font-weight: bold;
    color: var(--color-negro);
}

.client-tab-content {
    display: none;
}

.client-tab-content.active {
    display: block;
}