html {
    --lumo-primary-color: #007338;
    --lumo-primary-color-50pct: rgba(0, 115, 56, 0.5);
    --lumo-primary-color-10pct: rgba(0, 115, 56, 0.1);
    --lumo-primary-text-color: #007338;
    --lumo-primary-contrast-color: #ffffff;

    --lumo-error-color: #660000;
    --lumo-error-color-50pct: rgba(102, 0, 0, 0.5);
    --lumo-error-color-10pct: rgba(102, 0, 0, 0.1);
    --lumo-error-text-color: #660000;
    --lumo-error-contrast-color: #ffffff;
}

/* TinyMCE: unificar el fondo de los iconos del toolbar (light + dark).
 * Por defecto los botones activados (bold/italic con cursor dentro) y los
 * focus traían acentos primarios/cyan; aquí los pasamos a un gris tenue. */
.tox button.tox-tbtn--enabled,
.tox button.tox-tbtn--enabled:hover,
.tox button.tox-tbtn:focus,
.tox button.tox-tbtn:focus-visible {
    background: var(--lumo-contrast-20pct) !important;
}
.tox button.tox-tbtn:hover {
    background: var(--lumo-contrast-10pct) !important;
}
.tox .tox-tbtn--enabled .tox-icon > svg,
.tox .tox-tbtn--enabled:hover .tox-icon > svg {
    fill: var(--lumo-body-text-color) !important;
}
/* Botones con chevron / dropdown (numlist, bullist, forecolor, backcolor,
 * align, ...). Por defecto la oxide les pone un acento; lo unificamos al
 * mismo gris tenue del resto. */
.tox .tox-split-button,
.tox .tox-tbtn--select,
.tox .tox-tbtn--bespoke {
    background: transparent !important;
}
.tox .tox-split-button:hover,
.tox .tox-tbtn--select:hover,
.tox .tox-tbtn--bespoke:hover {
    background: var(--lumo-contrast-10pct) !important;
    box-shadow: none !important;
}
.tox .tox-split-button:focus,
.tox .tox-split-button:focus-visible,
.tox .tox-tbtn--select:focus,
.tox .tox-tbtn--bespoke:focus {
    background: var(--lumo-contrast-20pct) !important;
}
.tox .tox-split-button__chevron,
.tox .tox-split-button__chevron:hover {
    background: transparent !important;
}
/* Hijos del split-button (la "mitad" del icono y la "mitad" del chevron):
 * algunos llevan su propio fondo claro. Los igualamos a transparente para
 * que solo se vea el hover/focus del contenedor. */
.tox .tox-split-button > .tox-tbtn,
.tox .tox-split-button > .tox-tbtn:hover,
.tox .tox-split-button > .tox-tbtn:focus,
.tox .tox-split-button > .tox-tbtn:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
}
.tox .tox-split-button:hover > .tox-tbtn {
    background: transparent !important;
}

/* TinyMCE en oscuro: la toolbar/menubar/statusbar viven en el LIGHT DOM
 * (no en iframe). Aplicamos overrides bajo [theme~="dark"] para que sigan
 * el tema. El área de contenido se invierte desde RichDescriptionEditor
 * vía content_style + clase fv-dark en el body del iframe. */
[theme~="dark"] .tox.tox-tinymce {
    border-color: var(--lumo-contrast-20pct);
}
/* Separador entre toolbar y área de texto: en oscuro la sombra Lumo apenas
 * se nota; lo cambiamos por una línea del mismo color que el borde del
 * editor. */
[theme~="dark"] .tox .tox-editor-container .tox-editor-header:not(.tox-tinymce-inline) {
    box-shadow: none;
    border-bottom: 1px solid var(--lumo-contrast-20pct);
}
[theme~="dark"] .tox.tox-tinymce,
[theme~="dark"] .tox .tox-editor-header > .tox-menubar,
[theme~="dark"] .tox .tox-editor-container .tox-editor-header .tox-toolbar-overlord > .tox-toolbar__primary,
[theme~="dark"] .tox .tox-statusbar {
    background-color: #1f1f1f;
}
[theme~="dark"] .tox .tox-statusbar {
    border-top-color: var(--lumo-contrast-20pct);
    color: var(--lumo-secondary-text-color);
}
[theme~="dark"] .tox .tox-tbtn,
[theme~="dark"] .tox button.tox-mbtn,
[theme~="dark"] .tox button.tox-tbtn.tox-tbtn--select.tox-tbtn--bespoke {
    color: var(--lumo-body-text-color);
}
[theme~="dark"] .tox .tox-tbtn .tox-icon > svg {
    fill: var(--lumo-body-text-color);
}
[theme~="dark"] .tox button.tox-tbtn:hover {
    background: var(--lumo-contrast-10pct);
}
/* Dropdowns/menus que cuelgan del toolbar */
[theme~="dark"] .tox-menu.tox-collection,
[theme~="dark"] .tox-tinymce-aux .tox-menu {
    background-color: var(--lumo-base-color);
    color: var(--lumo-body-text-color);
}
[theme~="dark"] .tox-collection__item {
    color: var(--lumo-body-text-color);
}
[theme~="dark"] .tox-collection__item:hover,
[theme~="dark"] .tox-collection__item--active {
    background-color: var(--lumo-contrast-10pct) !important;
}

/* Reduce a 1/4 la separación vertical entre componentes en VerticalLayout
 * (cualquier variant de spacing) y entre filas de FormLayout. */
vaadin-vertical-layout[theme~="spacing-xs"] { gap: calc(var(--lumo-space-xs) / 4); }
vaadin-vertical-layout[theme~="spacing-s"]  { gap: calc(var(--lumo-space-s) / 4); }
vaadin-vertical-layout[theme~="spacing"]    { gap: calc(var(--lumo-space-m) / 4); }
vaadin-vertical-layout[theme~="spacing-l"]  { gap: calc(var(--lumo-space-l) / 4); }
vaadin-vertical-layout[theme~="spacing-xl"] { gap: calc(var(--lumo-space-xl) / 4); }

vaadin-form-layout {
    --vaadin-form-layout-row-spacing: calc(var(--lumo-space-m) / 4);
}

/* Reduce a la mitad la separación horizontal entre componentes en
 * HorizontalLayout. */
vaadin-horizontal-layout[theme~="spacing-xs"] { gap: calc(var(--lumo-space-xs) / 2); }
vaadin-horizontal-layout[theme~="spacing-s"]  { gap: calc(var(--lumo-space-s) / 2); }
vaadin-horizontal-layout[theme~="spacing"]    { gap: calc(var(--lumo-space-m) / 2); }
vaadin-horizontal-layout[theme~="spacing-l"]  { gap: calc(var(--lumo-space-l) / 2); }
vaadin-horizontal-layout[theme~="spacing-xl"] { gap: calc(var(--lumo-space-xl) / 2); }

/* Dark theme: replace Lumo's bluish hue (214) with a neutral gray so the UI
 * looks like a true dark mode instead of "dark blue". We lower saturation to
 * 0% on the base/tint/shade layers and on the contrast/text variables that
 * Vaadin Lumo derives from the same hue. */
/* Modo compacto: reduce variables Lumo de tamaño/fuente/espacio para que la
 * interfaz quepa mejor en pantallas con escalado del SO (Windows 125%, etc).
 * Se activa con el botón "Compacto" del navbar y se guarda en localStorage. */
[theme~="compact"] {
    --lumo-size-xs: 1.25rem;
    --lumo-size-s: 1.625rem;
    --lumo-size-m: 1.875rem;
    --lumo-size-l: 2.25rem;
    --lumo-size-xl: 2.75rem;

    --lumo-font-size-xxs: 0.6875rem;
    --lumo-font-size-xs: 0.75rem;
    --lumo-font-size-s: 0.8125rem;
    --lumo-font-size-m: 0.875rem;
    --lumo-font-size-l: 1rem;
    --lumo-font-size-xl: 1.25rem;
    --lumo-font-size-xxl: 1.5rem;
    --lumo-font-size-xxxl: 2rem;

    --lumo-line-height-xs: 1.1;
    --lumo-line-height-s: 1.25;
    --lumo-line-height-m: 1.4;

    --lumo-space-xs: 0.2rem;
    --lumo-space-s: 0.4rem;
    --lumo-space-m: 0.75rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-xl: 1.875rem;
}

[theme~="dark"] {
    /* Preservar el verde de marca también en oscuro (Lumo dark override
     * vuelve --lumo-primary-color a un azul brillante; lo reescribimos). */
    --lumo-primary-color: #007338;
    --lumo-primary-color-50pct: rgba(0, 115, 56, 0.5);
    --lumo-primary-color-10pct: rgba(0, 115, 56, 0.1);
    --lumo-primary-text-color: #1FB76A;
    --lumo-primary-contrast-color: #ffffff;

    --lumo-error-color: #660000;
    --lumo-error-color-50pct: rgba(102, 0, 0, 0.5);
    --lumo-error-color-10pct: rgba(102, 0, 0, 0.1);
    --lumo-error-text-color: #E27676;
    --lumo-error-contrast-color: #ffffff;

    --lumo-base-color: hsl(220, 0%, 14%);

    --lumo-tint-5pct:  hsla(220, 0%, 90%, 0.06);
    --lumo-tint-10pct: hsla(220, 0%, 90%, 0.14);
    --lumo-tint-20pct: hsla(220, 0%, 90%, 0.24);
    --lumo-tint-30pct: hsla(220, 0%, 90%, 0.34);
    --lumo-tint-40pct: hsla(220, 0%, 90%, 0.44);
    --lumo-tint-50pct: hsla(220, 0%, 90%, 0.55);
    --lumo-tint-60pct: hsla(220, 0%, 90%, 0.66);
    --lumo-tint-70pct: hsla(220, 0%, 90%, 0.77);
    --lumo-tint-80pct: hsla(220, 0%, 90%, 0.86);
    --lumo-tint-90pct: hsla(220, 0%, 90%, 0.93);
    --lumo-tint: hsl(220, 0%, 90%);

    --lumo-shade-5pct:  hsla(220, 0%, 8%, 0.30);
    --lumo-shade-10pct: hsla(220, 0%, 8%, 0.40);
    --lumo-shade-20pct: hsla(220, 0%, 8%, 0.50);
    --lumo-shade-30pct: hsla(220, 0%, 8%, 0.60);
    --lumo-shade-40pct: hsla(220, 0%, 8%, 0.70);
    --lumo-shade-50pct: hsla(220, 0%, 8%, 0.80);
    --lumo-shade-60pct: hsla(220, 0%, 8%, 0.87);
    --lumo-shade-70pct: hsla(220, 0%, 8%, 0.93);
    --lumo-shade-80pct: hsla(220, 0%, 8%, 0.96);
    --lumo-shade-90pct: hsla(220, 0%, 8%, 0.98);
    --lumo-shade: hsl(220, 0%, 8%);

    --lumo-contrast-5pct:  hsla(220, 0%, 96%, 0.06);
    --lumo-contrast-10pct: hsla(220, 0%, 96%, 0.14);
    --lumo-contrast-20pct: hsla(220, 0%, 96%, 0.24);
    --lumo-contrast-30pct: hsla(220, 0%, 96%, 0.34);
    --lumo-contrast-40pct: hsla(220, 0%, 96%, 0.44);
    --lumo-contrast-50pct: hsla(220, 0%, 96%, 0.55);
    --lumo-contrast-60pct: hsla(220, 0%, 96%, 0.66);
    --lumo-contrast-70pct: hsla(220, 0%, 96%, 0.77);
    --lumo-contrast-80pct: hsla(220, 0%, 96%, 0.86);
    --lumo-contrast-90pct: hsla(220, 0%, 96%, 0.93);
    --lumo-contrast: hsl(220, 0%, 96%);

    --lumo-header-text-color: hsl(220, 0%, 98%);
    --lumo-body-text-color: hsla(220, 0%, 98%, 0.9);
    --lumo-secondary-text-color: hsla(220, 0%, 98%, 0.7);
    --lumo-tertiary-text-color: hsla(220, 0%, 98%, 0.5);
    --lumo-disabled-text-color: hsla(220, 0%, 98%, 0.25);
}

vaadin-button:focus,
vaadin-button:focus-visible {
    background-color: #35B0D8 !important;
    color: #ffffff !important;
}

/* En oscuro el cyan chilla. Lo cambiamos por una capa de contraste discreta
 * tipo hover, dejando que el texto siga el color del botón. */
[theme~="dark"] vaadin-button:focus,
[theme~="dark"] vaadin-button:focus-visible {
    background-color: var(--lumo-contrast-20pct) !important;
    color: var(--lumo-body-text-color) !important;
}

vaadin-upload {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

vaadin-grid-cell-content {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Colores aplicables a una celda vía Grid.Column.setClassNameGenerator,
 * para columnas de importe que necesitan color sin pasar por
 * ComponentRenderer (que rompe la medida de setAutoWidth). */
vaadin-grid-cell-content.amount-paid {
    color: var(--lumo-success-text-color);
}
vaadin-grid-cell-content.amount-unpaid {
    color: var(--lumo-error-text-color);
}

/* Altura uniforme de fila para todos los grids (BaseGridView + embebidos en
 * dialogs/tabs). Las vistas con botones LUMO_ICON en celda (Sales, Purchases,
 * WorkOrders, Transactions) ponen el atributo `uniform-row-skip` y mantienen
 * el alto Lumo por defecto. Ver BaseGridView.applyUniformRowHeight.
 *
 * Aplicamos `min-height` directamente al part de la celda en lugar de subir
 * `--lumo-size-m` en el host: con la variable inflábamos también los
 * checkboxes de selección y cualquier otro componente Lumo dentro de la
 * celda, que heredaban el tamaño nuevo. */
vaadin-grid:not([uniform-row-skip])::part(cell) {
    min-height: calc(var(--lumo-size-l) + 9px);
}

/* Hide cell focus rectangle on selected/focused row in any grid. */
vaadin-grid::part(focused-cell)::before {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.login-view {
    background-image: url('./images/background-hi.jpg');
    background-size: auto;
    background-position: top left;
    background-repeat: no-repeat;
    min-height: 100vh;
    width: 100%;
}

.device-unsupported-view {
    min-height: 100vh;
    width: 100%;
    padding: var(--lumo-space-xl);
    box-sizing: border-box;
    gap: var(--lumo-space-l);
    text-align: center;
}

.device-unsupported-logo {
    width: 240px;
    max-width: 80%;
    height: auto;
}

.device-unsupported-text {
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--lumo-body-text-color);
    max-width: 36rem;
    text-align: justify;
}

@media (max-width: 1600px) {
    .login-view {
        background-image: url('./images/background-med.jpg');
    }
}

@media (max-width: 1024px) {
    .login-view {
        background-image: url('./images/background-lo.jpg');
    }
}

.indigo_loginform {
    background-color: #E6E6E6;
    border: 1px solid #007378;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    padding: 16px;
}

.login_header {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    display: block;
}