/* ==========================================================================
SAT API Panel — Dark mode
Se activa con [data-theme="dark"] en .
========================================================================== */
[data-theme="dark"] {
/* Brand (un poco más brillante en dark) */
--brand-50: #1e1b4b;
--brand-100: #312e81;
--brand-200: #3730a3;
--brand-300: #4338ca;
--brand-400: #6366f1;
--brand-500: #818cf8;
--brand-600: #a5b4fc;
--brand-700: #c7d2fe;
--brand-800: #e0e7ff;
--brand-900: #eef2ff;
--accent-400: #c4b5fd;
--accent-500: #a78bfa;
--accent-600: #8b5cf6;
--accent-700: #7c3aed;
/* Semantic */
--success: #34d399;
--success-bg: rgba(16, 185, 129, 0.12);
--success-text: #6ee7b7;
--warning: #fbbf24;
--warning-bg: rgba(245, 158, 11, 0.12);
--warning-text: #fcd34d;
--danger: #f87171;
--danger-bg: rgba(239, 68, 68, 0.12);
--danger-text: #fca5a5;
--info: #60a5fa;
--info-bg: rgba(59, 130, 246, 0.12);
--info-text: #93c5fd;
/* Surface */
--bg: #0b0e1a;
--bg-alt: #11142a;
--surface: #161a35;
--surface-2: #1a1f3d;
--surface-elevated: #1e2342;
--border: #252b50;
--border-strong: #353e6e;
/* Text */
--text: #f1f5fb;
--text-muted: #a8b1d1;
--text-soft: #6b7595;
--text-inverse: #0f172a;
/* Effects */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 12px 28px -5px rgba(0, 0, 0, 0.6), 0 4px 8px -2px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 25px 60px -12px rgba(0, 0, 0, 0.7);
--shadow-glow: 0 0 0 3px rgba(129, 140, 248, 0.30);
--shadow-glow-lg: 0 0 0 4px rgba(129, 140, 248, 0.32), 0 8px 24px rgba(99, 102, 241, 0.30);
/* Gradients */
--grad-brand: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #818cf8 100%);
--grad-brand-soft: linear-gradient(135deg, #1e1b4b 0%, #2e1065 100%);
--grad-glow: radial-gradient(circle at 0% 0%, rgba(129, 140, 248, 0.10) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.10) 0%, transparent 50%);
}
/* Ajustes específicos para dark */
[data-theme="dark"] body {
background: var(--bg);
}
[data-theme="dark"] .topbar {
background: rgba(22, 26, 53, 0.85);
border-bottom-color: var(--border);
backdrop-filter: saturate(180%) blur(12px);
}
[data-theme="dark"] .sidebar {
background: var(--surface);
border-right-color: var(--border);
}
[data-theme="dark"] .sidebar__link {
color: var(--text-muted);
}
[data-theme="dark"] .sidebar__link:hover {
background: rgba(129, 140, 248, 0.10);
color: var(--text);
}
[data-theme="dark"] .sidebar__link.is-active {
background: var(--grad-brand);
color: var(--text-inverse);
}
[data-theme="dark"] .sidebar__link.is-active::before {
background: var(--brand-400);
}
[data-theme="dark"] .card,
[data-theme="dark"] .card-kpi,
[data-theme="dark"] .tabla-wrapper {
background: var(--surface-elevated);
border-color: var(--border);
}
[data-theme="dark"] .card:hover { box-shadow: var(--shadow-md); }
[data-theme="dark"] .tabla thead {
background: var(--surface-2);
border-bottom-color: var(--border);
}
[data-theme="dark"] .tabla th {
color: var(--text-muted);
}
[data-theme="dark"] .tabla td {
border-bottom-color: var(--border);
}
[data-theme="dark"] .tabla tbody tr:hover {
background: var(--surface-2);
}
[data-theme="dark"] .form__group input,
[data-theme="dark"] .form__group select,
[data-theme="dark"] .form__group textarea,
[data-theme="dark"] .form-inline input,
[data-theme="dark"] .form-inline select {
background: var(--bg-alt);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .form__group input:hover,
[data-theme="dark"] .form__group select:hover,
[data-theme="dark"] .form__group textarea:hover {
border-color: var(--border-strong);
}
[data-theme="dark"] .form__group input:focus,
[data-theme="dark"] .form__group select:focus,
[data-theme="dark"] .form__group textarea:focus {
background: var(--bg-alt);
border-color: var(--brand-400);
box-shadow: var(--shadow-glow);
}
[data-theme="dark"] .form__group select {
background-image: url("data:image/svg+xml;utf8,");
}
[data-theme="dark"] .btn--secondary {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .btn--secondary:hover {
background: var(--surface-2);
border-color: var(--border-strong);
}
[data-theme="dark"] .btn--ghost:hover {
background: rgba(129, 140, 248, 0.10);
color: var(--brand-300);
}
[data-theme="dark"] .topbar__search input {
background-color: var(--bg-alt);
background-image: url("data:image/svg+xml;utf8,");
}
[data-theme="dark"] .topbar__search input:focus {
background-color: var(--surface);
border-color: var(--brand-400);
}
[data-theme="dark"] .topbar__user-role {
background: var(--brand-100);
color: var(--brand-300);
}
[data-theme="dark"] .topbar__menu {
background: var(--bg-alt);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .topbar__menu:hover {
background: var(--brand-100);
border-color: var(--brand-400);
}
[data-theme="dark"] .theme-toggle {
background: var(--bg-alt);
border-color: var(--border);
color: var(--text-muted);
}
[data-theme="dark"] .theme-toggle:hover {
background: var(--brand-100);
border-color: var(--brand-400);
color: var(--brand-300);
}
[data-theme="dark"] .badge {
background: var(--surface-2);
color: var(--text-muted);
}
[data-theme="dark"] .badge--activo,
[data-theme="dark"] .badge--sync-sincronizado { background: var(--success-bg); color: var(--success-text); }
[data-theme="dark"] .badge--suspendido,
[data-theme="dark"] .badge--sync-pendiente { background: var(--warning-bg); color: var(--warning-text); }
[data-theme="dark"] .badge--baja,
[data-theme="dark"] .badge--sync-error { background: var(--danger-bg); color: var(--danger-text); }
[data-theme="dark"] .badge--info { background: var(--info-bg); color: var(--info-text); }
[data-theme="dark"] .badge--brand { background: var(--brand-100); color: var(--brand-300); }
[data-theme="dark"] .badge--neutral { background: var(--surface-2); color: var(--text-muted); }
[data-theme="dark"] .pagination__link {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .pagination__link:hover {
background: rgba(129, 140, 248, 0.10);
border-color: var(--brand-400);
color: var(--brand-300);
}
[data-theme="dark"] .bar-row__track {
background: var(--bg-alt);
}
[data-theme="dark"] .stat-icon {
background: rgba(129, 140, 248, 0.15);
color: var(--brand-300);
}
[data-theme="dark"] .stat-icon--success { background: var(--success-bg); color: var(--success-text); }
[data-theme="dark"] .stat-icon--warning { background: var(--warning-bg); color: var(--warning-text); }
[data-theme="dark"] .stat-icon--danger { background: var(--danger-bg); color: var(--danger-text); }
[data-theme="dark"] .activity-item__icon {
background: var(--brand-100);
color: var(--brand-300);
}
[data-theme="dark"] .activity-item__icon--success { background: var(--success-bg); color: var(--success-text); }
[data-theme="dark"] .activity-item__icon--warning { background: var(--warning-bg); color: var(--warning-text); }
[data-theme="dark"] .activity-item__icon--danger { background: var(--danger-bg); color: var(--danger-text); }
[data-theme="dark"] code,
[data-theme="dark"] .mono {
background: var(--bg-alt);
color: var(--accent-400);
border-color: var(--border);
}
[data-theme="dark"] .login-container {
background:
radial-gradient(ellipse at top left, rgba(99, 102, 241, 0.20) 0%, transparent 50%),
radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.20) 0%, transparent 50%),
var(--bg);
}
[data-theme="dark"] .login-container::before {
background-image:
linear-gradient(rgba(129, 140, 248, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(129, 140, 248, 0.06) 1px, transparent 1px);
}
[data-theme="dark"] .login-card {
background: var(--surface-elevated);
border-color: var(--border);
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(99, 102, 241, 0.15);
}
[data-theme="dark"] .card-kpi::after {
background: var(--grad-brand-soft);
opacity: 0.5;
}
/* Transición suave al cambiar tema */
body, .card, .btn, .topbar, .sidebar, .form__group input,
.form__group select, .form__group textarea, .tabla, .tabla-wrapper,
.tabla td, .tabla th, .pagination__link, .badge, .stat-icon,
.activity-item__icon, .theme-toggle, code, .mono {
transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}