/* Auth pages — usa las variables CSS del tema del proyecto */
.auth-page{
  min-height:80vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 16px;
  background:var(--t-bg,#f8f9fb);
}
.auth-card{
  background:var(--t-panel,#fff);
  border:1px solid var(--t-line,#e2e8f0);
  border-radius:var(--t-radius,20px);
  padding:40px 36px;
  width:100%;max-width:440px;
  box-shadow:0 12px 40px -8px color-mix(in srgb, var(--t-accent,#2b7a78) 22%, transparent);
  color:var(--t-text,#0f172a);
}
.auth-brand{
  display:block;text-align:center;
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--t-accent,#2b7a78);text-decoration:none;margin-bottom:18px;
}
.auth-card h1,.auth-title{
  text-align:center;font-size:1.7rem;font-weight:800;letter-spacing:-.01em;
  color:var(--t-accent,#0f172a);margin:0 0 6px;
}
.auth-sub{text-align:center;font-size:.92rem;line-height:1.5;color:var(--t-text-dim,#64748b);margin-bottom:28px}
.auth-field,.field{margin-bottom:16px}
.auth-field label,.field label{
  display:block;font-size:.82rem;font-weight:700;
  color:var(--t-text,#374151);margin-bottom:6px;
}
.auth-field input,.field input[type=text],.field input[type=password],.field input[type=email]{
  width:100%;padding:11px 14px;
  border:1.5px solid var(--t-line,#e2e8f0);
  border-radius:9px;font-size:16px;font-family:inherit;
  color:var(--t-text,#0f172a);
  background:var(--t-bg,#f8f9fb);
  outline:none;transition:.15s;box-sizing:border-box;
}
.auth-field input:focus,.field input:focus{
  border-color:var(--t-accent,#2b7a78);
  box-shadow:0 0 0 3px var(--t-accent-mid,rgba(43,122,120,.12));
}
.auth-field .helptext,.field-help,.auth-field-help{font-size:.76rem;color:var(--t-muted,#94a3b8);margin-top:4px}
.errorlist,.non-field-errors{
  background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.2);
  border-radius:8px;padding:8px 12px;margin:4px 0 8px;list-style:none;
  font-size:.82rem;color:#dc2626;
}
.auth-btn,.btn-login,.btn-reg{
  width:100%;
  background:var(--t-accent,#2b7a78);color:#fff;
  border:none;border-radius:var(--t-radius-sm,9px);padding:14px;
  font-size:1rem;font-weight:700;cursor:pointer;
  box-shadow:0 4px 0 0 var(--t-accent-hover,#0c6249);
  transition:transform .12s,box-shadow .12s;font-family:inherit;margin-top:8px;
}
.auth-btn:hover,.btn-login:hover,.btn-reg:hover{transform:translateY(-1px)}
.auth-btn:active,.btn-login:active,.btn-reg:active{transform:translateY(2px);box-shadow:0 2px 0 0 var(--t-accent-hover,#0c6249)}
.auth-divider,.login-divider{display:flex;align-items:center;gap:10px;margin:20px 0}
.auth-divider::before,.auth-divider::after,
.login-divider::before,.login-divider::after{
  content:'';flex:1;height:1px;background:var(--t-line,#e2e8f0);
}
.auth-divider span,.login-divider span{font-size:.75rem;color:var(--t-muted,#94a3b8)}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:11px;
  border:1.5px solid var(--t-line,#e2e8f0);border-radius:9px;
  background:var(--t-panel,#fff);color:var(--t-text,#374151);
  font-weight:600;font-size:.9rem;text-decoration:none;transition:.15s;font-family:inherit;
}
.btn-google:hover{background:var(--t-accent-faint,#f8fafc);border-color:var(--t-accent,#cbd5e1)}
.auth-footer,.back-link,.links{
  margin-top:20px;text-align:center;font-size:.82rem;
  color:var(--t-muted,#64748b);
}
.auth-footer a,.back-link a,.links a{color:var(--t-accent,#2b7a78);font-weight:600;text-decoration:none}
.msg-success,.msg-ok{
  background:rgba(34,197,94,.1);color:#065f46;
  border-left:3px solid #22c55e;
  padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:.875rem;
}
@media(max-width:480px){
  .auth-card{padding:28px 20px}
  .auth-page{align-items:flex-start;padding-top:32px}
}

/* 2026-07-15: panel lateral de confianza (mockup de Stitch) - compartido
   por login.html y register.html via partials/_auth_side.html. */
.auth-page--split{
  gap:0;
  align-items:stretch;
  padding:0;
}
.auth-page--split .auth-card{
  margin:auto;
}
.auth-side{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  background:radial-gradient(circle at 50% 35%, var(--t-accent-faint,rgba(15,122,92,.12)) 0%, transparent 65%), var(--t-bg,#fdfaf3);
  padding:3rem 2rem;
  flex:1;
  max-width:480px;
}
.auth-side__img{width:220px;height:auto;filter:drop-shadow(0 12px 24px color-mix(in srgb, var(--t-accent,#0f7a5c) 20%, transparent))}
.auth-side__titulo{
  font-weight:700;
  font-size:1.1rem;
  color:var(--t-text);
  text-align:center;
  margin:0;
}
.auth-side__bullets{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  width:100%;
  max-width:320px;
}
.auth-side__bullets li{
  background:var(--t-panel);
  border:1px solid var(--t-line);
  border-radius:.75rem;
  padding:.7rem 1rem;
  font-size:.85rem;
  color:var(--t-text);
}
@media(min-width:900px){
  .auth-page--split{ flex-direction:row; }
  .auth-side{ display:flex; }
}

/* 2026-07-17: modo oscuro probado y revertido - a Eduardo no le convenció
   viéndolo en vivo ("no va bien"), aunque el mockup de Stitch le había
   gustado. Vuelta al único tema claro. Si se retoma en el futuro, el
   enfoque de redefinir las variables --t-* dentro de .auth-page (en vez de
   sobrescribir cada regla suelta) funcionaba bien técnicamente - el
   problema fue de resultado visual, no de implementación. */