/*
 * MARTE - Sistema de Temas
 * theme-base.css - Variables CSS base
 *
 * Este archivo define las variables CSS que serán sobrescritas
 * dinámicamente según el tema seleccionado por el administrador.
 *
 * Tema por defecto: Occident Rojo (#E3001B)
 */

:root {
  /* ===========================================
   * COLORES PRIMARIOS (del tema activo)
   * Estos valores serán sobrescritos por el tema seleccionado
   * =========================================== */

  --color-primary: #E3001B;
  --color-primary-dark: #B8001A;
  --color-primary-light: #FF1A35;
  --color-primary-50: #FEF2F2;
  --color-primary-100: #FEE2E2;
  --color-primary-200: #FECACA;
  --color-primary-rgb: 227, 0, 27;

  /* ===========================================
   * COLORES DE SUPERFICIE (Modo Claro por defecto)
   * Estos cambian con el modo oscuro
   * =========================================== */

  --color-bg: #F3F4F6;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F9FAFB;
  --color-surface-alt: #F9FAFB;
  --color-border: #E5E7EB;
  --color-border-light: #F3F4F6;
  --color-text: #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;

  /* ===========================================
   * COLORES SEMÁNTICOS (fijos, no cambian con el tema)
   * =========================================== */

  /* Éxito / Aprobado */
  --color-success: #22C55E;
  --color-success-dark: #16A34A;
  --color-success-light: #D1FAE5;
  --color-success-rgb: 34, 197, 94;

  /* Advertencia / Pendiente */
  --color-warning: #F59E0B;
  --color-warning-dark: #D97706;
  --color-warning-light: #FEF3C7;
  --color-warning-rgb: 245, 158, 11;

  /* Error / Rechazado */
  --color-error: #EF4444;
  --color-error-dark: #DC2626;
  --color-error-light: #FEE2E2;
  --color-error-rgb: 239, 68, 68;

  /* Información */
  --color-info: #3B82F6;
  --color-info-dark: #2563EB;
  --color-info-light: #DBEAFE;
  --color-info-rgb: 59, 130, 246;

  /* ===========================================
   * COLORES NEUTRALES (grises)
   * =========================================== */

  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
}

/* ===========================================
 * COLORES ADICIONALES (no incluidos en Tailwind compilado)
 * =========================================== */

/* Emerald */
.bg-emerald-100 { background-color: #d1fae5 !important; }
.bg-emerald-200 { background-color: #a7f3d0 !important; }
.text-emerald-600 { color: #059669 !important; }
.group:hover .group-hover\:bg-emerald-200 { background-color: #a7f3d0 !important; }

/* Amber */
.bg-amber-100 { background-color: #fef3c7 !important; }
.bg-amber-200 { background-color: #fde68a !important; }
.text-amber-600 { color: #d97706 !important; }
.group:hover .group-hover\:bg-amber-200 { background-color: #fde68a !important; }

/* Pink */
.bg-pink-100 { background-color: #fce7f3 !important; }
.bg-pink-200 { background-color: #fbcfe8 !important; }
.text-pink-600 { color: #db2777 !important; }
.group:hover .group-hover\:bg-pink-200 { background-color: #fbcfe8 !important; }

/* Cyan */
.bg-cyan-100 { background-color: #cffafe !important; }
.bg-cyan-200 { background-color: #a5f3fc !important; }
.text-cyan-600 { color: #0891b2 !important; }
.group:hover .group-hover\:bg-cyan-200 { background-color: #a5f3fc !important; }

/* ===========================================
 * CLASES UTILITARIAS TEMÁTICAS
 * Estas clases usan las variables CSS para colores primarios
 * =========================================== */

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

.bg-primary-dark {
  background-color: var(--color-primary-dark) !important;
}

.bg-primary-light {
  background-color: var(--color-primary-light) !important;
}

.bg-primary-50 {
  background-color: var(--color-primary-50) !important;
}

.bg-primary-100 {
  background-color: var(--color-primary-100) !important;
}

.bg-primary-200 {
  background-color: var(--color-primary-200) !important;
}

/* Texto */
.text-primary {
  color: var(--color-primary) !important;
}

.text-primary-dark {
  color: var(--color-primary-dark) !important;
}

.text-primary-light {
  color: var(--color-primary-light) !important;
}

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

.border-primary-dark {
  border-color: var(--color-primary-dark) !important;
}

.border-primary-light {
  border-color: var(--color-primary-light) !important;
}

.border-primary-200 {
  border-color: var(--color-primary-200) !important;
}

/* Ring (para focus) */
.ring-primary {
  --tw-ring-color: var(--color-primary) !important;
}

.ring-primary-100 {
  --tw-ring-color: var(--color-primary-100) !important;
}

/* Sombras */
.shadow-primary {
  --tw-shadow-color: var(--color-primary) !important;
}

.shadow-primary-200 {
  --tw-shadow-color: var(--color-primary-200) !important;
  box-shadow: 0 10px 15px -3px rgba(var(--color-primary-rgb), 0.1), 0 4px 6px -4px rgba(var(--color-primary-rgb), 0.1) !important;
}

.shadow-primary-light {
  box-shadow: 0 10px 15px -3px rgba(var(--color-primary-rgb), 0.15), 0 4px 6px -4px rgba(var(--color-primary-rgb), 0.1) !important;
}

/* Gradientes */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
}

.bg-gradient-primary-light {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%) !important;
}

/* ===========================================
 * ESTADOS HOVER
 * =========================================== */

.hover\:bg-primary:hover {
  background-color: var(--color-primary) !important;
}

.hover\:bg-primary-dark:hover {
  background-color: var(--color-primary-dark) !important;
}

.hover\:bg-primary-light:hover {
  background-color: var(--color-primary-light) !important;
}

.hover\:text-primary:hover {
  color: var(--color-primary) !important;
}

.hover\:text-primary-dark:hover {
  color: var(--color-primary-dark) !important;
}

.hover\:border-primary:hover {
  border-color: var(--color-primary) !important;
}

/* ===========================================
 * ESTADOS FOCUS
 * =========================================== */

.focus\:border-primary:focus {
  border-color: var(--color-primary) !important;
}

.focus\:ring-primary:focus {
  --tw-ring-color: var(--color-primary) !important;
}

.focus\:ring-primary-100:focus {
  --tw-ring-color: var(--color-primary-100) !important;
}

/* ===========================================
 * CLASES DE COMPATIBILIDAD (aliases)
 * Mantienen compatibilidad con clases antiguas occident-red
 * =========================================== */

.bg-occident-red {
  background-color: var(--color-primary) !important;
}

.bg-occident-red-dark {
  background-color: var(--color-primary-dark) !important;
}

.bg-occident-red-light {
  background-color: var(--color-primary-light) !important;
}

.text-occident-red {
  color: var(--color-primary) !important;
}

.text-occident-red-dark {
  color: var(--color-primary-dark) !important;
}

.border-occident-red {
  border-color: var(--color-primary) !important;
}

.ring-occident-red {
  --tw-ring-color: var(--color-primary) !important;
}

.hover\:bg-occident-red:hover {
  background-color: var(--color-primary) !important;
}

.hover\:bg-occident-red-dark:hover {
  background-color: var(--color-primary-dark) !important;
}

.hover\:text-occident-red:hover {
  color: var(--color-primary) !important;
}

.focus\:border-occident-red:focus {
  border-color: var(--color-primary) !important;
}

.focus\:ring-occident-red:focus {
  --tw-ring-color: var(--color-primary) !important;
}

/* Checkbox y radio con color primario */
input[type="checkbox"].text-primary:checked,
input[type="radio"].text-primary:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

input[type="checkbox"].text-occident-red:checked,
input[type="radio"].text-occident-red:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Focus ring para inputs */
input:focus.focus\:ring-primary-100,
select:focus.focus\:ring-primary-100,
textarea:focus.focus\:ring-primary-100 {
  --tw-ring-color: var(--color-primary-100);
}

/* ===========================================
 * MODO OSCURO
 * Activado con clase .dark-mode en html o body
 * =========================================== */

.dark-mode {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-hover: #334155;
  --color-surface-alt: #1e293b;
  --color-border: #334155;
  --color-border-light: #1e293b;
  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;

  /* Grises invertidos para modo oscuro */
  --color-gray-50: #1e293b;
  --color-gray-100: #334155;
  --color-gray-200: #475569;
  --color-gray-300: #64748b;
  --color-gray-400: #94a3b8;
  --color-gray-500: #cbd5e1;
  --color-gray-600: #e2e8f0;
  --color-gray-700: #f1f5f9;
  --color-gray-800: #f8fafc;
  --color-gray-900: #ffffff;

  /* Colores semánticos ajustados para oscuro */
  --color-success-light: #064e3b;
  --color-warning-light: #78350f;
  --color-error-light: #7f1d1d;
  --color-info-light: #1e3a5f;
  --color-primary-50: rgba(var(--color-primary-rgb), 0.15);
  --color-primary-100: rgba(var(--color-primary-rgb), 0.25);
}

/* Fondo principal de la app */
.dark-mode body,
.dark-mode .bg-gray-100,
.dark-mode .bg-gray-50 {
  background-color: var(--color-bg) !important;
}

/* Tarjetas y superficies */
.dark-mode .bg-white {
  background-color: var(--color-surface) !important;
}

/* Textos */
.dark-mode .text-gray-900,
.dark-mode .text-gray-800 {
  color: var(--color-text) !important;
}

.dark-mode .text-gray-700,
.dark-mode .text-gray-600 {
  color: var(--color-text-secondary) !important;
}

.dark-mode .text-gray-500 {
  color: var(--color-text-muted) !important;
}

.dark-mode .text-gray-400 {
  color: #94a3b8 !important;
}

/* ===========================================
 * BORDES Y DIVISORES - MODO OSCURO
 * =========================================== */

/* Bordes grises */
.dark-mode .border-gray-200,
.dark-mode .border-gray-100,
.dark-mode .border-gray-50 {
  border-color: var(--color-border) !important;
}

.dark-mode .border-gray-300 {
  border-color: #475569 !important;
}

/* Divisores */
.dark-mode .divide-gray-200 > * + *,
.dark-mode .divide-gray-100 > * + *,
.dark-mode .divide-gray-50 > * + * {
  border-color: var(--color-border) !important;
}

/* Bordes en elementos específicos */
.dark-mode .border-b,
.dark-mode .border-t,
.dark-mode .border-l,
.dark-mode .border-r,
.dark-mode .border {
  border-color: var(--color-border);
}

/* Líneas horizontales */
.dark-mode hr {
  border-color: var(--color-border) !important;
}

/* Bordes en cards y contenedores */
.dark-mode [class*="rounded"][class*="border"] {
  border-color: var(--color-border) !important;
}

/* Separadores verticales */
.dark-mode .w-px.bg-gray-200,
.dark-mode .w-px.bg-gray-100,
.dark-mode .h-px.bg-gray-200,
.dark-mode .h-px.bg-gray-100,
.dark-mode div[class*="w-px"][class*="bg-gray"],
.dark-mode div[class*="h-px"][class*="bg-gray"] {
  background-color: var(--color-border) !important;
}

/* Border en tablas */
.dark-mode table,
.dark-mode th,
.dark-mode td {
  border-color: var(--color-border) !important;
}

.dark-mode tbody tr {
  border-color: var(--color-border) !important;
}

/* Last border removal fix */
.dark-mode .last\:border-0:last-child {
  border-color: transparent !important;
}

/* ===========================================
 * INPUTS Y FORMULARIOS - MODO OSCURO
 * =========================================== */

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--color-text-muted) !important;
}

/* Focus states */
.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Checkboxes y radios */
.dark-mode input[type="checkbox"],
.dark-mode input[type="radio"] {
  background-color: var(--color-surface-alt) !important;
  border-color: var(--color-border) !important;
}

.dark-mode input[type="checkbox"]:checked,
.dark-mode input[type="radio"]:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Select dropdown arrow */
.dark-mode select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
}

/* Disabled inputs */
.dark-mode input:disabled,
.dark-mode select:disabled,
.dark-mode textarea:disabled,
.dark-mode button:disabled {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-muted) !important;
  cursor: not-allowed;
}

/* ===========================================
 * BOTONES - MODO OSCURO
 * =========================================== */

/* Botones grises/secundarios */
.dark-mode .bg-gray-100.text-gray-700,
.dark-mode .bg-gray-200.text-gray-700,
.dark-mode button.bg-gray-100,
.dark-mode button.bg-gray-200,
.dark-mode a.bg-gray-100,
.dark-mode a.bg-gray-200 {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
}

.dark-mode .hover\:bg-gray-200:hover,
.dark-mode .hover\:bg-gray-300:hover {
  background-color: #475569 !important;
}

/* Botón disabled */
.dark-mode .bg-gray-300.text-gray-500,
.dark-mode .cursor-not-allowed {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-muted) !important;
}

/* Ring focus para botones */
.dark-mode .focus\:ring-gray-200:focus {
  --tw-ring-color: var(--color-border) !important;
}

/* Botones outline/border */
.dark-mode button.border-gray-200,
.dark-mode button.border-gray-300,
.dark-mode a.border-gray-200,
.dark-mode a.border-gray-300 {
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

.dark-mode button.border-gray-200:hover,
.dark-mode button.border-gray-300:hover,
.dark-mode a.border-gray-200:hover,
.dark-mode a.border-gray-300:hover {
  background-color: var(--color-surface-hover) !important;
}

/* Tablas */
.dark-mode table thead {
  background-color: var(--color-surface-alt) !important;
}

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

/* Hovers en listas */
.dark-mode .hover\:bg-gray-50:hover,
.dark-mode .hover\:bg-gray-100:hover {
  background-color: var(--color-surface-hover) !important;
}

/* Sombras más sutiles en oscuro */
.dark-mode .shadow-sm,
.dark-mode .shadow,
.dark-mode .shadow-lg {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2) !important;
}

/* Modales */
.dark-mode [class*="modal"] .bg-white,
.dark-mode [id*="modal"] .bg-white {
  background-color: var(--color-surface) !important;
}

/* Scrollbar oscuro */
.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--color-bg);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Calendarios en modo oscuro */
.dark-mode .day-cell {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

.dark-mode .day-cell .day-number,
.dark-mode .day-cell span {
  color: inherit !important;
}

/* Month cards (calendario anual) */
.dark-mode .month-card {
  background: var(--color-surface) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

.dark-mode .month-name {
  color: var(--color-text) !important;
}

.dark-mode .days-header span {
  color: var(--color-text-muted) !important;
}

.dark-mode .days-header span.sunday {
  color: #f87171 !important;
}

/* Cabecera días de la semana */
.dark-mode .weekday-header,
.dark-mode [class*="grid"] > div:first-child,
.dark-mode .text-xs.font-semibold.text-gray-500 {
  color: var(--color-text-muted) !important;
}

.dark-mode .day-cell.weekend {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-secondary) !important;
}

.dark-mode .day-cell.sunday {
  color: #f87171 !important;
}

.dark-mode .day-cell.empty {
  background-color: transparent !important;
}

.dark-mode .day-cell.holiday {
  background-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

.dark-mode .day-cell.vacation {
  background-color: #581c87 !important;
  color: #e9d5ff !important;
}

.dark-mode .day-cell.vacation-pending {
  background-color: #78350f !important;
  color: #fde68a !important;
}

.dark-mode .day-cell.worked {
  background-color: #064e3b !important;
  color: #a7f3d0 !important;
}

.dark-mode .day-cell.intensive {
  background-color: #78350f !important;
  color: #fcd34d !important;
}

.dark-mode .day-cell.reduced-hours {
  background-color: #1e3a5f !important;
  color: #93c5fd !important;
}

/* Mini calendarios */
.dark-mode .mini-month-card {
  background: var(--color-surface) !important;
}

.dark-mode .mini-month-name {
  color: var(--color-text) !important;
}

.dark-mode .mini-days-header span {
  color: var(--color-text-muted) !important;
}

.dark-mode .mini-day-cell {
  color: var(--color-text) !important;
}

.dark-mode .mini-day-cell.has-vacation {
  background-color: #581c87 !important;
}

.dark-mode .mini-day-cell.holiday {
  background-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

.dark-mode .mini-day-cell.my-vacation {
  box-shadow: inset 0 0 0 2px var(--color-primary) !important;
}

/* Flatpickr en modo oscuro */
.dark-mode .flatpickr-calendar {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .flatpickr-months,
.dark-mode .flatpickr-weekdays,
.dark-mode .flatpickr-days {
  background: var(--color-surface) !important;
}

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

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

.dark-mode .flatpickr-day.today {
  border-color: var(--color-primary) !important;
}

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

.dark-mode .flatpickr-current-month,
.dark-mode .flatpickr-monthDropdown-months,
.dark-mode .numInputWrapper input {
  color: var(--color-text) !important;
  background: transparent !important;
}

.dark-mode .flatpickr-weekday {
  color: var(--color-text-muted) !important;
}

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

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

/* Sidebar en modo oscuro */
.dark-mode aside {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

.dark-mode aside a,
.dark-mode aside span {
  color: var(--color-text-secondary) !important;
}

.dark-mode aside a:hover {
  background-color: var(--color-surface-hover) !important;
  color: var(--color-text) !important;
}

.dark-mode aside p {
  color: var(--color-text-muted) !important;
}

.dark-mode aside i {
  color: inherit !important;
}

.dark-mode aside a.bg-primary-50,
.dark-mode aside a.bg-occident-red\/10,
.dark-mode aside a[class*="bg-red-50"] {
  background-color: rgba(var(--color-primary-rgb), 0.2) !important;
  color: var(--color-primary-light) !important;
}

/* Menú lateral - item seleccionado */
.dark-mode .nav-active {
  background-color: rgba(var(--color-primary-rgb), 0.25) !important;
  color: var(--color-primary-light) !important;
}

.dark-mode .nav-active span,
.dark-mode .nav-active i {
  color: var(--color-primary-light) !important;
}

.dark-mode aside a.nav-active {
  background-color: rgba(var(--color-primary-rgb), 0.25) !important;
  color: var(--color-primary-light) !important;
}

.dark-mode aside a.nav-active span,
.dark-mode aside a.nav-active i {
  color: var(--color-primary-light) !important;
}

/* Header en modo oscuro */
.dark-mode header {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

/* Dropdown del menú de usuario en modo oscuro */
.dark-mode header [x-show="open"],
.dark-mode header .absolute {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

.dark-mode header [x-show="open"] a,
.dark-mode header [x-show="open"] button,
.dark-mode header .absolute a,
.dark-mode header .absolute button {
  color: var(--color-text) !important;
}

.dark-mode header [x-show="open"] a:hover,
.dark-mode header [x-show="open"] button:hover,
.dark-mode header .absolute a:hover,
.dark-mode header .absolute button:hover {
  background-color: var(--color-surface-hover) !important;
}

.dark-mode header [x-show="open"] hr,
.dark-mode header .absolute hr {
  border-color: var(--color-border) !important;
}

/* Badges y pills - fondos saturados */
.dark-mode .bg-red-500,
.dark-mode .bg-red-600 {
  background-color: #dc2626 !important;
}

.dark-mode .bg-green-500 {
  background-color: #059669 !important;
}

.dark-mode .bg-yellow-500 {
  background-color: #d97706 !important;
}

.dark-mode .bg-blue-500 {
  background-color: #2563eb !important;
}

/* ===========================================
 * FONDOS DE COLOR 50 (muy claros) - MODO OSCURO
 * =========================================== */
.dark-mode .bg-blue-50 {
  background-color: #1e3a5f !important;
}

.dark-mode .bg-green-50 {
  background-color: #064e3b !important;
}

.dark-mode .bg-red-50 {
  background-color: #450a0a !important;
}

.dark-mode .bg-yellow-50 {
  background-color: #422006 !important;
}

.dark-mode .bg-purple-50 {
  background-color: #4c1d95 !important;
}

.dark-mode .bg-orange-50 {
  background-color: #7c2d12 !important;
}

.dark-mode .bg-indigo-50 {
  background-color: #312e81 !important;
}

.dark-mode .bg-teal-50 {
  background-color: #134e4a !important;
}

.dark-mode .bg-gray-50 {
  background-color: var(--color-surface-alt) !important;
}

/* ===========================================
 * ALERTAS Y CAJAS DE INFO: bg-*-50 + text-*-700/800
 * =========================================== */

/* Blue alerts/info boxes */
.dark-mode .bg-blue-50.text-blue-700,
.dark-mode .bg-blue-50.text-blue-800,
.dark-mode .bg-blue-50 .text-blue-700,
.dark-mode .bg-blue-50 .text-blue-800,
.dark-mode .bg-blue-50 .text-blue-600 {
  color: #93c5fd !important;
}

/* Green alerts/success boxes */
.dark-mode .bg-green-50.text-green-700,
.dark-mode .bg-green-50.text-green-800,
.dark-mode .bg-green-50 .text-green-700,
.dark-mode .bg-green-50 .text-green-800 {
  color: #86efac !important;
}

/* Red alerts/error boxes */
.dark-mode .bg-red-50.text-red-700,
.dark-mode .bg-red-50.text-red-800,
.dark-mode .bg-red-50 .text-red-700,
.dark-mode .bg-red-50 .text-red-800 {
  color: #fca5a5 !important;
}

/* Yellow alerts/warning boxes */
.dark-mode .bg-yellow-50.text-yellow-700,
.dark-mode .bg-yellow-50.text-yellow-800,
.dark-mode .bg-yellow-50 .text-yellow-700,
.dark-mode .bg-yellow-50 .text-yellow-800 {
  color: #fde047 !important;
}

/* ===========================================
 * FONDOS DE COLOR 100 (claros) - MODO OSCURO
 * =========================================== */
.dark-mode .bg-blue-100 {
  background-color: #1e40af !important;
}

.dark-mode .bg-green-100 {
  background-color: #166534 !important;
}

.dark-mode .bg-red-100 {
  background-color: #7f1d1d !important;
}

.dark-mode .bg-yellow-100 {
  background-color: #a16207 !important;
}

.dark-mode .bg-purple-100 {
  background-color: #6b21a8 !important;
}

.dark-mode .bg-orange-100 {
  background-color: #9a3412 !important;
}

.dark-mode .bg-indigo-100 {
  background-color: #3730a3 !important;
}

.dark-mode .bg-teal-100 {
  background-color: #115e59 !important;
}

.dark-mode .bg-emerald-100 {
  background-color: #065f46 !important;
}

.dark-mode .bg-amber-100 {
  background-color: #92400e !important;
}

.dark-mode .bg-pink-100 {
  background-color: #9d174d !important;
}

.dark-mode .bg-cyan-100 {
  background-color: #155e75 !important;
}

.dark-mode .bg-gray-100 {
  background-color: #212b3a !important;
}

.dark-mode .bg-gray-200 {
  background-color: #334155 !important;
}

.dark-mode .bg-gray-300 {
  background-color: #475569 !important;
}

.dark-mode .bg-gray-800 {
  background-color: #1e293b !important;
}

/* ===========================================
 * COMBINACIONES BADGE: bg-*-100 + text-*-700
 * Asegurar contraste en badges/pills
 * =========================================== */

/* Blue badges */
.dark-mode .bg-blue-100.text-blue-700,
.dark-mode .bg-blue-100.text-blue-600,
.dark-mode [class*="bg-blue-100"][class*="text-blue"] {
  background-color: #1e40af !important;
  color: #bfdbfe !important;
}

/* Green badges */
.dark-mode .bg-green-100.text-green-700,
.dark-mode .bg-green-100.text-green-600,
.dark-mode [class*="bg-green-100"][class*="text-green"] {
  background-color: #166534 !important;
  color: #bbf7d0 !important;
}

/* Red badges */
.dark-mode .bg-red-100.text-red-700,
.dark-mode .bg-red-100.text-red-600,
.dark-mode [class*="bg-red-100"][class*="text-red"] {
  background-color: #7f1d1d !important;
  color: #fecaca !important;
}

/* Yellow badges */
.dark-mode .bg-yellow-100.text-yellow-700,
.dark-mode .bg-yellow-100.text-yellow-600,
.dark-mode [class*="bg-yellow-100"][class*="text-yellow"] {
  background-color: #a16207 !important;
  color: #fef08a !important;
}

/* Purple badges */
.dark-mode .bg-purple-100.text-purple-700,
.dark-mode .bg-purple-100.text-purple-600,
.dark-mode [class*="bg-purple-100"][class*="text-purple"] {
  background-color: #6b21a8 !important;
  color: #e9d5ff !important;
}

/* Orange badges */
.dark-mode .bg-orange-100.text-orange-700,
.dark-mode .bg-orange-100.text-orange-600,
.dark-mode [class*="bg-orange-100"][class*="text-orange"] {
  background-color: #9a3412 !important;
  color: #fed7aa !important;
}

/* Gray badges */
.dark-mode .bg-gray-100.text-gray-700,
.dark-mode .bg-gray-100.text-gray-600,
.dark-mode .bg-gray-100.text-gray-500,
.dark-mode [class*="bg-gray-100"][class*="text-gray"] {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-secondary) !important;
}

/* Fondos de color 200 (hover states para botones) */
.dark-mode .bg-blue-200,
.dark-mode .group:hover .group-hover\:bg-blue-200 {
  background-color: #1e3a8a !important;
}

.dark-mode .bg-green-200,
.dark-mode .group:hover .group-hover\:bg-green-200 {
  background-color: #14532d !important;
}

.dark-mode .bg-purple-200,
.dark-mode .group:hover .group-hover\:bg-purple-200 {
  background-color: #581c87 !important;
}

.dark-mode .bg-emerald-200,
.dark-mode .group:hover .group-hover\:bg-emerald-200 {
  background-color: #047857 !important;
}

.dark-mode .bg-amber-200,
.dark-mode .group:hover .group-hover\:bg-amber-200 {
  background-color: #78350f !important;
}

.dark-mode .bg-red-200,
.dark-mode .group:hover .group-hover\:bg-red-200 {
  background-color: #7f1d1d !important;
}

/* También asegurar text-red-500 para iconos */
.dark-mode .text-red-500 {
  color: #fecaca !important;
}

.dark-mode .bg-pink-200,
.dark-mode .group:hover .group-hover\:bg-pink-200 {
  background-color: #831843 !important;
}

.dark-mode .bg-cyan-200,
.dark-mode .group:hover .group-hover\:bg-cyan-200 {
  background-color: #164e63 !important;
}

.dark-mode .bg-yellow-200,
.dark-mode .group:hover .group-hover\:bg-yellow-200 {
  background-color: #854d0e !important;
}

.dark-mode .bg-orange-200,
.dark-mode .group:hover .group-hover\:bg-orange-200 {
  background-color: #7c2d12 !important;
}

.dark-mode .bg-indigo-200,
.dark-mode .group:hover .group-hover\:bg-indigo-200 {
  background-color: #312e81 !important;
}

.dark-mode .bg-teal-200,
.dark-mode .group:hover .group-hover\:bg-teal-200 {
  background-color: #134e4a !important;
}

/* Textos de colores en modo oscuro */
.dark-mode .text-green-700,
.dark-mode .text-green-600 {
  color: #86efac !important;
}

.dark-mode .text-red-700,
.dark-mode .text-red-600 {
  color: #fca5a5 !important;
}

.dark-mode .text-yellow-800 {
  color: #fef08a !important;
}

.dark-mode .text-yellow-700,
.dark-mode .text-yellow-600,
.dark-mode .text-yellow-500 {
  color: #fde047 !important;
}

.dark-mode .text-blue-700,
.dark-mode .text-blue-600,
.dark-mode .text-blue-500 {
  color: #93c5fd !important;
}

.dark-mode .text-purple-700,
.dark-mode .text-purple-600,
.dark-mode .text-purple-500 {
  color: #c4b5fd !important;
}

.dark-mode .text-green-500 {
  color: #4ade80 !important;
}

.dark-mode .text-red-500 {
  color: #f87171 !important;
}

.dark-mode .text-emerald-700,
.dark-mode .text-emerald-600 {
  color: #6ee7b7 !important;
}

.dark-mode .text-amber-700,
.dark-mode .text-amber-600 {
  color: #fcd34d !important;
}

.dark-mode .text-pink-700,
.dark-mode .text-pink-600 {
  color: #f9a8d4 !important;
}

.dark-mode .text-cyan-700,
.dark-mode .text-cyan-600 {
  color: #67e8f9 !important;
}

.dark-mode .text-orange-700,
.dark-mode .text-orange-600 {
  color: #fdba74 !important;
}

.dark-mode .text-indigo-700,
.dark-mode .text-indigo-600 {
  color: #a5b4fc !important;
}

.dark-mode .text-teal-700,
.dark-mode .text-teal-600 {
  color: #5eead4 !important;
}

/* Textos 800 (más oscuros en light, más claros en dark) */
.dark-mode .text-blue-800 {
  color: #bfdbfe !important;
}

.dark-mode .text-green-800 {
  color: #bbf7d0 !important;
}

.dark-mode .text-red-800 {
  color: #fecaca !important;
}

.dark-mode .text-purple-800 {
  color: #ddd6fe !important;
}

/* Bordes de colores */
.dark-mode .border-yellow-200 {
  border-color: #854d0e !important;
}

.dark-mode .border-blue-200 {
  border-color: #1e40af !important;
}

.dark-mode .border-green-200 {
  border-color: #166534 !important;
}

.dark-mode .border-red-200 {
  border-color: #991b1b !important;
}

/* Listas de usuarios/empleados */
.dark-mode .employee-card,
.dark-mode .user-item,
.dark-mode li.bg-white,
.dark-mode div.bg-white {
  background-color: var(--color-surface) !important;
}

/* Dropdowns y selects */
.dark-mode select option {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

/* Cards generales */
.dark-mode .rounded-xl.bg-white,
.dark-mode .rounded-2xl.bg-white,
.dark-mode .rounded-lg.bg-white,
.dark-mode [class*="rounded"][class*="bg-white"] {
  background-color: var(--color-surface) !important;
}

/* Todos los elementos con fondo blanco explícito */
.dark-mode [style*="background: white"],
.dark-mode [style*="background-color: white"],
.dark-mode [style*="background:#fff"],
.dark-mode [style*="background: #fff"] {
  background-color: var(--color-surface) !important;
}

/* ===========================================
 * MEJORAS ADICIONALES - MODO OSCURO
 * =========================================== */

/* Links hover - colores más visibles */
.dark-mode a.text-blue-500:hover,
.dark-mode a.text-blue-600:hover {
  color: #60a5fa !important;
}

.dark-mode a.text-red-500:hover,
.dark-mode a.text-red-600:hover {
  color: #f87171 !important;
}

/* Hover states para elementos interactivos */
.dark-mode .hover\:bg-red-50:hover {
  background-color: #450a0a !important;
}

.dark-mode .hover\:bg-blue-50:hover {
  background-color: #1e3a5f !important;
}

.dark-mode .hover\:bg-green-50:hover {
  background-color: #064e3b !important;
}

/* Tooltip y popovers */
.dark-mode [title],
.dark-mode [data-tooltip] {
  color: inherit;
}

/* Progress bars */
.dark-mode progress {
  background-color: var(--color-surface-alt);
}

.dark-mode progress::-webkit-progress-bar {
  background-color: var(--color-surface-alt);
}

/* Iconos en contenedores circulares */
.dark-mode .rounded-full.bg-gray-100,
.dark-mode .rounded-full.bg-gray-200 {
  background-color: var(--color-surface-alt) !important;
}

/* Avatars y profile pics */
.dark-mode .rounded-full.bg-green-200 {
  background-color: #166534 !important;
  color: #bbf7d0 !important;
}

.dark-mode .rounded-full.bg-blue-200 {
  background-color: #1e40af !important;
  color: #bfdbfe !important;
}

/* Líneas de tiempo y conectores */
.dark-mode .border-l-2,
.dark-mode .border-l-4 {
  border-color: var(--color-border) !important;
}

/* Focus visible para accesibilidad */
.dark-mode :focus-visible {
  outline-color: var(--color-primary) !important;
}

/* Placeholder de imágenes */
.dark-mode .bg-gray-100.animate-pulse,
.dark-mode .bg-gray-200.animate-pulse {
  background-color: var(--color-surface-alt) !important;
}

/* Empty states */
.dark-mode .text-gray-300 {
  color: #64748b !important;
}

/* Código inline */
.dark-mode code {
  background-color: var(--color-surface-alt) !important;
  color: #f472b6 !important;
}

/* Blockquotes */
.dark-mode blockquote {
  border-color: var(--color-border) !important;
  background-color: var(--color-surface-alt) !important;
}

/* Highlighted/selected text */
.dark-mode ::selection {
  background-color: rgba(var(--color-primary-rgb), 0.4) !important;
  color: white !important;
}

/* Zebra striping en tablas */
.dark-mode tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Sticky headers */
.dark-mode thead.sticky,
.dark-mode .sticky {
  background-color: var(--color-surface) !important;
}

/* Notification dots/badges */
.dark-mode .bg-red-500.rounded-full,
.dark-mode .bg-green-500.rounded-full {
  /* Mantener colores vivos para notificaciones */
}

/* Ring colors para focus */
.dark-mode .ring-gray-300 {
  --tw-ring-color: var(--color-border) !important;
}

.dark-mode .ring-gray-200 {
  --tw-ring-color: var(--color-surface-alt) !important;
}

/* ===========================================
 * BORDES PARA BADGES Y TARJETAS - MODO OSCURO
 * =========================================== */

/* Tarjetas blancas */
.dark-mode .bg-white.rounded-xl,
.dark-mode .bg-white.rounded-2xl,
.dark-mode .bg-white.rounded-lg {
  border: 1px solid #334155 !important;
}

/* Badges de colores con fondo claro */
.dark-mode .bg-blue-100,
.dark-mode .bg-green-100,
.dark-mode .bg-yellow-100,
.dark-mode .bg-red-100,
.dark-mode .bg-purple-100,
.dark-mode .bg-orange-100,
.dark-mode .bg-pink-100,
.dark-mode .bg-cyan-100,
.dark-mode .bg-emerald-100,
.dark-mode .bg-amber-100,
.dark-mode .bg-indigo-100,
.dark-mode .bg-teal-100 {
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Badges de estado (rounded-full) */
.dark-mode .rounded-full.bg-yellow-100,
.dark-mode .rounded-full.bg-green-100,
.dark-mode .rounded-full.bg-red-100,
.dark-mode .rounded-full.bg-blue-100,
.dark-mode .rounded-full.bg-purple-100 {
  border: 1px solid rgba(255,255,255,0.15) !important;
}