:root {
  --bg: #f3f5f8;
  --panel: #ffffff;
  --ink: #16202e;
  --muted: #5f6c7d;
  --line: #d9dfe7;
  --accent: #0b5cad;
  --accent-ink: #ffffff;
  --ok: #17803d;
  --ok-soft: #2f9e58;
  --ok-ink: #ffffff;
  --warn: #b45309;
  --warn-ink: #ffffff;
  --bad: #b42318;
  --chip: #e7eef8;
  --row-alt: #f8fafc;
  --shadow: 0 10px 30px rgba(15, 30, 55, 0.18);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  /* Paleta categórica (Dashboard comercial, VTDASHBOARD: "Ventas por categoría"/identidad de rubro — nunca
     magnitud, para eso ya está --accent en modo secuencial, ver .anl-clase-*). 6 tonos, orden fijo, tomados
     de la paleta de referencia validada de la skill de dataviz (Delta E >= 8 CVD / >= 15 visión normal entre
     vecinos, "adjacent pairlist": válida para barras apiladas/series, que es como se usan acá). */
  --dv-1: #2a78d6; /* azul */
  --dv-2: #eb6834; /* naranja */
  --dv-3: #1baf7a; /* aqua */
  --dv-4: #eda100; /* amarillo */
  --dv-5: #e87ba4; /* magenta */
  --dv-6: #008300; /* verde */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f151d;
    --panel: #18212c;
    --ink: #e6ecf4;
    --muted: #93a1b3;
    --line: #2b3746;
    --accent: #4b9cf0;
    --accent-ink: #06121f;
    --ok: #4cc38a;
    --ok-soft: #3a9d68;
    --ok-ink: #ffffff;
    --warn: #f5a524;
    --warn-ink: #241300;
    --bad: #ff6b5e;
    --chip: #223246;
    --row-alt: #1b2531;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    --dv-1: #3987e5;
    --dv-2: #d95926;
    --dv-3: #199e70;
    --dv-4: #c98500;
    --dv-5: #d55181;
    --dv-6: #008300;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  min-width: 0;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.danger { color: var(--bad); }
button.exito { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok-soft); font-weight: 600; }
button.resaltar { background: var(--chip); color: var(--accent); border-color: var(--accent); font-weight: 600; }
button.fa-salir { background: var(--warn); color: var(--warn-ink); border-color: var(--warn); font-weight: 600; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
kbd {
  font: 11px var(--mono);
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
  margin-left: 6px;
  color: var(--muted);
}
.num { font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---------- login ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px; box-shadow: var(--shadow); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card p { margin: 0 0 16px; color: var(--muted); }
.login-card label { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
.login-card input { width: 100%; }
.login-card button { width: 100%; margin-top: 16px; padding: 10px; }
.err { color: var(--bad); margin-top: 10px; min-height: 1.4em; white-space: pre-wrap; }

/* ---------- ingreso al sistema (formulario DEFINGRE) ---------- */
body.ocupado, body.ocupado * { cursor: progress !important; }
.acceso {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(900px 500px at 15% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(700px 420px at 100% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    var(--bg);
}
.acc-tarjeta {
  width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px 32px 26px; box-shadow: var(--shadow); display: grid; gap: 16px;
}
/* logo de NEXIST: recuadro azul noche fijo, legible con cualquier tema (ver NAS.logoNexist en core.js) */
.nx-logo { background: radial-gradient(120% 120% at 50% 0%, #12284a 0%, #0a1322 70%); display: flex; align-items: center; justify-content: center; flex: none; }
.nx-logo img { display: block; max-width: 100%; height: auto; user-select: none; }
.nx-logo-completo { border-radius: 12px; padding: 16px 20px; box-shadow: inset 0 0 0 1px rgba(120, 170, 255, 0.12); }
.nx-logo-completo img { width: 168px; }
.nx-logo-icono { width: 38px; height: 38px; border-radius: 9px; padding: 5px; box-shadow: inset 0 0 0 1px rgba(120, 170, 255, 0.18); }
.nx-logo-icono img { width: 100%; height: 100%; object-fit: contain; filter: brightness(1.35) saturate(1.1); }
.acc-marca { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); background: var(--chip); border-radius: 999px; padding: 4px 12px; }
.acc-tarjeta h1 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.acc-solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.acc-sub-ingreso { margin: 2px 0 2px; text-align: center; }
.acc-sub { margin: -10px 0 4px; color: var(--muted); }
.acc-campo label, .acc-opciones label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.acc-tarjeta input { width: 100%; height: 44px; padding: 0 14px; border-radius: 10px; font-size: 15px; }
.acc-tarjeta input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.acc-clave { position: relative; }
.acc-clave input { padding-right: 84px; }
.acc-ver { position: absolute; right: 6px; top: 6px; height: 32px; padding: 0 10px; border: 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 600; }
.acc-ver:hover { background: var(--chip); }
.acc-opciones summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 2px 0; width: fit-content; }
.acc-opciones summary:hover { color: var(--ink); }
.acc-opciones[open] summary { margin-bottom: 10px; }
.acc-error { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); border-radius: 10px; padding: 10px 12px; font-size: 14px; white-space: pre-wrap; }
.acc-entrar { height: 46px; width: 100%; border-radius: 10px; font-size: 16px; }
.acc-salir { justify-self: center; border: 0; background: transparent; color: var(--muted); padding: 4px 12px; }
.acc-salir:hover { color: var(--ink); background: transparent; text-decoration: underline; }
.acc-cerrada { text-align: left; }

/* ---------- menú principal ---------- */
.mp { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); color: var(--ink); }
.mp button { border-radius: 10px; }
.mp-top { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px; background: var(--mp-barra, var(--panel)); color: var(--mp-barra-ink, var(--ink)); border-bottom: 1px solid var(--line); }
.mp-titulo { font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-sp { flex: 1; }
.mp-burger { display: none; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; background: transparent; }
.mp-burger:hover { background: var(--chip); }
.mp-usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mp-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--accent-ink); background: var(--accent); }
.mp-usuario-datos { display: grid; line-height: 1.25; min-width: 0; }
.mp-usuario-datos b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-usuario-datos span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mp-salir { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; }
.mp-ico { display: inline-grid; place-items: center; flex: none; line-height: 0; }

.mp-cuerpo { position: relative; display: grid; grid-template-columns: var(--mp-ancho, 300px) minmax(0, 1fr); min-height: 0; }
.mp-lateral { display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; min-height: 0; }
.mp-buscar { position: relative; display: block; }
.mp-buscar > .mp-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.mp-buscar-in { width: 100%; height: 42px; padding: 0 38px 0 40px; border-radius: 10px; background: var(--bg); }
.mp-buscar-in::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.mp-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 12px/1 var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; background: var(--panel); pointer-events: none; }
.mp-buscar-in:focus ~ .mp-kbd { display: none; }
.mp-nav { display: grid; gap: 2px; align-content: start; }
.mp-item, .mp-grupo-cab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: transparent; text-align: left; color: var(--ink); }
.mp-item:hover:not(:disabled), .mp-grupo-cab:hover { background: var(--chip); border-color: transparent; }
.mp-item.activo { background: var(--chip); color: var(--accent); font-weight: 600; }
.mp-item:disabled { opacity: 0.55; }
.mp-grupo { margin-top: 12px; }
/* Grupos principales (VENTAS Y CAJA, ADMINISTRACIÓN, etc.): bien marcados, con franja de color, ícono y fondo propio, para que no se
   confundan con los formularios que están adentro (pedido del usuario, 10/2026). Los colores salen de --accent, así que siguen el
   tema y los colores que cada usuario elige en Personalizar el menú. */
.mp-grupo-cab { color: var(--accent); font-size: 12.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 10px 10px 10px 8px; border-radius: 9px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--panel)); }
.mp-grupo-cab:hover { background: color-mix(in srgb, var(--accent) 19%, var(--panel)); color: var(--accent); }
.mp-grupo-cab[aria-expanded='true'] { background: color-mix(in srgb, var(--accent) 17%, var(--panel)); }
.mp-grupo-cab .mp-cuenta { background: var(--panel); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.mp-grupo-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mp-chev { display: inline-grid; transition: transform 0.15s; }
.mp-chev .mp-ico svg { width: 14px; height: 14px; }
.mp-grupo-cab[aria-expanded='true'] .mp-chev { transform: rotate(90deg); }
.mp-ico-grupo { display: inline-grid; }
.mp-cuenta { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--muted); background: var(--chip); border-radius: 999px; padding: 1px 8px; }
.mp-grupo-items { display: grid; gap: 2px; margin: 4px 0 0 10px; padding: 0 0 0 4px; border-left: 2px solid color-mix(in srgb, var(--accent) 28%, var(--line)); }
.mp-sub { padding-left: 12px; }
.mp-item-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mp-item .mp-ico { color: var(--muted); }
.mp-item.activo .mp-ico, .mp-item:hover:not(:disabled) .mp-ico { color: var(--accent); }
.mp-pronto { flex: none; font-size: 11px; font-weight: 600; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-radius: 999px; padding: 2px 8px; }
.mp-vacio-lat { color: var(--muted); font-size: 13px; padding: 6px 12px 6px 22px; }
/* Subgrupo dentro de un grupo (p. ej. "Reportes" > "Ventas", ver src/modulos.js): mismo patrón plegable que un
   grupo, anidado un nivel más adentro (la indentación se suma a la de .mp-grupo-items del padre). */
.mp-grupo .mp-subgrupo { margin-top: 4px; }
.mp-subgrupo-cab, .mp-subgrupo-cab:hover, .mp-subgrupo-cab[aria-expanded='true'] { font-size: 11.5px; padding: 6px 10px 6px 8px; border-left: 0; background: transparent; color: var(--ink); border-radius: 7px; }
.mp-subgrupo-cab:hover { background: var(--chip); }
.mp-subgrupo-cab .mp-cuenta { background: var(--chip); color: var(--muted); box-shadow: none; }
.mp-subgrupo-items { padding-left: 2px; margin-left: 6px; border-left: 2px solid var(--line); }
/* Pedido del usuario: abrir un formulario en una ventana nueva del navegador (además de en la pantalla actual).
   El botón queda siempre visible pero discreto (no solo al pasar el mouse, para que se note igual en pantallas
   táctiles) y se resalta al pasar el mouse o el foco. */
.mp-item-fila { position: relative; display: flex; align-items: stretch; }
.mp-item-fila > .mp-item { flex: 1; min-width: 0; }
.mp-abrir-ventana { flex: none; width: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); opacity: 0.55; border-radius: 8px; margin: 2px 4px 2px 0; }
.mp-abrir-ventana:hover, .mp-abrir-ventana:focus-visible { opacity: 1; background: var(--chip); color: var(--accent); }
.mp-abrir-ventana svg { width: 15px; height: 15px; }

.mp-principal { overflow-y: auto; min-height: 0; padding: 32px clamp(16px, 4vw, 48px) 48px; outline: none; }
.mp-contenido { max-width: 1080px; margin: 0 auto; }
.mp-h1 { margin: 0; font-size: clamp(22px, 3vw, 28px); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.mp-fecha { margin: 6px 0 0; color: var(--muted); }
.mp-seccion { margin-top: 32px; }
.mp-h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mp-h2-cab { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer; }
.mp-h2-cab:hover { background: var(--chip); color: var(--ink); }
.mp-h2-cab[aria-expanded='true'] .mp-chev { transform: rotate(90deg); }
.mp-seccion-cuerpo.hidden { display: none; }
.mp-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 0; }
.mp-contenido > .mp-tarjetas { margin-top: 24px; }
/* Subgrupo dentro de la sección de un grupo, en la portada (p. ej. "Reportes" > "Ventas"). */
.mp-subgrupo-seccion { margin-top: 20px; }
.mp-subgrupo-seccion:first-child { margin-top: 0; }
.mp-subgrupo-tit { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.mp-tarjeta { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 14px !important; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.mp-tarjeta:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-1px); }
.mp-tarjeta:disabled { opacity: 0.65; border-style: dashed; }
.mp-ico-tarjeta { width: 44px; height: 44px; border-radius: 12px; background: var(--chip); color: var(--accent); }
.mp-ico-tarjeta svg { width: 22px; height: 22px; }
.mp-tarjeta-txt { display: grid; gap: 4px; min-width: 0; padding-right: 4px; }
.mp-tarjeta-txt b { font-size: 15px; font-weight: 650; }
.mp-tarjeta-txt > span:not(.mp-tarjeta-tit) { color: var(--muted); font-size: 13px; line-height: 1.45; }
.mp-tarjeta-txt small { color: var(--accent); font-size: 12px; font-weight: 600; }
.mp-tarjeta-fila { position: relative; display: flex; align-items: stretch; }
.mp-tarjeta-fila > .mp-tarjeta { flex: 1; min-width: 0; }
.mp-tarjeta-fila > .mp-abrir-ventana { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background: var(--panel); border: 1px solid var(--line); margin: 0; }
.mp-tarjeta-fila > .mp-abrir-ventana:hover, .mp-tarjeta-fila > .mp-abrir-ventana:focus-visible { border-color: var(--accent); }
.mp-tarjeta-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink); font-size: 15px; }
.mp-vacio { display: grid; gap: 4px; padding: 22px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; margin-top: 24px; }
.mp-vacio b { color: var(--ink); font-weight: 650; }
.mp-vacio-grupo { margin-top: 0; }
.mp-aviso { border-style: solid; border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.mp-velo { position: fixed; left: 0; right: 0; bottom: 0; top: 60px; background: rgba(8, 14, 22, 0.5); z-index: 40; }

@media (max-width: 900px) {
  .mp-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .mp-burger { display: grid; }
  .mp-top { padding: 0 12px; gap: 10px; }
  .mp-lateral { position: fixed; z-index: 50; top: 60px; bottom: 0; left: 0; width: min(320px, 86vw); transform: translateX(-105%); transition: transform 0.2s; box-shadow: var(--shadow); }
  .mp-lateral.abierto { transform: none; }
  .mp-principal { padding-top: 24px; }
}
@media (max-width: 640px) {
  .mp-usuario-datos, .mp-salir > span:not(.mp-ico) { display: none; }
  .mp-salir { width: 40px; padding: 0; justify-content: center; }
  .mp-tarjetas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .mp-titulo { display: none; }
}
@media (hover: none) {
  .mp-kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-lateral, .mp-tarjeta, .mp-chev { transition: none; }
  .mp-tarjeta:hover:not(:disabled) { transform: none; }
}

/* ---------- pantalla principal ---------- */
.shell { height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.topbar {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  background: var(--panel); border-bottom: 1px solid var(--line); padding: 8px 16px;
}
.topbar .brand { font-weight: 700; }
.topbar .info { color: var(--muted); font-size: 13px; }
.topbar .info b { color: var(--ink); font-weight: 600; }
.topbar .sp { flex: 1; }
.main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; padding: 12px 16px; min-height: 0; }

/* ---------- cambio de contraseña (BSCAMPAS) ---------- */
.bs-main { display: grid; place-items: center; padding: 24px 16px; overflow: auto; }
.bs-tarjeta { width: min(420px, 100%); }
.bs-usuario { margin: -8px 0 4px; color: var(--muted); font-size: 14px; }
.bs-ver { display: flex; align-items: center; gap: 8px; margin: -6px 0 4px; font-size: 13px; color: var(--muted); cursor: pointer; }
.bs-ver input { width: auto; height: auto; }
.bs-detalle { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.bs-detalle b { color: var(--ink); font-weight: 600; }

/* ---------- alta rápida de cliente (CCCLIEFA) ---------- */
/* Pedido explícito del cliente: el fondo de la pantalla no debe ser blanco, sino un celeste clarito y
   transparente, para que los campos (que sí quedan sobre --panel, blanco/oscuro según el tema) resalten más
   por contraste. Mismo recurso que ya usa .acceso (login): degradés de --accent muy diluidos sobre --bg,
   con color-mix para que funcione igual en modo oscuro sin tocar nada más. */
.cf-main {
  display: grid; place-items: start center; padding: 28px 16px; overflow: auto;
  background:
    radial-gradient(900px 520px at 12% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(760px 480px at 105% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    color-mix(in srgb, var(--accent) 6%, var(--bg));
}
.cf-card { width: min(780px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 22px 22px; display: grid; gap: 14px; }
.cf-tit { font-weight: 700; font-size: 15px; }
.cf-avanzado { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; }
.cf-avanzado summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.cf-avanzado[open] summary { margin-bottom: 10px; }
.cf-acciones { display: flex; justify-content: flex-end; margin-top: 4px; }
.cf-acciones button { min-width: 160px; height: 44px; font-size: 15px; }
.left { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; min-height: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.people { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 10px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.field .row { display: flex; gap: 6px; }
.field .row input { flex: 0 0 96px; }
.field .row .desc { flex: 1; padding: 7px 10px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field .row .desc.set { color: var(--ink); border-style: solid; }
.entry { padding: 10px; }
.entry .bar { display: flex; gap: 8px; }
.entry input#entrada { flex: 1; font-size: 22px; padding: 10px 12px; font-family: var(--mono); }
.entry .hints { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.chip { background: var(--chip); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.chip.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip.dev { background: var(--bad); color: #fff; font-weight: 700; }
.chip.ok { background: var(--ok); color: #fff; font-weight: 700; }
.lines { overflow: auto; min-height: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { position: sticky; top: 0; background: var(--panel); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
td.num, th.num { text-align: right; }
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr.neg td { color: var(--bad); }
tbody tr.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 30%, transparent); } to { background: transparent; } }
.empty { padding: 30px; text-align: center; color: var(--muted); }

.right { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; min-height: 0; }
.total { padding: 14px 16px; }
.total .lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.total .big { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.total .subs { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: 13px; color: var(--muted); }
.total .subs span b { color: var(--ink); font-variant-numeric: tabular-nums; }
.keys { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.keys button { text-align: left; padding: 9px 10px; }
.keys button.wide { grid-column: 1 / -1; padding: 14px; font-size: 17px; text-align: center; }
.ticketline { padding: 8px 12px; font-size: 13px; color: var(--muted); }

/* ---------- modales ---------- */
.overlay { position: fixed; inset: 0; background: rgba(8, 15, 25, 0.55); display: grid; place-items: center; padding: 14px; z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); width: min(560px, 100%); max-height: 94vh; display: flex; flex-direction: column; }
.modal.wide { width: min(1000px, 100%); }
.modal header { padding: 14px 18px 8px; font-weight: 700; font-size: 17px; }
.modal .body { padding: 6px 18px 12px; overflow: auto; }
.modal footer { padding: 12px 18px 16px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--line); flex-wrap: wrap; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.form input, .form select { width: 100%; }
.msg { white-space: pre-wrap; margin: 4px 0 8px; }
.pre { font: 13px/1.25 var(--mono); white-space: pre; overflow: auto; background: var(--row-alt); border: 1px solid var(--line); border-radius: 8px; padding: 10px; max-height: 60vh; }

/* ---------- cobro ---------- */
.paysum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.paysum > div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.paysum .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.paysum .val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.paysum .ok { color: var(--ok); }
.paysum .bad { color: var(--bad); }
.paysum .vm { font-size: 11px; color: var(--muted); font-weight: 400; }
.payrows .prow { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; display: grid; grid-template-columns: 220px 150px 1fr auto; gap: 8px; align-items: start; }
.payrows .prow.bad { border-color: var(--bad); }
.payrows .extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.payrows .prow input, .payrows .prow select { width: 100%; }
.payrows .imp { font-size: 12px; color: var(--muted); }
.payrows label { font-size: 11px; color: var(--muted); display: block; }
.finish .vuelto { font-size: 44px; font-weight: 800; color: var(--ok); font-variant-numeric: tabular-nums; }

/* ---------- avisos ---------- */
#toasts { position: fixed; right: 14px; bottom: 14px; display: grid; gap: 8px; z-index: 100; width: min(420px, calc(100% - 28px)); }
.toast { background: var(--ink); color: var(--bg); border-radius: 8px; padding: 10px 14px; box-shadow: var(--shadow); white-space: pre-wrap; }
.toast.err { background: var(--bad); color: #fff; }
.toast.ok { background: var(--ok); color: #fff; }

/* ---------- impresión: rollo de 80 mm ---------- */
#print-area { display: none; }
@media print {
  @page { size: 80mm auto; margin: 3mm; }
  body { background: #fff; color: #000; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block; }
  #print-area pre { font: 2.5mm/1.15 'Courier New', Courier, monospace; margin: 0; width: 74mm; white-space: pre; color: #000; }
  #print-area .copia { page-break-after: always; break-after: page; }
  #print-area .copia:last-child { page-break-after: auto; break-after: auto; }
}

@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; overflow: auto; }
  .shell { height: auto; min-height: 100vh; }
  .paysum { grid-template-columns: 1fr 1fr; }
  .payrows .prow { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr; }
}

/* ---------- facturación con talonario (VTFACTUR) ---------- */
.toast.warn { background: var(--warn); color: #fff; }
.fa-shell { height: 100vh; height: 100dvh; }
.fa-main { overflow: auto; align-items: start; }
.fa-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fa-right { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-barra { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 8px; align-items: center; }
.fa-barra button { padding: 5px 10px; font-size: 13px; }
.fa-grupo { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding-right: 12px; border-right: 1px solid var(--line); }
.fa-grupo:last-child { border-right: 0; padding-right: 0; }
.fa-navs { display: flex; gap: 3px; }
.fa-nav { min-width: 32px; padding: 5px 8px; font-weight: 700; }
.fa-barra button.activa { border-color: var(--accent); background: var(--chip); color: var(--accent); font-weight: 600; }
/* cabecera compacta: 4 filas, campos bajos y la descripción junto a la etiqueta */
.fa-cab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px 10px; padding: 8px 10px 10px; }
.fa-f { grid-column: span var(--span, 3); min-width: 0; }
.fa-f > label { display: flex; gap: 6px; align-items: baseline; font-size: 11px; color: var(--muted); margin: 0 0 1px; white-space: nowrap; overflow: hidden; }
.fa-f > label > span:first-child { flex: none; }
.fa-cab .desc-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600; }
.fa-cab .field .row { display: flex; gap: 4px; align-items: center; }
.fa-cab .field .row input { flex: 1 1 0; width: 100%; min-width: 0; }
.fa-cab .field .row input.fa-cod { flex: 1 1 0; width: auto; }
#fa-cod_cliente { flex: 0 0 76px !important; width: 76px !important; }
.fa-cab .field .row .desc { flex: 1 1 0; min-width: 0; padding: 4px 8px; height: 30px; line-height: 20px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-cab input { padding: 4px 8px; height: 30px; font-size: 13px; }
.fa-cab input[readonly] { background: var(--row-alt); color: var(--muted); }
input.fa-dest { background: var(--chip); }
.fa-lov { flex: none; padding: 0 8px; height: 30px; font-weight: 700; line-height: 1; }
.fa-comp { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; min-height: 30px; }
.fa-tipo { font-weight: 700; white-space: nowrap; }
.fa-tal { padding: 3px 8px; font: 600 12px var(--mono); white-space: nowrap; }
.fa-timbrado, .fa-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 30px; font-size: 13px; font-variant-numeric: tabular-nums; }
.fa-ref { color: var(--muted); }
.fa-entry .bar { align-items: center; }
#fa-art { flex: 1; font-size: 20px; padding: 9px 12px; font-family: var(--mono); }
.fa-cant { width: 92px; font-size: 20px; padding: 9px 10px; text-align: right; }
.fa-x { color: var(--muted); }
.fa-lines { min-height: 200px; overflow: auto; }
.fa-tabla td { vertical-align: middle; }
.fa-tabla .mono { font-family: var(--mono); font-size: 13px; }
.fa-in { width: 92px; text-align: right; padding: 5px 8px; }
.fa-mini { padding: 3px 9px; font-size: 12px; }
.fa-sub { font-size: 12px; color: var(--muted); }
.fa-clic { cursor: pointer; }
.fa-clic:hover td, .fa-clic:focus td { background: var(--chip); outline: none; }
.total .fa-mon { font-weight: 400; text-transform: none; letter-spacing: 0; }
.fa-ajustes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fa-ajustes .fa-f { grid-column: auto; }
.fa-ajustes input { width: 100%; text-align: right; }
.fa-leyenda { margin-top: 10px; font-size: 12px; color: var(--muted); }
.fa-ext .fa-ext-ancho, .fa-ext button:last-child { grid-column: 1 / -1; }
.fa-nota:empty { display: none; }
.fa-filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fa-dup { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }

/* hoja de la factura (pantalla y papel A4) */
.fa-preview { background: #cfd6df; padding: 16px; border-radius: 8px; max-height: 62vh; overflow: auto; }
.fa-hoja {
  position: relative; display: flex; flex-direction: column; background: #fff; color: #000; width: 190mm; min-height: 265mm; margin: 0 auto; padding: 9mm 10mm;
  font: 11px/1.35 Arial, Helvetica, sans-serif; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.fa-hoja * { box-sizing: border-box; }
.fh-rotulo { position: absolute; top: 3mm; right: 10mm; font-size: 8.5px; letter-spacing: 0.06em; color: #444; }
.fh-cab { font-weight: 400; font-size: 11px; display: grid; grid-template-columns: 1fr 64mm; gap: 6mm; border-bottom: 1.5px solid #000; padding-bottom: 4mm; margin-top: 3mm; }
.fh-nombre { font-size: 17px; font-weight: 700; margin-bottom: 1mm; }
.fh-caja { border: 1.5px solid #000; padding: 3mm; text-align: center; }
.fh-timb { font-weight: 700; }
.fh-tit { font-size: 22px; font-weight: 800; letter-spacing: 0.08em; margin-top: 2mm; }
.fh-nro { font-size: 15px; font-weight: 700; }
.fh-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5mm 5mm; padding: 3mm 0; border-bottom: 1px solid #000; }
.fh-dato { display: flex; flex-direction: column; min-width: 0; }
.fh-dato.ancho { grid-column: span 2; }
.fh-dato span { font-size: 8.5px; color: #444; text-transform: uppercase; letter-spacing: 0.03em; }
.fh-dato b { font-weight: 600; overflow-wrap: anywhere; }
.fh-cuerpo { flex: 1; margin-top: 3mm; }
.fh-tabla, .fh-tot { width: 100%; border-collapse: collapse; }
.fh-tabla th { background: #ececec; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 1.4mm 1.6mm; font-size: 9px; text-align: left; text-transform: none; position: static; color: #000; letter-spacing: 0; }
.fh-tabla td { padding: 1.2mm 1.6mm; border-bottom: 1px solid #ddd; background: transparent; }
.fh-tabla tbody tr:nth-child(even) { background: transparent; }
.fh-tabla .n, .fh-tot .n { text-align: right; font-variant-numeric: tabular-nums; }
.fh-tot { width: 64%; margin-left: auto; margin-top: 2mm; }
.fh-tot td { padding: 1.3mm 1.6mm; border-bottom: 1px solid #999; font-weight: 600; }
.fh-tot td:first-child { width: 34%; }
.fh-tot .fh-total td { font-size: 13px; font-weight: 800; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.fh-letras { margin-top: 3mm; border: 1px solid #000; padding: 2mm 3mm; }
.fh-iva { display: flex; flex-wrap: wrap; gap: 3mm 8mm; margin-top: 3mm; }
.fh-ley { margin-top: 4mm; font-size: 9px; color: #333; }
@media print {
  #print-area.fa-imprimiendo .fa-hoja { box-shadow: none; width: auto; min-height: 262mm; padding: 0; margin: 0; break-after: page; page-break-after: always; }
  #print-area.fa-imprimiendo .fa-hoja:last-child { break-after: auto; page-break-after: auto; }
  #print-area.fa-imprimiendo .fh-rotulo { right: 0; top: 0; }
  #print-area.fa-imprimiendo .fh-cab { margin-top: 6mm; }
}

/* hoja de presupuesto y pedido con el diseño del KuDE (public/hoja-kude.js). Una página A4 por hoja; el área útil es de 186 × 270 mm
   (A4 con márgenes de 12 mm). Las columnas del detalle se dibujan con una grilla compartida entre el encabezado, las filas y las guías verticales. */
.kd-juego { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.kd-hoja {
  --kd-cols: 13mm minmax(0, 1fr) 15mm 19mm 13mm 17mm 17mm 15mm 20mm;
  position: relative; display: flex; flex-direction: column; gap: 1.6mm; background: #fff; color: #000; width: 186mm; height: 270mm; padding: 0;
  font: 9.5px/1.3 Arial, Helvetica, sans-serif; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); -webkit-print-color-adjust: exact; print-color-adjust: exact; overflow: hidden;
}
.kd-hoja * { box-sizing: border-box; }
/* hoja del pedido: columna extra "Ubicaciones" (picking) después de la descripción; los subtotales se corren una columna */
.kd-hoja.kd-ubic { --kd-cols: 12mm minmax(0, 1fr) 30mm 11mm 17mm 11mm 12mm 14mm 14mm 18mm; } /* mismas medidas que COLS_PEDIDO en hoja-kude.js */
.kd-fila .desc { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
.kd-fila .ubic { white-space: normal; overflow-wrap: anywhere; font-size: 8px; line-height: 1.3; font-weight: 700; }
.kd-ubic .kd-t > .et { grid-column: 1 / 8; }
.kd-ubic .kd-t > .c7 { grid-column: 8; }
.kd-ubic .kd-t > .c8 { grid-column: 9; }
.kd-ubic .kd-t > .c9 { grid-column: 10; }
.kd-box { border: 1.4px solid #000; }
.kd-cab { display: grid; grid-template-columns: 42mm minmax(0, 1fr) 64mm; gap: 0; padding: 0; align-items: stretch; }
.kd-cab:not(:has(.kd-logo)) { grid-template-columns: minmax(0, 1fr) 64mm; }
.kd-logo { width: 36mm; max-height: 22mm; object-fit: contain; align-self: center; justify-self: center; margin-left: 3mm; }
.kd-emp { font-size: 9.5px; padding: 3mm 4mm 3mm 4mm; }
.kd-emp-nombre { font-size: 12.5px; font-weight: 700; margin-bottom: 0.6mm; }
.kd-act { font-size: 7.5px; margin-top: 0.8mm; }
.kd-id { font-size: 10.5px; display: flex; flex-direction: column; justify-content: center; gap: 1.4mm; border-left: 1.4px solid #000; padding: 3mm 4mm; }
.kd-titulo { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; }
.kd-nro { font-size: 12px; font-weight: 700; }
.kd-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; padding: 2.4mm 4mm; font-size: 9.5px; }
.kd-col { display: flex; flex-direction: column; gap: 0.9mm; min-width: 0; }
.kd-dato { overflow-wrap: anywhere; }
.kd-dato.kd-dos { display: flex; justify-content: space-between; gap: 4mm; }
.kd-detalle { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-top-width: 1.4px; }
.kd-fila { display: grid; grid-template-columns: var(--kd-cols); align-items: center; min-height: 5mm; }
.kd-fila > div { padding: 0.5mm 1.4mm; min-width: 0; }
.kd-fila .n { text-align: right; font-variant-numeric: tabular-nums; }
.kd-fila .c { text-align: center; white-space: nowrap; overflow: hidden; font-size: 8.5px; }
.kd-th { background: #fff; border-bottom: 1.4px solid #000; font-size: 8.5px; text-align: center; line-height: 1.15; min-height: 8mm; }
.kd-th > div { text-align: center; }
.kd-th > div + div { border-left: 1px solid #000; }
.kd-cuerpo { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.kd-guias { position: absolute; inset: 0; display: grid; grid-template-columns: var(--kd-cols); pointer-events: none; }
.kd-guias i { border-left: 1px solid #000; }
.kd-guias i:first-child { border-left: 0; }
.kd-cuerpo .kd-fila { position: relative; }
.kd-tot { background: #d0d0d0; padding: 1.4mm 0; display: flex; flex-direction: column; gap: 0.7mm; font-size: 9.5px; }
.kd-t { display: grid; grid-template-columns: var(--kd-cols); align-items: baseline; padding: 0 0; }
.kd-t > * { padding: 0 1.4mm; }
.kd-t > .et { grid-column: 1 / 7; }
.kd-t > .c7 { grid-column: 7; text-align: right; }
.kd-t > .c8 { grid-column: 8; text-align: right; }
.kd-t > .c9 { grid-column: 9; text-align: right; }
.kd-t.kd-gran { font-weight: 800; }
.kd-t.kd-let { display: flex; gap: 2mm; padding: 0 1.4mm; margin-top: 0.6mm; }
.kd-t.kd-let > * { padding: 0; }
.kd-t.kd-iva { display: flex; gap: 6mm; padding: 0 1.4mm; margin-top: 1.6mm; justify-content: space-between; }
.kd-t.kd-iva > * { padding: 0; }
.kd-t.kd-sigue { display: block; text-align: right; font-style: italic; padding: 0 1.4mm; }
.kd-pag { flex: none; text-align: center; font-size: 8px; }
.kd-pie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6mm; padding: 2.2mm 4mm 2mm; flex: none; }
.kd-com { border: 1px solid #000; height: 22mm; padding: 1.4mm 2.2mm; overflow: hidden; }
.kd-com-tit { font-size: 8px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.8mm; }
.kd-com-txt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 10.5px; line-height: 1.3; }
.kd-nota { font-size: 7.5px; color: #333; text-align: center; }
@media print {
  #print-area.fa-imprimiendo .kd-juego { display: block; }
  #print-area.fa-imprimiendo .kd-hoja { box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  #print-area.fa-imprimiendo .kd-hoja:last-child { break-after: auto; page-break-after: auto; }
}

/* hoja del recibo de cobro (pantalla y papel; pedido del usuario, no está en el .fmt). Una hoja A4 vertical lleva 2 copias, ORIGINAL
   arriba y DUPLICADO abajo, separadas por una línea de puntos para cortar. Cada copia tiene 2 bloques de facturas de 9 filas (18 por
   copia); si hay más, el recibo sigue en otra hoja. */
.rc-juego { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.rc-pagina { display: flex; flex-direction: column; background: #fff; color: #000; width: 198mm; height: 285mm; padding: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); overflow: hidden; }
.rc-divisor { flex: none; height: 0; border-top: 1px dashed #666; margin: 2.5mm 0; }
.rc-hoja {
  position: relative; flex: none; height: 137mm; background: #fff; color: #000; padding: 3.5mm 4.5mm; border: 1.4px solid #000; display: flex; flex-direction: column; gap: 1.8mm;
  font: 9.5px/1.3 Arial, Helvetica, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rc-hoja * { box-sizing: border-box; }
.rh-rotulo { position: absolute; top: 1.4mm; right: 4.5mm; font-size: 7.5px; letter-spacing: 0.06em; color: #444; }
.rh-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) 58mm; gap: 3.5mm; align-items: stretch; border: 1.4px solid #000; margin-top: 1.5mm; }
.rh-cab:not(:has(.rh-logo)) { grid-template-columns: minmax(0, 1fr) 58mm; }
.rh-logo { max-width: 30mm; max-height: 17mm; object-fit: contain; align-self: center; margin-left: 2.5mm; }
.rh-emp { display: flex; flex-direction: column; gap: 0.3mm; font-size: 9px; padding: 2mm 0; }
.rh-emp-nombre { font-size: 12px; font-weight: 700; }
.rh-act { font-size: 7.3px; }
.rh-caja { border-left: 1.4px solid #000; padding: 1.6mm 3mm; font-size: 9.5px; display: flex; flex-direction: column; justify-content: center; gap: 0.8mm; }
.rh-tit { font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; margin: 0.6mm 0; }
.rh-nro { font-size: 10.5px; font-weight: 700; }
.rh-datos { display: grid; grid-template-columns: minmax(0, 1fr) 52mm; gap: 0.8mm 4mm; font-size: 9.5px; }
.rh-campo { display: flex; gap: 1.6mm; border-bottom: 1px solid #bbb; padding: 0.4mm 0; min-width: 0; }
.rh-campo span { color: #444; white-space: nowrap; }
.rh-campo b { overflow-wrap: anywhere; }
.rh-campo.todo { grid-column: 1 / -1; }
.rh-bloques { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.rh-bloques.uno { grid-template-columns: 1fr; }
.rh-tfac { width: 100%; border-collapse: collapse; border: 1px solid #000; table-layout: fixed; }
.rh-tfac th, .rh-tfac td { border: 1px solid #999; padding: 0 1.2mm; height: 5.3mm; font-size: 9px; line-height: 1.1; overflow: hidden; white-space: nowrap; }
.rh-tfac th { background: #ececec; text-align: left; height: 4.4mm; }
.rh-tfac .num { text-align: right; font-variant-numeric: tabular-nums; }
.rh-pie { display: grid; grid-template-columns: minmax(0, 1fr) 54mm; gap: 3mm; align-items: start; }
.rh-formas-tit { font-weight: 700; font-size: 8px; margin-bottom: 0.6mm; }
.rh-formas table { width: 100%; border-collapse: collapse; border: 1px solid #999; table-layout: fixed; }
.rh-formas th, .rh-formas td { border: 1px solid #ccc; padding: 0.3mm 1mm; font-size: 7.6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rh-formas th { background: #ececec; text-align: left; }
.rh-formas .num { text-align: right; font-variant-numeric: tabular-nums; }
.rh-sinformas { font-size: 8px; color: #666; font-style: italic; }
.rh-total { display: flex; flex-direction: column; border: 1.4px solid #000; padding: 1.4mm 2.2mm; font-weight: 800; font-size: 10.5px; gap: 0.6mm; }
.rh-total b { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.rh-sigue { font-weight: 400; font-style: italic; font-size: 8.5px; }
.rh-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin-top: auto; padding-top: 5mm; font-size: 8.5px; }
.rh-obs { font-size: 7px; color: #333; }
@media print {
  #print-area.rc-imprimiendo .rc-juego { display: block; }
  #print-area.rc-imprimiendo .rc-pagina { box-shadow: none; break-after: page; page-break-after: always; }
  #print-area.rc-imprimiendo .rc-pagina:last-child { break-after: auto; page-break-after: auto; }
}
@media (max-width: 900px) {
  .fa-shell { height: auto; min-height: 100vh; }
  .fa-right { position: static; }
  .fa-cab { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fa-f { grid-column: span min(var(--span, 3), 6); }
  .fa-f[style*="--span:6"], .fa-f[style*="--span:5"] { grid-column: 1 / -1; }
  .fa-f[style*="--span:4"] { grid-column: span 3; }
  .fa-filtros { grid-template-columns: 1fr 1fr; }
  .fa-grupo { border-right: 0; padding-right: 0; }
}
@media (max-width: 560px) {
  .fa-cab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-f { grid-column: span 1; }
  .fa-comp { flex-wrap: wrap; }
  .fa-f[style*="--span:4"], .fa-f[style*="--span:5"], .fa-f[style*="--span:6"] { grid-column: 1 / -1; }
  .fa-ajustes .fa-f { grid-column: auto; }
  .fa-entry .bar { flex-wrap: wrap; }
  #fa-art { flex: 1 0 100%; min-width: 0; }
  .fa-entry .fa-x { display: none; }
  .fa-entry .bar .fa-cant { flex: 0 0 84px; }
}

/* el modal nunca debe ser más ancho que la pantalla (hoja A4 en celular) */
.overlay { grid-template-columns: minmax(0, 1fr); }
.overlay > .modal { min-width: 0; max-width: 100%; }
.fa-preview { max-width: 100%; }

/* ---------- VTFACTUR: rediseño de la pantalla (.vf) ----------
   Pedido del usuario: "está todo muy junto y cuesta a simple vista, no queda muy claro" y que los campos "se
   diferencien mejor del fondo". Todo va scopeado a `.vf` (la clase que lleva el contenedor de esta pantalla)
   porque las clases fa-* las comparten otras pantallas (CCRECIBO, CCMOVCAJ, CCCLIENT...) y no deben cambiar.
   Receta: fondo de página con un tinte azul (más oscuro que las tarjetas), tarjetas blancas con borde y sombra,
   cada bloque con una franja de título, campos editables con borde marcado y sombra interior, y los de solo
   lectura (descripciones, campos bloqueados) sin borde fuerte y con fondo grisáceo, para que se note de un vistazo
   qué se puede tocar y qué no. Los colores salen de las variables del tema (claro/oscuro) con color-mix. */
.vf {
  --vf-fondo: color-mix(in srgb, var(--accent) 11%, var(--bg));
  --vf-borde: var(--campo-edit-borde, color-mix(in srgb, var(--ink) 52%, var(--panel)));
  --vf-tarjeta: color-mix(in srgb, var(--ink) 18%, var(--panel));
  --vf-franja: color-mix(in srgb, var(--accent) 10%, var(--panel));
  --vf-solo: var(--campo-solo-bg, color-mix(in srgb, var(--ink) 9%, var(--panel)));
  --vf-etiqueta: color-mix(in srgb, var(--ink) 72%, var(--panel));
  --vf-sombra: 0 1px 2px rgba(15, 30, 55, 0.12), 0 6px 16px rgba(15, 30, 55, 0.07);
  background: var(--vf-fondo);
}
.vf .fa-main { padding: 14px 22px 24px; gap: 18px; }
.vf .fa-left, .vf .fa-right { gap: 12px; }
.vf .card, .vf .vf-sec { background: var(--panel); border: 1px solid var(--vf-tarjeta); border-radius: 12px; box-shadow: var(--vf-sombra); }

/* bloques de la cabecera */
.vf-cab { display: flex; flex-direction: column; gap: 12px; }
.vf-sec { overflow: hidden; }
.vf .vf-sec-tit { padding: 7px 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--vf-franja); border-bottom: 1px solid var(--vf-tarjeta); }
.vf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 18px; padding: 14px 18px 16px; }
.vf .vf-grid > .fa-f { grid-column: span var(--span, 3); min-width: 0; }
.vf .fa-f > label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--vf-etiqueta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* campos: editables con borde marcado y sombra interior */
.vf .field .row { display: flex; gap: 6px; align-items: center; }
.vf .field .row input, .vf .field .row textarea { flex: 1 1 0; width: 100%; min-width: 0; }
.vf .field .row input.fa-cod { flex: 0 0 62px; width: 62px; }
.vf #fa-cod_cliente { flex: 0 0 112px !important; width: 112px !important; }
.vf .field textarea { height: 56px; padding: 5px 11px; font: inherit; font-size: 14px; line-height: 1.3; resize: none; border: 1.5px solid var(--vf-borde); border-radius: 8px; background: var(--panel); color: inherit; box-shadow: inset 0 1px 2px rgba(15, 30, 55, 0.10); }
.vf .field textarea:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 0; }
.vf .field textarea[readonly] { background: var(--vf-solo); border-color: var(--line); box-shadow: none; color: color-mix(in srgb, var(--ink) 80%, var(--panel)); cursor: default; }
.vf .field input, .vf .fa-cant {
  height: 36px; padding: 5px 11px; font-size: 14px; border: 1.5px solid var(--vf-borde); border-radius: 8px;
  background: var(--panel); box-shadow: inset 0 1px 2px rgba(15, 30, 55, 0.10);
}
.vf .field input:hover:not([readonly]), .vf .fa-cant:hover { border-color: var(--accent); }
.vf .field input:focus, .vf .fa-cant:focus, .vf #fa-art:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 0; }
/* los campos clave (cliente, condición, artículo) se destacan con borde y tinte de acento */
.vf input.fa-dest { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border-color: var(--accent); }
/* solo lectura: sin sombra interior, fondo grisáceo y borde suave */
.vf .field input[readonly] { background: var(--vf-solo); border-color: var(--line); box-shadow: none; color: color-mix(in srgb, var(--ink) 80%, var(--panel)); cursor: default; }
.vf .field .row .desc {
  flex: 1 1 0; min-width: 0; height: 36px; line-height: 22px; padding: 5px 11px; box-sizing: border-box; border: 1.5px solid transparent; border-radius: 8px;
  background: var(--vf-solo); color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vf .field .row .desc.set { color: var(--ink); }
.vf .fa-lov { flex: none; width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--vf-borde); border-radius: 8px; background: var(--panel); color: var(--accent); font-size: 16px; }
.vf .fa-lov:hover:not(:disabled) { background: var(--chip); border-color: var(--accent); }

/* datos de la factura: valores de solo lectura grandes y legibles */
.vf .fa-comp { gap: 10px; min-height: 36px; flex-wrap: nowrap; }
.vf .fa-tipo { font-size: 18px; font-weight: 700; }
.vf .fa-tal { height: 30px; padding: 0 11px; border: 1.5px solid var(--vf-borde); border-radius: 8px; background: var(--vf-solo); }
.vf .fa-timbrado, .vf .fa-ref { min-height: 36px; font-size: 15px; font-weight: 600; }
.vf .fa-timbrado .muted { font-size: 12px; font-weight: 400; }
.vf .fa-ref { color: var(--muted); font-weight: 400; }

/* barra de acciones: cada grupo en su propio recuadro */
.vf .fa-barra { gap: 8px 10px; padding: 8px 10px; }
.vf .fa-barra .fa-grupo, .vf .fa-barra .fa-grupo:last-child { gap: 6px; padding: 4px; border: 1px solid var(--vf-tarjeta); border-radius: 10px; background: var(--vf-solo); }
.vf .fa-barra button { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 7px; border-color: var(--vf-borde); }
.vf .fa-barra button.primary { border-color: var(--accent); padding: 0 20px; }
.vf .fa-barra button.activa { border-color: var(--accent); background: var(--chip); color: var(--accent); }
.vf .fa-barra button.danger:not(:disabled) { border-color: var(--bad); }
.vf .fa-barra .fa-nav { min-width: 34px; padding: 0 8px; }

/* carga de artículos */
.vf .fa-entry { padding: 0; overflow: hidden; }
.vf .fa-entry .bar { padding: 12px 18px 14px; gap: 10px; }
.vf #fa-art { flex: 1; height: 48px; padding: 0 16px; font-size: 20px; border: 2px solid var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); box-shadow: inset 0 1px 2px rgba(15, 30, 55, 0.10); }
.vf .fa-cant { width: 100px; height: 48px; padding: 0 12px; font-size: 20px; border-radius: 10px; }
.vf .fa-entry .bar button { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 10px; border-color: var(--vf-borde); }
.vf .fa-entry .bar button.primary { border-color: var(--accent); }

/* detalle */
.vf .fa-lines { padding: 0; min-height: 220px; }
.vf .fa-tabla th { padding: 10px 14px; font-weight: 700; color: var(--vf-etiqueta); background: var(--vf-solo); border-bottom: 1px solid var(--vf-tarjeta); }
.vf .fa-tabla td { padding: 10px 14px; }
.vf .fa-in { height: 34px; padding: 4px 10px; }
.vf .empty { padding: 48px 20px; font-size: 15px; }

/* totales y botones de la derecha */
.vf .total { padding: 18px 20px 20px; }
.vf .total .lbl { font-weight: 700; color: var(--vf-etiqueta); }
.vf .total .big { margin-top: 4px; font-size: 42px; color: var(--accent); }
.vf .total .subs { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vf-tarjeta); gap: 4px 14px; }
.vf .fa-ajustes { margin-top: 14px; padding-top: 14px; gap: 12px; border-top: 1px solid var(--vf-tarjeta); }
.vf .fa-ajustes .fa-f { grid-column: auto; }
.vf .keys { padding: 12px; gap: 10px; }
.vf .keys button { height: 38px; padding: 0 12px; border-color: var(--vf-borde); }

/* condiciones de venta: 3 por fila (así la descripción de cada lista de ayuda, p. ej. "LISTA PUBLICO (IVA INCLUIDO)",
   entra completa); 4 por fila solo en monitores muy anchos (más de 1700 px), donde sigue entrando. El comentario
   completa la última fila. */
.vf .vf-grid-cond > .fa-f { grid-column: span 3; }
.vf .vf-grid-cond > .vf-com { grid-column: span 3; }
@media (max-width: 1700px) {
  .vf .vf-grid-cond > .fa-f { grid-column: span 4; }
  .vf .vf-grid-cond > .vf-com { grid-column: span 8; }
}

/* pantallas medianas: dos columnas de campos; angostas: una sola */
@media (max-width: 1360px) {
  .vf .vf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf .vf-grid > .fa-f { grid-column: span 1; }
  .vf .vf-grid > .vf-w { grid-column: 1 / -1; }
  .vf .vf-grid-id { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vf .vf-grid-id > .fa-f { grid-column: span 2; }
  .vf .vf-grid-id > .fa-f:nth-child(n + 4) { grid-column: span 3; }
  .vf .fa-comp { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .vf .fa-main { padding: 14px 12px 24px; }
  .vf .fa-right { position: static; }
}
@media (max-width: 640px) {
  .vf .vf-grid, .vf .vf-grid-id { grid-template-columns: minmax(0, 1fr); }
  .vf .vf-grid > .fa-f, .vf .vf-grid > .vf-w, .vf .vf-grid-id > .fa-f, .vf .vf-grid-id > .fa-f:nth-child(n + 4) { grid-column: 1 / -1; }
  .vf .fa-entry .bar { flex-wrap: wrap; }
  .vf #fa-art { flex: 1 0 100%; }
  .vf .fa-entry .fa-x { display: none; }
}

/* ---------- menú principal: DEFMENU (contexto, logos, avisos) y colores del usuario ---------- */
.mp-top-color .mp-top { border-bottom-color: transparent; }
.mp-top-color .mp-top .acc-marca { background: color-mix(in srgb, var(--mp-barra-ink) 18%, transparent); color: var(--mp-barra-ink); }
.mp-top-color .mp-top button { background: transparent; color: var(--mp-barra-ink); border-color: color-mix(in srgb, var(--mp-barra-ink) 40%, transparent); }
.mp-top-color .mp-top button:hover { background: color-mix(in srgb, var(--mp-barra-ink) 14%, transparent); border-color: var(--mp-barra-ink); }
.mp-top-color .mp-top .mp-burger, .mp-top-color .mp-top .mp-cfg { border-color: transparent; }
.mp-top-color .mp-usuario-datos span { color: color-mix(in srgb, var(--mp-barra-ink) 78%, transparent); }
.mp-top-color .mp-avatar { background: var(--mp-barra-ink); color: var(--mp-barra); }
.mp-cfg { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-color: transparent; background: transparent; }
.mp-cfg:hover { background: var(--chip); }
.mp-version { margin-top: auto; padding: 8px 10px 0; font-size: 12px; color: var(--muted); }

.mp-portada { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mp-portada-txt { min-width: 0; flex: 1 1 320px; }
.mp-datos { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.mp-contexto { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mp-ctx { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 8px 12px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px !important; }
.mp-ctx:hover:not(:disabled) { border-color: var(--accent); }
.mp-ctx > .mp-ico { color: var(--accent); }
.mp-ctx-txt { display: grid; min-width: 0; line-height: 1.25; }
.mp-ctx-txt small { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.mp-ctx-txt b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ctx-chev { display: inline-grid; color: var(--muted); }
.mp-ctx-chev .mp-ico svg { width: 14px; height: 14px; }
.mp-ctx.falta { border-color: var(--warn); border-style: dashed; }
.mp-ctx.falta > .mp-ico, .mp-ctx.falta .mp-ctx-txt b { color: var(--warn); }
.mp-ctx:disabled { opacity: 0.75; }

.mp-logos { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 16px; flex: 0 1 auto; min-width: 0; }
.mp-logo { display: block; max-width: min(240px, 100%); max-height: 84px; width: auto; height: auto; object-fit: contain; }
.mp-logo-falta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--muted); background: transparent; border: 1px dashed var(--line); border-radius: 12px !important; }
.mp-logo-falta:hover { color: var(--accent); border-color: var(--accent); }

.mp-aviso-fila { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; margin-top: 18px; padding: 12px 16px; text-align: left; color: var(--ink); }
.mp-aviso-fila > .mp-ico { color: var(--warn); margin-top: 1px; }
.mp-aviso-fila > span:not(.mp-ico) { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.mp-refrescar { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); background: transparent; }
.mp-refrescar:hover { color: var(--accent); }

.mp-lov { display: grid; gap: 4px; margin-top: 10px; max-height: 50vh; overflow-y: auto; }
.mp-lov-buscar { width: 100%; height: 40px; padding: 0 12px; }
.mp-lov-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; background: transparent; border-color: transparent; }
.mp-lov-fila:hover { background: var(--chip); }
.mp-lov-fila.act { border-color: var(--accent); background: var(--chip); }
.mp-lov-fila small { color: var(--muted); font-family: var(--mono); }

/* ---------- ventanas "Personalizar el menú" y "Personalizar los formularios" (mismas clases .pz-*) ---------- */
.pz { display: grid; gap: 22px; }
.pz-sec h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pz-lab { margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
.pz-nota { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pz-info p { margin: 4px 0; font-size: 14px; }
.pz-mods { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; font-size: 14px; }

.pz-previa { display: grid; grid-template-rows: auto auto; height: 168px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 12px; }
.pz-p-barra { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--mp-barra, var(--panel)); color: var(--mp-barra-ink, var(--ink)); border-bottom: 1px solid var(--line); }
.pz-p-barra .acc-marca { padding: 2px 8px; font-size: 10px; }
.pz-p-barra .mp-sp { flex: 1; }
.pz-p-av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 9px; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.pz-previa.mp-top-color .pz-p-barra { border-bottom-color: transparent; }
.pz-previa.mp-top-color .pz-p-barra .acc-marca { background: color-mix(in srgb, var(--mp-barra-ink) 18%, transparent); color: var(--mp-barra-ink); }
.pz-previa.mp-top-color .pz-p-av { background: var(--mp-barra-ink); color: var(--mp-barra); }
.pz-p-cuerpo { display: grid; grid-template-columns: 34% minmax(0, 1fr); min-height: 0; }
.pz-p-lat { display: grid; align-content: start; gap: 2px; padding: 10px 8px; background: var(--panel); border-right: 1px solid var(--line); }
.pz-p-item { padding: 5px 8px; border-radius: 6px; color: var(--muted); }
.pz-p-item.act { background: var(--chip); color: var(--accent); font-weight: 600; }
.pz-p-pri { display: grid; align-content: start; justify-items: start; gap: 8px; padding: 12px; }
.pz-p-pri > b { font-size: 14px; }
.pz-p-tarj { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.pz-p-ico { width: 18px; height: 18px; border-radius: 5px; background: var(--chip); border: 2px solid var(--accent); box-sizing: border-box; }
.pz-p-btn { padding: 4px 10px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.pz-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--chip); border-radius: 10px; }
.pz-seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 8px !important; }
.pz-seg button.act { background: var(--panel); color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 30, 55, 0.18); }
.pz-temas { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-tema { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px !important; }
.pz-tema.act { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pz-muestra { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.pz-colores { display: grid; gap: 4px; margin-top: 12px; }
.pz-fila { display: grid; grid-template-columns: minmax(0, 1fr) 46px 78px; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.pz-fila label { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.pz-fila label > span { display: grid; gap: 2px; }
.pz-fila label small { color: var(--muted); font-size: 12.5px; }
.pz-fila input[type='color'] { width: 46px; height: 34px; padding: 2px; cursor: pointer; }
.pz-fila input[type='color']:disabled { opacity: 0.4; cursor: not-allowed; }
.pz-hex { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pz-ver { display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: 10px 16px; }
.pz-ver label { font-size: 14px; }

.pz-imagenes { display: grid; gap: 12px; }
.pz-alc { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14px; }
.pz-img { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.pz-img-vista { display: grid; place-items: center; height: 84px; border-radius: 8px; background: repeating-conic-gradient(var(--row-alt) 0% 25%, var(--panel) 0% 50%) 50% / 16px 16px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; overflow: hidden; }
.pz-img-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pz-img-txt { display: grid; gap: 6px; min-width: 0; }
.pz-img-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.pz-img-bot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }

@media (max-width: 640px) {
  .mp-portada { gap: 16px; }
  .mp-logos { justify-content: flex-start; order: -1; flex: 1 1 100%; }
  .mp-logo { max-height: 64px; }
  .mp-ctx { flex: 1 1 100%; }
  .pz-ver, .pz-alc { grid-template-columns: minmax(0, 1fr); }
  .pz-img { grid-template-columns: minmax(0, 1fr); }
  .pz-fila { grid-template-columns: minmax(0, 1fr) 46px; }
  .pz-hex { display: none; }
  .pz-previa { height: 150px; }
  .pz-pf-previa { height: 170px; }
}
.pz-fila input[type='checkbox'] { flex: none; margin-top: 3px; }

/* "Personalizar los formularios": vista previa de una pantalla de formulario genérica (no la del menú) y la
   casilla que vincula sus colores a los de "Personalizar el menú" (ver menu-personalizar.js, abrirFormularios). */
.pz-vinc { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; cursor: pointer; }
.pz-vinc input { margin-top: 3px; flex: none; }
.pz-pf-previa { display: grid; grid-template-rows: auto 1fr; height: 190px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 12px; }
.pz-pf-top { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pz-pf-volver { color: var(--accent); font-weight: 600; }
.pz-pf-cuerpo { display: grid; place-items: center; padding: 14px; }
.pz-pf-card { width: min(260px, 100%); padding: 14px; display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.pz-pf-campo label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.pz-pf-in { height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.pz-pf-card .pz-p-btn { justify-self: start; }

/* ---- CCMOVCAJ (movimiento de caja) ---- */
.mc-overlay { position: fixed; inset: 0; z-index: 30; background: var(--bg); overflow: auto; }
.mc-overlay .fa-shell { height: 100%; }
.mc-fijo { display: flex; align-items: center; min-height: 30px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Serie y número del recibo (CCRECIBO): pedido del usuario de que se vea un poco más grande que el resto de los campos fijos. */
#rc-nro { font-size: 17px; }
.mc-cli { display: flex; gap: 4px; align-items: center; }
.mc-cli .desc { flex: 1 1 0; min-width: 0; padding: 4px 8px; height: 30px; line-height: 20px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); }
.mc-cli .desc.set { color: var(--ink); border-style: solid; }
#mc-cliente { flex: 0 0 96px; width: 96px; padding: 4px 8px; height: 30px; font-size: 13px; }
#mc-cliente[readonly] { background: var(--row-alt); color: var(--muted); }
#mc-fecha { padding: 4px 8px; height: 30px; font-size: 13px; width: 100%; }
.mc-sec { padding: 8px 10px 10px; }
.mc-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; margin-bottom: 8px; }
.mc-add { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.mc-add input { flex: 1 1 0; min-width: 0; }
.mc-add select { flex: 0 0 90px; }
.mc-acc { white-space: nowrap; text-align: right; }
.mc-acc .fa-mini + .fa-mini { margin-left: 4px; }
.mc-quitar { color: var(--bad); }
.mc-res { margin-top: 12px; display: grid; gap: 4px; }
.mc-fila { display: flex; justify-content: space-between; font-size: 14px; font-variant-numeric: tabular-nums; }
.mc-fila.ok b { color: var(--ok); }
.mc-fila.bad b { color: var(--bad); }
.mc-nota { margin-top: 10px; font-size: 12px; color: var(--muted); }
.mc-filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-sec td.num, .mc-sec th { white-space: nowrap; }
.mc-sec td { vertical-align: middle; }

/* ---- STARTICU (maestro de artículos) ---- */
.ar-shell { height: 100vh; height: 100dvh; grid-template-rows: auto auto 1fr; }
.ar-shell .fa-barra { margin: 0 16px; }
/* maestro-detalle: la lista de artículos queda siempre visible a la izquierda (salvo en pantallas angostas,
   donde alcanza con Buscar F9) y navega en paralelo a las flechas primero/anterior/siguiente/último */
.ar-cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; padding: 14px 16px 16px; height: 100%; min-height: 0; }
/* CCCLIENT: lista redimensionable arrastrando el divisor (r.resizer); el ancho se guarda en localStorage
   (--cc-lista-ancho). Clase modificadora aparte para no cambiar el layout fijo de 240px de STARTICU. */
.ar-cuerpo.cc-resizable { grid-template-columns: var(--cc-lista-ancho, 260px) 6px minmax(0, 1fr); gap: 0; }
.ar-cuerpo.cc-resizable > .ar-lista { margin-right: 14px; }
.ar-cuerpo.cc-resizable > .ar-detalle { margin-left: 14px; }
.ar-resizer { cursor: col-resize; background: transparent; position: relative; touch-action: none; }
.ar-resizer::after { content: ''; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: var(--line); }
.ar-resizer:hover::after, .ar-resizer.arrastrando::after, .ar-resizer:focus-visible::after { background: var(--accent); width: 3px; }
.ar-resizer:focus { outline: none; }
.ar-lista { display: flex; flex-direction: column; min-height: 0; padding: 10px; gap: 8px; }
.ar-lista-buscar input { width: 100%; }
/* overflow-y solo (nunca horizontal): con table-layout fijo, la descripción se corta con "…" en vez de
   desbordar y arrastrar el código fuera de vista al desplazar la lista */
.ar-lista-tabla { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.ar-lista-tabla table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ar-lista-tabla td { padding: 6px 8px; font-size: 13px; border-bottom: 1px solid var(--line); overflow: hidden; }
.ar-lista-cod { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); width: 4.5em; text-overflow: ellipsis; }
.ar-lista-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-lista-tabla tr.act td { background: var(--chip); color: var(--accent); font-weight: 600; }
.ar-lista-tabla .empty { padding: 16px 4px; font-size: 13px; }
.ar-lista-cont { font-size: 12px; text-align: center; }
.ar-detalle { overflow: auto; min-height: 0; }
.ar-form { display: grid; gap: 10px; max-width: 980px; margin: 0 auto; }
.ar-fija { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 12px 0 10px; display: grid; gap: 10px; }
.ar-resumen { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px; font-size: 14px; }
.ar-resumen-cod { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ar-resumen-cod b { font-variant-numeric: tabular-nums; }
.ar-resumen-cod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-navinfo { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: center; }
.ar-tabs { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }
.ar-tabs button { font-size: 13px; white-space: nowrap; }
.ar-panel { display: grid; gap: 10px; }
.ar-panel.hidden { display: none; }
.ar-sec { padding: 14px 16px 16px; }
.ar-sec-tit { font-weight: 700; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ar-sec-dest { background: var(--chip); border-color: var(--accent); }
.ar-sec-dest .ar-sec-tit { color: var(--accent); border-bottom-color: var(--accent); }
input.ar-dest { background: var(--chip); }
input.ar-precio-base { background: var(--chip); font-size: 17px; font-weight: 700; }
.ar-costo-monto { font-size: 18px; }
.ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; }
.ar-grid-code { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ar-grid .field.full { grid-column: 1 / -1; }
.ar-grid input, .ar-form textarea { width: 100%; }
.ar-grid .field .row input { flex: 0 0 64px; }
.ar-grid .field .row .desc { flex: 1 1 auto; min-width: 0; }
.ar-form textarea { min-height: 60px; resize: vertical; }
.ar-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 2px; }
.ar-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ar-check input { width: auto; height: auto; flex: none; }
.ar-check input:disabled + span { color: var(--muted); }
.ar-readonly { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.ar-readonly b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ar-nota { margin-top: 8px; font-size: 12px; color: var(--warn); }
.ar-num { text-align: right; font-variant-numeric: tabular-nums; }
.input-err { border-color: var(--bad) !important; }
.desc.err { color: var(--bad); border-color: var(--bad); border-style: solid; }
@media (max-width: 880px) {
  .ar-cuerpo, .ar-cuerpo.cc-resizable { grid-template-columns: 1fr; padding: 0 12px 24px; overflow: auto; height: auto; }
  .ar-lista { display: none; } /* en pantallas angostas se navega con Buscar (F9) y las flechas de la barra fija */
  .ar-resizer { display: none; }
  .ar-detalle { overflow: visible; }
  .ar-tabs { width: 100%; }
  .ar-tabs button { flex: 1 1 auto; }
}

/* ---------- consulta rápida de artículos (ARTCONSULTA), pensada para el celular ---------- */
.aq-main { overflow: auto; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.aq-col { width: min(480px, 100%); display: grid; gap: 12px; align-content: start; }
.aq-buscador { position: sticky; top: 0; background: var(--bg); padding: 2px 0 6px; z-index: 1; }
.aq-input { width: 100%; font-size: 17px; padding: 12px 14px; }
.aq-hint { padding: 26px 10px; text-align: center; color: var(--muted); }
.aq-hint.hidden { display: none; }
.aq-lista { display: grid; gap: 8px; }
.aq-fila { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; min-height: 44px; }
.aq-fila:hover, .aq-fila:focus-visible { border-color: var(--accent); outline: none; }
.aq-fila-cod { font: 700 14px var(--mono); color: var(--muted); flex: 0 0 auto; min-width: 2.5em; }
.aq-fila-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aq-fila-precio { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.aq-detalle.hidden { display: none; }
.aq-volver { justify-self: start; padding: 8px 6px; margin-bottom: 2px; color: var(--accent); border: none; background: none; font-weight: 600; }
.aq-volver:hover { text-decoration: underline; }
.aq-tarjeta { padding: 18px 18px 20px; display: grid; gap: 16px; }
.aq-tarjeta-cod { font: 700 13px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.aq-tarjeta-desc { font-size: 21px; font-weight: 700; line-height: 1.25; }
.aq-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.aq-campo { display: grid; gap: 3px; min-width: 0; }
.aq-campo span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.aq-campo b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.aq-stock-na { color: var(--muted); font-weight: 400; font-size: 14px; }
.aq-stock-bajo { color: var(--bad); }
.aq-montos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.aq-monto { background: var(--chip); border-radius: 10px; padding: 12px; display: grid; gap: 4px; text-align: center; }
.aq-monto span { font-size: 12px; color: var(--muted); }
.aq-monto b { font-size: 20px; font-variant-numeric: tabular-nums; }
.aq-monto-dest { background: var(--accent); }
.aq-monto-dest span { color: var(--accent-ink); opacity: 0.85; }
.aq-monto-dest b { color: var(--accent-ink); font-size: 25px; }
@media (max-width: 420px) {
  .aq-campos { grid-template-columns: 1fr; }
}

/* ---- CCRECIBO (recibo de cobro): cabecera y detalle bien diferenciados a propósito (pedido explícito del usuario) ----
   Cada sección tiene su propio color (franja + fondo tenue + etiqueta): la cabecera en azul (--accent, el color de marca)
   y el detalle en ámbar (--warn), para que de un vistazo no se confunda un dato del recibo con una línea del detalle. */
.rec-cab, .rec-det {
  position: relative; border-left-width: 6px; border-left-style: solid; padding-top: 4px;
}
.rec-cab { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.rec-det { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--panel)); }
.rec-kicker {
  display: inline-block; margin: 8px 0 2px 10px; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.rec-kicker-cab { background: var(--accent); color: var(--accent-ink); }
.rec-kicker-det { background: var(--warn); color: var(--warn-ink); }
.rec-det-body { padding: 4px 10px 10px; }
.rl-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.rl-add input { min-width: 0; }
#rl-tipo { flex: 0 0 70px; }
#rl-serie { flex: 0 0 90px; }
#rl-nro { flex: 0 0 110px; }
#rl-cuota { flex: 0 0 70px; text-align: right; }
#rl-monto { flex: 1 1 140px; text-align: right; }
.rec-cab #rc-sucursal, .rec-cab #rc-cliente, .rec-cab #rc-cobrador { flex: 0 0 76px; width: 76px; }
.rec-cab input, .rec-cab select { padding: 4px 8px; height: 30px; font-size: 13px; }
.rec-cab input[readonly], .rec-cab select:disabled { background: var(--row-alt); color: var(--muted); }
@media (max-width: 720px) {
  .rl-add { flex-direction: column; align-items: stretch; }
  #rl-tipo, #rl-serie, #rl-nro, #rl-cuota, #rl-monto { flex: 1 1 auto; }
}

/* ---------- reporte de ventas (VTRVTPRO/VTVTAPRO): filtros, KPIs, gráfico por rubro y detalle ---------- */
.vr-main { overflow: auto; padding: 16px; display: grid; gap: 16px; align-content: start; }
.vr-filtros {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; align-items: end;
}
.vr-campo { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.vr-campo > span { color: var(--muted); font-size: 12px; }
.vr-in { width: 100%; }
.vr-cli { position: relative; min-width: 0; }
label:has(> .vr-cli) { grid-column: span 2; }
@media (max-width: 720px) { label:has(> .vr-cli) { grid-column: span 1; } }
.vr-cli-fila { display: flex; gap: 6px; min-width: 0; }
.vr-cli-fila input { flex: 1 1 auto; min-width: 0; }
.vr-cli-buscar { flex: none; padding: 0 12px; font-size: 13px; }
.vr-cli-nombre { position: absolute; left: 46px; right: 0; bottom: 100%; margin-bottom: 4px; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-cli-nombre:not(:empty)::before { content: '· '; color: var(--muted); font-weight: 400; }
.vr-campo-rango { grid-column: span 2; }
.vr-rango { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vr-campo-check { flex-direction: row; display: flex; align-items: center; gap: 8px; }
.vr-campo-check input { margin: 0; }
.vr-campo-btn { align-self: end; }
.vr-campo-btn button { width: 100%; }
/* min-width: 0: sin esto, un hijo ancho (como una tabla con muchas columnas, ver .anl-tabla-cont más abajo)
   puede "empujar" el ancho de este contenedor -grid item de .vr-main- más allá del viewport en vez de quedar
   contenido por el overflow:auto de su propio .vr-tabla-wrap/.cmp-tabla-wrap (bug real de layout encontrado
   con la tabla de 13 columnas de Reportes de clientes y artículos, VTANALISIS). */
.vr-cargando-envoltura { position: relative; min-width: 0; }
.vr-resultado.vr-cargando { opacity: 0.5; pointer-events: none; }
.vr-cargando-txt { color: var(--muted); padding: 30px; text-align: center; }
.vr-vacio { color: var(--muted); padding: 24px; text-align: center; }

.vr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.vr-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; }
.vr-kpi-num { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vr-kpi-lbl { font-size: 12px; color: var(--muted); }
.vr-kpi-pos .vr-kpi-num { color: var(--ok); }
.vr-kpi-neg .vr-kpi-num { color: var(--bad); }

/* dos gráficos lado a lado (pedido del usuario: "en la misma línea del gráfico"), apilados en pantallas
   angostas (mismo criterio de 900px que ya usa el resto de la app, ver .shell más arriba) */
.vr-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.vr-grafico {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 6px;
  display: grid; gap: 8px; margin-bottom: 16px; align-content: start;
}
.vr-graficos .vr-grafico { margin-bottom: 0; }
.vr-grafico-titulo { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
/* clic en una barra filtra por esa parte (cliente o año, ver public/ventasreporte.js): cursor y resalte al pasar */
.vr-fila-barra { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 10px; padding: 3px 4px; margin: 0 -4px; border-radius: 6px; cursor: pointer; }
.vr-fila-barra:hover { background: var(--row-alt); }
/* fila forzada por un clic anterior (ver clicCliente/clicAnio en public/ventasreporte.js): un segundo clic la deshace */
.vr-fila-barra-activa { background: var(--row-alt); box-shadow: inset 3px 0 0 var(--accent); }
.vr-fila-barra-activa .vr-fila-barra-nom { font-weight: 600; color: var(--accent); }
.vr-fila-barra-nom { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-fila-barra-val { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; min-width: 9ch; }
.vr-barra-fondo { background: var(--row-alt); border-radius: 4px; height: 14px; overflow: hidden; }
.vr-barra { background: var(--accent); height: 100%; border-radius: 4px; min-width: 4px; }
.vr-tooltip {
  position: absolute; z-index: 50; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.4;
  padding: 6px 10px; border-radius: 6px; box-shadow: var(--shadow); pointer-events: none; max-width: 260px;
}

.vr-tabla-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.vr-btn-exportar { font-size: 12px; padding: 6px 12px; }
.vr-tabla-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.vr-tabla th { cursor: pointer; user-select: none; white-space: nowrap; }
.vr-tabla th.vr-th-activo { color: var(--accent); }
@media (max-width: 900px) {
  .vr-graficos { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .vr-campo-rango { grid-column: span 1; }
  .vr-fila-barra { grid-template-columns: 96px 1fr auto; }
  .vr-fila-barra-nom { font-size: 12px; }
}

/* ---------- comparativo anual de ventas (VTCOMPARA, pantalla nueva): filtros, KPIs, comentario, gráfico
   divergente y tabla dinámica cliente -> artículo. Reutiliza .vr-main, .vr-shell, .vr-cargando (variantes),
   .vr-tooltip, .vr-btn-exportar (layout genérico ya definido arriba, ver ventasreporte.js): acá solo lo que
   es propio de esta pantalla. */
.cmp-filtros {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; align-items: end;
}
.cmp-campo { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.cmp-campo > span { color: var(--muted); font-size: 12px; }
.cmp-in { width: 100%; }
.cmp-campo-btn { align-self: end; }
.cmp-campo-btn button { width: 100%; }
/* Selector de mes con selección múltiple (ver campoMeses en comparativo.js): botón + panel de casilleros. */
.cmp-mes-multi { position: relative; }
.cmp-mes-boton { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-mes-panel {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 190px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
  padding: 6px; display: grid; gap: 2px; max-height: 260px; overflow: auto;
}
.cmp-mes-opcion { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.cmp-mes-opcion:hover { background: var(--row-alt); }
.cmp-mes-limpiar {
  width: 100%; text-align: left; border: 0; background: transparent; color: var(--accent); font-size: 12px;
  padding: 5px 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line); border-radius: 0;
}
.cmp-mes-limpiar:hover { border-color: var(--line); text-decoration: underline; }
.cmp-vacio { color: var(--muted); padding: 24px; text-align: center; }
.cmp-periodos { font-size: 13px; color: var(--muted); font-weight: 600; }

.cmp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.cmp-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
/* Montos grandes (guaraníes, sin decimales, pueden pasar de mil millones): tamaño más chico que
   .vr-kpi-num (16px en vez de 21px) para que entren sin desbordar la tarjeta ni cortarse. */
.cmp-kpi-num { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cmp-kpi-lbl { font-size: 12px; color: var(--muted); }
.cmp-kpi-pos .cmp-kpi-num, td.cmp-kpi-pos, span.cmp-kpi-pos, div.cmp-fila-div-val.cmp-kpi-pos { color: var(--ok); }
.cmp-kpi-neg .cmp-kpi-num, td.cmp-kpi-neg, span.cmp-kpi-neg, div.cmp-fila-div-val.cmp-kpi-neg { color: var(--bad); }

/* Comentario "de análisis con IA" (en realidad reglas fijas, ver src/logic/comparativo.js): el chip de la
   cabecera aclara esto mismo en pantalla, para no dar a entender algo que no es. */
.cmp-comentario { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 6px; }
.cmp-comentario-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cmp-comentario-p { margin: 0; font-size: 13px; line-height: 1.5; }

/* Gráfico divergente (crecimiento/caída): dos colores (--ok/--bad, mismo par que ya usa esta app para
   positivo/negativo) + eje neutro en cero (--line), ver skill de dataviz ("Diverging = two hues + a neutral
   gray midpoint"). */
.cmp-grafico { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 4px; }
.cmp-grafico-titulo { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.cmp-fila-div { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 10px; padding: 3px 4px; margin: 0 -4px; border-radius: 6px; cursor: pointer; }
.cmp-fila-div:hover { background: var(--row-alt); }
.cmp-fila-div-nom { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-fila-div-val { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; min-width: 11ch; }
.cmp-div-track { position: relative; height: 14px; background: var(--row-alt); border-radius: 4px; overflow: hidden; }
.cmp-div-eje { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.cmp-div-barra { position: absolute; top: 0; height: 100%; border-radius: 3px; min-width: 3px; }
.cmp-div-pos { background: var(--ok); }
.cmp-div-neg { background: var(--bad); }

/* Tabla dinámica cliente -> artículo (niveles desplegables, pedido del usuario) */
.cmp-tabla-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cmp-tabla-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.cmp-tabla { width: 100%; border-collapse: collapse; }
.cmp-tabla th { text-align: left; white-space: nowrap; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cmp-tabla th.num, .cmp-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-tabla td { padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.cmp-fila-cliente { cursor: pointer; font-weight: 600; }
.cmp-fila-cliente:hover { background: var(--row-alt); }
.cmp-fila-articulo td { color: var(--ink); }
.cmp-fila-articulo .cmp-cel-articulo { padding-left: 28px; font-weight: 400; color: var(--muted); }
.cmp-chevron { display: inline-block; width: 14px; color: var(--muted); }
.cmp-chip-destaque { margin-left: 6px; font-size: 11px; padding: 1px 8px; }

.cmp-badge { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cmp-badge-ok { background: var(--chip); color: var(--ok); }
.cmp-badge-bad { background: var(--chip); color: var(--bad); }
.cmp-badge-info { background: var(--chip); color: var(--accent); }
.cmp-badge-muted { background: var(--row-alt); color: var(--muted); }

@media (max-width: 720px) {
  .cmp-fila-div { grid-template-columns: 96px 1fr auto; }
  .cmp-fila-div-nom { font-size: 12px; }
  .cmp-tabla { font-size: 12px; }
}

/* Reportes por clientes / artículos (VTANALISIS, pantalla nueva): pestañas + franja de composición ABC.
   Reutiliza .vr-filtros, .vr-kpis, .vr-tabla, .ar-tabs (ya definidos arriba) para todo lo demás. */
.anl-panel-contenido { display: grid; gap: 14px; min-width: 0; }
.anl-tabla-cont { min-width: 0; }

/* Franja ABC: un solo hue secuencial (ver comentario de franjaABC en analisis.js: A/B/C es un orden de
   contribución, no identidades sin relación entre sí, así que corresponde secuencial y no categórico). */
.anl-abc { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; }
.anl-abc-titulo { font-size: 13px; font-weight: 600; color: var(--muted); }
.anl-abc-barra { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--row-alt); }
.anl-abc-seg { height: 100%; }
.anl-abc-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.anl-abc-item { display: flex; align-items: center; gap: 6px; }
.anl-abc-punto { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Badge de clase ABC en la tabla: mismo hue secuencial que la franja de arriba, no colores categóricos. */
.anl-clase { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; min-width: 20px; text-align: center; }
.anl-clase-a { background: var(--accent); color: var(--accent-ink); }
.anl-clase-b { background: color-mix(in srgb, var(--accent) 55%, var(--chip)); color: var(--ink); }
.anl-clase-c { background: color-mix(in srgb, var(--accent) 22%, var(--chip)); color: var(--ink); }

@media (max-width: 720px) {
  .anl-abc-leyenda { flex-direction: column; gap: 6px; }
}

/* Dashboard comercial (VTDASHBOARD, pantalla nueva): grilla de 4 paneles, cada uno en su propia tarjeta
   (.dash-card). Reutiliza .vr-tooltip y los filtros .vr-* (definidos arriba) igual que VTRVTPRO/VTANALISIS;
   acá solo lo que ningún otro módulo necesitaba: barras/líneas SVG, treemap y anillo. */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.dash-card { grid-column: span 1; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; grid-template-rows: auto 1fr; gap: 10px; min-width: 0; }
/* Las cuatro tarjetas miden lo mismo (la fila entera se estira a la más alta) y el cuerpo ocupa el resto. */
.dash-card-cuerpo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 901px) { .dash-card { min-height: 520px; } }
.dash-card-full { grid-column: 1 / -1; }
.dash-card-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash-card-tit { font-size: 14px; font-weight: 700; }
.dash-card-sub { font-size: 12px; color: var(--muted); }
.dash-card-vacio { color: var(--muted); font-size: 13px; padding: 18px 0; text-align: center; }

/* Ver como tabla (par accesible de cada gráfico: <details> nativo, sin JS de por medio para el toggle). */
.dash-tabla-toggle { font-size: 12px; }
.dash-tabla-toggle > summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.dash-tabla-toggle > summary::-webkit-details-marker { display: none; }
.dash-tabla-toggle > summary::before { content: '▸ '; }
.dash-tabla-toggle[open] > summary::before { content: '▾ '; }
.dash-tabla-toggle table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.dash-tabla-toggle th, .dash-tabla-toggle td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.dash-tabla-toggle td.num, .dash-tabla-toggle th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Línea (evolución mensual dual, evolución del ticket promedio): SVG plano, grilla y eje en hairline sólido
   (nunca punteado, ver anti-patterns), leyenda de color aparte (nunca un valor pegado a cada punto). */
.dash-svg-wrap { position: relative; width: 100%; }
.dash-svg { width: 100%; height: auto; display: block; overflow: visible; }
.dash-linea-grid { stroke: var(--line); stroke-width: 1; }
.dash-linea-eje { stroke: var(--muted); stroke-width: 1; }
.dash-linea-eje-txt { fill: var(--muted); font-size: 10px; }
.dash-linea-path { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dash-linea-punto { fill: var(--panel); stroke-width: 2; }
.dash-linea-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.dash-linea-leyenda-item { display: flex; align-items: center; gap: 6px; }
.dash-linea-leyenda-linea { width: 16px; height: 3px; border-radius: 2px; flex: none; }

/* Donut (Nuevos/Recurrentes/Inactivos): identidad categórica, no secuencial (ver comentario en dashboard.js
   sobre por qué "Inactivos" va en gris neutro y no en un color de estado). */
.dash-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dash-donut-centro-num { font-size: 20px; font-weight: 700; }
.dash-donut-centro-lbl { font-size: 11px; color: var(--muted); }
.dash-donut-leyenda { display: grid; gap: 8px; font-size: 12px; }
.dash-donut-item { display: flex; align-items: center; gap: 8px; }
.dash-donut-punto { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.dash-donut-item b { font-variant-numeric: tabular-nums; }

/* Heatmap Cliente x Producto: escala secuencial (un solo hue, más oscuro = más venta), igual criterio que la
   franja ABC. Grilla CSS, no SVG: más simple para una matriz de celdas con texto/tooltip nativo por celda. */

/* Treemap (Concentración de ventas): rectángulos proporcionales al monto, color por clase ABC. */
.dash-treemap { position: relative; width: 100%; height: 300px; border-radius: 6px; overflow: hidden; background: var(--row-alt); }
.dash-treemap-nodo { position: absolute; border: 2px solid var(--panel); display: flex; align-items: flex-end; padding: 6px 8px; overflow: hidden; box-sizing: border-box; }
.dash-treemap-nodo-txt { color: var(--ink); font-size: 12px; line-height: 1.3; max-width: 100%; min-width: 0; overflow: hidden; }
.dash-treemap-nodo-txt b { display: block; font-size: 13px; }
/* Texto legible sobre cada clase en claro y oscuro: la A es el color de acento pleno (lleva su propio color de texto);
   B y C son mezclas con el fondo, el texto normal alcanza. */
.dash-treemap-nodo[data-clase='A'] .dash-treemap-nodo-txt { color: var(--accent-ink); }

/* Paneles del dashboard: resumen numérico sobre el gráfico, variación ▲▼ (color + signo, nunca solo color), estado de
   la actualización automática en la barra superior y línea discontinua del período anterior. */
.dash-resumen { font-size: 13px; color: var(--muted); }
.dash-resumen b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-var { font-weight: 700; white-space: nowrap; }
.dash-var-pos { color: var(--ok); }
.dash-var-neg { color: var(--bad); }
.dash-barra-monto { fill: var(--ink); font-size: 9.5px; font-variant-numeric: tabular-nums; dominant-baseline: middle; }
.dash-clicable { cursor: pointer; }
.dash-clicable:hover, .dash-clicable:focus { fill: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.dash-barra-sel { stroke: var(--ink); stroke-width: 1.5; }
.dash-eje-sel { fill: var(--ink); font-weight: 700; }
.dash-linea-prom { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dash-pista { margin-left: auto; font-size: 11px; color: var(--muted); }
.dash-seleccion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); font-size: 13px; }
.dash-link { background: none; border: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.dash-diario-rango { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.dash-diario-rango input { height: 32px; padding: 2px 8px; font-size: 13px; width: auto; flex: 0 1 150px; min-width: 0; }
.dash-leyenda-disc { background-image: repeating-linear-gradient(90deg, transparent 0 4px, var(--panel) 4px 7px); }
.dash-filtros { margin-bottom: 12px; }
.dash-filtros > summary { cursor: pointer; font-weight: 600; color: var(--accent); list-style: none; padding: 6px 2px; }
.dash-filtros > summary::-webkit-details-marker { display: none; }
.dash-filtros > summary::before { content: '▸ '; }
.dash-filtros[open] > summary::before { content: '▾ '; }
.dash-estado { font-size: 12px; color: var(--muted); text-align: right; min-width: 0; }
.dash-estado-err { color: var(--bad); }

@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-card { grid-column: 1 / -1; }
  .dash-treemap { height: 300px; }
}

/* ---------- VTNOTCRE (nota de crédito): complementos de .vf ---------- */
.vf .vn-val { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf .vn-fila { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.vf .vn-fila .vn-val { flex: 1 1 auto; min-width: 0; }
.vf .vn-elegir { height: 34px; padding: 0 16px; font-size: 13.5px; border-radius: 7px; flex: none; }
.vf .vn-sel { width: 100%; height: 36px; padding: 5px 11px; font-size: 14px; border: 1.5px solid var(--vf-borde); border-radius: 8px; background: var(--panel); color: var(--ink); }
.vf .vn-sel:disabled { background: var(--vf-solo); border-color: var(--line); }
.vf .vn-marcas { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.vf .vn-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.vf .vn-chk input { width: 18px; height: 18px; }
.vf .fa-lines .vf-sec-tit { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vf .vn-restaurar { height: 26px; padding: 0 10px; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 6px; }
.vf .vf-grid-cond > .vn-marcas { grid-column: 1 / -1; }
.vf .vn-marcas > label.vn-chk { display: inline-flex; margin: 0; white-space: normal; overflow: visible; font-weight: 500; color: var(--ink); }

/* ---------- STREMISI (nota de remisión): complementos de .vf ---------- */
.vf .rm-agregar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.vf .rm-agregar input { height: 34px; }
.vf .rm-nota { color: var(--muted); font-size: 12.5px; }

/* ---- Clientes (CCCLIENT), personas (BSPERSON) y alta rápida (CCCLIEFA): campos más visibles y direcciones en tarjetas ---- */
.cc-vis { --cc-borde: var(--campo-edit-borde, color-mix(in srgb, var(--ink) 55%, var(--panel))); --cc-solo: var(--campo-solo-bg, color-mix(in srgb, var(--ink) 9%, var(--panel))); }
.cc-vis input:not([type='checkbox']):not([type='radio']),
.cc-vis select,
.cc-vis textarea {
  min-height: 36px; padding: 5px 10px; font-size: 14px; border: 1.5px solid var(--cc-borde); border-radius: 8px;
  background: var(--panel); box-shadow: inset 0 1px 2px rgba(15, 30, 55, 0.10);
}
.cc-vis input:not([type='checkbox']):not([type='radio']):hover:not([readonly]),
.cc-vis select:hover:not(:disabled),
.cc-vis textarea:hover { border-color: var(--accent); }
.cc-vis input:focus, .cc-vis select:focus, .cc-vis textarea:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 0; }
.cc-vis input[readonly] { background: var(--cc-solo); border-color: var(--line); box-shadow: none; cursor: default; }
.cc-vis select:disabled, .cc-vis input:disabled { background: var(--cc-solo); border-color: var(--line); box-shadow: none; }
.cc-vis input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--accent); }
.cc-vis .field > label, .cc-vis .cc-f > label { font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--ink) 78%, var(--panel)); }
.cc-vis .ar-sec-tit, .cc-vis .mc-tit { color: var(--ink); }
.cc-vis .mc-sec, .cc-vis .ar-sec { border: 1.5px solid color-mix(in srgb, var(--ink) 18%, var(--panel)); }
.cc-vis .fa-tabla th { color: color-mix(in srgb, var(--ink) 80%, var(--panel)); font-weight: 700; }
.cc-vis .fa-tabla td input, .cc-vis .fa-tabla td select { width: 100%; }

.cc-dirs { display: grid; gap: 12px; }
/* Correo electrónico (factura electrónica): resaltado arriba de las direcciones */
.cc-email-fe { border: 2px solid var(--accent); border-radius: 10px; padding: 10px 14px 12px; margin: 0 0 12px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.cc-email-fe.hidden { display: none; }
.cc-email-tit { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.cc-email-fe input { width: 100%; border-color: var(--accent); font-weight: 600; }
.cc-email-fe input.cc-email-mal { border-color: var(--warn); }
.cc-email-nota { margin-top: 5px; font-size: 12px; color: color-mix(in srgb, var(--ink) 70%, var(--panel)); }
.cc-email-aviso { margin-top: 3px; font-size: 12px; color: var(--warn); font-weight: 600; }
.cc-email-aviso:empty { display: none; }
.cc-dir { border: 1.5px solid var(--cc-borde, var(--line)); border-radius: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 3%, var(--panel)); }
.cc-dir-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.cc-dir-grid .cc-f { grid-column: span var(--span, 3); min-width: 0; }
.cc-dir-grid .cc-f > label { display: block; margin: 0 0 3px; }
.cc-dir-grid .cc-f input:not([type='checkbox']), .cc-dir-grid .cc-f select { width: 100%; }
.cc-dir-grid .cc-chk label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; cursor: pointer; min-height: 36px; }
.cc-dir-grid .cc-quitar { display: flex; justify-content: flex-end; }
@media (max-width: 980px) { .cc-dir-grid .cc-f { grid-column: span 6; } }
@media (max-width: 560px) { .cc-dir-grid .cc-f { grid-column: span 12; } }
.cc-vis .fa-lines { min-height: 0; }

/* ---------- VTFACTUR (.vf-fac): campos más visibles (como en clientes) y cabecera más compacta ----------
   Pedido del usuario: mismo estilo de campos que en el maestro de clientes y menos espacio en la cabecera, con
   Cliente y Condiciones de venta en dos columnas (.vf-dos). Todo va bajo `.vf-fac`, que solo lleva VTFACTUR:
   NOTCRE y STREMISI comparten `.vf` y no cambian. */
.vf-fac { --vf-borde: color-mix(in srgb, var(--ink) 55%, var(--panel)); --vf-etiqueta: color-mix(in srgb, var(--ink) 80%, var(--panel)); }
.vf-fac .fa-main { padding: 10px 18px 18px; gap: 14px; }
.vf-fac .fa-left, .vf-fac .fa-right { gap: 8px; }
.vf-fac .vf-cab { gap: 8px; }
.vf-fac .vf-sec-tit { padding: 4px 14px; font-size: 11.5px; }
.vf-fac .vf-grid { gap: 8px 14px; padding: 8px 14px 10px; }
.vf-fac .fa-f > label { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; }
.vf-fac .field input, .vf-fac .fa-cant { height: 32px; padding: 3px 10px; }
.vf-fac .field .row .desc { height: 32px; line-height: 22px; padding: 3px 10px; }
.vf-fac .fa-lov { width: 32px; height: 32px; }
.vf-fac .fa-comp, .vf-fac .fa-timbrado, .vf-fac .fa-ref { min-height: 32px; }
.vf-fac .fa-comp, .vf-fac .fa-timbrado, .vf-fac .fa-ref { align-items: center; }
.vf-fac .fa-barra { padding: 5px 8px; }
.vf-fac .fa-barra button { height: 30px; }
.vf-fac .fa-entry .bar { padding: 8px 14px 10px; }
.vf-fac #fa-art, .vf-fac .fa-cant, .vf-fac .fa-entry .bar button { height: 42px; }
.vf-fac .fa-lines { min-height: 180px; }
.vf-fac .empty { padding: 28px 20px; }
.vf-fac .total { padding: 14px 18px 16px; }

/* Cliente y Condiciones de venta, uno al lado del otro */
.vf-fac .vf-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.vf-fac .vf-dos .vf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vf-fac .vf-dos .vf-grid > .fa-f { grid-column: span 1; }
.vf-fac .vf-dos .vf-grid-cli > .vf-w { grid-column: 1 / -1; }
.vf-fac .vf-dos .vf-grid-cond > .vf-com { grid-column: span 1; }
.vf-fac #fa-cod_cliente { flex: 0 0 96px !important; width: 96px !important; }
@media (max-width: 1180px) {
  .vf-fac .vf-dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vf-fac .vf-dos .vf-grid { grid-template-columns: minmax(0, 1fr); }
  .vf-fac .vf-dos .vf-grid > .fa-f, .vf-fac .vf-dos .vf-grid-cli > .vf-w { grid-column: 1 / -1; }
}
/* datos de la factura: columnas por contenido (el comprobante necesita lugar para "Contado · FCO" + la serie) y barra de acciones más ajustada */
.vf-fac .vf-grid-id { grid-template-columns: minmax(270px, 1.5fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(235px, 1.6fr) minmax(70px, 0.6fr); }
.vf-fac .fa-timbrado { white-space: nowrap; }
.vf-fac .vf-grid-id > .fa-f, .vf-fac .vf-grid-id > .fa-f:nth-child(n + 4) { grid-column: auto; }
.vf-fac .fa-barra button { padding: 0 9px; font-size: 13px; }
.vf-fac .fa-barra button.primary { padding: 0 14px; }
.vf-fac .fa-barra .fa-grupo, .vf-fac .fa-barra .fa-grupo:last-child { gap: 4px; padding: 3px; }
@media (max-width: 1180px) {
  .vf-fac .vf-grid-id { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vf-fac .vf-grid-id > .fa-f:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .vf-fac .vf-grid-id { grid-template-columns: minmax(0, 1fr); }
}

/* Foto del artículo (STARTICU), al lado de Identificación; en pantallas angostas queda debajo */
.ar-ident { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 10px; align-items: start; }
.ar-foto { display: grid; gap: 8px; }
.ar-foto-caja { width: 200px; height: 200px; margin: 0 auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #555; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ar-foto-img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.ar-foto-msg { padding: 10px; font-size: 12px; text-align: center; }
.ar-foto-pie { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; max-height: 7em; overflow: hidden; }
.ar-foto-pie:has(details[open]) { max-height: none; }
.ar-foto-busq summary { cursor: pointer; }
.ar-foto-busq, .af-busq { font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; margin-top: 2px; opacity: .85; }
.ar-foto-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ar-foto-btn { font-size: 12px; padding: 4px 10px; }
.ar-foto-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ar-foto-cand { display: grid; gap: 4px; padding: 6px; border: 2px solid var(--line); border-radius: 10px; background: var(--card, var(--bg)); cursor: pointer; font-size: 11px; color: var(--muted); }
.ar-foto-cand img { width: 100%; height: 100px; object-fit: contain; background: #fff; border-radius: 6px; }
.ar-foto-cand:hover { border-color: var(--accent); }
.ar-foto-cand.act { border-color: var(--accent); }
@media (max-width: 900px) { .ar-ident { grid-template-columns: minmax(0, 1fr); } }
.ar-foto-cand img.sin-vista { visibility: hidden; }

.ar-foto-img { cursor: zoom-in; }
.ar-foto-zoom { display: grid; gap: 8px; justify-items: center; }
.ar-foto-grande { max-width: 100%; min-width: min(100%, 480px); max-height: 72vh; object-fit: contain; background: #fff; border-radius: 8px; cursor: zoom-out; }
.ar-foto-zoom .ar-foto-grande, .ar-foto-grande { background: #fff; }
.ar-foto-zoom { background: #fff; border-radius: 10px; padding: 8px; }
.ar-foto-zoom .ar-foto-pie { color: #555; }
.ar-foto-caja .ar-foto-msg { color: #555; }

/* Treemap: el nombre va en todos los cuadros; en los chicos, más chico, partido en líneas y con puntos suspensivos; en los
   angostos y altos, en vertical. El monto solo se escribe si hay lugar (siempre está en el tooltip y en la tabla). */
.dash-treemap-nodo-txt b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.dash-treemap-chico { padding: 3px 5px; }
.dash-treemap-chico .dash-treemap-nodo-txt { font-size: 10.5px; line-height: 1.2; }
.dash-treemap-chico .dash-treemap-nodo-txt b { font-size: 10.5px; -webkit-line-clamp: 2; }
.dash-treemap-vert { padding: 4px 2px; align-items: flex-start; justify-content: center; }
.dash-treemap-vert .dash-treemap-nodo-txt { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 100%; font-size: 10.5px; }
.dash-treemap-vert .dash-treemap-nodo-txt b { font-size: 10.5px; -webkit-line-clamp: 1; }

/* Anillo de clientes: grande, centrado en la tarjeta. */
.dash-donut-wrap { flex: 1; justify-content: center; gap: 28px; }
.dash-donut-centro { position: relative; width: min(260px, 100%); aspect-ratio: 1; flex: none; display: flex; align-items: center; justify-content: center; }
.dash-donut-svg { width: 100%; height: 100%; }
.dash-donut-centro-txt { position: absolute; text-align: center; }
.dash-donut-centro-num { font-size: 34px; font-weight: 700; line-height: 1.1; }
.dash-donut-centro-lbl { font-size: 13px; }
.dash-donut-leyenda { font-size: 14px; gap: 12px; }
.dash-donut-punto { width: 14px; height: 14px; }

/* ===== VTPRESUP (presupuestos): stock a la derecha de la barra de carga e historial de precios =====
   Todo con el prefijo vp-; el resto de la pantalla reutiliza los estilos de la factura (.vf). */
.vf.vp .fa-entry .bar { flex-wrap: wrap; align-items: center; }
.vf.vp #fa-art { min-width: 130px; }
.vf.vp .fa-entry .bar { gap: 8px; }
.vf.vp .fa-entry .bar button { padding: 0 14px; }
.vf.vp .fa-cant { width: 84px; }
.vf.vp .vp-hist { white-space: nowrap; }
.vf.vp .vp-stock {
  margin-left: auto; flex: 0 1 auto; min-width: 176px; max-width: 320px; height: 48px; padding: 0 12px;
  display: flex; align-items: center; gap: 10px; border-radius: 10px; border: 1.5px solid var(--vf-borde);
  background: var(--vf-solo); font-variant-numeric: tabular-nums; overflow: hidden;
}
.vf.vp .vp-stock-t { font-size: 12.5px; font-weight: 600; color: var(--vf-etiqueta); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.vf.vp .vp-stock-v { margin-left: auto; font-size: 22px; font-weight: 700; white-space: nowrap; }
.vf.vp .vp-stock-d { font-size: 12px; color: var(--muted); white-space: nowrap; }
.vf.vp .vp-stock.vacio .vp-stock-v { color: var(--muted); font-weight: 400; }
.vf.vp .vp-stock.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }
.vf.vp .vp-stock.ok .vp-stock-v { color: var(--ok); }
.vf.vp .vp-stock.cero, .vf.vp .vp-stock.malo { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, var(--panel)); }
.vf.vp .vp-stock.cero .vp-stock-v, .vf.vp .vp-stock.malo .vp-stock-v { color: var(--bad); }
.vf.vp .vp-stock.malo .vp-stock-v { font-size: 13px; font-weight: 600; text-align: right; white-space: normal; }
.vf.vp .vp-stock.sin .vp-stock-v { font-size: 13px; font-weight: 600; color: var(--muted); }
.vf.vp .vp-nrobox { min-height: 36px; display: flex; align-items: center; }
.vf.vp .vp-nro { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vf.vp .vp-nro.pendiente { font-weight: 400; font-size: 14px; color: var(--muted); }
.vf.vp .vp-scroll { overflow-x: auto; }
.vf.vp .vp-tabla th, .vf.vp .vp-tabla td { padding: 10px 8px; }
.vf.vp .vp-tabla th:first-child, .vf.vp .vp-tabla td:first-child { padding-left: 14px; }
.vf.vp .vp-tabla td:nth-child(3) { min-width: 210px; }
.vf.vp .vp-tabla .fa-in { width: 88px; text-align: right; }
.vf.vp .vp-tabla th:nth-last-child(2), .vf.vp .vp-tabla td:nth-last-child(2) { padding-right: 18px; }
.vf.vp .vp-acc { white-space: nowrap; text-align: right; }
.vf.vp .vp-acc .fa-mini + .fa-mini { margin-left: 4px; }
.vf.vp .vp-stk { font-weight: 700; }
.vf.vp .vp-stk.ok { color: var(--ok); }
.vf.vp .vp-stk.cero { color: var(--bad); }
.vf.vp .vp-validez { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.vf.vp .vp-validez:empty { display: none; }
/* modal del historial (los modales cuelgan fuera de .vf, por eso no van scopeados) */
.vp-hist-modal { min-width: min(760px, 86vw); }
.vp-hist-cab { margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.vp-hist-scroll { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.vp-hist-tabla { width: 100%; }
.vp-hist-tabla th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.vp-hist-tabla tbody tr:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--chip); }
.vp-hist-tabla .vp-precio { font-weight: 700; }
.vp-hist-tabla .vp-mon { margin-left: 6px; }
.vp-hist-tabla .vp-otra-emp { color: var(--muted, #667); font-style: italic; }
.vp-hist-pie { margin-top: 8px; }
@media (max-width: 900px) {
  .vf.vp .vp-stock { flex: 1 1 100%; max-width: none; margin-left: 0; height: 44px; }
  .vf.vp #fa-art { flex: 1 1 100%; }
}

/* ===== Apariencia de los campos de TODOS los formularios (editables vs. solo lectura) =====
   Pedido del usuario: que los campos se distingan a simple vista en cualquier pantalla (antes solo lo tenían VTFACTUR, CCCLIENT y
   pocas más, y el resto usaba un borde casi invisible). Una sola regla para los formularios (todo lo que cuelga de #app salvo el menú
   principal `.mp`) y las ventanas emergentes:
     - editables: fondo de la tarjeta, borde marcado y sombra interior;
     - solo lectura o deshabilitados: fondo grisáceo, borde suave, sin sombra.
   Cada usuario puede elegir los colores en "Personalizar los formularios" > "Campos": se guardan en sus preferencias y se ponen como
   --campo-* en <html> (ver NAS.tema.aplicarCampos en menu-personalizar.js). Sin elección, valen los de fábrica de abajo, calculados
   con los colores del tema (sirven en claro y en oscuro). Los campos "destacados" (fa-dest, ar-dest, ar-precio-base) y las casillas,
   botones de radio, colores y archivos no se tocan. La especificidad es alta a propósito: pisa los estilos sueltos de cada pantalla. */
:is(#app > :not(.mp), .modal) :is(input:not([type='checkbox'], [type='radio'], [type='color'], [type='file'], [type='range'], [type='button'], [type='submit'], [type='reset'], [type='image'], [type='hidden'], .fa-dest, .ar-dest, .ar-precio-base), select, textarea):not([readonly], :disabled) {
  background-color: var(--campo-edit-bg, var(--panel));
  color: var(--campo-edit-ink, var(--ink));
  border: 1.5px solid var(--campo-edit-borde, color-mix(in srgb, var(--ink) 52%, var(--panel)));
  box-shadow: inset 0 1px 2px rgba(15, 30, 55, 0.10);
}
:is(#app > :not(.mp), .modal) :is(input:not([type='checkbox'], [type='radio'], [type='color'], [type='file'], [type='range'], [type='button'], [type='submit'], [type='reset'], [type='image'], [type='hidden'], .fa-dest, .ar-dest, .ar-precio-base), select, textarea):not([readonly], :disabled):is(:hover, :focus) {
  border-color: var(--accent);
}
:is(#app > :not(.mp), .modal) :is(input:not([type='checkbox'], [type='radio'], [type='color'], [type='file'], [type='range'], [type='button'], [type='submit'], [type='reset'], [type='image'], [type='hidden'], .fa-dest, .ar-dest, .ar-precio-base), select, textarea):is([readonly], :disabled) {
  background-color: var(--campo-solo-bg, color-mix(in srgb, var(--ink) 9%, var(--panel)));
  color: var(--campo-solo-ink, color-mix(in srgb, var(--ink) 82%, var(--panel)));
  border: 1.5px solid var(--campo-solo-borde, color-mix(in srgb, var(--ink) 22%, var(--panel)));
  box-shadow: none;
  cursor: default;
}
/* vista previa de la apariencia de los campos (ventana "Personalizar los formularios") */
.pz-campos-previa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 8px 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.pz-campos-previa label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 3px; color: var(--muted); }
.pz-campos-previa input { width: 100%; }
@media (max-width: 560px) { .pz-campos-previa { grid-template-columns: 1fr; } }

/* ===== Menú principal: panel izquierdo ajustable, Expandir/Comprimir todo y Favoritos ===== */
.mp-redim { position: absolute; top: 0; bottom: 0; left: calc(var(--mp-ancho, 300px) - 4px); width: 9px; cursor: col-resize; z-index: 5; touch-action: none; outline: none; }
.mp-redim::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background 0.12s; }
.mp-redim:hover::after, .mp-redim:focus-visible::after, .mp-redim.arrastrando::after { background: var(--accent); }
body.mp-redimensionando { cursor: col-resize; user-select: none; }
body.mp-redimensionando * { cursor: col-resize !important; }
.mp-plegar { display: flex; gap: 6px; }
.mp-plegar button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 8px; font-size: 12.5px; color: var(--muted); background: transparent; border-radius: 8px; white-space: nowrap; }
.mp-plegar button:hover { color: var(--accent); border-color: var(--accent); background: var(--chip); }
.mp-plegar svg { width: 15px; height: 15px; }
.mp-plegar-ini { margin-top: 24px; justify-content: flex-end; }
.mp-plegar-ini button { flex: 0 0 auto; padding: 0 12px; }
.mp-plegar-ini + .mp-seccion { margin-top: 12px; }
.mp-fav { flex: none; width: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); opacity: 0.45; border-radius: 8px; margin: 2px 0; }
.mp-fav svg { width: 16px; height: 16px; }
.mp-item-fila:hover .mp-fav, .mp-tarjeta-fila:hover .mp-fav, .mp-fav:focus-visible { opacity: 1; }
.mp-fav:hover { background: var(--chip); color: #c98a00; }
.mp-fav.on { opacity: 1; color: #d99a00; }
.mp-fav.on svg { fill: currentColor; }
.mp-tarjeta-fila > .mp-fav { position: absolute; top: 10px; right: 44px; width: 28px; height: 28px; margin: 0; background: var(--panel); border: 1px solid var(--line); }
.mp-tarjeta-fila > .mp-fav:hover, .mp-tarjeta-fila > .mp-fav:focus-visible { border-color: var(--accent); }
@media (max-width: 900px) { .mp-redim { display: none; } .mp-plegar-ini { margin-top: 16px; } }
@media (hover: none) { .mp-fav { opacity: 0.8; } }
/* el título de la tarjeta deja lugar a los botones de estrella y de abrir en ventana */
.mp-tarjeta-fila > .mp-tarjeta .mp-tarjeta-tit { padding-right: 68px; }

/* ===== Precio sugerido de cada línea (VTFACTUR y VTPRESUP): antes era un texto chico y gris, ahora una etiqueta bien visible ===== */
.fa-sugerido {
  display: inline-flex; align-items: baseline; gap: 6px; margin-top: 4px; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--panel));
  color: var(--ink); font-size: 12.5px; line-height: 1.5; white-space: nowrap;
}
.fa-sugerido-t { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.fa-sugerido b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Detalle de la factura: más columnas (stock y acciones); las acciones quedan siempre a la vista aunque haya que desplazar la tabla */
.vf.vp .vp-tabla th[hidden] { display: none; }
.vf.vp .vp-tabla .fa-in { width: 78px; }
.vf.vp .vp-tabla th, .vf.vp .vp-tabla td { padding-left: 6px; padding-right: 6px; }
.vf.vp .vp-tabla td.vp-acc, .vf.vp .vp-tabla th.vp-acc { position: sticky; right: 0; background: var(--panel); box-shadow: -8px 0 8px -8px color-mix(in srgb, var(--ink) 25%, transparent); }
.vf.vp .vp-tabla th.vp-acc { background: var(--vf-solo); }
.fa-sugerido { white-space: normal; flex-wrap: wrap; row-gap: 0; }

/* ===== Foto del artículo en VTFACTUR y VTPRESUP (public/artfoto.js) =====
   Tarjeta fija bajo los totales, y ventana emergente al dar Enter en el código. La foto siempre va sobre un recuadro blanco (como en el maestro
   de artículos), así las imágenes con transparencia no se ven sobre el color del tema. */
.af-card { overflow: hidden; }
.af-caja { margin: 10px 14px 0; height: 210px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #555; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.af-img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; cursor: zoom-in; }
.af-msg { padding: 12px; font-size: 12.5px; text-align: center; color: #666; }
.af-pie { padding: 8px 14px 12px; display: grid; gap: 2px; font-size: 12.5px; line-height: 1.35; }
.af-pie:empty { display: none; }
.af-tit { overflow-wrap: anywhere; }
.af-fuente { font-size: 11.5px; overflow-wrap: anywhere; }
.af-ventana { display: grid; gap: 10px; justify-items: center; }
.af-zona { width: min(100%, 640px); height: min(56vh, 460px); background: #fff; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.af-grande { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.af-buscando { color: #666; font-size: 14px; padding: 20px; text-align: center; }
.af-ventana-pie { width: min(100%, 640px); display: grid; gap: 3px; font-size: 14px; }
.af-ventana-pie .af-tit { font-size: 15px; }
.af-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0 14px 12px; }
.af-btns .af-btn { font-size: 12px; padding: 4px 10px; }
.af-pie + .af-btns { padding-top: 0; }

/* ===== Costo promedio del artículo en VTFACTUR y VTPRESUP (solo con permiso VER COSTOS) ===== */
.fa-datos-linea { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.fa-datos-linea .fa-sugerido { margin-top: 0; }
.fa-costo { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 6%, var(--panel)); color: var(--ink); font-size: 12.5px; line-height: 1.5; white-space: nowrap; }
.fa-costo-t { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.fa-costo b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vf.vp .vp-costo { display: flex; flex-direction: column; justify-content: center; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, var(--panel)); white-space: nowrap; }
.vf.vp .vp-costo.hidden { display: none; }
.vf.vp .vp-costo-t { font-size: 12.5px; font-weight: 600; color: var(--vf-etiqueta); line-height: 1.15; }
.vf.vp .vp-costo-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
@media (max-width: 900px) { .vf.vp .vp-costo { flex: 1 1 100%; height: 44px; flex-direction: row; align-items: center; justify-content: space-between; } }

/* Stock y costo promedio: bloques compactos de dos líneas (etiqueta arriba, valor abajo) para que entren en la barra */
.vf.vp .vp-stock { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "t t" "v d"; align-items: center; column-gap: 8px; row-gap: 0; min-width: 150px; max-width: 260px; padding: 3px 12px; }
.vf.vp .vp-stock-t { grid-area: t; font-size: 11.5px; }
.vf.vp .vp-stock-v { grid-area: v; margin-left: 0; font-size: 20px; line-height: 1.1; }
.vf.vp .vp-stock-d { grid-area: d; align-self: end; padding-bottom: 2px; }
.vf.vp .vp-stock.malo, .vf.vp .vp-stock.sin { grid-template-areas: "t t" "v v"; }
.vf.vp .vp-stock.malo .vp-stock-v, .vf.vp .vp-stock.sin .vp-stock-v { text-align: left; font-size: 12.5px; }
.vf.vp .vp-costo { padding: 3px 12px; min-width: 110px; }
.vf.vp .vp-costo-t { font-size: 11.5px; }
.vf.vp .vp-costo-v { line-height: 1.1; }
@media (max-width: 900px) {
  .vf.vp .vp-stock { grid-template-columns: auto 1fr; max-width: none; }
  .vf.vp .vp-costo { flex-direction: row; }
}

/* ===== VTAPEDID (pedidos): crédito del cliente, casilla de confirmado y subtítulo de la hoja ===== */
.vped-credito { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--ink) 4%, var(--panel)); }
.vped-credito.hidden { display: none; }
.vped-dato { display: flex; flex-direction: column; line-height: 1.15; min-width: 110px; }
.vped-t { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.vped-dato b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vped-dato.neg b { color: var(--bad); }
.vped-venc { margin-left: auto; }
.vf.vp .vped-chk { align-self: end; }
.vf.vp .vped-chk label { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; cursor: pointer; }
.vf.vp .vped-chk input { width: 18px; height: 18px; }
.vf.vp .vped-chk.ro label { cursor: default; opacity: 0.7; }
.vf.vp .field.hidden { display: none; }
.fh-sub { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-align: center; margin-top: 2px; }
.vf.vp select { width: 100%; }

/* ---------- habilitación y cierre de caja (CCHABCAJ / CCCIECAJ) ---------- */
.cj-card { width: min(640px, 100%); }
.cj-card.cj-ancha { width: min(860px, 100%); }
.cj-tit { margin: 0; font-size: 20px; }
.cj-datos { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; }
.cj-datos > div { display: grid; gap: 2px; }
.cj-hab { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.cj-et { font-size: 12px; color: var(--muted); }
.cj-reloj { font-family: var(--mono); font-weight: 600; }
.cj-peq { font-size: 13px; color: var(--muted); }
.cj-desc { margin-top: 6px; font-size: 13px; color: var(--muted); min-height: 18px; }
.cj-desc.ok { color: var(--ok); font-weight: 600; }
.cj-cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cj-caja { display: flex; gap: 8px; align-items: baseline; justify-content: flex-start; text-align: left; height: auto; padding: 10px 12px; }
.cj-caja span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-ok { border: 1px solid var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel)); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; }
.cj-ok-tit { font-weight: 700; color: var(--ok); }
.cj-aviso { border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; }
.cj-aviso-tit { font-weight: 700; }
.cj-moneda { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.cj-tot { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: flex-end; }
.cj-tot > div { display: grid; gap: 2px; text-align: right; }
.cj-tot span { font-size: 12px; color: var(--muted); }
.cj-tot b { font-family: var(--mono); }
.cj-total b { font-size: 18px; }
.cj-contar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; }
.cj-dif { font-weight: 700; min-height: 22px; padding-bottom: 8px; }
.cj-dif.ok { color: var(--ok); }
.cj-dif.mal { color: var(--bad); }
.cj-botones { gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .cj-card { padding: 16px 14px; } .cj-botones button { flex: 1 1 100%; } }

/* ===== Caja Chica (CCCAJCHI) ===== */
.ch-cab { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: flex-end; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.ch-cab > div { display: grid; gap: 2px; }
.ch-saldo-v { font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ch-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.ch-tab { height: 36px; padding: 0 14px; }
.ch-tab.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.ch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.ch-grid .field { min-width: 0; }
.ch-grid .field input, .ch-grid .field select { width: 100%; box-sizing: border-box; }
.ch-grid .ch-s1 { grid-column: span 1; }
.ch-grid .ch-s2 { grid-column: span 2; }
.ch-grid .ch-s3 { grid-column: span 3; }
.ch-grid .ch-s4 { grid-column: 1 / -1; }
.ch-grid > .field:only-child, .ch-grid > .field:first-child:nth-last-child(2) { grid-column: span 2; }
.ch-prov { display: flex; gap: 6px; }
.ch-grid .field .row.ch-prov input { flex: 1 1 0; min-width: 0; width: auto; }
.ch-prov button { flex: 0 0 auto; height: auto; }
.ch-resumen { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.ch-resumen > div { display: grid; gap: 2px; text-align: right; }
.ch-resumen span { font-size: 12px; color: var(--muted); }
.ch-resumen .ch-total b { font-size: 20px; }
.ch-resumen .ch-nota { flex-basis: 100%; text-align: right; }
.ch-acc { gap: 8px; }
.ch-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ch-ops { display: flex; gap: 6px; }
.ch-nw { white-space: nowrap; }
.ch-ops button { height: 30px; padding: 0 10px; }
.ch-anulado td { text-decoration: line-through; }
.ch-anulado td:nth-last-child(2), .ch-anulado td:last-child { text-decoration: none; }
.ch-lov-box { display: grid; gap: 8px; min-width: min(560px, 80vw); }
.ch-lov { max-height: 320px; }
.ch-lov tr.sel td { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ch-lov tbody tr { cursor: pointer; }
@media (max-width: 720px) { .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ch-grid .ch-s3 { grid-column: 1 / -1; } }

/* Compras y gastos (PROCOMPR) y Timbrados (PROTIMBR) */
.pc-sub { margin: 14px 0 4px; font-size: 15px; }
.pc-tabla { width: 100%; }
.pc-tabla td select, .pc-tabla td input[type="text"] { width: 100%; box-sizing: border-box; min-width: 120px; }
.pc-tabla td input.num { text-align: right; min-width: 100px; }
.pc-tabla td .danger { height: 30px; padding: 0 10px; }
.pc-cuotas td input[type="date"] { width: 100%; box-sizing: border-box; }
.pc-chk { display: flex; align-items: center; gap: 6px; height: 36px; }
.pc-det { display: grid; gap: 10px; }
.pc-pago { display: grid; gap: 10px; min-width: min(760px, 86vw); }
.pc-timb { min-width: min(520px, 80vw); }
.cj-card.cj-ancha.pc-card { width: min(1040px, 100%); }

/* Ir a Cliente (facturación, presupuesto y pedido): botón en el título del bloque Cliente, campos obligatorios para la factura electrónica en celeste y ficha del cliente */
.vf .vf-sec-tit-btn { display: flex; align-items: center; gap: 10px; }
.vf .vf-sec-tit-btn .fe-leyenda { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.vf .vf-sec-tit-btn .vf-ircli { white-space: nowrap; flex: none; height: 26px; padding: 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 7px; border: 1.5px solid var(--accent); background: var(--panel); color: var(--accent); }
.vf .vf-sec-tit-btn .vf-ircli:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--line); color: var(--muted); }
.vf .vf-sec-tit-btn .fe-leyenda.hidden + .vf-ircli { margin-left: auto; }
.vf .vf-sec-tit-btn .vf-ircli:not(:disabled):hover { background: var(--chip); }
/* más específico a propósito: el tema de los campos ("Personalizar los formularios") usa selectores de especificidad alta */
#app .vf .fe-req .row input:not(.fe-no) { background-color: color-mix(in srgb, #2a78d6 20%, var(--panel)); border-color: #2a78d6; }
.vf .fe-req > label::after { content: ' *'; color: #2a78d6; }
.fc-res { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
.fc-res.fc-ok { background: color-mix(in srgb, var(--ok) 14%, var(--panel)); color: var(--ok); }
.fc-res.fc-mal { background: color-mix(in srgb, var(--bad) 12%, var(--panel)); color: var(--bad); }
.fc-tabla { width: 100%; border-collapse: collapse; }
.fc-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.fc-marca { width: 28px; font-weight: 700; text-align: center; }
.fc-ok .fc-marca { color: var(--ok); }
.fc-mal .fc-marca { color: var(--bad); }
.fc-op .fc-marca { color: var(--muted); }
.fc-etq { font-weight: 600; }
.fc-det { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fc-val { font-family: var(--mono); white-space: nowrap; }
/* semáforo del cliente (verde = datos completos para la factura electrónica, rojo = faltan) */
.vf .vf-sec-tit-btn .fe-sem { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--panel); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.vf .fe-luz { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.vf .fe-sem.fe-verde { border-color: var(--ok); }
.vf .fe-sem.fe-verde .fe-luz { background: #22b14c; box-shadow: 0 0 6px #22b14c; }
.vf .fe-sem.fe-rojo { border-color: var(--bad); }
.vf .fe-sem.fe-rojo .fe-luz { background: #e02424; box-shadow: 0 0 6px #e02424; }

/* Movimiento de caja: por qué no hay cuentas de caja para elegir */
#app .mc-aviso-cta, .modal .mc-aviso-cta { margin-top: 4px; font-size: 12px; line-height: 1.35; color: #b42318; }

/* Confirmación de compras (CMCONFAC): formulario a la izquierda y facturas pendientes de confirmar al costado */
.cf-main.cmc-main { align-items: flex-start; }
.cmc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; width: min(1180px, 100%); align-items: start; }
.cmc-grid > .cf-card { width: auto; min-width: 0; }
.cmc-pend { box-sizing: border-box; grid-template-columns: minmax(0, 1fr); position: sticky; top: 12px; max-height: calc(100vh - 90px); grid-template-rows: auto auto minmax(0, 1fr); }
.cmc-pend-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmc-pend-tit h2 { margin: 0; font-size: 15px; }
.cmc-cant { min-width: 26px; text-align: center; padding: 2px 8px; border-radius: 999px; background: var(--chip); font-size: 12px; font-weight: 700; }
.cmc-pend-bus { display: flex; gap: 8px; }
.cmc-pend-bus input { flex: 1; min-width: 0; }
.cmc-lista { display: grid; gap: 6px; overflow-y: auto; align-content: start; }
.cmc-item { display: grid; gap: 3px; text-align: left; width: 100%; height: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; font-weight: 400; }
.cmc-item:hover { background: var(--chip); }
.cmc-item.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cmc-item.sin { opacity: 0.8; }
.cmc-i1 { display: flex; justify-content: space-between; gap: 8px; }
.cmc-i1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmc-tot { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmc-i2 { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.cmc-i3 { font-size: 12px; color: var(--bad); }
.cmc-campos { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.cmc-campos .field input { box-sizing: border-box; max-width: 100%; }
.cmc-cab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.cmc-cab-col { display: grid; gap: 3px; align-content: start; }
.cmc-dato b { color: var(--muted); font-weight: 600; }
.cmc-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--chip); }
.cmc-chip.pendiente { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent); }
.cmc-chip.confirmada { background: color-mix(in srgb, var(--ok) 16%, var(--panel)); color: var(--ok); }
.cmc-chip.no_local { background: color-mix(in srgb, var(--bad) 14%, var(--panel)); color: var(--bad); }
.cmc-aviso { padding: 9px 12px; border-radius: 8px; font-weight: 600; background: var(--chip); }
.cmc-aviso.ok { background: color-mix(in srgb, var(--ok) 14%, var(--panel)); color: var(--ok); }
.cmc-aviso.mal { background: color-mix(in srgb, var(--bad) 12%, var(--panel)); color: var(--bad); }
.cmc-det td.num, .cmc-det th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cmc-det tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
@media (max-width: 960px) { .cmc-grid { grid-template-columns: minmax(0, 1fr); } .cmc-pend { position: static; max-height: none; } .cmc-cab { grid-template-columns: minmax(0, 1fr); } }

/* Compras de productos (CMFACTUR): usa la disposición de VTFACTUR (.vf .vf-fac) y reutiliza .cmc-* de la confirmación */
.cmf .fa-right { top: 0; }
.cmf .cmf-pend { padding: 0; overflow: hidden; display: flex; flex-direction: column; position: static; max-height: calc(100vh - 380px); min-height: 220px; }
.cmf .cmf-pend-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmf .cmf-pend-cuerpo { display: grid; gap: 8px; padding: 10px 12px 12px; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.cmf .cmc-pend-bus input { height: 32px; }
.cmf .cmc-lista { max-height: none; }
.cmf .field select.fa-in { flex: 1 1 0; width: 100%; min-width: 0; height: 32px; padding: 3px 10px; border: 1.5px solid var(--vf-borde); border-radius: 8px; background: var(--panel); color: inherit; font: inherit; font-size: 14px; }
.cmf .field select.fa-in:disabled, .cmf .field input[type="date"]:disabled { background: var(--vf-solo); border-color: var(--line); color: color-mix(in srgb, var(--ink) 80%, var(--panel)); opacity: 1; }
.cmf .fa-tal.cmf-serie { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; }
.cmf .cmf-tabla td .fa-in { box-sizing: border-box; }
.cmf .cmf-tabla td.n { color: var(--muted); }
.cmf .cmf-x { padding: 2px 8px; height: 28px; }
.cmf .cmf-aviso { padding: 9px 14px; font-weight: 600; }
.cmf .cmf-aviso.ok { color: var(--ok); }
.cmf .cmf-aviso.mal { color: var(--bad); }
.cmf .cmf-cuotas-cuerpo { padding: 10px 14px 12px; display: grid; gap: 8px; }
.cmf .cmf-cuotas-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cmf .cmf-cuotas-bar button { height: 30px; }
.cmf-suma { font-size: 13px; color: var(--muted); }
.cmf-suma.mal { color: var(--bad); font-weight: 600; }
.cmf-nota { color: var(--muted); font-size: 13px; }
.cmf-gen { display: grid; gap: 10px; }
.cmf .cmf-subtotal { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmf .fa-ajustes .row .desc { justify-content: flex-end; }
@media (max-width: 900px) { .cmf .cmf-pend { max-height: none; } }
.cmf .cmf-pend-cuerpo { grid-template-columns: minmax(0, 1fr); }
.cmf .cmc-item { box-sizing: border-box; min-width: 0; }
.cmf .cmc-pend-bus { display: flex; gap: 6px; min-width: 0; }
.cmf .cmc-pend-bus button { height: 32px; flex: none; padding: 0 10px; }
.cmf .cmc-lista { min-width: 0; overflow-y: auto; }
.cmf .field select.fa-in { text-align: left; }
.cmf .cmf-cuotas-cuerpo input[type="date"] { width: 160px; }
.cmf .cmf-cuotas-cuerpo td input.fa-in[type="date"] { width: 165px; min-width: 165px; }

/* ---- Inventarios: Entrada y salida de artículos (STENTSAL) y Consulta de stock (STCONSTO). Comparten el diseño de .cmf (compras de productos). */
.ese .es-ind { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.ese .es-ind-E { color: var(--ok); border-color: var(--ok); }
.ese .es-ind-S { color: var(--bad); border-color: var(--bad); }
.ese .es-ind-x { display: none; }
.ese .cmf-tabla tr.es-excede td { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.ese .cmf-tabla tr.es-excede .es-disp { color: var(--bad); font-weight: 700; }
.ese .es-disp { color: var(--muted); font-variant-numeric: tabular-nums; }
.ese .cmf-tabla td select.fa-in { min-width: 130px; }
.ese .cmf-tabla td input.fa-in[type="date"] { width: 150px; }
.ese .vf-grid-cond .field select.fa-in { width: 100%; }
.scs .sc-check { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.scs .sc-check input { width: 18px; height: 18px; }
.scs .sc-scroll { max-height: 360px; overflow: auto; }
.scs tr.fa-clic.sel td { background: color-mix(in srgb, var(--accent, #2563eb) 14%, transparent); }
.scs .sc-cero { color: var(--bad); }
.scs .sc-real { font-weight: 700; }
.scs .sc-combo { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--accent, #2563eb); border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; }
.scs tr.sc-sub td { font-weight: 600; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.scs tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.scs .sc-datos { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.scs .sc-dato { display: flex; gap: 8px; font-size: 13px; }
.scs .sc-dk { flex: 0 0 92px; color: var(--muted); }
.scs .sc-real-lbl { margin-top: -4px; font-size: 12px; }
.scs .sc-combo-caja { padding: 4px 0 8px; }
.scs .sc-sub-tit { padding: 6px 14px; font-weight: 600; color: var(--muted); }
.scs .big.sc-cero { color: var(--bad); }
.scs .fa-right { top: 0; }

/* hoja A4 de la entrada / salida de artículos (pantalla y papel) */
.es-hoja { background: #fff; color: #000; width: 186mm; padding: 6mm 0; font: 11pt/1.35 Arial, Helvetica, sans-serif; }
.es-h-tit { font-size: 16pt; font-weight: 700; text-align: center; }
.es-h-sub { text-align: center; margin-bottom: 6mm; color: #333; }
.es-h-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 8mm; margin-bottom: 6mm; }
.es-hf { display: flex; gap: 3mm; border-bottom: 0.2mm solid #bbb; padding-bottom: 0.6mm; }
.es-hk { flex: 0 0 24mm; font-weight: 700; }
.es-h-tabla { width: 100%; border-collapse: collapse; font-size: 10pt; }
.es-h-tabla th, .es-h-tabla td { border: 0.2mm solid #666; padding: 1mm 1.5mm; text-align: left; }
.es-h-tabla th.num, .es-h-tabla td.num { text-align: right; }
.es-h-tabla tfoot td { font-weight: 700; }
.es-h-firmas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10mm; margin-top: 30mm; text-align: center; }
.es-h-firmas div { border-top: 0.3mm solid #000; padding-top: 1mm; }
@media print { #print-area.es-imprimiendo .es-hoja { width: auto; padding: 0; } }

/* Entrada y salida: tabla de líneas más compacta para que entren todas las columnas junto al panel lateral */
.ese.vf.vp .vp-tabla td:nth-child(3) { min-width: 150px; }
.ese .cmf-tabla td select.fa-in { min-width: 0; width: 120px; text-align: left; }
.ese .cmf-tabla td input.fa-in[type="date"] { width: 132px; text-align: left; }
.ese.vf.vp .vp-tabla th, .ese.vf.vp .vp-tabla td { padding-left: 5px; padding-right: 5px; font-size: 14px; }
.ese.vf.vp .vp-tabla .fa-in { width: 80px; }
.ese .fa-right .cmc-item { min-width: 0; }

.ese .vf-dos .vf-grid.es-uno { grid-template-columns: minmax(0, 1fr); }
.ese .vf-dos .vf-grid.es-uno > .fa-f { grid-column: 1 / -1; }
.ese .vf-dos .vf-grid .desc { flex: 1 1 auto; min-width: 120px; }
.ese .cmf-tabla td select.fa-in { width: 150px; }
.ese .cmc-i1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ese .cmc-i1 b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ese .cmc-i1 .es-ind { flex: 0 0 auto; }

/* CMFACTUR: barra de carga código × cantidad @ precio y descripción del artículo elegido */
.cmf .fa-entry .bar .fa-precio { width: 150px; flex: 0 0 150px; }
.cmf .cmf-entdesc { margin-top: 6px; min-height: 18px; font-size: 13px; color: var(--muted); }
.cmf .cmf-entdesc.set { color: var(--text, inherit); }
.cmf .cmf-tabla td .fa-in[readonly] { background: transparent; }

/* ---------- extracto de cuenta del cliente (CCEXTCLI): reutiliza .vr-* del reporte de ventas ---------- */
.cce-resumen { display: grid; gap: 12px; margin-bottom: 16px; }
.cce-resumen-tit { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.cce-botones { display: flex; gap: 8px; }
.cce-tabla th { cursor: default; }
.cce-tabla td { white-space: nowrap; }
.cce-cli td { background: var(--row-alt); border-top: 2px solid var(--line); font-size: 14px; }
.cce-cli-info { color: var(--muted); font-size: 12px; margin-left: 14px; }
.cce-ant td { color: var(--muted); font-style: italic; }
.cce-ant td.num { font-weight: 600; color: var(--ink); font-style: normal; }
.cce-mov-ini td { border-top: 1px solid var(--line); }
.cce-fact { font-weight: 600; }
.cce-saldo { font-weight: 600; }
.cce-vacio td { color: var(--muted); font-style: italic; }
.cce-tot td { font-weight: 700; background: var(--row-alt); }
.cce-oculto { font-weight: 400; font-size: 12px; color: var(--muted); }
.cce-tabla td:nth-child(n+8), .cce-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- extracto de cliente: pestañas y "Comportamiento de pagos" (public/ccextcli-pagos.js); reutiliza .dash-* del dashboard ---- */
.cce-pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.cce-pest { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 14px; font-size: 14px; color: var(--muted); cursor: pointer; }
.cce-pest-activa { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.pg-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.pg-barra-tit { font-size: 12px; color: var(--muted); margin: 0 4px 0 8px; }
.pg-barra-tit:first-child { margin-left: 0; }
.pg-seg { padding: 5px 12px; font-size: 13px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.pg-seg-activa, .pg-seg-activo { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pg-cuerpo { display: grid; gap: 16px; min-width: 0; }
.pg-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 0; }
.pg-kpi-sub { font-size: 11px; color: var(--muted); line-height: 1.3; }
.pg-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-card { min-width: 0; }
.pg-zona { cursor: default; }
.pg-zona:hover, .pg-zona:focus { fill: var(--ink); fill-opacity: 0.06; outline: none; }
.pg-saldo { font-weight: 600; }
.pg-sem { display: inline-block; min-width: 46px; text-align: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; }
.pg-ok { background: var(--ok); } .pg-med { background: var(--warn); } .pg-mal { background: var(--bad); }
.pg-pie { font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .pg-dos { grid-template-columns: 1fr; } }
.pg-card { min-height: 0 !important; }
.pg-card .dash-svg-wrap { width: 100%; max-width: 820px; margin: 0 auto; }
.pg-dos .pg-card .dash-svg-wrap { max-width: 520px; }
.pg-kpis .vr-kpi { align-content: start; }

/* ---- extracto de cliente: pestaña "Deuda vencida" (public/ccextcli-deuda.js) ---- */
.cce-tabla-vacia { display: none; }
.dv-celda { font-weight: 600; }
.dv-cero { color: var(--muted); opacity: 0.6; }
.dv-dias { display: inline-block; min-width: 40px; text-align: center; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dv-total td { font-weight: 700; background: var(--row-alt); border-top: 2px solid var(--line); }
.dv-fecha { margin-left: auto; }

/* ---------- PROCOMPR (Compras y gastos): mismo formato que Facturación con talonario (.vf); complementos de .pcx ---------- */
.pcx .pc-vistas { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--vf-tarjeta); border-radius: 10px; background: var(--vf-solo); margin-right: 8px; }
.pcx .pc-vista { height: 30px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; font-size: 13.5px; }
.pcx .pc-vista.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pcx .main.pc-solo { grid-template-columns: minmax(0, 1fr); }
.pcx .pc-pagos { padding: 0; overflow: hidden; }
.pcx .pc-pagos-cuerpo { padding: 12px 16px 16px; display: grid; gap: 12px; }
.pcx .pc-panel { padding: 0; overflow: hidden; }
.pcx .pc-panel-cuerpo { padding: 10px 14px 12px; display: grid; gap: 6px; }
.pcx .pc-mini { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pcx .pc-mini td { padding: 3px 4px; }
.pcx .pc-mini td.n { color: var(--muted); width: 24px; }
.pcx .pc-mini td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pcx .pc-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.pcx .pc-fila span { color: var(--muted); }
.pcx .pc-prov-nom { font-weight: 700; margin-bottom: 4px; }
.pcx .pc-deb { color: var(--bad); font-weight: 700; }
.pcx .pc-pagar { margin-top: 8px; height: 36px; border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pcx .fa-lines .vf-sec-tit { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcx .cmf-tabla td select.fa-in, .pcx .cmf-tabla td input.fa-in { width: 100%; box-sizing: border-box; min-width: 110px; }
.pcx .cmf-tabla td input.fa-in.num { min-width: 110px; }
.pcx .field select.fa-in { min-width: 0; }
.pcx .ch-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
/* Datos del comprobante: dos filas (comprobante, N° interno, fecha, factura del proveedor / timbrado) */
.pcx .vf-grid.pc-grid-id > .fa-f { grid-column: span var(--span, 3); }
.pcx .cmf-tabla td select.fa-in { height: 34px; padding: 4px 10px; border: 1.5px solid var(--vf-borde); border-radius: 8px; background: var(--panel); color: inherit; font: inherit; font-size: 14px; text-align: left; }
.pcx .cmf-tabla td select.fa-in:disabled { background: var(--vf-solo); border-color: var(--line); }
.pcx .vf-dos .vf-grid-cli > .fa-f:not(.vf-w) { grid-column: span 1; }
@media (max-width: 900px) { .pcx .vf-grid.pc-grid-id > .fa-f { grid-column: 1 / -1; } .pcx .vf-dos { grid-template-columns: minmax(0, 1fr); } }
.pcx .cmf-tabla.vp-tabla td:nth-child(2) select { min-width: 230px; }
.pcx .cmf-tabla.vp-tabla td:nth-child(3) select { min-width: 130px; }
.pcx .cmf-tabla.vp-tabla td:nth-child(4) select { min-width: 150px; }
.pcx .cmf-tabla.vp-tabla td:nth-child(5) input { min-width: 180px; }

/* Fotos pendientes de revisión (maestro de artículos): propuestas en miniatura, a confirmar con un clic */
.ar-foto-prop { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
.ar-foto-mini { padding: 0; height: 52px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; overflow: hidden; }
.ar-foto-mini:hover { border-color: var(--accent); }
.ar-foto-mini img { width: 100%; height: 100%; object-fit: contain; }
.ar-foto-mini img.sin-vista { visibility: hidden; }
.ar-foto-pendientes { display: grid; gap: 8px; max-height: 70vh; overflow: auto; }
.ar-foto-pend-fila { text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, var(--bg)); cursor: pointer; }
.ar-foto-pend-fila:hover { border-color: var(--accent); }
.ar-foto-pend-tit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------------------------- RR.HH. (marcación, empleados, asistencia, liquidación) */
.rr-card { max-width: 1180px; }
.cj-card.rr-card.cj-ancha { width: min(1180px, 100%); }
.rr-fecha::first-letter, .fecha::first-letter { text-transform: uppercase; }
.rr-nota { color: var(--muted); font-size: 13px; margin: 8px 0; }
.rr-sub { margin: 14px 0 6px; font-size: 15px; }
.rr-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; }
.rr-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rr-hist { max-height: 180px; overflow: auto; margin-top: 8px; }
.rr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.rr-acc { margin: 8px 0; }
.rr-mal { color: var(--bad); font-weight: 600; }
.rr-mal-fila td { background: color-mix(in srgb, var(--warn) 9%, transparent); }
.rr-suave { color: var(--muted); }
.rr-aus td { color: var(--accent); }
.rr-flag { color: var(--warn); font-weight: 700; cursor: help; }
.rr-aviso, .rr-ok { padding: 10px 14px; border-radius: 10px; margin: 6px 0 10px; font-size: 14px; }
.rr-aviso { background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.rr-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.rr-avisos { margin-top: 10px; }
.rr-av { padding: 4px 0; font-size: 14px; border-bottom: 1px dashed var(--line); }
.rr-totales { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.rr-tot { background: var(--chip); border-radius: 10px; padding: 6px 14px; display: grid; gap: 0; min-width: 96px; }
.rr-tot span { font-size: 12px; color: var(--muted); }
.rr-tot b { font-size: 18px; }
.rr-dias { max-height: 52vh; overflow: auto; }
.rr-marcas { font-size: 13px; white-space: nowrap; color: var(--muted); }
.rr-recibo { width: 100%; border-collapse: collapse; }
.rr-recibo tfoot td { font-weight: 700; font-size: 16px; }
/* marcación en la PC / tablet */
.rr-kiosko { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 22px; align-items: start; }
.rr-panel { background: var(--chip); border-radius: 16px; padding: 20px; display: grid; gap: 8px; }
.rr-reloj { font-size: 54px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.rr-fecha { color: var(--muted); margin-bottom: 10px; }
.rr-form { display: grid; gap: 10px; }
.rr-form input { font-size: 22px; padding: 12px; width: 100%; box-sizing: border-box; }
.rr-marcar { height: 56px; font-size: 20px; }
.rr-resultado { min-height: 0; border-radius: 12px; text-align: center; font-size: 19px; }
.rr-resultado:not(:empty) { padding: 14px; margin-top: 6px; }
.rr-resultado .rr-quien { font-size: 24px; font-weight: 700; }
.rr-entrada { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.rr-salida { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.rr-err { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); font-size: 16px; }
.rr-lado { min-width: 0; }
@media (max-width: 820px) { .rr-kiosko { grid-template-columns: 1fr; } .rr-reloj { font-size: 44px; } }
/* recibos de sueldo impresos: dos por hoja A4 */
.rr-hoja { background: #fff; color: #000; font: 10.5pt/1.3 Arial, Helvetica, sans-serif; padding: 4mm 0 6mm; border-bottom: 0.3mm dashed #888; margin-bottom: 4mm; break-inside: avoid; page-break-inside: avoid; }
.rr-hoja .rr-recibo { font-size: 10pt; margin-top: 3mm; }
.rr-hoja .rr-recibo th, .rr-hoja .rr-recibo td { border: 0.2mm solid #666; padding: 1mm 1.5mm; text-align: left; }
.rr-hoja .rr-recibo th.num, .rr-hoja .rr-recibo td.num { text-align: right; }
.rr-hoja .rr-firmas { margin-top: 14mm; grid-template-columns: repeat(2, 1fr); }
@media print { #print-area.es-imprimiendo .rr-hoja { width: auto; } }