/* Estilos generales para la sección del Festival de Invierno */
#festival_invierno .section-container {
    background-color: var(--card-bg-color);
    border-radius: 15px;
    padding: 30px;
    max-width: 800px; /* Un poco más ancho para las múltiples obras */
    margin: 20px auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

#festival_invierno .section-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

/* Título de la sección del Festival */
#festival_invierno .section-title {
    font-size: 2.2rem; /* Aumentado para darle más jerarquía */
    color: #4A0070; /* Color aplicado: Púrpura muy oscuro para alto contraste */
    margin-bottom: 25px; /* Ajuste el margen inferior */
    font-family: 'Fredoka One', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Sombra para que resalte más */
}

/* NUEVO: Contenedor principal de la información introductoria del festival */
.festival-intro-card {
    background-color: #f7f7f7; /* Fondo ligero para esta caja de info */
    border-radius: 12px;
    padding: 25px 20px; /* Más padding para que respire */
    margin-top: 25px; /* Espacio superior */
    margin-bottom: 35px; /* Más espacio inferior antes de las fechas de obra */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;
    text-align: center;
    max-width: 650px; /* Ancho máximo para que no se extienda demasiado */
    margin-left: auto;
    margin-right: auto;
    display: flex; /* Usamos flexbox para el contenido interno */
    flex-direction: column; /* Apilamos verticalmente */
    align-items: center; /* Centramos el contenido */
    gap: 15px; /* Espacio entre los párrafos */
}

/* Estilo para el párrafo de las fechas dentro del festival-intro-card */
.festival-intro-card .festival-dates-info {
    background: linear-gradient(to right, #FFD700, #FFC107); /* Degradado más sutil de dorado */
    color: #4A2E1D; /* Color de texto que contraste */
    font-family: 'Poppins', sans-serif;
    padding: 10px 18px; /* Padding ajustado */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra más sutil */
    border: 1px solid #E6A200; /* Borde más sutil */
    font-size: 1.5rem; /* Tamaño de fuente para las fechas */
    font-weight: 700; /* Texto en negrita */
    letter-spacing: 0.05em; /* Espaciado entre letras */
    text-transform: uppercase; /* Fechas en mayúsculas */
    margin-bottom: 5px; /* Espacio debajo de este elemento */
    display: block; /* Para que ocupe su propia línea y se centre */
    width: fit-content; /* Se ajusta al contenido */
}

.festival-intro-card .festival-dates-info strong {
    color: #4A2E1D; /* Asegura que el "5 al 19 Julio" tenga el mismo color oscuro */
}

.festival-intro-card .festival-price-info {
    font-size: 1.3rem; /* Tamaño para el precio */
    color: #4A0070; /* Color púrpura oscuro para el precio */
    font-weight: 600;
    margin-bottom: 5px;
}
/* Estilo para el número del precio dentro del texto */
.festival-intro-card .festival-price-info .highlight-price {
    font-size: 1.6rem; /* Un poco más grande para el número */
    font-weight: 700;
    color: #4A0070; /* Color púrpura oscuro para el precio ($5000) */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.festival-intro-card .age-note { /* Clase específica para la nota de edad */
    font-size: 1.3rem; /* AUMENTADO para mejor legibilidad */
    color: #666;
    font-weight: 400;
}

/* Nuevo contenedor para la información de pago y reserva */
.payment-details-block {
    background-color: #f0f0f0; /* Fondo sutil para agrupar */
    border-radius: 8px;
    padding: 12px 18px; /* Padding interno */
    margin: 10px 0; /* Margen para separar del precio */
    width: 95%;
    max-width: 450px; /* Límite en desktop */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); /* Sombra interna para profundidad */
    border: 1px solid #e5e5e5;
}

.payment-details-block p {
    font-size: 1rem; /* Tamaño de fuente para la información de pago */
    color: #555;
    line-height: 1.4;
    margin: 5px 0; /* Espacio entre párrafos dentro del bloque */
    text-align: center;
}

.payment-details-block strong {
    color: #333; /* Color más oscuro para las negritas aquí */
}


/* NUEVOS ESTILOS PARA LA LLAMADA A LA ACCIÓN DE RESERVA (CTA) */
.festival-reservation-cta {
    background-color: #e0f7fa; /* Un azul cian muy claro */
    border: 1px solid #00bcd4; /* Borde cian para destacar */
    color: #00796b; /* Texto verde azulado oscuro */
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 1.15rem; /* Un poco más grande para el CTA */
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 95%; /* Ocupa más ancho para móviles */
    max-width: 550px; /* Límite de ancho para desktop */
    margin-top: 15px; /* Espacio superior */
    margin-bottom: 10px; /* Espacio inferior */
}

.festival-reservation-cta strong {
    color: #004d40; /* Color más oscuro para negritas */
}


/* Contenedor principal de obras agrupadas por fecha */
#festival-works-by-date-container {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espacio entre los grupos de fechas */
}

/* Estilo para el título de cada grupo de fecha (Ej: Sábado, 5 de julio) */
.group-date-title {
    font-size: 1.6rem; /* Tamaño de la fecha de grupo */
    color: #3498db; /* Un color distintivo para la fecha del grupo */
    background-color: #eaf6ff; /* Fondo suave para destacar */
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px; /* Espacio entre el título de la fecha y las obras de ese día */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-family: 'Fredoka One', sans-serif;
    text-align: center;
    border: 1px solid #a7d9f7;
    width: fit-content; /* Se ajusta al contenido */
    margin-left: auto;
    margin-right: auto;
}

/* Contenedor de las obras dentro de un grupo de fecha (para layout de columnas si aplica) */
.group-works-container {
    display: flex;
    flex-direction: column; /* Por defecto apilado en móvil */
    gap: 20px; /* Espacio entre tarjetas de obras dentro del mismo día */
}


/* Estilos para cada tarjeta de obra individual */
.festival-card {
    background-color: #fcfcfc;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.festival-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.festival-card .obra-container {
    display: flex;
    flex-direction: column; /* Columnas en móvil */
    align-items: center;
    gap: 20px;
    width: 100%;
}

.festival-card .obra-img {
    max-width: 90%;
    width: 300px; /* Ancho fijo para las imágenes del festival */
    height: 200px; /* Altura fija */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsión */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 3px solid #FFC107; /* Borde amarillo para destacar */
}

.festival-card .obra-info {
    text-align: center; /* Centrar información en móvil */
    color: var(--secondary-color);
    font-size: 1.05rem;
    line-height: 1.6;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.festival-card .obra-info p {
    margin-bottom: 8px;
}

.festival-card .obra-info strong {
    color: #333;
}

/* Título de la obra dentro de la tarjeta individual (Festival) */
.festival-card .obra-titulo-festival {
    font-size: 1.4rem; /* Un poco más pequeño que el título de grupo */
    color: #3498db;
    margin-bottom: 10px;
    font-weight: 700;
    text-align: center;
}

/* Estilo para la sinopsis para hacerla más compacta en móvil */
.festival-card .festival-sinopsis {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-top: 10px;
    color: #555;
    text-align: left;
    width: 100%;
}

/* --- ESTILOS PARA MENSAJES DE ESTADO DE CAPACIDAD/TIEMPO --- */

/* Mensaje general para funciones (pasadas, llenas, casi llenas) */
.capacity-message, .time-message {
    font-size: 0.9em;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    display: block; /* Asegura que ocupe su propia línea */
}

/* Estilo para funciones pasadas o muy próximas */
.time-message.passed-message {
    color: #8c2e2e; /* Rojo oscuro */
    background-color: #fce4e4; /* Fondo rojo muy claro */
    border: 1px solid #f0b0b0;
}

/* Estilo para cupos completos (HARD_CAPACITY_LIMIT) */
.capacity-message.full-message {
    color: #d9534f; /* Rojo */
    background-color: #f8d7da; /* Fondo rojo claro */
    border: 1px solid #f5c6cb;
}

/* Estilo para cupos casi completos (FRONTEND_FULL_CAPACITY_LIMIT) - AHORA MÁS ATRACTIVO */
.capacity-message.almost-full-message {
    color: #e65100; /* Naranja oscuro */
    background-color: #fff3cd; /* Fondo amarillo claro */
    border: 1px solid #ffeeba;
    padding: 15px; /* Más padding para que resalte */
    font-size: 1.05em; /* Un poco más grande */
    line-height: 1.4;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para que flote */
}

/* Estilos para los enlaces dentro del mensaje almost-full-message */
.capacity-message.almost-full-message a {
    color: #007bff; /* Azul vibrante para enlaces */
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.capacity-message.almost-full-message a:hover {
    color: #0056b3; /* Azul más oscuro al pasar el ratón */
    text-decoration: none;
}

/* Estilo para el icono de teléfono */
.capacity-message.almost-full-message a .fas.fa-phone {
    margin-right: 5px;
    font-size: 0.9em; /* Ajuste el tamaño del icono */
    vertical-align: middle; /* Alineación vertical */
}


/* Estilo para el botón cuando está casi lleno (ya no se usa como botón clickeable) */
.btn-reserva.btn-almost-full {
    background-color: #FFC107; /* Un amarillo vibrante */
    color: #333; /* Texto oscuro para contraste */
    border: 1px solid #FFB300;
}

.btn-reserva.btn-almost-full:hover {
    background-color: #FFB300; /* Amarillo más oscuro al hover */
    color: #333;
}

/* Mensaje final si todos los horarios de una obra en el día no están disponibles */
.day-functions-passed-message {
    font-weight: bold;
    font-size: 1em;
    color: #6a0e0e; /* Rojo aún más oscuro */
    background-color: #fce4e4;
    border: 1px solid #d9534f;
    border-radius: 5px;
    padding: 10px 15px;
    margin-top: 15px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Botón de Reserva */
.btn-reserva {
    display: inline-block;
    background-color: #FF5722;
    color: white;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 15px; /* Reducido para múltiples botones */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 90%;
    max-width: 280px;
}

.btn-reserva + .btn-reserva { /* Margen entre botones de reserva */
    margin-top: 10px;
}

.btn-reserva:hover {
    background-color: #E64A19;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.no-obras-mensaje {
    font-size: 1.2rem;
    color: #777;
    padding: 30px;
    text-align: center;
    background-color: #f0f0f0;
    border-radius: 10px;
    margin-top: 30px;
    border: 1px dashed #ccc;
}



/* Adaptaciones para tabletas y escritorios (min-width: 769px) */
@media (min-width: 769px) {
    /* Ocultar el salto de línea específico para móvil en escritorio */
    .mobile-only-break {
        display: none;
    }

    .group-date-title {
        font-size: 2rem; /* Más grande en desktop */
        margin-top: 40px; /* Más espacio arriba */
    }

    .group-works-container {
        display: grid; /* Cambiado a Grid para un control más flexible */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2-3 columnas flexibles */
        gap: 20px; /* Espacio entre las tarjetas en la cuadrícula */
        justify-content: center; /* Centra la cuadrícula si hay espacio extra */
    }

    .festival-card {
        margin: 0; /* Elimina márgenes individuales si usas grid gap */
        width: auto; /* Permite que el grid controle el ancho */
        height: auto; /* Altura automática basada en contenido */
        max-width: none; /* Elimina límite de ancho fijo para flex-basis */
    }

    .festival-card .obra-container {
        flex-direction: row; /* Imagen a la izquierda, info a la derecha */
        text-align: left;
    }

    .festival-card .obra-img {
        max-width: 40%;
        min-width: 150px; /* Asegura un tamaño mínimo de imagen */
        width: 180px; /* Ancho fijo adecuado para la imagen */
        height: auto; /* IMPORTANTE: Altura automática para evitar recorte */
        object-fit: contain; /* IMPORTANTE: Asegura que la imagen completa sea visible */
        padding: 5px; /* Pequeño padding si object-fit: contain deja mucho espacio blanco */
    }

    .festival-card .obra-info {
        flex: 1;
        text-align: left;
        padding-left: 20px;
        align-items: flex-start;
    }
    
    .btn-reserva {
        width: auto;
        max-width: none;
    }

    /* Mensajes se adaptan al contenido en desktop */
    .capacity-message, .time-message, .day-functions-passed-message {
        width: auto; 
    }

    /* Ajustes para el panel de depuración en escritorio */
    .debug-time-travel-panel form {
        justify-content: center; /* Centra los elementos del formulario */
    }

    /* *************************************************************** */
    /* MODIFICACIONES ESPECÍFICAS DEL MODAL PARA ESCRITORIO */
    /* *************************************************************** */
    .reservation-modal-content {
        /* Aumentamos el ancho máximo para escritorio */
        max-width: 40rem; /* Ejemplo: 640px. Puedes ajustarlo más si lo ves muy estrecho. */
        padding: 2.5rem; /* Aumentamos el padding para más espacio interno */
        border-radius: 1.5rem; /* Mantenemos redondeado */
        /* Aseguramos que el contenido pueda scrollear si es muy largo, útil en formularios */
        overflow-y: auto;
        /* Damos una altura máxima relativa para que no ocupe toda la pantalla y se vea centrado */
        max-height: 90vh;		
    }

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

    /* Mostrar el encabezado de escritorio en escritorio */
    .desktop-modal-header {
        color: aliceblue !important;		
    }
}

/* Adaptaciones para móviles (max-width: 768px) */
@media (max-width: 768px) {
    /* Mostrar el salto de línea específico para móvil en móvil */
    .mobile-only-break {
        display: block;
    }

    #festival_invierno .section-container {
        padding: 15px;
        margin: 10px auto;
    }

    #festival_invierno .section-title {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }

    /* Ajuste para el nuevo contenedor de información introductoria en móvil */
    .festival-intro-card {
        padding: 20px 15px; /* Menos padding en móvil */
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .festival-intro-card .festival-dates-info {
        font-size: 1.25rem; /* Ajuste para móvil */
        padding: 8px 12px;
    }
    .festival-intro-card .festival-price-info {
        font-size: 1.1rem;
    }
    .festival-intro-card .festival-price-info .highlight-price {
        font-size: 1.4rem;
    }
    .festival-intro-card .age-note {
        font-size: 1.2rem; /* AUMENTADO para mejor legibilidad en móvil también */
    }
    .festival-intro-card .festival-reservation-cta {
        font-size: 0.95rem;
    }
    .festival-intro-card .example-button-text {
        font-size: 0.95em; /* Asegura que no sea demasiado grande el ejemplo */
        padding: 2px 6px;
    }


    .group-date-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .festival-card {
        padding: 15px;
        margin-bottom: 20px;
    }

    .festival-card .obra-titulo-festival {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }

    .festival-card .obra-img {
        width: 100%;
        height: auto;
        max-width: 80%;
        object-fit: cover; /* Mantener cover para móvil */
    }

    .festival-card .obra-info {
        font-size: 0.95rem;
        padding: 0 5px;
    }
    
    .btn-reserva {
        padding: 10px 20px;
        font-size: 1rem;
        width: 90%;
        max-width: 250px;
    }
    /* Ajuste para el mensaje en móvil para mejorar legibilidad para gente mayor */
    .capacity-message.almost-full-message {
        font-size: 1.1em; /* Un poco más grande en móvil, por ejemplo, 1.1em */
        line-height: 1.5; /* Mayor interlineado */
        padding: 12px; /* Ajuste el padding si es necesario con el nuevo tamaño */
    }
    .capacity-message.almost-full-message a {
        font-size: 1.05em; /* Un poco más grande los enlaces dentro del mensaje */
    }
    .capacity-message.almost-full-message a .fas.fa-phone {
        font-size: 1em; /* Ajuste el tamaño del icono de teléfono en móvil */
    }

    /* *************************************************************** */
    /* ESTILOS DEL MODAL PARA MÓVIL (YA EXISTENTES Y MANTENIDOS) */
    /* *************************************************************** */
    .reservation-modal-content {
        /* Estas reglas ya están en tu media query, solo las menciono para claridad */
        padding: 1rem;
        max-width: 95%;
        border-radius: 1rem;
        /* Aseguramos que el contenido pueda scrollear si es muy largo, útil en formularios */
        overflow-y: auto;
        /* Damos una altura máxima relativa para que no ocupe toda la pantalla y se vea centrado */
        max-height: 95vh;	
    }
    .modal-header-compact {
        display: block; /* Visible en móvil */
    }
    .desktop-modal-header {
        display: none; /* Oculto en móvil */
    }
    /* Resto de estilos específicos de encabezado móvil ya definidos */
}