/**
 * @file selector-tema.css
 * @description Estilos para el componente web personalizado 'selector-tema' - Sistema completo de alternancia 
 *              entre tema claro y oscuro con posicionamiento fijo, iconografía SVG integrada, estados 
 *              interactivos avanzados y efectos visuales fluidos con soporte completo para accesibilidad
 * @author Enri Rego
 * @version 1.0.0 * @date 30 de Mayo 2025
 * @since 1.0.0
 * @requires scripts/components/selector-tema.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

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

/**
 * Elemento personalizado selector-tema
 * Contenedor principal del componente con posicionamiento fijo en la esquina
 * superior derecha, configurado para máxima visibilidad y accesibilidad
 * con z-index apropiado para evitar conflictos de apilamiento
 */
selector-tema {
  /* Posicionamiento fijo en esquina superior derecha */
  position: absolute;
  z-index: 100;
  top: 10px;

  /* Configuración de visualización */
  right: 10px;
  display: block;

  /* Z-index para elevación sobre otros elementos */
  margin: 0;
}

/**
 * Contenedor de estructura interna
 * Organiza la disposición interna del componente usando flexbox para
 * alineación perfecta del botón y elementos adicionales como slots
 */
.selector-tema-contenedor {
  /* Disposición flexbox centrada */
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   BOTÓN PRINCIPAL DE TEMA - ESTADO BASE
   ========================================================================== */

/**
 * Botón principal selector de tema
 * Diseño circular con efectos claymorphism, iconografía SVG integrada
 * y transiciones fluidas para una experiencia de usuario premium
 */
.selector-tema-boton {
  /* Disposición y alineación de contenido */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Dimensiones usando variables del sistema */
  width: var(--tamano-boton-tema);
  height: var(--tamano-boton-tema);
  padding: 0;

  /* Interacción y comportamiento */
  cursor: pointer;
  transition: all 0.3s ease;

  /* Colores usando variables del sistema */
  color: var(--blanco);
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Borde con transparencia controlada */
  border-radius: 50%;
  background: var(--naranja);
  /* Sombras usando variables del sistema claymorphism */
  box-shadow: var(--sombra-elevacion-media),
    var(--sombra-interior-suave),
    inset 0 2px 3px rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   ESTADOS INTERACTIVOS DEL BOTÓN
   ========================================================================== */

/**
 * Estado hover del botón
 * Efecto de elevación con sombras dinámicas para feedback visual inmediato
 * al pasar el cursor, usando variables del sistema claymorphism
 */
.selector-tema-boton:hover {
  /* Efecto de elevación usando transform */
  transform: translateY(-2px);

  /* Sombras de hover usando variables del sistema */
  box-shadow: var(--sombra-hover-claymorphism),
    var(--sombra-elevacion-media);
}

/**
 * Estado active del botón
 * Efecto de presión que simula la interacción física con el botón
 * mediante transform y reducción de sombras
 */
.selector-tema-boton:active {
  /* Efecto de presión usando transform */
  transform: translateY(1px);

  /* Sombra reducida para efecto de presión */
  box-shadow: var(--sombra-elevacion-baja);
}

/* ==========================================================================
   SISTEMA DE ICONOGRAFÍA SVG
   ========================================================================== */

/**
 * Iconos de sol y luna
 * Configuración base para los iconos SVG vectoriales que representan
 * visualmente los estados de tema claro (sol) y oscuro (luna)
 */
.selector-tema-boton .icono-luna,
.selector-tema-boton .icono-sol {
  /* Dimensiones consistentes para ambos iconos */
  width: 20px;
  height: 20px;
}

/**
 * Icono de luna (estado inicial oculto)
 * Por defecto se oculta ya que el tema inicial es claro,
 * se muestra dinámicamente cuando se activa el tema oscuro
 */
.selector-tema-boton .icono-luna {
  display: none;
}

/* ==========================================================================
   ADAPTACIONES PARA TEMA OSCURO
   ========================================================================== */

/**
 * Ajustes del botón en tema oscuro
 * Modificaciones específicas de las sombras cuando el tema oscuro está activo
 * para mantener consistencia visual con el sistema claymorphism
 */
:root[data-tema="oscuro"] .selector-tema-boton {
  /* Sombras específicas para tema oscuro usando variables del sistema */
  box-shadow: var(--sombra-elevacion-media),
    var(--sombra-interior-suave),
    inset 0 2px 3px rgba(255, 255, 255, 0.2);
}