/* ===== Paleta: Blancos y Grises ===== */
:root{
  --bg:#f6f7f9; --card:#ffffff; --border:#e5e7eb;
  --text:#111827; --muted:#6b7280; --muted-2:#9ca3af;
  --brand:#374151; --brand-2:#4b5563;
  --btn:#e5e7eb; --btn-hover:#d1d5db;
  --ok-bg:#f0fdf4; --ok-br:#bbf7d0;
  --err-bg:#fef2f2; --err-br:#fecaca;
}

/* Reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
  color:var(--text); background:var(--bg);
}

/* Utilidades */
.muted{ color:var(--muted); } .small{ font-size:.9rem; } .center{ text-align:center; }

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:10px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; color:var(--text); background:var(--btn);
}
.btn:hover{ background:var(--btn-hover); }
.btn-primary{ background:var(--brand); color:#fff; border-color:var(--brand-2); }
.btn-primary:hover{ background:var(--brand-2); }
.btn-outline{ background:transparent; border-color:var(--border); }
.btn-link{ background:transparent; border:0; color:var(--brand); padding:0; }

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--card); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .9rem;
}
.topbar__left,.topbar__right{ display:flex; align-items:center; gap:.7rem; }
.logo{ height:40px; width:auto; display:block; }
.brand{ display:flex; flex-direction:column; line-height:1; }
.userpill{
  background:#f3f4f6; border:1px solid var(--border);
  padding:.4rem .6rem; border-radius:20px; font-size:.95rem;
}

/* Layout y tarjetas */
.container{ max-width:1100px; margin:1rem auto 2rem; padding:0 1rem; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.25rem; }
.hr{ border:0; border-top:1px solid var(--border); margin:1rem 0; }

/* Grid de botones (panel) */
.grid-buttons{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); margin-top:1rem; }
.card-button{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.1rem 1rem;
  display:flex; align-items:center; justify-content:space-between; text-decoration:none; color:inherit;
  transition: box-shadow .2s, transform .05s;
}
.card-button:hover{ box-shadow:0 10px 25px rgba(0,0,0,.06); transform:translateY(-1px); }

/* Tablas (corte) */
.tbl{ width:100%; border-collapse:collapse; font-size:.95rem; }
.tbl th,.tbl td{ padding:.45rem .5rem; border-bottom:1px solid var(--border); vertical-align:top; }
.tbl thead th{ position:sticky; top:0; background:#f9fafb; z-index:1; }
.tbl tfoot td{ font-weight:700; }
.mon{ text-align:right; font-variant-numeric:tabular-nums; }
.scroller{ max-height:380px; overflow:auto; border:1px solid var(--border); border-radius:10px; }

/* Auth / login */
.auth-card{
  max-width:420px; margin:6rem auto 2rem; padding:2rem;
  background:var(--card); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.07);
}
.auth-logo{ display:block; margin:0 auto 1rem; max-width:200px; height:auto; }
.form-row{ margin-bottom:1rem; }
.form-row label{ display:block; font-weight:600; margin-bottom:.35rem; color:var(--brand-2); }
.form-row input,.form-row select{
  width:100%; padding:.8rem .9rem; border:1px solid #d3d7de; border-radius:10px; font-size:1rem; letter-spacing:.02em; background:#fff; color:var(--text);
}
.alert.ok{ background:var(--ok-bg); border:1px solid var(--ok-br); border-radius:10px; padding:.8rem 1rem; }
.alert.err{ background:var(--err-bg); border:1px solid var(--err-br); border-radius:10px; padding:.8rem 1rem; }

/* Footer */
.footer{ max-width:1100px; margin:2rem auto; padding:0 1rem; color:var(--muted); display:flex; justify-content:space-between; }

/* Responsive */
@media (max-width:520px){ .userpill{ display:none; } .logo{ height:34px; } }
``