/* libreria/css/style_gt/login.css
   Estilos exclusivos de auth/ (login, forgot_password, recover_password).
   Extraído de Login_v1_10.html. Requiere tokens.css cargado antes.
*/
body { font-family:var(--body); color:var(--texto); font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased; }

.login-wrap { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }

/* ── PANEL IZQUIERDO: marca ── */
.brand-panel {
  background:linear-gradient(160deg,#1e3f63 0%, var(--azul-ley) 55%, #14283f 100%);
  color:#fff; display:flex; flex-direction:column; justify-content:space-between;
  padding:48px; position:relative; overflow:hidden;
}
.brand-panel::before {
  content:''; position:absolute; top:-80px; right:-80px; width:280px; height:280px;
  background:radial-gradient(circle, rgba(212,168,67,.18) 0%, transparent 70%); border-radius:50%;
}
.brand-panel::after {
  content:''; position:absolute; bottom:-100px; left:-60px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%); border-radius:50%;
}
.brand-mark { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.brand-icon { width:44px; height:44px; background:var(--acento); border-radius:10px; display:grid; place-items:center; font-size:22px; box-shadow:0 2px 8px rgba(212,168,67,.35); }
.brand-name { font-family:var(--disp); font-size:19px; font-weight:700; }
.brand-sub { font-size:10.5px; color:rgba(255,255,255,.5); letter-spacing:1.2px; text-transform:uppercase; margin-top:2px; }
.brand-quote { position:relative; z-index:1; max-width:380px; }
.brand-quote p { font-family:var(--disp); font-size:24px; font-weight:600; line-height:1.35; margin-bottom:14px; }
.brand-quote span { font-size:12.5px; color:rgba(255,255,255,.55); }
.brand-foot { position:relative; z-index:1; font-size:11px; color:rgba(255,255,255,.4); }

/* ── PANEL DERECHO: formulario ── */
.form-panel { background:var(--gris-papel); display:flex; align-items:center; justify-content:center; padding:32px; }
.login-card { width:100%; max-width:360px; background:var(--blanco); border:1px solid var(--gris-linea); border-radius:16px; padding:32px 30px; box-shadow:var(--elev4); }
.login-head { text-align:center; margin-bottom:26px; }
.login-head .mobile-mark { display:none; align-items:center; justify-content:center; gap:8px; margin-bottom:16px; }
.login-head h1 { font-family:var(--disp); font-size:19px; font-weight:700; color:var(--texto); margin-bottom:4px; }
.login-head p { font-size:12px; color:var(--gris-medio); }

.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
.form-label { font-size:11px; font-weight:600; color:var(--gris-medio); text-transform:uppercase; letter-spacing:.6px; }
.form-control { padding:10px 13px; border:1px solid var(--gris-linea); border-radius:8px; font-size:13px; font-family:inherit; color:var(--texto); background:var(--blanco); transition:all .15s ease; width:100%; }
.form-control:focus { border-color:var(--azul-tinta); box-shadow:0 0 0 3px rgba(37,99,168,.12); outline:none; }
.pwd-wrap { position:relative; }
.pwd-toggle { position:absolute; right:11px; top:50%; transform:translateY(-50%); background:none; border:0; font-size:14px; color:var(--gris-medio); padding:2px; }

.login-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; font-size:12px; }
.remember { display:flex; align-items:center; gap:7px; color:var(--texto-suave); }
.remember input { accent-color:var(--azul-tinta); width:14px; height:14px; }
.forgot-link { color:var(--azul-tinta); font-weight:600; text-decoration:none; }
.forgot-link:hover { text-decoration:underline; }

.btn-login { width:100%; padding:11px; border-radius:999px; background:var(--azul-tinta); color:#fff; font-size:13px; font-weight:600; box-shadow:0 1px 2px rgba(37,99,168,.3); transition:all .18s ease; }
.btn-login:hover { background:var(--azul-tinta-soft); }
.btn-login:active { transform:translateY(1px); }

.err-box { display:none; background:var(--alerta-roja-bg); border:1px solid #fecaca; color:#991b1b; font-size:11.5px; border-radius:8px; padding:10px 12px; margin-bottom:16px; align-items:center; gap:8px; }
.err-box.show { display:flex; }

/* Mismo bloque en verde, para confirmaciones (cuenta activada, contraseña
   cambiada). Antes cada pantalla lo resolvía pisando .err-box con estilos
   en línea; esta clase evita repetir esos tres colores en cada archivo. */
.ok-box { display:none; background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; font-size:11.5px; border-radius:8px; padding:10px 12px; margin-bottom:16px; align-items:center; gap:8px; }
.ok-box.show { display:flex; }

.login-foot { text-align:center; margin-top:22px; font-size:11px; color:var(--gris-medio); }

@media (max-width:860px) {
  .login-wrap { grid-template-columns:1fr; }
  .brand-panel { display:none; }
  .login-head .mobile-mark { display:flex; }
}

/* Mostrar / ocultar contraseña (libreria/js/mostrar_password.js, 27-sep-2026) */
.pwd-wrap { position:relative; display:block; width:100%; }
.pwd-wrap > input { width:100%; padding-right:42px !important; }
.pwd-toggle { position:absolute; top:50%; right:6px; transform:translateY(-50%); width:32px; height:32px; border:0; background:transparent; border-radius:8px; color:var(--gris-medio); display:grid; place-items:center; cursor:pointer; }
.pwd-toggle:hover { color:var(--azul-tinta); background:rgba(37,99,168,.08); }
.pwd-toggle:focus-visible { outline:2px solid var(--azul-tinta); outline-offset:1px; }
input::-ms-reveal, input::-ms-clear { display:none; }  /* Edge trae su propio ojo: se oculta para no ver dos */

/* Pie «Desarrollado por…» (v57): el login no carga style.css, por eso el enlace
   salía con el estilo por defecto del navegador (azul, subrayado, grande). */
.powered-by--login { text-align:center; margin-top:14px; font-size:11px; line-height:1.3; color:var(--gris-medio); letter-spacing:.2px; }
.powered-by--login a { color:inherit; text-decoration:none; opacity:.85; }
.powered-by--login a:hover { text-decoration:underline; opacity:1; }