/**
 * =====================================================================
 * SISTEMA.CSS — Design System Centralizado
 * Clínica Mi Doc JS
 * 
 * Este archivo es el ÚNICO dueño del diseño visual del dashboard.
 * No usar estilos inline ni CSS dispersos en módulos individuales.
 * Todos los tokens de color, tipografía, espaciado y componentes
 * están definidos aquí como variables CSS nativas.
 * =====================================================================
 */

/* ─────────────────────────────────────────────
   1. IMPORTACIÓN DE FUENTE UNIFICADA
   Usamos Inter para todo el sistema (mismo que
   la interfaz pública). Adiós Source Sans Pro.
───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─────────────────────────────────────────────
   2. TOKENS DE DISEÑO (VARIABLES CSS NATIVAS)
   Son la única fuente de verdad de colores.
───────────────────────────────────────────── */
:root {
  /* Paleta de colores primarios */
  --color-primario:      #2563eb;
  --color-primario-dark: #1d4ed8;
  --color-primario-light:#dbeafe;

  /* Paleta de acciones */
  --color-exito:         #10b981;
  --color-exito-dark:    #059669;
  --color-peligro:       #ef4444;
  --color-peligro-dark:  #dc2626;
  --color-alerta:        #f59e0b;
  --color-alerta-dark:   #d97706;
  --color-info:          #0ea5e9;
  --color-info-dark:     #0284c7;
  --color-secundario:    #64748b;
  --color-secundario-dark:#475569;
  --color-oscuro:        #1e293b;

  /* Tipografía */
  --fuente-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fuente-mono: 'Fira Code', 'Courier New', monospace;

  /* Tamaños de fuente */
  --text-xs:   0.75rem;
  --text-sm:   0.85rem;
  --text-base: 0.925rem;
  --text-md:   1rem;
  --text-lg:   1.1rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;

  /* Espaciado y bordes */
  --radio-sm:   4px;
  --radio-base: 8px;
  --radio-md:   10px;
  --radio-lg:   14px;
  --radio-xl:   20px;

  /* Sombras */
  --sombra-sm:  0 1px 3px rgba(0,0,0,0.08);
  --sombra-md:  0 4px 12px rgba(0,0,0,0.10);
  --sombra-lg:  0 8px 24px rgba(0,0,0,0.12);
  --sombra-xl:  0 16px 40px rgba(0,0,0,0.15);

  /* Transiciones */
  --transicion:      all 0.2s ease-in-out;
  --transicion-fast: all 0.15s ease;
}


/* ─────────────────────────────────────────────
   3. TIPOGRAFÍA GLOBAL UNIFICADA
   Aplica Inter a elementos de TEXTO solamente.
   NUNCA a iconos (.fas .far .fab .ion-* etc.)
───────────────────────────────────────────── */
html, body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .sidebar,
.nav-link:not([class*="fa"]):not([class*="ion"]),
.btn, label, input, select, textarea,
.card-title, .card-header, .card-footer,
.table, td, th,
p, a, li, dt, dd,
.form-control, .form-label,
.breadcrumb-item, .page-link,
.alert, .badge:not([class*="fa"]):not([class*="ion"]) {
  font-family: var(--fuente-base) !important;
  -webkit-font-smoothing: antialiased;
}

/* RESTAURAR FUENTES DE ICONOS — Font Awesome */
.fas, i.fas, span.fas,
button .fas, a .fas, td .fas, th .fas, li .fas,
.nav-link .fas, .btn .fas, .info-box-icon .fas,
.brand-link .fas, .sidebar .fas {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

.far, i.far, span.far,
button .far, a .far, td .far, th .far, li .far,
.nav-link .far, .btn .far {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}

.fab, i.fab, span.fab,
button .fab, a .fab, td .fab, li .fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}

.fal, i.fal, span.fal {
  font-family: "Font Awesome 5 Pro" !important;
  font-weight: 300 !important;
}

/* RESTAURAR FUENTES DE ICONOS — Ionicons */
[class^="ion-"], [class*=" ion-"],
i[class^="ion-"], i[class*=" ion-"],
span[class^="ion-"], span[class*=" ion-"] {
  font-family: "Ionicons" !important;
}


body {
  font-size: var(--text-base) !important;
  max-width: 100%;
  overflow-x: hidden;
  line-height: 1.6 !important;
}

/* Jerarquía tipográfica consistente */
h1, .h1 { font-size: 2rem   !important; font-weight: 700 !important; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.6rem !important; font-weight: 600 !important; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.35rem !important; font-weight: 600 !important; }
h4, .h4 { font-size: 1.15rem !important; font-weight: 600 !important; }
h5, .h5 { font-size: 1rem   !important; font-weight: 600 !important; }
h6, .h6 { font-size: 0.9rem !important; font-weight: 600 !important; }


/* ─────────────────────────────────────────────
   4. SISTEMA DE BOTONES UNIFICADO
   Reemplaza global-buttons.css con tokens CSS.
───────────────────────────────────────────── */
.btn {
  font-family:    var(--fuente-base) !important;
  font-weight:    600 !important;
  font-size:      var(--text-sm) !important;
  border-radius:  var(--radio-base) !important;
  padding:        0.42rem 1rem !important;
  line-height:    1.5 !important;
  border:         none !important;
  box-shadow:     var(--sombra-sm) !important;
  transition:     var(--transicion) !important;
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            0.4rem !important;
  white-space:    nowrap !important;
  letter-spacing: 0.01em !important;
}

.btn:hover:not(:disabled) {
  transform:  translateY(-2px) !important;
  box-shadow: var(--sombra-md) !important;
}

.btn:active:not(:disabled) {
  transform:  translateY(0) !important;
  box-shadow: var(--sombra-sm) !important;
}

.btn:disabled, .btn.disabled {
  opacity:    0.55 !important;
  cursor:     not-allowed !important;
  transform:  none !important;
  box-shadow: none !important;
}

/* Tamaños estándar */
.btn-sm {
  font-size:   var(--text-xs) !important;
  padding:     0.3rem 0.75rem !important;
  border-radius: var(--radio-sm) !important;
  gap:         0.3rem !important;
}

.btn-lg {
  font-size:   var(--text-md) !important;
  padding:     0.6rem 1.4rem !important;
  border-radius: var(--radio-md) !important;
}

/* Colores de botones — usa variables CSS */
.btn-primary   { background: var(--color-primario)   !important; color: #fff !important; }
.btn-primary:hover { background: var(--color-primario-dark) !important; }

.btn-success   { background: var(--color-exito)      !important; color: #fff !important; }
.btn-success:hover { background: var(--color-exito-dark) !important; }

.btn-danger    { background: var(--color-peligro)    !important; color: #fff !important; }
.btn-danger:hover  { background: var(--color-peligro-dark) !important; }

.btn-warning   { background: var(--color-alerta)     !important; color: #fff !important; }
.btn-warning:hover { background: var(--color-alerta-dark) !important; }

.btn-info      { background: var(--color-info)       !important; color: #fff !important; }
.btn-info:hover    { background: var(--color-info-dark) !important; }

.btn-secondary { background: var(--color-secundario) !important; color: #fff !important; }
.btn-secondary:hover { background: var(--color-secundario-dark) !important; }

.btn-dark      { background: var(--color-oscuro)     !important; color: #fff !important; }

/* Botones outline */
.btn-outline-primary {
  background: transparent !important;
  border: 2px solid var(--color-primario) !important;
  color: var(--color-primario) !important;
}
.btn-outline-primary:hover {
  background: var(--color-primario) !important;
  color: #fff !important;
}

.btn-outline-success {
  background: transparent !important;
  border: 2px solid var(--color-exito) !important;
  color: var(--color-exito) !important;
}
.btn-outline-success:hover {
  background: var(--color-exito) !important;
  color: #fff !important;
}

.btn-outline-danger {
  background: transparent !important;
  border: 2px solid var(--color-peligro) !important;
  color: var(--color-peligro) !important;
}
.btn-outline-danger:hover {
  background: var(--color-peligro) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  background: transparent !important;
  border: 2px solid var(--color-secundario) !important;
  color: var(--color-secundario) !important;
}
.btn-outline-secondary:hover {
  background: var(--color-secundario) !important;
  color: #fff !important;
}

/* Fix dropdown toggle spacing */
.btn.dropdown-toggle::after { margin-left: 0.4rem; }


/* ─────────────────────────────────────────────
   5. CARDS UNIFICADAS
   Aspecto limpio y profesional para todas las
   tarjetas del dashboard.
───────────────────────────────────────────── */
.card {
  border:        none !important;
  border-radius: var(--radio-md) !important;
  box-shadow:    var(--sombra-sm) !important;
  transition:    var(--transicion) !important;
  overflow:      hidden;
}

.card:hover {
  box-shadow: var(--sombra-md) !important;
}

.card-header {
  padding:          0.75rem 1.25rem !important;
  background-color: #fff !important;
  border-bottom:    1px solid rgba(0,0,0,0.07) !important;
  font-weight:      600 !important;
  font-size:        var(--text-base) !important;
}

.card-body {
  padding: 1.25rem !important;
}

.card-footer {
  background-color: #fafbfc !important;
  border-top:       1px solid rgba(0,0,0,0.07) !important;
  padding:          0.6rem 1.25rem !important;
  font-size:        var(--text-sm) !important;
}

.card-title {
  font-size:   var(--text-lg) !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
  color: #1e293b !important;
}


/* ─────────────────────────────────────────────
   6. TABLAS UNIFICADAS
───────────────────────────────────────────── */
.table {
  font-size:     var(--text-sm) !important;
  border-radius: var(--radio-base);
  overflow:      hidden;
}

.table thead th {
  font-size:        var(--text-xs) !important;
  font-weight:      700 !important;
  text-transform:   uppercase !important;
  letter-spacing:   0.05em !important;
  background-color: #f8fafc !important;
  color:            #475569 !important;
  border-bottom:    2px solid #e2e8f0 !important;
  padding:          0.6rem 0.75rem !important;
  vertical-align:   middle !important;
}

.table td {
  padding:        0.45rem 0.75rem !important;
  vertical-align: middle !important;
  border-color:   #f1f5f9 !important;
  color:          #1e293b;
}

.table tbody tr:hover {
  background-color: #f8fafc !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(241, 245, 249, 0.5) !important;
}

.table-responsive {
  border:   0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radio-base);
}


/* ─────────────────────────────────────────────
   7. FORMULARIOS UNIFICADOS
───────────────────────────────────────────── */
.form-control, .form-select {
  font-family:   var(--fuente-base) !important;
  font-size:     var(--text-sm) !important;
  border-radius: var(--radio-base) !important;
  border-color:  #d1d5db !important;
  transition:    var(--transicion) !important;
  padding:       0.45rem 0.85rem !important;
  box-shadow:    none !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--color-primario) !important;
  box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline:      none !important;
}

label.form-label, label.col-form-label, .form-group label {
  font-weight: 600 !important;
  font-size:   var(--text-sm) !important;
  color:       #374151 !important;
  margin-bottom: 0.3rem !important;
}

.form-group {
  margin-bottom: 1rem !important;
}

/* Select2 unificado */
.select2-container--bootstrap4 .select2-selection {
  border-radius: var(--radio-base) !important;
  border-color:  #d1d5db !important;
  font-family:   var(--fuente-base) !important;
  font-size:     var(--text-sm) !important;
}

.select2-container--bootstrap4 .select2-selection--single {
  height: calc(1.5em + 0.9rem + 2px) !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + 0.9rem) !important;
  font-size: var(--text-sm) !important;
  color: #374151 !important;
}


/* ─────────────────────────────────────────────
   8. BADGES Y ETIQUETAS
───────────────────────────────────────────── */
.badge {
  font-family:   var(--fuente-base) !important;
  font-weight:   600 !important;
  font-size:     var(--text-xs) !important;
  border-radius: var(--radio-sm) !important;
  padding:       0.3em 0.65em !important;
  letter-spacing: 0.03em !important;
}

/* Tonos pastel para badges de estado */
.badge-soft-primary { background: var(--color-primario-light) !important; color: var(--color-primario-dark) !important; }
.badge-soft-success { background: #d1fae5 !important; color: #065f46 !important; }
.badge-soft-danger  { background: #fee2e2 !important; color: #991b1b !important; }
.badge-soft-warning { background: #fef3c7 !important; color: #92400e !important; }
.badge-soft-info    { background: #e0f2fe !important; color: #075985 !important; }
.badge-soft-secondary { background: #f1f5f9 !important; color: #475569 !important; }


/* ─────────────────────────────────────────────
   9. SIDEBAR Y NAVBAR DE ADMINLTE — Premium
───────────────────────────────────────────── */
.main-sidebar {
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5) !important;
  border-right: 1px solid rgba(255,255,255,0.05);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
  font-size:   var(--text-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--radio-lg) !important; /* Estilo redondeado moderno */
  margin:      4px 12px !important; /* Más espacio para respirar */
  padding:     0.65rem 1rem !important;
  transition:  all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  color:       #cbd5e1 !important;
}

/* Micro-animación en hover */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
  background-color: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  transform: translateX(4px); /* Efecto suave de deslizamiento */
}

/* Active state premium */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(135deg, var(--color-primario), var(--color-primario-dark)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4) !important;
  font-weight: 600 !important;
  border-radius: var(--radio-lg) !important;
  transform: none; /* Sin desplazamiento en estado activo */
}

/* Navbar top */
.main-header.navbar {
  box-shadow: var(--sombra-sm) !important;
  font-family: var(--fuente-base) !important;
}

.navbar-nav .nav-link {
  font-size:   var(--text-sm) !important;
  font-weight: 500 !important;
}

/* Brand del sidebar */
.brand-link {
  font-family: var(--fuente-base) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}


/* ─────────────────────────────────────────────
   10. MODALES UNIFICADOS
───────────────────────────────────────────── */
.modal-content {
  border:        none !important;
  border-radius: var(--radio-lg) !important;
  box-shadow:    var(--sombra-xl) !important;
  font-family:   var(--fuente-base) !important;
}

.modal-header {
  border-bottom: 1px solid #f1f5f9 !important;
  padding:       1.25rem 1.5rem !important;
}

.modal-title {
  font-size:   var(--text-xl) !important;
  font-weight: 700 !important;
  color:       #1e293b !important;
}

.modal-footer {
  border-top: 1px solid #f1f5f9 !important;
  padding:    0.75rem 1.5rem !important;
}

.modal-body {
  padding: 1.5rem !important;
}

/* MODALES: el modal nunca debe cortarse ni quedar sin scroll en ninguna
   resolución. Se restringe a la altura de la ventana y el .modal-body
   (o el propio contenido) hace scroll interno. */
.modal {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}
.modal-dialog {
  margin: 0.5rem auto !important;
  max-height: calc(100vh - 1rem) !important;
}
.modal-dialog .modal-content {
  max-height: calc(100vh - 1rem) !important;
  overflow-y: auto !important;
  display: flex;
  flex-direction: column;
}
.modal-dialog .modal-content .modal-body {
  overflow-y: auto !important;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
/* Header y footer nunca se comprimen ni se ocultan */
.modal-content .modal-header,
.modal-content .modal-footer {
  flex-shrink: 0;
}
/* Modales cuyo <form> envuelve body+footer: el form participa del flex
   para que el .modal-body haga scroll interno (p. ej. cambiarPacienteModal,
   modalPago, modalAbono, etc.). */
.modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
}
.modal-content > form .modal-footer {
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   MODALES: TIPOGRAFÍA UNIFORME
   Misma escala de texto que el resto del proyecto.
   Los estilos inline con tamaños sueltos (0.7rem, 0.75rem,
   7px, etc.) NO deben ganar dentro de un modal.
   Escala:
   - Título del modal ............ --text-xl (1.25rem)
   - Títulos h1-h6 ............... jerarquía global
   - Texto base / párrafos ....... --text-base (0.925rem)
   - Labels / inputs / botones ... --text-sm (0.85rem)
   - Texto auxiliar (.small) ..... --text-xs (0.75rem)
───────────────────────────────────────────── */
.modal {
  font-size: var(--text-base) !important;
}
.modal .modal-body {
  font-size: var(--text-base) !important;
  line-height: 1.6 !important;
}
.modal .modal-body p {
  font-size: var(--text-base) !important;
}
.modal label {
  font-size: var(--text-sm) !important;
}
.modal .small,
.modal small {
  font-size: var(--text-xs) !important;
}
.modal .badge {
  font-size: var(--text-xs) !important;
}
.modal .text-uppercase:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: var(--text-xs) !important;
}
.modal .select2-container .select2-selection__rendered {
  font-size: var(--text-sm) !important;
}


/* ─────────────────────────────────────────────
   11. INFO-BOXES Y SMALL-BOXES (AdminLTE)
   Modernizados con las variables del sistema
───────────────────────────────────────────── */
.info-box {
  border-radius: var(--radio-md) !important;
  box-shadow:    var(--sombra-sm) !important;
  border:        none !important;
  transition:    var(--transicion) !important;
}

.info-box:hover {
  box-shadow:    var(--sombra-md) !important;
  transform:     translateY(-2px);
}

.info-box-number {
  font-size:   1.4rem !important;
  font-weight: 700 !important;
}

.info-box-text {
  font-size:   var(--text-sm) !important;
  font-weight: 500 !important;
}

.small-box {
  border-radius: var(--radio-md) !important;
  box-shadow:    var(--sombra-sm) !important;
  transition:    var(--transicion) !important;
}

.small-box:hover {
  box-shadow: var(--sombra-md) !important;
  transform:  translateY(-2px);
}

.small-box h3 {
  font-weight: 800 !important;
}

/* ─────────────────────────────────────────────
   12. PAGE TITLE Y BREADCRUMBS
───────────────────────────────────────────── */
.page-title, .content-header h1 {
  font-size:   var(--text-2xl) !important;
  font-weight: 700 !important;
  color:       #1e293b !important;
  letter-spacing: -0.01em !important;
}

.breadcrumb {
  background: transparent !important;
  padding:    0 !important;
  margin:     0 !important;
  font-size:  var(--text-xs) !important;
  font-weight: 500 !important;
}

.breadcrumb-item a {
  color: var(--color-primario) !important;
  text-decoration: none !important;
}

.breadcrumb-item.active {
  color: #64748b !important;
}


/* ─────────────────────────────────────────────
   13. ALERTS Y NOTIFICACIONES
───────────────────────────────────────────── */
.alert {
  border:        none !important;
  border-radius: var(--radio-base) !important;
  border-left:   4px solid !important;
  font-size:     var(--text-sm) !important;
  font-weight:   500 !important;
}

.alert-success {
  background:   #f0fdf4 !important;
  border-color: var(--color-exito) !important;
  color:        #065f46 !important;
}

.alert-danger, .alert-error {
  background:   #fef2f2 !important;
  border-color: var(--color-peligro) !important;
  color:        #991b1b !important;
}

.alert-warning {
  background:   #fffbeb !important;
  border-color: var(--color-alerta) !important;
  color:        #92400e !important;
}

.alert-info {
  background:   #f0f9ff !important;
  border-color: var(--color-info) !important;
  color:        #075985 !important;
}


/* ─────────────────────────────────────────────
   14. DARK MODE — Soporte completo del sistema
───────────────────────────────────────────── */
body.dark-mode {
  --color-superficie: #1e293b;
  --color-superficie-2: #273548;
  --color-texto:      #f1f5f9;
  --color-borde:      rgba(255,255,255,0.1);
}

body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .card-footer {
  background-color: #1e293b !important;
  border-color:     rgba(255,255,255,0.08) !important;
  color:            #f1f5f9 !important;
}

body.dark-mode .card-title {
  color: #f1f5f9 !important;
}

body.dark-mode .table thead th {
  background-color: #273548 !important;
  color:            #94a3b8 !important;
  border-color:     rgba(255,255,255,0.1) !important;
}

body.dark-mode .table td {
  color:            #cbd5e1 !important;
  border-color:     rgba(255,255,255,0.07) !important;
}

body.dark-mode .table tbody tr:hover {
  background-color: rgba(255,255,255,0.05) !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #273548 !important;
  color:            #f1f5f9 !important;
  border-color:     rgba(255,255,255,0.15) !important;
}

body.dark-mode .form-control:focus {
  background-color: #2d3e55 !important;
  border-color:     var(--color-primario) !important;
  color:            #f1f5f9 !important;
}

body.dark-mode label,
body.dark-mode .form-group label,
body.dark-mode .col-form-label {
  color: #94a3b8 !important;
}

body.dark-mode .modal-content {
  background-color: #1e293b !important;
  color:            #f1f5f9 !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode .bg-white,
body.dark-mode .bg-light {
  background-color: #1e293b !important;
  color:            #f1f5f9 !important;
}

body.dark-mode .text-dark,
body.dark-mode .text-muted {
  color: #94a3b8 !important;
}

body.dark-mode .list-group-item {
  background-color: #273548 !important;
  border-color:     rgba(255,255,255,0.08) !important;
  color:            #f1f5f9 !important;
}

body.dark-mode .list-group-item:hover {
  background-color: #2d3e55 !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-selection {
  background-color: #273548 !important;
  border-color:     rgba(255,255,255,0.15) !important;
  color:            #f1f5f9 !important;
}


/* ─────────────────────────────────────────────
   15. UTILIDADES EXTRA DEL SISTEMA
───────────────────────────────────────────── */

/* Overflow global seguro */
.wrapper { max-width: 100%; overflow-x: hidden; }
.row > [class^="col-"], .card, .card-body { min-width: 0; }

/* Hover en filas de tabla — cursor */
.table-hover tbody tr { cursor: default; }
.table-hover tbody tr.clickable { cursor: pointer; }

/* Separadores más suaves */
hr { border-color: #f1f5f9 !important; margin: 1rem 0 !important; }

/* Scrollbar personalizado (webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Chips de estado rápidos */
.estado-activo   { color: var(--color-exito) !important;   font-weight: 600 !important; }
.estado-inactivo { color: var(--color-secundario) !important; font-weight: 600 !important; }
.estado-pendiente { color: var(--color-alerta) !important; font-weight: 600 !important; }
.estado-cancelado { color: var(--color-peligro) !important; font-weight: 600 !important; }

/* Responsive mobile — compresión */
@media (max-width: 576px) {
  .wrapper { overflow-x: hidden; }

  .row, .container-fluid, .content-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .btn { padding: 0.3rem 0.6rem !important; font-size: var(--text-xs) !important; }

  .info-box { padding: 0.6rem !important; }
  .info-box .info-box-icon { width: 48px; height: 48px; line-height: 48px; font-size: 20px; }
  .info-box .info-box-number { font-size: 1rem !important; }
  .info-box .info-box-text { font-size: var(--text-xs) !important; }

  .small-box h3 { font-size: 1.4rem !important; }
  .small-box p  { font-size: 0.8rem !important; }
  .small-box .icon { display: none !important; }

  .modal-dialog { margin: 0.5rem !important; }
}

/* ─────────────────────────────────────────────
   12. SIDEBAR — menú escalonado (carpetas y subcarpetas)
   Muestra la jerarquía con sangría por nivel.
───────────────────────────────────────────── */
/* Nivel 1: items directos del sidebar */
.sidebar .nav-sidebar > .nav-item > .nav-treeview {
  padding-left: 0.75rem !important;
}

/* Nivel 2: subcarpetas dentro de una carpeta */
.sidebar .nav-sidebar .nav-treeview .nav-treeview {
  padding-left: 1.25rem !important;
}

/* Nivel 3+: mayor sangría */
.sidebar .nav-sidebar .nav-treeview .nav-treeview .nav-treeview {
  padding-left: 1.75rem !important;
}

/* Icono de carpeta/archivo según profundidad: reducir tamaño al anidar */
.sidebar .nav-treeview .nav-treeview .nav-icon,
.sidebar .nav-treeview .nav-treeview .nav-icon.fa,
.sidebar .nav-treeview .nav-treeview .nav-icon.fas {
  font-size: 0.75rem !important;
  width: 1.1rem !important;
}