/* ============================================================
   auth.css — Sistema visual común de autenticación · Senis Suite
   Usado por: login, registro, forgot_password, reset_password,
   mfa_verificar, aceptar_invitacion (vía auth_base.html)
   ============================================================ */
:root{
  --gold:#C8922D;
  --gold-hi:#f0c674;
  --field:#141419;
  --field-focus:#17171e;
  --txt:#f4f4f6;
  --txt-mut:rgba(244,244,246,.55);
  --txt-dim:rgba(244,244,246,.5);  /* subido desde .36: a .36 el placeholder daba ~3.1:1 de contraste, bajo AA (4.5:1) */
  --line:rgba(255,255,255,.06);
  --gold-border:rgba(200,146,45,.18);   /* (1) borde fino, opacidad baja */
  --card-w:452px;      /* login, forgot, reset, mfa, invitación */
  --card-w-wide:484px; /* registro (más campos + Turnstile) */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

.auth-body{
  font-family:'Geist','Inter',system-ui,sans-serif;
  min-height:100vh;min-height:100dvh;              /* piso, no techo: si el contenido es más
    alto que el viewport (ej. registro), el body crece y la página scrollea normal */
  display:flex;align-items:center;justify-content:center;
  padding:2rem 1.5rem;color:var(--txt);-webkit-font-smoothing:antialiased;
  /* (2) glow de fondo ~18% más tenue */
  background:
    radial-gradient(1100px 620px at 50% 42%, rgba(200,146,45,.082), transparent 60%),
    radial-gradient(900px 900px at 50% 120%, rgba(200,146,45,.04), transparent 55%),
    linear-gradient(180deg,#070709 0%, #0b0b11 55%, #08080d 100%);
  position:relative;
  overflow-x:hidden;   /* contiene el resplandor decorativo; overflow-y queda libre a propósito
    — con overflow-y:hidden el contenido más alto que el viewport (registro) quedaba
    inalcanzable con scroll (botón "Crear cuenta" no llegaba a verse). */
}
.auth-body::before{
  content:"";position:absolute;width:560px;height:560px;top:50%;left:50%;
  transform:translate(-50%,-52%);
  background:radial-gradient(circle, rgba(200,146,45,.13) 0%, rgba(200,146,45,.04) 38%, transparent 68%);
  filter:blur(14px);pointer-events:none;z-index:0;
}
.auth-wrap{width:100%;max-width:var(--card-w);position:relative;z-index:1;}
/* Registro puede superar el viewport: parte tras el padding superior y conserva scroll natural. */
.auth-wrap.is-wide{max-width:var(--card-w-wide);align-self:flex-start;}

.auth-card{
  position:relative;
  background:linear-gradient(160deg,#16161d 0%, #101015 100%);
  border:1px solid var(--gold-border);border-radius:22px;
  padding:2.6rem 2.5rem 2.3rem;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 70px -20px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4);
}
.auth-card::before{  /* filo dorado superior, aún más sutil */
  content:"";position:absolute;inset:0;border-radius:22px;padding:1px;
  background:linear-gradient(180deg, rgba(200,146,45,.28), rgba(200,146,45,0) 34%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* (3) logo con presencia pero sin ocupar de más */
.auth-logo{display:flex;justify-content:center;margin-bottom:1.7rem;}
.auth-logo img{display:block;height:62px;object-fit:contain;max-width:252px;
  filter:drop-shadow(0 4px 14px rgba(200,146,45,.18));}

.auth-title{font-size:1.5rem;font-weight:700;text-align:center;letter-spacing:-.01em;margin-bottom:.45rem;}
.auth-subtitle{font-size:.86rem;color:var(--txt-mut);text-align:center;margin-bottom:1.9rem;line-height:1.5;}

.field{margin-bottom:1.1rem;}
label{display:block;font-size:.66rem;font-weight:600;color:var(--gold);
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:.5rem;}
.input-shell{position:relative;display:flex;align-items:center;background:var(--field);
  border:1px solid rgba(255,255,255,.09);border-radius:12px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;}
.input-shell:focus-within{border-color:var(--gold);background:var(--field-focus);
  box-shadow:0 0 0 3px rgba(200,146,45,.16), 0 0 22px -6px rgba(200,146,45,.28);}
.input-shell .lead{position:absolute;left:14px;display:flex;color:var(--gold);opacity:.85;pointer-events:none;}
.input-shell input{width:100%;padding:13px 14px 13px 44px;background:transparent;border:none;outline:none;
  font-family:inherit;font-size:16px;color:var(--txt);border-radius:12px;}
  /* 16px mínimo: bajo ese umbral Safari iOS hace zoom automático al enfocar el campo */
.input-shell input::placeholder{color:var(--txt-dim);}
.input-shell.has-toggle input{padding-right:50px;}
.input-shell.no-icon input{padding-left:14px;}
.input-shell.code input{padding:13px 14px;text-align:center;letter-spacing:.35em;
  font-size:1.15rem;font-family:'Geist Mono','Geist',monospace;}
.toggle{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:44px;height:44px;
  background:none;border:none;cursor:pointer;color:var(--txt-dim);
  display:flex;align-items:center;justify-content:center;border-radius:10px;transition:color .15s;}
  /* 44px: área táctil mínima recomendada — el ícono visual (19px) queda igual, centrado adentro */
.toggle:hover{color:var(--txt-mut);}
.toggle:focus-visible{outline:2px solid var(--gold);outline-offset:1px;color:var(--txt-mut);}

/* (7) Autofill Chrome/Edge — mantiene fondo/textos oscuros, no blanco/celeste */
.input-shell input:-webkit-autofill,
.input-shell input:-webkit-autofill:hover,
.input-shell input:-webkit-autofill:focus,
.input-shell input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--txt);
  -webkit-box-shadow:0 0 0 60px var(--field-focus) inset;
  box-shadow:0 0 0 60px var(--field-focus) inset;
  caret-color:var(--txt);
  transition:background-color 9999s ease-out 0s;   /* frena el flash celeste */
}

/* fila recordarme / olvidaste */
.options{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin:.3rem 0 1.5rem;font-size:.82rem;}
.forgot{display:inline-flex;align-items:center;color:var(--gold);text-decoration:none;font-weight:500;white-space:nowrap;
  padding:.4rem 0;}  /* área táctil >24px de alto (mínimo WCAG), padding real — evita sorpresas de colapso de márgenes */
.forgot:hover{text-decoration:underline;}

/* (8) Checkbox dorado personalizado y accesible — Recordarme / consentimiento / MFA */
.check{display:flex;align-items:flex-start;gap:.6rem;color:var(--txt-mut);cursor:pointer;user-select:none;
  text-transform:none;letter-spacing:normal;font-weight:400;font-size:.82rem;line-height:1.5;
  padding:.4rem 0;}  /* área táctil >24px de alto (mínimo WCAG), padding real — evita sorpresas de colapso de márgenes */
.check-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}  /* visible al teclado, no al mouse */
.check-box{width:17px;height:17px;flex:0 0 auto;margin-top:1px;position:relative;
  border:1.5px solid rgba(255,255,255,.24);border-radius:5px;background:transparent;transition:.15s;cursor:pointer;}
.check-box::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;
  border:solid #2a1e07;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s;}
.check-input:checked + .check-box{background:var(--gold);border-color:var(--gold);}
.check-input:checked + .check-box::after{transform:rotate(45deg) scale(1);}
.check-input:focus-visible + .check-box{outline:none;box-shadow:0 0 0 3px rgba(200,146,45,.28);}
.check-text{margin:0;}
.check-text a{color:var(--gold);text-decoration:none;}
.check-text a:hover{text-decoration:underline;}

/* Turnstile: contenedor integrado, sin tocar el widget interno */
.turnstile-slot{margin:.2rem 0 1.3rem;}
.turnstile-slot .cf-turnstile{width:100%;border-radius:10px;overflow:hidden;}
/* data-size="flexible" hace que el widget ocupe el ancho del contenedor en vez
   de un ancho fijo de 300px — evita que se corte en tarjetas de móvil angostas. */

.btn{position:relative;width:100%;padding:14px;font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:.01em;
  color:#2a1e07;background:linear-gradient(180deg,#e9c169 0%, #d4a13f 48%, #c08b2c 100%);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.4rem;   /* (5) ícono más cerca del texto */
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -10px rgba(200,146,45,.6);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 14px 30px -10px rgba(200,146,45,.7);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;}
.btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform .18s ease;}  /* (5) flecha más pequeña */
.btn:hover svg{transform:translateX(2px);}

/* (9) Alertas premium — mismas clases que inserta auth_validation.js.
   No dependen solo del color: llevan ícono y texto. */
.error,.success{font-size:.82rem;padding:.7rem .85rem;border-radius:11px;margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.55rem;line-height:1.4;}
.error{background:rgba(220,38,38,.10);border:1px solid rgba(220,38,38,.26);color:#f2b0b0;}
.success{background:rgba(200,146,45,.10);border:1px solid rgba(200,146,45,.28);color:#e7c987;}
.error svg,.success svg{flex:0 0 auto;}
/* fallback de ícono cuando el mensaje lo inserta el JS (sin <svg>) */
.error.js-form-error::before{content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:0 0 auto;border:1.5px solid currentColor;border-radius:50%;
  font-size:.68rem;font-weight:700;}

/* (4) divisor "o" aún más discreto — no compite con el botón ni los enlaces */
.divider{display:flex;align-items:center;gap:.9rem;margin:1.4rem 0 1rem;}
.divider::before,.divider::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);}
.divider span{font-size:.68rem;color:rgba(244,244,246,.3);}

.auth-links{text-align:center;font-size:.86rem;color:var(--txt-mut);}
.auth-links a{color:var(--gold);text-decoration:none;font-weight:600;}
.auth-links a:hover{text-decoration:underline;}
.auth-links.muted a{color:var(--txt-mut);font-weight:500;}

.auth-hint{text-align:center;font-size:.78rem;color:var(--txt-dim);margin-top:1.15rem;line-height:1.6;}
.auth-hint a{color:var(--gold);text-decoration:none;}
.auth-hint a:hover{text-decoration:underline;}

/* ---- Prueba finalizada (trial_vencido.html) ----
   Panel de retención: confirma que la cartera cargada durante la prueba se
   conserva. Verde (no dorado ni rojo) a propósito — es una tranquilidad, no
   una alerta ni el CTA, que es el botón de abajo. */
.trial-keep{display:flex;align-items:flex-start;gap:.7rem;
  background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.22);
  border-radius:12px;padding:.9rem 1rem;margin-bottom:1.4rem;}
.trial-keep-icon{display:flex;flex:0 0 auto;color:#34d399;margin-top:1px;}
.trial-keep-title{font-size:.86rem;font-weight:600;color:var(--txt);line-height:1.4;margin-bottom:.25rem;}
.trial-keep-text{font-size:.78rem;color:var(--txt-mut);line-height:1.55;}

/* Colaborador: no puede contratar, solo se le indica a quién avisar. */
.trial-note{font-size:.83rem;color:var(--txt-mut);line-height:1.6;text-align:center;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:.95rem 1rem;}
.trial-note strong{color:var(--txt);font-weight:600;word-break:break-word;}

.auth-footer{display:flex;align-items:center;justify-content:center;gap:.45rem;
  margin-top:1.5rem;font-size:.75rem;color:var(--txt-dim);text-align:center;}
.auth-footer svg{color:var(--gold);opacity:.8;flex:0 0 auto;}

/* ---- Responsive ancho ---- */
@media(max-width:480px){
  .auth-card{padding:2.1rem 1.4rem 1.9rem;border-radius:18px;}
  .auth-title{font-size:1.38rem;}
  .auth-logo img{height:58px;}
}

/* ---- (6) Responsive ALTURA — notebooks con poca altura útil ----
   Compacta espacios para que login, forgot y MFA entren sin scroll.
   Registro (.is-wide) queda EXCLUIDO a propósito: nunca se comprime,
   solo hace scroll natural — por eso todo aquí va con :not(.is-wide). */
@media(max-height:760px){
  .auth-body{padding:1rem;}
  .auth-wrap:not(.is-wide) .auth-card{padding:1.9rem 2.3rem 1.7rem;}
  .auth-wrap:not(.is-wide) .auth-logo{margin-bottom:1.15rem;}
  .auth-wrap:not(.is-wide) .auth-logo img{height:56px;}
  .auth-wrap:not(.is-wide) .auth-subtitle{margin-bottom:1.35rem;}
  .auth-wrap:not(.is-wide) .field{margin-bottom:.85rem;}
  .auth-wrap:not(.is-wide) .options{margin:.2rem 0 1.1rem;}
  .auth-wrap:not(.is-wide) .divider{margin:1.05rem 0 .8rem;}
  .auth-wrap:not(.is-wide) .auth-footer{margin-top:1.15rem;}
}
@media(max-height:640px){
  .auth-wrap:not(.is-wide) .auth-logo img{height:54px;}
  .auth-wrap:not(.is-wide) .auth-subtitle{margin-bottom:1.1rem;}
  .auth-wrap:not(.is-wide) .field{margin-bottom:.7rem;}
}