/* arlem-nucleo front/lista @ 40c7659 — no editar acá, editar en el núcleo */
/* arlem-nucleo · front/lista.css — lista de registros: ventana de alto fijo, encabezado pegado (el título abre el menú de la
   columna: ordenar + filtrar), buscador arriba, detalle en línea. Tema: cada app pisa las variables --ln-* con un selector .ln
   cargado después de este archivo (o más específico). */
.ln{--ln-fondo:#fff;--ln-texto:#1b1f1b;--ln-gris:#676c67;--ln-borde:#dfe3df;--ln-acento:#1f6f4a;--ln-fila-abierta:#f3f6f3;
  --ln-control-fondo:#fff;--ln-radio:8px;--ln-alto-control:36px;--ln-fuente-control:14px;--ln-alto-fila:44px;--ln-alto-grupo:32px;
  position:relative;color:var(--ln-texto);font:14px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif}
.ln,.ln *{box-sizing:border-box}
.ln button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.ln :focus-visible{outline:2px solid var(--ln-acento);outline-offset:-2px}

/* chip: buscador, ítems del menú, fechas, pastillas del encabezado (mismo lenguaje que los filtros de período de las apps).
   `.ln .ln-chip` para ganarle a `.ln button` (que saca borde, fondo y padding). */
.ln .ln-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;height:var(--ln-alto-control);padding:0 12px;font:inherit;font-size:var(--ln-fuente-control);
  color:var(--ln-texto);background:var(--ln-control-fondo);border:1px solid var(--ln-borde);border-radius:var(--ln-radio);white-space:nowrap;appearance:none;-webkit-appearance:none}
.ln .ln-chip[hidden]{display:none}   /* [hidden] pierde contra display:inline-flex (Limpiar oculto sin filtros) */
.ln .ln-chip.ln-activo{color:var(--ln-acento);border-color:var(--ln-acento)}
.ln button.ln-chip:hover{background:var(--ln-fila-abierta)}
input.ln-chip::-webkit-search-decoration{-webkit-appearance:none}
input.ln-chip::-webkit-date-and-time-value{text-align:left}
input.ln-chip::-webkit-calendar-picker-indicator{opacity:.6}

/* barra: buscador + Limpiar, sin fondo propio (v4.3: el fondo de .ln armaba una franja blanca fuera de la ventana y el buscador
   quedaba pegado a su borde de arriba) y alineada con el borde de la ventana, como los chips de la app. Sin "N de M": el dueño, "al pedo" */
.ln-barra{display:flex;align-items:center;gap:8px;padding:0 0 8px}
.ln-buscar{width:240px}
/* v4.4 selector de mes: ‹ Octubre 2026 › (el del medio vuelve al mes en curso; en acento si estás en otro mes) */
.ln-mes{display:flex;gap:4px;flex:none}
.ln .ln-mes-f{width:var(--ln-alto-control);justify-content:center;padding:0;font-size:18px}
.ln .ln-mes-f:disabled{opacity:.35;cursor:default}
.ln .ln-mes-n{min-width:136px;justify-content:center}
.ln-mes-corto{display:none}
.ln .ln-limpiar{color:var(--ln-acento)}   /* v4.2: es un chip más (mismo lenguaje que el buscador y los filtros de período) */

/* ventana: el único scroll; la página no crece */
.ln-ventana{position:relative;overflow:auto;border:1px solid var(--ln-borde);border-radius:var(--ln-radio);background:var(--ln-fondo);overscroll-behavior:contain}
.ln-enc,.ln-fila,.ln-pie{display:grid;grid-template-columns:var(--ln-cols);align-items:center}
.ln-enc{position:sticky;top:0;z-index:2;min-height:calc(var(--ln-alto-control) + 8px);background:var(--ln-fondo);border-bottom:1px solid var(--ln-borde);color:var(--ln-gris);font-size:13px;font-weight:600}
.ln-enc .ln-c{display:flex;align-items:center;gap:4px;padding:4px 8px;overflow:visible}
.ln-enc .ln-der{flex-direction:row-reverse}
.ln .ln-tit{display:block;min-width:0;height:28px;line-height:28px;padding:0 4px;border-radius:var(--ln-radio);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:inherit}
button.ln-tit:hover,.ln-tit.ln-abierto{background:var(--ln-fila-abierta);color:var(--ln-texto)}
/* pastilla = título con filtro activo: valor + flecha de orden + ×; 14 px fijos (no es un input: no hay zoom de iOS) para que entre en 90 px */
/* v4.3: nunca se sale de su columna (antes sí, y en Kura "Mes pasado ×" y "Cuervo ↓ ×" se pisaban): si el valor no entra se corta con "…", la × queda */
.ln .ln-pastilla{flex:0 1 auto;max-width:100%;padding:0 0 0 6px;gap:0;font-size:13px;color:var(--ln-acento);background:var(--ln-fondo);border-color:var(--ln-acento)}
.ln .ln-pastilla .ln-tit,.ln-pastilla .ln-tit:hover{height:auto;line-height:normal;min-width:0;padding:0;color:var(--ln-acento);background:none}
.ln-enc .ln-c:has(.ln-pastilla){padding-left:2px;padding-right:2px}
.ln-x{flex:none;width:18px;height:24px;border-radius:12px;font-size:17px;line-height:1;color:var(--ln-acento)}
.ln-x:hover{background:var(--ln-fila-abierta)}
.ln-flecha{flex:none;color:var(--ln-texto)}
.ln-pastilla .ln-flecha{color:inherit;margin-left:2px}
.ln-pie{position:sticky;bottom:0;z-index:2;min-height:40px;background:var(--ln-fondo);border-top:1px solid var(--ln-borde);font-weight:600}
.ln-cuerpo{position:relative}
.ln-tramo{position:absolute;top:0;left:0;right:0}
.ln-fila{height:var(--ln-alto-fila);border-bottom:1px solid var(--ln-borde)}
.ln-fila[role=button]{cursor:pointer}
.ln-abierta{background:var(--ln-fila-abierta)}
@media (hover:hover){.ln-fila:hover{background:var(--ln-fila-abierta)}}
.ln-detalle{padding:12px;background:var(--ln-fila-abierta);border-bottom:1px solid var(--ln-borde);white-space:normal}
.ln-detalle-texto{white-space:pre-line} /* detalle devuelto como string: respeta saltos de línea */
.ln-grupo{height:var(--ln-alto-grupo);line-height:var(--ln-alto-grupo);padding:0 12px;color:var(--ln-gris);font-size:13px;border-bottom:1px solid var(--ln-borde);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-vacio{padding:32px 12px;text-align:center;color:var(--ln-gris)}
.ln .ln-mas{display:block;width:100%;height:var(--ln-alto-fila);padding:0 12px;text-align:center;color:var(--ln-gris)}   /* tope: "50 de 312 · Filtrar" */
.ln .ln-mas[hidden]{display:none}
.ln-mas-ir{color:var(--ln-acento);font-weight:600}

/* celdas: una sola línea, puntos suspensivos, title con el valor completo */
.ln-c{min-width:0;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-der{text-align:right}

/* menú de columna: ordenar arriba, debajo los valores / atajos de fecha / contiene */
.ln-menu{position:absolute;z-index:6;display:flex;flex-direction:column;gap:4px;min-width:220px;max-width:320px;max-height:60vh;overflow:auto;padding:8px;
  background:var(--ln-fondo);border:1px solid var(--ln-borde);border-radius:var(--ln-radio);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.ln-menu>*{flex-shrink:0}   /* con muchos valores el menú scrollea; sin esto los chips se achicaban (Charlene, /cash Who en iPhone) */
.ln-menu .ln-chip{width:100%;justify-content:flex-start;text-align:left}
.ln-menu .ln-n{margin-left:auto;color:var(--ln-gris)}
.ln-menu-fila{display:flex;flex-wrap:wrap;gap:4px}
.ln-menu-fila .ln-chip{flex:1 1 auto;width:auto;justify-content:center}
.ln-menu-fila input.ln-chip{flex:1 1 120px}
.ln-guion{align-self:center;color:var(--ln-gris)}
.ln-menu[hidden],.ln-velo[hidden]{display:none}   /* [hidden] pierde contra display:flex/block si no se dice */
.ln-menu-tit,.ln-velo{display:none}

/* celu: columnas celu:false ocultas, controles de 44 px / 16 px, el menú es una hoja pegada abajo */
@media (max-width:699px){
  .ln{--ln-alto-control:44px;--ln-fuente-control:16px}
  .ln-enc,.ln-fila,.ln-pie{grid-template-columns:var(--ln-cols-celu)}
  .ln-no-celu,.ln-enc .ln-no-celu{display:none}
  .ln-c,.ln-grupo{padding:0 8px}
  .ln-enc .ln-c{padding:4px}
  .ln-buscar{flex:1;width:auto;min-width:0}
  .ln .ln-mes-n{min-width:96px}
  .ln-mes-largo{display:none} .ln-mes-corto{display:inline}
  .ln-velo:not([hidden]){display:block;position:fixed;inset:0;z-index:5;background:rgba(0,0,0,.3)}
  .ln-menu{position:fixed;top:auto!important;left:0!important;right:0;bottom:0;max-width:none;border-radius:12px 12px 0 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .ln-menu-tit{display:block;padding:2px 0 6px;color:var(--ln-gris);font-weight:600}
  .ln-pastilla .ln-flecha{display:none}   /* en celu la pastilla no lleva flecha: "≥01/09 ×" entra en 64 px (Kura: tapaba "Cliente"); aria-sort sigue en la celda */
}