/* ============================================================ PANEL INTERNO — MODO OSCURO (opt-in, data-theme="dark" en ) No modifica el color de acento de marca (--ui-accent, --municipal-blue…). Solo superficies: fondos, textos, bordes, sombras. ============================================================ */ html[data-theme="dark"] { color-scheme: dark; /* Texto y fondos base */ --ui-heading: #e8f0f2; --ui-text: #b8cad0; --municipal-dark: #e2eaed; --municipal-gray: #9db4bc; --municipal-gray-light: #7a939e; --municipal-border: #3a4f5a; --municipal-bg: #0c1014; --municipal-white: #151c22; --municipal-light-gray: #1e2935; --ui-warm-bg: #161311; /* Fondos “soft” semánticos (misma familia de color, más oscuros para contraste) */ --ui-accent-soft: rgba(13, 148, 136, 0.22); --ui-coral-soft: rgba(224, 122, 95, 0.18); --municipal-green-light: rgba(13, 148, 136, 0.2); --municipal-red-light: rgba(197, 48, 48, 0.22); --municipal-warning-light: rgba(194, 120, 3, 0.22); --municipal-cyan-light: rgba(201, 168, 76, 0.18); /* Sombras más profundas */ --municipal-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --municipal-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --municipal-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --municipal-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5); --municipal-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.55); } /* —— site.css: cards, tablas, formularios, alertas —— */ html[data-theme="dark"] .card { background: var(--municipal-white); border-color: var(--municipal-border); } html[data-theme="dark"] .card-header { background: var(--municipal-light-gray); color: var(--ui-heading); border-bottom-color: var(--municipal-border); } html[data-theme="dark"] .table thead th { background: var(--municipal-light-gray); color: var(--municipal-gray); border-bottom-color: var(--municipal-border); } html[data-theme="dark"] .table tbody td { color: var(--ui-text); border-bottom-color: var(--municipal-border); } html[data-theme="dark"] .table-hover tbody tr:hover td { background-color: rgba(13, 148, 136, 0.12) !important; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background: #0f161c; color: var(--ui-text); border-color: var(--municipal-border); } html[data-theme="dark"] .form-control::placeholder { color: var(--municipal-gray-light); opacity: 1; } html[data-theme="dark"] .form-label { color: var(--ui-heading); } html[data-theme="dark"] .btn-outline-secondary { background: var(--municipal-light-gray); color: var(--ui-text); border-color: var(--municipal-border); } html[data-theme="dark"] .btn-outline-secondary:hover { background: #263240; color: var(--ui-heading); border-color: var(--municipal-border); } html[data-theme="dark"] .dropdown-menu { background: var(--municipal-white); border-color: var(--municipal-border); } html[data-theme="dark"] .dropdown-item { color: var(--ui-text); } html[data-theme="dark"] .dropdown-item:hover { background: var(--municipal-light-gray); color: var(--ui-heading); } html[data-theme="dark"] .dropdown-divider { border-color: var(--municipal-border); } html[data-theme="dark"] .text-muted { color: var(--municipal-gray) !important; } html[data-theme="dark"] .text-dark { color: var(--ui-heading) !important; } html[data-theme="dark"] .list-group-item { background: var(--municipal-white); color: var(--ui-text); border-color: var(--municipal-border); } html[data-theme="dark"] .list-group-item-action:hover { background: var(--municipal-light-gray); color: var(--ui-heading); } /* Alertas: mantener acento en borde; texto más claro */ html[data-theme="dark"] .alert-success { color: #a7f3d0; background: rgba(13, 148, 136, 0.15); } html[data-theme="dark"] .alert-danger { color: #fecaca; background: rgba(197, 48, 48, 0.18); } html[data-theme="dark"] .alert-info { color: #fde68a; background: rgba(201, 168, 76, 0.12); } html[data-theme="dark"] .alert-warning { color: #fde68a; background: rgba(194, 120, 3, 0.15); } html[data-theme="dark"] .alert-secondary { background: var(--municipal-light-gray); color: var(--ui-text); border-left-color: var(--municipal-gray-light); } /* —— layout.css —— */ html[data-theme="dark"] .municipal-header { background: linear-gradient(180deg, #141c22 0%, #0f1419 100%); color: var(--ui-heading); box-shadow: 0 1px 0 rgba(13, 148, 136, 0.25), 0 8px 28px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .municipal-title, html[data-theme="dark"] .municipal-subtitle { color: var(--ui-heading); } html[data-theme="dark"] .municipal-header .btn-outline-light { color: var(--ui-heading) !important; border-color: rgba(13, 148, 136, 0.45) !important; background: rgba(21, 28, 34, 0.9) !important; } html[data-theme="dark"] .municipal-header .btn-outline-light:hover { background: var(--municipal-green) !important; border-color: var(--municipal-green) !important; color: #fff !important; } html[data-theme="dark"] .municipal-header .user-avatar { background: linear-gradient(135deg, rgba(13, 148, 136, 0.35), rgba(13, 148, 136, 0.15)); border-color: rgba(94, 234, 212, 0.45); color: #99f6e4; } html[data-theme="dark"] .municipal-nav { background: linear-gradient(180deg, #151c22 0%, #121820 100%); box-shadow: 0 1px 0 var(--municipal-border), 0 6px 20px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .municipal-nav .nav-link { color: var(--ui-text); } html[data-theme="dark"] .municipal-nav .nav-link:hover { color: #99f6e4; background-color: rgba(13, 148, 136, 0.15); } html[data-theme="dark"] .municipal-nav .nav-link.active { color: #5eead4; background-color: rgba(13, 148, 136, 0.22); } html[data-theme="dark"] .municipal-nav .navbar-toggler { border-color: var(--municipal-border); } html[data-theme="dark"] .municipal-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232, 240, 242, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* SweetAlert2 (clases municipales) */ html[data-theme="dark"] .swal2-popup.municipal-swal-popup, html[data-theme="dark"] .municipal-swal-popup { background: #151c22 !important; border: 1px solid var(--municipal-border) !important; } html[data-theme="dark"] .municipal-swal-title { color: var(--ui-heading) !important; } html[data-theme="dark"] .municipal-swal-text, html[data-theme="dark"] .swal2-html-container.municipal-swal-text { color: var(--ui-text) !important; } html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(13, 148, 136, 0.35) !important; } html[data-theme="dark"] .swal2-popup.municipal-swal-toast { background: #151c22 !important; border: 1px solid var(--municipal-border) !important; } html[data-theme="dark"] .municipal-toast-inner .municipal-toast-title { color: var(--ui-heading) !important; } html[data-theme="dark"] .municipal-toast-inner .municipal-toast-msg { color: var(--ui-text) !important; } html[data-theme="dark"] .municipal-swal-cancel.swal2-cancel { background: #1e293b !important; color: var(--ui-text) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .municipal-swal-cancel.swal2-cancel:hover { background: #273549 !important; color: var(--ui-heading) !important; } /* —— admin.css —— */ html[data-theme="dark"] .panel-header, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .section-card, html[data-theme="dark"] .users-management .section-card, html[data-theme="dark"] .realtime-section, html[data-theme="dark"] .admin-actions, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-close, html[data-theme="dark"] .municipal-table, html[data-theme="dark"] .search-input-wrapper, html[data-theme="dark"] .specialization-item, html[data-theme="dark"] .specialization-item:hover { background: var(--municipal-white) !important; color: var(--ui-text); } html[data-theme="dark"] .panel-title, html[data-theme="dark"] .section-title h3, html[data-theme="dark"] .modal-title, html[data-theme="dark"] .admin-name { color: var(--ui-heading); } html[data-theme="dark"] .panel-description, html[data-theme="dark"] .stat-label, html[data-theme="dark"] .stat-change { color: var(--municipal-gray); } html[data-theme="dark"] .admin-status-card { background: var(--municipal-light-gray); border-color: var(--municipal-border); } html[data-theme="dark"] .section-header { background: var(--municipal-light-gray) !important; border-bottom-color: var(--municipal-border) !important; } html[data-theme="dark"] .btn-municipal.secondary { background: var(--municipal-light-gray) !important; color: var(--ui-heading) !important; } html[data-theme="dark"] .btn-municipal.secondary:hover { background: #263240 !important; border-color: var(--municipal-gray-light) !important; } html[data-theme="dark"] .municipal-table thead th { background: var(--municipal-light-gray); color: var(--municipal-gray); } html[data-theme="dark"] .municipal-table tbody td { color: var(--ui-text); border-color: var(--municipal-border); } html[data-theme="dark"] .search-input, html[data-theme="dark"] .form-input, html[data-theme="dark"] .form-select { background: #0f161c !important; color: var(--ui-text) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .action-btn.edit:hover { background: rgba(59, 130, 246, 0.2) !important; border-color: #3b82f6 !important; color: #93c5fd !important; } html[data-theme="dark"] .rt-icon.blue { background: rgba(59, 130, 246, 0.22); color: #93c5fd; } html[data-theme="dark"] .rt-icon.green { background: rgba(13, 148, 136, 0.2); color: #5eead4; } html[data-theme="dark"] .rt-icon.yellow { background: rgba(234, 179, 8, 0.18); color: #fde047; } html[data-theme="dark"] .rt-icon.indigo { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; } html[data-theme="dark"] .rt-icon.teal { background: rgba(13, 148, 136, 0.18); color: #5eead4; } html[data-theme="dark"] .rt-icon.purple { background: rgba(124, 58, 237, 0.2); color: #d8b4fe; } html[data-theme="dark"] .rt-label { color: var(--municipal-gray); } html[data-theme="dark"] .rt-value { color: var(--ui-heading); } /* —— agent.css —— */ html[data-theme="dark"] .agent-container::before { background: radial-gradient(800px 500px at 0% 0%, rgba(13, 148, 136, 0.12), transparent 55%), radial-gradient(600px 400px at 100% 80%, rgba(13, 148, 136, 0.08), transparent 50%) !important; } html[data-theme="dark"] .agent-container .panel-header { background: linear-gradient(135deg, #1a2229 0%, #151c22 55%, #121a20 100%) !important; color: var(--ui-heading) !important; border-color: rgba(13, 148, 136, 0.35) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .agent-container .panel-title { color: var(--ui-heading) !important; } html[data-theme="dark"] .agent-container .panel-description { color: var(--ui-text) !important; } html[data-theme="dark"] .agent-container .agent-status-card { background: var(--municipal-white) !important; border-color: var(--municipal-border) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .agent-container .agent-name, html[data-theme="dark"] .agent-container .status-text { color: var(--ui-text) !important; } html[data-theme="dark"] .agent-container .btn-ticket-lookup { background: var(--municipal-light-gray) !important; color: var(--ui-heading) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .agent-container .section-card { background: rgba(21, 28, 34, 0.96) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .agent-container .section-header { background: linear-gradient(180deg, #1e2935 0%, #151c22 100%) !important; border-bottom-color: var(--municipal-border) !important; } html[data-theme="dark"] .agent-container .section-title h3 { color: var(--ui-heading) !important; } html[data-theme="dark"] .agent-container .chat-body, html[data-theme="dark"] .agent-container .chat-section { background: var(--municipal-white) !important; } html[data-theme="dark"] .agent-container .messages-area { background: radial-gradient(700px 400px at 0% 0%, rgba(13, 148, 136, 0.1), transparent 50%), linear-gradient(180deg, #151c22 0%, #121820 100%) !important; } html[data-theme="dark"] .agent-container .message-container.agent .message-bubble { background: var(--municipal-light-gray) !important; color: var(--ui-text) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .agent-container .message-container.user .message-bubble { background: rgba(13, 148, 136, 0.28) !important; color: var(--ui-heading) !important; } html[data-theme="dark"] .agent-container .btn-action { background: var(--municipal-white) !important; color: var(--ui-heading) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .agent-container .btn-action.success:hover { background: rgba(13, 148, 136, 0.15) !important; } html[data-theme="dark"] .agent-container .btn-action.danger:hover { background: rgba(197, 48, 48, 0.12) !important; } html[data-theme="dark"] .agent-container .message-input-area { background: var(--municipal-light-gray) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .agent-container .message-input { background: #0f161c !important; color: var(--ui-text) !important; } html[data-theme="dark"] .agent-container .file-item { background: var(--municipal-white) !important; } html[data-theme="dark"] .agent-container .file-item:hover { background: rgba(13, 148, 136, 0.12) !important; } html[data-theme="dark"] .agent-container .system-message-bubble { background: linear-gradient(135deg, #1e2935, #151c22) !important; } html[data-theme="dark"] .agent-container .user-name { color: var(--ui-heading) !important; } html[data-theme="dark"] .agent-container .welcome-header h4 { color: var(--ui-heading) !important; } html[data-theme="dark"] .ticket-lookup-dialog { background: var(--municipal-white) !important; color: var(--ui-text) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .ticket-lookup-input { background: #0f161c !important; color: var(--ui-text) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .ticket-msg { background: var(--municipal-light-gray) !important; border-color: var(--municipal-border) !important; } /* —— dispatcher.css + dispatcher-view.css —— */ html[data-theme="dark"] .dispatcher-container::before { opacity: 0.5; } html[data-theme="dark"] .dispatcher-container .panel-header { background: linear-gradient(135deg, #1c1814 0%, #151c1a 100%) !important; color: var(--ui-heading) !important; border-color: rgba(212, 165, 116, 0.25) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .dispatcher-container .panel-title { color: var(--ui-heading) !important; } html[data-theme="dark"] .dispatcher-container .panel-description { color: var(--ui-text) !important; } html[data-theme="dark"] .dispatcher-container .agent-status-card, html[data-theme="dark"] .dispatcher-container .section-card, html[data-theme="dark"] .dispatcher-container .citizen-card, html[data-theme="dark"] .dispatcher-container .section-content { background: var(--municipal-white) !important; color: var(--ui-text); border-color: var(--municipal-border) !important; } html[data-theme="dark"] .dispatcher-container .section-header { background: var(--municipal-light-gray) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .dispatcher-container .citizen-details h5, html[data-theme="dark"] .dispatcher-container .section-title { color: var(--ui-heading) !important; } html[data-theme="dark"] .dispatcher-container .empty-state h4, html[data-theme="dark"] .dispatcher-container .empty-state p { color: var(--ui-text) !important; } /* whatsapp-admin si se usa el mismo layout */ html[data-theme="dark"] .whatsapp-admin .card, html[data-theme="dark"] .wa-settings-card { background: var(--municipal-white); color: var(--ui-text); } /* Bootstrap pagination */ html[data-theme="dark"] .page-link { background: var(--municipal-white); color: var(--ui-text); border-color: var(--municipal-border); } html[data-theme="dark"] .page-link:hover { background: var(--municipal-light-gray); color: var(--ui-heading); } /* Cola en barra de navegación */ html[data-theme="dark"] .municipal-nav .nav-queue-label { color: #fcd34d; } html[data-theme="dark"] .municipal-nav .nav-queue-badge-inner { color: var(--ui-text); } html[data-theme="dark"] .municipal-nav .nav-queue-count { color: #1c1917; border-color: rgba(251, 191, 36, 0.45); } html[data-theme="dark"] .page-item.active .page-link { background: var(--municipal-green); border-color: var(--municipal-green); color: #fff; } /* Badges secundarios */ html[data-theme="dark"] .badge.bg-light { background: var(--municipal-light-gray) !important; color: var(--ui-heading) !important; } /* —— Página de inicio (home.css; mismo layout que paneles) —— */ html[data-theme="dark"] .welcome-section::before { background: radial-gradient(1000px 500px at 0% 0%, rgba(20, 184, 166, 0.14), transparent 55%), radial-gradient(800px 400px at 100% 30%, rgba(224, 122, 95, 0.08), transparent 50%), linear-gradient(180deg, #121820 0%, #0f1419 45%, #0c1014 100%) !important; } html[data-theme="dark"] .welcome-section::after { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(13, 148, 136, 0.08) 0%, transparent 45%) !important; } html[data-theme="dark"] .welcome-title { color: var(--ui-heading) !important; } html[data-theme="dark"] .welcome-title .highlight { color: #5eead4 !important; } html[data-theme="dark"] .welcome-description { color: var(--ui-text) !important; } html[data-theme="dark"] .welcome-badge { background: rgba(15, 22, 28, 0.75) !important; color: var(--ui-text) !important; border-color: rgba(13, 148, 136, 0.35) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .welcome-badge i { color: #2dd4bf !important; } html[data-theme="dark"] .stat-item { background: rgba(15, 22, 28, 0.65) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .stat-label { color: var(--ui-text) !important; } html[data-theme="dark"] .welcome-section .chat-window { background: rgba(15, 22, 28, 0.92) !important; border-color: var(--municipal-border) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 20px 40px -12px rgba(0, 0, 0, 0.45) !important; } html[data-theme="dark"] .welcome-section .chat-header { background: linear-gradient(135deg, #0f2922 0%, #134e4a 50%, #115e59 100%) !important; color: #ccfbf1 !important; border-bottom-color: rgba(13, 148, 136, 0.25) !important; } html[data-theme="dark"] .chat-messages { background: linear-gradient(180deg, #121820 0%, #0f161c 100%) !important; } html[data-theme="dark"] .welcome-section .message-content { background: var(--municipal-white) !important; color: var(--ui-text) !important; border-color: var(--municipal-border) !important; } html[data-theme="dark"] .user-message .message-content { background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important; color: #fff !important; }