/* ═══════════════════════════════════════════════════════════════
   Conciliador OC · Factura · Pago — SLEP Chiloé
   Sistema visual. Identidad de servicio público: azul pizarra, un
   acento medido y neutros levemente fríos. El color sirve para
   distinguir estados, nunca para decorar.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Superficies y tinta */
  --papel:#F4F6F8;
  --superficie:#FFFFFF;
  --superficie-2:#FAFBFC;   /* encabezados de tabla, paneles internos */
  --superficie-3:#EFF2F5;   /* franjas de total, fondos de riel */
  --tinta:#17202B;
  --tinta-media:#4E5C6B;
  --tinta-suave:#7A8798;
  --linea:#DCE1E7;
  --linea-fina:#EAEEF2;

  /* Acento institucional. Uso medido: foco, selección, enlaces. */
  --acento:#1B4D7A;
  --acento-vivo:#22608F;
  --acento-claro:#E9F0F7;
  --acento-borde:#B3C9DE;

  /* Sobre la cabecera oscura */
  --sobre-oscuro:#FFFFFF;
  --sobre-oscuro-2:#A9BACB;
  --sobre-oscuro-3:#6F8399;
  --linea-oscura:#2C3A4A;
  --superficie-oscura:#1E2937;

  /* Estados de la conciliación. Solo para estados. */
  --pagado:#2D6A4A;        --pagado-t:#E6F0EA;   --pagado-b:#BEDACB;
  --parcial:#A96A11;       --parcial-t:#FAF1DE;  --parcial-b:#E8D3AA;
  --bloqueado:#A32B3F;     --bloqueado-t:#FAE8EB; --bloqueado-b:#E5BCC4;
  --sobrepagado:#5B4B8A;   --sobrepagado-t:#EDEAF5; --sobrepagado-b:#C9C0E0;
  --pendiente:#46586B;     --pendiente-t:#EBEFF3; --pendiente-b:#C8D2DC;
  --vacio:#8A97A0;         --vacio-t:#F0F2F4;    --vacio-b:#D6DCE1;

  /* Plazos de la pestaña Facturas */
  --vencida:#A32B3F;
  --porvencer:#A96A11;
  --sindevengar:#6E4E96;

  /* Escala de espaciado: todo múltiplo de 4. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;

  /* Radios y sombras */
  --r:4px; --r-sm:3px; --r-lg:6px;
  --sombra-1:0 1px 2px rgba(23,32,43,.06);
  --sombra-2:0 1px 2px rgba(23,32,43,.05), 0 6px 18px -10px rgba(23,32,43,.22);
  --sombra-3:0 12px 34px -12px rgba(23,32,43,.30), 0 2px 6px rgba(23,32,43,.08);

  /* Tipografía */
  --fuente:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fuente-t:'IBM Plex Sans Condensed','IBM Plex Sans',system-ui,sans-serif;
  --fuente-m:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--fuente);
  background:var(--papel);
  color:var(--tinta);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Cifras y códigos siempre con dígitos de ancho fijo: las columnas de
   plata se leen alineadas aunque cambien los números. */
.mono,td.num,td.cod,.kpi .n,.kpi .m{font-family:var(--fuente-m);font-variant-numeric:tabular-nums}

/* Rótulo pequeño en versalitas: se repite en toda la interfaz. */
.rotulo,.dato .rot,.cabecera-g h3,.titulo-bloque,.bitacora h4,.panel h4,
.panel-enlaces h4,.rotulo-ficha,.hoja .bloque h3,.tarjeta-acceso label,
.kpi .et,thead th,.tabla-ficha th,.eslabon .rol{
  font-family:var(--fuente-t);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}

::selection{background:var(--acento-claro);color:var(--acento)}
:focus-visible{outline:2px solid var(--acento-vivo);outline-offset:2px;border-radius:var(--r-sm)}
.oculto{display:none !important}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ══ Acceso e instalación ═════════════════════════════════════ */

.pagina-acceso{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  padding:var(--e5) var(--e4);
  background:var(--tinta);
  /* Un degradado leve y una retícula muy tenue: el plano de color
     liso a pantalla completa se ve barato. */
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(115% 75% at 50% -10%, #26364A 0%, #17202B 58%);
  background-size:56px 56px, 56px 56px, 100% 100%;
}
.pie-acceso{
  margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--linea);
  font-size:11px;line-height:1.65;color:var(--tinta-suave);text-align:center;
}
.tarjeta-acceso{
  background:var(--superficie);border-radius:var(--r-lg);
  padding:var(--e6) var(--e6) var(--e5);
  width:100%;max-width:392px;box-shadow:var(--sombra-3);
  border-top:3px solid var(--acento);
}
.cadena-acceso{display:flex;margin-bottom:var(--e5)}
.cadena-acceso i{display:block;width:28px;height:9px;border:1px solid var(--acento-borde);border-right:none}
.cadena-acceso i:first-child{background:var(--acento);border-color:var(--acento);border-radius:2px 0 0 2px}
.cadena-acceso i:nth-child(2){background:var(--acento-claro)}
.cadena-acceso i:last-child{border-right:1px solid var(--acento-borde);border-radius:0 2px 2px 0}

.tarjeta-acceso h1{
  font-family:var(--fuente-t);font-weight:700;font-size:24px;line-height:1.14;
  letter-spacing:.015em;text-transform:uppercase;
}
.tarjeta-acceso h1 span{color:var(--acento);font-weight:600}
.tarjeta-acceso .bajada{color:var(--tinta-media);font-size:13px;margin:var(--e2) 0 var(--e5)}
.tarjeta-acceso label{display:block;font-size:10.5px;color:var(--tinta-media);margin-bottom:var(--e1)}
.tarjeta-acceso input,.tarjeta-acceso select{
  width:100%;font:inherit;font-size:14px;padding:10px 12px;
  border:1px solid var(--linea);border-radius:var(--r);
  margin-bottom:var(--e3);background:var(--superficie-2);color:var(--tinta);
  transition:border-color .12s, box-shadow .12s;
}
.tarjeta-acceso input:focus,.tarjeta-acceso select:focus{
  outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-claro);background:var(--superficie);
}
.tarjeta-acceso .btn{width:100%;justify-content:center;padding:11px 16px;margin-top:var(--e1)}
.tarjeta-acceso code{font-family:var(--fuente-m);font-size:12px;background:var(--superficie-3);padding:1px 5px;border-radius:2px}
.tarjeta-acceso a{color:var(--acento);text-underline-offset:2px}

/* Van sobre <p>: la clase "ok" también la usan las tarjetas de la
   página de carga, y sin acotar aquí les pintaba el texto de verde. */
p.error,p.ok{
  padding:10px 13px;border-radius:var(--r);font-size:13px;
  margin-bottom:var(--e4);border:1px solid transparent;border-left-width:3px;
}
p.error{background:var(--bloqueado-t);color:var(--bloqueado);border-color:var(--bloqueado-b);border-left-color:var(--bloqueado)}
p.ok{background:var(--pagado-t);color:var(--pagado);border-color:var(--pagado-b);border-left-color:var(--pagado)}

.titulo-bloque{
  font-size:11px;color:var(--tinta-media);
  margin:var(--e5) 0 var(--e3);padding-top:var(--e4);border-top:1px solid var(--linea);
}
.tenue{color:var(--tinta-media);font-size:12.5px}
.tabla-simple{width:100%;border-collapse:collapse;font-size:13px}
.tabla-simple td{padding:10px 0;border-bottom:1px solid var(--linea-fina);vertical-align:middle}
.tabla-simple tr:last-child td{border-bottom:none}
.tabla-simple form{margin:0}
.caja-codigo{
  width:100%;font-family:var(--fuente-m);font-size:12px;padding:10px 11px;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--superficie-2);
  color:var(--tinta);resize:vertical;line-height:1.6;
}

/* ══ Cabecera institucional ═══════════════════════════════════ */

/* Dos niveles: arriba quién es el servicio, abajo qué es esta
   pantalla. Antes iba todo apretado en una sola línea. */
.barra-simple{
  background:var(--tinta);color:var(--sobre-oscuro);
  padding:0 var(--e5);position:sticky;top:0;z-index:60;
  box-shadow:0 1px 0 rgba(23,32,43,.14), 0 4px 14px -8px rgba(23,32,43,.5);
  display:block;
}
.fila-inst{
  display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap;
  padding:7px 0 6px;border-bottom:1px solid var(--linea-oscura);
}
.fila-inst .organismo{
  font-family:var(--fuente-t);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--sobre-oscuro-2);
}
.fila-inst .sesion{margin-left:auto;font-size:12px;color:var(--sobre-oscuro-3);display:flex;align-items:center;gap:var(--e2)}
.fila-inst .sesion .quien{color:var(--sobre-oscuro-2)}
.barra-simple a{color:var(--sobre-oscuro-2);text-decoration:none;border-bottom:1px solid transparent;transition:color .12s,border-color .12s}
.barra-simple a:hover{color:#fff;border-bottom-color:var(--sobre-oscuro-3)}

.fila-titulo{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap;padding:11px 0 13px}
.fila-titulo .titulo{
  font-family:var(--fuente-t);font-weight:700;font-size:19px;letter-spacing:.01em;
  color:#fff;display:flex;align-items:baseline;gap:10px;
}
.fila-titulo .tenue-claro{
  font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sobre-oscuro-3);
}
.fila-titulo .volver{font-size:13px;font-weight:600;color:var(--sobre-oscuro-2)}

/* Frescura de los informes, como pastillas de estado. */
.frescura{margin-left:auto;display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center}
.pastilla{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--sobre-oscuro-2);background:var(--superficie-oscura);
  border:1px solid var(--linea-oscura);border-radius:20px;padding:3px 11px 3px 8px;
  white-space:nowrap;
}
.pastilla i{width:6px;height:6px;border-radius:50%;background:var(--sobre-oscuro-3);flex:none}
.pastilla.fresco i{background:#4FA97B}
.pastilla.viejo i{background:#C98A2A}
.pastilla.falta{color:#E2A5AF;border-color:#4A2B33;background:#2A1D22}
.pastilla.falta i{background:#C25668}
.pastilla b{font-weight:500;color:var(--sobre-oscuro-2);font-family:var(--fuente-m);font-size:11px}
.pastilla .rot{font-family:var(--fuente);letter-spacing:0;text-transform:none;font-weight:400;color:var(--sobre-oscuro-3)}

/* ══ Botones y controles ══════════════════════════════════════ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid var(--acento);background:var(--acento);color:#fff;
  padding:8px 15px;border-radius:var(--r);text-decoration:none;white-space:nowrap;
  transition:background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:hover{background:var(--acento-vivo);border-color:var(--acento-vivo)}
.btn:active{background:var(--acento);box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}

/* Secundario: sobre fondo claro, que es donde se usa siempre. */
.btn.fantasma{background:var(--superficie);color:var(--tinta-media);border-color:var(--linea)}
.btn.fantasma:hover{background:var(--superficie-2);color:var(--tinta);border-color:#C3CBD4}
.btn.fantasma.oscuro{color:var(--acento);border-color:var(--acento-borde);background:var(--superficie)}
.btn.fantasma.oscuro:hover{background:var(--acento-claro);border-color:var(--acento);color:var(--acento)}
.btn.oscuro{color:var(--acento);border-color:var(--acento-borde);background:var(--superficie)}
.btn.oscuro:hover{background:var(--acento-claro);border-color:var(--acento)}

.btn.mini{font-size:11.5px;padding:5px 10px;font-weight:600;letter-spacing:.01em}
.btn:disabled{opacity:.45;cursor:not-allowed;background:var(--superficie-3);border-color:var(--linea);color:var(--tinta-suave)}
.btn.fantasma:disabled{background:var(--superficie-2)}
input[type=file]{display:none}

/* ══ Cuerpo ═══════════════════════════════════════════════════ */

main{padding:var(--e5) var(--e5) var(--e7);max-width:1560px;margin:0 auto}
.cargando{padding:80px var(--e5);text-align:center;color:var(--tinta-suave);font-size:14px}
footer{
  padding:var(--e5) var(--e5) var(--e6);color:var(--tinta-suave);font-size:12px;
  text-align:center;border-top:1px solid var(--linea);margin-top:var(--e5);
}

/* ── Avisos ─────────────────────────────────────────────────── */

#avisos:not(:empty){margin-bottom:var(--e4)}
.aviso{
  background:var(--parcial-t);border:1px solid var(--parcial-b);
  border-left:3px solid var(--parcial);
  padding:11px 15px;border-radius:var(--r);font-size:13px;
  margin-bottom:var(--e2);line-height:1.55;
}
.aviso.malo{background:var(--bloqueado-t);border-color:var(--bloqueado-b);border-left-color:var(--bloqueado)}
.aviso.nota{background:var(--superficie);border-color:var(--linea);border-left-color:var(--vacio);color:var(--tinta-media)}
.aviso b{font-weight:600}

.mas-avisos{
  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;background:none;border:0;
  color:var(--tinta-media);padding:var(--e1) 0 var(--e3);
  display:inline-flex;align-items:center;gap:5px;
}
.mas-avisos::after{content:"▾";font-size:10px;color:var(--tinta-suave)}
.mas-avisos[aria-expanded="true"]::after{content:"▴"}
.mas-avisos:hover{color:var(--acento)}
.bloque-notas{margin-top:0}

/* ── Resumen: la cifra principal y la plata ─────────────────── */

/* Antes eran ocho recuadros del mismo peso peleando entre sí, y los
   estados salían dos veces: aquí y en el gráfico. Ahora arriba va el
   dinero —que no estaba en ninguna parte— y los estados viven una
   sola vez, en el gráfico, que además filtra. */
.tira-kpi{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--r) var(--r) 0 0;box-shadow:var(--sombra-1);
}
.kpi-principal{
  padding:var(--e3) var(--e5);border-right:1px solid var(--linea);
  min-width:230px;display:flex;flex-direction:column;justify-content:center;
  background:var(--superficie-2);border-radius:var(--r) 0 0 0;
}
.kpi-principal .et{font-size:10.5px;color:var(--tinta-media);font-family:var(--fuente-t);
  font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.kpi-principal .n{
  font-family:var(--fuente-m);font-variant-numeric:tabular-nums;
  font-size:32px;font-weight:600;line-height:1.08;letter-spacing:-.02em;margin-top:2px;
}
.kpi-principal .sub{font-size:12px;color:var(--tinta-suave);margin-top:3px}

.kpi-plata{
  flex:1 1 420px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.kpi-cifra{
  padding:var(--e3) var(--e4);border-left:1px solid var(--linea-fina);
  display:flex;flex-direction:column;justify-content:center;min-width:0;
}
.kpi-cifra:first-child{border-left:none}
.kpi-cifra .et{font-size:10px;color:var(--tinta-suave);font-family:var(--fuente-t);
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kpi-cifra .v{
  font-family:var(--fuente-m);font-variant-numeric:tabular-nums;
  font-size:18px;font-weight:500;line-height:1.2;margin-top:3px;letter-spacing:-.01em;
}
.kpi-cifra .v.saldo{color:var(--parcial)}
.kpi-cifra .v.pagado{color:var(--pagado)}
.kpi-cifra .nota{font-size:11px;color:var(--tinta-suave);margin-top:2px}

/* ── Gráfico y filtro por estado ────────────────────────────── */

.grafico{
  background:var(--superficie);border:1px solid var(--linea);border-top:none;
  border-radius:0 0 var(--r) var(--r);padding:var(--e3) var(--e5) var(--e3);
  box-shadow:var(--sombra-1);
}
/* El gráfico describe las órdenes, así que en las pestañas de
   documentos ocupa espacio sin decir nada. Se puede plegar y la
   elección queda guardada en el navegador de cada uno. */
.grafico.plegado{padding-bottom:var(--e4)}
.grafico.plegado .filas-g{display:none}
.grafico.plegado .barra-apilada{margin-bottom:0;height:22px}
.plegar-g{
  font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;background:none;
  border:1px solid var(--linea);color:var(--tinta-media);padding:4px 10px;border-radius:var(--r);
}
.plegar-g:hover{background:var(--superficie-2);color:var(--tinta);border-color:#C3CBD4}

.cabecera-g{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;margin-bottom:var(--e3)}
.cabecera-g h3{font-size:11px;color:var(--tinta-media);letter-spacing:.11em}
.cabecera-g h3 .tenue{font-size:11px;color:var(--tinta-suave);letter-spacing:.02em;text-transform:none}
.cambia-eje{margin-left:auto;display:flex;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.cambia-eje button{
  font:inherit;font-size:11.5px;font-weight:600;padding:5px 13px;border:none;
  background:var(--superficie);color:var(--tinta-media);cursor:pointer;transition:background-color .12s,color .12s;
}
.cambia-eje button:hover{background:var(--superficie-2);color:var(--tinta)}
.cambia-eje button.activo{background:var(--acento);color:#fff}
.limpiar-filtro{
  font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;background:var(--acento-claro);
  border:1px solid var(--acento-borde);color:var(--acento);padding:4px 11px;border-radius:20px;
}
.limpiar-filtro:hover{background:#DCE8F3}

.barra-apilada{width:100%;height:26px;display:block;margin-bottom:var(--e3);border-radius:2px;overflow:hidden}
.barra-apilada .seg{cursor:pointer;transition:opacity .14s}
.barra-apilada .seg.apagado{opacity:.22}
.barra-apilada:hover .seg{opacity:.72}
.barra-apilada .seg:hover{opacity:1}

/* Siete estados en una columna dejaban el panel muy alto y media
   pantalla vacía a la derecha. En dos columnas ocupa el ancho que ya
   estaba disponible y la tabla sube casi doscientos píxeles. */
.filas-g{display:grid;gap:1px var(--e5);grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.fila-g{
  display:grid;grid-template-columns:9px minmax(96px,142px) 1fr 78px 40px;
  align-items:center;gap:var(--e3);
  background:none;border:none;font:inherit;font-size:12.5px;text-align:left;
  padding:5px var(--e2);cursor:pointer;border-radius:var(--r-sm);color:var(--tinta);
  transition:background-color .12s;
}
.fila-g:hover{background:var(--superficie-2)}
.fila-g.activa{background:var(--acento-claro);box-shadow:inset 2px 0 0 var(--acento)}
.fila-g .punto{width:9px;height:9px;border-radius:2px;display:block}
.fila-g .et{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-g.activa .et{font-weight:600}
.fila-g .riel{background:var(--superficie-3);height:6px;border-radius:3px;overflow:hidden}
.fila-g .relleno{display:block;height:100%;border-radius:3px}
.fila-g .val{text-align:right;font-family:var(--fuente-m);font-variant-numeric:tabular-nums;font-size:12px}
.fila-g .pct{text-align:right;color:var(--tinta-suave);font-family:var(--fuente-m);font-size:11.5px}

.s-pagado{fill:var(--pagado)} .s-parcial{fill:var(--parcial)} .s-bloqueado{fill:var(--bloqueado)}
.s-sobrepagado{fill:var(--sobrepagado)} .s-devengado{fill:#4E687E} .s-sindevengo{fill:#8195A6}
.s-sinfactura{fill:var(--vacio)}
.p-pagado,.f-pagado{background:var(--pagado)} .p-parcial,.f-parcial{background:var(--parcial)}
.p-bloqueado,.f-bloqueado{background:var(--bloqueado)}
.p-sobrepagado,.f-sobrepagado{background:var(--sobrepagado)}
.p-devengado,.f-devengado{background:#4E687E} .p-sindevengo,.f-sindevengo{background:#8195A6}
.p-sinfactura,.f-sinfactura{background:var(--vacio)}

/* ── Pestañas ───────────────────────────────────────────────── */

.tabs{display:flex;margin-top:var(--e5);border-bottom:1px solid var(--linea);flex-wrap:wrap;gap:2px}
.tab{
  font:inherit;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;
  padding:10px 15px;color:var(--tinta-media);border-bottom:2px solid transparent;
  margin-bottom:-1px;display:inline-flex;align-items:center;gap:7px;
  border-radius:var(--r) var(--r) 0 0;transition:color .12s,background-color .12s;
}
.tab:hover{color:var(--tinta);background:var(--superficie-2)}
.tab[aria-selected="true"]{color:var(--acento);border-bottom-color:var(--acento);background:var(--superficie)}
.tab .cnt{
  font-family:var(--fuente-m);font-variant-numeric:tabular-nums;font-size:11px;font-weight:500;
  background:var(--superficie-3);color:var(--tinta-media);border-radius:10px;padding:1px 7px;
}
.tab[aria-selected="true"] .cnt{background:var(--acento);color:#fff}
.tab.alerta .cnt{background:var(--bloqueado-t);color:var(--bloqueado)}
.tab.alerta[aria-selected="true"] .cnt{background:var(--bloqueado);color:#fff}

/* ── Barra de filtros ───────────────────────────────────────── */

.filtros{display:grid;gap:var(--e2);padding:var(--e3) 0}
.fila-filtros,.fila-reglas{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap}
/* La segunda fila cambia los números para todo el equipo, así que se
   distingue de la primera: fondo propio y un rótulo que lo dice. */
.fila-reglas{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);
  padding:var(--e2) var(--e3);box-shadow:var(--sombra-1);
}
.rot-grupo{
  font-family:var(--fuente-t);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-suave);padding-right:var(--e1);white-space:nowrap;
}
.fila-reglas .btn.mini{height:30px}
.filtros input[type=search],.filtros select{
  font:inherit;font-size:13px;padding:7px 11px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--superficie);color:var(--tinta);
  transition:border-color .12s,box-shadow .12s;height:34px;
}
.filtros select{padding-right:var(--e5);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A8798' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;cursor:pointer}
.filtros input[type=search]:focus,.filtros select:focus{
  outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-claro);
}
.filtros input[type=search]{min-width:240px;flex:1 1 240px;max-width:380px}
.filtros .btn{flex:0 0 auto;height:34px}
.filtros .btn.mini{height:34px;padding:0 12px}
.filtros .cuenta{
  margin-left:auto;font-size:12px;color:var(--tinta-media);
  font-family:var(--fuente-m);font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* Separador entre filtrar-lo-que-veo y cambiar-cómo-se-calcula. */
.sep-filtros{width:1px;align-self:stretch;background:var(--linea);margin:0 var(--e1)}
.filtros .btn.filtrando{
  border-color:var(--acento);background:var(--acento-claro);color:var(--acento);
  box-shadow:inset 0 0 0 1px var(--acento-borde);
}

/* ── Menús desplegables de casillas ─────────────────────────── */

.menu-columnas{position:relative}
.desplegable{
  position:absolute;top:calc(100% + 6px);left:0;z-index:80;background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra-3);
  padding:var(--e2) var(--e3) var(--e3);min-width:190px;display:grid;gap:1px;
}
.desplegable label{
  display:flex;align-items:center;gap:9px;font-size:12.5px;padding:5px 3px;
  cursor:pointer;white-space:nowrap;border-radius:var(--r-sm);
}
.desplegable label:hover{background:var(--superficie-2)}
.desplegable input{accent-color:var(--acento)}
.desplegable.ancho{min-width:340px;max-width:min(470px,90vw);max-height:60vh;overflow:auto}
.desplegable .cabecera-menu{
  font-size:11.5px;color:var(--tinta-media);padding:2px 3px var(--e2);
  border-bottom:1px solid var(--linea-fina);margin-bottom:var(--e1);line-height:1.5;
}
.desplegable .pie-menu{
  display:flex;gap:6px;padding-top:var(--e2);margin-top:var(--e1);
  border-top:1px solid var(--linea-fina);
}
.desplegable .pie-menu.tenue{display:block;font-size:11.5px;line-height:1.5;color:var(--tinta-media)}
.desplegable label.fila-cuenta{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center}
.desplegable label.fila-cuenta .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.fila-plazo{
  display:grid;grid-template-columns:1fr 68px;gap:var(--e1) var(--e3);align-items:center;
  padding:7px 3px;border-bottom:1px solid var(--linea-fina);
}
.fila-plazo .rot{font-size:12.5px}
.fila-plazo input{
  font:inherit;font-size:12.5px;font-family:var(--fuente-m);text-align:right;
  padding:5px 8px;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--superficie-2);width:100%;
}
.fila-plazo input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-claro)}
.fila-plazo .tenue{grid-column:1 / -1;margin-top:-3px}
.fila-nc{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:8px 3px;border-bottom:1px solid var(--linea-fina);cursor:pointer;white-space:normal;
}
.fila-nc input{margin-top:4px;accent-color:var(--acento)}
.fila-nc b{font-weight:600;font-size:12.5px}

/* ── Chips de alerta ────────────────────────────────────────── */

.tira-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 var(--e3)}
.chip{
  font:inherit;font-size:12.5px;cursor:pointer;background:var(--superficie);
  border:1px solid var(--linea);color:var(--tinta-media);padding:5px 12px;border-radius:16px;
  display:inline-flex;align-items:center;gap:6px;transition:border-color .12s,background-color .12s,color .12s;
}
.chip b{font-family:var(--fuente-m);font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:600}
.chip:hover{border-color:#C3CBD4;background:var(--superficie-2)}
.chip.activo{background:var(--tinta);border-color:var(--tinta);color:#fff}
.chip.activo b{color:#fff}
.chip.a-vencida{border-color:var(--bloqueado-b);color:var(--vencida)}
.chip.a-porvencer{border-color:var(--parcial-b);color:var(--parcial)}
.chip.a-sindevengar{border-color:#D3C6E4;color:var(--sindevengar)}
.chip.a-duda{border-color:var(--sobrepagado-b);color:var(--sobrepagado)}
.chip.a-vencida b,.chip.a-porvencer b,.chip.a-sindevengar b,.chip.a-duda b{color:inherit}
.chip.a-vencida.activo{background:var(--vencida);border-color:var(--vencida);color:#fff}
.chip.a-porvencer.activo{background:var(--parcial);border-color:var(--parcial);color:#fff}
.chip.a-sindevengar.activo{background:var(--sindevengar);border-color:var(--sindevengar);color:#fff}
.chip.a-duda.activo{background:var(--sobrepagado);border-color:var(--sobrepagado);color:#fff}
.chip.activo b,.chip.a-vencida.activo b,.chip.a-porvencer.activo b,
.chip.a-sindevengar.activo b,.chip.a-duda.activo b{color:#fff}

/* ── Tablas ─────────────────────────────────────────────────── */

.marco{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);
  overflow:auto;max-height:66vh;box-shadow:var(--sombra-1);
}
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{
  position:sticky;top:0;z-index:5;background:var(--superficie-2);
  text-align:left;font-size:10.5px;color:var(--tinta-media);
  padding:10px var(--e3);border-bottom:1px solid var(--linea);
  white-space:nowrap;cursor:pointer;user-select:none;position:relative;
  box-shadow:inset 0 -1px 0 var(--linea);
}
thead th:hover{color:var(--tinta);background:var(--superficie-3)}
thead th .flecha{color:var(--acento);margin-left:2px}
tbody td{padding:10px var(--e3);border-bottom:1px solid var(--linea-fina);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr.oc{cursor:pointer;transition:background-color .1s}
tbody tr.oc:hover{background:var(--acento-claro)}
tbody tr.abierta{background:var(--acento-claro)}
td.num{text-align:right;white-space:nowrap}
td.cod{white-space:nowrap}
.trunc{max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.bajo-rut{font-family:var(--fuente-m);font-size:11px;color:var(--tinta-suave);margin-top:1px;letter-spacing:-.01em}

/* Tabla de ancho fijo: la fila entra sin barra horizontal. */
table.fija{table-layout:fixed}
/* En la tabla ancha el espacio horizontal es escaso: el aire va en el
   alto de la fila, no en los costados, para que los títulos de
   columna no salgan cortados. */
table.fija thead th{padding:9px 10px;overflow:hidden;text-overflow:ellipsis}
table.fija tbody td{padding:9px 10px;font-size:12.5px;overflow:hidden}
table.fija td.cod,table.fija td.num{font-size:12px}
table.fija td .trunc{max-width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.fija td.num{white-space:nowrap}

/* El tirador de ancho vive en el borde del encabezado. */
table.fija thead th{padding-right:14px}
.tirador{position:absolute;top:0;right:0;width:10px;height:100%;cursor:col-resize;z-index:6}
.tirador::after{content:"";position:absolute;top:24%;right:3px;width:1px;height:52%;
  background:var(--linea);transition:background-color .12s,width .12s}
thead:hover .tirador::after{background:#BFC8D2}
.tirador:hover::after{background:var(--acento);width:2px}
body.ajustando{cursor:col-resize;user-select:none}
body.ajustando .tirador::after{background:var(--acento);width:2px}

/* ── Cadena de tres eslabones: OC · documento · pago ────────── */

.chain{display:inline-flex;vertical-align:middle}
.chain i{display:block;width:15px;height:8px;background:var(--superficie-3);
  border:1px solid var(--linea);border-right:none;font-style:normal}
.chain i:first-child{border-radius:2px 0 0 2px}
.chain i:last-child{border-right:1px solid var(--linea);border-radius:0 2px 2px 0}
.chain i.on{background:var(--pagado);border-color:var(--pagado)}
.chain i.med{background:var(--parcial);border-color:var(--parcial)}
.chain i.mal{background:var(--bloqueado);border-color:var(--bloqueado)}
.chain i.mas{background:var(--sobrepagado);border-color:var(--sobrepagado)}

/* ── Etiquetas de estado ────────────────────────────────────── */

.et-estado,.et-alerta{
  font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  padding:2px 8px;border-radius:3px;display:inline-block;
  border:1px solid transparent;
}
.e-pagado,.a-pagadaok{background:var(--pagado-t);color:var(--pagado);border-color:var(--pagado-b)}
.e-parcial,.a-porvencer{background:var(--parcial-t);color:var(--parcial);border-color:var(--parcial-b)}
.e-bloqueado,.a-vencida{background:var(--bloqueado-t);color:var(--bloqueado);border-color:var(--bloqueado-b)}
.e-sobrepagado{background:var(--sobrepagado-t);color:var(--sobrepagado);border-color:var(--sobrepagado-b)}
.e-devengado,.e-sindevengo,.a-enplazo{background:var(--pendiente-t);color:var(--pendiente);border-color:var(--pendiente-b)}
.e-sinfactura,.a-nc{background:var(--vacio-t);color:#6B7883;border-color:var(--vacio-b)}
.a-sindevengar{background:#F1ECF8;color:var(--sindevengar);border-color:#D3C6E4}

/* Marca que acompaña al estado sin reemplazarlo. */
.senal{
  display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  font-size:10px;font-weight:700;line-height:1;border-radius:50%;margin-left:5px;
  background:var(--bloqueado-t);color:var(--bloqueado);border:1px solid var(--bloqueado-b);
  vertical-align:middle;cursor:help;flex:none;
}
td.col-estado{white-space:nowrap}

.et-dias{
  font-family:var(--fuente-m);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;
  background:var(--parcial-t);color:var(--parcial);padding:2px 8px;border-radius:3px;
  display:inline-block;border:1px solid var(--parcial-b);
}
.et-dias.grave{background:var(--bloqueado-t);color:var(--bloqueado);border-color:var(--bloqueado-b)}
.et-dias.suave{background:var(--superficie-3);color:var(--tinta-media);border-color:var(--linea)}

.pill{font-family:var(--fuente-m);font-size:11px;background:var(--superficie-3);
  border:1px solid var(--linea);padding:1px 6px;border-radius:2px}

/* ── Paneles internos de fila ───────────────────────────────── */

tr.detalle td{background:var(--superficie-2);padding:0}
.panel{padding:var(--e4) var(--e4) var(--e5);border-left:3px solid var(--acento)}
.panel h4{font-size:11px;color:var(--tinta-media);margin:0 0 var(--e2)}
.panel table{font-size:12px;background:#fff;border:1px solid var(--linea);margin-bottom:var(--e4);border-radius:var(--r);overflow:hidden}
.panel thead th{position:static;background:var(--superficie-2);font-size:10px;box-shadow:none}
.panel .vacio{font-size:12px;color:var(--tinta-suave);padding:var(--e2) 0 var(--e4)}

/* ── Pestaña Enlazar ────────────────────────────────────────── */

#marco-enlazar{margin-top:2px}
.panel-enlaces{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);
  padding:var(--e4) var(--e4) var(--e2);margin-bottom:var(--e3);box-shadow:var(--sombra-1);
}
.panel-enlaces h4{font-size:11px;color:var(--tinta-media);margin-bottom:var(--e2)}
.tarjeta-enlace{
  display:grid;grid-template-columns:minmax(210px,310px) 1fr;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);
  margin-bottom:var(--e2);overflow:hidden;box-shadow:var(--sombra-1);
}
.lado-oc{padding:var(--e4);background:var(--superficie-2);border-right:1px solid var(--linea)}
.lado-oc .cod{font-family:var(--fuente-m);font-size:13px}
.lado-oc .fuerte{font-weight:600}
.lado-oc .monto-oc{
  font-family:var(--fuente-m);font-variant-numeric:tabular-nums;font-size:16px;
  margin-top:var(--e2);color:var(--tinta);font-weight:500;
}
.lado-docs{padding:var(--e1) 0}
.candidato{
  display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;justify-content:space-between;
  padding:10px var(--e4);border-bottom:1px solid var(--linea-fina);
}
.candidato:last-child{border-bottom:none}
.candidato .cod{font-family:var(--fuente-m)}
.candidato .acciones-cand{display:flex;align-items:center;gap:var(--e3);margin-left:auto}
.candidato .mono{font-family:var(--fuente-m);font-variant-numeric:tabular-nums}

/* ── Diálogo de selección de orden ──────────────────────────── */

#dialogo{
  position:fixed;inset:0;background:rgba(23,32,43,.5);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:6vh var(--e4);z-index:200;
}
.caja-dialogo{
  background:var(--superficie);border-radius:var(--r-lg);width:100%;max-width:780px;
  max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--sombra-3);overflow:hidden;
}
.caja-dialogo header{
  display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e4) var(--e5) var(--e3);
  border-bottom:1px solid var(--linea);background:var(--superficie-2);
}
.caja-dialogo h3{font-family:var(--fuente-t);font-size:17px;font-weight:700}
.caja-dialogo header .btn{margin-left:auto}
#dlg-buscar{
  margin:var(--e3) var(--e5);font:inherit;font-size:13px;padding:9px 12px;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--superficie-2);
}
#dlg-buscar:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-claro)}
#dlg-lista{overflow:auto;padding:0 var(--e4) var(--e4)}
.fila-oc{
  display:grid;grid-template-columns:154px 1fr auto 116px;align-items:center;gap:var(--e3);
  width:100%;background:none;border:none;border-bottom:1px solid var(--linea-fina);
  font:inherit;font-size:13px;text-align:left;padding:11px var(--e2);cursor:pointer;color:var(--tinta);
  border-radius:var(--r-sm);
}
.fila-oc:hover{background:var(--acento-claro)}
.fila-oc .cod{font-family:var(--fuente-m)}
.fila-oc .fuerte{font-weight:600}
.fila-oc .mono{font-family:var(--fuente-m);font-variant-numeric:tabular-nums;text-align:right}
.fila-oc:disabled{opacity:.5}

/* ══ Ficha de la orden ════════════════════════════════════════ */

#ficha{
  position:fixed;inset:0;z-index:120;background:rgba(23,32,43,.5);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:var(--e5) var(--e4);overflow:auto;
}
.caja-ficha{
  background:var(--superficie);border-radius:var(--r-lg);width:100%;max-width:1000px;
  box-shadow:var(--sombra-3);position:relative;overflow:hidden;
}
/* La barra de acciones es del mismo color que el encabezado de la
   ficha: arriba queda un solo bloque oscuro y no una franja blanca
   suelta encima de otro bloque. */
.barra-ficha{
  position:sticky;top:0;z-index:2;display:flex;gap:var(--e2);justify-content:flex-end;
  padding:11px var(--e5);background:var(--tinta);border-bottom:none;
}
.barra-ficha .btn{background:var(--acento);border-color:var(--acento);color:#fff}
.barra-ficha .btn:hover{background:var(--acento-vivo);border-color:var(--acento-vivo)}
.barra-ficha .btn.fantasma{background:transparent;color:var(--sobre-oscuro-2);border-color:var(--linea-oscura)}
.barra-ficha .btn.fantasma:hover{background:var(--superficie-oscura);color:#fff;border-color:#3C4C5E}
body.con-ficha{overflow:hidden}

.hoja{padding:0 var(--e6) var(--e6);color:var(--tinta);overflow-wrap:anywhere}
.cabeza-ficha{
  position:static;display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--e5);background:var(--tinta);color:#fff;
  padding:var(--e3) var(--e6) var(--e5);
  margin:0 calc(-1 * var(--e6)) var(--e5);
  border-radius:0;box-shadow:none;border-bottom:3px solid var(--acento);
}
.cabeza-ficha .organismo{
  font-family:var(--fuente-t);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sobre-oscuro-2);font-weight:600;
}
.cabeza-ficha h2{
  font-family:var(--fuente-m);font-size:27px;font-weight:600;letter-spacing:-.015em;
  margin-top:var(--e1);line-height:1.1;overflow-wrap:anywhere;
}
.folio-ficha{text-align:right;flex:0 0 auto;padding-top:2px}
.rotulo-ficha{
  font-family:var(--fuente-t);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sobre-oscuro-2);margin-bottom:var(--e2);
}

.hoja .bloque{margin-bottom:var(--e5)}
.hoja .bloque h3{
  font-size:11px;letter-spacing:.11em;color:var(--tinta-media);
  margin-bottom:var(--e3);padding-bottom:var(--e2);border-bottom:1px solid var(--linea);
}
.rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3) var(--e6)}
.rejilla.montos{grid-template-columns:repeat(3,minmax(0,1fr))}
.dato{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13.5px}
.dato .rot{font-size:10px;letter-spacing:.08em;color:var(--tinta-suave)}
.dato .val{overflow-wrap:anywhere}
.dato .fuerte{font-weight:600}

.tabla-marco{overflow-x:auto;max-width:100%;border:1px solid var(--linea);border-radius:var(--r)}
.tabla-ficha{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:auto}
.tabla-ficha th{
  text-align:left;font-size:9.5px;letter-spacing:.08em;color:var(--tinta-media);
  background:var(--superficie-2);padding:7px var(--e2);border-bottom:1px solid var(--linea);
  white-space:nowrap;
}
.tabla-ficha td{padding:7px var(--e2);border-bottom:1px solid var(--linea-fina);vertical-align:top}
.tabla-ficha td.num{text-align:right;font-family:var(--fuente-m);font-variant-numeric:tabular-nums}
.tabla-ficha td.cod{font-family:var(--fuente-m)}
.tabla-ficha td:first-child{white-space:nowrap}
.tabla-ficha td:nth-child(3),.tabla-ficha td.num{white-space:nowrap}
.tabla-ficha tr.linea-pago td,.tabla-ficha tr.linea-meta td{
  color:var(--tinta-suave);font-size:10.5px;border-bottom:none;padding:0 var(--e2) 7px;line-height:1.5;
}
.tabla-ficha tr.total td{
  font-weight:600;background:var(--superficie-3);border-top:1px solid var(--tinta-media);border-bottom:none;
}
.tabla-ficha tr.total td:first-child{
  text-transform:uppercase;font-size:9.5px;letter-spacing:.08em;color:var(--tinta-media);
  font-family:var(--fuente-t);
}
.hoja .vacio{font-size:13px;color:var(--tinta-suave)}
.alerta-caja{
  background:var(--bloqueado-t);border:1px solid var(--bloqueado-b);
  border-left:3px solid var(--bloqueado);padding:10px 13px;border-radius:var(--r);
  font-size:12.5px;margin-bottom:var(--e2);line-height:1.55;
}
.alerta-caja.tenue-caja{background:var(--parcial-t);border-color:var(--parcial-b);border-left-color:var(--parcial)}
.pie-ficha{
  margin-top:var(--e5);padding:var(--e3) 0 0;border-top:1px solid var(--linea);
  font-size:10.5px;line-height:1.65;color:var(--tinta-suave);text-align:left;
}

/* ══ Página de carga de informes ══════════════════════════════ */

.pagina-carga{background:var(--papel)}
.hoja-carga{max-width:1060px;margin:0 auto;padding:var(--e5) var(--e5) var(--e7)}
.hoja-carga .intro{color:var(--tinta-media);max-width:660px;margin-bottom:var(--e4);font-size:13.5px}
.rejilla-carga{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--e3);margin:var(--e4) 0}
.ficha{
  background:var(--superficie);border:1px solid var(--linea);border-top:3px solid var(--linea);
  border-radius:var(--r);padding:var(--e4);box-shadow:var(--sombra-1);
}
.ficha.ok{border-top-color:var(--pagado);background:var(--superficie)}
.ficha h2{font-family:var(--fuente-t);font-size:15px;font-weight:700;letter-spacing:.02em}
.ficha .fuente{font-size:11.5px;color:var(--tinta-suave);margin:var(--e1) 0 var(--e3);min-height:30px;line-height:1.5}
.ficha .estado{font-size:13px;min-height:58px}
.ficha .estado b{font-family:var(--fuente-m);font-size:17px;font-weight:600}
.ficha .acciones{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:var(--e3)}
#zona-soltar{
  border:2px dashed var(--linea);border-radius:var(--r);padding:var(--e6);text-align:center;
  color:var(--tinta-suave);background:var(--superficie);font-size:13px;transition:all .14s;
}
#zona-soltar.activo{border-color:var(--acento);background:var(--acento-claro);color:var(--acento);font-weight:600}
.nota-carga{font-size:13px;color:var(--tinta-media);flex:1 1 auto;min-height:20px}
.nota-carga.malo{color:var(--bloqueado)}
.nota-carga.bueno{color:var(--pagado)}
.nota-carga a{color:var(--acento);font-weight:600}
.bitacora{margin-top:var(--e6);font-size:12px;color:var(--tinta-media)}
.bitacora h4{font-size:11px;margin-bottom:var(--e2);color:var(--tinta-media)}
.bitacora div{
  font-family:var(--fuente-m);font-size:11.5px;padding:6px 0;
  border-top:1px solid var(--linea-fina);color:var(--tinta-media);
}
.barra-acciones{display:flex;gap:var(--e3);align-items:center;padding:var(--e3) 0 var(--e4);flex-wrap:wrap}

/* ══ Impresión ════════════════════════════════════════════════ */

@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff}
  body > *:not(#ficha){display:none !important}
  #ficha{position:static;display:block;background:none;padding:0;overflow:visible;backdrop-filter:none}
  .caja-ficha{box-shadow:none;max-width:none;border-radius:0}
  .no-imprimir{display:none !important}
  .hoja{padding:0}
  /* En pantalla el encabezado sale a los bordes de la tarjeta; en
     papel vuelve a ser un bloque dentro del margen de la hoja. */
  .cabeza-ficha{margin:0 0 13px;padding:12px 14px;border-bottom-width:2px}
  .et-estado,.tabla-ficha th,.cabeza-ficha,.alerta-caja,.tabla-ficha tr.total td{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .tabla-marco{overflow:visible;border:none}
  .tabla-ficha{font-size:9.5px}
  .tabla-ficha th,.tabla-ficha td{padding:4px 5px}
  .tabla-ficha tr.linea-meta td{font-size:9px}
  .hoja .bloque{margin-bottom:13px}
  .hoja .bloque,.tabla-ficha tbody{break-inside:auto}
  .hoja .bloque h3{break-after:avoid}
  .tabla-ficha tr{break-inside:avoid}
  .tabla-ficha thead{display:table-header-group}
}

/* ══ Pantallas angostas ═══════════════════════════════════════ */

@media (max-width:900px){
  .kpi-principal{border-right:none;border-bottom:1px solid var(--linea);
    flex:1 1 100%;border-radius:var(--r) var(--r) 0 0}
  .kpi-plata{flex:1 1 100%}
}
@media (max-width:720px){
  .barra-simple{padding:0 var(--e4);position:static}
  main{padding:var(--e4) var(--e4) var(--e6)}
  .fila-titulo{padding:9px 0 11px}
  .fila-titulo .titulo{font-size:16px}
  .fila-titulo .tenue-claro{display:none}
  .frescura{width:100%;margin-left:0;padding-bottom:var(--e2)}
  .marco{max-height:none}
  .ocultable-movil{display:none}
  .tarjeta-enlace{grid-template-columns:1fr}
  .lado-oc{border-right:none;border-bottom:1px solid var(--linea)}
  .hoja-carga{padding:var(--e4) var(--e4) var(--e6)}
  .fila-g{grid-template-columns:9px 1fr 66px 40px}
  .fila-g .riel{display:none}
  .fila-oc{grid-template-columns:1fr auto;row-gap:2px}
  .fila-oc .tenue{grid-column:1/-1}
  .filtros .cuenta{margin-left:0;width:100%}
  .sep-filtros{display:none}
}
@media (max-width:620px){
  #ficha{padding:0}
  .caja-ficha{border-radius:0;min-height:100vh}
  .hoja{padding:0 var(--e4) var(--e5)}
  .cabeza-ficha{flex-direction:column;gap:var(--e3);
    padding:var(--e3) var(--e4) var(--e4);margin:0 calc(-1 * var(--e4)) var(--e4)}
  .cabeza-ficha h2{font-size:22px}
  .folio-ficha{text-align:left}
  .rejilla,.rejilla.montos{grid-template-columns:1fr}
  .tarjeta-acceso{padding:var(--e5) var(--e4) var(--e4)}
}