/* ============================================================
   UWA — Acceso (entrar / login)
   Extraído del inline de entrar.html y retematizado con el
   UWA Design System. Depende de: uwa-design-system.css.
   Nota: el JS usa var(--red)/var(--ok)/var(--muted) para los
   mensajes → se conservan esos tokens.
   ============================================================ */

:root {
  --ink:        var(--uwa-fg);
  --paper:      var(--uwa-bg);
  --muted:      var(--uwa-muted);
  --faint:      #9a9a97;
  --line:       var(--uwa-border);
  --accent:     var(--uwa-accent);
  --accent-dark:var(--uwa-accent-dark);
  --blue:       var(--uwa-accent);   /* alias */
  --red:        #d23b3b;
  --ok:         #1f9d55;
  --r:          var(--uwa-r);
}

body { font-family: var(--uwa-font); background: var(--paper); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }

.brand { padding: 20px 32px; font-family: var(--uwa-font-display); font-weight: 700; font-size: 17px; letter-spacing: -.03em; }
.brand span { color: var(--accent); }

main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 24px 48px; }
.card { width: min(400px, 100%); }

.eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
h1 { font-family: var(--uwa-font-display); font-size: 30px; font-weight: 300; letter-spacing: -.02em; margin-bottom: 6px; }
.sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; line-height: 1.5; }

label { display: block; font-size: 12px; font-weight: 600; margin: 14px 0 6px; }
input { width: 100%; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: var(--r); font-size: 15px; font-family: inherit; outline: none; transition: border-color .12s; }
input:focus { border-color: var(--accent); }

.hidden { display: none; }
.msg { font-size: 12.5px; min-height: 16px; margin-top: 12px; font-weight: 600; }

.btn { width: 100%; margin-top: 20px; padding: 14px; border: 1.5px solid var(--accent); border-radius: var(--r); background: var(--accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn:disabled { opacity: .4; cursor: default; }

.alt { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; }
.alt a { color: var(--accent); text-decoration: none; font-weight: 600; }