/* =============================================================================
   SYNCFUSION - integración visual con el shell
   -----------------------------------------------------------------------------
   Los popups de Syncfusion se anexan directamente a body. Por eso estas reglas
   son globales y no pueden vivir en el CSS aislado del formulario que los abre.
   ============================================================================= */

.e-filter-popup.e-excelfilter.e-dialog {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-container) !important;
    color: var(--text-1) !important;
    background: var(--surface-2) !important;
    box-shadow: var(--shadow-popover) !important;
    font-family: var(--st-font-ui) !important;
    font-size: var(--st-textbox-font-size) !important;
}

.e-filter-popup.e-excelfilter .e-dlg-content,
.e-filter-popup.e-excelfilter .e-contextmenu,
.e-filter-popup.e-excelfilter .e-contextmenu .e-menu-item,
.e-filter-popup.e-excelfilter .e-footer-content {
    color: var(--text-1) !important;
    background: var(--surface-2) !important;
    font-family: var(--st-font-ui) !important;
    font-size: var(--st-textbox-font-size) !important;
}

.e-filter-popup.e-excelfilter .e-contextmenu .e-menu-item.e-focused,
.e-filter-popup.e-excelfilter .e-contextmenu .e-menu-item:hover {
    color: var(--text-1) !important;
    background: var(--surface-1) !important;
}

.e-filter-popup.e-excelfilter .e-menu-icon,
.e-filter-popup.e-excelfilter .e-caret,
.e-filter-popup.e-excelfilter .e-icons {
    color: var(--text-2) !important;
}

.e-filter-popup.e-excelfilter .e-searchbox .e-input-group {
    min-height: var(--st-textbox-height);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-control) !important;
    background: var(--surface-1) !important;
    box-shadow: none !important;
}

.e-filter-popup.e-excelfilter .e-searchbox .e-input-group.e-input-focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-weak) !important;
}

.e-filter-popup.e-excelfilter .e-searchbox .e-input {
    color: var(--text-1) !important;
    background: transparent !important;
    font-family: var(--st-font-ui) !important;
    font-size: var(--st-textbox-font-size) !important;
}

.e-filter-popup.e-excelfilter .e-checkboxlist,
.e-filter-popup.e-excelfilter .e-ftrchk,
.e-filter-popup.e-excelfilter .e-label {
    color: var(--text-1) !important;
    background: transparent !important;
    font-family: var(--st-font-ui) !important;
    font-size: var(--st-textbox-font-size) !important;
}

.e-filter-popup.e-excelfilter .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
    border-color: var(--border-strong) !important;
    background-color: var(--surface-1) !important;
}

.e-filter-popup.e-excelfilter .e-checkbox-wrapper .e-frame.e-check,
.e-filter-popup.e-excelfilter .e-checkbox-wrapper .e-frame.e-stop {
    border-color: var(--accent) !important;
    background-color: var(--accent) !important;
    color: var(--st-text-on-accent) !important;
}

.e-filter-popup.e-excelfilter .e-footer-content {
    border-top: 1px solid var(--border) !important;
}

.e-filter-popup.e-excelfilter.e-btn {
    min-width: 72px;
    height: 30px;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-control) !important;
    color: var(--text-2) !important;
    background: transparent !important;
    font-family: var(--st-font-ui) !important;
    font-size: var(--st-textbox-font-size) !important;
    font-weight: var(--st-fw-medium) !important;
    box-shadow: none !important;
}

.e-filter-popup.e-excelfilter.e-btn:hover {
    color: var(--text-1) !important;
    background: var(--surface-1) !important;
}

.e-filter-popup.e-excelfilter.e-btn.e-primary {
    border-color: var(--action-bg) !important;
    color: var(--action-fg) !important;
    background: var(--action-bg) !important;
}

.e-filter-popup.e-excelfilter.e-btn.e-primary:hover {
    opacity: .9;
}

/* =============================================================================
   GRILLA ESTÁNDAR — .st-grilla
   -----------------------------------------------------------------------------
   Se pone la clase en el DIV que envuelve al SfGrid, no en el componente:

       <div class="st-grilla">
           <SfGrid Height="100%" ...>
       </div>

   Vivía en el CSS aislado de StFormularioMantenimiento, y por eso solo alcanzaba
   a las grillas que estaban dentro de un formulario de mantenimiento. La primera
   grilla fuera de ese contenedor —el diálogo de listado— salía con el aspecto de
   Syncfusion sobre el fondo del shell. Al ser global, la regla es una sola y no
   hay dos definiciones que se puedan desincronizar.

   El envoltorio también resuelve el alto: es el elemento flexible que le da a
   Height="100%" contra qué medir.

   CÓMO SE PINTA. El tema bootstrap5.3 de Syncfusion no trae colores literales en
   sus reglas: los toma de variables --color-sf-*. Reasignarlas acá alcanza de una
   vez a todos los estados derivados —cabecera, borde, fila alterna, celda
   congelada, fila seleccionada bajo el cursor—, mientras que escribir una regla
   por selector deja siempre alguno sin cubrir, y el que falta aparece con el gris
   del tema sobre el fondo del shell. Es el mismo recurso que ya usaba el bloque
   del paginador, más abajo.

   Las reglas explícitas que vienen después son solo para lo que el tema NO deja
   en variables: la tipografía —que fija en 14px literales— y el realce de la fila
   seleccionada, que en unos pocos selectores está escrito como un gris fijo. Ese
   realce sale de --st-grilla-realce, la misma variable, para que no haya dos
   definiciones del mismo color.
   ============================================================================= */

.st-grilla {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;

    /* Un solo realce para la fila seleccionada y para la que está bajo el cursor:
       en un listado que se recorre con las flechas, dos verdes distintos compiten
       por la atención. Va con alpha porque el tema lo superpone al fondo. */
    --st-grilla-realce: color-mix(in srgb, var(--accent) 14%, transparent);

    --color-sf-content-bg-color: var(--surface-1);
    --color-sf-content-bg-color-alt1: var(--surface-2);
    --color-sf-content-bg-color-alt2: var(--surface-2);
    --color-sf-content-bg-color-hover: var(--st-grilla-realce);
    --color-sf-content-bg-color-selected: var(--st-grilla-realce);
    --color-sf-content-text-color: var(--text-1);
    --color-sf-content-text-color-alt1: var(--text-2);
    --color-sf-content-text-color-alt2: var(--text-2);
    --color-sf-content-text-color-hover: var(--text-1);
    --color-sf-content-text-color-selected: var(--text-1);
    --color-sf-border-light: var(--border);
    --color-sf-table-bg-color-hover: var(--st-grilla-realce);
    --color-sf-table-bg-color-selected: var(--st-grilla-realce);
    --color-sf-primary: var(--accent);
    --color-sf-primary-light: var(--accent);
}

.st-grilla > .e-grid {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    border-color: var(--border);
    color: var(--text-1);
    background: var(--surface-1);
    font-family: var(--st-font-ui);
    font-size: var(--st-textbox-font-size);
}

.st-grilla .e-headercell,
.st-grilla .e-headercelldiv,
.st-grilla .e-rowcell,
.st-grilla .e-emptyrow,
.st-grilla .e-toolbar .e-input,
.st-grilla .e-pager,
.st-grilla .e-pager .e-numericitem,
.st-grilla .e-pager .e-parentmsgbar,
.st-grilla .e-pager .e-pagerconstant,
.st-grilla .e-pager .e-dropdownlist {
    font-family: var(--st-font-ui);
    font-size: var(--st-textbox-font-size);
}

.st-grilla .e-headercelldiv {
    font-weight: var(--st-fw-semibold);
}

.st-grilla .e-toolbar {
    background: var(--surface-2);
}

/* Los pocos selectores del tema que traen el realce escrito como un gris fijo, en
   vez de tomarlo de una variable: la fila seleccionada y la fila seleccionada bajo
   el cursor. Sin esto, mover la selección con las flechas la pinta gris. */
.st-grilla .e-grid td.e-rowcell.e-active,
.st-grilla .e-grid td.e-rowcell.e-selectionbackground,
.st-grilla .e-grid.e-gridhover tr.e-row:hover td.e-rowcell.e-active {
    color: var(--text-1) !important;
    background: linear-gradient(0deg, var(--st-grilla-realce), var(--st-grilla-realce)),
                linear-gradient(0deg, var(--surface-1), var(--surface-1)) !important;
}

/* ---- Paginador ------------------------------------------------------------ */
.e-pager {
    border-color: var(--border) !important;
    color: var(--text-2) !important;
    background: var(--surface-1) !important;
    --color-sf-primary: var(--accent);
    --color-sf-primary-light: var(--accent);
    --color-sf-content-bg-color: var(--surface-1);
    --color-sf-content-bg-color-hover: var(--accent-weak);
    --color-sf-table-bg-color-hover: var(--accent-weak);
    --color-sf-border-light: var(--border);
    --color-sf-content-text-color-alt2: var(--text-2);
}

.e-pager .e-pagercontainer,
.e-pager .e-numericitem,
.e-pager .e-firstpage,
.e-pager .e-prevpage,
.e-pager .e-nextpage,
.e-pager .e-lastpage,
.e-pager .e-firstpagedisabled,
.e-pager .e-prevpagedisabled,
.e-pager .e-nextpagedisabled,
.e-pager .e-lastpagedisabled {
    border-color: var(--border) !important;
    color: var(--text-2) !important;
    background-color: var(--surface-1) !important;
}

.e-pager .e-numericitem:not(.e-currentitem):hover,
.e-pager .e-pager-default:not(.e-disable):hover {
    color: var(--accent) !important;
    background-color: var(--accent-weak) !important;
}

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-weak) !important;
}

.e-pager .e-focused,
.e-pager .e-currentitem.e-numericitem.e-focused {
    box-shadow: 0 0 0 1px var(--accent) inset !important;
}

.e-pager .e-input-group.e-input-focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-weak) !important;
}

/* El tamaño de página lo fija PoliticaPaginacion. Syncfusion 34.2.4 conserva
   el bloque en el DOM aun cuando PageSizes recibe false, por eso se retira el
   contenedor completo y no solamente el combobox. */
.e-pager .e-pagesizes {
    display: none !important;
}