/* ============================================================================ Tema oscuro ---------------------------------------------------------------------------- Se activa poniendo data-tema="oscuro" en ; el header guarda la elección en localStorage y la aplica antes de pintar, para que no haya un fogonazo blanco al cargar. Por qué tanto !important: esta app es de 2021 (Bootstrap 5.0.2, sin tema oscuro nativo) y buena parte de los blancos están puestos en el atributo style= de cada elemento. Una regla de hoja de estilos SOLO le gana a un estilo en línea si lleva !important. No es descuido: es la única forma de oscurecer sin reescribir cientos de vistas. Lo que NO toca: los tiquetes (recibo, comanda, factura, cotización) se imprimen en papel y se sirven como páginas sueltas, sin este layout, así que siguen en blanco y negro como deben. ========================================================================== */ html[data-tema="oscuro"] { --rb-fondo: #0a0a0a; --rb-superficie: #141414; --rb-superficie-2: #1e1e1e; --rb-superficie-3: #2b2b2b; --rb-borde: #343434; --rb-texto: #f1f1f1; --rb-texto-suave: #a9a9a9; color-scheme: dark; } /* ── Base ─────────────────────────────────────────────────────────────────── */ html[data-tema="oscuro"] body { background-color: var(--rb-fondo) !important; color: var(--rb-texto) !important; } html[data-tema="oscuro"] .main-content, html[data-tema="oscuro"] .content-wrapper, html[data-tema="oscuro"] .container, html[data-tema="oscuro"] .container-fluid { background-color: transparent !important; } /* ── Superficies ──────────────────────────────────────────────────────────── */ html[data-tema="oscuro"] .card, html[data-tema="oscuro"] .card-body, html[data-tema="oscuro"] .card-header, html[data-tema="oscuro"] .card-footer, html[data-tema="oscuro"] .modal-content, html[data-tema="oscuro"] .modal-body, html[data-tema="oscuro"] .offcanvas, html[data-tema="oscuro"] .dropdown-menu, html[data-tema="oscuro"] .list-group-item, html[data-tema="oscuro"] .accordion-item, html[data-tema="oscuro"] .accordion-button, html[data-tema="oscuro"] .popover, html[data-tema="oscuro"] .toast { background-color: var(--rb-superficie) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .modal-header, html[data-tema="oscuro"] .modal-footer { border-color: var(--rb-borde) !important; } /* Cabeceras de modal con color propio (rojo/verde/gris de la marca): se dejan. */ html[data-tema="oscuro"] .modal-header[style*="background"] { color: #fff !important; } html[data-tema="oscuro"] .bg-white, html[data-tema="oscuro"] .bg-light, html[data-tema="oscuro"] .bg-body { background-color: var(--rb-superficie) !important; } /* Blancos puestos en el atributo style= (ver nota de arriba). Se excluyen los botones de marca del cobro: los logos de Nequi/Bancolombia necesitan su fondo blanco para leerse. */ html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="background:#fff"], html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="background:#FFF"], html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="background-color:#fff"], html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="background:white"] { background-color: var(--rb-superficie) !important; color: var(--rb-texto) !important; } html[data-tema="oscuro"] [style*="background:#f8f9fa"], html[data-tema="oscuro"] [style*="background:#fbfbfb"], html[data-tema="oscuro"] [style*="background:#eef0f2"], html[data-tema="oscuro"] [style*="background-color:#f8f9fa"] { background-color: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; } /* ── Texto ────────────────────────────────────────────────────────────────── */ html[data-tema="oscuro"] .text-dark, html[data-tema="oscuro"] .text-body, html[data-tema="oscuro"] .text-black { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .text-muted, html[data-tema="oscuro"] .text-secondary, html[data-tema="oscuro"] small.text-muted { color: var(--rb-texto-suave) !important; } html[data-tema="oscuro"] h1, html[data-tema="oscuro"] h2, html[data-tema="oscuro"] h3, html[data-tema="oscuro"] h4, html[data-tema="oscuro"] h5, html[data-tema="oscuro"] h6, html[data-tema="oscuro"] label, html[data-tema="oscuro"] p, html[data-tema="oscuro"] span, html[data-tema="oscuro"] div, html[data-tema="oscuro"] td, html[data-tema="oscuro"] th, html[data-tema="oscuro"] li { color: inherit; } /* ── Bordes y separadores ─────────────────────────────────────────────────── */ html[data-tema="oscuro"] hr, html[data-tema="oscuro"] .border, html[data-tema="oscuro"] .border-top, html[data-tema="oscuro"] .border-bottom, html[data-tema="oscuro"] .border-start, html[data-tema="oscuro"] .border-end, html[data-tema="oscuro"] .dropdown-divider { border-color: var(--rb-borde) !important; } /* ── Tablas ───────────────────────────────────────────────────────────────── */ html[data-tema="oscuro"] .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,.035); --bs-table-hover-bg: rgba(255,255,255,.06); --bs-table-color: var(--rb-texto); --bs-table-striped-color: var(--rb-texto); --bs-table-hover-color: var(--rb-texto); color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .table > :not(caption) > * > * { border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .table-light, html[data-tema="oscuro"] .table-light > th, html[data-tema="oscuro"] .table-light > td, html[data-tema="oscuro"] .table thead th { background-color: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } /* ── Formularios ──────────────────────────────────────────────────────────── */ html[data-tema="oscuro"] .form-control, html[data-tema="oscuro"] .form-select, html[data-tema="oscuro"] .input-group-text, html[data-tema="oscuro"] input[type="text"], html[data-tema="oscuro"] input[type="number"], html[data-tema="oscuro"] input[type="email"], html[data-tema="oscuro"] input[type="password"], html[data-tema="oscuro"] input[type="search"], html[data-tema="oscuro"] input[type="date"], html[data-tema="oscuro"] input[type="datetime-local"], html[data-tema="oscuro"] textarea, html[data-tema="oscuro"] select { background-color: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .form-control::placeholder, html[data-tema="oscuro"] input::placeholder, html[data-tema="oscuro"] textarea::placeholder { color: #7a7a7a !important; } html[data-tema="oscuro"] .form-control:focus, html[data-tema="oscuro"] .form-select:focus { background-color: var(--rb-superficie-3) !important; color: var(--rb-texto) !important; } html[data-tema="oscuro"] .form-check-input:not(:checked) { background-color: var(--rb-superficie-3) !important; border-color: var(--rb-borde) !important; } /* ── Botones neutros ──────────────────────────────────────────────────────── */ html[data-tema="oscuro"] .btn-light, html[data-tema="oscuro"] .btn-outline-secondary, html[data-tema="oscuro"] .btn-outline-dark { background-color: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .btn-light:hover, html[data-tema="oscuro"] .btn-outline-secondary:hover, html[data-tema="oscuro"] .btn-outline-dark:hover { background-color: var(--rb-superficie-3) !important; } html[data-tema="oscuro"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } html[data-tema="oscuro"] .btn-close-white { filter: none; } /* ── Nueva Venta (POS) ────────────────────────────────────────────────────── */ html[data-tema="oscuro"] .cla-wrap { background: var(--rb-fondo) !important; color: var(--rb-texto) !important; } html[data-tema="oscuro"] .cla-header, html[data-tema="oscuro"] .cla-cart, html[data-tema="oscuro"] .cla-search { background: var(--rb-superficie) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-products { background: var(--rb-fondo) !important; } html[data-tema="oscuro"] .cla-hbtn { background: var(--rb-superficie-2) !important; border-color: var(--rb-borde) !important; color: var(--rb-texto) !important; } html[data-tema="oscuro"] .cla-hbtn:hover{ background: var(--rb-superficie-3) !important; } html[data-tema="oscuro"] .cla-hbtn.cla-pago { background: #198754 !important; border-color: #198754 !important; color: #fff !important; } html[data-tema="oscuro"] .cla-hbtn.cla-inmediato { background: #ffc107 !important; border-color: #e0a800 !important; color: #212529 !important; } html[data-tema="oscuro"] .cla-hbtn.cla-inmediato i { color: #212529 !important; } html[data-tema="oscuro"] .cla-search input { background: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-cart-cols, html[data-tema="oscuro"] .cla-crumb { color: var(--rb-texto-suave) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-cart-line { border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-cart-actions, html[data-tema="oscuro"] .cla-totales { border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-cart-actions button { background: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-cart-actions button:hover { background: var(--rb-superficie-3) !important; } html[data-tema="oscuro"] .cla-tile.cla-tile-back { background: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; } html[data-tema="oscuro"] .cla-keypad button, html[data-tema="oscuro"] .cla-precio-display { background: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-qty-input { background: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] #mesasGrid { background: var(--rb-superficie) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] #claCajaCerradaOverlay { background: rgba(0,0,0,.94) !important; } html[data-tema="oscuro"] #monConfirmBox { background: var(--rb-superficie) !important; color: var(--rb-texto) !important; } /* ── Barra superior y menú lateral ────────────────────────────────────────── */ html[data-tema="oscuro"] .top-header, html[data-tema="oscuro"] .sidebar, html[data-tema="oscuro"] .sidebar-header, html[data-tema="oscuro"] .sidebar-footer, html[data-tema="oscuro"] .nav-dropdown, html[data-tema="oscuro"] .header-menu { background-color: var(--rb-superficie) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .nav-link-item, html[data-tema="oscuro"] .sidebar-nav a { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .nav-link-item:hover, html[data-tema="oscuro"] .sidebar-nav a:hover { background-color: var(--rb-superficie-3) !important; } html[data-tema="oscuro"] .header-icon-btn { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .dropdown-item { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .dropdown-item:hover, html[data-tema="oscuro"] .dropdown-item:focus { background-color: var(--rb-superficie-3) !important; color: var(--rb-texto) !important; } /* ── Avisos suaves de Bootstrap: se oscurecen sin perder el color ──────────── */ html[data-tema="oscuro"] .alert-light, html[data-tema="oscuro"] .alert-secondary { background-color: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .alert-success { background-color: #10281a !important; color: #9be7b4 !important; border-color: #1d5033 !important; } html[data-tema="oscuro"] .alert-danger { background-color: #2b1214 !important; color: #f2a7ab !important; border-color: #5c2429 !important; } html[data-tema="oscuro"] .alert-warning { background-color: #2d2410 !important; color: #f0d493 !important; border-color: #5f4c1c !important; } html[data-tema="oscuro"] .alert-info { background-color: #10242d !important; color: #9adbef !important; border-color: #1d4c5e !important; } /* ── El botón del propio interruptor ──────────────────────────────────────── */ #rbTemaBtn .rb-tema-luna { display: none; } #rbTemaBtn .rb-tema-sol { display: inline-block; } html[data-tema="oscuro"] #rbTemaBtn .rb-tema-luna { display: inline-block; } html[data-tema="oscuro"] #rbTemaBtn .rb-tema-sol { display: none; } /* ── Contraste: colores de texto escritos en el atributo style= ─────────────── Mismo problema que con los fondos: muchas vistas traen el color del texto en el propio elemento (color:#212529, #333, #6c757d...). Sobre fondo oscuro esos grises quedan ilegibles y solo se pueden corregir desde aquí. Se excluyen los botones de marca del cobro, que conservan su fondo blanco a propósito. */ html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="color:#212529"], html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="color:#343a40"], html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="color:#495057"], html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="color:#333"], html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="color:#1a1a1a"], html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="color:#222"], html[data-tema="oscuro"] *:not(.cob-brand):not(.cob-brand *)[style*="color:#000"] { color: var(--rb-texto) !important; } html[data-tema="oscuro"] [style*="color:#6c757d"], html[data-tema="oscuro"] [style*="color:#adb5bd"], html[data-tema="oscuro"] [style*="color:#666"], html[data-tema="oscuro"] [style*="color:#777"], html[data-tema="oscuro"] [style*="color:#888"], html[data-tema="oscuro"] [style*="color:#8a8a8a"], html[data-tema="oscuro"] [style*="color:#999"] { color: var(--rb-texto-suave) !important; } /* Fondos claros que faltaban por cubrir. */ html[data-tema="oscuro"] [style*="background:#e9ecef"], html[data-tema="oscuro"] [style*="background:#f1f3f5"], html[data-tema="oscuro"] [style*="background:#f5f5f5"], html[data-tema="oscuro"] [style*="background:#fafafa"], html[data-tema="oscuro"] [style*="background:#fdfdfd"], html[data-tema="oscuro"] [style*="background:#f2f2f2"], html[data-tema="oscuro"] [style*="background-color:#e9ecef"], html[data-tema="oscuro"] [style*="background-color:#f1f3f5"] { background-color: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; } /* Texto de la pantalla de venta que vive en clases, no en el atributo style=. */ html[data-tema="oscuro"] .cla-wrap, html[data-tema="oscuro"] .cla-cart-line, html[data-tema="oscuro"] .cla-cart-line .nom, html[data-tema="oscuro"] .cla-totales, html[data-tema="oscuro"] .cla-comandas-tabs, html[data-tema="oscuro"] .cla-modal .modal-content { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .cla-cart-line .nom small, html[data-tema="oscuro"] .cla-cart-line .nota-txt, html[data-tema="oscuro"] .cla-cart-empty { color: var(--rb-texto-suave) !important; } /* Bootstrap: fondos claros de utilidad que dejan el texto oscuro por defecto. */ html[data-tema="oscuro"] .bg-light, html[data-tema="oscuro"] .bg-white, html[data-tema="oscuro"] .badge.bg-light, html[data-tema="oscuro"] .list-group-item-light { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .badge.bg-light { background-color: var(--rb-superficie-3) !important; } /* La tabla del panel: encabezados y celdas heredan del contenedor, no del blanco. */ html[data-tema="oscuro"] .table > tbody > tr > td, html[data-tema="oscuro"] .table > tbody > tr > th, html[data-tema="oscuro"] .table > thead > tr > th { color: var(--rb-texto) !important; } /* Enlaces: el azul por defecto casi no se ve sobre fondo oscuro. */ html[data-tema="oscuro"] a:not(.btn):not(.header-icon-btn):not(.nav-link-item):not(.dropdown-item) { color: #7fc4ff; } html[data-tema="oscuro"] a:not(.btn):hover { color: #a8d9ff; } /* Iconos que se pintan del color del texto y quedaban negros. */ html[data-tema="oscuro"] .text-black-50 { color: var(--rb-texto-suave) !important; } /* ── Barra del menú principal ───────────────────────────────────────────────── .header-nav-bar tiene background:white en el layout, y sus enlaces color:#555. Al aclarar el texto sin oscurecer la barra quedaba blanco sobre blanco. La franja roja de arriba (.top-header) se deja como está: es la identidad de la marca. */ html[data-tema="oscuro"] .header-nav-bar { background-color: var(--rb-superficie) !important; border-bottom-color: var(--rb-borde) !important; box-shadow: 0 4px 10px rgba(0,0,0,.5) !important; } html[data-tema="oscuro"] .horizontal-nav-menu, html[data-tema="oscuro"] .horizontal-nav-menu ul, html[data-tema="oscuro"] .horizontal-nav-menu li { background-color: transparent !important; } html[data-tema="oscuro"] .nav-link-item { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .nav-link-item:hover, html[data-tema="oscuro"] .nav-link-item.active { background-color: var(--rb-superficie-3) !important; } html[data-tema="oscuro"] .nav-kbd { color: var(--rb-texto-suave) !important; } /* Los desplegables del menú (Ventas, Proveedor, Inventario...). */ html[data-tema="oscuro"] .dropdown-menu-custom { background-color: var(--rb-superficie) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .dropdown-menu-custom a { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .dropdown-menu-custom a:hover { background-color: var(--rb-superficie-3) !important; } /* Menú lateral de celular, si está abierto. */ html[data-tema="oscuro"] .mobile-menu, html[data-tema="oscuro"] .mobile-nav, html[data-tema="oscuro"] .mobile-menu-panel { background-color: var(--rb-superficie) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .mobile-menu a, html[data-tema="oscuro"] .mobile-nav a { color: var(--rb-texto) !important; } /* ── Filas de tabla ─────────────────────────────────────────────────────────── style.css pinta cada fila como una tarjeta blanca (.table tbody tr con background-color:#fff y sombra). Al aclarar el texto sin oscurecer la fila, los listados quedaban en blanco sobre blanco — que es justo lo que se veía en Ventas. Aquí se oscurece la fila y se le sube la sombra, que sobre negro casi no se percibe. */ html[data-tema="oscuro"] .table tbody tr { background-color: var(--rb-superficie) !important; box-shadow: 0 2px 5px rgba(0,0,0,.45) !important; } html[data-tema="oscuro"] .table tbody tr:hover { background-color: var(--rb-superficie-3) !important; box-shadow: 0 5px 15px rgba(0,0,0,.6) !important; } html[data-tema="oscuro"] .table tbody tr > td, html[data-tema="oscuro"] .table tbody tr > th { background-color: transparent !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .table thead th { background-color: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; } html[data-tema="oscuro"] .table-responsive { background-color: transparent !important; } /* ── Otras superficies blancas de style.css ───────────────────────────────── */ html[data-tema="oscuro"] .shortcut-card, html[data-tema="oscuro"] .shortcut-section, html[data-tema="oscuro"] .shortcut-buttons a, html[data-tema="oscuro"] .product-card, html[data-tema="oscuro"] .search-icon, html[data-tema="oscuro"] .search-bar-container .form-control, html[data-tema="oscuro"] .btn-header-action, html[data-tema="oscuro"] .btn-logout, html[data-tema="oscuro"] .auth-form-wrapper { background-color: var(--rb-superficie) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .shortcut-card:hover, html[data-tema="oscuro"] .shortcut-buttons a:hover, html[data-tema="oscuro"] .btn-header-action:hover { background-color: var(--rb-superficie-3) !important; } html[data-tema="oscuro"] .search-icon { color: var(--rb-texto-suave) !important; } /* Las insignias de estado (completado / cotizacion / cancelado) conservan su color: son la única señal de un vistazo en los listados. */ html[data-tema="oscuro"] .badge.bg-success, html[data-tema="oscuro"] .badge.bg-danger, html[data-tema="oscuro"] .badge.bg-warning, html[data-tema="oscuro"] .badge.bg-info, html[data-tema="oscuro"] .badge.bg-primary, html[data-tema="oscuro"] .badge.bg-secondary { color: #fff !important; } html[data-tema="oscuro"] .badge.bg-warning, html[data-tema="oscuro"] .badge.text-dark { color: #1a1a1a !important; } /* ── Nueva Venta: colores de texto que viven en sus propias clases ──────────── Estos no salen con las reglas de arriba porque la clase hija trae su propio color y le gana al del contenedor. El caso más visible era el bloque de totales del modal de confirmar venta: Subtotal/Impuestos/TOTAL iban en #495057 y #212529, o sea gris oscuro sobre negro. */ html[data-tema="oscuro"] .cla-totales { border-top-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-totales .row-t { color: var(--rb-texto-suave) !important; } html[data-tema="oscuro"] .cla-totales .row-total { color: var(--rb-texto) !important; border-top-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-comanda-tab { background: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-qty-ro { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .cla-qty-btn { background: var(--rb-superficie-2) !important; color: var(--rb-texto) !important; border-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .cla-drop { border-color: var(--rb-borde) !important; color: var(--rb-texto-suave) !important; } html[data-tema="oscuro"] .cla-hbtn.cla-guardar i { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .cla-search input::placeholder { color: #7a7a7a !important; } /* Las listas de artículos del modal de confirmar venta llevan el borde en línea. */ html[data-tema="oscuro"] #claFinalLista .border-bottom { border-color: var(--rb-borde) !important; } /* ── Códigos QR: el fondo claro NO se toca ──────────────────────────────────── El QR de vinculación de WhatsApp se dibuja con padding y background:#fff, que es su zona de silencio: el margen claro que el lector necesita para reconocer el código. La regla general de arriba lo estaba oscureciendo y el teléfono no podía leerlo. Lo mismo vale para cualquier imagen que traiga fondo blanco a propósito. */ html[data-tema="oscuro"] #waQrImg, html[data-tema="oscuro"] img[style*="background:#fff"], html[data-tema="oscuro"] img[style*="background-color:#fff"], html[data-tema="oscuro"] .qr-code, html[data-tema="oscuro"] .qr-code img { background: #fff !important; border-color: #dee2e6 !important; } /* Pestañas (Configuración: General, Rappi, Mesas, Exportar...). La vista las pinta con color:#212529 !important —letra casi negra— y en tema oscuro quedaban negras sobre negro. Aquí se ganan esa regla por especificidad. */ html[data-tema="oscuro"] .nav-tabs { border-bottom-color: var(--rb-borde) !important; } html[data-tema="oscuro"] .nav-tabs .nav-link, html[data-tema="oscuro"] #configTabs .nav-link { color: var(--rb-texto-suave) !important; background: transparent !important; border-color: transparent !important; } html[data-tema="oscuro"] .nav-tabs .nav-link:hover, html[data-tema="oscuro"] #configTabs .nav-link:hover { color: var(--rb-texto) !important; } html[data-tema="oscuro"] .nav-tabs .nav-link.active, html[data-tema="oscuro"] #configTabs .nav-link.active { color: var(--rb-texto) !important; background: var(--rb-superficie-2) !important; border-bottom-color: var(--color-primary) !important; } /* Y las pastillas (nav-pills) que usan otras pantallas. */ html[data-tema="oscuro"] .nav-pills .nav-link { color: var(--rb-texto-suave) !important; } html[data-tema="oscuro"] .nav-pills .nav-link.active { color: #fff !important; }