/* ================================================================================ */
/* === BOTONES.CSS - SISTEMA DE BOTONES UTU === */
/* ================================================================================ */

/* ================================================================================ */
/* === CONTENEDOR DE BOTONES === */
/* ================================================================================ */
/* Este contenedor centraliza botones en la página */

.container-boton-centro {
  /* display: flex activa el sistema de diseño Flexbox */
  display: flex;
  width: 100%;

  /* justify-content: center centra el contenido horizontalmente */
  justify-content: center;
  box-sizing: border-box;
}

/* ================================================================================ */
/* === BOTÓN BASE UTU === */
/* ================================================================================ */
/* Botón principal con efecto de onda al hacer clic */

.boton-1 {
  font-size: 17px;

  /* em es una unidad relativa al tamaño de fuente del elemento */
  /* 1em de padding arriba/abajo, 2.7em izquierda/derecha */
  padding: 1em 2.7em;
  font-weight: 500;

  /* var(--variable) accede a variables CSS definidas en :root o [data-bs-theme] */
  background: var(--btn-bg-utu);
  color: var(--btn-text-utu);
  border: none;

  /* position: relative permite que elementos hijos usen position: absolute */
  position: relative;

  /* overflow: hidden oculta cualquier contenido que se desborde */
  overflow: hidden;
  border-radius: 0.6em;

  /* cursor: pointer muestra la manito al pasar el mouse */
  cursor: pointer;

  /* transition crea animaciones suaves al cambiar propiedades */
  transition: background-color 0.3s ease;
  text-decoration: none;

  /* display: inline-block permite que el botón tenga dimensiones pero se comporte como texto */
  display: inline-block;
}

/* ================================================================================ */
/* === VARIABLES DE TEMA PARA BOTÓN FLECHA === */
/* ================================================================================ */
/* [data-bs-theme="claro"] es un selector de atributo que define estilos para modo claro */

[data-bs-theme="claro"] {
  --flecha-bg: #0F4C81;
  --flecha-bg-hover: #CA8A04;
  --flecha-icon: #FFFFFF;
  --flecha-icon-hover: #FFFFFF;

  /* rgba(r, g, b, a) define un color con transparencia (a = alpha) */
  --flecha-shadow: 0 4px 15px rgba(15, 76, 129, 0.3);
  --flecha-shadow-hover: 0 6px 20px rgba(202, 138, 4, 0.4);
  --flecha-focus-outline: #1D4ED8;
}

/* Variables para modo oscuro */

[data-bs-theme="oscuro"] {
  --flecha-bg: #60A5FA;
  --flecha-bg-hover: #FCD34D;
  --flecha-icon: #0F172A;
  --flecha-icon-hover: #0F172A;
  --flecha-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
  --flecha-shadow-hover: 0 6px 20px rgba(252, 211, 77, 0.4);
  --flecha-focus-outline: #FCD34D;
}

/* ================================================================================ */
/* === CONTENEDOR DEL BOTÓN FLECHA (VOLVER ARRIBA) === */
/* ================================================================================ */
/* Este botón aparece cuando el usuario hace scroll hacia abajo */
/* position: fixed mantiene el botón en una posición fija en la pantalla */

#boton-flecha-inicio.boton-flecha-container,
.boton-flecha-container {
  position: fixed !important;

  /* bottom y right posicionan el botón en la esquina inferior derecha */
  bottom: 30px !important;
  right: 30px !important;

  /* z-index: 2147483647 es el valor máximo, asegura que esté por encima de todo */
  z-index: 2147483647 !important;

  /* Estados iniciales: oculto e invisible */
  opacity: 0;
  visibility: hidden;

  /* transform: translateY() mueve el elemento verticalmente */
  /* 20px hacia abajo crea un efecto de "entrada desde abajo" */
  transform: translateY(20px);

  /* cubic-bezier() crea una curva de animación personalizada */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* pointer-events: none hace que el elemento no responda a clics cuando está oculto */
  pointer-events: none;

  /* isolation: isolate crea un nuevo contexto de apilamiento */
  isolation: isolate !important;

  /* will-change informa al navegador qué propiedades van a cambiar (optimización) */
  will-change: transform, opacity;

  /* backface-visibility: hidden mejora el rendimiento en animaciones 3D */
  backface-visibility: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

/* Estado visible del botón */

#boton-flecha-inicio.boton-flecha-container.visible,
.boton-flecha-container.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* ================================================================================ */
/* === BOTÓN FLECHA - DISEÑO CIRCULAR === */
/* ================================================================================ */

.boton-flecha {
  display: flex !important;

  /* align-items y justify-content centran el contenido en ambos ejes */
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;

  /* border-radius: 50% crea un círculo perfecto */
  border-radius: 50%;
  background: var(--flecha-bg);
  color: var(--flecha-icon);

  /* box-shadow crea sombras para dar profundidad */
  /* formato: desplazamiento-x desplazamiento-y difuminado color */
  box-shadow: var(--flecha-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;

  /* animation aplica una animación definida con @keyframes */
  /* infinite hace que la animación se repita infinitamente */
  animation: suave-latido 3s ease-in-out infinite;
}

/* ================================================================================ */
/* === ESTADOS INTERACTIVOS DEL BOTÓN === */
/* ================================================================================ */
/* :hover se activa cuando el usuario pasa el mouse sobre el elemento */

.boton-flecha:hover {
  background: var(--flecha-bg-hover);
  color: var(--flecha-icon-hover);
  box-shadow: var(--flecha-shadow-hover);

  /* transform: scale() agranda o reduce el elemento */
  /* scale(1.1) = 110% del tamaño original */
  transform: scale(1.1);

  /* animation-play-state: paused detiene la animación durante el hover */
  animation-play-state: paused;
}

/* :focus se activa cuando el elemento recibe foco (teclado) */
/* :focus-visible es más específico: solo teclado, no mouse */

.boton-flecha:focus,
.boton-flecha:focus-visible {
  /* outline crea un borde visible alrededor del elemento (accesibilidad) */
  outline: 3px solid var(--flecha-focus-outline);

  /* outline-offset separa el outline del borde del elemento */
  outline-offset: 4px;
  animation-play-state: paused;
}

/* :active se activa mientras el usuario hace clic (mantiene presionado) */

.boton-flecha:active {
  /* scale(0.95) = 95% del tamaño original, efecto de "presionar" */
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* ================================================================================ */
/* === ICONO SVG DE LA FLECHA === */
/* ================================================================================ */

.flecha-icono {
  width: 24px;
  height: 24px;

  /* color: inherit toma el color del elemento padre */
  color: inherit;
  transition: transform 0.3s ease;
  display: block;
}

/* Animación del icono al pasar el mouse */

.boton-flecha:hover .flecha-icono {
  /* translateY negativo mueve hacia arriba */
  transform: translateY(-2px);
}

/* ================================================================================ */
/* === ANIMACIONES KEYFRAMES === */
/* ================================================================================ */
/* @keyframes define una secuencia de animación que se puede reutilizar */
/* Los porcentajes indican en qué punto de la animación aplicar cada estilo */

@keyframes suave-latido {
  /* 0% y 100% = estado inicial y final (mismo aspecto) */
  0%, 100% {
    transform: scale(1);
    box-shadow: var(--flecha-shadow);
  }
  /* 50% = punto medio de la animación */
  50% {
    transform: scale(1.05);
    box-shadow: var(--flecha-shadow-hover);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================================================ */
/* === RESPONSIVE DESIGN === */
/* ================================================================================ */
/* @media permite aplicar estilos según características del dispositivo */

@media (max-width: 768px) {
  #boton-flecha-inicio.boton-flecha-container,
  .boton-flecha-container {
    bottom: 20px !important;
    right: 20px !important;
  }

  .boton-flecha {
    width: 50px;
    height: 50px;
  }

  .flecha-icono {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  #boton-flecha-inicio.boton-flecha-container,
  .boton-flecha-container {
    bottom: 15px !important;
    right: 15px !important;
  }

  .boton-flecha {
    width: 48px;
    height: 48px;
  }

  .flecha-icono {
    width: 18px;
    height: 18px;
  }
}

/* ================================================================================ */
/* === ACCESIBILIDAD === */
/* ================================================================================ */
/* Respeta las preferencias del usuario sobre animaciones */

@media (prefers-reduced-motion: reduce) {
  .boton-flecha-container {
    transition: opacity 0.3s ease !important;
  }

  .boton-flecha {
    /* animation: none desactiva todas las animaciones */
    animation: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
  }

  .boton-flecha:hover {
    transform: none !important;
  }

  .flecha-icono {
    transition: none !important;
  }

  .boton-flecha:hover .flecha-icono {
    transform: none !important;
  }
}

/* Modo de alto contraste para usuarios con baja visión */

@media (prefers-contrast: high) {
  [data-bs-theme="claro"] {
    --flecha-bg: #000000;
    --flecha-bg-hover: #333333;
    --flecha-icon: #FFFFFF;
    --flecha-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  }

  [data-bs-theme="oscuro"] {
    --flecha-bg: #FFFFFF;
    --flecha-bg-hover: #CCCCCC;
    --flecha-icon: #000000;
    --flecha-shadow: 0 4px 15px rgba(255, 255, 255, 0.5);
  }
}

/* ================================================================================ */
/* === ESTADOS ESPECIALES === */
/* ================================================================================ */

.boton-flecha.loading {
  pointer-events: none;
  opacity: 0.7;
  animation: none;
}

.boton-flecha.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  animation: none;
}

/* ================================================================================ */
/* === SCROLL SUAVE === */
/* ================================================================================ */
/* scroll-behavior: smooth hace que el scroll sea suave en lugar de instantáneo */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ================================================================================ */
/* === EFECTOS VISUALES DEL BOTÓN BASE === */
/* ================================================================================ */
/* Gradiente que aparece sobre el botón */

.gradient {
  /* position: absolute posiciona respecto al padre con position: relative */
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0.6em;
  margin-top: -0.25em;

  /* linear-gradient crea un gradiente de colores */
  background-image: linear-gradient(
    var(--btn-gradient-top),
    var(--btn-gradient-top),
    var(--btn-gradient-bottom)
  );
}

.label {
  position: relative;
  top: -1px;
}

/* Efecto de onda que se expande al hacer clic */

.transition {
  /* cubic-bezier define una curva de temporización personalizada */
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 500ms;
  background-color: var(--btn-hover-bg-utu);

  /* border-radius: 9999px crea un círculo perfecto (valor muy alto) */
  border-radius: 9999px;
  width: 0;
  height: 0;
  position: absolute;

  /* Centra el círculo en el punto de clic */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Al pasar el mouse, el círculo se expande */

.boton-1:hover .transition {
  width: 14em;
  height: 14em;
}

/* Efecto al hacer clic: el botón se reduce ligeramente */

.boton-1:active {
  transform: scale(0.97);
}