/* ============================================================ Sistema de temas FESv — dark/light + color de acento ----------------------------------------------------------- Se controla vía dos atributos en : data-bs-theme="light" | "dark" (Bootstrap 5.3 nativo) data-fesv-accent="blue|teal|purple|orange|red|green" Se aplican en fesv-theme.js ANTES del render Blazor para evitar el "flash of unstyled content" al cargar. ============================================================ */ /* ── Paletas de acento ────────────────────────────────────── */ :root, :root[data-fesv-accent="blue"] { --fesv-accent: #0d6efd; --fesv-accent-rgb: 13, 110, 253; --fesv-accent-hover: #0b5ed7; --fesv-accent-fg: #ffffff; } :root[data-fesv-accent="teal"] { --fesv-accent: #14b8a6; --fesv-accent-rgb: 20, 184, 166; --fesv-accent-hover: #0f9488; --fesv-accent-fg: #ffffff; } :root[data-fesv-accent="purple"] { --fesv-accent: #7c3aed; --fesv-accent-rgb: 124, 58, 237; --fesv-accent-hover: #6d28d9; --fesv-accent-fg: #ffffff; } :root[data-fesv-accent="orange"] { --fesv-accent: #ea580c; --fesv-accent-rgb: 234, 88, 12; --fesv-accent-hover: #c2410c; --fesv-accent-fg: #ffffff; } :root[data-fesv-accent="red"] { --fesv-accent: #dc2626; --fesv-accent-rgb: 220, 38, 38; --fesv-accent-hover: #b91c1c; --fesv-accent-fg: #ffffff; } :root[data-fesv-accent="green"] { --fesv-accent: #16a34a; --fesv-accent-rgb: 22, 163, 74; --fesv-accent-hover: #15803d; --fesv-accent-fg: #ffffff; } /* ── Sobrescribir la primary de Bootstrap con el acento ─── */ :root { --bs-primary: var(--fesv-accent); --bs-primary-rgb: var(--fesv-accent-rgb); --bs-link-color: var(--fesv-accent); --bs-link-hover-color: var(--fesv-accent-hover); } /* Botones primarios */ .btn-primary { --bs-btn-bg: var(--fesv-accent); --bs-btn-border-color: var(--fesv-accent); --bs-btn-hover-bg: var(--fesv-accent-hover); --bs-btn-hover-border-color: var(--fesv-accent-hover); --bs-btn-active-bg: var(--fesv-accent-hover); --bs-btn-active-border-color: var(--fesv-accent-hover); --bs-btn-color: var(--fesv-accent-fg); --bs-btn-hover-color: var(--fesv-accent-fg); --bs-btn-active-color: var(--fesv-accent-fg); } .btn-outline-primary { --bs-btn-color: var(--fesv-accent); --bs-btn-border-color: var(--fesv-accent); --bs-btn-hover-bg: var(--fesv-accent); --bs-btn-hover-border-color: var(--fesv-accent); --bs-btn-hover-color: var(--fesv-accent-fg); --bs-btn-active-bg: var(--fesv-accent); --bs-btn-active-border-color: var(--fesv-accent); } .bg-primary { background-color: var(--fesv-accent) !important; color: var(--fesv-accent-fg) !important; } .text-primary { color: var(--fesv-accent) !important; } .border-primary { border-color: var(--fesv-accent) !important; } /* ── Superficies por tema ─────────────────────────────────── */ :root[data-bs-theme="light"] { --fesv-surface-1: #ffffff; --fesv-surface-2: #f8f9fa; --fesv-surface-3: #e9ecef; --fesv-border: #dee2e6; --fesv-text: #212529; --fesv-text-muted:#6c757d; --fesv-shadow: 0 1px 3px rgba(0,0,0,.08); } :root[data-bs-theme="dark"] { --fesv-surface-1: #1e2126; --fesv-surface-2: #16181c; --fesv-surface-3: #2b2f36; --fesv-border: #3a3f47; --fesv-text: #e9ecef; --fesv-text-muted:#a1a7b0; --fesv-shadow: 0 1px 3px rgba(0,0,0,.4); } :root[data-bs-theme="dark"] body { background: var(--fesv-surface-2); color: var(--fesv-text); } :root[data-bs-theme="dark"] .card, :root[data-bs-theme="dark"] .modal-content { background: var(--fesv-surface-1); border-color: var(--fesv-border); color: var(--fesv-text); } :root[data-bs-theme="dark"] .card-header.bg-white, :root[data-bs-theme="dark"] .card-footer.bg-white, :root[data-bs-theme="dark"] .modal-header, :root[data-bs-theme="dark"] .modal-footer { background: var(--fesv-surface-1) !important; border-color: var(--fesv-border); color: var(--fesv-text); } :root[data-bs-theme="dark"] .table { --bs-table-color: var(--fesv-text); } :root[data-bs-theme="dark"] .table > thead.table-light, :root[data-bs-theme="dark"] .table-light, :root[data-bs-theme="dark"] thead.table-light > tr > th { background: var(--fesv-surface-3) !important; color: var(--fesv-text) !important; border-color: var(--fesv-border) !important; } /* Regla legacy REMOVIDA — establecía color: var(--fesv-text) que atenuaba el texto normal al hacer hover. El highlight actual solo aplica background-color y respeta el color natural de cada celda (ver reglas más abajo). */ /* Striped: Bootstrap default usa un blanco translúcido que en dark queda casi blanco. Cambiamos a un negro translúcido para contraste correcto sobre superficies oscuras. */ :root[data-bs-theme="dark"] .table, :root[data-bs-theme="dark"] .table-striped, :root[data-bs-theme="dark"] .table-striped-columns, [data-bs-theme="dark"] .table, [data-bs-theme="dark"] .table-striped, [data-bs-theme="dark"] .table-striped-columns { --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-active-bg: rgba(var(--fesv-accent-rgb), .15); --bs-table-hover-bg: rgba(var(--fesv-accent-rgb), .08); --bs-table-bg: transparent; --bs-table-border-color: var(--fesv-border); /* Todas las *-color van a `inherit` para que las celdas conserven su color natural (texto principal, .text-muted, badges, etc). Antes fijaban --fesv-text (gris claro) y eso atenuaba el texto al hover / active / striped. */ --bs-table-striped-color: inherit; --bs-table-active-color: inherit; --bs-table-hover-color: inherit; --bs-table-color: inherit; --bs-table-color-state: inherit; } /* Foco / hover / active / selected — Bootstrap por default aplica fondos claros que en dark quedan blancos y esconden el texto. Cubrimos todos los selectores conocidos y forzamos color de texto siempre visible. */ /* Highlight de filas en dark. En FESv `data-bs-theme` está sobre `.pos-shell` (wrapper), NO en ``, así que usamos ambos selectores: • `:root[data-bs-theme="dark"] ...` cubre cuando está en . • `[data-bs-theme="dark"] ...` cubre cuando está en un div ancestro (nuestro caso). */ /* Hover / active / selected: tinte muy suave sobre el fondo + texto BLANCO forzado. Antes usábamos --bs-body-color pero el theme del cliente lo resuelve a un color que se camuflaba con el tinte del hover. Usamos blanco directo y aplicamos también a TODOS los elementos anidados (spans, badges, text-muted, code) para asegurar contraste. */ :root[data-bs-theme="dark"] .table-hover > tbody > tr:hover > *, :root[data-bs-theme="dark"] .table-hover > tbody > tr:focus-within > *, :root[data-bs-theme="dark"] .table > tbody > tr.table-active > *, :root[data-bs-theme="dark"] .table > tbody > tr.active > *, :root[data-bs-theme="dark"] .table > tbody > tr.selected > *, [data-bs-theme="dark"] .table-hover > tbody > tr:hover > *, [data-bs-theme="dark"] .table-hover > tbody > tr:focus-within > *, [data-bs-theme="dark"] .table > tbody > tr.table-active > *, [data-bs-theme="dark"] .table > tbody > tr.active > *, [data-bs-theme="dark"] .table > tbody > tr.selected > * { background-color: rgba(var(--fesv-accent-rgb), .06) !important; box-shadow: none !important; outline: none; } /* ── UNIVERSAL: garantía de fondo transparente en tablas sin `.table-hover`. ──── Bootstrap 5.3 puede dejar `--bs-table-bg` con un valor no-transparente cuando el wrapper que tiene `data-bs-theme="dark"` no está en la cadena de ancestros (tabs cargados en portal, iframes, componentes que renderean en otro contexto). Este bloque asegura que sin `.table-hover` explícito, NUNCA se vea la fila en blanco al hover. Independiente del theme. */ .table:not(.table-hover) > tbody > tr, .table:not(.table-hover) > tbody > tr:hover, .table:not(.table-hover) > tbody > tr > *, .table:not(.table-hover) > tbody > tr:hover > * { background-color: transparent !important; --bs-table-bg: transparent !important; --bs-table-bg-state: transparent !important; --bs-table-hover-bg: transparent !important; --bs-table-active-bg: transparent !important; box-shadow: none !important; } /* NO forzamos color de texto en hover — antes usábamos `color: #f8f9fa !important` sobre todos los descendientes, lo que rompía la jerarquía visual: • .text-muted quedaba tan brillante como el texto principal. • En tablas display-only (Desglose económico, resúmenes) la muted se hacía ilegible sobre el tinte rojo del hover. Ahora cada celda mantiene su color natural, y el tinte del fondo es suficiente feedback visual del hover sin destruir la legibilidad. */ /* Utility `.no-row-hover` — aplicá esta clase al wrapper (o directo al ) cuando la tabla tenga inputs / selects en sus celdas y NO quieras que el hover pinte la fila. Neutraliza background, borde, box-shadow y variables de Bootstrap 5.3 para hover / focus / focus-within / .table-active. Uso:
...
o bien: ...
Reglas duplicadas para cubrir el caso donde `.no-row-hover` está en el WRAPPER (div contenedor) o directamente en `.table`. */ .no-row-hover table, .no-row-hover tbody, .no-row-hover tbody tr, .no-row-hover tbody tr:hover, .no-row-hover tbody tr:focus, .no-row-hover tbody tr:focus-within, .no-row-hover tbody tr.table-active, .no-row-hover tbody tr:hover > *, .no-row-hover tbody tr:focus > *, .no-row-hover tbody tr:focus-within > *, .no-row-hover tbody tr.table-active > *, .no-row-hover tbody td, table.no-row-hover, table.no-row-hover tbody tr, table.no-row-hover tbody tr:hover, table.no-row-hover tbody tr:focus-within, table.no-row-hover tbody tr:hover > *, table.no-row-hover tbody tr:focus-within > *, table.no-row-hover tbody td { background: transparent !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; --bs-table-bg: transparent !important; --bs-table-bg-state: transparent !important; --bs-table-hover-bg: transparent !important; --bs-table-active-bg: transparent !important; --bs-table-striped-bg: transparent !important; } /* Ocultamos los bordes horizontales dentro del scope — quedaban como líneas claras que reforzaban visualmente la sensación de "highlight". */ .no-row-hover tbody td, table.no-row-hover tbody td { border-color: transparent !important; } /* ── AUTO-DETECCIÓN: cualquier en cualquier tabla que contenga inputs / selects / textareas se auto-neutraliza el hover / focus-within (evita el "fondo blanco" cuando se pasa el mouse sobre una fila con controles). Usa `:has()` (soportado en Chrome/Edge/Safari/Firefox recientes — degrada gracefully a hover normal en navegadores viejos). */ .table > tbody > tr:has(input, select, textarea, .form-control, .form-select, .form-check-input):hover > *, .table > tbody > tr:has(input, select, textarea, .form-control, .form-select, .form-check-input):focus-within > *, .table > tbody > tr:has(input, select, textarea, .form-control, .form-select, .form-check-input).table-active > * { background: transparent !important; background-color: transparent !important; box-shadow: none !important; --bs-table-bg-state: transparent !important; --bs-table-hover-bg: transparent !important; --bs-table-active-bg: transparent !important; } /* .text-muted anidados: gris claro que se lee contra el tinte del hover. */ :root[data-bs-theme="dark"] .table-hover > tbody > tr:hover .text-muted, [data-bs-theme="dark"] .table-hover > tbody > tr:hover .text-muted { color: #ced4da !important; } /* NEUTRALIZAR el default de Bootstrap 5.3 que hace `.table-hover` inyectar `--bs-table-bg-state: rgba(0,0,0,.075)` (claro) sobre `.table.table-hover` en general. Ese es el culpable del "blanco al hover" cuando el theme está en un wrapper. Bloqueamos la variable en dark así el override anterior toma vía background-color. */ [data-bs-theme="dark"] .table, [data-bs-theme="dark"] .table-hover, [data-bs-theme="dark"] .table-striped { --bs-table-bg: transparent; --bs-table-bg-state: transparent; --bs-table-hover-bg: transparent; --bs-table-active-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-color-state: var(--fesv-text); } /* Anchors dentro de la fila también fuerzan color legible al hover/focus */ :root[data-bs-theme="dark"] .table-hover > tbody > tr:hover a, :root[data-bs-theme="dark"] .table-hover > tbody > tr:focus-within a, :root[data-bs-theme="dark"] .table > tbody > tr.table-active a, :root[data-bs-theme="dark"] .table > tbody > tr.active a, :root[data-bs-theme="dark"] .table > tbody > tr.selected a { color: var(--fesv-accent) !important; } :root[data-bs-theme="dark"] .bg-light, :root[data-bs-theme="dark"] .bg-body-tertiary { background: var(--fesv-surface-3) !important; color: var(--fesv-text); } /* Timelines (compras / documentos / activo fijo movimientos) */ :root[data-bs-theme="dark"] .fesv-cmp-timeline::before, :root[data-bs-theme="dark"] .fesv-doc-timeline::before, :root[data-bs-theme="dark"] .timeline::before { background: var(--fesv-border); } :root[data-bs-theme="dark"] .fesv-cmp-content, :root[data-bs-theme="dark"] .fesv-doc-content, :root[data-bs-theme="dark"] .timeline-content { background: var(--fesv-surface-1); border-color: var(--fesv-border); color: var(--fesv-text); } /* Hero activo fijo */ :root[data-bs-theme="dark"] .fesv-af-hero { background: linear-gradient(135deg, var(--fesv-surface-3) 0%, var(--fesv-surface-1) 100%); } :root[data-bs-theme="dark"] .fesv-af-kpi { background: var(--fesv-surface-1); border-color: var(--fesv-border); color: var(--fesv-text); } :root[data-bs-theme="dark"] .fesv-af-icono { background: var(--fesv-accent); } /* Scrollbar compras */ :root[data-bs-theme="dark"] .fesv-compras-scroll::-webkit-scrollbar-track { background: var(--fesv-surface-2); } :root[data-bs-theme="dark"] .fesv-compras-scroll::-webkit-scrollbar-thumb { background: var(--fesv-border); } :root[data-bs-theme="dark"] .fesv-compras-scroll::-webkit-scrollbar-thumb:hover { background: var(--fesv-text-muted); } :root[data-bs-theme="dark"] .fesv-compras-table > thead, :root[data-bs-theme="dark"] .fesv-compras-table > thead th { background: var(--fesv-surface-3); } /* Form controls */ :root[data-bs-theme="dark"] .form-control, :root[data-bs-theme="dark"] .form-select { background: var(--fesv-surface-2); border-color: var(--fesv-border); color: var(--fesv-text); } :root[data-bs-theme="dark"] .form-control::placeholder { color: var(--fesv-text-muted); } :root[data-bs-theme="dark"] .form-control:focus, :root[data-bs-theme="dark"] .form-select:focus { background: var(--fesv-surface-2); color: var(--fesv-text); border-color: var(--fesv-accent); box-shadow: 0 0 0 .25rem rgba(var(--fesv-accent-rgb), .25); } /* Nav tabs */ :root[data-bs-theme="dark"] .nav-tabs { border-color: var(--fesv-border); } :root[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--fesv-text-muted); border-color: transparent; } :root[data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: var(--fesv-text); border-color: transparent; } :root[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--fesv-text); background: var(--fesv-surface-1); border-color: var(--fesv-border) var(--fesv-border) var(--fesv-surface-1); } /* Dropdown */ :root[data-bs-theme="dark"] .dropdown-menu { background: var(--fesv-surface-1); border-color: var(--fesv-border); color: var(--fesv-text); } :root[data-bs-theme="dark"] .dropdown-item { color: var(--fesv-text); } :root[data-bs-theme="dark"] .dropdown-item:hover, :root[data-bs-theme="dark"] .dropdown-item:focus { background: var(--fesv-surface-3); } /* Badge secundario oscuro se ve mal en dark: usar surface-3 con texto claro */ :root[data-bs-theme="dark"] .badge.bg-light { background: var(--fesv-surface-3) !important; color: var(--fesv-text) !important; } :root[data-bs-theme="dark"] .badge.bg-secondary-subtle { background: var(--fesv-surface-3) !important; color: var(--fesv-text) !important; } /* Alerts base */ :root[data-bs-theme="dark"] .alert-info { background: rgba(13,202,240,.15); border-color: rgba(13,202,240,.35); color: #a2e3f5; } :root[data-bs-theme="dark"] .alert-success { background: rgba(25,135,84,.15); border-color: rgba(25,135,84,.35); color: #a3d9b6; } :root[data-bs-theme="dark"] .alert-warning { background: rgba(255,193,7,.15); border-color: rgba(255,193,7,.35); color: #f5d68a; } :root[data-bs-theme="dark"] .alert-danger { background: rgba(220,53,69,.15); border-color: rgba(220,53,69,.35); color: #f0a1a8; } :root[data-bs-theme="dark"] .alert-secondary, :root[data-bs-theme="dark"] .alert-light { background: var(--fesv-surface-3); border-color: var(--fesv-border); color: var(--fesv-text); } /* Pagination */ :root[data-bs-theme="dark"] .page-link { background: var(--fesv-surface-1); border-color: var(--fesv-border); color: var(--fesv-text); } :root[data-bs-theme="dark"] .page-item.disabled .page-link { background: var(--fesv-surface-2); color: var(--fesv-text-muted); } /* Ficha AF badges "info" y "warn" mantienen su color */ /* ── Shell (topbar, tabs bar, contenido principal) ───────── El sidebar ya es dark de fábrica; el resto del shell (topbar, barra de pestañas, área de contenido) usa colores claros hardcoded — los sobreescribimos según el tema. */ :root[data-bs-theme="light"] .app-shell { background: #f1f5f9; } :root[data-bs-theme="light"] .app-topbar { background: #fff; border-bottom: 1px solid #e2e8f0; } :root[data-bs-theme="light"] .app-tabs { background: #e2e8f0; } :root[data-bs-theme="light"] .app-tab { background: #cbd5e1; color: #475569; } :root[data-bs-theme="light"] .app-tab:hover { background: #d3dde8; } :root[data-bs-theme="light"] .app-tab.is-active { background: #fff; color: #1e293b; border-color: #cbd5e1; box-shadow: 0 -1px 0 0 #fff; } :root[data-bs-theme="light"] .app-tab.is-pinned { background: #bbd5e8; } :root[data-bs-theme="light"] .app-tab.is-pinned.is-active { background: #fff; } :root[data-bs-theme="light"] .app-content { background: #f1f5f9; } :root[data-bs-theme="dark"] .app-shell { background: var(--fesv-surface-2); } :root[data-bs-theme="dark"] .app-topbar { background: var(--fesv-surface-1); border-bottom: 1px solid var(--fesv-border); color: var(--fesv-text); } :root[data-bs-theme="dark"] .topbar-left { color: var(--fesv-text); } :root[data-bs-theme="dark"] .topbar-left i { color: var(--fesv-accent); } :root[data-bs-theme="dark"] .app-tabs { background: var(--fesv-surface-2); } :root[data-bs-theme="dark"] .app-tab { background: var(--fesv-surface-3); color: var(--fesv-text-muted); border-color: transparent; } :root[data-bs-theme="dark"] .app-tab:hover { background: var(--fesv-surface-1); } :root[data-bs-theme="dark"] .app-tab.is-active { background: var(--fesv-surface-1); color: var(--fesv-text); border-color: var(--fesv-border); box-shadow: 0 -1px 0 0 var(--fesv-surface-1); } :root[data-bs-theme="dark"] .app-tab.is-pinned { background: rgba(var(--fesv-accent-rgb), .2); color: var(--fesv-text); } :root[data-bs-theme="dark"] .app-tab.is-pinned.is-active { background: var(--fesv-surface-1); } :root[data-bs-theme="dark"] .app-tab-action { color: var(--fesv-text-muted); } :root[data-bs-theme="dark"] .tab-close:hover { background: rgba(255,255,255,.1); } :root[data-bs-theme="dark"] .app-content { background: var(--fesv-surface-2); color: var(--fesv-text); } /* Texto genérico en el área contenido (label, small, .text-muted) */ :root[data-bs-theme="dark"] .text-muted { color: var(--fesv-text-muted) !important; } :root[data-bs-theme="dark"] .fw-bold, :root[data-bs-theme="dark"] .fw-semibold, :root[data-bs-theme="dark"] strong { color: var(--fesv-text); } /* Bordes visibles en oscuro */ :root[data-bs-theme="dark"] .border, :root[data-bs-theme="dark"] .border-top, :root[data-bs-theme="dark"] .border-bottom, :root[data-bs-theme="dark"] .border-start, :root[data-bs-theme="dark"] .border-end { border-color: var(--fesv-border) !important; } /* Card header/footer que hardcodean bg-white lo tratamos arriba, pero también los que solo usan la clase card sin nada más */ :root[data-bs-theme="dark"] .card { background: var(--fesv-surface-1); color: var(--fesv-text); } :root[data-bs-theme="dark"] .card-header, :root[data-bs-theme="dark"] .card-footer { background: var(--fesv-surface-1); border-color: var(--fesv-border); color: var(--fesv-text); } /* Table thead con background legado (bg-light + table-light) — ya está pero agregamos borders correctos en dark */ :root[data-bs-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--fesv-border); background-color: transparent; color: var(--fesv-text); } :root[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.03); } :root[data-bs-theme="dark"] .table-active > *, :root[data-bs-theme="dark"] .table-active { background-color: rgba(var(--fesv-accent-rgb), .12) !important; color: var(--fesv-text) !important; } /* Códigos y pre */ :root[data-bs-theme="dark"] code { color: #ff89a2; background: rgba(255,89,138,.08); padding: 1px 4px; border-radius: 3px; } :root[data-bs-theme="dark"] pre { background: #0d1117 !important; color: #d0d7de; } /* Modal backdrop mejor visible */ :root[data-bs-theme="dark"] .modal.d-block { color: var(--fesv-text); } /* En dark, .bg-primary y card-header/footer con bg-primary se saturaban demasiado. Los bajamos a un tono con menos brillo pero manteniendo la identidad del acento. */ :root[data-bs-theme="dark"] .card-header.bg-primary, :root[data-bs-theme="dark"] .card-footer.bg-primary { background: linear-gradient(180deg, rgba(var(--fesv-accent-rgb), .85), rgba(var(--fesv-accent-rgb), .65)) !important; color: var(--fesv-accent-fg) !important; border-color: rgba(var(--fesv-accent-rgb), .35) !important; } :root[data-bs-theme="dark"] .bg-warning { background: rgba(255,193,7,.85) !important; color: #000 !important; } /* Botones outline-secondary en dark casi no se ven — les damos borde y texto claros */ :root[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--fesv-text); --bs-btn-border-color: var(--fesv-border); --bs-btn-hover-bg: var(--fesv-surface-3); --bs-btn-hover-border-color: var(--fesv-text-muted); --bs-btn-hover-color: var(--fesv-text); --bs-btn-active-bg: var(--fesv-surface-3); --bs-btn-active-color: var(--fesv-text); } /* Tab activo (pestañas del shell) ya se maneja; refuerzo la pineada Dashboard para que sea sutil en oscuro sin resaltar como "modal". */ :root[data-bs-theme="dark"] .app-tab.is-pinned { background: rgba(var(--fesv-accent-rgb), .15); } /* Inputs con calendario (datetime-local) — el ícono nativo se pierde */ :root[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, :root[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); } /* input-group con icono a la izquierda (típico $) */ :root[data-bs-theme="dark"] .input-group-text { background: var(--fesv-surface-3); border-color: var(--fesv-border); color: var(--fesv-text); } /* La leyenda gris debajo del cliente ("El CCF requiere...") */ :root[data-bs-theme="dark"] .card small, :root[data-bs-theme="dark"] .card-body small { color: var(--fesv-text-muted); } /* Botones de icono grande con solo color de fondo — hay uno amarillo circular flotante en /facturacion (calculadora). Lo dejamos igual porque es intencionalmente vistoso. */ /* Íconos del topbar (campana + sol/luna) en dark mode — Bootstrap default los deja negros porque la clase .btn no fuerza color. Forzamos claros. */ :root[data-bs-theme="dark"] .app-topbar .btn { color: var(--fesv-text); } :root[data-bs-theme="dark"] .app-topbar .btn:hover { color: var(--fesv-accent); } :root[data-bs-theme="dark"] .app-topbar .btn i, :root[data-bs-theme="dark"] .app-topbar button i { color: inherit; } :root[data-bs-theme="dark"] .app-topbar .fesv-theme-btn { color: var(--fesv-text) !important; } :root[data-bs-theme="dark"] .app-topbar .fesv-theme-btn:hover { color: var(--fesv-accent) !important; } /* Footer global (AppFooter): tiene bg-white hardcoded */ :root[data-bs-theme="dark"] .app-footer, :root[data-bs-theme="dark"] footer.app-footer { background: var(--fesv-surface-1) !important; color: var(--fesv-text-muted) !important; border-color: var(--fesv-border) !important; } :root[data-bs-theme="dark"] .app-footer .fw-semibold { color: var(--fesv-text); } /* ── Sidebar por tema ──────────────────────────────────────── En light mode: sidebar blanco con texto oscuro. En dark mode: mantenemos el gradient azulado (más pro). Es un cambio visible que le da identidad a cada tema. */ :root[data-bs-theme="light"] .app-sidebar { /* Gris cálido tipo Notion / Linear — descansa la vista y distingue del contenido */ background: linear-gradient(180deg, #f4f5f7 0%, #eceef2 100%); color: #1e293b; border-right: 1px solid #d9dde3; box-shadow: 1px 0 4px rgba(0,0,0,.04); } :root[data-bs-theme="light"] .app-sidebar-brand { border-bottom: 1px solid #d9dde3; } :root[data-bs-theme="light"] .app-sidebar-user { border-top: 1px solid #d9dde3; } :root[data-bs-theme="light"] .app-sidebar .brand-text .brand-title { color: #1e293b; } :root[data-bs-theme="light"] .app-sidebar .hamburger-btn { color: #1e293b; } :root[data-bs-theme="light"] .app-sidebar .hamburger-btn:hover { background: rgba(0,0,0,.05); } :root[data-bs-theme="light"] .app-sidebar .nav-link, :root[data-bs-theme="light"] .app-sidebar a { color: #334155; } :root[data-bs-theme="light"] .app-sidebar .nav-link:hover, :root[data-bs-theme="light"] .app-sidebar a:hover { background: rgba(var(--fesv-accent-rgb), .08); color: var(--fesv-accent); } :root[data-bs-theme="light"] .app-sidebar .nav-link.active, :root[data-bs-theme="light"] .app-sidebar .active > .nav-link { background: rgba(var(--fesv-accent-rgb), .12); color: var(--fesv-accent) !important; font-weight: 600; } :root[data-bs-theme="light"] .app-sidebar-scroll { scrollbar-color: #cbd5e1 transparent; } :root[data-bs-theme="light"] .app-sidebar-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; background-clip: content-box; } :root[data-bs-theme="light"] .app-sidebar-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; } /* Barra de pestañas en light: gris cálido para armonizar con el sidebar */ :root[data-bs-theme="light"] .app-tabs { background: #dfe3e9; } :root[data-bs-theme="light"] .app-tab { background: #cdd2da; color: #4b5563; } :root[data-bs-theme="light"] .app-tab.is-pinned { background: #bfc9d6; } :root[data-bs-theme="light"] .app-sidebar-user .text-muted, :root[data-bs-theme="light"] .app-sidebar small { color: #64748b !important; } :root[data-bs-theme="light"] .app-sidebar .btn-outline-light { color: #334155; border-color: #cbd5e1; } :root[data-bs-theme="light"] .app-sidebar .btn-outline-light:hover { background: rgba(0,0,0,.05); color: #1e293b; border-color: #94a3b8; } /* ── NavItem / NavGroup (hardcoded text-white / bg-secondary / text-white-50) En light mode los sobreescribimos para que sean legibles sobre fondo blanco. */ :root[data-bs-theme="light"] .app-sidebar .nav-link.text-white, :root[data-bs-theme="light"] .app-sidebar a.nav-link { color: #1e293b !important; font-weight: 500; } :root[data-bs-theme="light"] .app-sidebar .nav-link.text-white:hover, :root[data-bs-theme="light"] .app-sidebar a.nav-link:hover { color: var(--fesv-accent) !important; background: rgba(var(--fesv-accent-rgb), .08); } :root[data-bs-theme="light"] .app-sidebar .nav-link.active, :root[data-bs-theme="light"] .app-sidebar .nav-link.active.bg-secondary { background: rgba(var(--fesv-accent-rgb), .14) !important; color: var(--fesv-accent) !important; font-weight: 600; } /* NavGroup: botón toggle con text-white-50 (label del grupo) */ :root[data-bs-theme="light"] .app-sidebar .nav-item > button.text-white-50 { color: #334155 !important; font-weight: 600 !important; } :root[data-bs-theme="light"] .app-sidebar .nav-item > button.text-white-50:hover { color: var(--fesv-accent) !important; background: rgba(var(--fesv-accent-rgb), .05) !important; } /* Chevron del NavGroup */ :root[data-bs-theme="light"] .app-sidebar .nav-item > button.text-white-50 i { color: inherit; } /* Separador vertical del NavGroup abierto */ :root[data-bs-theme="light"] .app-sidebar .border-start.border-secondary { border-color: #cbd5e1 !important; } /* Modo compacto: separadores de grupo */ :root[data-bs-theme="light"] .app-sidebar .text-secondary { color: #475569 !important; } /* Sub-grupos internos también aparecen con text-white-50 (IMPORTACIÓN / REPORTES) */ :root[data-bs-theme="light"] .app-sidebar .border-start.border-secondary button.text-white-50 { color: #475569 !important; font-weight: 600 !important; } /* Estrellas de favoritos (text-warning se mantiene amarilla, text-white-50 la vuelve gris muted) */ :root[data-bs-theme="light"] .app-sidebar .nav-fav-btn i.text-white-50 { color: #cbd5e1 !important; } :root[data-bs-theme="light"] .app-sidebar .nav-fav-btn i.text-white-50:hover { color: #f59e0b !important; } /* Brand + user info + emails */ :root[data-bs-theme="light"] .app-sidebar .user-info .fw-semibold { color: #1e293b !important; } :root[data-bs-theme="light"] .app-sidebar .user-info small { color: #64748b !important; } :root[data-bs-theme="light"] .app-sidebar .user-row i { color: #64748b; } :root[data-bs-theme="light"] .app-sidebar-brand, :root[data-bs-theme="light"] .app-sidebar-user { color: #1e293b; } /* Píldora "Producción" / "Pruebas" — bg-success / bg-warning con text-white se ve OK en cualquier tema; sólo aseguramos legibilidad del texto. */ :root[data-bs-theme="light"] .app-sidebar .badge.bg-success { color: #fff; } :root[data-bs-theme="light"] .app-sidebar .badge.bg-warning { color: #000; } /* Swatches del selector de acento */ .fesv-accent-swatch { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; margin-right: 4px; cursor: pointer; transition: transform .1s ease; } .fesv-accent-swatch:hover { transform: scale(1.15); } .fesv-accent-swatch.active { border-color: currentColor; box-shadow: 0 0 0 2px var(--fesv-surface-1); } /* ═════════ Scrollbars globales — estilo pro (thin, muted, theme-aware) ═════════ Aplica en todo el body por default. Usa scrollbar-width:thin (Firefox) y ::-webkit-scrollbar más delgado con thumb translúcido. El thumb se resalta en hover para mejor discoverabilidad. */ * { scrollbar-width: thin; scrollbar-color: var(--fesv-scrollbar-thumb, rgba(148,163,184,.45)) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--fesv-scrollbar-thumb, rgba(148,163,184,.45)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background .15s ease; } *::-webkit-scrollbar-thumb:hover { background: var(--fesv-scrollbar-thumb-hover, rgba(100,116,139,.75)); background-clip: padding-box; } *::-webkit-scrollbar-corner { background: transparent; } :root[data-bs-theme="light"] { --fesv-scrollbar-thumb: rgba(148,163,184,.45); --fesv-scrollbar-thumb-hover: rgba(100,116,139,.7); } :root[data-bs-theme="dark"] { --fesv-scrollbar-thumb: rgba(148,163,184,.35); --fesv-scrollbar-thumb-hover: rgba(203,213,225,.6); } /* Contextos internos (cards, modales, POS canvas) — mismo estilo pero con thumb ligeramente más oscuro para contraste sobre superficies internas. */ .card ::-webkit-scrollbar-thumb, .modal-body ::-webkit-scrollbar-thumb { background: var(--fesv-scrollbar-thumb-hover, rgba(100,116,139,.55)); background-clip: padding-box; } /* ============================================================ Buscadores tipo dropdown/autocomplete (list-group flotante) ------------------------------------------------------------ Componentes: Shared/BuscadorCliente.razor, y páginas que usan patrones ".list-group position-absolute" o ".list-group list-group-flush" para paneles de resultados (Compras NC, RegistrarPago, ListaPreciosEditor, Facturacion selector de cliente/artículo en modal, NotaCredito, NotaDebito, NotaRemision, Pedidos, Retail, etc.). En tema oscuro Bootstrap deja el contenedor sin fondo y el texto queda ilegible sobre el modal blanco heredado. Forzamos variables de tema para mantener coherencia visual. ============================================================ */ [data-bs-theme="dark"] .list-group, :root[data-bs-theme="dark"] .list-group { background: var(--fesv-surface-3, #2b2f36) !important; color: var(--fesv-text, #e9ecef) !important; border-color: var(--fesv-border, #3a3f47) !important; --bs-list-group-bg: var(--fesv-surface-3, #2b2f36); --bs-list-group-color: var(--fesv-text, #e9ecef); --bs-list-group-border-color: var(--fesv-border, #3a3f47); --bs-list-group-action-color: var(--fesv-text, #e9ecef); --bs-list-group-action-hover-color: var(--fesv-text, #e9ecef); --bs-list-group-action-hover-bg: var(--fesv-surface-1, #1e2126); --bs-list-group-action-active-color: #ffffff; --bs-list-group-action-active-bg: #1d4ed8; } [data-bs-theme="dark"] .list-group-item, :root[data-bs-theme="dark"] .list-group-item { background-color: var(--fesv-surface-3, #2b2f36) !important; color: var(--fesv-text, #e9ecef) !important; border-color: var(--fesv-border, #3a3f47) !important; } [data-bs-theme="dark"] .list-group-item-action:hover:not(.active), [data-bs-theme="dark"] .list-group-item-action:focus:not(.active), :root[data-bs-theme="dark"] .list-group-item-action:hover:not(.active), :root[data-bs-theme="dark"] .list-group-item-action:focus:not(.active) { background-color: var(--fesv-surface-1, #1e2126) !important; color: var(--fesv-text, #e9ecef) !important; } [data-bs-theme="dark"] .list-group-item-action.active, :root[data-bs-theme="dark"] .list-group-item-action.active { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #ffffff !important; } /* Texto muted dentro de items para que no quede casi invisible */ [data-bs-theme="dark"] .list-group-item .text-muted, :root[data-bs-theme="dark"] .list-group-item .text-muted { color: var(--fesv-text-muted, #a1a7b0) !important; }