/* app_festival/css/festival_styles.css */

/* Custom CSS for body font and modal overlay */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
/* Estilos para los botones de fecha/obra al ser seleccionados y al foco */
.date-button.selected {
    background-color: #8B5CF6; /* Púrpura más oscuro para el fondo */
    color: white;
    border-color: #8B5CF6;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4); /* Sombra más prominente */
}
.date-button:focus {
    outline: 3px solid #C084FC; /* Anillo de foco más grueso y visible */
    outline-offset: 2px;
}

/* Estilos para los botones de horario al ser seleccionados y al foco */
.time-button.selected {
    background-color: #EDE9FE; /* Un púrpura muy claro para el fondo seleccionado */
    border-color: #A78BFA; /* Borde púrpura */
    box-shadow: 0 2px 5px rgba(167, 139, 250, 0.3); /* Sombra sutil */
}
.time-button:focus {
    outline: 3px solid #C084FC; /* Anillo de foco más grueso y visible */
    outline-offset: 2px;
}

/* Estilo para mensajes de error de validación inline */
.error-message {
    color: #EF4444; /* color rojo de Tailwind 'red-500' */
    font-size: 1rem; /* 16px - Base para errores */
    margin-top: 0.25rem; /* 4px */
}
/* Ajuste para input de número para que no aparezcan las flechas */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Estilos para el checkbox de suscripción y su texto */
.subscription-checkbox-group {
    font-size: 1.125rem; /* text-lg de Tailwind, un poco más grande que el base */
}

/* Ajuste para el tamaño y visibilidad del checkbox */
.subscription-checkbox-group input[type="checkbox"] {
    transform: scale(1.3); /* Hace el checkbox un 30% más grande */
    margin-right: 0.75rem; /* Ajusta el margen si es necesario */
    /* NUEVO/AJUSTADO: Asegura visibilidad del checkbox */
    -webkit-appearance: checkbox; /* Para asegurar que se renderice como checkbox nativo */
    appearance: checkbox;
    width: 1.5em; /* Tamaño base del checkbox */
    height: 1.5em; /* Tamaño base del checkbox */
    border: 1px solid #999; /* Borde visible */
    background-color: #ffffff; /* Fondo blanco */
    vertical-align: middle; /* Alinea con el texto */
    cursor: pointer;
    /* Asegura que no se corte por el flexbox */
    flex-shrink: 0;
}
.subscription-checkbox-group input[type="checkbox"]:checked {
    background-color: #8B5CF6; /* Color de fondo cuando está marcado */
    border-color: #8B5CF6;
}
/* Ajuste para el label del checkbox para que el texto no se corte */
.subscription-checkbox-group label {
    display: flex; /* Usar flexbox para alinear el checkbox y el texto */
    align-items: center; /* Centrar verticalmente */
    color: rgba(0,0,0,1.00) !important; /* Color de texto oscuro para asegurar visibilidad */
    line-height: 1.2; /* Ajustar line-height para evitar cortes */
}


/* MODIFICADO: Estilo para el texto de aclaración del checkbox */
.subscription-clarification {
    font-size: 1rem; /* Aumentado a 16px (text-base de Tailwind) */
    color: #1F2937; /* color gray-800 para mayor contraste, antes gray-600 */
    margin-top: 0.75rem; /* Aumenta el margen superior para separarlo más */
    line-height: 1.5; /* Mayor interlineado para mejor legibilidad */
    font-weight: 500; /* Hace el texto un poco más audaz */
}

/* NUEVOS ESTILOS PARA LA SECCIÓN FINAL DE INSTRUCCIONES */
/* Contenedor general para los pasos */
.final-steps-container {
    margin-top: 0.8rem; /* Reducido para compactar */
    padding: 0.6rem; /* Reducido un poco el padding vertical para compactar */
    background-color: #DBEAFE; /* blue-100 */
    border: 2px solid #60A5FA; /* blue-400 */
    border-radius: 0.75rem; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave */
    text-align: left; /* Alineado a la izquierda para mejor lectura de lista */
}

/* Estilos para el párrafo del texto final */
.final-steps-container .final-step-text {
    font-size: 0.95rem; /* AUMENTADO para mejor legibilidad en móvil */
    color: #1E40AF; /* blue-800 - NUEVO: Color más oscuro para el texto normal del paso final */
    font-weight: 600; /* semibold */
    line-height: 1.3; /* Ajuste para legibilidad */
    text-align: center; /* Centrar el texto */
}

/* MODIFICADO: Asegurar que las negritas funcionen dentro del texto final */
.final-steps-container .final-step-text strong {
    font-weight: 700 !important; /* Forzar bold con !important si Tailwind lo anula */
    color: #C026D3; /* Color de acento para las negritas */
}

/* Mensaje final de confirmación */
.final-confirmation-message {
    text-align: center;
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* bold */
    color: #047857; /* green-700 */
    margin-top: 1rem; /* Espacio superior */
}

/* NUEVOS ESTILOS PARA MENSAJES Y BOTÓN DE LLAMADA */
.warning-capacity-message {
    color: #581C87;
}

.full-capacity-message {
    color: #DC2626; /* red-600 */
}

.call-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #6D28D9; /* purple-700 */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    width: fit-content;
    align-self: center;
    margin-top: 0.5rem;
}

.call-button:hover {
    background-color: #5B21B6;
}

.call-button i {
    font-size: 1.1em;
}

/* Estilo para botones de fecha/hora deshabilitados */
.date-button.disabled,
.time-button.disabled {
    cursor: not-allowed;
    background-color: #e0e0e0;
    border-color: #c0c0c0;
    color: #a0a0a0;
    box-shadow: none;
}

/* NUEVO: Estilos para inputs y selects dentro del modal de reserva */
/* Aseguramos que los labels sean negros en el modal para PC y móvil */
.reservation-modal-content label { /* Selecciona todos los labels dentro del modal */
    color: #000000 !important; /* Negro con !important para asegurar prioridad */
}

.reservation-modal-content input[type="text"],
.reservation-modal-content input[type="tel"],
.reservation-modal-content input[type="number"],
.reservation-modal-content select {
    color: #333333; /* Color de texto oscuro para asegurar visibilidad */
    background-color: #ffffff; /* Asegura el fondo blanco */
    border: 1px solid #cccccc; /* Borde visible */
    padding: 0.75rem; /* Ajuste del padding */
    font-size: 1.2rem; /* AUMENTADO para que el texto sea muy legible */
}
/* NUEVO: Placeholder color */
.reservation-modal-content input::placeholder {
    color: #666666; /* Un gris más oscuro para el placeholder */
    opacity: 1; /* Necesario para Firefox */
    font-size: 1.2rem; /* Asegura que el placeholder también sea más grande */
}


/* Estilos para el texto de opciones en el select */
.reservation-modal-content select option {
    color: #333333; /* Asegura que las opciones también sean oscuras */
}

/* Contenedor del modal principal de reserva */
.reservation-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.reservation-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Contenido del modal (el recuadro blanco del formulario) */
.reservation-modal-content {
    background-color: #ffffff;
    padding: 1.2rem; /* REDUCIDO AGRESIVAMENTE para móvil */
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 95%; /* Ajuste a 95% para móviles muy pequeños */
    max-width: 32rem; /* max-w-lg de Tailwind (512px) */
    text-align: center;
    position: relative;
    border: 4px solid #a78bfa;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;

    /* NUEVO: Control de altura y scroll para móviles y PCs pequeñas */
    max-height: 98vh; /* Ocupa casi todo el alto del viewport*/
    overflow-y: auto; /* Permite scroll solo si es necesario */
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box; /* Asegura que padding y border no aumenten el tamaño */

    /* Ajustes específicos para elementos internos para reducir la altura */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinea al inicio, permite que el contenido empuje */
}

.reservation-modal-overlay.active .reservation-modal-content {
    transform: translateY(0);
    opacity: 1;
}

/* Asegura que el body no haga scroll cuando el modal está abierto */
body.modal-open {
    overflow: hidden;
}

/* Estilos para el mensaje de error general del formulario en el modal */
#modal-form-errors {
    text-align: left;
    margin-top: 0.4rem; /* Reducido */
    padding: 0.6rem 0.8rem; /* Reducido */
    font-size: 0.8em; /* Reducido */
}
#modal-form-errors ul {
    padding-left: 1rem; /* Reducido */
}
#modal-form-errors li {
    margin-bottom: 0.2rem; /* Reducido */
}
.modal-error-message { /* Para errores individuales de campo */
    font-size: 0.8rem; /* Reducido */
    margin-top: 0.1rem; /* Reducido */
}

/* Encabezado del modal: estilo base compartido */
.modal-header-compact {
    background-color: #5B21B6; /* Púrpura oscuro */
    color: white;
    padding: 0.7rem; /* Compacto */
    margin: -1.2rem -1.2rem 0.8rem -1.2rem; /* Márgenes negativos para extender el fondo */
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    text-align: center;
}

/* NUEVO: Estilos para los elementos dentro del encabezado del modal en móvil */
/* Estos se aplican solo a las clases específicas dentro de .modal-header-compact */
.modal-title-mobile {
    font-size: 1.4rem; /* Tamaño de "Festival de Títeres" */
    color: #F0F4F8; /* Blanco azulado */
    margin-bottom: 0.2rem; /* Margen muy reducido */
    line-height: 1.2;
    font-weight: bold; /* Hacerlo negrita */
}
.modal-required-fields-note-mobile {
    font-size: 0.75rem; /* Tamaño de "* Campos obligatorios" */
    color: #F8FAFC; /* Blanco */
    margin-top: 0.1rem; /* Margen muy reducido */
    line-height: 1.1;
}

/* Clase para el encabezado de escritorio (visible por defecto) */
.desktop-modal-header {
    /* Estilos para el encabezado original que se verá en desktop */
    margin-top: 0; /* Asegura que no haya margen superior extra */
    margin-bottom: 1.5rem; /* Espacio debajo del header */
    flex-shrink: 0;
}

/* Ocultar elementos del encabezado original en móvil (Tailwind clases) */
@media (max-width: 768px) {
    .desktop-modal-header {
        display: none !important; /* Forzar ocultación en móviles */
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        line-height: 0 !important;
        font-size: 0 !important;
    }
    .modal-header-compact {
        display: block; /* Mostrar el encabezado compacto en móviles */
    }
    /* Estilos para ocultar el header.modal-header-ultra-compact en móvil */
    .modal-header-ultra-compact {
        display: none !important; /* Forzar ocultación del header antiguo con !important */
    }

    /* AQUI ESTA LA CORRECCION PARA LOS LABELS EN MÓVIL */
    .reservation-modal-content form label { /* Más específico para apuntar a los labels dentro del formulario */
        color: #000000 !important; /* Color negro y visible para los labels en móvil con !important */
        font-weight: bold !important; /* Asegura que sean bold para mejor visibilidad */
        font-size: 1.2rem; /* Asegura un tamaño legible en móvil */
    }

    /* *************************************************************** */
    /* HACER VISIBLE Y ESTILIZAR EL BOTÓN DE CIERRE EN MÓVIL */
    /* *************************************************************** */
    .close-modal-button {
        display: block; /* Asegura que el botón se muestre en móvil */
        position: absolute; /* Es crucial para top/right */
        top: 1rem; /* Bajarlo un poco, como pediste */
        right: 0.5rem; /* Ajusta la posición derecha */
        font-size: 1.8rem; /* Tamaño adecuado para móvil */
        color: #330066 !important; /* Púrpura muy oscuro para asegurar contraste */
        background: none; /* Eliminar fondo si lo tuviera */
        border: none; /* Eliminar borde si lo tuviera */
        padding: 0;
        cursor: pointer;
        z-index: 1001; /* Asegura que esté por encima de otros elementos del modal */
        /* Agregado para hacer el área de clic más grande y fácil de presionar */
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* OPCIONAL: Añadir un fondo sutil si el contraste sigue siendo un problema */
        /* background-color: rgba(255,255,255,0.2); */ /* Fondo blanco semi-transparente */
        /* border-radius: 50%; */ /* Si se usa background-color, para hacerlo redondo */
    }
    /* *************************************************************** */
}


/* Bloque de fecha/hora/obra destacada en el modal */
.reservation-modal-content .text-center.py-2.px-4.rounded-lg.bg-blue-100 {
    padding: 0.6rem 0.4rem; /* Reducido */
    margin-bottom: 0.8rem; /* Reducido */
    flex-shrink: 0;
}
.reservation-modal-content #modal-play-name {
    font-size: 1.3rem; /* AUMENTADO */
    margin-bottom: 0.1rem; /* Reducido */
}
.reservation-modal-content #modal-date, .reservation-modal-content #modal-time {
    font-size: 1.2rem; /* AUMENTADO */
}

/* Ajuste para el texto de explicación de WhatsApp en el modal */
.whatsapp-explanation-compact {
    padding: 0.4rem 0.5rem; /* REDUCIDO para compactar */
    font-size: 1.1rem; /* AUMENTADO para legibilidad */
    margin-bottom: 0.5rem; /* Reducido */
    line-height: 1.1; /* Ajustado para una sola línea si es posible */
    flex-shrink: 0;
}
.whatsapp-explanation-compact p {
    margin: 0; /* Eliminar márgenes internos de p */
}


/* Ajuste de labels y selects/inputs en el formulario del modal */
.reservation-modal-content .space-y-6 {
    gap: 0.8rem; /* Espacio entre secciones del formulario reducido */
    flex-grow: 1; /* Permitir que el formulario ocupe el espacio */
    display: flex;
    flex-direction: column;
}
.reservation-modal-content .space-y-6 > div {
    margin-bottom: 0.4rem; /* Ajuste del margen inferior de cada div de campo */
}
.reservation-modal-content .space-y-6 > div > input,
.reservation-modal-content .space-y-6 > div > select {
    padding: 0.5rem; /* REDUCIDO */
    font-size: 1.4rem; /* AUMENTADO significativamente */
}
.reservation-modal-content input::placeholder { /* Asegura que el placeholder se vea bien */
    font-size: 1.4rem; /* Igual al input */
    color: #999;
}


/* Ajuste de suscripción checkbox */
.subscription-checkbox-group {
    font-size: 1.4rem; /* AUMENTADO */
    margin-top: 0.7rem; /* Reducido */
    flex-shrink: 0;
}
.subscription-checkbox-group input[type="checkbox"] {
    transform: scale(1.4); /* AUMENTADO tamaño visual */
    margin-right: 0.6rem; /* Ajustado */
}
.subscription-checkbox-group label {
    font-size: 1.4rem; /* AUMENTADO */
}


/* Ajuste del botón de submit */
#submit-button {
    padding: 0.8rem 1.2rem; /* REDUCIDO */
    font-size: 1.9rem; /* AUMENTADO */
    margin-top: 0.8rem; /* Reducido */
    flex-shrink: 0;
}


/* --- Media Queries para el modal en PC (restaurar o ajustar) --- */
@media (min-width: 769px) {
    .reservation-modal-content {
        padding: 2rem 3rem; /* Más padding en los lados para PC */
        max-width: 38rem; /* Un poco más ancho en PC */
        max-height: 90vh; /* Ajuste para que se vea bien en pantallas grandes */
        overflow-y: auto; /* Permite scroll solo si es necesario en PC */
    }

    /* Ocultar el encabezado compacto en PC */
    .modal-header-compact {
        display: none;
    }

    /* Mostrar el encabezado de escritorio en PC */
    .desktop-modal-header {
        display: block;
        margin-top: 0;
        margin-bottom: 1.5rem;
        flex-shrink: 0;
    }
    /* Asegurarse de que el header antiguo no se muestre si no es necesario */
    .modal-header-ultra-compact {
        display: none !important;
    }


    /* Restaurar los tamaños para elementos del modal en PC si fueron alterados para móvil */
    .reservation-modal-content header h1 {
        font-size: 2.25rem; /* text-4xl de Tailwind */
    }
    .reservation-modal-content header h1 .block:first-child {
        font-size: 1.875rem; /* text-3xl de Tailwind */
        color: #5a1c8d; /* Color púrpura original */
    }
    .reservation-modal-content header h1 .block:last-child {
        font-size: 1.25rem; /* text-xl de Tailwind */
        color: #8b5cf6; /* Color púrpura original */
    }
    .reservation-modal-content header p {
        font-size: 1.125rem; /* text-lg de Tailwind */
    }
    .reservation-modal-content header p.italic {
        font-size: 0.875rem; /* text-sm de Tailwind */
    }

    /* Resto de ajustes de PC (mantener como estaban o reajustar) */
    .reservation-modal-content label {
        font-size: 1.25rem; /* text-xl de Tailwind */
        color: #000000 !important; /* Mantenemos negro para labels en PC */
    }
    .reservation-modal-content input[type="text"],
    .reservation-modal-content input[type="tel"],
    .reservation-modal-content input[type="number"],
    .reservation-modal-content select {
        padding: 0.75rem; /* p-3 de Tailwind */
        font-size: 1.125rem; /* text-xl de Tailwind */
    }
    .reservation-modal-content input::placeholder {
        font-size: 1.125rem; /* text-xl de Tailwind */
    }

    .whatsapp-explanation-compact {
        padding: 1.25rem; /* p-5 de Tailwind */
        font-size: 1rem; /* text-base de Tailwind */
        margin-bottom: 1.25rem; /* mb-3 de Tailwind */
    }
    .whatsapp-explanation-compact p {
        margin: auto;
    }

    .final-steps-container {
        margin-top: 2rem; /* mt-8 de Tailwind */
        padding: 0.5rem 1.25rem; /* py-2 px-5 de Tailwind */
    }
    .final-step-text {
        font-size: 1rem; /* text-base de Tailwind */
        line-height: 1.4;
    }

    #submit-button {
        padding: 1rem 1.5rem; /* p-3 p-6 de Tailwind */
        font-size: 1.875rem; /* text-3xl de Tailwind */
        margin-top: 1.5rem; /* mt-6 de Tailwind */
    }
    
    .close-modal-button {
        top: 1.5rem; /* top-6 de Tailwind */
        right: 1.5rem; /* right-6 de Tailwind */
        font-size: 1.5rem; /* text-2xl de Tailwind */
        color: #5a1c8d; /* Ajuste a un púrpura oscuro si quieres visibilidad en fondo blanco */
    }
}