/* ============================================================================ TEMA OSCURO — mismo lenguaje que la barra lateral y "Mi perfil" (macOS dark) ---------------------------------------------------------------------------- Opt-in por módulo: se aplica a lo que esté dentro de un contenedor con la clase .tema-oscuro. Los overlays que un módulo agrega a llevan la clase en su propio nodo raíz. Tres capas, en este orden: 1. Paleta (variables) y superficies base. 2. Clases compartidas de la app (filtros, botones, tablas, sugerencias). 3. Traducción de colores claros escritos EN LÍNEA en las plantillas. Van en los dos formatos: el hexadecimal que escribe el código y el rgb() en que el navegador reescribe el atributo style cuando JavaScript lo modifica (p. ej. onfocus="this.style.background='#fff'"). Ancho de tablas: .tema-oscuro .tabla-ajustada ocupa el ancho disponible y deja que las columnas de texto bajen de línea, en lugar de la regla general .dashboard-main table { min-width:max-content }. ============================================================================ */ .tema-oscuro { --to-bg: #1e1e20; --to-card: #2a2a2d; --to-card-2: #323236; --to-field: #1c1c1e; --to-line: rgba(255, 255, 255, 0.08); --to-line-2: rgba(255, 255, 255, 0.14); --to-text: rgba(255, 255, 255, 0.88); --to-text-2: rgba(255, 255, 255, 0.55); --to-text-3: rgba(255, 255, 255, 0.35); --to-hover: rgba(255, 255, 255, 0.05); --to-accent: #0a84ff; --to-red: #ff6961; --to-green: #30d158; --to-amber: #ff9f0a; --to-purple: #bf5af2; --to-teal: #40c8e0; /* Escala tipográfica única del tema */ --to-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --to-mono: 'SF Mono', Menlo, Consolas, monospace; --to-fs-lg: 15px; /* títulos de ventana */ --to-fs: 13px; /* texto general, pestañas, títulos de sección */ --to-fs-sm: 12px; /* campos, botones, celdas, filtros */ --to-fs-xs: 11px; /* encabezados de tabla, etiquetas, ayudas */ color: var(--to-text); font-family: var(--to-font); font-size: var(--to-fs); line-height: 1.45; -webkit-font-smoothing: antialiased; color-scheme: dark; } /* ── Tipografía estandarizada ────────────────────────────────────────────── Una sola familia para todo, incluidos campos y botones (los controles de formulario NO heredan la fuente de la página por defecto) y los estilos en línea que traían otra. Se excluyen los iconos (Font Awesome es una fuente) y el código, que conserva la monoespaciada. */ .tema-oscuro *:not(i):not(.fas):not(.far):not(.fab):not(.fa):not(code):not(pre):not(kbd):not(.me-codigo):not(.font-mono):not(.partida-code) { font-family: var(--to-font) !important; } .tema-oscuro code, .tema-oscuro pre, .tema-oscuro kbd, .tema-oscuro .me-codigo, .tema-oscuro .partida-code { font-family: var(--to-mono) !important; } .tema-oscuro input, .tema-oscuro select, .tema-oscuro textarea, .tema-oscuro button { font-size: var(--to-fs-sm) !important; line-height: 1.35; } .tema-oscuro td { font-size: var(--to-fs-sm) !important; } .tema-oscuro .cotizaciones-tabla, .tema-oscuro .cotizaciones-tabla td, .tema-oscuro .modal-body, .tema-oscuro .modal-tab-content { font-size: var(--to-fs-sm) !important; } .tema-oscuro th { font-size: var(--to-fs-xs) !important; text-transform: none !important; letter-spacing: 0.01em !important; } .tema-oscuro label, .tema-oscuro .filter-label-standard { font-size: var(--to-fs-sm) !important; } .tema-oscuro h3 { font-size: var(--to-fs-lg) !important; font-weight: 600; } .tema-oscuro h4, .tema-oscuro h5 { font-size: var(--to-fs) !important; font-weight: 600; } .tema-oscuro small { font-size: var(--to-fs-xs) !important; } .tema-oscuro.to-superficie { background: var(--to-bg); border-radius: 12px; border: 1px solid var(--to-line); overflow: hidden; } /* ── Control segmentado (pestañas principales de un módulo) ────────────── */ .tema-oscuro .to-segmento { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--to-line); border-radius: 9px; } .tema-oscuro .to-segmento .to-tab { padding: 6px 14px; border-radius: 7px; font-size: var(--to-fs) !important; font-weight: 500; color: var(--to-text-2); display: inline-flex; align-items: center; gap: 6px; transition: background-color 0.12s ease, color 0.12s ease; } .tema-oscuro .to-segmento .to-tab i { margin: 0; font-size: 12px; color: var(--to-text-3); transition: color 0.12s ease; } .tema-oscuro .to-segmento .to-tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--to-text); } .tema-oscuro .to-segmento .to-tab:hover i { color: var(--to-text-2); } .tema-oscuro .to-segmento .to-tab.active { background: #48484c; color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0.5px 0 rgba(255, 255, 255, 0.12); } .tema-oscuro .to-segmento .to-tab.active i { color: var(--to-accent); } /* ── Pestañas tipo segmento ─────────────────────────────────────────────── */ .tema-oscuro .to-tabbar { display: flex; align-items: center; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--to-line); } .tema-oscuro .to-tabtitle { font-size: var(--to-fs-lg); font-weight: 600; color: var(--to-text); padding: 0 12px 0 2px; white-space: nowrap; } .tema-oscuro .to-tabtitle i { color: var(--to-accent); margin-right: 4px; } .tema-oscuro .to-tab { padding: 5px 12px; border: none; border-radius: 6px; background: transparent; color: var(--to-text-2); font: inherit; font-size: var(--to-fs-sm); cursor: pointer; white-space: nowrap; } .tema-oscuro .to-tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--to-text); } .tema-oscuro .to-tab.active { background: rgba(255, 255, 255, 0.11); color: #fff; font-weight: 500; } .tema-oscuro .to-tab i { margin-right: 4px; } /* ── Barrido: contenedores que en la versión clara traen fondo blanco ─────── Sobre el tema oscuro dejaban texto claro sobre fondo claro (así se veía la lista de cotizaciones del modal). Se neutralizan en bloque; las superficies propias del tema se definen más abajo y ganan por especificidad. */ .tema-oscuro .access-denied-card, .tema-oscuro .actions-panel, .tema-oscuro .autocomplete-info, .tema-oscuro .balance-card, .tema-oscuro .config-item, .tema-oscuro .cotizacion-obs, .tema-oscuro .cotizaciones-error, .tema-oscuro .cotizaciones-list, .tema-oscuro .detail-actions, .tema-oscuro .detail-content, .tema-oscuro .detail-item, .tema-oscuro .detalle-item, .tema-oscuro .empty-message, .tema-oscuro .error-card, .tema-oscuro .fila-comercial, .tema-oscuro .filters-panel, .tema-oscuro .finance-card, .tema-oscuro .grafo-seccion, .tema-oscuro .imagen-preview, .tema-oscuro .kardex-stat, .tema-oscuro .kpi-card, .tema-oscuro .manual-item, .tema-oscuro .mnt-hpd-grid, .tema-oscuro .mnt-sug-card, .tema-oscuro .mnt-table-wrap, .tema-oscuro .mnt-toolbar, .tema-oscuro .mnt-week-nav, .tema-oscuro .modal-edicion-container, .tema-oscuro .panel-header, .tema-oscuro .pending-item, .tema-oscuro .pending-requirements-panel, .tema-oscuro .pl-card-header, .tema-oscuro .pl-edge-legend, .tema-oscuro .pl-kpi, .tema-oscuro .pl-toolbar, .tema-oscuro .project-stats, .tema-oscuro .quick-actions-card, .tema-oscuro .requerimiento-card, .tema-oscuro .requirement-form, .tema-oscuro .requirements-table, .tema-oscuro .salidas-placeholder, .tema-oscuro .salidas-stat, .tema-oscuro .selected-project-preview, .tema-oscuro .servicios-stat-item, .tema-oscuro .stat-card-standard, .tema-oscuro .stat-inline, .tema-oscuro .tabla-lotes, .tema-oscuro .table-container, .tema-oscuro .wf-column { background-color: transparent !important; background-image: none !important; } /* ── Barra de módulo: selector compacto, botones de icono, separador ──── */ .tema-oscuro .to-barra-grupo { display: flex; align-items: center; gap: 6px; } .tema-oscuro .to-barra-derecha { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; } .tema-oscuro select.to-compacto { height: 28px; padding: 0 8px !important; width: 260px; max-width: 40vw; cursor: pointer; } .tema-oscuro .to-compacto-btn { height: 28px; padding: 0 10px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .tema-oscuro .to-icono-btn { width: 28px; height: 28px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .tema-oscuro .to-sep { width: 1px; height: 18px; background: var(--to-line-2); margin: 0 6px; flex-shrink: 0; } .tema-oscuro .to-ayuda { color: var(--to-text-3); font-size: var(--to-fs-sm); } .tema-oscuro .to-ayuda i { margin-right: 4px; } .tema-oscuro .to-vacio { text-align: center; padding: 40px 16px; color: var(--to-text-3); font-size: var(--to-fs-sm); } .tema-oscuro .to-vacio i { font-size: 22px; display: block; margin-bottom: 8px; } .tema-oscuro .to-oculto { display: none !important; } /* Casillas con el acento del sistema; la de rechazo en rojo */ .tema-oscuro input[type="checkbox"] { accent-color: var(--to-accent); width: 14px; height: 14px; cursor: pointer; } .tema-oscuro input[type="checkbox"].to-check-rojo { accent-color: var(--to-red); } /* Comparativo APU: resalte por estado de la fila. Tinte tenue + marca de color a la izquierda; el texto se mantiene claro para que se lea. */ .tema-oscuro tr.comp-sin-supply > td { background: rgba(191, 90, 242, 0.14) !important; } .tema-oscuro tr.comp-excedido > td { background: rgba(255, 69, 58, 0.14) !important; } .tema-oscuro tr.comp-alerta > td { background: rgba(255, 159, 10, 0.14) !important; } .tema-oscuro tr.comp-sin-supply > td:first-child { box-shadow: inset 3px 0 0 var(--to-purple); } .tema-oscuro tr.comp-excedido > td:first-child { box-shadow: inset 3px 0 0 var(--to-red); } .tema-oscuro tr.comp-alerta > td:first-child { box-shadow: inset 3px 0 0 var(--to-amber); } .tema-oscuro tr.comp-sin-supply:hover > td { background: rgba(191, 90, 242, 0.2) !important; } .tema-oscuro tr.comp-excedido:hover > td { background: rgba(255, 69, 58, 0.2) !important; } .tema-oscuro tr.comp-alerta:hover > td { background: rgba(255, 159, 10, 0.2) !important; } /* Tabla de cotizaciones (modal de Detalles): resaltes legibles sobre oscuro. En claro eran degradados pastel con texto oscuro; aquí, tinte tenue + marca de color a la izquierda y el texto siempre claro. */ .tema-oscuro tr.fila-sugerida > td { background: rgba(10, 132, 255, 0.12) !important; } .tema-oscuro tr.fila-menor-costo > td { background: rgba(48, 209, 88, 0.12) !important; } .tema-oscuro tr.fila-seleccionada > td { background: rgba(48, 209, 88, 0.18) !important; } .tema-oscuro tr.fila-sugerida > td:first-child { box-shadow: inset 3px 0 0 var(--to-accent); } .tema-oscuro tr.fila-menor-costo > td:first-child { box-shadow: inset 3px 0 0 rgba(48, 209, 88, .6); } .tema-oscuro tr.fila-seleccionada > td:first-child { box-shadow: inset 3px 0 0 var(--to-green); } .tema-oscuro tr.fila-sugerida, .tema-oscuro tr.fila-menor-costo, .tema-oscuro tr.fila-seleccionada { background: transparent !important; border-left: none !important; } .tema-oscuro tr.fila-sugerida:hover > td { background: rgba(10, 132, 255, 0.18) !important; } .tema-oscuro tr.fila-menor-costo:hover > td { background: rgba(48, 209, 88, 0.18) !important; } .tema-oscuro tr.fila-seleccionada:hover > td { background: rgba(48, 209, 88, 0.24) !important; } /* Estados y tipos de comprobante: texto de color, sin pastilla */ .tema-oscuro .estado-badge.estado-seleccionada { color: var(--to-green) !important; } .tema-oscuro .estado-badge.estado-sugerida { color: #64b5ff !important; } .tema-oscuro .estado-badge.estado-rechazada { color: var(--to-red) !important; } .tema-oscuro .tipo-badge { background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; font-size: var(--to-fs-xs) !important; font-weight: 600 !important; letter-spacing: .02em; color: var(--to-text-2) !important; } .tema-oscuro .tipo-badge.tipo-factura { color: #64b5ff !important; } .tema-oscuro .tipo-badge.tipo-rh { color: var(--to-purple) !important; } .tema-oscuro .tipo-badge.tipo-recibo { color: var(--to-amber) !important; } .tema-oscuro .tipo-badge.tipo-invoice { color: var(--to-teal) !important; } /* Proveedor y acciones de la fila */ .tema-oscuro .proveedor-info strong { color: var(--to-text) !important; font-size: var(--to-fs-sm) !important; } .tema-oscuro .ruc-small { color: var(--to-text-3) !important; font-size: var(--to-fs-xs) !important; } .tema-oscuro .btn-accion { background: rgba(255, 255, 255, 0.1) !important; border: none !important; color: var(--to-text) !important; border-radius: 6px !important; } .tema-oscuro .btn-accion:hover { background: rgba(255, 255, 255, 0.16) !important; transform: none !important; } .tema-oscuro .btn-accion.btn-eliminar { color: var(--to-red) !important; } .tema-oscuro .btn-accion.btn-eliminar:hover { background: rgba(255, 69, 58, 0.16) !important; } /* Filas marcadas en tablas de decisión (confirmar / rechazar) */ .tema-oscuro tr.fila-seleccionada > td { background: rgba(48, 209, 88, 0.10) !important; } .tema-oscuro tr.fila-rechazada > td { background: rgba(255, 69, 58, 0.10) !important; } .tema-oscuro tr.fila-seleccionada, .tema-oscuro tr.fila-rechazada { background: transparent !important; } /* ── Campos ─────────────────────────────────────────────────────────────── */ .tema-oscuro input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .tema-oscuro select, .tema-oscuro textarea { background-color: var(--to-field) !important; color: var(--to-text) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 6px !important; box-shadow: none; } .tema-oscuro input::placeholder, .tema-oscuro textarea::placeholder { color: var(--to-text-3) !important; } .tema-oscuro input:focus, .tema-oscuro select:focus, .tema-oscuro textarea:focus { outline: none; border-color: var(--to-accent) !important; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25) !important; } .tema-oscuro select option { background: var(--to-card); color: var(--to-text); } .tema-oscuro input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); } .tema-oscuro input:disabled, .tema-oscuro select:disabled, .tema-oscuro textarea:disabled { opacity: 0.55; } /* Grillas editables (.to-grid): todos los campos con la misma caja visible, y filas sin las cebras claras de .editable-row / .row-number (dashboard.css) */ .tema-oscuro .to-grid .editable-row, .tema-oscuro .to-grid .editable-row:nth-child(even) { background: transparent !important; } .tema-oscuro .to-grid .editable-row:hover, .tema-oscuro .to-grid .editable-row:nth-child(even):hover { background: var(--to-hover) !important; } .tema-oscuro .to-grid .row-number { background: transparent !important; color: var(--to-text-3) !important; } .tema-oscuro .to-grid td { vertical-align: middle; } /* ── Botones ────────────────────────────────────────────────────────────── */ .tema-oscuro .to-btn, .tema-oscuro .btn-standard.btn-secondary-standard, .tema-oscuro .btn-cancelar { background: rgba(255, 255, 255, 0.1) !important; color: var(--to-text) !important; border: none !important; border-radius: 6px !important; font-weight: 500; } .tema-oscuro .to-btn:hover, .tema-oscuro .btn-standard.btn-secondary-standard:hover:not(:disabled), .tema-oscuro .btn-cancelar:hover { background: rgba(255, 255, 255, 0.16) !important; } .tema-oscuro .to-btn.pri, .tema-oscuro .btn-standard.btn-primary-standard, .tema-oscuro .btn-guardar { background: var(--to-accent) !important; color: #fff !important; border: none !important; border-radius: 6px !important; box-shadow: none !important; transform: none !important; } .tema-oscuro .to-btn.pri:hover, .tema-oscuro .btn-standard.btn-primary-standard:hover:not(:disabled), .tema-oscuro .btn-guardar:hover { background: #2491ff !important; } .tema-oscuro button:disabled { opacity: 0.45; cursor: default; } /* ── Paneles y contenedores compartidos ─────────────────────────────────── */ .tema-oscuro .filters-panel-standard { background: var(--to-card); border: none; box-shadow: none; border-radius: 10px; } .tema-oscuro .filter-label-standard { color: var(--to-text-2); } .tema-oscuro .filters-panel-standard { padding: 10px 14px; } .tema-oscuro .filter-select-standard, .tema-oscuro .filter-input-standard { height: 30px; padding: 0 10px !important; } .tema-oscuro .filters-panel-standard .btn-standard { height: 30px; padding: 0 14px; } .tema-oscuro .project-selector-container { background: var(--to-card); box-shadow: none; border: 1px solid var(--to-line); border-radius: 12px; } .tema-oscuro .project-selector-container label { color: var(--to-text-2); } .tema-oscuro .project-select { background-image: none; padding-right: 12px; } .tema-oscuro .form-actions { border-top-color: var(--to-line); } .tema-oscuro .tabla-scroll-container { background: var(--to-card); border: 1px solid var(--to-line); border-radius: 10px; } /* ── Tablas ─────────────────────────────────────────────────────────────── */ .tema-oscuro table { background: transparent !important; color: var(--to-text); border-collapse: collapse; } .tema-oscuro th { background: var(--to-card) !important; color: var(--to-text-2) !important; border-right: none !important; border-bottom: 1px solid var(--to-line-2) !important; font-weight: 600; } .tema-oscuro thead th { position: sticky; top: 0; z-index: 1; } .tema-oscuro td { border-bottom: 1px solid var(--to-line) !important; color: var(--to-text); } .tema-oscuro tbody tr:hover > td { background: var(--to-hover); } .tema-oscuro .cotizacion-fila:hover { background: transparent; } .tema-oscuro .tabla-ajustada { width: 100% !important; min-width: 100% !important; table-layout: auto !important; } .tema-oscuro .tabla-ajustada th { white-space: nowrap; } .tema-oscuro .tabla-ajustada td { vertical-align: top; line-height: 1.45; } .tema-oscuro .tabla-ajustada .col-corta { white-space: nowrap; width: 1%; } .tema-oscuro .tabla-ajustada .col-texto { white-space: normal !important; word-break: break-word; min-width: 180px; } /* Estados de fila de la app */ .tema-oscuro .paste-incomplete { background-color: rgba(255, 159, 10, 0.08) !important; border-left-color: var(--to-amber); } .tema-oscuro .paste-incomplete:hover { background-color: rgba(255, 159, 10, 0.14) !important; } .tema-oscuro .field-incomplete::before { border-color: rgba(255, 159, 10, 0.7); } .tema-oscuro .field-incomplete input, .tema-oscuro .field-incomplete select { background-color: rgba(255, 159, 10, 0.1) !important; border-color: rgba(255, 159, 10, 0.6) !important; } .tema-oscuro tr.editable-row.recurso-no-estandarizado td, .tema-oscuro tr.requerimiento-sin-supply td { background: rgba(255, 69, 58, 0.1) !important; } .tema-oscuro tr.editable-row.recurso-no-estandarizado .recurso-input { background: rgba(255, 69, 58, 0.12) !important; border-color: var(--to-red) !important; color: var(--to-red) !important; } .tema-oscuro tr.requerimiento-sin-supply td:nth-child(5) { color: var(--to-red) !important; border-left-color: var(--to-red) !important; } .tema-oscuro tr.requerimiento-sin-supply:hover td { background: rgba(255, 69, 58, 0.16) !important; } /* Badges de estado del historial */ .tema-oscuro .estado-solicitado, .tema-oscuro .confirmacion-pendiente { background: rgba(255, 159, 10, 0.15) !important; color: var(--to-amber) !important; } .tema-oscuro .estado-aprobado, .tema-oscuro .confirmacion-confirmado { background: rgba(48, 209, 88, 0.15) !important; color: var(--to-green) !important; } .tema-oscuro .estado-atendido, .tema-oscuro .estado-en_proceso { background: rgba(10, 132, 255, 0.15) !important; color: #64b5ff !important; } .tema-oscuro .estado-rechazado { background: rgba(255, 69, 58, 0.15) !important; color: var(--to-red) !important; } .tema-oscuro .loading-cell { color: var(--to-text-2); } .tema-oscuro .loading-spinner { border-color: var(--to-line-2); border-top-color: var(--to-accent); } /* Formularios de modal compartidos */ .tema-oscuro .form-group-readonly { background: var(--to-card-2); border-left-color: var(--to-line-2); } .tema-oscuro .form-group-readonly label, .tema-oscuro .form-group-edit label { color: var(--to-text-2); } .tema-oscuro .readonly-value { color: var(--to-text); } /* ── Sugerencias (autocompletar) ────────────────────────────────────────── */ .tema-oscuro .partida-suggestions, .tema-oscuro .recurso-suggestions { background: var(--to-card-2); border: 1px solid var(--to-line-2); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); } .tema-oscuro .partida-suggestion, .tema-oscuro .recurso-suggestion { border-bottom-color: var(--to-line); } .tema-oscuro .partida-suggestion:hover, .tema-oscuro .recurso-suggestion:hover { background: rgba(10, 132, 255, 0.18); } .tema-oscuro .partida-name, .tema-oscuro .recurso-name { color: var(--to-text); } .tema-oscuro .partida-code, .tema-oscuro .recurso-codigo, .tema-oscuro .recurso-unidad { color: var(--to-text-2); } /* ── Traducción de estilos en línea ─────────────────────────────────────── */ /* Fondos claros → superficies */ .tema-oscuro [style*="background:#fff"], .tema-oscuro [style*="background: #fff"], .tema-oscuro [style*="background:white"], .tema-oscuro [style*="background: white"], .tema-oscuro [style*="background: rgb(255, 255, 255)"], .tema-oscuro [style*="background-color: rgb(255, 255, 255)"], .tema-oscuro [style*="background:#f8fafc"], .tema-oscuro [style*="background: rgb(248, 250, 252)"], .tema-oscuro [style*="background:#f9fafb"], .tema-oscuro [style*="background: rgb(249, 250, 251)"], .tema-oscuro [style*="background:#fafafa"], .tema-oscuro [style*="background: rgb(250, 250, 250)"], .tema-oscuro [style*="background:#f1f5f9"], .tema-oscuro [style*="background: rgb(241, 245, 249)"], .tema-oscuro [style*="background:#f0f4f8"], .tema-oscuro [style*="background:#f7fafc"] { background: var(--to-card) !important; } .tema-oscuro [style*="background:#f3f4f6"], .tema-oscuro [style*="background: rgb(243, 244, 246)"], .tema-oscuro [style*="background:#e5e7eb"], .tema-oscuro [style*="background:#e2e8f0"], .tema-oscuro [style*="background:#e9ecef"] { background: rgba(255, 255, 255, 0.1) !important; } /* Botones oscuros de la versión clara (#1a1a2e, #1e3a5f) → acento */ .tema-oscuro button[style*="background:#1a1a2e"], .tema-oscuro button[style*="background: rgb(26, 26, 46)"], .tema-oscuro button[style*="background:#1e3a5f"], .tema-oscuro button[style*="background: rgb(30, 58, 95)"] { background: var(--to-accent) !important; color: #fff !important; } .tema-oscuro div[style*="background:#1a1a2e"], .tema-oscuro div[style*="background:#1e3a5f"] { background: var(--to-card-2) !important; } /* Tintes semánticos */ .tema-oscuro [style*="background:#eff6ff"], .tema-oscuro [style*="background:#dbeafe"], .tema-oscuro [style*="background:#e0e7ff"] { background: rgba(10, 132, 255, 0.14) !important; } .tema-oscuro [style*="background:#fef2f2"], .tema-oscuro [style*="background:#fee2e2"], .tema-oscuro [style*="background:#fff1f2"] { background: rgba(255, 69, 58, 0.12) !important; } .tema-oscuro [style*="background:#f0fdf4"], .tema-oscuro [style*="background:#dcfce7"], .tema-oscuro [style*="background:#d1fae5"], .tema-oscuro [style*="background:#ecfdf5"] { background: rgba(48, 209, 88, 0.12) !important; } .tema-oscuro [style*="background:#fff7ed"], .tema-oscuro [style*="background:#fef9ec"], .tema-oscuro [style*="background:#fef3c7"], .tema-oscuro [style*="background:#fffbeb"], .tema-oscuro [style*="background:#fed7aa"], .tema-oscuro [style*="background:#fef5e7"] { background: rgba(255, 159, 10, 0.12) !important; } .tema-oscuro [style*="background:#faf5ff"], .tema-oscuro [style*="background:#f3e8ff"], .tema-oscuro [style*="background:#ede9fe"], .tema-oscuro [style*="background:#f5f3ff"], .tema-oscuro [style*="background:#fdf4ff"] { background: rgba(191, 90, 242, 0.14) !important; } /* Textos oscuros → jerarquía clara */ .tema-oscuro [style*="color:#1a1a2e"], .tema-oscuro [style*="color: rgb(26, 26, 46)"], .tema-oscuro [style*="color:#1e293b"], .tema-oscuro [style*="color:#1f2937"], .tema-oscuro [style*="color:#111827"], .tema-oscuro [style*="color:#2d3748"], .tema-oscuro [style*="color:#374151"], .tema-oscuro [style*="color: rgb(55, 65, 81)"], .tema-oscuro [style*="color:#1e3a5f"] { color: var(--to-text) !important; } .tema-oscuro [style*="color:#475569"], .tema-oscuro [style*="color:#4b5563"], .tema-oscuro [style*="color:#64748b"], .tema-oscuro [style*="color:#6b7280"], .tema-oscuro [style*="color: rgb(107, 114, 128)"], .tema-oscuro [style*="color:#718096"] { color: var(--to-text-2) !important; } .tema-oscuro [style*="color:#94a3b8"], .tema-oscuro [style*="color:#9ca3af"], .tema-oscuro [style*="color: rgb(156, 163, 175)"], .tema-oscuro [style*="color:#cbd5e1"], .tema-oscuro [style*="color:#d1d5db"], .tema-oscuro [style*="color:#a0aec0"] { color: var(--to-text-3) !important; } /* Semánticos */ .tema-oscuro [style*="color:#dc2626"], .tema-oscuro [style*="color:#b91c1c"], .tema-oscuro [style*="color:#991b1b"], .tema-oscuro [style*="color:#be123c"], .tema-oscuro [style*="color:#881337"] { color: var(--to-red) !important; } .tema-oscuro [style*="color:#16a34a"], .tema-oscuro [style*="color:#166534"], .tema-oscuro [style*="color:#065f46"], .tema-oscuro [style*="color:#15803d"] { color: var(--to-green) !important; } .tema-oscuro [style*="color:#b45309"], .tema-oscuro [style*="color:#c2410c"], .tema-oscuro [style*="color:#9a3412"], .tema-oscuro [style*="color:#92400e"], .tema-oscuro [style*="color:#d97706"] { color: var(--to-amber) !important; } .tema-oscuro [style*="color:#7e22ce"], .tema-oscuro [style*="color:#6d28d9"], .tema-oscuro [style*="color:#5b21b6"] { color: var(--to-purple) !important; } .tema-oscuro [style*="color:#2563eb"], .tema-oscuro [style*="color:#1d4ed8"], .tema-oscuro [style*="color:#1e40af"], .tema-oscuro [style*="color:#3730a3"] { color: #64b5ff !important; } .tema-oscuro [style*="color:#0f766e"] { color: var(--to-teal) !important; } /* Bordes claros → líneas finas */ .tema-oscuro [style*="1px solid #e5e7eb"], .tema-oscuro [style*="1px solid #d1d5db"], .tema-oscuro [style*="1px solid #e2e8f0"], .tema-oscuro [style*="1px solid #f1f5f9"], .tema-oscuro [style*="1px solid #bfdbfe"], .tema-oscuro [style*="1px solid #ddd6fe"], .tema-oscuro [style*="1px solid #fca5a5"], .tema-oscuro [style*="1px solid rgb(229, 231, 235)"], .tema-oscuro [style*="1px solid rgb(209, 213, 219)"] { border-color: var(--to-line) !important; } /* ── Modales de la app (.modal / .modal-content) dentro del tema ─────────── */ .tema-oscuro .modal-content { background: var(--to-bg) !important; color: var(--to-text); border: 1px solid var(--to-line-2); border-radius: 12px !important; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55) !important; } .tema-oscuro .modal-header { background: transparent !important; border-bottom: 1px solid var(--to-line); border-radius: 12px 12px 0 0 !important; padding: 12px 18px !important; } .tema-oscuro .modal-header h3 { color: var(--to-text) !important; } .tema-oscuro .modal-close { color: var(--to-text-2) !important; } .tema-oscuro .modal-close:hover { color: var(--to-text) !important; } .tema-oscuro .modal-footer { background: var(--to-card) !important; border-top: 1px solid var(--to-line) !important; border-radius: 0 0 12px 12px !important; } .tema-oscuro .modal-body { padding: 16px 18px !important; } .tema-oscuro .modal-footer { padding: 12px 18px !important; gap: 8px !important; } /* El botón de cerrar, como en Mi perfil: círculo discreto arriba a la derecha */ .tema-oscuro .modal-close { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.08) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 15px !important; } .tema-oscuro .modal-close:hover { background: rgba(255, 255, 255, 0.16) !important; } .tema-oscuro .modal .form-group { margin-bottom: 10px; } .tema-oscuro .modal .form-group label { color: var(--to-text-2) !important; font-size: var(--to-fs-xs) !important; font-weight: 600; display: block; margin-bottom: 4px; } .tema-oscuro .modal .form-group small, .tema-oscuro .modal small { color: var(--to-text-3) !important; } /* Datos del requerimiento: SIEMPRE texto con colores, nunca tarjeta. Etiqueta en gris, dato en claro, separados por una línea fina. */ .tema-oscuro .requerimiento-info-box { background: transparent !important; border: none !important; border-bottom: 1px solid var(--to-line) !important; border-radius: 0 !important; padding: 0 0 10px !important; margin-bottom: 12px !important; display: flex !important; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; } .tema-oscuro .requerimiento-info-box p { margin: 0 !important; } .tema-oscuro .requerimiento-info-box strong { color: var(--to-text-3) !important; font-weight: 500 !important; font-size: var(--to-fs-xs) !important; } .tema-oscuro .requerimiento-info-box p, .tema-oscuro .requerimiento-info-box span { color: var(--to-text) !important; } .tema-oscuro .modal h4 { color: var(--to-text-2) !important; border-bottom-color: var(--to-line) !important; } .tema-oscuro .badge-info { background: rgba(10, 132, 255, 0.18) !important; color: #64b5ff !important; } /* ── Graph (grafo del proceso) ─────────────────────────────────────────── */ .tema-oscuro.graph-wrap { display: flex; flex-direction: column; height: calc(100vh - 140px); } .tema-oscuro .pl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; flex: 1 1 320px; min-width: 0; } .tema-oscuro .pl-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--to-fs-xs); color: var(--to-text-2); } .tema-oscuro .pl-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .tema-oscuro .pl-hint { font-size: var(--to-fs-xs); color: var(--to-text-3); white-space: nowrap; } .tema-oscuro .graph-tipos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--to-line); } .tema-oscuro .graph-tipos-et { font-size: var(--to-fs-xs); color: var(--to-text-3); white-space: nowrap; margin-right: 2px; } .tema-oscuro .graph-tipos-et i { color: var(--to-accent); margin-right: 4px; } /* Cada tipo conserva su color: texto y borde, sin bloque claro */ .tema-oscuro .graph-tipo-btn { --g: var(--to-text-2); background: transparent; border: 1px solid color-mix(in srgb, var(--g) 55%, transparent); color: var(--g); padding: 3px 11px; border-radius: 12px; font-size: var(--to-fs-xs) !important; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .12s ease; } .tema-oscuro .graph-tipo-btn:hover { background: color-mix(in srgb, var(--g) 18%, transparent); } .tema-oscuro .graph-tipo-btn.activo { background: color-mix(in srgb, var(--g) 26%, transparent); color: #fff; } .tema-oscuro .graph-todos { --g: var(--to-text-2); } .tema-oscuro #graphNetwork { background: var(--to-bg) !important; } .tema-oscuro .pl-edge-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--to-line); font-size: var(--to-fs-xs); color: var(--to-text-2); } .tema-oscuro .graph-lectura { color: var(--to-text-3); font-weight: 600; letter-spacing: .04em; } /* ── Modal compartido de Detalles del Requerimiento (js/modal-detalles.js) ── */ .tema-oscuro.modal-overlay { background: rgba(0, 0, 0, 0.55); } .tema-oscuro .modal-title { color: var(--to-text) !important; font-size: var(--to-fs-lg) !important; font-weight: 600; } .tema-oscuro .modal-title i { color: var(--to-accent); } /* Pestañas como segmentos, no como carpetas */ .tema-oscuro .modal-tabs { background: transparent; border-bottom: 1px solid var(--to-line); gap: 4px; padding: 8px 18px 0; } .tema-oscuro .modal-tab { flex: 0 0 auto; padding: 6px 12px; border-radius: 7px 7px 0 0; color: var(--to-text-2); font-size: var(--to-fs-sm) !important; font-weight: 500; } .tema-oscuro .modal-tab i { color: var(--to-text-3); } .tema-oscuro .modal-tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--to-text); } .tema-oscuro .modal-tab.active { background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 600; border-bottom: 2px solid var(--to-accent); } .tema-oscuro .modal-tab.active i { color: var(--to-accent); } .tema-oscuro .modal-tab-content { padding: 16px 18px; } /* Fichas de datos: sin cajas claras, etiqueta en gris y dato en claro */ .tema-oscuro .detalle-section h3, .tema-oscuro .detalle-section-compact h3 { color: var(--to-text) !important; font-size: var(--to-fs) !important; border-bottom: 1px solid var(--to-line) !important; padding-bottom: 6px; } .tema-oscuro .detalle-section-compact h3 i { color: var(--to-accent); } .tema-oscuro .detalle-item { background: transparent !important; border: none !important; border-left: none !important; border-radius: 0 !important; padding: 0 !important; } .tema-oscuro .detalle-label { color: var(--to-text-3) !important; font-size: var(--to-fs-xs) !important; } .tema-oscuro .detalle-value { color: var(--to-text) !important; font-size: var(--to-fs-sm) !important; } .tema-oscuro .detalle-value.empty { color: var(--to-text-3) !important; } .tema-oscuro .detalle-value.highlight { background: rgba(10, 132, 255, 0.18) !important; color: #64b5ff !important; } .tema-oscuro .detalle-description { color: var(--to-text-2) !important; } /* Formularios y contenedores de tabla: sin fondo propio (el blanco de la versión clara hacía ilegible el contenido sobre el tema oscuro) */ .tema-oscuro .cotizacion-form { background: transparent !important; border: none !important; padding: 0 !important; } .tema-oscuro .cotizaciones-list { border: 1px solid var(--to-line) !important; border-radius: 10px; } .tema-oscuro .cotizaciones-tabla-container, .tema-oscuro .tabla-scroll-container, .tema-oscuro .cotizaciones-tabla, .tema-oscuro .search-results-info { background: transparent !important; } .tema-oscuro .tabla-scroll-container { border: 1px solid var(--to-line); border-radius: 10px; } .tema-oscuro .search-filter { height: 30px; } .tema-oscuro .clear-filter { background: rgba(255, 255, 255, 0.1) !important; color: var(--to-text) !important; border: none !important; border-radius: 6px !important; height: 30px; } .tema-oscuro .no-requerimientos, .tema-oscuro .cotizaciones-empty { color: var(--to-text-3) !important; } .tema-oscuro .form-label, .tema-oscuro .cotizacion-form label { color: var(--to-text-2) !important; } /* Zona de archivo adjunto */ .tema-oscuro .file-upload-container { background: var(--to-field) !important; border: 1px dashed var(--to-line-2) !important; border-radius: 8px !important; } .tema-oscuro .file-upload-container:hover, .tema-oscuro .file-upload-container.dragover { border-color: var(--to-accent) !important; background: rgba(10, 132, 255, 0.08) !important; } .tema-oscuro .file-upload-container.file-selected { border-color: var(--to-green) !important; background: rgba(48, 209, 88, 0.1) !important; } .tema-oscuro .file-upload-display { background: transparent !important; color: var(--to-text-2) !important; } .tema-oscuro .file-upload-display i { color: var(--to-text-3) !important; } .tema-oscuro .file-selected-name { color: var(--to-green) !important; } .tema-oscuro .btn-file-clear { background: rgba(255, 69, 58, 0.14) !important; color: var(--to-red) !important; border: none !important; } .tema-oscuro .file-upload-text { color: var(--to-text-2) !important; } /* Resumen superior del requerimiento: texto, sin caja */ .tema-oscuro #modalResumen { background: transparent !important; border: none !important; border-bottom: 1px solid var(--to-line) !important; border-radius: 0 !important; padding: 0 0 10px !important; } /* Insignias de estado de la app (.estado-badge): texto de color, sin pastilla */ .tema-oscuro .estado-badge, .tema-oscuro .com-estado-badge { background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-size: var(--to-fs-xs) !important; font-weight: 600 !important; letter-spacing: .02em; white-space: nowrap; } .tema-oscuro .estado-badge.estado-solicitado, .tema-oscuro .estado-badge.estado-sugerido, .tema-oscuro .estado-badge.estado-pendiente, .tema-oscuro .confirmacion-pendiente { color: var(--to-amber) !important; } .tema-oscuro .estado-badge.estado-confirmado, .tema-oscuro .estado-badge.estado-atendido { color: #64b5ff !important; } .tema-oscuro .estado-badge.estado-aprobado, .tema-oscuro .estado-badge.estado-pagado, .tema-oscuro .estado-badge.estado-despachado, .tema-oscuro .com-estado-badge.regular { color: var(--to-green) !important; } .tema-oscuro .estado-badge.estado-enviado { color: var(--to-teal) !important; } .tema-oscuro .estado-badge.estado-por-pagar { color: var(--to-purple) !important; } .tema-oscuro .estado-badge.estado-rechazado, .tema-oscuro .estado-badge.estado-anulado, .tema-oscuro .com-estado-badge.observado { color: var(--to-red) !important; } .tema-oscuro .estado-badge.estado-nuevo { color: var(--to-text-2) !important; } /* Estado como texto de color (sin recuadro), compartido por las tablas de módulos */ .tema-oscuro .to-estado { font-size: var(--to-fs-xs); font-weight: 600; letter-spacing: .02em; white-space: nowrap; } .tema-oscuro .to-estado--ambar { color: #ff9f0a; } .tema-oscuro .to-estado--morado { color: #bf5af2; } .tema-oscuro .to-estado--azul { color: #64b5ff; } .tema-oscuro .to-estado--verde { color: #30d158; } .tema-oscuro .to-estado--cian { color: #40c8e0; } .tema-oscuro .to-estado--indigo { color: #8e8cff; } .tema-oscuro .to-estado--rojo { color: #ff6961; } .tema-oscuro .to-estado--gris { color: var(--to-text-3); } /* ── Overlays que los módulos agregan a ────────────────────────── El selector de atributo es de descendiente, así que la raíz del overlay (que suele traer su propio fondo en línea) se pinta aquí. */ .tema-oscuro.to-flotante { background: var(--to-card-2) !important; border: 1px solid var(--to-line-2) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important; color: var(--to-text); } .tema-oscuro.to-flotante .ctx-item, .tema-oscuro.to-flotante [data-action] { color: var(--to-text) !important; } .tema-oscuro.to-flotante .ctx-item:hover, .tema-oscuro.to-flotante [data-action]:hover { background: rgba(10, 132, 255, 0.2) !important; } #modal-estandarizar.tema-oscuro .me-card { background: var(--to-bg); border: 1px solid var(--to-line-2); color: var(--to-text); } #modal-estandarizar.tema-oscuro .me-header { background: transparent; border-bottom: 1px solid var(--to-line); color: var(--to-text); } #modal-estandarizar.tema-oscuro .me-close { color: var(--to-text-2); } #modal-estandarizar.tema-oscuro .me-alias { background: rgba(255, 69, 58, 0.12); border-left-color: var(--to-red); color: var(--to-red); } #modal-estandarizar.tema-oscuro #me-results { border-color: var(--to-line); } #modal-estandarizar.tema-oscuro #me-results .me-row { border-bottom-color: var(--to-line); } #modal-estandarizar.tema-oscuro #me-results .me-row:hover { background: rgba(10, 132, 255, 0.16); } #modal-estandarizar.tema-oscuro #me-results .me-recurso { color: var(--to-text); } #modal-estandarizar.tema-oscuro #me-results .me-codigo, #modal-estandarizar.tema-oscuro #me-results .me-und, #modal-estandarizar.tema-oscuro #me-empty { color: var(--to-text-2); } #modal-estandarizar.tema-oscuro #me-results .me-precio { color: var(--to-text); }