/**
 * @file boton-subir.css
 * @description Archivo de estilos para el componente web personalizado BotonSubir.
 *              Proporciona botón flotante de navegación con indicador circular de progreso,
 *              posicionamiento fijo optimizado, efectos claymorphism avanzados, transiciones fluidas,
 *              integración completa con sistema de temas, adaptaciones responsive inteligentes,
 *              soporte para preferencias de accesibilidad, optimizaciones de rendimiento visual,
 *              indicadores de estado hover/active y sistema de z-index organizado.
 * @author Enri Rego
 * @version 1.0.0
 * @date 28 de Mayo 2025 * @since 1.0.0
 * @requires scripts/components/boton-subir.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ===================================================================
   VARIABLES CSS LOCALES Y CONFIGURACIÓN DEL COMPONENTE
   =================================================================== */

/**
 * Variables CSS específicas para el botón flotante
 * Sistema de z-index organizado y configuraciones de animación optimizadas
 */
.boton-subir-contenedor {
  /* Variables de dimensiones configurables */
  --boton-tamano-base: 44px;
  --boton-tamano-mobile: 40px;
  --boton-icono-tamano: 20px;
  --boton-icono-tamano-mobile: 18px;

  /* Variables de posicionamiento */
  --boton-distancia-lateral: 15px;
  --boton-distancia-inferior: 20px;
  --boton-distancia-inferior-mobile: 15px;

  /* Variables de animación */
  --boton-duracion-transicion: 0.3s;
  --boton-desplazamiento-entrada: 20px;
  --boton-elevacion-hover: -3px;
  --boton-elevacion-active: -1px;
  /* Variables de z-index */
  --boton-z-index: var(--z-flotantes, 100);
}

/* ===================================================================
   CONTENEDOR PRINCIPAL DEL BOTÓN FLOTANTE
   =================================================================== */

/**
 * Contenedor principal del botón flotante
 * Establece posicionamiento fijo con sistema de visibilidad animado, configuración
 * responsive automática y integración con el sistema de z-index del proyecto
 */
.boton-subir-contenedor {
  /* Posicionamiento fijo en esquina inferior izquierda */
  position: fixed;
  left: var(--boton-distancia-lateral);
  bottom: var(--boton-distancia-inferior);

  /* Z-index del sistema de capas */
  z-index: var(--boton-z-index);

  /* Dimensiones base configurables */
  width: var(--boton-tamano-base);
  height: var(--boton-tamano-base);

  /* Estado inicial oculto con desplazamiento */
  visibility: hidden;
  opacity: 0;

  /* Transición suave para entrada y salida */
  transition:
    visibility var(--boton-duracion-transicion),
    opacity var(--boton-duracion-transicion),
    transform var(--boton-duracion-transicion);

  /* Desplazamiento inicial para animación de entrada */
  transform: translateY(var(--boton-desplazamiento-entrada));
}

/**
 * Estado visible del contenedor con animación de entrada
 * Activa la visibilidad completa del botón cuando se alcanza el umbral de scroll
 */
.boton-subir-contenedor.visible {
  /* Mostrar elemento completamente */
  visibility: visible;
  opacity: 1;

  /* Eliminar desplazamiento para posición final */
  transform: translateY(0);
}

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

/**
 * Botón principal con diseño claymorphism avanzado
 * Implementa efectos de arcilla moderna con sombras multicapa, bordes suaves
 * y gradientes sutiles para crear profundidad visual sin perder legibilidad
 */
.boton-subir {
  /* Posicionamiento absoluto dentro del contenedor */
  position: absolute;
  top: 0;
  left: 0;

  /* Configuración flexbox para centrado perfecto */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Ocupar todo el espacio del contenedor */
  width: 100%;
  height: 100%;

  /* Cursor interactivo */
  cursor: pointer;

  /* Color base del texto e iconos */
  color: white;

  /* Borde sutil para definición */
  border: 1px solid rgba(255, 255, 255, 0.2);

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

  /* Color de fondo principal del sistema */
  background-color: var(--naranja, #FF6B35);

  /* Sistema de sombras claymorphism */
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1),
    inset 0 2px 3px rgba(255, 255, 255, 0.2);

  /* Transición suave para todas las propiedades */
  transition: all var(--boton-duracion-transicion) ease;
}

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

/**
 * Estado hover del botón con elevación y brillo
 * Proporciona feedback visual inmediato al usuario con elevación sutil
 * y efectos de sombra que refuerzan la interactividad del elemento
 */
.boton-subir:hover {
  /* Elevación sutil hacia arriba */
  transform: translateY(var(--boton-elevacion-hover));

  /* Sombra expandida con color del botón */
  box-shadow:
    0 6px 12px rgba(255, 107, 53, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1),
    inset 0 2px 3px rgba(255, 255, 255, 0.2);
}

/**
 * Estado active del botón con retroalimentación táctil
 * Simula el efecto de presión física reduciendo la elevación
 * y ajustando las sombras para crear sensación de hundimiento
 */
.boton-subir:active {
  /* Elevación reducida para efecto de presión */
  transform: translateY(var(--boton-elevacion-active));

  /* Sombra reducida para efecto hundido */
  box-shadow:
    0 3px 6px rgba(255, 107, 53, 0.2),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* ===================================================================
   ICONOGRAFÍA DEL BOTÓN
   =================================================================== */

/**
 * Icono de flecha hacia arriba con diseño SVG optimizado
 * Configuración centrada del icono con transiciones fluidas para estados hover
 * y dimensiones responsive que se adaptan al tamaño del contenedor
 */
.boton-subir-icono {
  /* Dimensiones configurables del icono */
  width: var(--boton-icono-tamano);
  height: var(--boton-icono-tamano);

  /* Configuración SVG para contorno */
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;

  /* Transición suave para efectos hover */
  transition: transform var(--boton-duracion-transicion);

  /* Z-index superior para visibilidad sobre progreso */
  z-index: 2;
  position: relative;
}

/**
 * Efecto hover en el icono con elevación independiente
 * Desplazamiento adicional del icono durante hover para reforzar la sensación
 * de interactividad y proporcionar feedback visual más rico
 */
.boton-subir:hover .boton-subir-icono {
  /* Desplazamiento adicional hacia arriba */
  transform: translateY(-2px);
}

/* ===================================================================
   SISTEMA DE PROGRESO CIRCULAR INTEGRADO
   =================================================================== */

/**
 * Contenedor SVG del indicador de progreso circular
 * Posicionamiento absoluto que cubre todo el botón con rotación para alineación
 * correcta del punto de inicio del círculo en la parte superior
 */
.boton-subir-progreso {
  /* Posicionamiento absoluto sobre el botón */
  position: absolute;
  top: 0;
  left: 0;

  /* Cubrir todo el botón */
  width: 100%;
  height: 100%;

  /* Rotación para inicio en parte superior */
  transform: rotate(-90deg);

  /* Z-index por debajo del icono */
  z-index: 1;
}

/**
 * Círculo de progreso activo con animaciones fluidas
 * Línea circular que indica el progreso del scroll con efectos visuales
 * mejorados y transiciones suaves para una experiencia premium
 */
.boton-subir-progreso-circulo {
  /* Sin relleno, solo contorno */
  fill: none;

  /* Color del contorno con alta opacidad */
  stroke: rgba(255, 255, 255, 0.9);

  /* Grosor del contorno */
  stroke-width: 2.5;

  /* Extremos redondeados para suavidad */
  stroke-linecap: round;

  /* Transición suave del progreso */
  transition: stroke-dashoffset var(--boton-duracion-transicion);

  /* Sombra sutil para profundidad */
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.2));
}

/**
 * Círculo de fondo para el indicador de progreso
 * Proporciona contexto visual mostrando el recorrido completo posible
 * del indicador con opacidad reducida para no competir visualmente
 */
.boton-subir-progreso-fondo {
  /* Sin relleno, solo contorno */
  fill: none;

  /* Color sutil de fondo */
  stroke: rgba(255, 255, 255, 0.15);

  /* Mismo grosor que el progreso activo */
  stroke-width: 2.5;
}

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

/**
 * Ajustes del botón principal en tema oscuro
 * Modifica bordes y sombras para mantener la legibilidad y el contraste
 * apropiado en entornos oscuros sin perder el efecto claymorphism
 */
:root[data-tema="oscuro"] .boton-subir {
  /* Borde más sutil en tema oscuro */
  border-color: rgba(255, 255, 255, 0.1);

  /* Sombras ajustadas para contraste oscuro */
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2),
    inset 0 2px 3px rgba(255, 255, 255, 0.1);
}

/**
 * Estado hover del botón en tema oscuro
 * Ajusta las sombras de hover para mantener el efecto visual apropiado
 * en entornos oscuros con mayor contraste en las sombras
 */
:root[data-tema="oscuro"] .boton-subir:hover {
  /* Sombras más pronunciadas para visibilidad */
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2),
    inset 0 2px 3px rgba(255, 255, 255, 0.1);
}

/**
 * Círculo de progreso en tema oscuro
 * Ajusta el filtro de sombra y el color del stroke para mejorar
 * la visibilidad del indicador en fondos oscuros
 */
:root[data-tema="oscuro"] .boton-subir-progreso-circulo {
  /* Sombra más pronunciada */
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.4));

  /* Color ligeramente reducido para contraste */
  stroke: rgba(255, 255, 255, 0.85);
}

/**
 * Fondo del progreso en tema oscuro
 * Reduce aún más la opacidad del fondo para evitar interferencia visual
 * en entornos oscuros donde el contraste es más sensible
 */
:root[data-tema="oscuro"] .boton-subir-progreso-fondo {
  /* Opacidad muy reducida para tema oscuro */
  stroke: rgba(255, 255, 255, 0.08);
}

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

/**
 * Adaptaciones para dispositivos móviles y pantallas pequeñas
 * Ajusta dimensiones y espaciado para optimizar la experiencia táctil
 * en dispositivos móviles manteniendo la accesibilidad y usabilidad
 */
@media screen and (max-width: 768px) {

  /**
   * Contenedor del botón con dimensiones móviles optimizadas
   * Reduce ligeramente el tamaño y ajusta el posicionamiento para mejor
   * accesibilidad en pantallas táctiles pequeñas
   */
  .boton-subir-contenedor {
    /* Posicionamiento ajustado para móviles */
    left: var(--boton-distancia-lateral);
    bottom: var(--boton-distancia-inferior-mobile);

    /* Dimensiones reducidas para pantallas pequeñas */
    width: var(--boton-tamano-mobile);
    height: var(--boton-tamano-mobile);
  }

  /**
   * Icono del botón con tamaño móvil
   * Reduce proporcionalmente el tamaño del icono para mantener
   * la armonía visual en el botón más pequeño
   */
  .boton-subir-icono {
    /* Dimensiones del icono para móviles */
    width: var(--boton-icono-tamano-mobile);
    height: var(--boton-icono-tamano-mobile);
  }
}