/* Login. Extraído del <style> inline de views/login.html — Fase 2
   reducción de HTML embebido (docs/REDUCCION-EMBEBIDO.md). Reglas sin cambios;
   se carga DESPUÉS de portal-ui.css, preservando la cascada. */
:root {
  /* Colores, --font, --shadow y --bg-hi vienen de portal-ui.css. Login sólo
     achica el radio: cajas y botón un poco menos redondeados que el resto. */
  --radius: 10px; --radius-sm: 7px;
}
[data-theme="light"] {
  /* El remapeo del tema claro completo está en portal-ui.css; login sólo baja
     --turno para su marca (el dorado no contrasta sobre blanco). */
  --turno: #b45309;
}
[data-theme="light"] .msg.err {
  background: rgba(185,28,28,.08); border-color: rgba(185,28,28,.35); color: #b91c1c;
}
[data-theme="light"] .aviso {
  background: rgba(180,83,9,.10); border-color: rgba(180,83,9,.35); color: #8a5305;
}
.tema-btn {
  position: fixed; top: 16px; right: 16px;
  border: 1px solid var(--line); background: var(--panel); color: var(--txt-dim);
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tema-btn:hover { background: var(--panel-2); color: var(--txt); }
.tema-btn svg { display: block; }
/* Reset y base de body (fondo, color, tipografía, antialias) en portal-ui.css.
   Login sólo agrega su layout propio: centrado a pantalla completa. */
html, body { height: 100% !important; }
body {
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 24px; min-height: 100vh !important;
}
.card { width: 100%; max-width: 380px; }
.brand { text-align: center; margin-bottom: 22px; }
.brand .mark { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.brand .mark b { color: var(--turno); }
.brand .sub { font-size: 11.5px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }
.box h1 { font-size: 16px; font-weight: 700; margin: 0 0 4px; text-align: center; }
.box .lead { font-size: 12.5px; color: var(--txt-dim); margin: 0 0 18px; text-align: center; }
.row { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; }
.row label { font-size: 12px; color: var(--txt-dim); font-weight: 600; text-align: center; }
.row input {
  background: var(--panel); border: 1px solid var(--line); color: var(--txt);
  border-radius: var(--radius-sm); padding: 11px 12px; font-size: 14px; font-family: inherit; width: 100%;
  text-align: center;
}
.row input:focus { outline: none; border-color: var(--accent); }
.btn {
  width: 100%; justify-content: center; border: 1px solid var(--accent); background: var(--accent); color: #06231f;
  padding: 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; margin-top: 4px; transition: .12s;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn:disabled { opacity: .55; cursor: default; }
.msg { display: none; margin-top: 14px; font-size: 12.5px; padding: 10px 12px; border-radius: var(--radius-sm); }
.msg.err { display: block; background: rgba(249,115,98,.12); border: 1px solid rgba(249,115,98,.35); color: #f7b3a8; }
.aviso { display: none; margin-bottom: 16px; font-size: 12.5px; padding: 10px 12px; border-radius: var(--radius-sm);
         background: rgba(240,180,41,.10); border: 1px solid rgba(240,180,41,.35); color: #f0d08a; }
.aviso.on { display: block; }
.foot { text-align: center; margin-top: 16px; font-size: 11.5px; color: var(--txt-faint); }
.foot .lock { color: var(--txt-dim); }

/* Login con Google (docs/ACCESO-DEGRADADO.md): separador "o" y contenedor del botón GIS
   (el botón lo dibuja Google; acá sólo se centra). Ocultos hasta saber que hay Google. */
.sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; color: var(--txt-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gbtn { display: flex; justify-content: center; margin-top: 12px; min-height: 40px; }