/* ============================================================
   shared/auth/auth.css — Sistema de diseño de las pantallas de AUTH
   ============================================================
   Port del diseño "Split refinado" (panel de marca izq + formulario der,
   sin neón, esquinas redondeadas, Raleway + Plus Jakarta Sans).

   Variantes de color (el layout es idéntico):
     .au--erp      → AZUL  (ERPs de todas las empresas: Quantis, SuperCars,
                            GroupSaa + paneles operativos/comerciales)
     .au--contacto → VERDE (Contacto App: CRM compartido y todos sus tenants)
     .au--intermex  → NEGRO (Intermex)

   Lo usan:
     - src/components/EnterpriseLogin.astro  (login paneles + CRM)
     - src/components/erp/ERPLogin.astro     (login ERPs)
     - src/pages/enterprise/recuperar.astro  (enviar correo de recuperación)
     - src/pages/enterprise/reset-password.astro (consumir link de recovery)
     - src/pages/enterprise/register.astro   (crear cuenta)

   Todos los colores viven como tokens --au-* en la raíz .au; NO usar hex
   sueltos en los componentes (docs/ESTILO-FRONTEND.md).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Raleway:wght@400;500;600;700&display=swap');

/* ---------- Tokens base (variante VERDE · Contacto App) ---------- */
.au {
  /* panel de marca */
  --au-panel-1: #0A140E;
  --au-panel-2: #0E1F16;
  --au-panel-3: #0B1A12;

  /* acento de marca */
  --au-accent: #10B981;
  --au-accent-dark: #047857;
  --au-deep-1: #1B4230;   /* gradiente del botón (arriba) + focus border */
  --au-deep-2: #123021;   /* gradiente del botón (abajo) */

  /* superficies y texto */
  --au-bg: #EDF1EE;
  --au-card: #ffffff;
  --au-field-bg: #F4F7F5;
  --au-field-border: #E3EAE5;
  --au-text: #0A140E;
  --au-muted: #5F6E64;
  --au-label: #3A4A41;
  --au-divider: #EEF2EF;
  --au-placeholder: #9AA8A0;
  --au-dot: #CBD5CE;

  /* estados */
  --au-danger: #E5484D;
  --au-danger-bg: #FEF3F2;
  --au-success: #059669;
  --au-success-bg: #ECFDF5;

  /* forma */
  --au-radius-card: 26px;
  --au-radius-field: 16px;

  --au-mono: 'Raleway', system-ui, sans-serif;
  --au-sans: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* texto sobre el mark de marca */
  --au-mark-text: #03110B;

  font-family: var(--au-sans);
  color: var(--au-text);
  -webkit-font-smoothing: antialiased;
}
.au *, .au *::before, .au *::after { box-sizing: border-box; }

/* ---------- Variante AZUL · ERP ---------- */
.au--erp {
  --au-panel-1: #0A0E1E;
  --au-panel-2: #0E1A30;
  --au-panel-3: #0B1326;

  --au-accent: #3B82F6;
  --au-accent-dark: #1D4ED8;
  --au-deep-1: #1E3A8A;
  --au-deep-2: #14265C;

  --au-bg: #EDF0F5;
  --au-field-bg: #F4F6FA;
  --au-field-border: #E3E7F0;
  --au-text: #0A0F1E;
  --au-muted: #5F6877;
  --au-label: #3A4356;
  --au-divider: #EEF0F5;
  --au-placeholder: #9AA3B5;
  --au-dot: #CBD1DC;

  --au-mark-text: #060B1A;
}

/* ---------- Variante NEGRA · Intermex ---------- */
.au--intermex {
  --au-panel-1: #050505;
  --au-panel-2: #111111;
  --au-panel-3: #000000;

  --au-accent: #737373;
  --au-accent-dark: #262626;
  --au-deep-1: #171717;
  --au-deep-2: #000000;

  --au-bg: #f1f1f1;
  --au-field-bg: #f5f5f5;
  --au-field-border: #dedede;
  --au-text: #0a0a0a;
  --au-muted: #666666;
  --au-label: #333333;
  --au-divider: #eeeeee;
  --au-placeholder: #929292;
  --au-dot: #c8c8c8;

  --au-mark-text: #ffffff;
}

/* ---------- Reset defensivo ---------- */
/* Los logins viven DENTRO de páginas con CSS global propio (ej. el ERP de
   GroupSaa define `main { margin-top:-96px; padding:120px 32px 64px }`, que
   rompía el layout del login). Los contenedores del auth ya son <div> con
   clase (inmunes a selectores de elemento), y este reset con :where()
   (especificidad cero — nunca pisa nuestras propias clases) neutraliza la
   tipografía/estructura heredada del host. */
.au :where(h1, h2, h3, p, ul, li, form, figure) { margin: 0; padding: 0; }
.au :where(ul) { list-style: none; }
.au :where(input, button, a) { font-family: inherit; }
.au :where(img) { max-width: none; }

/* ---------- Contenedores raíz ---------- */
/* Página standalone (register / recuperar / reset-password) */
.au--page {
  min-height: 100vh;
  background: var(--au-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
/* Overlay de login dentro de una app (tapa la app hasta loguear) */
.au--overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--au-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: auto;
}

/* ---------- Tarjeta split ---------- */
.au-shell {
  width: 100%;
  max-width: 1020px;
  min-height: 620px;
  display: flex;
  background: var(--au-card);
  border-radius: var(--au-radius-card);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--au-panel-2) 45%, transparent),
              0 0 0 1px color-mix(in srgb, var(--au-panel-2) 6%, transparent);
  margin: auto;
}

/* ---------- Panel de marca (izquierda) ---------- */
.au-brand {
  width: 400px;
  flex-shrink: 0;
  background: linear-gradient(165deg, var(--au-panel-1) 0%, var(--au-panel-2) 55%, var(--au-panel-3) 100%);
  position: relative;
  padding: 44px 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.au-brand__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}
.au-brand > :not(.au-brand__grid) { position: relative; }

.au-brand__logo { display: flex; align-items: center; gap: 12px; }
.au-brand__mark {
  width: 44px; height: 44px; border-radius: 16px;
  background: linear-gradient(145deg, var(--au-accent), var(--au-accent-dark));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 24px; color: var(--au-mark-text);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.4);
  flex-shrink: 0;
}
.au-brand__logoimg {
  height: 44px; max-width: 190px; width: auto; object-fit: contain;
  flex-shrink: 0;
}
/* Logos oscuros sobre panel oscuro (SuperCars): invertir preservando el tono */
.au--invert-logo .au-brand__logoimg { filter: invert(1) hue-rotate(180deg); }
.au-brand__name {
  font-weight: 700; font-size: 17px; letter-spacing: -.01em;
  color: #fff;
}

/* Contraste explícito: algunos ERPs cargan reglas globales para span/p que
   pisan la herencia del panel oscuro. Estos textos deben permanecer blancos. */
.au-brand__heading,
.au-brand__ftitle { color: #fff; }
.au-brand__fdesc,
.au-brand__uptime { color: rgba(255,255,255,.72); }

.au-brand__heading {
  margin: 44px 0 0;
  font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em;
}

.au-brand__features {
  list-style: none; margin: auto 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.au-brand__features li { display: flex; gap: 14px; align-items: flex-start; }
.au-brand__ficon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 13px;
  /* Íconos del panel de marca en blanco en todas las empresas (06/10/2026). */
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.au-brand__ftitle { display: block; font-weight: 600; font-size: 14px; }
.au-brand__fdesc { display: block; font-size: 12.5px; color: rgba(255,255,255,.45); margin-top: 1px; }

.au-brand__foot {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--au-mono); font-size: 11px; color: rgba(255,255,255,.4);
}
.au-brand__quantis-link { display: inline-flex; }
.au-brand__url { letter-spacing: .1em; color: rgba(255,255,255,.3); }
.au-brand__uptime { display: flex; align-items: center; gap: 7px; }
.au-brand__uptime i { width: 7px; height: 7px; border-radius: 50%; background: var(--au-accent); }
/* Logo Quantis (blanco, PNG cuadrado) en el pie del panel de marca —
   posicionamiento de marca en TODAS las pantallas de auth, también en los
   tenants con marca propia (Contacto App, SuperCars, etc.). A menos de
   ~50px el PNG apilado se vuelve ilegible: mantener ≥54px. */
.au-brand__quantis-link { display: inline-flex; }
.au-brand__quantis { height: 74px; width: auto; opacity: .9; transition: opacity .2s; }
.au-brand__quantis:hover { opacity: 1; }

/* ---------- Formulario (derecha) ---------- */
.au-form {
  flex: 1;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.au-form__inner { max-width: 400px; width: 100%; margin: 0 auto; }
.au-form__inner--wide { max-width: 460px; }

.au-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--au-text); }
.au-sub { margin: 8px 0 30px; font-size: 14.5px; color: var(--au-muted); }

/* campos */
.au-field { margin-bottom: 20px; }
.au-field__label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--au-label); margin-bottom: 8px;
}
.au-field__row {
  display: flex; align-items: center; gap: 11px;
  height: 52px; padding: 0 16px;
  border-radius: var(--au-radius-field);
  background: var(--au-field-bg);
  border: 1.5px solid var(--au-field-border);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.au-field__row input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 15px; color: var(--au-text);
}
.au-field__row input::placeholder { color: var(--au-placeholder); }
.au-field__row input:read-only { color: var(--au-muted); }
.au-field__row:focus-within {
  background: var(--au-card);
  border-color: var(--au-deep-1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--au-accent) 14%, transparent);
}
.au-field__row .au-icon { color: var(--au-muted); flex-shrink: 0; display: flex; }
.au-field__row:focus-within .au-icon { color: var(--au-deep-1); }
.au-field__toggle {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--au-muted); display: flex; flex-shrink: 0;
}
.au-field__toggle .icon-eye-hide { display: none; }
.au-field__row input[type="text"] ~ .au-field__toggle .icon-eye-show { display: none; }
.au-field__row input[type="text"] ~ .au-field__toggle .icon-eye-hide { display: block; }
.au-field__toggle:hover { color: var(--au-label); }
.au-field__toggle [hidden] { display: none; }
.au-field__row input[type="password"] ~ .au-field__toggle .icon-eye-hide,
.au-field__row input[type="text"] ~ .au-field__toggle .icon-eye-show { display: none; }
.erp-svg-sprites { display: none; }

/* estado de error por campo */
.au-field--error .au-field__row {
  background: var(--au-danger-bg);
  border-color: var(--au-danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--au-danger) 12%, transparent);
}
.au-field--error .au-field__row .au-icon { color: var(--au-danger); }

.au-label-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.au-label-row .au-field__label { margin: 0; }
.au-link { font-size: 12.5px; font-weight: 600; color: var(--au-deep-1); text-decoration: none; }
.au-link:hover { text-decoration: underline; }

/* medidor de fuerza (barra continua: register.js le pone .weak/.medium/.strong) */
.au-strength { margin-top: 9px; height: 5px; border-radius: 3px; background: var(--au-field-border); overflow: hidden; }
.au-strength__bar { height: 100%; width: 0; border-radius: 3px; transition: width .25s, background .25s; }
.au-strength__bar.weak   { width: 33%;  background: var(--au-danger); }
.au-strength__bar.medium { width: 66%;  background: #f59e0b; }
.au-strength__bar.strong { width: 100%; background: var(--au-accent-dark); }
.au-hint { font-size: 12px; color: var(--au-muted); margin-top: 6px; }

/* botón principal */
.au-btn {
  width: 100%; height: 54px; border: 0; border-radius: var(--au-radius-field);
  background: linear-gradient(180deg, var(--au-deep-1), var(--au-deep-2));
  color: #fff; font: inherit; font-size: 15.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--au-deep-2) 70%, transparent);
  transition: transform .12s, box-shadow .12s, filter .12s;
  margin-top: 6px;
}
.au-btn:hover { filter: brightness(1.08); box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--au-deep-2) 80%, transparent); }
.au-btn:active { transform: translateY(1px); }
.au-btn:disabled { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
.au-btn svg { stroke: #fff; flex-shrink: 0; }

/* alertas (login-error, register-error, etc.)
   Compatibles con los DOS mecanismos que usa el JS existente:
   style.display='block' (supercars/quantis/crm) y classList.add('show'). */
.au-alert {
  display: none;
  font-size: 13px; font-weight: 500;
  padding: 12px 14px; border-radius: 12px;
  margin: 0 0 16px; line-height: 1.45;
}
.au-alert.show { display: block; }
.au-alert--error {
  color: var(--au-danger);
  background: var(--au-danger-bg);
  border: 1px solid color-mix(in srgb, var(--au-danger) 25%, transparent);
}
.au-alert--success {
  color: var(--au-success);
  background: var(--au-success-bg);
  border: 1px solid color-mix(in srgb, var(--au-success) 25%, transparent);
}

/* pie con badges de confianza */
.au-foot {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--au-divider);
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-family: var(--au-mono); font-size: 11.5px; color: var(--au-muted);
  flex-wrap: wrap;
}
.au-foot .au-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--au-text); opacity: .35; }
.au .au-foot .au-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--au-text);
  font-size: 12px;
  font-weight: 600;
}
.au-foot .au-item svg { stroke: var(--au-accent); }
/* Logo Quantis en el pie del formulario (card blanco): wordmark SVG
   apaisado (logo-quantis.svg) — legible a tamaño chico y visible también
   en mobile, donde el panel de marca se colapsa. */
.au-foot__logo { height: 15px; width: auto; opacity: .9; }

/* volver + nota centrada */
.au-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--au-muted);
  text-decoration: none; margin-bottom: 24px;
}
.au-back:hover { color: var(--au-deep-1); }
.au-note { text-align: center; font-size: 13.5px; color: var(--au-muted); margin: 20px 0 0; }
.au-note a { color: var(--au-deep-1); font-weight: 700; text-decoration: none; }
.au-note a:hover { text-decoration: underline; }

/* banner "Te estás registrando para …" (register) */
.au-prefill {
  display: none; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 18px;
  background: color-mix(in srgb, var(--au-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--au-accent) 22%, transparent);
  color: var(--au-deep-1);
}
.au-prefill svg { flex-shrink: 0; }
.au-prefill__text { display: flex; flex-direction: column; }
.au-prefill__label { font-size: 11.5px; font-weight: 600; color: var(--au-muted); }
.au-prefill__name { font-size: 14px; font-weight: 700; color: var(--au-text); }

/* checkbox de términos (register) */
.au-terms {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 18px;
}
.au-terms input[type="checkbox"] {
  width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--au-accent-dark);
  cursor: pointer;
}
.au-terms label { font-size: 12.5px; color: var(--au-muted); line-height: 1.5; cursor: pointer; }

/* estados de página (success / inválido / loading) */
.au-state { display: none; text-align: center; padding: 8px 0; }
.au-state.show { display: block; }
.au-state__icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  background: color-mix(in srgb, var(--au-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--au-accent) 22%, transparent);
  color: var(--au-accent-dark);
}
.au-state__icon--error {
  background: color-mix(in srgb, var(--au-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--au-danger) 22%, transparent);
  color: var(--au-danger);
}
.au-state__title { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--au-text); }
.au-state__text { font-size: 14px; color: var(--au-muted); margin: 0 0 22px; line-height: 1.55; }

.au-spinner {
  width: 38px; height: 38px; margin: 0 auto;
  border: 3px solid var(--au-field-border);
  border-top-color: var(--au-accent-dark);
  border-radius: 50%;
  animation: au-spin 1s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg); } }

/* fila doble (register: nombre + empresa / password + confirmar) */
.au-row { display: flex; gap: 14px; }
.au-row > .au-field { flex: 1; min-width: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .au-brand { width: 340px; padding: 36px 30px; }
  .au-form { padding: 40px 36px; }
}
@media (max-width: 760px) {
  .au--page, .au--overlay { padding: 0; }
  .au-shell {
    flex-direction: column;
    border-radius: 0;
    min-height: 100vh;
    max-width: none;
  }
  .au-brand {
    width: 100%;
    padding: 18px 22px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .au-brand__heading, .au-brand__features, .au-brand__foot { display: none; }
  .au-form { padding: 28px 22px 40px; justify-content: flex-start; }
  .au-row { flex-direction: column; gap: 0; }
  /* iOS Safari hace zoom automático al enfocar inputs con fuente <16px */
  .au-field__row input { font-size: 16px; }
}
@media (max-width: 420px) {
  .au-title { font-size: 24px; }
  .au-field__row { height: 50px; }
}