/**
 * @file pie-pagina.css
 * @description Archivo de estilos para el componente web personalizado PiePagina.
 *              Proporciona diseño responsive adaptativo con versiones desktop y móvil,
 *              efectos claymorphism avanzados, acordeón interactivo para dispositivos móviles,
 *              sistema de navegación estructurado por secciones, integración completa de temas,
 *              animaciones suaves de hover y transiciones, optimización táctil para móviles,
 *              espaciado consistente con variables CSS del sistema, y tipografía escalable
 *              con soporte completo para dark mode y light mode.
 * @author Enri Rego
 * @version 1.0.0
 * @date 30 de Mayo 2025 * @since 1.0.0
 * @requires scripts/components/pie-pagina.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ==========================================================================
   CONFIGURACIÓN BASE DEL COMPONENTE PIE-PAGINA
   ========================================================================== */

/**
 * Contenedor principal del componente pie-pagina
 * Establece la estructura base con tipografía Poppins, comportamiento de bloque
 * y transiciones suaves para cambios de tema. Incluye configuración responsive
 * y color de texto adaptativo según el tema activo
 */
pie-pagina {
  /* Tipografía y estructura base */
  font-family: "Poppins", sans-serif;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;

  /* Transiciones suaves para cambios de tema */
  transition: background-color 0.3s ease, color 0.3s ease;

  /* Color de texto del sistema */
  color: var(--texto);

  /* Fondo base del sistema */
  background-color: var(--blanco);
}

/* ==========================================================================
   EFECTOS CLAYMORPHISM Y TEMAS
   ========================================================================== */

/**
 * Tema claro - Efectos de sombra sutiles
 * Implementa sombras claymorphism suaves para elevación visual sin ser intrusivos,
 * con intensificación en hover para mejorar la interactividad
 */
:root[data-tema="claro"] pie-pagina {
  /* Sombra base claymorphism sutil */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
}

/**
 * Estado hover en tema claro
 * Intensifica las sombras para crear sensación de elevación al interactuar
 */
:root[data-tema="claro"] pie-pagina:hover {
  /* Sombra hover claymorphism elevada */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.12);
}

/**
 * Tema oscuro con efectos intensificados
 * Utiliza colores del sistema y sombras más profundas para crear contraste
 * efectivo en modo oscuro manteniendo la legibilidad
 */
:root[data-tema="oscuro"] pie-pagina {
  /* Color de texto del sistema para tema oscuro */
  color: var(--crema);

  /* Sombras intensificadas para tema oscuro */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.3);
}

.pie-pagina-contenedor {
  width: 100%;
  max-width: var(--ancho-maximo, 1200px);
  margin: 0 auto;
  padding: 0 var(--margen-contenedor, 20px);
}

/* ==========================================================================
   VERSIÓN COMPLETA - DISEÑO DESKTOP Y TABLET
   ========================================================================== */

/**
 * Contenedor principal de las secciones del pie de página
 * Layout flexbox que distribuye uniformemente las secciones de navegación
 * con espaciado responsivo y comportamiento adaptativo para diferentes pantallas
 */
.pie-pagina-secciones {
  /* Layout principal flexbox */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;

  /* Espaciado superior y entre elementos */
  padding-top: var(--espacio-medio, 1rem);
  gap: var(--espacio-grande, 2rem);
}

/**
 * Secciones individuales del pie de página
 * Cada sección tiene flexibilidad para adaptarse al contenido disponible
 * con un ancho mínimo garantizado para legibilidad en pantallas pequeñas
 */
.pie-pagina-seccion {
  /* Flexibilidad y dimensiones mínimas */
  flex: 1;
  min-width: 200px;

  /* Espaciado inferior */
  margin-bottom: var(--espacio-medio, 1rem);
}

/**
 * Títulos de las secciones del pie de página
 * Tipografía destacada con color naranja del sistema y línea decorativa
 * que refuerza la jerarquía visual y la identidad de marca
 */
.pie-pagina-seccion h3 {
  /* Tipografía y peso */
  font-size: var(--texto-base, 1rem);
  font-weight: 600;

  /* Posicionamiento para línea decorativa */
  position: relative;
  display: inline-block;

  /* Espaciado y color del sistema */
  margin-bottom: var(--espacio-chico, 0.5rem);
  color: var(--naranja);
}

/**
 * Línea decorativa bajo los títulos de sección
 * Elemento pseudo que añade énfasis visual con color naranja del sistema
 */
.pie-pagina-seccion h3:after {
  /* Posicionamiento absoluto */
  position: absolute;
  bottom: -3px;
  left: 0;

  /* Dimensiones de la línea */
  width: 40px;
  height: 2px;
  content: "";

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

/**
 * Lista de navegación del pie de página
 * Lista limpia sin estilos por defecto para máxima flexibilidad visual
 */
.pie-pagina-navegacion ul {
  /* Reset completo de estilos de lista */
  margin: 0;
  padding: 0;
  list-style: none;
}

/**
 * Elementos individuales de la lista de navegación
 * Espaciado vertical consistente entre opciones de navegación
 */
.pie-pagina-navegacion ul li {
  /* Espaciado entre elementos */
  margin-bottom: var(--espacio-chico, 0.5rem);
}

/**
 * Enlaces de navegación del pie de página
 * Estilo base con transiciones suaves y color del sistema
 */
.pie-pagina-navegacion ul li a {
  /* Layout y tipografía */
  display: inline-block;
  text-decoration: none;

  /* Transición suave */
  transition: color 0.2s ease;

  /* Color del sistema */
  color: var(--texto);
}

/**
 * Enlaces de navegación en tema oscuro
 * Color crema del sistema para contraste apropiado en modo oscuro
 */
:root[data-tema="oscuro"] .pie-pagina-navegacion ul li a {
  /* Color del sistema para tema oscuro */
  color: var(--crema);
}

/**
 * Estado hover de enlaces de navegación
 * Desplazamiento sutil y cambio de color para feedback visual
 */
.pie-pagina-navegacion ul li a:hover {
  /* Transformación y color hover */
  transform: translateX(3px);
  color: var(--naranja);
}

/**
 * Sección de información de contacto
 * Formato de dirección postal con estilo normal y línea de altura optimizada
 */
.pie-pagina-contacto address {
  /* Reset de estilo itálico por defecto */
  font-style: normal;

  /* Línea de altura para legibilidad */
  line-height: 1.5;
}

/**
 * Párrafos dentro de la dirección de contacto
 * Layout flexbox centrado con iconos alineados y espaciado vertical
 */
.pie-pagina-contacto address p {
  /* Layout flexbox */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Espaciado entre párrafos */
  margin-bottom: var(--espacio-chico, 0.5rem);
}

/**
 * Iconos en la sección de contacto
 * Dimensiones fijas con espaciado y color naranja del sistema
 */
.pie-pagina-contacto address i {
  /* Dimensiones del icono */
  width: 16px;

  /* Espaciado y color del sistema */
  margin-right: 8px;
  color: var(--naranja);
}

/**
 * Párrafos de la sección de horario
 * Línea de altura optimizada y espaciado vertical consistente
 */
.pie-pagina-horario p {
  /* Legibilidad y espaciado */
  line-height: 1.5;
  margin-bottom: var(--espacio-chico, 0.5rem);
}

/**
 * Contenido personalizado del pie de página
 * Tipografía reducida con bordes superiores e inferiores para separación visual
 */
.pie-pagina-personalizado {
  /* Tipografía reducida */
  font-size: var(--texto-chico, 0.875rem);

  /* Espaciado y bordes de separación */
  padding: var(--espacio-chico, 0.5rem) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/**
 * Contenido personalizado en tema oscuro
 * Bordes con transparencia blanca para contraste apropiado
 */
:root[data-tema="oscuro"] .pie-pagina-personalizado {
  /* Bordes adaptados para tema oscuro */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   SECCIÓN INFERIOR DEL PIE DE PÁGINA - DERECHOS Y POLÍTICAS
   ========================================================================== */

/**
 * Parte inferior del pie de página con información legal
 * Layout flexbox adaptativo que distribuye derechos, diseñador y políticas
 * con comportamiento responsive para diferentes tamaños de pantalla
 */
.pie-pagina-inferior {
  /* Tipografía reducida */
  font-size: var(--texto-chico, 0.875rem);

  /* Layout flexbox adaptativo */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;

  /* Espaciado vertical */
  padding: var(--espacio-chico, 0.5rem) 0;
}

/**
 * Elementos de información legal y derechos
 * Espaciado uniforme y alineación centrada para elementos principales
 */
.pie-pagina-derechos,
.pie-pagina-disenador,
.pie-pagina-politicas {
  /* Espaciado y alineación */
  margin: 0.25rem 0;
  text-align: center;
}

/**
 * Enlaces del diseñador y políticas
 * Color naranja del sistema con transiciones suaves para consistencia visual
 */
.pie-pagina-disenador a,
.pie-pagina-politicas a {
  /* Transición y color del sistema */
  transition: color 0.2s ease;
  text-decoration: none;
  color: var(--naranja);
}

/**
 * Estado hover de enlaces legales
 * Subrayado para indicar interactividad y mejorar accesibilidad
 */
.pie-pagina-disenador a:hover,
.pie-pagina-politicas a:hover {
  /* Efecto hover */
  text-decoration: underline;
}

/**
 * Contenedor de enlaces de políticas
 * Layout flexbox con espaciado uniforme entre enlaces
 */
.pie-pagina-politicas {
  /* Layout con espaciado */
  display: flex;
  gap: 15px;
}

/* ==========================================================================
   VERSIÓN COMPACTA MÓVIL - SISTEMA DE ACORDEÓN INTERACTIVO
   ========================================================================== */

/**
 * Contenedor principal de la versión compacta móvil
 * Tipografía reducida optimizada para dispositivos móviles
 */
.pie-pagina-compacto {
  /* Tipografía móvil optimizada */
  font-size: var(--texto-chico, 0.875rem);
}

/**
 * Elementos individuales del acordeón móvil
 * Separadores visuales con bordes adaptativos según tema
 */
.pie-pagina-accordion-item {
  /* Borde separador */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/**
 * Elementos del acordeón en tema oscuro
 * Borde con transparencia blanca para contraste apropiado
 */
:root[data-tema="oscuro"] .pie-pagina-accordion-item {
  /* Borde adaptado para tema oscuro */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/**
 * Botones activadores del acordeón móvil
 * Layout flexbox con cursor pointer y herencia de estilos del tema
 */
.pie-pagina-accordion-boton {
  /* Layout flexbox */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  /* Espaciado y cursor */
  padding: 0.75rem 0;
  cursor: pointer;

  /* Alineación y herencia de tema */
  text-align: left;
  color: inherit;

  /* Reset de botón */
  border: none;
  background: none;
}

/**
 * Títulos dentro de los botones del acordeón
 * Tipografía destacada con color naranja del sistema
 */
.pie-pagina-accordion-boton h3 {
  /* Tipografía y peso */
  font-size: var(--texto-base, 1rem);
  font-weight: 600;
  margin: 0;

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

/**
 * Iconos indicadores del estado del acordeón
 * Transición rotacional suave para feedback visual del estado
 */
.pie-pagina-accordion-boton i {
  /* Transición de rotación */
  transition: transform 0.3s ease;

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

/**
 * Estado activo del icono del acordeón
 * Rotación de 180 grados para indicar estado expandido
 */
.pie-pagina-accordion-boton.activo i {
  /* Rotación para estado activo */
  transform: rotate(180deg);
}

/**
 * Contenido desplegable del acordeón
 * Sistema de altura máxima con transiciones suaves y padding adaptativo
 */
.pie-pagina-accordion-contenido {
  /* Control de desbordamiento */
  overflow: hidden;
  max-height: 0;

  /* Espaciado y transiciones */
  padding: 0 1rem;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

/**
 * Estado activo del contenido del acordeón
 * Altura máxima expandida con padding para visibilidad completa
 */
.pie-pagina-accordion-contenido.activo {
  /* Altura expandida y espaciado */
  max-height: 300px;
  padding: 0.5rem 1rem 1rem;
}

/* Parte inferior compacta */
.pie-pagina-inferior-compacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-medio, 1rem) 0;
  text-align: center;
  gap: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

:root[data-tema="oscuro"] .pie-pagina-inferior-compacto {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.pie-pagina-inferior-compacto p {
  margin: 0;
}

/* Diseñador en versión móvil */
.pie-pagina-disenador-compacto {
  margin: 0.25rem 0;
}

.pie-pagina-disenador-compacto a {
  color: var(--naranja);
  text-decoration: none;
  font-weight: 500;
}

.pie-pagina-politicas-compacto {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  gap: 15px;
}

.pie-pagina-politicas-compacto a {
  text-decoration: none;
  color: var(--naranja);
}

/* Adaptaciones para tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .pie-pagina-secciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .pie-pagina-inferior {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .pie-pagina-derechos {
    text-align: left;
  }

  .pie-pagina-disenador {
    text-align: right;
  }

  .pie-pagina-politicas {
    justify-content: center;
    grid-column: span 2;
  }
}

/* Adaptaciones para pantallas más grandes */
@media (min-width: 992px) {
  .pie-pagina-secciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: var(--espacio-grande, 2rem) 0;
  }

  .pie-pagina-seccion {
    margin-bottom: 0;
  }

  .pie-pagina-inferior {
    display: grid;
    padding: var(--espacio-chico, 0.5rem) 0;
    grid-template-columns: 1fr auto 1fr;
  }

  .pie-pagina-derechos {
    text-align: left;
  }

  .pie-pagina-disenador {
    text-align: center;
  }

  .pie-pagina-politicas {
    justify-content: flex-end;
    text-align: right;
  }
}

.pie-pagina-accordion .pie-pagina-accordion-contenido ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie-pagina-accordion .pie-pagina-accordion-contenido ul li {
  margin: 8px 0;
}

.pie-pagina-accordion .pie-pagina-accordion-contenido ul li a {
  color: var(--texto);
  text-decoration: none;
  display: block;
  padding: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

:root[data-tema="oscuro"] .pie-pagina-accordion .pie-pagina-accordion-contenido ul li a {
  color: var(--crema);
}

.pie-pagina-accordion .pie-pagina-accordion-contenido ul li a:hover {
  color: var(--naranja);
  transform: translateX(5px);
}

/* Fijar comportamiento touch para enlaces en mobile */
@media (max-width: 767px) {
  .pie-pagina-accordion .pie-pagina-accordion-contenido ul li a {
    padding: 0;
    /* Área táctil más grande */
    font-size: 16px;
    /* Tamaño de texto más legible */
  }

  /* Espacio entre elementos de navegación en mobile */
  .pie-pagina-accordion .pie-pagina-accordion-contenido ul li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 5px;
  }

  :root[data-tema="oscuro"] .pie-pagina-accordion .pie-pagina-accordion-contenido ul li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* Mejorar estilo del diseñador en mobile */
  .pie-pagina-disenador-compacto {
    padding: 8px 0;
  }

  .pie-pagina-disenador-compacto p {
    font-weight: 400;
    font-size: 14px;
  }

  .pie-pagina-disenador-compacto a {
    font-weight: 600;
  }
}