/* ============================================================
   OTI SCMT — Bootstrap 5 Theme Overrides
   Dashboard corporativo de transporte
   Cargar DESPUÉS de Bootstrap 5 CDN
   ============================================================ */

/* ---- Google Fonts: Inter --------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   1. CSS Custom Properties (Tokens visuales del sistema)
   ============================================================ */
:root {
  /* OTI palette — sin azul */
  --oti-primary: #fff102;
  --oti-accent: #1a1c23;
  --oti-bg: #ffffff;
  --oti-surface: #f4f5f7;
  --oti-border: #e2e4e8;
  --oti-text: #1a1c23;
  --oti-text-secondary: #5e6776;
  --oti-text-tertiary: #9ca3af;
  --oti-success: #10b981;
  --oti-warning: #f59e0b;
  --oti-danger: #ef4444;
  --oti-header-bg: #1a1c23;
  --oti-sidebar-bg: #1a1c23;
  --oti-kpi-value: 2rem;

  /* Bootstrap primary overrides */
  --bs-primary: var(--oti-primary);
  --bs-primary-rgb: 255, 241, 2;
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--oti-text);
  --bs-body-bg: var(--oti-bg);
  --bs-border-color: var(--oti-border);
  --bs-border-radius: 8px;
}

/* ---- Dark Mode — OTI ----------------------------------------- */
/* Transiciones suaves para cambio de tema */
body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.card {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.table {
  transition: background-color 0.2s ease;
}

.sidebar {
  transition: background-color 0.2s ease;
}

.navbar {
  transition: background-color 0.2s ease;
}

.modal-content {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dropdown-menu {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-theme="dark"] {
  /* OTI palette — modo oscuro */
  --oti-primary: #fff102;
  --oti-accent: #ffffff;
  --oti-bg: #121212;
  --oti-surface: #1e1e1e;
  --oti-border: #333333;
  --oti-text: #ffffff;
  --oti-text-secondary: #cccccc;
  --oti-text-tertiary: #999999;
  --oti-success: #10b981;
  --oti-warning: #f59e0b;
  --oti-danger: #ef4444;
  --oti-header-bg: #0a0a0c;
  --oti-sidebar-bg: #0a0a0c;

  /* Bootstrap primary overrides — modo oscuro */
  --bs-primary: var(--oti-primary);
  --bs-primary-rgb: 255, 241, 2;
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--oti-text);
  --bs-body-bg: var(--oti-bg);
  --bs-border-color: var(--oti-border);
  --bs-border-radius: 8px;
}

[data-theme="dark"] .table tbody tr:hover {
  background-color: rgba(255,255,255,0.03);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,0.02);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd):hover {
  background-color: rgba(255,255,255,0.04);
}

/* ============================================================
   2. Navbar (Header oscuro)
   ============================================================ */
.navbar {
  background-color: var(--oti-header-bg) !important;
  min-height: 56px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar .navbar-brand {
  color: var(--oti-primary) !important;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 500;
  transition: color 0.15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--oti-primary) !important;
}

.navbar .nav-link.active {
  color: var(--oti-primary) !important;
}

.navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.2);
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,241,2,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   3. Sidebar
   ============================================================ */
.sidebar {
  width: 250px;
  min-width: 250px;
  background-color: var(--oti-sidebar-bg);
  min-height: 100vh;
  padding-top: 1rem;
  padding-bottom: 2rem;
  overflow-y: auto;
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.65rem 1.25rem;
  border-radius: 0;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sidebar .nav-link:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  background-color: rgba(255, 255, 255, 0.05);
}

/* 4. Sidebar link activo */
.sidebar .nav-link.active {
  color: #fff102 !important;
  background-color: rgba(255, 241, 2, 0.12) !important;
  font-weight: 600;
  border-right: 3px solid var(--oti-primary);
}

.sidebar .nav-link i,
.sidebar .nav-link svg {
  width: 1.25rem;
  text-align: center;
  font-size: 1.1rem;
}

.sidebar .sidebar-heading {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1rem 1.25rem 0.35rem 1.25rem;
  font-weight: 600;
}

/* ============================================================
   5. Botones
   ============================================================ */

/* --btn-primary */
.btn-primary {
  background-color: var(--oti-primary) !important;
  border-color: var(--oti-primary) !important;
  color: var(--oti-accent) !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #e6d800 !important;
  border-color: #e6d800 !important;
  color: var(--oti-accent) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: #d4c800 !important;
  border-color: #d4c800 !important;
  color: var(--oti-accent) !important;
  opacity: 0.65;
}

/* 6. btn-outline-primary */
.btn-outline-primary {
  border-color: var(--oti-accent) !important;
  color: var(--oti-accent) !important;
  font-weight: 600;
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--oti-accent) !important;
  border-color: var(--oti-accent) !important;
  color: #ffffff !important;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  border-color: var(--oti-accent) !important;
  color: var(--oti-accent) !important;
  opacity: 0.4;
}

/* 7. btn-danger */
.btn-danger {
  background-color: var(--oti-danger) !important;
  border-color: var(--oti-danger) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

/* Utility: botones con íconos */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ============================================================
   6. Botones de estado (éxito, warning)
   ============================================================ */
.btn-success {
  background-color: var(--oti-success) !important;
  border-color: var(--oti-success) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #059669 !important;
  border-color: #059669 !important;
}

.btn-warning {
  background-color: var(--oti-warning) !important;
  border-color: var(--oti-warning) !important;
  color: #1a1c23 !important;
  font-weight: 600;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
}

/* ============================================================
   7. Cards
   ============================================================ */
.card {
  background-color: var(--oti-bg);
  border: 1px solid var(--oti-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--oti-border);
  font-weight: 600;
  padding: 1rem 1.25rem;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  background-color: var(--oti-surface);
  border-top: 1px solid var(--oti-border);
  padding: 0.75rem 1.25rem;
}

/* 8. KPI Cards */
.kpi-card {
  background-color: var(--oti-bg);
  border: 1px solid var(--oti-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
}

.kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.kpi-card .kpi-value {
  font-size: var(--oti-kpi-value);
  font-weight: 700;
  line-height: 1.2;
  color: var(--oti-text);
  margin-bottom: 0.25rem;
}

.kpi-card .kpi-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--oti-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

.kpi-card .kpi-trend {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.kpi-card .kpi-trend.up {
  color: var(--oti-success);
}

.kpi-card .kpi-trend.down {
  color: var(--oti-danger);
}

/* ============================================================
   9. Tables
   ============================================================ */
.table {
  margin-bottom: 0;
}

.table thead th {
  background-color: var(--oti-surface);
  color: var(--oti-text-secondary);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid var(--oti-border);
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

/* Títulos de columnas modificables en verde forest - máxima especificidad */
.tabla-traslados thead th.editable-column,
.table thead th.editable-column,
.tabla-traslados thead th.editable-column div,
.table thead th.editable-column div,
.tabla-traslados thead th.editable-column div a,
.table thead th.editable-column div a,
.tabla-traslados thead th.editable-column div strong,
.table thead th.editable-column div strong {
  color: #228B22 !important;
  font-weight: 700 !important;
}

.table tbody td {
  color: var(--oti-text);
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--oti-border);
}

/* Sin bordes verticales */
.table td,
.table th {
  border-left: none;
  border-right: none;
}

.table tbody tr:hover {
  background-color: #f8f9fa;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Table variants */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

.table-striped tbody tr:nth-of-type(odd):hover {
  background-color: #f8f9fa;
}

/* ============================================================
   10. Form Controls
   ============================================================ */
.form-control,
.form-select {
  border: 1px solid var(--oti-border);
  border-radius: 6px;
  color: var(--oti-text);
  font-size: 0.9rem;
  padding: 0.5rem 0.875rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--oti-primary);
  box-shadow: 0 0 0 3px rgba(255, 241, 2, 0.15);
  color: var(--oti-text);
}

.form-control::placeholder {
  color: var(--oti-text-tertiary);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--oti-surface);
  opacity: 0.7;
}

.form-label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--oti-text-secondary);
  margin-bottom: 0.35rem;
}

.form-text {
  color: var(--oti-text-tertiary);
  font-size: 0.8rem;
}

/* Input group */
.input-group-text {
  background-color: var(--oti-surface);
  border: 1px solid var(--oti-border);
  color: var(--oti-text-secondary);
  font-size: 0.85rem;
}

/* Form validation */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--oti-success);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--oti-danger);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ============================================================
   11. Badges
   ============================================================ */
.badge {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.3em 0.65em;
  border-radius: 4px;
}

/* Badge con opacidad 12% para el fondo */
.badge.bg-primary,
.badge.text-bg-primary {
  background-color: rgba(255, 241, 2, 0.12) !important;
  color: #b3a500 !important;
}

.badge.bg-success,
.badge.text-bg-success {
  background-color: rgba(16, 185, 129, 0.12) !important;
  color: #047857 !important;
}

.badge.bg-warning,
.badge.text-bg-warning {
  background-color: rgba(245, 158, 11, 0.12) !important;
  color: #b45309 !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #b91c1c !important;
}

.badge.bg-info,
.badge.text-bg-info {
  background-color: rgba(6, 182, 212, 0.12) !important;
  color: #0e7490 !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary {
  background-color: rgba(94, 103, 118, 0.12) !important;
  color: #4b5563 !important;
}

.badge.bg-dark,
.badge.text-bg-dark {
  background-color: rgba(26, 28, 35, 0.12) !important;
  color: var(--oti-accent) !important;
}

/* ============================================================
   12. Alerts
   ============================================================ */
.alert {
  border: none;
  border-radius: 8px;
  font-weight: 500;
  padding: 1rem 1.25rem;
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #065f46;
  border-left: 4px solid var(--oti-success);
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #92400e;
  border-left: 4px solid var(--oti-warning);
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: #991b1b;
  border-left: 4px solid var(--oti-danger);
}

.alert-info {
  background-color: rgba(6, 182, 212, 0.08);
  color: #0e7490;
  border-left: 4px solid #06b6d4;
}

.alert-primary {
  background-color: rgba(255, 241, 2, 0.1);
  color: #7a7300;
  border-left: 4px solid var(--oti-primary);
}

.alert .alert-heading {
  font-weight: 700;
  font-size: 1rem;
}

.alert .btn-close {
  font-size: 0.8rem;
}

/* ============================================================
   13. Layout — Wrapper + Sidebar + Content
   ============================================================ */
.wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.content {
  flex: 1;
  padding: 1.5rem 2rem;
  background-color: var(--oti-bg);
  min-width: 0; /* evita overflow en flexbox */
}

/* Content sin sidebar (páginas full-width) */
.content-full {
  flex: 1;
  padding: 1.5rem 2rem;
  background-color: var(--oti-bg);
}

/* Sidebar colapsable */
.sidebar.collapsed {
  width: 60px;
  min-width: 60px;
}

.sidebar.collapsed .nav-link span,
.sidebar.collapsed .sidebar-heading {
  display: none;
}

.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 0.65rem 0;
}

/* ============================================================
   14. Page Header / Section Title
   ============================================================ */
.page-header {
  margin-bottom: 1.5rem;
}

.page-header h1,
.page-header .page-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--oti-text);
  margin-bottom: 0.25rem;
}

.page-header .page-subtitle {
  font-size: 0.85rem;
  color: var(--oti-text-secondary);
  margin-bottom: 0;
}

/* ============================================================
   15. Dropdowns
   ============================================================ */
.dropdown-menu {
  border: 1px solid var(--oti-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 0.5rem 0;
}

.dropdown-item {
  color: var(--oti-text);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--oti-surface);
  color: var(--oti-text);
}

.dropdown-item.active {
  background-color: rgba(255, 241, 2, 0.12);
  color: var(--oti-accent);
}

.dropdown-divider {
  border-top: 1px solid var(--oti-border);
}

/* ============================================================
   16. Modals
   ============================================================ */
.modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.modal-header {
  border-bottom: 1px solid var(--oti-border);
  padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
  font-weight: 700;
  font-size: 1.15rem;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  border-top: 1px solid var(--oti-border);
  padding: 1rem 1.5rem;
}

/* ============================================================
   17. Tabs & Navs
   ============================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--oti-border);
}

.nav-tabs .nav-link {
  color: var(--oti-text-secondary);
  font-weight: 500;
  border: none;
  padding: 0.65rem 1.25rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.nav-tabs .nav-link:hover {
  color: var(--oti-text);
  border-bottom-color: var(--oti-border);
}

.nav-tabs .nav-link.active {
  color: var(--oti-accent);
  font-weight: 600;
  border-bottom-color: var(--oti-primary);
  background-color: transparent;
}

.nav-pills .nav-link {
  color: var(--oti-text-secondary);
  font-weight: 500;
  border-radius: 6px;
  padding: 0.5rem 1rem;
}

.nav-pills .nav-link.active {
  background-color: rgba(255, 241, 2, 0.12);
  color: var(--oti-accent);
  font-weight: 600;
}

/* ============================================================
   18. Pagination
   ============================================================ */
.page-link {
  color: var(--oti-text);
  border: 1px solid var(--oti-border);
  font-weight: 500;
  padding: 0.4rem 0.8rem;
}

.page-link:hover {
  color: var(--oti-accent);
  background-color: var(--oti-surface);
  border-color: var(--oti-border);
}

.page-item.active .page-link {
  background-color: var(--oti-primary);
  border-color: var(--oti-primary);
  color: var(--oti-accent);
  font-weight: 600;
}

.page-item.disabled .page-link {
  color: var(--oti-text-tertiary);
  background-color: var(--oti-bg);
  border-color: var(--oti-border);
}

/* ============================================================
   19. Progress Bars
   ============================================================ */
.progress {
  background-color: var(--oti-surface);
  border-radius: 6px;
  height: 0.5rem;
}

.progress-bar {
  background-color: var(--oti-primary);
  border-radius: 6px;
}

.progress-bar.bg-success {
  background-color: var(--oti-success) !important;
}

.progress-bar.bg-warning {
  background-color: var(--oti-warning) !important;
}

.progress-bar.bg-danger {
  background-color: var(--oti-danger) !important;
}

/* ============================================================
   20. Custom Scrollbar (sutil)
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.12);
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.sidebar {
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* ============================================================
   21. Utility classes
   ============================================================ */

/* Colores de texto OTI */
.text-primary {
  color: var(--oti-primary) !important;
}

.text-accent {
  color: var(--oti-accent) !important;
}

.text-secondary-custom {
  color: var(--oti-text-secondary) !important;
}

.text-tertiary {
  color: var(--oti-text-tertiary) !important;
}

.text-success {
  color: var(--oti-success) !important;
}

.text-warning {
  color: var(--oti-warning) !important;
}

.text-danger {
  color: var(--oti-danger) !important;
}

/* Fondos OTI */
.bg-primary {
  background-color: var(--oti-primary) !important;
}

.bg-accent {
  background-color: var(--oti-accent) !important;
}

.bg-surface {
  background-color: var(--oti-surface) !important;
}

.bg-success {
  background-color: var(--oti-success) !important;
}

.bg-warning {
  background-color: var(--oti-warning) !important;
}

.bg-danger {
  background-color: var(--oti-danger) !important;
}

/* Bordes OTI */
.border-primary {
  border-color: var(--oti-primary) !important;
}

.border-accent {
  border-color: var(--oti-accent) !important;
}

/* Separadores */
.separator {
  border-top: 1px solid var(--oti-border);
  margin: 1.5rem 0;
}

/* Status dots */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.status-dot.active,
.status-dot.success {
  background-color: var(--oti-success);
}

.status-dot.warning {
  background-color: var(--oti-warning);
}

.status-dot.danger {
  background-color: var(--oti-danger);
}

.status-dot.inactive {
  background-color: var(--oti-text-tertiary);
}

/* ============================================================
   21b. Badge Gafete (Operador)
   ============================================================ */
.badge-gafete {
  display: block !important;
  visibility: visible !important;
  background-color: #ffc107;
  color: #000;
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.1em 0.3em;
  border-radius: 0.15rem;
  margin: 2px 0;
  white-space: nowrap;
}

/* Contenedor de chofer para apilar elementos verticalmente */
[id^="ch|"] > span.badge-gafete,
[id^="ch|"] > div[id^="chdd|"] {
  display: block !important;
  clear: both;
}


/* ============================================================
   22. Responsive adjustments
   ============================================================ */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    min-width: 100%;
    min-height: auto;
  }

  .content {
    padding: 1rem;
  }

  .kpi-card {
    margin-bottom: 0.75rem;
  }
}

/* ============================================================
   Fin del tema OTI SCMT
   ============================================================ */