/* ============================================================================ RIS / Oil — theme.css Capa de tema para Bootstrap 5.3 (archivos compilados, sin recompilar Sass). Funciona sobreescribiendo las CSS variables nativas de Bootstrap (--bs-*) a nivel global y a nivel de componente, porque al usar bootstrap.min.css compilado, recolorear .btn-primary requiere tocar sus variables de componente (--bs-btn-bg, etc.), no solo --bs-primary. Cargar SIEMPRE DESPUÉS de bootstrap.min.css. Modo oscuro: nativo de BS 5.3 → . ========================================================================== */ /* ---- 1. Fuentes -------------------------------------------------------- */ /* Fuentes servidas desde google-fonts.css (archivos locales en css/fonts/google/). Sin dependencia externa de Google Fonts. */ /* ============================================================================ 2. TOKENS DE MARCA (light) ========================================================================== */ :root { /* — Marca (teal del producto actual) — */ --app-primary: #0e7c7b; --app-primary-600: #0a5e5e; --app-primary-700: #084848; --app-primary-100: #d6ecec; --app-primary-50: #ecf6f6; --app-primary-rgb: 14, 124, 123; /* — Tipografía — */ --app-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --app-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* — Radios / sombras (consumidos por los overrides de abajo) — */ --app-radius-sm: 6px; --app-radius: 8px; --app-radius-lg: 14px; --app-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --app-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04); --app-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06); /* ---- Override de variables NATIVAS de Bootstrap (global) ---- */ --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-link-color: var(--app-primary); --bs-link-color-rgb: var(--app-primary-rgb); --bs-link-hover-color: var(--app-primary-600); --bs-body-font-family: var(--app-font); --bs-body-color: #0f172a; --bs-body-color-rgb: 15, 23, 42; --bs-secondary-color: #475569; --bs-tertiary-color: #94a3b8; --bs-body-bg: #f7f8fa; --bs-border-color: #e5e7eb; --bs-border-color-translucent: rgba(15, 23, 42, .1); --bs-border-radius: var(--app-radius); --bs-border-radius-sm: var(--app-radius-sm); --bs-border-radius-lg: var(--app-radius-lg); --bs-emphasis-color: #0f172a; --bs-secondary-bg: #f1f3f6; --bs-tertiary-bg: #f7f8fa; /* Foco con el color de marca */ --bs-focus-ring-color: rgba(var(--app-primary-rgb), .25); } /* ============================================================================ 3. MODO OSCURO (nativo BS 5.3 → data-bs-theme="dark") ========================================================================== */ [data-bs-theme="dark"] { --app-primary: #2dd4bf; --app-primary-600: #5eead4; --app-primary-700: #99f6e4; --app-primary-100: #134e4a; --app-primary-50: #0d3937; --app-primary-rgb: 45, 212, 191; --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-link-color: var(--app-primary); --bs-link-hover-color: var(--app-primary-600); --bs-body-color: #f1f5f9; --bs-body-color-rgb: 241, 245, 249; --bs-secondary-color: #cbd5e1; --bs-tertiary-color: #64748b; --bs-body-bg: #0b1118; --bs-border-color: #232b36; --bs-emphasis-color: #f1f5f9; --bs-secondary-bg: #141a23; --bs-tertiary-bg: #1c232d; --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --app-shadow-md: 0 4px 12px rgba(0, 0, 0, .5); --app-shadow-lg: 0 12px 32px rgba(0, 0, 0, .6); } /* Superficie de "tarjeta/panel" en dark */ [data-bs-theme="dark"] { --bs-card-bg: #141a23; --bs-card-border-color: #232b36; } /* ============================================================================ 4. BASE ========================================================================== */ body { font-family: var(--app-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } .text-mono, .font-mono { font-family: var(--app-mono); } h1, .h1, h2, .h2, h3, .h3 { letter-spacing: -0.02em; font-weight: 700; } /* ============================================================================ 5. BOTONES ========================================================================== */ .btn { --bs-btn-border-radius: var(--app-radius); --bs-btn-font-weight: 600; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .875rem; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; } .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-600); --bs-btn-hover-border-color: var(--app-primary-600); --bs-btn-active-bg: var(--app-primary-700); --bs-btn-active-border-color: var(--app-primary-700); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } [data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0b1118; --bs-btn-hover-color: #0b1118; --bs-btn-active-color: #0b1118; } .btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-active-bg: var(--app-primary-600); --bs-btn-active-border-color: var(--app-primary-600); } /* btn-secondary en BS5 es gris oscuro (#6c757d) — lo reemplazamos por el equivalente al btn-default de BS3: superficie clara con borde sutil */ .btn-secondary { --bs-btn-bg: var(--bs-secondary-bg); --bs-btn-border-color: var(--bs-border-color); --bs-btn-color: var(--bs-body-color); --bs-btn-hover-bg: #e2e6ea; --bs-btn-hover-border-color: #ced4da; --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-active-bg: #d3d9e0; --bs-btn-active-border-color: #c4ccd4; --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-disabled-bg: var(--bs-secondary-bg); --bs-btn-disabled-border-color: var(--bs-border-color); --bs-btn-disabled-color: var(--bs-tertiary-color); --bs-btn-focus-shadow-rgb: var(--bs-secondary-color-rgb, 100, 116, 139); } [data-bs-theme="dark"] .btn-secondary { --bs-btn-bg: #1e2738; --bs-btn-border-color: #2d3748; --bs-btn-color: var(--bs-secondary-color); --bs-btn-hover-bg: #253047; --bs-btn-hover-border-color: #374151; --bs-btn-hover-color: var(--bs-body-color); --bs-btn-active-bg: #2d3a55; --bs-btn-active-border-color: #3d4f6b; --bs-btn-active-color: var(--bs-body-color); --bs-btn-disabled-bg: #1e2738; --bs-btn-disabled-color: var(--bs-tertiary-color); } .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-active-bg: #e2e6ea; } .btn-light { --bs-btn-bg: var(--bs-body-bg); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-color: var(--bs-body-color); } /* ============================================================================ 6. CARDS (reemplazan a los .panel de BS3) ========================================================================== */ .card { --bs-card-border-color: var(--bs-border-color); --bs-card-border-radius: var(--app-radius-lg); --bs-card-inner-border-radius: calc(var(--app-radius-lg) - 1px); --bs-card-cap-bg: transparent; box-shadow: var(--app-shadow-sm); } .card-header { font-weight: 700; border-bottom-color: var(--bs-border-color); } /* ============================================================================ 7. FORMULARIOS ========================================================================== */ .form-control, .form-select { --bs-border-radius: var(--app-radius); border-color: #cbd5e1; padding: .5rem .75rem; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { border-color: #334155; } .form-control:focus, .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .18); } .form-label { font-weight: 600; font-size: .8125rem; color: var(--bs-secondary-color); margin-bottom: .375rem; } .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); } .input-group-text { background: var(--bs-secondary-bg); border-color: #cbd5e1; } /* ============================================================================ 8. NAVBAR / NAV ========================================================================== */ .navbar { --bs-navbar-padding-y: .5rem; background: var(--bs-tertiary-bg, #fff); border-bottom: 1px solid var(--bs-border-color); box-shadow: var(--app-shadow-sm); } [data-bs-theme="light"] .navbar, :root .navbar { background: #fff; } .nav-link { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--app-primary); border-radius: var(--app-radius); font-weight: 500; } .nav-link.active, .nav-pills .nav-link.active { color: var(--app-primary) !important; background: var(--app-primary-50); font-weight: 700; } /* ============================================================================ 9. BADGES / PILLS de estado Cubrimos tanto .text-bg-* (BS5 nativo) como .bg-* (migración desde BS3). El fondo es pastel con texto legible para evitar bloques de color sólido que saturan visualmente las tablas. ========================================================================== */ .badge { font-weight: 600; border-radius: 999px; padding: .28em .65em; font-size: .75em; letter-spacing: .03em; } /* — Light mode — */ .badge.text-bg-success, .badge.bg-success { background: #dcfce7 !important; color: #15803d !important; border: 1px solid rgba(22, 163, 74, .2); } .badge.text-bg-warning, .badge.bg-warning { background: #fef3c7 !important; color: #a16207 !important; border: 1px solid rgba(202, 138, 4, .2); } .badge.text-bg-danger, .badge.bg-danger { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid rgba(220, 38, 38, .2); } .badge.text-bg-info, .badge.bg-info { background: #e0f2fe !important; color: #0369a1 !important; border: 1px solid rgba(14, 165, 233, .2); } .badge.text-bg-primary, .badge.bg-primary { background: rgba(var(--app-primary-rgb), .12) !important; color: var(--app-primary) !important; border: 1px solid rgba(var(--app-primary-rgb), .25); } .badge.text-bg-secondary, .badge.bg-secondary { background: var(--bs-secondary-bg) !important; color: var(--bs-secondary-color) !important; border: 1px solid var(--bs-border-color); } .badge.text-bg-dark, .badge.bg-dark { background: #1e293b !important; color: #f1f5f9 !important; border: 1px solid #334155; } .badge.text-bg-light, .badge.bg-light { background: #f8fafc !important; color: #475569 !important; border: 1px solid #e2e8f0; } /* — Dark mode — */ [data-bs-theme="dark"] .badge.text-bg-success, [data-bs-theme="dark"] .badge.bg-success { background: rgba(74, 222, 128, .15) !important; color: #4ade80 !important; border-color: rgba(74, 222, 128, .25); } [data-bs-theme="dark"] .badge.text-bg-warning, [data-bs-theme="dark"] .badge.bg-warning { background: rgba(250, 204, 21, .15) !important; color: #facc15 !important; border-color: rgba(250, 204, 21, .25); } [data-bs-theme="dark"] .badge.text-bg-danger, [data-bs-theme="dark"] .badge.bg-danger { background: rgba(248, 113, 113, .15) !important; color: #f87171 !important; border-color: rgba(248, 113, 113, .25); } [data-bs-theme="dark"] .badge.text-bg-info, [data-bs-theme="dark"] .badge.bg-info { background: rgba(56, 189, 248, .15) !important; color: #38bdf8 !important; border-color: rgba(56, 189, 248, .25); } [data-bs-theme="dark"] .badge.text-bg-primary, [data-bs-theme="dark"] .badge.bg-primary { background: rgba(var(--app-primary-rgb), .18) !important; color: var(--app-primary) !important; border-color: rgba(var(--app-primary-rgb), .3); } [data-bs-theme="dark"] .badge.text-bg-secondary, [data-bs-theme="dark"] .badge.bg-secondary { background: var(--bs-secondary-bg) !important; color: var(--bs-secondary-color) !important; border-color: var(--bs-border-color); } [data-bs-theme="dark"] .badge.text-bg-dark, [data-bs-theme="dark"] .badge.bg-dark { background: #0b1118 !important; color: #cbd5e1 !important; border-color: #232b36; } /* ============================================================================ 10. TABLAS + DataTables 2.x ========================================================================== */ .table { --bs-table-border-color: var(--bs-border-color); vertical-align: middle; } .table > thead { --bs-table-bg: var(--bs-secondary-bg); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; color: var(--bs-secondary-color); } .table > tbody > tr:hover > * { --bs-table-bg-state: var(--bs-tertiary-bg); } /* DataTables 2.x — usar SIEMPRE la integración dataTables.bootstrap5. Estos ajustes solo afinan lo visual para que matchee el tema. */ .dt-container .dt-search input, .dt-container .dt-length select { border-radius: var(--app-radius); border-color: #cbd5e1; } .dt-container .dt-paging .page-link { border-radius: var(--app-radius) !important; } .dt-container .dt-paging .active > .page-link { background: var(--app-primary); border-color: var(--app-primary); } table.dataTable > thead .dt-orderable-asc span.dt-column-order::before, table.dataTable > thead .dt-orderable-desc span.dt-column-order::after { opacity: .4; } /* ============================================================================ 11. MODALES / OFFCANVAS / DROPDOWN / TOOLTIP ========================================================================== */ .modal-content { border: none; border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-lg); } .modal-header, .modal-footer { border-color: var(--bs-border-color); } .offcanvas { border-color: var(--bs-border-color); } .dropdown-menu { --bs-dropdown-border-color: var(--bs-border-color); --bs-dropdown-border-radius: var(--app-radius); --bs-dropdown-link-active-bg: var(--app-primary-50); --bs-dropdown-link-active-color: var(--app-primary); box-shadow: var(--app-shadow-md); } .tooltip { --bs-tooltip-bg: #0f172a; --bs-tooltip-border-radius: var(--app-radius-sm); font-weight: 500; } /* ============================================================================ 12. ICONOS (Material Symbols ya presente en el proyecto) ========================================================================== */ .material-symbols-outlined, .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; line-height: 1; font-size: 1.25rem; } .icon-sm { font-size: 1rem !important; } .icon-lg { font-size: 1.5rem !important; } /* ============================================================================ 13. TOGGLE DÍA / NOCHE ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; width: 52px; height: 28px; border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #fde68a); position: relative; cursor: pointer; padding: 3px; border: 1px solid rgba(0, 0, 0, .05); transition: background .25s; flex: 0 0 auto; } .theme-toggle__knob { width: 22px; height: 22px; background: #fff; border-radius: 999px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .25s; display: flex; align-items: center; justify-content: center; font-size: 13px; } [data-bs-theme="dark"] .theme-toggle { background: linear-gradient(90deg, #1e293b, #475569); } [data-bs-theme="dark"] .theme-toggle__knob { transform: translateX(24px); background: #1f2937; } /* ============================================================================ 14. UTILIDADES de apoyo ========================================================================== */ .shadow-app-sm { box-shadow: var(--app-shadow-sm) !important; } .shadow-app-md { box-shadow: var(--app-shadow-md) !important; } .rounded-app { border-radius: var(--app-radius) !important; } .rounded-app-lg{ border-radius: var(--app-radius-lg) !important; } .text-app-primary { color: var(--app-primary) !important; } .bg-app-primary-50 { background: var(--app-primary-50) !important; } .eyebrow { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-tertiary-color); } /* ── Highcharts dark mode ────────────────────────────────────────────── */ [data-bs-theme="dark"] .highcharts-background { fill: var(--bs-body-bg); } [data-bs-theme="dark"] .highcharts-plot-background { fill: var(--bs-body-bg); } [data-bs-theme="dark"] .highcharts-title text, [data-bs-theme="dark"] .highcharts-subtitle text, [data-bs-theme="dark"] .highcharts-axis-labels text, [data-bs-theme="dark"] .highcharts-axis-title text, [data-bs-theme="dark"] .highcharts-legend-item text { fill: var(--bs-body-color); } [data-bs-theme="dark"] .highcharts-grid-line { stroke: var(--bs-border-color); } [data-bs-theme="dark"] .highcharts-tooltip .highcharts-label-box { fill: var(--bs-body-bg); stroke: var(--bs-border-color); } /* ============================================================================ 15. TOAST ALERTAS (showAlert) ========================================================================== */ .toast-alerta { border-radius: var(--app-radius-lg, 0.75rem) !important; box-shadow: var(--app-shadow-md, 0 .5rem 1.5rem rgba(0,0,0,.15)) !important; width: 380px; max-width: calc(100vw - 30px); padding: 0.9rem 1rem; display: flex; align-items: flex-start; gap: 0.6rem; transform: translateX(120%); opacity: 0; transition: transform .35s ease, opacity .35s ease; } .toast-alerta.toast-alerta-show { transform: translateX(0); opacity: 1; } .toast-alerta .toast-alerta-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; } .toast-alerta .toast-alerta-msg { flex: 1 1 auto; word-break: break-word; }