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

.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col {
    /* SI-2467: mismo azul de cabecera que el resto de tablas (Telerik incluido). */
    background: var(--ec-table-header-bg);
    border-color: var(--ec-border-strong);
    color: var(--ec-text);
}

.tabulator-row.tabulator-row-even {
    background: var(--ec-surface-stripe);
}

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

.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: #fff; 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; }
.ec-field > label { margin: 0; }
.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: #fff; 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-search .t-datepicker .t-input { height: 2.25rem; font-size: 0.875rem; }
.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, y la cabecera conserva su proporción respecto
   al dato (mismo tamaño, seminegrita). */
:root { --ec-table-font: clamp(12px, 0.55vw + 5px, 15px); }
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); }
.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-font); font-weight: 600; }
.t-grid tbody td { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
    /* El contenedor de página deja de limitar: la tabla puede llegar al 100 % del display. */
    #content:has(.t-grid, .tabulator, .ec-datatable, table.tabla-datos) { width: auto !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5vw !important; padding-right: 1.5vw !important; box-sizing: border-box; }
    #content-content { overflow-x: clip; }
    /* 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; }
.ec-search--hero .ec-search__row--more .ec-field { min-width: 9rem; flex: 1 1 9rem; max-width: 16rem; }
.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; }
.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. */
.ec-bulk { padding-left: 5%; padding-right: 5%; 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; }