/* smtprelay — panel. Misma lógica de color que aspam (mta.uptech.cl):
   contenido claro + barra lateral (rail) oscura, acento azul, estados soft. */
:root {
  /* Superficies claras */
  --bg:#f3f4f6; --surface:#ffffff; --surface-2:#f4f5f7; --surface-3:#eceef1;
  --line:#e5e8ec; --line-soft:#eef0f3;
  --fg:#12151c; --fg-soft:#4a5260; --muted:#878e9b;
  /* Acento */
  --accent:#2f6bf6; --accent-strong:#1e54da; --accent-soft:#e8f0ff; --accent-line:#c6dcff;
  /* Rail (barra lateral oscura) */
  --rail:#0f1117; --rail-2:#171a22; --rail-3:#1f232d; --rail-line:#272b36;
  --rail-fg:#d3d8e0; --rail-soft:#9aa1b0; --rail-muted:#697086; --rail-accent:#7ea6ff;
  /* Estados */
  --ok:#10a85a; --ok-soft:#e2f7ec;
  --warn:#e08a08; --warn-soft:#fdf0d6;
  --bad:#ef4444; --bad-soft:#fde7e7;
  --info:#2f6bf6; --info-soft:#e8f0ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.app { display: flex; min-height: 100vh; }

/* Sidebar (rail oscuro) */
.sidebar {
  width: 240px; flex: 0 0 240px;
  background: linear-gradient(180deg, #10131b, var(--rail));
  border-right: 1px solid var(--rail-line);
  display: flex; flex-direction: column; padding: 18px 14px; color: var(--rail-fg);
}
.brand { font-size: 18px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.brand:hover { text-decoration: none; }
.brand-sub { color: var(--rail-soft); font-weight: 500; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rail-accent); box-shadow: 0 0 10px var(--accent); }
nav { margin-top: 22px; flex: 1; }
.nav-group-label { color: var(--rail-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin: 16px 8px 6px; }
.nav-item { display: block; padding: 8px 10px; border-radius: 7px; color: var(--rail-fg); margin-bottom: 2px; }
.nav-item:hover { background: var(--rail-2); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--rail-3); color: #fff; font-weight: 600; }
.sidebar-foot { border-top: 1px solid var(--rail-line); padding-top: 12px; }
.sidebar-foot .who { font-size: 13px; color: #eef1f6; word-break: break-all; }
.sidebar-foot .role { color: var(--rail-soft); font-size: 12px; margin-bottom: 8px; }
.btn-logout { display: inline-block; font-size: 12px; color: var(--rail-soft); }
.btn-logout:hover { color: #ff8d8d; text-decoration: none; }

/* Main (claro) */
.main { flex: 1; padding: 28px 34px; max-width: 1200px; }
h1 { font-size: 22px; margin: 0 0 4px; color: var(--fg); }
h2 { font-size: 16px; margin: 26px 0 10px; color: var(--fg); }
.sub { color: var(--muted); margin: 0 0 22px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; box-shadow: 0 1px 2px rgba(18,21,28,.04); }
.kpi .n { font-size: 26px; font-weight: 700; color: var(--fg); }
.kpi .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* Tablas */
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; background: var(--surface-2); }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }

/* Badges (texto de color sobre fondo soft) */
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--fg-soft); }
.badge.ok, .badge.active { color: var(--ok); background: var(--ok-soft); }
.badge.warn, .badge.throttled, .badge.held { color: var(--warn); background: var(--warn-soft); }
.badge.err, .badge.blocked { color: var(--bad); background: var(--bad-soft); }

/* Formularios / botones */
form.inline { display: inline; }
input, select, textarea {
  background: var(--surface); border: 1px solid var(--line); color: var(--fg);
  border-radius: 7px; padding: 8px 10px; font: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.btn { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 7px; padding: 8px 14px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(47,104,234,.25); }
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--fg); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); border-color: #d2d6db; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: none; }
.btn.danger:hover { filter: brightness(.95); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(18,21,28,.04); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; word-break: break-all; }
.dnsrec { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 10px; margin: 6px 0; }

/* Flash */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 13px; border: 1px solid; }
.flash-ok { background: var(--ok-soft); border-color: var(--ok); color: #14532d; }
.flash-err { background: var(--bad-soft); border-color: var(--bad); color: #7f1d1d; }

/* Login */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px; width: 340px; box-shadow: 0 8px 30px rgba(18,21,28,.10); }
.login-card h1 { text-align: center; }
.login-card .brand-sub { color: var(--muted); }
.actions { margin-top: 16px; display: flex; gap: 8px; }