/**
 * @file politica-modal.css
 * @description Archivo de estilos para el componente web personalizado PoliticaModal.
 *              Proporciona estilos completos para modal fullscreen con efectos claymorphism,
 *              estructura responsive con contenido scrolleable, efectos de apertura/cierre suaves,
 *              sistema de temas claro/oscuro, tipografía optimizada para lectura de textos legales,
 *              botones con micro-interacciones claymorphism, avisos de consentimiento destacados,
 *              enlaces interactivos para políticas y adaptación móvil touch-friendly.
 * @author Enri Rego
 * @version 1.0.0
 * @date 30 de Mayo 2025
 * @since 1.0.0
 * @requires scripts/components/politica-modal.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ==========================================================================
   CONFIGURACIÓN BASE DEL COMPONENTE MODAL
   ========================================================================== */

/**
 * Elemento principal del modal de políticas
 * Overlay fullscreen con fondo semi-transparente que cubre toda la ventana
 * del navegador. Estado inicial oculto con transición suave de opacidad
 * para efectos de aparición/desaparición elegantes
 */

/* Estado inicial oculto del modal */
politica-modal {
  /* Posicionamiento fullscreen fijo */
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Z-index alto para aparecer sobre todo el contenido */
  z-index: 1000;

  /* Fondo semi-transparente oscuro para efecto overlay */
  background-color: rgba(0, 0, 0, 0.7);

  /* Prevenir scroll interno del overlay */
  overflow: hidden;

  /* Transición suave para efectos de aparición */
  transition: opacity 0.3s ease;
  opacity: 0;
}

/**
 * Estado visible del modal
 * Se activa cuando el modal está abierto, cambiando a display flex
 * para centrar el contenido y activando la opacidad completa
 * para mostrar el overlay y contenido del modal
 */

/* Modal visible con centrado automático */
politica-modal.visible {
  /* Cambiar a flexbox para centrado automático */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Opacidad completa para mostrar el modal */
  opacity: 1;
}

/* ==========================================================================
   CONTENEDOR PRINCIPAL CON EFECTOS CLAYMORPHISM
   ========================================================================== */

/**
 * Contenedor principal del modal
 * Ventana modal centrada con efectos claymorphism, dimensiones responsive
 * y altura máxima controlada para evitar desbordamiento de contenido.
 * Bordes redondeados y sombras elevadas para efecto de profundidad
 */

/* Contenedor modal con efectos claymorphism */
.modal-contenedor {
  /* Dimensiones responsive */
  width: 90%;
  max-width: 800px;
  max-height: 90vh;

  /* Efectos visuales claymorphism */
  background-color: var(--arcilla-fondo);
  border-radius: var(--arcilla-radio);
  box-shadow: var(--arcilla-elevado-flotante);

  /* Prevenir contenido desbordado */
  overflow: hidden;
}

/**
 * Adaptación del contenedor para tema oscuro
 * Cambio de fondo y color de texto para mantener legibilidad
 * y coherencia visual en el modo oscuro del sistema
 */

/* Tema oscuro para el contenedor modal */
:root[data-tema="oscuro"] .modal-contenedor {
  /* Fondo oscuro semi-transparente */
  background-color: var(--gris-semi-obscuro);

  /* Texto claro para contraste */
  color: var(--crema);
}

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

/**
 * Contenedor de datos del modal
 * Layout flexbox vertical que organiza encabezado, cuerpo y pie
 * del modal con altura máxima controlada para scroll interno
 * cuando el contenido excede la altura disponible
 */

/* Layout vertical para estructura del modal */
.modal-datos {
  /* Flexbox vertical para organizar secciones */
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 90vh;
}

/* ==========================================================================
   ENCABEZADO DEL MODAL CON TÍTULO Y BOTÓN CERRAR
   ========================================================================== */

/**
 * Encabezado del modal
 * Barra superior que contiene el título del modal y el botón de cerrar.
 * Layout flexbox horizontal con espaciado justificado para separar
 * elementos. Borde inferior sutil para separación visual del contenido
 */

/* Barra de encabezado con título y botón cerrar */
.modal-encabezado {
  /* Layout horizontal justificado */
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Espaciado interno y borde inferior */
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/**
 * Adaptación del encabezado para tema oscuro
 * Borde inferior con transparencia clara para mantener
 * la separación visual en el modo oscuro
 */

/* Encabezado en tema oscuro */
:root[data-tema="oscuro"] .modal-encabezado {
  /* Borde claro semi-transparente */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/**
 * Título principal del modal
 * Elemento h2 estilizado con color de marca naranja,
 * tipografía semi-bold y tamaño optimizado para jerarquía visual.
 * Sin márgenes para control preciso del espaciado
 */

/* Título del modal con color de marca */
.modal-encabezado h2 {
  /* Resetear márgenes para control preciso */
  margin: 0;

  /* Tipografía jerarquizada */
  font-size: 1.4rem;
  font-weight: 600;

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

/**
 * Botón cerrar (X) del modal
 * Botón circular grande con efecto hover para cerrar el modal.
 * Diseño touch-friendly con área de click generosa y efectos
 * de hover/escala. Sin bordes ni fondo por defecto para diseño limpio
 */

/* Botón X circular para cerrar modal */
.modal-cerrar {
  /* Resetear estilos de botón por defecto */
  background: none;
  border: none;

  /* Tipografía grande y bold para la X */
  font-size: 50px;
  font-weight: bold;
  color: var(--texto);

  /* Cursor pointer y interactividad */
  cursor: pointer;
  user-select: none;

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

  /* Centrado del contenido y forma circular */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  /* Transición suave para efectos hover */
  transition: all 0.3s ease;
}

/**
 * Adaptación del botón cerrar para tema oscuro
 * Color de texto claro para mantener visibilidad
 * y contraste en el modo oscuro
 */

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

/**
 * Efectos hover del botón cerrar
 * Micro-interacciones que incluyen fondo semi-transparente,
 * escala aumentada y cambio de color para retroalimentación
 * visual inmediata al usuario
 */

/* Efectos hover del botón cerrar */
.modal-cerrar:hover {
  /* Fondo semi-transparente en hover */
  background-color: rgba(0, 0, 0, 0.1);

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

  /* Color de marca en hover */
  color: var(--naranja);
}

/* ==========================================================================
   CUERPO DEL MODAL CON CONTENIDO SCROLLEABLE
   ========================================================================== */

/**
 * Área principal de contenido del modal
 * Sección scrolleable que contiene todo el texto de políticas.
 * Flex: 1 para ocupar todo el espacio disponible entre encabezado
 * y pie, con scroll vertical automático cuando el contenido excede la altura
 */

/* Cuerpo scrolleable del modal */
.modal-cuerpo {
  /* Espaciado interno generoso para lectura */
  padding: 20px;

  /* Scroll vertical automático cuando es necesario */
  overflow-y: auto;

  /* Ocupar todo el espacio disponible */
  flex: 1;
}

/**
 * Títulos de sección dentro del modal
 * Elementos h3 y h4 estilizados con color de marca naranja
 * para crear jerarquía visual y facilitar el escaneo del contenido.
 * Espaciado optimizado para separación de secciones
 */

/* Títulos de sección con color de marca */
.modal-cuerpo h3,
.modal-cuerpo h4 {
  /* Color de marca para jerarquía visual */
  color: var(--naranja);

  /* Espaciado para separación de contenido */
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/**
 * Párrafos de contenido
 * Texto optimizado para lectura de documentos legales largos.
 * Altura de línea aumentada para mejor legibilidad y texto
 * justificado para apariencia profesional
 */

/* Párrafos optimizados para lectura */
.modal-cuerpo p {
  /* Espaciado vertical controlado */
  margin: 0.5em 0;

  /* Altura de línea para legibilidad mejorada */
  line-height: 1.5;

  /* Texto justificado para apariencia profesional */
  text-align: justify;
}

/* ==========================================================================
   LISTAS Y VIÑETAS ESTILIZADAS
   ========================================================================== */

/**
 * Listas no ordenadas dentro del modal
 * Configuración de viñetas y espaciado para listas de información
 * legal. Posicionamiento externo de viñetas y estilo de disco
 * estándar para máxima legibilidad
 */

/* Listas con viñetas estilizadas */
.modal-cuerpo ul {
  /* Espaciado izquierdo para viñetas */
  padding-left: 1.2em;
  margin: 0.5em 0;

  /* Configuración de viñetas */
  list-style-position: outside;
  list-style-type: disc;
}

/**
 * Elementos de lista individuales
 * Espaciado y formato optimizado para elementos de lista
 * con altura de línea apropiada para lectura de contenido legal.
 * Texto justificado para consistencia con párrafos
 */

/* Items de lista con espaciado optimizado */
.modal-cuerpo ul li {
  /* Espaciado entre elementos */
  margin-bottom: 0.5em;

  /* Altura de línea para legibilidad */
  line-height: 1.4;

  /* Texto justificado para consistencia */
  text-align: justify;
}

/**
 * Viñetas de lista estilizadas
 * Viñetas con color de marca naranja y tamaño ligeramente
 * aumentado para crear consistencia visual con el resto
 * del diseño del componente
 */

/* Viñetas con color de marca */
.modal-cuerpo ul li::marker {
  /* Color de marca para viñetas */
  color: var(--naranja);

  /* Tamaño ligeramente aumentado */
  font-size: 1.2em;
}

/* ==========================================================================
   PIE DEL MODAL CON BOTONES DE ACCIÓN
   ========================================================================== */

/**
 * Pie del modal con botones
 * Sección inferior que contiene botones de acción del modal.
 * Layout flexbox justificado a la derecha con separación entre
 * botones y borde superior para separación visual del contenido
 */

/* Pie con botones de acción */
.modal-pie {
  /* Layout horizontal justificado a la derecha */
  display: flex;
  justify-content: flex-end;

  /* Espaciado interno y borde superior */
  padding: 16px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);

  /* Separación entre botones */
  gap: 10px;
}

/**
 * Adaptación del pie para tema oscuro
 * Borde superior con transparencia clara para mantener
 * la separación visual en el modo oscuro
 */

/* Pie del modal en tema oscuro */
:root[data-tema="oscuro"] .modal-pie {
  /* Borde claro semi-transparente */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   BOTONES CON EFECTOS CLAYMORPHISM
   ========================================================================== */

/**
 * Estilo base para botones del modal
 * Configuración base común para todos los botones del modal
 * con tipografía Poppins, espaciado touch-friendly y transiciones
 * suaves para micro-interacciones
 */

/* Estilo base para botones */
.modal-boton {
  /* Espaciado interno touch-friendly */
  padding: 8px 16px;
  border-radius: 4px;

  /* Tipografía del sistema */
  font-family: "Poppins", sans-serif;
  font-weight: 500;

  /* Interactividad y transiciones */
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  border: none;
}

/**
 * Botón principal de cerrar modal
 * Botón destacado con color de marca naranja y efectos claymorphism.
 * Sombra elevada para profundidad visual y transiciones suaves
 * para micro-interacciones responsive
 */

/* Botón principal con efectos claymorphism */
.modal-boton-cerrar {
  /* Colores de marca */
  background-color: var(--naranja);
  color: var(--blanco);

  /* Efectos claymorphism */
  box-shadow: var(--arcilla-elevado-boton);
  border-radius: var(--arcilla-radio);

  /* Transición suave para efectos */
  transition: all 0.2s ease;
}

/**
 * Adaptación del botón cerrar para tema oscuro
 * Mantiene el color blanco del texto para máximo contraste
 * sobre el fondo naranja en modo oscuro
 */

/* Botón cerrar en tema oscuro */
:root[data-tema="oscuro"] .modal-boton-cerrar {
  /* Mantener texto blanco para contraste */
  color: var(--blanco);
}

/**
 * Efectos hover del botón cerrar
 * Micro-interacciones claymorphism con elevación y sombras complejas.
 * Transformación de elevación para simular botón físico presionado
 * con sombras interiores y exteriores graduales
 */

/* Efectos hover con elevación claymorphism */
.modal-boton-cerrar:hover {
  /* Elevación del botón en hover */
  transform: translateY(-2px);

  /* Sombras complejas para efecto claymorphism */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/**
 * Efectos active (presionado) del botón cerrar
 * Estado de botón presionado con sombras invertidas para simular
 * depresión física del botón. Sombras interiores más pronunciadas
 * para efecto táctil realista
 */

/* Estado presionado del botón */
.modal-boton-cerrar:active {
  /* Retornar a posición base */
  transform: translateY(0);

  /* Sombras invertidas para efecto presionado */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/**
 * Efectos hover genéricos para botones
 * Elevación sutil para cualquier botón del modal que no tenga
 * efectos específicos definidos. Movimiento vertical para
 * retroalimentación táctil
 */

/* Hover genérico para otros botones */
.modal-boton:hover {
  /* Elevación sutil */
  transform: translateY(-2px);
}

/* ==========================================================================
   CONTROL DE SCROLL GLOBAL CUANDO EL MODAL ESTÁ ABIERTO
   ========================================================================== */

/**
 * Prevención de scroll del body con modal abierto
 * Clase aplicada al body cuando el modal está visible para prevenir
 * el scroll de la página de fondo y mantener al usuario enfocado
 * en el contenido del modal
 */

/* Bloquear scroll del body con modal abierto */
body.modal-abierto {
  /* Prevenir scroll de fondo */
  overflow: hidden;
}

/* ==========================================================================
   AVISOS DE CONSENTIMIENTO DESTACADOS
   ========================================================================== */

/**
 * Cajas de aviso de consentimiento
 * Bloques destacados para información importante sobre consentimiento
 * y políticas. Fondo naranja semi-transparente con borde lateral
 * para máxima visibilidad y diferenciación del resto del contenido
 */

/* Caja de aviso destacada */
.aviso-consentimiento {
  /* Espaciado y posicionamiento */
  margin: 1rem 0;
  padding: 0.8rem 1rem;

  /* Efectos visuales */
  border-radius: var(--arcilla-radio);
  background-color: rgba(255, 156, 49, 0.1);
  border-left: 4px solid var(--naranja);
}

/**
 * Adaptación del aviso para tema oscuro
 * Fondo naranja más intenso para mantener visibilidad
 * y contraste apropiado en el modo oscuro
 */

/* Aviso de consentimiento en tema oscuro */
:root[data-tema="oscuro"] .aviso-consentimiento {
  /* Fondo más intenso para contraste en tema oscuro */
  background-color: rgba(255, 156, 49, 0.2);
}

/**
 * Texto dentro de avisos de consentimiento
 * Párrafos con margen resetedo y tamaño ligeramente reducido
 * para contenido de aviso. Importante: !important para sobrescribir
 * estilos de párrafos generales del modal
 */

/* Texto de aviso con márgenes resetseados */
.aviso-consentimiento p {
  /* Resetear márgenes completamente */
  margin: 0 !important;

  /* Tamaño ligeramente reducido para avisos */
  font-size: 0.95rem;
}

/* ==========================================================================
   ENLACES INTERACTIVOS PARA POLÍTICAS
   ========================================================================== */

/**
 * Enlaces dentro del contenido de políticas
 * Estilizado específico para enlaces en textos legales con color
 * de marca, borde inferior punteado y efectos hover para
 * máxima visibilidad y usabilidad
 */

/* Enlaces en contenido de políticas */
.politica-enlace {
  /* Color y decoración base */
  color: var(--naranja);
  text-decoration: none;
  font-weight: 500;

  /* Borde inferior punteado distintivo */
  border-bottom: 1px dotted var(--naranja);

  /* Transición suave para efectos hover */
  transition: all 0.2s ease;
}

/**
 * Efectos hover de enlaces de políticas
 * Cambio a color naranja más oscuro con borde sólido
 * para retroalimentación visual clara al usuario
 * sobre la interactividad del enlace
 */

/* Efectos hover para enlaces */
.politica-enlace:hover {
  /* Color naranja más oscuro en hover */
  color: var(--naranja-oscuro, #E55A28);

  /* Cambiar a borde sólido en hover */
  border-bottom: 1px solid var(--naranja-oscuro, #E55A28);
}

/* ==========================================================================
   ADAPTACIONES RESPONSIVE PARA DISPOSITIVOS MÓVILES
   ========================================================================== */

/**
 * Adaptaciones para pantallas móviles
 * Optimizaciones de espaciado, dimensiones y usabilidad específicas
 * para dispositivos móviles con pantallas de 600px o menos.
 * Ajustes touch-friendly y reducción de espaciado para mejor
 * aprovechamiento del espacio limitado en móviles
 */

/* Optimizaciones para móviles */
@media (max-width: 600px) {
  /**
   * Contenedor modal optimizado para móvil
   * Incrementa el ancho y altura máxima para mejor aprovechamiento
   * del espacio disponible en pantallas pequeñas
   */

  /* Contenedor con más espacio en móvil */
  .modal-contenedor {
    /* Mayor aprovechamiento del espacio móvil */
    width: 95%;
    max-height: 95vh;
  }

  /**
   * Encabezado con espaciado reducido
   * Padding optimizado para pantallas táctiles sin sacrificar
   * la usabilidad de los elementos interactivos
   */

  /* Encabezado compacto para móvil */
  .modal-encabezado {
    /* Espaciado reducido para móvil */
    padding: 12px 15px;
  }

  /**
   * Pie del modal con espaciado reducido
   * Misma optimización de espaciado que el encabezado
   * para consistencia visual en dispositivos móviles
   */

  /* Pie compacto para móvil */
  .modal-pie {
    /* Espaciado reducido para móvil */
    padding: 12px 15px;
  }

  /**
   * Avisos de consentimiento optimizados
   * Padding reducido para avisos en pantallas pequeñas
   * sin comprometer la legibilidad del contenido
   */

  /* Avisos compactos para móvil */
  .aviso-consentimiento {
    /* Padding optimizado para móvil */
    padding: 0.6rem 0.8rem;
  }

  /**
   * Texto de avisos con tamaño reducido
   * Reducción adicional del tamaño de fuente específicamente
   * para avisos en dispositivos móviles para mejor legibilidad
   */

  /* Texto de aviso más pequeño en móvil */
  .aviso-consentimiento p {
    /* Tamaño reducido para pantallas pequeñas */
    font-size: 0.85rem;
  }

  /**
   * Botón cerrar optimizado para touch
   * Reducción del tamaño visual pero manteniendo el área de toque
   * de 44px mínimo recomendado para interfaces táctiles
   */

  /* Botón cerrar touch-friendly pero compacto */
  .modal-cerrar {
    /* Tamaño visual reducido pero área touch apropiada */
    font-size: 40px;
    width: 44px;
    height: 44px;
  }
}