/* ============================================================================
   Pantallas de acceso: login, recuperar contraseña y fijar contraseña nueva.

   Son las unicas que no cargan el tema. No lo necesitan —no hay tablas, ni
   modales, ni menu— y sin el arrancan mucho mas livianas, que es justo lo que
   conviene en la primera pantalla que ve alguien.

   Los tokens son los mismos de equity-identidad.css. Si alli cambia la paleta,
   hay que cambiarla aca tambien: son dos archivos independientes a proposito,
   porque estas pantallas no deben depender de que la capa de identidad este
   enlazada.
   ============================================================================ */
:root{
  --eq-ink:#171A21; --eq-ink-2:#454B58; --eq-muted:#6C7382;
  --eq-line:#DCDFE8; --eq-surface:#fff; --eq-bg:#F4F5F8;
  --eq-primary:#3D3A8C; --eq-primary-600:#322F79; --eq-primary-100:#E7E6F5;
  --eq-gold:#C9A227;
  --eq-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --eq-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--eq-sans); color:var(--eq-ink);
  background:var(--eq-bg); -webkit-font-smoothing:antialiased;
}
.pantalla{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:100vh}

/* ─────────── Panel de marca ─────────── */
.marca{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  justify-content:space-between; padding:48px 56px; color:#fff;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(201,162,39,.20) 0%, transparent 55%),
    radial-gradient(100% 80% at 90% 100%, rgba(61,58,140,.85) 0%, transparent 60%),
    linear-gradient(158deg,#3D3A8C 0%,#2B2769 45%,#1A1740 100%);
}
/* trama de panel solar, muy tenue: da textura sin competir con el logo */
.marca::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:150%;
  background-image:
    repeating-linear-gradient(78deg, rgba(255,255,255,.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(168deg, rgba(255,255,255,.055) 0 1px, transparent 1px 46px);
  transform:rotate(-6deg); pointer-events:none;
}
.marca > *{position:relative}
.logo-marco{
  width:108px; height:108px; border-radius:27px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(2px);
}
.logo-marco img{width:82px; height:82px; display:block}
.marca h1{
  margin:26px 0 0; font-size:40px; line-height:1.06; font-weight:600; letter-spacing:-.025em;
}
.marca .lead{margin:14px 0 0; max-width:30ch; font-size:15px; line-height:1.6; color:rgba(255,255,255,.72)}
.marca .sello{
  font-family:var(--eq-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.marca .pie{display:flex; justify-content:space-between; align-items:flex-end; gap:20px}
.marca .pie small{font-size:11.5px; color:rgba(255,255,255,.45)}

/* ─────────── Panel del formulario ─────────── */
.acceso{display:flex; align-items:center; justify-content:center; padding:48px 32px; background:var(--eq-surface)}
.caja{width:100%; max-width:376px}
.caja .kicker{
  font-family:var(--eq-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--eq-muted); margin-bottom:10px;
}
.caja h2{margin:0; font-size:27px; font-weight:600; letter-spacing:-.02em}
.caja .sub{margin:8px 0 30px; font-size:14px; color:var(--eq-muted); line-height:1.55}

.campo{margin-bottom:18px}
.campo label{display:block; font-size:12.5px; font-weight:600; color:var(--eq-ink-2); margin-bottom:7px}
.campo .fila{display:flex; align-items:center; justify-content:space-between; margin-bottom:7px}
.campo .fila a{font-size:12px; color:var(--eq-muted); text-decoration:none}
.campo .fila a:hover{color:var(--eq-primary); text-decoration:underline}
.envoltorio{position:relative}
.envoltorio input{
  width:100%; font-family:var(--eq-sans); font-size:14.5px; color:var(--eq-ink);
  background:var(--eq-surface); border:1px solid var(--eq-line); border-radius:9px;
  padding:12px 14px; transition:border-color .12s, box-shadow .12s;
}
.envoltorio input::placeholder{color:#9CA3AF}
.envoltorio input:focus{outline:0; border-color:var(--eq-primary); box-shadow:0 0 0 3px var(--eq-primary-100)}
.envoltorio.con-ojo input{padding-right:46px}
.ojo{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:34px; height:34px; border:0; background:transparent; border-radius:7px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--eq-muted);
}
.ojo:hover{background:var(--eq-bg); color:var(--eq-ink-2)}
.ojo svg{width:18px; height:18px}
.error{display:none; margin-top:7px; font-size:12.5px; color:#A32E2E}
.campo.mal .envoltorio input{border-color:#D9A2A2}
.campo.mal .error{display:block}

.mayus{
  display:none; margin-top:8px; font-size:12px; color:#9A6714;
  background:#F6ECD8; border-radius:7px; padding:7px 10px;
}
.mayus.ver{display:block}

.entrar{
  width:100%; margin-top:6px; padding:13px 18px; border:0; border-radius:9px; cursor:pointer;
  background:var(--eq-primary); color:#fff; font-family:var(--eq-sans);
  font-size:14.5px; font-weight:600; letter-spacing:.005em;
  transition:background .13s, transform .06s;
}
.entrar:hover{background:var(--eq-primary-600)}
.entrar:active{transform:translateY(1px)}
.entrar[disabled]{opacity:.6; cursor:default}
.legal{margin-top:26px; font-size:11.5px; color:var(--eq-muted); line-height:1.6}
:focus-visible{outline:2px solid var(--eq-primary); outline-offset:2px; border-radius:4px}

/* ─────────── Angosto: la marca pasa a ser una cinta ─────────── */
@media (max-width:900px){
  .pantalla{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .marca{padding:26px 24px; flex-direction:row; align-items:center; justify-content:flex-start; gap:16px}
  .marca::before{display:none}
  .marca > div:first-child{display:none}   /* el sello superior no cabe en la cinta */
  .marca h1{font-size:22px; margin:0}
  .marca .lead, .marca .pie, .marca .sello{display:none}
  .logo-marco{width:60px; height:60px; border-radius:16px; flex:none}
  .logo-marco img{width:44px; height:44px}
  .acceso{padding:36px 22px 56px; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ─────────── Piezas propias del flujo de contraseña ─────────── */

/* Aviso de "revisa tu correo". forgot_password.js lo inyecta con las clases de
   Bootstrap (.card.bg-success), asi que se le da forma desde aca en vez de
   tocar el JS. */
#contenedor .card.bg-success{
  background:#DDF1E7; border:1px solid #BFE3D2; border-radius:9px;
  padding:14px 16px; margin-bottom:22px;
}
#contenedor .card.bg-success .card-body{padding:0}
#contenedor .card.bg-success h4{
  margin:0; font-size:13.5px; font-weight:600; color:#1E7A52; line-height:1.5; text-align:center;
}

.persona{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.persona img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--eq-line)}
.persona .quien{font-size:15px; font-weight:600; letter-spacing:-.01em}
.persona .quien:empty::before{content:"…"; color:var(--eq-muted)}

.pista{margin:-8px 0 18px; font-size:12px; color:var(--eq-muted)}

.vuelta{margin-top:22px; font-size:13px; color:var(--eq-muted); text-align:center}
.vuelta a{color:var(--eq-primary); font-weight:600; text-decoration:none}
.vuelta a:hover{text-decoration:underline}