body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h1, h2 {
    text-align: center;
    color: #333;
}

/* Estilo para los pasillos */
.aisle {
    /* Propiedades de grid position se establecen en JS */
    /* grid-column-start: ...; */
    /* grid-column-end: ...; */
    /* grid-row-start: ...; */

    background-color: transparent; /* Fondo transparente para que se vea el fondo del .teatro-mapa */
    /* O background-color: white; si el fondo del .teatro-mapa es blanco */
    pointer-events: none; /* Importante: asegura que no se pueda hacer clic en los pasillos */
    /* Los pasillos no tienen width/height fijos aquí, su tamaño está dado por el grid y su grid-column-end */
}

.aviso:hover {
    color: red;
}

.btn-reservacion {
    background-color: #56cd64;
    border: 3px solid white;
    border-radius: 20px;
    color: white;
    font-weight: bolder;
}


/* .escenario {
    background-color: #000;
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;
    color: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    font-size: 2em;
    font-weight: bold;
    margin: 20px 0 0 0;
    max-width: 100%;
    text-align: center;
    padding: 20px 0;
    width: 100%;
} */

.escenario {
    width: 100%; 
    background-color: #000;
    color: white;
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    margin: 0 auto 20px auto; 
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Evita que el escenario se encoja más allá de su contenido si hay poco espacio */
}

.mapa-container {
    align-items: flex-start; /* Alinea a la izquierda dentro del contenedor de scroll */
    display: flex;
    flex-direction: column; /* Apila verticalmente escenario y mapa */
    margin: 0 auto;
    overflow-x: auto; /* Permite scroll horizontal */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px; /* Espacio para la barra de scroll */
    width: 100%;
}

/* .mapa-container {
    -webkit-overSflow-scrolling: touch;
    margin: 0 auto;
    overflow-x: auto;
    padding-bottom: 15px;
    width: 100%;
} */


.teatro-mapa {
    display: grid;
    grid-template-columns: repeat(55, 30px);
    grid-auto-rows: 30px; /* Altura automática de las filas (igual que el asiento) */
    gap: 5px; /* Espacio entre elementos del grid (asientos y pasillos) */
    width: fit-content; /* Permite que el grid determine su ancho */
    margin: 20px auto;
    border: 1px solid #ccc; 
    padding: 10px;
    position: relative;
    flex-shrink: 0; 
}

.texto-general {
    font-size: 1.25em;
    text-align: justify;
}

.seat {
    /* Propiedades de grid position se establecen en JS */
    /* grid-column-start: ...; */
    /* grid-row-start: ...; */

    width: 30px; /* Tamaño del asiento */
    height: 30px; /* Tamaño del asiento */
    background-color: #ddd; /* Color por defecto (disponible) */
    border: 1px solid #999;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    user-select: none;
}

/* Estilo para asientos ocupados */
.seat.occupied {
    background-color: #999; /* Gris para indicar ocupado */
    cursor: not-allowed; /* Cursor de "prohibido" */
    opacity: 0.6; /* Un poco transparente */
    border-color: #666;
    /* Opcional: añadir un patrón o icono */
    /* background-image: url('ocupado.png'); */
    /* background-size: cover; */
}

.seat.occupied:hover {
    transform: none; /* Desactiva el efecto hover en asientos ocupados */
}

/* Asegúrate de que .selected tenga mayor precedencia si un asiento ocupado fuera (incorrectamente) marcado como seleccionado */
.seat.selected {
     background-color: #ff6666;
     border-color: #ff0000;
     color: white;
     opacity: 1; /* Asegura opacidad normal si está seleccionado */
     z-index: 2; /* Asegura que el seleccionado esté sobre ocupado si se superponen estilos */
}

.validation-checkboxes {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left; /* Alinea el texto de los checkboxes a la izquierda */
    padding: 0 20px; /* Añade algo de padding si es necesario */
}

.validation-checkboxes div {
    margin-bottom: 10px;
}

.validation-checkboxes input[type="checkbox"] {
    margin-right: 5px; /* Espacio entre el checkbox y la etiqueta */
    vertical-align: middle; /* Alinea verticalmente con el texto */
}

.validation-checkboxes label {
    vertical-align: middle; /* Alinea verticalmente con el checkbox */
    font-size: 0.9em;
    color: #555;
    cursor: pointer; /* Indica que la etiqueta es clickeable */
}





/* Estilos para tipos de asientos */
.seat.vip {
    background-color: yellow; /* Amarillo VIP */
}

.seat.preferente {
    background-color: #00cc00; /* Azul Preferente */
}

.seat.general {
    background-color: #00ccff; /* Verde General */
}

/* Estilo para asiento seleccionado */
.seat.selected {
    background-color: #ff6666; /* Rojo Seleccionado */
    border-color: #ff0000;
    color: white;
}

.seat:hover {
    transform: scale(1.05);
    z-index: 1;
}

/* Estilo para asientos ocupados */
.seat.occupied {
    background-color: #999;
    background-image: linear-gradient(to top right,
                                     transparent 48%, /* Parte transparente antes de la línea */
                                     rgba(255, 255, 255, 0.7) 48%, /* Inicio de la línea (blanca semi-transparente) */
                                     rgba(255, 255, 255, 0.7) 52%, /* Fin de la línea */
                                     transparent 52% /* Parte transparente después de la línea */
                                    );
    /* Ajusta el porcentaje (48%/52%) para controlar el grosor de la línea */
    /* Ajusta el color (rgba(255, 255, 255, 0.7)) para controlar el color y transparencia de la línea */

    cursor: not-allowed; /* Cursor de "prohibido" */
    /* opacity: 0.6; */ /* Puedes mantener o quitar la opacidad si el gris ya es suficiente */
    border-color: #666;
    color: white; /* Asegura que el número del asiento sea visible (color blanco) */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra al texto para mejor legibilidad */

    /* Asegúrate de que los siguientes no interfieran o anúlalos si es necesario */
    pointer-events: none; /* Asegura que los clics no activen nada en este elemento */
    user-select: none; /* Evita seleccionar el texto del asiento */
}

.seat.occupied:hover {
    transform: none; /* Desactiva el efecto hover en asientos ocupados */
}

.seat.selected {
     background-color: #ff6666;
     border-color: #ff0000;
     color: white;
     opacity: 1;
     z-index: 2;
}


.seleccion-info {
    margin-top: 20px;
    text-align: center;
}

#selected-seats-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

#selected-seats-list li {
    display: inline-block;
    margin: 5px;
    padding: 5px 10px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#submit-selection {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

/* Estilo para el botón deshabilitado */
#submit-selection:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- Media Query para dispositivos móviles --- */
@media (max-width: 768px) {
    .escenario {
        width: 100%; 
        font-size: 1.5em;
        padding: 15px 0;
        border-bottom-left-radius: 80px;
        border-bottom-right-radius: 80px;
    }

    .teatro-mapa {
        grid-template-columns: repeat(55, 25px); /* Ajusta tamaño de columna (ej: 25px) */
        grid-auto-rows: 25px; /* Altura de las filas */
        gap: 3px; /* Espacio reducido */
        margin: 0; /* Ajusta o elimina márgenes */
        padding: 5px;
    }

    .seat {
        width: 25px;
        height: 25px;
        font-size: 8px;
        border-radius: 3px;
    }

    .aisle {
         /* No necesitan ajustes de tamaño si ya están definidos por grid-column */
    }

    .seleccion-info {
        margin-top: 10px;
    }

    #selected-seats-list li {
        margin: 3px;
        padding: 3px 6px;
        font-size: 12px;
    }

    #submit-selection {
        padding: 8px 15px;
        font-size: 14px;
    }
}