/* MetalSoftWeb - Dark Theme Styles */ /* ============================================================ Sistema de tema claro/oscuro ============================================================ Conmutado mediante data-theme="light|dark" en . Bootstrap 5.3 recibe data-bs-theme en paralelo para que sus componentes se adapten automaticamente. La estetica oscura replica la del manual (docs/assets/css/docs.css). Las impresiones siempre fuerzan claro. */ :root { /* Light (estado por defecto, replica el aspecto previo). */ --ms-bg: #ffffff; /* body */ --ms-main-bg: #f8f9fa; /* contenido principal */ --ms-surface: #ffffff; /* cards, modales, inputs */ --ms-text: #212529; --ms-text-muted: #6c757d; --ms-border: rgba(0, 0, 0, 0.125); --ms-sidebar-bg: #212529; /* sidebar siempre oscuro en claro */ --ms-sidebar-border: #343a40; --ms-sidebar-hover: #343a40; --ms-scroll-thumb: #495057; --ms-scroll-track: #212529; --ms-accent: #0d6efd; --ms-accent-2: #8b5cf6; /* purpura para tema claro */ --ms-accent-grad: linear-gradient(135deg, #4a8df0, #3b6fc0); --ms-card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075); /* Iluminaciones (pastel en claro). */ --ms-glow-blue: rgba(91, 143, 249, 0.18); --ms-glow-purple: rgba(168, 85, 247, 0.16); } [data-theme="dark"] { /* Paleta tomada de docs/assets/css/docs.css */ --ms-bg: #0d1117; --ms-main-bg: transparent; /* deja ver el fondo del body */ --ms-surface: #11151c; --ms-text: #c9d1d9; --ms-text-muted: #8b949e; --ms-border: rgba(255, 255, 255, 0.10); --ms-sidebar-bg: #0a0e14; --ms-sidebar-border: rgba(255, 255, 255, 0.08); --ms-sidebar-hover: rgba(255, 255, 255, 0.06); --ms-scroll-thumb: rgba(255, 255, 255, 0.18); --ms-scroll-track: #0a0e14; --ms-accent: #5b8ff9; --ms-accent-2: #c46dff; --ms-accent-grad: linear-gradient(135deg, #4a8df0, #3b6fc0); --ms-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Iluminaciones (intensas en oscuro). */ --ms-glow-blue: rgba(91, 143, 249, 0.32); --ms-glow-purple: rgba(196, 109, 255, 0.26); } body { background-color: var(--ms-bg); color: var(--ms-text); } /* Ajustes globales solo en modo oscuro: cards, inputs, alerts, badges, tablas. Bootstrap 5.3 con data-bs-theme cubre la mayoria, pero hay detalles de la app que conviene reforzar. */ [data-theme="dark"] .card { background-color: var(--ms-surface); border-color: var(--ms-border); box-shadow: var(--ms-card-shadow); } [data-theme="dark"] .card-body { color: var(--ms-text); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .input-group-text { background-color: var(--ms-surface); color: var(--ms-text); border-color: var(--ms-border); } [data-theme="dark"] .form-control::placeholder { color: var(--ms-text-muted); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--ms-surface); color: var(--ms-text); border-color: var(--ms-accent); box-shadow: 0 0 0 0.2rem rgba(91, 143, 249, 0.25); } [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--ms-text); --bs-table-border-color: var(--ms-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .text-muted { color: var(--ms-text-muted) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-end, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start { border-color: var(--ms-border) !important; } [data-theme="dark"] .dropdown-menu { background-color: var(--ms-surface); border-color: var(--ms-border); } [data-theme="dark"] .dropdown-item { color: var(--ms-text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: #fff; } [data-theme="dark"] .modal-content { background-color: var(--ms-surface); color: var(--ms-text); border-color: var(--ms-border); } [data-theme="dark"] .list-group-item { background-color: transparent; color: var(--ms-text); border-color: var(--ms-border); } [data-theme="dark"] hr { border-color: var(--ms-border); } /* Iluminaciones moradas/azules estilo manual. Activo en ambos temas; las intensidades vienen de --ms-glow-* segun tema. */ .ms-hero-glow { position: relative; overflow: hidden; isolation: isolate; } .ms-hero-glow::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 20% 30%, var(--ms-glow-blue), transparent 60%), radial-gradient(ellipse 60% 50% at 80% 70%, var(--ms-glow-purple), transparent 60%); opacity: 1; transition: opacity 0.3s ease; } .ms-hero-glow > * { position: relative; z-index: 1; } /* Iluminaciones a pantalla completa para login y dashboard. Pseudo-elemento fijo al viewport sobre el body para que el efecto cubra toda la zona visible aunque haya scroll. Activo en ambos temas; las intensidades dependen de --ms-glow-* y del gradiente de fondo. */ [data-theme="light"] body.ms-page-dashboard, [data-theme="light"] body.ms-page-login, [data-theme="light"] body.ms-page-select-empresa { background: linear-gradient(180deg, #faf8ff 0%, #f3edff 100%); } [data-theme="dark"] body.ms-page-dashboard, [data-theme="dark"] body.ms-page-login, [data-theme="dark"] body.ms-page-select-empresa { background: linear-gradient(180deg, #0d1117 0%, #11151c 100%); } body.ms-page-dashboard::before, body.ms-page-login::before, body.ms-page-select-empresa::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 15% 25%, var(--ms-glow-blue), transparent 65%), radial-gradient(ellipse 80% 65% at 85% 75%, var(--ms-glow-purple), transparent 65%); opacity: 1; transition: opacity 0.3s ease; } @media print { body.ms-page-dashboard::before, body.ms-page-login::before, body.ms-page-select-empresa::before { display: none; } } /* La navbar y el contenido se elevan por encima del pseudo-elemento. */ body.ms-page-dashboard > nav, body.ms-page-dashboard > .container-fluid, body.ms-page-dashboard > .container, body.ms-page-login > nav, body.ms-page-login > .container-fluid, body.ms-page-login > .container, body.ms-page-select-empresa > nav, body.ms-page-select-empresa > .container-fluid, body.ms-page-select-empresa > .container { position: relative; z-index: 1; } /* En estas paginas, sidebar y main respetan transparencia para dejar ver las iluminaciones detras. */ body.ms-page-dashboard main, body.ms-page-login main, body.ms-page-select-empresa main { background-color: transparent; } /* Cards translucidas en dashboard, login y select-empresa para que las iluminaciones atraviesen los elementos. */ body.ms-page-dashboard .card, body.ms-page-login .card, body.ms-page-select-empresa .card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="light"] body.ms-page-dashboard .card, [data-theme="light"] body.ms-page-login .card, [data-theme="light"] body.ms-page-select-empresa .card { background-color: rgba(255, 255, 255, 0.72); border-color: rgba(139, 92, 246, 0.12); } [data-theme="dark"] body.ms-page-dashboard .card, [data-theme="dark"] body.ms-page-login .card, [data-theme="dark"] body.ms-page-select-empresa .card { background-color: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } /* Icono del login con gradiente azul -> purpura (ambos temas). */ .ms-hero-icon { background: linear-gradient(135deg, #4a8df0, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } [data-theme="dark"] .ms-hero-icon { background: linear-gradient(135deg, #4a8df0, #c46dff); -webkit-background-clip: text; background-clip: text; } /* Boton primario del login con gradiente y glow (ambos temas). */ .ms-hero-cta { background: var(--ms-accent-grad); border: none; box-shadow: 0 8px 22px rgba(139, 92, 246, 0.28); } .ms-hero-cta:hover, .ms-hero-cta:focus { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(139, 92, 246, 0.42); } [data-theme="dark"] .ms-hero-cta { box-shadow: 0 8px 22px rgba(74, 141, 240, 0.35); } [data-theme="dark"] .ms-hero-cta:hover, [data-theme="dark"] .ms-hero-cta:focus { box-shadow: 0 10px 28px rgba(74, 141, 240, 0.5); } /* Card del login translucida (ambos temas). */ [data-theme="light"] .ms-hero-card { background-color: rgba(255, 255, 255, 0.78); border: 1px solid rgba(139, 92, 246, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(139, 92, 246, 0.10); } [data-theme="dark"] .ms-hero-card { background-color: rgba(255, 255, 255, 0.03); border: 1px solid var(--ms-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Boton toggle de tema en la navbar. */ #ms-theme-toggle { line-height: 1; } #ms-theme-toggle i { font-size: 1rem; } /* ============================================================ Producto Grafico (designer) en modo oscuro ============================================================ El canvas debe permanecer blanco para que las cotas (#333) y el dibujo se vean correctamente. Se enmarca con un borde y un glow morado/azul para integrarlo con la estetica dark sin perder legibilidad. */ [data-theme="dark"] #carpentryCanvas, [data-theme="dark"] #productCanvas { background-color: #ffffff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(196, 109, 255, 0.35), 0 4px 18px rgba(91, 143, 249, 0.18); } [data-theme="dark"] #canvasContainer { background-color: transparent; } [data-theme="dark"] .designer-card { border-color: var(--ms-border) !important; background-color: var(--ms-surface); } [data-theme="dark"] .designer-card:hover { box-shadow: 0 4px 18px rgba(196, 109, 255, 0.18) !important; } [data-theme="dark"] .designer-card .card-header { background: linear-gradient(to bottom, var(--ms-surface), rgba(255, 255, 255, 0.02)) !important; border-bottom-color: var(--ms-border); } [data-theme="dark"] .designer-card .card-footer.bg-white { background-color: var(--ms-surface) !important; color: var(--ms-text); border-top-color: var(--ms-border); } /* Neutralizar dark theme al imprimir: variables a valores claros y blindar fondos. print.css ya usa !important en lo critico, esto evita regresiones futuras. */ @media print { :root, [data-theme="dark"] { --ms-bg: #ffffff; --ms-main-bg: #ffffff; --ms-surface: #ffffff; --ms-text: #000000; --ms-text-muted: #555555; --ms-border: #cccccc; } body { background: #ffffff !important; color: #000000 !important; } } /* Sidebar */ .sidebar { position: sticky; top: 0; height: calc(100vh - 56px); background-color: var(--ms-sidebar-bg); border-right: 1px solid var(--ms-sidebar-border); overflow-y: auto; } /* Bootstrap aplica `background-color: transparent !important` y border-width:0 a `.offcanvas-md` a partir de md, sobrescribiendo el fondo oscuro propio del sidebar. Restauramos ambos con la misma especificidad. */ .sidebar.offcanvas-md { background-color: var(--ms-sidebar-bg) !important; border-right: 1px solid var(--ms-sidebar-border) !important; } /* En movil el sidebar actua como offcanvas: panel deslizable de ancho fijo. */ @media (max-width: 767.98px) { .sidebar.offcanvas-md { width: 280px; height: 100vh; position: fixed; } .sidebar.offcanvas-md .sidebar-sticky { position: static; height: auto; } } .sidebar .nav-link { color: #adb5bd; padding: 0.6rem 1rem; border-radius: 0; transition: background-color 0.15s, color 0.15s; } .sidebar .nav-link:hover { color: #ffffff; background-color: var(--ms-sidebar-hover); } .sidebar .nav-link.active { color: #ffffff; background-color: #0d6efd; } .sidebar .nav-link.disabled { color: #6c757d; } .sidebar .nav-link i { width: 20px; text-align: center; } .sidebar .nav-header { color: #6c757d; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 1rem 0.3rem 1rem; font-weight: 600; list-style: none; } /* Cabeceras colapsables: cursor, chevron, hover */ .sidebar .nav-header.collapsible-header { cursor: pointer; user-select: none; display: flex; align-items: center; transition: color 0.15s; } .sidebar .nav-header.collapsible-header:hover { color: #adb5bd; } .sidebar .nav-header .section-chevron { font-size: 0.7rem; transition: transform 0.2s; opacity: 0.7; } .sidebar .nav-header.collapsed .section-chevron { transform: rotate(-90deg); } /* Recuadro de cada seccion: linea blanca tenue con bordes redondeados. La cabecera pinta top+lados; los items del grupo heredan los lados; el ultimo item cierra el fondo. Si la seccion esta colapsada, la cabecera cierra tambien por debajo. */ .sidebar .nav-header.collapsible-header { margin: 0.5rem 0.5rem 0 0.5rem; padding: 0.5rem 0.75rem 0.3rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.18); border-bottom: none; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: rgba(255, 255, 255, 0.02); } .sidebar .nav-header.collapsible-header.collapsed { border-bottom: 1px solid rgba(255, 255, 255, 0.18); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin-bottom: 0.25rem; } .sidebar .nav-item.section-item { margin-left: 0.5rem; margin-right: 0.5rem; border-left: 1px solid rgba(255, 255, 255, 0.18); border-right: 1px solid rgba(255, 255, 255, 0.18); } .sidebar .nav-item.section-item.section-last { border-bottom: 1px solid rgba(255, 255, 255, 0.18); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding-bottom: 0.25rem; margin-bottom: 0.25rem; } /* Los nav-link dentro de una seccion no deben tocar los bordes del recuadro. */ .sidebar .nav-item.section-item .nav-link { border-radius: 0; } /* Dashboard + boton Contraer/Expandir todo en la misma fila, sin empujar el resto del menu hacia abajo. */ .sidebar .nav-item-with-toggle { display: flex; align-items: center; } .sidebar .nav-item-with-toggle .nav-link { flex: 1 1 auto; /* ocupa todo el ancho disponible hasta el boton */ } .sidebar .sidebar-toggle-all { flex: 0 0 auto; background-color: transparent; border: none; color: #6c757d; padding: 0.25rem 0.5rem; margin-right: 0.5rem; line-height: 1; border-radius: 4px; transition: background-color 0.15s, color 0.15s; cursor: pointer; } .sidebar .sidebar-toggle-all:hover { background-color: var(--ms-sidebar-hover); color: #ffffff; } .sidebar .sidebar-toggle-all i { font-size: 0.95rem; } .sidebar .nav-subheader { color: #8a94a0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.6rem 1rem 0.25rem 1rem; margin-top: 0.4rem; font-weight: 500; list-style: none; border-top: 1px solid rgba(0, 0, 0, 0.08); } /* Main content area */ main { background-color: var(--ms-main-bg); min-height: calc(100vh - 56px); } /* Card styles */ .card-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; } .card-icon .display-6 { font-size: 1.8rem; } /* Login page */ .card { border-radius: 0.75rem; } /* Tables */ .table th { font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.03em; } /* Badges */ .badge { font-weight: 500; } /* Line item image thumbnails */ .line-img-thumb { max-width: 70px; max-height: 55px; object-fit: contain; border: 1px solid #dee2e6; border-radius: 4px; background: #fff; padding: 2px; transition: transform 0.15s; } .line-img-thumb:hover { transform: scale(1.1); border-color: #0d6efd; box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25); } /* Scrollbar styling for sidebar */ .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background-color: var(--ms-scroll-thumb); border-radius: 3px; } .sidebar::-webkit-scrollbar-track { background-color: var(--ms-scroll-track); } /* ── Designer: aspecto profesional ─────────────────────── */ .designer-card { border: 1px solid rgba(0, 0, 0, 0.08) !important; transition: box-shadow 0.15s; } .designer-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important; } .designer-card .card-header { background: linear-gradient(to bottom, #ffffff, #f8f9fa) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .panel-chevron { transition: transform 0.2s ease; font-size: 0.75rem; } .card-header[aria-expanded="false"] .panel-chevron, .card-header.collapsed .panel-chevron { transform: rotate(-90deg); } /* Panel de precios */ #pricingPanel .table td { padding: 0.15rem 0.3rem; vertical-align: middle; } #pricingPanel .pricing-subtotal td { border-top: 1px solid #dee2e6; padding-top: 0.4rem; } #pricingPanel .pricing-dto td { color: #dc3545; } #pricingPanel .pricing-total-precio td { border-top: 2px solid #0d6efd; padding-top: 0.5rem; } #pricingPanel .pricing-total-importe { background-color: #e8f0fe; border-radius: 4px; } #pricingPanel .pricing-total-importe td { font-size: 1.05rem; font-weight: 700; padding: 0.45rem 0.3rem; color: #0a58ca; } #totalPrecioInput { font-weight: 600; text-align: right; } #totalPrecioInput.manual-override { border-color: #ffc107; background-color: #fff8e1; color: #856404; } /* Boton calcular prominente */ #btnRecalculate { min-width: 130px; font-weight: 600; letter-spacing: 0.02em; } /* Fila compacta barrotillos + extras */ .designer-actions-row .btn { font-size: 0.8rem; } /* Formula editor - parameter detection */ .formula-params-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; } .formula-params-badges .badge { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.02em; } .formula-params-badges .param-letter { font-weight: 700; font-family: monospace; } input.has-formula-params { border-color: #0dcaf0 !important; box-shadow: 0 0 0 0.15rem rgba(13, 202, 240, 0.15); } input.has-formula-params:focus { border-color: #0dcaf0; box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25); } /* ============================================================ Sistema de colores por tipo de elemento (cabeceras de panel) ============================================================ Los colores de tipo reproducen las mismas clases Bootstrap que los badges de las lineas del presupuesto (detail.html), para que el usuario asocie rapidamente el color con el tipo de elemento. Las categorias contextuales se usan para paneles sin tipo directo equivalente (estructura, fabricacion, economico, configuracion). */ :root { --tipo-perfil: #78909c; --tipo-accesorio: #0d6efd; --tipo-cristal: #198754; --tipo-persiana: #dc3545; --tipo-proddesp: #ffc107; --tipo-prodtablas: #ff9800; --tipo-prodgrafico: #e040fb; --tipo-prodcomp: #00bcd4; --tipo-otros: #f57c00; --tipo-stock: #6f42c1; --cat-estructura: #455a64; --cat-fabricacion: #795548; --cat-economico: #37474f; --cat-config: #607d8b; /* Overlay de gradiente que se apila sobre cualquier color base para dar a las cabeceras un acabado 3D sutil (mas claro arriba, mas oscuro abajo). Se usa en las reglas .panel-header--* y .page-banner--*. */ --header-gradient-overlay: linear-gradient( 180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.22) ); } /* Clases de cabecera de panel. Se aplican sobre .card-header y anulan cualquier bg-* de Bootstrap (por eso el !important en background-color). */ .card-header.panel-header--perfil, .card-header.panel-header--accesorio, .card-header.panel-header--cristal, .card-header.panel-header--persiana, .card-header.panel-header--prodtablas, .card-header.panel-header--prodgrafico, .card-header.panel-header--prodcomp, .card-header.panel-header--estructura, .card-header.panel-header--fabricacion, .card-header.panel-header--economico, .card-header.panel-header--config, .card-header.panel-header--otros { color: #fff; border-bottom-color: rgba(0, 0, 0, 0.15); } /* Cada regla apila dos capas de background: el overlay de gradiente (capa superior, semi-transparente) sobre el color solido base. Se usa `background` shorthand con !important para sobrescribir gradientes opacos de otras reglas (.designer-card tiene un linear-gradient blanco que taparia un background- color solido). */ .card-header.panel-header--perfil { background: var(--header-gradient-overlay), var(--tipo-perfil) !important; } .card-header.panel-header--accesorio { background: var(--header-gradient-overlay), var(--tipo-accesorio) !important; } .card-header.panel-header--cristal { background: var(--header-gradient-overlay), var(--tipo-cristal) !important; } .card-header.panel-header--persiana { background: var(--header-gradient-overlay), var(--tipo-persiana) !important; } .card-header.panel-header--prodtablas { background: var(--header-gradient-overlay), var(--tipo-prodtablas) !important; } .card-header.panel-header--prodgrafico { background: var(--header-gradient-overlay), var(--tipo-prodgrafico) !important; } .card-header.panel-header--prodcomp { background: var(--header-gradient-overlay), var(--tipo-prodcomp) !important; } .card-header.panel-header--estructura { background: var(--header-gradient-overlay), var(--cat-estructura) !important; } .card-header.panel-header--fabricacion { background: var(--header-gradient-overlay), var(--cat-fabricacion) !important; } .card-header.panel-header--economico { background: var(--header-gradient-overlay), var(--cat-economico) !important; } .card-header.panel-header--config { background: var(--header-gradient-overlay), var(--cat-config) !important; } .card-header.panel-header--otros { background: var(--header-gradient-overlay), var(--tipo-otros) !important; } /* ProdDesp usa amarillo: el texto debe ser oscuro por contraste. */ .card-header.panel-header--proddesp { background: var(--header-gradient-overlay), var(--tipo-proddesp) !important; color: #212529; border-bottom-color: rgba(0, 0, 0, 0.15); } /* Iconos y chevron dentro de una cabecera coloreada heredan el color del texto para mantener el contraste. */ .card-header[class*="panel-header--"] .bi, .card-header[class*="panel-header--"] .panel-chevron, .card-header[class*="panel-header--"] h6, .card-header[class*="panel-header--"] h5, .card-header[class*="panel-header--"] h4 { color: inherit; } /* Cabeceras de modal coloreadas: mismas variables que .panel-header--, con boton de cierre en blanco para asegurar contraste. */ .modal-header.modal-header--perfil { background: var(--header-gradient-overlay), var(--tipo-perfil); color: #fff; } .modal-header.modal-header--accesorio { background: var(--header-gradient-overlay), var(--tipo-accesorio); color: #fff; } .modal-header.modal-header--cristal { background: var(--header-gradient-overlay), var(--tipo-cristal); color: #fff; } .modal-header.modal-header--persiana { background: var(--header-gradient-overlay), var(--tipo-persiana); color: #fff; } .modal-header.modal-header--prodtablas { background: var(--header-gradient-overlay), var(--tipo-prodtablas); color: #fff; } .modal-header.modal-header--prodgrafico { background: var(--header-gradient-overlay), var(--tipo-prodgrafico); color: #fff; } .modal-header.modal-header--prodcomp { background: var(--header-gradient-overlay), var(--tipo-prodcomp); color: #fff; } .modal-header.modal-header--estructura { background: var(--header-gradient-overlay), var(--cat-estructura); color: #fff; } .modal-header.modal-header--fabricacion { background: var(--header-gradient-overlay), var(--cat-fabricacion); color: #fff; } .modal-header.modal-header--economico { background: var(--header-gradient-overlay), var(--cat-economico); color: #fff; } .modal-header.modal-header--config { background: var(--header-gradient-overlay), var(--cat-config); color: #fff; } .modal-header.modal-header--otros { background: var(--header-gradient-overlay), var(--tipo-otros); color: #fff; } .modal-header.modal-header--proddesp { background: var(--header-gradient-overlay), var(--tipo-proddesp); color: #212529; } /* Sobre fondo oscuro la X de Bootstrap necesita ser blanca. */ .modal-header[class*="modal-header--"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .modal-header.modal-header--proddesp .btn-close { filter: none; } .modal-header[class*="modal-header--"] .text-muted { color: rgba(255, 255, 255, 0.75) !important; } .modal-header.modal-header--proddesp .text-muted { color: rgba(0, 0, 0, 0.6) !important; } /* Banner superior de pantallas de mantenimiento (list/detail/form). Sustituye al div flex plano con titulo + botones, envolviendolo en una banda coloreada segun el tipo de elemento que maneja la pantalla. */ .page-banner { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; margin-bottom: 1rem; border-radius: 0.375rem; color: #fff; } .page-banner h1, .page-banner h2, .page-banner h3, .page-banner h4, .page-banner .bi, .page-banner small { color: inherit; } .page-banner h1, .page-banner h2, .page-banner h3, .page-banner h4 { margin-bottom: 0; } .page-banner .text-muted { color: rgba(255, 255, 255, 0.75) !important; } /* Botones dentro de cabeceras coloreadas (banner de pagina, card-header de panel o modal-header): los btn-primary azules y los outline-* se confundirian con el fondo coloreado. Se invierten a fondo/borde blanco con texto oscuro (solido) o blanco (outline). */ .page-banner .btn-primary, .card-header[class*="panel-header--"] .btn-primary, .modal-header[class*="modal-header--"] .btn-primary { background-color: #fff; border-color: #fff; color: #212529; font-weight: 500; } .page-banner .btn-primary:hover, .page-banner .btn-primary:focus, .card-header[class*="panel-header--"] .btn-primary:hover, .card-header[class*="panel-header--"] .btn-primary:focus, .modal-header[class*="modal-header--"] .btn-primary:hover, .modal-header[class*="modal-header--"] .btn-primary:focus { background-color: #f8f9fa; border-color: #f8f9fa; color: #000; box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35); } /* Botones outline dentro de cabeceras coloreadas: borde y texto blancos sobre fondo transparente. Al hacer hover, fondo blanco y texto del color original de la cabecera (heredado via currentColor no es viable aqui, asi que usamos color oscuro generico). */ .page-banner [class*="btn-outline-"], .card-header[class*="panel-header--"] [class*="btn-outline-"], .modal-header[class*="modal-header--"] [class*="btn-outline-"] { border-color: rgba(255, 255, 255, 0.85); color: #fff; background-color: transparent; } .page-banner [class*="btn-outline-"]:hover, .page-banner [class*="btn-outline-"]:focus, .card-header[class*="panel-header--"] [class*="btn-outline-"]:hover, .card-header[class*="panel-header--"] [class*="btn-outline-"]:focus, .modal-header[class*="modal-header--"] [class*="btn-outline-"]:hover, .modal-header[class*="modal-header--"] [class*="btn-outline-"]:focus { background-color: #fff; border-color: #fff; color: #212529; } /* Override para cabeceras AMARILLAS (proddesp): sobre fondo claro, los botones blancos no contrastan. Se usan bordes/texto oscuros y el hover invierte a fondo oscuro con texto amarillo. */ .page-banner--proddesp .btn-primary, .card-header.panel-header--proddesp .btn-primary, .modal-header.modal-header--proddesp .btn-primary { background-color: #212529; border-color: #212529; color: #fff; } .page-banner--proddesp .btn-primary:hover, .page-banner--proddesp .btn-primary:focus, .card-header.panel-header--proddesp .btn-primary:hover, .card-header.panel-header--proddesp .btn-primary:focus, .modal-header.modal-header--proddesp .btn-primary:hover, .modal-header.modal-header--proddesp .btn-primary:focus { background-color: #000; border-color: #000; color: #fff; box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25); } .page-banner--proddesp [class*="btn-outline-"], .card-header.panel-header--proddesp [class*="btn-outline-"], .modal-header.modal-header--proddesp [class*="btn-outline-"] { border-color: rgba(0, 0, 0, 0.65); color: #212529; background-color: transparent; } .page-banner--proddesp [class*="btn-outline-"]:hover, .page-banner--proddesp [class*="btn-outline-"]:focus, .card-header.panel-header--proddesp [class*="btn-outline-"]:hover, .card-header.panel-header--proddesp [class*="btn-outline-"]:focus, .modal-header.modal-header--proddesp [class*="btn-outline-"]:hover, .modal-header.modal-header--proddesp [class*="btn-outline-"]:focus { background-color: #212529; border-color: #212529; color: #ffc107; } .page-banner--perfil { background: var(--header-gradient-overlay), var(--tipo-perfil); } .page-banner--accesorio { background: var(--header-gradient-overlay), var(--tipo-accesorio); } .page-banner--cristal { background: var(--header-gradient-overlay), var(--tipo-cristal); } .page-banner--persiana { background: var(--header-gradient-overlay), var(--tipo-persiana); } .page-banner--prodtablas { background: var(--header-gradient-overlay), var(--tipo-prodtablas); } .page-banner--prodgrafico { background: var(--header-gradient-overlay), var(--tipo-prodgrafico); } .page-banner--prodcomp { background: var(--header-gradient-overlay), var(--tipo-prodcomp); } .page-banner--otros { background: var(--header-gradient-overlay), var(--tipo-otros); } .page-banner--stock { background: var(--header-gradient-overlay), var(--tipo-stock); } /* ProdDesp usa amarillo: texto oscuro por contraste. */ .page-banner--proddesp { background: var(--header-gradient-overlay), var(--tipo-proddesp); color: #212529; } .page-banner--proddesp .text-muted { color: rgba(0, 0, 0, 0.6) !important; } /* ============================================================ Modo monocromo (body.cabeceras-mono): todas las cabeceras usan un gris neutro unico (--cat-estructura) en vez de los colores por tipo. El usuario activa/desactiva esto desde Configuracion > General > Apariencia. ============================================================ */ .cabeceras-mono .card-header[class*="panel-header--"], .cabeceras-mono .card-header.panel-header--proddesp { background: var(--header-gradient-overlay), var(--cat-estructura) !important; color: #fff !important; } .cabeceras-mono [class*="page-banner--"], .cabeceras-mono .page-banner--proddesp { background: var(--header-gradient-overlay), var(--cat-estructura); color: #fff; } .cabeceras-mono [class*="page-banner--"] .text-muted, .cabeceras-mono .page-banner--proddesp .text-muted { color: rgba(255, 255, 255, 0.75) !important; } .cabeceras-mono .modal-header[class*="modal-header--"], .cabeceras-mono .modal-header.modal-header--proddesp { background: var(--header-gradient-overlay), var(--cat-estructura); color: #fff; } .cabeceras-mono .modal-header.modal-header--proddesp .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* En monocromo los overrides de botones para proddesp (amarillo) no aplican porque el fondo ya es gris oscuro. Los botones genericos (blanco sobre oscuro) funcionan bien por defecto. */ .cabeceras-mono .page-banner--proddesp .btn-primary, .cabeceras-mono .card-header.panel-header--proddesp .btn-primary, .cabeceras-mono .modal-header.modal-header--proddesp .btn-primary { background-color: #fff; border-color: #fff; color: #212529; } .cabeceras-mono .page-banner--proddesp [class*="btn-outline-"], .cabeceras-mono .card-header.panel-header--proddesp [class*="btn-outline-"], .cabeceras-mono .modal-header.modal-header--proddesp [class*="btn-outline-"] { border-color: rgba(255, 255, 255, 0.85); color: #fff; background-color: transparent; } /* === Panel lateral pineable de Mediciones === */ :root { --ms-pinned-panel-width: 320px; } .ms-pin-btn { color: var(--bs-secondary-color); border: 0; background: transparent; transition: transform 0.15s ease, color 0.15s ease; } .ms-pin-btn:hover { transform: rotate(-15deg); color: var(--bs-info); } .ms-pin-btn[aria-pressed="true"] { color: var(--bs-info); transform: rotate(-30deg); } @media (min-width: 768px) { body.has-pinned-panel main { flex: 0 0 calc(83.33333333% - var(--ms-pinned-panel-width)); max-width: calc(83.33333333% - var(--ms-pinned-panel-width)); margin-left: 0 !important; margin-right: 0 !important; transition: flex-basis 0.3s ease, max-width 0.3s ease; } .offcanvas.is-pinned { width: var(--ms-pinned-panel-width) !important; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08); } body.has-pinned-panel .offcanvas-backdrop { display: none !important; } } [data-theme="dark"] .offcanvas.is-pinned { box-shadow: -2px 0 8px rgba(0, 0, 0, 0.5); } @media (max-width: 767.98px) { #medicionesPinBtn { display: none; } }