/* Importar una fuente minimalist de Google Fonts (ej. Montserrat) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
:root {
    --background-light: #e7dbcb; /* Nuevo color: beige muy claro, menos blanco */
    --primary-text-color: #333333; /* Texto oscuro para el fondo claro */
    --accent-color: #e8e0d7; /* Color principal: beige más claro */
    --accent-darker: #d1c8bd; /* Una variante más oscura del beige para contrastes */
    --accent-lighter: #f7f3f0; /* Una variante más clara del beige */
    --navbar-bg: rgba(231, 219, 203, 0.9); /* Navbar semi-transparente basada en el nuevo fondo */
    --section-bg: rgba(255, 255, 255, 0.9); /* Fondo de secciones (se mantiene un blanco puro para el contraste de capas con el fondo principal más cálido) */
    --hover-color: #bbafa2; /* Tono más saturado y oscuro para hover */
    --border-color: #cccccc; /* Color de borde más claro */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --shadow-deep: rgba(0, 0, 0, 0.3);
    /* ¡IMPORTANT! Nuevo color para el resaltado de eventos, más sutil */
    --event-highlight-color: #d1c8bd; /* Beige sólido para días con evento */
    --button-gradient-start: #f0f0f0; /* Tono claro para degradado de botón */
    --button-gradient-end: #e0e0e0; /* Tono más oscuro para degradado de botón */

    /* Colores específicos para dashboard para que coincidan con la captura */
    --dashboard-bg: #111827;
    --dashboard-card-bg: #1f2937;
    --dashboard-text-light: #f3f4f6;
    --dashboard-text-muted: #9ca3af;
    --dashboard-border-color: rgba(75, 85, 99, 0.5);

    /* Colores de métricas dashboard */
    --metric-tickets-sold: #818cf8; /* indigo-400 */
    --metric-total-revenue: #34d399; /* emerald-400 */
    --metric-average-price: #a78bfa; /* purple-400 */
    --metric-tickets-remaining: #f87171; /* red-400 */

    /* Colores de botones específicos para dashboard */
    --dashboard-button-bg: #374151; /* gray-700 */
    --dashboard-button-hover-bg: #4b5563; /* gray-600 */
    --dashboard-access-button-bg: #4f46e5; /* indigo-600 */
    --dashboard-access-button-hover-bg: #4338ca; /* indigo-700 */
    --dashboard-refresh-button-bg: #2563eb; /* blue-600 */
    --dashboard-refresh-button-hover-bg: #1d44ed8; /* blue-700 */
}

/* Estilos globales para la página */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif; /* Usando la nueva fuente */
    background-color: var(--background-light); /* Usando el nuevo fondo cálido */
    color: var(--primary-text-color);
    line-height: 1.7;
    overflow-x: hidden; /* Asegura que no haya scroll horizontal no deseado */
    scroll-behavior: smooth; /* Desplazamiento suave para todos los anclajes */
}
/* Estilos del encabezado */
.header {
    position: relative;
    width: 100%;
    height: 75vh; /* Ocupa el 75% de la altura del viewport */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Efecto Parallax sutil: transform es controlado por JS */
    will-change: transform;
}
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) contrast(1.1); /* Ajusta brillo para fondo más claro */
}
.hero-image .overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradado sutil en los bordes para mejorar la integración */
    background: linear-gradient(to right,
                                 rgba(231, 219, 203, 0.8) 0%, /* Ajustado al nuevo background-light */
                                 transparent 20%,
                                 transparent 80%,
                                 rgba(231, 219, 203, 0.8) 100% /* Ajustado al nuevo background-light */
                                 ),
                             linear-gradient(to bottom,
                                 rgba(231, 219, 203, 0.3) 0%, /* Ajustado al nuevo background-light */
                                 transparent 50%,
                                 rgba(231, 219, 203, 0.7) 100% /* Ajustado al nuevo background-light */
                                 );
    z-index: 2;
    pointer-events: none; /* Permite que los clics pasen a través del overlay */
}
.hero-content {
    position: absolute;
    z-index: 3;
    color: white; /* Mantener color original */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Mantener sombra original */
    opacity: 0;
    animation: fadeIn 2s ease-out forwards;
}
.hero-content h1 {
    font-size: 4em;
    margin: 0;
    letter-spacing: 5px;
    font-weight: 700;
    opacity: 0;
    animation: slideInUp 1s ease-out forwards;
    animation-delay: 0.5s;
}
.hero-content p {
    font-size: 1.8em;
    margin-top: 10px;
    margin-bottom: 30px;
    font-weight: 300;
    opacity: 0;
    animation: slideInUp 1s ease-out forwards;
    animation-delay: 1s;
}
/* ORIGINAL CTA BUTTON (APLICADO A TODOS LOS BOTONES CREADOS CON CTACT-BUTTON EN HTML) */
.cta-button {
    background-color: var(--accent-darker); /* Usar variable beige */
    color: var(--primary-text-color); /* Texto oscuro */
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: inline-block;
    box-shadow: 0 5px 15px var(--shadow-light); /* Sombra consistente */
    opacity: 0;
    animation: slideInUp 1s ease-out forwards;
    animation-delay: 1.5s;
    background-image: linear-gradient(to bottom right, var(--button-gradient-start), var(--button-gradient-end));
    border: 1px solid var(--border-color);
    cursor: pointer; /* Añadido para consistencia */
}
.cta-button:hover {
    background-color: var(--hover-color); /* Usar variable beige para hover */
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px var(--shadow-dark); /* Sombra consistente */
    background-image: linear-gradient(to bottom right, var(--button-gradient-end), var(--button-gradient-start));
}
.cta-button:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 2px 8px var(--shadow-light);
}

/* Estilos para el botón pequeño */
.small-button {
    padding: 8px 15px;
    font-size: 0.9em;
    border-radius: 20px;
    background-color: var(--accent-darker); /* Usar variable beige */
    color: var(--primary-text-color); /* Texto oscuro */
    border: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 8px var(--shadow-light);
    background-image: linear-gradient(to bottom right, var(--button-gradient-start), var(--button-gradient-end));
    border: 1px solid var(--border-color);
    cursor: pointer;
}
.small-button:hover {
    background-color: var(--hover-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 12px var(--shadow-dark);
    background-image: linear-gradient(to bottom right, var(--button-gradient-end), var(--button-gradient-start));
}

/* Estilos específicos para botones de compra y descarga (nuevos) */
.purchase-button,
.download-button {
    margin-top: 25px; /* Espacio superior */
    width: 100%; /* Ancho completo */
    padding: 15px;
    font-size: 1.1em;
    background-color: var(--accent-darker); /* Usar el color principal de los botones */
    color: var(--primary-text-color);
    border: none;
    border-radius: 50px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px var(--shadow-light);
    background-image: linear-gradient(to bottom right, var(--button-gradient-start), var(--button-gradient-end));
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.purchase-button:hover,
.download-button:hover {
    background-color: var(--hover-color);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 20px var(--shadow-dark);
    background-image: linear-gradient(to bottom right, var(--button-gradient-end), var(--button-gradient-start));
}

.purchase-button:active,
.download-button:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 2px 8px var(--shadow-light);
}


/* Keyframes para animaciones de entrada */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Animación para el scroll reveal (nueva) */
@keyframes reveal {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Clase para elementos que se revelarán al hacer scroll */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Estilos de la barra de navegación */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 2%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--navbar-bg);
    z-index: 100;
    box-shadow: 0 4px 15px var(--shadow-dark); /* Sombra más clara */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    overflow: visible;
}
.navbar:hover {
    background-color: rgba(231, 219, 203, 0.95); /* Ligeramente más opaco al hover */
    box-shadow: 0 6px 20px var(--shadow-deep);
}
.logo {
    display: flex;
    align-items: center;
    font-size: 2em;
    font-weight: 700;
    color: var(--primary-text-color);
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 20px;
    flex-grow: 0;
    white-space: nowrap;
    transition: transform 0.3s ease;
}
.logo:hover {
    transform: scale(1.03);
}
.logo img {
    height: 45px;
    margin-right: 12px;
    border-radius: 50%;
}
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 25px;
}
.nav-links li {
    margin-left: 0;
}
.nav-links a {
    color: var(--primary-text-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 1em;
    padding: 8px 15px;
    position: relative;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.2s ease, border-radius 0.3s ease;
    border-radius: 20px;
}
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background: var(--accent-color);
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease-in-out, background-color 0.3s ease;
    border-radius: 2px;
}
.nav-links a:hover {
    color: var(--hover-color);
    background-color: rgba(232, 224, 215, 0.3); /* Un poco de transparencia con el nuevo beige */
    transform: translateY(-3px) scale(1.05);
    border-radius: 10px;
}
.nav-links a:hover::after {
    width: 100%;
    background-color: var(--hover-color);
}
/* Estilos para el botón de hamburguesa */
.hamburger-menu {
    display: none; /* Oculto por defecto para pantallas grandes */
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 101;
    transition: transform 0.3s ease;
    position: relative;
}

/* Reglas para las barras del menú de hamburguesa */
.hamburger-menu .bar {
    display: block; /* Asegura que las barras sean visibles */
    width: 100%;
    height: 3px;
    background-color: var(--primary-text-color); /* Color de las barras */
    border-radius: 3px;
    transition: all 0.3s ease; /* Transición para animación de apertura/cierre */
}

.hamburger-menu:hover {
    transform: scale(1.1);
}
.hamburger-menu.open .bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}
.hamburger-menu.open .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.open .bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}
/* Contenido principal */
.main-content {
    padding: 80px 5% 0px;
    position: relative;
    z-index: 5;
    background-color: var(--background-light); /* Fondo cálido */
    margin-top: -80px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    box-shadow: 0 -10px 25px var(--shadow-dark); /* Sombra más clara */
}
.content-section {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 80px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.content-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.gallery-button-container,
.calendar-container {
    flex: 1;
    background-color: var(--section-bg);
    padding: 30px;
    border-radius: 50px;
    box-shadow: 0 8px 25px var(--shadow-light); /* Sombra más clara */
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: 500px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
}
.gallery-button-container {
    background-blend-mode: multiply;
    background-color: rgba(255, 255, 255, 0.5); /* Fondo claro semi-transparente para la imagen */
    min-height: 500px;
    padding: 0;
}
.gallery-button-container .gallery-button {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
    transition: transform 0.5s ease-out, filter 0.5s ease-out;
}
.gallery-button-container:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 20px 40px var(--shadow-dark); /* Sombra más clara */
    filter: brightness(1.05); /* Ajuste de brillo al hover */
    border-color: var(--accent-color);
}
.gallery-button-container:hover .gallery-button {
    transform: scale(1.08);
    filter: brightness(0.95);
}
.calendar-container:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 20px 40px var(--shadow-dark); /* Sombra más clara */
    border-color: var(--accent-color);
}
/* Estilos específicos para FullCalendar */
#calendar {
    width: 100%;
    height: 100%;
    --fc-bg-event-opacity: 0.3;
    --fc-event-text-color: var(--primary-text-color); /* Texto oscuro para eventos */
    --fc-event-border-color: var(--accent-color);
    --fc-neutral-bg-color: var(--section-bg);
    --fc-button-bg-color: var(--accent-color);
    --fc-button-text-color: var(--primary-text-color); /* Texto oscuro en botones */
    --fc-button-active-bg-color: var(--hover-color);
    --fc-today-bg-color: rgba(232, 224, 215, 0.4); /* Nuevo beige más transparente para hoy */
    --fc-col-header-cell-bg-color: var(--section-bg);
    --fc-col-header-cell-border-color: var(--border-color);
    font-size: 0.95em;
}
/* REGLAS CRÍTICAS PARA ELIMINAR EL SCROLL DEL CALENDARIO (FullCalendar) */
.fc-view-harness {
    height: 100% !important;
    overflow: hidden !important;
}
.fc-daygrid-body {
    height: 100% !important;
    overflow: hidden !important;
}
.fc-scrollgrid-sync-table {
    height: 100% !important;
    table-layout: fixed !important;
}
.fc-daygrid-event {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fc .fc-daygrid-more-link {
    display: none !important;
}

/* --- AJUSTES PARA LA VISIBILIDAD Y POSICIONAMIENTO DE LOS NÚMEROS DE LOS DÍAS --- */

/* La celda del día de FullCalendar. */
.fc-daygrid-day-frame {
    display: flex;
    flex-direction: column;
    /* Por defecto, centrar el contenido */
    justify-content: center;
    align-items: center;
    height: 100% !important;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 5px;
    flex-grow: 0;
    flex-shrink: 0;
}

/* Contenedor del número del día */
.fc-daygrid-day-top {
    width: 100%;
    display: flex;
    /* Por defecto, centrar el número */
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

/* Estilo para el número del día */
.fc .fc-daygrid-day-number {
    color: var(--primary-text-color) !important;
    z-index: 2 !important;
    font-weight: 600 !important;
    display: block !important;
    opacity: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important; /* Centrado por defecto */
    line-height: 1.2 !important;
    font-size: 1.1em !important;
    min-height: unset !important;
    overflow: visible !important;
    flex-shrink: 0;
}

/* Estilo para los días "otros" */
.fc .fc-day-other .fc-daygrid-day-number {
    opacity: 0.7 !important;
    color: var(--primary-text-color) !important;
}

/* Cuando la celda tiene un evento */
.fc-daygrid-day.has-event,
.fc-daygrid-day.fc-day-with-event {
    background-color: transparent !important; /* Mantenemos transparente para que el sello sea el fondo principal */
    border: 2px solid var(--hover-color) !important; /* Borde más distintivo */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para destacar */
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    
    /* CAMBIO CLAVE: Fondo con la imagen del sello */
    /* La inyección directa del estilo de fondo se hará ahora en JavaScript para mayor fiabilidad */
    /* background-image: url('selloeventos.png'); */
    /* background-size: 55%; */
    /* background-position: center center; */
    /* background-repeat: no-repeat; */
    /* background-blend-mode: multiply; */
}

/* Efecto de hover para los días con evento */
.fc-daygrid-day.has-event:hover,
.fc-daygrid-day.fc-day-with-event:hover {
    background-color: rgba(187, 175, 162, 0.4) !important; /* Un poco más oscuro al pasar el ratón */
    transform: translateY(-3px) scale(1.02); /* Pequeño levantamiento y escalado */
    box-shadow: 0 8px 20px var(--shadow-dark); /* Sombra más pronunciada al pasar el ratón */
    border-color: var(--accent-darker) !important; /* Borde más oscuro en hover */
}


/* Mueve el contenido del día (número y eventos) a la esquina superior izquierda cuando hay evento */
.fc-daygrid-day.has-event .fc-daygrid-day-frame,
.fc-daygrid-day.fc-day-with-event .fc-daygrid-day-frame {
    justify-content: flex-start !important; /* Alinea contenido a la parte superior */
    align-items: center !important; /* Centra el número horizontalmente */
    padding-top: 5px !important;
    padding-left: 0 !important; /* Elimina padding left que movía el número */
    height: 100% !important; /* Asegura que la altura se mantenga si FullCalendar lo permite */
    flex-shrink: 0;
    position: relative; /* Necesario para los z-index de los hijos */
}

/* Alinea el número del día al centro y arriba, sobre el sello */
.fc-daygrid-day.has-event .fc-daygrid-day-number,
.fc-daygrid-day.fc-day-with-event .fc-daygrid-day-number {
    text-align: center !important; /* Centrar el número */
    margin: 0 !important;
    width: 100% !important; /* Asegurar que ocupe todo el ancho para centrar */
    display: block !important;
    font-size: 1.1em !important;
    z-index: 3; /* Más alto que el sello y los nombres de eventos */
    position: relative; /* Asegura que z-index funcione */
}

/* ELIMINACIÓN TOTAL DE PUNTOS Y MARCADORES */
/* Eliminar cualquier rastro del pseudo-elemento ::after para la barra (si existía previamente) */
.fc-daygrid-day-top::after {
    display: none !important;
    content: none !important;
}

/* CAMBIO CLAVE: Eliminar completamente el indicador de evento */
.event-indicator {
    display: none !important; /* Ocultar el indicador */
}

/* Eliminar la animación de pulso ya que el indicador está oculto */
@keyframes pulse {
    0% { transform: scale(1); } /* Mantener una transformación base para evitar warnings si la regla se mantiene */
    100% { transform: scale(1); }
}


/* Reglas específicas para eliminar la barra/punto a la izquierda del título del evento y otros marcadores */
.fc-daygrid-event .fc-event-time::before,
.fc-daygrid-event .fc-event-title::before,
.fc-daygrid-event .fc-event-dot,
.fc-list-event-dot,
.fc-event-main-frame::before,
.fc-h-event::before,
.fc-daygrid-event-harness::before,
.fc-daygrid-event-dot,
.fc-list-event-graphic,
.fc-event-resizer,
.fc-daygrid-event::marker,
.fc-list-event::marker,
.fc-event::marker,
.fc-daygrid-event-harness {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    list-style-type: none !important;
}

/* REGLA CRÍTICA: Elimina el border-left de los eventos de FullCalendar */
.fc-daygrid-event {
    border-left: none !important;
    padding-left: 0 !important; /* Asegura que no haya padding que simule la barra */
    margin-left: 0 !important; /* Asegura que no haya margen que simule la barra */
    background-color: transparent !important; /* Asegura que no haya fondo beige */
    list-style-type: none !important; /* Crucial para cualquier bullet-like display */
}

/* Asegurarse de que cualquier elemento que pueda contener un punto de lista esté sin él */
.fc-daygrid-day-events,
.fc-list-event,
.fc-event-title-container {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}


/* Contenedor para los nombres de eventos en la parte inferior */
.event-names-container {
    position: absolute; /* Posicionamiento absoluto para no afectar el flujo */
    bottom: 0; /* Anclar a la parte inferior */
    left: 0;
    right: 0;
    width: 100%;
    text-align: center !important; /* Centrar el texto del evento */
    padding: 2px !important; /* Reducir padding para caber más */
    box-sizing: border-box;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Asegura que el contenido se apile desde abajo */
    align-items: center; /* Alinea el texto al centro */
    max-height: 60%; /* Limita la altura para que no desborde */
    overflow: hidden; /* Oculta texto que se salga */
    /* IMPORTANTE: No usar text-overflow: ellipsis aquí, ya que afecta al contenedor flex.
       El ellipsis se gestionará en los p.event-title-small */
    z-index: 1; /* Para que esté debajo del número del día pero sobre el fondo */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, transparent 100%); /* Degradado para legibilidad */
    background-color: rgba(255, 255, 255, 0.3); /* Fondo sutil para legibilidad */
}

.event-title-small {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.75em !important; /* Un poco más grande para mejor legibilidad */
    color: var(--primary-text-color) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* AHORA SÍ: aplica el ellipsis al texto del evento */
    line-height: 1.2 !important;
    margin-bottom: 0px !important; /* Menos espacio entre líneas */
    font-weight: 600; /* Más peso para que se note */
    width: 100%; /* Asegura que ocupe todo el ancho para que text-overflow funcione */
    display: block; /* Asegura que sea un bloque para que text-overflow funcione */
}

.event-title-small.more-events-indicator {
    font-size: 0.7em !important; /* Ajuste para el "+X más" */
    color: #888 !important;
    font-style: italic !important;
    margin-top: 2px !important; /* Pequeño margen superior */
}

/* Para el día actual con evento, un poco más intenso, pero sin fondo */
.fc-daygrid-day.fc-day-today.has-event,
.fc-daygrid-day.fc-day-today.fc-day-with-event {
    background-color: var(--accent-darker) !important; /* Usa un beige más oscuro para hoy */
    border-color: var(--hover-color) !important; /* Borde más notorio para hoy */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Sombra más fuerte para hoy */
}

/* MODIFICACIÓN CLAVE: Galería inicialmente oculta y no ocupa espacio */
.gallery-section {
    display: none;
    padding: 80px 5%;
    background-color: var(--section-bg);
    border-radius: 15px;
    box-shadow: 0 6px 15px var(--shadow-light); /* Sombra más clara */
    margin-top: 80px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.gallery-section.is-active {
    opacity: 1;
    transform: translateY(0);
    display: block;
}
.gallery-section h2 {
    text-align: center;
    color: #333; /* Color original */
    font-size: 3em;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    text-shadow: none; /* Sombra original */
}
.gallery-grid {
    display: grid;
    /* Por defecto, en pantallas grandes, sigue siendo auto-fit con 228px */
    grid-template-columns: repeat(auto-fit, 228px);
    gap: 15px;
    justify-content: flex-start;
    max-width: 100%;
    margin: 0 auto;
}

/* --- NUEVOS ESTILOS PARA LAS TARJETAS DE ÁLBUMES (album-card) --- */
.album-card {
    background-color: var(--section-bg); /* Usar el fondo de sección claro */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px var(--shadow-light); /* Sombra más clara */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 228px; /* Ancho fijo para pantallas grandes */
    height: 275px; /* Increased height for desktop for more description */
    min-width: unset;
    max-width: unset;
}

.album-card:hover {
    transform: translateY(-7px) scale(1.03);
    box-shadow: 0 8px 20px var(--shadow-dark); /* Sombra más clara */
    border-color: var(--hover-color);
    filter: brightness(1.04);
}

.album-card .album-image {
    width: 100%;
    height: 60%; /* Adjusted height to give more space for text */
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.album-card:hover .album-image {
    transform: scale(1.08);
    filter: brightness(0.98);
}

.album-card .album-info {
    padding: 10px;
    text-align: center;
    transition: background-color 0.2s ease;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.album-card:hover .album-info {
    background-color: rgba(232, 224, 215, 0.1); /* Ligera transparencia con el nuevo beige */
}

.album-card .album-info h3 {
    margin: 0;
    color: #333; /* Color original */
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-card .album-info p {
    font-size: 0.85em;
    color: #555; /* Color original */
    margin: 0;
    line-height: 1.3;
    /* Allow multiple lines for description, remove ellipsis for description */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.album-card .album-button {
    display: none;
}


/* Estilos de la sección "Sobre Nosotros" */
.about-us-section {
    background-color: var(--section-bg);
    padding: 60px 60px 20px 60px;
    border-radius: 50px;
    box-shadow: 0 8px 25px var(--shadow-light); /* Sombra más clara */
    text-align: justify;
    line-height: 1.9;
    margin-top: 80px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.about-us-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* NUEVO ESTILO: Título de la sección "Sobre Nosotros" */
.about-us-section h2 {
    text-align: center;
    color: #333; /* Color original */
    font-size: 3em;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    text-shadow: none; /* Sombra original */
}
/* MODIFICACIÓN CLAVE: Elimina el margen inferior del último párrafo en "Sobre Nosotros" */
.about-us-section p:last-child {
    margin-bottom: 0;
}
/* Estilos del mensaje popup */
.message-popup {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: var(--accent-color);
    color: var(--primary-text-color); /* Texto oscuro en el popup */
    padding: 15px 25px;
    border-radius: 8px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-out, visibility 0.6s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    font-size: 1.1em;
    text-align: center;
    min-width: 300px;
    box-shadow: 0 5px 15px var(--shadow-dark);
    border: 1px solid var(--hover-color);
}
.message-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
/* Estilos del pie de página */
.footer {
    background-color: #f0f0f0; /* Fondo más claro para el footer */
    color: #333; /* Color original */
    padding: 60px 5%;
    text-align: center;
    border-top: 1px solid var(--border-color);
    margin-top: 40px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1); /* Sombra original */
}
.footer-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 40px auto;
}
.footer-section {
    flex: 1;
    min-width: 250px;
    text-align: left;
}
.footer-section h3 {
    color: #333; /* Color original */
    font-size: 1.8em;
    margin-bottom: 20px;
    font-weight: 600;
}
.footer-section p {
    margin-bottom: 10px;
    font-size: 0.95em;
    font-weight: 300;
}
.footer-section p i {
    margin-right: 10px;
    color: var(--hover-color);
}
.social-links a {
    color: #333; /* Color original */
    font-size: 1.8em;
    margin: 0 15px;
    transition: color 0.3s ease, transform 0.3s ease;
}
.social-links a:hover {
    color: var(--hover-color); /* Usar color beige para hover */
    transform: translateY(-8px) scale(1.2);
}
.footer-bottom {
    margin-top: 30px;
    font-size: 0.85em;
    color: #888;
}
/* Estilos para el botón Acceder a Dashboard en el footer */
.dashboard-access-button-footer {
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
    color: var(--primary-text-color); /* Color del texto principal */
    font-size: 0.85em; /* Tamaño de fuente más pequeño */
    font-weight: 600;
    opacity: 0.4; /* Opacidad inicial para que sea discreto */
    transition: opacity 0.3s ease, color 0.3s ease, text-decoration-color 0.3s ease; /* Transición suave para todos */
    cursor: pointer;
    padding: 5px 10px; /* Padding para hacer clic más fácil */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    margin-top: 10px; /* Espacio superior */
    text-decoration: underline; /* Subrayado para indicar que es un enlace/botón */
    text-underline-offset: 2px; /* Separación del subrayado */
    text-decoration-color: rgba(51, 51, 51, 0.4); /* Color del subrayado más sutil */
    transform: none; /* Asegurar que no tenga transformaciones */
    box-shadow: none; /* Asegurar que no tenga sombras */
}

.dashboard-access-button-footer:hover {
    opacity: 1; /* Opacidad completa al pasar el ratón */
    color: var(--hover-color); /* Color beige al pasar el ratón */
    text-decoration-color: var(--hover-color); /* Subrayado cambia de color también (¡BEIGE!) */
    transform: none; /* Sin transformaciones al pasar el ratón */
    box-shadow: none; /* Sin sombras al pasar el ratón */
}

.dashboard-access-button-footer:active {
    transform: none; /* Sin transformaciones al presionar */
    box-shadow: none; /* Sin sombras al presionar */
}

/* Media Query para Responsividad */
@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 3.5em;
    }
    .hero-content p {
        font-size: 1.5em;
    }
    .navbar {
        padding: 15px 3%;
    }
    .nav-links {
        gap: 15px;
    }
    .content-section {
        gap: 30px;
    }
    .gallery-button-container,
    .calendar-container,
    .about-us-section {
        border-radius: 40px;
    }
    .gallery-button-container,
    .calendar-container {
        height: auto;
        min-height: 450px;
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, 228px);
    }
    .gallery-section h2, .about-us-section h2 {
        font-size: 2.5em;
    }
}
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 3em;
        letter-spacing: 3px;
    }
    .hero-content p {
        font-size: 1.2em;
    }
    .cta-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    .logo {
        margin-right: 0;
        margin-bottom: 0;
        font-size: 1.8em;
    }
    .logo img {
        height: 40px;
    }
    .nav-links {
        display: none;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(231, 219, 203, 0.95); /* Fondo cálido para el menú móvil */
        box-shadow: 0 8px 16px var(--shadow-dark);
        padding: 20px 0;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none;
    }
    .nav-links.open {
        display: flex;
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .nav-links li {
        margin: 10px 0;
        width: 100%;
        text-align: center;
    }
    .nav-links a {
        display: block;
        padding: 12px 0;
    }
    .hamburger-menu {
        display: flex; /* Asegura que el botón de hamburguesa se muestre en móviles */
    }
    .content-section {
        flex-direction: column;
        gap: 20px;
    }
    .gallery-button-container,
    .calendar-container,
    .about-us-section {
        width: 100%;
        height: auto;
        min-height: 350px;
        border-radius: 30px;
    }
    #calendar {
        font-size: 0.85em;
    }
    /* ***** AJUSTES CLAVE PARA FULLCALENDAR EN MÓVIL ***** */
    .fc-header-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px 10px;
        padding: 10px 0;
    }
    .fc-toolbar-chunk:nth-child(1) {
        order: 2;
        flex-basis: 100%;
        text-align: center;
        margin-top: 10px;
    }
    .fc-toolbar-chunk:nth-child(2) {
        order: 1;
        flex-basis: 100%;
        text-align: center;
        font-size: 1.4em;
    }
    .fc-toolbar-chunk:nth-child(3) {
        order: 3;
        flex-basis: 100%;
        text-align: center;
        margin-top: 10px;
    }
    .fc .fc-button-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }
    .fc .fc-button {
        padding: 8px 12px;
        font-size: 0.9em;
    }
    .fc-col-header-cell-cushion {
        font-size: 0.8em;
        text-transform: uppercase;
        white-space: nowrap;
    }
    @media (max-width: 768px) {
        .fc-col-header-cell-cushion[data-date='Mon']::before { content: 'Lun'; }
        .fc-col-header-cell-cushion[data-date='Tue']::before { content: 'Mar'; }
        .fc-col-header-cell-cushion[data-date='Wed']::before { content: 'Mié'; }
        .fc-col-header-cell-cushion[data-date='Thu']::before { content: 'Jue'; }
        .fc-col-header-cell-cushion[data-date='Fri']::before { content: 'V'; }
        .fc-col-header-cell-cushion[data-date='Sat']::before { content: 'Sáb'; }
        .fc-col-header-cell-cushion[data-date='Sun']::before { content: 'D'; }
        .fc-col-header-cell-cushion span { display: none; }
    }
    /* FIN de ajustes FullCalendar */
    .about-us-section, .gallery-section {
        margin-top: 40px;
        padding: 40px;
    }
    /* ORIGINAL .gallery-grid PARA MÓVILES (AHORA SE SOBRESCRIBE MÁS ABAJO) */
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, 190px);
    }
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    .footer-section {
        min-width: unset;
        width: 100%;
        margin-bottom: 30px;
    }
    .footer-section h3 {
        text-align: center;
    }
    .footer-section p {
        text-align: center;
    }
    .social-links {
        display: flex;
        justify-content: center;
    }
}
/* ************************************************************ */
/* CAMBIO CLAVE: Estilos para la galería en pantallas muy pequeñas (móviles) */
@media (max-width: 600px) { /* Este breakpoint es ideal para 2 columnas en móviles */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* ¡Aquí el cambio! Dos columnas de igual ancho */
        gap: 10px; /* Un poco menos de espacio entre ellas para que quepan mejor */
        justify-content: center; /* Centra las columnas si hay espacio extra */
    }
    .album-card {
        width: auto; /* Permite que la tarjeta se ajuste al 1fr */
        height: 250px; /* Aumenta ligeramente la altura para móviles */
        aspect-ratio: unset; /* Elimina la relación de aspecto fija para permitir más altura */
        min-width: unset; /* Reinicia cualquier min-width para flexibilidad */
    }
    .album-card .album-image {
        height: 60%; /* Ajustado el porcentaje para dar más espacio al texto */
    }
    .album-card .album-info p {
        /* Permite que el texto de la descripción ocupe múltiples líneas */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}
/* ************************************************************ */

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2.2em;
        letter-spacing: 1px;
    }
    .hero-content p {
        font-size: 0.9em;
    }
    .cta-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    .logo {
        font-size: 1.5em;
    }
    .logo img {
        height: 30px;
    }
    .nav-links a {
        font-size: 0.85em;
        padding: 8px 10px;
    }
    .main-content {
        padding: 20px 2%;
        margin-top: -40px;
    }
    .gallery-button-container,
    .calendar-container,
    .about-us-section {
        padding: 15px;
        min-height: 280px;
        border-radius: 15px;
    }
    #calendar {
        font-size: 0.7em;
    }
    .fc-event-title, .fc-event-time {
        font-size: 0.7em;
    }
    .fc-daygrid-day-frame {
        padding: 1px;
    }
    .fc .fc-daygrid-day-number {
        font-size: 0.8em;
    }
    @media (max-width: 480px) {
        .fc-col-header-cell-cushion[data-date='Mon']::before { content: 'L'; }
        .fc-col-header-cell-cushion[data-date='Tue']::before { content: 'M'; }
        .fc-col-header-cell-cushion[data-date='Wed']::before { content: 'X'; }
        .fc-col-header-cell-cushion[data-date='Thu']::before { content: 'J'; }
        .fc-col-header-cell-cushion[data-date='Fri']::before { content: 'V'; }
        .fc-col-header-cell-cushion[data-date='Sat']::before { content: 'S'; }
        .fc-col-header-cell-cushion[data-date='Sun']::before { content: 'D'; }
        .fc-col-header-cell-cushion span { display: none; }
    }
}
/* --- INICIO DE LAS NUEVAS REGLAS PARA EVENTOS DE CALENDARIO Y TARJETAS DE EVENTOS --- */
/* Estilo para eventos específicos en el calendario (ej. "Barceló") */
.fc-event.event-barcelo {
    background-color: #A39270;
    border-color: #A39270;
    color: var(--primary-text-color);
}
/* Contenedor para las tarjetas de eventos debajo del calendario */
.events-list-container {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 0 5%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
/* Estilo para cada tarjeta de evento individual */
.event-card {
    background-color: var(--section-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 6px 20px var(--shadow-light); /* Sombra más clara */
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}
.event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px var(--shadow-dark); /* Sombra más clara */
    border-color: var(--accent-color);
}
.event-card h3 {
    color: #333; /* Color original */
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 700;
}
.event-card p {
    font-size: 1em;
    color: #555; /* Color original */
    margin-bottom: 8px;
    line-height: 1.6;
}
.event-card p strong {
    color: #333; /* Color original */
    font-weight: 600;
}
/* MODIFICACIÓN: Clase para la imagen del evento en el modal */
.event-card .event-detail-image {
    max-width: 100%;
    height: auto;
    max-height: 250px; /* Altura máxima para la imagen */
    object-fit: cover; /* Recorta la imagen para ajustarse */
    border-radius: 10px;
    margin-top: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* El botón tickets-button ya está definido para las tarjetas de eventos normales.
   Lo vamos a usar también en el modal de detalles de evento, y se puede sobrescribir
   ligeramente para el modal si es necesario. */
.tickets-button {
    display: inline-block;
    background-color: var(--accent-darker); /* Usar variable beige */
    color: var(--primary-text-color); /* Texto oscuro */
    padding: 12px 25px;
    border-radius: 50px;
    margin-top: 20px;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 10px var(--shadow-light); /* Sombra consistente */
    background-image: linear-gradient(to bottom right, var(--button-gradient-start), var(--button-gradient-end));
    border: 1px solid var(--border-color);
}
.tickets-button:hover {
    background-color: var(--hover-color); /* Usar variable beige para hover */
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 15px var(--shadow-dark); /* Sombra consistente */
    background-image: linear-gradient(to bottom right, var(--button-gradient-end), var(--button-gradient-start));
}
/* Media Query para las tarjetas de eventos en pantallas pequeñas */
@media (max-width: 768px) {
    .events-list-container {
        padding: 0 3%;
        gap: 20px;
    }
    .event-card {
        padding: 20px;
        border-radius: 10px;
    }
    .event-card h3 {
        font-size: 1.5em;
    }
    .event-card p {
        font-size: 0.95em;
    }
    .tickets-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }
}
/* --- FIN DE LAS NUEVAS REGLAS PARA EVENTOS DE CALENDARIO Y TARJETAS DE EVENTOS --- */

/* --- Estilos del Modal de la Galería y Eventos (compartidos) --- */
.album-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro semi-transparente para overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* ¡Muy alto para asegurar que esté por encima de todo! */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* Permite clics a través cuando está oculto */
}

.album-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Bloquea clics en el fondo cuando está activo */
}

.album-modal-content {
    background-color: white; /* Color original */
    border-radius: 20px;
    padding: 30px;
    max-width: 80%;
    max-height: 90vh; /* Limita la altura del modal */
    overflow-y: auto; /* Permite scroll dentro del modal si el contenido es muy largo */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Sombra original */
    position: relative;
    transform: translateY(20px); /* Para la animación de entrada */
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    border: 1px solid #ccc; /* Color original */
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el tamaño */
}

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

/* CAMBIO CLAVE: Posición y estilo del botón de cierre de modal */
.album-modal-close {
    position: absolute;
    top: 0px; /* Ajustado a la esquina superior */
    right: 0px; /* Ajustado a la esquina derecha */
    left: auto; /* Eliminar posicionamiento izquierdo */
    background: none;
    border: none;
    color: var(--primary-text-color); /* Color de texto principal */
    font-size: 2.5em; /* Tamaño grande para fácil clic */
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 10001; /* Asegura que esté encima de todo el contenido del modal */
    padding: 10px; /* Añadir padding para que el área de clic sea más grande y no se superponga */
}

.album-modal-close:hover {
    color: var(--hover-color); /* CAMBIO: Beige para hover */
    transform: rotate(90deg);
}

.album-modal-title {
    color: #333; /* Color original */
    font-size: 2.5em;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
    text-shadow: none; /* Sombra original */
}

.album-modal-image-grid {
    display: grid;
    /* Por defecto, 3 columnas */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 10px;
}
/* Media query para el modal de imágenes: 2 columnas en pantallas muy pequeñas */
@media (max-width: 480px) { /* Este breakpoint es para móviles más pequeños */
    .album-modal-image-grid {
        grid-template-columns: repeat(2, 1fr); /* ¡Aquí el cambio para 2 columnas en móviles! */
        gap: 10px; /* Un poco menos de espacio entre ellas para que quepan mejor */
    }
}
/* Revertir a 3 columnas para pantallas medianas (tabletas y superiores) */
@media (min-width: 481px) { /* A partir de 481px (incluyendo tabletas), siempre 3 columnas */
    .album-modal-image-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}


.album-modal-image-item {
    background-color: #f0f0f0; /* Color original */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra original */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1; /* Mantiene las imágenes cuadradas en la cuadrícula del modal */
}

.album-modal-image-item:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.album-modal-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el espacio */
    border-radius: 15px; /* ¡AQUÍ ES DONDE SE APLICAN LOS BORDES CURVOS A LAS IMÁGENES DEL MODAL! */
    display: block;
}

/* Media Queries para el Modal */
@media (max-width: 768px) {
    .album-modal-content {
        padding: 20px;
        max-width: 95%;
    }
    .album-modal-close {
        font-size: 2em;
        top: 0px; /* Ajustado a la esquina superior */
        right: 0px; /* Ajustado a la esquina derecha */
        left: auto; /* Asegurar que no haya left */
        padding: 10px; /* Añadir padding para el área de clic */
    }
    .album-modal-title {
        font-size: 2em;
        margin-bottom: 20px;
    }
    /* Estas reglas ya no serán tan necesarias si se usa el grid-template-columns dinámico */
    /* .album-modal-image-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 8px;
    } */
    .album-modal-close {
        font-size: 1.8em;
    }
}
/* --- FIN DE Estilos del Modal de la Galería --- */

/* --- Estilos del Modal de Eventos (NUEVO) --- */
.event-modal-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
}

.event-modal-details .event-card {
    background-color: white; /* Fondo de la tarjeta de evento dentro del modal claro */
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra más clara */
    text-align: left;
}

.event-modal-details .event-card h3 {
    color: #333; /* Color original */
    font-size: 1.6em;
    margin-top: 0;
    margin-bottom: 10px;
}

.event-modal-details .event-card p {
    font-size: 0.95em;
    color: #555; /* Color original */
    margin-bottom: 5px;
    line-height: 1.5; /* Ajuste para mayor legibilidad */
}
.event-modal-details .event-card p strong {
    color: #333; /* Color original */
    font-weight: 600;
}
/* Clase para la imagen del evento dentro del modal de detalles */
.event-detail-image {
    max-width: 100%;
    height: auto;
    max-height: 250px; /* Altura máxima para la imagen */
    object-fit: cover; /* Recorta la imagen para ajustarse */
    border-radius: 10px;
    margin-top: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* APLICAR ESTILO BEIGE Y SUBRAYADO A LOS ENLACES DE UBICACIÓN DENTRO DE LOS MODALES DE EVENTO */
/* Esto apunta a cualquier enlace <a> que sea hermano adyacente de un <strong> dentro de un <p> en .event-modal-details */
.event-modal-details p a {
    color: var(--hover-color); /* Usa el beige para el color del texto del enlace */
    text-decoration: underline; /* Muestra el subrayado */
    text-decoration-color: var(--hover-color); /* Asegura que el color del subrayado sea beige */
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    font-weight: 600; /* Puedes ajustar el peso de la fuente si lo deseas */
}

.event-modal-details p a:hover {
    color: var(--accent-darker); /* Un beige ligeramente más oscuro al pasar el ratón */
    text-decoration-color: var(--accent-darker); /* El subrayado también cambia al pasar el ratón */
}

.event-modal-details p a:visited {
    color: var(--hover-color); /* ¡IMPORTANT! Fuerza el color beige incluso si ya fue visitado */
    text-decoration-color: var(--hover-color); /* ¡IMPORTANT! Fuerza el subrayado beige incluso si ya fue visitado */
}

/* MODIFIED tickets-button INSIDE MODAL */
.event-modal-details .tickets-button {
    display: inline-block;
    background-color: var(--accent-darker); /* Usar variable beige */
    color: var(--primary-text-color); /* Texto oscuro */
    padding: 10px 20px;
    border-radius: 50px;
    margin-top: 15px;
    font-size: 0.95em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 10px var(--shadow-light); /* Sombra consistente */
    background-image: linear-gradient(to bottom right, var(--button-gradient-start), var(--button-gradient-end));
    border: 1px solid var(--border-color);
}
.event-modal-details .tickets-button:hover {
    background-color: var(--hover-color); /* Usar variable beige para hover */
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 5px 12px var(--shadow-dark);
    background-image: linear-gradient(to bottom right, var(--button-gradient-end), var(--button-gradient-start));
}

/* Estilos para el mensaje de carga del calendario */
#calendar-loading-message {
    text-align: center;
    color: #333; /* Color original */
    font-size: 1.1em;
    padding: 20px;
    background-color: white; /* Color original */
    border-radius: 10px;
    margin: 20px;
    display: none;
}

#calendar-loading-message.error-message {
    color: #cc0000; /* Rojo más fuerte para errores */
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid #cc0000;
}

/* --- NUEVOS ESTILOS PARA EL MODAL DE COMPRA DE TICKETS --- */
.ticket-purchase-form-container {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Apila el formulario verticalmente */
}

.purchase-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre los grupos de formulario */
    width: 100%;
    max-width: 500px; /* Limita el ancho del formulario */
    background-color: white; /* Fondo del formulario original */
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Sombra original */
    border: 1px solid #ccc;
}

.purchase-event-info,
.purchase-event-price {
    font-size: 1.1em;
    text-align: center;
    margin-bottom: 10px;
    color: #333; /* Color original */
}

.purchase-event-info strong,
.purchase-event-price strong {
    color: #333; /* Color original */
    font-weight: 700;
}

.disclaimer {
    font-size: 0.9em;
    color: #cc0000; /* Rojo más fuerte para el disclaimer */
    text-align: center;
    margin-top: -10px; /* Más cerca de los detalles de pago */
    margin-bottom: 20px;
    font-weight: 600;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.form-group label {
    font-size: 0.95em;
    color: #333; /* Color original */
    margin-bottom: 5px;
    font-weight: 600;
    align-self: flex-start; /* Alinea el label a la izquierda */
}

/* Estilo para el nuevo contenedor de input y botón de cortesía */
.courtesy-input-group {
    display: flex; /* Usar flexbox para el input y el botón */
    align-items: center;
    gap: 10px; /* Espacio entre input y botón */
    width: 100%; /* Ocupa todo el ancho disponible del form-group */
    justify-content: flex-start; /* Alinea este grupo a la izquierda */
}

.courtesy-input-group input {
    flex-grow: 1; /* El input crecerá para ocupar el espacio disponible */
}

.courtesy-input-group .small-button {
    flex-shrink: 0; /* Evita que el botón se comprima */
}


.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select { /* Añadido input type number y select */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: white; /* Fondo del input original */
    color: #333; /* Color original */
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    /* Eliminamos max-width para que siempre use el 100% disponible de su padre */
    max-width: 100%; 
    align-self: flex-start; /* Asegura que el input ocupe todo el ancho y se alinee a la izquierda */
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="number"]:focus,
.form-group select:focus { /* Añadido input type number y select */
    border-color: var(--hover-color); /* Usar variable beige para enfoque */
    box-shadow: 0 0 0 3px rgba(187, 175, 162, 0.25); /* Sombra de enfoque consistente */
    outline: none;
}

.form-group-inline {
    display: flex;
    gap: 20px;
    /* Aseguramos que los elementos internos se envuelvan si no caben */
    flex-wrap: wrap; 
}

.form-group-inline > div {
    flex: 1; /* Distribuye el espacio equitativamente */
    display: flex;
    flex-direction: column;
    /* Ajuste para que cada columna ocupe el 100% en pantallas muy pequeñas */
    min-width: 150px; /* Asegura un ancho mínimo para evitar compresión excesiva */
}
/* Forzar columnas apiladas en móviles para form-group-inline */
@media (max-width: 480px) {
    .form-group-inline {
        flex-direction: column;
        gap: 10px;
    }
    .form-group-inline > div {
        width: 100%;
        min-width: unset; /* Quita el min-width cuando se apilan */
    }
}


/* --- NUEVOS ESTILOS PARA EL MODAL DE ENTRADA GENERADA --- */
.generated-ticket-display {
    padding: 20px;
    background-color: white; /* Fondo de la pantalla de ticket original */
    border-radius: 15px;
    border: 1px solid #ccc;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Sombra original */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    overflow: hidden; /* Asegura que la imagen de la entrada se recorte si es demasiado grande */
}

/* Estilos para la imagen del ticket generada en el modal */
.generated-ticket-display img.generated-ticket-image {
    max-width: 100%; /* Asegura que la imagen no desborde el contenedor */
    height: auto;    /* Mantiene la proporción de la imagen */
    border-radius: 10px; /* Consistencia con el estilo general */
    display: block;  /* Elimina espacio extra debajo de la imagen */
    margin: 0 auto; /* Centra la imagen */
}


.ticket-download-info {
    text-align: center;
    font-size: 1em;
    color: #333; /* Color original */
    margin-top: 10px;
    margin-bottom: 20px;
}



/* Media Queries para modales de compra/entrada */
@media (max-width: 600px) {
    .album-modal-content {
        max-width: 95%;
        padding: 15px;
    }
    .album-modal-title {
        font-size: 1.8em;
        margin-bottom: 15px;
    }
    .purchase-form {
        padding: 20px;
        gap: 10px;
    }
    /* La regla .form-group-inline ya está gestionada en la sección principal, la quitamos de aquí */
    /* .form-group-inline {
        flex-direction: column;
        gap: 10px;
    } */
    .form-group label,
    .form-group input,
    .purchase-event-info,
    .purchase-event-price,
    .disclaimer,
    .ticket-download-info {
        font-size: 0.9em;
    }
    .purchase-button,
    .download-button {
        padding: 12px;
        font-size: 1em;
        width: 100%;
        max-width: unset;
    }
    .generated-ticket-display {
        padding: 10px;
    }

    /* Ajustes específicos para el grupo de cortesía en móvil */
    .form-group#courtesyCodeGroup {
        /* Vuelve a ser una columna para el label y el input-group */
        flex-direction: column;
        align-items: flex-start; /* Alinea a la izquierda en móvil */
        gap: 5px; /* Menos espacio */
    }

    .form-group#courtesyCodeGroup label {
        text-align: left; /* Alinea el label a la izquierda en móvil */
        width: auto; /* Ancho automático para el label */
        min-width: unset;
        padding-right: 0;
    }

    .courtesy-input-group {
        flex-direction: column; /* Input y botón en columna en móvil */
        gap: 10px;
    }

    .courtesy-input-group input {
        width: 100%; /* Input ocupa todo el ancho */
    }

    .courtesy-input-group .small-button {
        width: 100%; /* Botón ocupa todo el ancho */
    }
}

/* --- ESTILOS PARA LA SECCIÓN DEL ESCÁNER (NUEVOS Y ESENCIALES) --- */
.ticket-scanner-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.ticket-scanner-section h4 {
    color: #333; /* Color original */
    font-size: 1.5em;
    margin-bottom: 15px;
}

.scanner-interface {
    display: none; /* Se mostrará con JavaScript */
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding: 20px;
    background-color: white; /* Color original */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra original */
}

.scanner-interface.active {
    display: flex;
}

.scanner-input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    width: 80%;
    max-width: 300px;
    box-sizing: border-box;
}

.scanner-video-container {
    width: 100%;
    max-width: 400px; /* Limita el ancho del video */
    background-color: #000;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* Altura mínima para que sea visible */
}

.scanner-video-container video {
    width: 100%;
    height: auto;
    display: block;
}

.ticket-scan-results { /* Nuevo contenedor para resultados del escaneo */
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    width: 100%;
    max-width: 400px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    text-align: left; /* Alineación a la izquierda para el texto detallado */
    min-height: 120px; /* Asegura una altura mínima visible */
    display: flex; /* Flexbox para organizar el mensaje de estado y la info */
    flex-direction: column;
    justify-content: center; /* Centrar verticalmente si hay poco contenido */
    align-items: flex-start; /* Alinear contenido a la izquierda */
}

.status-message {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center; /* Centrar el mensaje principal */
    width: 100%; /* Ocupar todo el ancho */
}

.status-message.success {
    color: #28a745; /* Verde para éxito */
}

.status-message.error {
    color: #dc3545; /* Rojo para error */
}

.ticket-info-display { /* Contenedor para detalles del ticket escaneado */
    font-size: 0.95em;
    color: #333; /* Color original */
    line-height: 1.5;
    width: 100%; /* Ocupa todo el ancho disponible */
}

.ticket-info-display p {
    margin-bottom: 5px;
}

.ticket-info-display p strong {
    font-weight: 600;
}

.loading-message {
    color: #6c757d; /* Gris para mensajes de carga */
    font-style: italic;
}


/* Flexbox para el grupo de formulario del código de escáner */
.form-group.scanner-code-input-group {
    display: flex;
    flex-direction: row; /* Elementos en línea */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espacio entre input y botón */
    width: 100%;
    max-width: 400px; /* Limitar ancho del grupo de input */
}

.form-group.scanner-code-input-group label {
    white-space: nowrap; /* Evita que el label se rompa */
    margin-bottom: 0;
    flex-shrink: 0; /* Asegura que el label no se comprima */
    min-width: 120px; /* Dale un ancho mínimo para que el texto no se amontone demasiado */
    text-align: right; /* Alinea el texto a la derecha */
    padding-right: 10px; /* Espacio entre el label y el input */
}

.form-group.scanner-code-input-group input {
    flex-grow: 1; /* El input tomará el espacio restante */
}


/* ESTILOS PARA LA CUADRÍCULA DE MÉTRICAS DEL DASHBOARD */
.dashboard-metrics-grid {
    display: grid;
    /* En pantallas pequeñas (móvil), 2 columnas */
    grid-template-columns: repeat(2, 1fr);
    /* Definir áreas de la cuadrícula para controlar el orden en pantallas pequeñas */
    grid-template-areas:
        "tickets-sold total-revenue"
        "average-price tickets-remaining";
    gap: 2.5rem; /* Aumentado el gap para más separación y armonía */
}

/* Asignar cada tarjeta a su área correspondiente */
.tickets-sold-card { grid-area: tickets-sold; }
.total-revenue-card { grid-area: total-revenue; }
.average-price-card { grid-area: average-price; }
.tickets-remaining-card { grid-area: tickets-remaining; }

/* En pantallas grandes (lg:), 4 columnas */
@media (min-width: 1024px) { /* Corresponde a 'lg' en Tailwind CSS */
    .dashboard-metrics-grid {
        grid-template-columns: repeat(4, 1fr);
        /* Definir áreas para pantallas grandes (una fila) */
        grid-template-areas:
            "tickets-sold total-revenue average-price tickets-remaining";
    }
}


/* ESTILOS PARA LA CUADRÍCULA DE GRÁFICOS DEL DASHBOARD */
.dashboard-charts-grid {
    display: grid;
    grid-template-columns: 1fr; /* Por defecto una columna en móvil */
    gap: 2.5rem; /* Aumentado el gap para más separación */
}

/* Asignar áreas a los gráficos */
.tickets-chart-card {
    grid-area: tickets-chart;
}

.revenue-chart-card {
    grid-area: revenue-chart;
}

/* En pantallas grandes (lg:), dos columnas y orden específico */
@media (min-width: 1024px) { /* Corresponde a 'lg' en Tailwind CSS */
    .dashboard-charts-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "tickets-chart revenue-chart"; /* Orden deseado: izquierda y derecha */
    }
}

/* Ajustes cruciales para la sección de la dashboard para permitir scroll */
#dashboardSection {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* CAMBIO CLAVE: min-height en lugar de height fija para permitir que el contenido empuje el scroll */
    min-height: 100vh;
    background-color: var(--dashboard-bg);
    color: var(--dashboard-text-light);
    padding: 3rem 1.5rem; /* Aumentado el padding para dar más espacio alrededor del contenido */
    box-sizing: border-box; /* Incluye padding en el cálculo del tamaño */
    overflow-y: auto; /* Permite scroll vertical si el contenido excede el min-height */
    z-index: 999;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#dashboardSection.active {
    opacity: 1;
    visibility: visible;
}

/* Ajustes para la altura del chart-container dentro del dashboard-card */
.chart-container {
    position: relative;
    height: auto; /* Hacemos la altura flexible */
    min-height: 250px; /* Aseguramos una altura mínima para que el gráfico sea visible */
    max-height: 400px; /* Un máximo para que no se extienda demasiado en pantallas grandes */
    width: 100%;
}

/* Regla crucial para asegurar que el canvas de Chart.js sea responsivo */
.chart-container canvas {
    width: 100% !important; /* Asegura que el canvas ocupe todo el ancho disponible */
    height: auto !important; /* Mantiene la proporción */
    display: block; /* Elimina cualquier espacio adicional debajo del canvas */
}

/* Asegurar que las etiquetas del eje X de Chart.js sean visibles y no se corten */
/* Esto apunta a las etiquetas generadas por Chart.js */
.chartjs-render-monitor {
    overflow: visible !important; /* Permite que las etiquetas de los ejes se dibujen fuera del área del lienzo si es necesario */
}
.chartjs-render-monitor canvas {
    /* Repetir por si acaso, aunque la anterior debería ser suficiente */
    width: 100% !important;
    height: auto !important;
}

/* Asegurar que las leyendas de los gráficos no se superpongan o corten */
.chartjs-tooltip-header,
.chartjs-tooltip-body {
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Ocultar el botón de escanear en móvil si el scannerFeedContainer no está activo */
@media (max-width: 600px) {
    .scanner-feed-container {
        max-width: 95%;
        min-height: 180px;
    }
    .ticket-scan-results {
        width: 95%;
    }
    .scanner-input {
        width: 95%;
    }
    .form-group.scanner-code-input-group {
        flex-direction: column;
        gap: 10px;
        max-width: 100%; /* Permite que ocupe más ancho en móvil */
    }
    .form-group.scanner-code-input-group label {
        text-align: center; /* Centrar el label en móvil */
        width: 100%; /* Ocupar todo el ancho en móvil */
        min-width: unset; /* Quitar min-width en móvil */
        padding-right: 0;
    }
    .small-button {
        margin-left: 0;
        width: 100%; /* El botón ocupa todo el ancho */
        max-width: 300px;
    }
    /* En móviles, asegurar que los gráficos apilen verticalmente y tengan espacio */
    .dashboard-charts-grid {
        grid-template-columns: 1fr; /* Una sola columna para apilar */
        gap: 2rem; /* Espacio suficiente entre gráficos */
    }

    .chart-container {
        min-height: 280px; /* Aumenta ligeramente la altura mínima para los gráficos en móvil */
        max-height: 350px; /* Un poco más de margen en la altura máxima */
    }

    /* Reglas adicionales para el layout de los gráficos en móviles */
    /* Asegurarse de que no haya un 'display: inline-block' u 'inline-flex' residual que cause la superposición */
    .dashboard-card.tickets-chart-card,
    .dashboard-card.revenue-chart-card {
        display: block; /* Forzar a ser un bloque completo */
        width: 100%; /* Asegurar que ocupan todo el ancho disponible */
        margin-bottom: 2rem; /* Añadir margen inferior explícito entre ellos */
    }
    .dashboard-card.revenue-chart-card {
        margin-bottom: 0; /* No margin-bottom para el último gráfico si es el último en el grid */
    }

    /* Asegurar que las leyendas de los gráficos no se superpongan o corten */
    .chartjs-legend li {
        white-space: nowrap; /* Evitar que los elementos de la leyenda se ajusten de forma demasiado agresiva */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ajuste para el texto de las etiquetas del eje X en Chart.js en pantallas muy pequeñas */
    /* Apunta a las etiquetas del eje x de Chart.js */
    .chartjs-render-monitor canvas {
        font-size: 0.75rem; /* Reduce el tamaño de fuente para las etiquetas de los ejes si es necesario */
    }
}

/* Asegurar que los elementos del dashboard-card tengan un comportamiento de flujo de bloque estándar en móviles por si acaso */
@media (max-width: 768px) {
    .dashboard-card {
        display: block; /* Asegura que cada tarjeta ocupe su propia línea */
        width: 100%; /* Ocupa el ancho completo */
        margin-bottom: 1.5rem; /* Añade un margen inferior para separarlas */
    }
    /* El último elemento del grid no necesita margin-bottom si está en su propia fila */
    .dashboard-metrics-grid .dashboard-card:nth-last-child(1),
    .dashboard-charts-grid .dashboard-card:nth-last-child(1) {
        margin-bottom: 0;
    }
}

/* Estilos para el enlace de WhatsApp como texto subrayado */
.whatsapp-text-link {
    color: var(--hover-color); /* Usar el color beige */
    text-decoration: underline; /* Subrayado por defecto */
    text-decoration-color: var(--hover-color); /* Color del subrayado beige */
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    font-weight: 600; /* Puedes ajustar el peso de la fuente si lo deseas */
}

.whatsapp-text-link:hover {
    color: var(--accent-darker); /* Un tono más oscuro de beige al pasar el ratón */
    text-decoration-color: var(--accent-darker); /* El subrayado también cambia de color */
}
/* No es necesario un ::before con el icono de WhatsApp si es solo texto */

/* Estilos para el contenedor de cantidad con botones */
.quantity-input-container {
    display: flex;
    align-items: center;
    width: 100%; /* Ocupa el 100% del form-group */
    max-width: 160px; /* Un poco más de ancho para los botones fusionados */
    /* ALINEACIÓN A LA IZQUIERDA */
    margin-left: 0;
    margin-right: auto; /* Esto empuja a la izquierda */
    gap: 0; /* Los elementos internos deben estar pegados */
    box-sizing: border-box; /* Añadido para cálculo correcto de ancho */
}

/* Contenedor para agrupar los botones para que se fusionen visualmente con el input */
.quantity-buttons-group {
    display: flex;
}


.quantity-input-container input[type="number"] {
    -moz-appearance: textfield; /* Elimina las flechas en Firefox */
    text-align: center;
    flex-grow: 1; /* Permite que el input crezca */
    padding: 8px; /* Ajusta el padding para que no sea demasiado grande */
    border-radius: 0; /* Quita los bordes redondeados para que se fusione con los botones */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-left: none; /* Eliminar borde izquierdo para fusionar */
    border-right: none; /* Eliminar borde derecho para fusionar */
    background-color: white;
    color: var(--primary-text-color);
    font-size: 1.1em;
    height: 40px; /* Asegura que el input tenga la misma altura que los botones */
    box-sizing: border-box; /* Incluye padding y border en la altura */
}

/* Eliminar flechas en Chrome, Safari, Edge, Opera */
.quantity-input-container input[type="number"]::-webkit-outer-spin-button,
.quantity-input-container input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-button {
    background-color: var(--accent-darker);
    color: var(--primary-text-color);
    border: 1px solid var(--border-color);
    /* No se aplica border-radius general aquí, se controla en las clases específicas */
    font-size: 1.5em; /* Tamaño grande para fácil toque */
    width: 40px; /* Ancho fijo para botones */
    height: 40px; /* Altura fija para botones */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px var(--shadow-light);
    flex-shrink: 0; /* Evita que el botón se encoja */
}

/* Estilos específicos para los botones de +/- para redondear solo los bordes externos */
.quantity-button.decrement-button {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none; /* Eliminar borde derecho */
}

.quantity-button.increment-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: none; /* Eliminar borde izquierdo */
}

.quantity-button:hover {
    background-color: var(--hover-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--shadow-dark);
}

.quantity-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px var(--shadow-light);
}
/* Asegurar que los botones deshabilitados tengan un estilo visual */
.quantity-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #e0e0e0; /* Un color más claro para deshabilitado */
    transform: none;
    box-shadow: none;
}

/* Ajustes para el form-group de cantidad para alinearlo a la izquierda */
.purchase-form .form-group {
    /* display: flex; flex-direction: column; ya existen */
    align-items: flex-start; /* Asegura que el label se alinee a la izquierda */
    position: relative; /* Para posicionamiento absoluto si fuera necesario, pero no lo es aquí */
}

/* PARA EL QUANTITY INPUT CONTAINER ESPECÍFICAMENTE: */
.purchase-form .form-group .quantity-input-container {
    width: 100%; /* El contenedor ocupa todo el ancho disponible dentro del form-group */
    display: flex; /* Para que sus hijos estén en línea */
    justify-content: flex-start; /* ALINEACIÓN A LA IZQUIERDA: Empuja el input+botones a la izquierda */
    gap: 0; /* Los elementos dentro del .quantity-input-container (botones y input) no tienen espacio entre ellos */
    margin-left: 0; /* Asegura que no haya auto-márgenes que lo desplacen */
    margin-right: auto; /* Empuja el contenedor a la izquierda */
}

/* Estilos para que el input del código de cortesía y su botón estén a la izquierda */
.purchase-form .form-group .courtesy-input-group {
    width: 100%; /* Ocupa todo el ancho */
    display: flex;
    justify-content: flex-start; /* Alinea el contenido (input + botón) a la izquierda */
}

/* Asegurar que los input normales sigan siendo anchos y a la izquierda */
.purchase-form .form-group input[type="text"],
.purchase-form .form-group input[type="email"],
.purchase-form .form-group select {
    width: 100%; /* Ocupa el 100% del max-width del formulario */
    max-width: unset; /* Deshabilita el max-width para que sea flexible */
    align-self: stretch; /* Se estira para ocupar todo el ancho disponible */
}

/* Revertir estilo del botón "Acceder a Dashboard" en el footer a su estado original (texto beige subrayado) */
.dashboard-access-button-footer {
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
    color: var(--primary-text-color); /* Color del texto principal */
    font-size: 0.85em; /* Tamaño de fuente más pequeño */
    font-weight: 600;
    opacity: 0.4; /* Opacidad inicial para que sea discreto */
    transition: opacity 0.3s ease, color 0.3s ease, text-decoration-color 0.3s ease; /* Transición suave para todos */
    cursor: pointer;
    padding: 5px 10px; /* Padding para hacer clic más fácil */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    margin-top: 10px; /* Espacio superior */
    text-decoration: underline; /* Subrayado para indicar que es un enlace/botón */
    text-underline-offset: 2px; /* Separación del subrayado */
    text-decoration-color: rgba(51, 51, 51, 0.4); /* Color del subrayado más sutil */
    /* ASEGURAMOS QUE NO TENGA TRANSFORMACIONES O SOMBRAS PREVIAS AL CARGAR */
    transform: none;
    box-shadow: none;
}

.dashboard-access-button-footer:hover {
    opacity: 1; /* Opacidad completa al pasar el ratón */
    color: var(--hover-color); /* Color al pasar el ratón (¡BEIGE!) */
    text-decoration-color: var(--hover-color); /* Subrayado cambia de color también (¡BEIGE!) */
    /* ASEGURAMOS QUE NO TENGA TRANSFORMACIONES O SOMBRAS AL HACER HOVER */
    transform: none;
    box-shadow: none;
}

.dashboard-access-button-footer:active {
    /* ASEGURAMOS QUE NO TENGA TRANSFORMACIONES O SOMBRAS AL CLICKEAR */
    transform: none;
    box-shadow: none;
}

/* *** ESTILOS PARA LOS BOTONES DEL CALENDARIO (FullCalendar) - TODOS BEIGE ***
   Hemos identificado que las variables CSS de FullCalendar controlan el color
   de los botones y el texto. Aseguramos que apunten a los colores beige definidos.
*/
.fc .fc-button-primary {
    background-color: var(--accent-color) !important; /* Fondo beige claro */
    border-color: var(--accent-color) !important; /* Borde beige claro */
    color: var(--primary-text-color) !important; /* Texto oscuro */
    /* Otros estilos como padding, border-radius ya están definidos y son generales */
}

.fc .fc-button-primary:hover {
    background-color: var(--hover-color) !important; /* Fondo beige más oscuro al hover */
    border-color: var(--hover-color) !important; /* Borde beige más oscuro al hover */
    color: var(--primary-text-color) !important; /* Asegurar texto oscuro */
    /* Transformaciones de hover generales de .cta-button no aplican aquí,
       pero si heredan, se pueden sobrescribir con 'transform: none !important;' */
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--hover-color) !important; /* Fondo beige más oscuro cuando está activo */
    border-color: var(--hover-color) !important; /* Borde beige más oscuro cuando está activo */
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2) !important; /* Sombra interna */
    color: var(--primary-text-color) !important; /* Asegurar texto oscuro */
}

/* Asegurar que los botones de navegación (prev, next) también sean beige */
.fc .fc-button-group .fc-button {
    background-color: var(--accent-color) !important; /* Fondo beige claro */
    border-color: var(--accent-color) !important; /* Borde beige claro */
    color: var(--primary-text-color) !important; /* Texto oscuro */
}

.fc .fc-button-group .fc-button:hover {
    background-color: var(--hover-color) !important; /* Fondo beige más oscuro al hover */
    border-color: var(--hover-color) !important; /* Borde beige más oscuro al hover */
    color: var(--primary-text-color) !important; /* Asegurar texto oscuro */
}

/* Media Query para el campo de cantidad en móvil para que no sea demasiado pequeño */
@media (max-width: 600px) {
    .purchase-form .form-group .quantity-input-container {
        max-width: 100%; /* Permite que ocupe más espacio en móvil si es necesario */
        justify-content: center; /* Centra el control de cantidad en móvil */
        margin-left: 0; /* Asegura que no haya márgenes auto no deseados */
    }
    .purchase-form .form-group input[type="number"] {
        max-width: 100px; /* Permite que el input crezca un poco más en móvil si el contenedor es más grande */
    }
}

/* REGLAS PARA ELIMINAR EL TAP HIGHLIGHT AZUL/CELESTE EN MÓVILES Y EL OUTLINE DE FOCO */
/* Aplica a elementos interactivos */
a, button, input, select, textarea, .fc-button, .album-card, .event-card, .event-card .tickets-button,
/* Añadido para el calendario y álbumes */
.fc-daygrid-day-frame, .fc-day-other, .fc-header-toolbar .fc-button-group .fc-button,
/* Elementos específicos del menú de hamburguesa */
.hamburger-menu, .hamburger-menu .bar { /* Añadido .hamburger-menu y .hamburger-menu .bar */
    -webkit-tap-highlight-color: transparent; /* Elimina el resaltado azul/celeste en iOS/Android Chrome */
    outline: none; /* Elimina el contorno de foco por defecto */
    -webkit-touch-callout: none; /* Deshabilita la llamada contextual en iOS */
    -webkit-user-select: none;   /* Deshabilita la selección de texto */
    -moz-user-select: none;      /* Para Firefox */
    -ms-user-select: none;       /* Para IE/Edge */
    user-select: none;           /* Estándar */
}
/* Reglas específicas para asegurar que los elementos del calendario y álbumes no muestren outline al ser "enfocados" o "pulsados" */
.fc-daygrid-day-frame:focus,
.album-card:focus,
.event-card:focus,
.fc-header-toolbar .fc-button-group .fc-button:focus,
.fc-header-toolbar .fc-button-group .fc-button:active,
/* Asegurar que el botón de hamburguesa tampoco tenga outline */
.hamburger-menu:focus {
    outline: none;
    box-shadow: none; /* También remover cualquier sombra de foco si existe */
}

/* NUEVOS ESTILOS PARA EL OVERLAY DE CARGA */
.loading-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: 100000; /* Por encima de todos los modales */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Estilos para el spinner de la imagen cargando.png */
.spinner {
    /* Eliminar estilos de borde y color de fondo del spinner CSS */
    border: none;
    background-color: transparent;
    border-radius: 0; /* Eliminar border-radius para la imagen */

    /* Configurar la imagen como fondo */
    background-image: url('cargando.png');
    background-size: contain; /* Asegura que la imagen se ajuste dentro del div */
    background-repeat: no-repeat;
    background-position: center;

    width: 100px; /* Ajusta el tamaño de tu imagen según sea necesario */
    height: 100px; /* Ajusta el tamaño de tu imagen según sea necesario */
    animation: rotateImage 1s linear infinite; /* Animación de rotación */
}

@keyframes rotateImage {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}