/* assets/css/base.css
   Reset ligero, tipografía, utilidades y overrides de Bootstrap.
   Cargar después de Bootstrap y tokens.css.
*/

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss03';
  background: var(--surface-page);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream-50); }
::-webkit-scrollbar-thumb { background: var(--cream-300); border-radius: 5px; border: 2px solid var(--cream-50); }
::-webkit-scrollbar-thumb:hover { background: var(--purple-300); }

:focus-visible {
  outline: 3px solid rgba(76, 55, 99, 0.18);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

/* ===== TIPOGRAFÍA ===== */
.t-display { font-size: 26px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink-900); margin: 0; }
.t-h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink-900); margin: 0; }
.t-h2 { font-size: 16px; font-weight: 600; color: var(--ink-900); margin: 0; }
.t-h3 { font-size: 14px; font-weight: 600; color: var(--ink-900); margin: 0; }
.t-body { font-size: 13px; color: var(--ink-900); }
.t-body-sm { font-size: 12.5px; color: var(--ink-900); }
.t-label { font-size: 11.5px; font-weight: 500; color: var(--ink-900); }
.t-caption { font-size: 11px; color: var(--ink-700); }
.t-overline {
  font-size: 10px; font-weight: 600; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 1.1px;
}
.t-muted { color: var(--ink-700); }
.t-mute2 { color: var(--ink-500); }
.t-tabular { font-variant-numeric: tabular-nums; }

/* ===== OVERRIDES BOOTSTRAP ===== */
.btn { border-radius: var(--r-md); font-weight: 500; font-size: 12.5px; padding: 9px 14px; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { background: var(--purple-700); border-color: var(--purple-700); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--purple-600); border-color: var(--purple-600); color: #fff; }
.btn-outline-primary { color: var(--purple-700); border-color: var(--cream-200); background: #fff; }
.btn-outline-primary:hover { background: var(--purple-100); color: var(--purple-700); border-color: var(--purple-700); }
.btn-dark { background: var(--purple-700); border-color: var(--purple-700); }
.btn-dark:hover { background: var(--purple-600); border-color: var(--purple-600); }
.btn-outline-dark { color: var(--purple-700); border-color: var(--cream-300); background: #fff; }
.btn-outline-dark:hover { background: var(--purple-100); color: var(--purple-700); border-color: var(--purple-700); }
.btn-outline-secondary { color: var(--ink-700); border-color: var(--cream-300); background: #fff; }
.btn-outline-secondary:hover { background: var(--cream-50); color: var(--ink-900); border-color: var(--cream-300); }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-lg { padding: 12px 20px; font-size: 14px; }

.card { border: 1px solid var(--cream-200); border-radius: var(--r-xl); background: var(--surface-card); }
.card.shadow-sm { box-shadow: var(--shadow-md); }

.form-control, .form-select {
  background: #fff; border: 1px solid var(--cream-300); border-radius: var(--r-md);
  padding: 9px 12px; font-size: 13px; color: var(--ink-900); font-family: inherit;
}
.form-control:focus, .form-select:focus {
  border-color: var(--purple-700); outline: 3px solid rgba(76, 55, 99, 0.12); box-shadow: none;
}
.form-label { font-size: 11.5px; font-weight: 500; color: var(--ink-900); margin-bottom: 4px; }

.alert { border: 0; border-radius: var(--r-lg); padding: 12px 16px; font-size: 13px; }
.alert-success { background: var(--ok-100); color: var(--ok-700); }
.alert-danger  { background: var(--err-100); color: var(--err-700); }
.alert-warning { background: var(--warn-100); color: var(--warn-700); }
.alert-info    { background: var(--purple-100); color: var(--purple-700); }
.alert-primary { background: var(--purple-100); color: var(--purple-700); }

.table { color: var(--ink-900); }
.table > :not(caption) > * > * { padding: 11px 14px; font-size: 12.5px; }
.table thead th {
  background: var(--cream-100); color: var(--ink-700);
  text-transform: uppercase; letter-spacing: 0.9px; font-size: 10px;
  font-weight: 500; border-bottom: 1px solid var(--cream-200);
}
.table > tbody > tr > td { border-bottom: 1px solid #f6efe3; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: #fdfaf2; --bs-table-hover-bg: transparent; }

.badge { font-weight: 500; font-size: 10px; padding: 3px 9px; border-radius: 10px; }
.text-bg-success { background: var(--ok-100) !important; color: var(--ok-700) !important; }
.text-bg-warning { background: var(--warn-100) !important; color: var(--warn-700) !important; }
.text-bg-danger  { background: var(--err-100) !important; color: var(--err-700) !important; }
.text-bg-secondary { background: var(--purple-100) !important; color: var(--ink-700) !important; }
.text-bg-primary { background: var(--gold-200) !important; color: var(--gold-700) !important; }

.nav-tabs { border-bottom: 1px solid var(--cream-200); }
.nav-tabs .nav-link { color: var(--ink-700); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 16px; font-size: 12.5px; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--ink-900); border-bottom-color: transparent; }
.nav-tabs .nav-link.active { color: var(--purple-700); border-bottom-color: var(--purple-700); background: transparent; }

.pagination .page-link {
  color: var(--purple-700); background: #fff; border: 1px solid var(--cream-200);
  border-radius: var(--r-sm); margin: 0 2px; font-size: 12px; padding: 5px 10px;
}
.pagination .page-item.active .page-link { background: var(--purple-700); border-color: var(--purple-700); color: #fff; }
.pagination .page-item.disabled .page-link { color: var(--ink-300); background: #fff; }