/* File: public/assets/css/dark-mode.css */

/* Transición suave al alternar tema (evita el "parpadeo" brusco) */
body, .card, .sidebar, .topbar, .form-input, .modal-box, .btn-icon {
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

body.dark-mode,
body.dark {
    --bg-page: #121212;
    --bg-surface: #1E1E1E;
    --bg-topbar: #1E1E1E;
    --text-primary: #E0E0E0;
    --text-secondary: #9E9E9E;
    --border-color: #333;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

    --color-success-bg: #1B3D1B;
    --color-warning-bg: #3D2A1B;
    --color-danger-bg: #3D1B1B;
    --color-info-bg: #1B2A3D;
}

body.dark-mode .form-input,
body.dark .form-input {
    background: #2A2A2A;
    color: var(--text-primary);
    border-color: #444;
}

body.dark-mode .form-input:focus,
body.dark .form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(21,101,192,0.3);
}

body.dark-mode .form-input:read-only,
body.dark .form-input:read-only {
    background: #222;
    color: var(--text-secondary);
}

body.dark-mode .table tbody tr:hover,
body.dark .table tbody tr:hover { background: #2A2A2A; }

body.dark-mode .badge-inactivo,
body.dark .badge-inactivo { background: #333; color: #999; }

body.dark-mode .feed-item,
body.dark .feed-item,
body.dark-mode .alerta-item,
body.dark .alerta-item,
body.dark-mode .card-header,
body.dark .card-header {
    border-color: #333;
}

body.dark-mode .table th,
body.dark .table th,
body.dark-mode .table td,
body.dark .table td {
    border-color: #333;
}

body.dark-mode .progress-bar,
body.dark .progress-bar {
    background: #333;
}

body.dark-mode .shortcut-hint kbd,
body.dark .shortcut-hint kbd {
    background: #333;
    border-color: #555;
    color: var(--text-primary);
}

body.dark-mode .btn-icon,
body.dark .btn-icon {
    border-color: #444;
    color: var(--text-primary);
}

body.dark-mode .btn-icon:hover,
body.dark .btn-icon:hover { background: #333; }

body.dark-mode .sidebar,
body.dark .sidebar {
    background: #0D0D2B;
}

body.dark-mode .autocomplete-results,
body.dark .autocomplete-results {
    background: #2A2A2A;
    border-color: #444;
}

body.dark-mode .autocomplete-item,
body.dark .autocomplete-item {
    border-color: #333;
}

body.dark-mode .autocomplete-item:hover,
body.dark .autocomplete-item:hover,
body.dark-mode .autocomplete-item.active,
body.dark .autocomplete-item.active {
    background: #1B2A3D;
}

body.dark-mode .toast,
body.dark .toast {
    color: white;
}

body.dark-mode .login-card,
body.dark .login-card {
    background: #1E1E1E;
}

body.dark-mode .card--kpi .kpi-icon,
body.dark .card--kpi .kpi-icon {
    filter: brightness(1.1);
}

body.dark-mode .empty-state,
body.dark .empty-state {
    opacity: 0.85;
}