/* ZimpleFlow · Compras a Siigo — estilos (28-oct-2026).
 * Celular primero; fuente del sistema; contraste AA; foco siempre visible.
 * Nada depende solo del color: cada estado lleva su texto. */

:root {
  --texto: #1b1f24;
  --suave: #57606a;
  --borde: #d0d7de;
  --borde-fuerte: #6e7781;
  --fondo: #f3f5f7;
  --tarjeta: #ffffff;
  --cabecera-tabla: #f6f8fa;
  --primario: #0b5cad;
  --primario-osc: #084a8c;
  --primario-claro: #e8f1fb;
  --foco: #0969da;

  --ok: #0f5323;
  --ok-fondo: #dafbe1;
  --ok-borde: #4ac26b;
  --ok-boton: #1a7f37;
  --ok-boton-osc: #116329;
  --aviso: #6b4300;
  --aviso-fondo: #fff4d6;
  --aviso-borde: #d4a72c;
  --aviso-fuerte: #9a6700;
  --error: #9a1325;
  --error-fondo: #ffebe9;
  --error-borde: #ff8182;
  --peligro: #b42318;
  --peligro-osc: #8f1c13;
  --info: #0a3069;
  --info-fondo: #ddf4ff;
  --info-borde: #54aeff;
  --morado: #4b2391;
  --morado-fondo: #f1e7ff;
  --morado-borde: #a475f9;
  --gris: #2f363d;
  --gris-fondo: #eaeef2;
  --gris-borde: #afb8c1;

  --radio: 8px;
  --sombra: 0 1px 2px rgba(27, 31, 36, .06), 0 1px 3px rgba(27, 31, 36, .08);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

/* ───────────── Base ───────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
}
@media (min-width: 900px) { body { font-size: 15px; } }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.2rem; }
.h3 { font-size: 1.05rem; }
.h4 { font-size: .95rem; }
p { margin: 0 0 .5rem; }
a { color: var(--primario); }
a:hover { color: var(--primario-osc); }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mini { font-size: .78rem; }
.suave { color: var(--suave); }
.cargando { color: var(--suave); padding: 12px 0; }
.botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }

.saltar {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: #fff; color: var(--primario); padding: 8px 12px;
  border: 2px solid var(--foco); border-radius: 6px; font-weight: 700;
}
.saltar:focus { top: 8px; }

/* ───────────── Barra superior ───────────── */

.barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid var(--borde);
}
.marca {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: var(--texto); text-decoration: none;
  font-weight: 700; font-size: 1.05rem; white-space: nowrap;
}
.marca:hover { color: var(--texto); }
.marca-nombre { color: var(--primario); }
.marca-sep { color: var(--suave); }
.barra-empresa { display: none; color: var(--suave); font-size: .88rem; }
.barra-usuario { margin-left: auto; color: var(--suave); font-size: .88rem; }
.barra-salir { min-height: 36px; }
@media (max-width: 759px) {
  /* Celular: marca y «Salir» arriba; quién entró y el modo simulación debajo. */
  .barra { padding: 6px 12px; gap: 4px 10px; }
  .barra-salir { order: 1; margin-left: auto; }
  .barra-usuario { order: 2; margin-left: 0; font-size: .82rem; }
  .barra-simulacion { order: 3; font-size: .74rem; }
}
@media (min-width: 760px) {
  .barra-empresa { display: inline; }
}

/* ───────────── Contenido ───────────── */

.contenido { display: block; max-width: 1680px; margin: 0 auto; padding: 14px 12px 24px; }
@media (min-width: 600px) { .contenido { padding: 18px 20px 28px; } }
.pagina { display: flex; flex-direction: column; gap: 14px; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
  min-width: 0;
}
.tarjeta-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }

/* ───────────── Botones ───────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 8px 16px;
  border: 1px solid transparent; border-radius: 6px;
  font: inherit; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none;
  background: #fff; color: var(--texto);
  cursor: pointer;
}
.btn-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-primario:hover { background: var(--primario-osc); border-color: var(--primario-osc); color: #fff; }
.btn-secundario { background: #fff; border-color: var(--borde-fuerte); color: var(--primario); }
.btn-secundario:hover { background: var(--primario-claro); color: var(--primario-osc); }
.btn-texto { background: transparent; color: var(--primario); padding-left: 8px; padding-right: 8px; }
.btn-texto:hover { text-decoration: underline; color: var(--primario-osc); }
.btn-texto-peligro { color: var(--peligro); }
.btn-texto-peligro:hover { color: var(--peligro-osc); }
.btn-peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn-peligro:hover { background: var(--peligro-osc); border-color: var(--peligro-osc); color: #fff; }
.btn-exito { background: var(--ok-boton); border-color: var(--ok-boton); color: #fff; }
.btn-exito:hover { background: var(--ok-boton-osc); border-color: var(--ok-boton-osc); color: #fff; }
.btn-bloqueado, .btn-bloqueado:hover { background: #6e7781; border-color: #6e7781; color: #fff; cursor: not-allowed; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-grande { width: 100%; min-height: 58px; padding: 12px 20px; font-size: 1.15rem; }
.btn-ancho { width: 100%; }
.btn-mini { min-height: 32px; padding: 4px 10px; font-size: .82rem; }
.btn-enlace {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 700; color: var(--primario);
  text-decoration: underline; cursor: pointer;
}
.ico-subir::before { content: "↑"; font-size: 1.35em; line-height: 1; }

/* ───────────── Chips ───────────── */

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 9px; border: 1px solid; border-radius: 999px;
  font-size: .8rem; font-weight: 700; line-height: 1.55; white-space: nowrap;
}
.chip-ico { font-weight: 800; }
.chip-mini { font-size: .74rem; padding: 0 7px; }
.chip-ok { color: var(--ok); background: var(--ok-fondo); border-color: var(--ok-borde); }
.chip-aviso { color: var(--aviso); background: var(--aviso-fondo); border-color: var(--aviso-borde); }
.chip-error { color: var(--error); background: var(--error-fondo); border-color: var(--error-borde); }
.chip-info { color: var(--info); background: var(--info-fondo); border-color: var(--info-borde); }
.chip-morado { color: var(--morado); background: var(--morado-fondo); border-color: var(--morado-borde); }
.chip-gris { color: var(--gris); background: var(--gris-fondo); border-color: var(--gris-borde); }

/* ───────────── Cajas de aviso ───────────── */

.caja {
  border: 1px solid; border-left-width: 5px; border-radius: var(--radio);
  padding: 10px 14px; background: #fff; color: var(--texto);
}
.caja p:last-child { margin-bottom: 0; }
.caja ul { margin: 0; padding-left: 1.2rem; }
.caja li + li { margin-top: 2px; }
.caja-titulo { font-weight: 700; margin-bottom: 4px; }
.caja-fuerte .caja-titulo { font-size: 1.05rem; }
.caja-compacta { padding: 6px 10px; font-size: .9rem; }
.caja-error { background: var(--error-fondo); border-color: var(--error-borde); border-left-color: var(--peligro); }
.caja-error .caja-titulo { color: var(--error); }
.caja-aviso { background: var(--aviso-fondo); border-color: var(--aviso-borde); border-left-color: var(--aviso-fuerte); }
.caja-aviso .caja-titulo { color: var(--aviso); }
.caja-info { background: var(--info-fondo); border-color: var(--info-borde); border-left-color: var(--primario); }
.caja-ok { background: var(--ok-fondo); border-color: var(--ok-borde); border-left-color: var(--ok-boton); }
.caja-ok .caja-titulo { color: var(--ok); }
.con-girador { display: flex; align-items: flex-start; gap: 12px; }
.avisos-arriba { display: flex; flex-direction: column; gap: 10px; }
.cita { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid var(--primario); background: #fff; font-style: italic; }

.cuadra { color: var(--ok); font-weight: 700; }
.no-cuadra { color: var(--error); font-weight: 700; }
.error-campo { color: var(--error); font-weight: 600; }
.aviso-linea { color: var(--aviso); font-weight: 600; font-size: .9rem; margin: 4px 0 0; }
.aviso-txt { color: var(--aviso); font-weight: 600; }

.girador {
  flex: none; width: 30px; height: 30px;
  border: 3px solid var(--info-borde); border-top-color: var(--primario); border-radius: 50%;
  animation: girar 1s linear infinite;
}
.girador-chico { width: 22px; height: 22px; margin-top: 2px; }
.punto-giro {
  display: inline-block; width: 11px; height: 11px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .girador, .punto-giro { animation: none; border-right-color: currentColor; }
}

/* ───────────── Formularios ───────────── */

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.etiqueta { font-weight: 700; font-size: .9rem; }
.ayuda { color: var(--suave); font-size: .84rem; margin: 0; }
.in-txt, .in-sel, .in-num {
  width: 100%; min-height: 42px; padding: 8px 10px;
  font: inherit; font-size: 16px; color: var(--texto);
  background: #fff; border: 1px solid var(--borde-fuerte); border-radius: 6px;
}
textarea.in-txt { min-height: 66px; resize: vertical; }
.in-txt:focus, .in-sel:focus, .in-num:focus { border-color: var(--foco); }
.in-txt:disabled, .in-sel:disabled, .in-num:disabled { background: var(--gris-fondo); color: var(--gris); }
[aria-invalid="true"] { border-color: var(--peligro) !important; box-shadow: 0 0 0 1px var(--peligro); }
.in-codigo { max-width: 170px; font-family: var(--mono); }
.in-fecha { max-width: 170px; font-variant-numeric: tabular-nums; }
.eco-fecha::first-letter { text-transform: uppercase; }
.casilla { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; margin-bottom: 10px; }
.casilla input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primario); }
.casilla label { flex: 1 1 0; min-width: 0; }
.casilla-nota { flex-basis: 100%; margin: 0 0 0 30px; }
.campos-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
@media (min-width: 560px) { .campos-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 900px) {
  .in-txt, .in-sel, .in-num { font-size: 14px; min-height: 38px; padding: 6px 9px; }
}

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

.anuncios {
  position: fixed; z-index: 70; left: 8px; right: 8px; top: 8px;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
@media (min-width: 700px) {
  .anuncios { left: auto; top: 64px; right: 16px; width: 420px; }
}
.anuncio {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 8px 10px 12px;
  background: #fff; border: 1px solid var(--borde); border-left-width: 5px; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(27, 31, 36, .18);
}
.anuncio-ok { border-color: var(--ok-borde); border-left-color: var(--ok-boton); }
.anuncio-aviso { border-color: var(--aviso-borde); border-left-color: var(--aviso-fuerte); background: var(--aviso-fondo); }
.anuncio-error { border-color: var(--error-borde); border-left-color: var(--peligro); background: var(--error-fondo); }
.anuncio-texto { flex: 1; padding-top: 4px; }
.anuncio-cerrar {
  flex: none; min-width: 34px; min-height: 34px;
  background: none; border: 0; border-radius: 6px;
  font-size: 1.4rem; line-height: 1; color: var(--suave); cursor: pointer;
}
.anuncio-cerrar:hover { background: rgba(27, 31, 36, .08); }

/* ───────────── Diálogos ───────────── */

.dialogo {
  width: min(580px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  padding: 0; border: 0; border-radius: 10px;
  color: var(--texto); background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
.dialogo::backdrop { background: rgba(15, 23, 42, .55); }
.dialogo-form { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.dialogo-titulo { margin: 0; font-size: 1.2rem; }
.dialogo-peligro .dialogo-titulo { color: var(--error); }
.dialogo-cuerpo p { margin-bottom: 6px; }
.dialogo-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ───────────── Ingreso ───────────── */

.pagina-ingreso { align-items: center; padding-top: 5vh; }
.ingreso { width: 100%; max-width: 420px; }
.ingreso h1 { margin-bottom: 2px; }

/* ───────────── Bandeja ───────────── */

.bandeja-arriba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.bandeja-intro { grid-column: 1 / -1; }
.bandeja-intro h1 { margin-bottom: 2px; }
.bandeja-intro p { margin: 0; }
@media (min-width: 900px) { .bandeja-arriba { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

.zona-subida {
  display: flex; flex-direction: column; gap: 10px;
  border: 2px dashed var(--borde-fuerte); background: #fbfcfd;
}
.zona-subida.soltando { border-color: var(--primario); background: var(--primario-claro); }
.zona-subida .ayuda { font-size: .88rem; }
@media (min-width: 900px) {
  .zona-subida .btn-grande { width: auto; min-width: 280px; align-self: flex-start; }
}
.solo-tactil { display: none !important; }
.es-tactil .btn.solo-tactil { display: inline-flex !important; }
.es-tactil span.solo-tactil { display: inline !important; }
.es-tactil .solo-raton { display: none !important; }

.cola-subida { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cola-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  padding: 8px 10px; background: #fff; border: 1px solid var(--borde); border-radius: 6px; font-size: .9rem;
}
.cola-nombre { font-weight: 700; overflow-wrap: anywhere; }
.cola-item progress { grid-column: 1 / -1; width: 100%; height: 8px; accent-color: var(--primario); }
.cola-ok { border-color: var(--ok-borde); }
.cola-ok .cola-estado { color: var(--ok); font-weight: 600; }
.cola-error { border-color: var(--error-borde); background: var(--error-fondo); }
.cola-error .cola-estado { grid-column: 1 / -1; color: var(--error); font-weight: 600; }

.soltar-capa {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 92, 173, .12); border: 4px dashed var(--primario);
}
.soltar-capa p {
  padding: 18px 26px; border-radius: 10px; background: #fff;
  color: var(--primario); font-size: 1.3rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(27, 31, 36, .18);
}

.catalogo { display: flex; flex-direction: column; gap: 10px; }
.catalogo .btn { align-self: flex-start; }
.catalogo p { margin: 0; }
.catalogo-texto { display: flex; flex-direction: column; gap: 4px; }
.catalogo-texto .h3 { margin: 0; }

.bandeja-lista { display: flex; flex-direction: column; gap: 10px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro {
  min-height: 38px; padding: 6px 13px;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--texto); background: #fff;
  border: 1px solid var(--borde-fuerte); border-radius: 999px; cursor: pointer;
}
.filtro:hover { background: var(--primario-claro); }
.filtro[aria-pressed="true"] { color: #fff; background: var(--texto); border-color: var(--texto); }
.filtro-n { font-weight: 500; }
@media (max-width: 759px) {
  .filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-right: -12px; padding-right: 12px; }
  .filtro { flex: none; }
}

.vacio {
  padding: 24px; text-align: center; color: var(--suave);
  background: #fff; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio);
}
.vacio-titulo { font-weight: 700; color: var(--texto); }

/* ───────────── Tablas (base) ───────────── */

.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.tabla th, .tabla td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #e3e7eb; }
.tabla thead th {
  background: var(--cabecera-tabla); color: #3d444d;
  font-size: .78rem; font-weight: 700;
  border-bottom: 1px solid var(--borde);
}
.tabla caption { text-align: left; font-weight: 700; padding: 0 0 6px; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tbody tr:last-child > td, .tabla tbody tr:last-child > th { border-bottom: 0; }
.tabla-desliza { overflow-x: auto; }

/* Bandeja: tabla en computador, tarjetas en celular */
.tabla-bandeja { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla-bandeja thead th:first-child { border-top-left-radius: var(--radio); }
.tabla-bandeja thead th:last-child { border-top-right-radius: var(--radio); }
.tabla-bandeja td { vertical-align: middle; }
.fila-enlace { cursor: pointer; }
.fila-enlace:hover > td { background: #f5f9fd; }
.enlace-fila { color: var(--texto); font-weight: 700; text-decoration: none; }
.enlace-fila:hover { color: var(--primario); text-decoration: underline; }
.conteos { display: flex; flex-wrap: wrap; gap: 4px; }
.b-total { font-weight: 700; white-space: nowrap; }
.b-fecha, .b-subida { white-space: nowrap; }

@media (max-width: 759px) {
  .tabla-bandeja, .tabla-bandeja tbody { display: block; background: none; border: 0; box-shadow: none; }
  .tabla-bandeja thead { display: none; }
  .tabla-bandeja tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "prov estado" "doc total" "lineas lineas" "fecha subida";
    gap: 6px 12px; margin-bottom: 10px; padding: 12px 14px;
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  }
  .tabla-bandeja td { display: block; padding: 0; border: 0; min-width: 0; }
  .fila-enlace:hover > td { background: none; }
  .b-estado { grid-area: estado; justify-self: end; }
  .b-prov { grid-area: prov; font-size: 1.02rem; }
  .b-doc { grid-area: doc; }
  .b-total { grid-area: total; text-align: right; }
  .b-lineas { grid-area: lineas; }
  .b-fecha { grid-area: fecha; color: var(--suave); font-size: .84rem; }
  .b-subida { grid-area: subida; color: var(--suave); font-size: .84rem; text-align: right; white-space: normal; }
  .b-fecha::before { content: "Fecha "; }
  .b-subida::before { content: "Subida "; }
  .tabla-bandeja td:empty { display: none; }
}

/* ───────────── Factura: encabezado y pasos ───────────── */

.fac-cab { display: flex; flex-direction: column; gap: 6px; }
.migas { margin: 0; font-size: .92rem; }
.migas a { text-decoration: none; font-weight: 600; }
.migas a:hover { text-decoration: underline; }
.fac-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fac-titulo h1 { margin: 0; font-size: 1.3rem; }
.fac-doc { color: var(--suave); }
.fac-datos { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; color: var(--suave); font-size: .9rem; }
.fac-datos strong { color: var(--texto); }
.fac-datos .sep { padding: 0 2px; }
.pasos ol {
  display: flex; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--borde); overflow-x: auto;
}
.paso {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: -1px; padding: 10px 14px;
  color: var(--suave); font-weight: 700; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.paso:hover { color: var(--texto); }
.paso-actual, .paso-actual:hover { color: var(--primario); border-bottom-color: var(--primario); }
.paso-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gris-fondo); color: var(--gris); font-size: .78rem;
}
.paso-actual .paso-n { background: var(--primario); color: #fff; }
@media (max-width: 479px) {
  .paso { padding: 10px 9px; gap: 6px; }
  .paso-n { display: none; }
}
.factura-cuerpo { display: flex; flex-direction: column; gap: 14px; }

.leyendo { display: flex; align-items: flex-start; gap: 16px; }
.leyendo h2 { margin-bottom: 4px; }

/* ───────────── Datos en rejilla (totales de la vista previa) ───────────── */

.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; align-content: start; }
@media (min-width: 600px) { .datos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.datos > div { min-width: 0; }
.datos dt { color: var(--suave); font-size: .78rem; font-weight: 700; }
.datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ───────────── Totales leídos contra calculados ───────────── */

.lectura { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; }
.lectura-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.lectura-cab .h3 { margin: 0; font-size: .95rem; }
.cuadres { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.cuadre { display: inline-flex; align-items: baseline; gap: 6px; }
.cuadre-ico { font-weight: 800; }
.cuadre-ok .cuadre-ico { color: var(--ok); }
.cuadre-mal { color: var(--error); font-weight: 600; }
.cuadre-nd { color: var(--suave); }
.lectura-extra { margin: 0; color: var(--suave); font-size: .86rem; }
.lectura-detalle > summary { cursor: pointer; color: var(--primario); font-size: .85rem; font-weight: 600; width: max-content; max-width: 100%; }
.lectura-detalle .tabla-desliza { margin-top: 6px; max-width: 720px; }
.tabla-totales { font-size: .86rem; }
.tabla-totales th, .tabla-totales td { padding: 5px 8px; white-space: nowrap; }
.tabla-totales tbody th { font-weight: 600; }

/* ───────────── Líneas ───────────── */

.lineas { display: flex; flex-direction: column; gap: 10px; }
.lineas > .h3 { margin: 0; }
.barra-lineas { display: flex; flex-direction: column; gap: 8px; }
.barra-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.barra-fila .filtros { min-width: 0; }
.barra-fila2 { justify-content: flex-start; }
.barra-buscar { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 380px; }
.barra-buscar .in-txt { flex: 1; min-width: 0; }
@media (max-width: 759px) { .barra-buscar { max-width: none; } }
.etiqueta-en-linea { font-weight: 700; }
.contador { margin: 0; font-size: .9rem; }
.barra-masiva {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 4px 10px; font-size: .88rem;
  background: #fff; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio);
}
.barra-masiva.activa { border-style: solid; border-color: var(--primario); background: var(--primario-claro); }
.barra-masiva .in-sel { width: auto; max-width: 100%; min-height: 32px; padding: 3px 6px; }
.barra-masiva label { font-weight: 600; }
.masiva-n { font-weight: 600; }

.tabla-caja { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla-lineas { font-size: .86rem; }
.tabla-lineas th, .tabla-lineas td { padding: 6px 7px; }
.tabla-lineas thead th { vertical-align: bottom; line-height: 1.25; white-space: normal; }
.tabla-lineas tbody td { background: #fff; }
.c-marca { width: 34px; text-align: center !important; }
.c-marca input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--primario); }
.c-n { width: 40px; color: var(--suave); }
.c-desc { min-width: 0; }
.cod { font-family: var(--mono); font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; }
.desc {
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.c-cant, .c-cantsiigo { width: 54px; }
.c-empaque { width: 70px; }
.c-costo { width: 92px; white-space: nowrap; }
.c-estado { font-size: .78rem; overflow-wrap: anywhere; }
.th-sub { display: block; font-weight: 600; font-size: .7rem; color: var(--suave); }
.resaltado { font-weight: 800; }

.fila > td:first-child { box-shadow: inset 4px 0 0 var(--gris-borde); }
.fila-existe > td:first-child { box-shadow: inset 4px 0 0 var(--ok-borde); }
.fila-nuevo > td:first-child { box-shadow: inset 4px 0 0 var(--primario); }
.fila-dudoso > td:first-child { box-shadow: inset 4px 0 0 var(--aviso-fuerte); }
.tabla-lineas .fila-dudoso > td { background: #fffaeb; }
.tabla-lineas .fila-omitida > td { background: #f6f8fa; color: var(--suave); }
.fila-omitida .desc { text-decoration: line-through; }
.tabla-lineas .fila-marcada > td { background: var(--primario-claro); }
.tabla-lineas td.cambia { background: var(--aviso-fondo); }
.fila-vacia td { padding: 24px; text-align: center; color: var(--suave); }

.prod-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; }
.prod { font-size: .84rem; }
.prod-nombre { overflow-wrap: anywhere; }
.form-nuevo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 6px; }
.mini-etq { color: var(--suave); font-size: .74rem; font-weight: 700; }
.form-codigo {
  display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 8px;
  background: var(--primario-claro); border: 1px solid var(--primario); border-radius: 6px;
}
.botones-mini { display: flex; flex-wrap: wrap; gap: 4px; }
.tabla-lineas .in-txt, .tabla-lineas .in-sel, .tabla-lineas .in-num { min-height: 32px; padding: 3px 6px; }
.in-pendiente { border-color: var(--aviso-fuerte); box-shadow: 0 0 0 1px var(--aviso-fuerte); }
.in-corto { width: 64px; text-align: right; }
.in-precio { width: 104px; text-align: right; font-variant-numeric: tabular-nums; }
.precio-sug { font-size: .8rem; white-space: nowrap; }
.dif { font-weight: 700; white-space: nowrap; }
.c-publico .chip-mini { padding: 0 5px; font-size: .7rem; }
.dif-grande { color: var(--aviso); font-weight: 700; }
.motivo { margin: 2px 0 0; }
.error-junto { grid-column: 1 / -1; margin: 3px 0 0; color: var(--error); font-size: .78rem; font-weight: 700; text-align: left; }

.g-guardando { display: inline-flex; align-items: center; gap: 6px; color: var(--info); font-weight: 700; }
.g-ok { color: var(--ok); font-weight: 700; }
.g-error { display: block; color: var(--error); font-weight: 700; }
.g-listo { font-weight: 600; }
.problemas { margin: 2px 0 0; padding-left: 1rem; color: var(--error); }
.problemas li + li { margin-top: 2px; }

@media (min-width: 900px) {
  /* La tabla tiene su propio desplazamiento: los encabezados quedan fijos arriba.
     Anchos fijos: 600 filas se pintan rápido y nada empuja la tabla fuera de la pantalla. */
  .tabla-caja { overflow: auto; max-height: max(460px, calc(100vh - 150px)); }
  .tabla-lineas { table-layout: fixed; min-width: 1340px; }
  .tabla-lineas .c-vu { width: 92px; }
  .tabla-lineas .c-sub { width: 96px; }
  .tabla-lineas thead th { position: sticky; top: 0; z-index: 2; }
  .tabla-lineas .c-marca { width: 36px; }
  .tabla-lineas .c-n { width: 42px; }
  .tabla-lineas .c-cant { width: 50px; }
  .tabla-lineas .c-empaque { width: 68px; }
  .tabla-lineas .c-cantsiigo { width: 58px; }
  .tabla-lineas .c-costo { width: 84px; }
  .tabla-lineas .c-accion { width: 150px; }
  .tabla-lineas .c-publico, .tabla-lineas .c-taller { width: 118px; }
  .tabla-lineas .c-estado { width: 122px; }
  .tabla-lineas .in-txt, .tabla-lineas .in-sel, .tabla-lineas .in-num { font-size: 13px; }
  .tabla-lineas .c-accion .in-sel { width: 100%; }
}

/* Celular y tableta: cada línea es una tarjeta. */
@media (max-width: 899px) {
  .tabla-caja { background: none; border: 0; box-shadow: none; }
  .tabla-lineas, .tabla-lineas tbody { display: block; }
  .tabla-lineas thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  .tabla-lineas tr.fila {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "marca n n n"
      "desc desc desc desc"
      "cant vu vu sub"
      "empaque cantsiigo costo costo"
      "producto producto producto producto"
      "accion accion accion accion"
      "publico publico taller taller"
      "estado estado estado estado";
    gap: 8px 10px; margin-bottom: 12px; padding: 12px;
    background: #fff; border: 1px solid var(--borde); border-left-width: 6px; border-radius: var(--radio);
    box-shadow: var(--sombra);
  }
  .tabla-lineas tr.fila-existe { border-left-color: var(--ok-borde); }
  .tabla-lineas tr.fila-nuevo { border-left-color: var(--primario); }
  .tabla-lineas tr.fila-dudoso { border-left-color: var(--aviso-fuerte); background: #fffaeb; }
  .tabla-lineas tr.fila-omitida { background: #f6f8fa; }
  .tabla-lineas tr.fila-marcada { background: var(--primario-claro); }
  .tabla-lineas td, .tabla-lineas tbody td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; width: auto; background: none !important; text-align: left; }
  .fila > td:first-child { box-shadow: none !important; }
  .tabla-lineas td::before {
    content: attr(data-etiqueta); display: block; margin-bottom: 2px;
    color: var(--suave); font-size: .74rem; font-weight: 700; text-align: left;
  }
  .tabla-lineas td.c-marca::before, .tabla-lineas td.c-desc::before, .tabla-lineas td.c-estado::before { content: none; }
  .tabla-lineas td.c-n::before { content: "Línea "; display: inline; font-size: .9rem; color: var(--texto); }
  .c-marca { grid-area: marca; }
  .c-n { grid-area: n; font-weight: 700; color: var(--texto); font-size: .9rem; align-self: center; }
  .c-desc { grid-area: desc; }
  .c-cant { grid-area: cant; }
  .c-empaque { grid-area: empaque; }
  .c-vu { grid-area: vu; }
  .c-sub { grid-area: sub; }
  .c-cantsiigo { grid-area: cantsiigo; }
  .c-costo { grid-area: costo; white-space: normal; }
  .c-producto { grid-area: producto; }
  .c-accion { grid-area: accion; }
  .c-publico { grid-area: publico; }
  .c-taller { grid-area: taller; }
  .c-estado { grid-area: estado; font-size: .85rem; }
  .tabla-lineas td.cambia { background: var(--aviso-fondo) !important; padding: 4px 6px; border-radius: 6px; }
  .desc { -webkit-line-clamp: 4; }
  .tabla-lineas .in-txt, .tabla-lineas .in-sel, .tabla-lineas .in-num { min-height: 42px; font-size: 16px; padding: 6px 8px; }
  .in-corto, .in-precio { width: 100%; }
  .c-marca input { width: 24px; height: 24px; }
  .fila-vacia { display: block; }
  .fila-vacia td { display: block; }
  .c-estado:empty { display: none; }
  .tabla-lineas td.num { text-align: left; }
  .tabla-lineas td.c-n { text-align: right; }
}

/* ───────────── Pie de acciones ───────────── */

.pie-acciones {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 14px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 -3px 12px rgba(27, 31, 36, .10);
}
.pie-razones { flex: 1 1 300px; font-size: .92rem; }
.pie-alerta { color: var(--error); font-weight: 700; }
.pie-ok { color: var(--ok); font-weight: 700; }
.pie-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.pie-extra { margin: 0; text-align: right; }
@media (max-width: 599px) {
  .pie-acciones { padding: 8px 10px; gap: 6px; }
  .pie-razones { flex-basis: 100%; font-size: .84rem; line-height: 1.35; }
  .pie-acciones > .btn, .pie-botones, .pie-botones .btn { width: 100%; }
  .pie-acciones .btn { min-height: 44px; }
}

/* ───────────── Aprobación ───────────── */

.aprob-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 1100px) { .aprob-rejilla { grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); } }
.aprob-derecha { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.estado-guardado { margin: 0; font-size: .85rem; color: var(--suave); font-weight: 600; }
.opciones { margin-top: 8px; }
.grupo-ret, .grupo-prov { margin: 4px 0 12px; padding-top: 10px; border-top: 1px solid var(--borde); }
.grupo-ret legend, .grupo-prov legend { margin-bottom: 8px; }
.casilla-ret label { font-weight: 600; }
.otras-ret { margin-top: 4px; }
.otras-ret summary { margin: 2px 0 8px; color: var(--primario); font-weight: 700; cursor: pointer; }
.grupo-prov .caja { margin-bottom: 10px; }
.vista-previa { display: flex; flex-direction: column; gap: 10px; }
.vista-previa .h4 { margin: 4px 0 0; }
.tabla-asiento .cuenta { font-family: var(--mono); white-space: nowrap; }
.tabla-asiento td.num { white-space: nowrap; }
.tabla-asiento tfoot th, .tabla-asiento tfoot td {
  font-weight: 700; border-top: 2px solid var(--texto); border-bottom: 0; background: var(--cabecera-tabla);
}
.tabla-asiento .suma-mal th, .tabla-asiento .suma-mal td { background: var(--error-fondo); }
.datos-totales { padding: 10px 12px; background: var(--cabecera-tabla); border-radius: 6px; }
.dato-fuerte dd { font-size: 1.12rem; }
.tabla-comparacion caption { font-size: .9rem; }
.plan { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 8px; }
.plan-frase { font-weight: 700; }
.plan-detalle { margin-top: 2px; }
.plan-detalle ul { margin: 4px 0 0; padding-left: 1.1rem; font-size: .88rem; }
.plan-detalle li { margin-bottom: 2px; }
.plan-dialogo { gap: 4px; margin: 4px 0 8px; }
.plan-dialogo li { font-weight: 600; }
.plan-detalle > summary, .tecnico > summary { cursor: pointer; color: var(--primario); font-size: .85rem; font-weight: 600; }
.tecnico pre {
  max-height: 320px; overflow: auto; margin: 6px 0;
  padding: 8px 10px; background: var(--cabecera-tabla); border: 1px solid var(--borde); border-radius: 6px;
  font-family: var(--mono); font-size: .76rem; white-space: pre;
}
.bloqueos:empty { display: none; }

@media (max-width: 699px) {
  .tabla-asiento, .tabla-asiento tbody, .tabla-asiento tfoot { display: block; }
  .tabla-asiento thead { display: none; }
  .tabla-asiento tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
    padding: 8px 0; border-bottom: 1px solid #e3e7eb;
  }
  .tabla-asiento td, .tabla-asiento th { display: block; padding: 0; border: 0; }
  .tabla-asiento td[data-etiqueta="Detalle"] { grid-column: 1 / -1; }
  .tabla-asiento td.num:empty { display: none; }
  .tabla-asiento td.num::before { content: attr(data-etiqueta) " "; color: var(--suave); font-weight: 600; font-size: .78rem; }
  .tabla-asiento tfoot tr { grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--texto); border-bottom: 0; background: var(--cabecera-tabla); padding: 8px; }
  .tabla-asiento tfoot th { grid-column: 1 / -1; }
  .tabla-asiento tfoot td.num { text-align: left; }
}

/* ───────────── Resultado ───────────── */

.resultado { display: flex; flex-direction: column; gap: 14px; }
.progreso p { margin-bottom: 4px; }
.progreso progress { width: 100%; height: 14px; accent-color: var(--ok-boton); }
.tarjeta-tabla { padding: 0; overflow: hidden; }
.tabla-ops .c-opn { width: 44px; color: var(--suave); }
.tabla-ops .c-opest { white-space: nowrap; }
.tabla-ops .c-opsiigo { font-family: var(--mono); font-size: .82rem; white-space: nowrap; }
.tabla-ops .c-ophora { white-space: nowrap; color: var(--suave); font-variant-numeric: tabular-nums; }
.op-en_curso > td { background: var(--info-fondo); }
.op-error > td { background: var(--error-fondo); }
.op-mensaje-error { margin: 4px 0 0; color: var(--error); font-weight: 700; }
.botones-resultado { margin: 0; }

@media (max-width: 699px) {
  .tabla-ops, .tabla-ops tbody { display: block; }
  .tabla-ops thead { display: none; }
  .tabla-ops tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "n desc desc" ". est siigo" ". hora hora";
    gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid #e3e7eb;
  }
  .tabla-ops td { display: block; padding: 0; border: 0; }
  .tabla-ops .c-opn { grid-area: n; width: auto; }
  .tabla-ops .c-opdesc { grid-area: desc; }
  .tabla-ops .c-opest { grid-area: est; }
  .tabla-ops .c-opsiigo { grid-area: siigo; text-align: right; }
  .tabla-ops .c-ophora { grid-area: hora; font-size: .8rem; }
  .tabla-ops .c-opsiigo::before { content: "En Siigo: "; font-family: var(--fuente); color: var(--suave); }
  .op-en_curso, .op-error { background: none; }
  .tabla-ops tr.op-error { background: var(--error-fondo); }
  .tabla-ops tr.op-en_curso { background: var(--info-fondo); }
  .op-en_curso > td, .op-error > td { background: none; }
}

/* ───────────── Impresión ───────────── */

@media print {
  .barra, .pasos, .pie-acciones, .anuncios, .barra-masiva, .zona-subida, .saltar { display: none !important; }
  body { background: #fff; }
  .tarjeta { box-shadow: none; }
  .tabla-caja { max-height: none !important; overflow: visible !important; }
}

/* Tablas para personas en la aprobación y el envío (sin datos técnicos). */
.tabla-datos { max-width: 760px; margin: 6px 0 10px; }
.tabla-datos th { width: 38%; color: var(--suave); font-weight: 600; white-space: normal; }
.tabla-items td, .tabla-plan td { font-size: .84rem; }
.tabla-items td.num, .tabla-plan td.num { white-space: nowrap; }
.tabla-items tfoot th, .tabla-items tfoot td { font-weight: 700; border-top: 2px solid var(--texto); background: #f6f8fa; }
.tabla-alta { max-height: 460px; overflow: auto; }
.tabla-alta thead th { position: sticky; top: 0; z-index: 1; }
.compra-siigo { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--borde); }
.compra-siigo details > summary, .plan-detalle > summary { cursor: pointer; font-weight: 600; color: var(--primario); margin: 6px 0; }
.comparacion { margin-top: 16px; }
.comparacion > p { max-width: 70ch; }