/* ──────────────────────────────────────────────────────────────────────
   Lasbot — Estilos de las vistas de auth (login, signup, verify, invite).
   Depende de /assets/tokens.css.

   Los nombres cortos (--accent, --muted, --bg, --radius...) que usaban las
   vistas de auth se mantienen como ALIAS sobre los tokens canonicos, asi
   el CSS existente sigue funcionando y, ademas, hereda el modo oscuro.
   ────────────────────────────────────────────────────────────────────── */

:root {
    --bg:            var(--bg-base);
    --muted:         var(--text-muted);
    --accent:        var(--brand);
    --accent-hover:  var(--brand-hover);
    --accent-light:  var(--brand-soft);
    --success:       var(--success-500);
    --danger:        var(--danger-500);
    --warning:       var(--warning-500);
    --radius:        var(--radius-lg);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: var(--font-sans);
    color: var(--text); background: var(--bg-subtle); letter-spacing: -0.005em;
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.card {
    width: 100%; max-width: 420px; margin: 24px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 32px; box-shadow: var(--shadow-sm);
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 8px; text-decoration: none; }
.brand__icon { width: 44px; height: 44px; border-radius: 11px; display: block; }
.brand__name { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.brand__name::after { content: '.'; color: var(--accent); }
h1 { font-size: 18px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.field { display: block; margin-bottom: 16px; }
.label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.input {
    width: 100%; font: inherit; font-size: 14px;
    padding: 10px 12px; border: 1px solid var(--border-strong);
    border-radius: var(--radius); background: var(--bg);
    color: var(--text); transition: border-color 150ms, box-shadow 150ms;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.input--otp { letter-spacing: 0.4em; font-family: var(--font-mono); font-size: 20px; text-align: center; }
.btn {
    width: 100%; padding: 11px 20px; border-radius: var(--radius);
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn--primary:disabled { opacity: 0.6; cursor: progress; }
.alert {
    padding: 10px 12px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px;
    display: none;
}
.alert--err { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; display: block; }
.alert--ok  { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; display: block; }
.alert--info { background: var(--accent-light); color: #1E40AF; border: 1px solid #93C5FD; display: block; }
.foot { font-size: 13px; color: var(--muted); text-align: center; margin-top: 20px; }
.foot a { color: var(--accent); text-decoration: none; font-weight: 500; }
.foot a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); background: var(--bg-muted); padding: 2px 6px; border-radius: 4px; font-size: 12px; }