/* Utilidades ligeras — replica del comportamiento Bootstrap 4 que espera el diseño.
   NO toca .card, .kpi-card, .btn, .form-control, .badge-aprobado, .table — todo eso
   lo maneja smart-menu-theme.css. Solo añade lo que falta: grid, flex, spacing, text. */

/* ── NAV-TABS (Bootstrap-like) ───────────────────────
   IMPORTANTE: no tocamos .nav a secas — el sidebar usa esa clase
   con estilos propios definidos en src/index.css. */
.nav-tabs {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  padding-left: 0; margin-bottom: 0; list-style: none;
}
.nav-tabs .nav-item { display: block; flex-shrink: 0; }
.nav-tabs::-webkit-scrollbar { height: 3px; }
.nav-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }
.nav-tabs .nav-item { flex-shrink: 0; }
.nav-tabs .nav-link { cursor: pointer; text-decoration: none; white-space: nowrap; }

/* ── FLEX + DISPLAY ─────────────────────────────────── */
.d-flex         { display: flex; }
.d-inline-flex  { display: inline-flex; }
.d-block        { display: block; }
.d-inline-block { display: inline-block; }
.d-none         { display: none; }
.flex-wrap      { flex-wrap: wrap; }
.flex-column    { flex-direction: column; }
.flex-grow-1    { flex-grow: 1; }
.justify-content-between { justify-content: space-between; }
.justify-content-center  { justify-content: center; }
.justify-content-start   { justify-content: flex-start; }
.justify-content-end     { justify-content: flex-end; }
.align-items-center      { align-items: center; }
.align-items-start       { align-items: flex-start; }
.align-items-end         { align-items: flex-end; }
.align-items-stretch     { align-items: stretch; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* ── SPACING ────────────────────────────────────────── */
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; }
.mr-1 { margin-right: .25rem; } .mr-2 { margin-right: .5rem; } .mr-3 { margin-right: 1rem; }
.ml-1 { margin-left: .25rem; } .ml-2 { margin-left: .5rem; } .ml-3 { margin-left: 1rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; }
.p-1 { padding: .25rem; } .p-2 { padding: .5rem; } .p-3 { padding: 1rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }

/* ── TEXT ───────────────────────────────────────────── */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-muted   { color: #6c757d; }
.text-success { color: #16a34a; }
.text-danger  { color: #dc3545; }
.font-weight-bold { font-weight: 700; }
.font-weight-700  { font-weight: 700; }
.font-weight-600  { font-weight: 600; }

/* ── BADGES semánticos (los específicos como .badge-aprobado los da el theme) ─ */
.badge { display: inline-block; padding: .28em .55em; font-size: .72rem; font-weight: 700; line-height: 1; text-align: center; border-radius: 4px; }
.badge-danger    { background: rgba(220,53,69,.12); color: #dc3545; }
.badge-warning   { background: rgba(245,158,11,.15); color: #b45309; }
.badge-info      { background: rgba(21,101,192,.12); color: #1565c0; }
.badge-secondary { background: rgba(108,117,125,.15); color: #495057; }
.badge-success   { background: rgba(22,163,73,.12); color: #16a34a; }

/* ── ALERT genérico ─────────────────────────────────── */
.alert { position: relative; padding: .75rem 1rem; border: 1px solid transparent; border-radius: 6px; font-size: .88rem; }
.alert-danger { background: rgba(220,53,69,.08); border-color: rgba(220,53,69,.25); color: #a02330; }

.close { padding: 0; background: transparent; border: 0; font-size: 1.4rem; line-height: 1; opacity: .5; cursor: pointer; }
.close:hover { opacity: 1; }

.mdi-spin::before { animation: mdi-spin 1s linear infinite; display: inline-block; }
@keyframes mdi-spin { 100% { transform: rotate(360deg); } }