/* =========================================================================
   Capa de componentes de terceros — Chosen, Virtual Select, Telerik, jQuery
   UI, Tabulator. Cada librería trae su tema y ninguna conoce nuestra marca;
   esta hoja los re-estiliza con los tokens de ec-tokens.css.
   Reglas:
   - Se carga la ÚLTIMA en cada layout, después de las hojas de los
     fabricantes, para ganar la cascada sin !important.
   - Nunca se edita el CSS del fabricante (se perdería al actualizar): se
     pisa desde aquí.
   - Solo tokens: ningún #rrggbb en este fichero (StyleTokensGuardTests).
   ========================================================================= */

/* ---- Controles nativos de formulario ------------------------------------ */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"] {
    font-family: var(--ec-font);
    color: var(--ec-text);
    background-color: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-sm);
    box-shadow: none;
}

select:focus-visible,
textarea:focus-visible,
input:focus-visible {
    outline: none;
    border-color: var(--ec-action);
    box-shadow: var(--ec-focus-ring);
}

/* Fecha nativa de solo lectura: sin icono de calendario, que no abriría nada. */
input[type="date"][readonly]::-webkit-calendar-picker-indicator { display: none; }

/* ---- Chosen (congelado: no se añade a vistas nuevas) -------------------- */
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices {
    background: var(--ec-surface);
    background-image: none;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-sm);
    box-shadow: none;
    color: var(--ec-text);
    font-family: var(--ec-font);
}

.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices {
    border-color: var(--ec-action);
    box-shadow: var(--ec-focus-ring);
}

.chosen-container .chosen-drop {
    border: 1px solid var(--ec-border-strong);
    border-radius: 0 0 var(--ec-radius-sm) var(--ec-radius-sm);
    box-shadow: var(--ec-shadow);
}

.chosen-container .chosen-results li.highlighted {
    background: var(--ec-action);
    background-image: none;
    color: var(--ec-text-on-action);
}

.chosen-container-multi .chosen-choices li.search-choice {
    background: var(--ec-surface-highlight);
    background-image: none;
    border: 1px solid var(--ec-action-soft-border);
    border-radius: var(--ec-radius-sm);
    box-shadow: none;
    color: var(--ec-text);
}

/* ---- Virtual Select ----------------------------------------------------- */
.vscomp-wrapper {
    font-family: var(--ec-font);
    color: var(--ec-text);
}

.vscomp-toggle-button {
    background-color: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-sm);
    box-shadow: none;
}

.vscomp-wrapper.focused .vscomp-toggle-button,
.vscomp-wrapper:focus-within .vscomp-toggle-button {
    border-color: var(--ec-action);
    box-shadow: var(--ec-focus-ring);
}

.vscomp-dropbox {
    border: 1px solid var(--ec-border-strong);
    border-radius: var(--ec-radius-sm);
    box-shadow: var(--ec-shadow);
}

.vscomp-option.focused {
    background-color: var(--ec-surface-highlight);
}

.vscomp-option.selected {
    background-color: var(--ec-surface-highlight);
    color: var(--ec-action);
}

.vscomp-wrapper .vscomp-option.selected .checkbox-icon,
.vscomp-wrapper .vscomp-toggle-all-button.checked .checkbox-icon {
    background-color: var(--ec-action);
    border-color: var(--ec-action);
}

.vscomp-wrapper .vscomp-value-tag {
    background-color: var(--ec-surface-highlight);
    border: 1px solid var(--ec-action-soft-border);
    border-radius: var(--ec-radius-sm);
}

/* ---- Telerik Extensions for ASP.NET MVC (tema sitefinity) --------------- */
.t-widget {
    font-family: var(--ec-font);
    color: var(--ec-text);
    border-color: var(--ec-border);
}

.t-widget .t-header,
.t-grid .t-grid-header,
.t-grid .t-header,
.t-grid .t-grouping-header {
    /* SI-2467: el tema de Telerik (telerik.sitefinity.css) trae su propia
       regla ".t-grid .t-header" con la MISMA especificidad (dos clases):
       letter-spacing, mayúsculas forzadas, texto gris apagado y fondo
       transparente -- de ahí las mayúsculas y el gris que seguían viéndose
       pese al cambio anterior. !important para que gane siempre la marca sin
       depender de en qué orden inyecte su hoja el StyleSheetRegistrar de
       Telerik. */
    background: var(--ec-table-header-bg) !important;
    background-image: none !important;
    border-color: var(--ec-border-strong);
    /* Texto blanco sobre el azul de cabecera (--eco-blue-300): el negro rendía
       poco contraste ahí (Joaquim, 07/09). */
    color: var(--ec-text-on-action) !important;
    font-weight: 600;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* SI-2467 (segunda vuelta): el texto de la cabecera vive dentro de un .t-link
   (el enlace de ordenación), y Telerik declara letter-spacing/mayúsculas/color
   TAMBIÉN ahí, directamente sobre ese elemento -- no sobre .t-header. Una
   declaración directa en el propio elemento gana siempre a lo heredado del
   padre, aunque el padre lleve !important: por eso las mayúsculas seguían
   viéndose pese a la regla de arriba. Hay que repetir el override aquí. */
.t-widget .t-header .t-link,
.t-grid .t-grid-header .t-link,
.t-grid .t-header .t-link,
.t-grid .t-grouping-header .t-link {
    color: var(--ec-text-on-action) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background: none !important;
}

.t-grid .t-alt {
    background: var(--ec-surface-stripe);
}

.t-grid td {
    border-color: var(--ec-border);
}

.t-grid .t-state-selected,
.t-widget .t-state-selected {
    background: var(--ec-surface-highlight);
    background-image: none;
    border-color: var(--ec-border-strong);
    color: var(--ec-text);
}

.t-widget .t-state-hover {
    background: var(--ec-surface-highlight);
    background-image: none;
}

.t-widget a.t-link,
.t-widget .t-link {
    color: var(--ec-link);
}

.t-button,
.t-widget .t-button {
    background: var(--ec-action-soft-bg);
    background-image: none;
    border: 1px solid var(--ec-action-soft-border);
    border-radius: var(--ec-radius-sm);
    color: var(--ec-action);
}

.t-button:hover,
.t-widget .t-button:hover {
    background: var(--ec-action-soft-hover);
    border-color: var(--ec-action);
    color: var(--ec-action-hover);
}

/* SI-2467: icono del selector de fecha (sprite común de Telerik) al mismo
   estilo minimalista que el resto de iconos de acción del rebranding. */
.t-icon-calendar {
    background-image: url(ActionIcons/calendar.svg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
}

/* SI-2467: el botón de refrescar del pager del grid (vuelve a pedir los datos por
   Ajax) deja el sprite de Telerik por el mismo icono minimalista del resto. */
.t-grid .t-icon.t-refresh {
    background-image: url(ActionIcons/refresh-cw.svg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
}

/* SI-2467: el marco del selector de fecha lo lleva el envoltorio (.t-picker-wrap),
   con el input sin borde dentro y el icono centrado en su franja derecha. Antes el
   input tenía borde propio y el icono colgaba fuera de él. El float/margen vienen
   del "input" genérico de .buscar (estilos.css) y aquí no pintan nada. */
.t-datepicker { width: 8rem; vertical-align: middle; }
.t-picker-wrap {
    display: flex;
    align-items: center;
    height: 2rem;
    padding: 0 2rem 0 0;
    box-sizing: border-box;
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-sm);
}
.t-picker-wrap:focus-within {
    border-color: var(--ec-action);
    box-shadow: var(--ec-focus-ring);
}
.t-picker-wrap .t-input {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 0.5rem;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--ec-font);
    font-size: 0.8125rem !important;
}
.t-picker-wrap .t-input:focus-visible { outline: none; box-shadow: none; }
.t-picker-wrap .t-select {
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem;
    height: auto;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.t-picker-wrap .t-icon { margin-top: 0; }

/* ---- jQuery UI (MultiSelect, datepicker) -------------------------------- */
.ui-widget {
    font-family: var(--ec-font);
}

.ui-widget-header {
    background: var(--ec-surface-alt);
    background-image: none;
    border-color: var(--ec-border-strong);
    color: var(--ec-text);
}

.ui-widget-content {
    border-color: var(--ec-border);
    color: var(--ec-text);
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    background: var(--ec-surface);
    background-image: none;
    border-color: var(--ec-border);
    color: var(--ec-text);
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-active,
.ui-widget-content .ui-state-active {
    background: var(--ec-surface-highlight);
    background-image: none;
    border-color: var(--ec-action);
    color: var(--ec-action-hover);
}

/* ---- Tabulator ---------------------------------------------------------- */
.tabulator {
    font-family: var(--ec-font);
    border-color: var(--ec-border);
}

/* SI-2509: la cabecera Tabulator sigue el estilo consolidado de la casa (el mismo que las
   rejillas Telerik y que hasta ahora solo daba tabulator-shared.css a las vistas que la
   cargaban): sin fondo, titulo en azul y seminegrita, linea azul inferior, sin rejilla
   vertical. El azul de cabecera de SI-2467 desaparece: las vistas sin hoja propia (Gestio
   Associats) lo ensenaban y desentonaban con Favoritos. */
.tabulator .tabulator-header {
    background: transparent;
    background-image: none;
    border-bottom: 2px solid var(--ec-action);
    color: var(--ec-action);
    font-weight: 600;
    height: auto;
    padding: 2px 0;
}
.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: 0;
    padding: 4px;
    text-align: left;
    color: var(--ec-action);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.43;
    padding: 2px 0;
    color: var(--ec-action);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}
.tabulator .tabulator-row { border-bottom: 1px solid var(--ec-table-line); height: auto; min-height: 32px; }
.tabulator .tabulator-row .tabulator-cell { border-right: 0; }

.tabulator-row.tabulator-selected {
    background: var(--ec-surface-highlight);
}

/* ---- Tom Select (el buscador de la casa: <select data-ec-search>) -------
   El CSS del fabricante que cargamos es el tema base (sin flecha ni aspecto de
   desplegable); el aspecto lo damos aquí: valor o placeholder + chevron,
   búsqueda en el propio control y lista pegada debajo, ancha y de una línea. */
.ts-wrapper {
    --ts-pr-caret: 1.75rem;              /* hueco que Tom Select reserva para la flecha */
    display: inline-block;
    vertical-align: middle;
    font-family: var(--ec-font);
    color: var(--ec-text);
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.single.input-active .ts-control {
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-sm);
    box-shadow: none;
    color: var(--ec-text);
    font-size: 0.8125rem;
    line-height: 1.25;
    min-height: var(--ec-control-height);
    padding: 0.4rem 0.625rem;
    flex-wrap: nowrap;
    align-items: center;
    cursor: pointer;
}

.ts-wrapper .ts-control > input {
    min-width: 0;
    font-size: inherit;
    color: var(--ec-text);
}

.ts-wrapper .ts-control > input::placeholder {
    color: var(--ec-text-muted);
    opacity: 1;
}

.ts-wrapper .ts-control > .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flecha de desplegable (chevron), como la de un select nativo. */
.ts-wrapper.single .ts-control::after,
.ts-wrapper.ec-select--summary .ts-control::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: -0.35rem;
    border-right: 2px solid var(--ec-text-muted);
    border-bottom: 2px solid var(--ec-text-muted);
    transform: rotate(45deg);
    pointer-events: none;
    transition: transform 0.15s ease;
}

.ts-wrapper.single.dropdown-active .ts-control::after,
.ts-wrapper.ec-select--summary.dropdown-active .ts-control::after {
    margin-top: -0.1rem;
    transform: rotate(225deg);
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--ec-action);
    box-shadow: var(--ec-focus-ring);
}

.ts-wrapper.dropdown-active .ts-control {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ts-dropdown {
    margin-top: -1px;                    /* pegado al control, como una sola pieza */
    border: 1px solid var(--ec-action);
    border-top: 1px solid var(--ec-border);
    border-radius: 0 0 var(--ec-radius-sm) var(--ec-radius-sm);
    box-shadow: var(--ec-shadow);
    color: var(--ec-text);
    font-family: var(--ec-font);
    font-size: 0.8125rem;
    width: max-content;
    min-width: 100%;
    max-width: min(36rem, 90vw);
}

.ts-dropdown .ts-dropdown-content {
    max-height: 18rem;
}

.ts-dropdown .option,
.ts-dropdown .no-results {
    padding: 0.4rem 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Listado de pedidos: la jerarquia se lee por el fondo, no por franjas alternas —una zebra
   sobre filas que ya se agrupan de dos en dos confunde mas que ayuda (SI-2545). */
/* La zebra general de Tabulator se pinta con !important unas lineas mas abajo, asi que
   estas tienen que llevarlo tambien: el id sube la especificidad, pero entre una regla
   con !important y otra sin el, gana la que lo lleva aunque sea menos especifica. */
#orders-table .tabulator-row,
#orders-table .tabulator-row.tabulator-row-odd,
#orders-table .tabulator-row.tabulator-row-even {
    background: var(--ec-surface) !important;
}

#orders-table .tabulator-row.ec-order-row {
    background: var(--ec-surface-alt) !important;
}

/* Listado de pedidos: todo el dato en negro, tambien los enlaces de almacen, usuario y
   proveedor. El azul se reserva para lo que se pulsa de verdad (SI-2545). */
#orders-table .tabulator-cell a {
    color: var(--ec-text);
}

#orders-table .tabulator-cell a:hover {
    text-decoration: underline;
}

/* Columna de pedido del listado: el numero y, junto a el, ver e imprimir el pedido
   entero. Se repite en cada subpedido suyo a proposito: sin agrupar, es la unica
   manera de que la tabla quede cuadrada con sus cabeceras (SI-2545). En negro y sin
   adornos, como el resto de la tabla. */
.ec-order__num {
    font-weight: 600;
    color: var(--ec-text);
}

.ec-order__actions {
    margin-left: 0.4rem;
}

/* Control que sigue existiendo en el formulario pero ya no se enseña: lo sustituye otro
   mando en pantalla y este solo viaja con el envío (SI-2544). */
.ec-hidden {
    display: none;
}

/* «Todos» de un filtro: es la opcion de no filtrar, y se distingue del resto de
   valores tanto en la lista como una vez elegida (SI-2537). Va SIEMPRE la primera,
   tambien mientras se escribe: al buscar, Tom Select reordena la lista por lo que
   mejor casa con el texto, y sin esto el «Todos» se hundia entre los resultados.
   Se resuelve con el orden visual de la caja, que no depende de ese calculo. */
.ts-dropdown .ts-dropdown-content {
    display: flex;
    flex-direction: column;
}

/* La caja tiene alto maximo y las opciones son hijas de un flex: sin esto se encogen
   para caber todas y se solapan unas sobre otras, ilegibles. Cada una ocupa lo suyo y
   la caja hace scroll, que es lo que hacia antes de ordenarlas por flex. */
.ts-dropdown .ts-dropdown-content > * {
    flex: 0 0 auto;
}

.ts-dropdown .ec-search-select__all {
    order: -1;
}

.ts-wrapper .ec-search-select__all {
    font-weight: 600;
}

.ts-dropdown .option .highlight {
    background: var(--ec-state-pending);
    border-radius: 2px;
}

.ts-dropdown .option.active,
.ts-dropdown .active {
    background: var(--ec-surface-highlight);
    color: var(--ec-action);
}

.ts-dropdown .option.selected,
.ts-dropdown .selected {
    color: var(--ec-action);
    font-weight: 600;
}

.ts-dropdown .no-results {
    color: var(--ec-text-muted);
}

.ts-wrapper.multi .ts-control > .item {
    background: var(--ec-surface-highlight);
    border: 1px solid var(--ec-action-soft-border);
    border-radius: var(--ec-radius-sm);
    color: var(--ec-text);
}

/* ── Buscador protagonista (SI-2483) ──────────────────────────────────────────
   Panel de búsqueda de las pantallas de pedidos: una barra grande con su botón y,
   debajo, los filtros secundarios en filas compactas. Los controles heredados
   (.buscar input { float:left; margin !important }, .select-buscador, Telerik
   DatePicker, Chosen) se neutralizan aquí para que la maqueta no dependa de ellos. */
.ec-search { box-sizing: border-box; margin: 0.75rem 0 1rem; padding: 1rem 1.25rem 1.1rem; background: var(--ec-surface-alt); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); font-family: var(--ec-font); }
.ec-search *, .ec-search *::before, .ec-search *::after { box-sizing: border-box; }
.ec-search .ec-search__label, .ec-search label.ec-search__label { display: block; clear: none; float: none; margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--ec-text-muted); }
.ec-search__bar { display: flex; align-items: center; gap: 0.5rem; }
.ec-search .ec-search__input { flex: 1 1 auto; float: none !important; margin: 0 !important; width: auto !important; max-width: none; height: 2.75rem; padding: 0 1rem; font-family: inherit; font-size: 1.125rem; color: var(--ec-text); background: var(--ec-surface); border: 2px solid var(--ec-action); border-radius: var(--ec-radius); }
.ec-search .ec-search__input:focus { outline: none; box-shadow: 0 0 0 3px var(--ec-action-soft-border); }
.ec-search__bar .ec-btn { height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; float: none !important; margin: 0 !important; width: auto !important; white-space: nowrap; }
.ec-search__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.5rem; margin-top: 0.9rem; }
.ec-search__row--more { padding-top: 0.75rem; border-top: 1px dashed var(--ec-border); }
.ec-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 11rem; max-width: 22rem; flex: 1 1 11rem; }
.ec-field--wide { min-width: 16rem; }
.ec-field--sm { min-width: 8.5rem; flex-grow: 0; } /* SI-2508 bis: fechas y numeros no se estiran para llenar la fila (Desde y Hasta quedaban a un palmo) */
.ec-field > label { margin: 0; }
.ec-field--check input[type="checkbox"] { width: auto !important; height: 1.1rem; margin: 0.55rem 0 !important; float: none !important; } /* SI-2507 bis: casilla alineada con los campos del buscador */
.ec-search .ts-wrapper.multi .ts-control { flex-wrap: wrap; max-height: 4.75rem; overflow-y: auto; } /* SI-2508 bis: selector multiple con varios elegidos: las etiquetas saltan de linea y, si son muchas, scroll en vez de crecer */
.ec-search select, .ec-search input[type="text"], .ec-search input[type="date"] { float: none !important; margin: 0 !important; height: 2.25rem; width: 100%; padding: 0 0.6rem; font-family: inherit; font-size: 0.875rem; color: var(--ec-text); background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: var(--ec-radius-sm); }
.ec-search .chosen-container, .ec-search .ts-wrapper, .ec-search .vscomp-wrapper { width: 100% !important; float: none !important; margin: 0 !important; }
.ec-search .ec-field--wide .chosen-container { min-width: 16rem; }
.ec-search .t-widget.t-datepicker, .ec-search .t-datepicker { width: 100% !important; float: none !important; margin: 0 !important; }

.ec-check { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.875rem; color: var(--ec-text); white-space: nowrap; cursor: pointer; align-self: center; }
.ec-check input[type="checkbox"] { float: none !important; margin: 0 !important; width: 1rem; height: 1rem; accent-color: var(--ec-action); }
.ec-search__group { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; align-self: center; }
.ec-search__group label { margin: 0; float: none; }
.ec-search__more { margin-left: auto; align-self: center; font-size: 0.875rem; font-weight: 600; color: var(--ec-action) !important; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ec-search__more:hover { text-decoration: underline; }
.ec-search__actions { display: flex; gap: 0.5rem; margin-left: auto; align-items: flex-end; }
.ec-search__actions .ec-btn { height: 2.25rem; float: none !important; margin: 0 !important; width: auto !important; }
/* Rejillas de pedidos: letra legible y celdas con aire (Telerik). */
#Grid.t-grid td, #Grid.t-grid th .t-link, #ComandesUsuari.t-grid td, #ComandesUsuari.t-grid th .t-link { font-size: 0.875rem; }
#Grid.t-grid td, #ComandesUsuari.t-grid td { padding: 0.4rem 0.5rem; line-height: 1.35; }

/* ── Tablas: ancho y tipografía en pantallas apaisadas (SI-2483) ──────────────
   Regla de la casa: en cualquier pantalla apaisada (no móvil) una tabla ocupa entre el
   80 % y el 100 % del ancho disponible y NUNCA exige scroll horizontal para verse
   entera; la letra de todas las tablas (Telerik, Tabulator y HTML) es Arial, con un
   tamaño ligado al ancho de pantalla; la cabecera es algo mayor que el dato (proporción
   fija vía --ec-table-header-font) y en seminegrita; el dato va en peso normal, en negro
   (--ec-text), nunca en gris salvo el caso explícito de fila inactiva (--ec-inactive-text). */
:root {
    --ec-table-font: clamp(12px, 0.55vw + 5px, 15px);
    --ec-table-header-font: calc(var(--ec-table-font) * 1.1);
}
table, table td, table th,
.t-grid, .t-grid td, .t-grid th, .t-grid .t-link, .t-grid input, .t-grid select, .t-grid-pager,
.tabulator, .tabulator .tabulator-cell, .tabulator .tabulator-col, .tabulator .tabulator-col-title, .tabulator .tabulator-footer,
.ec-datatable, .ec-datatable td, .ec-datatable th {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size-adjust: none;
}
.t-grid tbody td, .tabulator .tabulator-cell, .ec-datatable tbody td, table.tabla-datos td { font-size: var(--ec-table-font); font-weight: 400; color: var(--ec-text); }
.t-grid th.t-header, .t-grid th.t-header .t-link, .tabulator .tabulator-col-title, .ec-datatable th.t-header, table.tabla-datos th { font-size: var(--ec-table-header-font); font-weight: 600; }
/* SI-2509: break-word y no anywhere: anywhere partía un importe («200 / 0,00») para encajar la tabla;
   con break-word las palabras (y los números) se mantienen enteros y solo se corta lo que no cabe solo. */
.t-grid tbody td { white-space: normal; overflow-wrap: break-word; }
/* Un importe es "150,00 €": el espacio entre la cifra y el símbolo es, para el navegador,
   un punto de corte como cualquier otro, así que break-word lo separaba en dos líneas. La
   convención de toda la web para una columna de importe es alinearla a la derecha (inline
   style, tanto en las tablas nuevas como en las de siempre): esa celda nunca se parte. */
.t-grid tbody td[style*="text-align:right"], .t-grid tbody td[style*="text-align: right"],
.tabulator .tabulator-cell[style*="text-align:right"], .tabulator .tabulator-cell[style*="text-align: right"],
.ec-datatable tbody td[style*="text-align:right"], .ec-datatable tbody td[style*="text-align: right"],
table.tabla-datos td[style*="text-align:right"], table.tabla-datos td[style*="text-align: right"],
.ec-table td[style*="text-align:right"], .ec-table td[style*="text-align: right"],
.ec-table td.ec-num, .t-grid tbody td.ec-num, .tabulator .tabulator-cell.ec-num,
.total, .ec-flow-total__amount {
    white-space: nowrap;
}
@media (min-width: 1024px) {
    /* SI-2509 (Joaquim, 14/09/2026): las paginas con tabla ocupan el 90 % del display, centradas. */
    #content:has(.t-grid, .tabulator, .ec-datatable, table.tabla-datos) { width: 90% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
    /* Regularizar es la excepcion: muchas columnas numericas estrechas hacen que el
       90% le sobre estrechez y las columnas con texto (articulo, proveedor) se vean
       igual de apretadas que el resto, subiendo el alto de fila. #AdjustGrid (ID)
       gana por especificidad a .t-grid (clase) de la regla de arriba sin importar
       el orden. */
    #content:has(#AdjustGrid) { width: 95% !important; }
    /* SI-2509: auto y no clip: al 100 % de zoom en un portátil una tabla ancha quedaba recortada por la
       derecha sin barra de desplazamiento (Marc Alsina, 10/09/2026); el píxel de más que motivó el clip lo
       corrige ya la regla de .content-container. */
    #content-content { overflow-x: auto; }
    /* Los listados Tabulator envuelven la tabla en .content-container con min-width calc(100% - 20px) más
       márgenes: sumaba un píxel de más y dejaba una barra de scroll horizontal en toda la página. */
    #content .content-container { min-width: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; }
    .t-grid.t-widget, .tabulator, .ec-datatable { width: 100% !important; min-width: 80%; max-width: 100%; box-sizing: border-box; }
    .t-grid table { width: 100% !important; table-layout: auto !important; }
    /* Anchos fijos en píxeles de las columnas Telerik (.Width(120)): sumados desbordaban la
       pantalla del portátil. Se liberan; los porcentajes se respetan. */
    .t-grid col[style*="px"] { width: auto !important; }
    .t-grid .t-grid-content, .t-grid .t-grid-header-wrap { overflow-x: visible !important; }
    .tabulator .tabulator-tableholder { overflow-x: hidden; }
}

/* ── Pantalla de pedido (SI-2484): buscador héroe, títulos de sección, tabla moderna ── */
.ec-search--hero { text-align: center; padding-top: 1.25rem; }
.ec-search--hero > .ec-search__label { font-size: 0.8125rem; }
.ec-search--hero .ec-search__bar { max-width: 62rem; margin: 0 auto; }
.ec-search--hero .ec-search__input { height: 3.25rem; font-size: 1.3rem; border-radius: 999px; padding: 0 1.4rem; }
.ec-search--hero .ec-search__bar .ec-btn { height: 3.25rem; padding: 0 1.6rem; border-radius: 999px; font-size: 1rem; }
.ec-search--hero .ec-search__row { justify-content: center; text-align: left; }
.ec-section { margin: 1.5rem 0 0.75rem; text-align: left; }
.ec-section__title { margin: 0; font-family: var(--ec-font); font-size: 1.25rem; font-weight: 700; color: var(--ec-text); }
.ec-section__hint { margin: 0.2rem 0 0; font-family: var(--ec-font); font-size: 0.875rem; color: var(--ec-text-muted); }
/* Estilo de tabla de la casa (SI-2484, extendido a todas las rejillas Telerik a petición de
   Joaquim el 09/09/2026): cabecera plana blanca con el título en azul y una línea inferior
   azul, sin rejilla vertical, filas separadas por una línea fina, zebra suave por defecto y
   resaltado de la fila al pasar el ratón. La clase ec-table-modern se conserva pero ya no
   hace falta. */
.t-grid table { border-collapse: collapse !important; }
.t-grid th.t-header {
    background: var(--ec-surface) !important;
    color: var(--ec-action) !important;
    border: 0 !important;
    border-bottom: 2px solid var(--ec-action) !important;
    text-align: left;
    text-transform: none;
    letter-spacing: 0.01em;
    height: auto;
    padding: 0.6rem 0.6rem;
}
.t-grid th.t-header .t-link, .t-grid th.t-header a, .t-grid th.t-header span { color: var(--ec-action) !important; font-weight: 600; }
.t-grid th.t-header .hdr1, .t-grid th.t-header .hdr2 { text-align: left; white-space: nowrap; }
.t-grid tbody td {
    border: 0 !important;
    border-bottom: 1px solid var(--ec-table-line) !important;
    padding: 0.45rem 0.6rem;
    height: auto;
}
.t-grid tbody tr.t-alt td { background-color: var(--ec-surface-stripe); }
.t-grid tbody tr:hover td { background-color: var(--ec-surface-selectable-hover) !important; }
.t-grid td.ec-col-strong, .t-grid td.ec-col-strong a, .t-grid td.ec-col-strong input { font-weight: 700; }
.t-grid .t-grid-pager { border: 0; background: transparent; }
.t-grid .t-grid-content { overflow-y: visible !important; height: auto !important; }
/* Importación de pedidos desde Excel: bloque compacto con los botones de la casa. */
.ec-import { list-style: none; margin: 1.5rem 0 0.75rem; padding: 0; background: transparent; border: 0; }
.ec-import li { list-style: none; }
.ec-import h2 { font-family: var(--ec-font); font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--ec-text); background: transparent; border: 0; padding: 0; }
.ec-import h5 { font-family: var(--ec-font); font-size: 0.875rem; font-weight: 400; color: var(--ec-text-muted); margin: 0 0 0.75rem; }
.ec-import form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ec-import .ec-import__file { font-family: var(--ec-font); font-size: 0.875rem; }
.ec-import .ec-btn { float: none !important; margin: 0 !important; width: auto !important; }

/* Ronda 2 (SI-2484): solo la barra a la vista; los filtros se despliegan en una línea. */
.ec-search__toggle { margin-top: 0.6rem; text-align: center; }
.ec-search__toggle .ec-search__more { margin-left: 0; }
.ec-search__row--more { display: none; }
.ec-search__row--more.is-open { display: flex; }
.ec-search--hero .ec-search__row--more { justify-content: center; align-items: flex-end; gap: 0.75rem 1rem; }
/* 16rem se quedaba corto para nombres de familia/subcategoria largos ("A&B ALMACEN
   ALIMENTACION SECA, PASTAS..."): con Tom Select en los cinco combos del filtro (antes
   solo Proveedor y Familia lo llevaban) el valor elegido se veía truncado a un puñado
   de letras. Los campos de fecha/checkbox no lo notan: no crecen (flex-grow 0, ver
   ec-field--sm) así que se quedan en su min-width de todos modos. */
.ec-search--hero .ec-search__row--more .ec-field { min-width: 9rem; flex: 1 1 9rem; max-width: 24rem; }
.ec-search--hero .ec-search__row--more .ec-check { align-self: flex-end; padding-bottom: 0.55rem; }
.ec-search--hero .ec-search__actions { margin-left: 0; }
/* Buscador con lupa y aspa (SI-2505): el campo va envuelto en ec-search__field; la lupa es
   decorativa y el aspa limpia el texto (el JS del parcial la muestra solo cuando hay valor). */
.ec-search__field { position: relative; display: flex; flex: 1 1 auto; align-items: center; min-width: 0; }
.ec-search__field .ec-search__input { width: 100% !important; padding-left: 3rem; padding-right: 3rem; }
.ec-search__icon, .ec-search__clear { position: absolute; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; background: transparent center / 1.25rem 1.25rem no-repeat; }
.ec-search__icon { left: 1rem; background-image: url(ActionIcons/search.svg); pointer-events: none; opacity: 0.55; }
.ec-search__clear { right: 0.9rem; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background-image: url(ActionIcons/x.svg); opacity: 0.6; }
.ec-search__clear:hover { opacity: 1; background-color: var(--ec-action-soft-hover); }
.ec-search__clear[hidden] { display: none; }
/* Héroe más grande (feedback de Dani Santamaria, 11/09/2026): la barra crece hasta 76 rem y el campo gana altura. */
.ec-search--hero .ec-search__bar { max-width: 76rem; }
.ec-search--hero .ec-search__input { height: 3.5rem; font-size: 1.4rem; }
.ec-search--hero .ec-search__bar .ec-btn { height: 3.5rem; }
/* SI-2505 bis (Joaquim, 14/09/2026): la regla generica .ec-search input[type="text"] (0,2,1) ganaba a
   .ec-search__input (0,2,0) y dejaba la barra a 2,25 rem, con borde de 1 px y letra de 0,875 rem. Selectores
   con la especificidad necesaria: barra casi tan alta como los botones, borde de 2 px, letra mayor, texto a
   la izquierda tras la lupa y lo tecleado en seminegrita (el placeholder, normal). */
.ec-search input[type="text"].ec-search__input { height: 2.75rem; padding: 0 1rem; font-size: 1.125rem; font-weight: 600; text-align: left; color: var(--ec-text); background: var(--ec-surface); border: 2px solid var(--ec-action); border-radius: var(--ec-radius); }
.ec-search input[type="text"].ec-search__input::placeholder { font-weight: 400; color: var(--ec-text-muted); opacity: 1; }
.ec-search .ec-search__field input[type="text"].ec-search__input { width: 100% !important; padding-left: 3rem; padding-right: 3rem; }
.ec-search--hero input[type="text"].ec-search__input { height: 3.25rem; font-size: 1.25rem; border-radius: 999px; }
.ec-search--hero .ec-search__field input[type="text"].ec-search__input { padding-left: 3.25rem; }
.ec-search--hero .ec-search__field .ec-search__icon { left: 1.1rem; }
/* Buscador con panel lateral (SI-2508): el formulario a la izquierda y un recuadro a la derecha
   (la leyenda de colores del listado de Regularizar). Los botones pueden ir al inicio de su fila. */
.ec-search--with-aside { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.ec-search--with-aside .ec-search__main { flex: 1 1 40rem; min-width: 0; }
.ec-search--with-aside .ec-search__main .ec-search__row:first-child { margin-top: 0; }
.ec-search__actions--start { margin-left: 0; }
.ec-legend { flex: 0 1 22rem; margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--ec-border); border-radius: var(--ec-radius-sm); background: var(--ec-surface); font-family: var(--ec-font); font-size: 0.8125rem; line-height: 1.5; }
.ec-legend p { margin: 0; }
.ec-legend__title { font-weight: 600; margin-bottom: 0.25rem !important; }
.ec-legend__item--danger { color: var(--ec-state-danger); font-weight: 600; }
.ec-legend__item--info { color: var(--ec-action); font-weight: 600; }
/* Importes y cantidades (ec-num) nunca se partan en dos líneas (SI-2508; Neus Serra y Marc Alsina, 10/09/2026). */
.t-grid td.ec-num, .t-grid th.ec-num, .tabulator .tabulator-cell.ec-num { white-space: nowrap; }
/* Casación de facturas (SI-2506): el bloque de importes bajo la tabla va centrado y en tarjetas de la
   casa; los importes calculados se distinguen con los colores suaves de columna (base en verde,
   impuesto en naranja) en vez de lightgreen/orange inline. */
.ec-match-totals { margin: 1rem auto 0; border-collapse: separate; border-spacing: 1rem 0.5rem; font-family: var(--ec-font); }
.ec-match-totals > tbody > tr > td { vertical-align: middle; }
.ec-totals-card { padding: 0.75rem 1rem; background: var(--ec-surface-highlight); border-radius: var(--ec-radius); }
.ec-totals-card--tax { background: var(--ec-surface-alt); }
.ec-totals-card table { margin: 0; }
.ec-totals-card td { padding: 0.15rem 0.4rem; }
.ec-amount { width: 7rem; height: 2rem; box-sizing: border-box; padding: 0 0.5rem; border: 1px solid var(--ec-border); border-radius: var(--ec-radius-sm); background: var(--ec-surface); font-family: var(--ec-font); font-size: 0.875rem; }
.ec-amount--base { background: var(--ec-col-format); }
.ec-amount--tax { background: var(--ec-col-unit); }
/* SI-2506 bis: el importe seleccionado que cuadra con la factura se marca en verde tenue y el que no en
   amarillo suave (antes green y yellow puros por JS). */
.ec-amount.ec-amount--match { background: var(--ec-state-ok-bg) !important; color: var(--ec-state-ok-text); border-color: var(--ec-state-ok-border); }
.ec-amount.ec-amount--pending { background: var(--ec-state-pending) !important; color: var(--ec-state-pending-text); }
/* Stock de inventario (SI-2507): cabecera del inventario en tarjeta con dos grupos de datos y la
   referencia interna discreta a la derecha; columna de comando estrecha; etiqueta sobre la barra. */
.ec-inv-head { display: flex; flex-wrap: wrap; gap: 1rem 3rem; align-items: flex-start; margin: 0.5rem 0 1rem; padding: 0.9rem 1.25rem; background: var(--ec-surface-alt); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); font-family: var(--ec-font); font-size: 0.9375rem; }
.ec-inv-head__group { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0; }
.ec-inv-head__item { display: contents; }
.ec-inv-head__item dt { font-weight: 600; color: var(--ec-text-muted); }
.ec-inv-head__item dd { margin: 0; font-weight: 600; color: var(--ec-text); }
.ec-inv-head__code { margin: 0 0 0 auto; font-size: 0.8125rem; color: var(--ec-text-muted); }
.ec-search .ec-search__label--bar { margin-top: 0.9rem; }
.t-grid td.ec-col-command, .t-grid th.ec-col-command { width: 3rem; text-align: center; }
.ec-warehouse { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.25rem 0 0.75rem; font-family: var(--ec-font); font-size: 1.05rem; }
.ec-warehouse__label { margin: 0; float: none; font-size: 0.95rem; color: var(--ec-text-muted); }
.ec-warehouse__name { font-size: 1.15rem; font-weight: 700; color: var(--ec-text); }

/* ── Listados de productos (SI-2486) ─────────────────────────────────────────── */
.ec-search__spinner { display: none; align-items: center; }
.ec-search__spinner img { height: 1.25rem; }
.ec-actions { display: inline-flex; align-items: center; gap: 0.35rem; }
.ec-actions a, .ec-actions button { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: transparent; border-radius: var(--ec-radius-sm); cursor: pointer; }
.ec-actions a:hover, .ec-actions button:hover { background: var(--ec-action-soft-bg); }
.ec-action-ico { width: 18px; height: 18px; display: block; }
/* Fila de elemento desactivado: toda la fila atenuada, enlaces incluidos. Clase de fila
   reutilizable (Tabulator: rowFormatter; Telerik: HtmlAttributes en la fila). */
.tabulator .tabulator-row.ec-row-inactive .tabulator-cell, .t-grid tbody tr.ec-row-inactive td, tr.ec-row-inactive td { color: var(--ec-inactive-text); }
.tabulator .tabulator-row.ec-row-inactive .tabulator-cell a, .t-grid tbody tr.ec-row-inactive td a, tr.ec-row-inactive td a { color: var(--ec-inactive-link); }
.tabulator .tabulator-row.ec-row-inactive .ec-action-ico { opacity: 0.6; }
/* Iconos de comando de las rejillas Telerik (añadir, guardar, cancelar, borrar): el sprite
   de 2011 con su botón gris se sustituye por los iconos de línea del rebranding sobre fondo
   transparente. El botón conserva su tamaño de pulsación. */
.t-grid a.t-button.t-button-icon, .t-grid a.t-button.t-button-icon:hover { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0.15rem !important; }
.t-grid .t-button-icon .t-icon { width: 18px; height: 18px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 18px 18px; }
.t-grid .t-button-icon .t-icon.t-edit { background-image: url(ActionIcons/plus.svg); }
.t-grid .t-button-icon .t-icon.t-update, .t-grid .t-button-icon .t-icon.t-insert { background-image: url(ActionIcons/check.svg); }
.t-grid .t-button-icon .t-icon.t-cancel { background-image: url(ActionIcons/x.svg); }
.t-grid .t-button-icon .t-icon.t-delete { background-image: url(ActionIcons/trash.svg); }
.t-grid a.t-button.t-button-icon:hover .t-icon { opacity: 0.7; }
/* Fila de totales: mismo tamaño base que los datos y el importe total algo mayor. */
.t-grid tfoot td, .t-grid .t-footer-template td, .t-grid .t-group-footer td { font-size: var(--ec-table-font); }
.t-grid .t-footer-template .total { font-size: 1.15em; font-weight: 700; }
/* Diálogo de confirmación: la capa ec-modal-overlay de SI-2467 en variante cerrada por
   defecto (is-open la muestra) y caja estrecha. Sustituye al confirm() del navegador. */
.ec-modal-overlay--dialog { display: none; }
.ec-modal-overlay--dialog.is-open { display: block; }
.ec-modal--confirm { max-width: 32rem; margin-top: 18vh; padding: 28px 32px; text-align: left; }
.ec-modal--confirm .ec-modal__title { font-size: 1.25rem; }
.ec-modal--confirm .ec-modal__actions { display: flex; justify-content: flex-end; gap: 0.75rem; }
.ec-action-ico--inline { display: inline-block; vertical-align: middle; }
/* Acciones masivas: margen mínimo del 5 % a cada lado. */
/* SI-2513 (Joaquim, 14/09/2026): la seccion de acciones masivas alinea su titulo con el de las tablas; el
   margen del 5 % de SI-2487 sobraba una vez el contenedor de pagina ya va al 90 % centrado. */
.ec-bulk { padding-left: 0; padding-right: 0; box-sizing: border-box; }
.ec-bulk__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.ec-bulk__row form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0; }
.ec-bulk .ec-btn { float: none !important; margin: 0 !important; width: auto !important; }

/* Rejilla bajo demanda (SI-2492): hasta el primer Buscar la rejilla de artículos queda
   oculta y en su lugar se indica qué se puede buscar. El JS pone is-idle en el contenedor. */
.ec-empty { display: none; margin: 0.5rem 0 1rem; padding: 1.75rem 1.5rem; border: 1px dashed var(--ec-border); border-radius: 16px; text-align: center; font-family: var(--ec-font); }
.ec-empty__text { margin: 0; font-size: 0.95rem; color: var(--ec-text-muted); }
.ec-grid-on-demand.is-idle > .t-grid { display: none; }
.ec-grid-on-demand.is-idle > .ec-empty { display: block; }
/* Mientras dura la petición real de "Buscar" (is-loading, puesto por
   products-grid-on-demand.js), un velo con el sprite de carga cubre la zona donde va a
   aparecer la tabla: sin esto, entre el clic y las primeras filas la pantalla se ve
   igual que en reposo y parece que no ha pasado nada. */
.ec-grid-on-demand { position: relative; }
.ec-grid-on-demand.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    min-height: 8rem;
    background: var(--ec-surface) url("images/loading.gif") no-repeat center 2.5rem;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
}

/* Listado de pedidos (SI-2492): botones de página en fila y hueco del mismo tamaño que un
   icono cuando una acción no aplica, para que las columnas de acciones queden alineadas. */
.ec-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.5rem 0 0.25rem; }
.ec-page-actions .ec-btn { float: none !important; margin: 0 !important; width: auto !important; }
.ec-actions__spacer { display: inline-block; width: 1.6rem; height: 1.6rem; }
.t-grid .t-detail-cell { padding: 0.5rem 0.75rem 1rem 2.75rem !important; background: var(--ec-surface-stripe); }
.t-grid .t-detail-cell .t-grid { border: 0; background: var(--ec-surface); }
.t-grid .t-detail-cell .t-grid th.t-header { font-size: 0.9em; }
.t-grid .t-detail-cell .t-grid-bottom { display: none; }

/* Cesta y resumen de confirmación del pedido (SI-2492): la capa ec-modal en variante de
   flujo, por debajo de las ventanas Telerik (z-index 10001) para que el detalle de artículo
   abierto desde la cesta quede encima. Tabla HTML de la casa para el resumen. */
.ec-modal-overlay--flow { z-index: 9000; }
body.ec-modal-open { overflow: hidden; }
.ec-modal--flow { max-width: 1240px; width: calc(100% - 3rem); margin: 32px auto; padding: 28px 32px; box-sizing: border-box; }
.ec-modal--flow .ec-btn { float: none !important; margin: 0 !important; width: auto !important; }
.ec-modal__head { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1rem; }
.ec-modal__heading { flex: 1 1 auto; }
.ec-modal__heading .ec-modal__text { margin-bottom: 0; }
.ec-modal__meta { margin: 0.35rem 0 0; }
.ec-modal__close { border: 0; background: transparent; font-size: 1.75rem; line-height: 1; color: var(--ec-text-muted); cursor: pointer; padding: 0 0.25rem; }
.ec-modal__close:hover { color: var(--ec-text); }
.ec-modal__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin: 1rem 0; }
.ec-modal__toolbar-left, .ec-modal__toolbar-right { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ec-modal__actions--split { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ec-flow-options { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; padding: 1rem 1.25rem; background: var(--ec-surface-stripe); border-radius: 16px; }
.ec-flow-options__choice { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.95rem; }
.ec-flow-options__choice input[type="radio"] { margin: 0 !important; float: none !important; }
.ec-flow-options__hint { color: var(--ec-text-muted); font-size: 0.875rem; }
.ec-flow-plantilla { margin-top: 1rem; }
.ec-flow-plantilla__title { margin: 0 0 0.5rem; font-weight: 700; color: var(--ec-action); }
.ec-flow-progress { margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; border-radius: 999px; font-weight: 600; text-align: center; }
.ec-flow-provider { font-weight: 700; }
.ec-table { width: 100%; border-collapse: collapse; font-size: var(--ec-table-font); font-weight: 400; color: var(--ec-text); }
.ec-table th { text-align: left; color: var(--ec-action); font-weight: 600; font-size: var(--ec-table-header-font); background: var(--ec-surface); border-bottom: 2px solid var(--ec-action); padding: 0.6rem; vertical-align: bottom; }
.ec-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--ec-table-line); vertical-align: top; }
.ec-table th.ec-num, .ec-table td.ec-num { text-align: right; white-space: nowrap; }
.ec-table__nested-cell { padding: 0.25rem 0.6rem 0.9rem 2rem !important; }
.ec-table--nested th { border-bottom-width: 1px; font-size: 0.9em; padding: 0.4rem 0.5rem; }
.ec-table--nested td { font-size: 0.95em; padding: 0.3rem 0.5rem; }
.ec-table--nested tbody tr:nth-child(even) td { background: var(--ec-surface-stripe); }
.ec-table--conditions .ec-field { min-width: 0; max-width: none; }
.ec-table--conditions .ec-field textarea, .ec-table--conditions .ec-field input[type="text"] { width: 100%; box-sizing: border-box; float: none; margin: 0; }
.ec-table--conditions .ec-field textarea { min-height: 3.5rem; }

/* Resumen de confirmación por secciones (SI-2492, ronda 2): condiciones generales y un bloque
   por proveedor con su cabecera, fecha, observaciones y detalle con subtotal; el total del
   pedido queda pegado al pie del diálogo mientras se hace scroll. */
.ec-flow-summary { display: flex; flex-direction: column; gap: 1.5rem; margin: 0.5rem 0 1rem; }
.ec-flow-block { padding-top: 1.25rem; border-top: 1px solid var(--ec-table-line); }
.ec-flow-block--general { padding-top: 0; border-top: 0; }
.ec-flow-block__title { margin: 0 0 0.75rem; font-family: var(--ec-font); font-size: 1.05rem; font-weight: 700; color: var(--ec-text); }
/* Jerarquía: "Condiciones generales" aplica a todo el pedido y va por delante de cada
   bloque de proveedor, así que su título es el más grande de los dos; el nombre del
   proveedor, al repetirse una vez por bloque, es un subtítulo. */
.ec-flow-block--general .ec-flow-block__title { font-size: 1.3rem; }
.ec-flow-block--provider .ec-flow-block__title { font-size: 1rem; }
.ec-flow-block__fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.5rem; margin-bottom: 0.75rem; }
.ec-flow-block__fields .ec-field { min-width: 0; max-width: none; }
.ec-flow-block__fields .ec-field--grow { flex: 1 1 24rem; }
.ec-flow-block__fields .ec-field textarea { width: 100%; min-height: 3.5rem; box-sizing: border-box; float: none; margin: 0; }
/* Componente de fecha de la casa: 10 caracteres de ancho y el calendario a la derecha, con el
   mismo marco que el selector Telerik (.t-picker-wrap). */
.ec-date { display: inline-flex; align-items: center; width: 8rem; height: 2.25rem; box-sizing: border-box; padding: 0 0.25rem 0 0.6rem; border: 1px solid var(--ec-border); border-radius: 999px; background: var(--ec-surface); }
.ec-date:focus-within { border-color: var(--ec-action); box-shadow: 0 0 0 3px var(--ec-action-soft-bg); }
.ec-date .ec-date__input { flex: 1 1 auto; min-width: 0; width: auto !important; border: 0 !important; background: transparent; padding: 0 !important; margin: 0 !important; float: none !important; font-family: var(--ec-font); font-size: 0.875rem; box-shadow: none; outline: none; }
.ec-date__button { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.ec-date__button:hover { background: var(--ec-action-soft-bg); }
.ec-date__icon { width: 16px; height: 16px; display: block; }
.ec-field--date .t-datepicker, .ec-field--date .t-picker-wrap { width: 8rem !important; }
/* SI-2513/SI-2519: un solo selector de fecha para toda la web, servido por el helper Html.EcDateFor
   (Services/Ui/EcDate.cs): cuadro de texto editable dentro del marco ec-date y calendario flatpickr
   (Scripts/ec-date.js). El input hereda el marco del componente aunque este dentro de un buscador
   (la regla generica .ec-search input[type=text] le ponia alto, borde y fondo propios). */
.ec-date.ec-date--picker { vertical-align: middle; }
.ec-date.ec-date--picker .ec-date__input { height: auto !important; line-height: 1.3; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0.875rem !important; font-weight: 400; color: var(--ec-text); }
.ec-date.ec-date--picker .ec-date__input::placeholder { color: var(--ec-text-muted); opacity: 1; }
/* Selectores Telerik que aun no pasan por el helper (SI-2514): marco pill e icono de la casa. */
.ec-search .t-picker-wrap { height: 2.25rem; border-radius: 999px; padding: 0 2rem 0 0.35rem; }
.ec-search .t-picker-wrap input[type="text"].t-input { height: 100% !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 0.5rem !important; font-size: 0.875rem !important; font-weight: 400; }
.t-picker-wrap .t-select .t-icon.t-icon-calendar { width: 16px; height: 16px; background: url(ActionIcons/calendar.svg) center / 16px 16px no-repeat !important; margin: 0; }
/* Calendario flatpickr con los colores de la casa (la hoja base es Content/flatpickr.min.css). */
.flatpickr-calendar { font-family: var(--ec-font); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); box-shadow: var(--ec-shadow); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after, .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months, span.flatpickr-weekday { color: var(--ec-text); fill: var(--ec-text); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ec-action); }
.flatpickr-day { border-radius: 50%; color: var(--ec-text); }
.flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--ec-action-soft-bg); border-color: var(--ec-action-soft-bg); }
.flatpickr-day.today { border-color: var(--ec-action); }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--ec-action-soft-bg); color: var(--ec-text); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus, .flatpickr-day.selected.today { background: var(--ec-action); border-color: var(--ec-action); color: var(--ec-text-on-action); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--ec-text-muted); }
.ec-table--nested td.ec-col-strong { font-weight: 600; }
.ec-table__subtotal td { border-bottom: 0; padding-top: 0.5rem; font-weight: 600; color: var(--ec-text-muted); }
.ec-table__subtotal td:last-child { color: var(--ec-text); }
.ec-flow-total { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: baseline; gap: 1rem; margin-top: 0.5rem; padding: 0.75rem 0; background: var(--ec-surface); border-top: 2px solid var(--ec-action); font-family: var(--ec-font); }
.ec-flow-total__label { font-size: 1rem; font-weight: 600; color: var(--ec-text-muted); }
.ec-flow-total__amount { font-size: 1.5rem; font-weight: 700; color: var(--ec-text); }

/* ── Estilo general del rebranding (SI-2496) ──────────────────────────────────
   1) Convención: el NOMBRE de un elemento activo (producto, proveedor, asociado) va en peso 600;
      el de un inactivo se queda en peso normal y atenuado (ec-row-inactive). La columna del
      nombre lleva la clase ec-col-name (Telerik: HtmlAttributes de la columna; Tabulator: cssClass).
   2) Paginación única para Telerik y Tabulator: botones redondos sin marco, chevrones en vez de
      los sprites de 2011 y del texto First/Prev, página activa en azul, contador en gris. */
.t-grid tbody tr:not(.ec-row-inactive) td.ec-col-name,
.t-grid tbody tr:not(.ec-row-inactive) td.ec-col-name a,
.tabulator .tabulator-row:not(.ec-row-inactive) .tabulator-cell.ec-col-name,
.tabulator .tabulator-row:not(.ec-row-inactive) .tabulator-cell.ec-col-name a { font-weight: 600; }
.t-grid tbody tr.ec-row-inactive td.ec-col-name,
.tabulator .tabulator-row.ec-row-inactive .tabulator-cell.ec-col-name { font-weight: 400; }

/* Contenedor del pie: Telerik (.t-grid-pager) y Tabulator (.tabulator-footer) */
.t-grid .t-grid-pager, .tabulator .tabulator-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.5rem 0.25rem 0; margin: 0; border: 0 !important; border-top: 1px solid var(--ec-table-line) !important;
    background: transparent !important; font-family: var(--ec-font); font-size: 0.8rem; color: var(--ec-text-muted);
}
.t-grid .t-grid-pager .t-status { float: none; border: 0; background: transparent; padding: 0; }
/* SI-2513 (Joaquim, 14/09/2026): el boton de refrescar del pie (t-refresh) desaparece de la vista: Buscar ya
   vuelve a pedir los datos y el grid se rebinda solo tras editar en linea. Se OCULTA, no se quita: 129 vistas
   lo disparan por JS ($('#Grid .t-refresh').trigger('click')) para rebindar, y un trigger sobre un elemento
   oculto sigue funcionando. */
.t-grid .t-grid-pager .t-status .t-refresh, .t-grid .t-refresh { display: none !important; }
.t-grid .t-grid-pager .t-pager { float: none; display: inline-flex; align-items: center; gap: 0.15rem; }
.t-grid .t-grid-pager .t-status-text { float: none; margin-left: auto; padding: 0; line-height: 1.9rem; font-size: 0.8rem; color: var(--ec-text-muted); }
.tabulator .tabulator-footer .tabulator-footer-contents { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; }
.tabulator .tabulator-footer .tabulator-paginator { display: inline-flex !important; align-items: center !important; gap: 0.15rem !important; margin: 0 !important; color: var(--ec-text-muted); font-size: 0.8rem; }
.tabulator .tabulator-footer .tabulator-page-counter { font-size: 0.8rem; color: var(--ec-text-muted); }
.tabulator .tabulator-footer .tabulator-page-size { height: 1.9rem; border: 1px solid var(--ec-border); border-radius: 999px; padding: 0 0.6rem; margin: 0 0.5rem 0 0.25rem; background: var(--ec-surface); font-family: var(--ec-font); font-size: 0.8rem; }

/* Botones de página: mismo pill en los dos grids */
.t-grid .t-pager a.t-link, .t-grid .t-pager .t-numeric a.t-link, .t-grid .t-pager span.t-state-active,
.tabulator .tabulator-footer .tabulator-page {
    display: inline-flex !important; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem; padding: 0 0.5rem !important; margin: 0 !important;
    border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important;
    font-family: var(--ec-font); font-size: 0.8rem; font-weight: 500 !important; line-height: 1; color: var(--ec-text) !important; cursor: pointer; text-decoration: none;
}
.t-grid .t-pager a.t-link:hover, .tabulator .tabulator-footer .tabulator-page:not(.active):not(.tabulator-page-disabled):hover { background: var(--ec-surface-selectable-hover) !important; }
.t-grid .t-pager span.t-state-active, .tabulator .tabulator-footer .tabulator-page.active { background: var(--ec-action) !important; color: var(--ec-text-on-action) !important; font-weight: 600 !important; cursor: default; }
.t-grid .t-pager span.t-state-disabled, .tabulator .tabulator-footer .tabulator-page.tabulator-page-disabled { opacity: 0.35 !important; cursor: default !important; }
.t-grid .t-pager span.t-state-disabled { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem; border: 0; background: transparent; }
/* Chevrones en lugar de los sprites de Telerik y de los rótulos First/Prev/Next/Last de Tabulator */
/* SI-2496 bis (14/09): el span del icono Telerik lleva el rótulo (First, Prev…) como texto; con text-indent 0 se veía.
   font-size 0 en el span y 0.9rem solo en el ::before, igual que en Tabulator. */
.t-grid .t-pager .t-icon.t-arrow-first, .t-grid .t-pager .t-icon.t-arrow-prev, .t-grid .t-pager .t-icon.t-arrow-next, .t-grid .t-pager .t-icon.t-arrow-last { background: none !important; width: auto; height: auto; text-indent: 0; overflow: visible; font-size: 0 !important; line-height: 1; }
.t-grid .t-pager .t-icon.t-arrow-first::before, .t-grid .t-pager .t-icon.t-arrow-prev::before, .t-grid .t-pager .t-icon.t-arrow-next::before, .t-grid .t-pager .t-icon.t-arrow-last::before { font-size: 0.9rem; }
.t-grid .t-pager .t-icon.t-arrow-first::before { content: "\00AB"; }
.t-grid .t-pager .t-icon.t-arrow-prev::before { content: "\2039"; }
.t-grid .t-pager .t-icon.t-arrow-next::before { content: "\203A"; }
.t-grid .t-pager .t-icon.t-arrow-last::before { content: "\00BB"; }
.tabulator .tabulator-footer .tabulator-page[data-page="first"], .tabulator .tabulator-footer .tabulator-page[data-page="prev"],
.tabulator .tabulator-footer .tabulator-page[data-page="next"], .tabulator .tabulator-footer .tabulator-page[data-page="last"] { font-size: 0 !important; }
.tabulator .tabulator-footer .tabulator-page[data-page="first"]::before { content: "\00AB"; font-size: 0.9rem; }
.tabulator .tabulator-footer .tabulator-page[data-page="prev"]::before { content: "\2039"; font-size: 0.9rem; }
.tabulator .tabulator-footer .tabulator-page[data-page="next"]::before { content: "\203A"; font-size: 0.9rem; }
.tabulator .tabulator-footer .tabulator-page[data-page="last"]::before { content: "\00BB"; font-size: 0.9rem; }
.tabulator .tabulator-footer .tabulator-pages .tabulator-page:not([data-page]) { background: transparent !important; border: 0 !important; font-weight: 500 !important; cursor: default !important; }

/* SI-2495: formulario dentro de la sección de acciones masivas (casación de facturas) y botones
   de envío con el estilo de la casa. */
.ec-bulk__form { margin-top: 0.75rem; }
/* Panel de la casa (SI-2506 bis): rectangulo de bordes redondeados y fondo azul claro para agrupar un bloque
   de trabajo que no es ni buscador ni accion masiva (la casacion de facturas). Las tarjetas de importes
   que van dentro se quedan en blanco para destacar sobre el azul. */
.ec-panel { box-sizing: border-box; margin: 1.5rem 0 1rem; padding: 1rem 1.25rem 1.25rem; background: var(--ec-surface-highlight); border: 1px solid var(--ec-action-soft-border); border-radius: var(--ec-radius); }
.ec-panel .ec-btn, .ec-panel input[type="submit"].ec-btn, .ec-panel input[type="button"].ec-btn { float: none !important; margin: 0 !important; width: auto !important; }
.ec-panel .ec-totals-card { background: var(--ec-surface); }
.ec-bulk input[type="submit"].ec-btn, .ec-bulk input[type="button"].ec-btn { float: none !important; margin: 0 !important; width: auto !important; }
.ec-bulk__row form { display: contents; }

/* SI-2494: dato en rojo de alerta dentro de una tabla (vencimiento de suministros). */
.ec-text-danger { color: var(--ec-text); font-weight: 600; text-decoration: underline dotted var(--ec-state-danger); }

/* ── Ventanas de detalle y fichas de edición (SI-2497) ────────────────────────
   1) La ventana Telerik (Window-Detail, definida en más de un centenar de listados) toma el
      aspecto de la capa ec-modal sin tocar cada vista: esquinas redondeadas, sombra, título en
      azul y cierre con el icono de línea.
   2) Los formularios de edición heredados (editor-label / editor-field de MVC) se apilan en
      vertical con etiquetas pequeñas y campos redondeados dentro de .ec-form. */
.t-window { border: 0 !important; border-radius: 24px !important; box-shadow: var(--ec-shadow-modal) !important; background: var(--ec-surface) !important; overflow: hidden; font-family: var(--ec-font); }
.t-window .t-window-titlebar { background: var(--ec-surface) !important; border: 0 !important; padding: 1.1rem 1.5rem 0.25rem !important; margin: 0 !important; color: var(--ec-action); }
.t-window .t-window-titlebar .t-window-title { font-family: var(--ec-font); font-size: 1.2rem; font-weight: 700; color: var(--ec-action); text-shadow: none; }
.t-window .t-window-actions { top: 1rem !important; right: 1.25rem !important; }
.t-window .t-window-actions .t-link { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; }
.t-window .t-window-actions .t-link:hover { background: var(--ec-action-soft-bg); }
.t-window .t-window-actions .t-icon { background-image: url(ActionIcons/x.svg) !important; background-size: 18px 18px !important; background-position: center !important; background-repeat: no-repeat !important; width: 18px; height: 18px; }
.t-window .t-window-content { border: 0 !important; padding: 0.75rem 1.5rem 1.5rem !important; background: var(--ec-surface) !important; font-family: var(--ec-font); }
.t-overlay { background-color: var(--ec-overlay-backdrop) !important; opacity: 1 !important; }
#Details { margin-left: 0; }
#Details .title, #Details h3.title { font-family: var(--ec-font); font-size: 1rem; font-weight: 700; color: var(--ec-text); margin: 1rem 0 0.35rem; }
#Details .subtitle { font-family: var(--ec-font); font-size: 0.8rem; font-weight: 600; color: var(--ec-text-muted); margin: 0.75rem 0 0.25rem; }
#Details .message, #Details .comentari { font-family: var(--ec-font); font-size: 0.9rem; color: var(--ec-text); }
#Details .data { width: auto; max-width: 28rem; }

.ec-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ec-form .edit-box { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem 1.5rem; }
.ec-form .editor-label { display: block; float: none !important; width: auto !important; margin: 0.9rem 0 0.25rem !important; padding: 0; text-align: left !important; font-family: var(--ec-font); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ec-text-muted); flex: 1 1 100%; }
.ec-form .editor-label label { margin: 0; float: none; font-weight: 600; text-transform: none; }
.ec-form .editor-field { display: block; float: none !important; width: auto !important; margin: 0 !important; flex: 1 1 100%; }
.ec-form .editor-field input[type="text"], .ec-form .editor-field input[type="email"], .ec-form .editor-field input[type="number"], .ec-form .editor-field input[type="password"], .ec-form .editor-field select, .ec-form .editor-field textarea {
    width: 100%; max-width: 32rem; box-sizing: border-box; float: none !important; margin: 0 !important; height: 2.25rem; padding: 0 0.75rem; border: 1px solid var(--ec-border); border-radius: 999px; background: var(--ec-surface); font-family: var(--ec-font); font-size: 0.875rem; }
.ec-form .editor-field textarea { height: auto; min-height: 4.5rem; padding: 0.5rem 0.75rem; border-radius: 16px; }
.ec-form .editor-field input:focus, .ec-form .editor-field select:focus, .ec-form .editor-field textarea:focus { outline: none; border-color: var(--ec-action); box-shadow: 0 0 0 3px var(--ec-action-soft-bg); }
.ec-form .editor-field input[type="checkbox"], .ec-form .editor-field input[type="radio"] { width: auto !important; height: auto; margin: 0.35rem 0.4rem 0 0 !important; }
.ec-form .ec-btn { float: none !important; margin: 1.25rem 0.5rem 0 0 !important; width: auto !important; }
.ec-form .edit-box .clear-float { flex: 1 1 100%; height: 0; }

/* SI-2509 (decision de Joaquim, 14/09/2026): el fondo lo pinta SOLO el body (--ec-page-bg); ni
   contenedores ni cabeceras de tabla lo pisan (incluidos los contenedores del skin Telerik,
   .t-grid-header y compania: al volver transparentes las celdas th.t-header afloraba el azul claro
   del skin en Gestio Associats). Las filas NO van aqui: la zebra y el resaltado al pasar el raton
   se definen justo debajo, iguales para Tabulator y Telerik (segunda vuelta del 14/09: al apagar
   tambien las filas se perdieron zebra y hover en Productos, Asociados y Proveedores). */
.tabulator, .tabulator .tabulator-header, .tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-tableholder,
.t-grid, .t-grid.t-widget, .t-grid .t-grid-header, .t-grid .t-grid-header-wrap, .t-grid thead, .t-grid thead tr,
.t-grid .t-grid-content, .t-grid .t-grid-toolbar, .t-grid .t-toolbar, .t-grid .t-grid-footer, .t-grid .t-grid-bottom,
.t-grid th.t-header, .t-grid .t-grouping-header, .t-grid tbody td, .t-grid .t-detail-cell .t-grid,
.ec-table, .ec-table th, .ec-datatable, table.tabla-datos {
    background: transparent !important;
}
/* Zebra y resaltado, iguales en Tabulator y Telerik: la fila impar es el fondo de la pagina, la par
   lleva la franja (--ec-surface-stripe), al pasar el raton la fila se ilumina en azul suave y la
   seleccionada queda marcada. !important porque compiten con los skins de las dos librerias y con
   la regla de arriba, que apaga las celdas. */
.tabulator .tabulator-row, .tabulator .tabulator-row.tabulator-row-odd { background: transparent !important; }
.tabulator .tabulator-row.tabulator-row-even { background: var(--ec-surface-stripe) !important; }
.tabulator .tabulator-row:hover, .tabulator .tabulator-row.tabulator-row-even:hover { background: var(--ec-surface-selectable-hover) !important; }
.tabulator .tabulator-row.tabulator-selected, .tabulator .tabulator-row.tabulator-selected:hover { background: var(--ec-surface-highlight) !important; }
/* La franja solo en las tablas que la piden (.ec-zebra), igual que la regla de mas
   arriba: sin el .ec-zebra esta la pisaba con !important y Regularizar seguia con
   zebra pese a no llevar la clase. */
.t-grid.ec-zebra tbody tr.t-alt td { background: var(--ec-surface-stripe) !important; }
/* SI-2508 bis: los colores sutiles de columna de Regularizar (ec-col-*, SI-2467) por encima de la zebra; el
   bloque que apaga las celdas los tapaba. El resaltado al pasar el raton sigue ganando (va despues). */
.t-grid tbody td.ec-col-order, .t-grid tbody tr.t-alt td.ec-col-order { background: var(--ec-col-order) !important; }
.t-grid tbody td.ec-col-format, .t-grid tbody tr.t-alt td.ec-col-format { background: var(--ec-col-format) !important; }
.t-grid tbody td.ec-col-unit, .t-grid tbody tr.t-alt td.ec-col-unit { background: var(--ec-col-unit) !important; }
.t-grid tbody td.ec-col-total, .t-grid tbody tr.t-alt td.ec-col-total { background: var(--ec-col-total) !important; }
.t-grid tbody tr:hover td, .t-grid tbody tr.t-alt:hover td { background: var(--ec-surface-selectable-hover) !important; }
.t-grid tbody tr.t-state-selected td, .t-grid tbody tr.t-state-selected:hover td { background: var(--ec-surface-highlight) !important; }
.t-grid .t-detail-cell, .ec-table--nested tbody tr:nth-child(even) td { background: var(--ec-surface-stripe) !important; }

/* Pagina trabajando (Scripts/ec-busy.js): patron general de la casa -- si la pagina ha
   dejado de estar en reposo, se ve. El velo cubre la ventana con el sprite de carga, y de
   paso impide el segundo clic mientras llega la pagina nueva. La cabecera se deja fuera
   para que la navegacion siga leyendose. */
body.ec-busy::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: var(--ec-overlay-busy) url("images/loading.gif") no-repeat center center;
    cursor: progress;
}

/* SI-2541: el desplegable multiple del buscador resume lo elegido en el control
   («5 seleccionados», o el nombre cuando solo hay uno) en lugar de repartir una
   etiqueta por valor: con varios elegidos no cabian, el campo crecia y lo elegido
   dejaba de verse. La lista lleva casillas, no se cierra al marcar y pone delante
   lo ya elegido. */
.ec-search .ts-wrapper.ec-select--summary .ts-control,
.ts-wrapper.ec-select--summary .ts-control {
    flex-wrap: nowrap;
    max-height: none;
    overflow: hidden;
    padding-right: 2rem;
}

.ts-wrapper.ec-select--summary .ts-control > .item { display: none; }

.ec-select-summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ec-text);
}

.ts-wrapper.ec-select--summary .ts-dropdown .option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}