/* =============================================================================
   Soft Imperio — Página de autenticación (login.html)
   GALAXIA VERDE OSCURA: nebulosa esmeralda + campo de estrellas + anillos de
   órbita, con las licencias del catálogo volando hacia el visitante
   (authflow.js). La tarjeta es un panel oscuro con borde de marca.

   Es la única página de identidad OSCURA del sitio: login.html fija
   data-theme="dark" antes de pintar, así los campos, botones, avisos y el
   logo salen del juego de tokens oscuros y no hay que repintarlos a mano.
   Aquí solo se define lo propio del login (fondo, tarjeta, pestañas, campos).
   ============================================================================= */

.auth {
  min-height: 100dvh; display: flex; flex-direction: column;
  /* Negro con matiz verde: el vacío del espacio, no un gris sucio */
  background: #03100a;
}

/* -------------------------------------------------------- Barra superior --- */
.auth-bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, #03100a 62%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 0;
}
/* Logo pegado a la esquina izquierda (sin contenedor centrado) */
.auth-bar__inner {
  max-width: none; margin-inline: 0;
  padding: 0.85rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.auth-bar__actions { display: flex; align-items: center; gap: 0.4rem; }
.auth-back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--ink-body); padding: 0.5rem 0.7rem; border-radius: var(--r-sm); transition: background-color var(--t), color var(--t); }
.auth-back:hover { background: var(--surface-2); color: var(--ink); }
.auth-back svg { width: 1.05rem; height: 1.05rem; }
@media (max-width: 560px) { .auth-back span { display: none; } }

/* -------------------------------------------------------------- Layout --- */
/* Login centrado al medio; el overlay de licencias queda detrás (z: 0). */
.auth-main { flex: 1; display: grid; place-items: center; position: relative; z-index: 1; }

/* --------------------------------------------------- Galaxia de fondo ----- */
/* Capa fija a pantalla completa (no captura clics) con tres planos:
   nebulosa esmeralda → estrellas → anillos de órbita. */
.auth-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Nebulosa: manchas de luz verde/teal. Son degradados radiales, que ya salen
   suaves por sí solos: nada de filter: blur() a pantalla completa (en el
   celular ese desenfoque cuesta memoria y no se notaría la diferencia). */
.auth-bg__nebula {
  position: absolute; inset: -12%;
  background:
    radial-gradient(30% 32% at 18% 24%, rgba(24, 170, 105, 0.55), transparent 66%),
    radial-gradient(26% 26% at 82% 16%, rgba(14, 140, 125, 0.45), transparent 68%),
    radial-gradient(34% 32% at 68% 86%, rgba(30, 190, 115, 0.4), transparent 68%),
    radial-gradient(26% 28% at 8% 84%, rgba(12, 110, 82, 0.45), transparent 66%),
    /* Velo central tenue: da cuerpo al vacío sin apagar las estrellas */
    radial-gradient(72% 62% at 50% 48%, rgba(6, 46, 34, 0.5), transparent 80%);
}

/* Campo de estrellas: capas de puntitos en mosaico (tamaños distintos para que
   no se lea el patrón) girando MUY despacio, como el cielo en una travesía.
   Se anima transform, que resuelve el compositor, y el giro completo cierra el
   bucle sin saltos. */
@keyframes authStars { to { transform: rotate(360deg); } }
.auth-bg__stars {
  position: absolute; left: 50%; top: 50%;
  width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax;
  opacity: 0.95;
  background-image:
    radial-gradient(2px 2px at 18% 22%, #ffffff, transparent 62%),
    radial-gradient(1.6px 1.6px at 72% 38%, rgba(220, 255, 238, 0.95), transparent 62%),
    radial-gradient(1.3px 1.3px at 44% 76%, rgba(255, 255, 255, 0.9), transparent 62%),
    radial-gradient(2.4px 2.4px at 86% 82%, rgba(170, 255, 210, 0.9), transparent 62%),
    radial-gradient(1.2px 1.2px at 8% 62%, rgba(255, 255, 255, 0.8), transparent 62%),
    radial-gradient(1.7px 1.7px at 58% 12%, rgba(240, 255, 248, 0.85), transparent 62%),
    radial-gradient(1.1px 1.1px at 30% 54%, rgba(255, 255, 255, 0.7), transparent 62%),
    radial-gradient(1.4px 1.4px at 92% 46%, rgba(200, 255, 228, 0.8), transparent 62%);
  background-size:
    340px 340px, 260px 260px, 190px 190px, 420px 420px,
    150px 150px, 300px 300px, 230px 230px, 380px 380px;
  animation: authStars 300s linear infinite;
  will-change: transform;
}

/* Quien pide menos movimiento no ve girar el cielo (las licencias en vuelo ya
   se detienen por su cuenta en authflow.js). */
@media (prefers-reduced-motion: reduce) {
  .auth-bg__stars { animation: none; }
}
/* Campo de licencias en vuelo (authflow.js). El escenario lleva la
   perspectiva; cada ficha se mueve con translate3d + opacity, que resuelve el
   compositor. El PERSP de authflow.js debe coincidir con este valor. */
.authflow {
  /* Pequeñas a propósito: cerca de la cámara la perspectiva las dobla, y así
     el tamaño en pantalla queda en el rango del túnel de referencia (~30-80px)
     en vez de cajas gigantes que tapan media pantalla. */
  --fsz: clamp(24px, 3vw, 38px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: 50% 46%;
}
.authflow__i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--fsz);
  height: var(--fsz);
  margin-left: calc(var(--fsz) / -2);
  margin-top: calc(var(--fsz) / -2);
  display: grid;
  place-items: center;
  border-radius: 24%;
  opacity: 0;
  /* Las fichas siguen siendo CLARAS a propósito: muchos logos son oscuros y
     sobre el negro se perderían. Se leen como objetos iluminados en el vacío,
     con un halo verde que los ata a la galaxia. */
  background: linear-gradient(155deg, #ffffff 10%, #e7f1ea 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.75), 0 0 34px -10px rgba(26, 190, 120, 0.45), inset 0 1px 0 #ffffff;
  /* backface-visibility evita el parpadeo al girar en Safari de iOS */
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.authflow__i img {
  width: 68%;
  height: 68%;
  object-fit: contain;
}

/* Celular con prefijo internacional pegado al input (+51, +54…). Usa las mismas
   variables que .input para que combine en claro y oscuro. */
.phone-input { display: flex; align-items: stretch; }
.phone-input__code {
  display: inline-flex; align-items: center; padding: 0 0.8rem;
  font-weight: 700; font-size: 0.95rem; color: var(--ink); white-space: nowrap;
  background: color-mix(in oklch, var(--ink) 6%, var(--surface));
  border: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.phone-input .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; flex: 1; min-width: 0; }
.phone-input:focus-within .phone-input__code { border-color: var(--brand); }

/* ----------------------------------------------------------- Lado form --- */
/* minmax(0,1fr): con la columna en `auto` la tarjeta nunca bajaba del ancho de
   su contenido más largo y en un celular de 320 px (o con la letra del sistema
   en grande) se salía de la pantalla por la derecha. */
.auth-panel { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; padding: clamp(2rem, 1.5rem + 3vw, 4rem) var(--gutter); perspective: 1400px; }
.auth-scene, .auth-card { min-width: 0; }

/* Escena 3D: tarjeta + fichas flotantes + halo. authfx.js escribe en la
   tarjeta --rxn/--ryn (grados de giro) y en la escena --px/--py (-1…1) según
   el cursor (escritorio) o el giroscopio (celular). Sin JS todo queda quieto
   y nada se rompe. */
.auth-scene { position: relative; width: 100%; max-width: 28.5rem; }
/* El halo verde sobresale por los lados, pero solo hasta donde haya sitio: con
   -16% fijo se salía 51 px de la pantalla en un celular de 360 px y ensanchaba
   la página entera (la barra de progreso y el fondo fijo se estiraban con ella). */
.auth-scene::before {
  content: ""; position: absolute; inset: -10% calc(-1 * min(16%, 4vw)); z-index: 0; pointer-events: none;
  background: radial-gradient(52% 46% at 50% 40%, rgba(26, 200, 130, 0.28), transparent 72%);
  opacity: 0.9;
}

@keyframes authCardFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.auth-card {
  position: relative; z-index: 1;
  width: 100%;
  /* Panel casi opaco (no translúcido) a propósito: detrás pasan licencias
     volando y un cristal transparente volvería ilegible el formulario. El
     borde verde y el halo lo separan del vacío. */
  background: linear-gradient(180deg, #0d2318 0%, #071510 62%);
  border: 1px solid rgba(120, 255, 190, 0.16);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 70px -24px rgba(26, 190, 120, 0.4);
  transform: rotateX(calc(var(--rxn, 0) * 1deg)) rotateY(calc(var(--ryn, 0) * 1deg));
  transition: transform 0.55s var(--ease-out);
  animation: authCardFloat 6.5s ease-in-out infinite;
  will-change: transform;
}
/* Mientras se gira NO hay transición: el transform sigue al cursor 1:1 en la
   GPU (con transición cada frame reinicia el easing y se siente con lag). */
.auth-card.is-tilt { transition: none; }

/* Insignia flotante sobre el título (ícono en placa blanca, como la referencia) */
.auth-badge {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; margin: 0 auto 0.95rem;
  border-radius: 15px;
  color: var(--brand);
  background: linear-gradient(180deg, rgba(32, 82, 58, 0.95) 0%, rgba(12, 34, 24, 0.95) 100%);
  border: 1px solid rgba(120, 255, 190, 0.24);
  box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.8), 0 0 26px -8px rgba(26, 190, 120, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Dentro va la marca (logo-mark-dark.png: la versión para fondos oscuros) */
.auth-badge img { width: 1.75rem; height: 1.75rem; object-fit: contain; display: block; }
.auth-badge svg { width: 1.35rem; height: 1.35rem; }

/* En pantallas chicas la tarjeta se ajusta al ancho sin perder el estilo. */
@media (max-width: 560px) {
  .auth-card { padding: 1.5rem 1.15rem; }
}
.auth-card__head { margin-bottom: 1.4rem; text-align: center; }
.auth-card__head h1 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.85rem); }
.auth-card__head p { margin-top: 0.45rem; }

/* Pestañas como control segmentado (píldora) en vez de subrayado */
.auth-tabs {
  margin-bottom: 1.5rem; gap: 0.3rem; padding: 0.3rem;
  border-bottom: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.auth-tabs button {
  /* flex: 1 1 0 + min-width: 0: sin esto las dos pestañas conservan el ancho de
     su texto y "Crear cuenta" se salía de la tarjeta con la letra grande. */
  flex: 1 1 0; min-width: 0; justify-content: center;
  padding: 0.55rem clamp(0.5rem, 3vw, 1rem); margin-bottom: 0;
  border-bottom: 0; border-radius: 999px;
  font-size: min(1rem, 4vw);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--t), background-color var(--t), box-shadow var(--t);
}
@media (min-width: 561px) { .auth-tabs button { font-size: 1rem; } }
.auth-tabs button.is-active {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.auth-form { display: grid; gap: 1.1rem; }
.auth-form .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.auth-form .label-row a { font-size: 0.82rem; font-weight: 600; color: var(--brand-ink); }
.auth-form .label-row a:hover { text-decoration: underline; }

/* Etiqueta solo para lectores de pantalla (el placeholder hace de etiqueta
   visible en el panel de inicio de sesión, como en la referencia). */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Campos rellenos (sin borde) con ícono a la izquierda */
.auth .input, .auth .select {
  background: rgba(255, 255, 255, 0.06); border-color: transparent; border-radius: 12px;
}
.auth .input:hover, .auth .select:hover { background: rgba(255, 255, 255, 0.09); }
.auth .input:focus, .auth .select:focus { background: rgba(255, 255, 255, 0.11); border-color: var(--brand); }
.auth .field--error .input, .auth .field--error .select { border-color: var(--danger); }
.auth .phone-input__code {
  background: rgba(255, 255, 255, 0.11); border-color: transparent; border-radius: 12px 0 0 12px;
}
.auth .phone-input .input { border-radius: 0 12px 12px 0; }
.auth .auth-form .btn--block { border-radius: 12px; }

.input-ic { position: relative; display: flex; align-items: center; }
.input-ic__i {
  position: absolute; left: 0.9rem; z-index: 1;
  display: inline-flex; color: var(--ink-faint); pointer-events: none;
}
.input-ic__i svg { width: 1.05rem; height: 1.05rem; }
.input-ic .input { padding-left: 2.6rem; }

/* "¿Olvidaste tu contraseña?" a la derecha, bajo el campo */
.auth-aux { display: flex; justify-content: flex-end; margin-top: 0.55rem; }
.auth-aux a { font-size: 0.82rem; font-weight: 600; color: var(--brand-ink); }
.auth-aux a:hover { text-decoration: underline; }

/* Campo de contraseña con botón mostrar/ocultar */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap .input { padding-right: 3rem; }
.pw-toggle {
  position: absolute; right: 0.35rem; display: inline-grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border-radius: var(--r-xs); color: var(--ink-muted);
  transition: color var(--t), background-color var(--t);
}
.pw-toggle:hover { color: var(--ink); background: var(--surface-2); }
.pw-toggle svg { width: 1.2rem; height: 1.2rem; }

/* Casilla (recordarme / términos) */
.check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; font-size: 0.9rem; color: var(--ink-body); line-height: 1.45; }
.check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; accent-color: var(--brand-strong); cursor: pointer; }
.check a { color: var(--brand-ink); font-weight: 600; }
.check a:hover { text-decoration: underline; }

.auth-sep { display: flex; align-items: center; gap: 0.85rem; color: var(--ink-faint); font-size: 0.82rem; margin: 0.3rem 0; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.auth-switch { text-align: center; font-size: 0.92rem; color: var(--ink-muted); margin-top: 1.4rem; }
.auth-switch button { color: var(--brand-ink); font-weight: 600; }
.auth-switch button:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- Pie --- */
.auth-foot { position: relative; z-index: 1; padding: 1.25rem var(--gutter); border-top: 0; }
.auth-foot__inner {
  max-width: var(--container-wide); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-size: 0.84rem; color: var(--ink-muted);
}
.auth-foot__inner nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.auth-foot__inner a:hover { color: var(--ink); }