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);
}
/* Iframe del área de texto: el primer paint del navegador es blanco antes
 * de que TinyMCE cargue content_style + nuestro JS aplique la clase fv-dark
 * en el body. Forzamos el fondo del elemento <iframe> desde la página padre
 * para que el preview oscuro sea instantáneo (elimina el parpadeo
 * blanco→oscuro al abrir un diálogo con descripción enriquecida). */
[theme~="dark"] .tox-edit-area > iframe {
    background-color: #1f1f1f !important;
}
/* 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);
}

/* Vista pública de registro/bienvenida (/register, /welcome): fondo claro al
 * estilo del sitio /web —blanco con un degradado suave verde/cian de marca
 * (brand-soft #DDFCF0 -> blanco -> accent-cyan-soft #DAF2F8)—, NO el tema
 * oscuro de admin. Se activa con la clase `register-page` que RegisterLayout
 * pone en <html> solo mientras la vista está montada. El verde de marca
 * (--lumo-primary-color #007338) ya coincide con /web. */
html.register-page,
html.register-page body,
html.register-page vaadin-app-layout {
    background: linear-gradient(to bottom right, #DDFCF0 0%, #ffffff 50%, #DAF2F8 100%);
    background-attachment: fixed;
}

/* :not([disabled]) — el foco se queda en el botón que acabas de pulsar, así que si ese mismo botón se
 * deshabilita (el "Siguiente" de la última pantalla, el "Atrás" de la primera) el !important del foco
 * pisaba el aspecto de apagado y seguía pareciendo pulsable. */
vaadin-button:not([disabled]):focus,
vaadin-button:not([disabled]):focus-visible {
    background-color: #35B0D8 !important;
    color: #ffffff !important;
}

/* En oscuro el cyan chilla, pero la capa de contraste gris que lo sustituía era
 * peor: un botón ENFOCADO se veía igual que uno DESHABILITADO, y quien va con el
 * teclado o acaba de pulsar no sabía si el botón respondía. Se usa el verde claro
 * de marca —el mismo que ya sirve de texto primario en oscuro— con letra oscura:
 * se lee como activo, que es lo que el foco tiene que decir. */
[theme~="dark"] vaadin-button:not([disabled]):focus,
[theme~="dark"] vaadin-button:not([disabled]):focus-visible {
    background-color: var(--lumo-primary-text-color) !important;
    color: #10231A !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, .lock-view {
    background-image: url('./images/background-hi.jpg');
    background-size: auto;
    background-position: top left;
    background-repeat: no-repeat;
    min-height: 100vh;
    width: 100%;
}

/* El velo de bloqueo comparte la foto del login, pero vive dentro de un diálogo: se recorta a la
   ventana en vez de estirarse a 100vh, que es lo que le metía scroll. */
.lock-view {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* Y su tarjeta es la superficie normal de la aplicación, no el gris del formulario de login: sobre
   ese gris no se leían las letras. */
.fv-lock-card {
    background-color: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-l);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    padding: var(--lumo-space-l);
}

/* El velo ocupa la ventana ENTERA. Un diálogo normal deja su margen, su radio y su sombra alrededor,
   y por ahí se seguía viendo la pantalla que se quiere tapar; aquí se anulan los topes del overlay
   y se pega a los cuatro bordes. El !important hace falta porque setSizeFull escribe estilos inline
   sobre el propio overlay. */
vaadin-dialog-overlay[theme~="fv-lock"] {
    inset: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    /* El overlay reserva un hueco abajo para el teclado del móvil, y el host centra su contenido
       dejando aire arriba y abajo: por esos dos bordes seguía asomando la pantalla de detrás. */
    --vaadin-overlay-viewport-bottom: 0px !important;
}

vaadin-dialog-overlay[theme~="fv-lock"]::part(overlay) {
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

vaadin-dialog-overlay[theme~="fv-lock"]::part(content) {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
}

.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, .lock-view {
        background-image: url('./images/background-med.jpg');
    }
}

@media (max-width: 1024px) {
    .login-view, .lock-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;
}

/* Menú lateral agrupado por áreas (MainLayout.buildDrawer): un vaadin-side-nav por grupo,
 * apilados en el drawer. Lo que Lumo da por defecto no marca bastante la jerarquía —el título
 * del grupo pesa casi lo mismo que sus entradas y los grupos se tocan entre sí—, así que aquí
 * se separan, se destaca la cabecera con fondo y se sangran las entradas.
 *
 * El fondo va en ::part(label), que es la cabecera COMPLETA (incluye el icono de plegar); el
 * <span slot="label"> del light DOM que crea SideNav.setLabel solo envuelve el texto, y un fondo
 * ahí dejaría fuera el icono. El verde es --lumo-primary-color, el verde de marca de los botones
 * primarios, en sólido: la cabecera es una banda y no un matiz, y se lee de un vistazo dónde empieza
 * cada área. Sobre ese verde el texto va en --lumo-primary-contrast-color, el mismo blanco que usan
 * los botones; ambas variables están redefinidas también en [theme~="dark"], así que la cabecera no
 * cambia de color al pasar a oscuro. Un color por área se probó y se descartó: aun con tonos suaves,
 * seis cabeceras de colores distintos convierten la columna en un mosaico.
 *
 * El color, el tamaño y la negrita van sobre el span: Lumo apaga ese texto con una regla
 * ::slotted() propia, y solo se le gana desde fuera (el documento pisa al ::slotted del shadow).
 * El tamaño sube a --lumo-font-size-l porque el de Lumo (--lumo-font-size-s) deja el título del
 * grupo MÁS PEQUEÑO que sus propias entradas (--lumo-font-size-m), justo al revés de la jerarquía.
 *
 * El icono de plegar necesita su propia regla: Lumo lo pinta con --lumo-contrast-60pct, un gris
 * pensado para fondo claro que sobre el verde sólido casi no se ve.
 *
 * La sangría va en el host de cada entrada y no en su ::part, para no depender de más nombres de
 * partes de los necesarios (cambian entre versiones de Vaadin). */
/* Mismo ancho para todos los grupos, con un margen a los lados: sin el estirado, cada grupo se
 * ajusta a su propio contenido y las cabeceras salen de anchos distintos —"Comercial" más corta
 * que "Facturación"—, que con fondo se nota como si fueran cosas diferentes. Se estira con
 * align-self y no con width:100% precisamente para que quepan los márgenes laterales. */
vaadin-app-layout [slot='drawer'] vaadin-side-nav {
    display: block;
    align-self: stretch;
    box-sizing: border-box;
    margin-inline: var(--lumo-space-s);
    margin-bottom: var(--lumo-space-l);
}

/* Aire por encima del primero: pegado al borde del drawer, el fondo de la cabecera parece un
 * trozo de la barra superior en vez del título de un grupo. */
vaadin-app-layout [slot='drawer'] vaadin-side-nav:first-of-type {
    margin-top: var(--lumo-space-m);
}

vaadin-app-layout [slot='drawer'] vaadin-side-nav:last-of-type {
    margin-bottom: 0;
}

/* La altura de la banda sale del alto del texto más sus márgenes (~1,9rem), justo lo mismo que mide
 * una entrada del menú: la cabecera no se distingue de lo que agrupa. El padding vertical la sube a
 * ~2,3rem, lo justo para que se lea como banda de sección sin comerse sitio de la columna. */
vaadin-app-layout [slot='drawer'] vaadin-side-nav::part(label) {
    background-color: var(--lumo-primary-color);
    padding-block: var(--lumo-space-xs);
}

vaadin-app-layout [slot='drawer'] vaadin-side-nav::part(toggle-button) {
    color: var(--lumo-primary-contrast-color);
}

vaadin-app-layout [slot='drawer'] vaadin-side-nav > [slot='label'] {
    color: var(--lumo-primary-contrast-color);
    font-weight: 700;
    font-size: var(--lumo-font-size-l);
}

vaadin-app-layout [slot='drawer'] vaadin-side-nav > vaadin-side-nav-item {
    padding-inline-start: var(--lumo-space-s);
}


/* AGRUPACIÓN por tema en la lista de Parámetros. Aquí NO vale lo de Personal —allí son fichas y una línea
   separadora se ve; esto es una tabla de 137 filas seguidas y una raya más se pierde entre las de la
   rejilla—. Así que la marca es el COLOR DEL TEXTO, alternando de grupo en grupo.
   Convive con las rayas de fila del tema: aquéllas pintan el fondo y ésta el texto, así que no se pisan.
   El color es un AZUL PIZARRA apagado y NO el verde de marca a propósito: el verde es el del texto
   seleccionado y el de los botones, y usarlo aquí hacía que media tabla pareciera pulsable. Lo que se
   pide de este color es que se note que cambió el grupo, no que llame la atención.
   La vista pone la PARTE `grupo-alterno` en las filas de uno de cada dos grupos (ver ParametersConfigView:
   el criterio es el salto de display_order, no la centena).
   Detrás de `::part()` NO puede ir un descendiente: el color se pone en la celda y baja solo al
   `vaadin-grid-cell-content`, que se le enchufa por slot y hereda por el árbol aplanado. Escribirlo como
   `::part(x) vaadin-grid-cell-content` es no pintar NADA, en silencio — aquí había una regla así, la de
   `group-start`, y se retiró el 31-ago-2026 sin que nadie hubiera notado que no hacía nada. */
html {
    --fv-grupo-alterno-color: #4a6b82;
}

/* En oscuro el mismo azul pizarra se apagaría contra el fondo: sube de luminosidad lo justo para leerse
   sin pasar a ser un color vivo. El interruptor del tema es [theme~="dark"] en <html>, igual que arriba. */
[theme~="dark"] {
    --fv-grupo-alterno-color: #9ab4c6;
}

vaadin-grid::part(grupo-alterno) {
    color: var(--fv-grupo-alterno-color);
}