/**
 * @file eventos-privados.css
 * @description Archivo de estilos para el componente web personalizado EventosPrivados.
 *              Proporciona sistema completo de UI/UX para información de eventos privados,
 *              modal interactivo con cotización detallada, animaciones de scroll optimizadas,
 *              diseño responsive avanzado, efectos claymorphism sutiles, integración WhatsApp,
 *              gestión de accesibilidad, soporte multi-dispositivo, sistema de z-index
 *              estandarizado y optimizaciones para orientación landscape en móviles.
 * @author Enri Rego
 * @version 1.0.0
 * @date 28 de Mayo 2025
 * @since 1.0.0
 * @requires scripts/components/eventos-privados.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ===================================================================
   CONTENEDOR PRINCIPAL Y SISTEMA DE ANIMACIONES
   =================================================================== */

/**
 * Contenedor principal del componente eventos privados
 * Establece la estructura base con animaciones de entrada optimizadas,
 * transiciones GPU-aceleradas y estado inicial invisible para scroll animations
 */
.eventos-privados {
  /* Posicionamiento y dimensiones base */
  position: relative;
  width: 100%;

  /* Espaciado responsive usando variables del sistema */
  margin: 10px 10px var(--espaciado-xl, 2rem);
  padding: var(--espaciado-lg, 1.5rem) var(--espaciado-md, 1rem);

  /* Estado inicial para animaciones de scroll */
  opacity: 0;
  transform: translateY(10px);

  /* Transiciones optimizadas para GPU y velocidad */
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  will-change: opacity, transform;
}

/**
 * Estado animado del componente cuando es visible
 * Transición suave a estado completamente visible con posición natural
 */
.eventos-privados.animar {
  /* Estado final visible */
  opacity: 1;
  transform: translateY(0);
}

/**
 * Clase especial para animación instantánea en visitas repetidas
 * Optimización UX para eliminar delay en navegación repetida de sesión
 */
.eventos-privados.animar-inmediato {
  /* Aparición instantánea sin transición */
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

/* ===================================================================
   CONTENIDO PRINCIPAL Y ESTRUCTURA INTERNA
   =================================================================== */

/**
 * Contenedor interno del componente
 * Centra el contenido y establece la alineación base para todos los elementos
 */
.eventos-privados-contenedor {
  /* Alineación central para todo el contenido */
  text-align: center;
}

/**
 * Título principal del componente eventos privados
 * Tipografía responsive con color de marca y efectos de profundidad visual
 */
.eventos-privados-titulo {
  /* Tipografía responsive y fluida */
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  width: 100%;

  /* Espaciado responsive */
  margin-bottom: clamp(1rem, 4vw, 2rem);
  padding: 0 var(--espaciado-xs, 0.5rem);

  /* Alineación y colores de marca */
  text-align: center;
  color: var(--naranja, #FF6B35);

  /* Efecto de profundidad sutil */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/**
 * Descripción del componente
 * Texto secundario con límites de ancho para legibilidad óptima
 */
.eventos-privados-descripcion {
  /* Tipografía responsive */
  font-size: clamp(1rem, 3vw, 1.1rem);

  /* Colores y espaciado */
  color: var(--texto);
  margin: 0 0 var(--espaciado-lg, 1.5rem);

  /* Optimización de legibilidad */
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/**
 * Descripción en tema oscuro
 * Ajuste de color para mantener contraste adecuado en modo nocturno
 */
:root[data-tema="oscuro"] .eventos-privados-descripcion {
  color: var(--crema);
}

/**
 * Contenedor de botones de acción
 * Layout flexible que se adapta entre móvil (columna) y desktop (fila)
 */
.eventos-privados-acciones {
  /* Layout base en columna para móviles */
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-md, 1rem);

  /* Alineación central */
  align-items: center;
  justify-content: center;
}

/**
 * Contenedor de acciones en pantallas medianas y grandes
 * Cambio a layout horizontal con mayor espaciado entre elementos
 */
@media (min-width: 768px) {
  .eventos-privados-acciones {
    /* Layout horizontal en pantallas grandes */
    flex-direction: row;
    gap: var(--espaciado-lg, 1.5rem);
  }
}

/* ===================================================================
   SISTEMA DE BOTONES Y CONTROLES INTERACTIVOS
   =================================================================== */

/**
 * Estilos base para todos los botones del componente
 * Sistema unificado con efectos claymorphism y animaciones táctiles
 */
.eventos-boton {
  /* Tipografía y posicionamiento */
  font-weight: 600;
  position: relative;
  z-index: var(--z-base, 1);

  /* Layout y alineación */
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: var(--espaciado-xs, 0.5rem);

  /* Dimensiones y espaciado */
  padding: var(--espaciado-xs, 0.5rem) var(--espaciado-lg, 1.5rem);
  margin-bottom: var(--espaciado-xs, 0.5rem);
  min-width: 160px;

  /* Tipografía responsive */
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);

  /* Estilo visual base */
  transition: all var(--transicion-normal, 0.3s) ease;
  text-decoration: none;
  color: white;
  border: none;
  border-radius: var(--borde-radio-grande, 20px);
  cursor: pointer;
}

/**
 * Estado hover de botones
 * Elevación sutil para feedback visual de interacción
 */
.eventos-boton:hover {
  /* Elevación sutil al hover */
  transform: translateY(-2px);
}

/**
 * Estado activo de botones
 * Efecto de presionado para feedback táctil visual
 */
.eventos-boton:active {
  /* Efecto de presionado */
  transform: translateY(1px);
}

/* ===================================================================
   BOTONES - ICONOS Y VARIANTES DE ESTILO
   =================================================================== */

/**
 * Iconos SVG dentro de botones
 * Configuración estándar para iconos con dimensiones optimizadas y
 * renderizado mejorado para compatibilidad cross-browser
 */
.eventos-boton img {
  /* Dimensiones estándar usando variables del sistema */
  width: var(--tamano-icono-principal, 20px);
  height: var(--tamano-icono-principal, 20px);

  /* Optimización de renderizado y comportamiento flex */
  object-fit: contain;
  flex-shrink: 0;
}

/**
 * Botón de información con estilo naranja
 * Proporciona acceso a información detallada del evento con efectos
 * claymorphism y estados de hover optimizados
 */
.eventos-boton-info {
  /* Color de fondo usando variable del sistema */
  background-color: var(--naranja);
  color: var(--blanco);

  /* Efectos claymorphism con sombras interiores y exteriores */
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/**
 * Estado hover del botón de información
 * Intensifica el efecto claymorphism para feedback visual
 */
.eventos-boton-info:hover {
  /* Sombra más intensa en hover para efecto de elevación */
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.4),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/**
 * Botón de contacto con estilo WhatsApp verde
 * Diseño específico para enlaces de contacto por WhatsApp con
 * colores característicos de la plataforma
 */
.eventos-boton-contacto {
  /* Color característico de WhatsApp */
  background-color: #25D366;
  color: var(--blanco);

  /* Efectos claymorphism con tonos verdes */
  box-shadow: 0 4px 8px rgba(37, 211, 102, 0.25),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/**
 * Estado hover del botón de contacto
 * Cambia a tono más oscuro de WhatsApp con elevación aumentada
 */
.eventos-boton-contacto:hover {
  /* Tono más oscuro de WhatsApp en hover */
  background-color: #128C7E;
  color: var(--blanco);
  text-decoration: none;

  /* Sombra intensificada con color del hover */
  box-shadow: 0 6px 12px rgba(18, 140, 126, 0.4),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/**
 * Botón de contacto modal con estilo naranja
 * Variante del botón de contacto para usar dentro del modal con
 * colores consistentes con el esquema naranja del componente
 */
.eventos-boton-contacto-modal {
  /* Color naranja consistente con el diseño del componente */
  background-color: var(--naranja);
  color: var(--blanco);

  /* Efectos claymorphism con tonos naranjas */
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/**
 * Estado hover del botón de contacto modal
 * Intensifica el color naranja con sombra elevada
 */
.eventos-boton-contacto-modal:hover {
  /* Tono más intenso de naranja en hover */
  background-color: #E55A2B;
  color: var(--blanco);
  text-decoration: none;

  /* Sombra intensificada con color del hover */
  box-shadow: 0 6px 12px rgba(229, 90, 43, 0.4),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/**
 * Filtro para iconos en botón de contacto verde
 * Convierte iconos a blanco para contraste con fondo verde
 */
.eventos-boton-contacto img {
  /* Convierte el icono a blanco para contraste */
  filter: brightness(0) invert(1);
}

/**
 * Filtro para iconos en botón de contacto modal
 * Convierte iconos a blanco para contraste con fondo naranja
 */
.eventos-boton-contacto-modal img {
  /* Convierte el icono a blanco para contraste */
  filter: brightness(0) invert(1);
}

/* ===================================================================
   TEMA OSCURO - BOTONES
   =================================================================== */

/**
 * Botón de información en tema oscuro
 * Mantiene la misma apariencia que en tema claro por legibilidad
 */
:root[data-tema="oscuro"] .eventos-boton-info {
  /* Misma apariencia que tema claro para consistencia */
  background-color: var(--naranja);
  color: var(--blanco);
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/**
 * Estado hover del botón de información en tema oscuro
 */
:root[data-tema="oscuro"] .eventos-boton-info:hover {
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.4),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/* ===================================================================
   MODAL - ESTRUCTURA BASE Y OVERLAY
   =================================================================== */

/**
 * Modal de eventos privados - Overlay principal
 * Proporciona la capa base del modal con overlay oscurecido, efectos de
 * desenfoque y animaciones de entrada/salida fluidas. Incluye z-index
 * alto para asegurar que aparezca sobre otros elementos de la interfaz.
 */
.eventos-modal {
  /* Estado inicial oculto */
  display: none;

  /* Posicionamiento de overlay completo */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Z-index usando variables del sistema para modales */
  z-index: var(--z-modal, 1010);

  /* Fondo oscurecido con desenfoque */
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);

  /* Comportamiento y animaciones */
  overflow: hidden;
  transition: opacity var(--transicion-normal, 0.3s) ease;
  opacity: 0;
}

/**
 * Estado visible del modal
 * Aplicado cuando el modal está activo, centra el contenido y hace
 * visible el overlay con animación fluida
 */
.eventos-modal.visible {
  /* Mostrar como flex para centrado perfecto */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Opacity completa para transición suave */
  opacity: 1;
}

/**
 * Contenedor principal del modal
 * Estructura del contenido modal con efectos claymorphism, dimensiones
 * responsivas y animaciones de escala para entrada suave
 */
.eventos-modal-contenedor {
  /* Dimensiones responsivas */
  width: 90%;
  max-width: 900px;
  max-height: 90vh;

  /* Fondo y efectos claymorphism */
  background-color: var(--blanco);
  border-radius: var(--arcilla-radio);
  box-shadow: var(--arcilla-elevado-flotante);

  /* Comportamiento de overflow */
  overflow: hidden;

  /* Animación de entrada */
  transform: scale(0.95);
  transition: transform var(--transicion-normal, 0.3s) ease;
}

/**
 * Estado visible del contenedor modal
 * Escala completa cuando el modal está visible para efecto de zoom-in
 */
.eventos-modal.visible .eventos-modal-contenedor {
  /* Escala completa para efecto de entrada */
  transform: scale(1);
}

/* ===================================================================
   TEMA OSCURO - MODAL
   =================================================================== */

/**
 * Contenedor del modal en tema oscuro
 * Adaptación de colores para tema oscuro manteniendo legibilidad
 */
:root[data-tema="oscuro"] .eventos-modal-contenedor {
  /* Fondo oscuro usando variables del sistema */
  background-color: var(--gris-semi-obscuro);
  color: var(--crema);
}

/* ===================================================================
   MODAL - ESTRUCTURA INTERNA Y LAYOUT
   =================================================================== */

/**
 * Contenido principal del modal
 * Organiza la estructura interna del modal en layout vertical flexible
 * con altura controlada para manejo correcto del scroll
 */
.eventos-modal-contenido {
  /* Layout flex vertical */
  display: flex;
  flex-direction: column;

  /* Control de altura para scroll interno */
  height: 100%;
  max-height: 90vh;
}

/**
 * Encabezado del modal
 * Sección superior con título y botón de cerrar, incluye separador
 * visual y fondo distintivo para jerarquía visual clara
 */
.eventos-modal-encabezado {
  /* Layout horizontal con distribución espaciada */
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Espaciado interno */
  padding: var(--espaciado-lg, 20px) var(--espaciado-xl, 24px);

  /* Separador visual */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  /* Fondo distintivo */
  background: var(--arcilla-fondo);
}

/**
 * Título del modal
 * Tipografía responsiva con color distintivo y peso visual apropiado
 */
.eventos-modal-encabezado h2 {
  /* Reset de márgenes */
  margin: 0;

  /* Tipografía responsiva */
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  font-weight: 600;

  /* Color distintivo */
  color: var(--naranja);
}

/**
 * Botón de cerrar (X)
 * Botón circular con estados hover y diseño touch-friendly para
 * dispositivos móviles, incluye animaciones suaves de escala
 */
.eventos-modal-cerrar {
  /* Reset de estilos de botón */
  background: none;
  border: none;

  /* Tipografía del símbolo X */
  font-size: 50px;
  font-weight: bold;
  color: var(--texto);

  /* Interactividad */
  cursor: pointer;
  user-select: none;

  /* Dimensiones touch-friendly */
  width: 50px;
  height: 50px;
  padding: 0;

  /* Centrado del contenido */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Forma circular */
  border-radius: 50%;

  /* Animaciones suaves */
  transition: all var(--transicion-normal, 0.3s) ease;
}

/**
 * Estado hover del botón cerrar
 * Efectos visuales de feedback con fondo sutil y escala aumentada
 */
.eventos-modal-cerrar:hover {
  /* Fondo sutil en hover */
  background-color: rgba(0, 0, 0, 0.1);

  /* Escala ligeramente aumentada */
  transform: scale(1.1);

  /* Color distintivo */
  color: var(--naranja);
}

/* ===================================================================
   TEMA OSCURO - ENCABEZADO Y CONTROLES
   =================================================================== */

/**
 * Encabezado del modal en tema oscuro
 * Adaptación de fondo y separadores para tema oscuro
 */
:root[data-tema="oscuro"] .eventos-modal-encabezado {
  /* Fondo oscuro usando variables del sistema */
  background: var(--arcilla-fondo-oscuro);

  /* Separador adaptado para tema oscuro */
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/**
 * Botón cerrar en tema oscuro
 * Color adaptado para contraste en tema oscuro
 */
:root[data-tema="oscuro"] .eventos-modal-cerrar {
  /* Color base para tema oscuro */
  color: var(--crema);
}

/**
 * Estado hover del botón cerrar en tema oscuro
 * Fondo y efectos adaptados para tema oscuro
 */
:root[data-tema="oscuro"] .eventos-modal-cerrar:hover {
  /* Fondo sutil invertido para tema oscuro */
  background-color: rgba(255, 255, 255, 0.1);

  /* Mantiene escala y color naranja */
  transform: scale(1.1);
  color: var(--naranja);
}

/* ===================================================================
   MODAL - CUERPO Y CONTENIDO DE INFORMACIÓN
   =================================================================== */

/**
 * Cuerpo principal del modal
 * Área scrolleable que contiene el contenido principal del modal
 * con padding apropiado y comportamiento de overflow controlado
 */
.eventos-modal-cuerpo {
  /* Espaciado interno */
  padding: var(--espaciado-xl, 24px);

  /* Scroll vertical cuando sea necesario */
  overflow-y: auto;

  /* Flex para ocupar espacio disponible */
  flex: 1;
}

/**
 * Secciones de información dentro del modal
 * Organizan el contenido en bloques lógicos con espaciado apropiado
 * entre secciones para jerarquía visual clara
 */
.eventos-info-seccion {
  /* Espaciado entre secciones */
  margin-bottom: var(--espaciado-xxl, 2rem);
}

/**
 * Última sección de información
 * Reduce el espaciado inferior para evitar espacio excesivo
 */
.eventos-info-seccion:last-of-type {
  /* Espaciado reducido para la última sección */
  margin-bottom: var(--espaciado-md, 1rem);
}

/**
 * Títulos de sección (h3)
 * Estilo distintivo para subtítulos de sección con iconos opcionales
 * y tipografía responsiva optimizada para legibilidad
 */
.eventos-info-seccion h3 {
  /* Color distintivo */
  color: var(--naranja);

  /* Tipografía responsiva */
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  font-weight: 600;

  /* Espaciado */
  margin: 0 0 var(--espaciado-md, 1rem);

  /* Layout para iconos opcionales */
  display: flex;
  align-items: center;
  gap: var(--espaciado-xs, 0.5rem);
}

/**
 * Iconos dentro de títulos de sección
 * Tamaño proporcional al texto para armonía visual
 */
.eventos-info-seccion h3 i {
  /* Tamaño proporcional al texto */
  font-size: 1.1em;
}

/**
 * Listas dentro de secciones de información
 * Reset de estilos de lista para contenido personalizado
 */
.eventos-info-seccion ul {
  /* Reset de estilos de lista */
  list-style: none;
  padding: 0;
  margin: 0;
}

/**
 * Elementos de lista en secciones de información
 * Diseño con bullets personalizados y espaciado optimizado para
 * legibilidad en dispositivos móviles y desktop
 */
.eventos-info-seccion li {
  /* Espaciado entre elementos */
  margin-bottom: var(--espaciado-sm, 0.8rem);

  /* Posicionamiento para bullet personalizado */
  padding-left: var(--espaciado-lg, 1.2rem);
  position: relative;

  /* Legibilidad */
  line-height: 1.5;
  color: var(--texto);
}

/**
 * Bullets personalizados para listas
 * Utiliza el color distintivo del sistema para crear jerarquía visual
 */
.eventos-info-seccion li::before {
  /* Contenido del bullet */
  content: "•";
  color: var(--naranja);
  font-size: 1.2rem;

  /* Posicionamiento absoluto */
  position: absolute;
  left: 0;
}

/**
 * Texto enfatizado en elementos de lista
 * Aplica color distintivo para destacar información importante
 */
.eventos-info-seccion li strong {
  /* Color distintivo para énfasis */
  color: var(--naranja);
  font-weight: 600;
}

/* ===================================================================
   TEMA OSCURO - CONTENIDO DE INFORMACIÓN
   =================================================================== */

/**
 * Elementos de lista en tema oscuro
 * Adaptación de color de texto para tema oscuro manteniendo legibilidad
 */
:root[data-tema="oscuro"] .eventos-info-seccion li {
  /* Color adaptado para tema oscuro */
  color: var(--crema);
}

/* ===================================================================
   SECCIONES ESPECIALES - CANCELACIONES Y NOTAS
   =================================================================== */

/**
 * Sección especial para información de cancelaciones
 * Destaca información crítica sobre políticas de cancelación con
 * fondo distintivo, borde lateral y espaciado interno apropiado
 */
.eventos-cancelaciones {
  /* Fondo distintivo con transparencia */
  background: rgba(255, 107, 53, 0.1);

  /* Espaciado interno */
  padding: var(--espaciado-md, 1rem);

  /* Bordes redondeados usando variables del sistema */
  border-radius: var(--arcilla-radio);

  /* Borde lateral distintivo */
  border-left: 4px solid var(--naranja);
}

/**
 * Nota informativa general
 * Proporciona información adicional en un contenedor destacado con
 * fondo sutil y bordes redondeados para diferenciación visual
 */
.eventos-info-nota {
  /* Fondo sutil usando variables del sistema */
  background: var(--arcilla-fondo);

  /* Espaciado interno */
  padding: var(--espaciado-md, 1rem);

  /* Bordes redondeados */
  border-radius: var(--arcilla-radio);

  /* Espaciado superior */
  margin-top: var(--espaciado-md, 1rem);
}

/**
 * Párrafos dentro de notas informativas
 * Layout horizontal con iconos y texto, optimizado para legibilidad
 * y jerarquía visual clara con espaciado apropiado
 */
.eventos-info-nota p {
  /* Reset de márgenes */
  margin: 0;

  /* Color y estilo de texto */
  color: var(--texto);
  font-style: italic;

  /* Layout horizontal con icono */
  display: flex;
  align-items: flex-start;
  gap: var(--espaciado-xs, 0.5rem);

  /* Legibilidad */
  line-height: 1.5;
}

/**
 * Iconos en notas informativas
 * Posicionamiento y color distintivo para iconos acompañantes
 */
.eventos-info-nota i {
  /* Color distintivo */
  color: var(--naranja);

  /* Posicionamiento superior para alineación con texto */
  margin-top: 0.1rem;

  /* Evita encogimiento en layout flex */
  flex-shrink: 0;
}

/* ===================================================================
   TEMA OSCURO - SECCIONES ESPECIALES
   =================================================================== */

/**
 * Sección de cancelaciones en tema oscuro
 * Intensifica el fondo para mayor contraste en tema oscuro
 */
:root[data-tema="oscuro"] .eventos-cancelaciones {
  /* Fondo más intenso para tema oscuro */
  background: rgba(255, 107, 53, 0.2);
}

/**
 * Nota informativa en tema oscuro
 * Adapta el fondo usando variables del sistema para tema oscuro
 */
:root[data-tema="oscuro"] .eventos-info-nota {
  /* Fondo oscuro usando variables del sistema */
  background: var(--arcilla-fondo-oscuro);
}

/**
 * Párrafos de notas informativas en tema oscuro
 * Adapta color de texto para contraste apropiado
 */
:root[data-tema="oscuro"] .eventos-info-nota p {
  /* Color adaptado para tema oscuro */
  color: var(--crema);
}

/* ===================================================================
   MODAL - PIE Y CONTROLES DE ACCIÓN
   =================================================================== */

/**
 * Pie del modal con controles de acción
 * Sección inferior del modal que contiene botones de acción principales
 * con layout responsivo que se adapta entre móvil y desktop
 */
.eventos-modal-pie {
  /* Layout flex responsivo */
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-md, 1rem);

  /* Espaciado interno */
  padding: var(--espaciado-lg, 20px) var(--espaciado-xl, 24px);

  /* Separador superior */
  border-top: 1px solid rgba(0, 0, 0, 0.1);

  /* Fondo distintivo */
  background: var(--arcilla-fondo);

  /* Centrado de contenido */
  justify-content: center;
}

/* ===================================================================
   TEMA OSCURO - PIE DEL MODAL
   =================================================================== */

/**
 * Pie del modal en tema oscuro
 * Adaptación de fondo y separador para tema oscuro
 */
:root[data-tema="oscuro"] .eventos-modal-pie {
  /* Fondo oscuro usando variables del sistema */
  background: var(--arcilla-fondo-oscuro);

  /* Separador adaptado para tema oscuro */
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* ===================================================================
   RESPONSIVE - PIE DEL MODAL
   =================================================================== */

/**
 * Layout horizontal del pie en pantallas medianas y grandes
 * Cambia a distribución horizontal con mayor espaciado
 */
@media (min-width: 768px) {
  .eventos-modal-pie {
    /* Layout horizontal en pantallas grandes */
    flex-direction: row;
    justify-content: center;
    gap: var(--espaciado-lg, 1.5rem);
  }
}

/* ===================================================================
   CONTROLES DE COMPORTAMIENTO Y INTERACCIÓN
   =================================================================== */

/**
 * Prevención de scroll del body cuando modal está activo
 * Evita scroll del fondo cuando el modal está abierto para
 * mejor experiencia de usuario y prevención de comportamientos extraños
 */
body.modal-abierto {
  /* Elimina scroll del fondo */
  overflow: hidden;
}

/* ===================================================================
   DISEÑO RESPONSIVE - DISPOSITIVOS MÓVILES (MAX 480PX)
   =================================================================== */

/**
 * Adaptaciones para dispositivos móviles pequeños
 * Optimiza el diseño del componente y modal para pantallas de 480px o menos
 * con ajustes de espaciado, tamaños y padding apropiados para touch
 */
@media (max-width: 480px) {

  /**
   * Contenedor principal en móviles
   * Reduce márgenes y padding para aprovechar mejor el espacio disponible
   */
  .eventos-privados {
    /* Márgenes reducidos */
    margin: 5px 5px var(--espacio-grande, 2rem);

    /* Padding interno reducido */
    padding: 15px 10px;
  }

  /**
   * Contenedor del modal en móviles
   * Maximiza el uso del espacio de pantalla disponible
   */
  .eventos-modal-contenedor {
    /* Ancho casi completo */
    width: 95%;

    /* Altura casi completa */
    max-height: 95vh;
  }

  /**
   * Encabezado y pie del modal en móviles
   * Reduce padding para conservar espacio vertical
   */
  .eventos-modal-encabezado,
  .eventos-modal-pie {
    /* Padding reducido para móviles */
    padding: 16px;
  }

  /**
   * Cuerpo del modal en móviles
   * Optimiza el espaciado interno para contenido
   */
  .eventos-modal-cuerpo {
    /* Padding reducido pero suficiente para legibilidad */
    padding: 16px;
  }

  /**
   * Botones en móviles
   * Ajusta dimensiones para interacción touch apropiada
   */
  .eventos-boton {
    /* Ancho mínimo touch-friendly */
    min-width: 140px;

    /* Padding touch-friendly */
    padding: 10px 20px;
  }

  /**
   * Botón cerrar del modal en móviles
   * Mantiene tamaño touch-friendly pero ligeramente reducido
   */
  .eventos-modal-cerrar {
    /* Tamaño de fuente reducido pero legible */
    font-size: 40px;

    /* Dimensiones touch-friendly de 44x44px (estándar móvil) */
    width: 44px;
    height: 44px;
  }
}

/* ===================================================================
   DISEÑO RESPONSIVE - ORIENTACIÓN LANDSCAPE MÓVIL
   =================================================================== */

/**
 * Optimizaciones para móviles en orientación horizontal
 * Maneja la altura limitada cuando el dispositivo está en landscape
 * manteniendo usabilidad y accesibilidad del modal
 */
@media (max-height: 667px) and (orientation: landscape) {

  /**
   * Contenedor del modal en landscape móvil
   * Maximiza el uso del espacio vertical limitado
   */
  .eventos-modal-contenedor {
    /* Ancho máximo para aprovechar espacio horizontal */
    width: 82%;
    max-width: 95vw;

    /* Altura casi completa con mínimo margen */
    max-height: 98vh;
    margin: 1vh auto;
  }

  /**
   * Contenido del modal en landscape móvil
   * Ajusta la altura máxima para coincidir con el contenedor
   */
  .eventos-modal-contenido {
    /* Altura ajustada para landscape */
    max-height: 98vh;
  }

  /**
   * Encabezado del modal en landscape móvil
   * Reduce padding vertical para conservar espacio
   */
  .eventos-modal-encabezado {
    /* Padding reducido para altura limitada */
    padding: 12px 16px;
    min-height: auto;
  }

  /**
   * Título del modal en landscape móvil
   * Ajusta tipografía y márgenes para espacio limitado
   */
  .eventos-modal-encabezado h2 {
    /* Tipografía ligeramente reducida */
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);

    /* Márgenes mínimos */
    margin: 0 0 0 0.5rem;
  }

  /**
   * Cuerpo del modal en landscape móvil
   * Optimiza el área de contenido scrolleable
   */
  .eventos-modal-cuerpo {
    /* Padding reducido */
    padding: 12px 16px;

    /* Asegura scroll vertical */
    overflow-y: auto;
    flex: 1;
  }

  /**
   * Secciones de información en landscape móvil
   * Reduce espaciado entre secciones para eficiencia de espacio
   */
  .eventos-info-seccion {
    /* Espaciado reducido entre secciones */
    margin-bottom: var(--espaciado-md, 1rem);
  }

  /**
   * Última sección en landscape móvil
   * Espaciado mínimo para la última sección
   */
  .eventos-info-seccion:last-of-type {
    /* Espaciado mínimo */
    margin-bottom: var(--espaciado-xs, 0.5rem);
  }

  /**
   * Títulos de sección en landscape móvil
   * Tipografía compacta para conservar espacio vertical
   */
  .eventos-info-seccion h3 {
    /* Tipografía más compacta */
    font-size: clamp(1rem, 2vw, 1.1rem);

    /* Margen inferior reducido */
    margin-bottom: var(--espaciado-xs, 0.5rem);
  }

  /**
   * Elementos de lista en landscape móvil
   * Espaciado y altura de línea optimizados para espacio limitado
   */
  .eventos-info-seccion li {
    /* Espaciado reducido entre elementos */
    margin-bottom: 0.4rem;

    /* Altura de línea compacta pero legible */
    line-height: 1.3;
  }

  /**
   * Pie del modal en landscape móvil
   * Padding y espaciado optimizados para altura limitada
   */
  .eventos-modal-pie {
    /* Padding reducido */
    padding: 12px 16px;

    /* Gap reducido entre botones */
    gap: var(--espaciado-sm, 0.8rem);
  }
}

/* ===================================================================
   DISEÑO RESPONSIVE - PANTALLAS MUY PEQUEÑAS EN LANDSCAPE
   =================================================================== */

/**
 * Optimizaciones extremas para dispositivos con altura muy limitada
 * Maneja casos extremos de pantallas muy pequeñas en orientación landscape
 * (como teléfonos antiguos o ventanas de navegador muy pequeñas)
 */
@media (max-height: 450px) and (orientation: landscape) {

  /**
   * Contenedor del modal en pantallas muy pequeñas
   * Maximiza absolutamente el espacio disponible
   */
  .eventos-modal-contenedor {
    /* Altura prácticamente completa */
    max-height: 99vh;

    /* Margen mínimo */
    margin: 0.5vh auto;
  }

  /**
   * Encabezado y pie del modal en pantallas muy pequeñas
   * Padding mínimo absoluto para conservar cada pixel de altura
   */
  .eventos-modal-encabezado,
  .eventos-modal-pie {
    /* Padding ultra-reducido */
    padding: 8px 12px;
  }

  /**
   * Cuerpo del modal en pantallas muy pequeñas
   * Espaciado mínimo pero manteniendo legibilidad
   */
  .eventos-modal-cuerpo {
    /* Padding ultra-reducido */
    padding: 8px 12px;
  }

  /**
   * Secciones de información en pantallas muy pequeñas
   * Espaciado ultra-compacto entre secciones
   */
  .eventos-info-seccion {
    /* Espaciado ultra-reducido */
    margin-bottom: var(--espaciado-sm, 0.8rem);
  }

  /**
   * Títulos de sección en pantallas muy pequeñas
   * Margen mínimo para conservar espacio vertical crítico
   */
  .eventos-info-seccion h3 {
    /* Margen ultra-reducido */
    margin-bottom: 0.3rem;
  }

  /**
   * Elementos de lista en pantallas muy pequeñas
   * Espaciado y tipografía ultra-compactos pero aún legibles
   */
  .eventos-info-seccion li {
    /* Espaciado ultra-reducido */
    margin-bottom: 0.3rem;

    /* Tipografía ligeramente reducida */
    font-size: 0.9rem;
  }
}