/* ---- core/variables.css ---- */
/* Colores del tema. Todo el tema (contenido, marco y widgets) toma sus
colores de aquí. Cambiar el azul de marca es cambiar --color-primary;
activar el modo oscuro es poner la clase ui-dark en , que redefine
el bloque de abajo. Ningún archivo del tema debe llevar un color fijo */
:root {
/* Marca */
--color-primary: #386dbd;
--color-primary-soft: #eaf1fb;
--color-primary-contrast: #ffffff;
--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #000000);
--color-primary-active: color-mix(in srgb, var(--color-primary) 72%, #000000);
/* Estados */
--color-danger: #d9534f;
--color-warning: #e8a33d;
--color-success: #3f9d5a;
/* Tipos de paso del diagrama de flujo de la centralita */
--color-flow-playback: #1a9aa0;
--color-flow-lang: #2f86c9;
--color-flow-queue: #7b57c6;
--color-flow-transfer: #d9731f;
--color-flow-voicemail: #c2457a;
/* Superficies: lienzo de página, tarjetas y controles sobre ellas */
--color-page-bg: #f7f8fa;
--color-surface: #ffffff;
--color-surface-2: #f1f3f6;
--color-surface-3: #e9ecf1;
--color-border: #e3e6ea;
/* Marco de los grupos de campos: en oscuro más suave que el resto */
--color-fieldset-border: var(--color-border);
/* Texto */
--color-text: #2b2f36;
--color-text-muted: #7a7a7a;
--color-text-placeholder: #a3a9b3;
/* Campos: sin borde, gris sobre fondo blanco (tarjetas, ventanas, barra
superior) y blancos sobre el lienzo (barra de filtros) */
--color-field-bg: var(--color-surface-2);
--color-field-bg-hover: var(--color-surface-3);
--color-field-border: var(--color-surface-2);
--color-field-canvas-bg: var(--color-surface);
--color-field-canvas-bg-hover: var(--color-surface);
--color-field-disabled-bg: #f7f8fa;
--color-field-disabled-border: #eceef2;
--color-check-border: #b9c0ca;
/* Filas de grid: alternancia gris neutro, hover en azul */
--color-row-alt: #f3f5f7;
--color-row-hover: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
/* Fila desplegada con su contenido (rowexpander, rowwidget) */
--color-row-group: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
/* Scroll */
--color-scrollbar: #d5d9e0;
--color-scrollbar-hover: #b9c0ca;
/* Sombras: tarjetas (barra, menú, pie, grids, formularios), desplegables
y ventanas */
--shadow-card: 0 2px 8px rgba(0, 0, 0, .07);
--shadow-card-up: 0 -2px 8px rgba(0, 0, 0, .07);
--shadow-popover: 0 6px 24px rgba(20, 30, 50, .16), 0 0 0 1px rgba(20, 30, 50, .06);
--shadow-window: 0 16px 48px rgba(0, 0, 0, .22);
/* Desplegables (dropdown.css): combos, menús de Ext y menús de la barra */
--dropdown-radius: 10px;
--dropdown-padding: 6px;
--dropdown-item-radius: 6px;
--dropdown-item-padding: 7px 12px;
--dropdown-item-font-size: 13px;
--dropdown-item-hover-bg: var(--color-surface-2);
--dropdown-item-active-bg: var(--color-primary-soft);
--dropdown-item-active-text: var(--color-primary);
/* Tooltips: oscuros sobre la página clara */
--tooltip-bg: #2b2f36;
--tooltip-border: #2b2f36;
--tooltip-text: #ffffff;
/* Velo detrás de lo que flota sobre la página (menú lateral en móvil) */
--color-backdrop: rgba(20, 30, 50, .35);
/* Máscara de carga de Ext sobre grids y paneles */
--color-mask: rgba(247, 248, 250, .7);
/* Puntos del indicador de carga del esqueleto: el gris del esqueleto,
algo más marcado para que se vea sobre el lienzo */
--color-loader: #c9ced6;
/* Botones dentro de una cabecera azul (grids, paneles, ventanas) */
--header-btn-bg: var(--color-primary-contrast);
--header-btn-bg-hover: var(--color-primary-soft);
--header-btn-bg-pressed: color-mix(in srgb, var(--color-primary-soft) 85%, var(--color-primary));
--header-btn-text: var(--color-primary);
/* Borde de los campos al pasar el ratón. Con el foco sólo cambia el
borde, sin halo alrededor */
--color-field-border-hover: color-mix(in srgb, var(--color-primary) 45%, var(--color-surface));
--ring-focus: none;
}
/* Color de énfasis a elegir por el usuario (uiZsAccents() en ui-zs.php):
cambia el color de marca y el tono suave se
calcula a partir de él. Sin el atributo queda el azul de arriba. El
selector no se limita a para que las muestras del menú de usuario
tomen su color con el mismo atributo */
[data-ui-accent="azul"] { --color-primary: #386dbd; }
[data-ui-accent="turquesa"] { --color-primary: #0f8286; }
[data-ui-accent="verde"] { --color-primary: #2e8551; }
[data-ui-accent="morado"] { --color-primary: #6a4bb5; }
[data-ui-accent="frambuesa"] { --color-primary: #b8285e; }
[data-ui-accent="naranja"] { --color-primary: #c85e1c; }
[data-ui-accent="grafito"] { --color-primary: #4b5563; }
html[data-ui-accent] {
--color-primary-soft: color-mix(in srgb, var(--color-primary) 11%, #ffffff);
}
/* Modo oscuro: mismas variables, otros valores. Se activa con */
html.ui-dark {
/* El azul de marca no cambia: cabeceras y botones siguen igual. Sólo
el azul suave de fondos y el hover se adaptan al fondo oscuro */
--color-primary-soft: #223350;
--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #ffffff);
--color-primary-active: color-mix(in srgb, var(--color-primary) 72%, #ffffff);
--color-page-bg: #14171c;
--color-surface: #1e2229;
--color-surface-2: #282d36;
--color-surface-3: #323844;
--color-border: #2f3540;
--color-fieldset-border: #272c35;
--color-text: #e6e8ec;
--color-text-muted: #9aa1ad;
--color-text-placeholder: #6c737f;
--color-field-disabled-bg: #23272f;
--color-field-disabled-border: #23272f;
--color-check-border: #4a5261;
--color-row-alt: #22262e;
--color-row-group: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
--color-scrollbar: #3a414d;
--color-scrollbar-hover: #4c5462;
--shadow-card: 0 2px 8px rgba(0, 0, 0, .35);
--shadow-card-up: 0 -2px 8px rgba(0, 0, 0, .35);
--shadow-popover: 0 6px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
--shadow-window: 0 12px 40px rgba(0, 0, 0, .6);
--tooltip-bg: #3a414d;
--tooltip-border: #3a414d;
--tooltip-text: #e6e8ec;
--color-backdrop: rgba(0, 0, 0, .55);
--color-mask: rgba(20, 23, 28, .6);
--color-loader: #3a414d;
/* Sobre la cabecera azul, translúcidos con texto blanco: un bloque
blanco resalta demasiado en oscuro */
--header-btn-bg: color-mix(in srgb, var(--color-primary-contrast) 16%, transparent);
--header-btn-bg-hover: color-mix(in srgb, var(--color-primary-contrast) 26%, transparent);
--header-btn-bg-pressed: color-mix(in srgb, var(--color-primary-contrast) 32%, transparent);
--header-btn-text: var(--color-primary-contrast);
}
html.ui-dark[data-ui-accent] {
--color-primary-soft: color-mix(in srgb, var(--color-primary) 30%, #14171c);
}
/* ---- core/fonts/roboto.css ---- */
/* Roboto, descargada de Google Fonts (v51). Es una fuente variable: un solo
archivo cubre todos los pesos. Sólo los subconjuntos latín y latín extendido */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(core/fonts/roboto-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(core/fonts/roboto-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---- core/page.css ---- */
/* Página: el lienzo lleva el color del tema desde el primer pintado, antes
de que Ext monte nada, para que al cambiar de página no se vea blanco */
html,
body,
body.x-body {
background-color: var(--color-page-bg);
}
/* Controles nativos (barras de scroll, autocompletado) en oscuro */
html.ui-dark {
color-scheme: dark;
}
/* ---- core/typography.css ---- */
/* Tipografía del tema: Roboto en todo el contenido de la pestaña y en las
ventanas, en peso normal. Crisp usa peso 300 y con Roboto queda demasiado
fina. Los iconos de fuente no se tocan, van por clase propia.
Se usa :is() y no :where() para sumar una clase de especificidad: el CSS de
crisp se inyecta después del tema y sus reglas de fuente son de una clase */
:is(.x-tabpanel-child, .x-window) .x-panel-body,
:is(.x-tabpanel-child, .x-window) .x-title-text,
:is(.x-tabpanel-child, .x-window) .x-form-item-label,
:is(.x-tabpanel-child, .x-window) .x-form-field,
:is(.x-tabpanel-child, .x-window) .x-form-text,
:is(.x-tabpanel-child, .x-window) .x-form-cb-label,
:is(.x-tabpanel-child, .x-window) .x-form-display-field,
:is(.x-tabpanel-child, .x-window) .x-fieldset-header-text,
:is(.x-tabpanel-child, .x-window) .x-grid-cell-inner,
:is(.x-tabpanel-child, .x-window) .x-column-header-text-inner,
:is(.x-tabpanel-child, .x-window) .x-boundlist-item,
:is(.x-tabpanel-child, .x-window) .x-btn-inner {
font-family: 'Roboto', helvetica, arial, sans-serif;
font-weight: 400;
}
/* Lo que va en negrita en el tema sigue en negrita */
:is(.x-tabpanel-child, .x-window) .x-title-text,
:is(.x-tabpanel-child, .x-window) .x-fieldset-header-text {
font-weight: 600;
}
:is(.x-tabpanel-child, .x-window) .x-btn-inner {
font-weight: 500;
}
/* Color de texto del contenido: crisp lo fija en negro y en modo oscuro
tiene que seguir a la variable */
:is(.x-tabpanel-child, .x-window) .x-panel-body,
:is(.x-tabpanel-child, .x-window) .x-form-display-field,
:is(.x-tabpanel-child, .x-window) .x-form-cb-label,
.x-window .x-window-body {
color: var(--color-text);
}
/* El texto de la celda hereda de la fila: las filas coloreadas de
style.css (alert-red-row, alert-cyan-row...) ponen su propio color */
:is(.x-tabpanel-child, .x-window) .x-grid-cell-inner {
color: inherit;
}
/* ---- core/scrollbar.css ---- */
/* Scrolls de toda la página: finos, sin flechas y con la pista transparente.
Chrome y derivados por ::-webkit-scrollbar; Firefox por scrollbar-width */
*::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
background: transparent;
}
*::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 8px;
background-color: var(--color-scrollbar);
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--color-scrollbar-hover);
}
/* Sin flechas en los extremos: Chrome las trata como botones con varias
variantes y hay que anularlas todas */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment,
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
/* Sólo donde no existe ::-webkit-scrollbar (Firefox): Chrome ignora las
reglas de arriba en cuanto ve scrollbar-width o scrollbar-color, y pinta
su barra estándar con flechas */
@supports not selector(::-webkit-scrollbar) {
* {
scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar) transparent;
}
}
/* ---- core/card.css ---- */
/* Paneles como tarjeta con sombra: los grids, los paneles con título y los
que contienen campos de formulario. Un panel usado sólo para colocar
botones o maquetar no lleva tarjeta. El contenedor de la propia pestaña
tampoco, sólo sus descendientes */
/* Sólo paneles anidados dentro de otro panel de la pestaña: el primer nivel
es el contenedor de página (CustomContent1), que no es tarjeta. Un panel
con título sí lo es aunque esté en el primer nivel (pantallas que no usan
CustomContent1) */
:where(.x-tabpanel-child) .x-panel.x-panel-default.x-panel-default:is(.x-grid, :has(> .x-panel-header), :has(.x-form-item), :has(.x-chart), :has(.x-surface)):is(.x-tabpanel-child .x-panel .x-panel, :has(> .x-panel-header)) {
border: 0;
border-radius: 10px;
/* Fondo en el propio panel: el pie de botones es transparente y si el
panel no lo tiene se ve el lienzo a través */
background-color: var(--color-surface);
box-shadow: var(--shadow-card);
overflow: hidden;
}
/* Tarjeta dentro de tarjeta: un panel sin título que agrupa campos dentro de
otra tarjeta (un formulario que envuelve a otro panel, por ejemplo) no se
pinta como otra caja, se integra en la de fuera. Los grids y los paneles
con título siguen siendo tarjeta */
:where(.x-tabpanel-child) .x-panel.x-panel-default:is(.x-grid, :has(> .x-panel-header), :has(.x-form-item), :has(.x-chart), :has(.x-surface)):is(.x-tabpanel-child .x-panel .x-panel, :has(> .x-panel-header)) .x-panel.x-panel-default.x-panel-default:not(.x-grid):not(:has(> .x-panel-header)) {
border-radius: 0;
background-color: transparent;
box-shadow: none;
overflow: visible;
}
/* Paneles con frame: true: crisp les pone su propio marco gris y fondo
blanco fijo. Van como el resto de tarjetas */
:where(.x-tabpanel-child, .x-window) .x-panel.x-panel-default-framed {
border: 0;
border-radius: 10px;
background-color: var(--color-surface);
overflow: hidden;
}
:where(.x-tabpanel-child) .x-panel.x-panel-default-framed {
box-shadow: var(--shadow-card);
}
:where(.x-tabpanel-child, .x-window) .x-panel-body.x-panel-body-default-framed {
border: 0;
background-color: var(--color-surface);
}
/* Ningún panel del contenido lleva el borde de crisp, sea tarjeta o no, y
los cuerpos toman el color de superficie (crisp los pinta en blanco fijo) */
:where(.x-tabpanel-child) .x-panel.x-panel-default,
:where(.x-tabpanel-child) .x-panel-body.x-panel-body-default,
:where(.x-tabpanel-child) .x-panel-body.x-grid-body {
border: 0;
}
:where(.x-tabpanel-child, .x-window) .x-panel-body.x-panel-body-default,
:where(.x-tabpanel-child, .x-window) .x-panel-body.x-grid-body,
:where(.x-tabpanel-child, .x-window) .x-grid-view,
.x-window .x-window-body.x-window-body-default,
.x-window .x-panel-bodyWrap,
.x-window.x-message-box .x-window-body {
background-color: var(--color-surface);
}
/* Crisp pinta el borde exterior del panel con !important en clases aparte */
:where(.x-tabpanel-child) [class*="x-panel-default-outer-border"] {
border-width: 0 !important;
}
/* Ext pinta las sombras de ventanas y desplegables con un elemento aparte
(x-shadow, o x-css-shadow con un gris claro que en oscuro parece luz):
sobre fondos con color o foto se ve como un halo. La sombra la lleva ya el
propio elemento */
.x-shadow,
.x-css-shadow {
display: none !important;
}
/* Ventanas: esquinas redondeadas y sin el reborde claro de crisp, que va en
la propia ventana, en su cabecera y en el cuerpo, parte con !important */
.x-window.x-window-default,
.x-window .x-window-header.x-window-header-default,
.x-window .x-window-body.x-window-body-default,
.x-window [class*="x-window-default-outer-border"],
.x-window [class*="x-window-header-default-outer-border"] {
border-width: 0 !important;
}
.x-window.x-window-default {
padding: 0;
border-radius: 10px;
background-color: var(--color-surface);
box-shadow: var(--shadow-window);
overflow: hidden;
}
.x-window .x-window-header.x-window-header-default {
border-radius: 0;
}
/* Pie de botones sin el gris del tema */
:where(.x-tabpanel-child, .x-window) .x-toolbar.x-toolbar-footer {
padding: 12px 22px 14px 22px;
background-color: transparent;
}
/* El contenedor interno de los layouts de caja de Ext lleva overflow hidden
y mide justo lo que suman sus hijos: la sombra de la última tarjeta
quedaba cortada. Se abre sólo donde hay tarjetas dentro */
:where(.x-tabpanel-child) .x-box-inner:has(> .x-box-target > .x-panel.x-panel-default),
:where(.x-tabpanel-child) .x-autocontainer-innerCt:has(> .x-panel.x-panel-default) {
overflow: visible;
}
/* Aire al final del contenido, para que lo último no toque el pie */
.x-tabpanel-child.x-panel.x-panel-default > .x-panel-bodyWrap > .x-panel-body,
.x-tabpanel-child.x-panel.x-panel-default > .x-panel-body {
padding-bottom: 16px;
}
/* Contenedores de página: la pestaña (customTab) y el primer panel que hay
dentro (CustomContent1 de defines.js), es decir, cualquier panel de la
pestaña que no esté anidado en otro panel. Transparentes y sin borde: el
fondo lo pone la pestaña. El margen con el que CustomContent1 se separa de
los bordes viene de su configuración */
.x-tabpanel-child.x-panel.x-panel-default,
.x-tabpanel-child.x-panel.x-panel-default > .x-panel-bodyWrap > .x-panel-body,
.x-tabpanel-child.x-panel.x-panel-default > .x-panel-body {
border: 0 !important;
background-color: var(--color-page-bg);
}
:where(.x-tabpanel-child) .x-panel.x-panel-default.x-panel-default:not(.x-tabpanel-child .x-panel .x-panel):not(:has(> .x-panel-header)),
:where(.x-tabpanel-child) .x-panel.x-panel-default:not(.x-tabpanel-child .x-panel .x-panel):not(:has(> .x-panel-header)) > .x-panel-bodyWrap > .x-panel-body.x-panel-body-default,
:where(.x-tabpanel-child) .x-panel.x-panel-default:not(.x-tabpanel-child .x-panel .x-panel):not(:has(> .x-panel-header)) > .x-panel-body.x-panel-body-default {
border: 0 !important;
border-radius: 0;
box-shadow: none;
background-color: transparent;
}
/* Paneles anidados que no son tarjeta (por ejemplo el que agrupa los
botones): transparentes sobre el lienzo, sin caja */
:where(.x-tabpanel-child) .x-panel.x-panel-default:not(.x-grid):not(:has(> .x-panel-header)):not(:has(.x-form-item)):not(:has(.x-chart)):not(:has(.x-surface)),
:where(.x-tabpanel-child) .x-panel.x-panel-default:not(.x-grid):not(:has(> .x-panel-header)):not(:has(.x-form-item)):not(:has(.x-chart)):not(:has(.x-surface)) > .x-panel-bodyWrap > .x-panel-body.x-panel-body-default,
:where(.x-tabpanel-child) .x-panel.x-panel-default:not(.x-grid):not(:has(> .x-panel-header)):not(:has(.x-form-item)):not(:has(.x-chart)):not(:has(.x-surface)) > .x-panel-body.x-panel-body-default {
background-color: transparent;
}
.x-tabpanel-child [class*="x-panel-default-outer-border"] {
border-width: 0 !important;
}
/* El cuerpo del panel de pestañas, que se ve alrededor del margen. El panel
de pestañas es un panel normal con una barra de pestañas docked */
.x-panel:has(> .x-tab-bar) > .x-panel-body.x-panel-body-default,
.x-panel:has(> .x-panel-bodyWrap > .x-tab-bar) > .x-panel-bodyWrap > .x-panel-body.x-panel-body-default {
border: 0 !important;
background-color: var(--color-page-bg);
}
/* Dentro de una ventana las pestañas van sobre la superficie de la ventana,
no sobre el lienzo de página: si el contenido no llena la pestaña, el hueco
se veía como una franja oscura */
.x-window .x-tabpanel-child.x-panel.x-panel-default,
.x-window .x-tabpanel-child.x-panel.x-panel-default > .x-panel-bodyWrap > .x-panel-body,
.x-window .x-tabpanel-child.x-panel.x-panel-default > .x-panel-body,
.x-window .x-panel:has(> .x-tab-bar) > .x-panel-body.x-panel-body-default,
.x-window .x-panel:has(> .x-panel-bodyWrap > .x-tab-bar) > .x-panel-bodyWrap > .x-panel-body.x-panel-body-default {
background-color: var(--color-surface);
}
/* Velo de la máscara de carga: crisp lo pinta blanco fijo, que en oscuro
se ve como un fogonazo gris claro */
.x-mask.x-mask,
.x-mask.x-component-default {
background-color: var(--color-mask);
}
/* Máscara de carga (el.mask('...')): mensaje como pastilla del tema, con
una rueda de Material Symbols en vez del gif de crisp */
.x-mask-msg,
.x-mask-msg.x-mask-msg {
padding: 0;
border: 0;
border-radius: 20px;
background-color: var(--color-surface);
box-shadow: var(--shadow-popover);
}
.x-mask-msg .x-mask-msg-inner {
padding: 8px 18px;
border: 0;
background: none;
color: var(--color-text);
font-family: 'Roboto', helvetica, arial, sans-serif;
font-size: 13px;
}
.x-mask-msg .x-mask-msg-text {
padding: 0 0 0 22px;
background: none;
color: var(--color-text);
position: relative;
}
.x-mask-msg .x-mask-msg-text:before {
content: "progress_activity";
position: absolute;
left: -1px;
top: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
color: var(--color-primary);
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 18px;
font-feature-settings: 'liga';
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
animation: ui-spin 1s linear infinite;
}
/* ---- core/header.css ---- */
/* Cabeceras de panel, grid y ventana: azul con título blanco. Los paneles
con frame: true (x-panel-header-default-framed) igual que el resto.
Los selectores repiten clase para superar a los del tema crisp */
:where(.x-tabpanel-child, .x-window) .x-panel-header.x-panel-header-default,
:where(.x-tabpanel-child, .x-window) .x-panel-header.x-panel-header-default-framed,
:where(.x-tabpanel-child, .x-window) .x-window-header.x-window-header-default {
padding: 12px 22px;
border: 0;
border-radius: 0;
background-color: var(--color-primary);
background-image: none;
}
:where(.x-tabpanel-child, .x-window) .x-panel-header-default .x-title-text,
:where(.x-tabpanel-child, .x-window) .x-panel-header-default-framed .x-title-text,
:where(.x-tabpanel-child, .x-window) .x-window-header-default .x-title-text {
color: var(--color-primary-contrast);
font-size: 14px;
font-weight: 600;
text-transform: none;
}
/* Herramientas de la cabecera (cerrar, colapsar) en blanco */
:where(.x-tabpanel-child, .x-window) .x-panel-header-default .x-tool-img,
:where(.x-tabpanel-child, .x-window) .x-panel-header-default-framed .x-tool-img,
:where(.x-tabpanel-child, .x-window) .x-window-header-default .x-tool-img {
filter: brightness(0) invert(1);
}
:where(.x-tabpanel-child, .x-window) .x-panel-header-default .x-tool-tool-el,
:where(.x-tabpanel-child, .x-window) .x-panel-header-default-framed .x-tool-tool-el {
background-color: transparent;
}
/* Herramientas de cabecera con Material Symbols en vez del sprite PNG */
:where(.x-tabpanel-child, .x-window) .x-tool-img.x-tool-img {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: none;
color: var(--color-primary-contrast);
filter: none;
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 18px;
font-feature-settings: 'liga';
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
overflow: hidden;
opacity: .85;
}
:where(.x-tabpanel-child, .x-window) .x-tool-over .x-tool-img.x-tool-img {
opacity: 1;
}
:where(.x-tabpanel-child, .x-window) .x-tool-close:before { content: "close"; }
:where(.x-tabpanel-child, .x-window) .x-tool-collapse-top:before,
:where(.x-tabpanel-child, .x-window) .x-tool-collapse:before { content: "keyboard_arrow_up"; }
:where(.x-tabpanel-child, .x-window) .x-tool-expand-bottom:before,
:where(.x-tabpanel-child, .x-window) .x-tool-expand:before { content: "keyboard_arrow_down"; }
:where(.x-tabpanel-child, .x-window) .x-tool-refresh:before { content: "refresh"; }
:where(.x-tabpanel-child, .x-window) .x-tool-gear:before { content: "settings"; }
:where(.x-tabpanel-child, .x-window) .x-tool-help:before { content: "help"; }
:where(.x-tabpanel-child, .x-window) .x-tool-maximize:before { content: "open_in_full"; }
:where(.x-tabpanel-child, .x-window) .x-tool-restore:before { content: "close_fullscreen"; }
:where(.x-tabpanel-child, .x-window) .x-tool-search:before { content: "search"; }
/* ---- core/fieldset.css ---- */
/* Fieldsets con borde suave redondeado y título en azul. El relleno y el
margen van con !important para mandar sobre los que cada pantalla ponga
en la configuración del componente, que Ext escribe en línea. Abajo el
mismo aire acabe en un campo, una casilla o un botón: el relleno lo pone
el fieldset y el último elemento visible no suma su margen */
:where(.x-tabpanel-child, .x-window) .x-fieldset.x-fieldset-default {
border: 1px solid var(--color-fieldset-border);
border-radius: 8px;
padding: 10px 16px 16px 16px !important;
margin: 0 0 16px 0 !important;
}
:where(.x-tabpanel-child, .x-window) .x-fieldset-body :is(.x-autocontainer-innerCt, .x-box-target) > .x-form-item.x-form-item-default:not(:has(~ :not(.x-hidden-display, .x-hidden-offsets, .x-hidden-visibility, .x-tab-guard))) {
margin-bottom: 0;
}
:where(.x-tabpanel-child, .x-window) .x-fieldset-default > .x-fieldset-header {
padding: 0 6px 2px 6px;
}
:where(.x-tabpanel-child, .x-window) .x-fieldset-default > .x-fieldset-header .x-fieldset-header-text {
color: var(--color-primary);
font-size: 13px;
font-weight: 600;
}
/* Fieldset plegable: flecha de Material junto al título, en el color del
título; plegado, sólo la cabecera */
:where(.x-tabpanel-child, .x-window) .x-fieldset-header .x-tool.x-fieldset-header-tool-default {
margin-right: 4px;
border-radius: 50%;
cursor: pointer;
}
:where(.x-tabpanel-child, .x-window) .x-fieldset-header .x-tool-toggle.x-tool-img.x-tool-img {
color: var(--color-primary);
opacity: 1;
}
:where(.x-tabpanel-child, .x-window) .x-fieldset-header .x-tool-toggle:before {
content: "keyboard_arrow_up";
}
:where(.x-tabpanel-child, .x-window) .x-fieldset-collapsed > .x-fieldset-header .x-tool-toggle:before {
content: "keyboard_arrow_down";
}
:where(.x-tabpanel-child, .x-window) .x-fieldset-header .x-tool.x-fieldset-header-tool-default.x-tool-over {
background-color: var(--color-primary-soft);
}
:where(.x-tabpanel-child, .x-window) .x-fieldset-default.x-fieldset-collapsed {
padding-bottom: 0 !important;
border-color: transparent;
border-top-color: var(--color-fieldset-border);
border-radius: 0;
}
:where(.x-tabpanel-child, .x-window) .x-fieldset-collapsed > .x-fieldset-header {
cursor: pointer;
}
/* El último fieldset de un bloque no necesita separación con el borde */
:where(.x-tabpanel-child, .x-window) .x-fieldset.x-fieldset-default:last-child {
margin-bottom: 0 !important;
}
/* ---- core/form.css ---- */
/* Campos de formulario: texto, área, combo, fecha, checkbox y radio */
/* Etiquetas: pequeñas y atenuadas. Van encima del campo (label-top.js).
El tamaño va en el elemento interior, que es donde style.css lo fija a 16px */
:where(.x-tabpanel-child, .x-window) .x-form-item-label.x-form-item-label-default {
color: var(--color-text-muted);
padding-top: 10px;
}
/* El interior es un span en línea: sin display block el relleno vertical no
cuenta y la etiqueta se pega al campo */
:where(.x-tabpanel-child, .x-window) .x-form-item-label-inner.x-form-item-label-inner-default {
display: block;
padding: 0 0 6px 14px;
font-size: 12px;
font-weight: 500;
}
:where(.x-tabpanel-child, .x-window) .x-form-item-label.x-form-item-label-default.x-form-item-label-top {
min-height: 0;
padding: 0;
}
/* Algo más de aire entre un campo y el siguiente, que ahora son dos líneas */
:where(.x-tabpanel-child, .x-window) .x-form-item.x-form-item-default {
margin-bottom: 16px;
}
/* Un contenedor de campos no añade margen propio: lo llevan los campos de
dentro. Si no, en un hbox (campo más icono de ayuda) se doblaba, y si se
quitaba a los anidados, en un vbox los campos se pegaban entre sí */
:where(.x-tabpanel-child, .x-window) .x-form-item.x-form-item-default:has(> .x-form-item-body .x-form-item) {
margin-bottom: 0;
}
/* Campo en forma de pastilla: fondo suave y sin borde visible. El borde
existe pero es del color del fondo, para que al enfocar no cambie el tamaño */
:where(.x-tabpanel-child, .x-window) .x-form-trigger-wrap.x-form-trigger-wrap-default {
border: 1px solid var(--color-field-border);
border-radius: 20px;
background-color: var(--color-field-bg);
overflow: hidden;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
/* Hover: el mismo en campos grises y blancos, el borde en azul suave, sin
cambiar el fondo */
:where(.x-tabpanel-child, .x-window) .x-form-trigger-wrap.x-form-trigger-wrap-default:hover {
border-color: var(--color-field-border-hover);
}
/* Al enfocar se enciende: blanco, borde azul y anillo suave */
:where(.x-tabpanel-child, .x-window) .x-form-trigger-wrap.x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
border-color: var(--color-primary);
background-color: var(--color-surface);
box-shadow: var(--ring-focus);
}
:where(.x-tabpanel-child, .x-window) .x-form-trigger-wrap.x-form-trigger-wrap-default.x-form-trigger-wrap-invalid {
border-color: var(--color-danger);
background-color: var(--color-surface);
box-shadow: none;
}
/* Texto del campo */
:where(.x-tabpanel-child, .x-window) .x-form-text.x-form-text-default {
min-height: 36px;
padding: 0 16px;
border: 0;
background-color: transparent;
background-image: none;
color: var(--color-text);
font-size: 14px;
line-height: 36px;
}
/* El área de texto crece en vertical: la línea no puede ir a 36px */
:where(.x-tabpanel-child, .x-window) textarea.x-form-text.x-form-text-default {
padding: 9px 16px;
line-height: 18px;
}
:where(.x-tabpanel-child, .x-window) .x-form-text.x-form-text-default::placeholder,
:where(.x-tabpanel-child, .x-window) .x-form-empty-field.x-form-empty-field-default {
color: var(--color-text-placeholder);
}
/* Campo deshabilitado */
:where(.x-tabpanel-child, .x-window) .x-item-disabled .x-form-trigger-wrap-default {
background-color: var(--color-field-disabled-bg);
border-color: var(--color-field-disabled-border);
box-shadow: none;
}
:where(.x-tabpanel-child, .x-window) .x-item-disabled .x-form-item-label-default,
:where(.x-tabpanel-child, .x-window) .x-item-disabled .x-form-text-default {
opacity: .6;
}
/* Flecha del combo y del campo de fecha: icono de Material Symbols en vez
del PNG del tema */
:where(.x-tabpanel-child, .x-window) .x-form-trigger.x-form-trigger-default {
width: 34px;
border: 0;
background: transparent;
color: var(--color-text-muted);
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 18px;
font-feature-settings: 'liga';
line-height: 36px;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
text-align: center;
overflow: hidden;
cursor: pointer;
transition: color .12s ease;
}
:where(.x-tabpanel-child, .x-window) .x-form-trigger.x-form-trigger-default:before {
content: "keyboard_arrow_down";
vertical-align: middle;
}
/* Cada tipo de disparador con su icono */
:where(.x-tabpanel-child, .x-window) .x-form-date-trigger.x-form-trigger-default:before { content: "calendar_today"; }
:where(.x-tabpanel-child, .x-window) .x-form-time-trigger.x-form-trigger-default:before { content: "schedule"; }
:where(.x-tabpanel-child, .x-window) .x-form-clear-trigger.x-form-trigger-default:before { content: "close"; }
:where(.x-tabpanel-child, .x-window) .x-form-search-trigger.x-form-trigger-default:before { content: "search"; }
:where(.x-tabpanel-child, .x-window) .x-form-trigger-spinner.x-form-trigger-default:before { content: none; }
:where(.x-tabpanel-child, .x-window) .x-form-trigger-cmp.x-form-trigger-default:before { content: none; }
/* Campo de archivo: el nombre como un campo más (sin el borde de crisp) y el
botón Examinar dentro, a la derecha */
:where(.x-tabpanel-child, .x-window) .x-form-file-wrap .x-form-trigger-wrap .x-form-text-default.x-form-text-file {
padding: 0 16px;
border: 0;
background: transparent;
color: var(--color-text);
}
:where(.x-tabpanel-child, .x-window) .x-form-trigger-cmp.x-form-trigger-default {
width: auto;
padding: 0 4px 0 0;
line-height: normal;
vertical-align: middle;
cursor: default;
}
/* Sin borde al pasar el ratón: el aviso lo da el botón Examinar */
:where(.x-tabpanel-child, .x-window) .x-form-file-wrap .x-form-trigger-wrap.x-form-trigger-wrap-default:not(.x-form-trigger-wrap-focus):hover {
border-color: var(--color-field-border);
}
/* Botón Examinar: sin fondo, texto azul con el icono de subir */
:where(.x-tabpanel-child, .x-window) .x-form-trigger-cmp .x-btn.x-btn.x-unselectable.x-form-file-btn,
:where(.x-tabpanel-child, .x-window) .x-form-trigger-cmp .x-btn.x-btn.x-unselectable.x-form-file-btn.x-btn-over,
:where(.x-tabpanel-child, .x-window) .x-form-trigger-cmp .x-btn.x-btn.x-unselectable.x-form-file-btn.x-btn-focus,
:where(.x-tabpanel-child, .x-window) .x-form-trigger-cmp .x-btn.x-btn.x-unselectable.x-form-file-btn.x-btn-pressed {
border-color: transparent;
box-shadow: none;
}
:where(.x-tabpanel-child, .x-window) .x-form-trigger-cmp .x-btn.x-form-file-btn.x-btn-default-small {
margin: 0;
padding: 4px 12px;
border-color: transparent;
border-radius: 15px;
background-color: transparent;
box-shadow: none;
}
:where(.x-tabpanel-child, .x-window) .x-form-trigger-cmp .x-btn.x-form-file-btn.x-btn-default-small.x-btn-over {
background-color: var(--color-primary-soft);
}
:where(.x-tabpanel-child, .x-window) .x-form-trigger-cmp .x-form-file-btn .x-btn-inner.x-btn-inner-default-small {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-primary);
font-weight: 500;
}
:where(.x-tabpanel-child, .x-window) .x-form-trigger-cmp .x-form-file-btn .x-btn-inner:before {
content: "upload";
font-family: 'Material Symbols Outlined';
font-size: 18px;
font-weight: 400;
font-feature-settings: 'liga';
line-height: 1;
}
:where(.x-tabpanel-child, .x-window) .x-form-spinner-up.x-form-spinner-default:before { content: "keyboard_arrow_up"; }
:where(.x-tabpanel-child, .x-window) .x-form-spinner-down.x-form-spinner-default:before { content: "keyboard_arrow_down"; }
/* Los dos botones del spinner van apilados y comparten el alto del campo */
:where(.x-tabpanel-child, .x-window) .x-form-spinner-up.x-form-spinner-default,
:where(.x-tabpanel-child, .x-window) .x-form-spinner-down.x-form-spinner-default {
width: 100%;
height: 18px;
background: none;
font-size: 16px;
line-height: 18px;
text-align: center;
}
:where(.x-tabpanel-child, .x-window) .x-form-trigger.x-form-trigger-default:hover,
:where(.x-tabpanel-child, .x-window) .x-form-trigger-wrap-focus .x-form-trigger.x-form-trigger-default {
color: var(--color-primary);
}
/* Checkbox y radio: se sustituye el sprite PNG del tema por un dibujo CSS.
La parte visible es un span con el sprite de fondo (el input real va
invisible encima): se anula el sprite y se pinta cuadro y marca en el span */
:where(.x-tabpanel-child, .x-window) .x-form-checkbox.x-form-checkbox-default,
:where(.x-tabpanel-child, .x-window) .x-form-radio.x-form-radio-default {
box-sizing: border-box;
width: 16px;
height: 16px;
margin: 4px 0 0 0;
border: 1px solid var(--color-check-border);
border-radius: 4px;
background: var(--color-surface) none;
cursor: pointer;
vertical-align: middle;
transition: background-color .12s ease, border-color .12s ease;
}
:where(.x-tabpanel-child, .x-window) .x-form-radio.x-form-radio-default {
border-radius: 50%;
}
:where(.x-tabpanel-child, .x-window) .x-form-cb-checked .x-form-checkbox-default,
:where(.x-tabpanel-child, .x-window) .x-form-cb-checked .x-form-radio-default {
border-color: var(--color-primary);
background-color: var(--color-primary);
background-position: center !important;
background-repeat: no-repeat;
}
/* Con el foco (justo tras pinchar) crisp desplaza el sprite y se llevaba
la marca fuera de la caja: el foco se indica con un anillo, no moviendo nada */
:where(.x-tabpanel-child, .x-window) .x-form-checkbox-focus.x-form-checkbox-default,
:where(.x-tabpanel-child, .x-window) .x-form-checkbox-focus.x-form-radio-default {
background-position: center !important;
box-shadow: var(--ring-focus);
}
/* Marca de verificación: SVG en línea, blanco */
:where(.x-tabpanel-child, .x-window) .x-form-cb-checked .x-form-checkbox-default {
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px 12px;
}
/* Radio: punto blanco */
:where(.x-tabpanel-child, .x-window) .x-form-cb-checked .x-form-radio-default {
background-image: url("data:image/svg+xml;utf8,");
background-size: 16px 16px;
}
/* El envoltorio mide 24px: el cuadro de 16px va a 4px del borde y la
etiqueta ocupa los 24px con la línea centrada, así los dos comparten el
mismo centro. La etiqueta deja hueco al cuadro, que va a su lado en
posición absoluta */
:where(.x-tabpanel-child, .x-window) .x-form-cb-wrap.x-form-cb-wrap-default {
height: 24px;
}
:where(.x-tabpanel-child, .x-window) .x-form-cb-label.x-form-cb-label-default {
margin-top: 0;
color: var(--color-text);
font-size: 13px;
line-height: 24px;
vertical-align: top;
cursor: pointer;
}
:where(.x-tabpanel-child, .x-window) .x-form-cb-label.x-form-cb-label-default.x-form-cb-label-after {
padding-left: 24px;
}
:where(.x-tabpanel-child, .x-window) .x-form-cb-label.x-form-cb-label-default.x-form-cb-label-before {
padding-right: 24px;
}
/* Casilla suelta (sin etiqueta encima) en un formulario: con la misma
sangría que las etiquetas de los campos, no pegada al borde del campo */
:where(.x-form, .x-window) .x-form-item.x-form-type-checkbox.x-form-item-no-label > .x-form-item-body {
padding-left: 14px;
}
/* Selección múltiple (tagfield): los elementos elegidos como pastillas del
color de marca, con la X de Material, en vez de las cajas grises de crisp */
:where(.x-tabpanel-child, .x-window) .x-tagfield.x-form-text.x-form-text-default {
padding: 4px 10px;
line-height: 20px;
}
/* Vacío: el texto de ayuda como el de cualquier campo (centrado en alto,
misma sangría y letra) y el cursor alineado con él */
:where(.x-tabpanel-child, .x-window) .x-form-text-wrap-default .x-placeholder-label.x-placeholder-label-default {
top: 0;
bottom: 0;
display: flex;
align-items: center;
padding: 0 16px;
color: var(--color-text-placeholder);
font: 400 14px/20px 'Roboto', helvetica, arial, sans-serif;
pointer-events: none;
}
:where(.x-tabpanel-child, .x-window) .x-tagfield.x-form-text.x-form-text-default.x-form-empty-field {
padding-left: 14px;
}
/* El hueco para escribir ocupa lo que queda de la fila y sólo baja a otra
si no le caben unas cifras */
:where(.x-tabpanel-child, .x-window) .x-tagfield .x-tagfield-list {
display: flex;
flex-wrap: wrap;
align-items: center;
min-height: 28px;
}
:where(.x-tabpanel-child, .x-window) .x-tagfield .x-tagfield-list .x-tagfield-input {
flex: 1 1 60px;
min-width: 60px;
}
:where(.x-tabpanel-child, .x-window) .x-tagfield .x-tagfield-input .x-tagfield-input-field {
width: 100%;
}
:where(.x-tabpanel-child, .x-window) .x-form-text-default .x-tagfield-item.x-tagfield-item {
margin: 2px 6px 2px 0;
padding: 2px 24px 2px 10px;
border: 0;
border-radius: 12px;
background-color: var(--color-primary-soft);
color: var(--color-text);
font: 400 12px/20px 'Roboto', helvetica, arial, sans-serif;
}
:where(.x-tabpanel-child, .x-window) .x-form-text-default .x-tagfield-item.x-tagfield-item:hover {
background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}
:where(.x-tabpanel-child, .x-window) .x-form-text-default .x-tagfield-item.x-tagfield-item-selected {
background-color: var(--color-primary);
color: var(--color-primary-contrast);
}
:where(.x-tabpanel-child, .x-window) .x-form-text-default .x-tagfield-item-close.x-tagfield-item-close {
display: flex;
align-items: center;
justify-content: center;
top: 50%;
right: 5px;
width: 16px;
height: 16px;
margin-top: -8px;
border-radius: 50%;
background: none;
color: var(--color-text-muted);
font-family: 'Material Symbols Outlined';
font-size: 13px;
font-feature-settings: 'liga';
line-height: 1;
}
:where(.x-tabpanel-child, .x-window) .x-form-text-default .x-tagfield-item-close.x-tagfield-item-close:before {
content: "close";
}
:where(.x-tabpanel-child, .x-window) .x-form-text-default .x-tagfield-item-close.x-tagfield-item-close:hover {
background-color: var(--color-surface);
color: var(--color-danger);
}
:where(.x-tabpanel-child, .x-window) .x-form-text-default .x-tagfield-item-selected .x-tagfield-item-close.x-tagfield-item-close {
color: var(--color-primary-contrast);
}
/* ------------------------------------------------------------------ */
/* Toolbars con campos (filtros, exportar...) */
/* ------------------------------------------------------------------ */
/* Con la etiqueta encima, el campo mide 13px más que el botón por arriba.
Ext centra los items de una toolbar en vertical (hbox) o los apoya arriba
(layout de columnas, cuando los filtros van en varias filas): en cada caso
se baja el botón lo justo para que quede a la altura del campo. Con
!important porque las barras ponen margin en la configuración */
/* La barra de paginación queda fuera: su campo de página lleva la clase de
etiqueta superior sin tener etiqueta visible */
:where(.x-tabpanel-child, .x-window) .x-toolbar.x-box-layout-ct:has(.x-form-item-label-top):not(:has(.x-tbar-page-number)) .x-btn {
margin-top: 13px !important;
}
:where(.x-tabpanel-child, .x-window) .x-toolbar.x-column-layout-ct:has(.x-form-item-label-top):not(:has(.x-tbar-page-number)) .x-btn {
margin-top: 19px !important;
}
/* Sin rayas separadoras entre campos: el aire entre ellos ya separa */
:where(.x-tabpanel-child, .x-window) .x-toolbar:has(.x-form-item-label-top):not(:has(.x-tbar-page-number)) .x-toolbar-separator {
display: none;
}
/* Toolbar suelta en el contenido (no docked, como la de exportar): un
recuadro suave. La de filtros no, va sin marco */
:where(.x-tabpanel-child, .x-window) .x-toolbar.x-toolbar-default:not(.x-docked):not(.flex-label-field) {
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: 8px;
background-color: var(--color-surface);
}
/* ---- core/dropdown.css ---- */
/* Desplegables: una sola apariencia para la lista de los combos
(x-boundlist) y los menús de Ext (x-menu, como el de exportar). Flotan en
el body, fuera del contenido, por eso no llevan el ámbito de pestaña o
ventana. Las medidas y colores son las variables --dropdown-*, que usan
también los menús propios de cada adaptador */
/* Caja */
.x-boundlist.x-boundlist-default,
.x-menu.x-menu-default {
padding: var(--dropdown-padding);
border: 0;
border-radius: var(--dropdown-radius);
background-color: var(--color-surface);
box-shadow: var(--shadow-popover);
font-family: 'Roboto', helvetica, arial, sans-serif;
overflow: hidden;
}
.x-boundlist.x-boundlist-default .x-boundlist-list-ct,
.x-menu.x-menu-default .x-menu-body {
padding: 0;
border: 0;
background: transparent;
}
/* Opción: pastilla con su propio margen */
.x-boundlist.x-boundlist-default .x-boundlist-item,
.x-menu.x-menu-default .x-menu-item-link {
display: flex;
align-items: center;
margin: 1px 0;
padding: var(--dropdown-item-padding);
border: 0;
border-radius: var(--dropdown-item-radius);
color: var(--color-text);
font-family: 'Roboto', helvetica, arial, sans-serif;
font-size: var(--dropdown-item-font-size);
font-weight: 400;
line-height: 18px;
text-decoration: none;
transition: background-color .1s ease, color .1s ease;
}
.x-menu.x-menu-default .x-menu-item.x-menu-item-default {
border: 0;
background: transparent;
}
.x-menu.x-menu-default .x-menu-item-text.x-menu-item-text-default {
margin: 0;
padding: 0;
color: inherit;
font: inherit;
line-height: inherit;
}
.x-menu.x-menu-default .x-menu-item-icon-default {
order: -1;
position: static;
width: 16px;
margin-right: 10px;
color: var(--color-primary);
font-size: 13px;
line-height: 18px;
text-align: center;
}
.x-menu.x-menu-default .x-menu-item-icon-default.ms {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 18px;
line-height: 1;
}
.x-menu.x-menu-default .x-menu-item-icon-default.ui-icon-muted {
color: var(--color-text-muted);
}
/* Flecha de submenú: al final de la fila, sin pisar el texto */
.x-menu.x-menu-default .x-menu-item-arrow {
position: static;
flex: none;
order: 2;
margin-left: auto;
}
.x-menu.x-menu-default .x-menu-item-link:has(.x-menu-item-arrow) {
gap: 14px;
}
/* Al pasar */
.x-boundlist.x-boundlist-default .x-boundlist-item-over,
.x-menu.x-menu-default .x-menu-item-active .x-menu-item-link {
background-color: var(--dropdown-item-hover-bg);
color: var(--color-text);
}
/* Seleccionada: azul suave, texto azul y marca a la derecha */
.x-boundlist.x-boundlist-default .x-boundlist-selected,
.x-boundlist.x-boundlist-default .x-boundlist-selected.x-boundlist-item-over,
.x-menu.x-menu-default .x-menu-item-checked .x-menu-item-link {
background-color: var(--dropdown-item-active-bg);
color: var(--dropdown-item-active-text);
font-weight: 500;
}
.x-boundlist.x-boundlist-default .x-boundlist-selected:after {
content: "check";
margin-left: auto;
padding-left: 10px;
color: var(--dropdown-item-active-text);
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 16px;
font-feature-settings: 'liga';
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
}
/* Sin resultados */
.x-boundlist.x-boundlist-default .x-boundlist-empty {
padding: 8px 12px;
color: var(--color-text-muted);
font-size: 12px;
}
/* Título de una sección del menú (ui-menu-heading) */
.x-menu.x-menu-default .ui-menu-heading {
padding: 8px 12px 4px 12px;
color: var(--color-text-muted);
font-family: 'Roboto', helvetica, arial, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .4px;
text-transform: uppercase;
cursor: default;
}
/* Separador que alguna pantalla usa suelto en un formulario: línea fina del
color de los bordes */
:where(.x-tabpanel-child, .x-window) .x-menu-item-default.x-menu-item-separator.x-box-item {
border-color: transparent;
border-top-color: var(--color-border);
background: none;
}
/* Separadores de menú */
.x-menu.x-menu-default .x-menu-item-separator {
height: 1px;
margin: 4px 6px;
border: 0;
background-color: var(--color-border);
}
/* Tooltips (data-qtip, tooltip de botones y columnas): pastilla oscura con
texto claro, colores de --tooltip-*. Los de error de los campos
(x-tip-form-invalid) mantienen su aspecto */
.x-tip.x-tip-default {
padding: 0;
border: 1px solid var(--tooltip-border);
border-radius: 6px;
background-color: var(--tooltip-bg);
box-shadow: var(--shadow-popover);
}
.x-tip.x-tip-default .x-tip-body-default {
padding: 6px 10px;
color: var(--tooltip-text);
font: 400 12px/16px 'Roboto', helvetica, arial, sans-serif;
}
.x-tip.x-tip-default .x-tip-body-default a {
color: inherit;
}
.x-tip.x-tip-default .x-tip-header-default {
background-color: transparent;
}
.x-tip.x-tip-default .x-tip-header-default .x-title-text {
color: var(--tooltip-text);
}
.x-tip.x-tip-default .x-tip-anchor {
display: none !important;
}
/* ---- core/editor.css ---- */
/* Editor HTML (Ext.form.field.HtmlEditor): un solo bloque redondeado con la
barra de formato arriba y el área de escritura debajo. Los botones son
planos, con iconos de Material Symbols en vez del sprite PNG de crisp, y el
formato activo se marca con el color de marca. El texto del área (un
iframe) lo ajusta core/components/editor.js */
/* Bloque: crisp pone el borde en el contenedor y el tema lo lleva ahí,
redondeado y con el borde de campo al escribir */
:where(.x-tabpanel-child, .x-window) .x-html-editor-container.x-html-editor-container {
border: 1px solid var(--color-border);
border-radius: 12px;
background-color: var(--color-field-canvas-bg);
overflow: hidden;
transition: border-color .12s ease;
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-container.x-html-editor-container:hover {
border-color: var(--color-field-border-hover);
}
:where(.x-tabpanel-child, .x-window) .x-form-focus .x-html-editor-container.x-html-editor-container,
:where(.x-tabpanel-child, .x-window) .x-html-editor-container.x-html-editor-container:focus-within {
border-color: var(--color-primary);
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-wrap {
border: 0;
background-color: transparent;
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-wrap iframe,
:where(.x-tabpanel-child, .x-window) .x-html-editor-wrap textarea {
background-color: transparent;
}
/* Modo código (botón de código fuente). Sin cambiar la fuente: Ext toma la
del textarea como fuente por defecto del contenido */
:where(.x-tabpanel-child, .x-window) .x-html-editor-wrap textarea {
padding: 10px 14px;
color: var(--color-text);
}
/* Barra de formato */
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-toolbar.x-toolbar-default {
padding: 5px 8px;
border: 0;
border-bottom: 1px solid var(--color-border);
background-color: var(--color-surface-2);
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-toolbar-separator.x-toolbar-separator-horizontal {
height: 18px;
margin: 0 4px;
border-left-color: var(--color-border);
border-right: 0;
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-font-select {
height: 28px;
padding: 0 8px;
border: 0;
border-radius: 6px;
outline: 0;
background-color: var(--color-surface);
color: var(--color-text);
font-family: 'Roboto', helvetica, arial, sans-serif;
font-size: 12px;
cursor: pointer;
}
/* Botones */
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-btn.x-btn.x-unselectable,
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-btn.x-btn.x-unselectable.x-btn-focus {
min-width: 28px;
height: 28px;
padding: 0 4px;
border: 0;
border-radius: 6px;
background-color: transparent;
box-shadow: none;
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-btn.x-btn.x-unselectable.x-btn-over {
background-color: var(--color-surface-3);
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-btn.x-btn.x-unselectable.x-btn-pressed,
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-btn.x-btn.x-unselectable.x-btn-menu-active {
background-color: var(--color-primary-soft);
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-btn.x-unselectable .x-btn-icon-el {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin: 0;
background-image: none !important;
color: var(--color-text-muted);
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 19px;
font-feature-settings: 'liga';
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-btn.x-unselectable.x-btn-over .x-btn-icon-el {
color: var(--color-text);
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-btn.x-unselectable:is(.x-btn-pressed, .x-btn-menu-active) .x-btn-icon-el {
color: var(--color-primary);
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-btn.x-unselectable.x-btn-disabled .x-btn-icon-el {
opacity: .4;
}
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-bold:before { content: "format_bold"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-italic:before { content: "format_italic"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-underline:before { content: "format_underlined"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-increasefontsize:before { content: "text_increase"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-decreasefontsize:before { content: "text_decrease"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-forecolor:before { content: "format_color_text"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-backcolor:before { content: "format_ink_highlighter"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-justifyleft:before { content: "format_align_left"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-justifycenter:before { content: "format_align_center"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-justifyright:before { content: "format_align_right"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-createlink:before { content: "link"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-insertorderedlist:before { content: "format_list_numbered"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-insertunorderedlist:before { content: "format_list_bulleted"; }
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-edit-sourceedit:before { content: "code"; }
/* Flecha de los botones con menú (colores): chevron pequeño en vez del PNG */
:where(.x-tabpanel-child, .x-window) .x-html-editor-tb .x-btn-wrap.x-btn-arrow-right:after {
width: 12px;
padding-right: 0;
background-image: none;
color: var(--color-text-muted);
content: "expand_more";
font-family: 'Material Symbols Outlined';
font-size: 14px;
font-feature-settings: 'liga';
line-height: 28px;
text-align: center;
}
/* Paleta de colores de los menús de color */
.x-color-picker a {
border-radius: 4px;
}
.x-color-picker em span {
border-radius: 3px;
}
/* ---- core/button.css ---- */
/* Botones. Sólo dentro del contenido de la pestaña y de las ventanas: el
menú lateral y la barra superior también usan botones y cabeceras y no
deben cambiar. Sobre fondo claro, azul sólido con texto blanco; dentro de una
Los selectores repiten .x-btn para tener tres clases: style.css pinta los
botones en gris con tres y el tema crisp usa hasta tres en sus estados */
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable {
padding: 6px 14px;
border: 1px solid var(--color-primary);
border-radius: 6px;
background-color: var(--color-primary);
background-image: none;
box-shadow: none;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.x-btn-over {
border-color: var(--color-primary-hover);
background-color: var(--color-primary-hover);
}
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.x-btn-pressed,
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.x-btn-menu-active {
border-color: var(--color-primary-active);
background-color: var(--color-primary-active);
}
/* Sin el marco interior de foco del tema */
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.x-btn-focus,
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.x-btn-focus.x-btn-over,
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.x-btn-focus.x-btn-pressed {
box-shadow: none;
}
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.x-btn-disabled {
background-color: var(--color-primary);
opacity: .5;
}
:where(.x-tabpanel-child, .x-window) /* La altura sale del relleno vertical (30, 34 y 40px según el tamaño). Si el
botón lleva una altura fija en su configuración, el interior se estira a
ella y centra el contenido por flex */
.x-btn.x-unselectable .x-btn-wrap {
display: flex;
height: 100%;
align-items: stretch;
}
/* Crisp fija la altura del interior (32px en large, 16px en small) y ese
bloque se queda arriba cuando el botón es más alto: aquí se estira al alto
del botón y centra su contenido */
.x-btn.x-unselectable .x-btn-button {
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
flex: 1 1 auto;
height: auto;
min-height: 0;
}
/* Sin el ancho máximo que crisp pone al texto para reservar sitio al icono
(24px en los botones grandes): el icono del tema ocupa 23 y el texto
quedaba 1px corto, con puntos suspensivos */
.x-btn.x-unselectable .x-btn-inner {
max-width: none;
padding: 0;
color: var(--color-primary-contrast);
font: 500 12px/16px 'Roboto', helvetica, arial, sans-serif;
}
:where(.x-tabpanel-child, .x-window) .x-btn.x-unselectable .x-btn-icon-el {
margin: 0;
color: var(--color-primary-contrast);
font-size: 13px;
line-height: 16px;
}
/* Iconos de Material Symbols (iconCls: 'ms ms-...'): algo más grandes que
el resto, centrados en la caja del icono */
:where(.x-tabpanel-child, .x-window) .x-btn.x-unselectable .x-btn-icon-el.ms {
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
line-height: 1;
}
/* Aire entre icono y texto */
:where(.x-tabpanel-child, .x-window) .x-btn.x-unselectable .x-btn-icon-left > .x-btn-inner {
padding-left: 7px;
}
/* ------------------------------------------------------------------ */
/* Dentro de una cabecera azul: blanco con texto azul (variables */
/* --header-btn-*; en oscuro, translúcidos con texto blanco) */
/* ------------------------------------------------------------------ */
:where(.x-tabpanel-child, .x-window) .x-panel-header .x-btn.x-btn.x-unselectable,
:where(.x-tabpanel-child, .x-window) .x-window-header .x-btn.x-btn.x-unselectable,
:where(.x-tabpanel-child, .x-window) .x-panel-header .x-btn.x-btn.x-unselectable.x-btn-disabled,
:where(.x-tabpanel-child, .x-window) .x-window-header .x-btn.x-btn.x-unselectable.x-btn-disabled {
border-color: transparent;
background-color: var(--header-btn-bg);
}
:where(.x-tabpanel-child, .x-window) .x-panel-header .x-btn.x-btn.x-unselectable.x-btn-over,
:where(.x-tabpanel-child, .x-window) .x-window-header .x-btn.x-btn.x-unselectable.x-btn-over {
border-color: transparent;
background-color: var(--header-btn-bg-hover);
}
:where(.x-tabpanel-child, .x-window) .x-panel-header .x-btn.x-btn.x-unselectable.x-btn-pressed,
:where(.x-tabpanel-child, .x-window) .x-window-header .x-btn.x-btn.x-unselectable.x-btn-pressed,
:where(.x-tabpanel-child, .x-window) .x-panel-header .x-btn.x-btn.x-unselectable.x-btn-menu-active,
:where(.x-tabpanel-child, .x-window) .x-window-header .x-btn.x-btn.x-unselectable.x-btn-menu-active {
border-color: transparent;
background-color: var(--header-btn-bg-pressed);
}
:where(.x-tabpanel-child, .x-window) .x-panel-header .x-btn.x-unselectable .x-btn-inner,
:where(.x-tabpanel-child, .x-window) .x-panel-header .x-btn.x-unselectable .x-btn-icon-el,
:where(.x-tabpanel-child, .x-window) .x-window-header .x-btn.x-unselectable .x-btn-inner,
:where(.x-tabpanel-child, .x-window) .x-window-header .x-btn.x-unselectable .x-btn-icon-el {
color: var(--header-btn-text);
}
/* ------------------------------------------------------------------ */
/* Tamaños: scale medium y large */
/* ------------------------------------------------------------------ */
.x-btn.x-btn.x-unselectable.x-btn-default-medium {
padding: 8px 16px;
}
.x-btn.x-unselectable.x-btn-default-medium .x-btn-inner {
font-size: 13px;
}
.x-btn.x-btn.x-unselectable.x-btn-default-large {
padding: 10px 20px;
border-radius: 8px;
}
.x-btn.x-unselectable.x-btn-default-large .x-btn-inner {
font-size: 14px;
line-height: 18px;
}
.x-btn.x-unselectable.x-btn-default-large .x-btn-icon-el {
font-size: 15px;
}
.x-btn.x-unselectable.x-btn-default-large .x-btn-icon-el.ms {
font-size: 19px;
}
/* Botón junto a un campo (fieldcontainer con el campo y el botón, como
Generar contraseña, o marcado con ui-btn-ghost desde formButton): sin fondo,
con el color de marca y un fondo suave al pasar por encima, a la altura del
campo */
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.ui-btn-ghost,
:where(.x-tabpanel-child, .x-window) .x-form-fieldcontainer .x-btn.x-btn.x-unselectable {
height: 36px;
border-color: transparent;
border-radius: 18px;
background-color: transparent;
}
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.ui-btn-ghost.x-btn-over,
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.ui-btn-ghost.x-btn-pressed,
:where(.x-tabpanel-child, .x-window) .x-form-fieldcontainer .x-btn.x-btn.x-unselectable.x-btn-over,
:where(.x-tabpanel-child, .x-window) .x-form-fieldcontainer .x-btn.x-btn.x-unselectable.x-btn-pressed {
border-color: transparent;
background-color: var(--color-primary-soft);
}
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.ui-btn-ghost.x-btn-disabled,
:where(.x-tabpanel-child, .x-window) .x-form-fieldcontainer .x-btn.x-btn.x-unselectable.x-btn-disabled {
background-color: transparent;
}
:where(.x-tabpanel-child, .x-window) .x-btn.x-unselectable.ui-btn-ghost .x-btn-inner,
:where(.x-tabpanel-child, .x-window) .x-btn.x-unselectable.ui-btn-ghost .x-btn-icon-el,
:where(.x-tabpanel-child, .x-window) .x-form-fieldcontainer .x-btn.x-unselectable .x-btn-inner,
:where(.x-tabpanel-child, .x-window) .x-form-fieldcontainer .x-btn.x-unselectable .x-btn-icon-el {
color: var(--color-primary);
}
/* ---- core/grid.css ---- */
/* Filas de grid: sin líneas de separación, con alternancia de color y con
aire a los lados, de modo que el hover y la selección se pintan como una
pastilla redondeada y no de borde a borde */
/* ExtJS calcula el ancho de las columnas, y con él el de cada fila, a partir
de la cabecera de columnas. El aire lateral se pone ahí, para que las
columnas ya salgan más estrechas, y se repite en el contenedor de filas
para que queden centradas debajo */
:where(.x-tabpanel-child, .x-window) .x-grid-header-ct.x-grid-header-ct {
padding: 0 12px;
border-width: 0 !important;
background-color: transparent;
background-image: none;
}
:where(.x-tabpanel-child, .x-window) .x-grid-item-container {
padding: 6px 12px;
}
:where(.x-tabpanel-child, .x-window) .x-grid-item {
border-radius: 8px;
overflow: hidden;
/* Fondo y texto por variable: crisp los fija en blanco y negro */
background-color: var(--color-surface);
color: var(--color-text);
transition: background-color .12s ease;
}
/* Un poco de aire entre fila y fila */
:where(.x-tabpanel-child, .x-window) .x-grid-item-container > .x-grid-item + .x-grid-item {
margin-top: 3px;
}
/* Ninguna línea ni sombra en las capas internas del grid: cuerpo, vista,
contenedor de filas, filas y celdas. Con !important para no pelear con
cada regla de crisp una a una */
:where(.x-tabpanel-child, .x-window) .x-grid-body,
:where(.x-tabpanel-child, .x-window) .x-grid-view,
:where(.x-tabpanel-child, .x-window) .x-grid-item-container,
:where(.x-tabpanel-child, .x-window) .x-grid-item,
:where(.x-tabpanel-child, .x-window) .x-grid-row,
:where(.x-tabpanel-child, .x-window) .x-grid-td,
:where(.x-tabpanel-child, .x-window) .x-grid-cell,
:where(.x-tabpanel-child, .x-window) .x-grid-cell-inner,
:where(.x-tabpanel-child, .x-window) .x-grid-scrollbar-clipper,
:where(.x-tabpanel-child, .x-window) .x-grid-scrollbar,
:where(.x-tabpanel-child, .x-window) .x-panel-bodyWrap {
border: 0 !important;
box-shadow: none !important;
}
/* style.css sube 6px las toolbars de los grids autoHeight (CustomGrid1):
la paginación tapaba la barra de scroll horizontal de la vista */
:where(.x-tabpanel-child, .x-window) :is(.autoHeight, .autoHeight10) .x-toolbar.x-toolbar {
margin-top: 0;
}
/* Filas desplegables (rowexpander, rowwidget): chevron de Material Symbols
en vez del +/- de crisp */
:where(.x-tabpanel-child, .x-window) .x-grid-row-expander.x-grid-row-expander {
width: 20px;
height: 20px;
background-image: none;
color: var(--color-text-muted);
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 20px;
font-feature-settings: 'liga';
line-height: 20px;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
transition: color .12s ease;
}
:where(.x-tabpanel-child, .x-window) .x-grid-row-expander.x-grid-row-expander:before {
content: "expand_more";
}
:where(.x-tabpanel-child, .x-window) .x-grid-row-collapsed .x-grid-row-expander.x-grid-row-expander:before {
content: "chevron_right";
}
:where(.x-tabpanel-child, .x-window) .x-grid-row-expander.x-grid-row-expander:hover {
color: var(--color-primary);
}
:where(.x-tabpanel-child, .x-window) .x-grid-row-expander.x-grid-row-expander:focus {
outline: 0;
}
/* Grid dentro de una fila desplegada: cabecera discreta, sin el bloque azul
de los grids de primer nivel, con el título en el color de marca */
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody .x-panel-header.x-panel-header-default.x-panel-header-default {
padding: 10px 22px 4px 22px;
background-color: transparent;
--header-btn-bg: var(--color-surface-2);
--header-btn-bg-hover: var(--color-primary-soft);
--header-btn-bg-pressed: var(--color-primary-soft);
--header-btn-text: var(--color-primary);
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody .x-panel-header-default .x-title-text.x-title-text {
color: var(--color-primary);
font-size: 12px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody .x-panel-header-default .x-tool-img {
filter: none;
}
/* Fila desplegada: la fila y lo desplegado forman un bloque con un tinte del
color de marca, que no cambia con la raya ni con el hover. El grid de
dentro va sobre la superficie, como una tarjeta dentro del bloque, sin
sombra y sin raya en sus filas */
:where(.x-tabpanel-child, .x-window) .x-grid-item-container > .x-grid-item.x-grid-item:has(> tbody > .x-grid-rowbody-tr:not(.x-grid-row-body-hidden)) {
background-color: var(--color-row-group);
}
:where(.x-tabpanel-child, .x-window) .x-grid-item .x-grid-rowbody-tr {
background-color: transparent;
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody {
padding: 0 12px 12px 12px;
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody .x-panel.x-grid {
border: 0;
border-radius: 8px;
background-color: var(--color-surface);
box-shadow: none;
}
/* HTML a mano en la plantilla de la fila (rowBodyTpl): etiquetas, campos y
botones con el aspecto del tema. Algunos llevan estilo en línea (negrita,
relleno, fondo gris fijo) que hay que pisar con !important */
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody label {
color: var(--color-text-muted);
font: 500 12px/18px 'Roboto', helvetica, arial, sans-serif !important;
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody :is(textarea, input[type="text"], input:not([type])) {
padding: 9px 16px;
border: 1px solid var(--color-field-border);
border-radius: 18px;
outline: 0;
background-color: var(--color-field-canvas-bg);
color: var(--color-text);
font: 400 14px/18px 'Roboto', helvetica, arial, sans-serif;
transition: border-color .12s ease;
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody textarea {
border-radius: 12px;
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody :is(textarea, input):is(:hover, :focus) {
border-color: var(--color-field-border-hover);
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody button {
padding: 6px 14px !important;
border: 1px solid var(--color-primary);
border-radius: 6px;
background-color: var(--color-primary);
color: var(--color-primary-contrast);
font: 500 12px/16px 'Roboto', helvetica, arial, sans-serif;
transition: background-color .15s ease, border-color .15s ease;
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody button:hover {
border-color: var(--color-primary-hover);
background-color: var(--color-primary-hover);
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody [style*="background: #f9f9f9" i] {
border-radius: 8px;
background: var(--color-surface) !important;
color: var(--color-text);
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody .x-grid-view {
background-color: var(--color-surface);
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody .x-grid-item-container > .x-grid-item.x-grid-item:is(:nth-child(even), .x-grid-item-alt) {
background-color: transparent;
}
:where(.x-tabpanel-child, .x-window) .x-grid-rowbody .x-grid-item-container > .x-grid-item.x-grid-item.x-grid-item-over {
background-color: var(--color-row-hover);
}
/* Barras acopladas al grid (botones bajo la lista, como Limpiar / Subir
adjunto): con el fondo de la tarjeta, crisp las pinta en blanco fijo */
:where(.x-tabpanel-child, .x-window) .x-grid .x-toolbar.x-toolbar-default.x-docked {
border-color: var(--color-border);
background-color: var(--color-surface);
}
/* Sin líneas entre filas */
:where(.x-tabpanel-child, .x-window) .x-grid-with-row-lines .x-grid-item,
:where(.x-tabpanel-child, .x-window) .x-grid-with-row-lines .x-grid-item.x-grid-item-over,
:where(.x-tabpanel-child, .x-window) .x-grid-with-row-lines .x-grid-item.x-grid-item-selected {
border-width: 0;
}
/* Sin el marco de foco del tema alrededor de la celda */
:where(.x-tabpanel-child, .x-window) .x-grid-item-focused .x-grid-cell-inner:before {
border: 0;
}
/* Alternancia por posición en el DOM, sin depender de que el grid tenga
stripeRows activado ni de la clase x-grid-item-alt */
:where(.x-tabpanel-child, .x-window) .x-grid-item-container > .x-grid-item:nth-child(even),
:where(.x-tabpanel-child, .x-window) .x-grid-item.x-grid-item-alt {
background-color: var(--color-row-alt);
}
/* Hover. Con el mismo padre en el selector que la alternancia, para pesar
igual que ella e ir después: si no, en las filas pares ganaba la raya y el
hover no se veía */
:where(.x-tabpanel-child, .x-window) .x-grid-item-container > .x-grid-item.x-grid-item-over {
background-color: var(--color-row-hover);
}
/* La fila seleccionada no se pinta: al pinchar en una fila Ext la deja
seleccionada hasta que se pincha otra, y quedaba marcada tras salir del
grid. Crisp le pone fondo con una clase, se devuelve al de la fila normal */
:where(.x-tabpanel-child, .x-window) .x-grid-item-container > .x-grid-item.x-grid-item-selected {
background-color: transparent;
}
:where(.x-tabpanel-child, .x-window) .x-grid-item-container > .x-grid-item.x-grid-item-selected:nth-child(even) {
background-color: var(--color-row-alt);
}
:where(.x-tabpanel-child, .x-window) .x-grid-item-container > .x-grid-item.x-grid-item-selected.x-grid-item-over {
background-color: var(--color-row-hover);
}
/* Celdas más altas, con el contenido centrado en vertical */
:where(.x-tabpanel-child, .x-window) .x-grid-item .x-grid-cell {
height: 50px;
vertical-align: middle;
}
:where(.x-tabpanel-child, .x-window) .x-grid-item .x-grid-cell-inner {
white-space: normal;
}
/* ------------------------------------------------------------------ */
/* Cabecera de columnas */
/* ------------------------------------------------------------------ */
:where(.x-tabpanel-child, .x-window) .x-column-header.x-column-header {
border: 0;
background-color: transparent;
background-image: none;
color: var(--color-text-muted);
}
:where(.x-tabpanel-child, .x-window) .x-column-header-inner.x-column-header-inner,
:where(.x-tabpanel-child, .x-window) .x-column-header-inner.x-leaf-column-header {
padding: 10px 10px 8px 10px;
color: var(--color-text-muted);
background-color: transparent;
}
:where(.x-tabpanel-child, .x-window) .x-column-header-text-inner.x-column-header-text-inner {
font-family: 'Roboto', helvetica, arial, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
}
/* Columna editable (core/components/grid-editable.js): lápiz delante del
nombre */
:where(.x-tabpanel-child, .x-window) .ui-col-editable .x-column-header-text-inner:before {
content: "edit";
margin-right: 4px;
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 13px;
font-feature-settings: 'liga';
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
vertical-align: -2px;
}
/* Columna sobre la que está el ratón o por la que se ordena */
:where(.x-tabpanel-child, .x-window) .x-column-header.x-column-header-over,
:where(.x-tabpanel-child, .x-window) .x-column-header.x-column-header-sort-ASC,
:where(.x-tabpanel-child, .x-window) .x-column-header.x-column-header-sort-DESC {
background-color: transparent;
color: var(--color-primary);
}
:where(.x-tabpanel-child, .x-window) .x-column-header-over .x-column-header-inner,
:where(.x-tabpanel-child, .x-window) .x-column-header-sort-ASC .x-column-header-inner,
:where(.x-tabpanel-child, .x-window) .x-column-header-sort-DESC .x-column-header-inner {
color: var(--color-primary);
}
/* Flechas de orden y menú de columna con Material Symbols en vez del PNG */
:where(.x-tabpanel-child, .x-window) .x-column-header-sort-ASC .x-column-header-text-inner,
:where(.x-tabpanel-child, .x-window) .x-column-header-sort-DESC .x-column-header-text-inner {
background-image: none;
padding-right: 0;
}
:where(.x-tabpanel-child, .x-window) .x-column-header-sort-ASC .x-column-header-text-inner:after,
:where(.x-tabpanel-child, .x-window) .x-column-header-sort-DESC .x-column-header-text-inner:after {
margin-left: 4px;
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 14px;
font-feature-settings: 'liga';
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
vertical-align: -2px;
}
:where(.x-tabpanel-child, .x-window) .x-column-header-sort-ASC .x-column-header-text-inner:after {
content: "arrow_upward";
}
:where(.x-tabpanel-child, .x-window) .x-column-header-sort-DESC .x-column-header-text-inner:after {
content: "arrow_downward";
}
/* Cabecera bajo el ratón o con su menú abierto: una pastilla suave, y la
flecha del menú como un botón pequeño dentro de ella (crisp la separaba con
una raya y marcaba el foco con un recuadro azul) */
:where(.x-tabpanel-child, .x-window) .x-column-header-inner.x-column-header-inner.x-column-header-over,
:where(.x-tabpanel-child, .x-window) .x-column-header-open .x-column-header-inner.x-column-header-inner {
padding-right: 30px;
border-radius: 6px;
background-color: var(--color-row-hover);
}
:where(.x-tabpanel-child, .x-window) .x-column-header.x-column-header.x-column-header-focus .x-column-header-inner:after {
display: none;
}
:where(.x-tabpanel-child, .x-window) .x-column-header-over .x-column-header-trigger.x-column-header-trigger,
:where(.x-tabpanel-child, .x-window) .x-column-header-open .x-column-header-trigger.x-column-header-trigger {
top: 50%;
right: 4px;
width: 22px;
height: 22px;
margin-top: -11px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--color-text-muted);
transition: background-color .12s ease, color .12s ease, transform .15s ease;
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 16px;
font-feature-settings: 'liga';
line-height: 22px;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
text-align: center;
overflow: hidden;
}
:where(.x-tabpanel-child, .x-window) .x-column-header-over .x-column-header-trigger:before,
:where(.x-tabpanel-child, .x-window) .x-column-header-open .x-column-header-trigger:before {
content: "keyboard_arrow_down";
vertical-align: top;
}
:where(.x-tabpanel-child, .x-window) .x-column-header-trigger.x-column-header-trigger:hover,
:where(.x-tabpanel-child, .x-window) .x-column-header-open .x-column-header-trigger.x-column-header-trigger {
background-color: var(--color-primary-soft);
color: var(--color-primary);
}
:where(.x-tabpanel-child, .x-window) .x-column-header-open .x-column-header-trigger.x-column-header-trigger {
transform: rotate(180deg);
}
/* Línea fina bajo la cabecera, separándola de las filas. No cuando la
cabecera está oculta: quedaría una raya suelta encima de la primera fila */
:where(.x-tabpanel-child, .x-window) .x-grid-header-ct.x-grid-header-ct:not(.x-grid-header-ct-hidden) {
border-bottom: 1px solid var(--color-border) !important;
}
/* ------------------------------------------------------------------ */
/* Editor de celda */
/* ------------------------------------------------------------------ */
/* Ext centra el editor en la celda midiendo su alto. El campo es un
x-form-item y arrastraba el margen inferior de los campos de formulario, con
lo que medía de más y quedaba desplazado hacia arriba */
:where(.x-tabpanel-child, .x-window) .x-grid-editor .x-form-item.x-form-item-default {
margin: 0;
}
:where(.x-tabpanel-child, .x-window) .x-grid-editor .x-form-text.x-form-text-default {
padding: 0 12px;
}
/* ------------------------------------------------------------------ */
/* Casillas (checkcolumn y selección por casilla) */
/* ------------------------------------------------------------------ */
/* Mismo dibujo que las casillas de formulario (form.css) en vez del sprite
PNG de crisp. La casilla es el :after del elemento; la columna a medida de
algunos módulos (x-grid-checkcolumnT) es un img con el sprite de fondo */
:where(.x-tabpanel-child, .x-window) :is(.x-grid-checkcolumn, .x-column-header-checkbox .x-column-header-checkbox):after,
:where(.x-tabpanel-child, .x-window) img.x-grid-checkcolumnT {
box-sizing: border-box;
width: 16px;
height: 16px;
border: 1px solid var(--color-check-border);
border-radius: 4px;
background: var(--color-surface) none;
vertical-align: middle;
transition: background-color .12s ease, border-color .12s ease;
}
:where(.x-tabpanel-child, .x-window) :is(.x-grid-checkcolumn-checked, .x-grid-item-selected .x-selmodel-column .x-grid-checkcolumn, .x-grid-hd-checker-on .x-column-header-checkbox):after,
:where(.x-tabpanel-child, .x-window) img.x-grid-checkcolumnT.x-grid-checkcolumn-checked {
border-color: var(--color-primary);
background: var(--color-primary) url("data:image/svg+xml;utf8,") center / 12px 12px no-repeat;
}
/* Crisp dibuja un contorno azul al pinchar la casilla: sólo con teclado */
:where(.x-tabpanel-child, .x-window) .x-grid-checkcolumn-cell-inner :focus:not(:focus-visible) {
outline: 0;
}
/* ---- core/paging.css ---- */
/* Barra de paginación de los grids. No tiene clase propia: se reconoce por
el campo del número de página. Botones sin relleno, sólo el icono, y el
campo de página pequeño y cuadrado en vez de la pastilla de los formularios */
/* En el panel la paginación va dentro de otra toolbar contenedora (defines.js):
el selector alcanza a las dos, para que ninguna pinte borde. El fondo es
blanco opaco: la barra va docked por encima del cuerpo del grid y si fuera
transparente se vería a través la fila que quede debajo */
:where(.x-tabpanel-child, .x-window) .x-toolbar.x-toolbar-default:has(.x-tbar-page-number) {
border: 0 !important;
background-color: var(--color-surface);
}
/* La contenedora va pegada, sin relleno: el aire lo pone la de paginación */
:where(.x-tabpanel-child, .x-window) .x-toolbar.x-toolbar-default:has(.x-toolbar .x-tbar-page-number) {
padding: 0;
}
:where(.x-tabpanel-child, .x-window) .x-toolbar.x-toolbar-default:has(.x-tbar-page-number):not(:has(.x-toolbar .x-tbar-page-number)) {
padding: 6px 12px;
}
/* Línea de separación con las filas, de lado a lado como la de la cabecera
de columnas. Va en la propia toolbar de paginación, la que se ve: la
contenedora queda pegada a ella y sin relleno, así la línea toca el grid */
:where(.x-tabpanel-child, .x-window) .x-toolbar.x-toolbar-default:has(.x-tbar-page-number):not(:has(.x-toolbar .x-tbar-page-number)) {
border-top: 1px solid var(--color-border) !important;
}
/* Botones: transparentes, con el icono en gris y fondo suave al pasar */
:where(.x-tabpanel-child, .x-window) .x-toolbar:has(.x-tbar-page-number) .x-btn.x-btn.x-unselectable {
padding: 0;
width: 30px;
height: 30px;
border: 0;
border-radius: 6px;
background-color: transparent;
box-shadow: none;
}
:where(.x-tabpanel-child, .x-window) .x-toolbar:has(.x-tbar-page-number) .x-btn.x-btn.x-unselectable.x-btn-over {
background-color: var(--color-primary-soft);
}
:where(.x-tabpanel-child, .x-window) .x-toolbar:has(.x-tbar-page-number) .x-btn.x-btn.x-unselectable.x-btn-pressed {
background-color: color-mix(in srgb, var(--color-primary-soft) 80%, var(--color-primary));
}
:where(.x-tabpanel-child, .x-window) .x-toolbar:has(.x-tbar-page-number) .x-btn.x-btn.x-unselectable.x-btn-disabled {
background-color: transparent;
opacity: .35;
}
/* Iconos con Material Symbols en vez de los PNG del tema */
:where(.x-tabpanel-child, .x-window) .x-toolbar:has(.x-tbar-page-number) .x-btn.x-unselectable .x-btn-icon-el {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin: 0;
background-image: none !important;
color: var(--color-text-muted);
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 18px;
font-feature-settings: 'liga';
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
}
:where(.x-tabpanel-child, .x-window) .x-toolbar:has(.x-tbar-page-number) .x-btn.x-unselectable.x-btn-over .x-btn-icon-el {
color: var(--color-primary);
}
:where(.x-tabpanel-child, .x-window) .x-btn-icon-el.x-tbar-page-first:before { content: "first_page"; }
:where(.x-tabpanel-child, .x-window) .x-btn-icon-el.x-tbar-page-prev:before { content: "chevron_left"; }
:where(.x-tabpanel-child, .x-window) .x-btn-icon-el.x-tbar-page-next:before { content: "chevron_right"; }
:where(.x-tabpanel-child, .x-window) .x-btn-icon-el.x-tbar-page-last:before { content: "last_page"; }
:where(.x-tabpanel-child, .x-window) .x-btn-icon-el.x-tbar-loading:before { content: "refresh"; }
/* Campo del número de página: pequeño, cuadrado y con el número centrado */
:where(.x-tabpanel-child, .x-window) .x-tbar-page-number.x-form-item {
width: 48px;
margin: 0 4px;
}
:where(.x-tabpanel-child, .x-window) .x-tbar-page-number .x-form-trigger-wrap.x-form-trigger-wrap-default {
border-radius: 6px;
}
:where(.x-tabpanel-child, .x-window) .x-tbar-page-number .x-form-text.x-form-text-default {
min-height: 30px;
padding: 0 6px;
line-height: 30px;
font-size: 13px;
text-align: center;
}
/* Filas por página (panel/components/searchbar.js): desplegable compacto
a la altura de los botones, con la etiqueta como los textos de la barra */
:where(.x-tabpanel-child, .x-window) .ui-paging-limit.x-form-item {
margin: 0 4px;
}
:where(.x-tabpanel-child, .x-window) .ui-paging-limit.x-form-item .x-form-item-label.x-form-item-label-default {
padding: 0 6px 0 0;
color: var(--color-text-muted);
font: 400 12px/30px 'Roboto', helvetica, arial, sans-serif;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
}
:where(.x-tabpanel-child, .x-window) .ui-paging-limit.x-form-item .x-form-item-label-inner.x-form-item-label-inner-default {
padding: 0;
color: var(--color-text-muted);
font-size: 12px;
font-weight: 400;
white-space: nowrap;
}
:where(.x-tabpanel-child, .x-window) .ui-paging-limit .x-form-trigger-wrap.x-form-trigger-wrap-default {
border-radius: 6px;
}
:where(.x-tabpanel-child, .x-window) .ui-paging-limit .x-form-text.x-form-text-default {
min-height: 30px;
padding: 0 0 0 10px;
line-height: 30px;
font-size: 13px;
}
:where(.x-tabpanel-child, .x-window) .ui-paging-limit .x-form-trigger.x-form-trigger-default {
width: 24px;
line-height: 30px;
}
/* Textos ("Página", "de 15", "Mostrando ...") y separadores */
:where(.x-tabpanel-child, .x-window) .x-toolbar:has(.x-tbar-page-number) .x-toolbar-text.x-toolbar-text-default {
color: var(--color-text-muted);
font-family: 'Roboto', helvetica, arial, sans-serif;
font-size: 12px;
}
:where(.x-tabpanel-child, .x-window) .x-toolbar:has(.x-tbar-page-number) .x-toolbar-separator {
margin: 0 6px;
border-left-color: var(--color-border);
border-right-color: transparent;
}
/* ---- core/components/chart.css ---- */
/* Leyenda de los gráficos (HTML): sin el recuadro blanco de crisp, con los
colores del tema; el lienzo lo ajusta chart.js */
.x-legend.x-legend-default,
.x-legend.x-legend-default * {
border: 0 !important;
box-shadow: none !important;
}
.x-legend.x-legend-default {
background-color: transparent;
}
/* Punto de color delante del texto (crisp lo coloca en absoluto) */
.x-legend .x-legend-item .x-legend-item-marker {
position: static;
display: inline-block;
width: 10px;
height: 10px;
margin: -2px 6px 0 0;
border-radius: 50%;
vertical-align: middle;
}
.x-legend .x-legend-inner,
.x-legend .x-legend-container {
border: 0;
background-color: transparent;
}
.x-legend .x-legend-item {
padding: 4px 10px;
border: 0;
border-radius: 12px;
background-color: transparent;
color: var(--color-text-muted);
font: 400 12px/16px 'Roboto', helvetica, arial, sans-serif;
cursor: pointer;
}
.x-legend .x-legend-item:hover {
background-color: var(--color-surface-2);
color: var(--color-text);
}
/* ---- core/components/datepicker.css ---- */
/* Calendario de los campos de fecha (Ext.picker.Date) y selector de mes:
tarjeta flotante con los colores del tema, días redondos, hoy con anillo
y el día elegido en el color de marca */
.x-datepicker.x-datepicker-default {
width: 292px !important;
padding: 12px;
border: 1px solid var(--color-border) !important;
border-radius: 14px;
background-color: var(--color-surface);
box-shadow: var(--shadow-popover);
font-family: 'Roboto', helvetica, arial, sans-serif;
}
.x-datepicker .x-datepicker-inner {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 2px;
background-color: transparent;
}
/* Cabecera: flechas y botón de mes y año */
.x-datepicker .x-datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 36px;
margin-bottom: 6px;
padding: 0;
background: transparent;
}
.x-datepicker .x-datepicker-arrow {
position: static;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0;
border-radius: 50%;
background: none;
color: var(--color-text-muted);
font-family: 'Material Symbols Outlined';
font-size: 20px;
font-feature-settings: 'liga';
line-height: 1;
opacity: 1;
cursor: pointer;
transition: background-color .12s ease, color .12s ease;
}
.x-datepicker .x-datepicker-prev:before { content: "chevron_left"; }
.x-datepicker .x-datepicker-next:before { content: "chevron_right"; }
.x-datepicker .x-datepicker-arrow:hover {
background-color: var(--color-surface-2);
color: var(--color-text);
}
.x-datepicker .x-datepicker-month {
flex: 1;
display: flex;
justify-content: center;
padding: 0;
}
.x-datepicker .x-datepicker-month .x-btn.x-btn-default-small {
padding: 6px 10px;
border: 0;
border-radius: 16px;
background: none;
background-color: transparent;
box-shadow: none;
}
.x-datepicker .x-datepicker-month .x-btn.x-btn-over,
.x-datepicker .x-datepicker-month .x-btn.x-btn-pressed {
background-color: var(--color-surface-2);
}
.x-datepicker .x-datepicker-month .x-btn-inner.x-btn-inner-default-small {
color: var(--color-text);
font-size: 14px;
font-weight: 600;
text-transform: capitalize;
}
.x-datepicker .x-datepicker-month .x-btn-arrow-el,
.x-datepicker .x-datepicker-month .x-btn-split-right:after {
display: none;
}
.x-datepicker .x-datepicker-month .x-btn-wrap.x-btn-split-right {
padding-right: 0;
}
/* Días de la semana */
.x-datepicker .x-datepicker-column-header {
height: 28px;
padding: 0;
border: 0;
background: transparent;
}
.x-datepicker .x-datepicker-column-header-inner {
color: var(--color-text-muted);
font-size: 11px;
font-weight: 600;
line-height: 28px;
text-align: center;
text-transform: uppercase;
}
/* Días */
.x-datepicker .x-datepicker-cell {
padding: 0;
border: 0;
background: transparent;
}
.x-datepicker .x-datepicker-date {
width: 34px;
height: 34px;
margin: 0 auto;
padding: 0;
border: 0;
border-radius: 50%;
background-color: transparent;
color: var(--color-text);
font-size: 13px;
line-height: 34px;
text-align: center;
cursor: pointer;
transition: background-color .12s ease, color .12s ease;
}
.x-datepicker .x-datepicker-prevday .x-datepicker-date,
.x-datepicker .x-datepicker-nextday .x-datepicker-date {
color: var(--color-text-placeholder);
}
.x-datepicker .x-datepicker-cell:hover .x-datepicker-date,
.x-datepicker .x-datepicker-cell.x-datepicker-date-over .x-datepicker-date {
background-color: var(--color-surface-2);
}
/* Hoy: anillo en el color de marca */
.x-datepicker .x-datepicker-today .x-datepicker-date {
box-shadow: inset 0 0 0 1.5px var(--color-primary);
color: var(--color-primary);
font-weight: 600;
}
/* Elegido */
.x-datepicker .x-datepicker-selected .x-datepicker-date,
.x-datepicker .x-datepicker-selected:hover .x-datepicker-date {
background-color: var(--color-primary);
box-shadow: none;
color: var(--color-primary-contrast);
font-weight: 600;
}
/* Con el teclado: el día activo con un anillo suave */
.x-datepicker .x-datepicker-focus .x-datepicker-cell.x-datepicker-focused .x-datepicker-date,
.x-datepicker .x-datepicker-cell.x-focus .x-datepicker-date {
outline: 0;
box-shadow: var(--ring-focus);
}
/* Fuera de rango */
.x-datepicker .x-datepicker-disabled .x-datepicker-date,
.x-datepicker .x-datepicker-disabled:hover .x-datepicker-date {
background-color: transparent;
color: var(--color-text-placeholder);
opacity: .5;
cursor: default;
}
.x-datepicker .x-datepicker-inner:focus,
.x-datepicker .x-datepicker-inner.x-focus {
outline: 0;
}
/* Pie: botón Hoy */
.x-datepicker .x-datepicker-footer {
display: flex;
justify-content: center;
height: auto;
margin-top: 8px;
padding: 8px 0 0 0;
border-top: 1px solid var(--color-border);
background: transparent;
}
.x-datepicker .x-datepicker-footer .x-btn.x-btn-default-small {
position: static;
padding: 6px 16px;
border: 0;
border-radius: 16px;
background-color: transparent;
box-shadow: none;
}
.x-datepicker .x-datepicker-footer .x-btn.x-btn-over {
background-color: var(--color-primary-soft);
}
.x-datepicker .x-datepicker-footer .x-btn-inner.x-btn-inner-default-small {
color: var(--color-primary);
font-size: 13px;
font-weight: 600;
}
/* Selector de mes y año */
.x-monthpicker.x-monthpicker-default {
border: 0;
border-radius: 14px;
background-color: var(--color-surface);
font-family: 'Roboto', helvetica, arial, sans-serif;
}
.x-monthpicker .x-monthpicker-months,
.x-monthpicker .x-monthpicker-years {
border: 0;
background: transparent;
}
.x-monthpicker .x-monthpicker-years {
border-left: 1px solid var(--color-border);
}
.x-monthpicker .x-monthpicker-item {
background: transparent;
}
.x-monthpicker .x-monthpicker-item-inner {
margin: 3px 6px;
border: 0;
border-radius: 14px;
color: var(--color-text);
font-size: 13px;
line-height: 26px;
text-transform: capitalize;
cursor: pointer;
}
.x-monthpicker .x-monthpicker-item-inner:hover {
background-color: var(--color-surface-2);
}
.x-monthpicker .x-monthpicker-item .x-monthpicker-selected,
.x-monthpicker .x-monthpicker-item .x-monthpicker-selected:hover {
border: 0;
background-color: var(--color-primary);
color: var(--color-primary-contrast);
font-weight: 600;
}
.x-monthpicker .x-monthpicker-yearnav {
height: 34px;
}
.x-monthpicker .x-monthpicker-yearnav-button-ct {
display: inline-flex;
justify-content: center;
width: 50%;
}
.x-monthpicker .x-monthpicker-yearnav-button {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 3px auto;
border-radius: 50%;
background: none;
color: var(--color-text-muted);
font-family: 'Material Symbols Outlined';
font-size: 18px;
font-feature-settings: 'liga';
line-height: 1;
cursor: pointer;
}
.x-monthpicker .x-monthpicker-yearnav-prev:before { content: "chevron_left"; }
.x-monthpicker .x-monthpicker-yearnav-next:before { content: "chevron_right"; }
.x-monthpicker .x-monthpicker-yearnav-button:hover {
background-color: var(--color-surface-2);
color: var(--color-text);
}
.x-monthpicker .x-monthpicker-buttons {
padding: 8px 0;
border-top: 1px solid var(--color-border);
background: transparent;
text-align: center;
}
.x-monthpicker .x-monthpicker-buttons .x-btn.x-btn-default-small {
margin: 0 4px;
padding: 6px 14px;
border: 0;
border-radius: 16px;
background-color: var(--color-primary);
box-shadow: none;
}
.x-monthpicker .x-monthpicker-buttons .x-btn.x-btn-default-small .x-btn-inner {
color: var(--color-primary-contrast);
font-weight: 600;
}
.x-monthpicker .x-monthpicker-buttons .x-btn.x-btn-default-small.x-btn-over {
background-color: var(--color-primary-hover);
}
/* Cancelar: sin fondo */
.x-monthpicker .x-monthpicker-buttons .x-btn.x-btn-default-small + .x-btn.x-btn-default-small {
background-color: transparent;
}
.x-monthpicker .x-monthpicker-buttons .x-btn.x-btn-default-small + .x-btn.x-btn-default-small .x-btn-inner {
color: var(--color-primary);
}
.x-monthpicker .x-monthpicker-buttons .x-btn.x-btn-default-small + .x-btn.x-btn-default-small.x-btn-over {
background-color: var(--color-primary-soft);
}
/* ---- core/components/filter-bar.css ---- */
/* Barra de filtros (filter-bar.js): botones y filtros aplicados como
etiquetas, que bajan de línea cuando no caben */
.ui-filterbar {
background-color: transparent;
}
/* Casillas sin etiqueta encima en la ventana de filtros: dentro de una
pastilla como la de los campos, para que sigan el mismo ritmo */
.ui-filterbar-window .x-form-item.x-form-type-checkbox.x-form-item-no-label {
padding-top: 9px;
}
.ui-filterbar-window .x-form-item.x-form-type-checkbox.x-form-item-no-label > .x-form-item-body {
display: flex;
align-items: center;
box-sizing: border-box;
min-height: 38px;
padding: 0 16px;
border-radius: 20px;
background-color: var(--color-field-bg);
}
/* Botón secundario: superficie con borde y texto azul */
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.ui-btn-secondary,
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.ui-btn-secondary.x-btn-disabled {
border-color: var(--color-border);
background-color: var(--color-surface);
}
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.ui-btn-secondary.x-btn-over {
border-color: var(--color-primary);
background-color: var(--color-primary-soft);
}
:where(.x-tabpanel-child, .x-window) .x-btn.x-btn.x-unselectable.ui-btn-secondary.x-btn-pressed {
border-color: var(--color-primary-active);
background-color: var(--color-primary-soft);
}
:where(.x-tabpanel-child, .x-window) .x-btn.x-unselectable.ui-btn-secondary .x-btn-inner,
:where(.x-tabpanel-child, .x-window) .x-btn.x-unselectable.ui-btn-secondary .x-btn-icon-el {
color: var(--color-primary);
}
/* Número de filtros activos en el botón Filtrar: sólo en pantallas
estrechas, donde no se muestran las etiquetas */
.ui-filterbar-count {
display: none;
min-width: 18px;
height: 18px;
margin-left: 6px;
padding: 0 5px;
box-sizing: border-box;
border-radius: 9px;
background-color: var(--color-primary-contrast);
color: var(--color-primary);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
margin-top: -1px;
line-height: 1;
vertical-align: top;
}
@media (max-width: 899px) {
.ui-filterbar-count {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ui-filterbar .ui-filter-tag {
display: none;
}
}
/* Etiquetas */
.ui-filter-tag {
display: flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 6px 8px 6px 12px;
border: 1px solid var(--color-primary-soft);
border-radius: 16px;
background-color: var(--color-primary-soft);
color: var(--color-text);
font: 400 12px/16px 'Roboto', helvetica, arial, sans-serif;
white-space: nowrap;
}
.ui-filter-tag-fixed {
padding-right: 12px;
border-color: var(--color-border);
background-color: var(--color-surface);
}
.ui-filter-tag-more {
padding-right: 12px;
color: var(--color-primary);
font-weight: 600;
cursor: pointer;
transition: border-color .15s ease;
}
.ui-filter-tag-more:hover {
border-color: var(--color-primary);
}
.ui-filter-tag-label {
color: var(--color-text-muted);
font-weight: 500;
}
.ui-filter-tag-value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Con dos clases: la hoja de Material Symbols se carga después y su
.ms { display: inline-block } quitaba el centrado */
.ui-filter-tag .ui-filter-tag-close {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
color: var(--color-text-muted);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: color .15s ease, background-color .15s ease;
}
.ui-filter-tag .ui-filter-tag-close:hover {
background-color: var(--color-surface);
color: var(--color-danger);
}
/* ---- core/components/grid-mobile.css ---- */
/* Grid en pantallas estrechas y su ventana de detalle (grid-mobile.js) */
.ui-grid-mobile .x-grid-item {
cursor: pointer;
}
/* Recién abierta no recibe el clic que sigue al toque de la fila */
.ui-grid-detail.ui-grid-detail-opening {
pointer-events: none;
}
/* Filas de datos: campos del tema con la etiqueta encima. Las de sólo
lectura son el mismo campo, sin halo al pasar ni al enfocar */
.ui-grid-detail .x-form-item.x-form-item-default.ui-grid-detail-row {
margin-bottom: 12px;
}
.ui-grid-detail .ui-grid-detail-edit .x-form-item.x-form-item-default {
margin-bottom: 0;
}
.ui-grid-detail .ui-grid-detail-read .x-form-trigger-wrap.x-form-trigger-wrap-default:hover,
.ui-grid-detail .ui-grid-detail-read .x-form-trigger-wrap.x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
border-color: var(--color-field-border);
background-color: var(--color-field-bg);
box-shadow: none;
}
.ui-grid-detail .ui-grid-detail-read .x-form-text.x-form-text-default {
cursor: text;
}
/* Guardar: redondo, a la altura del campo */
.x-window .x-btn.x-btn.x-unselectable.ui-grid-detail-save {
padding: 0;
border-radius: 50%;
}
/* Acciones de la fila: un botón por línea con icono y texto */
.ui-grid-detail-actions {
border-top: 1px solid var(--color-border);
background-color: var(--color-surface);
}
.x-window .x-btn.x-btn.x-unselectable.ui-grid-detail-action {
padding: 0 16px;
}
.x-window .x-btn.ui-grid-detail-action .x-btn-button {
justify-content: flex-start;
}
.x-window .x-btn.ui-grid-detail-action .x-btn-inner {
font-size: 13px;
}
.x-window .x-btn.ui-grid-detail-action .x-btn-icon-el {
width: 18px;
font-size: 14px;
text-align: center;
}
.x-window .x-btn.ui-grid-detail-action .x-btn-icon-el.ms {
width: 20px;
height: 20px;
font-size: 20px;
}
.x-window .x-btn.x-btn.x-unselectable.ui-btn-danger,
.x-window .x-btn.x-btn.x-unselectable.ui-btn-danger.x-btn-disabled {
border-color: var(--color-danger);
background-color: var(--color-danger);
}
.x-window .x-btn.x-btn.x-unselectable.ui-btn-warning,
.x-window .x-btn.x-btn.x-unselectable.ui-btn-warning.x-btn-disabled {
border-color: var(--color-warning);
background-color: var(--color-warning);
}
.x-window .x-btn.x-btn.x-unselectable.ui-btn-success,
.x-window .x-btn.x-btn.x-unselectable.ui-btn-success.x-btn-disabled {
border-color: var(--color-success);
background-color: var(--color-success);
}
.x-window .x-btn.x-btn.x-unselectable:is(.ui-btn-danger, .ui-btn-warning, .ui-btn-success).x-btn-over {
filter: brightness(.9);
}
/* Las clases de color del icono (action-icons.css) no deben teñirlo dentro
del botón: va en el color del texto */
.x-window .x-btn.ui-grid-detail-action .x-btn-icon-el.ui-icon-danger,
.x-window .x-btn.ui-grid-detail-action .x-btn-icon-el.ui-icon-warning,
.x-window .x-btn.ui-grid-detail-action .x-btn-icon-el.ui-icon-success {
color: var(--color-primary-contrast);
}
/* ---- core/components/messagebox.css ---- */
/* Iconos de los cuadros de mensaje (ext-*-window de defaults.js) con
Material Symbols en vez de los PNG. Con !important porque style.css fija
el tamaño y el fondo también con !important */
.x-window.x-message-box .x-message-box-icon {
display: flex !important;
align-items: center;
justify-content: center;
width: 44px !important;
height: 44px !important;
margin: 0 14px 0 4px;
background: none !important;
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
font-size: 42px;
font-feature-settings: 'liga';
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
overflow: hidden;
}
.x-window.x-message-box .ext-info-window { color: var(--color-primary); }
.x-window.x-message-box .ext-help-window { color: var(--color-primary); }
.x-window.x-message-box .ext-success-window { color: var(--color-success); }
.x-window.x-message-box .ext-alert-window { color: var(--color-warning); }
.x-window.x-message-box .ext-failure-window { color: var(--color-danger); }
.x-window.x-message-box .ext-info-window:before { content: "info"; }
.x-window.x-message-box .ext-help-window:before { content: "help"; }
.x-window.x-message-box .ext-success-window:before { content: "check_circle"; }
.x-window.x-message-box .ext-alert-window:before { content: "warning"; }
.x-window.x-message-box .ext-failure-window:before { content: "cancel"; }
/* Iconos nativos de Ext.Msg (confirm, alert...) */
.x-window.x-message-box .x-message-box-question { color: var(--color-primary); }
.x-window.x-message-box .x-message-box-info { color: var(--color-primary); }
.x-window.x-message-box .x-message-box-warning { color: var(--color-warning); }
.x-window.x-message-box .x-message-box-error { color: var(--color-danger); }
.x-window.x-message-box .x-message-box-question:before { content: "help"; }
.x-window.x-message-box .x-message-box-info:before { content: "info"; }
.x-window.x-message-box .x-message-box-warning:before { content: "warning"; }
.x-window.x-message-box .x-message-box-error:before { content: "cancel"; }
/* Esperas: una rueda girando */
.x-window.x-message-box .ext-wait-load,
.x-window.x-message-box .ext-wait-new,
.x-window.x-message-box .ext-wait-edit,
.x-window.x-message-box .ext-wait-delete {
color: var(--color-primary);
}
.x-window.x-message-box .ext-wait-load:before,
.x-window.x-message-box .ext-wait-new:before,
.x-window.x-message-box .ext-wait-edit:before,
.x-window.x-message-box .ext-wait-delete:before {
content: "progress_activity";
animation: ui-spin 1s linear infinite;
}
@keyframes ui-spin {
to { transform: rotate(360deg); }
}
/* Texto del mensaje */
.x-window.x-message-box .x-message-box-text {
color: var(--color-text);
font-size: 13px;
line-height: 1.5;
}
/* ---- core/components/time-range.css ---- */
/* Franja horaria (time-range.js): barra de 00:00 a 23:59 dentro del campo
"desde", que deja de verse como campo */
.ui-tr-field .x-form-trigger-wrap {
display: none !important;
}
.ui-tr {
padding: 2px 2px 0 2px;
user-select: none;
}
.ui-tr-head {
display: flex;
align-items: center;
gap: 6px;
min-height: 22px;
margin-bottom: 6px;
}
.ui-tr-value {
color: var(--color-text);
font: 500 14px/20px 'Roboto', helvetica, arial, sans-serif;
font-variant-numeric: tabular-nums;
}
.ui-tr-is-empty .ui-tr-value {
color: var(--color-text-placeholder);
font-weight: 400;
}
.ui-tr-head .ui-tr-clear {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
color: var(--color-text-muted);
font-size: 15px;
cursor: pointer;
transition: color .12s ease, background-color .12s ease;
}
.ui-tr-head .ui-tr-clear:hover {
background-color: var(--color-surface-2);
color: var(--color-danger);
}
.ui-tr-is-empty .ui-tr-clear {
visibility: hidden;
}
/* Barra: fondo de campo con una marca por hora y otra más marcada cada 6 */
.ui-tr-track {
position: relative;
height: 36px;
border-radius: 18px;
background-color: var(--color-field-bg);
background-image:
repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 1px), var(--color-border) calc(25% - 1px), var(--color-border) 25%),
repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 24 - 1px), color-mix(in srgb, var(--color-border) 55%, transparent) calc(100% / 24 - 1px), color-mix(in srgb, var(--color-border) 55%, transparent) calc(100% / 24));
background-size: 100% 40%;
background-position: 0 50%;
background-repeat: no-repeat;
cursor: pointer;
touch-action: none;
}
.ui-tr-empty {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
color: var(--color-text-placeholder);
font: 400 12px/1 'Roboto', helvetica, arial, sans-serif;
pointer-events: none;
}
.ui-tr-is-empty .ui-tr-empty {
display: flex;
}
.ui-tr-is-empty .ui-tr-band {
display: none;
}
/* Franja */
.ui-tr-band {
position: absolute;
top: 4px;
bottom: 4px;
min-width: 12px;
border-radius: 14px;
background-color: var(--color-primary);
box-shadow: 0 1px 3px color-mix(in srgb, var(--color-primary) 40%, transparent);
cursor: grab;
transition: left .08s ease, width .08s ease;
}
.ui-tr-dragging .ui-tr-band {
cursor: grabbing;
transition: none;
}
.ui-tr-handle {
position: absolute;
top: 0;
bottom: 0;
width: 14px;
cursor: ew-resize;
}
.ui-tr-handle:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 12px;
margin: -6px 0 0 -1.5px;
border-radius: 2px;
background-color: color-mix(in srgb, var(--color-primary-contrast) 80%, transparent);
}
.ui-tr-start {
left: 0;
}
.ui-tr-end {
right: 0;
}
/* Escala bajo la barra */
.ui-tr-scale {
display: flex;
justify-content: space-between;
margin-top: 4px;
padding: 0 2px;
color: var(--color-text-muted);
font: 400 10px/14px 'Roboto', helvetica, arial, sans-serif;
font-variant-numeric: tabular-nums;
}
/* Deshabilitada (casilla "Deshabilitar horario" del módulo) */
.ui-tr-disabled {
opacity: .45;
}
.ui-tr-disabled .ui-tr-track,
.ui-tr-disabled .ui-tr-band,
.ui-tr-disabled .ui-tr-handle,
.ui-tr-disabled .ui-tr-clear {
cursor: default;
pointer-events: none;
}