/* Sistema de Design Moderno */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* Colores Principales - Branding Moderno */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #dbeafe;
  --primary-50: rgba(37, 99, 235, 0.05);
  --primary-100: rgba(37, 99, 235, 0.1);
  --primary-500: #2563eb;
  --primary-600: #1d4ed8;
  --primary-700: #1e40af;
  --primary-900: #1e3a8a;

  /* Colores Secundarios */
  --secondary: #64748b;
  --secondary-light: #f1f5f9;
  --accent: #06b6d4;
  --success: #059669;
  --success-light: #d1fae5;
  --warning: #d97706;
  --warning-light: #fef3c7;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --info: #0284c7;
  --info-light: #e0f2fe;

  /* Colores de Fondo */
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  --surface: #ffffff;
  --surface-hover: #f8fafc;
  --surface-dark: #0f172a;
  --surface-dark-hover: #1e293b;

  /* Colores de Texto */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  --text-dark-primary: #f8fafc;
  --text-dark-secondary: #cbd5e1;
  --text-dark-muted: #64748b;

  /* Bordes */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-dark: #334155;
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;

  /* Espaciado - Sistema de 8px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Sombras - Elevación */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Tipografía */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;

  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
}

/* Estilos Base Modernos */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  transition: background-color var(--transition-base), color var(--transition-base);
  letter-spacing: -0.01em;
}

/* Modo oscuro mejorado */
[data-theme="dark"] body,
body.dark-mode {
  background-color: var(--surface-dark);
  color: var(--text-dark-primary);
}

/* Asegurar que el HTML también tenga el fondo correcto */
html[data-theme="dark"] {
  background-color: var(--surface-dark);
}

html[data-theme="light"] {
  background-color: var(--bg-primary);
}

/* Tipografía mejorada */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.025em;
  margin-top: 0;
  margin-bottom: var(--space-4);
  color: var(--text-primary);
  transition: color var(--transition-base);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--text-dark-primary);
}

h1 {
  font-size: var(--font-size-3xl);
}
h2 {
  font-size: var(--font-size-2xl);
}
h3 {
  font-size: var(--font-size-xl);
}
h4 {
  font-size: var(--font-size-lg);
}
h5 {
  font-size: var(--font-size-base);
}
h6 {
  font-size: var(--font-size-sm);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
  transition: color var(--transition-base);
}

[data-theme="dark"] p,
body.dark-mode p {
  color: var(--text-dark-secondary);
}

.text-muted {
  color: var(--text-muted) !important;
  transition: color var(--transition-base);
}

[data-theme="dark"] .text-muted,
body.dark-mode .text-muted {
  color: var(--text-dark-muted) !important;
}

/* Enlaces mejorados */
a {
  color: var(--primary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

a:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* Navbar Moderno */
.navbar {
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--transition-base);
}

.navbar-brand {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
}

.navbar-nav .nav-link {
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary) !important;
  padding: var(--space-2) var(--space-4) !important;
  border-radius: var(--border-radius);
  margin: 0 var(--space-1);
  transition: all var(--transition-fast);
}

.navbar-nav .nav-link:hover {
  color: var(--primary) !important;
  background-color: var(--primary-50);
}

.navbar-nav .nav-link.active {
  color: var(--primary) !important;
  background-color: var(--primary-100);
  font-weight: var(--font-weight-semibold);
}

/* Modo oscuro - Navbar mejorado */
[data-theme="dark"] .navbar,
body.dark-mode .navbar {
  background-color: var(--surface-dark) !important;
  border-bottom-color: var(--border-dark);
}

[data-theme="dark"] .navbar-brand,
body.dark-mode .navbar-brand {
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .navbar-nav .nav-link,
body.dark-mode .navbar-nav .nav-link {
  color: var(--text-dark-secondary) !important;
}

[data-theme="dark"] .navbar-nav .nav-link:hover,
body.dark-mode .navbar-nav .nav-link:hover {
  color: var(--primary-light) !important;
  background-color: rgba(37, 99, 235, 0.1);
}

[data-theme="dark"] .navbar-nav .nav-link.active,
body.dark-mode .navbar-nav .nav-link.active {
  color: var(--primary-light) !important;
  background-color: rgba(37, 99, 235, 0.2);
}

/* Sidebar Moderno */
.sidebar {
  background-color: var(--surface);
  border-right: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  min-height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar .nav-link {
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius);
  margin: 0 var(--space-3);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  position: relative;
}

.sidebar .nav-link:hover {
  color: var(--primary);
  background-color: var(--primary-50);
  transform: translateX(2px);
}

.sidebar .nav-link.active {
  color: var(--primary);
  background-color: var(--primary-100);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}

.sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background-color: var(--primary);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.sidebar .nav-link i {
  margin-right: var(--space-3);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
}

/* Modo oscuro - Sidebar */
body.dark-mode .sidebar {
  background-color: var(--surface-dark);
  border-right-color: var(--border-dark);
}

body.dark-mode .sidebar .nav-link {
  color: var(--text-dark-secondary);
}

body.dark-mode .sidebar .nav-link:hover {
  color: var(--primary-light);
  background-color: rgba(37, 99, 235, 0.1);
}

body.dark-mode .sidebar .nav-link.active {
  color: var(--primary-light);
  background-color: rgba(37, 99, 235, 0.2);
}

/* Sidebar responsive */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -280px;
    width: 280px;
    z-index: 1030;
    transition: left var(--transition-base);
  }

  .sidebar.show {
    left: 0;
  }

  .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1025;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
  }

  .sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
  }
}

/* Cards Modernas Simplificadas */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-6);
  transition: box-shadow var(--transition-fast);
  overflow: hidden;
}

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

.card-header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-5) var(--space-6);
  transition: all var(--transition-base);
}

.card-header h5,
.card-header h4,
.card-header h3 {
  margin-bottom: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  padding: var(--space-4) var(--space-6);
  transition: all var(--transition-base);
}

/* Cards especiales */
.card.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.card.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* Modo oscuro - Cards */
body.dark-mode .card {
  background-color: var(--surface-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-lg);
}

body.dark-mode .card:hover {
  box-shadow: var(--shadow-xl);
}

body.dark-mode .card-header {
  background-color: var(--surface-dark);
  border-bottom-color: var(--border-dark);
}

body.dark-mode .card-header h5,
body.dark-mode .card-header h4,
body.dark-mode .card-header h3 {
  color: var(--text-dark-primary);
}

body.dark-mode .card-footer {
  background-color: var(--surface-dark-hover);
  border-top-color: var(--border-dark);
}

/* Botones Modernos Optimizados */
.btn {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

/* Botón primario */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Botón outline primario */
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
  background-color: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Botón secundario */
.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--text-inverse);
}

.btn-secondary:hover {
  background-color: var(--text-secondary);
  border-color: var(--text-secondary);
  color: var(--text-inverse);
}

/* Botón de éxito */
.btn-success {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--text-inverse);
}

.btn-success:hover {
  background-color: #047857;
  border-color: #047857;
  color: var(--text-inverse);
}

/* Botón de peligro */
.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--text-inverse);
}

.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: var(--text-inverse);
}

/* Botón de advertencia */
.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--text-inverse);
}

.btn-warning:hover {
  background-color: #b45309;
  border-color: #b45309;
  color: var(--text-inverse);
}

/* Botón de información */
.btn-info {
  background-color: var(--info);
  border-color: var(--info);
  color: var(--text-inverse);
}

.btn-info:hover {
  background-color: #0284c7;
  border-color: #0284c7;
  color: var(--text-inverse);
}

/* Botón deshabilitado */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Iconos circulares */
.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* Tablas Modernas */
.table {
  color: var(--text-primary);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table th {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-4) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 10;
}

.table td {
  padding: var(--space-4) var(--space-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-size-sm);
}

.table tbody tr {
  transition: all var(--transition-fast);
}

.table-hover tbody tr:hover {
  background-color: var(--surface-hover);
}

/* Tabla con bordes */
.table-bordered {
  border: 1px solid var(--border-light);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--border-light);
}

/* Tabla rayada */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-secondary);
}

/* Tabla responsive */
.table-responsive {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

/* Estados de fila */
.table .table-success {
  background-color: var(--success-light);
  color: var(--success);
}

.table .table-danger {
  background-color: var(--danger-light);
  color: var(--danger);
}

.table .table-warning {
  background-color: var(--warning-light);
  color: var(--warning);
}

.table .table-info {
  background-color: var(--info-light);
  color: var(--info);
}

/* Modo oscuro - Tablas */
body.dark-mode .table {
  color: var(--text-dark-primary);
}

body.dark-mode .table th {
  background-color: var(--surface-dark-hover);
  color: var(--text-dark-primary);
  border-bottom-color: var(--border-dark);
}

body.dark-mode .table td {
  border-bottom-color: var(--border-dark);
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: var(--surface-dark-hover);
}

body.dark-mode .table-bordered {
  border-color: var(--border-dark);
}

body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td {
  border-color: var(--border-dark);
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--surface-dark-hover);
}

/* Formularios Modernos Simplificados */
.form-control {
  background-color: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), var(--shadow);
  background-color: var(--surface);
}

.form-control:hover:not(:focus) {
  border-color: var(--border-medium);
}

.form-control::placeholder {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

/* States de validación */
.form-control.is-valid {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.form-control.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Labels mejorados */
.form-label {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

/* Form groups */
.form-group {
  margin-bottom: var(--space-5);
}

/* Select mejorado */
.form-select {
  background-color: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), var(--shadow);
}

/* Checkboxes y radios */
.form-check-input {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-medium);
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-check-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-left: var(--space-2);
}

/* Modo oscuro - Formularios mejorado */
[data-theme="dark"] .form-control,
body.dark-mode .form-control {
  background-color: var(--surface-dark-hover);
  color: var(--text-dark-primary);
  border-color: var(--border-dark);
}

[data-theme="dark"] .form-control:focus,
body.dark-mode .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
  background-color: var(--surface-dark-hover);
}

[data-theme="dark"] .form-control::placeholder,
body.dark-mode .form-control::placeholder {
  color: var(--text-dark-muted);
}

[data-theme="dark"] .form-label,
body.dark-mode .form-label {
  color: var(--text-dark-primary);
}

[data-theme="dark"] .form-select,
body.dark-mode .form-select {
  background-color: var(--surface-dark-hover);
  color: var(--text-dark-primary);
  border-color: var(--border-dark);
}

[data-theme="dark"] .form-select:focus,
body.dark-mode .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .form-check-label,
body.dark-mode .form-check-label {
  color: var(--text-dark-secondary);
}

[data-theme="dark"] .form-check-input,
body.dark-mode .form-check-input {
  background-color: var(--surface-dark-hover);
  border-color: var(--border-dark);
}

[data-theme="dark"] .form-check-input:checked,
body.dark-mode .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Alertas mejoradas */
.alert {
  border-radius: var(--border-radius-lg);
  border: 1px solid transparent;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.alert-success {
  background-color: var(--success-light);
  border-color: var(--success);
  color: #065f46;
}

.alert-danger {
  background-color: var(--danger-light);
  border-color: var(--danger);
  color: #991b1b;
}

.alert-warning {
  background-color: var(--warning-light);
  border-color: var(--warning);
  color: #92400e;
}

.alert-info {
  background-color: var(--info-light);
  border-color: var(--info);
  color: #0c4a6e;
}

.alert-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1050;
  max-width: 350px;
}

/* Modo oscuro - Alertas */
[data-theme="dark"] .alert,
body.dark-mode .alert {
  background-color: var(--surface-dark-hover);
  border-color: var(--border-dark);
  color: var(--text-dark-primary);
}

[data-theme="dark"] .alert-success,
body.dark-mode .alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: var(--success);
  color: #34d399;
}

[data-theme="dark"] .alert-danger,
body.dark-mode .alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: var(--danger);
  color: #f87171;
}

[data-theme="dark"] .alert-warning,
body.dark-mode .alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: var(--warning);
  color: #fbbf24;
}

[data-theme="dark"] .alert-info,
body.dark-mode .alert-info {
  background-color: rgba(6, 182, 212, 0.1);
  border-color: var(--info);
  color: #22d3ee;
}

/* Planes de suscripción */
.plan-card {
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
}

.dark-mode .plan-card {
  border-color: var(--border-dark);
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dark-mode .plan-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

.plan-card.border-primary {
  border-width: 2px !important;
}

.price {
  font-size: 18px;
}

.price .currency {
  font-size: 24px;
  font-weight: 500;
  vertical-align: top;
  position: relative;
  top: 5px;
}

.price .amount {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.price .period {
  font-size: 16px;
  color: #6c757d;
}

.dark-mode .price .period {
  color: #adb5bd;
}

/* Calendario */
.fc {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --fc-border-color: var(--bs-border-color, #dee2e6);
  --fc-button-text-color: var(--bs-body-color, #212529);
  --fc-button-bg-color: var(--bs-light, #f8f9fa);
  --fc-button-border-color: var(--bs-border-color, #dee2e6);
  --fc-button-hover-bg-color: var(--bs-secondary, #6c757d);
  --fc-button-hover-border-color: var(--bs-secondary, #6c757d);
  --fc-button-active-bg-color: var(--bs-primary, #0d6efd);
  --fc-button-active-border-color: var(--bs-primary, #0d6efd);
  --fc-event-bg-color: var(--bs-primary, #0d6efd);
  --fc-event-border-color: var(--bs-primary, #0d6efd);
  --fc-event-text-color: #ffffff;
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--bs-light, #f8f9fa);
  --fc-neutral-text-color: var(--bs-body-color, #212529);
  --fc-list-event-hover-bg-color: var(--bs-light, #f8f9fa);
}

/* Sistema de scroll optimizado para el calendario */
.fc-view-harness {
  height: auto !important;
  min-height: 500px;
  max-height: 70vh;
  overflow: hidden;
}

/* Scroll principal del calendario */
.fc-scroller {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-secondary, #6c757d) transparent;
  scroll-behavior: smooth;
}

/* Estilos del scrollbar */
.fc-scroller::-webkit-scrollbar {
  width: 6px;
}

.fc-scroller::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.fc-scroller::-webkit-scrollbar-thumb {
  background-color: var(--bs-secondary, #6c757d);
  border-radius: 3px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.fc-scroller::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-primary, #0d6efd);
  opacity: 1;
}

/* Optimización para vistas de tiempo */
.fc-timegrid-body {
  overflow: visible !important;
}

.fc-timegrid-slots {
  overflow: visible !important;
}

/* Mejorar altura automática del calendario */
.fc {
  height: auto !important;
}

.fc-view {
  height: auto !important;
}

/* Responsive scroll heights */
@media (max-width: 768px) {
  .fc-view-harness {
    max-height: 60vh;
    min-height: 400px;
  }

  .fc-scroller::-webkit-scrollbar {
    width: 4px;
  }
}

@media (max-width: 576px) {
  .fc-view-harness {
    max-height: 50vh;
    min-height: 350px;
  }
}

.fc-toolbar {
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--bs-light, #f8f9fa) 0%, var(--bs-white, #ffffff) 100%);
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

.fc-toolbar-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bs-primary, #0d6efd);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: -0.025em;
}

.fc-button {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-white, #ffffff);
  color: var(--bs-body-color, #212529);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
}

.fc-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.fc-button:hover::before {
  left: 100%;
}

.fc-button:hover {
  background: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.fc-button-active,
.fc-button:focus {
  background: linear-gradient(135deg, var(--bs-primary, #0d6efd) 0%, #0056b3 100%) !important;
  border-color: var(--bs-primary, #0d6efd) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25), 0 4px 15px rgba(13, 110, 253, 0.2);
  transform: translateY(-1px);
}

.fc-event {
  border-radius: 0.5rem;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  background: linear-gradient(
    135deg,
    var(--fc-event-bg-color, #0d6efd) 0%,
    rgba(var(--bs-primary-rgb, 13, 110, 253), 0.8) 100%
  );
}

.fc-event::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.fc-event:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}

.fc-event:active {
  transform: translateY(0) scale(0.98);
  transition: all 0.1s ease;
}

.fc-daygrid-event {
  margin: 2px 1px;
  min-height: 22px;
}

.fc-timegrid-event {
  border-radius: 0.375rem;
  margin: 1px;
}

.fc-day-today {
  background: linear-gradient(
    135deg,
    rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15) 0%,
    rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08) 100%
  ) !important;
  border-color: var(--bs-primary, #0d6efd) !important;
  position: relative;
  overflow: hidden;
}

.fc-day-today::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bs-primary, #0d6efd), var(--bs-info, #0dcaf0), var(--bs-primary, #0d6efd));
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

.fc-day-past {
  background-color: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.03);
  opacity: 0.8;
}

.fc-day-future {
  background-color: transparent;
  position: relative;
}

/* Mejorar celdas del calendario con efectos modernos */
.fc-daygrid-day,
.fc-timegrid-slot {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.fc-daygrid-day:hover {
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.05);
  cursor: pointer;
}

/* Mejoras adicionales para el modo oscuro en el calendario */
[data-theme="dark"] .fc-toolbar,
body.dark-mode .fc-toolbar {
  background: var(--surface-dark-hover) !important;
  border-color: var(--border-dark) !important;
}

[data-theme="dark"] .fc-toolbar-title,
body.dark-mode .fc-toolbar-title {
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .fc-button,
body.dark-mode .fc-button {
  background: var(--surface-dark-hover) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .fc-button:hover,
body.dark-mode .fc-button:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

[data-theme="dark"] .fc-daygrid-day,
body.dark-mode .fc-daygrid-day {
  background: var(--surface-dark) !important;
  border-color: var(--border-dark) !important;
}

[data-theme="dark"] .fc-daygrid-day-number,
body.dark-mode .fc-daygrid-day-number {
  color: var(--text-dark-primary) !important;
}

/* Botón de tema mejorado */
#theme-toggle {
  transition: all var(--transition-fast);
  border-radius: var(--border-radius-full);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#theme-toggle:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

#theme-toggle i {
  font-size: var(--font-size-sm);
  transition: transform var(--transition-fast);
}

#theme-toggle:active i {
  transform: scale(0.9);
}

/* Mejoras para dropdowns en modo oscuro */
[data-theme="dark"] .dropdown-menu,
body.dark-mode .dropdown-menu {
  background-color: var(--surface-dark-hover) !important;
  border-color: var(--border-dark) !important;
  box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .dropdown-item,
body.dark-mode .dropdown-item {
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: var(--surface-dark) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .dropdown-divider,
body.dark-mode .dropdown-divider {
  border-color: var(--border-dark) !important;
}

/* Mejoras para modales en modo oscuro */
[data-theme="dark"] .modal-content,
body.dark-mode .modal-content {
  background-color: var(--surface-dark) !important;
  border-color: var(--border-dark) !important;
}

[data-theme="dark"] .modal-header,
body.dark-mode .modal-header {
  border-bottom-color: var(--border-dark) !important;
}

[data-theme="dark"] .modal-footer,
body.dark-mode .modal-footer {
  border-top-color: var(--border-dark) !important;
}

[data-theme="dark"] .modal-title,
body.dark-mode .modal-title {
  color: var(--text-dark-primary) !important;
}

/* Mejoras para tooltips en modo oscuro */
[data-theme="dark"] .tooltip .tooltip-inner,
body.dark-mode .tooltip .tooltip-inner {
  background-color: var(--surface-dark-hover) !important;
  color: var(--text-dark-primary) !important;
}

/* Mejoras para badges en modo oscuro */
[data-theme="dark"] .badge,
body.dark-mode .badge {
  background-color: var(--surface-dark-hover) !important;
  color: var(--text-dark-primary) !important;
}

/* Mejoras para breadcrumbs en modo oscuro */
[data-theme="dark"] .breadcrumb,
body.dark-mode .breadcrumb {
  background-color: var(--surface-dark-hover) !important;
}

[data-theme="dark"] .breadcrumb-item,
body.dark-mode .breadcrumb-item {
  color: var(--text-dark-secondary) !important;
}

[data-theme="dark"] .breadcrumb-item.active,
body.dark-mode .breadcrumb-item.active {
  color: var(--text-dark-primary) !important;
}

/* Mejoras para paginación en modo oscuro */
[data-theme="dark"] .page-link,
body.dark-mode .page-link {
  background-color: var(--surface-dark-hover) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .page-link:hover,
body.dark-mode .page-link:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

[data-theme="dark"] .page-item.active .page-link,
body.dark-mode .page-item.active .page-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Mejoras para progress bars en modo oscuro */
[data-theme="dark"] .progress,
body.dark-mode .progress {
  background-color: var(--surface-dark-hover) !important;
}

/* Mejoras para list groups en modo oscuro */
[data-theme="dark"] .list-group-item,
body.dark-mode .list-group-item {
  background-color: var(--surface-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .list-group-item:hover,
body.dark-mode .list-group-item:hover {
  background-color: var(--surface-dark-hover) !important;
}

[data-theme="dark"] .list-group-item.active,
body.dark-mode .list-group-item.active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Transiciones suaves para todos los elementos */
* {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--transition-fast);
  transition-timing-function: ease;
}

/* Evitar transiciones en elementos específicos que no las necesitan */
.fc-event,
.fc-button,
.btn:active,
input:focus,
textarea:focus,
select:focus {
  transition-duration: var(--transition-fast);
}

.fc-timegrid-slot:hover {
  background: linear-gradient(
    90deg,
    rgba(var(--bs-primary-rgb, 13, 110, 253), 0.05) 0%,
    rgba(var(--bs-primary-rgb, 13, 110, 253), 0.02) 100%
  );
  border-left: 3px solid var(--bs-primary, #0d6efd);
}

/* Efecto de selección para celdas */
.fc-daygrid-day.fc-day-selected,
.fc-timegrid-slot.fc-slot-selected {
  background: linear-gradient(
    135deg,
    rgba(var(--bs-success-rgb, 25, 135, 84), 0.1) 0%,
    rgba(var(--bs-success-rgb, 25, 135, 84), 0.05) 100%
  );
  border-color: var(--bs-success, #198754);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb, 25, 135, 84), 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb, 25, 135, 84), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb, 25, 135, 84), 0);
  }
}

/* Números de día más visibles y modernos */
.fc-daygrid-day-number {
  font-weight: 700;
  color: var(--bs-body-color, #212529);
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  margin: 4px;
}

.fc-daygrid-day-number:hover {
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
  transform: scale(1.1);
  color: var(--bs-primary, #0d6efd);
}

.fc-day-today .fc-daygrid-day-number {
  background: linear-gradient(135deg, var(--bs-primary, #0d6efd) 0%, #0056b3 100%);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
  animation: todayPulse 2s infinite;
}

@keyframes todayPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Mejorar vista de lista con diseño moderno */
.fc-list-event {
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  border: 2px solid var(--bs-border-color, #dee2e6);
  background: linear-gradient(135deg, var(--bs-white, #ffffff) 0%, var(--bs-light, #f8f9fa) 100%);
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fc-list-event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--bs-primary, #0d6efd) 0%, var(--bs-info, #0dcaf0) 100%);
}

.fc-list-event:hover {
  background: var(--bs-light, #f8f9fa);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-color: var(--bs-primary, #0d6efd);
}

.fc-list-event-title {
  font-weight: 600;
  color: var(--bs-dark, #212529);
}

.fc-list-event-time {
  font-weight: 500;
  color: var(--bs-primary, #0d6efd);
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
}

/* Responsive mejoras */
@media (max-width: 768px) {
  .fc-toolbar {
    flex-direction: column;
    gap: 0.5rem;
  }

  .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .fc-button {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
  }

  .fc-toolbar-title {
    font-size: 1.25rem;
    text-align: center;
    margin: 0.5rem 0;
  }
}

.fc-event-title {
  font-weight: 500;
}

.fc-toolbar-title {
  font-size: 1.5rem !important;
  font-weight: 600;
}

.dark-mode .fc-theme-standard .fc-scrollgrid,
.dark-mode .fc-theme-standard td,
.dark-mode .fc-theme-standard th {
  border-color: var(--border-dark);
}

.dark-mode .fc-theme-standard .fc-scrollgrid {
  background-color: var(--card-bg-dark);
}

.dark-mode .fc .fc-button-primary {
  background-color: var(--primary);
  border-color: var(--primary-dark);
}

.dark-mode .fc .fc-button-primary:hover {
  background-color: var(--primary-dark);
}

.dark-mode .fc .fc-daygrid-day.fc-day-today {
  background-color: rgba(109, 40, 217, 0.2);
}

/* ===== ESTILOS PARA DETALLES DE CITA ===== */

/* Estilos para detalles de cita */
.appointment-details {
  transition: all 0.3s ease;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.appointment-details:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.appointment-details .btn-close {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.appointment-details .btn-close:hover {
  opacity: 1;
}

.appointment-details .badge {
  font-size: 0.75em;
  padding: 0.25em 0.5em;
}

.appointment-details .btn-sm {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

.appointment-details hr {
  margin: 0.75rem 0;
  opacity: 0.3;
}

/* Animación de entrada para detalles */
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.appointment-details {
  animation: slideInFromTop 0.3s ease-out;
}

/* Responsive para detalles de cita */
@media (max-width: 576px) {
  .appointment-details .d-flex.gap-2 {
    flex-direction: column;
  }

  .appointment-details .btn-sm {
    width: 100%;
    margin-bottom: 0.25rem;
  }
}

/* Estilos para citas del día */
.day-appointments {
  transition: all 0.3s ease;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.day-appointments:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.appointment-item {
  transition: all 0.2s ease;
  border: 1px solid var(--bs-border-color, #dee2e6) !important;
}

.appointment-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: var(--bs-primary, #0d6efd) !important;
}

.appointment-item .badge {
  font-size: 0.7rem;
  padding: 0.2em 0.4em;
}

.appointments-list {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-secondary, #6c757d) transparent;
}

.appointments-list::-webkit-scrollbar {
  width: 6px;
}

.appointments-list::-webkit-scrollbar-track {
  background: transparent;
}

.appointments-list::-webkit-scrollbar-thumb {
  background-color: var(--bs-secondary, #6c757d);
  border-radius: 3px;
  opacity: 0.5;
}

.appointments-list::-webkit-scrollbar-thumb:hover {
  opacity: 0.8;
}

/* Animación para citas del día */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.day-appointments {
  animation: slideInFromLeft 0.3s ease-out;
}

.appointment-item {
  animation: slideInFromLeft 0.3s ease-out;
  animation-delay: calc(var(--item-index, 0) * 0.1s);
}

/* Estilos para modo oscuro en detalles de cita */
[data-bs-theme="dark"] .appointment-details,
body.theme-dark .appointment-details {
  background: var(--bs-dark-bg-subtle, #212529) !important;
  border-color: var(--bs-border-color-translucent, rgba(255, 255, 255, 0.15)) !important;
  color: var(--bs-body-color, #fff);
}

[data-bs-theme="dark"] .appointment-details .text-dark,
body.theme-dark .appointment-details .text-dark {
  color: var(--bs-body-color, #fff) !important;
}

[data-bs-theme="dark"] .appointment-details .text-muted,
body.theme-dark .appointment-details .text-muted {
  color: var(--bs-secondary-color, rgba(255, 255, 255, 0.75)) !important;
}

/* Estilos para modo oscuro en citas del día */
[data-bs-theme="dark"] .day-appointments,
body.theme-dark .day-appointments {
  background: var(--bs-dark-bg-subtle, #212529) !important;
  border-color: var(--bs-border-color-translucent, rgba(255, 255, 255, 0.15)) !important;
  color: var(--bs-body-color, #fff);
}

[data-bs-theme="dark"] .appointment-item,
body.theme-dark .appointment-item {
  background: var(--bs-dark, #212529) !important;
  border-color: var(--bs-border-color-translucent, rgba(255, 255, 255, 0.15)) !important;
  color: var(--bs-body-color, #fff);
}

[data-bs-theme="dark"] .appointment-item:hover,
body.theme-dark .appointment-item:hover {
  border-color: var(--bs-primary, #0d6efd) !important;
  background: var(--bs-dark-bg-subtle, #343a40) !important;
}

[data-bs-theme="dark"] .appointment-item .text-dark,
body.theme-dark .appointment-item .text-dark {
  color: var(--bs-body-color, #fff) !important;
}

[data-bs-theme="dark"] .appointment-item .text-muted,
body.theme-dark .appointment-item .text-muted {
  color: var(--bs-secondary-color, rgba(255, 255, 255, 0.75)) !important;
}

/* ===== ESTILOS BASE PARA MODO OSCURO ===== */

/* Estilos fundamentales para modo oscuro */
[data-bs-theme="dark"],
body.theme-dark {
  background-color: #0d1117 !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] body,
body.theme-dark {
  background-color: #0d1117 !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .main-content,
body.theme-dark .main-content {
  background-color: #0d1117 !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .container,
[data-bs-theme="dark"] .container-fluid,
body.theme-dark .container,
body.theme-dark .container-fluid {
  background-color: transparent !important;
}

/* Cards y paneles en modo oscuro */
[data-bs-theme="dark"] .card,
body.theme-dark .card {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .card-header,
body.theme-dark .card-header {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .card-body,
body.theme-dark .card-body {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .card-footer,
body.theme-dark .card-footer {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

/* Sidebar en modo oscuro */
[data-bs-theme="dark"] .sidebar,
body.theme-dark .sidebar {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

/* Navbar en modo oscuro */
[data-bs-theme="dark"] .navbar,
body.theme-dark .navbar {
  background-color: #161b22 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .navbar-nav .nav-link,
body.theme-dark .navbar-brand,
body.theme-dark .navbar-nav .nav-link {
  color: #e6edf3 !important;
}

/* Tablas en modo oscuro */
[data-bs-theme="dark"] .table,
body.theme-dark .table {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td,
body.theme-dark .table th,
body.theme-dark .table td {
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
body.theme-dark .table-striped tbody tr:nth-of-type(odd) {
  background-color: #21262d !important;
}

/* Formularios en modo oscuro */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
body.theme-dark .form-control,
body.theme-dark .form-select {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
  background-color: #21262d !important;
  border-color: #0d6efd !important;
  color: #e6edf3 !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: #8b949e !important;
}

[data-bs-theme="dark"] .form-label,
body.theme-dark .form-label {
  color: #e6edf3 !important;
}

/* Botones en modo oscuro */
[data-bs-theme="dark"] .btn-outline-primary,
body.theme-dark .btn-outline-primary {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
}

[data-bs-theme="dark"] .btn-outline-primary:hover,
body.theme-dark .btn-outline-primary:hover {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

/* Alerts en modo oscuro */
[data-bs-theme="dark"] .alert,
body.theme-dark .alert {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .alert-primary,
body.theme-dark .alert-primary {
  background-color: rgba(13, 110, 253, 0.1) !important;
  border-color: rgba(13, 110, 253, 0.2) !important;
  color: #6ea8fe !important;
}

[data-bs-theme="dark"] .alert-success,
body.theme-dark .alert-success {
  background-color: rgba(25, 135, 84, 0.1) !important;
  border-color: rgba(25, 135, 84, 0.2) !important;
  color: #75b798 !important;
}

[data-bs-theme="dark"] .alert-warning,
body.theme-dark .alert-warning {
  background-color: rgba(255, 193, 7, 0.1) !important;
  border-color: rgba(255, 193, 7, 0.2) !important;
  color: #ffda6a !important;
}

[data-bs-theme="dark"] .alert-danger,
body.theme-dark .alert-danger {
  background-color: rgba(220, 53, 69, 0.1) !important;
  border-color: rgba(220, 53, 69, 0.2) !important;
  color: #ea868f !important;
}

/* Badges en modo oscuro */
[data-bs-theme="dark"] .badge,
body.theme-dark .badge {
  background-color: #30363d !important;
  color: #e6edf3 !important;
}

/* Texto en modo oscuro */
[data-bs-theme="dark"] .text-dark,
body.theme-dark .text-dark {
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .text-muted,
body.theme-dark .text-muted {
  color: #8b949e !important;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6 {
  color: #e6edf3 !important;
}

/* Bordes en modo oscuro */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end,
body.theme-dark .border,
body.theme-dark .border-top,
body.theme-dark .border-bottom,
body.theme-dark .border-start,
body.theme-dark .border-end {
  border-color: #30363d !important;
}

/* ===== MEJORAS PARA DROPDOWN Y MODO OSCURO ===== */

/* Mejoras para el dropdown del menú de usuario */
.navbar .dropdown-menu {
  position: absolute !important;
  z-index: 999999 !important;
  border: 1px solid var(--bs-border-color, #dee2e6);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  margin-top: 0.125rem;
  min-width: 200px;
  border-radius: 0.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Forzar z-index máximo para todos los dropdowns */
.dropdown-menu {
  z-index: 999999 !important;
  position: relative;
}

.dropdown-menu.show {
  z-index: 999999 !important;
  display: block !important;
  position: absolute !important;
}

/* ===== DROPDOWNS PERFECCIONADOS ===== */

/* Todos los dropdowns con z-index máximo */
.dropdown-menu {
  z-index: 999999 !important;
  position: absolute !important;
  display: none;
  min-width: 200px;
  border-radius: 8px !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  background-color: #ffffff !important;
  color: #212529 !important;
  transition: all 0.3s ease !important;
  /* Ensure it's not affected by theme-dark specific rules if they are too broad */
}

.dropdown-menu.show {
  display: block !important;
  animation: dropdownFadeIn 0.3s ease !important;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown toggle con z-index alto */
.dropdown-toggle {
  position: relative;
  z-index: 999998 !important;
}

/* Contenedor dropdown con posición relativa */
.dropdown {
  position: relative !important;
  z-index: 999997 !important;
}

/* Items del dropdown */
.dropdown-item {
  padding: 8px 16px !important;
  color: #212529 !important;
  background-color: transparent !important;
  border: none !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f8f9fa !important;
  color: #0d6efd !important;
  transform: translateX(2px) !important;
}

.dropdown-divider {
  border-color: #dee2e6 !important;
  margin: 4px 0 !important;
}

/* Dropdown en modo oscuro */
[data-bs-theme="dark"] .dropdown-menu,
body.theme-dark .dropdown-menu {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .dropdown-item,
body.theme-dark .dropdown-item {
  color: #e6edf3 !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus {
  background-color: #21262d !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
}

[data-bs-theme="dark"] .dropdown-divider,
body.theme-dark .dropdown-divider {
  border-color: #30363d !important;
}

/* Dropdowns específicos de filtros y acciones */
.btn-group .dropdown-menu,
.dropdown .dropdown-menu {
  z-index: 999999 !important;
}

/* Botones de dropdown */
.dropdown-toggle::after {
  transition: transform 0.3s ease !important;
}

.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg) !important;
}

/* Asegurar que el dropdown esté por encima del calendario */
.fc {
  z-index: 1 !important;
}

.fc-toolbar {
  z-index: 2 !important;
}

/* Navbar con z-index alto */
.navbar {
  z-index: 999996 !important;
  position: relative;
}

/* Perfeccionamiento final del modo oscuro */

/* Asegurar que todos los elementos de texto sean visibles en modo oscuro */
[data-bs-theme="dark"] *,
body.theme-dark * {
  border-color: #30363d;
}

[data-bs-theme="dark"] .text-secondary,
body.theme-dark .text-secondary {
  color: #8b949e !important;
}

[data-bs-theme="dark"] .bg-light,
body.theme-dark .bg-light {
  background-color: #21262d !important;
}

[data-bs-theme="dark"] .bg-white,
body.theme-dark .bg-white {
  background-color: #161b22 !important;
}

/* Modales en modo oscuro */
[data-bs-theme="dark"] .modal-content,
body.theme-dark .modal-content {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .modal-header,
body.theme-dark .modal-header {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .modal-footer,
body.theme-dark .modal-footer {
  background-color: #21262d !important;
  border-color: #30363d !important;
}

/* Breadcrumbs en modo oscuro */
[data-bs-theme="dark"] .breadcrumb,
body.theme-dark .breadcrumb {
  background-color: #21262d !important;
}

[data-bs-theme="dark"] .breadcrumb-item a,
body.theme-dark .breadcrumb-item a {
  color: #0d6efd !important;
}

[data-bs-theme="dark"] .breadcrumb-item.active,
body.theme-dark .breadcrumb-item.active {
  color: #e6edf3 !important;
}

/* Paginación en modo oscuro */
[data-bs-theme="dark"] .page-link,
body.theme-dark .page-link {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .page-link:hover,
body.theme-dark .page-link:hover {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .page-item.active .page-link,
body.theme-dark .page-item.active .page-link {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* Tooltips en modo oscuro */
[data-bs-theme="dark"] .tooltip .tooltip-inner,
body.theme-dark .tooltip .tooltip-inner {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
}

/* Progress bars en modo oscuro */
[data-bs-theme="dark"] .progress,
body.theme-dark .progress {
  background-color: #21262d !important;
}

/* List groups en modo oscuro */
[data-bs-theme="dark"] .list-group-item,
body.theme-dark .list-group-item {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .list-group-item:hover,
body.theme-dark .list-group-item:hover {
  background-color: #21262d !important;
}

/* Offcanvas en modo oscuro */
[data-bs-theme="dark"] .offcanvas,
body.theme-dark .offcanvas {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .offcanvas-header,
body.theme-dark .offcanvas-header {
  border-color: #30363d !important;
}

/* ===== MEJORAS ESPECÍFICAS PARA TABLAS Y FORMULARIOS ===== */

/* Tablas mejoradas en modo oscuro */
[data-bs-theme="dark"] .table,
body.theme-dark .table {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td,
body.theme-dark .table th,
body.theme-dark .table td {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
body.theme-dark .table-striped tbody tr:nth-of-type(odd) {
  background-color: #21262d !important;
}

[data-bs-theme="dark"] .table-hover tbody tr:hover,
body.theme-dark .table-hover tbody tr:hover {
  background-color: #30363d !important;
  color: #ffffff !important;
}

/* Formularios mejorados */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
body.theme-dark .form-control,
body.theme-dark .form-select {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
  background-color: #21262d !important;
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .form-control::placeholder,
body.theme-dark .form-control::placeholder {
  color: #8b949e !important;
}

/* Labels y texto de formularios */
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] label,
body.theme-dark .form-label,
body.theme-dark label {
  color: #e6edf3 !important;
}

/* Input groups */
[data-bs-theme="dark"] .input-group-text,
body.theme-dark .input-group-text {
  background-color: #30363d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

/* Badges mejorados */
[data-bs-theme="dark"] .badge,
body.theme-dark .badge {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .badge.bg-success,
body.theme-dark .badge.bg-success {
  background-color: #238636 !important;
}

[data-bs-theme="dark"] .badge.bg-warning,
body.theme-dark .badge.bg-warning {
  background-color: #bf8700 !important;
}

[data-bs-theme="dark"] .badge.bg-danger,
body.theme-dark .badge.bg-danger {
  background-color: #da3633 !important;
}

[data-bs-theme="dark"] .badge.bg-info,
body.theme-dark .badge.bg-info {
  background-color: #0969da !important;
}

/* Botones mejorados */
[data-bs-theme="dark"] .btn-outline-primary,
body.theme-dark .btn-outline-primary {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
}

[data-bs-theme="dark"] .btn-outline-primary:hover,
body.theme-dark .btn-outline-primary:hover {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .btn-outline-secondary,
body.theme-dark .btn-outline-secondary {
  color: #8b949e !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover,
body.theme-dark .btn-outline-secondary:hover {
  background-color: #30363d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

/* Cards mejoradas */
[data-bs-theme="dark"] .card-header,
body.theme-dark .card-header {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .card-footer,
body.theme-dark .card-footer {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

/* Alertas mejoradas */
[data-bs-theme="dark"] .alert-primary,
body.theme-dark .alert-primary {
  background-color: #0d1117 !important;
  border-color: #0969da !important;
  color: #58a6ff !important;
}

[data-bs-theme="dark"] .alert-success,
body.theme-dark .alert-success {
  background-color: #0d1117 !important;
  border-color: #238636 !important;
  color: #56d364 !important;
}

[data-bs-theme="dark"] .alert-warning,
body.theme-dark .alert-warning {
  background-color: #0d1117 !important;
  border-color: #bf8700 !important;
  color: #e3b341 !important;
}

[data-bs-theme="dark"] .alert-danger,
body.theme-dark .alert-danger {
  background-color: #0d1117 !important;
  border-color: #da3633 !important;
  color: #f85149 !important;
}

/* Navegación mejorada */
[data-bs-theme="dark"] .nav-link,
body.theme-dark .nav-link {
  color: #8b949e !important;
}

[data-bs-theme="dark"] .nav-link:hover,
[data-bs-theme="dark"] .nav-link.active,
body.theme-dark .nav-link:hover,
body.theme-dark .nav-link.active {
  color: #e6edf3 !important;
}

/* Tabs */
[data-bs-theme="dark"] .nav-tabs .nav-link,
body.theme-dark .nav-tabs .nav-link {
  background-color: transparent !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
body.theme-dark .nav-tabs .nav-link.active {
  background-color: #161b22 !important;
  border-color: #30363d #30363d #161b22 !important;
  color: #e6edf3 !important;
}

/* Accordion */
[data-bs-theme="dark"] .accordion-item,
body.theme-dark .accordion-item {
  background-color: #161b22 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .accordion-header button,
body.theme-dark .accordion-header button {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .accordion-body,
body.theme-dark .accordion-body {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
}

/* ===== ESTILOS ESPECÍFICOS PARA LA INTERFAZ ===== */

/* Contenedor principal y wrapper */
[data-bs-theme="dark"] .main-content,
[data-bs-theme="dark"] .content-wrapper,
[data-bs-theme="dark"] .container-fluid,
body.theme-dark .main-content,
body.theme-dark .content-wrapper,
body.theme-dark .container-fluid {
  background-color: #0d1117 !important;
  color: #e6edf3 !important;
}

/* Sección de filtros */
[data-bs-theme="dark"] .filters-section,
[data-bs-theme="dark"] .filter-container,
body.theme-dark .filters-section,
body.theme-dark .filter-container {
  background-color: #161b22 !important;
  border: 1px solid #30363d !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

/* Títulos y encabezados */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6 {
  color: #e6edf3 !important;
}

/* Texto general */
[data-bs-theme="dark"] p,
[data-bs-theme="dark"] span,
[data-bs-theme="dark"] div,
body.theme-dark p,
body.theme-dark span,
body.theme-dark div {
  color: #e6edf3 !important;
}

/* Enlaces */
[data-bs-theme="dark"] a,
body.theme-dark a {
  color: #58a6ff !important;
}

[data-bs-theme="dark"] a:hover,
body.theme-dark a:hover {
  color: #79c0ff !important;
}

/* Botones de acción */
[data-bs-theme="dark"] .btn-primary,
body.theme-dark .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .btn-primary:hover,
body.theme-dark .btn-primary:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3) !important;
}

[data-bs-theme="dark"] .btn-secondary,
body.theme-dark .btn-secondary {
  background-color: #30363d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .btn-secondary:hover,
body.theme-dark .btn-secondary:hover {
  background-color: #484f58 !important;
  border-color: #484f58 !important;
  color: #ffffff !important;
}

/* Inputs de fecha y hora */
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="datetime-local"],
body.theme-dark input[type="date"],
body.theme-dark input[type="time"],
body.theme-dark input[type="datetime-local"] {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
  color-scheme: dark;
}

[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="time"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Campos de búsqueda */
[data-bs-theme="dark"] .search-input,
[data-bs-theme="dark"] input[type="search"],
body.theme-dark .search-input,
body.theme-dark input[type="search"] {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
  border-radius: 6px !important;
}

[data-bs-theme="dark"] .search-input:focus,
[data-bs-theme="dark"] input[type="search"]:focus,
body.theme-dark .search-input:focus,
body.theme-dark input[type="search"]:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* Paginación mejorada */
[data-bs-theme="dark"] .pagination,
body.theme-dark .pagination {
  margin: 0 !important;
}

[data-bs-theme="dark"] .page-item.disabled .page-link,
body.theme-dark .page-item.disabled .page-link {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

/* Indicadores de estado */
[data-bs-theme="dark"] .status-confirmed,
body.theme-dark .status-confirmed {
  background-color: #238636 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

[data-bs-theme="dark"] .status-pending,
body.theme-dark .status-pending {
  background-color: #bf8700 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

[data-bs-theme="dark"] .status-paid,
body.theme-dark .status-paid {
  background-color: #0969da !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Botones de acciones en tablas */
[data-bs-theme="dark"] .btn-sm,
body.theme-dark .btn-sm {
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

/* Mejoras para el calendario de reservas */
[data-bs-theme="dark"] .calendar-container,
body.theme-dark .calendar-container {
  background-color: #161b22 !important;
  border: 1px solid #30363d !important;
  border-radius: 8px !important;
  padding: 20px !important;
}

/* Celdas del calendario con colores de disponibilidad */
[data-bs-theme="dark"] .calendar-day.available,
body.theme-dark .calendar-day.available {
  background-color: rgba(56, 211, 100, 0.1) !important;
  border-color: #238636 !important;
}

[data-bs-theme="dark"] .calendar-day.busy,
body.theme-dark .calendar-day.busy {
  background-color: rgba(248, 81, 73, 0.1) !important;
  border-color: #da3633 !important;
}

[data-bs-theme="dark"] .calendar-day.partial,
body.theme-dark .calendar-day.partial {
  background-color: rgba(227, 179, 65, 0.1) !important;
  border-color: #bf8700 !important;
}

/* Sidebar mejorado */
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .sidebar-nav,
body.theme-dark .sidebar,
body.theme-dark .sidebar-nav {
  background-color: #161b22 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .sidebar .nav-link,
body.theme-dark .sidebar .nav-link {
  color: #8b949e !important;
  border-radius: 6px !important;
  margin: 2px 0 !important;
  transition: all 0.2s ease !important;
}

[data-bs-theme="dark"] .sidebar .nav-link:hover,
[data-bs-theme="dark"] .sidebar .nav-link.active,
body.theme-dark .sidebar .nav-link:hover,
body.theme-dark .sidebar .nav-link.active {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  transform: translateX(2px) !important;
}

/* ===== MODO OSCURO PARA FULLCALENDAR ===== */

/* Estilos generales del calendario en modo oscuro */
[data-bs-theme="dark"] .fc,
body.theme-dark .fc {
  --fc-border-color: #30363d;
  --fc-button-text-color: #e6edf3;
  --fc-button-bg-color: #21262d;
  --fc-button-border-color: #30363d;
  --fc-button-hover-bg-color: #0d6efd;
  --fc-button-hover-border-color: #0d6efd;
  --fc-button-active-bg-color: #0d6efd;
  --fc-button-active-border-color: #0d6efd;
  --fc-event-bg-color: #0d6efd;
  --fc-event-border-color: #0d6efd;
  --fc-event-text-color: #ffffff;
  --fc-page-bg-color: #0d1117;
  --fc-neutral-bg-color: #161b22;
  --fc-neutral-text-color: #e6edf3;
  --fc-list-event-hover-bg-color: #21262d;
  background-color: #0d1117 !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .fc-toolbar,
body.theme-dark .fc-toolbar {
  background: linear-gradient(135deg, #161b22 0%, #21262d 100%) !important;
  border-color: #30363d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .fc-toolbar-title,
body.theme-dark .fc-toolbar-title {
  color: #0d6efd;
}

[data-bs-theme="dark"] .fc-button,
body.theme-dark .fc-button {
  background: linear-gradient(135deg, #343a40 0%, #495057 100%);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .fc-button:hover,
body.theme-dark .fc-button:hover {
  background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
  border-color: #0d6efd;
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(13, 110, 253, 0.4);
}

[data-bs-theme="dark"] .fc-button-active,
[data-bs-theme="dark"] .fc-button:focus,
body.theme-dark .fc-button-active,
body.theme-dark .fc-button:focus {
  background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%) !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3), 0 4px 15px rgba(13, 110, 253, 0.3) !important;
}

[data-bs-theme="dark"] .fc-day-today,
body.theme-dark .fc-day-today {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.25) 0%, rgba(13, 110, 253, 0.15) 100%) !important;
  border-color: #0d6efd !important;
}

[data-bs-theme="dark"] .fc-daygrid-day:hover,
body.theme-dark .fc-daygrid-day:hover {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.3);
}

[data-bs-theme="dark"] .fc-daygrid-day-number,
body.theme-dark .fc-daygrid-day-number {
  color: #e9ecef;
}

[data-bs-theme="dark"] .fc-daygrid-day-number:hover,
body.theme-dark .fc-daygrid-day-number:hover {
  background: rgba(13, 110, 253, 0.2);
  transform: scale(1.1);
  color: #ffffff;
}

[data-bs-theme="dark"] .fc-day-today .fc-daygrid-day-number,
body.theme-dark .fc-day-today .fc-daygrid-day-number {
  background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
}

[data-bs-theme="dark"] .fc-daygrid-day:hover,
body.theme-dark .fc-daygrid-day:hover {
  background-color: rgba(13, 110, 253, 0.1);
}

[data-bs-theme="dark"] .fc-timegrid-slot:hover,
body.theme-dark .fc-timegrid-slot:hover {
  background-color: rgba(13, 110, 253, 0.05);
}

[data-bs-theme="dark"] .fc-list-event,
body.theme-dark .fc-list-event {
  border-color: rgba(255, 255, 255, 0.15);
  background-color: #212529;
}

[data-bs-theme="dark"] .fc-list-event:hover,
body.theme-dark .fc-list-event:hover {
  background-color: #343a40;
}

[data-bs-theme="dark"] .fc-col-header-cell,
body.theme-dark .fc-col-header-cell {
  background-color: #21262d;
  border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .fc-daygrid-day,
[data-bs-theme="dark"] .fc-timegrid-slot,
body.theme-dark .fc-daygrid-day,
body.theme-dark .fc-timegrid-slot {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .fc-scrollgrid,
body.theme-dark .fc-scrollgrid {
  border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .fc-theme-standard td,
[data-bs-theme="dark"] .fc-theme-standard th,
body.theme-dark .fc-theme-standard td,
body.theme-dark .fc-theme-standard th {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Popover del calendario en modo oscuro */
[data-bs-theme="dark"] .fc-popover,
body.theme-dark .fc-popover {
  background-color: #21262d;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e9ecef;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .fc-popover-header,
body.theme-dark .fc-popover-header {
  background-color: #343a40;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e9ecef;
}

[data-bs-theme="dark"] .fc-popover-close,
body.theme-dark .fc-popover-close {
  color: #e9ecef;
}

[data-bs-theme="dark"] .fc-popover-close:hover,
body.theme-dark .fc-popover-close:hover {
  color: #ffffff;
}

/* Scrollbar en modo oscuro */
[data-bs-theme="dark"] .fc-scroller::-webkit-scrollbar-thumb,
body.theme-dark .fc-scroller::-webkit-scrollbar-thumb {
  background-color: #6c757d;
}

[data-bs-theme="dark"] .fc-scroller::-webkit-scrollbar-thumb:hover,
body.theme-dark .fc-scroller::-webkit-scrollbar-thumb:hover {
  background-color: #adb5bd;
}

/* Asegurar que los dropdowns estén por encima del calendario */
.fc {
  z-index: 1 !important;
}

.fc-popover {
  z-index: 9998 !important;
}

[data-bs-theme="dark"] .navbar .dropdown-menu {
  background-color: #2d2d2d;
  border-color: #495057;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .dropdown-item {
  color: #e9ecef;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: #495057;
  color: #fff;
}

[data-bs-theme="dark"] .dropdown-divider {
  border-color: #495057;
}

/* Estilos para el toggle de tema */
.theme-toggle {
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.5rem;
  border-radius: 0.375rem;
  user-select: none;
}

.theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

[data-bs-theme="dark"] .theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle:focus {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

/* Mejoras para FullCalendar en modo oscuro */
[data-bs-theme="dark"] .fc {
  --fc-border-color: #495057;
  --fc-button-text-color: #fff;
  --fc-button-bg-color: #0d6efd;
  --fc-button-border-color: #0d6efd;
  --fc-button-hover-bg-color: #0b5ed7;
  --fc-button-hover-border-color: #0a58ca;
  --fc-button-active-bg-color: #0a58ca;
  --fc-button-active-border-color: #0a53be;
  --fc-event-bg-color: #0d6efd;
  --fc-event-border-color: #0d6efd;
  --fc-event-text-color: #fff;
  --fc-neutral-bg-color: #2d2d2d;
  --fc-neutral-text-color: #e9ecef;
  --fc-page-bg-color: #1a1a1a;
}

[data-bs-theme="dark"] .fc-theme-standard .fc-scrollgrid {
  border-color: var(--fc-border-color);
  background-color: var(--fc-page-bg-color);
}

[data-bs-theme="dark"] .fc-theme-standard td,
[data-bs-theme="dark"] .fc-theme-standard th {
  border-color: var(--fc-border-color);
}

[data-bs-theme="dark"] .fc-col-header-cell,
body.theme-dark .fc-col-header-cell {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .fc-daygrid-day,
body.theme-dark .fc-daygrid-day {
  background-color: #0d1117 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .fc-daygrid-day:hover,
body.theme-dark .fc-daygrid-day:hover {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0.08) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.3) !important;
}

[data-bs-theme="dark"] .fc-timegrid-slot,
body.theme-dark .fc-timegrid-slot {
  border-color: #30363d !important;
  background-color: #0d1117 !important;
}

[data-bs-theme="dark"] .fc-timegrid-slot:hover,
body.theme-dark .fc-timegrid-slot:hover {
  background: linear-gradient(90deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.02) 100%) !important;
  border-left: 3px solid #0d6efd !important;
}

/* Slots de tiempo con etiquetas */
[data-bs-theme="dark"] .fc-timegrid-slot-label,
body.theme-dark .fc-timegrid-slot-label {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

/* Vista de lista mejorada en modo oscuro */
[data-bs-theme="dark"] .fc-list-event,
body.theme-dark .fc-list-event {
  background: linear-gradient(135deg, #161b22 0%, #21262d 100%) !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .fc-list-event:hover,
body.theme-dark .fc-list-event:hover {
  background: linear-gradient(135deg, #21262d 0%, #161b22 100%) !important;
  border-color: #0d6efd !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .fc-list-event-title,
body.theme-dark .fc-list-event-title {
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .fc-list-event-time,
body.theme-dark .fc-list-event-time {
  color: #0d6efd !important;
  background: rgba(13, 110, 253, 0.15) !important;
}

/* Scrollgrid en modo oscuro */
[data-bs-theme="dark"] .fc-scrollgrid,
body.theme-dark .fc-scrollgrid {
  background-color: #0d1117 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .fc-scrollgrid-section-header,
body.theme-dark .fc-scrollgrid-section-header {
  background-color: #161b22 !important;
}

[data-bs-theme="dark"] .fc-scrollgrid-section-body,
body.theme-dark .fc-scrollgrid-section-body {
  background-color: #0d1117 !important;
}

/* Popovers del calendario en modo oscuro */
[data-bs-theme="dark"] .fc-popover,
body.theme-dark .fc-popover {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .fc-popover-header,
body.theme-dark .fc-popover-header {
  background-color: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .fc-popover-body,
body.theme-dark .fc-popover-body {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
}

/* More link en modo oscuro */
[data-bs-theme="dark"] .fc-more-link,
body.theme-dark .fc-more-link {
  color: #0d6efd !important;
  background-color: rgba(13, 110, 253, 0.1) !important;
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
}

[data-bs-theme="dark"] .fc-more-link:hover,
body.theme-dark .fc-more-link:hover {
  background-color: rgba(13, 110, 253, 0.2) !important;
  color: #ffffff !important;
}

/* Indicador de hoy en modo oscuro */
[data-bs-theme="dark"] .fc-now-indicator,
body.theme-dark .fc-now-indicator {
  border-color: #dc3545 !important;
}

[data-bs-theme="dark"] .fc-now-indicator-arrow,
body.theme-dark .fc-now-indicator-arrow {
  border-left-color: #dc3545 !important;
  border-right-color: #dc3545 !important;
}

/* Eventos en modo oscuro con mejores gradientes */
[data-bs-theme="dark"] .fc-event,
body.theme-dark .fc-event {
  background: linear-gradient(135deg, #0d6efd 0%, rgba(13, 110, 253, 0.9) 100%) !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3) !important;
}

[data-bs-theme="dark"] .fc-event:hover,
body.theme-dark .fc-event:hover {
  filter: brightness(1.2) !important;
  box-shadow: 0 8px 25px rgba(13, 110, 253, 0.4) !important;
}

/* Scrollbars del calendario mejorados */
.fc-scroller {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: #6c757d #f8f9fa;
}

.fc-scroller::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.fc-scroller::-webkit-scrollbar-track {
  background: #f8f9fa !important;
  border-radius: 4px !important;
}

.fc-scroller::-webkit-scrollbar-thumb {
  background: #6c757d !important;
  border-radius: 4px !important;
  border: 2px solid #f8f9fa !important;
}

.fc-scroller::-webkit-scrollbar-thumb:hover {
  background: #495057 !important;
}

/* Scrollbars del calendario en modo oscuro */
[data-bs-theme="dark"] .fc-scroller,
body.theme-dark .fc-scroller {
  scrollbar-color: #30363d #21262d;
}

[data-bs-theme="dark"] .fc-scroller::-webkit-scrollbar,
body.theme-dark .fc-scroller::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

[data-bs-theme="dark"] .fc-scroller::-webkit-scrollbar-track,
body.theme-dark .fc-scroller::-webkit-scrollbar-track {
  background: #21262d !important;
  border-radius: 4px !important;
}

[data-bs-theme="dark"] .fc-scroller::-webkit-scrollbar-thumb,
body.theme-dark .fc-scroller::-webkit-scrollbar-thumb {
  background: #30363d !important;
  border-radius: 4px !important;
  border: 2px solid #21262d !important;
}

[data-bs-theme="dark"] .fc-scroller::-webkit-scrollbar-thumb:hover,
body.theme-dark .fc-scroller::-webkit-scrollbar-thumb:hover {
  background: #484f58 !important;
}

/* Configuración específica para vistas con scroll */
.fc-timeGridWeek-view .fc-scroller,
.fc-timeGridDay-view .fc-scroller {
  max-height: 600px !important;
  overflow-y: auto !important;
  scroll-behavior: smooth;
}

/* Mejorar la experiencia de scroll en móviles */
.fc-scroller {
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: 20px;
}

/* Asegurar que el contenido del calendario sea scrolleable */
.fc-timegrid-body {
  overflow: visible !important;
}

.fc-timegrid-slots {
  overflow: visible !important;
}

[data-bs-theme="dark"] .fc-timegrid-axis {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .fc-timegrid-slot-minor,
body.theme-dark .fc-timegrid-slot-minor {
  border-color: rgba(48, 54, 61, 0.5) !important;
}

[data-bs-theme="dark"] .fc-today,
body.theme-dark .fc-today {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%) !important;
  border-color: rgba(255, 193, 7, 0.3) !important;
}

[data-bs-theme="dark"] .fc-today .fc-daygrid-day-number,
body.theme-dark .fc-today .fc-daygrid-day-number {
  color: #ffc107 !important;
  font-weight: bold !important;
  background: rgba(255, 193, 7, 0.2) !important;
  border-radius: 50% !important;
  width: 2rem !important;
  height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0.25rem !important;
}

[data-bs-theme="dark"] .fc-toolbar-title,
body.theme-dark .fc-toolbar-title {
  color: #e6edf3 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Mejoras para las tablas en modo oscuro */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
  --bs-table-border-color: #495057;
  color: #e9ecef;
}

[data-bs-theme="dark"] .table th {
  border-color: #495057;
  color: #e9ecef;
}

/* Mejoras para los formularios en modo oscuro */
[data-bs-theme="dark"] .form-control {
  background-color: #2d2d2d;
  border-color: #495057;
  color: #e9ecef;
}

[data-bs-theme="dark"] .form-control:focus {
  background-color: #2d2d2d;
  border-color: #86b7fe;
  color: #e9ecef;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: #6c757d;
}

[data-bs-theme="dark"] .form-select {
  background-color: #2d2d2d;
  border-color: #495057;
  color: #e9ecef;
}

[data-bs-theme="dark"] .form-label {
  color: #e9ecef;
}

/* Mejoras para los alerts en modo oscuro */
[data-bs-theme="dark"] .alert-primary {
  background-color: rgba(13, 110, 253, 0.1);
  border-color: rgba(13, 110, 253, 0.2);
  color: #6ea8fe;
}

[data-bs-theme="dark"] .alert-success {
  background-color: rgba(25, 135, 84, 0.1);
  border-color: rgba(25, 135, 84, 0.2);
  color: #75b798;
}

[data-bs-theme="dark"] .alert-warning {
  background-color: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.2);
  color: #ffda6a;
}

[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.2);
  color: #ea868f;
}

/* Mejoras para el navbar en modo oscuro */
[data-bs-theme="dark"] .navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] .navbar-dark .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .navbar-dark .navbar-nav .nav-link:focus {
  color: #fff;
}

[data-bs-theme="dark"] .navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

/* Mejoras para el footer en modo oscuro */
[data-bs-theme="dark"] footer {
  background-color: #2d2d2d !important;
  color: #e9ecef;
}

[data-bs-theme="dark"] footer .text-muted {
  color: #6c757d !important;
}

/* Transiciones suaves para el cambio de tema */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Responsive */
@media (max-width: 992px) {
  .sidebar {
    position: fixed;
    top: 56px;
    left: -250px;
    height: calc(100vh - 56px);
    width: 250px;
    z-index: 1030;
    transition: all 0.3s ease;
  }

  .sidebar.show {
    left: 0;
  }

  .content {
    margin-left: 0 !important;
  }
}

/* Animaciones */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Selector de tema (modo oscuro/claro) */
.theme-toggle {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.dark-mode .theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle:focus {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

/* Estilos para horarios disponibles en modo oscuro */
.dark-mode .time-slot {
  background-color: var(--card-bg-dark);
  color: var(--text-dark);
  border-color: var(--border-dark);
}

.dark-mode .time-slot:hover {
  background-color: var(--hover-dark);
  border-color: var(--primary);
}

.dark-mode .time-slot.selected {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary-dark);
}

/* Estilos para modales en modo oscuro */
.dark-mode .modal-content {
  background-color: var(--card-bg-dark);
  color: var(--text-dark);
  border-color: var(--border-dark);
}

.dark-mode .modal-header,
.dark-mode .modal-footer {
  border-color: var(--border-dark);
}

.dark-mode .close {
  color: var(--text-dark);
}

/* Estilos para paginación en modo oscuro */
.dark-mode .pagination .page-link {
  background-color: var(--card-bg-dark);
  color: var(--text-dark);
  border-color: var(--border-dark);
}

.dark-mode .pagination .page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
}

.dark-mode .pagination .page-item.disabled .page-link {
  background-color: var(--card-bg-dark);
  color: #6c757d;
}

/* Estilos para tooltips en modo oscuro */
.dark-mode .tooltip .tooltip-inner {
  background-color: var(--dark);
}

.dark-mode .tooltip .tooltip-arrow::before {
  border-top-color: var(--dark);
}

/* Estilos para popovers en modo oscuro */
.dark-mode .popover {
  background-color: var(--card-bg-dark);
  border-color: var(--border-dark);
}

.dark-mode .popover-header {
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: var(--border-dark);
}

.dark-mode .popover-body {
  color: var(--text-dark);
}

/* Estilos para badges en modo oscuro */
.dark-mode .badge {
  color: var(--text-dark);
}

/* Estilos para listas en modo oscuro */
.dark-mode .list-group-item {
  background-color: var(--card-bg-dark);
  color: var(--text-dark);
  border-color: var(--border-dark);
}

.dark-mode .list-group-item-action:hover {
  background-color: var(--hover-dark);
}

/* Estilos para acordeones en modo oscuro */
.dark-mode .accordion-button {
  background-color: var(--card-bg-dark);
  color: var(--text-dark);
  border-color: var(--border-dark);
}

.dark-mode .accordion-button:not(.collapsed) {
  background-color: rgba(109, 40, 217, 0.1);
  color: var(--primary);
}

.dark-mode .accordion-button::after {
  filter: invert(1);
}

.dark-mode .accordion-collapse {
  background-color: var(--card-bg-dark);
}

/* Estilos para pestañas en modo oscuro */
.dark-mode .nav-tabs {
  border-color: var(--border-dark);
}

.dark-mode .nav-tabs .nav-link {
  color: var(--text-dark);
}

.dark-mode .nav-tabs .nav-link:hover {
  border-color: var(--border-dark);
}

.dark-mode .nav-tabs .nav-link.active {
  background-color: var(--card-bg-dark);
  color: var(--primary);
  border-color: var(--border-dark) var(--border-dark) var(--card-bg-dark);
}

/* Estilos para dropdowns en modo oscuro */
.dark-mode .dropdown-menu {
  background-color: var(--card-bg-dark);
  border-color: var(--border-dark);
}

.dark-mode .dropdown-item {
  color: var(--text-dark);
}

.dark-mode .dropdown-item:hover {
  background-color: var(--hover-dark);
}

.dark-mode .dropdown-divider {
  border-color: var(--border-dark);
}

/* Estilos para inputs de fecha y hora en modo oscuro */
.dark-mode .flatpickr-calendar {
  background-color: var(--card-bg-dark);
  border-color: var(--border-dark);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

.dark-mode .flatpickr-months,
.dark-mode .flatpickr-weekdays,
.dark-mode .flatpickr-days {
  background-color: var(--card-bg-dark);
  color: var(--text-dark);
}

.dark-mode .flatpickr-day {
  color: var(--text-dark);
}

.dark-mode .flatpickr-day.selected {
  background-color: var(--primary);
  border-color: var(--primary);
}

.dark-mode .flatpickr-day:hover {
  background-color: var(--hover-dark);
}

.dark-mode .flatpickr-day.disabled {
  color: #6c757d;
}

.dark-mode .flatpickr-current-month,
.dark-mode .flatpickr-monthDropdown-months,
.dark-mode .flatpickr-weekday {
  color: var(--text-dark);
}

.dark-mode .flatpickr-prev-month,
.dark-mode .flatpickr-next-month {
  color: var(--text-dark) !important;
}

.dark-mode .flatpickr-prev-month svg,
.dark-mode .flatpickr-next-month svg {
  fill: var(--text-dark) !important;
}

/* Estilos para DataTables en modo oscuro */
.dark-mode .dataTables_wrapper .dataTables_length,
.dark-mode .dataTables_wrapper .dataTables_filter,
.dark-mode .dataTables_wrapper .dataTables_info,
.dark-mode .dataTables_wrapper .dataTables_processing,
.dark-mode .dataTables_wrapper .dataTables_paginate {
  color: var(--text-dark);
}

.dark-mode .dataTables_wrapper .dataTables_length select,
.dark-mode .dataTables_wrapper .dataTables_filter input {
  background-color: var(--input-bg-dark);
  color: var(--input-text-dark);
  border-color: var(--input-border-dark);
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: var(--card-bg-dark);
  color: var(--text-dark) !important;
  border-color: var(--border-dark);
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background-color: var(--card-bg-dark) !important;
  color: #6c757d !important;
  border-color: var(--border-dark) !important;
}

/* Estilos para el calendario de reservas en modo oscuro */
.dark-mode .fc-daygrid-day.fc-day-available {
  background-color: rgba(5, 150, 105, 0.15) !important;
  color: #d1fae5 !important;
}

.dark-mode .fc-daygrid-day.fc-day-available:hover {
  background-color: rgba(5, 150, 105, 0.25) !important;
}

.dark-mode .fc-daygrid-day.fc-day-unavailable {
  background-color: rgba(220, 38, 38, 0.15) !important;
  color: #fee2e2 !important;
}

.dark-mode .fc-daygrid-day.selected-date {
  background-color: #6d28d9 !important;
  color: white !important;
}

.dark-mode .fc-button {
  background-color: #21262d;
  border-color: #30363d;
  color: #e6edf3;
}

.dark-mode .fc-button:hover {
  background-color: #30363d !important;
  border-color: #484f58 !important;
  color: #ffffff !important;
}

.dark-mode .fc-button-primary {
  background-color: #6d28d9;
  border-color: #6d28d9;
  color: white;
}

.dark-mode .fc-button-primary:hover {
  background-color: #5b21b6 !important;
  border-color: #5b21b6 !important;
  color: white !important;
}

.dark-mode .fc-button-active {
  background-color: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: white !important;
}

.dark-mode .fc-daygrid-day-number {
  color: #e6edf3;
}

.dark-mode .fc-col-header-cell {
  background-color: #1e293b;
  border-color: #334155;
}

.dark-mode .fc-col-header-cell-cushion {
  color: #94a3b8;
}

.dark-mode .fc-daygrid-day,
.dark-mode .fc-timegrid-slot {
  border-color: #334155;
}

.dark-mode .fc-scrollgrid {
  border-color: #334155;
}

.dark-mode .fc-theme-standard td,
.dark-mode .fc-theme-standard th {
  border-color: #334155;
}

.dark-mode .fc-day-today {
  background-color: rgba(109, 40, 217, 0.15) !important;
  border-color: #6d28d9 !important;
}

.dark-mode .fc-day-today .fc-daygrid-day-number {
  color: #6d28d9;
}

.dark-mode .fc-daygrid-day:hover {
  background-color: rgba(109, 40, 217, 0.08) !important;
}

.dark-mode .time-slot-btn {
  background-color: #1e293b;
  border-color: #334155;
  color: #e6edf3;
}

.dark-mode .time-slot-btn .slot-count {
  color: #94a3b8;
}

.dark-mode .time-slot-btn.btn-primary {
  background-color: #6d28d9;
  border-color: #6d28d9;
  color: white;
}

.dark-mode .time-slot-btn.btn-primary .slot-count {
  color: white;
}

.dark-mode .time-slot-btn.limited-slots {
  border-color: #fd7e14;
  color: #fd7e14;
}

.dark-mode .time-slot-btn.limited-slots .slot-count {
  color: #fd7e14;
}

.dark-mode .time-slot-btn.btn-primary.limited-slots {
  background-color: #fd7e14;
  border-color: #fd7e14;
  color: white;
}

.dark-mode .time-slot-btn.btn-primary.limited-slots .slot-count {
  color: white;
}

.dark-mode .time-slot-btn.few-slots {
  border-color: #dc3545;
  color: #dc3545;
}

.dark-mode .time-slot-btn.few-slots .slot-count {
  color: #dc3545;
}

.dark-mode .time-slot-btn.btn-primary.few-slots {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

.dark-mode .time-slot-btn.btn-primary.few-slots .slot-count {
  color: white;
}

.dark-mode .recurring-date-item.available {
  background-color: rgba(5, 150, 105, 0.08);
  border-left-color: #059669;
}

.dark-mode .recurring-date-item.unavailable {
  background-color: rgba(220, 38, 38, 0.08);
  border-left-color: #dc3545;
}

.dark-mode .recurring-date-item:hover {
  background-color: rgba(109, 40, 217, 0.05);
}

.dark-mode .fc-toolbar-title {
  color: #e6edf3;
}

.dark-mode .fc-day-past {
  background-color: rgba(148, 163, 184, 0.05);
  opacity: 0.8;
}

.dark-mode #appointment-calendar.loading::after,
.dark-mode #edit-calendar.loading::after {
  border-top-color: #6d28d9;
}

.dark-mode #appointment-calendar.loading::before,
.dark-mode #edit-calendar.loading::before {
  background: rgba(15, 23, 42, 0.8);
}
5;
  }
  100% {
    opacity: 0.5;
  }
}

.fc-day-past {
  background-color: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.03);
  opacity: 0.8;
}

.fc-day-future {
  background-color: transparent;
  position: relative;
}

/* Mejorar celdas del calendario con efectos modernos */
.fc-daygrid-day,
.fc-timegrid-slot {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.fc-daygrid-day:hover {
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.05);
  cursor: pointer;
}

/* Mejoras adicionales para el modo oscuro en el calendario */
[data-theme="dark"] .fc-toolbar,
body.dark-mode .fc-toolbar {
  background: var(--surface-dark-hover) !important;
  border-color: var(--border-dark) !important;
}

[data-theme="dark"] .fc-toolbar-title,
body.dark-mode .fc-toolbar-title {
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .fc-button,
body.dark-mode .fc-button {
  background: var(--surface-dark-hover) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .fc-button:hover,
body.dark-mode .fc-button:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

[data-theme="dark"] .fc-daygrid-day,
body.dark-mode .fc-daygrid-day {
  background: var(--surface-dark) !important;
  border-color: var(--border-dark) !important;
}

[data-theme="dark"] .fc-daygrid-day-number,
body.dark-mode .fc-daygrid-day-number {
  color: var(--text-dark-primary) !important;
}

/* Botón de tema mejorado */
#theme-toggle {
  transition: all var(--transition-fast);
  border-radius: var(--border-radius-full);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#theme-toggle:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

#theme-toggle i {
  font-size: var(--font-size-sm);
  transition: transform var(--transition-fast);
}

#theme-toggle:active i {
  transform: scale(0.9);
}

/* Mejoras para dropdowns en modo oscuro */
[data-theme="dark"] .dropdown-menu,
body.dark-mode .dropdown-menu {
  background-color: var(--surface-dark-hover) !important;
  border-color: var(--border-dark) !important;
  box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .dropdown-item,
body.dark-mode .dropdown-item {
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: var(--surface-dark) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .dropdown-divider,
body.dark-mode .dropdown-divider {
  border-color: var(--border-dark) !important;
}

/* Mejoras para modales en modo oscuro */
[data-theme="dark"] .modal-content,
body.dark-mode .modal-content {
  background-color: var(--surface-dark) !important;
  border-color: var(--border-dark) !important;
}

[data-theme="dark"] .modal-header,
body.dark-mode .modal-header {
  border-bottom-color: var(--border-dark) !important;
}

[data-theme="dark"] .modal-footer,
body.dark-mode .modal-footer {
  border-top-color: var(--border-dark) !important;
}

[data-theme="dark"] .modal-title,
body.dark-mode .modal-title {
  color: var(--text-dark-primary) !important;
}

/* Mejoras para tooltips en modo oscuro */
[data-theme="dark"] .tooltip .tooltip-inner,
body.dark-mode .tooltip .tooltip-inner {
  background-color: var(--surface-dark-hover) !important;
  color: var(--text-dark-primary) !important;
}

/* Mejoras para badges en modo oscuro */
[data-theme="dark"] .badge,
body.dark-mode .badge {
  background-color: var(--surface-dark-hover) !important;
  color: var(--text-dark-primary) !important;
}

/* Mejoras para breadcrumbs en modo oscuro */
[data-theme="dark"] .breadcrumb,
body.dark-mode .breadcrumb {
  background-color: var(--surface-dark-hover) !important;
}

[data-theme="dark"] .breadcrumb-item,
body.dark-mode .breadcrumb-item {
  color: var(--text-dark-secondary) !important;
}

[data-theme="dark"] .breadcrumb-item.active,
body.dark-mode .breadcrumb-item.active {
  color: var(--text-dark-primary) !important;
}

/* Mejoras para paginación en modo oscuro */
[data-theme="dark"] .page-link,
body.dark-mode .page-link {
  background-color: var(--surface-dark-hover) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .page-link:hover,
body.dark-mode .page-link:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

[data-theme="dark"] .page-item.active .page-link,
body.dark-mode .page-item.active .page-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Mejoras para progress bars en modo oscuro */
[data-theme="dark"] .progress,
body.dark-mode .progress {
  background-color: var(--surface-dark-hover) !important;
}

/* Mejoras para list groups en modo oscuro */
[data-theme="dark"] .list-group-item,
body.dark-mode .list-group-item {
  background-color: var(--surface-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .list-group-item:hover,
body.dark-mode .list-group-item:hover {
  background-color: var(--surface-dark-hover) !important;
}

[data-theme="dark"] .list-group-item.active,
body.dark-mode .list-group-item.active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Transiciones suaves para todos los elementos */
* {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--transition-fast);
  transition-timing-function: ease;
}

/* Evitar transiciones en elementos específicos que no las necesitan */
.fc-event,
.fc-button,
.btn:active,
input:focus,
textarea:focus,
select:focus {
  transition-duration: var(--transition-fast);
}

/* Mejoras específicas para el sistema de reservas */
.booking-container {
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

[data-theme="dark"] .booking-container {
  background-color: var(--surface-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Mejoras para el wizard de reservas */
.wizard-step {
  transition: opacity var(--transition-base), transform var(--transition-base);
}

[data-theme="dark"] .wizard-step {
  color: var(--text-dark-primary) !important;
}

/* Mejoras para slots de tiempo */
.time-slot-btn {
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* Mejoras para el navbar toggler en modo oscuro */
[data-theme="dark"] .navbar-toggler,
body.dark-mode .navbar-toggler {
  border-color: var(--border-dark) !important;
}

[data-theme="dark"] .navbar-toggler-icon,
body.dark-mode .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%28248, 250, 252, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Mejoras para offcanvas en modo oscuro */
[data-theme="dark"] .offcanvas,
body.dark-mode .offcanvas {
  background-color: var(--surface-dark) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .offcanvas-header,
body.dark-mode .offcanvas-header {
  border-bottom-color: var(--border-dark) !important;
}

/* Mejoras para close buttons en modo oscuro */
[data-theme="dark"] .btn-close,
body.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Mejoras para spinners en modo oscuro */
[data-theme="dark"] .spinner-border,
body.dark-mode .spinner-border {
  color: var(--primary) !important;
}

/* Mejoras para placeholders en modo oscuro */
[data-theme="dark"] .placeholder,
body.dark-mode .placeholder {
  background-color: var(--surface-dark-hover) !important;
}

/* Mejoras para accordion en modo oscuro */
[data-theme="dark"] .accordion-item,
body.dark-mode .accordion-item {
  background-color: var(--surface-dark) !important;
  border-color: var(--border-dark) !important;
}

[data-theme="dark"] .accordion-button,
body.dark-mode .accordion-button {
  background-color: var(--surface-dark-hover) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed),
body.dark-mode .accordion-button:not(.collapsed) {
  background-color: var(--surface-dark) !important;
  color: var(--text-dark-primary) !important;
}

/* Mejoras para carousel en modo oscuro */
[data-theme="dark"] .carousel-control-prev-icon,
[data-theme="dark"] .carousel-control-next-icon,
body.dark-mode .carousel-control-prev-icon,
body.dark-mode .carousel-control-next-icon {
  filter: invert(1);
}

[data-theme="dark"] .carousel-indicators [data-bs-target],
body.dark-mode .carousel-indicators [data-bs-target] {
  background-color: var(--text-dark-muted) !important;
}

/* Mejoras para toast en modo oscuro */
[data-theme="dark"] .toast,
body.dark-mode .toast {
  background-color: var(--surface-dark-hover) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark-primary) !important;
}

[data-theme="dark"] .toast-header,
body.dark-mode .toast-header {
  background-color: var(--surface-dark) !important;
  border-bottom-color: var(--border-dark) !important;
  color: var(--text-dark-primary) !important;
}

/* Optimizaciones finales para rendimiento */
.theme-transition-disabled * {
  transition: none !important;
  animation: none !important;
}

/* Clase para aplicar durante cambios de tema */
.theme-changing {
  pointer-events: none;
}

/* Mejoras para focus visible */
*:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
  border-radius: var(--border-radius-sm) !important;
}

[data-theme="dark"] *:focus-visible {
  outline-color: var(--primary) !important;
}

/* Mejoras para selección de texto */
::selection {
  background-color: rgba(37, 99, 235, 0.2);
  color: var(--text-primary);
}

[data-theme="dark"] ::selection {
  background-color: rgba(99, 102, 241, 0.3);
  color: var(--text-dark-primary);
}

/* Mejoras para scrollbars en modo oscuro */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--surface-dark);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: var(--border-radius);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-dark-muted);
}

/* Mejoras para elementos de formulario específicos */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="datetime-local"] {
  color-scheme: dark;
}

/* Mejoras para elementos de rango */
[data-theme="dark"] input[type="range"],
body.dark-mode input[type="range"] {
  background: var(--surface-dark-hover);
}

/* Mejoras para elementos de color */
[data-theme="dark"] input[type="color"],
body.dark-mode input[type="color"] {
  background: var(--surface-dark-hover);
  border-color: var(--border-dark);
}

/* Mejoras para elementos de archivo */
[data-theme="dark"] input[type="file"]::file-selector-button,
body.dark-mode input[type="file"]::file-selector-button {
  background: var(--surface-dark-hover);
  color: var(--text-dark-primary);
  border-color: var(--border-dark);
}

/* Mejoras para elementos de búsqueda */
[data-theme="dark"] input[type="search"]::-webkit-search-cancel-button,
body.dark-mode input[type="search"]::-webkit-search-cancel-button {
  filter: invert(1);
}

/* Clase de utilidad para ocultar elementos durante transición de tema */
.theme-transition .fc-event,
.theme-transition .fc-button {
  transition: none !important;
}

/* Mejoras finales para compatibilidad */
@supports (color-scheme: dark) {
  [data-theme="dark"] {
    color-scheme: dark;
  }
  
  [data-theme="light"] {
    color-scheme: light;
  }
}

/* Mejoras para impresión */
@media print {
  [data-theme="dark"] {
    color-scheme: light !important;
  }
  
  [data-theme="dark"] * {
    background: white !important;
    color: black !important;
  }
}