/* Dark Mode Styles - Intranet v3.2 */

/* Variables de tema oscuro - Paleta Profesional "Slate" */
body.dark-mode {
    --bg-color: #0f172a;
    /* Slate 900 - Fondo principal muy oscuro */
    --surface-color: #1e293b;
    /* Slate 800 - Superficie de cards/sidebar */
    --card-color: #1e293b;
    /* Slate 800 */
    --header-color: #334155;
    /* Slate 700 - Cabeceras de tablas/secciones */

    --text-primary: #f8fafc;
    /* Slate 50 - Texto principal casi blanco */
    --text-secondary: #94a3b8;
    /* Slate 400 - Texto secundario gris suave */
    --border-color: #334155;
    /* Slate 700 - Bordes sutiles */

    --hover-bg: #334155;
    /* Slate 700 */
    --active-bg: #475569;
    /* Slate 600 */
    --shadow-color: rgba(0, 0, 0, 0.5);

    /* Colores de acento ajustados para modo oscuro */
    --primary-teal: #2dd4bf;
    /* Teal 400 - Más brillante para fondo oscuro */
    --primary-green: #4ade80;
    /* Green 400 */
}

/* Fondo general */
body.dark-mode {
    background: var(--bg-color);
    color: var(--text-primary);
}

/* Topbar */
body.dark-mode .topbar {
    background: var(--surface-color);
    /* Color sólido en lugar de gradiente */
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px var(--shadow-color);
}

body.dark-mode .topbar-logo {
    color: var(--primary-green);
}

body.dark-mode .global-search input {
    background: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .global-search input::placeholder {
    color: var(--text-secondary);
}

body.dark-mode .user-name {
    color: var(--text-primary);
}

body.dark-mode .user-role {
    color: var(--text-secondary);
}

body.dark-mode .user-dropdown,
body.dark-mode .notifications-dropdown,
body.dark-mode .search-results {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 15px -3px var(--shadow-color);
}

body.dark-mode .user-dropdown-item,
body.dark-mode .search-result-item {
    color: var(--text-primary);
}

body.dark-mode .user-dropdown-item:hover,
body.dark-mode .notification-item:hover,
body.dark-mode .search-result-item:hover {
    background: var(--hover-bg);
}

body.dark-mode .notifications-header {
    border-bottom: 1px solid var(--border-color);
    background: var(--header-color);
}

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

body.dark-mode .sidebar-header {
    background: var(--surface-color);
    /* Integrado con el resto del sidebar */
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .sidebar-header h1 {
    color: var(--text-primary);
}

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

body.dark-mode .nav-link {
    color: var(--text-secondary);
    /* Enlace inactivo más apagado */
}

body.dark-mode .nav-link:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

body.dark-mode .nav-link.active {
    background: rgba(45, 212, 191, 0.15);
    /* Acento teal muy suave */
    color: var(--primary-teal);
    border-left: 4px solid var(--primary-teal);
}

body.dark-mode .sidebar-nav-header {
    color: #64748b;
    /* Slate 500 */
}

body.dark-mode .sidebar-toggle {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark-mode .sidebar-toggle:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Main Content */
body.dark-mode .main-content {
    background: var(--bg-color);
    /* Asegurar que no quede blanco */
}

body.dark-mode .section {
    background: transparent;
    /* Quitar fondos blancos forzados */
}

body.dark-mode .section h2 {
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

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

/* Cards & Widgets */
body.dark-mode .card,
body.dark-mode .widget {
    background: var(--card-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px var(--shadow-color);
    color: var(--text-primary);
}

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

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

/* Formularios */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-secondary);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.2);
}

/* Tablas */
body.dark-mode table {
    border-color: var(--border-color);
}

body.dark-mode th {
    background: var(--header-color);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
}

body.dark-mode td {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

body.dark-mode tr:hover td {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Botones */
body.dark-mode .btn {
    background: var(--primary-teal);
    color: #0f172a;
    /* Texto oscuro para contraste en botón brillante */
    border: none;
    font-weight: 600;
}

body.dark-mode .btn:hover {
    filter: brightness(1.1);
}

body.dark-mode .btn-secondary {
    background: var(--border-color);
    color: var(--text-primary);
}

/* Alerts - Colores ajustados para ser legibles en oscuro pero mantener semántica */
body.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.15);
    border-left-color: #3b82f6;
    color: #93c5fd;
}

body.dark-mode .alert-success {
    background: rgba(34, 197, 94, 0.15);
    border-left-color: #22c55e;
    color: #86efac;
}

body.dark-mode .alert-warning {
    background: rgba(234, 179, 8, 0.15);
    border-left-color: #eab308;
    color: #fde047;
}

body.dark-mode .alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border-left-color: #ef4444;
    color: #fca5a5;
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar {
    background: var(--bg-color);
}

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

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

/* Fix específico imagen usuario */
body.dark-mode .admin-header {
    background: var(--surface-color) !important;
    border-bottom-color: var(--border-color);
}

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

body.dark-mode .admin-nav button.active {
    color: var(--primary-teal);
    border-bottom-color: var(--primary-teal);
}