/* ==========================================================================
   BACK TO TOP BUTTON
   Moderno, accesible y optimizado para Core Web Vitals
   Colores: #2448A6 (azul) y #F5B841 (dorado)
   ========================================================================== */

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

.back-to-top {
  /* Posición fija */
  position: fixed;
  bottom: var(--spacing-xl, 2rem);
  right: var(--spacing-xl, 2rem);
  z-index: var(--z-fixed, 1030);
  
  /* Tamaño y forma */
  width: 52px;
  height: 52px;
  padding: 0;
  
  /* Estilo visual */
  background: var(--primary-color, #2448A6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  
  /* Flexbox para centrar icono */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Sombra elegante */
  box-shadow: 
    0 4px 15px color-mix(in srgb, var(--primary-color, #2448A6) 40%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.1);
  
  /* Transiciones suaves */
  transition: 
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
  
  /* Performance */
  will-change: transform, opacity;
  contain: layout style;
  
  /* Estado inicial oculto */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
}

/* ==========================================================================
   VISIBLE STATE
   ========================================================================== */

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hidden attribute override cuando está visible */
.back-to-top.is-visible[hidden] {
  display: flex;
}

/* ==========================================================================
   ICON STYLES
   ========================================================================== */

.back-to-top__icon {
  position: relative;
  z-index: 2;
  color: var(--brand-white, #FFFFFF);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* ==========================================================================
   PROGRESS RING (Indicador de scroll)
   ========================================================================== */

.back-to-top__progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.back-to-top__progress-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--brand-white, #FFFFFF) 20%, transparent);
  stroke-width: 3;
}

.back-to-top__progress-bar {
  fill: none;
  stroke: var(--secondary-color, #F5B841);
  stroke-width: 3;
  stroke-linecap: round;
  
  /* Circunferencia = 2 * PI * r = 2 * 3.14159 * 46 ≈ 289 */
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  
  transition: stroke-dashoffset 0.1s ease-out;
}

/* ==========================================================================
   HOVER & ACTIVE STATES
   ========================================================================== */

.back-to-top:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 
    0 8px 25px color-mix(in srgb, var(--primary-color, #2448A6) 50%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.15);
}

.back-to-top:hover .back-to-top__icon {
  transform: translateY(-2px);
}

.back-to-top:active {
  transform: translateY(-2px) scale(1);
  box-shadow: 
    0 4px 15px color-mix(in srgb, var(--primary-color, #2448A6) 40%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   FOCUS STATE (Accesibilidad)
   ========================================================================== */

.back-to-top:focus {
  outline: none;
}

.back-to-top:focus-visible {
  outline: 3px solid var(--secondary-color, #F5B841);
  outline-offset: 4px;
}

/* ==========================================================================
   PULSE ANIMATION (Llamar atención ocasionalmente)
   ========================================================================== */

@keyframes back-to-top-pulse {
  0%, 100% {
    box-shadow: 
      0 4px 15px color-mix(in srgb, var(--primary-color, #2448A6) 40%, transparent),
      0 2px 6px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 
      0 4px 20px color-mix(in srgb, var(--primary-color, #2448A6) 60%, transparent),
      0 0 0 8px color-mix(in srgb, var(--primary-color, #2448A6) 10%, transparent);
  }
}

.back-to-top.is-pulsing {
  animation: back-to-top-pulse 2s ease-in-out 3;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .back-to-top {
    bottom: var(--spacing-lg, 1.5rem);
    right: var(--spacing-lg, 1.5rem);
    width: 48px;
    height: 48px;
  }
  
  .back-to-top__icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .back-to-top {
    bottom: var(--spacing-md, 1rem);
    right: var(--spacing-md, 1rem);
    width: 44px;
    height: 44px;
  }
  
  .back-to-top__icon {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
   REDUCED MOTION (Accesibilidad)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.2s ease, visibility 0.2s ease;
    will-change: auto;
  }
  
  .back-to-top.is-visible {
    transform: none;
  }
  
  .back-to-top:hover {
    transform: none;
  }
  
  .back-to-top:active {
    transform: none;
  }
  
  .back-to-top__icon {
    transition: none;
  }
  
  .back-to-top.is-pulsing {
    animation: none;
  }
  
  .back-to-top__progress-bar {
    transition: none;
  }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

:root[data-theme="dark"] .back-to-top {
  background: var(--primary-color, #2448A6);
  box-shadow: 
    0 4px 20px color-mix(in srgb, var(--primary-color, #2448A6) 50%, transparent),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .back-to-top:hover {
  box-shadow: 
    0 8px 30px color-mix(in srgb, var(--primary-color, #2448A6) 60%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .back-to-top__progress-bg {
  stroke: color-mix(in srgb, var(--brand-white, #FFFFFF) 15%, transparent);
}

/* ==========================================================================
   PRINT (Ocultar en impresión)
   ========================================================================== */

@media print {
  .back-to-top {
    display: none !important;
  }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
  .back-to-top {
    border: 2px solid var(--brand-white, #FFFFFF);
  }
  
  .back-to-top:focus-visible {
    outline-width: 4px;
  }
}