/* === Diseño global claro y limpio, tema oscuro moderno === */
:root{
  --bg:#0b1220; --panel:#0f172a; --card:#121a2b; --line:#1f2840;
  --fg:#e9eef7; --muted:#a9b3c7; --link:#76a8ff;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --primary:#5b8cff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
  margin:0; background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:16px;
  padding:14px 20px; background:var(--panel);
  border-bottom:1px solid var(--line);
}
nav .brand{font-weight:700; letter-spacing:.4px}
nav .spacer{flex:1}
nav a{padding:6px 8px; border-radius:8px}
nav a:hover{background:#0b152d}

.container{max-width:1080px; margin:24px auto; padding:0 18px}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

h1{font-size:28px; margin:0 0 14px}
h2{font-size:20px; margin:12px 0}
p,li{color:#d7dfed}

.grid{display:grid; gap:16px}
.grid.two{grid-template-columns:1fr 1fr}

.btn{
  display:inline-block; padding:10px 14px; border-radius:12px;
  border:1px solid var(--line); background:#16233f; color:var(--fg);
  transition:transform .06s ease, background .12s ease; cursor:pointer;
}
.btn:hover{transform:translateY(-1px); background:#1a2a4b}
.btn.primary{background:#1e2e55; border-color:#2c3d66}
.btn.primary:hover{background:#263a6a}
.btn.disabled{opacity:.45; pointer-events:none}

.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line)}
.badge.ok{color:#c1f2cf; background:#10281a; border-color:#1c3a28}
.badge.bad{color:#ffd5d5; background:#2b1212; border-color:#4c1b1b}
.badge.warn{color:#fde9c1; background:#2c1f0e; border-color:#4d3515}

.stepper{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.step{display:flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--line)}
.step .dot{width:10px; height:10px; border-radius:50%; background:#425b8d}
.step.active{background:#13213d}
.step.active .dot{background:var(--primary)}

.kv{display:flex; gap:10px; align-items:center}
.kv label{width:220px; color:var(--muted)}

input[type="text"],input[type="email"],input[type="date"],select{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background:#0d1526; color:var(--fg); outline:none;
}
input[type="checkbox"]{transform:scale(1.2)}

hr{border:0; border-top:1px solid var(--line); margin:18px 0}

.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line); padding:10px 8px; text-align:left}

.progress{height:10px; background:#0d1526; border-radius:999px; overflow:hidden}
.progress>div{height:100%; background:var(--primary); width:0%}

.alert{margin:10px 0; padding:12px; border-radius:10px; border:1px solid var(--line)}
.alert.ok{background:#102617}
.alert.bad{background:#2b0f0f}
.alert.warn{background:#2b1f0d}

/* --- LOGIN PAGE --- */
.login-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 80vh;
  padding-top: 40px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 24px 28px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148,163,184,0.2);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  color: #e5e7eb;
}

.login-logo {
  display:block;
  margin: 0 auto 16px auto;
  height: 60px;
  object-fit: contain;
}

.field {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #e5e7eb;
  box-sizing: border-box;
}

.field input:focus {
  border-color: #64748b;
  outline:none;
  box-shadow: 0 0 0 2px rgba(100,116,139,.25);
}

.btn {
  display:inline-block;
  background:#1e293b;
  border:1px solid #334155;
  border-radius:8px;
  padding:10px 14px;
  color:#e5e7eb;
  text-decoration:none;
  font-weight:600;
}

.btn.primary {
  background:#334155;
}

.btn:hover {
  background:#0f172a;
}

.login-roles {
  margin-top: 18px;
  font-size: 0.95rem;
  color:#94a3b8;
}
.login-roles ul { margin: 6px 0 0 18px; }
/* ====== COMPONENTES BASE ====== */
.card{
  background: rgba(15,23,42,0.45);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 16px;
  padding: 16px;
}
.btn{
  display:inline-block;
  background:#1e293b;
  border:1px solid #334155;
  color:#e5e7eb;
  text-decoration:none;
  font-weight:600;
  border-radius:10px;
  padding:8px 12px;
}
.btn:hover{ background:#0f172a; }

/* ====== TABLAS ====== */
.table{
  width:100%;
  border-collapse:collapse;
}
.table th, .table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(148,163,184,0.12);
  vertical-align:middle;
  text-align:left;
}
.table thead th{
  background: rgba(148,163,184,0.08);
  border-bottom:1px solid rgba(148,163,184,0.22);
  font-weight:700;
}

/* ====== TIPOGRAFÍA ====== */
.muted{ color:#94a3b8; }

/* ====== FILTROS ====== */
.filters select{
  background:#0f172a;
  color:#e5e7eb;
  border:1px solid #334155;
  border-radius:8px;
  padding:6px 8px;
}

/* ====== LOGIN (si usas el login que ajustamos) ====== */
.login-container{ display:flex; justify-content:center; align-items:flex-start; min-height:80vh; padding-top:40px; }
.login-card{ width:100%; max-width:420px; padding:24px 28px; border-radius:12px;
             background: rgba(15,23,42,0.45); border:1px solid rgba(148,163,184,0.2); box-shadow:0 8px 20px rgba(0,0,0,.3); color:#e5e7eb; }
.login-logo{ display:block; margin:0 auto 16px auto; height:60px; object-fit:contain; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field input{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid #334155; background:#0f172a; color:#e5e7eb; box-sizing:border-box; }
.field input:focus{ border-color:#64748b; outline:none; box-shadow:0 0 0 2px rgba(100,116,139,.25); }