/* Login e invitaciones (modo empresa). Mismos tokens y fuentes que la app. */
@font-face{font-family:"IBM Plex Sans";font-weight:400 700;font-display:swap;src:url("/static/fonts/ibmplexsans-var.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:700;font-display:swap;src:url("/static/fonts/ibmplexsanscond-700.woff2") format("woff2")}
:root{--bg:#081722;--panel:#0f2534;--panel2:#153244;--line:#264a63;--line-soft:#1f3f54;--txt:#e9f3fa;--muted:#83a4b8;
  --blue:#0090fc;--blue-solid:#0077c2;--red:#ef4444;--green:#22c55e;--ring:#0090fc;--ring-glow:#0090fc55;
  --font-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:"IBM Plex Sans Condensed",var(--font-ui)}
:root[data-theme="light"]{--bg:#f2f6f9;--panel:#fff;--panel2:#e9f0f5;--line:#c9dae4;--line-soft:#e1ecf2;--txt:#0d2a3a;--muted:#527082;
  --blue:#0077d1;--blue-solid:#0077d1;--red:#dc2626;--green:#16a34a;--ring:#0077d1;--ring-glow:#0077d133}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--font-ui);background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:28px 28px}
.card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px 26px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:.3px}
.brand img{height:28px;width:auto}
.brand b{color:var(--blue)}
.sub{color:var(--muted);font-size:13px;margin:0 0 20px}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 4px}
input{width:100%;padding:10px 11px;font:inherit;font-size:14px;color:var(--txt);background:var(--bg);border:1px solid var(--line);border-radius:8px}
input:focus-visible,button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
button{width:100%;margin-top:18px;padding:11px;font:inherit;font-weight:600;font-size:14px;color:#fff;background:var(--blue-solid);border:0;border-radius:8px;cursor:pointer}
button:disabled{opacity:.6;cursor:wait}
button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);margin-top:10px}
.err{color:var(--red);font-size:13px;min-height:18px;margin-top:10px}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-size:12px;color:var(--txt)}
.foot{margin-top:18px;font-size:11px;color:var(--muted);text-align:center}

/* ── responsive: tablet / movil ─── */
body{min-height:100vh;min-height:100dvh;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
input,button{min-height:44px}                      /* objetivo tactil comodo */
@media (max-width:520px){
  body{align-items:flex-start;padding-top:max(12px,env(safe-area-inset-top))}
  .card{padding:22px 18px;max-width:none;margin-top:4px}
  input{font-size:16px}                            /* iOS hace zoom al enfocar si es menor */
  .brand{font-size:20px}
}
@media (min-width:521px) and (max-width:1100px){
  .card{max-width:460px}
}