/* ÁRTABRO Tender · Executive Light
   Fuente canónica de estilos de autenticación; guía: docs/TENDERHUB_ARCHITECTURE.md.
   Tokens visuales locales: no afectan a la app autenticada ni a la marca de cada organización. */
:root {
  color-scheme: light;
  --t-brand-navy: #101d2e;
  --t-brand-blue: #0086ca;
  --t-brand-blue-rgb: 0, 134, 202;
  --t-brand-cyan: #00a8d5;
  --t-brand-cyan-rgb: 0, 168, 213;
  --t-brand-pearl: #f3f6fa;
  --t-brand-white: #fff;
  --t-ink: var(--t-brand-navy);
  --t-primary: var(--t-brand-blue);
  --t-primary2: var(--t-brand-cyan);
  --t-focus: rgba(var(--t-brand-blue-rgb), .17);
  --t-login-bg: var(--t-brand-pearl);
  --t-login-panel: var(--t-brand-white);
  --t-login-panel-soft: #f8fafc;
  --t-login-border: #e3eaf2;
  --t-login-border-strong: rgba(var(--t-brand-blue-rgb), .45);
  --t-login-shadow: 0 28px 76px rgba(16,29,46,.075), 0 6px 22px rgba(16,29,46,.035);
  --t-login-gradient: linear-gradient(145deg, #e3f0f7 0%, var(--t-brand-pearl) 43%, #eef1fa 100%);
  --t-muted: #61758b;
  --t-success: #126a4a;
  --t-success-bg: #eaf8f0;
  --t-success-br: #bae6cd;
  --t-info: #145779;
  --t-info-bg: #ecf7fc;
  --t-info-br: #c4e6f4;
  --t-warning: #895306;
  --t-warning-bg: #fff8e8;
  --t-warning-br: #f6dfae;
  --t-error: #b42335;
  --t-error-bg: #fff1f2;
  --t-error-br: #f3c6ce;
}
body.page-login { margin:0; min-height:100vh; background:var(--t-login-gradient); color:var(--t-ink); font-family: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
body.page-login [hidden] { display:none!important; }
body.page-login *,body.page-login *::before,body.page-login *::after { box-sizing:border-box; }
.login-stage { position:relative; min-height:100vh; min-height:100dvh; background:var(--t-login-gradient); isolation:isolate; }
.login-bg { display:none; }
.login-overlay { display:none; }
.login-grid { display:none; }
.login-wrap { position:relative; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:clamp(20px,5vh,56px) 20px; }
.login-panel { width:min(456px,100%); border:1px solid rgba(255,255,255,.85); border-radius:24px; overflow:hidden; background:var(--t-login-panel); box-shadow:var(--t-login-shadow); }
.login-brand { padding:30px 36px 8px; }
.login-brand-glow { display:none; }
.login-brand-card { display:flex; align-items:center; justify-content:center; padding:8px 0; }
.login-brand-lockup { width:100%; display:flex; justify-content:center; align-items:center; }
.login-brand-mark { display:block; width:min(100%,280px); height:auto; max-height:100px; object-fit:contain; }
.login-form-area { padding:24px 36px 30px; }
.login-form { display:flex; flex-direction:column; gap:17px; }
.login-message { display:flex; align-items:flex-start; gap:10px; border:1px solid transparent; border-radius:11px; padding:12px 14px; font-size:.86rem; font-weight:600; line-height:1.5; animation:loginFadeIn .18s ease; }
.login-message::before { flex:0 0 auto; line-height:1.4; }
.login-message.success { color:var(--t-success); background:var(--t-success-bg); border-color:var(--t-success-br); }
.login-message.success::before { content:"✓"; }
.login-message.info { color:var(--t-info); background:var(--t-info-bg); border-color:var(--t-info-br); }
.login-message.info::before { content:"ℹ"; }
.login-message.warning { color:var(--t-warning); background:var(--t-warning-bg); border-color:var(--t-warning-br); }
.login-message.warning::before { content:"!"; }
.login-message.error { color:var(--t-error); background:var(--t-error-bg); border-color:var(--t-error-br); }
.login-message.error::before { content:"!"; }
.login-field { display:flex; flex-direction:column; gap:8px; }
.login-label { font-size:.86rem; font-weight:650; color:var(--t-ink); }
.login-inputwrap { position:relative; display:flex; align-items:center; gap:8px; min-height:50px; border:1px solid #d7e1ed; border-radius:11px; background:var(--t-brand-white); transition:border-color .16s ease,box-shadow .16s ease; }
.login-inputwrap:hover { border-color:#afc6db; }
.login-inputwrap:focus-within { border-color:var(--t-brand-blue); box-shadow:0 0 0 4px var(--t-focus); }
.login-field.has-error .login-inputwrap { border-color:var(--t-error); box-shadow:0 0 0 3px rgba(180,35,53,.09); }
.login-field.has-success .login-inputwrap { border-color:var(--t-success); }
.login-field.shake .login-inputwrap { animation:loginShake .26s linear; }
.login-ico { flex:0 0 18px; display:grid; place-items:center; margin-left:15px; color:var(--t-muted); user-select:none; }
.login-ico svg { display:block; width:17px; height:17px; }
.login-input { width:100%; min-width:0; border:0; outline:0; background:transparent; padding:13px 10px; font:inherit; font-size:.94rem; color:var(--t-ink); }
.login-input::placeholder { color:#8997a9; opacity:1; }
.login-input:-webkit-autofill,.login-input:-webkit-autofill:hover,.login-input:-webkit-autofill:focus { -webkit-text-fill-color:var(--t-ink); -webkit-box-shadow:0 0 0 1000px #fff inset; box-shadow:0 0 0 1000px #fff inset; }
.login-help,.login-error,.login-caps { font-size:.77rem; line-height:1.45; padding:0 1px; }
.login-help { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.login-error { color:var(--t-error); font-weight:600; }
.login-error:empty { display:none; }
.login-caps { color:var(--t-warning); font-weight:600; }
.login-passwrap .login-input { padding-right:52px; }
.login-passbtn { position:absolute; top:50%; right:6px; transform:translateY(-50%); width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; cursor:pointer; transition:background .16s ease; }
.login-passbtn:hover { background:var(--t-login-panel-soft); }
.login-passbtn:focus-visible,.login-link:focus-visible { outline:2px solid var(--t-brand-blue); outline-offset:3px; }
.login-passbtn img { display:block; width:19px; height:19px; }
.login-cta { display:flex; flex-direction:column; gap:18px; margin-top:15px; }
.login-btn { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; padding:13px 16px; border:0; border-radius:11px; color:white; font:inherit; font-size:.91rem; font-weight:700; text-decoration:none; background:linear-gradient(105deg,var(--t-brand-blue),#0076b5); cursor:pointer; overflow:hidden; transition:background .16s ease,box-shadow .16s ease,transform .16s ease; }
.login-btn:hover { background:var(--t-brand-blue); box-shadow:0 8px 20px rgba(var(--t-brand-blue-rgb),.16); transform:translateY(-1px); }
.login-btn:focus-visible { outline:3px solid var(--t-focus); outline-offset:3px; }
.login-btn:disabled { opacity:.65; cursor:not-allowed; transform:none; }
.login-btn-content { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.login-btn-spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:white; border-radius:50%; animation:loginSpin .8s linear infinite; }
.login-btn-shine { display:none; }
.login-link { align-self:center; padding:2px; border:0; background:transparent; color:var(--t-info); font:inherit; font-size:.86rem; font-weight:600; text-align:center; cursor:pointer; text-decoration:none; }
.login-link:hover { text-decoration:underline; }
.login-foot { display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 36px 17px; text-align:center; font-size:.76rem; color:var(--t-muted); border-top:1px solid var(--t-login-border); background:var(--t-login-panel-soft); }
.login-company-mark { display:block; width:148px; max-width:65%; height:auto; object-fit:contain; }
@keyframes loginSpin { to { transform:rotate(360deg); } }
@keyframes loginShake { 0%,100% {transform:translateX(0)} 25% {transform:translateX(-4px)} 50% {transform:translateX(4px)} 75% {transform:translateX(-3px)} }
@keyframes loginFadeIn { from {opacity:0;transform:translateY(-4px)} to {opacity:1;transform:translateY(0)} }
/* Contrato compartido: restablecimiento de contraseña */
.page-password-reset .reset-panel { width:min(480px,100%); }
.reset-form-area { padding-top:8px; padding-bottom:28px; }
.reset-heading { margin-bottom:22px; }
.reset-eyebrow { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--t-info-br); background:var(--t-info-bg); color:var(--t-info); font-size:.72rem; font-weight:750; letter-spacing:.075em; text-transform:uppercase; }
.reset-title { margin:14px 0 0; font-size:1.65rem; line-height:1.2; letter-spacing:-.03em; font-weight:750; color:var(--t-ink); }
.reset-subtitle { margin:10px 0 0; font-size:.9rem; line-height:1.6; color:var(--t-muted); }
.reset-subtitle strong { color:var(--t-ink); }
.reset-strength { display:flex; align-items:center; gap:10px; margin-top:-2px; font-size:.78rem; font-weight:600; color:var(--t-muted); }
.reset-strength-track { flex:1; height:6px; overflow:hidden; border-radius:999px; background:var(--t-login-border); }
.reset-strength-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--t-error),#f59e0b,var(--t-brand-blue),var(--t-brand-cyan)); transition:width .18s ease; }
.reset-strength-track span[data-score="1"] { width:25%; }
.reset-strength-track span[data-score="2"] { width:50%; }
.reset-strength-track span[data-score="3"] { width:75%; }
.reset-strength-track span[data-score="4"] { width:100%; }
.reset-actions { margin-top:8px; }
.reset-back-link { display:inline-flex; justify-content:center; padding:4px; }
.reset-state-card { padding:14px 4px 8px; text-align:center; }
.reset-state-card .reset-eyebrow { margin-top:14px; }
.reset-state-icon { display:grid; place-items:center; width:68px; height:68px; margin:0 auto; border-radius:20px; border:1px solid var(--t-info-br); background:var(--t-info-bg); font-size:1.65rem; }
.reset-primary-link { width:auto; min-width:220px; margin-top:22px; }
.reset-success-card .reset-state-icon { background:var(--t-success-bg); border-color:var(--t-success-br); }
.reset-pass-toggle img { pointer-events:none; }
@media(max-width:480px) {
  .login-wrap { padding:18px 14px; }
  .login-panel { border-radius:19px; }
  .login-brand { padding:24px 24px 8px; }
  .login-form-area { padding:24px 24px 26px; }
  .login-foot { padding:14px 24px 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .login-inputwrap,.login-btn,.login-passbtn,.reset-strength-track span,.login-field.shake .login-inputwrap,.login-message,.login-btn-spinner { transition:none!important; animation:none!important; }
}