/* ============================================================
   LOGIN - PURE CODE: Animated Mesh Gradient + Glassmorphism
   Fuente única de estilos compartidos entre:
     - index.php (login principal)
     - login_olvido.php (recuperación de clave)
   Paleta: Negro #000, Rojo profundo #8b0000/#c0392b, Violeta #2d0057/#6a0572
   ============================================================ */

/* --- Variables de marca --- */
:root {
  /* Paleta de colores */
  --c-black:   #000000;
  --c-red-1:   #8b0000;
  --c-red-2:   #c0392b;
  --c-violet-1:#2d0057;
  --c-violet-2:#6a0572;
  --c-white:   #ffffff;
  --c-silver:  #d0d0e0;
  --c-glow-red:    rgba(192, 57, 43, 0.75);
  --c-glow-violet: rgba(106, 5, 114, 0.65);

  /* Color base del cuerpo — garantiza fondo mínimo visible cuando el
     gradiente animado se desplaza a los bordes (ajustar si se oscurece demás) */
  --c-body-base: #0a0015;

  /* Velocidad del ciclo de animación del Mesh Gradient (segundos) */
  --mesh-speed: 11s;

  /* Ancho máximo de los campos de entrada y el botón, relativo al card */
  --input-max-width: 82%;
}

/* --- Reset base --- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* --- Fondo: Animated Mesh Gradient --- */
/* Cuatro "manchas" de color se mueven con keyframes independientes
   sobre un canvas CSS fijo. El movimiento es sutil (20-30 % de desplazamiento)
   para no afectar el rendimiento. Se usa will-change solo en el pseudo-elemento. */
body.login-mesh-bg {
  /* --c-body-base asegura que el card nunca desaparezca contra fondo puro negro */
  background: var(--c-body-base);
  position: relative;
  min-height: 100vh;
}

body.login-mesh-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2; /* -2 para quedar debajo del mapamundi (z:-1) */
  will-change: background-position;
  /* Cuatro gradientes radiales superpuestos que se animan
     de forma independiente mediante background-position */
  background-image:
    radial-gradient(ellipse 60% 50% at 0% 0%,   var(--c-red-1)    0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 100% 100%, var(--c-violet-1) 0%, transparent 70%),
    radial-gradient(ellipse 50% 55% at 100% 0%,  var(--c-violet-2) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 0% 100%,  var(--c-red-2)    0%, transparent 65%);
  background-size: 200% 200%;
  background-position: 0% 0%, 100% 100%, 100% 0%, 0% 100%;
  /* Sin "alternate": 0% y 100% son idénticos (estado visible) →
     el salto al reinicio es invisible y el motor siempre desacelera
     en el estado visible gracias al ease-in-out.
     Ajustar los valores de meshMove para controlar cuánto se alejan
     las manchas en el pico esfumado (entre 25-45%). */
  animation: meshMove var(--mesh-speed) ease-in-out infinite;
}

@keyframes meshMove {
  /* ── Estado VISIBLE (manchas en esquinas → máximo color detrás del card) ── */
  0%,
  100% { background-position:  0%  0%,  100% 100%, 100%  0%,   0% 100%; }

  /* Transición de entrada hacia esfumado */
  35%  { background-position: 20% 15%,   80%  85%,  80%  15%,  20%  85%; }

  /* ── Pico ESFUMADO breve (manchas alejadas del centro) ── */
  /* Ajustar los valores numéricos para más/menos desvanecimiento */
  45%,
  55%  { background-position: 38% 28%,   62%  72%,  62%  28%,  38%  72%; }

  /* Transición de salida desde esfumado */
  65%  { background-position: 20% 15%,   80%  85%,  80%  15%,  20%  85%; }
}

/* ============================================================
   MAPAMUNDI - INICIO
   Capa decorativa entre el Mesh Gradient y el contenido.
   Imagen: img/mapamundi.png (1920×1080 px, fondo transparente,
   puntos grises con márgenes incorporados).

   Para QUITAR el mapa: eliminar este bloque completo
   (desde "MAPAMUNDI - INICIO" hasta "MAPAMUNDI - FIN").
   También revertir z-index del ::before de -2 a -1.
   Este bloque no afecta ninguna otra página ni funcionalidad.

   Parámetros ajustables:
     opacity       → intensidad del mapa (0.0 invisible → 1.0 opaco)
     background-size → "cover" llena la pantalla / "contain" respeta proporciones
   ============================================================ */
body.login-mesh-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;         /* sobre el gradiente (z:-2), bajo el contenido */
  pointer-events: none;
  background-image: url('../../img/mapamundi.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%;     /* ← ajustar tamaño: 100%=pantalla completa, 70%=reducida 30%, 50%=mitad */
  opacity: 0.15;            /* ← ajustar intensidad del mapa (0.05 muy sutil, 0.20 visible) */
}
/* MAPAMUNDI - FIN */

/* --- Glassmorphism: tarjeta flotante de cristal --- */
.login-glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 2rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
}

/* Cabecera del card — sin fondo opaco de Bootstrap */
.login-glass-card .card-header {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--c-white);
}

/* Cuerpo del card */
.login-glass-card .card-body {
  background: transparent !important;
}

/* Título principal */
.login-glass-card .card-header h3 {
  color: var(--c-white);
  letter-spacing: 0.05em;
  font-weight: 300;
}

/* Subtítulos dentro del card */
.login-glass-card .card-header h1 {
  color: var(--c-silver);
  font-weight: 300;
}

/* Textos generales dentro del card */
.login-glass-card h5,
.login-glass-card .card-title {
  color: var(--c-silver);
}

.login-glass-card .text-muted {
  color: rgba(200, 200, 220, 0.7) !important;
}

.login-glass-card label {
  color: rgba(200, 200, 220, 0.85);
}

/* Textos de instrucciones / cuerpo dentro del card */
.login-glass-card .card-body .small,
.login-glass-card .card-body p,
.login-glass-card .card-body .text-black {
  color: var(--c-silver) !important;
}

/* --- Ancho de campos y botón (ajustar con --input-max-width) --- */
/* Se aplica a los contenedores .login-field dentro del card */
.login-field {
  max-width: var(--input-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* --- Inputs con fondo blanco sobre tarjeta de cristal --- */
/* !important necesario para superar la especificidad de Bootstrap en todos los estados */
.login-glass-card .form-control {
  background: rgba(255, 255, 255, 0.92) !important;
  border: none !important;
  border-bottom: 2px solid rgba(139, 0, 0, 0.25) !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
  color: #1a1a1a !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-glass-card .form-control::placeholder {
  color: rgba(80, 80, 100, 0.5);
}

.login-glass-card .form-control:focus {
  background: #ffffff !important;
  border-bottom: 2px solid var(--c-red-2) !important;
  box-shadow: 0 4px 14px var(--c-glow-red) !important;
  outline: none;
  color: #1a1a1a !important;
}

/* Autofill del navegador: mantener fondo blanco y texto oscuro */
.login-glass-card .form-control:-webkit-autofill,
.login-glass-card .form-control:-webkit-autofill:hover,
.login-glass-card .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px rgba(255, 255, 255, 0.95) inset !important;
  -webkit-text-fill-color: #1a1a1a !important;
  caret-color: #1a1a1a;
}

/* Alternar glow violeta en el campo de contraseña para diferenciarlo */
.login-glass-card #clave:focus {
  border-bottom-color: var(--c-violet-2) !important;
  box-shadow: 0 4px 14px var(--c-glow-violet) !important;
}

/* Label dentro del input (estado sin foco, fondo blanco): texto oscuro */
.login-glass-card .form-floating > label {
  color: #555;
}

/* Label flotando sobre la tarjeta oscura (con foco o con valor): texto plata */
.login-glass-card .form-control:focus ~ label,
.login-glass-card .form-control:not(:placeholder-shown) ~ label {
  color: var(--c-silver);
}

/* Checkbox "Mostrar Contraseña" */
.login-glass-card .form-floating input[type="checkbox"] {
  accent-color: var(--c-red-2);
}

.login-glass-card .show-pass-label {
  color: var(--c-silver);
  font-size: 0.88rem;
}

/* --- Botón de acceso con gradiente y hover glow --- */
.btn-login {
  background: linear-gradient(135deg, var(--c-red-1) 0%, var(--c-red-2) 50%, var(--c-violet-2) 100%);
  border: none;
  color: var(--c-white);
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease;
  box-shadow: 0 4px 18px rgba(139, 0, 0, 0.4);
}

.btn-login:hover,
.btn-login:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--c-glow-red),
              0 0 20px var(--c-glow-violet);
  filter: brightness(1.12);
  color: var(--c-white);
}

.btn-login:active {
  transform: translateY(0);
}

/* --- Botón secundario "Volver" — gradiente verde sólido + glow en hover ---
   Mismo patrón visual que .btn-login pero en paleta success (verde).
   !important necesario para superar Bootstrap .btn:hover que carga antes. */
.btn-login-secondary {
  background:      linear-gradient(135deg, #0f5132 0%, #198754 55%, #146c43 100%) !important;
  border:          none !important;
  color:           var(--c-white) !important;
  font-weight:     600;
  letter-spacing:  0.06em;
  border-radius:   0.75rem;
  padding:         0.75rem 1.5rem;
  box-shadow:      0 4px 18px rgba(25, 135, 84, 0.45) !important;
  transition:      transform 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease !important;
  text-decoration: none !important;
}

.btn-login-secondary:hover,
.btn-login-secondary:focus {
  transform:       translateY(-2px) !important;
  box-shadow:      0 8px 28px rgba(25, 135, 84, 0.75),
                   0 0 22px  rgba(32, 201, 151, 0.50) !important;
  filter:          brightness(1.15) !important;
  color:           var(--c-white) !important;
  text-decoration: none !important;
}

.btn-login-secondary:active {
  transform: translateY(0) !important;
}

/* --- Enlace "¿Has olvidado tu contraseña?" y similares --- */
.login-glass-card a.small {
  color: rgba(200, 200, 220, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-glass-card a.small:hover {
  color: var(--c-silver);
  text-decoration: underline;
}

/* --- Texto de versión/copyright --- */
.login-version-text {
  color: rgba(180, 180, 200, 0.55) !important;
}

/* --- Checkbox de nuevo menú (opaco, discreto) --- */
.login-menu-check {
  opacity: 0.4;
}

/* ============================================================
   ROBOT IA — Animación "peek" desde la derecha del card
   Usado exclusivamente en index.php (login principal).
   Para QUITAR el robot: basta con eliminar el bloque HTML
   marcado con "ROBOT IA - INICIO" / "ROBOT IA - FIN" en index.php.
   Este CSS es inerte si ese HTML no existe.
   ============================================================

   Parámetros de posición (ajustar aquí):
     right:  cuánto del robot queda fuera del borde derecho del card
             (negativo = se sale del card; 0 = pegado al borde)
     bottom: altura desde el fondo del card donde aparece el robot
     width:  tamaño del robot
   ============================================================ */
.robot-ia-scene {
  position: absolute;
  right:  -90px;   /* ← ajustar para más/menos solapamiento con el card */
  bottom:  60px;   /* ← ajustar para alinear con el texto "Asistente IA" */
  width:  160px;   /* ← ajustar tamaño del robot */
  z-index: 3;      /* detrás del card (el card tiene z-index implícito mayor por stacking context) */
  pointer-events: none;
  /* Espera 1.5s antes de entrar — da tiempo a que el fondo cargue */
  animation: robotEntrada 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
}

.robot-ia-scene video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Entrada: desliza desde la derecha con efecto de rebote suave */
@keyframes robotEntrada {
  from { transform: translateX(130%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Salida: se esconde despacio hacia la derecha al terminar el saludo */
/* Se activa vía JS añadiendo la clase .robot-saliendo al elemento */
.robot-ia-scene.robot-saliendo {
  animation: robotSalida 2s ease-in forwards;
}

@keyframes robotSalida {
  0%   { transform: translateX(0);    opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}