/**
 * @file cache-control.css
 * @description Archivo de estilos para el componente web personalizado CacheControl.
 *              Proporciona estilos completos para sistema de control de caché flotante,
 *              efectos claymorphism en botón circular, panel de configuración expandible,
 *              switch de activación interactivo, indicadores de estado visual,
 *              soporte completo para tema oscuro, posicionamiento flotante optimizado,
 *              animaciones suaves de transición, responsive design adaptable,
 *              y integración perfecta con el sistema de diseño del proyecto.
 * @author Enri Rego
 * @version 1.0.0
 * @date 02 de Junio 2025 * @since 1.0.0
 * @requires scripts/components/cache-control.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ==========================================================================
   CONFIGURACIÓN BASE DEL COMPONENTE CACHE-CONTROL
   ========================================================================== */

/**
 * Contenedor principal del componente CacheControl
 * Establece posicionamiento flotante en la esquina inferior izquierda con z-index
 * elevado para mantenerse sobre otros elementos. Utiliza la tipografía del sistema
 * y se posiciona estratégicamente para no interferir con otros componentes flotantes
 */
.cache-control {
  /* Posicionamiento flotante fijo en viewport */
  position: fixed;

  /* Ubicación en esquina inferior izquierda con espaciado calculado */
  bottom: 80px;
  left: 15px;

  /* Z-index elevado para superposición correcta */
  z-index: var(--z-flotante, 100);

  /* Tipografía consistente con el sistema */
  font-family: "Poppins", sans-serif;
}

/**
 * Contenedor de organización interna del componente
 * Estructura flexbox que organiza el botón y panel en columna con alineación
 * a la derecha para optimizar el flujo visual y la expansión del panel
 */
.cache-control-contenedor {
  /* Estructura flexbox en columna */
  position: relative;
  display: flex;
  flex-direction: column;

  /* Alineación hacia la derecha para expansión del panel */
  align-items: flex-end;
}

/* ==========================================================================
   BOTÓN PRINCIPAL FLOTANTE CON EFECTOS CLAYMORPHISM
   ========================================================================== */

/**
 * Botón principal circular con efectos claymorphism
 * Implementa diseño claymorphism con sombras múltiples para crear efecto de relieve.
 * Dimensiones estándar del sistema (44px) con ícono SVG centrado y efectos
 * de hover suaves para feedback visual inmediato
 */
.cache-control-boton {
  /* Layout interno centrado para ícono SVG */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Dimensiones estándar del sistema para botones flotantes */
  width: var(--tamano-boton-flotante, 44px);
  height: var(--tamano-boton-flotante, 44px);

  /* Forma circular sin bordes */
  border: none;
  border-radius: var(--borde-radio-completo, 50%);

  /* Color de fondo con variable del sistema y fallback */
  background-color: var(--naranja, #FF6B35);
  color: white;

  /* Cursor interactivo */
  cursor: pointer;

  /* Efectos claymorphism con sombras múltiples */
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.15),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1),
    inset 0 2px 3px rgba(255, 255, 255, 0.2);

  /* Transición suave para efectos hover */
  transition: var(--transicion-rapida, 0.2s ease);
}

/**
 * Estado hover del botón principal
 * Aplica transformación de escala sutil para feedback visual inmediato
 * manteniendo la usabilidad y proporcionando respuesta táctil visual
 */
.cache-control-boton:hover {
  /* Escala sutil para feedback de hover */
  transform: scale(1.05);
}

/* ==========================================================================
   PANEL DE CONFIGURACIÓN EXPANDIBLE
   ========================================================================== */

/**
 * Panel de configuración expandible con efectos de elevación
 * Panel flotante que se posiciona estratégicamente para no salir del viewport.
 * Implementa efectos de sombra para elevación visual y fondo adaptable
 * al tema activo con espaciado interno optimizado para controles
 */
.cache-control-panel {
  /* Posicionamiento absoluto relativo al contenedor */
  position: absolute;
  top: -160px;
  right: -205px;

  /* Dimensiones fijas optimizadas para controles internos */
  width: 250px;

  /* Fondo adaptable al tema con variable del sistema */
  background-color: var(--blanco, #FFFFFF);

  /* Bordes redondeados estándar del sistema */
  border-radius: var(--borde-radio-estandar, 8px);

  /* Sombra de elevación para separación visual */
  box-shadow: var(--sombra-elevacion-media, 0 5px 15px rgba(0, 0, 0, 0.1));

  /* Espaciado interno optimizado */
  padding: var(--espaciado-md, 15px);
  margin-bottom: var(--espaciado-xs, 10px);

  /* Estado inicial oculto, controlado por JavaScript */
  display: none;
}

/* ==========================================================================
   SOPORTE PARA TEMA OSCURO
   ========================================================================== */

/**
 * Adaptación del panel de configuración para tema oscuro
 * Sobrescribe el fondo y color de texto cuando el tema oscuro está activo
 * manteniendo legibilidad y consistencia visual con el resto del sistema
 */
:root[data-tema="oscuro"] .cache-control-panel {
  /* Fondo oscuro con variable del sistema */
  background-color: var(--gris-semi-obscuro, #333333);

  /* Texto claro para contraste adecuado */
  color: var(--crema, #F5F5F5);
}

/* ==========================================================================
   ELEMENTOS DE CONTENIDO DEL PANEL
   ========================================================================== */

/**
 * Título principal del panel de configuración
 * Utiliza el color corporativo naranja con dimensiones apropiadas
 * y espaciado optimizado para jerarquía visual clara
 */
.cache-control-panel h3 {
  /* Espaciado controlado para jerarquía visual */
  margin: 0 0 var(--espaciado-xs, 10px) 0;

  /* Tamaño de fuente apropiado para título de panel */
  font-size: 16px;

  /* Color corporativo para identificación visual */
  color: var(--naranja, #FF6B35);
}

/**
 * Indicador de modo de operación actual
 * Elemento de información que muestra el modo actual (desarrollo/producción)
 * con opacidad reducida para jerarquía visual secundaria
 */
.cache-control-modo {
  /* Elemento de bloque para salto de línea */
  display: block;

  /* Tamaño de fuente secundario */
  font-size: 14px;

  /* Opacidad reducida para jerarquía visual */
  opacity: 0.8;

  /* Espaciado inferior para separación */
  margin-bottom: var(--espaciado-md, 15px);
}

/**
 * Contenedor de opciones individuales del panel
 * Estructura cada opción con espaciado apropiado para separación visual
 * y agrupación lógica de controles relacionados
 */
.cache-control-opcion {
  /* Espaciado inferior para separación entre opciones */
  margin-bottom: var(--espaciado-md, 15px);
}

/**
 * Etiqueta principal de control con layout flexbox
 * Organiza el texto descriptivo y el control en extremos opuestos
 * con cursor interactivo para toda el área de la etiqueta
 */
.cache-control-label {
  /* Layout flexbox para distribución extremos */
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Cursor interactivo para toda el área */
  cursor: pointer;
}

/**
 * Texto descriptivo de controles
 * Aplica tamaño de fuente apropiado para etiquetas de control
 * manteniendo legibilidad y jerarquía visual correcta
 */
.cache-control-texto {
  /* Tamaño de fuente para etiquetas de control */
  font-size: 14px;
}

/* ==========================================================================
   COMPONENTE SWITCH TOGGLE PERSONALIZADO
   ========================================================================== */

/**
 * Contenedor del switch toggle personalizado
 * Establece las dimensiones base del switch con posicionamiento relativo
 * para control de elementos internos absolutos del slider y botón
 */
.cache-control-switch {
  /* Posicionamiento relativo para elementos internos absolutos */
  position: relative;

  /* Display inline-block para comportamiento de componente */
  display: inline-block;

  /* Dimensiones optimizadas del switch */
  width: 40px;
  height: 20px;
}

/**
 * Input checkbox nativo oculto del switch
 * Se oculta completamente manteniendo la funcionalidad nativa de checkbox
 * para accesibilidad y eventos, delegando la visualización al slider personalizado
 */
.cache-control-input {
  /* Ocultación completa manteniendo funcionalidad */
  opacity: 0;
  width: 0;
  height: 0;
}

/**
 * Slider visual del switch con estados de transición
 * Implementa la representación visual del switch con fondo que cambia
 * según el estado del checkbox. Incluye transiciones suaves y forma redondeada
 */
.cache-control-slider {
  /* Posicionamiento absoluto para cubrir todo el contenedor */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* Cursor interactivo */
  cursor: pointer;

  /* Fondo por defecto (estado inactivo) */
  background-color: #CCCCCC;

  /* Transición suave para cambios de estado */
  transition: var(--transicion-normal, 0.4s);

  /* Forma redondeada completa */
  border-radius: 34px;
}

/**
 * Botón deslizante interno del switch
 * Elemento pseudo que representa el botón deslizante interno con transiciones
 * suaves para el movimiento entre estados activo/inactivo
 */
.cache-control-slider:before {
  /* Posicionamiento absoluto con contenido vacío */
  position: absolute;
  content: "";

  /* Dimensiones del botón interno */
  height: 16px;
  width: 16px;

  /* Posición inicial (estado inactivo) */
  left: 2px;
  bottom: 2px;

  /* Fondo blanco para contraste */
  background-color: white;

  /* Transición suave para movimiento */
  transition: var(--transicion-normal, 0.4s);

  /* Forma circular */
  border-radius: var(--borde-radio-completo, 50%);
}

/**
 * Estado activo del slider (checkbox marcado)
 * Cambia el fondo del slider al color corporativo naranja cuando
 * el checkbox está marcado (estado activo del caché)
 */
.cache-control-input:checked+.cache-control-slider {
  /* Color de fondo activo con variable del sistema */
  background-color: var(--naranja, #FF6B35);
}

/**
 * Posición del botón deslizante en estado activo
 * Mueve el botón interno hacia la derecha mediante transformación
 * cuando el checkbox está marcado (estado activo)
 */
.cache-control-input:checked+.cache-control-slider:before {
  /* Translación hacia la derecha para estado activo */
  transform: translateX(20px);
}

/* ==========================================================================
   INFORMACIÓN Y ESTADOS DEL COMPONENTE
   ========================================================================== */

/**
 * Sección de información del estado actual
 * Contiene información del estado actual del caché con tipografía
 * reducida y opacidad ajustada para jerarquía informativa
 */
.cache-control-info {
  /* Tipografía reducida para información secundaria */
  font-size: 12px;

  /* Opacidad ligeramente reducida */
  opacity: 0.9;
}

/**
 * Párrafo de estado del caché
 * Elimina márgenes por defecto para control preciso del espaciado
 * en la sección de información del componente
 */
.cache-control-estado {
  /* Eliminación de márgenes por defecto */
  margin: 0;
}

/**
 * Indicador visual de estado del caché
 * Clase base para indicadores de estado con énfasis tipográfico
 * para destacar la información crítica del estado actual
 */
.cache-estado {
  /* Énfasis tipográfico para destacar estado */
  font-weight: 600;
}

/**
 * Estado activo del caché (color verde)
 * Aplica color verde para indicar visualmente que el sistema
 * de caché está activado y funcionando correctamente
 */
.cache-estado.activo {
  /* Color verde para estado activo */
  color: #2ECC71;
}

/**
 * Estado inactivo del caché (color rojo)
 * Aplica color rojo para indicar visualmente que el sistema
 * de caché está desactivado o no está funcionando
 */
.cache-estado.inactivo {
  /* Color rojo para estado inactivo */
  color: #E74C3C;
}

/**
 * Estado activo del caché en tema oscuro
 * Versión adaptada del color verde para tema oscuro con mejor
 * contraste y visibilidad en fondos oscuros
 */
:root[data-tema="oscuro"] .cache-estado.activo {
  /* Verde más brillante para tema oscuro */
  color: #50FA7B;
}

/**
 * Estado inactivo del caché en tema oscuro
 * Versión adaptada del color rojo para tema oscuro con mejor
 * contraste y visibilidad en fondos oscuros
 */
:root[data-tema="oscuro"] .cache-estado.inactivo {
  /* Rojo más brillante para tema oscuro */
  color: #FF5555;
}

/* ==========================================================================
   RESPONSIVE DESIGN - ADAPTACIONES MÓVILES
   ========================================================================== */

/**
 * Adaptaciones para dispositivos móviles
 * Ajusta el posicionamiento del componente en pantallas pequeñas
 * para optimizar la usabilidad táctil y evitar interferencias
 */
@media (max-width: 480px) {

  /**
   * Reposicionamiento del componente en móviles
   * Ajusta la posición vertical para dispositivos táctiles y
   * mantiene la consistencia con otros elementos flotantes
   */
  .cache-control {
    /* Posición vertical ajustada para móviles */
    bottom: 70px;

    /* Mantiene posición horizontal consistente */
    left: 15px;
  }
}