/**
 * dark-background.css
 * * Estilos para el modo oscuro que solo cambia los fondos.
 * - Aplica fondos oscuros a elementos principales
 * - Mantiene colores de texto y otros elementos sin cambios
 * - Usa la clase .dark-bg en el body para activar
 */

body.dark-bg {
    background-color: #181c23 !important;
    color: #e5e7eb;
}

body.dark-bg .bg-white,
body.dark-bg .bg-white\/95,
body.dark-bg .bg-white\/90 {
    background-color: #232936 !important;
    color: #f3f4f6 !important;
    box-shadow: 0 2px 16px 0 #0004;
}

body.dark-bg .card,
body.dark-bg .stat-card {
    background: linear-gradient(135deg, #232936 80%, #232936cc 100%) !important;
    color: #f3f4f6 !important;
    box-shadow: 0 2px 16px 0 #0006;
    border: 1px solid #232936;
}

body.dark-bg .sidebar {
    background: #20232b !important;
    color: #e5e7eb !important;
    border-right: 1px solid #232936;
}

body.dark-bg .bg-gray-100,
body.dark-bg .bg-gray-50 {
    background-color: #232936 !important;
}

body.dark-bg .bg-gray-200,
body.dark-bg .bg-gray-300,
body.dark-bg .bg-gray-400,
body.dark-bg .bg-gray-500,
body.dark-bg .bg-gray-600,
body.dark-bg .bg-gray-700,
body.dark-bg .bg-gray-800,
body.dark-bg .bg-gray-900 {
    background-color: #232936 !important;
}

body.dark-bg .text-gray-900,
body.dark-bg .text-gray-800,
body.dark-bg .text-gray-700,
body.dark-bg .text-gray-600,
body.dark-bg .text-gray-500,
body.dark-bg .text-gray-400,
body.dark-bg .text-gray-300,
body.dark-bg .text-gray-200,
body.dark-bg .text-gray-100 {
    color: #e5e7eb !important;
}

body.dark-bg .text-blue-600 { color: #60a5fa !important; }
body.dark-bg .text-green-600 { color: #34d399 !important; }
body.dark-bg .text-yellow-600 { color: #fde68a !important; }
body.dark-bg .text-red-600 { color: #f87171 !important; }
body.dark-bg .text-purple-600 { color: #a78bfa !important; }
body.dark-bg .text-indigo-600 { color: #818cf8 !important; }

body.dark-bg input[type="text"],
body.dark-bg input[type="email"],
body.dark-bg input[type="password"],
body.dark-bg input[type="number"],
body.dark-bg input[type="date"],
body.dark-bg textarea,
body.dark-bg select {
    background-color: #232936 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
    box-shadow: 0 1px 4px 0 #0002;
}

body.dark-bg input[type="text"]::placeholder,
body.dark-bg input[type="email"]::placeholder,
body.dark-bg input[type="password"]::placeholder,
body.dark-bg input[type="number"]::placeholder,
body.dark-bg input[type="date"]::placeholder,
body.dark-bg textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1;
}

body.dark-bg table thead {
    background-color: #232936 !important;
    color: #f3f4f6 !important;
}
body.dark-bg table tbody tr {
    background-color: #20232b !important;
    color: #e5e7eb !important;
}
body.dark-bg table tbody tr:nth-child(even) {
    background-color: #232936 !important;
}

body.dark-bg .modal,
body.dark-bg .modal-content {
    background-color: #232936 !important;
    color: #f3f4f6 !important;
    box-shadow: 0 2px 16px 0 #0006;
}

body.dark-bg .active {
    background-color: #2563eb !important;
    color: #fff !important;
}
body.dark-bg .selected {
    background-color: #1d4ed8 !important;
    color: #fff !important;
}
body.dark-bg .disabled {
    background-color: #374151 !important;
    color: #9ca3af !important;
    opacity: 0.5;
}

body.dark-bg .shadow,
body.dark-bg .shadow-md,
body.dark-bg .shadow-lg,
body.dark-bg .shadow-xl,
body.dark-bg .shadow-2xl {
    box-shadow: 0 4px 24px 0 #0006 !important;
}

body.dark-bg ::-webkit-scrollbar {
    width: 8px;
}
body.dark-bg ::-webkit-scrollbar-track {
    background: #232936;
}
body.dark-bg ::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}
body.dark-bg ::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

body.dark-bg * {
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}