/* Nova Flow — listas, filtros y paneles de resumen en pantallas pequeñas (7 oct 2026).
   Capa de PRESENTACIÓN encima de nova-lux.css: no cambia datos, funciones ni textos. Para desactivarla basta quitar su enlace en server/server.cjs (withBanner).
   Usa solo los tokens existentes (--gn-*, --lux-*), así que el modo oscuro del centro de control la hereda sin reglas propias.
   Contrato: docs/SISTEMA-DE-LISTAS-Y-MOVIL-2026-10-07.md */

/* ---------- 1. Registros como tarjetas (teléfono) ----------
   Las tablas de REGISTROS (clientes, préstamos, pagos, equipo…) llevan data-cards: en pantallas angostas cada fila es una tarjeta con título (primera celda),
   pares «etiqueta · valor» y, al final, sus acciones. Las tablas de COMPARACIÓN (calendarios de pagos, matrices de turnos, rentabilidad) no lo llevan y siguen como tabla desplazable. */
@media screen and (max-width:720px){
 .table-wrap[data-cards]{overflow:visible;border:0;background:transparent;box-shadow:none;border-radius:0}
 .table-wrap[data-cards] table,.table-wrap[data-cards] tbody,.table-wrap[data-cards] tr,.table-wrap[data-cards] td{display:block}
 .table-wrap[data-cards] thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
 .table-wrap[data-cards] tbody{display:grid;gap:10px}
 .table-wrap[data-cards] tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;border:1px solid var(--gn-line);border-radius:var(--lux-r-lg,16px);background:var(--gn-surface);box-shadow:var(--lux-shadow-1);padding:4px 16px 8px;overflow:hidden}
 .table-wrap[data-cards] td{display:grid;align-content:start;justify-items:start;gap:3px;min-width:0;padding:8px 0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
 .table-wrap[data-cards] td::before{content:attr(data-label);font:650 11px/1.3 'Segoe UI Variable','Segoe UI',system-ui;letter-spacing:.06em;text-transform:uppercase;color:var(--gn-muted)}
 /* la primera celda es el título de la tarjeta: sin etiqueta, a todo lo ancho, con una línea que la separa de los datos */
 .table-wrap[data-cards] td:first-child{grid-column:1/-1;font-size:16px;font-weight:650;padding:12px 0 10px;border-bottom:1px solid var(--lux-hair,var(--gn-line));margin-bottom:2px}
 .table-wrap[data-cards] td:first-child::before{display:none}
 .table-wrap[data-cards] td:first-child small{display:block;margin-top:2px;font-size:13px}
 /* la celda sin encabezado son las acciones: botones cómodos para el dedo */
 .table-wrap[data-cards] td[data-label=""]{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 6px;border-top:1px solid var(--lux-hair,var(--gn-line));margin-top:4px}
 .table-wrap[data-cards] td[data-label=""]::before{display:none}
 .table-wrap[data-cards] td[data-label=""] :is(.btn,button,a){min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding-inline:16px}
 .table-wrap[data-cards] tbody tr:focus-within td{background:transparent}@media (hover:hover) and (pointer:fine){.table-wrap[data-cards] tbody tr:hover td{background:transparent}}
 @media (hover:hover) and (pointer:fine){.table-wrap[data-cards] tbody tr:hover td:first-child{box-shadow:none}}}

/* ---------- 2. Filtros plegables (teléfono) ----------
   Un renglón de más de tres controles (p. ej. Pagos y Reportes) se agrupa detrás de un botón «Filtros y acciones»; la búsqueda queda siempre a la vista.
   En pantallas anchas el botón no existe y todo sigue como antes. */
.toolbar .btn.toolbar-toggle{display:none}
@media screen and (max-width:720px){
 .toolbar-collapsible{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 .toolbar-collapsible .btn.toolbar-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;width:100%}
 .toolbar-collapsible .btn.toolbar-toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .17s cubic-bezier(.2,.7,.2,1)}
 .toolbar-collapsible.open .btn.toolbar-toggle::after{transform:rotate(-135deg) translateY(-2px)}
 .toolbar-collapsible:not(.open)>:not(:first-child):not(.toolbar-toggle){display:none}
 .toolbar-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-inline-start:8px;border-radius:999px;background:var(--gn-accent);color:#fff;font:700 12px/1 'Segoe UI Variable','Segoe UI',system-ui}
 .toolbar-count[hidden]{display:none}
 .toolbar-collapsible :is(input,select){min-height:44px}}

/* ---------- 3. Resúmenes en dos columnas (teléfono) ----------
   Tres o cuatro mosaicos de una cifra no necesitan una pantalla cada uno: en teléfono se ven de dos en dos. */
@media screen and (max-width:520px){
 .enr-stats,.enr-credit-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .enr-stat{padding:12px 14px}
 .enr-stat b{font-size:1.25rem}
 .enr-stat small{font-size:12px}}

/* ---------- 4. Zonas de toque ----------
   En pantallas táctiles, los enlaces dentro de tablas y las acciones pequeñas miden al menos 44 px de alto. */
@media (pointer:coarse){
 td a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
 .btn.small{min-height:44px}}

/* ---------- 5. Listas dentro de avisos (roles del equipo) ---------- */
.role-list{margin:0;padding-left:18px;display:grid;gap:8px}.role-list li{padding-left:2px}.role-note{margin:10px 0 0}

/* ---------- 6. Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
 .toolbar-collapsible .btn.toolbar-toggle::after{transition:none}}