:root {
  color-scheme: light;
  --border: #E1E9E4;
  --bg-card: #ffffff;
  --bg-page: #F4F7F5;
  --text: #33403D;
  --text-muted: #7C8A85;
  --accent: #4F7A6F;
  --accent-hover: #436A60;
  --accent-soft: #E8F0EC;
  --crisis: #A6534B;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-page); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 24px;
}
.auth-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 32px; width: 100%; max-width: 360px; box-shadow: 0 2px 12px rgba(60,90,80,0.06);
}
.auth-card h1.brand-heading { margin: 0 0 18px 0; text-align: center; }
.auth-card h1.brand-heading .brand-logo { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.auth-card h1 { font-size: 19px; margin: 0 0 4px 0; font-weight: 650; }
.auth-card p.sub { font-size: 13px; color: var(--text-muted); margin: 0 0 22px 0; }
.auth-card label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; margin-top: 14px; }
.auth-card label:first-of-type { margin-top: 0; }
.auth-card input {
  width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; box-sizing: border-box;
}
.auth-card button {
  width: 100%; padding: 11px; background: var(--accent); color: white; border: none;
  border-radius: 8px; cursor: pointer; font-size: 14px; margin-top: 20px;
}
.auth-card button:hover { background: var(--accent-hover); }
.auth-card .err { color: var(--crisis); font-size: 13px; margin-top: 12px; }
.auth-card .info { background: var(--accent-soft); color: var(--accent-hover); font-size: 13px; padding: 10px 12px; border-radius: 8px; margin-top: 14px; }
.auth-card .switch { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 18px; }
.auth-card .switch a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-card .switch a:hover { text-decoration: underline; }

/* v29: icono de ojo para mostrar/ocultar contraseña (ver auth.js).
   v30.5: el botón tenía un ancho variable según cómo el sistema dibujara el
   emoji, y a veces se comía unos pixeles del texto de la contraseña. Ahora
   el botón tiene un tamaño fijo y el input reserva más espacio del que
   necesita, para que nunca se toquen. */
.pw-field { position: relative; }
.pw-field input { padding-right: 44px !important; }
.pw-toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1;
  padding: 0; color: var(--text-muted);
}
.pw-toggle:hover { color: var(--text); }