/*----------------------------------------------------------------------------------------------------------------------------------\
| 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:          #4d8fd6;
    --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: 3px 20px 14px 20px !important;
    padding: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !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 .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;
}

/* 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;
}

/* Bordes de fila — Crisp usa x-grid-with-row-lines en el <tr> */
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;
}


/* ==========================================================================
   7. BADGES / PILDORAS DE ESTADO
   Uso en renderer:
     return '<span class="bo-badge bo-badge-green">' + value + '</span>';

   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%;
}


/* ==========================================================================
   8. LINK — .bo-link
   Uso en renderer:  return '<a class="bo-link" href="' + v + '" target="_blank">' + v + '</a>';
   ========================================================================== */

.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 {
    background: var(--bo-bg) !important;
    background-image: none !important;
    color: var(--bo-text) !important;
    border-color: #545c6b !important;
    border-radius: 5px !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.4 Fieldset ── */

body.dark-mode .x-fieldset {
    border: 1px solid #484f5e !important;
    border-radius: 6px !important;
    background: var(--bo-surface) !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;
    padding: 4px 8px !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;
}

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;
}

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;
}

/* 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;
}


/* ── 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,
#lblCompanyName,
#lblAditionalInfo {
    background: #ffffff !important;
    border: 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 #lblCompanyName,
body.dark-mode #lblAditionalInfo {
    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;
}

.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: 3px 14px; }

#treePanelMenu .x-grid-cell-inner-treecolumn {
    display: flex;
    align-items: center;
    min-height: 44px;
    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;
}

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-surface) !important;
    border-right-color: var(--bo-border) !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 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: #f8fafc !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid #e2e7ee !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;
    padding: 0 14px !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #D0D5DD !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, border-color 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: #475467 !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: #F2F4F7 !important;
    border-color: #98A2B3 !important;
}

.appButtonTabs .x-tab.x-tab-active .x-tab-button,
.appButtonTabs .x-tab.x-tab-active .x-tab-button-default {
    background: #EFF4FF !important;
    border-color: #B2CCFF !important;
}

.appButtonTabs .x-tab.x-tab-active .x-tab-inner,
.appButtonTabs .x-tab.x-tab-active .x-tab-inner-default {
    color: #175CD3 !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;
}

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 {
    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;
}


/* ==========================================================================
   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: icono FA + texto */
.msgSystemBody {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    min-height: 60px;
    box-sizing: border-box;
}

.msgSystemIcon {
    font-size: 26px;
    flex-shrink: 0;
}

.msgSystemText {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--bo-text);
    word-break: break-word;
    flex: 1;
}

/* Colores por tipo — light mode */
.icon-ms-info     { color: var(--bo-primary); }
.icon-ms-question { color: #B54708; }
.icon-ms-warning  { color: #B54708; }
.icon-ms-error    { color: var(--bo-danger); }

/* Colores por tipo — dark mode */
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;
}