/* ============================================================
   Aria — CSS de producto (envoltura del shell oscuro + login claro).
   Depende de colors_and_type.css (tokens base) y aria-skin.css (piel).
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

/* ---------- Shell oscuro (interior operativo) ---------- */
body.aria-dark {
  background: radial-gradient(1200px 600px at 50% -10%, #11151c 0%, #07090d 60%, #050609 100%);
  display: grid; place-items: center; padding: 18px;
  font-family: var(--m-font);
}
body.aria-dark .m-app {
  width: min(1200px, 97vw);
  height: min(820px, 96vh);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.m-tb-user { font-size: 12px; color: #cdd7e6; white-space: nowrap; }
.m-tb-user .m-tb-rol { color: #9db4ff; }
.m-tb-out { margin-left: 4px; color: #cdd7e6; }
.m-tb-out:hover { color: #fff; }
a.m-tab { text-decoration: none; }
@media (max-width: 920px) {
  .m-grid2, .m-split { grid-template-columns: 1fr; }
  body.aria-dark { padding: 0; }
  body.aria-dark .m-app { width: 100vw; height: 100dvh; border: none; }
}

/* ---------- Login (piel clara) ---------- */
body.aria-login {
  font-family: var(--font-body);
  background: radial-gradient(1000px 500px at 50% -10%, var(--forza-blue-50) 0%, #fff 55%);
  display: grid; place-items: center; padding: 20px; color: var(--fg-1);
}
.login-wrap { width: min(400px, 100%); }
.login-card {
  background: var(--neutral-0);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px 24px;
}
.login-brand { display: flex; align-items: baseline; gap: 10px; }
.login-wm {
  font-family: var(--font-wordmark); font-style: italic; font-weight: 900;
  text-transform: uppercase; font-size: 34px; letter-spacing: -.01em; color: var(--forza-blue);
  line-height: 1;
}
.login-sub { font-size: 13px; color: var(--fg-3); }
.login-sub b { color: var(--fg-2); }
.login-lead { margin: 6px 0 22px; font-size: 14px; color: var(--fg-3); }

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.login-input {
  height: 44px; padding: 0 13px; font-size: 15px; font-family: var(--font-body);
  border: 1px solid var(--border-2); border-radius: var(--radius-md); color: var(--fg-1); background: #fff;
}
.login-input:focus { outline: none; border-color: var(--forza-blue); box-shadow: 0 0 0 3px rgba(0,54,224,.12); }
.login-btn {
  margin-top: 4px; height: 46px; border: none; border-radius: var(--radius-md);
  background: var(--forza-blue); color: #fff; font-size: 15px; font-weight: 600; font-family: var(--font-body);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
}
.login-btn:hover { background: var(--forza-blue-700); }
.login-error {
  margin-bottom: 16px; padding: 10px 13px; border-radius: var(--radius-md);
  background: var(--danger-bg); color: var(--danger); font-size: 13px; font-weight: 500;
}
.login-foot { margin: 18px 0 0; font-size: 12px; color: var(--fg-4); line-height: 1.5; }