/* Simplex — base styles */
:root {
  --brand:     #2c4f8c;
  --brand-700: #24417a;
  --gray-50:   #f8fafc;
  --gray-900:  #0f172a;
}

html, body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #334155;
}

/* Títulos con un toque distintivo */
.font-display { font-family: 'Ubuntu', 'Open Sans', sans-serif; letter-spacing: -.01em; }

/* ───────── Menú lateral (tono refinado) ───────── */
.nav-group { width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .75rem; border-radius: .625rem; color: #475569; transition: background .12s, color .12s; }
.nav-group:hover { background: #f6f8fb; color: #1e293b; }
.nav-group-label { font-size: .82rem; font-weight: 600; letter-spacing: .01em; }
.nav-dot { width: 5px; height: 5px; border-radius: 9999px; background: #cbd5e1; }
.nav-item { display: block; padding: .4rem .75rem; border-radius: .55rem; font-size: .82rem;
  color: #64748b; transition: background .12s, color .12s; }
.nav-item:hover { background: #f6f8fb; color: #0f172a; }
.nav-item-active { background: var(--brand); color: #fff !important; font-weight: 600; box-shadow: 0 1px 2px rgba(44,79,140,.25); }
.nav-item-active:hover { background: var(--brand-700); color: #fff !important; }
.nav-section { font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: #94a3b8; text-transform: uppercase; }

/* ───────── Tablas elegantes y ajustadas ───────── */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.tbl thead th { padding: .6rem .85rem; text-align: left; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; background: #fcfdfe;
  border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.tbl thead th:last-child { text-align: right; }
.tbl tbody td { padding: .6rem .85rem; border-bottom: 1px solid #f3f6fa; color: #334155; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover td { background: #f8fafc; }
.tbl .num { font-variant-numeric: tabular-nums; }
.tbl-empty { padding: 2.25rem; text-align: center; color: #94a3b8; font-size: .82rem; }

/* Tarjeta contenedora */
.card { background: #fff; border: 1px solid #eef2f7; border-radius: .85rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }

/* Badges de estado */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 9999px;
  font-size: .68rem; font-weight: 600; line-height: 1.4; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 9999px; background: currentColor; }
.badge-green  { background: #ecfdf5; color: #059669; }
.badge-gray   { background: #f1f5f9; color: #64748b; }
.badge-red    { background: #fef2f2; color: #dc2626; }
.badge-blue   { background: #eff6ff; color: #2563eb; }
.badge-amber  { background: #fffbeb; color: #d97706; }
.badge-indigo { background: #eef2ff; color: #4f46e5; }
.badge-teal   { background: #f0fdfa; color: #0d9488; }
.badge-violet { background: #f5f3ff; color: #7c3aed; }

/* Inputs / filtros */
.input { width: 100%; border: 1px solid #e2e8f0; border-radius: .55rem; padding: .5rem .75rem;
  font-size: .82rem; background: #fff; color: #334155; transition: border-color .12s, box-shadow .12s; }
.input::placeholder { color: #9aa7b8; }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(44,79,140,.12); }

/* Botón link de acción en tablas */
.act { font-size: .8rem; font-weight: 500; }
.act-edit { color: var(--brand); }
.act-del  { color: #dc2626; }

/* ───────── Toasts ───────── */
.toast {
  position: fixed; top: 1rem; right: 1rem; z-index: 9999;
  padding: .75rem 1rem; border-radius: .5rem; color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: .85rem;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .2s, transform .2s;
}
.toast.show    { opacity: 1; transform: translateY(0); }
.toast.success { background: #059669; }
.toast.error   { background: #ef4444; }
.toast.info    { background: var(--brand); }