/* * RXN Tiendas CSS Variables Map * Provee la persistencia estructural via CSS Variables Custom properties */ /* Responsive general: evita que cualquier contenido (tabla ancha, card con inline-width, row con negative margins mal contenidos) fuerce scroll horizontal a nivel de body. El scroll horizontal legítimo sigue funcionando dentro de `.table-responsive` y otros wrappers con overflow propio. */ html, body { overflow-x: clip; max-width: 100vw; } :root { --bg-color: #ffffff; --text-color: #333333; --text-muted: #6c757d; --surface-color: #f8f9fa; --surface-hover: #e9ecef; --border-color: #dee2e6; --input-bg: #ffffff; --input-color: #333333; --input-border: #ced4da; --input-placeholder: #6c757d; --card-bg: #ffffff; --table-bg: transparent; --table-head-bg: #f8f9fa; --rxn-shell-gutter: 1.5rem; } html[data-theme="dark"] { --bg-color: #1a1d20; --text-color: #e9ecef; --text-muted: #adb5bd; --surface-color: #212529; --surface-hover: #2c3034; --border-color: #343a40; --input-bg: #2b3035; --input-color: #e9ecef; --input-border: #495057; --input-placeholder: #adb5bd; --card-bg: #212529; --table-bg: transparent; --table-head-bg: #2c3034; } html[data-theme="dark"] body { background-color: var(--bg-color) !important; color: var(--text-color) !important; } /* Temas Pastel — 4 paletas suaves, cálidas y frescas. Todas mantienen contraste alto para legibilidad (text sobre bg cumple WCAG AA). - pastel (legacy = durazno/arena, default cálido) - pastel-rosa (rosado tenue, femenino) - pastel-verde (verde menta, natural) - pastel-azul (celeste claro, fresco/profesional) */ html[data-theme="pastel"] { --bg-color: #faf4ec; --text-color: #4a3f35; --text-muted: #8a7a6a; --surface-color: #f5ebdd; --surface-hover: #efe1cd; --border-color: #e3d0b8; --input-bg: #fffaf3; --input-color: #4a3f35; --input-border: #d9c4a8; /* Sesión 239 — era #a89684: 2,75:1 sobre el campo. Ver la nota de los placeholders pastel al final del bloque de temas. */ --input-placeholder: #796755; --card-bg: #fbf3e7; --table-bg: transparent; --table-head-bg: #f4e6d2; } html[data-theme="pastel-rosa"] { --bg-color: #fdf2f8; --text-color: #5b2c45; --text-muted: #9a6680; --surface-color: #faeaf2; --surface-hover: #f4d9e7; --border-color: #e6bfd4; --input-bg: #fff6fa; --input-color: #5b2c45; --input-border: #d9a8c4; /* Sesión 239 — era #b88aa3: 2,75:1 sobre el campo. */ --input-placeholder: #935979; --card-bg: #fceff5; --table-bg: transparent; --table-head-bg: #f5dde9; } html[data-theme="pastel-verde"] { --bg-color: #f1f7f1; --text-color: #2d4a35; --text-muted: #6e8a76; --surface-color: #e3eee5; --surface-hover: #d2e3d6; --border-color: #c1d9c6; --input-bg: #f7fbf7; --input-color: #2d4a35; --input-border: #b3cbb9; /* Sesión 239 — era #8aa593: 2,55:1 sobre el campo, el peor de los seis. */ --input-placeholder: #566f5e; --card-bg: #ecf4ed; --table-bg: transparent; --table-head-bg: #dceede; } html[data-theme="pastel-azul"] { --bg-color: #f0f6fc; --text-color: #22364e; --text-muted: #6a7e96; --surface-color: #e3ecf6; --surface-hover: #d2dfee; --border-color: #c1cee0; --input-bg: #f7faff; --input-color: #22364e; --input-border: #b3c2d7; /* Sesión 239 — era #8a9aaf: 2,74:1 sobre el campo. */ --input-placeholder: #596b82; --card-bg: #ecf2f9; --table-bg: transparent; --table-head-bg: #dde7f2; } html[data-theme="pastel"] body, html[data-theme="pastel-rosa"] body, html[data-theme="pastel-verde"] body, html[data-theme="pastel-azul"] body { background-color: var(--bg-color) !important; color: var(--text-color) !important; } /* ============================================================================ * Puente con el modo de color nativo de Bootstrap 5.3 (sesión 153). * * El `` ahora emite `data-bs-theme` además de `data-theme` (ver * UIHelper::bootstrapColorMode). Con eso Bootstrap ya resuelve solo TODOS sus * componentes — alerts, toasts, popovers, tooltips, accordions, list-groups, * offcanvas, nav-tabs, form controls — que hasta ahora salían con la paleta * clara de fábrica aunque el usuario tuviera el tema oscuro puesto. * * Lo que queda acá es sólo el AJUSTE FINO: que Bootstrap use la paleta EXACTA de * cada tema y no su gris genérico. Se deriva de las variables semánticas que cada * bloque `html[data-theme]` ya define, así que un tema nuevo hereda esto gratis * con sólo declarar sus variables — no hay que repetir el bloque por tema. * * NO agregar acá overrides componente-por-componente: si algo se ve mal, casi * seguro es que falta mapear una variable `--bs-*` de superficie, no que haga * falta un selector nuevo. Esa fue justamente la deuda que este bloque salda. * ========================================================================== */ html[data-theme] { --bs-body-bg: var(--bg-color); --bs-body-color: var(--text-color); --bs-secondary-color: var(--text-muted); --bs-border-color: var(--border-color); --bs-border-color-translucent: var(--border-color); /* Superficies elevadas: modales, offcanvas, popovers, toasts, accordions, list-groups y cards comparten el mismo fondo de tarjeta del tema. */ --bs-modal-bg: var(--card-bg); --bs-modal-header-border-color: var(--border-color); --bs-modal-footer-border-color: var(--border-color); --bs-offcanvas-bg: var(--card-bg); --bs-offcanvas-color: var(--text-color); --bs-offcanvas-border-color: var(--border-color); --bs-popover-bg: var(--card-bg); --bs-popover-border-color: var(--border-color); --bs-popover-header-bg: var(--surface-color); --bs-popover-body-color: var(--text-color); --bs-toast-bg: var(--card-bg); --bs-toast-color: var(--text-color); --bs-toast-border-color: var(--border-color); --bs-toast-header-bg: var(--surface-color); --bs-toast-header-color: var(--text-color); --bs-accordion-bg: var(--card-bg); --bs-accordion-color: var(--text-color); --bs-accordion-border-color: var(--border-color); --bs-accordion-btn-bg: var(--surface-color); --bs-accordion-btn-color: var(--text-color); --bs-list-group-bg: var(--card-bg); --bs-list-group-color: var(--text-color); --bs-list-group-border-color: var(--border-color); --bs-list-group-action-hover-bg: var(--surface-hover); --bs-list-group-action-hover-color: var(--text-color); --bs-card-bg: var(--card-bg); --bs-card-color: var(--text-color); --bs-card-border-color: var(--border-color); --bs-card-cap-bg: var(--surface-color); /* Controles de formulario: el placeholder es el que más se pierde de vista. */ --bs-form-control-bg: var(--input-bg); --bs-form-control-color: var(--input-color); --bs-form-control-border-color: var(--input-border); --bs-secondary-bg: var(--surface-color); --bs-tertiary-bg: var(--surface-hover); /* Navegación por pestañas y paginación. */ --bs-nav-tabs-border-color: var(--border-color); --bs-nav-tabs-link-active-bg: var(--card-bg); --bs-nav-tabs-link-active-color: var(--text-color); --bs-nav-tabs-link-active-border-color: var(--border-color); --bs-nav-tabs-link-hover-border-color: var(--border-color); --bs-nav-link-color: var(--text-color); --bs-pagination-bg: var(--card-bg); --bs-pagination-color: var(--text-color); --bs-pagination-border-color: var(--border-color); --bs-pagination-hover-bg: var(--surface-hover); --bs-pagination-hover-color: var(--text-color); --bs-pagination-disabled-bg: var(--surface-color); --bs-pagination-disabled-color: var(--text-muted); /* Barras de progreso y tooltips. */ --bs-progress-bg: var(--surface-hover); --bs-tooltip-bg: var(--surface-color); --bs-tooltip-color: var(--text-color); --bs-tooltip-opacity: 1; /* Dropdowns: ya estaban cubiertos por selector más abajo, pero declararlos acá los ata a la misma paleta y evita que se desincronicen. */ --bs-dropdown-bg: var(--card-bg); --bs-dropdown-color: var(--text-color); --bs-dropdown-border-color: var(--border-color); --bs-dropdown-link-color: var(--text-color); --bs-dropdown-link-hover-bg: var(--surface-hover); --bs-dropdown-link-hover-color: var(--text-color); --bs-dropdown-divider-bg: var(--border-color); } /* `.btn-light` tiene el fondo blanco CLAVADO (#f8f9fa) y no lo mueve el modo de color de Bootstrap: en tema oscuro quedaba un botón blanco sobre fondo negro. Es el caso de la chinche de Pendientes (`.rxn-pend-pin`), pero son 40 usos en 33 archivos, así que se arregla acá y no en cada vista. Ojo con la confusión: `.bg-light` SÍ estaba contemplado más abajo — `.btn-light` es otra clase y quedó afuera. La regla es agnóstica al tema a propósito: `:root` define `--surface-color: #f8f9fa`, que es EXACTAMENTE el blanco original, así que en tema claro no cambia un pixel; los pasteles ganan su tinte y el oscuro se arregla. */ html[data-theme] .btn-light { --bs-btn-bg: var(--surface-color); --bs-btn-color: var(--text-color); --bs-btn-border-color: var(--border-color); --bs-btn-hover-bg: var(--surface-hover); --bs-btn-hover-color: var(--text-color); --bs-btn-hover-border-color: var(--border-color); --bs-btn-active-bg: var(--surface-hover); --bs-btn-active-color: var(--text-color); --bs-btn-active-border-color: var(--border-color); --bs-btn-disabled-bg: var(--surface-color); --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-border-color: var(--border-color); } /* El placeholder no toma la variable de Bootstrap en 5.3 (usa ::placeholder directo), así que va por selector para que siga el tema. */ html[data-theme] .form-control::placeholder, html[data-theme] .form-select::placeholder { color: var(--input-placeholder); opacity: 1; } /* `bg-warning` (#ffc107) y `bg-info` (#0dcaf0) son fondos CLAROS por definición y NO cambian con el modo de color. En tema oscuro el texto salía claro sobre amarillo: medido, contraste 17 sobre 100. El resto de los `bg-*` sólidos son suficientemente oscuros, y `.bg-light` ya está remapeado a superficie oscura más abajo. Necesita `!important` y esta especificidad por un choque REAL: más abajo vive `html[data-theme="dark"] .text-dark { color: var(--text-color) !important }`, que invierte `text-dark` a claro en tema oscuro. Esa regla está bien en general — `text-dark` suelto sobre el fondo de la página debe invertirse — pero se equivoca justo cuando `text-dark` acompaña a propósito a un fondo claro, que es el caso de ``. La vista estaba bien escrita; la inversión global era la que no distinguía los dos casos. Agnóstico al tema a propósito: en los claros el texto ya era oscuro, así que no cambia nada, y el problema no vuelve si se suma un tema nuevo. */ .badge.bg-warning, .badge.bg-info, html[data-theme] .bg-warning.text-dark, html[data-theme] .bg-info.text-dark, html[data-theme] .btn-warning.text-dark, html[data-theme] .btn-info.text-dark, /* 🔴 Sesión 239 — a esta lista le faltaban los `-subtle`, y el hueco costó caro. Los `bg-*-subtle` de Bootstrap 5.3 siguen `data-bs-theme`, que este proyecto NO setea (usa `data-theme`): o sea que **son fondos claros fijos**, exactamente el caso que esta excepción viene a cubrir. Al no estar nombrados, el texto se invertía a claro sobre un fondo que seguía claro. Medido en el hilo del portal de tickets, tema oscuro: `bg-info-subtle text-dark` daba **1,02:1** — 1,00 es texto y fondo idénticos. Un cliente abría su ticket y la respuesta de la IA no estaba, literalmente. Se enumeran los ocho `-subtle` de Bootstrap y no sólo el que falló: el defecto no era de `info`, era de la familia. Es la lección de la propia lista — *una lista de excepciones es una copia del criterio*, y una copia incompleta miente. */ html[data-theme] .bg-primary-subtle.text-dark, html[data-theme] .bg-secondary-subtle.text-dark, html[data-theme] .bg-success-subtle.text-dark, html[data-theme] .bg-danger-subtle.text-dark, html[data-theme] .bg-warning-subtle.text-dark, html[data-theme] .bg-info-subtle.text-dark, html[data-theme] .bg-light-subtle.text-dark, html[data-theme] .bg-dark-subtle.text-dark { color: #212529 !important; } /* Base Utility Classes Theme Mapping */ .rxn-surface { background-color: var(--surface-color); color: var(--text-color); border-color: var(--border-color); } .rxn-bg-base { background-color: var(--bg-color); } .card, .rxn-crud-card, .rxn-form-card, .rxn-module-card { background-color: var(--card-bg) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .rxn-user-menu, html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-white { background-color: var(--surface-color) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .rxn-user-menu .text-secondary { color: var(--text-color) !important; } html[data-theme="dark"] .text-dark, .rxn-text-primary { color: var(--text-color) !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--text-muted) !important; } /* Inputs Unificados */ .form-control, .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--input-color); } .form-control:focus, .form-select:focus { background-color: var(--input-bg); color: var(--input-color); } .form-control::placeholder { color: var(--input-placeholder); opacity: 1; } .form-control:disabled, .form-control[readonly] { background-color: var(--surface-color); opacity: 1; } /* Tablas Unificadas */ .table { --bs-table-bg: var(--table-bg); --bs-table-color: var(--text-color); --bs-table-border-color: var(--border-color); --bs-table-hover-bg: var(--surface-hover); color: var(--text-color); } .table thead th { background-color: var(--table-head-bg); color: var(--text-color); border-bottom-color: var(--border-color); } html[data-theme="dark"] .table-light { --bs-table-bg: var(--table-head-bg); } /* Checkboxes y Radios */ html[data-theme="dark"] .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } html[data-theme="dark"] .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; } /* User Preferences Matrix */ html[data-font="sm"] body { font-size: 0.85rem; } html[data-font="md"] body { font-size: 1rem; /* default bs5 */ } html[data-font="lg"] body { font-size: 1.15rem; } /* CRUD shared layer */ .rxn-page-shell { background-color: #f8f9fa; min-height: 100vh; } .rxn-crud-card { border: none; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .rxn-crud-toolbar { background: linear-gradient(135deg, #ffffff 0%, #f5f7fb 100%); } .rxn-crud-table th, .rxn-crud-table td { vertical-align: middle; } .rxn-sort-link { color: inherit; display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; } .rxn-sort-link:hover { color: inherit; text-decoration: underline; } .rxn-sort-indicator { min-width: 0.85rem; color: #6c757d; font-size: 0.8rem; line-height: 1; } .rxn-row-link { cursor: pointer; transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .rxn-row-link:hover { background-color: rgba(13, 110, 253, 0.06); box-shadow: inset 3px 0 0 rgba(13, 110, 253, 0.65); } .rxn-row-link:focus-visible { outline: 2px solid rgba(13, 110, 253, 0.35); outline-offset: -2px; background-color: rgba(13, 110, 253, 0.08); } .rxn-row-link .rxn-row-link-action { opacity: 0.55; border-color: transparent; min-width: 2rem; } .rxn-row-link:hover .rxn-row-link-action, .rxn-row-link:focus-visible .rxn-row-link-action { opacity: 1; } .rxn-row-chevron-col { width: 54px; text-align: center; } .rxn-row-chevron { font-size: 1rem; font-weight: 700; line-height: 1; } .rxn-empty-state { padding: 3rem 1.5rem; text-align: center; } .rxn-empty-state-icon { font-size: 2rem; } .rxn-crud-pagination-note { color: #6c757d; font-size: 0.875rem; } html[data-theme="dark"] .rxn-page-shell { background-color: var(--bg-color); } html[data-theme="dark"] .rxn-crud-toolbar { background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); } html[data-theme="dark"] .rxn-sort-indicator, html[data-theme="dark"] .rxn-crud-pagination-note { color: #adb5bd; } html[data-theme="dark"] .rxn-row-link:focus-visible { outline-color: rgba(13, 202, 240, 0.45); } html[data-theme="dark"] .rxn-row-link:hover { background-color: rgba(13, 202, 240, 0.08); box-shadow: inset 3px 0 0 rgba(13, 202, 240, 0.65); } body { overflow-x: hidden; } img, svg, video, canvas, iframe { max-width: 100%; } .rxn-page-shell .container, .rxn-page-shell .container-xl, .rxn-page-shell .container-fluid, .rxn-responsive-container { padding-left: var(--rxn-shell-gutter); padding-right: var(--rxn-shell-gutter); } .rxn-module-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .rxn-module-actions, .rxn-inline-actions, .rxn-toolbar-actions, .rxn-stack-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .rxn-toolbar-split { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .rxn-filter-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .rxn-filter-form .form-control, .rxn-filter-form .form-select, .rxn-filter-form .input-group { min-width: 0; } .rxn-filter-grow { flex: 1 1 16rem; } .rxn-filter-compact { flex: 0 0 auto; } .rxn-search-field-wrap { min-width: 12rem; } .rxn-search-input-wrap { position: relative; min-width: 0; } .rxn-search-help { margin-top: 0.5rem; } /* * Sesion 141 — el wrapper del picker (crm-picker-wrap) DEBE tener position:relative * para que el dropdown absoluto se ancle al input y no al body. Antes el dropdown * se renderizaba "en Narnia" (lejos del input visualmente) porque el ancestor * positioned mas cercano era el body. */ .crm-picker-wrap { position: relative; } .rxn-search-suggestions { position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; z-index: 30; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.85rem; background: var(--input-bg); box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12); max-height: 250px; overflow-y: auto; overflow-x: hidden; } .rxn-search-suggestion { width: 100%; border: 0; background: transparent; text-align: left; padding: 0.8rem 0.95rem; color: inherit; } .rxn-search-suggestion:hover, .rxn-search-suggestion:focus-visible, .rxn-search-suggestion.is-active { background: rgba(25, 75, 165, 0.08); } .rxn-search-suggestion small { display: block; margin-top: 0.2rem; } .rxn-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .rxn-pagination-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .rxn-pagination-wrap .pagination { flex-wrap: nowrap; } .rxn-launcher-shell { width: 100%; } .rxn-module-card { background-color: transparent !important; border: 1px solid var(--border-color); border-radius: 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-height: 150px; display: flex; flex-direction: column; justify-content: center; } .rxn-module-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-color: var(--color-primary, #6c757d); } .rxn-module-card:focus-within { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 0 0 3px rgba(13, 110, 253, 0.35); border-color: var(--color-primary, #6c757d); } .rxn-module-card .stretched-link:focus, .rxn-module-card .stretched-link:focus-visible { outline: none; } html[data-theme="dark"] .rxn-module-card:focus-within { box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 0 0 3px rgba(13, 202, 240, 0.4); } .rxn-module-icon { font-size: 2.5rem; margin-bottom: 0.5rem; color: inherit; opacity: 0.9; } .rxn-form-shell, .container.rxn-form-shell, .container-xl.rxn-form-shell, .container-lg.rxn-form-shell, .container-md.rxn-form-shell, .container-sm.rxn-form-shell { max-width: 100%; } .rxn-form-shell-sm { max-width: 460px; margin-left: auto; margin-right: auto; } .rxn-form-card { border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); } .rxn-auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 0; gap: 1rem; width: 100%; } .rxn-auth-shell > * { width: 100%; } .rxn-auth-logo { max-width: 320px; width: 100%; height: auto; object-fit: contain; } .rxn-auth-screen { position: relative; overflow: hidden; background: radial-gradient(circle at top, rgba(220, 53, 69, 0.16), transparent 32%), radial-gradient(circle at bottom right, rgba(13, 110, 253, 0.14), transparent 28%), linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%); } .rxn-auth-screen::before, .rxn-auth-screen::after { content: ""; position: absolute; border-radius: 999px; filter: blur(0); pointer-events: none; } .rxn-auth-screen::before { width: 320px; height: 320px; top: -120px; right: -80px; background: radial-gradient(circle, rgba(177, 10, 18, 0.16), rgba(177, 10, 18, 0)); } .rxn-auth-screen::after { width: 280px; height: 280px; left: -90px; bottom: -110px; background: radial-gradient(circle, rgba(13, 110, 253, 0.12), rgba(13, 110, 253, 0)); } .rxn-auth-shell { position: relative; z-index: 1; } .rxn-auth-eyebrow { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(177, 10, 18, 0.08); color: #9f0f19; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .rxn-auth-card { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); } .rxn-auth-title { color: #194ba5; letter-spacing: -0.02em; } .rxn-auth-subtitle { max-width: 26rem; margin-left: auto; margin-right: auto; } .rxn-auth-footer { color: #6c757d; } .rxn-auth-footer a { color: inherit; } .rxn-auth-footer a:hover { color: #194ba5; } .rxn-flash-banner { display: flex; align-items: flex-start; gap: 0.85rem; border-radius: 14px; border: 1px solid transparent; padding: 0.95rem 1rem; margin-bottom: 1rem; } .rxn-flash-banner .rxn-flash-icon { width: 2rem; height: 2rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 1rem; } .rxn-flash-banner-success { background: rgba(25, 135, 84, 0.08); border-color: rgba(25, 135, 84, 0.25); color: #0f5132; } .rxn-flash-banner-success .rxn-flash-icon { background: rgba(25, 135, 84, 0.14); color: #198754; } .rxn-flash-banner-warning { background: rgba(255, 193, 7, 0.10); border-color: rgba(255, 193, 7, 0.25); color: #664d03; } .rxn-flash-banner-warning .rxn-flash-icon { background: rgba(255, 193, 7, 0.18); color: #b8860b; } .rxn-flash-banner-danger { background: rgba(220, 53, 69, 0.09); border-color: rgba(220, 53, 69, 0.24); color: #842029; } .rxn-flash-banner-danger .rxn-flash-icon { background: rgba(220, 53, 69, 0.14); color: #dc3545; } .rxn-flash-banner-info { background: rgba(13, 110, 253, 0.08); border-color: rgba(13, 110, 253, 0.22); color: #084298; } .rxn-flash-banner-info .rxn-flash-icon { background: rgba(13, 110, 253, 0.14); color: #0d6efd; } .rxn-confirm-modal .modal-content { border-radius: 18px; border: 1px solid rgba(0, 0, 0, 0.08); overflow: hidden; } .rxn-confirm-modal .modal-header { border-bottom: 0; padding-bottom: 0; } .rxn-confirm-modal .rxn-confirm-badge { width: 3rem; height: 3rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; } .rxn-confirm-modal .rxn-confirm-badge-success { background: rgba(25, 135, 84, 0.12); color: #198754; } .rxn-confirm-modal .rxn-confirm-badge-warning { background: rgba(255, 193, 7, 0.15); color: #b8860b; } .rxn-confirm-modal .rxn-confirm-badge-danger { background: rgba(220, 53, 69, 0.12); color: #dc3545; } .rxn-confirm-modal .rxn-confirm-badge-info { background: rgba(13, 110, 253, 0.12); color: #0d6efd; } .rxn-confirm-modal .modal-footer { border-top: 0; } html[data-theme="dark"] .rxn-auth-screen { background: radial-gradient(circle at top, rgba(220, 53, 69, 0.2), transparent 30%), radial-gradient(circle at bottom right, rgba(13, 202, 240, 0.14), transparent 25%), linear-gradient(180deg, #11151b 0%, #171d26 100%); } html[data-theme="dark"] .rxn-auth-eyebrow { background: rgba(255, 255, 255, 0.08); color: #f8d7da; } html[data-theme="dark"] .rxn-auth-card { background: rgba(32, 38, 46, 0.88); } html[data-theme="dark"] .rxn-auth-title { color: #8bb9ff; } html[data-theme="dark"] .rxn-auth-footer, html[data-theme="dark"] .rxn-auth-footer a { color: #adb5bd; } html[data-theme="dark"] .rxn-auth-footer a:hover { color: #f8f9fa; } .rxn-form-section + .rxn-form-section { margin-top: 1.1rem; } .rxn-form-section-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; } .rxn-form-section-text { color: #6c757d; font-size: 0.92rem; margin-bottom: 1rem; } .rxn-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.75rem 1rem; } /* Las DOCE, y no sólo las que alguien usó alguna vez (sesión 245). * * Estaban definidas 3, 4, 6, 8 y 12. La ficha de artículo usa `span-5` y * `span-7` desde la sesión 243, y como esas clases no existían el navegador * no aplicaba `grid-column` y los bloques caían al default del grid: UNA * columna de doce. Medido en la pantalla real: 80 px de ancho contra los * 1181 del contenedor. A 80 px el texto se parte letra por letra, que es * exactamente como se veía. * * Es el modo de fallar más difícil de encontrar en CSS: no hay error, no hay * consola, no hay nada roto. La clase simplemente no existe y el elemento se * acomoda como puede. * * Definirlas todas cierra la clase entera de bug — el próximo que necesite un * `span-9` no tiene que descubrir esto de nuevo. */ .rxn-form-span-1 { grid-column: span 1; } .rxn-form-span-2 { grid-column: span 2; } .rxn-form-span-3 { grid-column: span 3; } .rxn-form-span-4 { grid-column: span 4; } .rxn-form-span-5 { grid-column: span 5; } .rxn-form-span-6 { grid-column: span 6; } .rxn-form-span-7 { grid-column: span 7; } .rxn-form-span-8 { grid-column: span 8; } .rxn-form-span-9 { grid-column: span 9; } .rxn-form-span-10 { grid-column: span 10; } .rxn-form-span-11 { grid-column: span 11; } .rxn-form-span-12 { grid-column: span 12; } .rxn-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 0.85rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } .rxn-form-switches { display: flex; flex-wrap: wrap; gap: 1.25rem; } .rxn-form-switch-card { flex: 1 1 220px; padding: 1rem 1.1rem; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; background: rgba(248, 249, 250, 0.8); } /* Variante compacta para la grilla de módulos del form de Usuarios (release 1.48.0). Cada módulo es su propia card en flex/wrap — se acomodan en filas y al acumularse generan filas nuevas automáticamente. */ .rxn-module-pill-card { flex: 0 1 240px; padding: 0.65rem 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; min-height: 0; } .rxn-module-pill-card .form-check-label { font-size: 0.95rem; } /* Permisos CRUD granulares por módulo (release 1.48.0). Pills inline. */ .rxn-crud-pills { align-items: center; } .rxn-crud-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.18rem 0.55rem; font-size: 0.72rem; line-height: 1; border-radius: 999px; border: 1px solid var(--bs-primary, #0d6efd); color: var(--bs-primary, #0d6efd); background: transparent; cursor: pointer; user-select: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease; margin: 0; } .rxn-crud-pill:hover { transform: scale(1.04); } .rxn-crud-pill:active { transform: scale(0.96); } .rxn-crud-pill.is-on { background: var(--bs-primary, #0d6efd); color: #fff; } .rxn-crud-pill.is-off { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .rxn-crud-pill.is-off { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.45); } .rxn-crud-pill i { font-size: 0.78rem; } .rxn-crud-pill-short { font-weight: 700; letter-spacing: 0.02em; } .rxn-crud-pill-input:disabled + .rxn-crud-pill { cursor: not-allowed; opacity: 0.5; transform: none !important; } .rxn-crud-pills[data-parent-off] .rxn-crud-pill { opacity: 0.35; pointer-events: none; } .rxn-form-sticky-side { position: sticky; top: 1rem; } html[data-theme="dark"] .rxn-form-card, html[data-theme="dark"] .rxn-form-switch-card { border-color: var(--border-color); } html[data-theme="dark"] .rxn-form-switch-card { background: rgba(255, 255, 255, 0.03); } @media (max-width: 991.98px) { .rxn-module-header, .rxn-toolbar-split { align-items: flex-start; flex-direction: column; } .rxn-module-actions, .rxn-inline-actions, .rxn-toolbar-actions, .rxn-stack-actions { width: 100%; } .rxn-filter-form { width: 100%; } .rxn-filter-form .rxn-filter-grow, .rxn-filter-form .rxn-filter-compact { flex: 1 1 100%; width: 100% !important; } .rxn-form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* Por atributo y no enumerando (sesión 245): la lista de acá también se * había quedado corta, con el mismo resultado silencioso. Cubre cualquier * span, incluidos los que se agreguen mañana. */ [class*="rxn-form-span-"] { grid-column: span 6; } .rxn-form-sticky-side { position: static; } } @media (max-width: 767.98px) { :root { --rxn-shell-gutter: 1rem; } .rxn-page-shell .container, .rxn-page-shell .container-xl, .rxn-page-shell .container-fluid, .rxn-responsive-container { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .rxn-module-header h1, .rxn-module-header h2, .rxn-module-header .hero-title { font-size: clamp(1.5rem, 5vw, 2rem); } .rxn-module-actions .btn, .rxn-inline-actions .btn, .rxn-toolbar-actions .btn, .rxn-stack-actions .btn, .rxn-filter-form .btn, .rxn-filter-form .form-control, .rxn-filter-form .form-select, .rxn-filter-form .input-group { width: 100% !important; } .rxn-crud-card .card-body, .card .card-body { padding: 1rem; } .table-responsive table, .rxn-table-responsive table { min-width: 640px; } .rxn-pagination-wrap { padding-bottom: 0.25rem; } .rxn-launcher-shell { padding-top: 1.5rem; padding-bottom: 1.5rem; } .rxn-form-grid { grid-template-columns: 1fr; gap: 1rem; } /* Ídem: una sola columna en celular, para cualquier span. */ [class*="rxn-form-span-"] { grid-column: auto; } .rxn-form-actions .btn { width: 100%; } .rxn-form-switch-card { flex-basis: 100%; } .rxn-auth-logo { max-width: 240px; } } /* Compactacion Sistemica Visual */ .rxn-page-shell .form-label { margin-bottom: 0.25rem; font-size: 0.92rem; font-weight: 500; } .rxn-page-shell .form-control, .rxn-page-shell .form-select { padding: 0.32rem 0.65rem; font-size: 0.92rem; min-height: 2.15rem; } .rxn-page-shell .card-body { padding: 1.1rem; } .rxn-auth-card .card-body { padding: 2.5rem 2rem; /* Restaurar login padding por si lo achica el de arriba */ } /* Spotlight Search */ .rxn-spotlight-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 1050; opacity: 0; transition: opacity 0.15s ease-in-out; } .rxn-spotlight-backdrop.show { opacity: 1; } .rxn-spotlight-dialog { position: absolute; background: var(--card-bg, #ffffff); color: var(--text-color, #212529); border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15)); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); z-index: 1055; width: 450px; max-width: 90vw; opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; display: flex; flex-direction: column; } .rxn-spotlight-dialog.show { opacity: 1; transform: translateY(0); } .rxn-spotlight-header { padding: 10px 14px; border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)); } .rxn-spotlight-input { width: 100%; border: none; background: transparent; color: inherit; font-size: 1.1rem; outline: none; padding: 4px 0; } .rxn-spotlight-results { max-height: 350px; overflow-y: auto; padding: 0; margin: 0; list-style: none; } .rxn-spotlight-result-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05)); } .rxn-spotlight-result-item:last-child { border-bottom: none; } .rxn-spotlight-result-item:hover, .rxn-spotlight-result-item.active { background: rgba(13, 110, 253, 0.1); } .rxn-spotlight-result-title { font-weight: bold; display: block; margin-bottom: 2px; } .rxn-spotlight-result-desc { font-size: 0.85rem; opacity: 0.8; } html[data-theme="dark"] .rxn-spotlight-dialog { background: #1e1e1e; color: #e9ecef; border-color: #333; } html[data-theme="dark"] .rxn-spotlight-header, html[data-theme="dark"] .rxn-spotlight-result-item { border-color: #333; } /* =================================================================== MOBILE RESPONSIVE ENHANCEMENTS =================================================================== */ /* --- Mobile Navigation Offcanvas --- */ .rxn-mobile-nav { width: 280px; background-color: var(--bg-color); color: var(--text-color); border-right-color: var(--border-color); } .rxn-mobile-nav .offcanvas-header { border-bottom: 1px solid var(--border-color); padding: 1rem 1.25rem; } .rxn-mobile-nav .offcanvas-title { font-size: 1rem; font-weight: 600; } html[data-theme="dark"] .rxn-mobile-nav .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .rxn-mobile-nav-heading { padding: 0.75rem 1.25rem 0.35rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 0.25rem; } .rxn-mobile-nav-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 1.25rem; color: var(--text-color); text-decoration: none; font-size: 0.9rem; transition: background-color 0.15s ease; min-height: 44px; } .rxn-mobile-nav-item:hover, .rxn-mobile-nav-item:focus-visible { background-color: var(--surface-hover); color: var(--text-color); text-decoration: none; } .rxn-mobile-nav-item i { width: 1.25rem; text-align: center; font-size: 1rem; opacity: 0.7; } .rxn-mobile-nav-item.text-danger { color: #dc3545 !important; } /* --- Mobile utility classes --- */ .rxn-hide-mobile { /* Hidden on screens < 768px */ } /* --- Table responsive scroll indicator --- */ .rxn-table-responsive { position: relative; } .rxn-table-responsive::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; background: linear-gradient(to right, transparent, var(--bg-color)); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; } .rxn-table-responsive.is-scrollable::after { opacity: 1; } /* --- Modal mobile fullscreen --- */ @media (max-width: 575.98px) { .modal .modal-dialog { margin: 0.5rem; max-height: calc(100vh - 1rem); } .modal .modal-content { max-height: calc(100vh - 1rem); } .modal .modal-body { overflow-y: auto; } } /* --- Responsive breakpoints enhancements --- */ @media (max-width: 991.98px) { /* Offcanvas dark mode overrides already handled by .rxn-mobile-nav */ /* Main content slightly tighter on tablets */ main.container-fluid { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } } @media (max-width: 767.98px) { /* Hide secondary table columns */ .rxn-hide-mobile { display: none !important; } /* Touch-friendly action buttons in tables */ .rxn-crud-table .btn-group .btn, .rxn-crud-table .rxn-row-link-action { min-width: 2.5rem; min-height: 2.5rem; padding: 0.35rem 0.5rem; } /* Better table row chevron */ .rxn-row-chevron-col { width: 36px; } /* Spotlight fullscreen on mobile */ .rxn-spotlight-dialog { width: calc(100vw - 2rem) !important; max-width: none; left: 1rem !important; right: 1rem !important; } /* Banner compaction */ .rxn-user-menu { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } /* Form actions stacking */ .rxn-form-actions { flex-direction: column; } .rxn-form-actions .btn { justify-content: center; } /* Filter form — full width inputs with better stacking */ .rxn-filter-form { gap: 0.5rem; } .rxn-search-field-wrap { width: 100%; min-width: unset; } /* Typography refinements */ .rxn-form-section-title { font-size: 0.95rem; } .rxn-form-section-text { font-size: 0.85rem; } /* Pagination scroll on mobile */ .rxn-pagination-wrap .pagination .page-link { min-width: 2.5rem; min-height: 2.5rem; display: flex; align-items: center; justify-content: center; } /* Empty state compact */ .rxn-empty-state { padding: 2rem 1rem; } /* Module cards compact grid on small phones */ .rxn-module-card { min-height: 120px; } .rxn-module-icon { font-size: 2rem; } } /* --------------------------------------------------------------------------- * Temas claros: neutralización de hardcodes .bg-dark/.text-light/.text-white * dentro de módulos CRM construidos originalmente asumiendo tema oscuro (Notas, * Agenda, Tratativas, Llamadas, RxnLive, Correos). Mantiene la legibilidad sin * refactorizar ~200 lugares de markup. Acotado por wrapper específico para no * romper elementos que sí deben mantenerse oscuros en ambos temas (topbar del * admin, sidebar, etc.). * * Selector `html:not([data-theme="dark"])` aplica para light + todas las * variantes pastel (durazno/rosa/verde/azul). Cualquier tema nuevo que se sume * arranca automáticamente con este tratamiento, salvo que sea dark-first. * --------------------------------------------------------------------------- */ /* Variable helper: lista de shells que reciben el tratamiento light-mode */ html:not([data-theme="dark"]) .notas-split .bg-dark, html:not([data-theme="dark"]) .notas-split .form-control.bg-dark, html:not([data-theme="dark"]) .notas-split .form-select.bg-dark, html:not([data-theme="dark"]) .notas-split .nav-link.bg-dark, html:not([data-theme="dark"]) .notas-split .card.bg-dark, html:not([data-theme="dark"]) .crm-agenda-shell .bg-dark, html:not([data-theme="dark"]) .crm-agenda-shell .form-control.bg-dark, html:not([data-theme="dark"]) .crm-agenda-shell .form-select.bg-dark, html:not([data-theme="dark"]) .crm-agenda-shell .card.bg-dark, html:not([data-theme="dark"]) .crm-tratativas-shell .bg-dark, html:not([data-theme="dark"]) .crm-tratativas-shell .form-control.bg-dark, html:not([data-theme="dark"]) .crm-tratativas-shell .form-select.bg-dark, html:not([data-theme="dark"]) .crm-tratativas-shell .card.bg-dark, html:not([data-theme="dark"]) .crm-llamadas-shell .bg-dark, html:not([data-theme="dark"]) .crm-llamadas-shell .form-control.bg-dark, html:not([data-theme="dark"]) .crm-llamadas-shell .form-select.bg-dark, html:not([data-theme="dark"]) .crm-llamadas-shell .card.bg-dark, html:not([data-theme="dark"]) .crm-llamadas-shell .nav-link.bg-dark, html:not([data-theme="dark"]) .rxn-live-shell .bg-dark, html:not([data-theme="dark"]) .rxn-live-shell .form-control.bg-dark, html:not([data-theme="dark"]) .rxn-live-shell .form-select.bg-dark, html:not([data-theme="dark"]) .rxn-live-shell .card.bg-dark, html:not([data-theme="dark"]) .crm-service-shell .bg-dark, html:not([data-theme="dark"]) .crm-service-shell .form-control.bg-dark, html:not([data-theme="dark"]) .crm-service-shell .form-select.bg-dark, html:not([data-theme="dark"]) .crm-service-shell .badge.bg-dark, html:not([data-theme="dark"]) .crm-service-shell .card.bg-dark { background-color: var(--surface-color) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } html:not([data-theme="dark"]) .notas-split .text-light, html:not([data-theme="dark"]) .notas-split .text-white, html:not([data-theme="dark"]) .crm-agenda-shell .text-light, html:not([data-theme="dark"]) .crm-agenda-shell .text-white, html:not([data-theme="dark"]) .crm-tratativas-shell .text-light, html:not([data-theme="dark"]) .crm-tratativas-shell .text-white, html:not([data-theme="dark"]) .crm-llamadas-shell .text-light, html:not([data-theme="dark"]) .crm-llamadas-shell .text-white, html:not([data-theme="dark"]) .rxn-live-shell .text-light, html:not([data-theme="dark"]) .rxn-live-shell .text-white { color: #212529 !important; } /* border-secondary dentro de estos módulos: gris claro en light mode */ html:not([data-theme="dark"]) .notas-split .border-secondary, html:not([data-theme="dark"]) .crm-agenda-shell .border-secondary, html:not([data-theme="dark"]) .crm-tratativas-shell .border-secondary, html:not([data-theme="dark"]) .crm-llamadas-shell .border-secondary, html:not([data-theme="dark"]) .rxn-live-shell .border-secondary { border-color: #dee2e6 !important; } /* RxnLive table-dark en light mode: override COMPLETO via variables de Bootstrap. Esto evita las filas alternadas (unas claras, otras oscuras) que aparecían cuando solo se tocaban las odd y las even quedaban con el `color: white` del .table-dark original. Todos los celdas heredan fondo blanco + texto oscuro. */ html:not([data-theme="dark"]) .rxn-live-shell .table-dark, html:not([data-theme="dark"]) .rxn-live-shell .table-dark > :not(caption) > * > * { --bs-table-bg: #ffffff; --bs-table-color: #212529; --bs-table-color-state: #212529; --bs-table-bg-state: transparent; --bs-table-striped-bg: #f8f9fa; --bs-table-striped-color: #212529; --bs-table-hover-bg: #e9ecef; --bs-table-hover-color: #212529; --bs-table-border-color: #dee2e6; color: #212529 !important; border-color: #dee2e6 !important; } /* Headers de tabla en RxnLive: fondo gris clarito + texto oscuro */ html:not([data-theme="dark"]) .rxn-live-shell thead th, html:not([data-theme="dark"]) .rxn-live-shell .table-dark > thead > tr > th { background-color: #f1f3f5 !important; color: #212529 !important; border-color: #dee2e6 !important; } /* RxnLive dropdowns (filtros por columna, popover "Filtro Motor BD" / "Selección Local", menú de vistas guardadas, selector de columnas): override de la clase .dropdown-menu-dark de Bootstrap 5 via sus CSS variables, para que en light mode el popover tenga fondo blanco, texto oscuro y divisores gris claro. */ html:not([data-theme="dark"]) .rxn-live-shell .dropdown-menu-dark, html:not([data-theme="dark"]) .rxn-live-shell .dropdown-menu.dropdown-menu-dark { --bs-dropdown-bg: #ffffff; --bs-dropdown-color: #212529; --bs-dropdown-border-color: #dee2e6; --bs-dropdown-divider-bg: #e9ecef; --bs-dropdown-link-color: #212529; --bs-dropdown-link-hover-color: #212529; --bs-dropdown-link-hover-bg: #f8f9fa; --bs-dropdown-link-active-color: #ffffff; --bs-dropdown-link-active-bg: #0d6efd; background-color: #ffffff !important; color: #212529 !important; border-color: #dee2e6 !important; } html:not([data-theme="dark"]) .rxn-live-shell .dropdown-menu-dark .text-muted, html:not([data-theme="dark"]) .rxn-live-shell .dropdown-menu-dark label, html:not([data-theme="dark"]) .rxn-live-shell .dropdown-menu-dark .form-check-label { color: #495057 !important; } /* ============================================================================ MOVIMIENTO DE LAS BARRAS LATERALES (sesión 171) ============================================================================ Las dos barras que acompañan al PDS y al Presupuesto se despliegan con una transición de ancho: la de módulos recientes a la izquierda (`.rxn-ar-panel`) y la de contexto del cliente a la derecha (`.rxn-cc-panel`). El panel del cliente además se abre solo al elegir cliente y se repliega a los pocos segundos, así que el movimiento aparece sin que nadie lo pida. `UIHelper::getHtmlAttributes()` emite `data-rxn-anim="off"` en el cuando el usuario apagó la preferencia en Mi Perfil. Va en la raíz —igual que el tema— para que ninguna vista tenga que acordarse de declarar nada. Se apaga la TRANSICIÓN, no el panel: las barras siguen abriéndose y cerrándose exactamente igual, sólo que de una en vez de deslizándose. El bloque de `prefers-reduced-motion` es aparte y no depende de la preferencia: si el sistema operativo pide menos movimiento, se respeta aunque el usuario nunca haya entrado a Mi Perfil. ========================================================================= */ html[data-rxn-anim="off"] .rxn-ar-panel, html[data-rxn-anim="off"] .rxn-cc-panel, html[data-rxn-anim="off"] .rxn-ar-panel *, html[data-rxn-anim="off"] .rxn-cc-panel * { transition: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { .rxn-ar-panel, .rxn-cc-panel, .rxn-ar-panel *, .rxn-cc-panel * { transition: none !important; animation: none !important; } }