/* =============================================================================
   MIRRORED · auth.css — Estilos de las pantallas publicas de acceso
   -----------------------------------------------------------------------------
   Login, recuperar contrasena y nueva contrasena. Rediseno 2026-06-15 con la
   estetica del area de talento nueva: split (panel de marca negro + logo
   crema grande a la izquierda / formulario blanco a la derecha), Work Sans de
   cuerpo, Agena Display en titulares, morado de acento y banners de error con
   el estilo del sistema de estados del onboarding.

   Fuentes self-hosted (servidas desde /fonts/). NO depende de Bootstrap ni de
   ningun CDN: las 3 vistas se reescribieron para cargar SOLO este archivo.
   ============================================================================= */

/* ---------- Fuentes de marca (self-hosted) ---------- */
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/WorkSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Agena Display";
  src: url("/fonts/AgenaDisplay-Extra-Bold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Agena Display";
  src: url("/fonts/AgenaDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens (alineados con brand/area de talento) ---------- */
:root {
  --ink: #0A0A0A;
  --crema: #EFE7DA;
  --morado: #AD93B8;
  --morado-d: #8C6B9A;
  --amarillo: #FCC32E;
  --g700: #2E2E2E;
  --g600: #525252;
  --g500: #737373;
  --g300: #D4D4D4;
  --g200: #E5E5E5;
  --g100: #F1F1F1;
  --g50:  #F8F8F8;
  --danger: #DC2626;
  --danger-bg: #FEE2E2;
  --danger-border: #FECACA;
  --danger-fg: #991B1B;
  --success: #16A34A;
  --success-bg: #DCFCE7;
  --success-border: #A7F3D0;
  --success-fg: #065F46;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: #fff;
  min-height: 100vh;
  display: flex;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =====================  PANEL DE MARCA (izquierda)  ===================== */
.auth-brand {
  flex: 1;
  background: var(--ink);
  color: var(--crema);
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-brand-logo {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}
.auth-brand-center { margin: auto 0; }
.auth-brand-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--morado);
  margin-bottom: 18px;
}
.auth-brand-headline {
  font-family: "Agena Display", "Work Sans", sans-serif;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05; letter-spacing: .01em;
}
.auth-brand-sub {
  font-size: 15px;
  color: rgba(239, 231, 218, .6);
  margin-top: 18px;
  max-width: 38ch;
  line-height: 1.5;
}
.auth-brand-foot {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(239, 231, 218, .4);
  line-height: 1.6;
}

/* =====================  PANEL DEL FORMULARIO (derecha)  ===================== */
.auth-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.auth-form-box { width: 100%; max-width: 380px; }

.auth-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--morado-d);
}
.auth-title {
  font-family: "Agena Display", "Work Sans", sans-serif;
  font-weight: 800; text-transform: uppercase;
  font-size: 28px; line-height: 1.1; letter-spacing: .01em;
  margin: 6px 0 6px;
  color: var(--ink);
}
.auth-desc {
  font-size: 14px;
  color: var(--g600);
  margin-bottom: 24px;
}

/* ---------- Banners de estado (error / exito) ---------- */
.auth-alert {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.auth-alert .auth-alert-ic { font-weight: 800; flex: none; line-height: 1.4; }
.auth-alert .auth-alert-tx { font-size: 13px; line-height: 1.45; }
.auth-alert .auth-alert-tx b { display: block; font-weight: 700; margin-bottom: 1px; }
.auth-alert--danger {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
}
.auth-alert--danger .auth-alert-ic,
.auth-alert--danger .auth-alert-tx { color: var(--danger-fg); }
.auth-alert--success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
}
.auth-alert--success .auth-alert-ic,
.auth-alert--success .auth-alert-tx { color: var(--success-fg); }

/* ---------- Campos ---------- */
.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: #403c37;
  margin-bottom: 6px;
}
.auth-field input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--g300);
  border-radius: 8px;
  font-family: inherit; font-size: 14px;
  background: #fff; color: var(--ink);
}
.auth-field input::placeholder { color: var(--g500); }
.auth-field input:focus {
  outline: none;
  border-color: var(--morado);
  box-shadow: 0 0 0 3px rgba(173, 147, 184, .22);
}
.auth-field input:read-only {
  background: var(--g50);
  color: var(--g600);
  cursor: not-allowed;
}
/* Estado de error en el propio campo (se aplica con .is-invalid) */
.auth-field input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .14);
}

/* ---------- Boton primario (negro pill, como el area de talento) ---------- */
.auth-btn {
  width: 100%;
  background: var(--ink);
  color: var(--crema);
  border: none;
  padding: 13px;
  border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer;
  margin-top: 4px;
  transition: background .15s ease, transform .05s ease;
}
.auth-btn:hover { background: #1f1f1f; }
.auth-btn:active { transform: translateY(1px); }

/* ---------- Enlace secundario ---------- */
.auth-link {
  display: block; text-align: center;
  margin-top: 18px;
  font-size: 13px; font-weight: 600;
  color: var(--morado-d);
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }

/* =====================  RESPONSIVE  ===================== */
/* En tablet/movil el panel de marca pasa arriba como banda compacta con el
   logo, y el formulario ocupa el resto. Mantiene el balance de un login
   estandar (formulario protagonista, marca presente pero sin estorbar). */
@media (max-width: 860px) {
  body { flex-direction: column; }
  .auth-brand {
    /* Banda superior compacta. El padding lateral (24px) hace de margen de
       seguridad para el logo grande. */
    padding: 28px 24px;
    flex: none;
  }
  /* Logo GRANDE y brutalist en movil: ocupa TODO el ancho del panel (el
     padding lateral de 24px hace de margen de seguridad). `max-width: 100%`
     evita que el SVG se desborde en pantallas muy estrechas; queda alineado
     con el ancho de los campos del formulario (ambos respetan el mismo
     padding de 24px). Centrado. */
  .auth-brand-logo {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .auth-brand-center { display: none; }      /* headline/sub se ocultan en movil para no alargar */
  .auth-brand-foot { display: none; }
  /* Formulario centrado VERTICALMENTE en el espacio restante (antes quedaba
     pegado al encabezado con flex-start). `flex:1` toma el alto sobrante y
     `align-items:center` lo centra. */
  .auth-form-panel {
    padding: 24px;
    flex: 1;
    align-items: center;
  }
  /* El form-box pierde el cap de 380px en movil: ocupa el ancho disponible
     (panel - padding) para no desbordar el viewport en pantallas estrechas. */
  .auth-form-box { max-width: 100%; }
  /* Titulo un punto mas pequeno en movil para que "ACCEDE A TU CUENTA" no
     fuerce scroll horizontal en pantallas <=360px. */
  .auth-title { font-size: 25px; }
}

/* Pantallas muy estrechas: afinamos el titulo para que nunca desborde. */
@media (max-width: 380px) {
  .auth-title { font-size: 22px; }
}