/*----------------------------------------------------------------------------------------------------------------------------------\
| TERIAN | COORDINACION DE SISTEMAS |
|-----------------------------------------------------------------------------------------------------------------------------------|
| Programa: estilos-base.css |
| Objetivo: Hoja de estilos base de la aplicación. Design tokens globales, componentes Ext JS y soporte dark-mode. |
| Cargar DESPUÉS del theme base de Ext JS (Triton/Neptune) en index.html para ganar especificidad. |
| Autor: --- |
| Fecha: Julio 2026 |
| Sistema: Sencha Ext JS (Architect) |
|-----------------------------------------------------------------------------------------------------------------------------------|
| H I S T O R I A L D E M O D I F I C A C I O N E S |
|-----------------------------------------------------------------------------------------------------------------------------------|
| RESPONSABLE | TAREA | FECHA | DESCRIPCION |
|-----------------------------------------------------------------------------------------------------------------------------------|
\----------------------------------------------------------------------------------------------------------------------------------*/
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
--bo-bg: #f0eee9;
--bo-surface: #ffffff;
--bo-header-bg: #eef1f5;
--bo-border: #e5e8eb;
--bo-border-strong: #d7dce2;
--bo-text: #2a2f36;
--bo-text-muted: #6b7280;
--bo-text-faint: #9aa3ad;
--bo-primary: #2f6fb0;
--bo-primary-contrast: #ffffff;
--bo-danger: #b3413f;
--bo-link: #3b82c4;
--bo-badge-bg: #e3f6ea;
--bo-badge-text: #1f8a4c;
--bo-row-border: rgba(0, 0, 0, 0.04);
--bo-header-border: #eef1f5;
}
body.dark-mode {
--bo-bg: #1c2027;
--bo-surface: #1c2027;
--bo-header-bg: #20242c;
--bo-border: #2c313b;
--bo-border-strong: #3a3f4a;
--bo-text: #d7dce2;
--bo-text-muted: #8b93a1;
--bo-text-faint: #6b7280;
--bo-primary: #2f64a3;
--bo-primary-contrast: #0d1117;
--bo-danger: #e5847f;
--bo-link: #6fa8dc;
--bo-badge-bg: #173425;
--bo-badge-text: #5fce90;
--bo-row-border: rgba(255, 255, 255, 0.05);
--bo-header-border: #2c313b;
background-color: #1c2027 !important;
}
/* ==========================================================================
2. HEADER DEL MODULO
========================================================================== */
.bo-chip {
display: inline-block;
background: #1f2d3d;
color: #ffffff;
border-radius: 4px;
padding: 4px 9px;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
vertical-align: middle;
letter-spacing: 0.3px;
}
.bo-module-title {
font-size: 19px;
font-weight: 600;
color: var(--bo-text);
vertical-align: middle;
}
/* Alias para el JS que genera appCodeBadge / appName — mismo visual que bo-chip / bo-module-title */
.appCodeBadge {
display: inline-block;
background: #1f2d3d;
color: #ffffff;
border-radius: 4px;
padding: 3px 8px;
font-size: 10.5px;
font-weight: 600;
line-height: 1.4;
vertical-align: middle;
letter-spacing: 0.3px;
}
body.dark-mode .appCodeBadge {
background: #2a4a6b;
border: 1px solid #4d8ab5;
color: #a8d4f0;
}
.appName {
font-size: 16px;
font-weight: 600;
color: var(--bo-text);
vertical-align: middle;
margin-left: 8px;
}
/* ==========================================================================
2b. CONTENEDOR DEL TITULO DEL MODULO — sin caja visible
cls: 'bo-module-header'
Aplicar al panel/container que envuelve appCodeBadge + appName
========================================================================== */
.bo-module-header.x-panel,
.bo-module-header.x-container,
.bo-module-header.x-component,
.bo-module-header.x-component-default {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
.bo-module-header .x-panel-body,
.bo-module-header .x-panel-header {
background: transparent !important;
border: none !important;
}
/* Contenedor border-layout que envuelve el header + iframe */
.bo-app-frame-ct {
padding: 0 8px 8px 8px;
box-sizing: border-box;
}
.bo-app-frame-ct.x-container,
.bo-app-frame-ct.x-container-default,
.bo-app-frame-ct .x-container-inner,
.bo-app-frame-ct .x-panel-body,
.bo-app-frame-ct .x-border-layout-ct,
.bo-app-frame-ct .x-region-north,
.bo-app-frame-ct .x-region-north .x-panel-body {
background: var(--bo-surface) !important;
background-color: var(--bo-surface) !important;
border: none !important;
box-shadow: none !important;
}
body.dark-mode .bo-app-frame-ct.x-container,
body.dark-mode .bo-app-frame-ct.x-container-default,
body.dark-mode .bo-app-frame-ct .x-container-inner,
body.dark-mode .bo-app-frame-ct .x-border-layout-ct,
body.dark-mode .bo-app-frame-ct .x-region-north {
background: var(--bo-bg) !important;
background-color: var(--bo-bg) !important;
}
/* ==========================================================================
3. TOOLBAR PRINCIPAL
cls: 'bo-toolbar'
========================================================================== */
.bo-toolbar.x-toolbar {
background: var(--bo-header-bg) !important;
border-bottom: 1px solid var(--bo-border) !important;
padding: 6px 4px 6px 12px !important;
}
.bo-toolbar .x-toolbar-item {
margin-right: 4px !important;
}
.bo-toolbar .x-toolbar-item:last-child {
margin-right: 0 !important;
}
/* ==========================================================================
3b. TOOLBAR FLOTANTE — variante con separación visual de los extremos
cls: 'bo-toolbar bo-toolbar-card'
========================================================================== */
.bo-toolbar.bo-toolbar-card.x-toolbar {
background: var(--bo-surface) !important;
border: 1px solid var(--bo-border) !important;
border-radius: 8px !important;
margin: 2px 10px 10px 10px !important;
padding: 10px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
/* Ext JS agrega .x-noborder-trl y pone border-top-*-radius a 0 cuando un
toolbar está docked al top (asume que se pega al panel padre). Lo
contrarrestamos para que el card flotante conserve sus 4 esquinas redondas. */
.bo-toolbar.bo-toolbar-card.x-toolbar.x-toolbar-docked-top,
.bo-toolbar.bo-toolbar-card.x-toolbar.x-noborder-trl {
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
}
.bo-toolbar.bo-toolbar-card .x-toolbar-item {
margin-right: 8px !important;
}
.bo-toolbar.bo-toolbar-card .x-toolbar-item:last-child {
margin-right: 0 !important;
}
body.dark-mode .bo-toolbar.bo-toolbar-card.x-toolbar {
background: var(--bo-header-bg) !important;
border-color: var(--bo-border-strong) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}
/* ==========================================================================
4. BOTONES — sistema completo (reemplaza formatoForm.css)
cls: 'actionButton' + variante en cualquier Ext.button.Button
========================================================================== */
/* ── 4.1 BASE ── */
.x-btn.actionButton {
height: 28px !important;
background: #ffffff !important;
background-image: none !important;
border: 1px solid #D0D5DD !important;
border-radius: 6px !important;
box-shadow: none !important;
text-shadow: none !important;
transition: background 0.15s ease, border-color 0.15s ease !important;
}
.x-btn.actionButton .x-btn-inner {
font-size: 12px !important;
font-weight: 600 !important;
line-height: 18px !important;
}
.x-btn.actionButton .x-btn-icon-el {
color: inherit !important;
}
body.dark-mode .x-btn.actionButton {
background: var(--bo-surface) !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode .x-btn.actionButton .x-btn-inner {
color: var(--bo-text-muted) !important;
}
/* ── 4.2 VERDE — guardar / aceptar / exito ── */
.x-btn.actionButton.actionButtonGreen {
background: #ECFDF3 !important;
border-color: #ABEFC6 !important;
}
.x-btn.actionButton.actionButtonGreen .x-btn-inner,
.x-btn.actionButton.actionButtonGreen .x-btn-icon-el {
color: #067647 !important;
}
.x-btn.actionButton.actionButtonGreen:hover {
background: #D1FADF !important;
border-color: #75E0A7 !important;
}
body.dark-mode .x-btn.actionButton.actionButtonGreen {
background: rgba(6, 118, 71, 0.15) !important;
border-color: rgba(6, 118, 71, 0.4) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonGreen .x-btn-inner,
body.dark-mode .x-btn.actionButton.actionButtonGreen .x-btn-icon-el {
color: #5fce90 !important;
}
body.dark-mode .x-btn.actionButton.actionButtonGreen:hover {
background: rgba(6, 118, 71, 0.25) !important;
border-color: rgba(95, 206, 144, 0.5) !important;
}
/* ── 4.3 ROJO — eliminar / cancelar / error ── */
.x-btn.actionButton.actionButtonRed {
background: #FEF3F2 !important;
border-color: #FECDCA !important;
}
.x-btn.actionButton.actionButtonRed .x-btn-inner,
.x-btn.actionButton.actionButtonRed .x-btn-icon-el {
color: #B42318 !important;
}
.x-btn.actionButton.actionButtonRed:hover {
background: #FEE4E2 !important;
border-color: #FDA29B !important;
}
body.dark-mode .x-btn.actionButton.actionButtonRed {
background: rgba(180, 35, 24, 0.15) !important;
border-color: rgba(229, 132, 127, 0.35) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonRed .x-btn-inner,
body.dark-mode .x-btn.actionButton.actionButtonRed .x-btn-icon-el {
color: var(--bo-danger) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonRed:hover {
background: rgba(180, 35, 24, 0.25) !important;
border-color: var(--bo-danger) !important;
}
/* ── 4.4 AMARILLO — advertencia / pendiente / precaucion ── */
.x-btn.actionButton.actionButtonYellow {
background: #FFFAEB !important;
border-color: #FEDF89 !important;
}
.x-btn.actionButton.actionButtonYellow .x-btn-inner,
.x-btn.actionButton.actionButtonYellow .x-btn-icon-el {
color: #B54708 !important;
}
.x-btn.actionButton.actionButtonYellow:hover {
background: #FEF0C7 !important;
border-color: #FEC84B !important;
}
body.dark-mode .x-btn.actionButton.actionButtonYellow {
background: rgba(181, 71, 8, 0.15) !important;
border-color: rgba(254, 223, 137, 0.3) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonYellow .x-btn-inner,
body.dark-mode .x-btn.actionButton.actionButtonYellow .x-btn-icon-el {
color: #fec84b !important;
}
body.dark-mode .x-btn.actionButton.actionButtonYellow:hover {
background: rgba(181, 71, 8, 0.25) !important;
border-color: rgba(254, 200, 75, 0.5) !important;
}
/* ── 4.5 AZUL — informacion / accion secundaria ── */
.x-btn.actionButton.actionButtonBlue {
background: #EFF4FF !important;
border-color: #B2CCFF !important;
}
.x-btn.actionButton.actionButtonBlue .x-btn-inner,
.x-btn.actionButton.actionButtonBlue .x-btn-icon-el {
color: #175CD3 !important;
}
.x-btn.actionButton.actionButtonBlue:hover {
background: #D1E0FF !important;
border-color: #84ADFF !important;
}
body.dark-mode .x-btn.actionButton.actionButtonBlue {
background: rgba(23, 92, 211, 0.15) !important;
border-color: rgba(77, 143, 214, 0.4) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonBlue .x-btn-inner,
body.dark-mode .x-btn.actionButton.actionButtonBlue .x-btn-icon-el {
color: var(--bo-primary) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonBlue:hover {
background: rgba(23, 92, 211, 0.25) !important;
border-color: var(--bo-primary) !important;
}
/* ── 4.6 GRIS — accion neutral / secundaria ── */
.x-btn.actionButton.actionButtonGray {
background: #F9FAFB !important;
border-color: #D0D5DD !important;
}
.x-btn.actionButton.actionButtonGray .x-btn-inner,
.x-btn.actionButton.actionButtonGray .x-btn-icon-el {
color: #475467 !important;
}
.x-btn.actionButton.actionButtonGray:hover {
background: #F2F4F7 !important;
border-color: #98A2B3 !important;
}
body.dark-mode .x-btn.actionButton.actionButtonGray {
background: var(--bo-border) !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonGray .x-btn-inner,
body.dark-mode .x-btn.actionButton.actionButtonGray .x-btn-icon-el {
color: var(--bo-text-muted) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonGray:hover {
background: var(--bo-border-strong) !important;
border-color: var(--bo-text-faint) !important;
}
/* ── 4.7 PRIMARIO tintado — accion principal secundaria ── */
.x-btn.actionButton.actionButtonPrimary {
background: #EFF4FF !important;
border-color: #84ADFF !important;
}
.x-btn.actionButton.actionButtonPrimary .x-btn-inner,
.x-btn.actionButton.actionButtonPrimary .x-btn-icon-el {
color: #175CD3 !important;
}
.x-btn.actionButton.actionButtonPrimary:hover {
background: #D1E0FF !important;
border-color: #528BFF !important;
}
body.dark-mode .x-btn.actionButton.actionButtonPrimary {
background: rgba(77, 143, 214, 0.15) !important;
border-color: rgba(77, 143, 214, 0.4) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonPrimary .x-btn-inner,
body.dark-mode .x-btn.actionButton.actionButtonPrimary .x-btn-icon-el {
color: var(--bo-primary) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonPrimary:hover {
background: rgba(77, 143, 214, 0.25) !important;
border-color: var(--bo-primary) !important;
}
/* ── 4.8 CREAR — boton relleno solido (accion principal de la pantalla) ── */
/* cls: 'actionButton actionButtonCreate' */
.x-btn.actionButton.actionButtonCreate {
background: #1849A9 !important;
border-color: #1849A9 !important;
}
.x-btn.actionButton.actionButtonCreate .x-btn-inner,
.x-btn.actionButton.actionButtonCreate .x-btn-icon-el {
color: #ffffff !important;
}
.x-btn.actionButton.actionButtonCreate:hover {
background: #1D4ED8 !important;
border-color: #1D4ED8 !important;
}
body.dark-mode .x-btn.actionButton.actionButtonCreate {
background: var(--bo-primary) !important;
border-color: var(--bo-primary) !important;
}
body.dark-mode .x-btn.actionButton.actionButtonCreate .x-btn-inner,
body.dark-mode .x-btn.actionButton.actionButtonCreate .x-btn-icon-el {
color: #ffffff !important;
}
body.dark-mode .x-btn.actionButton.actionButtonCreate:hover {
filter: brightness(1.12) !important;
}
/* ==========================================================================
4b. BOTONES EN GRUPO — bo-btn-group
cls: 'bo-btn-group' en Ext.container.Container o Ext.container.ButtonGroup.
Los botones hijos comparten el borde lateral para verse conectados.
========================================================================== */
.bo-btn-group {
border: none !important;
border-radius: 6px !important;
overflow: hidden !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Ext JS hbox envuelve cada botón en x-box-item — quitamos su margen */
.bo-btn-group .x-box-item {
margin: 0 !important;
padding: 0 !important;
}
/* Todos los botones: borde completo; el divisor entre botones es el border-right */
.bo-btn-group .x-btn.actionButton {
border-radius: 0 !important;
border-top: 1px solid #D0D5DD !important;
border-bottom: 1px solid #D0D5DD !important;
border-left: none !important;
border-right: 1px solid #D0D5DD !important;
height: 28px !important;
margin: 0 !important;
}
/* Primer botón — borde izquierdo y esquinas izquierdas */
.bo-btn-group .x-box-item:first-child .x-btn.actionButton {
border-left: 1px solid #D0D5DD !important;
border-radius: 5px 0 0 5px !important;
}
/* Último botón — sin divisor derecho, esquinas derechas */
.bo-btn-group .x-box-item:last-child .x-btn.actionButton {
border-right: none !important;
border-radius: 0 5px 5px 0 !important;
}
/* Grupo de un solo botón */
.bo-btn-group .x-box-item:first-child:last-child .x-btn.actionButton {
border: 1px solid #D0D5DD !important;
border-radius: 5px !important;
}
/* Hover */
.bo-btn-group .x-btn.actionButton.x-btn-over,
.bo-btn-group .x-btn.actionButton:hover {
background: var(--bo-header-bg) !important;
z-index: 1;
}
.bo-btn-group .x-btn.actionButton.x-btn-over .x-btn-inner,
.bo-btn-group .x-btn.actionButton:hover .x-btn-inner,
.bo-btn-group .x-btn.actionButton.x-btn-over .x-btn-icon-el,
.bo-btn-group .x-btn.actionButton:hover .x-btn-icon-el {
color: var(--bo-text) !important;
}
/* Seleccionado / pressed */
.bo-btn-group .x-btn.actionButton.x-btn-pressed {
background: var(--bo-primary) !important;
border-right-color: var(--bo-primary) !important;
z-index: 2;
}
.bo-btn-group .x-btn.actionButton.x-btn-pressed .x-btn-inner,
.bo-btn-group .x-btn.actionButton.x-btn-pressed .x-btn-icon-el {
color: #ffffff !important;
}
body.dark-mode .bo-btn-group .x-btn.actionButton {
border-top-color: var(--bo-border-strong) !important;
border-bottom-color: var(--bo-border-strong) !important;
border-right-color: var(--bo-border-strong) !important;
}
body.dark-mode .bo-btn-group .x-box-item:first-child .x-btn.actionButton {
border-left-color: var(--bo-border-strong) !important;
}
body.dark-mode .bo-btn-group .x-btn.actionButton.x-btn-over,
body.dark-mode .bo-btn-group .x-btn.actionButton:hover {
background: var(--bo-border) !important;
}
body.dark-mode .bo-btn-group .x-btn.actionButton.x-btn-pressed {
background: var(--bo-primary) !important;
border-right-color: var(--bo-primary) !important;
}
body.dark-mode .bo-btn-group .x-btn.actionButton.x-btn-pressed .x-btn-inner,
body.dark-mode .bo-btn-group .x-btn.actionButton.x-btn-pressed .x-btn-icon-el {
color: var(--bo-primary-contrast) !important;
}
/* ==========================================================================
5. PANEL DE FILTROS
cls: 'bo-filter-panel'
========================================================================== */
.bo-filter-panel.x-panel {
background: var(--bo-surface) !important;
border: 1px solid var(--bo-border) !important;
border-radius: 8px !important;
}
.bo-filter-panel .x-panel-body {
background: var(--bo-surface) !important;
padding: 12px 16px !important;
border-radius: 0 0 8px 8px !important;
}
.bo-filter-panel .x-panel-header {
background: var(--bo-header-bg) !important;
border-bottom: 1px solid var(--bo-border) !important;
border-radius: 8px 8px 0 0 !important;
padding: 8px 16px !important;
}
.bo-filter-panel .x-panel-header-title {
color: var(--bo-text-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.4px !important;
}
.bo-filter-panel .x-form-item-label {
color: var(--bo-text-muted) !important;
font-size: 12px !important;
}
.bo-filter-panel .x-form-text,
.bo-filter-panel .x-form-field {
border: 1px solid var(--bo-border) !important;
border-radius: 5px !important;
background: var(--bo-surface) !important;
color: var(--bo-text) !important;
font-size: 12.5px !important;
padding: 5px 8px !important;
}
.bo-filter-panel .x-form-text:focus,
.bo-filter-panel .x-form-field:focus {
border-color: var(--bo-primary) !important;
outline: none !important;
}
body.dark-mode .bo-filter-panel .x-panel-body,
body.dark-mode .bo-filter-panel .x-panel-header {
background: var(--bo-header-bg) !important;
}
body.dark-mode .bo-filter-panel .x-form-text,
body.dark-mode .bo-filter-panel .x-form-field {
background: var(--bo-surface) !important;
color: var(--bo-text) !important;
border-color: var(--bo-border-strong) !important;
}
/* ==========================================================================
5b. CAMPOS EN TOOLBAR — evita que el borde del trigger-wrap quede recortado
El toolbar calcula la altura del x-form-item-body sin incluir el borde
que agregamos en sección 13, causando que el borde inferior se clip.
========================================================================== */
.x-form-item,
.x-field,
.x-form-item-body {
overflow: visible !important;
}
/* ==========================================================================
6. GRID
cls: 'bo-grid'
========================================================================== */
.bo-grid.x-grid-panel,
.bo-grid .x-panel-body {
background: var(--bo-surface) !important;
border: 1px solid var(--bo-border) !important;
}
.bo-grid .x-grid-header-ct {
background: var(--bo-header-bg) !important;
border: 1px solid var(--bo-border) !important;
border-bottom: 2px solid var(--bo-header-border) !important;
}
.bo-grid .x-column-header {
background: var(--bo-header-bg) !important;
border-right: 1px solid var(--bo-border) !important;
}
.bo-grid .x-column-header-inner,
.bo-grid .x-column-header-text {
color: var(--bo-text-muted) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.4px !important;
}
.bo-grid .x-column-header-over {
background: var(--bo-border) !important;
}
.bo-grid .x-grid-item-alt {
background: var(--bo-surface) !important;
}
.bo-grid .x-grid-item {
background: var(--bo-surface) !important;
border-bottom: 1px solid var(--bo-row-border) !important;
box-shadow: none !important;
}
.bo-grid .x-grid-item:hover,
.bo-grid .x-grid-item-over {
background: var(--bo-header-bg) !important;
}
.bo-grid .x-grid-item-selected,
.bo-grid .x-grid-item-selected .x-grid-cell {
background: rgba(47, 111, 176, 0.08) !important;
}
body.dark-mode .bo-grid .x-grid-item-selected,
body.dark-mode .bo-grid .x-grid-item-selected .x-grid-cell {
background: rgba(77, 143, 214, 0.12) !important;
}
.bo-grid .x-grid-cell {
border-right: none !important;
border-bottom: none !important;
}
.bo-grid .x-grid-cell {
vertical-align: middle !important;
}
.bo-grid .x-grid-cell-inner {
padding: 6.5px 12px !important;
color: var(--bo-text) !important;
font-size: 12.5px !important;
display: flex !important;
align-items: center !important;
}
.bo-grid .bo-col-right .x-grid-cell-inner {
justify-content: flex-end;
}
.bo-grid .col-codigo .x-grid-cell-inner {
color: var(--bo-primary) !important;
font-weight: 600 !important;
}
/* Clase para columna Codigo via renderer */
.bo-code {
color: var(--bo-primary);
font-weight: 600;
font-size: 12.5px;
}
/* Texto truncado con ellipsis en celdas flex de .bo-grid.
Úsalo como flex item dentro del renderer: ... */
.bo-cell-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
/* Fondo del area vacia del grid (clases exactas del tema Crisp) */
body.dark-mode .x-grid-body,
body.dark-mode .x-grid-view,
body.dark-mode .x-grid-item-container {
background-color: var(--bo-surface) !important;
background-image: none !important;
}
/* Mensaje "No data to display" */
body.dark-mode .x-grid-empty {
color: var(--bo-text-muted) !important;
background: var(--bo-surface) !important;
}
/* Bordes de fila — Crisp usa x-grid-with-row-lines en el */
body.dark-mode .x-grid-with-row-lines .x-grid-row {
border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
background-image: none !important;
}
body.dark-mode .x-grid-with-row-lines .x-grid-cell,
body.dark-mode .x-grid-with-row-lines .x-grid-td {
border-bottom: none !important;
background-image: none !important;
}
/* ── 6b. Grid — fila de totales / summary ── */
.x-grid-row-summary .x-grid-cell,
.x-grid-row-total .x-grid-cell,
.x-grid-row-summary-item .x-grid-cell {
background-color: #F9FAFB !important;
font-weight: 600 !important;
border-top: 2px solid var(--bo-border) !important;
color: var(--bo-text) !important;
}
body.dark-mode .x-grid-row-summary .x-grid-cell,
body.dark-mode .x-grid-row-total .x-grid-cell,
body.dark-mode .x-grid-row-summary-item .x-grid-cell {
background-color: var(--bo-header-bg) !important;
border-top-color: var(--bo-border-strong) !important;
color: var(--bo-text) !important;
}
/* ==========================================================================
7. BADGES / PILDORAS DE ESTADO
Uso en renderer:
return '' + value + '';
Variantes de color:
bo-badge-green — Activa, Aprobado, Completado
bo-badge-red — Inactiva, Cancelado, Rechazado
bo-badge-yellow — Pendiente, En revision, Advertencia
bo-badge-blue — En proceso, En transito, Programado
bo-badge-gray — Sin estado, N/A, Desconocido
bo-badge-orange — Pausado, Retenido, Requiere atencion
bo-badge-purple — Especial, Prioritario, VIP
========================================================================== */
/* ── Base ── */
.bo-badge {
display: inline-block;
border-radius: 10px;
padding: 3px 10px;
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
background: rgba(107, 114, 128, 0.12);
color: var(--bo-text-muted);
}
/* ── Verde — Activa / Aprobado / Completado ── */
.bo-badge-green { background: #ECFDF3; color: #067647; }
body.dark-mode .bo-badge-green { background: rgba(6, 118, 71, 0.2); color: #5fce90; }
/* ── Rojo — Inactiva / Cancelado / Rechazado ── */
.bo-badge-red { background: #FEF3F2; color: #B42318; }
body.dark-mode .bo-badge-red { background: rgba(180, 35, 24, 0.2); color: var(--bo-danger); }
/* ── Amarillo — Pendiente / En revision ── */
.bo-badge-yellow { background: #FFFAEB; color: #B54708; }
body.dark-mode .bo-badge-yellow { background: rgba(181, 71, 8, 0.2); color: #fec84b; }
/* ── Azul — En proceso / En transito ── */
.bo-badge-blue { background: #EFF4FF; color: #175CD3; }
body.dark-mode .bo-badge-blue { background: rgba(23, 92, 211, 0.2); color: var(--bo-primary); }
/* ── Gris — Sin estado / N/A ── */
.bo-badge-gray { background: #F2F4F7; color: #475467; }
body.dark-mode .bo-badge-gray { background: rgba(71, 84, 103, 0.25); color: var(--bo-text-muted); }
/* ── Naranja — Pausado / Requiere atencion ── */
.bo-badge-orange { background: #FFF6ED; color: #C4320A; }
body.dark-mode .bo-badge-orange { background: rgba(196, 50, 10, 0.2); color: #f38744; }
/* ── Morado — Especial / Prioritario ── */
.bo-badge-purple { background: #F4F3FF; color: #5925DC; }
body.dark-mode .bo-badge-purple { background: rgba(89, 37, 220, 0.2); color: #9b8afb; }
/* ── Wrapper para badges en celdas de grid ── */
.badge-cell-wrap {
display: flex;
align-items: center;
height: 100%;
}
/* ==========================================================================
QUOTE / COTIZACION — version y estado de desactualizacion
Uso en toolbar:
'Versión 3'
'⚠ Desactualizada'
========================================================================== */
/* ── Versión de cotización ── */
.quo-version {
display: inline-block;
border-radius: 10px;
padding: 3px 10px;
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
background: #EFF4FF;
color: #175CD3;
}
body.dark-mode .quo-version { background: rgba(23, 92, 211, 0.2); color: var(--bo-primary); }
/* ── Desactualizada — la cotizacion no refleja los ultimos cambios ── */
.quo-stale {
display: inline-block;
border-radius: 10px;
padding: 3px 10px;
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
background: #FFF6ED;
color: #C4320A;
}
body.dark-mode .quo-stale { background: rgba(196, 50, 10, 0.2); color: #f38744; }
/* ==========================================================================
8. LINK — .bo-link
Uso en renderer: return '' + v + '';
========================================================================== */
.bo-link {
color: var(--bo-link);
text-decoration: none;
font-size: 12.5px;
}
.bo-link:hover {
text-decoration: underline;
color: var(--bo-primary);
}
/* ==========================================================================
9. PAGINACION
cls: 'bo-paging'
========================================================================== */
.bo-paging.x-paging-toolbar,
.bo-paging.x-toolbar {
background: var(--bo-header-bg) !important;
border-top: 1px solid var(--bo-border) !important;
padding: 4px 12px !important;
}
.bo-paging .x-paging-info,
.bo-paging .x-toolbar-item .x-form-display-field {
color: var(--bo-text-muted) !important;
font-size: 12px !important;
}
.bo-paging .x-btn {
border-radius: 5px !important;
border: 1px solid transparent !important;
}
.bo-paging .x-btn:hover {
background: var(--bo-border) !important;
border-color: var(--bo-border-strong) !important;
}
.bo-paging .x-btn .x-btn-icon-el {
color: var(--bo-text-muted) !important;
}
.bo-paging .x-btn:hover .x-btn-icon-el {
color: var(--bo-primary) !important;
}
.bo-paging .x-form-text,
.bo-paging .x-form-num-field {
border: 1px solid var(--bo-border) !important;
border-radius: 5px !important;
background: var(--bo-surface) !important;
color: var(--bo-text) !important;
font-size: 12px !important;
padding: 3px 5px !important;
}
/* Solo el input de número de página */
.bo-paging .x-form-num-field {
text-align: center !important;
width: 38px !important;
}
body.dark-mode .bo-paging .x-paging-info,
body.dark-mode .bo-paging .x-toolbar-item .x-form-display-field,
body.dark-mode .bo-paging .x-form-display-field,
body.dark-mode .bo-paging .x-form-display-field-body,
body.dark-mode .bo-paging .x-toolbar-text,
body.dark-mode .bo-paging .x-btn-inner,
body.dark-mode .bo-paging span,
body.dark-mode .bo-paging label {
color: #e8eaed !important;
}
body.dark-mode .bo-paging .x-btn .x-btn-icon-el,
body.dark-mode .bo-paging .x-btn-icon-el {
color: #e8eaed !important;
}
body.dark-mode .bo-paging .x-form-text {
background: var(--bo-surface) !important;
color: var(--bo-text) !important;
border-color: var(--bo-border-strong) !important;
}
/* ==========================================================================
10. TOGGLE DARK-MODE — .bo-theme-toggle
handler: function() {
Ext.getBody().toggleCls('dark-mode');
localStorage.setItem('bo-theme', Ext.getBody().hasCls('dark-mode') ? 'dark' : 'light');
}
En launch() / init():
var theme = localStorage.getItem('bo-theme') || 'dark';
if (theme === 'dark') Ext.getBody().addCls('dark-mode');
========================================================================== */
/* ==========================================================================
11. FORMULARIOS — DARK MODE GLOBAL
Los selectores van directo bajo body.dark-mode sin depender de .bo-form
porque Ext JS renderiza el DOM profundo y la clase del contenedor no
siempre alcanza a los elementos internos.
========================================================================== */
body.dark-mode .bo-form.x-panel,
body.dark-mode .bo-form.x-form-panel,
body.dark-mode .bo-form .x-panel-body {
background: var(--bo-bg) !important;
background-color: var(--bo-bg) !important;
}
/* ── 11.1 Panel y ventana ── */
/* Solo el overlay modal lleva fondo semitransparente */
body.dark-mode .x-mask {
background-color: rgba(0, 0, 0, 0.6) !important;
opacity: 1 !important;
}
body.dark-mode .x-window {
background: var(--bo-surface) !important;
border: 1px solid var(--bo-border-strong) !important;
border-radius: 8px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55),
0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
body.dark-mode .x-panel-body,
body.dark-mode .x-window-body {
background: var(--bo-surface) !important;
}
body.dark-mode .x-panel-header,
body.dark-mode .x-window-header,
body.dark-mode .x-panel-header-default,
body.dark-mode .x-panel-header-default-top {
background: var(--bo-header-bg) !important;
background-image: none !important;
border-bottom: 1px solid var(--bo-border) !important;
border-radius: 8px 8px 0 0 !important;
}
/* Ventanas modales: header y footer más oscuros para contrastar con el body */
body.dark-mode .x-window .x-panel-header,
body.dark-mode .x-window .x-window-header,
body.dark-mode .x-window .x-panel-header-default,
body.dark-mode .x-window .x-panel-header-default-top {
background: #14181f !important;
border-bottom-color: var(--bo-border-strong) !important;
}
body.dark-mode .x-panel-header-title,
body.dark-mode .x-title-text,
body.dark-mode .x-window-header-title {
color: var(--bo-text) !important;
}
body.dark-mode .x-tool {
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
}
body.dark-mode .x-tool:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-radius: 4px !important;
}
body.dark-mode .x-tool-img {
background-color: transparent !important;
filter: invert(1) brightness(0.9) !important;
opacity: 0.7;
}
body.dark-mode .x-tool-img:hover {
opacity: 1;
}
/* ── 11.2 Labels ── */
body.dark-mode .x-form-item-label,
body.dark-mode .x-form-item-label-default {
color: var(--bo-text-muted) !important;
}
/* ── 11.3 Inputs ── */
body.dark-mode .x-form-text,
body.dark-mode .x-form-textarea,
body.dark-mode .x-form-field:not(.x-form-cb) {
background: var(--bo-bg) !important;
background-image: none !important;
color: var(--bo-text) !important;
border-color: #545c6b !important;
border-radius: 5px !important;
}
/* ── 11.3c Checkbox y radio — estilo custom consistente con los demás inputs ──
.x-form-checkbox-default / .x-form-radio-default son el directo en
Ext JS Classic. Pseudo-elementos (::after) NO funcionan en , así que
usamos SVG embebido como background-image para dibujar la palomita y el punto.
appearance:none oculta el render nativo del navegador. */
.x-form-checkbox-default,
.x-form-radio-default {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background: #FFFFFF !important;
background-image: none !important;
border: 1px solid #D0D5DD !important;
border-radius: 3px !important;
box-sizing: border-box !important;
transition: border-color 0.15s ease, background 0.15s ease;
}
.x-form-radio-default {
border-radius: 50% !important;
}
/* Hover: borde azul para feedback */
.x-form-checkbox-default:hover,
.x-form-radio-default:hover {
border-color: var(--bo-primary) !important;
}
/* Checkbox seleccionado: fondo azul + SVG blanco con la palomita */
.x-form-cb-checked .x-form-checkbox-default {
background-color: var(--bo-primary) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
border-color: var(--bo-primary) !important;
}
/* Radio seleccionado: borde azul + SVG con el punto central azul */
.x-form-cb-checked .x-form-radio-default {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
border-color: var(--bo-primary) !important;
}
/* Dark mode */
body.dark-mode .x-form-checkbox-default,
body.dark-mode .x-form-radio-default {
background-color: var(--bo-bg) !important;
border-color: #545c6b !important;
}
body.dark-mode .x-form-cb-checked .x-form-checkbox-default {
background-color: var(--bo-primary) !important;
border-color: var(--bo-primary) !important;
}
body.dark-mode .x-form-cb-checked .x-form-radio-default {
background-image: url("data:image/svg+xml;utf8,") !important;
border-color: var(--bo-primary) !important;
}
body.dark-mode .x-form-text::placeholder,
body.dark-mode .x-form-textarea::placeholder {
color: var(--bo-text-faint) !important;
}
/* Wrapper con trigger (combo, date, spinner) */
body.dark-mode .x-form-trigger-wrap,
body.dark-mode .x-form-trigger-wrap-default {
background-color: var(--bo-bg) !important;
border-color: #545c6b !important;
border-radius: 5px !important;
}
/* El input dentro del trigger-wrap no debe repetir borde */
body.dark-mode .x-form-trigger-wrap .x-form-text,
body.dark-mode .x-form-trigger-wrap .x-form-field {
border: none !important;
background: transparent !important;
}
/* Icono del trigger (flecha, calendario) */
body.dark-mode .x-form-trigger {
background-color: transparent !important;
filter: invert(1) brightness(0.85) !important;
}
/* Campo deshabilitado */
body.dark-mode .x-item-disabled .x-form-text,
body.dark-mode .x-item-disabled .x-form-field,
body.dark-mode .x-item-disabled .x-form-trigger-wrap {
background: var(--bo-border) !important;
color: var(--bo-text-faint) !important;
border-color: var(--bo-border) !important;
}
/* ── 11.3b Display field (read-only, sin input — usado para badges en formulario) ── */
body.dark-mode .x-form-display-field,
body.dark-mode .x-form-display-field-body {
background: transparent !important;
color: var(--bo-text) !important;
}
/* Badges dentro de displayfield: padding compacto para encajar en la altura del form */
.x-form-display-field .bo-badge {
padding: 1px 8px;
font-size: 11px;
vertical-align: middle;
}
/* ── 11.4 Fieldset ── */
body.dark-mode .x-fieldset {
border: 1px solid #484f5e !important;
border-radius: 6px !important;
background: var(--bo-surface) !important;
overflow: visible !important;
}
body.dark-mode .x-fieldset-header,
body.dark-mode .x-fieldset-header-default {
background: transparent !important;
background-image: none !important;
border-bottom: none !important;
}
body.dark-mode .x-fieldset-header-text {
color: var(--bo-text-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
}
body.dark-mode .x-fieldset-body {
background: var(--bo-surface) !important;
overflow: visible !important;
}
/* ── 11.5 Tab panel (paginacion del form) ── */
body.dark-mode .x-tab-bar,
body.dark-mode .x-tab-bar-default,
body.dark-mode .x-tab-bar-default-top {
background: var(--bo-header-bg) !important;
background-image: none !important;
border-bottom-color: var(--bo-border) !important;
}
body.dark-mode .x-tab,
body.dark-mode .x-tab-default,
body.dark-mode .x-tab-default-top {
background: transparent !important;
background-image: none !important;
}
body.dark-mode .x-tab .x-tab-inner,
body.dark-mode .x-tab .x-tab-button {
color: var(--bo-text-muted) !important;
}
body.dark-mode .x-tab.x-tab-active,
body.dark-mode .x-tab-active .x-tab-default,
body.dark-mode .x-tab-active-default-top {
background: var(--bo-surface) !important;
background-image: none !important;
}
body.dark-mode .x-tab.x-tab-active .x-tab-inner,
body.dark-mode .x-tab.x-tab-active .x-tab-button {
color: var(--bo-primary) !important;
}
body.dark-mode .x-tab-panel-body,
body.dark-mode .x-tabpanel-child .x-panel-body {
background: var(--bo-surface) !important;
}
/* ── 11.6 Toolbar dentro del form (botones Guardar / Cancelar) ── */
body.dark-mode .x-form-panel .x-toolbar,
body.dark-mode .x-window .x-toolbar,
body.dark-mode .x-toolbar-footer {
background: var(--bo-header-bg) !important;
background-image: none !important;
border-top: 1px solid var(--bo-border) !important;
border-radius: 0 0 7px 7px !important;
}
/* Ventanas modales: footer más oscuro igual que el header */
body.dark-mode .x-window .x-toolbar,
body.dark-mode .x-window .x-toolbar-footer {
background: #14181f !important;
border-top-color: var(--bo-border-strong) !important;
padding: 10px 16px !important;
}
/* ── 11.7 Flotantes globales ── */
/* BoundList — dropdown de combos */
body.dark-mode .x-boundlist {
background: var(--bo-surface) !important;
border: 1px solid var(--bo-border-strong) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .x-boundlist-item {
color: var(--bo-text) !important;
background: transparent !important;
border-color: transparent !important; /* el theme Crisp pone border 1px dotted #fff */
border-style: solid !important; /* dotted se ve raro en dark; solid+transparente se funde */
}
body.dark-mode .x-boundlist-item-over,
body.dark-mode .x-boundlist-item:hover {
background: var(--bo-header-bg) !important;
color: var(--bo-text) !important;
border-color: var(--bo-header-bg) !important;
}
body.dark-mode .x-boundlist-selected,
body.dark-mode .x-boundlist-item-selected {
background: rgba(77, 143, 214, 0.18) !important;
color: var(--bo-primary) !important;
border-color: rgba(77, 143, 214, 0.18) !important;
}
/* DatePicker */
body.dark-mode .x-datepicker {
background: var(--bo-surface) !important;
border: 1px solid var(--bo-border-strong) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .x-datepicker-header {
background: var(--bo-header-bg) !important;
background-image: none !important;
border-bottom: 1px solid var(--bo-border) !important;
}
body.dark-mode .x-datepicker-column-header-inner {
color: var(--bo-text-muted) !important;
}
body.dark-mode .x-datepicker-date {
color: var(--bo-text) !important;
}
body.dark-mode .x-datepicker-date:hover {
background: var(--bo-header-bg) !important;
border-color: var(--bo-border) !important;
}
body.dark-mode .x-datepicker-selected .x-datepicker-date {
background: var(--bo-primary) !important;
color: #ffffff !important;
border-radius: 4px !important;
}
body.dark-mode .x-datepicker-today .x-datepicker-date {
border: 1px solid var(--bo-primary) !important;
}
body.dark-mode .x-datepicker-disabled .x-datepicker-date {
color: var(--bo-text-faint) !important;
}
body.dark-mode .x-datepicker-footer {
background: var(--bo-header-bg) !important;
background-image: none !important;
border-top: 1px solid var(--bo-border) !important;
}
/* Tabla interna del datepicker: ya pintada por .x-datepicker, pero las celdas
y la fila de encabezado (L M M J V S D) traen fondo blanco del theme Crisp. */
body.dark-mode .x-datepicker-inner,
body.dark-mode .x-datepicker-column-header {
background: var(--bo-surface) !important;
background-color: var(--bo-surface) !important;
}
body.dark-mode .x-datepicker-column-header {
border-bottom: 1px solid var(--bo-border) !important;
}
/* Bordes entre celdas del calendario: el theme pone border:1px solid #fff. */
body.dark-mode .x-datepicker-cell {
border-color: var(--bo-surface) !important;
}
/* Días del mes anterior/siguiente: color muted para distinguirlos del mes actual */
body.dark-mode .x-datepicker-prevday .x-datepicker-date,
body.dark-mode .x-datepicker-nextday .x-datepicker-date {
color: var(--bo-text-faint) !important;
}
/* Fondo del día seleccionado: el theme lo pinta #d6e9f6 (azul claro) y rompe
con el estilo del dark. Lo cambiamos al color primario con texto blanco. */
body.dark-mode .x-datepicker-selected .x-datepicker-date,
body.dark-mode .x-datepicker-selected div.x-datepicker-date {
background: var(--bo-primary) !important;
color: #ffffff !important;
font-weight: 500 !important;
}
/* MonthPicker (cuando haces click en el header para elegir mes/año) */
body.dark-mode .x-monthpicker {
background: var(--bo-surface) !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode .x-monthpicker-item,
body.dark-mode .x-monthpicker-item-inner {
color: var(--bo-text) !important;
}
body.dark-mode .x-monthpicker-item-hover .x-monthpicker-item-inner {
background: var(--bo-header-bg) !important;
color: var(--bo-text) !important;
}
body.dark-mode .x-monthpicker-selected .x-monthpicker-item-inner {
background: var(--bo-primary) !important;
color: #ffffff !important;
}
body.dark-mode .x-monthpicker-yearnav {
background: var(--bo-header-bg) !important;
border-bottom: 1px solid var(--bo-border) !important;
}
body.dark-mode .x-monthpicker-yearnav-button-ct {
color: var(--bo-text) !important;
}
body.dark-mode .x-monthpicker-buttons {
background: var(--bo-header-bg) !important;
background-image: none !important;
border-top: 1px solid var(--bo-border) !important;
}
/* Flechas de navegación prev/next: filtro para invertirlas en dark mode */
body.dark-mode .x-datepicker-arrow {
filter: invert(1) brightness(0.9) !important;
opacity: 0.6 !important;
}
body.dark-mode div.x-datepicker-arrow:hover {
opacity: 1 !important;
}
/* ── 11.7b Tooltips (tooltip: 'texto' en cualquier componente) ──
Ext JS Classic usa .x-tip con body .x-tip-body y texto .x-tip-inner.
Lo pintamos con los colores del tema (claro y oscuro) + bordes y sombra
suaves, respetando la flecha indicadora (.x-tip-anchor). */
.x-tip.x-tip-default {
background: var(--bo-surface) !important;
background-image: none !important;
border: 1px solid var(--bo-border) !important;
border-radius: 6px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
padding: 2px !important;
}
.x-tip.x-tip-default .x-tip-body,
.x-tip.x-tip-default .x-tip-body-default,
.x-tip.x-tip-default .x-tip-inner {
background: transparent !important;
color: var(--bo-text) !important;
font-size: 12px !important;
line-height: 1.4 !important;
padding: 6px 10px !important;
}
/* Flecha del tooltip: hereda color del borde */
.x-tip.x-tip-default .x-tip-anchor {
border-color: var(--bo-border) transparent transparent transparent !important;
}
/* Dark mode */
body.dark-mode .x-tip.x-tip-default {
background: var(--bo-header-bg) !important;
border-color: var(--bo-border-strong) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .x-tip.x-tip-default .x-tip-body,
body.dark-mode .x-tip.x-tip-default .x-tip-body-default,
body.dark-mode .x-tip.x-tip-default .x-tip-inner {
color: var(--bo-text) !important;
}
body.dark-mode .x-tip.x-tip-default .x-tip-anchor {
border-color: var(--bo-border-strong) transparent transparent transparent !important;
}
/* ── 11.8 Errores de validación (msgTarget: 'under') ── */
.x-form-text.x-form-invalid-field,
.x-form-textarea.x-form-invalid-field,
.x-form-field.x-form-invalid-field {
border-color: var(--bo-danger) !important;
background-color: #fff6f6 !important;
}
.x-form-trigger-wrap.x-form-trigger-wrap-invalid {
border-color: var(--bo-danger) !important;
background-color: #fff6f6 !important;
}
.x-form-error-msg {
color: var(--bo-danger) !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
padding-top: 2px !important;
}
/* Dark mode */
body.dark-mode .x-form-text.x-form-invalid-field,
body.dark-mode .x-form-textarea.x-form-invalid-field,
body.dark-mode .x-form-field.x-form-invalid-field {
border-color: var(--bo-danger) !important;
background-color: #2c1a1a !important;
}
body.dark-mode .x-form-trigger-wrap.x-form-trigger-wrap-invalid {
border-color: var(--bo-danger) !important;
background-color: #2c1a1a !important;
}
body.dark-mode .x-form-error-msg {
color: var(--bo-danger) !important;
}
/* Dark mode — tooltip de error */
body.dark-mode .x-tip.x-form-invalid-tip {
background: #2c1a1a !important;
background-image: none !important;
border-color: var(--bo-danger) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .x-tip.x-form-invalid-tip .x-tip-body,
body.dark-mode .x-tip.x-form-invalid-tip .x-tip-inner {
background: transparent !important;
color: var(--bo-danger) !important;
}
/* ==========================================================================
12. WORKSPACE
Migrado desde formatoForm.css — fuente única de verdad para el shell.
Incluye estilos de luz y oscuro para todos los componentes del workspace.
========================================================================== */
/* ── 12.0 Tokens del workspace ── */
:root {
--workspace-bg: #f5f7fb;
--workspace-surface: #ffffff;
--workspace-surface-soft: #f8fafd;
--workspace-border: #e2e7ee;
--workspace-border-active: #cbdcf2;
--workspace-primary: #1474d4;
--workspace-primary-soft: #eef5ff;
--workspace-text: #172033;
--workspace-text-muted: #667085;
}
body.dark-mode {
--workspace-bg: var(--bo-bg);
--workspace-surface: var(--bo-surface);
--workspace-surface-soft: var(--bo-header-bg);
--workspace-border: var(--bo-border);
--workspace-border-active: var(--bo-border-strong);
--workspace-primary: var(--bo-primary);
--workspace-primary-soft: rgba(77, 143, 214, 0.12);
--workspace-text: var(--bo-text);
--workspace-text-muted: var(--bo-text-muted);
}
/* ── 12.1 Barra superior utilitaria ── */
.workspaceTopbar {
padding: 0 14px !important;
background: #f8fafd !important;
border: 0 !important;
border-bottom: 1px solid #e2e7ee !important;
box-shadow: none !important;
}
.workspaceSystemName {
color: #344054 !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.1px;
}
.workspaceClock {
display: flex;
align-items: center;
margin-right: 10px;
color: #667085 !important;
font-size: 12px !important;
font-weight: 500 !important;
}
.workspaceClock::before {
content: '◷';
margin-right: 6px;
color: #1474d4;
font-size: 15px;
line-height: 1;
}
.workspaceTopbar .x-btn.workspaceTopbarButton {
height: 28px !important;
margin-left: 5px !important;
padding: 0 9px !important;
background: transparent !important;
border: 1px solid #D0D5DD !important;
border-radius: 6px !important;
box-shadow: none !important;
transition: background 0.15s ease, border-color 0.15s ease;
}
.workspaceTopbar .x-btn.workspaceTopbarButton .x-btn-inner {
color: #475467 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.workspaceTopbar .x-btn.workspaceCloseAppButton:hover,
.workspaceTopbar .x-btn.workspaceCloseAppButton.x-btn-over {
background: #eef5ff !important;
border-color: #cbdcf2 !important;
}
.workspaceTopbar .x-btn.workspaceCloseAppButton:hover .x-btn-inner,
.workspaceTopbar .x-btn.workspaceCloseAppButton.x-btn-over .x-btn-inner {
color: #1474d4 !important;
}
.workspaceTopbar .x-btn.workspaceExitButton {
border-color: #edf0f4 !important;
}
.workspaceTopbar .x-btn.workspaceExitButton:hover,
.workspaceTopbar .x-btn.workspaceExitButton.x-btn-over {
background: #fff4f2 !important;
border-color: #f3c7c2 !important;
}
.workspaceTopbar .x-btn.workspaceExitButton:hover .x-btn-inner,
.workspaceTopbar .x-btn.workspaceExitButton.x-btn-over .x-btn-inner {
color: #b42318 !important;
}
.workspaceTopbarSeparator {
height: 20px !important;
margin: 0 5px !important;
border-left-color: #d8dee8 !important;
}
body.dark-mode .workspaceTopbar {
background: var(--bo-header-bg) !important;
border-bottom-color: var(--bo-border) !important;
}
body.dark-mode .workspaceSystemName {
color: var(--bo-text-muted) !important;
}
body.dark-mode .workspaceClock {
color: var(--bo-text-muted) !important;
}
body.dark-mode .workspaceClock::before {
color: var(--bo-primary) !important;
}
body.dark-mode .workspaceTopbar .x-btn.workspaceTopbarButton {
background: transparent !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode .workspaceTopbar .x-btn.workspaceTopbarButton .x-btn-inner {
color: var(--bo-text-muted) !important;
}
body.dark-mode .workspaceTopbar .x-btn.workspaceTopbarButton:hover {
background: var(--bo-border) !important;
}
body.dark-mode .workspaceTopbar .x-btn.workspaceCloseAppButton:hover,
body.dark-mode .workspaceTopbar .x-btn.workspaceCloseAppButton.x-btn-over {
background: rgba(77, 143, 214, 0.12) !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode .workspaceTopbar .x-btn.workspaceCloseAppButton:hover .x-btn-inner,
body.dark-mode .workspaceTopbar .x-btn.workspaceCloseAppButton.x-btn-over .x-btn-inner {
color: var(--bo-primary) !important;
}
body.dark-mode .workspaceTopbar .x-btn.workspaceExitButton {
border-color: var(--bo-border) !important;
}
body.dark-mode .workspaceTopbar .x-btn.workspaceExitButton:hover,
body.dark-mode .workspaceTopbar .x-btn.workspaceExitButton.x-btn-over {
background: rgba(180, 35, 24, 0.12) !important;
border-color: rgba(229, 132, 127, 0.3) !important;
}
body.dark-mode .workspaceTopbar .x-btn.workspaceExitButton:hover .x-btn-inner,
body.dark-mode .workspaceTopbar .x-btn.workspaceExitButton.x-btn-over .x-btn-inner {
color: var(--bo-danger) !important;
}
body.dark-mode .workspaceTopbarSeparator {
border-left-color: var(--bo-border-strong) !important;
}
/* ── 12.2 Header principal (logo, empresa, usuario) ── */
#formHeader,
#formHeader-body,
#ctnHeader,
#ctnHeader-body,
#lblCompanyName,
#lblCompanyName-body,
#lblAditionalInfo,
#lblAditionalInfo-body {
background: #ffffff !important;
border: 0 !important;
padding: 0 !important;
}
#formHeader {
border-bottom: 1px solid #e2e7ee !important;
box-shadow: 0 2px 8px rgba(30, 45, 70, 0.06);
}
.workspaceLogoContainer {
box-sizing: border-box;
border-right: 1px solid #d6dce5;
}
.workspaceCompany {
padding-left: 26px;
box-sizing: border-box;
}
.workspaceCompany::after {
content: '';
position: absolute;
top: -95px;
right: 80px;
width: 360px;
height: 260px;
background: linear-gradient(
135deg,
transparent 0 33%,
rgba(148, 163, 184, 0.08) 33% 40%,
transparent 40% 48%,
rgba(148, 163, 184, 0.12) 48% 55%,
transparent 55%
);
pointer-events: none;
z-index: 0;
}
.workspaceCompany::before {
content: '';
position: absolute;
top: -80px;
right: 145px;
width: 16px;
height: 240px;
background: #246fc6;
transform: rotate(40deg);
pointer-events: none;
z-index: 1;
}
.workspaceCompany .x-fieldset-body,
.workspaceCompany .x-box-inner,
.workspaceCompany .x-box-target {
position: relative;
z-index: 2;
background: transparent !important;
}
.workspaceCompanyLegalName {
display: block;
color: #1d2939;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
}
.workspaceCompanyTradeName {
display: block;
margin-top: 3px;
color: #667085;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
}
.workspaceUserInfo {
padding-right: 22px;
box-sizing: border-box;
}
.workspaceUserDetail {
display: block;
margin-top: 2px;
color: #667085;
font-size: 12px;
line-height: 1.2;
}
.workspaceUserBlock {
padding-right: 20px;
box-sizing: border-box;
}
.workspaceUserAvatar {
display: block;
width: 48px;
height: 48px;
min-width: 48px;
max-width: 48px;
min-height: 48px;
max-height: 48px;
border-radius: 50%;
background: #2f77db;
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
line-height: 48px;
box-sizing: border-box;
overflow: hidden;
margin-right: 14px;
}
.workspaceUserText { min-width: 0; }
.workspaceUserName {
display: block;
color: #162032;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
}
.workspaceUserMail {
display: block;
margin-top: 4px;
color: #667085;
font-size: 12px;
line-height: 1.2;
}
body.dark-mode #formHeader,
body.dark-mode #formHeader-body,
body.dark-mode #ctnHeader,
body.dark-mode #ctnHeader-body,
body.dark-mode #lblCompanyName,
body.dark-mode #lblCompanyName-body,
body.dark-mode #lblAditionalInfo,
body.dark-mode #lblAditionalInfo-body {
background: var(--bo-header-bg) !important;
}
body.dark-mode #formHeader {
border-bottom-color: var(--bo-border) !important;
box-shadow: none !important;
}
body.dark-mode .workspaceLogoContainer {
border-right-color: var(--bo-border) !important;
}
body.dark-mode .workspaceCompany::before {
background: var(--bo-primary) !important;
opacity: 0.5;
}
body.dark-mode .workspaceCompany::after { opacity: 0.15; }
body.dark-mode .workspaceCompanyLegalName { color: var(--bo-text) !important; }
body.dark-mode .workspaceCompanyTradeName { color: var(--bo-text-muted) !important; }
body.dark-mode .workspaceUserName { color: var(--bo-text) !important; }
body.dark-mode .workspaceUserMail,
body.dark-mode .workspaceUserDetail { color: var(--bo-text-muted) !important; }
/* ── 12.3 Barra de categorías (MASTER DATA, FIELD SERVICE…) ── */
#panelGroupActivities,
#panelGroupActivities-body,
#panelGroupActivities .x-panel-body,
#panelGroupActivities .x-toolbar-default,
#panelGroupActivities .x-box-inner,
#panelGroupActivities .x-box-target {
background: transparent !important;
}
#panelGroupActivities {
position: relative;
z-index: 2;
padding-left: 28px;
border: 0 !important;
border-bottom: none !important;
box-sizing: border-box;
}
#panelGroupActivities .x-btn.btnActivity {
position: relative;
z-index: 1;
height: 50px !important;
margin: 6px 5px 0 0 !important;
padding: 0 22px;
background: var(--workspace-surface) !important;
border: 1px solid var(--workspace-border) !important;
border-bottom: 0 !important;
border-radius: 8px 8px 0 0 !important;
box-shadow: none !important;
transition: background 0.16s ease, border-color 0.16s ease;
}
#panelGroupActivities .x-btn.btnActivity .x-btn-inner {
color: #46546a !important;
font-size: 14px !important;
font-weight: 600 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#panelGroupActivities .x-btn.btnActivity.x-btn-over,
#panelGroupActivities .x-btn.btnActivity:hover {
background: var(--workspace-primary-soft) !important;
border-color: var(--workspace-border-active) !important;
}
#panelGroupActivities .x-btn.btnActivity.x-btn-pressed {
z-index: 3;
background: var(--workspace-surface) !important;
border-color: var(--workspace-border-active) !important;
}
#panelGroupActivities .x-btn.btnActivity.x-btn-pressed::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 3px;
background: var(--workspace-primary);
}
body.dark-mode #panelGroupActivities,
body.dark-mode #panelGroupActivities-body,
body.dark-mode #panelGroupActivities .x-panel-body,
body.dark-mode #panelGroupActivities .x-toolbar-default,
body.dark-mode #panelGroupActivities .x-box-inner,
body.dark-mode #panelGroupActivities .x-box-target {
background: var(--bo-header-bg) !important;
}
body.dark-mode #panelGroupActivities { border-bottom-color: var(--bo-border) !important; }
body.dark-mode #panelGroupActivities .x-btn.btnActivity {
background: var(--bo-surface) !important;
border-color: var(--bo-border) !important;
}
body.dark-mode #panelGroupActivities .x-btn.btnActivity .x-btn-inner {
color: var(--bo-text-muted) !important;
}
body.dark-mode #panelGroupActivities .x-btn.btnActivity.x-btn-over,
body.dark-mode #panelGroupActivities .x-btn.btnActivity:hover {
background: rgba(77, 143, 214, 0.1) !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode #panelGroupActivities .x-btn.btnActivity.x-btn-over .x-btn-inner,
body.dark-mode #panelGroupActivities .x-btn.btnActivity:hover .x-btn-inner {
color: var(--bo-primary) !important;
}
body.dark-mode #panelGroupActivities .x-btn.btnActivity.x-btn-pressed {
background: var(--bo-surface) !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode #panelGroupActivities .x-btn.btnActivity.x-btn-pressed .x-btn-inner {
color: var(--bo-primary) !important;
}
/* ── 12.4 Panel y tarjetas de actividades ── */
#panelActivities,
#panelActivities-body,
.workspaceCardsPanel,
.workspaceCardsPanel .x-panel-body,
.workspaceCardsPanel .x-panel-body-default {
background: var(--workspace-bg) !important;
border: 0 !important;
}
#panelActivities-body { padding: 0 !important; }
.activityCardsGrid {
max-width: none;
background: transparent !important;
box-sizing: border-box;
}
.activityCardsGrid .x-autocontainer-outerCt,
.activityCardsGrid .x-autocontainer-innerCt {
background: transparent !important;
}
/* Flexbox — evita el espaciado desigual de auto-fill con tarjetas de ancho fijo */
.activityCardsGrid .x-autocontainer-innerCt {
display: flex !important;
flex-wrap: wrap !important;
gap: 24px !important;
align-content: flex-start !important;
justify-content: flex-start !important;
}
.activityCardsGrid .activityCard { float: none !important; }
.activityCard {
position: relative;
width: 235px !important;
min-height: 205px !important;
padding: 24px 20px 22px;
box-sizing: border-box;
cursor: pointer;
flex-shrink: 0;
background: var(--workspace-surface);
border: 1px solid var(--workspace-border);
border-radius: 10px;
box-shadow: 0 4px 14px rgba(30, 45, 70, 0.07);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.activityCard:hover {
transform: translateY(-3px);
border-color: var(--workspace-border-active);
box-shadow: 0 10px 20px rgba(30, 70, 130, 0.12);
}
.activityCardIcon {
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
margin-bottom: 18px;
color: var(--workspace-primary);
background: var(--workspace-primary-soft);
border-radius: 50%;
font-size: 30px;
}
.activityCardIcon > span {
display: inline-block;
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.activityCardTitle {
margin-bottom: 10px;
color: var(--workspace-text);
font-size: 17px;
font-weight: 700;
}
.activityCardDescription {
max-width: 175px;
color: var(--bo-text);
font-size: 14px;
line-height: 1.45;
}
.activityCardArrow {
position: absolute;
right: 18px;
bottom: 17px;
color: var(--workspace-primary);
font-size: 28px;
line-height: 1;
}
body.dark-mode #panelActivities,
body.dark-mode #panelActivities-body,
body.dark-mode .workspaceCardsPanel,
body.dark-mode .workspaceCardsPanel .x-panel-body,
body.dark-mode .workspaceCardsPanel .x-panel-body-default {
background: var(--bo-bg) !important;
}
body.dark-mode .activityCard {
background: var(--bo-header-bg) !important;
border-color: var(--bo-border-strong) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
body.dark-mode .activityCard:hover {
border-color: var(--bo-primary) !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .activityCardIcon {
color: var(--bo-primary) !important;
background: rgba(77, 143, 214, 0.18) !important;
}
body.dark-mode .activityCardTitle { color: var(--bo-text) !important; }
body.dark-mode .activityCardDescription { color: var(--bo-text-muted) !important; }
body.dark-mode .activityCardArrow { color: var(--bo-primary) !important; }
/* ── 12.5 Menú lateral ── */
#treePanelMenu,
#treePanelMenu .x-panel-body,
#treePanelMenu .x-grid-body,
#treePanelMenu .x-grid-view {
background: #ffffff !important;
border: 0 !important;
border-right: 1px solid var(--workspace-border) !important;
}
#treePanelMenu .x-grid-item,
#treePanelMenu .x-grid-cell {
background: transparent !important;
border: 0 !important;
}
#treePanelMenu .x-grid-item { margin: 1px 14px; }
#treePanelMenu .x-grid-cell-inner-treecolumn {
display: flex;
align-items: center;
min-height: 36px;
padding-top: 0;
padding-bottom: 0;
color: #4f5b70;
font-size: 13px;
font-weight: 500;
border-radius: 7px;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#treePanelMenu .x-grid-item-over .x-grid-cell-inner-treecolumn {
color: #245a9c;
background: #f3f7fc !important;
}
#treePanelMenu .x-grid-item-selected .x-grid-cell-inner-treecolumn {
color: #0f63c9 !important;
font-weight: 600;
background: #eaf2ff !important;
box-shadow: inset 3px 0 0 #1474d4;
}
#treePanelMenu .x-tree-icon { margin-right: 10px; }
#treePanelMenu .x-tree-elbow-img { opacity: 0.65; }
#treePanelMenu .sidebarTreeLevel1 .x-tree-node-text { font-weight: 600; }
#treePanelMenu .sidebarTreeLevel2 .x-tree-node-text { font-weight: 400; }
#treePanelMenu .sidebarTreeLeaf { cursor: pointer; }
body.dark-mode #treePanelMenu,
body.dark-mode #treePanelMenu .x-panel-body,
body.dark-mode #treePanelMenu .x-grid-body,
body.dark-mode #treePanelMenu .x-grid-view {
background: var(--bo-header-bg) !important;
border-right-color: var(--bo-border) !important;
}
body.dark-mode #treePanelMenu .x-grid-item,
body.dark-mode #treePanelMenu .x-grid-item-alt,
body.dark-mode #treePanelMenu .x-grid-cell,
body.dark-mode #treePanelMenu .x-grid-row,
body.dark-mode #treePanelMenu .x-grid-item-container,
body.dark-mode #treePanelMenu .x-scroller {
background: var(--bo-header-bg) !important;
}
body.dark-mode #treePanelMenu .x-grid-cell-inner-treecolumn {
color: var(--bo-text-muted) !important;
}
body.dark-mode #treePanelMenu .x-grid-item-over .x-grid-cell-inner-treecolumn {
color: var(--bo-primary) !important;
background: rgba(77, 143, 214, 0.08) !important;
}
body.dark-mode #treePanelMenu .x-grid-item-selected .x-grid-cell-inner-treecolumn {
color: var(--bo-primary) !important;
font-weight: 600;
background: rgba(77, 143, 214, 0.12) !important;
box-shadow: inset 3px 0 0 var(--bo-primary) !important;
}
/* ── 12.5.1 Botón colapsar sidebar ── */
/* Barra del splitter: mismo color que el panel central para que se funda sin crear línea oscura */
.x-splitter,
.x-splitter-default,
.x-splitter-vertical,
.x-splitter-vertical .x-splitter-el,
.x-splitter-default .x-splitter-el {
background: var(--bo-surface) !important;
background-color: var(--bo-surface) !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Chip centrado en el borde derecho del sidebar */
.x-layout-split-west {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 48px !important;
padding: 0 !important;
background: #ffffff !important;
border: 1px solid #dde2e9 !important;
border-left: none !important;
border-radius: 0 10px 10px 0 !important;
box-shadow: 3px 0 8px -2px rgba(0, 0, 0, 0.12) !important;
cursor: pointer !important;
transition: background 0.2s ease, box-shadow 0.2s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.x-layout-split-west::before {
content: '‹';
font-size: 14px;
font-weight: 700;
color: #8392a5;
line-height: 1;
pointer-events: none;
}
.x-layout-split-west:hover {
background: #f0f4f8 !important;
box-shadow: 4px 0 12px -2px rgba(0, 0, 0, 0.16) !important;
}
.x-layout-split-west:hover::before { color: #1474d4; }
/* Dark mode — igual que el panel central */
body.dark-mode .x-splitter-vertical,
body.dark-mode .x-splitter-vertical .x-splitter-el {
background: var(--bo-surface) !important;
background-color: var(--bo-surface) !important;
}
body.dark-mode .x-layout-split-west {
background: var(--bo-surface) !important;
border-color: var(--bo-border) !important;
box-shadow: 3px 0 8px -2px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .x-layout-split-west::before { color: var(--bo-text-muted); }
body.dark-mode .x-layout-split-west:hover {
background: var(--bo-border) !important;
box-shadow: 4px 0 12px -2px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .x-layout-split-west:hover::before { color: var(--bo-primary); }
/* ── 12.5.2 Panel y cabecera del sidebar ── */
.sidebarPanel {
background: #ffffff;
border-right: 1px solid var(--workspace-border);
}
.sidebarMenuTitle {
display: flex;
align-items: center;
gap: 14px;
margin: 0 16px;
padding: 22px 16px 18px;
color: #344054;
font-size: 14px;
font-weight: 500;
border-bottom: 1px solid #e7ebf0;
}
/* Icono circular en la cabecera del sidebar — compatible con Font Awesome:
*/
.sidebarMenuTitleIcon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
color: var(--workspace-primary);
background: var(--workspace-primary-soft);
border-radius: 50%;
font-size: 16px;
}
body.dark-mode .sidebarPanel {
background: var(--bo-surface) !important;
border-right-color: var(--bo-border) !important;
}
body.dark-mode .sidebarMenuTitle {
color: var(--bo-text) !important;
border-bottom-color: var(--bo-border) !important;
}
body.dark-mode .sidebarMenuTitleIcon {
color: var(--bo-primary) !important;
background: rgba(77, 143, 214, 0.18) !important;
}
/* ── 12.5.3 Header de navegación del sidebar ── */
.sidebarNavigationLabel {
padding-left: 14px;
color: var(--workspace-text-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
line-height: 30px;
}
/* Base icon-only buttons */
.btnAddMenuItem.x-btn {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
padding: 0 !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
box-shadow: none !important;
transition: background 0.15s ease, border-color 0.15s ease;
}
.btnAddMenuItem.x-btn .x-btn-icon-el {
color: var(--workspace-text-muted) !important;
font-size: 13px !important;
width: 13px !important;
height: 13px !important;
line-height: 13px !important;
}
/* Agregar — hover azul */
#btnMenuCreate.x-btn:hover,
#btnMenuCreate.x-btn.x-btn-over {
background: var(--workspace-primary-soft) !important;
border-color: var(--workspace-border-active) !important;
}
#btnMenuCreate.x-btn:hover .x-btn-icon-el,
#btnMenuCreate.x-btn.x-btn-over .x-btn-icon-el {
color: var(--workspace-primary) !important;
}
/* Editar — hover neutro */
#btnMenuEdit.x-btn:hover,
#btnMenuEdit.x-btn.x-btn-over {
background: var(--workspace-surface-soft) !important;
border-color: var(--workspace-border) !important;
}
#btnMenuEdit.x-btn:hover .x-btn-icon-el,
#btnMenuEdit.x-btn.x-btn-over .x-btn-icon-el {
color: var(--workspace-text) !important;
}
/* Eliminar — hover rojo */
#btnMenuDelete.x-btn:hover,
#btnMenuDelete.x-btn.x-btn-over {
background: #fff4f2 !important;
border-color: #f3c7c2 !important;
}
#btnMenuDelete.x-btn:hover .x-btn-icon-el,
#btnMenuDelete.x-btn.x-btn-over .x-btn-icon-el {
color: #b42318 !important;
}
/* Dark mode */
body.dark-mode .sidebarNavigationLabel {
color: var(--bo-text-muted) !important;
}
body.dark-mode .btnAddMenuItem.x-btn .x-btn-icon-el {
color: var(--bo-text-faint) !important;
}
body.dark-mode #btnMenuCreate.x-btn:hover,
body.dark-mode #btnMenuCreate.x-btn.x-btn-over {
background: rgba(77, 143, 214, 0.12) !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode #btnMenuCreate.x-btn:hover .x-btn-icon-el,
body.dark-mode #btnMenuCreate.x-btn.x-btn-over .x-btn-icon-el {
color: var(--bo-primary) !important;
}
body.dark-mode #btnMenuEdit.x-btn:hover,
body.dark-mode #btnMenuEdit.x-btn.x-btn-over {
background: var(--bo-border) !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode #btnMenuEdit.x-btn:hover .x-btn-icon-el,
body.dark-mode #btnMenuEdit.x-btn.x-btn-over .x-btn-icon-el {
color: var(--bo-text) !important;
}
body.dark-mode #btnMenuDelete.x-btn:hover,
body.dark-mode #btnMenuDelete.x-btn.x-btn-over {
background: rgba(180, 35, 24, 0.15) !important;
border-color: rgba(229, 132, 127, 0.3) !important;
}
body.dark-mode #btnMenuDelete.x-btn:hover .x-btn-icon-el,
body.dark-mode #btnMenuDelete.x-btn.x-btn-over .x-btn-icon-el {
color: var(--bo-danger) !important;
}
/* ── 12.6 Centro de notificaciones ── */
.workspaceNotificationsPanel {
background: #ffffff !important;
border: 0 !important;
border-top: 1px solid var(--workspace-border, #e2e7ee) !important;
box-shadow: 0 -4px 14px rgba(30, 45, 70, 0.06);
}
.workspaceNotificationsPanel .x-panel-header {
background: #ffffff !important;
border: 0 !important;
border-bottom: 1px solid #e8edf3 !important;
}
.workspaceNotificationsPanel .x-title-text {
color: #344054 !important;
font-size: 13px !important;
font-weight: 700 !important;
overflow: visible !important;
}
.notificationCenterTitle {
color: #344054;
font-size: 13px;
font-weight: 700;
}
.notificationCenterBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
margin-left: 12px;
padding: 0 7px;
box-sizing: border-box;
color: #1474d4;
background: #eef5ff;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
}
.notificationCenterSummary {
margin-left: 14px;
color: #667085;
font-size: 12px;
font-weight: 500;
}
.notificationCenterStatus {
display: inline-flex;
align-items: center;
margin-left: auto;
margin-right: 12px;
color: #667085;
font-size: 12px;
font-weight: 500;
}
.notificationCenterStatusDot {
width: 8px;
height: 8px;
margin-right: 8px;
background: #22c55e;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
body.dark-mode .workspaceNotificationsPanel {
background: var(--bo-header-bg) !important;
border-top-color: var(--bo-border) !important;
box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .workspaceNotificationsPanel .x-panel-header {
background: var(--bo-header-bg) !important;
border-bottom-color: var(--bo-border) !important;
}
body.dark-mode .workspaceNotificationsPanel .x-title-text,
body.dark-mode .notificationCenterTitle { color: var(--bo-text) !important; }
body.dark-mode .notificationCenterBadge {
color: var(--bo-primary) !important;
background: rgba(77, 143, 214, 0.15) !important;
}
body.dark-mode .notificationCenterSummary,
body.dark-mode .notificationCenterStatus { color: var(--bo-text-muted) !important; }
/* ── 12.7 Tabs tipo botón (appButtonTabs / buttonTabs) ── */
.appButtonTabs > .x-tab-bar,
.appButtonTabs .x-tab-bar-default {
padding: 10px 12px 8px 12px !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-bottom: 1px solid var(--bo-border) !important;
overflow: visible !important;
}
.appButtonTabs .x-tab-bar-body,
.appButtonTabs .x-tab-bar-body-default,
.appButtonTabs .x-tab-bar-body-default-top {
height: auto !important;
min-height: 30px !important;
background: transparent !important;
border: 0 !important;
overflow: visible !important;
}
.appButtonTabs .x-tab-bar .x-box-inner {
height: auto !important;
min-height: 30px !important;
overflow: visible !important;
}
.appButtonTabs .x-tab-bar-strip,
.appButtonTabs .x-tab-bar-strip-default,
.appButtonTabs .x-tab-bar-strip-default-top {
display: none !important;
height: 0 !important;
border: 0 !important;
}
.appButtonTabs .x-tab,
.appButtonTabs .x-tab-default,
.appButtonTabs .x-tab-default-top {
height: 28px !important;
min-height: 28px !important;
margin: 0 8px 0 0 !important;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.appButtonTabs .x-tab-button,
.appButtonTabs .x-tab-button-default,
.appButtonTabs .x-tab-button-default-top {
height: 28px !important;
min-height: 28px !important;
min-width: 100px !important;
padding: 0 14px !important;
background: var(--bo-surface) !important;
background-image: none !important;
border: 1px solid var(--bo-border-strong) !important;
border-radius: 6px !important;
box-shadow: inset 0 -2px 0 transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.appButtonTabs .x-tab-inner,
.appButtonTabs .x-tab-inner-default,
.appButtonTabs .x-tab-inner-default-top {
height: auto !important;
line-height: 16px !important;
color: var(--bo-text-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.appButtonTabs .x-tab-over .x-tab-button,
.appButtonTabs .x-tab-over .x-tab-button-default {
background: var(--bo-header-bg) !important;
border-color: var(--bo-border-strong) !important;
}
.appButtonTabs .x-tab.x-tab-active .x-tab-button,
.appButtonTabs .x-tab.x-tab-active .x-tab-button-default {
background: rgba(47, 111, 176, 0.07) !important;
border-color: var(--bo-primary) !important;
box-shadow: inset 0 -2px 0 var(--bo-primary) !important;
}
.appButtonTabs .x-tab.x-tab-active .x-tab-inner,
.appButtonTabs .x-tab.x-tab-active .x-tab-inner-default {
color: var(--bo-primary) !important;
font-weight: 600 !important;
}
.appButtonTabs .x-tab-focus .x-tab-button,
.appButtonTabs .x-tab-focused .x-tab-button {
outline: none !important;
box-shadow: none !important;
}
/* buttonTabs */
.buttonTabs .x-tab-bar,
.buttonTabs .x-tab-bar-default {
background: transparent !important;
border: 0 !important;
padding: 8px 10px 6px 10px !important;
}
.buttonTabs .x-tab-bar-body,
.buttonTabs .x-tab-bar-body-default {
background: transparent !important;
border: 0 !important;
}
.buttonTabs .x-tab-bar-strip,
.buttonTabs .x-tab-bar-strip-default {
display: none !important;
height: 0 !important;
border: 0 !important;
}
.buttonTabs .x-tab,
.buttonTabs .x-tab-default {
height: 28px !important;
min-width: 118px !important;
margin: 0 6px 0 0 !important;
background: #ffffff !important;
background-image: none !important;
border: 1px solid #D0D5DD !important;
border-radius: 6px !important;
box-shadow: none !important;
transition: background 0.15s ease, border-color 0.15s ease;
}
.buttonTabs .x-tab-inner,
.buttonTabs .x-tab-inner-default {
font-size: 12px !important;
font-weight: 600 !important;
color: #475467 !important;
line-height: 26px !important;
}
.buttonTabs .x-tab-button,
.buttonTabs .x-tab-wrap,
.buttonTabs .x-tab-mc,
.buttonTabs .x-tab-ml,
.buttonTabs .x-tab-mr {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.buttonTabs .x-tab-over,
.buttonTabs .x-tab-over.x-tab-default {
background: #F2F4F7 !important;
background-image: none !important;
border-color: #98A2B3 !important;
}
.buttonTabs .x-tab-active,
.buttonTabs .x-tab-active.x-tab-default {
background: #D1E0FF !important;
border-color: #84ADFF !important;
}
.buttonTabs .x-tab-active .x-tab-inner { color: #175CD3 !important; }
.buttonTabs .x-tab-focus .x-tab-button,
.buttonTabs .x-tab-focused .x-tab-button {
outline: none !important;
box-shadow: none !important;
}
body.dark-mode .appButtonTabs > .x-tab-bar,
body.dark-mode .appButtonTabs .x-tab-bar-default,
body.dark-mode .buttonTabs .x-tab-bar,
body.dark-mode .buttonTabs .x-tab-bar-default {
background: transparent !important;
border-bottom-color: var(--bo-border) !important;
}
body.dark-mode .appButtonTabs .x-tab-button,
body.dark-mode .appButtonTabs .x-tab-button-default,
body.dark-mode .buttonTabs .x-tab,
body.dark-mode .buttonTabs .x-tab-default {
background: var(--bo-surface) !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode .appButtonTabs .x-tab-inner,
body.dark-mode .appButtonTabs .x-tab-inner-default,
body.dark-mode .buttonTabs .x-tab-inner,
body.dark-mode .buttonTabs .x-tab-inner-default {
color: var(--bo-text-muted) !important;
}
body.dark-mode .appButtonTabs .x-tab-over .x-tab-button,
body.dark-mode .buttonTabs .x-tab-over,
body.dark-mode .buttonTabs .x-tab-over.x-tab-default {
background: var(--bo-border) !important;
border-color: var(--bo-border-strong) !important;
}
body.dark-mode .appButtonTabs .x-tab-over .x-tab-inner,
body.dark-mode .buttonTabs .x-tab-over .x-tab-inner { color: var(--bo-text) !important; }
body.dark-mode .appButtonTabs .x-tab.x-tab-active .x-tab-button,
body.dark-mode .buttonTabs .x-tab-active,
body.dark-mode .buttonTabs .x-tab-active.x-tab-default {
background: rgba(77, 143, 214, 0.15) !important;
border-color: rgba(77, 143, 214, 0.4) !important;
box-shadow: inset 0 -2px 0 var(--bo-primary) !important;
}
body.dark-mode .appButtonTabs .x-tab.x-tab-active .x-tab-inner,
body.dark-mode .buttonTabs .x-tab-active .x-tab-inner { color: var(--bo-primary) !important; }
/* ── 12.8 Filas de prioridad en grids ── */
.taskUrgentRow { background-color: #fde8e8 !important; }
.taskHighRow { background-color: #fef3e2 !important; }
.taskMediumRow { background-color: #fefce2 !important; }
.taskDoneRow { background-color: #f0f0f0 !important; color: #aaa !important; }
body.dark-mode .taskUrgentRow { background-color: rgba(180, 35, 24, 0.15) !important; }
body.dark-mode .taskHighRow { background-color: rgba(196, 50, 10, 0.15) !important; }
body.dark-mode .taskMediumRow { background-color: rgba(181, 71, 8, 0.15) !important; }
body.dark-mode .taskDoneRow { background-color: rgba( 71, 84, 103, 0.15) !important; color: var(--bo-text-faint) !important; }
/* ── 12.9 App frame (iframe + header de módulo abierto) ── */
#appFrameCt,
#appFrameCt .x-panel-body {
background: transparent !important;
border: 0 !important;
}
/* Barra de 32px que muestra el módulo activo sobre el iframe */
.activityFrameHeader,
.activityFrameHeader.x-component-default {
display: flex !important;
align-items: center !important;
padding: 1px 20px 1px 20px !important;
background: var(--bo-surface) !important;
background-color: var(--bo-surface) !important;
border-bottom: none !important;
box-sizing: border-box;
font-size: 13px;
font-weight: 600;
color: var(--bo-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Separador visual entre segmentos del breadcrumb */
.activityFrameHeader .frameHeaderSep {
margin: 0 8px;
color: var(--workspace-border-active);
font-weight: 400;
}
/* Último segmento (módulo activo) con color primario */
.activityFrameHeader .frameHeaderActive {
color: var(--workspace-primary);
}
body.dark-mode .activityFrameHeader {
background: var(--bo-bg) !important;
background-color: var(--bo-bg) !important;
border-bottom: none !important;
color: var(--bo-text) !important;
}
body.dark-mode .activityFrameHeader .frameHeaderSep {
color: var(--bo-border-strong) !important;
}
body.dark-mode .activityFrameHeader .frameHeaderActive {
color: var(--bo-primary) !important;
}
/* ==========================================================================
13. VENTANAS MODALES Y FORMULARIOS — base light mode
Los dark-mode overrides están en la sección 11.
========================================================================== */
/* ── 13.1 Ventana modal ── */
.x-window {
border: 1px solid #E4E7EC !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow:
0 4px 6px -1px rgba(16, 24, 40, 0.08),
0 10px 20px -3px rgba(16, 24, 40, 0.12) !important;
}
.x-window-header,
.x-window-header-default,
.x-window-header-default-top {
background: var(--bo-header-bg) !important;
background-image: none !important;
border-bottom: 1px solid var(--bo-border) !important;
padding: 14px 20px !important;
}
.x-window-header .x-window-header-title {
height: auto !important;
overflow: visible !important;
display: flex !important;
align-items: center !important;
}
.x-window-header .x-title-text,
.x-window-header-title .x-title-text {
color: #1d2939 !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.x-window-body,
.x-window-body-default {
background: #ffffff !important;
background-image: none !important;
}
.x-window .x-toolbar,
.x-window .x-toolbar-footer {
background: var(--bo-header-bg) !important;
background-image: none !important;
border-top: 1px solid var(--bo-border) !important;
padding: 10px 16px !important;
}
/* ── 13.2 Fieldset ── */
.x-fieldset,
.x-fieldset-default {
border: 1px solid #D0D5DD !important;
border-radius: 8px !important;
padding: 12px 16px 16px !important;
background: #FFFFFF !important;
}
.x-fieldset-header,
.x-fieldset-header-default {
background: transparent !important;
background-image: none !important;
border: none !important;
}
.x-fieldset-header-text {
color: #344054 !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
.x-fieldset-body { background: transparent !important; }
/* ── 13.3 Labels ── */
.x-form-item-label,
.x-form-item-label-default {
color: #344054 !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/* ── 13.4 Inputs ── */
.x-form-text,
.x-form-textarea,
.x-form-field:not(.x-form-cb) {
border: 1px solid #D0D5DD !important;
border-radius: 6px !important;
background: #FFFFFF !important;
background-image: none !important;
color: #1d2939 !important;
font-size: 13px !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.x-form-text:focus,
.x-form-textarea:focus,
.x-form-text.x-form-focus,
.x-form-textarea.x-form-focus {
border-color: var(--bo-primary) !important;
box-shadow: 0 0 0 3px rgba(47, 111, 176, 0.12) !important;
outline: none !important;
}
/* Trigger wrap (combo, date, spinner) */
.x-form-trigger-wrap,
.x-form-trigger-wrap-default {
border: 1px solid #D0D5DD !important;
border-radius: 6px !important;
background-color: #FFFFFF !important;
overflow: hidden !important;
}
.x-form-trigger-wrap .x-form-text,
.x-form-trigger-wrap .x-form-field {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.x-form-trigger-wrap .x-form-trigger {
border: none !important;
border-left: 1px solid #EAECF0 !important;
background-color: transparent !important;
}
.x-form-trigger-wrap.x-form-trigger-wrap-focus,
.x-form-trigger-wrap.x-trigger-wrap-focus {
border-color: var(--bo-primary) !important;
box-shadow: 0 0 0 3px rgba(47, 111, 176, 0.12) !important;
}
/* Campo deshabilitado */
.x-item-disabled .x-form-text,
.x-item-disabled .x-form-field,
.x-item-disabled .x-form-trigger-wrap {
background-color: #F9FAFB !important;
color: #98A2B3 !important;
border-color: #E4E7EC !important;
}
/* Dark mode — trigger divider */
body.dark-mode .x-form-trigger-wrap .x-form-trigger {
border-left-color: transparent !important;
}
/* Dark mode — foco */
body.dark-mode .x-form-text:focus,
body.dark-mode .x-form-text.x-form-focus,
body.dark-mode .x-form-textarea:focus,
body.dark-mode .x-form-trigger-wrap.x-form-trigger-wrap-focus,
body.dark-mode .x-form-trigger-wrap.x-trigger-wrap-focus {
border-color: var(--bo-primary) !important;
box-shadow: 0 0 0 3px rgba(77, 143, 214, 0.18) !important;
}
/* ── 13.5 Display fields — solo lectura, mismo espaciado que textfield ── */
.x-form-display-field-body {
padding: 1px 0 !important;
font-size: 13px !important;
color: var(--bo-text) !important;
line-height: 1.4 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.dark-mode .x-form-display-field-body {
color: var(--bo-text) !important;
}
/* ── 13.6 Textfield en modo display (bo-display) — sin borde ni fondo ── */
.bo-display .x-form-text,
.bo-display .x-form-trigger-wrap {
border: none !important;
background: transparent !important;
box-shadow: none !important;
cursor: default !important;
color: var(--bo-text) !important;
padding-top: 1px !important;
padding-bottom: 1px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.bo-display .x-form-text:focus,
.bo-display .x-form-text.x-form-focus,
.bo-display .x-form-trigger-wrap.x-form-trigger-wrap-focus {
border: none !important;
box-shadow: none !important;
}
body.dark-mode .bo-display .x-form-text,
body.dark-mode .bo-display .x-form-trigger-wrap {
background: transparent !important;
border: none !important;
}
/* ── 13.7 Campo de moneda (money-form) — símbolo $, separador de miles y alineación ── */
.money-form .x-form-trigger-wrap {
position: relative;
}
.money-form .x-form-trigger-wrap::before {
content: '$';
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
color: var(--bo-text-muted);
font-size: 12px;
pointer-events: none;
z-index: 1;
}
.money-form .x-form-text {
text-align: right !important;
padding-left: 18px !important;
padding-right: 8px !important;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.money-form .x-form-trigger-wrap:hover {
border-color: var(--bo-primary) !important;
}
body.dark-mode .money-form .x-form-trigger-wrap::before {
color: var(--bo-text-muted);
}
body.dark-mode .money-form .x-form-text {
color: var(--bo-text) !important;
background: var(--bo-surface) !important;
}
body.dark-mode .money-form .x-form-trigger-wrap {
border-color: var(--bo-border-strong) !important;
background: var(--bo-surface) !important;
}
/* ==========================================================================
14. TOASTS Y ALERTAS DEL SISTEMA
jsTerian.toastAlert(msg, type) — tipos: success | error | warning | information | default
jsTerian.msgSystem(type, title, msg, fn)
========================================================================== */
/* ── 14.1 Toast — contenedor ── */
.toastAlert {
border-radius: 10px !important;
border-width: 1px !important;
border-style: solid !important;
overflow: hidden !important;
box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10),
0 1px 4px rgba(16, 24, 40, 0.06) !important;
min-width: 300px !important;
max-width: 480px !important;
}
.toastAlert .x-window-body {
padding: 0 !important;
border-radius: 10px !important;
overflow: hidden !important;
}
/* ── 14.2 Toast — layout interno ── */
.toastAlertBody {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
min-height: 64px;
box-sizing: border-box;
}
.toastAlertIcon {
font-size: 22px !important;
line-height: 1.2 !important;
flex-shrink: 0;
margin-top: 2px;
}
.toastAlertText {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
flex: 1;
}
.toastAlertTitle {
display: block;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.1px;
}
.toastAlertMsg {
display: block;
font-size: 12.5px;
line-height: 1.5;
word-break: break-word;
}
/* ── 14.3 Toast — variantes de color (light mode) ── */
.toastAlert.toast-success {
border-color: #ABEFC6 !important;
border-left-width: 4px !important;
border-left-color: #067647 !important;
}
.toastAlert.toast-success .x-window-body { background-color: #ECFDF3 !important; }
.toastAlert.toast-success .toastAlertIcon,
.toastAlert.toast-success .toastAlertTitle,
.toastAlert.toast-success .toastAlertMsg { color: #067647 !important; }
.toastAlert.toast-error {
border-color: #FECDCA !important;
border-left-width: 4px !important;
border-left-color: #B42318 !important;
}
.toastAlert.toast-error .x-window-body { background-color: #FEF3F2 !important; }
.toastAlert.toast-error .toastAlertIcon,
.toastAlert.toast-error .toastAlertTitle,
.toastAlert.toast-error .toastAlertMsg { color: #B42318 !important; }
.toastAlert.toast-warning {
border-color: #FEDF89 !important;
border-left-width: 4px !important;
border-left-color: #B54708 !important;
}
.toastAlert.toast-warning .x-window-body { background-color: #FFFAEB !important; }
.toastAlert.toast-warning .toastAlertIcon,
.toastAlert.toast-warning .toastAlertTitle,
.toastAlert.toast-warning .toastAlertMsg { color: #B54708 !important; }
.toastAlert.toast-information {
border-color: #B2CCFF !important;
border-left-width: 4px !important;
border-left-color: #175CD3 !important;
}
.toastAlert.toast-information .x-window-body { background-color: #EFF4FF !important; }
.toastAlert.toast-information .toastAlertIcon,
.toastAlert.toast-information .toastAlertTitle,
.toastAlert.toast-information .toastAlertMsg { color: #175CD3 !important; }
.toastAlert.toast-default {
border-color: #D0D5DD !important;
border-left-width: 4px !important;
border-left-color: #475467 !important;
}
.toastAlert.toast-default .x-window-body { background-color: #F9FAFB !important; }
.toastAlert.toast-default .toastAlertIcon,
.toastAlert.toast-default .toastAlertTitle,
.toastAlert.toast-default .toastAlertMsg { color: #475467 !important; }
/* ── 14.4 Toast — dark mode ── */
body.dark-mode .toastAlert {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50),
0 2px 6px rgba(0, 0, 0, 0.30) !important;
}
body.dark-mode .toastAlert.toast-success {
border-color: rgba(95, 206, 144, 0.25) !important;
border-left-color: #5fce90 !important;
}
body.dark-mode .toastAlert.toast-success .x-window-body { background-color: rgba(6, 118, 71, 0.14) !important; }
body.dark-mode .toastAlert.toast-success .toastAlertIcon,
body.dark-mode .toastAlert.toast-success .toastAlertTitle,
body.dark-mode .toastAlert.toast-success .toastAlertMsg { color: #5fce90 !important; }
body.dark-mode .toastAlert.toast-error {
border-color: rgba(229, 132, 127, 0.25) !important;
border-left-color: var(--bo-danger) !important;
}
body.dark-mode .toastAlert.toast-error .x-window-body { background-color: rgba(229, 132, 127, 0.10) !important; }
body.dark-mode .toastAlert.toast-error .toastAlertIcon,
body.dark-mode .toastAlert.toast-error .toastAlertTitle,
body.dark-mode .toastAlert.toast-error .toastAlertMsg { color: var(--bo-danger) !important; }
body.dark-mode .toastAlert.toast-warning {
border-color: rgba(254, 200, 75, 0.25) !important;
border-left-color: #fec84b !important;
}
body.dark-mode .toastAlert.toast-warning .x-window-body { background-color: rgba(181, 71, 8, 0.14) !important; }
body.dark-mode .toastAlert.toast-warning .toastAlertIcon,
body.dark-mode .toastAlert.toast-warning .toastAlertTitle,
body.dark-mode .toastAlert.toast-warning .toastAlertMsg { color: #fec84b !important; }
body.dark-mode .toastAlert.toast-information {
border-color: rgba(77, 143, 214, 0.25) !important;
border-left-color: var(--bo-primary) !important;
}
body.dark-mode .toastAlert.toast-information .x-window-body { background-color: rgba(77, 143, 214, 0.12) !important; }
body.dark-mode .toastAlert.toast-information .toastAlertIcon,
body.dark-mode .toastAlert.toast-information .toastAlertTitle,
body.dark-mode .toastAlert.toast-information .toastAlertMsg { color: var(--bo-primary) !important; }
body.dark-mode .toastAlert.toast-default {
border-color: var(--bo-border-strong) !important;
border-left-color: var(--bo-text-faint) !important;
}
body.dark-mode .toastAlert.toast-default .x-window-body { background-color: var(--bo-header-bg) !important; }
body.dark-mode .toastAlert.toast-default .toastAlertIcon,
body.dark-mode .toastAlert.toast-default .toastAlertTitle,
body.dark-mode .toastAlert.toast-default .toastAlertMsg { color: var(--bo-text-muted) !important; }
/* ── 14.5 Alerta del sistema / pregunta (msgSystem) ── */
.custom-font-msgAlert {
min-width: 380px !important;
max-width: 560px !important;
border-radius: 10px !important;
border: 1px solid var(--bo-border-strong) !important;
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14),
0 2px 6px rgba(16, 24, 40, 0.08) !important;
}
.custom-font-msgAlert .x-window-body,
.custom-font-msgAlert .x-window-body-default {
height: auto !important;
overflow: auto !important;
background: var(--bo-surface) !important;
}
/* Header — zona de título */
.custom-font-msgAlert .x-window-header,
.custom-font-msgAlert .x-window-header-default {
background: var(--bo-header-bg) !important;
border-bottom: 1px solid var(--bo-border) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
border-radius: 10px 10px 0 0 !important;
padding: 12px 20px !important;
}
.custom-font-msgAlert .x-window-header .x-title-text {
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--bo-text) !important;
}
/* Oculta el icono nativo de Ext JS */
.custom-font-msgAlert .x-message-box-icon {
display: none !important;
}
/* El x-component-default solo envuelve nuestro HTML — sin padding propio */
.custom-font-msgAlert .x-message-box-inputEl,
.custom-font-msgAlert .x-component-default {
padding: 0 !important;
color: var(--bo-text) !important;
}
/* Layout interno: texto arriba + caja de alerta opcional debajo */
.msgSystemBody {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 20px;
box-sizing: border-box;
}
.msgSystemText {
font-size: 13.5px;
line-height: 1.55;
color: var(--bo-text);
word-break: break-word;
}
/* Caja de alerta opcional: usa .bo-action-box-* para el color y bordes */
.msgSystemAlert {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
font-size: 13px;
line-height: 1.5;
}
.msgSystemAlertIcon {
font-size: 16px;
line-height: 1.5;
flex-shrink: 0;
margin-top: 1px;
}
.msgSystemAlertText {
flex: 1;
word-break: break-word;
color: var(--bo-text);
}
/* Color del ícono de la caja según variante (hereda del fondo del box) */
.msgSystemAlert.bo-action-box .msgSystemAlertIcon { color: #175CD3; }
.msgSystemAlert.bo-action-box-yellow .msgSystemAlertIcon { color: #B54708; }
.msgSystemAlert.bo-action-box-red .msgSystemAlertIcon,
.msgSystemAlert.bo-action-box-red .msgSystemAlertText { color: var(--bo-danger); }
.msgSystemAlert.bo-action-box-green .msgSystemAlertIcon { color: #067647; }
body.dark-mode .msgSystemAlert.bo-action-box .msgSystemAlertIcon { color: var(--bo-primary); }
body.dark-mode .msgSystemAlert.bo-action-box-yellow .msgSystemAlertIcon { color: #fec84b; }
body.dark-mode .msgSystemAlert.bo-action-box-red .msgSystemAlertIcon,
body.dark-mode .msgSystemAlert.bo-action-box-red .msgSystemAlertText { color: var(--bo-danger); }
body.dark-mode .msgSystemAlert.bo-action-box-green .msgSystemAlertIcon { color: #5fce90; }
/* Compat: iconos del layout anterior (por si algo externo los usa todavía) */
.icon-ms-info { color: var(--bo-primary); }
.icon-ms-question { color: #B54708; }
.icon-ms-warning { color: #B54708; }
.icon-ms-error { color: var(--bo-danger); }
body.dark-mode .icon-ms-info { color: var(--bo-primary); }
body.dark-mode .icon-ms-question { color: #fec84b; }
body.dark-mode .icon-ms-warning { color: #fec84b; }
body.dark-mode .icon-ms-error { color: var(--bo-danger); }
/* Toolbar de botones — zona inferior */
.custom-font-msgAlert .x-toolbar,
.custom-font-msgAlert .x-toolbar-default,
.custom-font-msgAlert .x-toolbar-footer {
background: var(--bo-header-bg) !important;
background-image: none !important;
border-top: 1px solid var(--bo-border) !important;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06) !important;
padding: 10px 16px 12px 16px !important;
border-radius: 0 0 9px 9px !important;
overflow: visible !important;
}
/* Quita gradientes del tema para que actionButton funcione */
.custom-font-msgAlert .x-toolbar .x-btn {
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Ext JS calcula el x-box-inner con alto de x-btn-default-small (22px).
actionButton sube el botón a 28px — forzamos auto para que no recorte. */
.custom-font-msgAlert .x-toolbar-footer .x-box-inner {
height: auto !important;
min-height: 28px !important;
}
/* Dark mode */
body.dark-mode .custom-font-msgAlert {
border-color: var(--bo-border-strong) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55),
0 3px 8px rgba(0, 0, 0, 0.35) !important;
}
body.dark-mode .custom-font-msgAlert .x-window-body,
body.dark-mode .custom-font-msgAlert .x-window-body-default {
background: var(--bo-surface) !important;
}
body.dark-mode .custom-font-msgAlert .x-window-header,
body.dark-mode .custom-font-msgAlert .x-window-header-default {
background: var(--bo-header-bg) !important;
border-bottom-color: var(--bo-border-strong) !important;
}
body.dark-mode .custom-font-msgAlert .x-window-header .x-title-text {
color: var(--bo-text) !important;
}
body.dark-mode .custom-font-msgAlert .x-msg-box-info,
body.dark-mode .custom-font-msgAlert .x-component-default {
color: var(--bo-text) !important;
}
body.dark-mode .custom-font-msgAlert .x-toolbar,
body.dark-mode .custom-font-msgAlert .x-toolbar-footer {
background: var(--bo-header-bg) !important;
border-top-color: var(--bo-border-strong) !important;
}
/* ==========================================================================
15. LOGIN
cls panel: 'bo-login-panel'
cls banner: 'bo-login-banner'
cls environment: 'bo-login-environment'
========================================================================== */
/* ── 15.1 Panel ── */
.bo-login-panel.x-panel {
background: transparent !important;
border: 1px solid var(--bo-border) !important;
border-radius: 8px !important;
box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
overflow: hidden;
}
.bo-login-panel .x-panel-body {
background: var(--bo-header-bg) !important;
border-radius: 8px !important;
}
body.dark-mode .bo-login-panel.x-panel {
border: 1px solid var(--bo-border) !important;
box-shadow: 0 3px 8px rgba(0,0,0,.18) !important;
}
body.dark-mode .bo-login-panel .x-panel-body {
background: var(--bo-header-bg) !important;
box-shadow: 0 3px 8px rgba(0,0,0,.18) !important;
}
/* ── 15.2 Banner superior ── */
.bo-login-banner {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--bo-border);
background:
radial-gradient(
ellipse at right center,
rgba(255,255,255,.14) 0%,
rgba(255,255,255,.08) 22%,
rgba(255,255,255,.03) 45%,
rgba(255,255,255,0) 72%
),
linear-gradient(
180deg,
#59636D 0%,
#4B5560 100%
);
}
body.dark-mode .bo-login-banner {
background: var(--bo-header-bg) !important;
border-bottom: 1px solid var(--bo-border);
}
/* ── 15.3 Ambiente de ejecución ── */
.bo-login-environment {
color: #FFFFFF;
font-size: 30px;
font-weight: 700;
letter-spacing: .40px;
text-shadow: 0 2px 4px rgba(0,0,0,.25);
}
body.dark-mode .bo-login-environment {
color: #FFFFFF;
}
/* ==========================================================================
16. PATRONES DE FORMULARIO BO-FORM
Estilos reusables para ventanas con cls:'bo-form'. Nacieron en el módulo
basicSalesOrderV2 (cotizaciones) y se promovieron aquí para que cualquier
módulo con cls:'bo-form' herede el look sin tocar código.
Las clases .quo-* son opt-in: agrégalas con cls:'quo-X' donde las necesites.
========================================================================== */
/* ── 16.1 Labels modo top (labelAlign: 'top') ──
Ext JS Classic aplica .x-form-item-label-top al wrapper del campo.
Sin esta regla el label usa el mismo tamaño/color que en modo left. */
.bo-form .x-form-item-label-top .x-form-item-label,
.bo-form .x-form-item-label-top .x-form-item-label-default {
font-size: 11.5px !important;
color: var(--bo-text-muted) !important;
padding-bottom: 4px;
}
body.dark-mode .bo-form .x-form-item-label-top .x-form-item-label,
body.dark-mode .bo-form .x-form-item-label-top .x-form-item-label-default {
color: var(--bo-text-muted) !important;
}
/* ── 16.2 Asterisco de campo requerido ── */
.bo-form .x-form-required-indicator {
color: var(--bo-danger) !important;
}
/* ── 16.3 Labels dentro de fieldsets: muted + 12px para consistencia ── */
.bo-form .x-fieldset .x-form-item-label,
.bo-form .x-fieldset .x-form-item-label-default {
color: var(--bo-text-muted) !important;
font-size: 12px !important;
}
/* ── 16.4 Jerarquía de fondos (automático en cualquier .bo-form) ──
Light: header/footer = --bo-header-bg (gris frío), body = --bo-surface (blanco),
fieldsets = blanco → tres tonos distintos naturales.
Dark: header/footer = #1a2232 (elevado), body/tab-bar = #0d1117 (más oscuro),
fieldsets = #161c26 (sutil elevación sobre el cuerpo). */
/* Cuerpo de cualquier panel dentro de bo-form (form, tabpanel, grid outer, etc.)
El grid tiene su propio .x-grid-body con bg --bo-surface, así que las filas
no se afectan — solo el área detrás del toolbar-card y el body de forms. */
.bo-form .x-panel-body {
background: var(--bo-surface) !important;
}
body.dark-mode .bo-form .x-panel-body {
background: #0d1117 !important;
}
/* Header de ventana */
.bo-form.x-window > .x-window-header,
.bo-form.x-window > .x-window-header-default {
background: var(--bo-header-bg) !important;
border-bottom-color: var(--bo-border) !important;
}
body.dark-mode .bo-form.x-window > .x-window-header,
body.dark-mode .bo-form.x-window > .x-window-header-default {
background: #1a2232 !important;
border-bottom-color: var(--bo-border) !important;
}
/* Toolbar inferior */
.bo-form .x-toolbar-footer {
background: var(--bo-header-bg) !important;
border-top-color: var(--bo-border) !important;
}
body.dark-mode .bo-form .x-toolbar,
body.dark-mode .bo-form .x-toolbar-footer {
background: #1a2232 !important;
border-color: var(--bo-border) !important;
}
/* Tab bar integrado con el cuerpo en dark (sin border-bottom para fundirse con
la toolbar-card de abajo). */
body.dark-mode .bo-form .appButtonTabs > .x-tab-bar,
body.dark-mode .bo-form .appButtonTabs .x-tab-bar-default {
background: #0d1117 !important;
border-bottom: 0 !important;
}
/* Fieldsets: sutil elevación sobre el cuerpo en dark */
body.dark-mode .bo-form .x-fieldset,
body.dark-mode .bo-form .x-fieldset-default {
background: #161c26 !important;
}
body.dark-mode .bo-form .x-fieldset-body {
background: transparent !important;
}
/* Gridpanels dentro de bo-form: fondo coherente con el cuerpo + sin border
externo (le gana a .bo-grid.x-grid-panel de §6 que pone un border visible). */
.bo-form .bo-grid {
background: var(--bo-surface) !important;
border: 0 !important;
}
body.dark-mode .bo-form .bo-grid {
background: #0d1117 !important;
}
/* ── 16.5 Clases reusables (opt-in con cls:'quo-X') ── */
/* Notas internas: borde punteado para distinguirlas visualmente */
.quo-internal .x-form-text,
.quo-internal .x-form-textarea {
border-style: dashed !important;
}
/* Resumen: displayfield muted alineado a la derecha */
.quo-resumen .x-form-display-field {
color: var(--bo-text-muted);
text-align: right;
}
body.dark-mode .quo-resumen .x-form-display-field {
color: var(--bo-text-muted);
}
/* Fila "Total" con separador superior y peso visual */
.quo-total .x-form-display-field {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--bo-text) !important;
text-align: right;
border-top: 1px solid var(--bo-border);
padding-top: 8px;
margin-top: 4px;
}
body.dark-mode .quo-total .x-form-display-field {
color: var(--bo-text) !important;
border-top-color: var(--bo-border) !important;
}
/* Auditoría: displayfield muy chico muted (para "creado por X, actualizado Y") */
.quo-audit-text.x-form-item {
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
.quo-audit-text .x-form-display-field {
font-size: 10.5px;
color: var(--bo-text-muted);
line-height: 1;
padding: 0 !important;
margin: 0 !important;
}
body.dark-mode .quo-audit-text .x-form-display-field {
color: var(--bo-text-muted);
}
/* Contador pill en títulos de tab.
Uso: tab.setTitle('Partidas ' + n + '') */
.quo-count {
display: inline-block;
font-size: 11px;
font-weight: 600;
line-height: 16px;
padding: 1px 7px;
border-radius: 999px;
background: var(--bo-bg);
color: var(--bo-text-muted);
margin-left: 5px;
vertical-align: middle;
}
body.dark-mode .quo-count {
background: var(--bo-border-strong);
color: var(--bo-text-muted);
}
/* Toolbar de totales al pie del grid: fondo del grid con línea superior
(le gana a la regla global de toolbar-footer en dark por especificidad). */
.bo-form .quo-items-summary,
.bo-form .quo-items-summary.x-toolbar-footer {
background: var(--bo-surface) !important;
border-top: 1px solid var(--bo-border) !important;
border-bottom: 0 !important;
}
body.dark-mode .bo-form .quo-items-summary,
body.dark-mode .bo-form .quo-items-summary.x-toolbar-footer {
background: var(--bo-surface) !important;
}
.bo-form .quo-items-summary .x-toolbar-text {
color: var(--bo-text) !important;
}
/* Iconos de acción inline en columnas de grid (ver, descargar, deshabilitado) */
.quo-col-action {
cursor: pointer;
font-size: 14px;
margin: 0 6px;
transition: opacity 0.15s;
}
.quo-col-action:hover {
opacity: 0.7;
}
.quo-col-action-view {
color: #1570ef;
}
.quo-col-action-download {
color: #17b26a;
}
.quo-col-action-off {
color: var(--bo-text-muted) !important;
opacity: 0.25;
cursor: default;
pointer-events: none;
}
body.dark-mode .quo-col-action-view {
color: #4d9fff;
}
body.dark-mode .quo-col-action-download {
color: #4ade80;
}
/* Celda de total en grid: bold */
.quo-col-total .x-grid-cell-inner {
font-weight: 700;
}
/* Celda warning (ej. ganancia bajo costo): fondo rojo + texto rojo.
Usar vía meta.tdCls en el renderer de la columna. */
.quo-below-cost {
background: #fdecec !important;
}
.quo-below-cost .x-grid-cell-inner {
color: var(--bo-danger) !important;
font-weight: 600;
}
body.dark-mode .quo-below-cost {
background: rgba(239, 68, 68, 0.15) !important;
}
body.dark-mode .quo-below-cost .x-grid-cell-inner {
color: #fca5a5 !important;
}
/* Displayfield verde + bold para campos "positivos" (ganancia, ahorros, etc.) */
.quo-profit .x-form-display-field {
color: #17b26a !important;
font-weight: 600;
}
body.dark-mode .quo-profit .x-form-display-field {
color: #4ade80 !important;
}
/* Trigger "abrir en nueva pestaña" para campos URL
(se agrega vía triggers: { open: { cls:'quo-url-trigger', handler:... } }). */
.quo-url-trigger {
background-image: none !important;
cursor: pointer;
text-align: center;
}
.quo-url-trigger::before {
content: '\f08e'; /* fa-external-link */
font-family: 'FontAwesome';
font-size: 13px;
color: #1570ef;
line-height: 22px;
}
.quo-url-trigger:hover::before {
opacity: 0.75;
}
body.dark-mode .quo-url-trigger::before {
color: #4d9fff;
}
/* ── 16.x Paneles de detalle con dos columnas (uso genérico) ────────────────
bo-amount-hero — Importe destacado en la columna derecha de un panel.
bo-amount-currency — Span del código de moneda junto al importe (ej. "MXN").
bo-action-danger-box — Caja bordeada roja para acciones destructivas (cancelar,
eliminar permanente, etc.); va al pie de la columna izquierda.
bo-action-box — Caja neutra azul para acciones informativas / crear.
bo-action-box-green — Variante verde: éxito, confirmación.
bo-action-box-yellow — Variante amarilla: advertencia, pendiente.
bo-action-box-red — Variante roja (alias semántico de bo-action-danger-box).
bo-action-box-gray — Variante gris: acción neutra.
bo-amount-divider — Separador superior fino sobre un displayfield; combina
con bo-amount-hero para marcar el total final.
bo-note — Texto secundario/descriptivo con contraste adecuado en
ambos temas (sustituye al inline).
bo-window-subtitle — Subtítulo del header de una ventana modal, debajo del título.
bo-display-mono — Variante de bo-display para UUIDs, folios y códigos:
fuente monoespaciada a tamaño legible.
*/
.bo-amount-hero .x-form-display-field {
font-size: 1.55em;
font-weight: 600;
line-height: 1.3;
}
.bo-amount-currency {
font-size: 0.6em;
font-weight: 400;
opacity: 0.55;
margin-left: 6px;
vertical-align: middle;
}
.bo-action-danger-box {
border: 1px solid rgba(180, 35, 24, 0.28);
border-radius: 6px;
background: rgba(180, 35, 24, 0.04);
color: var(--bo-text);
}
body.dark-mode .bo-action-danger-box {
border-color: rgba(220, 80, 60, 0.22);
background: rgba(180, 35, 24, 0.09);
}
/* Caja neutra (azul) para acciones informativas o de creación. */
.bo-action-box {
border: 1px solid rgba(23, 92, 211, 0.28);
border-radius: 6px;
background: rgba(23, 92, 211, 0.05);
color: var(--bo-text);
}
body.dark-mode .bo-action-box {
border-color: rgba(77, 143, 214, 0.30);
background: rgba(23, 92, 211, 0.12);
}
/* Variante verde: éxito, confirmación (match actionButtonGreen). */
.bo-action-box-green {
border: 1px solid rgba(6, 118, 71, 0.28);
border-radius: 6px;
background: rgba(6, 118, 71, 0.05);
color: var(--bo-text);
}
body.dark-mode .bo-action-box-green {
border-color: rgba(95, 206, 144, 0.30);
background: rgba(6, 118, 71, 0.12);
}
/* Variante amarilla: advertencia, pendiente (match actionButtonYellow). */
.bo-action-box-yellow {
border: 1px solid rgba(181, 71, 8, 0.28);
border-radius: 6px;
background: rgba(181, 71, 8, 0.05);
color: var(--bo-text);
}
body.dark-mode .bo-action-box-yellow {
border-color: rgba(254, 200, 75, 0.30);
background: rgba(181, 71, 8, 0.12);
}
/* Alias de bo-action-danger-box para quien prefiera naming de color. */
.bo-action-box-red {
border: 1px solid rgba(180, 35, 24, 0.28);
border-radius: 6px;
background: rgba(180, 35, 24, 0.04);
color: var(--bo-text);
}
body.dark-mode .bo-action-box-red {
border-color: rgba(220, 80, 60, 0.22);
background: rgba(180, 35, 24, 0.09);
}
/* Variante gris: acción neutra (match actionButtonGray). */
.bo-action-box-gray {
border: 1px solid rgba(71, 84, 103, 0.22);
border-radius: 6px;
background: rgba(71, 84, 103, 0.04);
color: var(--bo-text);
}
body.dark-mode .bo-action-box-gray {
border-color: var(--bo-border-strong);
background: rgba(255, 255, 255, 0.03);
}
/* Separador superior fino sobre un displayfield; combina con bo-amount-hero
para marcar el total final de un panel (misma línea que usa .quo-total). */
.bo-amount-divider .x-form-display-field {
border-top: 1px solid var(--bo-border);
padding-top: 10px;
margin-top: 6px;
}
body.dark-mode .bo-amount-divider .x-form-display-field {
border-top-color: var(--bo-border);
}
/* Texto descriptivo secundario; legible en claro y oscuro. */
.bo-note {
opacity: 0.78;
font-size: 0.9em;
}
body.dark-mode .bo-note {
opacity: 0.85;
}
/* Subtítulo del header de una ventana modal: línea secundaria debajo del título. */
.bo-window-subtitle {
display: block;
font-size: 11px;
font-weight: normal;
opacity: 0.65;
letter-spacing: 0.02em;
margin-top: 2px;
}
.bo-display-mono .x-form-text {
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
letter-spacing: 0.03em;
}
/* ==========================================================================
17. LOADING MASK — adaptación a tema claro/oscuro
Ext.LoadMask usa .x-mask (overlay) y .x-mask-msg (caja con mensaje y spinner).
Sin estos overrides, en oscuro queda una caja blanca brillante.
========================================================================== */
body.dark-mode .x-mask {
background-color: rgba(0, 0, 0, 0.45) !important;
}
body.dark-mode .x-mask-msg {
background-color: var(--bo-surface) !important;
border-color: var(--bo-border-strong) !important;
color: var(--bo-text) !important;
}
body.dark-mode .x-mask-msg div,
body.dark-mode .x-mask-msg-text {
color: var(--bo-text) !important;
}
/* El spinner por defecto es un gif claro; invertirlo lo deja visible sobre fondo oscuro */
body.dark-mode .x-mask-loading div {
filter: invert(1) brightness(1.2);
}
/* ==========================================================================
18. BARRAS DE DESPLAZAMIENTO — adaptación por tema
Usa CSS vars para que oscuro/claro cambien automáticamente.
========================================================================== */
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--bo-border-strong) transparent;
}
/* Chrome / Edge / Safari */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--bo-border-strong);
border-radius: 5px;
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--bo-text-faint);
}
::-webkit-scrollbar-corner {
background: transparent;
}
/* ==========================================================================
19. PULSE ATTENTION — animación sutil para destacar la siguiente acción
Útil tras un cambio de estatus para guiar al usuario al próximo paso
(p. ej. "Convertir a orden" después de Aprobar) sin encadenar APIs.
========================================================================== */
@keyframes bo-pulse-attention {
0%, 100% { box-shadow: 0 0 0 0 rgba(23, 92, 211, 0); }
50% { box-shadow: 0 0 0 6px rgba(23, 92, 211, 0.28); }
}
.bo-pulse-attention {
animation: bo-pulse-attention 1.1s ease-in-out 3;
}
body.dark-mode .bo-pulse-attention {
animation-name: bo-pulse-attention-dark;
}
@keyframes bo-pulse-attention-dark {
0%, 100% { box-shadow: 0 0 0 0 rgba(77, 143, 214, 0); }
50% { box-shadow: 0 0 0 6px rgba(77, 143, 214, 0.40); }
}