/* ══════════════════════════════════════════════════════════════════════════ DBAgile Theme System · themes.css ───────────────────────────────────────────────────────────────────────── Uso: data-theme="dbagile" | "minimal" | "dark" en y La preferencia se guarda en localStorage con la clave "dbagile_theme". El script de init en base.html aplica el atributo en antes del primer paint para evitar parpadeo (FOUC). ══════════════════════════════════════════════════════════════════════════ */ /* ══ PREVENT FOUC — aplica fondo en html antes de que cargue body ══════════ */ html[data-theme="dark"] { background-color: #0f172a !important; } html[data-theme="minimal"] { background-color: #f9fafb !important; } /* ════════════════════════════════════════════════════════════════════════════ 1 · DBAgile (default) — tokens explícitos ════════════════════════════════════════════════════════════════════════════ */ body, body[data-theme="dbagile"] { /* DS tokens */ --ds-blue: #4e73df; --ds-text: #5a5c69; --ds-muted: #858796; --ds-border: #e3e6f0; --ds-bg: #f0f2f5; --ds-shadow: 0 2px 8px rgba(0,0,0,.07); --ds-shadow-hover: 0 6px 20px rgba(78,115,223,.18); --ds-radius: 10px; /* page tokens */ --page-accent: #4e73df; --page-accent-dark: #224abe; --page-success: #1cc88a; --page-warning: #f6c23e; --page-danger: #e74a3b; --page-card-bg: #fff; --page-text: #2d3748; --page-muted: #858796; --page-body-bg: #f0f2f5; --page-header-bg: linear-gradient(135deg, #4e73df 0%, #224abe 100%); --page-header-text: #fff; } /* ════════════════════════════════════════════════════════════════════════════ 2 · Minimalista — clean, flat, Jira / Notion / Linear style ════════════════════════════════════════════════════════════════════════════ */ body[data-theme="minimal"] { --ds-blue: #6366f1; --ds-text: #374151; --ds-muted: #9ca3af; --ds-border: #e5e7eb; --ds-bg: #f9fafb; --ds-shadow: 0 1px 2px rgba(0,0,0,.04); --ds-shadow-hover: 0 4px 12px rgba(99,102,241,.12); --ds-radius: 8px; --page-accent: #6366f1; --page-accent-dark: #4f46e5; --page-success: #10b981; --page-warning: #f59e0b; --page-danger: #ef4444; --page-card-bg: #fff; --page-text: #111827; --page-muted: #6b7280; --page-body-bg: #f9fafb; --page-header-bg: #fff; --page-header-text: #111827; background-color: #f9fafb !important; } /* ── Minimal: layout & component overrides ──────────────────────────────── */ body[data-theme="minimal"] #content, body[data-theme="minimal"] .container-fluid { background-color: #f9fafb !important; } body[data-theme="minimal"] .inicio-wrap::before { display: none !important; } /* Header — flat, no gradient */ body[data-theme="minimal"] .dashboard-header { background: #fff !important; color: #111827 !important; box-shadow: none !important; border-radius: 8px !important; border: 1.5px solid #e5e7eb !important; border-left: 4px solid #6366f1 !important; } body[data-theme="minimal"] .dashboard-header h5, body[data-theme="minimal"] .dashboard-header > div > h5 { color: #111827 !important; } body[data-theme="minimal"] .dashboard-header p { color: #6b7280 !important; opacity: 1 !important; } body[data-theme="minimal"] .dashboard-header .floaty { animation: none !important; } body[data-theme="minimal"] .dashboard-header .action-btn { background: #6366f1 !important; color: #fff !important; border-color: #6366f1 !important; box-shadow: none !important; } body[data-theme="minimal"] .dashboard-header .action-btn:hover { background: #4f46e5 !important; border-color: #4f46e5 !important; } /* Cards */ body[data-theme="minimal"] .chart-card { border-radius: 8px !important; border: 1.5px solid #e5e7eb !important; box-shadow: none !important; } body[data-theme="minimal"] .kpi-card { border-radius: 8px !important; border: 1px solid #e5e7eb !important; box-shadow: none !important; } body[data-theme="minimal"] .kpi-card:hover { transform: none !important; box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important; } body[data-theme="minimal"] .onboarding-card { background: #f5f3ff !important; color: #4f46e5 !important; border-color: #c7d2fe !important; } body[data-theme="minimal"] .onboarding-card a, body[data-theme="minimal"] .onboarding-card button { color: #4f46e5 !important; } /* Acceso cards */ body[data-theme="minimal"] .acceso-card { border-radius: 8px !important; border: 1.5px solid #e5e7eb !important; box-shadow: none !important; background: #fff !important; animation: minFadeIn .18s ease both !important; } body[data-theme="minimal"] .acceso-card::before { display: none !important; } body[data-theme="minimal"] .acceso-card:hover { transform: none !important; box-shadow: none !important; border-color: #6366f1 !important; background: #fafafa !important; } body[data-theme="minimal"] .acceso-card:hover .acceso-card-ico-wrap { transform: none !important; background: #ede9fe !important; } body[data-theme="minimal"] .acceso-card-ico-wrap { background: #f5f3ff !important; border-radius: 8px !important; } body[data-theme="minimal"] .acceso-new { background: #6366f1 !important; box-shadow: none !important; } body[data-theme="minimal"] .accesos-arrow { background: #fff !important; border-color: #e5e7eb !important; color: #6366f1 !important; box-shadow: none !important; } body[data-theme="minimal"] .accesos-arrow:hover { background: #6366f1 !important; color: #fff !important; } body[data-theme="minimal"] .accesos-dot.active { background: #6366f1 !important; } /* Stats & widgets */ body[data-theme="minimal"] .obj-stat-row { border-color: #e5e7eb !important; } body[data-theme="minimal"] .obj-stat { border-color: #e5e7eb !important; } body[data-theme="minimal"] .obj-mini-bar { background: #f3f4f6 !important; } body[data-theme="minimal"] .obj-row, body[data-theme="minimal"] .tk-row { border-color: #f3f4f6 !important; } body[data-theme="minimal"] .tk-row:hover .tk-row-title { color: #6366f1 !important; } /* Section titles */ body[data-theme="minimal"] .section-title { color: #6b7280 !important; } /* News */ body[data-theme="minimal"] .news-card-wrap { border-radius: 8px !important; border: 1.5px solid #e5e7eb !important; box-shadow: none !important; } body[data-theme="minimal"] .news-card-wrap:hover { border-color: #6366f1 !important; transform: none !important; box-shadow: none !important; } body[data-theme="minimal"] .news-tabs-bar { background: #f5f3ff !important; } body[data-theme="minimal"] .news-tabs-bar .nav-link { color: #6b7280 !important; } body[data-theme="minimal"] .news-tabs-bar .nav-link:hover { background: rgba(99,102,241,.08) !important; color: #6366f1 !important; } body[data-theme="minimal"] .news-tabs-bar .nav-link.active { background: #6366f1 !important; color: #fff !important; box-shadow: none !important; } /* Cumpleaños */ body[data-theme="minimal"] .cumple-pill { border-left-color: #6366f1 !important; box-shadow: none !important; border: 1.5px solid #e5e7eb !important; } body[data-theme="minimal"] .cumple-pill:hover { box-shadow: none !important; border-color: #6366f1 !important; } /* Animations — opacity only, no motion */ body[data-theme="minimal"] .anim-card, body[data-theme="minimal"] .anim-row { animation: minFadeIn .15s ease both !important; } @keyframes minFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Tables (onb-table, sl-table, obj-table) */ body[data-theme="minimal"] .onb-table thead th, body[data-theme="minimal"] .sl-table thead th, body[data-theme="minimal"] .obj-table thead th, body[data-theme="minimal"] .ds-table thead th { border-color: #e5e7eb !important; } body[data-theme="minimal"] .onb-table tbody td, body[data-theme="minimal"] .sl-table tbody td, body[data-theme="minimal"] .obj-table tbody td, body[data-theme="minimal"] .ds-table tbody td { border-color: #f3f4f6 !important; } body[data-theme="minimal"] .onb-table tbody tr:hover td, body[data-theme="minimal"] .sl-table tbody tr:hover td, body[data-theme="minimal"] .obj-table tbody tr:hover td, body[data-theme="minimal"] .ds-table tbody tr:hover td { background: #f5f3ff !important; } /* Action buttons — flat style */ body[data-theme="minimal"] .action-btn-blue { background: #6366f1 !important; border-color: #6366f1 !important; } body[data-theme="minimal"] .action-btn-blue:hover { background: #4f46e5 !important; border-color: #4f46e5 !important; } body[data-theme="minimal"] .action-btn-outline { border-color: #e5e7eb !important; color: #374151 !important; background: #fff !important; } body[data-theme="minimal"] .action-btn-outline:hover { border-color: #6366f1 !important; color: #6366f1 !important; } /* Prog bars */ body[data-theme="minimal"] .prog-wrap { background: #f3f4f6 !important; } body[data-theme="minimal"] .prog-bar-blue { background: #6366f1 !important; } /* ════════════════════════════════════════════════════════════════════════════ 3 · Dark — DBAgile style con superficies oscuras ════════════════════════════════════════════════════════════════════════════ */ body[data-theme="dark"] { --ds-blue: #6394f8; --ds-text: #cbd5e1; --ds-muted: #94a3b8; --ds-border: rgba(255,255,255,.10); --ds-bg: #0f172a; --ds-shadow: 0 2px 8px rgba(0,0,0,.35); --ds-shadow-hover: 0 6px 20px rgba(99,148,248,.22); --ds-radius: 10px; --page-accent: #6394f8; --page-accent-dark: #4e73df; --page-success: #34d399; --page-warning: #fbbf24; --page-danger: #f87171; --page-card-bg: #1e293b; --page-text: #e2e8f0; --page-muted: #94a3b8; --page-body-bg: #0f172a; --page-header-bg: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%); --page-header-text: #fff; /* action-btn-outline variables */ --btn-outline-bg: #1e293b; --btn-outline-bg-hover: #243147; --btn-outline-color: #93c5fd; --btn-outline-border: rgba(99,148,248,.35); background-color: #0f172a !important; } /* ── Dark: layout ────────────────────────────────────────────────────────── */ body[data-theme="dark"] #content, body[data-theme="dark"] #wrapper { background-color: #131b2e !important; } body[data-theme="dark"] .container-fluid { background-color: transparent !important; } /* Topbar */ body[data-theme="dark"] #topbar { background: #1e293b !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 1px 8px rgba(0,0,0,.4) !important; } body[data-theme="dark"] #topbar .text-dark { color: #e2e8f0 !important; } body[data-theme="dark"] #topbar .navbar-nav .nav-link { color: #cbd5e1 !important; } body[data-theme="dark"] #topbar .text-muted, body[data-theme="dark"] #topbar .small { color: #94a3b8 !important; } body[data-theme="dark"] .topbar-divider { border-left-color: rgba(255,255,255,.12) !important; } body[data-theme="dark"] .btn-light { background: #334155 !important; border-color: #334155 !important; color: #e2e8f0 !important; } /* Dashboard header */ body[data-theme="dark"] .dashboard-header { background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important; } /* Cards */ body[data-theme="dark"] .chart-card, body[data-theme="dark"] .kpi-card { background: #1e293b !important; border-color: rgba(255,255,255,.08) !important; color: #e2e8f0 !important; } body[data-theme="dark"] .kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; } body[data-theme="dark"] .kpi-label { color: #94a3b8 !important; } body[data-theme="dark"] .kpi-sub { color: #64748b !important; } /* ── Dark: action buttons ────────────────────────────────────────────────── */ body[data-theme="dark"] .action-btn-outline { background: #1e293b !important; color: #93c5fd !important; border-color: rgba(99,148,248,.35) !important; } body[data-theme="dark"] .action-btn-outline:hover { background: #243147 !important; color: #bfdbfe !important; border-color: rgba(99,148,248,.6) !important; } body[data-theme="dark"] .action-btn-blue { background: #3b6fd4 !important; box-shadow: 0 2px 10px rgba(99,148,248,.35) !important; } body[data-theme="dark"] .action-btn-blue:hover { background: #2d5ab8 !important; box-shadow: 0 4px 16px rgba(99,148,248,.55) !important; } body[data-theme="dark"] .action-btn-red { background: #c0392b !important; box-shadow: 0 2px 10px rgba(220,53,69,.35) !important; } body[data-theme="dark"] .action-btn-red:hover { background: #a93226 !important; box-shadow: 0 4px 16px rgba(220,53,69,.55) !important; } body[data-theme="dark"] .onboarding-card { background: #1e3a5f !important; color: #93c5fd !important; border-color: rgba(147,197,253,.2) !important; } body[data-theme="dark"] .onboarding-card strong { color: #bfdbfe !important; } body[data-theme="dark"] .onboarding-card a { color: #93c5fd !important; } body[data-theme="dark"] .onboarding-card button { color: #93c5fd !important; } /* Acceso cards */ body[data-theme="dark"] .acceso-card { background: #1e293b !important; border-color: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; } body[data-theme="dark"] .acceso-card:hover { border-color: #6394f8 !important; box-shadow: 0 8px 28px rgba(99,148,248,.2) !important; } body[data-theme="dark"] .acceso-card-name { color: #e2e8f0 !important; } body[data-theme="dark"] .acceso-card-sub { color: #94a3b8 !important; } body[data-theme="dark"] .acceso-card-ico-wrap { background: rgba(99,148,248,.12) !important; } body[data-theme="dark"] .acceso-new { background: linear-gradient(135deg, #3b5bdb, #1e3a8a) !important; } body[data-theme="dark"] .accesos-arrow { background: #1e293b !important; border-color: rgba(255,255,255,.1) !important; color: #6394f8 !important; } body[data-theme="dark"] .accesos-arrow:hover { background: #6394f8 !important; color: #fff !important; } body[data-theme="dark"] .accesos-dot.active { background: #6394f8 !important; } /* Stats & widgets */ body[data-theme="dark"] .obj-stat-row { border-color: rgba(255,255,255,.1) !important; } body[data-theme="dark"] .obj-stat { border-color: rgba(255,255,255,.08) !important; } body[data-theme="dark"] .obj-stat-num { color: #e2e8f0; } body[data-theme="dark"] .obj-stat-lbl { color: #94a3b8 !important; } body[data-theme="dark"] .obj-row, body[data-theme="dark"] .tk-row { border-color: rgba(255,255,255,.06) !important; } body[data-theme="dark"] .obj-row-title, body[data-theme="dark"] .tk-row-title { color: #e2e8f0 !important; } body[data-theme="dark"] .obj-mini-bar { background: rgba(255,255,255,.1) !important; } body[data-theme="dark"] .tk-row-ini { color: #94a3b8 !important; } body[data-theme="dark"] .tk-prio-sin { background: rgba(255,255,255,.08) !important; color: #94a3b8 !important; } body[data-theme="dark"] .tk-row:hover .tk-row-title { color: #6394f8 !important; } /* Section titles */ body[data-theme="dark"] .section-title { color: #94a3b8 !important; } /* News */ body[data-theme="dark"] .news-card-wrap { background: #1e293b !important; border-color: rgba(255,255,255,.08) !important; } body[data-theme="dark"] .news-card-wrap:hover { border-color: rgba(255,255,255,.2) !important; box-shadow: 0 6px 20px rgba(0,0,0,.35) !important; } body[data-theme="dark"] .news-headline { color: #e2e8f0 !important; } body[data-theme="dark"] .news-logo-box { background: linear-gradient(180deg, rgba(99,148,248,.06), transparent) !important; } body[data-theme="dark"] .news-logo-box::before { background: #334155 !important; border-color: rgba(255,255,255,.1) !important; } body[data-theme="dark"] .news-tabs-bar { background: rgba(99,148,248,.08) !important; } body[data-theme="dark"] .news-tabs-bar .nav-link { color: #94a3b8 !important; } body[data-theme="dark"] .news-tabs-bar .nav-link:hover { background: rgba(255,255,255,.06) !important; color: #e2e8f0 !important; } body[data-theme="dark"] .news-tabs-bar .nav-link.active { background: #334155 !important; color: #93c5fd !important; box-shadow: none !important; } body[data-theme="dark"] .card.chart-card .p-3 { color: #e2e8f0; } /* Cumpleaños */ body[data-theme="dark"] .cumple-pill { background: #1e293b !important; border-left-color: #fbbf24 !important; color: #e2e8f0 !important; box-shadow: none !important; } body[data-theme="dark"] .cumple-pill:hover { box-shadow: 0 4px 12px rgba(0,0,0,.3) !important; } body[data-theme="dark"] .cumple-pill-name { color: #e2e8f0 !important; } body[data-theme="dark"] .cumple-pill-date { color: #94a3b8 !important; } /* Tables */ body[data-theme="dark"] .onb-table thead th, body[data-theme="dark"] .sl-table thead th, body[data-theme="dark"] .obj-table thead th, body[data-theme="dark"] .ds-table thead th { background: #1e293b !important; color: #cbd5e1 !important; border-color: rgba(255,255,255,.12) !important; } body[data-theme="dark"] .onb-table tbody td, body[data-theme="dark"] .sl-table tbody td, body[data-theme="dark"] .obj-table tbody td, body[data-theme="dark"] .ds-table tbody td { background: #1e293b !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,.06) !important; } body[data-theme="dark"] .onb-table tbody tr:hover td, body[data-theme="dark"] .sl-table tbody tr:hover td, body[data-theme="dark"] .obj-table tbody tr:hover td, body[data-theme="dark"] .ds-table tbody tr:hover td { background: rgba(99,148,248,.06) !important; } /* DataTables scroll wrappers */ body[data-theme="dark"] .dataTables_scrollHead, body[data-theme="dark"] .dataTables_scrollHeadInner, body[data-theme="dark"] .dataTables_scrollHeadInner table, body[data-theme="dark"] .dataTables_scrollBody, body[data-theme="dark"] .dataTables_wrapper { background: #1e293b !important; color: #e2e8f0 !important; } body[data-theme="dark"] .dataTables_wrapper .dataTables_filter, body[data-theme="dark"] .dataTables_wrapper .dataTables_length { color: #94a3b8 !important; } body[data-theme="dark"] .dataTables_wrapper .dataTables_filter input, body[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: #0f172a !important; border-color: rgba(255,255,255,.12) !important; color: #e2e8f0 !important; } /* CRM-specific elements */ body[data-theme="dark"] .crm-search { background: #0f172a !important; border-color: rgba(255,255,255,.12) !important; } body[data-theme="dark"] .crm-search input { color: #e2e8f0 !important; } body[data-theme="dark"] .crm-search i { color: #64748b !important; } body[data-theme="dark"] .crm-input { background: transparent !important; border-bottom-color: rgba(255,255,255,.15) !important; color: #e2e8f0 !important; } body[data-theme="dark"] .crm-input:focus { border-bottom-color: #6394f8 !important; } body[data-theme="dark"] .crm-input[readonly] { color: #64748b !important; } body[data-theme="dark"] .crm-label { color: #64748b !important; } body[data-theme="dark"] .crm-filter-group .action-btn { background: #0f172a !important; color: #94a3b8 !important; border-color: rgba(255,255,255,.1) !important; } body[data-theme="dark"] .info-row { border-color: rgba(255,255,255,.07) !important; } body[data-theme="dark"] .info-lbl { color: #64748b !important; } body[data-theme="dark"] .info-val { color: #e2e8f0 !important; } body[data-theme="dark"] .emp-tab { color: #64748b !important; } body[data-theme="dark"] .emp-tab:hover { color: #93c5fd !important; } body[data-theme="dark"] .emp-tab.active { color: #93c5fd !important; border-bottom-color: #6394f8 !important; background: rgba(99,148,248,.08) !important; } body[data-theme="dark"] .doc-drop-zone { background: #0f172a !important; border-color: rgba(255,255,255,.15) !important; color: #94a3b8 !important; } /* Prog bars */ body[data-theme="dark"] .prog-wrap { background: rgba(255,255,255,.1) !important; } /* modals */ body[data-theme="dark"] .modal-content { background: #1e293b !important; color: #e2e8f0 !important; } body[data-theme="dark"] .modal-footer { background: #152030 !important; border-color: rgba(255,255,255,.08) !important; } body[data-theme="dark"] .modal-body { background: #1e293b !important; color: #cbd5e1 !important; } body[data-theme="dark"] .nomina-input { background: #0f172a !important; border-color: rgba(255,255,255,.12) !important; color: #e2e8f0 !important; } body[data-theme="dark"] .nomina-label { color: #94a3b8 !important; } /* Logout modal — dark */ body[data-theme="dark"] #logoutModal .modal-content { box-shadow: 0 20px 60px rgba(0,0,0,.5) !important; } body[data-theme="dark"] #logoutModal h6 { color: #e2e8f0 !important; } body[data-theme="dark"] #logoutModal p { color: #94a3b8 !important; } body[data-theme="dark"] #logoutModal .modal-footer { border-color: rgba(255,255,255,.06) !important; } body[data-theme="dark"] #logoutModal .btn[data-dismiss="modal"] { background: #334155 !important; color: #cbd5e1 !important; } /* Logout modal — minimal */ body[data-theme="minimal"] #logoutModal .modal-content { border: 1.5px solid #e5e7eb !important; box-shadow: 0 8px 32px rgba(0,0,0,.1) !important; } /* DataTables pagination dark */ body[data-theme="dark"] .dataTables_wrapper .dataTables_info { color: #94a3b8 !important; } body[data-theme="dark"] .dataTables_wrapper .pagination .page-item .page-link { background: #1e293b !important; border-color: rgba(255,255,255,.08) !important; color: #94a3b8 !important; } body[data-theme="dark"] .dataTables_wrapper .pagination .page-item.active .page-link { background: #6394f8 !important; border-color: #6394f8 !important; color: #fff !important; } /* ════════════════════════════════════════════════════════════════════════════ Theme Switcher Modal — card previews ════════════════════════════════════════════════════════════════════════════ */ #themePickerModal .modal-content { border-radius: 16px !important; border: none !important; box-shadow: 0 20px 60px rgba(0,0,0,.18) !important; } body[data-theme="dark"] #themePickerModal .modal-content { background: #1e293b !important; } body[data-theme="dark"] #themePickerModal .modal-body p { color: #94a3b8 !important; } .theme-opts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .theme-opt { cursor: pointer; border-radius: 10px; border: 2.5px solid transparent; padding: 8px; transition: border-color .18s, box-shadow .18s; text-align: center; position: relative; user-select: none; } .theme-opt:hover { border-color: #c7d2fe; box-shadow: 0 2px 12px rgba(99,102,241,.12); } .theme-opt.is-active { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); } .theme-opt.is-active .theme-opt-name { color: #6366f1; font-weight: 800; } .theme-opt-check { display: none; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; background: #6366f1; border-radius: 50%; align-items: center; justify-content: center; font-size: .65rem; color: #fff; } .theme-opt.is-active .theme-opt-check { display: flex; } .theme-opt-preview { display: flex; border-radius: 8px; overflow: hidden; margin-bottom: 10px; border: 1px solid #e5e7eb; height: 90px; } .theme-opt-name { font-size: .8rem; font-weight: 700; color: #374151; margin-bottom: 2px; } .theme-opt-desc { font-size: .65rem; color: #9ca3af; line-height: 1.4; } /* Dark card styles in theme modal */ body[data-theme="dark"] .theme-opt-name { color: #e2e8f0; } body[data-theme="dark"] .theme-opt-desc { color: #64748b; } body[data-theme="dark"] .theme-opt:hover { border-color: #334155; } body[data-theme="dark"] .theme-opt-preview { border-color: rgba(255,255,255,.1); } /* Responsive */ @media (max-width: 480px) { .theme-opts-grid { grid-template-columns: 1fr !important; } .theme-opt-preview { height: 60px !important; } } /* ── Color swatches ───────────────────────────────────────────────────── */ .color-swatch-row { display: flex; gap: 10px; flex-wrap: wrap; } .color-swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; flex-shrink: 0; position: relative; transition: transform .15s, box-shadow .15s, border-color .15s; outline: none; padding: 0; } .color-swatch:hover { transform: scale(1.18); box-shadow: 0 4px 14px rgba(0,0,0,.22); } .color-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 3px var(--ds-blue, #4e73df), 0 3px 10px rgba(0,0,0,.18); transform: scale(1.1); } .color-swatch.is-active::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); } .color-swatch-label { font-size: .62rem; font-weight: 700; text-align: center; color: #9ca3af; margin-top: 4px; letter-spacing: .03em; } .color-swatch-wrap { display: flex; flex-direction: column; align-items: center; } .color-section-title { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #9ca3af; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; } .color-section-title i { color: var(--ds-blue, #4e73df); } .color-section-divider { height: 1px; background: #e5e7eb; margin: 18px 0 16px; } body[data-theme="dark"] .color-section-divider { background: rgba(255,255,255,.08); } body[data-theme="dark"] .color-section-title { color: #475569; } body[data-theme="dark"] .color-swatch-label { color: #475569; } body[data-theme="dark"] .color-swatch.is-active { border-color: rgba(255,255,255,.7); } /* ══ Accent color overrides ══════════════════════════════════════════════════ Colocadas al FINAL para que ganen por orden de cascada sobre las reglas de tema (body[data-theme="X"]) que tienen la misma especificidad 0,1,1. body[data-color] solo existe cuando el usuario eligió un color != azul. ══════════════════════════════════════════════════════════════════════════ */ body[data-color="indigo"] { --ds-blue:#6366f1; --ds-blue-2:#4f46e5; --page-accent:#6366f1; --page-accent-dark:#4f46e5; } body[data-color="pink"] { --ds-blue:#ec4899; --ds-blue-2:#db2777; --page-accent:#ec4899; --page-accent-dark:#db2777; } body[data-color="purple"] { --ds-blue:#8b5cf6; --ds-blue-2:#7c3aed; --page-accent:#8b5cf6; --page-accent-dark:#7c3aed; } body[data-color="teal"] { --ds-blue:#14b8a6; --ds-blue-2:#0d9488; --page-accent:#14b8a6; --page-accent-dark:#0d9488; } body[data-color="green"] { --ds-blue:#10b981; --ds-blue-2:#059669; --page-accent:#10b981; --page-accent-dark:#059669; } body[data-color="orange"] { --ds-blue:#f59e0b; --ds-blue-2:#d97706; --page-accent:#f59e0b; --page-accent-dark:#d97706; } body[data-color="red"] { --ds-blue:#ef4444; --ds-blue-2:#dc2626; --page-accent:#ef4444; --page-accent-dark:#dc2626; } body[data-color="gray-l"] { --ds-blue:#94a3b8; --ds-blue-2:#64748b; --page-accent:#94a3b8; --page-accent-dark:#64748b; } body[data-color="gray-d"] { --ds-blue:#475569; --ds-blue-2:#334155; --page-accent:#475569; --page-accent-dark:#334155; } /* ── DBAgile (default) + Dark: elementos que usan colores hardcodeados ───── Se activan solo cuando hay data-color (color != azul por defecto). */ /* Dashboard header — todos los temas */ body[data-color] .dashboard-header { background: linear-gradient(135deg, var(--ds-blue) 0%, var(--ds-blue-2) 100%) !important; box-shadow: 0 4px 18px rgba(0,0,0,.15) !important; } /* Modal headers azules */ body[data-color] .modal-header-blue, body[data-color] #themePickerModal .modal-header { background: linear-gradient(135deg, var(--ds-blue) 0%, var(--ds-blue-2) 100%) !important; } /* Botones primarios — DBAgile mode (ya usa var(--ds-blue) pero por si acaso) */ body[data-color] .action-btn-blue { background: var(--ds-blue) !important; } /* Dark mode: overrides hardcodeados con !important */ body[data-theme="dark"][data-color] .dashboard-header { background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important; } body[data-theme="dark"][data-color] .action-btn-blue { background: var(--ds-blue) !important; box-shadow: 0 2px 10px rgba(0,0,0,.4) !important; } body[data-theme="dark"][data-color] .action-btn-blue:hover { background: var(--ds-blue-2) !important; box-shadow: 0 4px 16px rgba(0,0,0,.5) !important; } /* Minimal mode: overrides hardcodeados con !important */ body[data-theme="minimal"][data-color] .dashboard-header { background: #fff !important; border-left-color: var(--ds-blue) !important; } body[data-theme="minimal"][data-color] .action-btn-blue { background: var(--ds-blue) !important; border-color: var(--ds-blue) !important; } body[data-theme="minimal"][data-color] .action-btn-blue:hover { background: var(--ds-blue-2) !important; border-color: var(--ds-blue-2) !important; }