/* =====================================================================
   EasyGrid (EasyComponentes/Grid): grid propio.
   Usa solo los tokens de la librería (--easy-color-*, --easy-radio-base, --easy-fuente-base, --easy-sombra-popup), que define la aplicación,
   así que sigue el tema sin reglas por tema. Sin ellos usa los valores por omisión. Prefijo de clases: easy-grid-
   Los anchos de columna son variables (--easy-grid-cN) que actualiza easygrid.js al redimensionar.
   Esquinas: ningún radio fijo. Todos salen de --easy-radio-base (el "Radio de las esquinas" de la apariencia) con una escala:
   -sm = base × .75 (botones de ícono, opciones, casillas), base (campos y botones), × 1.25 (contenedor),
   -lg = base × 1.5 (popups y modales) y -pastilla = base × 2 (chips y botones redondos). Con radio 0 todo queda recto.
   Los componentes nuevos de la librería deben seguir la misma escala.
   ===================================================================== */

.easy-grid {
    --easy-grid-bg: var(--easy-color-superficie, #fff);
    --easy-grid-alt: var(--easy-color-superficie-alterna, #f9fafb);
    --easy-grid-borde: var(--easy-color-borde, #e5e7eb);
    --easy-grid-texto: var(--easy-color-texto, #1f2430);
    --easy-grid-tenue: var(--easy-color-texto-tenue, #6b7280);
    --easy-grid-acento: var(--easy-color-primario, #940404);
    --easy-grid-sobre-acento: var(--easy-color-sobre-primario, #fff);
    --easy-grid-acento-suave: var(--easy-color-primario-suave, #fbeaea);
    --easy-grid-hover: var(--easy-color-hover, #f3f4f6);
    --easy-grid-sel: var(--easy-color-seleccion, #fbeaea);
    --easy-grid-peligro: var(--easy-color-peligro, #b42318);
    --easy-grid-exito: var(--easy-color-exito, #15803d);
    --easy-grid-foco: var(--easy-color-foco, rgba(148, 4, 4, .25));
    --easy-grid-campo: var(--easy-color-campo, #fff);
    --easy-grid-campo-texto: var(--easy-color-campo-texto, #1f2430);
    --easy-grid-campo-borde: var(--easy-color-campo-borde, #ced4da);
    --easy-grid-popup: var(--easy-color-popup, #fff);
    /* Encabezado: color de cada tema para tablas (el mismo que usan los demás grids de la plataforma) */
    --easy-grid-head-bg: var(--easy-color-encabezado-tabla, #747679);
    --easy-grid-head-fg: var(--easy-color-encabezado-tabla-texto, #fff);
    --easy-grid-pie-bg: color-mix(in srgb, var(--easy-grid-texto) 4%, var(--easy-grid-bg));
    --easy-grid-fila-borde: color-mix(in srgb, var(--easy-grid-borde) 70%, var(--easy-grid-bg));
    --easy-grid-radio: var(--easy-radio-base, 8px);
    --easy-grid-radio-sm: calc(var(--easy-grid-radio) * .75);
    --easy-grid-radio-lg: calc(var(--easy-grid-radio) * 1.5);
    --easy-grid-radio-pastilla: calc(var(--easy-grid-radio) * 2);
    /* Preferencias de la aplicación (sin definir = sin efecto): ajuste del alto de fila, color de las filas pares y línea entre columnas */
    --easy-grid-alto-fila: calc(var(--easy-grid-rh) + var(--easy-ajuste-fila, 0px));
    --easy-grid-cebra: var(--easy-color-cebra, var(--easy-grid-bg));
    --easy-grid-linea-col: var(--easy-color-linea-columna, transparent);

    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--easy-grid-bg);
    color: var(--easy-grid-texto);
    border: 1px solid var(--easy-grid-borde);
    border-radius: calc(var(--easy-grid-radio) * 1.25);
    font-family: var(--easy-fuente-base, "Segoe UI", system-ui, sans-serif);
    font-size: calc(13.5px * var(--easy-escala-fuente, 1));
    line-height: 1.35;
    box-sizing: border-box;
}

.easy-grid *, .easy-grid *::before, .easy-grid *::after { box-sizing: border-box; }
.easy-grid.easy-grid-compact { font-size: calc(12.5px * var(--easy-escala-fuente, 1)); }
.easy-grid.easy-grid-comfortable { font-size: calc(14px * var(--easy-escala-fuente, 1)); }
.easy-grid-ico { flex: none; display: inline-block; vertical-align: middle; }
.easy-grid-resizing, .easy-grid-resizing * { cursor: col-resize !important; user-select: none; }

/* ---------- Barra de herramientas ---------- */

.easy-grid-toolbar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    flex-wrap: wrap;
}

.easy-grid-tb-left, .easy-grid-tb-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.easy-grid-tb-right { margin-left: auto; }
.easy-grid-title { margin: 0 8px 0 0; font-size: calc(16px * var(--easy-escala-fuente, 1)); font-weight: 650; }

.easy-grid-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    /* Estilo de botón (Apariencia > Botones): la aplicación define --easy-boton-*; sin ellos, el botón sobrio de siempre */
    border: 1px solid var(--easy-boton-borde, var(--easy-grid-campo-borde));
    border-radius: var(--easy-grid-radio);
    box-shadow: var(--easy-boton-sombra, none);
    background: var(--easy-boton-fondo, var(--easy-grid-bg));
    color: var(--easy-boton-texto, var(--easy-grid-texto));
    font: inherit;
    font-weight: var(--easy-boton-peso, 500);
    cursor: pointer;
    white-space: nowrap;
}
button.easy-grid-btn { font-weight: var(--easy-boton-peso, 500); } /* con el elemento le gana a ".shell-shell button { font: inherit }" de la aplicación */
.easy-grid-btn:hover:not(:disabled) { background: var(--easy-boton-fondo-hover, var(--easy-grid-hover)); border-color: var(--easy-boton-borde-hover, var(--easy-grid-campo-borde)); }
.easy-grid-btn:disabled { opacity: .5; cursor: default; }
.easy-grid-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--easy-grid-foco); }
.easy-grid-btn-primario { background: var(--easy-grid-acento); border-color: var(--easy-grid-acento); color: var(--easy-grid-sobre-acento); }
.easy-grid-btn-primario:hover:not(:disabled) { background: var(--easy-color-primario-fuerte, var(--easy-grid-acento)); filter: brightness(.95); }
.easy-grid-btn-peligro { background: var(--easy-grid-peligro); border-color: var(--easy-grid-peligro); color: #fff; }
.easy-grid-btn-peligro:hover:not(:disabled) { background: var(--easy-grid-peligro); filter: brightness(.92); }

.easy-grid-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--easy-grid-radio-sm);
    background: transparent;
    color: var(--easy-grid-tenue);
    cursor: pointer;
}
.easy-grid-icon-btn:hover:not(:disabled) { background: var(--easy-grid-hover); color: var(--easy-grid-texto); }
.easy-grid-icon-btn:disabled { opacity: .35; cursor: default; }
.easy-grid-icon-btn.on, .easy-grid-icon-btn.open { color: var(--easy-grid-acento); }
.easy-grid-icon-btn.open svg { transform: rotate(90deg); }
.easy-grid-icon-btn.easy-grid-danger:hover:not(:disabled) { color: var(--easy-grid-peligro); }
.easy-grid-icon-btn.easy-grid-ok { color: var(--easy-grid-exito); }
.easy-grid-tb-btn { width: 32px; height: 32px; border: 1px solid transparent; }
.easy-grid-tb-btn:hover:not(:disabled) { border-color: var(--easy-grid-borde); }

.easy-grid-badge {
    padding: 2px 10px;
    border-radius: var(--easy-grid-radio-pastilla);
    background: var(--easy-grid-acento-suave);
    color: var(--easy-grid-acento);
    font-size: calc(12px * var(--easy-escala-fuente, 1));
    font-weight: 600;
}

.easy-grid-search {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 260px;
    max-width: 100%;
    height: 32px;
    padding: 0 6px 0 10px;
    border: 1px solid var(--easy-grid-campo-borde);
    border-radius: var(--easy-grid-radio);
    background: var(--easy-grid-campo);
    color: var(--easy-grid-tenue);
}
.easy-grid-search:focus-within { border-color: var(--easy-grid-acento); box-shadow: 0 0 0 3px var(--easy-grid-foco); }
.easy-grid-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--easy-grid-campo-texto);
    font: inherit;
}
.easy-grid-search input::-webkit-search-cancel-button { display: none; }
.easy-grid-search-sm { width: 100%; height: 30px; margin-bottom: 8px; }

/* ---------- Chips de filtros ---------- */

.easy-grid-chips {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 10px;
}
.easy-grid-chips-label { font-size: calc(12px * var(--easy-escala-fuente, 1)); color: var(--easy-grid-tenue); margin-right: 2px; }
.easy-grid-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 4px 2px 10px;
    border: 1px solid color-mix(in srgb, var(--easy-grid-acento) 25%, var(--easy-grid-bg));
    border-radius: var(--easy-grid-radio-pastilla);
    background: var(--easy-grid-acento-suave);
    color: var(--easy-grid-texto);
    font-size: calc(12.5px * var(--easy-escala-fuente, 1));
}
.easy-grid-chip b { font-weight: 600; }
.easy-grid-chip-x {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: var(--easy-grid-radio-pastilla);
    background: transparent;
    color: var(--easy-grid-tenue);
    cursor: pointer;
}
.easy-grid-chip-x:hover { background: color-mix(in srgb, var(--easy-grid-acento) 15%, transparent); color: var(--easy-grid-acento); }
.easy-grid-link { border: 0; background: none; padding: 2px 4px; color: var(--easy-grid-acento); font: inherit; font-size: calc(12.5px * var(--easy-escala-fuente, 1)); cursor: pointer; }
.easy-grid-link:hover { text-decoration: underline; }

/* ---------- Barra de carga y errores ---------- */

.easy-grid-loadbar { flex: none; position: relative; height: 2px; overflow: hidden; background: transparent; }
.easy-grid-loadbar.on::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
    background: var(--easy-grid-acento);
    animation: easy-grid-load 1.1s ease-in-out infinite;
}
@keyframes easy-grid-load { 0% { left: -35%; } 100% { left: 100%; } }

.easy-grid-error {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 12px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--easy-grid-peligro) 35%, var(--easy-grid-bg));
    border-radius: var(--easy-grid-radio);
    background: color-mix(in srgb, var(--easy-grid-peligro) 8%, var(--easy-grid-bg));
    color: var(--easy-grid-peligro);
}
.easy-grid-error span { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--easy-grid-texto); }

/* ---------- Tabla ---------- */

.easy-grid-scroll {
    flex: 1 1 auto;
    min-height: 0;
    contain: inline-size; /* no aporta ancho intrínseco: el grid nunca ensancha a su contenedor */
    overflow: auto;
    position: relative;
    border-top: 1px solid var(--easy-grid-borde);
    /* Como en los grids de Syncfusion (tema.css): el encabezado de la tabla redondea sus esquinas superiores con el radio del tema */
    border-top-left-radius: var(--easy-grid-radio);
    border-top-right-radius: var(--easy-grid-radio);
    overscroll-behavior: contain;
}

.easy-grid-header, .easy-grid-row, .easy-grid-footer {
    display: grid;
    grid-template-columns: var(--easy-grid-tpl);
    width: 100%;
    min-width: var(--easy-grid-w, 100%);
}

.easy-grid-body { width: 100%; min-width: var(--easy-grid-w, 100%); }

.easy-grid-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--easy-grid-head-bg);
    border-bottom: 1px solid var(--easy-grid-borde);
}

.easy-grid-hcell {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    background: var(--easy-grid-head-bg);
    color: color-mix(in srgb, var(--easy-grid-head-fg) 88%, transparent);
    font-size: .93em;
    font-weight: 600;
    letter-spacing: .01em;
    user-select: none;
}
.easy-grid-hcell.sorted, .easy-grid-hcell.filtered { color: var(--easy-grid-head-fg); }
.easy-grid-hcell[draggable="true"] { cursor: grab; }
.easy-grid-hcell.easy-grid-dragging { opacity: .45; }
.easy-grid-hcell.easy-grid-drop { box-shadow: inset 3px 0 0 var(--easy-grid-head-fg); }

.easy-grid-hlabel {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}
.easy-grid-hlabel.clickable { cursor: pointer; }
.easy-grid-htext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.easy-grid-sort, .easy-grid-fi { display: inline-flex; align-items: center; color: var(--easy-grid-head-fg); flex: none; }
.easy-grid-sort sup { font-size: calc(9px * var(--easy-escala-fuente, 1)); margin-left: 1px; }
.easy-grid-al-right .easy-grid-hlabel, .easy-grid-hcell.easy-grid-al-right .easy-grid-hlabel { justify-content: flex-end; }
.easy-grid-hcell.easy-grid-al-center .easy-grid-hlabel { justify-content: center; }

/* Botones del encabezado en el flujo (el título se recorta antes): el filtro siempre se ve, para que la columna muestre
   que es filtrable y el popup del filtro tenga dónde anclarse aunque se abra desde el menú; el menú solo aparece al pasar el mouse */
.easy-grid-hbtns {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: -6px;
}
.easy-grid-hbtn {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--easy-grid-radio-sm);
    background: transparent;
    color: var(--easy-grid-head-fg);
    cursor: pointer;
}
.easy-grid-hbtn:hover { background: color-mix(in srgb, var(--easy-grid-head-fg) 18%, transparent); }
.easy-grid-hbtn.on { background: color-mix(in srgb, var(--easy-grid-head-fg) 22%, transparent); }
.easy-grid-hbtn-menu { display: none; }
.easy-grid-hcell:hover .easy-grid-hbtn-menu, .easy-grid-hcell:focus-within .easy-grid-hbtn-menu { display: inline-grid; }

.easy-grid-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    bottom: 0;
    /* Por debajo de las celdas fijas del encabezado (z-index 5): si no, al hacer scroll el tirador de las demás columnas se ve a través de la fija */
    z-index: 1;
    width: 9px;
    cursor: col-resize;
    touch-action: none;
}
.easy-grid-resizer::after {
    content: "";
    position: absolute;
    top: 28%;
    bottom: 28%;
    left: 4px;
    width: 1px;
    background: color-mix(in srgb, var(--easy-grid-head-fg) 35%, transparent);
    transition: background .12s, width .12s, left .12s;
}
.easy-grid-resizer:hover::after, .easy-grid-resizing .easy-grid-resizer:active::after { left: 3px; width: 3px; border-radius: 2px; background: var(--easy-grid-head-fg); top: 15%; bottom: 15%; }

.easy-grid-row {
    --easy-grid-row-bg: var(--easy-grid-bg);
    position: relative;
    background: var(--easy-grid-row-bg);
    border-bottom: 1px solid var(--easy-grid-fila-borde);
    outline: 0;
}
.easy-grid.easy-grid-zebra { --easy-grid-cebra: var(--easy-grid-alt); }
.easy-grid-row:nth-child(even) { --easy-grid-row-bg: var(--easy-grid-cebra); }
.easy-grid-row:hover, .easy-grid-row:nth-child(even):hover { --easy-grid-row-bg: var(--easy-grid-hover); }
.easy-grid-row.selected { --easy-grid-row-bg: var(--easy-grid-sel); }
.easy-grid-row.selected > .easy-grid-cell:first-child { box-shadow: inset 3px 0 0 var(--easy-grid-acento); }
.easy-grid-row:focus-visible { box-shadow: inset 0 0 0 2px var(--easy-grid-acento); }
.easy-grid-virtual .easy-grid-row { height: var(--easy-grid-alto-fila); }

.easy-grid-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: var(--easy-grid-alto-fila);
    padding: 0 12px;
    overflow: hidden;
    background: inherit;
    font-variant-numeric: tabular-nums;
}
.easy-grid-cell.easy-grid-wrap { padding-top: 8px; padding-bottom: 8px; }
/* Una celda con un menú abierto (EasyMenuBoton) deja ver la lista y queda por encima de las filas siguientes y de las columnas fijas (z-index 2) */
.easy-grid-cell:has(.easy-menu-lista) { overflow: visible; z-index: 20; }
.easy-grid-cell:has(.easy-menu-lista):not(.easy-grid-fz) { position: relative; }
/* Línea entre columnas: transparente salvo que la aplicación defina --easy-color-linea-columna */
.easy-grid-header > .easy-grid-hcell + .easy-grid-hcell,
.easy-grid-row > .easy-grid-cell + .easy-grid-cell { border-left: 1px solid var(--easy-grid-linea-col); }
.easy-grid-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.easy-grid-wrap .easy-grid-txt { white-space: normal; overflow-wrap: anywhere; }
.easy-grid-virtual .easy-grid-txt { white-space: nowrap; }

.easy-grid-al-right .easy-grid-agg { align-items: flex-end; }
.easy-grid-al-right { justify-content: flex-end; text-align: right; }
.easy-grid-al-center { justify-content: center; text-align: center; }

.easy-grid-bool { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--easy-grid-radio-pastilla); color: var(--easy-grid-tenue); }
.easy-grid-bool.si { background: color-mix(in srgb, var(--easy-grid-exito) 14%, transparent); color: var(--easy-grid-exito); }

/* Columnas fijas */
.easy-grid-fz { position: sticky; z-index: 2; background: var(--easy-grid-row-bg, var(--easy-grid-head-bg)); }
.easy-grid-hcell.easy-grid-fz { z-index: 5; background: var(--easy-grid-head-bg); }
.easy-grid-fz-act { right: 0; box-shadow: -1px 0 0 var(--easy-grid-borde); }
.easy-grid-cell-sel, .easy-grid-cell-detail { justify-content: center; padding: 0; }
.easy-grid-chk { width: 16px; height: 16px; margin: 0; accent-color: var(--easy-grid-acento); cursor: pointer; }
.easy-grid-actions { justify-content: center; gap: 0; padding: 0 4px; }

.easy-grid-detail {
    padding: 14px 18px;
    background: var(--easy-grid-alt);
    border-bottom: 1px solid var(--easy-grid-fila-borde);
    position: sticky;
    left: 0;
    width: 100%;
}

.easy-grid-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--easy-grid-pie-bg);
    border-top: 1px solid var(--easy-grid-borde);
    font-weight: 600;
    --easy-grid-row-bg: var(--easy-grid-pie-bg);
}
.easy-grid-agg { display: flex; flex-direction: column; align-items: inherit; line-height: 1.15; padding: 4px 0; white-space: nowrap; }
.easy-grid-agg small { color: var(--easy-grid-tenue); font-weight: 500; font-size: .8em; }

/* Estados vacíos y esqueleto */
.easy-grid-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: var(--easy-grid-tenue); text-align: center; position: sticky; left: 0; width: 100%; }
.easy-grid-empty p { margin: 0; }
.easy-grid-skel { height: var(--easy-grid-alto-fila); display: block; border-bottom: 1px solid var(--easy-grid-fila-borde); position: relative; overflow: hidden; grid-template-columns: none; }
.easy-grid-skel::after {
    content: "";
    position: absolute;
    inset: 11px 12px;
    border-radius: var(--easy-grid-radio-sm);
    background: linear-gradient(90deg, var(--easy-grid-hover) 25%, color-mix(in srgb, var(--easy-grid-hover) 50%, var(--easy-grid-bg)) 50%, var(--easy-grid-hover) 75%);
    background-size: 200% 100%;
    animation: easy-grid-shimmer 1.3s linear infinite;
}
@keyframes easy-grid-shimmer { to { background-position: -200% 0; } }

/* ---------- Paginador ---------- */

.easy-grid-pager {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 12px;
    border-top: 1px solid var(--easy-grid-borde);
    color: var(--easy-grid-tenue);
    font-size: .93em;
}
.easy-grid-pager-nav { display: flex; align-items: center; gap: 2px; }
.easy-grid-pager-size label { display: inline-flex; align-items: center; gap: 8px; }
.easy-grid-pager-size .easy-grid-input { width: auto; height: 28px; }
.easy-grid-pg {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--easy-grid-radio-sm);
    background: transparent;
    color: var(--easy-grid-texto);
    font: inherit;
    cursor: pointer;
}
.easy-grid-pg:hover { background: var(--easy-grid-hover); }
.easy-grid-pg.on { background: var(--easy-grid-acento); color: var(--easy-grid-sobre-acento); font-weight: 600; }
.easy-grid-gap { padding: 0 4px; }

/* ---------- Edición ---------- */

.easy-grid-edit-row { --easy-grid-row-bg: color-mix(in srgb, var(--easy-grid-acento) 5%, var(--easy-grid-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--easy-grid-acento) 35%, transparent); }
.easy-grid-edit-row .easy-grid-cell { padding: 4px 6px; overflow: visible; }
.easy-grid-edit-row .easy-grid-cell.invalido .easy-grid-input { border-color: var(--easy-grid-peligro); }
.easy-grid-edit-errors {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--easy-grid-peligro) 9%, var(--easy-grid-bg));
    color: var(--easy-grid-peligro);
    font-size: .93em;
    position: sticky;
    left: 0;
}

.easy-grid-input {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--easy-grid-campo-borde);
    border-radius: var(--easy-grid-radio-sm);
    background: var(--easy-grid-campo);
    color: var(--easy-grid-campo-texto);
    font: inherit;
}
.easy-grid-input:focus { outline: 0; border-color: var(--easy-grid-acento); box-shadow: 0 0 0 3px var(--easy-grid-foco); }
.easy-grid-input.invalido { border-color: var(--easy-grid-peligro); }
.easy-grid-input.easy-grid-num { text-align: right; }

/* ---------- Popups ---------- */

.easy-grid-backdrop { position: fixed; inset: 0; z-index: 9998; }
.easy-grid-popup {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: var(--easy-grid-popup);
    color: var(--easy-grid-texto);
    border: 1px solid var(--easy-grid-borde);
    border-radius: var(--easy-grid-radio-lg);
    box-shadow: var(--easy-sombra-popup, 0 10px 30px rgba(17, 24, 39, .18));
    overflow: hidden;
    font-size: calc(13.5px * var(--easy-escala-fuente, 1));
}
/* El selector de columnas envuelve cabecera, cuerpo y pie: solo el cuerpo (la lista) hace scroll y el pie siempre se ve */
.easy-grid-chooser { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.easy-grid-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-weight: 600; }
.easy-grid-pop-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 10px; }
.easy-grid-pop-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--easy-grid-borde); }

.easy-grid-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--easy-grid-borde); }
.easy-grid-tabs button {
    padding: 8px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--easy-grid-tenue);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}
.easy-grid-tabs button.on { color: var(--easy-grid-acento); border-bottom-color: var(--easy-grid-acento); }
.easy-grid-pop-body > .easy-grid-search-sm { margin-top: 10px; }
/* Buscador del selector de columnas: fuera del cuerpo para que no se vaya con el scroll */
.easy-grid-chooser > .easy-grid-search-sm { width: auto; flex: none; margin: 0 12px 6px; }
.easy-grid-cols-vacio { margin: 12px 4px; color: var(--easy-grid-tenue); text-align: center; }

.easy-grid-check { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 4px; cursor: pointer; border-radius: var(--easy-grid-radio-sm); }
.easy-grid-check:hover { background: var(--easy-grid-hover); }
.easy-grid-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--easy-grid-acento); flex: none; }
.easy-grid-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.easy-grid-check-all { border-bottom: 1px solid var(--easy-grid-fila-borde); border-radius: 0; margin-bottom: 4px; font-weight: 600; }
.easy-grid-lista { height: 220px; overflow: auto; }
.easy-grid-lista-msg, .easy-grid-nota { padding: 14px 8px; color: var(--easy-grid-tenue); text-align: center; font-size: .93em; }
.easy-grid-nota { padding: 6px 0 0; }

.easy-grid-cond { display: grid; gap: 6px; margin: 10px 0 0; }
.easy-grid-logica { display: flex; gap: 14px; margin: 10px 0 0; justify-content: center; }
.easy-grid-logica label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.easy-grid-error-linea { color: var(--easy-grid-peligro); font-size: .9em; }

.easy-grid-menu { display: flex; flex-direction: column; padding-bottom: 6px; }
.easy-grid-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: none;
    color: var(--easy-grid-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.easy-grid-menu button:hover { background: var(--easy-grid-hover); }
.easy-grid-menu button .easy-grid-ico { color: var(--easy-grid-tenue); }
.easy-grid-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--easy-grid-borde); }

.easy-grid-col-row { display: flex; align-items: center; gap: 2px; }
.easy-grid-col-row .easy-grid-check { flex: 1; min-width: 0; }

/* ---------- Modal de confirmación ---------- */

.easy-grid-modal-back { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: var(--easy-color-overlay, rgba(0, 0, 0, .45)); }
.easy-grid-modal { width: min(420px, calc(100vw - 32px)); background: var(--easy-grid-popup); color: var(--easy-grid-texto); border-radius: var(--easy-grid-radio-lg); box-shadow: var(--easy-sombra-popup, 0 10px 30px rgba(0, 0, 0, .3)); overflow: hidden; }
.easy-grid-modal h4 { margin: 0; padding: 16px 16px 4px; font-size: calc(16px * var(--easy-escala-fuente, 1)); }
.easy-grid-modal p { margin: 0; padding: 4px 16px 14px; color: var(--easy-grid-tenue); }

@media (max-width: 640px) {
    .easy-grid-search { width: 100%; }
    .easy-grid-tb-right { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .easy-grid-loadbar.on::after, .easy-grid-skel::after { animation: none; }
}

/* Selector de columnas: arrastrar para reordenar */
.easy-grid-col-row { border-radius: var(--easy-grid-radio-sm); cursor: grab; }
.easy-grid-col-row.easy-grid-drop { box-shadow: 0 -2px 0 0 var(--easy-grid-acento); }
.easy-grid-col-row.easy-grid-dragging { opacity: .45; }
.easy-grid-grip { display: inline-grid; place-items: center; width: 18px; color: var(--easy-grid-tenue); flex: none; }

/* ---- Selección entre páginas y chips editables ---- */
.easy-grid-selbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding: 6px 12px; font-size: calc(12.5px * var(--easy-escala-fuente, 1));
    background: var(--easy-grid-acento-suave); color: var(--easy-grid-texto);
    border-bottom: 1px solid var(--easy-grid-borde);
}
.easy-grid-selbar-n { font-weight: 600; }
.easy-grid-tenue { color: var(--easy-grid-tenue); }
.easy-grid-chip-txt {
    border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.easy-grid-chip-txt:hover:not(:disabled) { text-decoration: underline; }
.easy-grid-chip-txt:disabled { cursor: default; }