/* Cierres Beijing — diseño vivo y amable. Modo oscuro opcional (botón arriba a la derecha). */
:root {
  color-scheme: light;
  --bg: #F3F5FA;
  --surface: #FFFFFF;
  --surface-2: #F7F8FC;
  --surface-3: #EDF0F7;
  --ink: #141A2E;
  --ink-2: #4A5372;
  /* 4.64:1 sobre el fondo de la página. Era #8790AB, que daba 2.91 y no llega al 4.5 que pide
     la norma: TODO el texto secundario del ERP —las pistas, los subtítulos, las segundas
     líneas de cada celda— se leía por debajo del mínimo accesible. Mismo matiz, más oscuro.
     El modo oscuro ya cumplía (5.28) y no se toca. */
  --muted: #656E8A;
  --line: #E4E7F0;
  /* La curva del ERP. Fuerte a propósito: arranca rápido y frena suave, que es lo que hace
     que algo se sienta inmediato. Estaba copiada a mano en doce sitios. */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --line-strong: #D2D7E5;
  /* Marca Beijing: azul marino y dorado del logo */
  --brand: #1F3B63;
  --brand-2: #152A45;
  --brand-ink: #FFFFFF;
  --brand-soft: #E3EAF4;
  --brand-text: #1F3B63;
  --gold: #C9962B;
  --gold-soft: #FBF1DA;
  --gold-text: #8A6212;
  --sky: #3B82F6;
  --sky-soft: #E4EEFF;
  --sky-text: #1D5BD6;
  --good: #139A4E;
  --good-soft: #DEF5E7;
  --warn: #B96F00;
  --warn-soft: #FFF0D4;
  --bad: #D83A2C;
  --bad-soft: #FDE5E2;
  --loss: #E2483A;
  --side-1: #070B0B;
  --side-2: #11181A;
  --side-ink: #EFE8D6;
  --side-muted: #A89F88;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(20, 26, 46, .04), 0 10px 28px -10px rgba(20, 26, 46, .14);
  --shadow-up: 0 2px 6px rgba(20, 26, 46, .06), 0 18px 36px -12px rgba(20, 26, 46, .22);
  --sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F141F;
  --surface: #171E2C;
  --surface-2: #1C2433;
  --surface-3: #232C3E;
  --ink: #E9EDF5;
  --ink-2: #B6BED0;
  --muted: #8791A8;
  --line: #2A3346;
  --line-strong: #37425A;
  --brand: #D9AE4F;
  --brand-2: #E8C46E;
  --brand-ink: #1B1405;
  --brand-soft: #3A2E14;
  --brand-text: #EBC873;
  --gold: #E3B54F;
  --gold-soft: #3A2D12;
  --gold-text: #F2CD74;
  --sky: #5B9BFF;
  --sky-soft: #1B2A48;
  --sky-text: #8DB8FF;
  --good: #4CCB88;
  --good-soft: #133322;
  --warn: #F2B458;
  --warn-soft: #3A2B10;
  --bad: #F58A80;
  --bad-soft: #3D1C19;
  --loss: #F4786C;
  --side-1: #040606;
  --side-2: #0B1012;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -12px rgba(0, 0, 0, .55);
  --shadow-up: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 40px -14px rgba(0, 0, 0, .65);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-text); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.neg { color: var(--loss); }
.pos { color: var(--good); }

/* Lo que el proveedor pide de más mientras se negocia. NO es «.neg»: el rojo de pérdida hace
   pensar que aceptar es entrar en números rojos, y no lo es —es el tamaño de lo que está sobre
   la mesa, y solo cuenta si se acepta—. El rojo se guarda para lo que ya se cedió. */
.ng-piden { color: var(--gold-text); }
/* Lo que ganas si te aceptan tu propuesta, debajo de lo que te piden. Va en verde porque esto
   sí es dinero a tu favor, y pequeño porque la cifra que manda sigue siendo la de arriba. */
/* La rentabilidad si se cierra en esa ley: el porcentaje manda y el monto va debajo, en pequeño.
   Son dos caras del MISMO dato, no dos datos distintos —que era lo que se veía raro antes, con
   dos importes de dinero apilados y de dos colores—. En rojo solo si la rentabilidad es negativa,
   que ahí sí sería una pérdida de verdad. */
.ng-rent { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--good); }
.ng-rent.neg { color: var(--loss); }
.ng-rent-usd { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* «los 6»: marca los lotes que fueron en el mismo reporte, para que el canje lleve los mismos.
   Va pegado al chip del RL porque es su acción, no una de la fila. */
.ng-vino { white-space: nowrap; }
.ng-mismo { margin-left: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2); font-size: 11px; font-weight: 700; cursor: pointer; }
.ng-mismo:hover { border-color: var(--brand); color: var(--brand); }
.ng-rent-oz { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* Los gramos de cada ley, dentro de su celda: el laboratorio y la planta hablan en g/t, y hacer la
   cuenta de cabeza en mitad de un regateo es como se cuela un error. Va en bloque y en pequeño,
   debajo del número en oz/tc, que sigue siendo el que manda. */
.ng-v i.ng-gt { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }



.nowrap { white-space: nowrap; }
.wrap { white-space: normal; min-width: 180px; }
.warn-text { color: var(--warn); font-weight: 700; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ——— Animaciones suaves al cargar ——— */
@keyframes subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes entrar { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes destello { from { background: var(--gold-soft); } to { background: transparent; } }
/* Aquí había una entrada escalonada para todo lo que cuelga de main: 450ms más hasta 240ms
   de retraso, o sea casi 700ms hasta ver el último bloque. Y se repetía en CADA guardado,
   porque el envío suave repinta el contenido. Una herramienta de trabajo se abre para hacer
   una tarea, no para mirar cómo carga: quien valoriza treinta lotes la veía treinta veces.
   El resto de animaciones se quedan, porque esas sí dicen algo: la campana que se despliega,
   la barra de acciones que aparece al marcar, el anillo que dibuja su valor. */

.app { display: grid; grid-template-columns: 262px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* ——— Menú lateral ——— */
.rail {
  background:
    radial-gradient(120% 50% at 0% 0%, rgba(214, 170, 70, .16), transparent 55%),
    linear-gradient(180deg, var(--side-1) 0%, var(--side-2) 100%);
  color: var(--side-ink); display: flex; flex-direction: column; gap: 22px; padding: 22px 16px 18px;
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 2px 8px; color: #fff; text-decoration: none; }
.brand-mark { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #FFE08A, #F5A524 58%, #C5800E); color: #3B2600; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; box-shadow: 0 6px 18px -4px rgba(245, 165, 36, .55); }
.brand-name { font-weight: 800; font-size: 16.5px; line-height: 1.15; letter-spacing: -.01em; }
.brand.con-logo { flex-direction: column; align-items: flex-start; gap: 8px; padding: 4px 8px 2px; }
.brand-logo { display: block; width: 200px; max-width: 100%; height: auto; }
.brand-sub { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); padding-left: 2px; }
.brand-name small { display: block; font-weight: 500; font-size: 11.5px; color: var(--side-muted); margin-top: 3px; letter-spacing: 0; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label { font-size: 10.5px; font-weight: 700; color: var(--side-muted); padding: 0 12px 6px; letter-spacing: .1em; text-transform: uppercase; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: rgba(230, 242, 239, .78); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .15s, color .15s, transform .15s; }
.nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; transform: translateX(2px); }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, .13); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nav a[aria-current="page"] .ico { color: var(--gold); }
.badge { margin-left: auto; font-size: 11.5px; font-weight: 700; background: rgba(255, 255, 255, .14); color: #fff; border-radius: 999px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.badge.warn { background: var(--gold); color: #3B2600; }
.rail-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--side-muted); }
.rail-card b { color: #fff; font-size: 13.5px; }
.rail-card a { color: var(--gold); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }
.rail-card a .ico { width: 14px; height: 14px; }
.rail-user { margin-top: auto; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .06); border-radius: 14px; padding: 8px 8px 8px 10px; }
.avatar-yo { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #F6D56E, #C9962B); color: #2A1C00; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; flex: none; }
.yo-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.yo-txt b { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yo-txt small { color: var(--side-muted); font-size: 11.5px; }
.yo-link { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--side-muted); }
.yo-link:hover, .yo-link.activo { background: rgba(255, 255, 255, .1); color: #fff; }
/* El altavoz del saludo, en la barra de arriba: altavoz cuando está prendido, tachado cuando no,
   y al tocarlo se abre el panelito para elegir la voz. */
.voz-caja { position: relative; }
.voz-toggle .voz-no { display: none; }
.voz-toggle[aria-pressed="false"] .voz-si { display: none; }
.voz-toggle[aria-pressed="false"] .voz-no { display: inline-flex; }
.voz-toggle[aria-pressed="false"] span.voz-no { display: inline; }
.voz-toggle[aria-pressed="false"] { color: var(--muted); }
.voz-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: 290px; display: flex; flex-direction: column; gap: 11px;
  padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 18px 40px -18px rgba(20, 26, 46, .45); }
.voz-menu[hidden] { display: none; }
.voz-sw { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.voz-sw input { width: 16px; height: 16px; margin: 0; flex: none; }
.voz-campo { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.voz-campo select { width: 100%; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink); }
.voz-pie { display: flex; align-items: center; gap: 10px; }
.voz-pie small { flex: 1; font-size: 11px; line-height: 1.35; color: var(--muted); }

/* ——— Barra superior ——— */
main { padding: 20px 34px 96px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* Encima del resto: cada bloque de la página se anima y forma su propia capa, y tapaba los avisos.
   Y se queda arriba al bajar: el buscador, «Atrás», los avisos y «¿Cómo hago?» son de las pocas cosas
   que se necesitan en mitad de una pantalla larga, y había que subir el cursor hasta arriba para
   alcanzarlas. Los márgenes negativos son para que tape de borde a borde el relleno de main; sin eso
   se ve pasar el contenido por los costados. */
.barra-sup { display: flex; gap: 14px; flex-wrap: wrap; position: sticky; top: 0; z-index: 30;
  margin: -20px -34px 0; padding: 20px 34px 14px; background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color .18s, box-shadow .18s; }
/* La línea y la sombra solo cuando de verdad hay algo pasando por debajo (la clase la pone app.js):
   dibujarlas siempre pondría un borde flotante en una pantalla que ni siquiera se ha movido. */
.barra-sup.pegada { border-bottom-color: var(--line); box-shadow: 0 10px 20px -16px rgba(20, 26, 46, .5); }
.buscador { flex: 1; max-width: 480px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; box-shadow: var(--shadow); color: var(--muted); }
.buscador input { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 44px !important; padding: 0 !important; font-size: 14px; color: var(--ink); }
.buscador:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.hoy { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 600; font-size: 13.5px; }
.hoy .ico { color: var(--brand); }
.tema-toggle { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; min-height: 40px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2); box-shadow: var(--shadow); }
.tema-toggle:hover { color: var(--ink); border-color: var(--brand); }
.tema-toggle .i-sol, .tema-toggle .t-sol { display: none; }
[data-theme="dark"] .tema-toggle .i-luna, [data-theme="dark"] .tema-toggle .t-luna { display: none; }
[data-theme="dark"] .tema-toggle .i-sol, [data-theme="dark"] .tema-toggle .t-sol { display: inline; }

.banner { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 12px 16px; font-size: 13.5px; font-weight: 600; }
.banner .btn { margin-left: auto; }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.info { background: var(--sky-soft); color: var(--sky-text); }
.banner.ok { background: var(--good-soft); color: var(--good); }
/* Los avisos globales van al lado mientras quepan enteros; por debajo de eso se apilan solos. */
.avisos-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.avisos-fila > .banner { flex: 1 1 430px; min-width: 0; }

.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topbar h1 { font-weight: 800; font-size: 30px; line-height: 1.12; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.topbar p { margin: 6px 0 0; color: var(--ink-2); max-width: 100ch; }
.tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tools form { display: inline-flex; }

/* ——— Avisos flotantes ——— */
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: flex; flex-direction: column; gap: 10px; max-width: min(440px, calc(100vw - 44px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; background: var(--ink); color: var(--surface); border-radius: 16px; padding: 13px 12px 13px 16px; box-shadow: var(--shadow-up); font-size: 13.5px; font-weight: 600; animation: entrar .35s var(--ease-out) both; transition: opacity .25s, transform .25s; }
.toast .ico { margin-top: 1px; }
.toast.ok .ico { color: #4CE39A; }
.toast.error .ico { color: #FF9C8F; }
.toast span { flex: 1; }
.toast-x { background: none; border: 0; color: inherit; opacity: .6; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.toast-x:hover { opacity: 1; }
.toast.saliendo { opacity: 0; transform: translateX(24px); }

/* ——— Portada ——— */
/* El tablero abre con un frente de roca y su veta de oro: los colores de la casa, no un degradado cualquiera.
   El dibujo es un SVG dentro del propio bloque (.hero-roca), así que escala sin pixelarse. */
.hero {
  position: relative; overflow: hidden; border-radius: 26px; padding: 30px 32px; color: #fff;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: center;
  background: linear-gradient(118deg, #0B1420 0%, #16283A 38%, #1F3B63 74%, #2B5286 100%);
  box-shadow: 0 24px 48px -24px rgba(11, 20, 32, .72);
}
.hero-roca { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
/* El resplandor de la veta, detrás del dibujo */
.hero::before { width: 420px; height: 420px; right: -110px; top: -170px; background: radial-gradient(circle, rgba(201, 150, 43, .38), transparent 66%); }
.hero::after { width: 260px; height: 260px; left: 34%; bottom: -170px; background: radial-gradient(circle, rgba(240, 199, 102, .14), transparent 70%); }
.hero > *:not(.hero-roca) { position: relative; z-index: 1; }
.hero-fecha { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700;
  color: var(--gold-claro, #F0C766); text-transform: uppercase; letter-spacing: .1em; }
.hero-fecha::before { content: ""; width: 20px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #F0C766); }
.hero h1 { margin: 6px 0 8px; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.hero p { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, .86); max-width: 60ch; }
.hero p b { color: #fff; }
.hero-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
/* La cifra del año va sobre un bloque de mineral pulido, con su filo dorado arriba */
.hero-dato { position: relative; overflow: hidden; border-radius: 20px; padding: 19px 20px 18px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(240, 199, 102, .28); backdrop-filter: blur(7px); }
.hero-dato::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, transparent, #C9962B 28%, #F0C766 55%, transparent); }
.hero-dato span { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .74); }
.hero-dato b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 5px 0 2px;
  font-variant-numeric: tabular-nums; color: #F7DFA0; }
.hero-dato small { font-size: 12.5px; color: rgba(255, 255, 255, .76); }

/* ——— Paneles ——— */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; min-width: 0; }
.panel.narrow { max-width: 640px; }
.panel-head, .seccion-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.panel h2, .seccion-head h2 { font-weight: 800; font-size: 18px; margin: 0; line-height: 1.25; letter-spacing: -.015em; }
.panel-sub { color: var(--muted); font-size: 12.5px; }
.panel-link { font-size: 13px; font-weight: 700; text-decoration: none; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.grid-2.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.empty { padding: 26px 0; margin: 0; text-align: center; }
.notice { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 10px 13px; font-size: 13px; font-weight: 600; margin: 0 0 14px; }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.info { background: var(--sky-soft); color: var(--sky-text); }
.notice .ico { width: 16px; height: 16px; }
.notice a { color: inherit; }

/* ——— Indicadores ——— */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
/* El icono va AL LADO del rótulo, no encima: la tarjeta pasa de unos 175 px de alto a unos 95 sin
   perder ni un dato. Cinco de estas eran media pantalla para cinco cifras, y en Tesorería dos de
   ellas salen vacías. Si no hay sub, su fila se encoge sola. */
.kpi { --k: var(--brand); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; color: inherit; text-decoration: none; position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico label" "ico value" "ico sub"; align-items: center; column-gap: 12px; row-gap: 1px; }
.kpi::after { content: ""; position: absolute; right: -26px; top: -34px; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--k) 14%, transparent), transparent 70%); pointer-events: none; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.kpi[data-tono="gold"] { --k: var(--gold); }
.kpi[data-tono="sky"] { --k: var(--sky); }
.kpi[data-tono="loss"] { --k: var(--loss); }
.kpi[data-tono="violet"] { --k: #7C5CFF; }
.kpi-icon { grid-area: ico; width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb, var(--k) 15%, var(--surface)); color: var(--k); display: grid; place-items: center; }
.kpi-label { grid-area: label; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.kpi-value { grid-area: value; font-weight: 800; font-size: 26px; line-height: 1.15; white-space: nowrap; }
.kpi-sub { grid-area: sub; font-size: 12.5px; color: var(--ink-2); }

/* ——— Proveedores ——— */
.prov { --c: #64748B; display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: color-mix(in srgb, var(--c) 72%, var(--ink)); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.prov i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; }
.prov-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.prov-card { --c: #64748B; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.prov-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 70px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, transparent), transparent); pointer-events: none; }
.prov-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.prov-card header { display: flex; align-items: center; gap: 12px; position: relative; }
.avatar { width: 44px; height: 44px; border-radius: 14px; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; box-shadow: 0 8px 18px -8px var(--c); }
.prov-card h3 { margin: 0; font-size: 15.5px; font-weight: 800; }
.prov-card header span { font-size: 12px; color: var(--muted); }
.pc-util { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pc-barra { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 12px; color: var(--muted); }
.pc-barra .progreso { grid-column: 1 / -1; }
.pc-barra em { font-style: normal; font-weight: 800; color: var(--ink); grid-row: 1; grid-column: 2; }
.pc-datos { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.pc-datos li { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.pc-datos b { color: var(--ink); font-variant-numeric: tabular-nums; }
.progreso { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progreso b { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform-origin: left; animation: crecerX .9s var(--ease-out) both; }
.progreso b.neg { background: var(--loss); }
.progreso b.prov-color { background: var(--c); }
@keyframes crecerX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Filtro por proveedor */
.prov-filtro { display: flex; gap: 10px; flex-wrap: wrap; }
.prov-opcion { --c: #64748B; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 13.5px; box-shadow: var(--shadow); transition: transform .15s, border-color .15s, background .15s; }
.prov-opcion i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; }
.prov-opcion b { background: var(--surface-3); color: var(--ink-2); border-radius: 999px; padding: 0 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.prov-opcion:hover { transform: translateY(-2px); border-color: var(--c); }
.prov-opcion.activo { background: color-mix(in srgb, var(--c) 12%, var(--surface)); border-color: var(--c); }
.prov-opcion.activo b { background: var(--c); color: #fff; }

/* ——— Tablas ——— */
/* El encabezado se queda a la vista, y el total también.
   Antes esto solo tenía «overflow-x», así que era un contenedor de scroll que NUNCA scrolleaba en
   vertical: el «position: sticky» de su encabezado no llegaba a activarse jamás y, al bajar por una
   tabla larga, las columnas se quedaban sin nombre. Con un alto máximo el encabezado tiene contra
   qué pegarse. Una tabla corta no lo alcanza y se ve igual que siempre.
   El tope deja ver siempre un poco de la página alrededor, y no baja de 360 px para que en una
   pantalla baja siga cabiendo algo. */
.table-scroll { max-height: none; margin: 0 -24px; padding: 0 24px; }
.table-scroll.ancha { overflow-x: auto; overflow-y: clip; }
/* Un código no se parte. En una columna estrecha «BH-26-0001» salía en cinco líneas, una por
   trozo, y dejaba de leerse como un código. Aquí sobra con decir que no se parta: el padre
   ya desplaza en horizontal, así que la tabla se ensancha en vez de destrozar la celda. */
.table-scroll table.data .mono { white-space: nowrap; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.data th { background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--ink-2); text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom; }
table.data th:first-child { border-top-left-radius: 12px; }
table.data th:last-child { border-top-right-radius: 12px; }
.th-sub { font-weight: 500; color: var(--muted); }
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; transition: background .15s; }
table.data.compact td { padding: 8px 12px; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data tbody tr.marcada td { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); }
table.data .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data th.r { text-align: right; }
table.data tfoot td { border-top: 2px solid var(--line-strong); border-bottom: 0; }
table.data tr.dim td { color: var(--muted); }
table.data tr.vigente td { background: var(--brand-soft); }
table.data a { text-decoration: none; font-weight: 700; }
.cell-sub { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 500; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; flex: none; accent-color: var(--brand); cursor: pointer; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--sky-soft); color: var(--sky-text); }
.pill.neutral { background: var(--surface-3); color: var(--ink-2); }
.pill.big { font-size: 13.5px; padding: 7px 14px; }
.pill.gold-pill { background: var(--gold-soft); color: var(--gold-text); }

/* Lo que pinta el navegador y no el diseño: la selección de texto y el cursor de escritura.
   Salían con los colores del sistema operativo, que no son de nadie. */
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--brand) 38%, transparent); color: #fff; }
input, textarea, select, [contenteditable] { caret-color: var(--brand); }

/* ——— Botones y campos ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 999px; padding: 0 18px; min-height: 42px; cursor: pointer; font-weight: 700; font-size: 13.5px; white-space: nowrap; text-decoration: none; }/* Un escalón POR DEBAJO del dorado, a propósito: relleno sólido, sin degradado y con la sombra
   apenas insinuada. Antes los dos eran degradado con sombra y competían; con 15 botones así en una
   sola pantalla, ninguno destacaba. Sigue siendo el principal donde no hay dorado, porque al lado
   de los de contorno es el único relleno. */
.btn-primary { background: #22406B; color: #fff; box-shadow: 0 2px 6px -3px rgba(21, 42, 69, .55); }
.btn-primary:hover { background: #2B4E80; box-shadow: 0 6px 14px -8px rgba(21, 42, 69, .7); }
.btn-primary:disabled { opacity: .7; cursor: progress; transform: none; }
.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-text); }
.btn-gold { background: linear-gradient(135deg, #F6D56E, #C9962B); color: #2A1C00; box-shadow: 0 8px 18px -8px rgba(201, 150, 43, .8); }
.btn-claro { background: #fff; color: #0B5E55; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); }
.btn-transparente { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn-transparente:hover { background: rgba(255, 255, 255, .2); }
.btn-small { min-height: 32px; padding: 0 13px; font-size: 12.5px; background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-small:hover { border-color: var(--brand); color: var(--brand-text); }
.btn-borrar:hover { border-color: var(--bad); color: var(--bad); }
.btn .ico { width: 16px; height: 16px; }
button.link { background: none; border: 0; padding: 0; color: var(--brand-text); font-weight: 700; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; font-size: inherit; }
button.link:hover { text-decoration-style: solid; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 8px 12px; min-height: 42px; font-size: 14px; width: 100%; transition: border-color .15s, box-shadow .15s; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
textarea { min-height: auto; resize: vertical; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input, .filters select { width: auto; min-width: 170px; }
.filters .inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.filters .check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.filters .file { display: inline-flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.summary { display: flex; gap: 6px 26px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }
.summary b { color: var(--ink); font-weight: 800; }
.summary.tight { margin: 14px 0 0; }
.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-content: start; margin-bottom: 16px; }
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields label, label.obs { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 700; }
.fields .span2 { grid-column: span 2; }
.fields .span3 { grid-column: 1 / -1; }
.hint { font-size: 12px; color: var(--muted); font-weight: 500; }
.input-big { font-size: 28px !important; font-weight: 800; min-height: 58px !important; letter-spacing: -.02em; }
details.ajustes { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 10px 14px; margin-bottom: 16px; background: var(--surface-2); }
details.ajustes summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); font-weight: 700; }
details.ajustes[open] summary { margin-bottom: 12px; }
details.ajustes .fields, details.ajustes .filters { margin-bottom: 4px; }
label.obs { margin-bottom: 16px; }
.acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form { display: inline; }

/* Carga diaria */
.opcion { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.opcion h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 800; }
.opcion h3 .ico { color: var(--brand-text); }
.opcion p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.opcion .notice { margin: 8px 0 0; }
.separador { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font-size: 12px; font-weight: 700; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ——— Cierre de un código ——— */
.cierre-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.stack-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.callout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--gold-soft); color: var(--gold-text); border-radius: 16px; padding: 12px 16px; font-weight: 600; font-size: 13.5px; }
.callout .btn { margin-left: auto; }
.paso-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.paso-n { width: 32px; height: 32px; border-radius: 11px; background: linear-gradient(135deg, #14B8A0, #0B8F80); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; box-shadow: 0 6px 14px -6px rgba(15, 164, 143, .8); }
.paso-head h2 { margin: 3px 0 0; }
.paso-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.resultado { position: sticky; top: 16px; }
.res-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.res-util { display: block; font-weight: 800; font-size: 38px; line-height: 1.1; letter-spacing: -.03em; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.res-util.neg { color: var(--loss); }
.res-pct { font-size: 13px; color: var(--ink-2); }
.res-anillo { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.anillo { width: 72px; height: 72px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 7; }
.anillo .a-fondo { stroke: var(--surface-3); }
.anillo .a-valor { stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease-out); }
.anillo.good .a-valor { stroke: var(--good); }
.anillo.warn .a-valor { stroke: var(--gold); }
.anillo.bad .a-valor, .anillo.neutral .a-valor { stroke: var(--loss); }
.anillo text { transform: rotate(90deg); transform-origin: 32px 32px; fill: var(--ink); font-size: 13px; font-weight: 800; font-family: var(--sans); }
.veredicto { border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; }
.veredicto.good { background: var(--good-soft); color: var(--good); }
.veredicto.warn { background: var(--warn-soft); color: var(--warn); }
.veredicto.neutral { background: var(--surface-2); color: var(--ink-2); }
.v-titulo { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.veredicto ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink); font-size: 13.5px; }
.veredicto li + li { margin-top: 3px; }
.mejora { margin-top: 4px; border-radius: 16px; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface-2); }
.mejora.good { border-color: transparent; background: var(--good-soft); }
.mejora.bad { border-color: transparent; background: var(--bad-soft); }
.mejora .hint { margin: 6px 0 0; display: block; }
.m-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.m-head span { color: var(--muted); font-size: 12.5px; }
.m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.m-grid div { display: flex; flex-direction: column; gap: 2px; }
.m-grid span { font-size: 12px; color: var(--muted); font-weight: 700; }
.m-grid b { font-size: 16px; font-variant-numeric: tabular-nums; }
.m-grid em { font-style: normal; font-size: 13px; font-weight: 800; }
.mejora.good em { color: var(--good); }
.mejora.bad em { color: var(--bad); }
table.escenarios { margin: 4px 0 6px; }
details.calculo { margin-top: 12px; }
details.calculo summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--ink-2); margin-bottom: 8px; }
.lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin: 0; }
.lines div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.lines dt { color: var(--ink-2); }
.lines dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.lines .strong dd, .lines .strong dt { font-weight: 800; color: var(--ink); }
.gap { font-size: 13.5px; color: var(--ink-2); margin: 14px 0 0; }

/* ——— Reclamo masivo ——— */
.totales { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tot { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 13px 15px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tot span { font-size: 12px; font-weight: 700; color: var(--muted); }
.tot b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tot small { font-size: 12px; color: var(--ink-2); }
.tot.good { background: var(--good-soft); border-color: transparent; }
.tot.good b { color: var(--good); }
.masiva-toolbar { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.masiva-toolbar .prop-masiva { display: flex; gap: 8px; align-items: center; }
.masiva-toolbar .prop-masiva select { width: auto; min-height: 36px; font-size: 13px; }
.masiva-toolbar .nota-ronda { flex: 1; min-width: 220px; }
.masiva-toolbar .nota-ronda input { min-height: 36px; font-size: 13px; }
details.pegar { position: relative; }
details.pegar > summary { list-style: none; }
details.pegar > summary::-webkit-details-marker { display: none; }
.pegar-caja { position: absolute; z-index: 10; top: calc(100% + 8px); left: 0; width: min(520px, 90vw); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-up); display: flex; flex-direction: column; gap: 10px; }
.pegar-caja p { margin: 0; font-size: 13px; color: var(--ink-2); }
.pegar-caja .fila-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pegar-caja select { width: auto; min-height: 34px; font-size: 13px; }
.autosave { margin-left: auto; align-self: center; font-size: 12.5px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.autosave::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.autosave.trabajando::before { background: var(--gold); animation: latido 1s infinite; }
.autosave.ok { color: var(--good); }
.autosave.ok::before { background: var(--good); }
@keyframes latido { 50% { opacity: .3; } }
.masiva-wrap { overflow-x: auto; margin: 0 -24px; padding: 0 24px 4px; }
table.masiva { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 1320px; width: 100%; }
table.masiva th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: 11.5px; font-weight: 800; color: var(--ink-2); padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
table.masiva thead tr:nth-child(2) th { top: 33px; }
table.masiva th.g-beijing { background: var(--gold-soft); color: var(--gold-text); }
table.masiva th.g-prov { background: var(--sky-soft); color: var(--sky-text); }
table.masiva th.g-prop { background: var(--brand-soft); color: var(--brand-text); }
table.masiva th.g-res { background: var(--surface-3); }
table.masiva td { padding: 5px 5px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; transition: background .2s; }
table.masiva td.cb { background: color-mix(in srgb, var(--gold-soft) 38%, transparent); }
table.masiva td.cp { background: color-mix(in srgb, var(--sky-soft) 38%, transparent); }
table.masiva td.cc { background: color-mix(in srgb, var(--brand-soft) 38%, transparent); }
table.masiva td.c-cod { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 150px; padding-left: 8px; }
table.masiva td.c-cod a { font-weight: 700; text-decoration: none; }
table.masiva td.c-cod small { display: block; color: var(--muted); font-size: 11.5px; }
table.masiva td.c-sel { text-align: center; width: 34px; }
table.masiva input:not([type=checkbox]) { width: 70px; min-height: 32px; padding: 4px 7px; border-radius: 9px; text-align: right; font-size: 13px; border-color: transparent; background: var(--surface); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line); }
table.masiva input:not([type=checkbox]):focus { box-shadow: 0 0 0 3px var(--brand-soft); border-color: var(--brand); }
table.masiva input.ley { width: 78px; font-weight: 700; }
table.masiva td.r { text-align: right; font-variant-numeric: tabular-nums; padding: 5px 9px; }
table.masiva td[data-o="util"] { font-weight: 800; }
table.masiva td[data-o="ver"] small { display: block; font-size: 11.5px; font-weight: 700; margin-top: 2px; }
table.masiva tr.conviene td.c-cod { box-shadow: inset 3px 0 0 var(--good); }
table.masiva tr.fuera td { opacity: .45; }
table.masiva tr.fuera td.c-sel { opacity: 1; }
table.masiva td.cambio { animation: destello .8s ease-out; }
table.masiva tfoot td { position: sticky; bottom: 0; background: var(--surface-2); font-weight: 800; border-top: 2px solid var(--line-strong); padding: 9px 9px; }
.quitar { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; border-radius: 8px; width: 28px; height: 28px; }
.quitar:hover { background: var(--bad-soft); color: var(--bad); }

/* Barra de acciones que acompaña al bajar */
.barra-acciones { position: sticky; bottom: 18px; z-index: 20; margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--ink); color: var(--surface); border-radius: 20px; padding: 10px 12px 10px 20px; box-shadow: var(--shadow-up); animation: subir .3s both; }
.barra-acciones > span { font-size: 13.5px; font-weight: 600; }
.barra-acciones > span b { font-size: 16px; }
.barra-acciones .espacio { flex: 1; }
.barra-acciones .btn-ghost { background: transparent; color: var(--surface); border-color: color-mix(in srgb, var(--surface) 30%, transparent); }
.barra-acciones .btn-ghost:hover { border-color: var(--surface); color: var(--surface); }
.barra-acciones .muted { color: color-mix(in srgb, var(--surface) 65%, transparent); font-size: 12.5px; }

/* Lista de reclamos */
.reclamos { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.reclamo-card { --c: #64748B; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.reclamo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.reclamo-card.archivado { opacity: .6; }
.reclamo-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.reclamo-card .rc-num { font-size: 12px; font-weight: 800; color: var(--muted); }
.reclamo-card .rc-datos { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-2); }
.reclamo-card .rc-datos b { display: block; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.reclamo-card footer { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* ——— Gráfico ——— */
svg.chart { display: block; width: 100%; height: auto; }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-axis { stroke: var(--line-strong); stroke-width: 1; }
.c-tick { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
.c-lab { fill: var(--ink); font-size: 12px; font-weight: 800; font-family: var(--sans); }
.c-bar { fill: var(--brand); transform-box: fill-box; transform-origin: bottom; animation: crecer .8s var(--ease-out) both; }
.c-bar.neg { fill: var(--loss); transform-origin: top; }
.c-bar:hover { fill: var(--gold); }

/* ——— Pantalla de ingreso ——— */
.login { display: grid; background: var(--bg); }
.login-arte { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; }
.login-arte::after { position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -120px; bottom: -160px; border: 60px solid rgba(214, 170, 70, .07); }
.login-logo { height: auto; }
.login-arte h2 { font-weight: 800; }
.login-arte p { margin: 0; }
.login-arte ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; font-weight: 600; }
.login-arte li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .18); margin-right: 10px; font-size: 12px; }
.login-form { display: grid; place-items: center; }
.login-caja { display: flex; flex-direction: column; animation: subir .5s both; }
.login-caja h1 { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.login-caja p { margin: 0; color: var(--ink-2); }
.login-caja label { display: flex; flex-direction: column; }
.login-caja .btn { width: 100%; }
.login-error { background: var(--bad-soft); color: var(--bad); }

/* ——— Usuarios y permisos ——— */
.form-usuario { display: flex; flex-direction: column; gap: 14px; }
.perfiles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.acceso-total, .permiso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.acceso-total { background: var(--good-soft); border-color: transparent; }
.acceso-total b, .permiso b { display: block; font-size: 13.5px; }
.acceso-total small, .permiso small { display: block; color: var(--ink-2); font-size: 12px; font-weight: 500; }
.permiso:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.permisos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; transition: opacity .2s; }
.permisos.apagado { opacity: .35; pointer-events: none; }
.mis-permisos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.mis-permisos .kpi-label { width: 100%; }
details.editar-usuario { position: relative; display: inline-block; text-align: left; }
details.editar-usuario > summary { list-style: none; }
details.editar-usuario > summary::-webkit-details-marker { display: none; }
.editar-caja { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; width: min(560px, 86vw); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-up); display: flex; flex-direction: column; gap: 14px; white-space: normal; }

/* ——— Almacén de lotes ——— */
.nav-label:not(:first-child) { margin-top: 14px; }
.sede { --c: #64748B; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 1px 7px; border-radius: 7px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: color-mix(in srgb, var(--c) 70%, var(--ink)); font: 700 11px/1.6 var(--mono); letter-spacing: .03em; vertical-align: middle; flex: none; }
.lote-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.prov-opcion small { color: var(--muted); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin: -4px 0 10px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--brand); margin-right: 6px; vertical-align: -1px; }
.leyenda i.out { background: var(--gold); }
.c-bar.c-out { fill: var(--gold); }
.c-bar.c-in:hover { fill: var(--brand); fill-opacity: .7; }
.c-bar.c-out:hover { fill: var(--gold); fill-opacity: .7; }
.spark { display: block; width: 100%; height: 34px; margin-top: 8px; }
.spark polyline { fill: none; stroke: var(--k); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark polygon { fill: color-mix(in srgb, var(--k) 14%, transparent); }
.tmh-input { font-weight: 800 !important; font-size: 18px !important; font-variant-numeric: tabular-nums; }
.dia-nav { display: inline-flex; gap: 6px; align-items: center; }
.dia-nav input[type=date] { width: auto; min-height: 32px; padding: 3px 10px; font-size: 13px; }
table.data tr.nuevo td { animation: destello 2.6s ease-out; }
.segmento { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-3); flex-wrap: wrap; margin-bottom: 16px; }
.segmento label { position: relative; display: inline-flex; flex-direction: column; padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 800; color: var(--ink-2); cursor: pointer; line-height: 1.25; }
.segmento label small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
.segmento label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.segmento label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.scroll-caja { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
.scroll-caja thead th { position: sticky; top: 0; z-index: 1; }
.barra-acciones .grupo { display: inline-flex; gap: 6px; align-items: center; }
.barra-acciones input:not([type=checkbox]) { width: auto; min-height: 36px; padding: 4px 10px; font-size: 13px; color: var(--ink); background: var(--surface); }
.barra-acciones input[name=destino] { width: 150px; }
.totales.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lines.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.eventos li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.eventos li:last-child { border-bottom: 0; }
.eventos time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.eventos b { display: block; font-size: 13px; }
.eventos span { color: var(--ink-2); }
.prog-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ——— Avisos (campana) ——— */
.campana { position: relative; }
.campana > summary { list-style: none; }
.campana > summary::-webkit-details-marker { display: none; }
.campana[open] > summary { border-color: var(--brand); color: var(--ink); }
.campana-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--loss); color: #fff; font-size: 11.5px; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.campana-n.suave { background: var(--sky); }
.campana-caja { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: min(440px, 92vw); max-height: 72vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-up); display: flex; flex-direction: column; gap: 10px; animation: subir .2s both; }
.campana-caja h3 { margin: 4px 0 0; font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aviso { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--surface-2); font-size: 13px; line-height: 1.4; }
.aviso > div { flex: 1; min-width: 0; }
.aviso a { color: var(--ink); font-weight: 700; text-decoration: none; }
.aviso a:hover { color: var(--brand-text); }
.aviso small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.aviso-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--ink-2); }
.aviso-ico .ico { width: 16px; height: 16px; }
.aviso.bad .aviso-ico { background: var(--bad-soft); color: var(--bad); }
.aviso.warn .aviso-ico { background: var(--warn-soft); color: var(--warn); }
.aviso.info .aviso-ico { background: var(--sky-soft); color: var(--sky-text); }
.aviso.rec .aviso-ico { background: var(--gold-soft); color: var(--gold-text); }
.recordar { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 2px; }
.recordar input:not([type=checkbox]) { min-height: 36px; font-size: 13px; }
.recordar .acciones input { width: auto; flex: 1; }

/* ——— Documentos adjuntos ——— */
.adjuntos { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; }
.adjuntos li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.adjuntos li > div { flex: 1; min-width: 0; }
.adjuntos a { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.adjuntos small { display: block; color: var(--muted); font-size: 12px; }
.adj-ext { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 700 10.5px var(--mono); background: var(--surface-3); color: var(--ink-2); }
.adj-pdf { background: var(--bad-soft); color: var(--bad); }
.adj-img { background: var(--sky-soft); color: var(--sky-text); }
.adj-xls { background: var(--good-soft); color: var(--good); }
.adj-doc { background: var(--gold-soft); color: var(--gold-text); }
.subir-adj { display: flex; flex-direction: column; gap: 10px; }
.subir-adj .acciones input { flex: 1; min-width: 200px; width: auto; }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 18px 16px; border: 2px dashed var(--line-strong); border-radius: 16px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone .ico { width: 22px; height: 22px; color: var(--brand-text); }
.dropzone small { color: var(--muted); font-size: 12px; }
.dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone:hover, .dropzone.encima { border-color: var(--brand); background: var(--brand-soft); }
.dropzone.lista { border-style: solid; border-color: var(--brand); }
.dropzone:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ——— Para corregir en el Excel ——— */
.revisar { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.revisar > div { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface-2); }
.revisar h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 800; }
.revisar ul { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; }

/* ——— ERP: hoja de valorización imprimible y pestañas ——— */
.hoja-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.hoja-logo { display: block; height: 44px; width: auto; margin-bottom: 6px; }
[data-theme="dark"] .hoja-logo { filter: brightness(0) invert(.92); }
.hoja-cab b { display: block; font-size: 16px; }
.hoja-cab span { color: var(--muted); font-size: 12.5px; }
.hoja-titulo { text-align: right; font-weight: 800; letter-spacing: .06em; font-size: 14px; line-height: 1.5; }
.hoja-titulo span { font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.hoja-totales { display: flex; justify-content: flex-end; margin-top: 14px; }
.hoja-totales .lines { grid-template-columns: minmax(0, 380px); }
.hoja .lines { margin-bottom: 16px; }
/* Los dos PDF de cada liquidación, uno al lado del otro y sin separar la fila. */
.liq-papeles { display: inline-flex; gap: 4px; white-space: nowrap; }
tr.subtotal td { font-weight: 800; background: var(--surface-2); }
.firmas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.firmas span { border-top: 1px solid var(--ink); padding-top: 6px; text-align: center; font-size: 12.5px; color: var(--ink-2); }
.calor { display: block; padding: 2px 6px; border-radius: 6px; }
.barra-mini { display: block; height: 6px; border-radius: 999px; background: var(--surface-3); margin-top: 4px; overflow: hidden; }
.barra-mini b { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.nota-excel { font-size: 12px; color: var(--muted); }

/* ——— Cumplimiento de proveedores ——— */
.cump-plantas { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.cump-plantas .pill { font-size: 11.5px; padding: 2px 9px; }
.cump-destinos { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 14px; }
.cump-destinos > div { display: flex; align-items: center; gap: 10px; }
.cump-destinos > div > span:first-child { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cump-avance { min-width: 150px; }
.cump-avance .barra-mini { margin-top: 5px; }
.checklist td { vertical-align: middle; }
.checklist select, .checklist input:not([type=checkbox]) { width: 100%; min-width: 0; }
.checklist .req b { display: block; font-size: 13.5px; }
.checklist .req small { display: block; color: var(--muted); font-size: 12px; }
.checklist tr.est-falta td:first-child, .checklist tr.pl-rechazado td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.checklist tr.est-ok td:first-child, .checklist tr.pl-aprobado td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.checklist tr.est-vencido td:first-child, .checklist tr.pronto td:first-child, .checklist tr.pl-suspendido td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.checklist tr.est-en-revision td:first-child, .checklist tr.pl-en-evaluacion td:first-child { box-shadow: inset 3px 0 0 var(--sky); }
.adj-mini { display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 190px; }
.adj-mini > span { display: flex; align-items: center; gap: 4px; }
.adj-mini input[type=file] { font-size: 11.5px; }
.formato .f-izq td { text-align: left; }
.formato .f-estado { font-weight: 800; }
.formato .f-ok, .formato .f-pl-aprobado { color: #0F7A3E; }
.formato .f-falta, .formato .f-vencido, .formato .f-pl-rechazado { color: #B42318; }
.formato .f-observado, .formato .f-pl-suspendido { color: #9A5F07; }
.formato .f-en-revision, .formato .f-pl-en-evaluacion { color: #1D5BD6; }

/* ——— Matriz de riesgo (probabilidad × impacto) ——— */
.rgc-bajo { --rg: #139A4E; }
.rgc-medio { --rg: #C9962B; }
.rgc-alto { --rg: #E07B12; }
.rgc-critico { --rg: #D83A2C; }
.pill.rg { color: var(--ink); }
.pill.rg-bajo { background: color-mix(in srgb, #139A4E 24%, transparent); }
.pill.rg-medio { background: color-mix(in srgb, #C9962B 30%, transparent); }
.pill.rg-alto { background: color-mix(in srgb, #E07B12 32%, transparent); }
.pill.rg-critico { background: color-mix(in srgb, #D83A2C 32%, transparent); }
.rg-contenedor { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.rg-matriz { display: grid; grid-template-columns: 26px 96px repeat(5, minmax(0, 1fr)); gap: 6px; }
.rg-eje-y { grid-column: 1; grid-row: 1 / span 5; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.rg-fila-lab, .rg-col-lab { display: flex; flex-direction: column; justify-content: center; font-size: 12px; color: var(--ink-2); line-height: 1.25; }
.rg-fila-lab b, .rg-col-lab b { font-size: 14px; color: var(--ink); }
.rg-col-lab { text-align: center; align-items: center; }
.rg-col-lab small { color: var(--muted); font-size: 10.5px; }
.rg-eje-x { grid-column: 3 / -1; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.rg-celda { background: color-mix(in srgb, var(--rg) 26%, var(--surface)); border: 2px solid transparent; border-radius: 12px; min-height: 66px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 20px;
  font-variant-numeric: tabular-nums; transition: transform .15s, border-color .15s; }
.rg-celda small { font-size: 10.5px; font-weight: 600; color: var(--ink-2); }
.rg-celda.vacia { background: color-mix(in srgb, var(--rg) 10%, var(--surface)); color: var(--muted); }
a.rg-celda:hover { transform: translateY(-2px); border-color: var(--rg); }
.rg-celda.activa { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg) 40%, transparent); }
.rg-matriz.mini { grid-template-columns: repeat(5, 30px); gap: 3px; }
.rg-matriz.mini .rg-celda { min-height: 30px; border-radius: 6px; font-size: 14px; }
.rg-leyenda { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); }
.rg-leyenda > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.rg-leyenda i { width: 14px; height: 14px; border-radius: 4px; background: var(--rg); }
.rg-leyenda p { margin: 4px 0 0; }
.rg-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.rg-lado { display: flex; flex-direction: column; gap: 8px; }
.rg-puntaje { margin: 0; display: flex; align-items: center; gap: 8px; }
.rg-razones h3 { margin: 0 0 4px; font-size: 14px; }
.rg-razones ul { margin: 0 0 12px; padding-left: 18px; color: var(--ink-2); font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.rg-razones p { margin: 0 0 6px; }
.rg-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rg-form h3 { margin: 0 0 10px; font-size: 14px; }
.senales { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.senal { border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.senal:has(input[type=checkbox]:checked) { border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: var(--bad-soft); }
.senal label.check { align-items: flex-start; }
.senal small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
a.tot.rg-tot { text-decoration: none; color: inherit; }
.tot.rgt-critico { background: color-mix(in srgb, #D83A2C 16%, var(--surface)); }
.tot.rgt-alto { background: color-mix(in srgb, #E07B12 16%, var(--surface)); }
.tot.rgt-medio { background: color-mix(in srgb, #C9962B 16%, var(--surface)); }
.tot.rgt-bajo { background: color-mix(in srgb, #139A4E 14%, var(--surface)); }
@media (max-width: 1100px) { .rg-contenedor, .rg-ficha { grid-template-columns: minmax(0, 1fr); } }

/* ——— Puntos de la matriz y reportes de cumplimiento ——— */
.sel-mini { width: auto; min-width: 104px; padding: 4px 8px; font-size: 12.5px; border-radius: 8px; }
.num-mini, .num-med { display: inline-block; width: 74px; padding: 4px 8px; font-size: 13px; border-radius: 8px; text-align: right; }
.num-med { width: 120px; }
.puntos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.puntos-bloque { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface-2); }
.puntos-bloque h3 { margin: 0 0 8px; font-size: 13.5px; }
.puntos-bloque p { margin: 0 0 7px; font-size: 13px; color: var(--ink-2); }
.barra-puntos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.barra-puntos input { flex: 1 1 320px; }
.filtro-inline { margin: 0; }
.filtro-inline select { min-width: 160px; }
.sub-titulo { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); }
.formato-barra form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.formato-barra .rango input { width: 150px; }
.formato .f-sec { margin: 20px 0 8px; font-size: 12px; letter-spacing: .12em; color: #152A40; border-bottom: 2px solid #C9962B; padding-bottom: 4px; break-after: avoid; }
.formato .f-intro { margin: 8px 0 0; font-size: 11px; color: #4A5568; }
.formato .f-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.formato .f-kpi { border: 1px solid #D5DCE6; border-left: 4px solid #C9962B; border-radius: 6px; padding: 6px 9px; break-inside: avoid; }
.formato .f-kpi span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4A5568; }
.formato .f-kpi b { display: block; font-size: 15px; color: #152A40; }
.formato .f-kpi small { display: block; font-size: 9.5px; color: #4A5568; }
.formato .f-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 10px; }
.formato .f-nota-lado { font-size: 10.5px; color: #4A5568; }
.formato .f-nota-lado p { margin: 4px 0 0; }
.formato .f-riesgo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; break-inside: avoid; }
.formato .f-riesgo.ancho { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.formato .f-riesgo ul { margin: 2px 0 8px; padding-left: 16px; }
.formato .f-puntaje { margin: 6px 0 0; font-size: 11px; }
.formato .f-tabla th.r, .formato .f-tabla td.r { text-align: right; }
.formato .f-tabla + .f-tabla { margin-top: 10px; }
.formato .f-no-aplica { color: #8A94A6; }
.formato .f-nivel-bajo { color: #0F7A3E; }
.formato .f-nivel-medio { color: #8A6212; }
.formato .f-nivel-alto { color: #B85F0A; }
.formato .f-nivel-critico { color: #B42318; }
.formato .rg-celda { background: color-mix(in srgb, var(--rg) 28%, #FFFFFF); color: #10151C; min-height: 44px; font-size: 16px; }
.formato .rg-celda.vacia { background: color-mix(in srgb, var(--rg) 10%, #FFFFFF); color: #8A94A6; }
.formato .rg-fila-lab, .formato .rg-col-lab { color: #4A5568; font-size: 10.5px; }
.formato .rg-fila-lab b, .formato .rg-col-lab b { color: #10151C; font-size: 12px; }
.formato .rg-col-lab small { color: #8A94A6; font-size: 9px; }
.formato .rg-eje-y, .formato .rg-eje-x { color: #8A94A6; font-size: 9.5px; }
@media print {
  .formato .f-kpi, .formato .rg-celda, .formato .f-sec { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .formato .f-tabla tr { break-inside: avoid; }
}

/* ——— Debida diligencia ——— */
.dd-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dd-alertas li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13.5px; line-height: 1.45; }
.dd-alertas li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--sky); }
.dd-alertas li.bad { border-color: color-mix(in srgb, var(--loss) 40%, var(--line)); background: color-mix(in srgb, var(--loss) 7%, var(--surface)); }
.dd-alertas li.bad::before { background: var(--loss); }
.dd-alertas li.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.dd-alertas li.warn::before { background: var(--warn); }
tr.dd-sec td { background: var(--surface-3); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: 7px; padding-bottom: 7px; }
.dd-paso small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; margin-top: 2px; }
.dd-paso .dd-link { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; }
.dd-paso .pill { margin-top: 4px; }
.dd-decisiones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
.dd-decision, .dd-nivel { --c: var(--good); display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; font-size: 13px; color: var(--ink-2); }
.dd-decision b, .dd-nivel b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px; }
.dd-decision.warn { --c: var(--warn); }
.dd-decision.bad { --c: var(--loss); }
.dd-decision input, .dd-nivel input { margin-top: 3px; accent-color: var(--c); }
.dd-decision:has(input:checked), .dd-nivel:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--surface)); box-shadow: 0 0 0 1px var(--c) inset; }
.dd-niveles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dd-nivel { --c: var(--gold); }
.dd-nivel.sugerido { border-style: dashed; border-color: var(--gold); }
.dd-benef td input, .dd-benef td select { min-width: 0; width: 100%; }
.formato h4.f-sub { margin: 10px 0 4px; font-size: 10.5px; letter-spacing: .1em; color: #4A5568; }
.formato .f-alertas { margin: 4px 0 0; padding-left: 18px; font-size: 11px; line-height: 1.5; }
.formato .f-alertas li.bad { color: #B42318; }
.formato .f-alertas li.warn { color: #8A6212; }
@media (max-width: 900px) { .dd-niveles { grid-template-columns: minmax(0, 1fr); } }

/* ——— Hoja de distribución (como el Excel) ——— */
.hoja-panel { padding-bottom: 14px; }
.hoja-barra { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.hoja-formula { display: flex; align-items: stretch; flex: 1 1 460px; min-height: 34px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--surface); }
.hoja-formula b { padding: 7px 12px; background: var(--surface-3); font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 12px; white-space: nowrap; color: var(--ink-2); }
.hoja-formula span { padding: 7px 12px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja-estado { font-size: 12.5px; font-weight: 600; color: var(--muted); min-height: 18px; }
.hoja-estado.ok { color: var(--good); }
.hoja-estado.warn { color: var(--warn); }
.hoja-estado.bad { color: var(--loss); }
.hoja-scroll { overflow: auto; max-height: calc(100vh - 260px); min-height: 380px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
table.hoja { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; cursor: cell; user-select: none; }
table.hoja th, table.hoja td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 7px; height: 25px; white-space: nowrap; max-width: 230px; overflow: hidden; text-overflow: ellipsis; background: var(--surface); }
table.hoja thead th { position: sticky; top: 0; z-index: 3; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-align: left; }table.hoja th.r, table.hoja td.r { text-align: right; }
table.hoja .fz1, table.hoja .fz2, table.hoja .fzg { position: sticky; z-index: 2; }
table.hoja .fz1, table.hoja .fzg { left: 0; }table.hoja .fz2 { font-family: 'IBM Plex Mono', Consolas, monospace; }
table.hoja thead .fz1, table.hoja thead .fz2, table.hoja thead .fzg { z-index: 5; }table.hoja td.fz1 a { font-family: 'IBM Plex Mono', Consolas, monospace; font-weight: 700; text-decoration: none; }table.hoja td.bal { font-style: italic; }
table.hoja td.nc { color: var(--loss); font-weight: 700; }table.hoja td.editando { padding: 0; overflow: visible; }
table.hoja td.editando input:not([type=checkbox]) { width: 100%; min-width: 150px; min-height: 0; padding: 0 6px; border: 0; border-radius: 0; background: var(--surface); }
table.hoja td.guardando { opacity: .5; }
table.hoja td.error { box-shadow: inset 0 0 0 2px var(--loss); }
.hoja-leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.hoja-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.hoja-leyenda .lg { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-strong); }
.hoja-leyenda .lg-pend { background: color-mix(in srgb, var(--warn) 22%, var(--surface)); }
.hoja-leyenda .lg-bal { background: var(--surface-3); }
.hoja-leyenda .lg-ed { background: #1F3B63; box-shadow: inset 0 -3px 0 #C9962B; }
.hoja-leyenda .hoja-teclas { flex-basis: 100%; color: var(--muted); }
.hoja-leyenda .lg-g1 { background: color-mix(in srgb, #3B82F6 28%, var(--surface)); }
.hoja-leyenda .lg-g2 { background: color-mix(in srgb, #8B5CF6 28%, var(--surface)); }
table.hoja tbody tr.sep td { font-weight: 800; }
table.hoja tbody tr.sep td span { position: sticky; left: 12px; }table.hoja tbody tr.bloq td.fz1 a::before { content: "🔒"; margin-right: 4px; font-size: 10px; }
table.hoja td.sel { background: color-mix(in srgb, #1F7A4C 17%, var(--surface)) !important; }

/* ——— Guías y códigos BJ: espacio de trabajo ——— */
.dx { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.dx-top { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.dx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 13px; background: var(--surface-3); }
.dx-seg a { padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.dx-seg a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 75%, transparent); }
.dx-seg a.activo { background: #152A40; color: #F3D27A; box-shadow: 0 6px 14px -8px rgba(21, 42, 64, .8); }
.dx-filtros { display: flex; flex: 1 1 520px; gap: 8px; align-items: center; margin: 0; }
.dx-filtros select { width: auto; min-height: 36px; padding: 5px 10px; font-size: 13px; border-radius: 11px; }
.dx-buscar { position: relative; display: flex; flex: 1 1 240px; align-items: center; margin: 0; }
.dx-buscar .ico { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.dx .dx-buscar input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 36px; padding: 5px 92px 5px 34px; font-size: 13px; border-radius: 11px; }
.dx-buscar b { position: absolute; right: 11px; font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.dx-herr { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.dx-herr .btn[aria-pressed="true"] { background: color-mix(in srgb, #152A40 10%, var(--surface)); border-color: var(--line-strong); color: var(--ink); }
.dx-pop { position: relative; }
.dx-pop > summary { list-style: none; }
.dx-pop > summary::-webkit-details-marker { display: none; }
.dx-pop-caja { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: grid; gap: 7px; min-width: 240px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-up); font-size: 13px; }
.dx-pop-caja label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.dx-pop-caja .gc { width: 12px; height: 12px; border-radius: 4px; background: var(--g); }
.dx-pop-caja p { margin: 0; line-height: 1.5; }
.dx-ayuda .dx-pop-caja { width: min(380px, 86vw); font-size: 12.5px; color: var(--ink-2); }
.dx-ayuda kbd { padding: 0 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-3); font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 11px; }
.dx-leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.dx-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.dx-leyenda .lg { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--line-strong); }
.dx-chips { flex-wrap: wrap; align-items: center; }
.dx-chips button { --c: #64748B; font: inherit; }
.dx-chips button::before { content: ""; border-radius: 50%; background: var(--c); }
.dx-chips button b { border-radius: 999px; font-variant-numeric: tabular-nums; }
.dx-chips button:hover { color: var(--ink); }.dx-sig { margin-left: auto; font-weight: 600; color: var(--muted); }
.dx-sig b { margin-left: 4px; padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--ink); }
.dx-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.dx-cuerpo.sin-panel { grid-template-columns: minmax(0, 1fr); }
.dx-cuerpo.sin-panel .dx-panel { display: none; }
.dx-formula { display: flex; align-items: center; margin-bottom: 8px; overflow: hidden; border: 1px solid var(--line); }
.dx-formula b { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 11.5px; white-space: nowrap; }
.dx-formula span { flex: 1; min-width: 0; padding: 6px 10px; overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.dx-formula em { max-width: 55%; padding: 0 12px; overflow: hidden; font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.dx .hoja-scroll { max-height: calc(100vh - 300px); }table.hoja .fz1 { min-width: 128px; max-width: 128px; }table.hoja .ch { display: inline-block; max-width: 100%; overflow: hidden; border-radius: 999px; font-weight: 700; vertical-align: middle; text-overflow: ellipsis; }
.ch-az { background: color-mix(in srgb, #3B82F6 16%, var(--surface)); color: color-mix(in srgb, #1D4ED8 80%, var(--ink)); }
.ch-am { background: color-mix(in srgb, #F59E0B 20%, var(--surface)); color: color-mix(in srgb, #B45309 85%, var(--ink)); }
.ch-vi { background: color-mix(in srgb, #8B5CF6 17%, var(--surface)); color: color-mix(in srgb, #6D28D9 80%, var(--ink)); }
.ch-gr { background: var(--surface-3); color: var(--ink-2); }
.ch-ve { background: color-mix(in srgb, #22C55E 18%, var(--surface)); color: color-mix(in srgb, #15803D 85%, var(--ink)); }
.ch-ro { background: color-mix(in srgb, #EF4444 16%, var(--surface)); color: color-mix(in srgb, #B91C1C 85%, var(--ink)); }
.ch-te { background: color-mix(in srgb, #14B8A6 17%, var(--surface)); color: color-mix(in srgb, #0F766E 85%, var(--ink)); }
.ch-na { background: color-mix(in srgb, #1F3B63 14%, var(--surface)); color: color-mix(in srgb, #1F3B63 80%, var(--ink)); }
@keyframes dx-ok { from { background-color: color-mix(in srgb, #22C55E 40%, var(--surface)); } }
table.hoja td.flash { animation: dx-ok 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) { table.hoja td.flash { animation: none; } .dx-chips button:hover { transform: none; } }
/* El recorrido del lote */
.dx-panel { position: sticky; top: 10px; max-height: calc(100vh - 240px); overflow: auto; padding: 14px; border: 1px solid var(--line); font-size: 12.5px; }
.dxp-vacio { margin: 0; color: var(--muted); line-height: 1.5; }
.dxp-cab { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.dxp-lote { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 13px; font-weight: 700; text-decoration: none; }
.dxp-bj { margin-top: 2px; color: var(--ink); font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.dxp-marcas { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dxp-prov { display: grid; gap: 2px; margin: 10px 0 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dxp-prov b { font-size: 13.5px; }
.dxp-prov span { color: var(--muted); }
.dxp-guia { margin: 0 0 12px; padding: 9px 11px; border: 1px solid color-mix(in srgb, #3B82F6 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, #3B82F6 7%, var(--surface)); }
.dxp-guia ul { margin: 6px 0; padding: 0; list-style: none; }
.dxp-guia li { display: grid; gap: 8px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.dxp-guia li span:last-child { text-align: right; }
.dxp-guia li.yo { font-weight: 800; }
.dxp-guia > span { color: var(--muted); font-weight: 600; }
.dxp-pasos { margin: 0; padding: 0; list-style: none; }
.dxp-pasos li { position: relative; padding: 0 0 12px 24px; }
.dxp-pasos li::before { content: ""; position: absolute; top: 15px; bottom: -1px; left: 6px; width: 2px; background: var(--line-strong); }
.dxp-pasos li:last-child::before { display: none; }
.dxp-pasos li i { position: absolute; top: 2px; left: 0; width: 14px; height: 14px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
.dxp-pasos li.hecho i { border-color: var(--good); background: var(--good); box-shadow: inset 0 0 0 2px var(--surface); }
.dxp-pasos li.hecho::before { background: color-mix(in srgb, var(--good) 45%, var(--line)); }
.dxp-pasos b { display: block; font-size: 12.5px; }
.dxp-pasos span { color: var(--muted); }
.dxp-pasos li.hecho span { color: var(--ink-2); }
.dxp-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@media (max-width: 1180px) {
  .dx-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .dx-panel { position: static; max-height: none; }
  .dx-herr { margin-left: 0; }
}

/* ——— Reportes y presentaciones ——— */
.rep-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow);
  background: radial-gradient(70% 120% at 100% 0%, rgba(214, 170, 70, .22), transparent 60%), linear-gradient(160deg, #070B0B 0%, #11181A 70%, #1A1810 100%); color: #EFE8D6; }
.rep-hero img { width: 92px; height: auto; }
.rep-hero h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 26px; color: #FFFFFF; text-wrap: balance; }
.rep-hero p { margin: 6px 0 14px; color: #C9C0A8; max-width: 72ch; }
.rep-hero .acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rep-hero select { min-width: 150px; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rep-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.rep-card h3 { margin: 0; font-size: 14.5px; }
.rep-card p { margin: 0; color: var(--ink-2); font-size: 13px; flex: 1; }
.rep-card .btn { align-self: flex-start; }

/* Diapositivas 16:9: el tamaño de la letra sigue al ancho de la diapositiva (cqw), igual en pantalla y en el PDF */
.slides { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.slide { container-type: inline-size; position: relative; width: 100%; max-width: 1180px; aspect-ratio: 16 / 9; background: #FFFFFF; color: #10151C;
  border-radius: 10px; box-shadow: var(--shadow-up); overflow: hidden; }
.slide::before { content: ""; position: absolute; inset: 0 0 auto; height: .45cqw; background: #C9962B; }
.sl-in { position: absolute; inset: 0; padding: 2.6cqw 4.5cqw 1.6cqw; display: flex; flex-direction: column; }
.sl-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 3cqw; padding-bottom: 1.2cqw; border-bottom: 1px solid #D5DCE6; }
.sl-cab h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 3.2cqw; color: #152A40; line-height: 1.15; }
.sl-cab p { margin: .4cqw 0 0; font-size: 1.35cqw; color: #4A5568; }
.sl-cab img { height: 3.3cqw; width: auto; }
.sl-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.8cqw; margin-top: 1.8cqw; }
.sl-cuerpo h3 { margin: 0 0 .7cqw; font-size: 1.4cqw; color: #152A40; }
.sl-kpis { display: grid; gap: 1.4cqw; }
.sl-kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-kpis.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sl-kpi { --t: #C9962B; background: #F4F6FA; border-radius: .9cqw; padding: 1.1cqw 1.4cqw 1.1cqw 1.8cqw; position: relative; display: flex; flex-direction: column; gap: .2cqw; }
.sl-kpi::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: .5cqw; border-radius: 0 .3cqw .3cqw 0; background: var(--t); }
.sl-kpi[data-tono="verde"] { --t: #139A4E; }
.sl-kpi[data-tono="azul"] { --t: #2B4E80; }
.sl-kpi[data-tono="rojo"] { --t: #D83A2C; }
.sl-kpi span { font-size: .95cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4A5568; }
.sl-kpi b { font-size: 2.3cqw; color: #152A40; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sl-kpi small { font-size: 1cqw; color: #4A5568; }
.sl-tabla { width: 100%; border-collapse: collapse; font-size: 1.15cqw; font-variant-numeric: tabular-nums; }
.sl-tabla th { background: #152A40; color: #FFFFFF; text-align: left; font-weight: 700; padding: .55cqw .8cqw; }
.sl-tabla td { padding: .5cqw .8cqw; border-bottom: 1px solid #D5DCE6; }
.sl-tabla tbody tr:nth-child(even) td { background: #F4F6FA; }
.sl-tabla .r { text-align: right; }
.sl-tabla tr.tot td { font-weight: 800; background: #F3EBD6; }
.sl-dos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.4cqw; align-items: start; }
.sl-dos.inv { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.sl-dos.ancho { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.sl-nota p { font-size: 1.15cqw; color: #4A5568; margin: 0 0 .8cqw; }
.sl-vacio { font-size: 1.2cqw; color: #4A5568; margin: 0; }
.sl-puntos { margin: 0; padding-left: 1.3em; font-size: 1.3cqw; line-height: 1.5; display: flex; flex-direction: column; gap: .5cqw; }
.sl-puntos li::marker { color: #C9962B; }
.sl-puntos.grande { font-size: 1.6cqw; gap: .9cqw; }
.sl-pie { display: flex; justify-content: space-between; font-size: .85cqw; color: #8A94A6; padding-top: .8cqw; }
.sl-grafico .chart { width: 100%; height: auto; }
.slide .c-tick, .slide .c-lab { fill: #4A5568; }
.slide .c-grid { stroke: #E2E8F0; }
.slide .c-axis { stroke: #9AA8BC; }
.slide .c-bar { fill: #2B4E80; }
.slide .c-bar.neg { fill: #D83A2C; }
.slide.portada { background: radial-gradient(70% 90% at 92% 0%, rgba(214, 170, 70, .24), transparent 60%), #070B0B; color: #EFE8D6; }
.portada .sl-in { flex-direction: row; align-items: center; gap: 6cqw; padding: 5cqw 7cqw; }
.portada img { width: 27cqw; height: auto; flex: none; }
.portada .sl-kicker { font-size: 1.25cqw; letter-spacing: .3em; color: #C9962B; font-weight: 700; }
.portada h2 { font-family: Georgia, "Times New Roman", serif; font-size: 5.4cqw; margin: .6cqw 0 0; color: #FFFFFF; font-weight: 400; line-height: 1.1; }
.portada .sl-linea { width: 40cqw; height: 2px; background: linear-gradient(90deg, #C9962B, transparent); margin: 1.6cqw 0; }
.portada p { font-size: 1.6cqw; margin: 0 0 .4cqw; color: #EFE8D6; }
.portada .sl-tenue { font-size: 1.2cqw; color: #A89F88; }
.portada .sl-fecha { font-size: 1cqw; color: #A89F88; margin-top: 3cqw; }
@media print {
  .slides { display: block; }
  .slide { width: 13.333in; height: 7.5in; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; break-after: page; page-break-after: always;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
}

/* ——— Aprobación de valorizaciones ——— */
.aprob-flujo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aprob-paso { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); }
.aprob-paso span { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.aprob-paso b { font-size: 14px; }
.aprob-paso small { color: var(--muted); font-size: 12px; min-height: 1em; }
.aprob-paso.hecho { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: var(--good-soft); }
.aprob-paso.observado { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-soft); }
.aprob-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.aprob-observar { display: flex; gap: 8px; flex: 1 1 360px; }
.aprob-observar input { flex: 1; }
/* El motivo que escribe el administrador para aprobar lo que él mismo hizo: se ve distinto a
   propósito, porque es la excepción al control de dos personas y queda a su nombre. */
.campo-propio { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; margin: 0 0 10px;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--warn); background: var(--warn-soft); }
.campo-propio b { font-size: 13px; color: var(--warn); }
.campo-propio input { width: 100%; }
.campo-propio small { color: var(--ink-2); font-size: 11.5px; }
.campo-propio-off { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); font-size: 12.5px; }
.historial-val { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.historial-val span { display: block; color: var(--muted); font-size: 12.5px; }
fieldset.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ——— Formatos VAL interna y VAL Beijing: siempre en papel blanco, como la hoja del Excel ——— */
.formato-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.formato-barra .f-toggle { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; cursor: pointer; }
.formato.sin-rc .f-rc { display: none; }
/* En pantalla la hoja conserva su ancho y se desplaza; al imprimir se ajusta a la página */
.formato-scroll { overflow-x: auto; padding-bottom: 6px; }
.formato-scroll > .formato { min-width: 1120px; }
.formato .f-tabla td.mono { white-space: nowrap; }
.formato { position: relative; overflow: hidden; background: #FFFFFF; color: #10151C; max-width: 1240px; margin: 0 auto; padding: 26px 30px 22px; border-radius: 6px;
  box-shadow: var(--shadow); font-size: 11.5px; line-height: 1.4; }
.formato .f-cab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding-bottom: 12px; border-bottom: 3px double #152A40; }
.formato .f-logo { height: 52px; width: auto; }
.formato .f-titulo { text-align: center; }
.formato .f-titulo h2 { margin: 0; font-size: 16.5px; letter-spacing: .2em; font-weight: 800; color: #152A40; text-wrap: balance; }
.formato .f-zona { display: block; margin-top: 5px; letter-spacing: .16em; font-weight: 700; color: #8A6212; font-size: 10px; }
.formato .f-nro { text-align: center; border: 2px solid #152A40; border-radius: 8px; padding: 6px 14px; }
.formato .f-nro span { display: block; font-size: 10px; letter-spacing: .12em; font-weight: 700; color: #4A5568; }
.formato .f-nro b { font-size: 18px; color: #152A40; }
/* La tercera columna cae justo encima de la tabla de totales: las tres franjas de la hoja
   —datos, totales y firmas— cortan por la misma línea. */
.formato .f-datos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 360px; gap: 5px 28px; margin: 16px 0 14px; }
.formato .f-datos div { display: grid; grid-template-columns: 130px 1fr; gap: 6px; border-bottom: 1px dotted #B8C2D0; padding: 3px 0; }
.formato dt { font-weight: 700; color: #4A5568; font-size: 10.5px; letter-spacing: .04em; }
.formato dd { margin: 0; font-weight: 700; }
.formato .f-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.formato .f-tabla th, .formato .f-tabla td { border: 1px solid #9AA8BC; padding: 4px 4px; text-align: center; }
.formato .f-tabla thead th { background: #152A40; color: #FFFFFF; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.formato .f-tabla td small { display: block; color: #4A5568; font-size: 9.5px; }
/* La VAL interna es de UN lote: le sobra sitio, así que las celdas respiran en vertical y la
   letra baja de tamaño. «Se ve todo amontonado y muy grande», y era verdad. La VAL Beijing no
   entra aquí (.f-beijing lleva las suyas, más apretadas): mete varios lotes en la misma hoja. */
.formato:not(.f-beijing) .f-tabla th, .formato:not(.f-beijing) .f-tabla td { padding: 6px 5px; }
.formato:not(.f-beijing) .f-tabla thead th { font-size: 9px; line-height: 1.3; }
.formato:not(.f-beijing) .f-tabla td { font-size: 11.5px; }
.formato .f-tabla tfoot th { text-align: right; background: #F3EBD6; }
.formato .f-num { font-weight: 800; }
/* Aire antes de las firmas: es otro bloque del papel, no la continuación de la tabla. */
.formato .f-pie { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; margin-top: 24px; align-items: start; }
.formato h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .11em; color: #152A40; }
.formato .f-banco dl div { display: grid; grid-template-columns: 130px 1fr; gap: 6px; padding: 2px 0; border-bottom: 1px dotted #B8C2D0; }
.formato .f-totales { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.formato .f-totales th { text-align: left; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid #D5DCE6; }
.formato .f-totales td { text-align: right; font-weight: 700; padding: 4px 8px; border-bottom: 1px solid #D5DCE6; }
.formato .f-totales .f-sub th, .formato .f-totales .f-sub td { background: #F4F6FA; }
.formato .f-totales .f-neto th, .formato .f-totales .f-neto td { background: #152A40; color: #FFFFFF; font-weight: 800; font-size: 13px; }
.formato .f-son { margin: 12px 0 0; font-weight: 800; letter-spacing: .02em; border: 1px solid #9AA8BC; padding: 6px 10px; background: #FBF6EA; }
.formato .f-firmas { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; margin-top: 42px; }
.formato .f-firmas > div { display: flex; flex-direction: column; gap: 4px; }
.formato .f-linea { display: block; border-top: 1.5px solid #10151C; margin-bottom: 4px; }
.formato .f-firmas dl div { display: grid; grid-template-columns: 90px 1fr; gap: 6px; }
.formato .f-nota { margin-top: 18px; font-size: 10.5px; color: #333C48; }
.formato .f-nota ul { margin: 4px 0 0; padding-left: 16px; }
.formato .f-aprob { margin: 14px 0 0; padding-top: 8px; border-top: 1px solid #D5DCE6; font-size: 10.5px; color: #4A5568; }
/* Sello verificable al pie de la VAL Beijing: el código con el que el proveedor comprueba el documento */
.formato .f-verif { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; margin-top: 12px; padding: 7px 10px;
  border: 1px solid #C8D2DF; border-left: 3px solid var(--gold, #B8860B); border-radius: 4px; background: #FBFCFD; }
/* El QR va en milímetros, no en píxeles: lo que importa es cuánto mide IMPRESO. A 22 mm cada
   cuadrito queda en medio milímetro, que es lo que necesita la cámara de un teléfono; más chico
   se lee en pantalla y no en el papel. Se escala con la hoja, que se achica cuando lleva muchos lotes. */
.formato .f-verif-qr { width: 22mm; height: 22mm; flex: none; }
.formato .f-verif-qr svg { display: block; width: 100%; height: 100%; }
.formato .f-verif-txt { font-size: 9px; line-height: 1.45; color: #4A5568; }
.formato .f-verif-txt b { display: block; font-size: 9px; letter-spacing: .09em; color: #1F3B63; }
.formato .f-verif-txt span b { display: inline; letter-spacing: 0; font-size: inherit; color: inherit; }
.formato .f-verif-cod, .formato .f-verif-huella { text-align: right; white-space: nowrap; }
.formato .f-verif-cod span, .formato .f-verif-huella span { display: block; font-size: 7.5px; letter-spacing: .08em; color: #7C8A99; }
.formato .f-verif-cod b { font: 700 13px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .06em; color: #10151C; }
.formato .f-verif-huella b { font: 400 9px/1.2 ui-monospace, Consolas, monospace; color: #7C8A99; }

.formato .f-sello { position: absolute; inset: 42% -10% auto; transform: rotate(-12deg); text-align: center; font-size: 64px; font-weight: 800; letter-spacing: .12em;
  color: rgba(216, 58, 44, .12); border: 6px solid rgba(216, 58, 44, .12); padding: 6px 0; pointer-events: none; }
@media print {
  .formato { box-shadow: none; max-width: none; padding: 0; border-radius: 0; }
  .formato-scroll { overflow: visible; padding: 0; }
  .formato-scroll > .formato { min-width: 0; }
  .formato .f-tabla thead th, .formato .f-totales .f-neto th, .formato .f-totales .f-neto td, .formato .f-son, .formato .f-tabla tfoot th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Un documento impreso es el documento y nada más. Todo lo que es el ERP —menú, cabeceras,
   pestañas, la barra de pasos, la barra de accesos del celular— se va. Lo de antes solo quitaba
   el menú de escritorio, y por eso quien descargaba un PDF desde el celular se lo llevaba con
   la barra de módulos pegada abajo. */
@media print {
  .rail, .barra-sup, .topbar, .no-print, .toasts, .banner,
  .m-top, .m-tabs, .m-velo, .area-nav, .tabs, .sub-tabs, .miga, .flujo,
  .barra-puntos, .volver-btn, .entorno-aviso, .notif-pila, .ind-caja, .tk-acciones { display: none !important; }
  .app { display: block; }
  main { padding: 0; margin: 0; }
  main > * { animation: none !important; }
  body { background: #fff; margin: 0; padding: 0; }
  .panel { box-shadow: none; border: 0; padding: 0; }
  .table-scroll { overflow: visible; max-height: none; margin: 0; padding: 0; }   /* entera: en papel no hay scroll */
}

@media (max-width: 1360px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .totales, .totales.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .grid-2, .grid-2.even, .cierre-grid, .hero { grid-template-columns: minmax(0, 1fr); }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resultado { position: static; }
  .login { grid-template-columns: minmax(0, 1fr); }
  /* El panel del cerro no se oculta: más abajo se convierte en una banda con el logo */
}
/* ═══════════ Celular (m-) ═══════════
   Barra de arriba con menú y buscar, menú lateral que se desliza, accesos abajo como una app,
   todo a una columna y las tablas como fichas «título: valor». En escritorio nada de esto se ve. */
.m-top, .m-tabs, .m-velo { display: none; }
@media (max-width: 820px) {
  /* Las tablas anchas se leen como fichas «título: valor», también en la tableta */
  /* Tablas como fichas: cada fila una tarjeta con «título: valor» (las hojas de trabajo con muchos campos siguen como tabla deslizable) */
  table.data.m-fichas:not(.m-tabla) { min-width: 0 !important; width: 100%; border-collapse: separate; border-spacing: 0; }
  table.data.m-fichas:not(.m-tabla) thead { display: none; }
  table.data.m-fichas:not(.m-tabla) tbody, table.data.m-fichas:not(.m-tabla) tfoot { display: flex; flex-direction: column; gap: 10px; }
  table.data.m-fichas:not(.m-tabla) tr { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
  table.data.m-fichas:not(.m-tabla) tfoot tr { background: var(--surface-2); }
  table.data.m-fichas:not(.m-tabla) td { display: block; overflow: hidden; padding: 6px 0 !important; border: 0 !important; text-align: right !important;
    white-space: normal !important; min-width: 0; overflow-wrap: anywhere; }
  table.data.m-fichas:not(.m-tabla) td + td { border-top: 1px dashed var(--line) !important; }
  table.data.m-fichas:not(.m-tabla) td::before { content: attr(data-l); float: left; max-width: 45%; margin-right: 12px; padding-top: 1px; text-align: left; font-size: 11.5px; font-weight: 700; color: var(--muted); }
  table.data.m-fichas:not(.m-tabla) td .cell-sub { display: block; }
  table.data.m-fichas:not(.m-tabla) td:first-child { font-size: 15px; font-weight: 700; text-align: left !important; }
  table.data.m-fichas:not(.m-tabla) td:first-child::before { display: none; }
  table.data.m-fichas:not(.m-tabla) td:empty, table.data.m-fichas:not(.m-tabla) td[data-l=""]::before { display: none; }
  .table-scroll:has(> table.data.m-fichas:not(.m-tabla)) { overflow: visible; max-height: none; margin: 0; padding: 0; }

  html, body { overflow-x: hidden; }
  body { -webkit-tap-highlight-color: transparent; }
  .app { display: block; }
  .entorno-aviso { font-size: 10.5px; padding: 4px 10px; }

  .m-top { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    background: linear-gradient(180deg, var(--side-1), var(--side-2)); color: #fff; box-shadow: 0 4px 18px -8px rgba(0, 0, 0, .5); }
  .m-logo { flex: 1; display: flex; justify-content: center; }
  .m-logo img { height: 26px; width: auto; }
  .m-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
  .m-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .m-btn:active { background: rgba(255, 255, 255, .18); }

  /* Menú lateral deslizable */
  .rail { position: fixed; z-index: 90; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); height: 100%; padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-104%); transition: transform .26s var(--ease-out); box-shadow: 12px 0 40px -12px rgba(0, 0, 0, .55); overscroll-behavior: contain; }
  body.m-abierto .rail { transform: none; }
  body.m-abierto { overflow: hidden; }
  .m-velo { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(6, 12, 20, .5); backdrop-filter: blur(2px); }
  .m-velo[hidden] { display: none; }
  .nav a { padding: 12px 12px; font-size: 15px; }
  .nav a:hover { transform: none; }

  /* Accesos de abajo */
  .m-tabs { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, .35); }
  .m-tabs a, .m-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; padding: 5px 2px; border: 0; border-radius: 12px; background: none;
    color: var(--ink-2); font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
  .m-tabs a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
  .m-ico { position: relative; display: grid; place-items: center; }
  .m-ico .ico { width: 22px; height: 22px; }
  .m-ico i { position: absolute; top: -6px; left: 14px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-style: normal; font-size: 10px; line-height: 16px; text-align: center; }

  main { padding: 12px 12px calc(92px + env(safe-area-inset-bottom)); gap: 14px; }
  /* Aquí NO se queda pegada: son dos renglones (el buscador se pone a lo ancho) y se comería una
     franja de una pantalla corta que ya tiene fija la botonera de abajo. */
  .barra-sup { gap: 8px; position: static; margin: 0; padding: 0; border-bottom: 0; box-shadow: none; }
  .buscador { flex: 1 1 100%; max-width: none; order: -1; }
  .bz-kbd, .hoy, .tema-toggle span { display: none; }
  .tema-toggle { padding: 0 12px; }
  .banner { flex-wrap: wrap; font-size: 13px; padding: 10px 12px; }
  .banner .btn { margin-left: 0; }
  .topbar h1 { font-size: 23px; }
  .topbar p { font-size: 13.5px; }
  .tools { width: 100%; }
  .tools .btn { flex: 1 1 auto; justify-content: center; }
  .panel { padding: 16px 14px; border-radius: 16px; }
  .panel-head { flex-wrap: wrap; gap: 4px 10px; }
  .toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; }

  /* Dedos: botones y campos más cómodos (16 px evita que el iPhone haga zoom) */
  .btn { min-height: 44px; }
  .btn.btn-small { min-height: 38px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }

  /* Todo a una columna */
  .kpis, .totales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .kpi { padding: 12px 11px; column-gap: 9px; min-width: 0; }
  .kpis .kpi-value { font-size: clamp(17px, 5.4vw, 24px); }
  .fields, .fields.three, .fields.two { grid-template-columns: minmax(0, 1fr); }
  .fields .span2, .fields .span3 { grid-column: auto; }
  .hero { padding: 22px 18px; border-radius: 20px; }
  .filters { flex-wrap: wrap; }
  .filters > * { flex: 1 1 140px; }
}
@media (max-width: 640px) {
  /* Cualquier cuadrícula de la página pasa a una columna (salvo las fichas chicas que se leen mejor de a dos) */
  main :where(div, section, dl, ul, form, article, nav, header, footer, fieldset, label) { grid-template-columns: minmax(0, 1fr) !important; }
  main :where(div, section, dl, ul, form, article, nav, header, footer, fieldset, label) > * { grid-column: auto !important; }
  main .kpis, main .totales, main .vc-contra-cifras, main .vl-dif-kpis, main .m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .formato-scroll > .formato { min-width: 0; }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ——— Trazabilidad: todo enlazado ——— */
[data-t] { --tc: #1F3B63; }
[data-t="lote"] { --tc: #1F3B63; }
[data-t="bj"] { --tc: #A16207; }
[data-t="codigo"] { --tc: #1D4ED8; }
[data-t="guia"] { --tc: #0F766E; }
[data-t="envio"] { --tc: #C2410C; }
[data-t="fventa"] { --tc: #BE185D; }
[data-t="fcompra"] { --tc: #A16207; }
[data-t="liquidacion"] { --tc: #6D28D9; }
[data-t="proveedor"] { --tc: #15803D; }
[data-t="placa"] { --tc: #475569; }
[data-t] { --tcx: var(--tc); }
[data-theme="dark"] [data-t] { --tcx: color-mix(in srgb, var(--tc) 50%, #fff); }

/* Buscador de arriba con sugerencias */
.buscador { position: relative; }
.bz-kbd { font: 600 10.5px var(--mono); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.buscador:focus-within .bz-kbd { display: none; }
.bz-lista { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 340px; max-height: min(64vh, 520px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-up); z-index: 60; }
.bz-g { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.bz-i { display: grid; grid-template-columns: 8px auto 1fr; grid-template-areas: "p t e" "p s s"; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.bz-i::before { content: ""; grid-area: p; width: 8px; height: 8px; border-radius: 50%; background: var(--tcx); align-self: start; margin-top: 6px; }
.bz-i b { grid-area: t; font: 600 13.5px var(--mono); }
.bz-i small { grid-area: s; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-i[data-t="proveedor"] b { font-family: var(--sans); font-weight: 700; }
.bz-ex { grid-area: e; justify-self: start; font-size: 10.5px; font-weight: 800; color: var(--good); background: var(--good-soft); border-radius: 999px; padding: 1px 7px; }
.bz-i:hover, .bz-i.act { background: var(--brand-soft); }
.bz-nada { padding: 12px; font-size: 13px; color: var(--ink-2); }
.bz-pie { font-size: 11px; color: var(--muted); padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 6px; }

/* Página de búsqueda */
.tz-buscar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: var(--shadow); max-width: 720px; margin-bottom: 22px; color: var(--muted); }
.tz-buscar input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 44px; font-size: 15px; padding: 0 !important; }
.tz-buscar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.tz-buscar .btn { border-radius: 999px; }
.tz-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.tz-res-g h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 10px; }
.tz-res-g h2 small { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.tz-res-g ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tz-res-g li a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.tz-res-g li a:hover { background: var(--surface-2); }
.tz-res-g li small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.tz-card-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--tcx); background: color-mix(in srgb, var(--tc) 13%, transparent); }
.tz-card-ico .ico { width: 18px; height: 18px; }
.tz-nada-cab { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.tz-nada-cab h2 { font-size: 19px; }
.tz-nada-cab p { margin: 6px 0 0; color: var(--ink-2); max-width: 70ch; }
.tz-nada-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--surface-3); color: var(--ink-2); }
.tz-nada-ico .ico { width: 24px; height: 24px; }
.tz-nada .notice { font-weight: 500; line-height: 1.5; flex-wrap: wrap; }
.tz-nada .notice:not(.warn):not(.info) { background: var(--good-soft); color: var(--good); }
.tz-nada .notice span { flex: 1; min-width: 240px; }
.tz-nada-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 10px; }
.tz-sug { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tz-sug a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.tz-sug a:hover { border-color: var(--brand); transform: translateY(-1px); }
.tz-sug small { font-size: 11px; color: var(--muted); font-weight: 700; }
.tz-sug em { font-style: normal; font-size: 12px; color: var(--ink-2); }
.tz-excels { margin-top: 18px; }
.tz-excels summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }

/* Recorrido de un lote */
.tz-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px 8px; margin-bottom: 26px; }
.tz-grupo { padding-bottom: 22px; }
.tz-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px 32px; flex-wrap: wrap; margin-bottom: 6px; }
.tz-id { flex: 1 1 380px; min-width: 0; }
.tz-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.tz-eyebrow .ico { width: 15px; height: 15px; }
.tz-relato { font-size: 17px; line-height: 1.55; margin: 8px 0 0; max-width: 70ch; color: var(--ink); text-wrap: pretty; }
.tz-plata { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.tz-plata > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; min-width: 120px; }
.tz-plata dt { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tz-plata dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.tz-plata .pos dd { color: var(--good); }
.tz-plata .neg dd { color: var(--loss); }
.tz-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 22px; margin: 14px 0 0; }
.tz-datos dt { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tz-datos dd { margin: 3px 0 0; font-weight: 600; font-size: 14px; }
.tz-carril { border-top: 1px solid var(--line); padding: 16px 0 12px; margin-top: 14px; }
.tz-carril + .tz-carril { margin-top: 0; }
.tz-carril-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 14px; font-size: 13px; }
.tz-carril-cab > b { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-text); }
.tz-carril + .tz-carril .tz-carril-cab > b { background: var(--sky-soft); color: var(--sky-text); }
.tz-carril-cab > span:first-of-type { color: var(--muted); }
.tz-avance { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tz-avance i { width: 90px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--good) var(--p), var(--surface-3) var(--p)); }
.tz-sigue { margin-left: auto; color: var(--ink-2); }
.tz-sigue b { color: var(--warn); }
.tz-sigue b.ok { color: var(--good); }
.tz-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tz-paso { position: relative; min-width: 0; }
.tz-paso:not(:last-child)::before { content: ""; position: absolute; top: 15px; left: calc(50% + 17px); right: calc(-50% + 17px); height: 2px; border-radius: 2px; background: var(--line-strong); }
.tz-paso.s-hecho:not(:last-child)::before { background: var(--good); }
.tz-nodo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 0 6px 8px; border-radius: 14px; color: var(--ink); text-decoration: none; }
a.tz-nodo:hover .tz-t { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
a.tz-nodo:hover .tz-bola { transform: scale(1.08); }
.tz-bola { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px dashed var(--line-strong); background: var(--surface); margin-bottom: 5px; transition: transform .15s; }
.tz-bola svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.s-hecho .tz-bola { border: 0; background: var(--good); color: #fff; box-shadow: 0 0 0 4px var(--good-soft); }
.s-curso .tz-bola { border: 2px solid var(--warn); background: var(--warn-soft); }
.s-curso .tz-bola::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); animation: tzlatido 1.8s ease-in-out infinite; }
.s-na .tz-bola { border: 2px solid var(--line); color: var(--muted); }
.tz-t { font-weight: 700; font-size: 13px; line-height: 1.25; }
.tz-x { font-size: 12px; color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
.s-falta .tz-t, .s-na .tz-t { color: var(--ink-2); }
.s-falta .tz-x, .s-na .tz-x { color: var(--muted); }
.tz-paso .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes tzlatido { 0%, 100% { transform: scale(.7); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }

/* Enlazado con: tarjetas de conexión */
.tz-con { columns: 310px 3; column-gap: 16px; margin-bottom: 26px; }
.tz-con .empty { column-span: all; }
.tz-card { break-inside: avoid; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.tz-card-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--ink); text-decoration: none; transition: background .15s; }
.tz-card-cab:hover { background: var(--surface-2); }
.tz-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tz-card-txt small { font-size: 11px; font-weight: 700; color: var(--tcx); text-transform: uppercase; letter-spacing: .05em; }
.tz-card-txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-card-txt b.mono { font-size: 14px; font-weight: 600; }
.tz-card-txt em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-card-n { display: flex; flex-direction: column; align-items: flex-end; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink); }
.tz-card-n small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.tz-lotes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
.tz-lote { display: inline-flex; flex-direction: column; padding: 5px 9px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); line-height: 1.2; transition: border-color .15s; }
.tz-lote:hover { border-color: var(--tcx); }
.tz-lote b { font: 600 12px var(--mono); }
.tz-lote small { font: 500 10.5px var(--mono); color: var(--gold-text); }
.tz-mas { align-self: center; font-size: 12px; font-weight: 700; text-decoration: none; color: var(--brand-text); padding: 0 4px; }

/* Grupo: la matriz de recorridos */
.tz-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tz-filtros button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font: 600 12.5px var(--sans); cursor: pointer; }
.tz-filtros button b { font-variant-numeric: tabular-nums; margin-left: 4px; color: var(--ink); }
.tz-filtros button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tz-filtros button.on b { color: inherit; }
.tz-filtros input[type="search"] { min-height: 34px; width: 220px; border-radius: 999px; padding: 0 14px; font-size: 13px; }
table.tz-matriz { border-collapse: separate; border-spacing: 0; font-size: 13px; width: 100%; min-width: 1180px; }
.tz-matriz th { font-size: 11px; font-weight: 700; color: var(--ink-2); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: bottom; background: var(--surface); }
.tz-matriz .tz-banda th { padding: 6px 8px; border-bottom: 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.tz-matriz .b-compra { background: var(--gold-soft); color: var(--gold-text); border-radius: 10px 10px 0 0; }
.tz-matriz .b-venta { background: var(--sky-soft); color: var(--sky-text); border-radius: 10px 10px 0 0; }
.tz-matriz th.tz-h { text-align: center; padding: 8px 2px; }
.tz-matriz th.tz-h span { display: block; width: 62px; margin: 0 auto; line-height: 1.2; white-space: normal; }
.tz-matriz th.r { text-align: right; }
.tz-matriz td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tz-matriz td.r { text-align: right; font-variant-numeric: tabular-nums; }
.tz-matriz tbody tr:hover td { background: var(--surface-2); }
.tz-matriz th:first-child, .tz-matriz td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.tz-matriz tbody tr:hover td:first-child { background: var(--surface-2); }
.tz-matriz .sep { border-left: 2px solid var(--line-strong); }
.tz-matriz .tz-l { font-weight: 700; text-decoration: none; }
.tz-prov { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tz-matriz a.tz { text-decoration: none; font-weight: 600; }
.tz-c { text-align: center; padding: 7px 2px !important; }
.tz-c a { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }
.tz-c a:hover { background: var(--surface-3); }
.tz-c i, .tz-ley i { display: block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line-strong); box-sizing: border-box; }
.s-hecho > a > i, .tz-ley .s-hecho i { background: var(--good); border-color: var(--good); }
.s-curso > a > i, .tz-ley .s-curso i { background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); border-color: var(--warn); }
.s-na > a > i, .tz-ley .s-na i { width: 10px; height: 2px; border: 0; border-radius: 2px; background: var(--muted); }
.tz-ley { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.tz-ley span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }

/* Lo que comparten: hilos de chips */
.tz-tejido { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.tz-hilo { display: grid; grid-template-columns: 210px 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; }
.tz-hilo-cab { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--tcx); padding-top: 4px; }
.tz-hilo-cab b { color: var(--muted); font-weight: 700; }
.tz-hilo > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tz-hc { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--tc) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tc) 22%, transparent); }
.tz-hc:hover { border-color: var(--tcx); }
.tz-hc small { font: 700 10.5px var(--sans); color: var(--muted); }
a.tz { font-weight: 600; text-decoration: none; }
a.tz:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .tz-pasos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tz-paso:not(:last-child)::before { top: 34px; bottom: -4px; left: 15px; right: auto; width: 2px; height: auto; }
  .tz-nodo { display: grid; grid-template-columns: 32px 1fr; grid-template-areas: "b t" "b x"; text-align: left; align-items: center; column-gap: 12px; padding: 4px 0 10px; }
  .tz-bola { grid-area: b; margin: 0; }
  .tz-t { grid-area: t; }
  .tz-x { grid-area: x; }
  .tz-hilo { grid-template-columns: minmax(0, 1fr); }
  .tz-sigue { margin-left: 0; }
  .bz-kbd { display: none; }
}

/* ——— El recorrido del mineral (Tablero y Trazabilidad) ——— */
.rec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px 18px; margin: 0 0 22px; }
.rec-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-2); }
.rec-cab b { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.rec-cab span { display: inline-flex; align-items: center; gap: 6px; }
.rec-cab i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 8px; }
.rec-cab i.rc-c, .rc-c { --lc: var(--gold); --lt: var(--gold-text); }
.rec-cab i.rc-v, .rc-v { --lc: var(--sky); --lt: var(--sky-text); }
.rec-cab i { background: var(--lc); }
.rec-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.rec-e:nth-child(4n)::after { display: none; }
.rec-e { position: relative; min-width: 0; }
.rec-e a { display: flex; flex-direction: column; gap: 1px; height: 100%; padding: 11px 12px 12px; border-radius: 14px; text-decoration: none; color: var(--ink);
  background: color-mix(in srgb, var(--lc) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--lc) 22%, transparent); transition: border-color .15s, transform .15s; }
.rec-e a:hover { border-color: var(--lc); transform: translateY(-1px); }
.rec-e:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -8px; width: 6px; height: 6px; border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); }
.rec-paso { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lt); margin-bottom: 4px; }
.rec-paso em { font-style: normal; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lc); color: #fff; font-size: 10.5px; letter-spacing: 0; flex: none; }
.rec-e b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.rec-nom { font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.rec-e.ojo .rec-nom::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.rec-e small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.tz-ayuda { color: var(--ink-2); max-width: 80ch; line-height: 1.6; margin: 0; }

/* ——— Revisión de datos ——— */
.rv-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.rv-tot { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.rv-tot b { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rv-tot span { font-weight: 700; }
.rv-tot small { color: var(--muted); font-size: 12px; }
.rv-tot.bad b { color: var(--bad); }
.rv-tot.warn b { color: var(--warn); }
.rv-tot.info b { color: var(--sky-text); }
.rv-tot.good b { color: var(--good); }
.rv-etapa { margin-bottom: 24px; }
.rv-etapa > h2 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.rv { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
.rv summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.rv summary::-webkit-details-marker { display: none; }
.rv summary b { flex: 1; font-size: 14.5px; }
.rv summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.rv[open] summary::after { transform: rotate(-135deg); }
.rv-n { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.rv-cuerpo { padding: 0 18px 16px; }
.rv-texto { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13.5px; color: var(--ink-2); max-width: 95ch; justify-items: start; }
.rv-texto p { margin: 0; line-height: 1.5; }
.rv .table-scroll { margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.rv-bien { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 18px; }
.rv-bien li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); font-size: 13.5px; }
.rv-bien .ico { color: var(--good); flex: none; margin-top: 1px; }

/* ——— Tablas: ordenar por columna ——— */
table.data th.ordenable { cursor: pointer; user-select: none; }
table.data th.ordenable:hover { color: var(--ink); }
table.data th.ordenable::after { content: "↕"; margin-left: 5px; opacity: .3; font-size: 11px; }
table.data th.asc::after { content: "↑"; opacity: .9; }
table.data th.desc::after { content: "↓"; opacity: .9; }

@media (max-width: 760px) {
  .rec-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-e::after { display: none; }
  .rv-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Otros pagos del lote (servicios que Tesoreria anoto con su BJ) */
.tz-gastos { list-style: none; margin: 0; padding: 0 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.tz-gastos li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 13px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); }
.tz-gastos li a { font-weight: 700; text-decoration: none; }
.tz-gastos li span { min-width: 0; display: flex; flex-direction: column; }
.tz-gastos li small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-gastos li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ——— Guías y códigos BJ: el asistente paso a paso ——— */
.gb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.gb-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.gb-tabs a:hover { border-color: var(--line-strong); color: var(--ink); }
.gb-tabs a.activo { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.gb-tabs b { font-size: 11.5px; background: var(--gold); color: #2A1C00; border-radius: 999px; padding: 1px 8px; }
.gb-num { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: 13px; font-weight: 800; }

.gb-como { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 20px; }
.gb-como ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gb-como li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; position: relative; }
.gb-como li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 6px; height: 6px; border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); }
.gb-como li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gb-como li b { font-size: 14px; }
.gb-como li small { color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.gb-como li em { font-style: normal; font-weight: 700; color: var(--warn); }
.gb-como li.hecho .gb-num { background: var(--good); color: #fff; }
.gb-como li.ahora { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.gb-como li.ahora .gb-num { background: var(--gold); color: #2A1C00; }
.gb-como li.fin .gb-num { background: var(--good-soft); color: var(--good); }

.gb-vacio { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.gb-vacio > .ico { width: 40px; height: 40px; color: var(--good); }
.gb-vacio p { margin: 4px 0 0; color: var(--ink-2); }

.gb-trabajo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 20px; align-items: start; margin-bottom: 26px; }
.gb-lista { min-width: 0; }
.gb-paso-cab { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.gb-paso-cab h2 { font-size: 17px; margin: 0; }
.gb-paso-cab p { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; max-width: 75ch; }
.gb-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.gb-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-3); border-radius: 999px; padding: 4px; }
.gb-seg button { border: 0; background: transparent; color: var(--ink-2); font: 700 12.5px var(--sans); padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.gb-seg button b { color: var(--ink); margin-left: 3px; font-variant-numeric: tabular-nums; }
.gb-seg button.activo { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.gb-buscar { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; color: var(--muted); }
.gb-buscar input { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 38px; padding: 0 !important; width: 100%; }

.gb-camion { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; }
.gb-camion-cab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.gb-camion-cab > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gb-camion-cab small { color: var(--ink-2); font-size: 12.5px; }
.gb-camion-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); flex: none; }
.gb-lote { display: grid; grid-template-columns: 22px minmax(120px, 150px) minmax(0, 1fr) 76px minmax(0, 1.1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.gb-camion-cab + .gb-lote { border-top: 0; }
.gb-lote:hover { background: var(--surface-2); }
.gb-lote.sel { background: var(--brand-soft); }
.gb-lote.hecho { animation: destello 2.6s ease-out; }
.gb-lote input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.gb-lote span { min-width: 0; display: flex; flex-direction: column; }
.gb-lote small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-lote-id b { font-size: 13.5px; }
.gb-lote-prov { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-lote-tmh { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.gb-lote-falta { flex-direction: row !important; flex-wrap: wrap; gap: 4px; }
.gb-lote-ver { font-size: 12px; font-weight: 700; color: var(--brand-text); text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.gb-lote-ver:hover { background: var(--surface-3); }

.gb-asistente { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-up); padding: 18px; }
.gb-espera { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 8px; color: var(--ink-2); }
.gb-espera b { color: var(--ink); font-size: 15px; }
.gb-espera p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.gb-espera-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--gold-soft); color: var(--gold-text); }
.gb-espera-ico .ico { width: 26px; height: 26px; }
.gb-form { display: flex; flex-direction: column; gap: 14px; }
.gb-marcados { display: flex; align-items: baseline; gap: 10px; }
.gb-marcados b { font-size: 16px; }
.gb-marcados span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gb-limpiar { margin-left: auto; border: 0; background: none; color: var(--brand-text); font: 700 12.5px var(--sans); cursor: pointer; }
.gb-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -6px; }
.gb-chips button { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 3px 9px; font: 600 11.5px var(--mono); color: var(--ink); cursor: pointer; }
.gb-chips button:hover { border-color: var(--bad); color: var(--bad); }
.gb-ojo { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 13px; line-height: 1.45; }
.gb-paso { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 14px; margin: 0; }
.gb-paso legend, .gb-paso summary { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; padding: 0 4px; }
.gb-paso summary { cursor: pointer; list-style: none; padding: 0; }
.gb-paso summary::-webkit-details-marker { display: none; }
.gb-paso summary small { color: var(--muted); font-weight: 600; }
.gb-paso[open] summary { margin-bottom: 10px; }
.gb-paso .gb-num { width: 22px; height: 22px; font-size: 12px; }
.gb-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gb-campos label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.gb-c2 { grid-column: span 2; }.gb-quien { font-size: 12.5px; color: var(--good); font-weight: 600; min-height: 0; }
.gb-quien:empty { display: none; }
.gb-peso { margin: -2px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.gb-peso.ok { background: var(--good-soft); color: var(--good); }
.gb-peso.mal { background: var(--warn-soft); color: var(--warn); }
.gb-opciones { display: grid; gap: 8px; }
.gb-op { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.gb-op:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.gb-op input { margin-top: 3px; accent-color: var(--brand); }
.gb-op span { display: flex; flex-direction: column; }
.gb-op small { color: var(--ink-2); font-size: 12px; }
.gb-resumen { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.gb-resumen p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; }
.gb-resumen.ok { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.gb-resumen.ok .gb-num { background: var(--good); color: #fff; }
.gb-resumen.mal { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.gb-resumen.mal .gb-num { background: var(--bad); color: #fff; }
.gb-resumen.mal p { color: var(--bad); font-weight: 600; }
.gb-resumen.cargando p { opacity: .55; }
.gb-bj { display: inline-flex; align-items: baseline; gap: 5px; font: 700 12.5px var(--mono); background: var(--surface); border-radius: 8px; padding: 1px 7px; margin: 2px 2px 0 0; color: var(--ink); }
.gb-bj small { font-weight: 500; color: var(--muted); font-size: 10.5px; }
.gb-guardar { justify-content: center; padding: 12px; font-size: 14.5px; }
.gb-guardar:disabled { opacity: .5; cursor: not-allowed; }
.gb-sub { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 18px 0 10px; }
.gb-sub:first-of-type { margin-top: 4px; }
.gb-sub .gb-num { width: 22px; height: 22px; font-size: 12px; }

/* Guías recientes */
.gb-guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-bottom: 26px; }
.gb-guia { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.gb-guia header { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.gb-guia-n { display: flex; flex-direction: column; }
.gb-guia-n small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gb-guia-n b { font-size: 15px; }
.gb-guia-p { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.gb-guia-p b { font-size: 13.5px; }
.gb-guia-p small { color: var(--muted); font-size: 12px; }
.gb-lts { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-lt { display: inline-flex; flex-direction: column; padding: 5px 9px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); line-height: 1.25; }
.gb-lt:hover { border-color: var(--line-strong); }
.gb-lt b { font: 600 12px var(--mono); }
.gb-lt small { font: 600 11px var(--mono); color: var(--gold-text); }
.gb-quien { margin: 0; }
.gb-guia .gb-quien { color: var(--muted); font-weight: 500; font-size: 11.5px; }

/* Los papeles que van con la guía: escaneo, REINFO, INGEMMET y MTC. Lo que falta se sube desde aquí. */
.gb-docs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.gb-doc { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.gb-doc i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-style: normal; font-size: 9px; font-weight: 800; }
.gb-doc.ok { background: var(--good-soft); color: var(--good); }
.gb-doc.ok i { background: var(--good); color: #fff; }
.gb-doc.falta { background: var(--warn-soft); color: var(--warn-text, var(--warn)); }
.gb-doc.falta i { background: var(--warn); color: #fff; }
.gb-doc form { display: inline; margin-left: 2px; }
.gb-doc form label { padding: 1px 6px; border-radius: 999px; background: var(--surface); border: 1px solid currentColor;
  font-size: 10.5px; font-weight: 700; cursor: pointer; }
.gb-doc form label:hover { background: var(--warn); color: #fff; }

@media (max-width: 1200px) {
  .gb-trabajo { grid-template-columns: minmax(0, 1fr); }
  .gb-asistente { position: static; max-height: none; }
  .gb-como ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-como li::after { display: none; }
}
@media (max-width: 720px) {
  .gb-lote { grid-template-columns: 22px minmax(0, 1fr) 70px; }
  .gb-lote-prov, .gb-lote-falta, .gb-lote-ver { grid-column: 2 / -1; }
  .gb-como ol { grid-template-columns: minmax(0, 1fr); }
}

.gb-sinpeso { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--warn); }
.gb-resumen p small { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.45; margin-top: 4px; }

.gb-resumen.aviso { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.gb-resumen.aviso .gb-num { background: var(--warn); color: #fff; }
.gb-cambia { color: var(--warn); }.ex-met.m-promedio, .ex-met.m-sin { background: var(--warn-soft); color: var(--warn); }@media (max-width: 900px) {
  .ex-formula { grid-template-columns: minmax(0, 1fr); }
  .ex-op { justify-self: center; line-height: 1; }
  .ex-etapas { grid-template-columns: minmax(0, 1fr); }
}

/* ——— Anticipos de plantas y exposición ——— */
.ex-formula { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; margin-bottom: 14px; }
.ex-term { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-term small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ex-term b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ex-term span { font-size: 12.5px; color: var(--ink-2); }
.ex-term.ant small { color: var(--gold-text); }
.ex-term.car small { color: var(--sky-text); }
.ex-term.res.mal { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.ex-term.res.mal b { color: var(--bad); }
.ex-term.res.bien { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.ex-term.res.bien b { color: var(--good); }
.ex-op { align-self: center; font-size: 26px; font-weight: 800; color: var(--muted); }
.ex-frase { font-size: 15px; line-height: 1.6; max-width: 90ch; margin: 4px 0 12px; color: var(--ink); }
.ex-base { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-3); border-radius: 999px; padding: 4px; margin-bottom: 18px; font-size: 12.5px; }
.ex-base span { color: var(--ink-2); font-weight: 700; padding: 0 8px 0 10px; }
/* El filtro de empresa va al lado del de valorización, en su propia fila: con un directo o con
   cinco es la misma barra, porque las empresas salen de los datos. */
.ex-titulares { margin-left: 10px; flex-wrap: wrap; max-width: 100%; }
/* De quién es la deuda, dentro de la tarjeta de la planta: «Cueva» sobre «Mollehuaca». */
.ex-titular { margin: -4px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ex-base a { padding: 6px 12px; border-radius: 999px; color: var(--ink-2); font-weight: 700; text-decoration: none; }
.ex-base a.activo { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.notice.ex-ok { background: var(--good-soft); color: var(--good); font-weight: 500; }

.ex-plantas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 24px; }
.ex-planta { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 16px 18px; color: var(--ink); text-decoration: none; transition: transform .15s, border-color .15s; }
.ex-planta:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.ex-planta header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-barras { display: flex; flex-direction: column; gap: 6px; }
.ex-fila { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.ex-fila b { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 13px; min-width: 64px; text-align: right; }
.ex-b { display: block; height: 12px; border-radius: 0 4px 4px 0; }
.ex-ant { background: var(--gold); }
.ex-car { background: var(--sky); }
.ex-planta dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; }
.ex-planta dt { font-size: 11px; color: var(--muted); font-weight: 700; }
.ex-planta dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-planta dd small { font-weight: 600; color: var(--warn); }
.ex-ver { font-size: 12.5px; font-weight: 700; color: var(--brand-text); }

.ex-descs { display: flex; flex-wrap: wrap; gap: 4px; max-width: 360px; }
.ex-descs a { font-size: 11.5px; padding: 2px 7px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.ex-descs a b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.ex-agotados { margin-top: 14px; }
.ex-agotados summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--brand-text); margin-bottom: 10px; }
.ex-etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ex-etapa { background: var(--surface-2); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; }
.ex-etapa small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ex-etapa b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ex-etapa span { font-size: 12px; color: var(--ink-2); }
.ex-met { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.ex-met.m-propuesta { background: var(--good-soft); color: var(--good); }
.ex-met.m-factor { background: var(--sky-soft); color: var(--sky-text); }
.ex-met.m-promedio, .ex-met.m-sin { background: var(--warn-soft); color: var(--warn); }
.ex-como h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 8px; }
.ex-como ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; max-width: 100ch; }
.panel-head h2 .gb-num { width: 24px; height: 24px; font-size: 12px; margin-right: 4px; vertical-align: 2px; }

@media (max-width: 900px) {
  .ex-formula { grid-template-columns: minmax(0, 1fr); }
  .ex-op { justify-self: center; line-height: 1; }
  .ex-etapas { grid-template-columns: minmax(0, 1fr); }
}

/* ——— Balanza ——— */
.bz-tablero { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 18px; }
.bz-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 12px 16px; display: flex; flex-direction: column; gap: 1px; color: var(--ink); text-decoration: none; min-width: 0; }
.bz-kpi small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bz-kpi b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.2; }
.bz-kpi b em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.bz-kpi span { font-size: 12px; color: var(--ink-2); }
.bz-kpi.ojo { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.bz-kpi.ojo b { color: var(--warn); }
.bz-kpi.codigo b { font-size: 19px; }
.bz-kpi.otra { background: var(--surface-2); box-shadow: none; }
.bz-kpi.otra:hover { border-color: var(--line-strong); }

.bz-hecho { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; border-radius: 16px; background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); color: var(--ink); }
.bz-hecho > .ico { width: 28px; height: 28px; color: var(--good); flex: none; }
.bz-hecho > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.bz-hecho b { font-size: 16px; }
.bz-hecho span { color: var(--ink-2); font-size: 13px; }

.bz-trabajo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bz-trabajo.solo { grid-template-columns: minmax(0, 1fr); }
.bz-lado { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bz-form .panel-head { align-items: center; }
.bz-codigo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.bz-codigo b { color: var(--ink); font-size: 13.5px; }
.bz-codigo .ico { width: 14px; height: 14px; color: var(--good); }
.bz-grupo { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 14px; margin: 0 0 12px; }
.bz-grupo legend, .bz-grupo > summary { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; padding: 0 4px; }
.bz-grupo > summary { cursor: pointer; list-style: none; padding: 0; }
.bz-grupo > summary::-webkit-details-marker { display: none; }
.bz-grupo > summary small, .bz-grupo legend small { font-weight: 600; color: var(--muted); }
.bz-grupo[open] > summary { margin-bottom: 10px; }
.bz-grupo .gb-num { width: 22px; height: 22px; font-size: 12px; }
.bz-grupo label small { font-weight: 500; color: var(--muted); }
.bz-grande { font-size: 18px !important; font-weight: 700; letter-spacing: .04em; }
.bz-placa-info, .bz-tara-conocida { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.bz-tara-conocida { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Aquí sí se alinea por ABAJO: las dos columnas llevan casilla, y por tanto las dos llevan el
   botón ⚖ del indicador, así que acaban a la misma altura. Lo de arriba no: la descripción de la
   tara ocupa más renglones que la del bruto. */
.bz-pesos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.1fr); gap: 10px; align-items: end; }
.bz-peso { display: flex; flex-direction: column; gap: 3px; font-weight: 800; font-size: 13px; }
.bz-peso small { font-weight: 500; color: var(--muted); font-size: 11.5px; min-height: 2.6em; line-height: 1.3; }
.bz-peso input { font-size: 22px !important; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 52px; text-align: right; }
.bz-menos { font-size: 24px; font-weight: 800; color: var(--muted); padding-bottom: 12px; }
.bz-neto { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 8px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.bz-neto small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bz-neto b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.bz-neto span { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bz-neto.ok { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.bz-neto.ok b { color: var(--good); }
.bz-neto.espera { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.bz-neto.espera b { color: var(--warn); font-size: 17px; }
.bz-neto.mal { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.bz-neto.mal b { color: var(--bad); }
.bz-guardar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.bz-guardar .btn { padding: 12px 20px; font-size: 15px; }
.bz-guardar .btn:disabled { opacity: .6; }

/* Llega un camión */
.bz-entrada { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 16px; align-items: end; }
.bz-n { display: flex; flex-direction: column; gap: 3px; font-weight: 800; font-size: 13px; }
.bz-n > small { font-weight: 500; color: var(--muted); font-size: 11.5px; min-height: 1.3em; }
.bz-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: var(--surface); min-height: 52px; }
.bz-stepper button { width: 48px; border: 0; background: var(--surface-2); color: var(--ink); font-size: 24px; font-weight: 700; cursor: pointer; }
.bz-stepper button:hover { background: var(--surface-3); }
.bz-stepper input { width: 72px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: center; font-size: 24px !important; font-weight: 800; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.bz-stepper input::-webkit-inner-spin-button, .bz-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bz-codigos-prev { margin: 12px 0 0; }
.bz-codigos-prev > small { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.bz-codigos-prev .bz-chips { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
.bz-chip-mas { align-self: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.bz-uno { margin-top: 14px; display: grid; gap: 10px; }
.bz-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.bz-check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.bz-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.bz-check span { display: flex; flex-direction: column; }
.bz-check small { color: var(--ink-2); font-size: 12px; }
.bz-vacio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.gb-nota { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* Camiones descargando */
.bz-cola .empty { margin: 0; }
.bz-cam { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; padding: 14px; margin-top: 14px; scroll-margin-top: 90px; display: grid; gap: 12px; }
.bz-cam:first-of-type { margin-top: 0; }
.bz-cam.foco { border-color: color-mix(in srgb, var(--gold) 70%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.bz-cam-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.bz-placa { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; min-width: 96px; height: 44px; padding: 0 10px 5px; border: 2px solid var(--ink); border-radius: 7px;
  background: #fff; color: #10151C; font-size: 17px; font-weight: 800; letter-spacing: .08em; overflow: hidden; }
.bz-placa::before { content: 'PERÚ'; position: absolute; inset: 0 0 auto; height: 12px; background: var(--brand); color: #fff; font: 700 8px/12px system-ui, sans-serif; letter-spacing: .2em; text-align: center; }
.bz-cam-id { display: flex; flex-direction: column; min-width: 0; }
.bz-cam-id b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-cam-id small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bz-cam-prog { display: flex; flex-direction: column; align-items: flex-end; min-width: 104px; }
.bz-cam-prog b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
.bz-cam-prog b em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); }
.bz-cam-prog small { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bz-cam-prog i { display: block; width: 100%; height: 6px; margin-top: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--good) var(--p), var(--surface-3) var(--p)); }

.bz-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.bz-chip { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 46px; padding: 6px 9px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); font: inherit; text-align: left; }
.bz-chip .mono { font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.bz-chip b { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
button.bz-chip, .bz-chip-sel { cursor: pointer; }
.bz-chip.ok { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.bz-chip.ok b { color: var(--good); }
.bz-chip.ok:hover, .bz-chip.ok.sel { border-color: var(--good); }
.bz-chip.ok.sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.bz-chip.pend { padding: 0; border-style: dashed; border-color: var(--line-strong); }
.bz-chip.pend b { color: var(--muted); font-weight: 600; }
.bz-chip-sel { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; height: 100%; padding: 6px 9px; border: 0; background: none; color: inherit; font: inherit; text-align: left; border-radius: 10px; }
.bz-chip.pend:hover { border-color: var(--warn); }
.bz-chip.pend.sel { border: 2px solid var(--warn); background: var(--warn-soft); }
.bz-chip.pend.sel b { color: var(--warn); }
.bz-chip.mini { min-height: 30px; padding: 4px 8px; border-style: dashed; }
.bz-chip.mini .mono { font-size: 12.5px; }
.bz-chip-quitar { position: absolute; top: -7px; right: -7px; margin: 0; }
.bz-chip-x { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0; opacity: .7; }
.bz-chip:hover .bz-chip-x, .bz-chip-x:focus-visible { opacity: 1; }
.bz-chip-x:hover { border-color: var(--bad); color: #fff; background: var(--bad); }
.bz-chips-ayuda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 0; font-size: 11.5px; color: var(--muted); }
.bz-chips-ayuda span { display: inline-flex; align-items: center; gap: 5px; }
.bz-chips-ayuda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bz-chips-ayuda i.ok { background: var(--good-soft); border: 1px solid var(--good); }
.bz-chips-ayuda i.pend { border: 1px dashed var(--line-strong); background: var(--surface-2); }
.bz-chips-ayuda b { color: var(--bad); }

.bz-ahora { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); margin: 0; }
.bz-ahora[hidden], .bz-corregir[hidden] { display: none; }
.bz-ahora-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bz-ahora-cab small { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.bz-ahora-cab b { font-size: 22px; letter-spacing: .02em; }
.bz-pasos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.bz-pasos li { counter-increment: paso; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px 3px 4px; }
.bz-pasos li::before { content: counter(paso); width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-size: 10.5px; font-weight: 800; }
/* Y aquí por ARRIBA: una columna es la casilla de la tara (con su botón ⚖ debajo) y la otra es el
   peso bruto ya fijado, que NO lleva casilla ni botón. Alineando por abajo, los 33 px del botón
   descolgaban el cuadro del bruto; por arriba coinciden, que es donde los dos empiezan igual. */
.bz-ahora-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.bz-ahora .bz-peso input { background: var(--surface); }
.bz-ahora-fila.tres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.bz-ahora-fila.tres .bz-menos { display: none; }
.bz-ahora-fila.tres .bz-neto { grid-column: 1 / -1; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.bz-fijo b { display: flex; align-items: center; justify-content: flex-end; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px dashed var(--line-strong); background: var(--surface-2); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bz-fijo > span { font-weight: 800; font-size: 13px; }
.bz-cadena { margin: -2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.bz-cadena b { color: var(--ink); }
.bz-ahora-btn { width: 100%; justify-content: center; padding: 12px 18px; font-size: 15px; }

.bz-corregir { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; padding: 12px 14px; border-radius: 14px; background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); margin: 0; }
.bz-corregir > b { width: 100%; font-size: 14px; }
.bz-corregir label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 700; }
.bz-corregir input { width: 170px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface); }
.bz-corregir small { width: 100%; color: var(--ink-2); font-size: 12px; }

.bz-cam-pie { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.bz-cam-pie form { margin: 0; display: flex; gap: 6px; align-items: center; }
.bz-cantidad { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; margin-right: auto; }
.bz-cantidad > span { padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.bz-cantidad button { width: 34px; height: 34px; border: 0; border-left: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; }
.bz-cantidad button:hover:not(:disabled) { background: var(--surface-3); }
.bz-cantidad button:disabled { color: var(--muted); cursor: default; }
.bz-cantidad > b { min-width: 34px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; border-left: 1px solid var(--line); line-height: 34px; }
.bz-terminar input { width: 120px; text-align: right; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .bz-chip.pend.sel { animation: bz-latido 2.4s ease-in-out infinite; }
  @keyframes bz-latido { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); } }
}
@media (max-width: 560px) {
  .bz-entrada, .bz-vacio, .bz-ahora-fila, .bz-ahora-fila.tres { grid-template-columns: minmax(0, 1fr); }
  .bz-ahora-fila.tres .bz-menos { display: none; }
  .bz-cam-top { grid-template-columns: auto minmax(0, 1fr); }
  .bz-cam-prog { grid-column: 1 / -1; align-items: stretch; }
  .bz-cantidad { margin-right: 0; }
}

.bz-lista { list-style: none; margin: 0; padding: 0; }
.bz-lista.bz-dia { position: static; min-width: 0; max-height: none; overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; z-index: auto; }
.bz-lista li { display: grid; grid-template-columns: 118px minmax(0, 1fr) 104px auto auto; gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); }
.bz-lista li:first-child { border-top: 0; }
.bz-lista li > div { display: flex; flex-direction: column; min-width: 0; }
.bz-lista small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-l-id a { text-decoration: none; }
.bz-l-prov { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-l-peso { text-align: right; font-variant-numeric: tabular-nums; }
.bz-l-peso em { font-style: normal; color: var(--warn); font-size: 12.5px; }
.bz-l-estado .pill { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.bz-l-acc { flex-direction: row !important; gap: 2px; }
.bz-acc { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ink-2); }
.bz-acc:hover { background: var(--surface-3); color: var(--ink); }
.bz-acc .ico { width: 16px; height: 16px; }
.bz-lista li.dim { opacity: .55; }
.bz-lista li.nuevo { animation: destello 2.6s ease-out; }

/* Reingreso y partición */
.bz-pasos-exp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bz-pasos-exp li { display: flex; gap: 10px; align-items: flex-start; }
.bz-pasos-exp li div { display: flex; flex-direction: column; }
.bz-pasos-exp small { color: var(--ink-2); font-size: 12.5px; }
.bz-flujo { margin-bottom: 16px; }
.bz-elegir { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bz-elegir label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13px; min-width: 240px; }
.bz-origen { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; margin-bottom: 14px; }
.bz-origen > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.bz-origen > div.nuevo { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.bz-origen small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bz-origen b { font-size: 20px; }
.bz-origen span { font-size: 12.5px; color: var(--ink-2); }
.bz-origen em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--warn); }
.bz-origen .nuevo em { color: var(--good); }
.bz-flecha { align-self: center; font-size: 26px; color: var(--muted); }
.bz-campo { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.bz-campo small { font-weight: 500; color: var(--muted); }
.bz-grupo .gb-op { margin-bottom: 8px; }
.bz-particion { max-width: 760px; }
.bz-part-cab { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.bz-part-cab > div { display: flex; flex-direction: column; }
.bz-part-cab small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bz-part-cab b { font-size: 20px; }
.bz-part-cab span { font-size: 12.5px; color: var(--ink-2); }
.bz-part-total { text-align: right; align-items: flex-end; }
.bz-part-total b { font-size: 28px; font-variant-numeric: tabular-nums; }
.bz-iguales { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.bz-part-tabla { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 13.5px; }
.bz-part-tabla th { text-align: left; font-size: 11.5px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.bz-part-tabla td { padding: 8px; border-bottom: 1px solid var(--line); }
.bz-part-tabla .r { text-align: right; white-space: nowrap; }
.bz-part-tabla tr.original td { background: var(--surface-2); }
.bz-part-tabla tr.original b[data-bz-queda] { font-size: 16px; font-variant-numeric: tabular-nums; }
.bz-part-tabla td:nth-child(2) { color: var(--ink-2); font-size: 12.5px; }
.bz-part-input { width: 120px !important; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-block !important; }
.bz-quitar { border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.bz-quitar:hover { color: var(--bad); }
.bz-part-tabla tfoot td { border-bottom: 0; font-size: 13px; }

/* Ficha del lote: de dónde viene y en qué se convirtió */
.bz-familia { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.bz-familia > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.bz-familia small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bz-familia a { text-decoration: none; font-size: 15px; }
.bz-familia span { font-size: 12.5px; color: var(--ink-2); }
.bz-fam-partes { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-fam-partes a { font-size: 13px; padding: 2px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.bz-tara-ficha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: var(--warn-soft); }
.bz-tara-ficha b { color: var(--warn); }
.bz-tara-ficha span { font-size: 12.5px; color: var(--ink-2); flex: 1; }
.bz-tara-ficha input { width: 130px; text-align: right; }

/* Ticket de balanza */
.ticket { position: relative; overflow: hidden; background: #fff; color: #10151C; max-width: 560px; margin: 0 auto 30px; padding: 22px 26px; border-radius: 8px; box-shadow: var(--shadow); font-size: 12px; }
.tk-sello { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-size: 46px; font-weight: 900; letter-spacing: .1em; color: rgba(185, 111, 0, .16); pointer-events: none; white-space: nowrap; }
.tk-cab { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 3px double #152A40; }
.tk-logo { height: 42px; width: auto; }
.tk-emp { display: flex; flex-direction: column; font-size: 11px; color: #4A5568; }
.tk-emp b { font-size: 12.5px; color: #152A40; }
.tk-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 10px; }
.tk-titulo h1 { margin: 0; font-size: 16px; letter-spacing: .22em; color: #152A40; }

/* La banda del voucher: el número a la izquierda porque es lo primero que busca el proveedor
   y lo que se dicta por radio; el lote a la derecha. La línea punteada da el aire de talón. */
.tk-voucher { display: flex; align-items: stretch; gap: 14px; margin: 14px 0 12px; padding: 10px 0;
  border-top: 1px dashed #B6C0CE; border-bottom: 1px dashed #B6C0CE; }
.tk-nro { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 108px; padding: 6px 14px; border-radius: 10px; background: #152A40; color: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tk-nro small { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.tk-nro b { font-family: var(--mono); font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tk-voucher-txt { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.tk-voucher-txt h1 { margin: 0; font-size: 15px; letter-spacing: .2em; color: #152A40; }
/* A dónde va el mineral: quien recibe el papel tiene que poder leerlo sin preguntar */
.tk-punto { font-size: 10.5px; color: #4A5A6A; }
.tk-punto b { color: #152A40; }
.tk-voucher-txt span { font-size: 11px; color: #4A5568; }

/* El voucher del código BJ: bloques con su título, para que quien lo recibe encuentre cada
   cosa de un vistazo — de quién es, las dos pesadas, quién lo trajo, y dónde firmar. */
.vch .tk-datos { margin-bottom: 8px; }
.vch-bloque { margin: 10px 0; padding: 8px 10px; border: 1px solid #E2E8F0; border-radius: 8px; background: #FAFBFC;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.vch-bloque h2 { margin: 0 0 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6B7280; }
.vch-bloque .tk-datos { margin: 0; }
.vch-bloque dd small.muted { display: block; font-size: 10px; font-weight: 500; color: #6B7280; }
/* El apartado para escribir a mano: se deja alto aunque venga vacío */
.vch-obs p { margin: 0; min-height: 34px; font-size: 11.5px; border-bottom: 1px dotted #C7D0DB; }
/* La ley en gramos al lado de la ley en onzas: el proveedor habla en g/t y aqui se negocia en
   oz/tc, asi que verlas juntas evita la conversion de cabeza justo cuando se decide el precio. */
.ng-gt { font-weight: 700; color: var(--ink-2); }

/* El mapa de la cancha: el mismo plano que la planta dibuja a mano, pero en vivo. La FORMA dice
   si la ruma está chancada y el COLOR de qué mineral es; se usa ese lenguaje y no uno nuevo para
   que quien lee el plano de la pared pueda leer este sin que le expliquen nada.

   Todo va delimitado a propósito: el patio tiene su marco, cada zona su franja y su cabecera
   propia, y las rumas viven por debajo de esas cabeceras. En un plano, lo que se pisa no se lee. */
.cz-ayuda { margin: 0 0 12px; }
.mp-caja { display: grid; gap: 12px; }

/* Se le pone techo a propósito: con solo «16/9» y la pantalla ancha el patio salía de 820 px de alto
   y quedaba un rectángulo casi vacío que empujaba fuera de vista los lotes por ubicar, que son con
   los que se trabaja. Un plano se mira de un golpe; si hay que bajar para verlo entero, no es plano. */
.mp-cancha { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 360px; max-height: 540px;
  border: 2px solid var(--ink); border-radius: 10px; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 2px, transparent 2px 9px),
    var(--surface-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 1px 3px color-mix(in srgb, var(--ink) 12%, transparent); }

/* Cada zona es una franja con su cabecera arriba. La cabecera es una banda sólida: así las rumas
   nunca quedan encima del nombre ni del tonelaje, que es lo primero que se busca al mirar. */
.mp-zona { position: absolute; display: flex; flex-direction: column; pointer-events: none;
  border-right: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.mp-zona:last-of-type { border-right: 0; }
.mp-zona-cab { padding: 6px 9px 7px; display: grid; gap: 1px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.mp-zona-tit { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.mp-zona-cif { font-size: 12.5px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mp-zona-libre { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.mp-zona-barra { height: 4px; margin-top: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.mp-zona-barra i { display: block; height: 100%; border-radius: 999px; background: var(--muted); transition: width .25s; }
.mp-good .mp-zona-cab { background: color-mix(in srgb, var(--good) 13%, var(--surface)); }
.mp-good .mp-zona-barra i { background: var(--good); }
.mp-warn .mp-zona-cab { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); }
.mp-warn .mp-zona-barra i { background: var(--warn); }
.mp-bad .mp-zona-cab { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); }
.mp-bad .mp-zona-barra i { background: var(--bad); }
.mp-bad .mp-zona-tit { color: var(--bad); }

/* La ruma y el cuadro de la leyenda comparten forma y color a propósito: si algún día cambia un
   color, cambia en los dos sitios a la vez o la leyenda empieza a mentir. */
.mp-lote, .mp-m { background: #C9CFD9; border: 1.5px solid #5B6474;
  clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%); }
.mp-porchancar { clip-path: polygon(50% 0, 100% 36%, 82% 100%, 18% 100%, 0 36%); }
.mp-oxido { background: #F7C08C; border-color: #A96A21; }
.mp-sulfuro { background: #9FC97E; border-color: #446F26; }
.mp-mixto { background: #CBA8DA; border-color: #6F4087; }

/* Cada ruma: el ancho sale del tonelaje, la forma del chancado */
.mp-lote { position: absolute; min-width: 88px; box-sizing: border-box; color: #0F1726;
  padding: 12px 7px 10px; text-align: center; cursor: grab; user-select: none;
  filter: drop-shadow(0 1px 1px color-mix(in srgb, #000 22%, transparent));
  transition: filter .12s, transform .12s; }
.mp-lote.mp-porchancar { padding: 16px 7px 10px; }
.mp-lote:hover { filter: drop-shadow(0 2px 4px color-mix(in srgb, #000 34%, transparent)); z-index: 4; }
.mp-lote b { display: block; font-size: 10.5px; line-height: 1.1; font-weight: 800; white-space: nowrap;
  font-family: var(--mono, ui-monospace, monospace); letter-spacing: -.04em; }
.mp-lote span { display: block; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mp-lote small { display: block; font-size: 8.5px; font-weight: 700; opacity: .7; letter-spacing: .04em; }
.mp-lote.mp-sale::after { content: ''; position: absolute; inset: 0;
  border: 2px dashed color-mix(in srgb, var(--brand) 85%, transparent); clip-path: inherit; pointer-events: none; }
.mp-lote.arrastrando { opacity: .3; cursor: grabbing; }
.mp-lote.guardando { opacity: .5; }
.mp-lote.elegido { transform: scale(1.06); z-index: 6;
  filter: drop-shadow(0 0 0 2px var(--brand)) drop-shadow(0 3px 6px color-mix(in srgb, #000 40%, transparent)); }
.mp-eligiendo .mp-cancha { cursor: crosshair; }

/* La leyenda, en su caja, como en el plano de la pared */
.mp-leyenda { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  font-size: 12px; font-weight: 600; color: var(--ink-2); }
.mp-leyenda div { display: flex; align-items: center; gap: 7px; }
.mp-m { width: 26px; height: 18px; display: inline-block; flex: none; }
.mp-m.mp-sale { position: relative; }
.mp-m.mp-sale::after { content: ''; position: absolute; inset: 0;
  border: 2px dashed color-mix(in srgb, var(--brand) 85%, transparent); clip-path: inherit; }

/* Los que nadie puso todavía. Mientras haya algo aquí, el mapa de arriba no es el suelo. */
.mp-banca { margin-top: 16px; padding: 12px 14px 14px; border: 1.5px dashed var(--warn); border-radius: 14px;
  background: color-mix(in srgb, var(--warn) 5%, transparent); }
.mp-banca.cz-ok { border-color: var(--line-strong); background: none; opacity: .65; }
.mp-banca h3 { margin: 0 0 3px; font-size: 14px; color: var(--warn); }
.mp-banca.cz-ok h3 { color: var(--muted); }
/* Con techo y barra propia: en una cancha cargada son veintitantos sin ubicar, y sin esto la fila
   crece hasta empujar el mapa fuera de la pantalla, justo cuando hacen falta los dos a la vez. */
.mp-banca-lotes { display: flex; flex-wrap: wrap; gap: 10px; min-height: 48px; max-height: 236px; overflow-y: auto;
  align-items: flex-start; margin-top: 8px; }
.mp-banca-lotes .mp-lote { position: static; width: auto !important; }

.cz-sede { margin-left: auto; }
.cz-aviso { margin: 6px 0 0; width: 100%; font-size: 12.5px; font-weight: 700; color: var(--good); }
.cz-aviso.mal { color: var(--bad); }
/* En el celular, cuatro zonas caben pero sus cabeceras no: se aprieta la letra y se quita la
   línea de «TN libres», que en esa pantalla ya la dice la cifra de arriba del módulo. */
@media (max-width: 700px) {
  .mp-cancha { aspect-ratio: 3 / 4; }
  .mp-lote { min-width: 64px; padding: 10px 4px 8px; }
  .mp-lote b { font-size: 9.5px; }
  .mp-lote span { font-size: 9px; }
  .mp-lote small { display: none; }
  .mp-zona-cab { padding: 4px 5px 5px; }
  .mp-zona-tit { font-size: 9px; letter-spacing: .04em; }
  .mp-zona-cif { font-size: 10.5px; }
  .mp-zona-libre { display: none; }
}

/* El módulo del mapa: sus cifras de cabecera y el selector de planta. */
.mp { display: grid; gap: 14px; }
.mp-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mp-cifras > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; gap: 1px; }
.mp-cifras span { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mp-cifras b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mp-cifras small { font-size: 11.5px; color: var(--muted); }
.mp-cifras .ojo { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.mp-cifras .ojo b { color: var(--warn); }
.mp-cifras .mal b { color: var(--bad); }
.mp-sedes { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-sedes button { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.mp-sedes button i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px;
  background: var(--c); color: #fff; font-size: 10.5px; font-weight: 800; font-style: normal; }
.mp-sedes button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: var(--ink); }
/* En el celular no hay dónde posar el dedo, así que el detalle del lote se muestra al tocarlo. */
.mp-ficha { margin: 0; padding: 10px 13px; border-radius: 12px; font-size: 13px; font-weight: 600;
  background: var(--ink); color: var(--surface); }
@media (max-width: 900px) { .mp-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-cifras b { font-size: 20px; } }

/* Las pestañas de la pantalla de operarios. */
.op-vistas { display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.op-vistas a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.op-vistas a.on { border-color: var(--brand); background: var(--brand); color: var(--surface); }
.op-vistas a b { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 11.5px; }
.op-vistas a.on b { background: color-mix(in srgb, #fff 26%, transparent); }
/* Contar muestras se hace de pie junto a la mesa, con el celular en una mano y las bolsas en la
   otra: fichas grandes, botones de − y + que se aciertan con el pulgar, y el total a la vista. */
.mu-fichas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.mu-ficha { border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 12px 14px 10px; background: var(--surface); display: grid; gap: 10px; }
.mu-ficha.con { border-color: color-mix(in srgb, var(--good) 55%, var(--line-strong)); background: color-mix(in srgb, var(--good) 4%, var(--surface)); }
.mu-ficha > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mu-marca { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0; }
.mu-marca input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.mu-marca span { display: grid; gap: 1px; min-width: 0; }
.mu-marca b { font-size: 14px; }
.mu-marca small { font-size: 11.5px; color: var(--muted); }
.mu-total { text-align: right; flex: none; }
.mu-total b { display: block; font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mu-total small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mu-tipos { display: grid; gap: 8px; }
/* En rejilla y no en flex: el campo del medio tiene un ancho fijo y el nombre se queda con lo
   que sobre. Con flex, la regla general de los input lo estiraba y empujaba el + fuera de la
   pantalla del celular, que es justo donde esto se usa. */
.mu-fichas .mu-ficha .mu-tipos .mu-tipo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mu-tipo-nom { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mu-fichas .mu-ficha .mu-tipos .mu-contador { display: flex; align-items: center; gap: 3px; flex: none; }
.mu-contador button { flex: none; width: 42px; height: 42px; border-radius: 11px; border: 1.5px solid var(--line-strong);
  background: var(--surface-2); font-size: 20px; font-weight: 800; line-height: 1; color: var(--ink-2); cursor: pointer; }
.mu-contador button:active { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.mu-fichas .mu-ficha .mu-tipos .mu-contador input { flex: none; width: 58px; min-width: 0; height: 42px; padding: 0; text-align: center;
  font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 11px; }
.mu-estado { margin: 0; min-height: 15px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mu-estado.ok { color: var(--good); }
.mu-estado.mal { color: var(--bad); }

.mu-armar { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.mu-armar-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.mu-armar label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.mu-armar-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  position: sticky; bottom: 0; padding: 10px 0; background: var(--surface); }
.mu-armar-pie span { font-size: 14px; font-weight: 700; }
.mu-armar-pie .btn { min-height: 46px; }

.mu-envios { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mu-envio a { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface); text-decoration: none; color: inherit; }
.mu-envio a:hover { border-color: var(--brand); }
.mu-e-warn a { border-left: 4px solid var(--warn); }
.mu-e-good a { border-left: 4px solid var(--good); }
.mu-envio-cod { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mu-envio-cif { font-size: 13px; color: var(--ink-2); }
.mu-envio small { font-size: 11.5px; color: var(--muted); }
@media (max-width: 560px) { .mu-fichas { grid-template-columns: 1fr; } .mu-contador button { width: 44px; height: 44px; } }

/* La conformidad del laboratorio: el estado y su observacion, uno debajo del otro. */
.lb-conf-celda { display: grid; gap: 5px; min-width: 240px; }
.lb-envio .totales { margin-bottom: 14px; }

/* El bloque de Terceros dentro de la VAL interna. Va pegado al sub total, así que tiene que
   leerse como algo aparte de los números y no como una casilla más del cálculo. */
.vl-terceros { border: 1px solid var(--line-strong); border-radius: 14px; padding: 12px 14px; margin: 14px 0 4px; background: var(--surface-2); }
.vl-terceros legend { padding: 0 6px; font-size: 13px; font-weight: 700; }
.vl-terceros legend label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
/* Sí o no, las dos a la vista: es una pregunta obligatoria, no una casilla que se pueda pasar por alto */
.vl-tc-si-no { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vl-tc-si-no label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; background: var(--surface); }
.vl-tc-si-no label:has(input:checked) { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line-strong); }
.vl-tc-caja { display: grid; gap: 10px; margin-top: 8px; }
.vl-tc-quien { display: grid; gap: 8px; margin: 0; }
.vl-tc-quien div { display: grid; grid-template-columns: minmax(0, 210px) 1fr; gap: 10px; align-items: baseline; }
.vl-tc-quien dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.vl-tc-quien dd { margin: 0; font-size: 13.5px; font-weight: 600; }
.vl-tc-quien dd small { display: block; font-weight: 500; }
@media (max-width: 640px) { .vl-tc-quien div { grid-template-columns: 1fr; gap: 2px; } }

/* La firma de Comercial cuando el carro pesa menos que su TMS: aparece dentro del formulario de
   salida, así que se separa de la fecha y del botón para que no se lea como parte de ellos. */
.bsal-bajo { width: 100%; display: grid; gap: 8px; margin-bottom: 4px; }
.bsal-bajo .aut-caja { margin: 0; }

/* La escalera de la carga con una planta (Posición con la planta): cada escalón es un estado,
   y las filas de suma tienen que leerse distinto de los escalones o la tabla se vuelve una lista. */
.data tr.atenuada th, .data tr.atenuada td { color: var(--muted); }
.data tr.suma th, .data tr.suma td { border-top: 1px solid var(--line-strong); background: var(--surface-2); }
.data tr.total th, .data tr.total td { border-top: 2px solid var(--ink); background: var(--surface-2); font-size: 15px; }
.data tr.total.pos td b { color: var(--good); }
.data tr.total.neg td b { color: var(--bad); }
.data tr.total th .cell-sub, .data tr.suma th .cell-sub { font-weight: 500; }

/* Las tres firmas, una debajo de otra: en un voucher angosto tres columnas quedan apretadas
   y el nombre del conductor no entra de una línea. */
.vch-firmas { grid-template-columns: 1fr; gap: 20px; margin-top: 26px; }
.vch-firmas small { line-height: 1.35; }

/* La página del voucher: solo el papel, sin el marco del ERP. Ancho de voucher, no de hoja. */
.vch-pagina { margin: 0; padding: 18px 12px 40px; background: #EEF1F5; }
.vch-pagina .tk-acciones { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0 auto 14px; max-width: 430px; }
.vch-pagina .ticket { max-width: 430px; padding: 18px 20px; }
@media print {
  .vch-pagina { background: #fff; padding: 0; }
  /* Se imprime con el mismo ancho angosto que en pantalla: es un voucher, no una hoja llena.
     Pero la HOJA es A4, no media hoja: el ticket mide unos 27 cm de alto —cabecera, datos, las
     dos pesadas, los pesos, el transporte, las observaciones y tres firmas—, y en un A5 solo hay
     19,4 cm útiles, así que salía partido en dos con las firmas en la segunda hoja. */
  .vch-pagina .ticket { max-width: 110mm; margin: 0; box-shadow: none; }
  @page { size: A4 portrait; margin: 8mm; }
}
.tk-lote { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; border: 2px solid #152A40; border-radius: 8px; padding: 4px 12px; text-align: center; }
.tk-lote small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: #4A5568; }
.tk-lote b { font-family: var(--mono); font-size: 18px; color: #10151C; }
.tk-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0 0 12px; }
.tk-datos .ancho { grid-column: span 2; }
.tk-datos dt { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.tk-datos dd { margin: 1px 0 0; font-weight: 600; font-size: 12.5px; }
.tk-pesos { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 13px; }
/* De dónde salió el peso, debajo de su rótulo. OJO con el nombre: «.tk-sello» ya es el sello
   diagonal grande del ticket, y llamarlo igual se lo habría pisado. */
.tk-origen { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6B7280; }
.tk-pesos th { text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #D5DCE6; color: #374151; }
.tk-pesos td { text-align: right; padding: 6px 8px; border-bottom: 1px solid #D5DCE6; font-variant-numeric: tabular-nums; font-weight: 700; }
.tk-pesos tr.neto th, .tk-pesos tr.neto td { border-top: 2px solid #152A40; font-size: 14px; }
.tk-pesos tr.tmh th, .tk-pesos tr.tmh td { background: #F4EBD6; font-size: 16px; color: #152A40; border-bottom: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tk-lotes { font-size: 12px; }
.tk-lotes thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #6B7280; border-bottom: 1.5px solid #152A40; text-align: right; }
.tk-lotes thead th:first-child, .tk-lotes td:first-child { text-align: left; }
.tk-lotes td { padding: 4px 8px; font-weight: 600; }
.tk-lotes tr.pend td { color: #9CA3AF; font-weight: 500; font-style: italic; }
.tk-obs { margin: 0 0 10px; font-size: 11.5px; }
/* Las firmas se ponen A MANO encima de la raya, así que el sitio que hace falta es el de ARRIBA de
   la línea —el padding—, no la distancia al bloque de antes: con la raya pegada al nombre no
   cabía una firma de verdad. */
.tk-firmas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 44px; }
.tk-firmas div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 42px; }
.tk-firmas span { display: block; width: 100%; border-top: 1px solid #10151C; }
.tk-firmas small { font-size: 10.5px; color: #4A5568; text-align: center; }
.tk-pie { margin-top: 16px; font-size: 9.5px; color: #9CA3AF; text-align: center; }
@media print {
  .ticket { box-shadow: none; max-width: none; margin: 0; padding: 0; border-radius: 0; }
  /* Las firmas no se parten entre dos hojas: o entran juntas, o pasan juntas */
  .tk-firmas { break-inside: avoid; }
}

@media (max-width: 1180px) {
  .bz-trabajo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bz-pesos { grid-template-columns: minmax(0, 1fr); }
  .bz-menos { display: none; }
  .bz-lista li { grid-template-columns: minmax(0, 1fr) auto; }
  .bz-origen, .bz-pasos-exp { grid-template-columns: minmax(0, 1fr); }
  .bz-flecha { transform: rotate(90deg); justify-self: center; }
}

/* ——— Guías · Hoja completa: encabezados claros por grupo, filas aireadas, avance en puntos, tarjetas de filtro ——— */
.dx { padding: 16px 18px; }
.dx-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin: 14px 0 12px; }
.dx-chips button { position: relative; display: flex; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 0; min-height: 62px;
  padding: 9px 12px 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600;
  text-align: left; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.dx-chips button::before { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; }
.dx-chips button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%); background: var(--c); opacity: .75; transition: width .4s ease; }
.dx-chips button b { min-width: 0; padding: 0; background: none; color: var(--ink); font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; text-align: left; }
.dx-chips button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 14px); }
.dx-chips button:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); transform: translateY(-1px); }
.dx-chips button.activo { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--surface)); color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }
.dx-chips button.activo b { background: none; color: color-mix(in srgb, var(--c) 72%, var(--ink)); }
.dx-chips button.vacio { opacity: .5; }
.dx-sig { margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 62px; padding: 8px 12px; border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 14px; font-size: 11.5px; }
.dx-sig b { margin: 0; align-self: flex-start; font-size: 14px; }

.dx-formula { min-height: 36px; border-radius: 12px; background: var(--surface); border-color: var(--line); }
.dx-formula b { margin: 4px; padding: 5px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.dx .hoja-scroll { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); scroll-behavior: auto; }

table.hoja { font-size: 13px; }
table.hoja th, table.hoja td { padding: 0 10px; border-right: 1px solid color-mix(in srgb, var(--line) 50%, transparent); border-bottom: 1px solid var(--line); background: var(--surface); }
table.hoja thead th { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
table.hoja thead tr.grupos th { height: 28px; padding-left: 12px; background: var(--surface); color: var(--ink-2); font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-align: left; box-shadow: inset 0 -3px 0 var(--g, transparent); cursor: pointer; }
table.hoja thead tr.grupos th:hover { background: color-mix(in srgb, var(--g) 9%, var(--surface)); }
table.hoja thead tr.grupos th.fzg, table.hoja thead tr.grupos th.g-av { cursor: default; }
table.hoja thead tr.grupos th.g-av { color: var(--muted); box-shadow: inset 0 -3px 0 var(--line-strong); }
table.hoja thead tr.cols th { top: 28px; height: 36px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; box-shadow: none; cursor: pointer; transition: background .12s, color .12s; }
table.hoja thead tr.cols th:hover { background: var(--surface-3); color: var(--ink); }
table.hoja thead tr.cols th.ed, table.hoja thead tr.cols th.fz2, table.hoja thead tr.cols th.fz2.ed { box-shadow: none; }
table.hoja thead tr.cols th.ed::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--gold); vertical-align: 1px; }
table.hoja thead tr.cols th.col-act { background: var(--brand-soft); color: var(--brand); }
table.hoja thead tr.cols th.ord-asc::before, table.hoja thead tr.cols th.ord-desc::before { margin-right: 4px; font-size: 8px; color: var(--brand); vertical-align: 1px; }
table.hoja thead tr.cols th.ord-asc::before { content: "▲"; }
table.hoja thead tr.cols th.ord-desc::before { content: "▼"; }
table.hoja .fz2, table.hoja thead tr.cols th.fz2 { box-shadow: 1px 0 0 var(--line-strong); }
table.hoja th.gi, table.hoja td.gi { border-left: 1px solid var(--line-strong); }

table.hoja td { height: 34px; font-size: 13px; color: var(--ink); }
table.hoja.amplia td { height: 44px; font-size: 14px; }
table.hoja tbody tr:nth-child(even) td { background: var(--surface); }
table.hoja tbody tr[data-l]:hover td { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
table.hoja tbody tr.pend td { background: var(--surface); }
table.hoja tbody tr.pend td.fz1 { box-shadow: inset 3px 0 0 var(--warn); }
table.hoja tbody tr.nuevo td.fz1 { box-shadow: inset 3px 0 0 #8B5CF6; }
table.hoja td.fz1 a { color: var(--ink); }
table.hoja td.fz2 { color: var(--brand); font-weight: 700; }
table.hoja tbody tr[data-f~="sb"] td.fz2:empty::before { content: "sin código"; color: var(--warn); font-family: inherit; font-size: 11.5px; font-weight: 600; font-style: italic; }
table.hoja td.bal { color: var(--muted); }
table.hoja tbody tr.fila-act td { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); box-shadow: none; }
table.hoja tbody tr.fila-act td.fz1 { box-shadow: inset 3px 0 0 var(--brand); }
table.hoja td.activa { outline: 2px solid var(--brand); outline-offset: -2px; }
table.hoja td.editando input:not([type=checkbox]) { height: 100%; font-size: 13px; box-shadow: inset 0 0 0 2px var(--brand); }
table.hoja td.sel { background: color-mix(in srgb, var(--brand) 14%, var(--surface)) !important; }
table.hoja tbody tr.g1 td.gg { background: color-mix(in srgb, #3B82F6 8%, var(--surface)); }
table.hoja tbody tr.g2 td.gg { background: color-mix(in srgb, #8B5CF6 8%, var(--surface)); }
table.hoja tbody tr.sep td { height: 38px; background: var(--warn-soft); color: var(--warn); border-top: 0; font-size: 11.5px; letter-spacing: .03em; }
table.hoja .ch { padding: 0 9px; font-size: 11px; line-height: 20px; }
@keyframes dx-ok { from { background: color-mix(in srgb, var(--good) 35%, var(--surface)); } }

table.hoja th.av, table.hoja td.av { min-width: 168px; max-width: 168px; }
.avz { display: flex; align-items: center; gap: 8px; }
.avz .pts { display: inline-flex; gap: 3px; flex: none; }
.avz i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.avz i.on { background: var(--good); box-shadow: none; }
.avz b { overflow: hidden; font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-overflow: ellipsis; }
table.hoja td.av-ok .avz b { color: var(--good); }
table.hoja td.av-guia .avz b { color: var(--warn); }

.dx-panel { background: var(--surface); border-color: var(--line); border-radius: 18px; }
@media (prefers-reduced-motion: reduce) { .dx-chips button, .dx-chips button::after { transition: none; } }
table.hoja .fz2 { left: 128px; min-width: 142px; max-width: 142px; }

/* Guías: sumar lotes a una guía que ya existe */
.gb-sumar { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface-2); }
.gb-sumar > span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.gb-sumar [data-gb-sumar-lista] { display: grid; gap: 6px; }
.gb-sumar button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: baseline; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gb-sumar button:hover { border-color: var(--brand); background: var(--brand-soft); }
.gb-sumar button span { overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.gb-sumar button small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
.gb-existe { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--ink); font-size: 12.5px; line-height: 1.5; }
.gb-existe.mal { background: var(--warn-soft); }
.gb-sub-nota { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 500; }

/* Guías: buscar una guía que ya existe mientras se escribe el N° */
.gb-grr-caja { position: relative; }
.gb-grr-caja > label { display: flex; flex-direction: column; }
.gb-sug { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; display: grid; gap: 4px; max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-up, 0 12px 28px rgba(0, 0, 0, .14)); }
.gb-sug[hidden] { display: none; }
.gb-sug button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: baseline; padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gb-sug button:hover, .gb-sug button:focus-visible { background: var(--brand-soft); }
.gb-sug button span { overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.gb-sug button small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
.gb-sug p { margin: 2px 10px 4px; color: var(--muted); font-size: 11.5px; }

/* Hoja completa: la guía del lote con sus lotes */
.dxp-guia-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.dxp-guia-cab span { color: var(--muted); font-size: 11.5px; }
.dxp-guia li { grid-template-columns: minmax(0, 1fr) auto 52px 22px; align-items: center; }
.dxp-guia li i { font-style: normal; font-size: 11px; text-align: center; }
.dxp-x { width: 22px; height: 22px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }
.dxp-x:hover { border-color: var(--bad); background: var(--bad); color: #fff; }
.dxp-agregar { display: flex; gap: 6px; margin-top: 8px; }
.dxp-agregar input { flex: 1; min-width: 0; min-height: 32px !important; padding: 4px 9px !important; font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 12.5px !important; text-transform: uppercase; }
.dxp-sincod { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; color: var(--ink-2); font-size: 11.5px; cursor: pointer; }
.dxp-sincod input { margin-top: 2px; }
.dxp-nota { display: block; margin-top: 6px; color: var(--muted); }

/* Guías: datos que vienen de la guía elegida */
.gb-campos .gb-fijo { background: var(--surface-2) !important; color: var(--ink-2); border-style: dashed !important; cursor: default; }
select.gb-fijo { pointer-events: none; }
.dxp-motivo { display: grid; gap: 4px; margin-top: 8px; color: var(--warn); font-size: 11.5px; font-weight: 600; }
.dxp-motivo select { min-height: 32px !important; padding: 4px 8px !important; font-size: 12px !important; }

/* Hoja completa: acceso a lo que falta asignar (no sale en la hoja) */
.dx-sig.dx-porasignar { border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); color: var(--warn); font-weight: 700; text-decoration: none; }
.dx-sig.dx-porasignar b { border: 0; background: none; padding: 0; color: var(--warn); font-size: 16px; }
.dx-sig.dx-porasignar:hover { border-color: var(--warn); }

/* Orden de los códigos BJ */
.gb-reglas { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.dxp-candado { font-size: 11px; }
.dxp-candado:hover { border-color: var(--warn); background: var(--warn-soft); color: var(--ink); }

/* ——— Guías · hoja de guías: tarjetas por guía, agrupadas por día de llegada ——— */
.gx { display: grid; gap: 14px; }
.gx.cargando .gx-lista { opacity: .55; pointer-events: none; transition: opacity .2s; }
.gx-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.gx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 13px; background: var(--surface-3); }
.gx-seg a { padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.gx-seg a:hover { color: var(--ink); }
.gx-seg a.activo { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px -6px rgba(0, 0, 0, .2); }
.gx-buscar { position: relative; flex: 1 1 280px; display: flex; align-items: center; margin: 0; }
.gx-buscar .ico { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.gx .gx-buscar input { min-height: 40px; padding-left: 38px; border-radius: 12px; font-size: 14px; }
.gx-filtros { display: flex; gap: 8px; margin: 0; }
.gx-filtros select, .gx-orden select { width: auto; min-height: 40px; border-radius: 12px; font-size: 13px; }
.gx-orden { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }

.gx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.gx-kpi { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; }
.gx-kpi b { font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gx-kpi i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p); background: var(--c); border-radius: 0 4px 0 0; transition: width .45s var(--ease-out); }
.gx-kpi::after { content: ""; position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.gx-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); }
.gx-kpi.activo { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 15%, transparent); }
.gx-kpi.activo b { color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
.gx-kpi.vacio { opacity: .5; }

.gx-avisos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gx-aviso { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.gx-aviso:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 35%, transparent); }
.gx-sig { margin-left: auto; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.gx-sig b { margin-left: 4px; padding: 3px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); }

.gx-lista { display: grid; gap: 8px; }
.gx-vacio { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 18px; }
.gx-dia { position: sticky; top: 0; z-index: 4; display: flex; align-items: baseline; gap: 12px; margin-top: 10px; padding: 10px 4px 6px; background: var(--bg); }
.gx-dia:first-child { margin-top: 0; }
.gx-dia b { font-size: 15px; font-weight: 800; color: var(--ink); }
.gx-dia span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.gx-guia { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: box-shadow .2s, border-color .2s; }
.gx-guia:hover { border-color: var(--line-strong); box-shadow: 0 6px 22px -14px rgba(15, 32, 51, .35); }
.gx-guia.abierta { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: 0 10px 30px -16px rgba(15, 32, 51, .45); }
.gx-guia.con-nc { box-shadow: inset 3px 0 0 var(--bad); }
.gx-guia.con-nc.abierta { box-shadow: inset 3px 0 0 var(--bad), 0 10px 30px -16px rgba(15, 32, 51, .45); }
.gx-cab { display: grid; grid-template-columns: 158px minmax(0, 1.3fr) minmax(170px, .9fr) auto 104px 18px; gap: 16px; align-items: center; width: 100%;
  padding: 12px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 16px; }
.gx-cab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.gx-grr { display: flex; flex-direction: column; min-width: 0; }
.gx-grr small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gx-grr b { font-size: 16px; letter-spacing: .01em; }
.gx-grr em { align-self: flex-start; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-style: normal; font-size: 11px; font-weight: 600; }
.gx-grr em.falta { background: var(--warn-soft); color: var(--warn); }
.gx-prov { display: flex; flex-direction: column; min-width: 0; }
.gx-prov b { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.gx-prov small { overflow: hidden; font-size: 12px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.gx-peso { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gx-peso-num { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gx-peso-num b { font-size: 14px; color: var(--ink); }
.gx-medidor { position: relative; display: flex; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.gx-medidor i { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.gx-medidor i.exceso { background: var(--bad); border-radius: 0 99px 99px 0; }
.gx-peso.mal .gx-medidor i:first-child { background: color-mix(in srgb, var(--warn) 80%, var(--good)); }
.gx-peso small { font-size: 11.5px; color: var(--muted); }
.gx-peso.mal small { color: var(--bad); font-weight: 600; }
.gx-peso.sin small { color: var(--warn); }
.gx-estados { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gx-est { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.gx-est i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.gx-est b { font-variant-numeric: tabular-nums; }
.gx-est.ok { background: var(--good-soft); color: var(--good); }
.gx-est.ok i { background: var(--good); }
.gx-est.parcial { background: var(--warn-soft); color: var(--warn); }
.gx-est.parcial i { background: conic-gradient(var(--warn) 0 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--warn); }
.gx-est.no { background: var(--bad-soft); color: var(--bad); }
.gx-est.no i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bad); }
.gx-est.nc.ok { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 40%, transparent); }
.gx-bj { display: flex; flex-direction: column; align-items: flex-end; }
.gx-bj b { font-size: 14px; color: var(--brand); }
.gx-bj small { font-size: 11.5px; color: var(--muted); }
.gx-chev { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s; }
.gx-guia.abierta .gx-chev { transform: rotate(225deg) translate(-2px, -2px); border-color: var(--brand); }

.gx-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease-out); }
.gx-guia.abierta .gx-cuerpo { grid-template-rows: 1fr; }
.gx-in { min-height: 0; overflow: hidden; }
.gx-guia.abierta .gx-in { border-top: 1px solid var(--line); }
.gx-tabla { overflow-x: auto; padding: 4px 8px 0; }
.gx-tabla table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gx-tabla th { padding: 10px 10px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; }
.gx-tabla td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.gx-tabla td small { display: block; font-size: 11px; color: var(--muted); }
.gx-tabla td small.ok { color: var(--good); }
.gx-tabla .r { text-align: right; }
.gx-tabla tbody tr { cursor: pointer; transition: background .12s; }
.gx-tabla tbody tr:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.gx-tabla tbody tr.sel { background: var(--brand-soft); }
.gx-lote { font-weight: 700; }
.gx-bjpill { padding: 2px 8px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 12.5px; }
.gx-ruta { display: inline-flex; gap: 3px; }
.gx-ruta i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.gx-ruta i.on { background: var(--good); box-shadow: none; }
.gx-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.gx-chip.ok { background: var(--good-soft); color: var(--good); }
.gx-chip.no { background: var(--surface-3); color: var(--muted); font-weight: 600; }
.gx-acc { text-align: right; }
.gx-x { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.gx-x:hover { border-color: var(--bad); background: var(--bad); color: #fff; }
.gx-x.candado { font-size: 11px; }
.gx-x.candado:hover { border-color: var(--warn); background: var(--warn-soft); color: var(--ink); }
.gx-candado { font-size: 11px; opacity: .7; }
.gx-pie { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 12px 18px 14px; }
.gx-datos { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.gx-datos div { display: flex; flex-direction: column; }
.gx-datos dt { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gx-datos dd { margin: 0; font-size: 13px; }
.gx-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gx-acciones input, .gx-acciones select { width: auto; min-height: 34px !important; padding: 4px 10px !important; font-size: 12.5px !important; border-radius: 10px; }
.gx-acciones input { width: 170px; font-family: 'IBM Plex Mono', Consolas, monospace; text-transform: uppercase; }
.gx-nota { font-size: 12px; color: var(--muted); }
.gx-editar { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; margin: 0 18px 16px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); animation: gx-entra .2s ease-out; }
.gx-editar label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.gx-editar label small { font-weight: 500; color: var(--muted); }
.gx-editar input, .gx-editar select { background: var(--surface); }
.gx-editar-acc { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.gx-editar-acc small { color: var(--muted); }
@keyframes gx-entra { from { opacity: 0; transform: translateY(-4px); } }

.gx-panel { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(400px, 100vw); pointer-events: none; }
.gx-panel-caja { position: absolute; inset: 12px 12px 12px auto; width: calc(100% - 12px); overflow-y: auto; padding: 20px; border: 1px solid var(--line-strong); border-radius: 20px;
  background: var(--surface); box-shadow: -20px 0 50px -20px rgba(15, 32, 51, .45); transform: translateX(110%); transition: transform .25s var(--ease-out); pointer-events: auto; }
.gx-panel.abierto .gx-panel-caja { transform: none; }
.gx-cerrar { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-size: 18px; cursor: pointer; }
.gx-cerrar:hover { background: var(--line-strong); color: var(--ink); }
.gx-p-cab { display: flex; flex-direction: column; gap: 2px; padding-right: 40px; }
.gx-p-cab small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gx-p-cab b { font-size: 15px; }
.gx-p-bj { font-size: 24px; font-weight: 800; color: var(--brand); letter-spacing: -.01em; }
.gx-p-prov { display: flex; flex-direction: column; margin: 12px 0 16px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gx-p-prov span { font-size: 12.5px; color: var(--muted); }
.gx-p-pasos { margin: 0; padding: 0; list-style: none; }
.gx-p-pasos li { position: relative; padding: 0 0 14px 26px; font-size: 13px; }
.gx-p-pasos li::before { content: ""; position: absolute; top: 16px; bottom: 0; left: 6px; width: 2px; background: var(--line-strong); }
.gx-p-pasos li:last-child::before { display: none; }
.gx-p-pasos li i { position: absolute; top: 2px; left: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
.gx-p-pasos li.hecho i { border-color: var(--good); background: var(--good); box-shadow: inset 0 0 0 2px var(--surface); }
.gx-p-pasos li.hecho::before { background: color-mix(in srgb, var(--good) 45%, var(--line)); }
.gx-p-pasos b { display: block; }
.gx-p-pasos span { color: var(--muted); }
.gx-p-pasos li.hecho span { color: var(--ink-2); }
.gx-p-nc { margin: 4px 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; }
.gx-p-nc.no { background: var(--bad-soft); color: var(--bad); }
.gx-p-nc.ok { background: var(--good-soft); color: var(--good); }
.gx-p-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-toast { position: fixed; left: 50%; bottom: 22px; z-index: 90; max-width: min(640px, calc(100vw - 32px)); padding: 11px 18px; border-radius: 14px; background: var(--ink); color: var(--surface);
  font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); transform: translateX(-50%); animation: gx-toast .25s ease-out; }
.gx-toast.bad { background: var(--bad); color: #fff; }
.gx-toast.warn { background: var(--warn); color: #fff; }
@keyframes gx-toast { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (max-width: 1100px) {
  .gx-cab { grid-template-columns: 140px minmax(0, 1fr) auto 18px; }
  .gx-peso { grid-column: 2; }
  .gx-estados { grid-column: 1 / 4; justify-content: flex-start; }
  .gx-bj { grid-row: 1; grid-column: 3; }
  .gx-chev { grid-row: 1; grid-column: 4; }
}
@media (max-width: 640px) {
  .gx-cab { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 8px 12px; }
  .gx-prov, .gx-peso, .gx-estados { grid-column: 1 / -1; }
  .gx-bj { grid-column: 2; }
  .gx-chev { grid-column: 3; }
  .gx-sig { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .gx-cuerpo, .gx-panel-caja, .gx-kpi, .gx-kpi i, .gx-chev { transition: none; } .gx-editar, .gx-toast { animation: none; } }

/* ——— En cancha: por sede, ordenado por código BJ, con el estado de cada lote ——— */
.ck { display: grid; gap: 14px; padding-bottom: 80px; }
.ck-sedes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ck-sede { position: relative; display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; }
.ck-sede::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); opacity: 0; transition: opacity .15s; }
.ck-sede:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.ck-sede.activo { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }
.ck-sede.activo::before { opacity: 1; }
.ck-sede-cab { display: flex; align-items: center; gap: 10px; }
.ck-sede-cab i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c); color: #fff; font-style: normal; font-weight: 800; font-size: 13px; }
.ck-sede-cab b { font-size: 16px; }
.ck-sede-num { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ck-sede-num b { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-right: 2px; }
.ck-sede-sub { font-size: 12px; color: var(--muted); }
.ck-sede-sub b { color: var(--ink-2); }
.ck-barra { display: block; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.ck-barra i { display: block; height: 100%; background: #1D4ED8; border-radius: 99px; }

.ck-herr { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ck-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-estados button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 7px 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.ck-estados button b { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.ck-estados button:hover { border-color: var(--c); color: var(--ink); }
.ck-estados button.activo { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: var(--ink); }
.ck-estados button.activo b { background: var(--c); color: #fff; }
.ck-estados button.vacio { opacity: .45; }
.ck-buscar { position: relative; flex: 1 1 260px; display: flex; align-items: center; margin: 0; }
.ck-buscar .ico { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.ck .ck-buscar input { min-height: 40px; padding-left: 38px; border-radius: 12px; }

.ck-destinos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.ck-destinos-tit { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.ck-dest { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ck-dest i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; }
.ck-dest b { font-variant-numeric: tabular-nums; }
.ck-dest small { color: var(--muted); font-weight: 500; }
.ck-dest:hover, .ck-dest.activo { border-color: var(--c); }
.ck-dest.activo { background: color-mix(in srgb, var(--c) 10%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 18%, transparent); }
.ck-resumen { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.ck-quitar { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

.ck-grupo { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.ck-grupo-cab { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: color-mix(in srgb, var(--c) 7%, var(--surface));
  border-bottom: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--c); }
.ck-grupo-tit { display: flex; align-items: center; gap: 8px; }
.ck-grupo-tit i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--c); color: #fff; font-style: normal; font-weight: 800; font-size: 12px; }
.ck-grupo-tit b { font-size: 16px; }
.ck-grupo-num { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ck-check { display: grid; place-items: center; margin: 0; }
.ck-tabla { overflow-x: auto; }
.ck-tabla table { width: 100%; min-width: 1060px; border-collapse: collapse; font-size: 13px; }
.ck-tabla th { padding: 10px 12px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; }
.ck-tabla th.r, .ck-tabla td.r { text-align: right; }
.ck-tabla td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.ck-tabla td small { display: block; font-size: 11.5px; color: var(--muted); }
.ck-tabla tbody tr { cursor: pointer; transition: background .12s; }
.ck-tabla tbody tr:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.ck-tabla tbody tr.marcada { background: var(--brand-soft); }
.ck-c0 { width: 36px; }
/* El lote (BH/BL) manda: va grande. El código BJ va debajo, chico, porque es el dato de la guía. */
.ck-cod { white-space: nowrap; }
.ck-lote { display: block; font-size: 15px; font-weight: 800; color: var(--brand); text-decoration: none; letter-spacing: .01em; }
.ck-bj { display: block; font-size: 11.5px; color: var(--ink-3); text-decoration: none; }
.ck-bj.falta { font-size: 11.5px; font-weight: 600; font-style: italic; color: var(--warn); }
.ck-lote:hover, .ck-bj:hover { text-decoration: underline; }
/* De dónde salió el lote: una parte de otro, o su reingreso. No es mineral que entró por la puerta */
.ck-origen { display: inline-block; margin-top: 3px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  text-decoration: none; color: #6D28D9; background: color-mix(in srgb, #6D28D9 12%, var(--surface)); }
.ck-origen:hover { background: color-mix(in srgb, #6D28D9 20%, var(--surface)); }
/* En qué montón va. En oro, que es el color del blending en todo el ERP, y distinto del morado
   de «parte de»: son dos cosas que se parecen en la forma y no tienen nada que ver —una dice de
   dónde SALIÓ el lote, la otra con quién SALE—, y un lote puede llevar las dos a la vez. */
.ck-blend { display: inline-block; margin-top: 3px; margin-left: 4px; padding: 0 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; text-decoration: none;
  color: var(--gold-text); background: color-mix(in srgb, var(--gold) 16%, var(--surface)); }
.ck-blend:hover { background: color-mix(in srgb, var(--gold) 28%, var(--surface)); }
.op-origen { text-decoration: none; }
.op-origen:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.ck-prov { max-width: 300px; }
.ck-prov b { display: block; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ck-tmh b { font-size: 14px; font-variant-numeric: tabular-nums; }
.ck-dias { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 9px; border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ck-dias b { font-size: 13px; }
.ck-dias.viejo { background: var(--warn-soft); color: var(--warn); }
.ck-dias.muy { background: var(--bad-soft); color: var(--bad); }
.ck-pasos { display: inline-flex; flex-wrap: wrap; gap: 3px 4px; max-width: 250px; }
.ck-pasos span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ck-pasos span i { width: 7px; height: 7px; border-radius: 50%; }
.ck-pasos .ok { background: var(--good-soft); color: var(--good); }
.ck-pasos .ok i { background: var(--good); }
.ck-pasos .no { background: var(--surface-3); color: var(--muted); }
.ck-pasos .no i { box-shadow: inset 0 0 0 1.5px var(--muted); }
/* El paso a medias: el chancado empezado y el muestreo con fecha pero todavía sin hacer */
.ck-pasos .medio { background: var(--warn-soft); color: var(--warn); }
.ck-pasos .medio i { background: var(--warn); }
.ck-prog { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ck-prog small { display: inline !important; }
.ck-sinprog { display: inline-block; padding: 2px 10px; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ck-ubi { max-width: 220px; color: var(--ink-2); font-size: 12.5px; }

.ck-accion { position: fixed; left: 50%; bottom: 18px; z-index: 60; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 18px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 40px -14px rgba(15, 32, 51, .45);
  transform: translateX(-50%); animation: ck-sube .2s ease-out; }
.ck-accion[hidden] { display: none; }
.ck-accion-sel { font-size: 13.5px; white-space: nowrap; }
.ck-accion-prog { display: flex; gap: 6px; align-items: center; }
.ck-accion-prog input { width: auto; min-height: 36px; }
.ck-accion-prog input[name=destino] { width: 190px; }
.ck-accion-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-size: 16px; cursor: pointer; }
@keyframes ck-sube { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (max-width: 640px) { .ck-accion { left: 16px; right: 16px; transform: none; } .ck-accion-prog { flex-wrap: wrap; } @keyframes ck-sube { from { opacity: 0; } } }
@media (prefers-reduced-motion: reduce) { .ck-sede, .ck-accion { transition: none; animation: none; } }

/* ——— Kardex de mineral: kardex valorizado ——— */
.kx { display: grid; gap: 16px; }
.kx-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.kx-per { display: flex; flex-wrap: wrap; gap: 4px; }
.kx-per a { padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.kx-per a:hover { background: var(--surface-3); color: var(--ink); }
.kx-per a.activo { background: var(--brand); color: #fff; }
.kx-rango { display: flex; gap: 6px; align-items: center; margin: 0 0 0 auto; }
.kx-rango label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.kx-rango input { width: auto; min-height: 34px; font-size: 12.5px; }
.kx-cab { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: flex-end; justify-content: space-between; }
.kx-cab small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kx-cab h2 { margin: 2px 0 0; font-size: 22px; letter-spacing: -.01em; }
.kx-cab-nota { font-size: 12px; color: var(--muted); }

.kx-estado { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; }
.kx-cel { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); min-width: 0; }
.kx-et { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.kx-cel > b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kx-cel > span:not(.kx-et) { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: -2px; }
.kx-cel small { font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kx-cel em { font-style: normal; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.kx-cel.in { background: color-mix(in srgb, var(--good) 6%, var(--surface)); border-color: color-mix(in srgb, var(--good) 25%, var(--line)); }
.kx-cel.in > b { color: var(--good); }
.kx-cel.out { background: color-mix(in srgb, var(--warn) 6%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 25%, var(--line)); }
.kx-cel.out > b { color: var(--warn); }
.kx-cel.fin { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.kx-cel.fin > b { color: var(--brand); }
.kx-op { display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 800; color: var(--muted); }

.kx-ind { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.kx-ind > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.kx-ind span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.kx-ind b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kx-ind b small { font-size: 12px; color: var(--muted); font-weight: 700; }
.kx-ind em { font-style: normal; font-size: 11.5px; color: var(--ink-2); }
.kx-medidor { display: block; height: 6px; margin: 3px 0; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.kx-medidor i { display: block; height: 100%; background: #1D4ED8; border-radius: 99px; }

.kx-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.kx-tramos { display: grid; gap: 12px; }
.kx-tramo { display: grid; grid-template-columns: 96px minmax(0, 1fr) 130px; gap: 12px; align-items: center; }
.kx-tramo-et { font-size: 12px; color: var(--muted); }
.kx-tramo-et b { display: block; font-size: 13.5px; color: var(--ink); }
.kx-tramo-barra { display: flex; height: 18px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.kx-tramo-barra i { display: block; height: 100%; background: var(--c); }
.kx-tramo.t31 .kx-tramo-et b { color: var(--warn); }
.kx-tramo.t60 .kx-tramo-et b { color: var(--bad); }
.kx-tramo-num { text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kx-tramo-num b { font-size: 15px; color: var(--ink); }
.kx-tramo-num small { display: block; font-size: 11px; }
.kx-leyenda { display: flex; gap: 14px; margin: 12px 0 0; font-size: 12px; color: var(--ink-2); }
.kx-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.kx-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.kx-conc { display: grid; gap: 3px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; }
.kx-conc.ok { background: var(--good-soft); color: var(--good); }
.kx-conc.dif { background: var(--warn-soft); color: var(--ink-2); }
.kx-conc.dif b { color: var(--warn); }
.kx-conc span { color: var(--ink-2); }

.kx-tabla th.c { text-align: center; }
.kx-tabla .kx-th-sal { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.kx-tabla .kx-th-fin { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.kx-tabla td.kx-in, .kx-mov td.kx-in { color: var(--good); }
.kx-tabla td.kx-out, .kx-mov td.kx-out { color: var(--warn); }
.kx-tabla tfoot td { font-weight: 800; border-top: 2px solid var(--ink); }
.kx-mov-herr { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.kx-mov-scroll { max-height: 620px; }
.kx-tipo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.kx-tipo.in { background: var(--good-soft); color: var(--good); }
.kx-tipo.out { background: var(--warn-soft); color: var(--warn); }.filters .check input[type=checkbox] { min-width: 0; width: auto; }
/* Trazabilidad: ingresos por mes */
.tz-meses { margin-bottom: 16px; }
.tz-meses .panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tz-meses .panel-head .btn { margin-left: auto; }
.tz-meses-tabla { font-variant-numeric: tabular-nums; }
.tz-meses-tabla td, .tz-meses-tabla th { white-space: nowrap; }
.tz-mes-barra, .tz-mes-barra-h { width: 26%; min-width: 120px; }
.tz-mes-barra div { display: flex; align-items: center; gap: 8px; }
.tz-mes-barra span { flex: 1; min-width: 60px; }
.tz-mes-barra i { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #c89b2c, #e5c877); min-width: 3px; }
.tz-mes-barra small { width: 44px; text-align: right; font-size: 11px; color: var(--muted, #6b7280); }
.tz-meses-tabla tfoot th { border-top: 2px solid var(--line-strong, #cbd2da); font-size: 14px; }

/* ═══════════ Reporte de leyes y canje (lx) · Simulador de cierre (sx) · Tarjeta para el proveedor (lxf) ═══════════
   Colores con sentido: azul = laboratorio (interno), violeta = lo del proveedor (su certificado), dorado = tu propuesta. */
.lx, .sx {
  --int: var(--sky-text); --int-bg: color-mix(in srgb, var(--sky) 7%, var(--surface));
  --prv: #6E4FB0; --prv-bg: color-mix(in srgb, #6E4FB0 8%, var(--surface));
  --prp: var(--gold-text); --prp-bg: color-mix(in srgb, var(--gold) 9%, var(--surface));
}
:root[data-theme="dark"] .lx, :root[data-theme="dark"] .sx { --prv: #BCA6F4; }
.lx-et { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.lx-link { background: none; border: 0; padding: 0; color: var(--brand-text); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.lx-link:hover { text-decoration: underline; }
.lx-tipo { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.lx-tipo.reporte { background: var(--gold-soft); color: var(--gold-text); }
.lx-tipo.canje { background: var(--brand-soft); color: var(--brand-text); }
.lx-estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.lx-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lx-estado.borrador { background: var(--sky-soft); color: var(--sky-text); }
.lx-estado.enviado { background: var(--good-soft); color: var(--good); }
.lx-estado.anulado { background: var(--surface-3); color: var(--muted); text-decoration: line-through; }
.lx-check { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.lx-check input { appearance: none; -webkit-appearance: none; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .15s; }
.lx-check input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.lx-check input:checked { background: var(--gold); }
.lx-check input:checked::after { transform: translateX(14px); }
.lx-check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lx-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; background: var(--surface-3); border-radius: 999px; }
.lx-seg label { cursor: pointer; }
.lx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.lx-seg span, .lx-seg a { display: block; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.lx-seg input:checked + span, .lx-seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 26, 46, .16); }
.lx-seg input:focus-visible + span { outline: 2px solid var(--gold); }

/* ── Reporte de leyes: la página ── */
.lx { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lx > *, .lx-filtros > * { min-width: 0; max-width: 100%; }
.lx .lx-trabajo .table-scroll { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.lx .lxf-grupo .lxf-tabla { min-width: 0; }
.lx-flujo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .85fr); gap: 10px; }
.lx-paso { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; min-width: 0; }
.lx-paso:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.lx-paso.on { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent), var(--shadow); }
.lx-paso-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-weight: 800; font-size: 14px; }
.lx-paso-n .ico { width: 16px; height: 16px; }
.lx-paso.on .lx-paso-n { background: var(--gold); color: #2A1C00; }
.lx-paso-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lx-paso-t b { font-size: 14.5px; }
.lx-paso-t small { font-size: 11.5px; color: var(--muted); }
.lx-paso-c { margin-left: auto; text-align: right; font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.lx-paso-c small { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.lx-filtros { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.lx-filtros-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.lx-buscar { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.lx .lx-buscar input[type="search"] { border: 0; background: transparent; box-shadow: none; padding: 9px 0; min-width: 0; width: 100%; min-height: 0; }
.lx .lx-filtros-f select { min-width: 150px; width: auto; border-radius: 999px; }
.lx-f-fecha { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.lx .lx-f-fecha input[type="date"] { width: auto; min-width: 0; border-radius: 999px; padding: 6px 12px; }
.lx-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.lx-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lx-chips button b { padding: 0 7px; border-radius: 999px; background: var(--surface-3); font-size: 11px; }
.lx-chips button:hover { border-color: var(--line-strong); color: var(--ink); }
.lx-chips button.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.lx-chips button.on b { background: color-mix(in srgb, var(--surface) 22%, transparent); }
.lx-chips .lx-chip-sim { border-color: color-mix(in srgb, var(--int) 40%, transparent); color: var(--int); }
.lx-chips .lx-chip-sim.on { background: var(--int); border-color: var(--int); color: #fff; }
.lx-sinlab { border-radius: 12px; background: var(--warn-soft); }
.lx-sinlab > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--warn); font-weight: 600; list-style: none; }
.lx-sinlab > summary::-webkit-details-marker { display: none; }
.lx-sinlab > summary .hint { color: color-mix(in srgb, var(--warn) 70%, var(--ink-2)); }
.lx-sinlab > summary .lx-link { margin-left: auto; color: var(--warn); }
.lx-sinlab-n { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 12px; font-weight: 800; }
.lx-sinlab-lista { display: flex; flex-wrap: wrap; gap: 6px; max-height: 200px; overflow-y: auto; padding: 0 12px 12px; }
.lx-sinlab-lista a { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; text-decoration: none; }
.lx-sinlab-lista small { color: var(--muted); }

/* El área de trabajo: herramientas, resumen, tabla y barra de envío */
.lx-trabajo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.lx-herr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.lx-herr-regla, .lx-herr-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lx .lx-herr input.lx-valor { width: 80px; min-width: 0; padding: 6px 10px; border-radius: 999px; text-align: right; font-weight: 800; font-size: 14px; }
.lx-regla-txt { font-size: 12px; color: var(--muted); }
.lx-atajo-g { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px 4px 3px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.lx-atajo-g em { margin-right: 4px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
.lx-atajo-g button { padding: 4px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--prp); font-size: 12px; font-weight: 700; cursor: pointer; }
.lx-atajo-g button:hover { background: var(--prp-bg); }
.lx-g-cert button { color: var(--prv); } .lx-g-cert button:hover { background: var(--prv-bg); }
.lx-g-rec button { color: var(--good); } .lx-g-rec button:hover { background: var(--good-soft); }
.lx-dest { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.lx-dest > label:not(.lx-check), .lx-envio-campos > label:not(.lx-check), .lx-pie label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.lx-dest > label:first-child { flex: 1 1 260px; }
.lx-dest-ruc { flex: 0 0 150px; } .lx-dest-ruc small { font-weight: 500; }
.lx .lx-dest input[name]:not([type="checkbox"]), .lx .lx-envio-campos input[name]:not([type="checkbox"]), .lx .lx-pie input[name]:not([type="checkbox"]) { padding: 9px 12px; border-radius: 10px; min-width: 0; width: 100%; }
.lx-resumen { padding: 10px 18px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.lx-resumen:empty { display: none; }
.lx-resumen.lleno { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; color: var(--ink); }
.lx-m-cab { display: flex; flex-direction: column; line-height: 1.2; padding-right: 8px; border-right: 1px solid var(--line); }
.lx-m-cab b { font-size: 15px; }
.lx-m-cab small { font-size: 11.5px; color: var(--muted); }
.lx-m { display: flex; flex-direction: column; line-height: 1.2; }
.lx-m small { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.lx-m b { font-size: 17px; font-variant-numeric: tabular-nums; }
.lx-m em { font-style: normal; font-size: 11.5px; color: var(--ink-2); }
.lx-m.int b { color: var(--int); } .lx-m.prv b { color: var(--prv); } .lx-m.prop b { color: var(--prp); }
.lx-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.lx-tabla th { padding: 8px 10px; text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line); background: var(--surface); }
.lx-tabla .r { text-align: right; }
.lx-bandas th { padding: 10px 10px 2px; border-bottom: 0; font-size: 10px; letter-spacing: .1em; }
.lx-bandas th[class*="b-"] { box-shadow: inset 0 2px 0 currentColor; }
.lx-bandas .b-int, .lx-tabla th.b-int { color: var(--int); }
.lx-bandas .b-neg { color: var(--prv); }
.lx-bandas .b-prop { color: var(--prp); }
.lx-tabla td { padding: 10px; font-size: 13.5px; vertical-align: top; border-bottom: 1px solid var(--line); }
.lx-tabla tbody tr:last-child td { border-bottom: 0; }
.lx-tabla td.b-int, .lx-tabla thead tr:not(.lx-bandas) th.b-int { background: var(--int-bg); }
.lx-tabla td.lx-p { background: var(--prp-bg); }
.lx-tabla td b { font-weight: 700; }
.lx-tabla td.b-int b { color: var(--int); }
.lx-tabla td small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.lx-tabla td small a { color: inherit; }
.lx-tabla .bien { color: var(--good); font-weight: 700; } .lx-tabla .mal { color: var(--bad); font-weight: 700; } .lx-tabla .mej { color: var(--prp); font-weight: 700; }
.lx-sel { width: 34px; }
.lx-sel input { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; }
.lx-lote { min-width: 200px; }
.lx-lote b.mono { font-size: 13.5px; }
.lx-lote a.mono { font-size: 12px; color: var(--muted); text-decoration: none; }
.lx-lote a.mono:hover { color: var(--ink); text-decoration: underline; }
.lx-emp { display: flex; align-items: center; gap: 6px; margin-top: 5px; min-width: 0; }
.lx-emp .prov { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.lx-emp small { margin: 0 !important; font-size: 10.5px !important; }
.lx .lx-tabla input.lx-in { width: 78px; min-width: 0; min-height: 0; height: auto; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lx .lx-tabla input.lx-in:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); outline: 0; }
.lx .lx-tabla input.lx-au { width: 90px; font-size: 15px; border-color: color-mix(in srgb, var(--gold) 55%, var(--line-strong)); }
.lx .lx-tabla input.lx-rec { width: 62px; border-color: color-mix(in srgb, var(--good) 40%, var(--line-strong)); }
.lx .lx-tabla input.lx-cert { border-color: color-mix(in srgb, var(--prv) 45%, var(--line-strong)); background: var(--prv-bg); }
.lx .lx-tabla input.lx-in.fijo { box-shadow: inset 3px 0 0 var(--prp); }
.lx .lx-tabla input.lx-del-sim { border-color: color-mix(in srgb, var(--int) 60%, transparent); background: var(--int-bg); box-shadow: inset 3px 0 0 var(--int); }
.lx-big { font-size: 16px; }
.lx-sim { display: inline-block; margin-top: 6px; padding: 1px 9px; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.lx-sim:hover { border-color: var(--int); color: var(--int); }
.lx-sim.si { border: 1px solid color-mix(in srgb, var(--int) 30%, transparent); background: var(--int-bg); color: var(--int); }
.lx-sin-ag .col-ag { display: none; }
.lx-nuevo tbody tr.marcado td { background-image: linear-gradient(color-mix(in srgb, var(--gold) 6%, transparent), color-mix(in srgb, var(--gold) 6%, transparent)); }
.lx-nuevo tbody tr { cursor: pointer; }
.lx-nuevo tbody tr:hover td:first-child, .lx-nuevo tbody tr:has([data-sel]:checked) td:first-child { box-shadow: inset 3px 0 0 var(--line-strong); }
.lx-nuevo tbody tr:has([data-sel]:checked) td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.lx-tabla tr.lx-pre td { background-image: linear-gradient(color-mix(in srgb, var(--gold) 12%, transparent), color-mix(in srgb, var(--gold) 12%, transparent)); }
.lx-quitar { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.lx-quitar:hover { background: var(--bad-soft); color: var(--bad); }
.lx-envio { position: sticky; bottom: 0; z-index: 6; display: flex; flex-direction: column; gap: 10px; padding: 10px 18px 14px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lx-envio.activa { box-shadow: inset 0 2px 0 var(--gold), 0 -10px 24px -14px rgba(20, 26, 46, .25); }
.lx-envio .lx-resumen { padding: 0; border: 0; }
.lx-envio:not(.activa) .lx-envio-campos > label { display: none; }
.lx-envio:not(.activa) { flex-direction: row; align-items: center; justify-content: space-between; }
.lx-envio-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.lx-dest-n { flex: 1.4 1 240px; }
.lx-envio-campos .lx-nota { flex: 1 1 200px; }
.lx-envio-campos .lx-check { padding-bottom: 10px; }
.lx-pie { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); }
.lx-pie .lx-nota { flex: 1 1 280px; }
.lx-vacio { text-align: center; }

/* Un documento */
.lx-volver { align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none; }
.lx-volver:hover { color: var(--ink); }
.lx-doc { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); align-items: center; gap: 18px 28px; padding: 22px 24px 22px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.lx-doc::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--sky); }
.lx-doc-enviado::before { background: var(--good); }
.lx-doc-anulado::before { background: var(--line-strong); }
.lx-doc-chips { display: flex; gap: 6px; }
.lx-doc h2 { margin: 8px 0 6px; font-family: var(--mono); font-size: 28px; letter-spacing: .02em; }
.lx-doc-para { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.lx-doc-para > span { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.lx-doc-para small, .lx-doc-meta { font-size: 12px; color: var(--muted); }
.lx-doc-emps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.lx-doc-meta { margin: 8px 0 0; }
.lx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.lx-stats > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); min-width: 0; }
.lx-stats dt { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.lx-stats dt em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--int); }
.lx-stats dd { margin: 3px 0 1px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lx-stats small { display: block; font-size: 11.5px; color: var(--muted); }
.lx-stats .prop { background: var(--prp-bg); border-color: color-mix(in srgb, var(--gold) 30%, var(--line)); } .lx-stats .prop dd { color: var(--prp); }
.lx-stats .prv dd { color: var(--prv); }
.lx-stats .int { background: var(--int-bg); } .lx-stats .int dd { color: var(--int); }
.lx-final { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); align-items: start; gap: 16px; }
.lx-vista { padding: 16px; border-radius: var(--radius); background: var(--surface-3); }
.lx-vista > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.lx-vista h3, .lx-card h3 { margin: 0; font-size: 15px; }
.lx-vista-marco { display: flex; justify-content: center; }
.lx-acciones { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.lx-card { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
details.lx-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; list-style: none; cursor: pointer; }
details.lx-card > summary::-webkit-details-marker { display: none; }
details.lx-card > summary::after { content: '▾'; color: var(--muted); transition: transform .15s; }
details.lx-card[open] > summary::after { transform: rotate(180deg); }
details.lx-card > summary h3 { margin-right: auto; }
.lx-pasos-envio { margin: 10px 0 12px; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.lx-pasos-envio li { margin: 3px 0; }
.lx-alerta { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 600; }
.lx-medios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lx-medios input { position: absolute; opacity: 0; pointer-events: none; }
.lx-medios span { display: block; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lx-medios input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.lx-medios input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.lx-ancho { width: 100%; }
.lx .lx-agregar input[type="search"] { width: 100%; margin: 12px 0 6px; border-radius: 999px; }
.lx-agregar-lista { max-height: 300px; overflow-y: auto; margin: 0 0 10px; padding: 0; list-style: none; }
.lx-agregar-lista label { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; cursor: pointer; }
.lx-agregar-lista input { margin-top: 3px; accent-color: var(--gold); }
.lx-agregar-lista small { display: block; color: var(--muted); }
.lx-anular form { display: flex; gap: 8px; margin-top: 10px; }
.lx .lx-anular input[name="motivo"] { flex: 1; min-width: 0; border-radius: 10px; }
.lx-anular summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.lx-enviado p { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }

/* Documentos */
.lx-docs { display: flex; flex-direction: column; gap: 8px; }
.lx-docfila { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.5fr) auto; align-items: center; gap: 10px 20px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.lx-docfila:hover { border-color: var(--gold); transform: translateY(-1px); }
.lx-docfila-id { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.lx-docfila-id b { font-size: 16px; }
.lx-docfila-id small, .lx-docfila-para small { font-size: 12px; color: var(--muted); }
.lx-docfila-para { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.lx-docfila-ley { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 18px; font-variant-numeric: tabular-nums; }
.lx-docfila-ley > span { display: flex; flex-direction: column; font-size: 14px; }
.lx-docfila-ley small { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.lx-docfila-ley .prop b { font-size: 17px; color: var(--prp); }
.lx-docfila-ley .int { color: var(--int); }
.lx-docfila-ley em { font-style: normal; font-size: 11px; }
.lx-docfila-ley .flecha { align-self: flex-end; color: var(--muted); padding-bottom: 2px; }
.lx-foto-barra { max-width: 760px; margin: 0 auto 14px; }
.lx-foto { display: flex; justify-content: center; }

@media (max-width: 1200px) {
  .lx-flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-doc { grid-template-columns: minmax(0, 1fr); }
  .lx-final { grid-template-columns: minmax(0, 1fr); }
  .lx-acciones { position: static; }
  .lx-docfila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lx-flujo { grid-template-columns: minmax(0, 1fr); }
  .lx-herr, .lx-dest, .lx-resumen, .lx-pie { padding-left: 12px; padding-right: 12px; }
  .lx-envio { padding: 10px 12px 12px; }
  .lx-dest-ruc { flex: 1 1 100%; }
  .lx-docfila { grid-template-columns: minmax(0, 1fr); }
  .lx-doc { padding: 18px 16px 18px 20px; }
  .lx-doc h2 { font-size: 22px; }
}

/* ── La tarjeta que ve el proveedor (foto e impresión): un solo aspecto, colores fijos ── */
.lxf { --a: #14284B; --o: #B8892A; --t: #1A2230; --s: #6A7383; --l: #E6E9EE; --f: #F7F4EC;
  width: 100%; max-width: 760px; overflow: hidden; background: #FFFFFF; color: var(--t); border: 1px solid var(--l); border-radius: 18px;
  box-shadow: 0 12px 34px rgba(20, 40, 75, .14); font-family: var(--sans); font-variant-numeric: tabular-nums; color-scheme: light; }
.lxf-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px 18px; border-bottom: 3px solid var(--o); }
.lxf-canje .lxf-cab { border-bottom-color: var(--a); }
.lxf-cab img { height: 46px; width: auto; max-width: 55%; object-fit: contain; }
.lxf-id { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.lxf-id span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--o); }
.lxf-id b { font-size: 24px; font-weight: 800; letter-spacing: .02em; color: var(--a); }
.lxf-id small { font-size: 13px; color: var(--s); }
.lxf-para { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 13px 26px; background: var(--f); }
.lxf-para span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s); }
.lxf-para b { font-size: 18px; color: var(--a); }
.lxf-para small { font-size: 13px; color: var(--s); }
.lxf-grupo { padding: 6px 22px 2px; overflow-x: auto; }
.lxf-grupo + .lxf-grupo { border-top: 1px solid var(--l); }
.lxf-grupo h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 14px 4px 2px; font-size: 14px; color: var(--a); }
.lxf-grupo h3 small { font-size: 12px; font-weight: 500; color: var(--s); }
.lxf-tabla { width: 100%; margin: 6px 0 10px; border-collapse: collapse; }
.lxf-tabla th { padding: 7px 6px; text-align: left; vertical-align: bottom; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s); white-space: nowrap; border-bottom: 1px solid var(--l); }
.lxf-tabla th.lxf-g { padding-bottom: 4px; text-align: center; color: var(--a); border-bottom: 2px solid var(--o); }
.lxf-tabla .r { text-align: right; }
.lxf-tabla td { padding: 10px 6px; font-size: 14px; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--l); }
.lxf-tabla tbody tr:last-child td { border-bottom: 0; }
.lxf-tabla td small { display: block; font-size: 11px; color: var(--s); }
.lxf-lote b { display: block; font-family: var(--mono); font-size: 14px; color: var(--a); }
.lxf-ant { color: var(--s); }
.lxf-mejora { color: #1F6F43; font-weight: 700; }
.lxf-tabla .lxf-ley-h { color: var(--o); }
.lxf-ley { background: #FBF6E9; }
.lxf-ley b { font-size: 19px; font-weight: 800; }
.lxf-rec b { font-size: 16px; font-weight: 800; color: var(--a); }
.lxf-obs { margin: 4px 26px 14px; padding: 10px 14px; border-radius: 10px; background: var(--f); font-size: 13px; }
.lxf-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 12px 26px; background: var(--a); color: #D9DEE8; font-size: 11.5px; }
@media (max-width: 560px) {
  .lxf-cab, .lxf-para, .lxf-pie { padding-left: 14px; padding-right: 14px; }
  .lxf-grupo { padding: 4px 10px 2px; }
  .lxf-tabla td, .lxf-tabla th { padding-left: 3px; padding-right: 3px; font-size: 12px; }
  .lxf-ley b { font-size: 16px; }
  .lxf-llegada { display: none; }
}
@media print {
  .lxf { box-shadow: none; border-radius: 0; max-width: none; }
  .lxf-pie, .lxf-ley, .lxf-para { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lx-vista, .lx-acciones, .lx-envio, .lx-herr { display: none; }
}

/* ── Simulador de cierre ── */
.sx { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 18px; }
.sx-lotes { position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 40px); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sx-lotes-cab { display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 6px; }
.sx-lotes-cab span { font-size: 12px; color: var(--muted); }
.sx-buscar { display: flex; align-items: center; gap: 8px; margin: 6px 12px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.sx .sx-buscar input[type="search"] { border: 0; background: transparent; box-shadow: none; padding: 8px 0; min-height: 0; width: 100%; min-width: 0; }
.sx-otro { display: flex; gap: 6px; margin: 0 12px 8px; }
.sx .sx-otro input[name="lote"] { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 999px; font-size: 12px; }
.sx-lista { margin: 0; padding: 0 8px 10px; overflow-y: auto; list-style: none; }
.sx-lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none; }
.sx-lista a:hover { background: var(--surface-2); }
.sx-lista li.activo a { background: var(--prp-bg); box-shadow: inset 3px 0 0 var(--gold); }
.sx-l-cod { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; font-size: 13px; white-space: nowrap; }
.sx-l-cod small { font-size: 11px; color: var(--muted); }
.sx-l-prov { grid-column: 1 / -1; overflow: hidden; font-size: 11.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.sx-l-ley { display: flex; align-items: baseline; gap: 5px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sx-l-ley b { color: var(--int); }
.sx-l-ley em { font-style: normal; font-size: 11px; color: var(--warn); }
.sx-l-ley i { padding: 0 6px; border-radius: 6px; background: var(--gold-soft); color: var(--gold-text); font-style: normal; font-size: 10.5px; font-weight: 700; }
.sx-sim { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sx-vacio { text-align: center; }
.sx-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 24px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sx-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.sx-cab h2 { margin: 4px 0 4px; font-family: var(--mono); font-size: 28px; letter-spacing: .02em; }
.sx-cab-id p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.sx-cab-datos { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; }
.sx-cab-datos dt { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sx-cab-datos dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sx-ruta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: ruta; }
.sx-ruta li { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 10px 14px 10px 16px; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.sx-ruta li:first-child { border-radius: 14px 0 0 14px; }
.sx-ruta li:last-child { border-radius: 0 14px 14px 0; }
.sx-ruta li + li { border-left: 0; }
.sx-ruta li::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--line-strong); }
.sx-ruta li.hecho::before { background: var(--good); }
.sx-ruta li.curso::before { background: var(--sky); }
.sx-ruta li.ahora { background: var(--prp-bg); }
.sx-ruta li.ahora::before { background: var(--gold); }
.sx-ruta span { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sx-ruta b { font-size: 18px; font-variant-numeric: tabular-nums; }
.sx-ruta small { overflow: hidden; font-size: 11.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.sx-ruta small a { color: var(--brand-text); font-weight: 700; text-decoration: none; }
.sx-aviso { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-size: 13px; }

.sx-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sx-lado { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 14px 18px; text-align: center; cursor: text; min-width: 0; }
.sx-lado.lab { background: linear-gradient(180deg, var(--int-bg), transparent 85%); }
.sx-lado.prov { background: linear-gradient(180deg, var(--prv-bg), transparent 85%); }
.sx-lado.oferta { background: linear-gradient(180deg, var(--prp-bg), transparent 85%); }
.sx-lado-et { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.sx-lado-et em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .75; }
.sx-lado.lab .sx-lado-et { color: var(--int); } .sx-lado.prov .sx-lado-et { color: var(--prv); } .sx-lado.oferta .sx-lado-et { color: var(--prp); }
form.sx-sim .sx-vs .sx-lado input[data-sm] { width: 100%; max-width: 220px; min-width: 0; height: auto; padding: 0; border: 0; border-bottom: 2px dashed transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font-family: inherit; font-size: 42px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
form.sx-sim .sx-vs .sx-lado input[data-sm]:hover, form.sx-sim .sx-vs .sx-lado input[data-sm]:focus { border-bottom-color: currentColor; box-shadow: none; outline: 0; }
form.sx-sim .sx-vs .sx-lado.oferta input[data-sm] { color: var(--prp); }
.sx-lado small { font-size: 12px; color: var(--muted); }
.sx-lado small b.pos, .sx-rapidos + * .pos { color: var(--good); }
.sx-lado small b.neg { color: var(--bad); }
.sx-lado-monto { display: flex; flex-direction: column; margin-top: 10px; }
.sx-lado-monto em { font-style: normal; font-size: 11px; color: var(--muted); }
.sx-lado-monto b { font-size: 17px; font-variant-numeric: tabular-nums; }
.sx-vs-centro { position: relative; display: flex; align-items: center; justify-content: center; width: 1px; margin: 18px 0; background: var(--line); }
.sx-vs-centro span { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.sx-propuesta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 30px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--prp-bg); }
.sx-prop-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; font-weight: 700; cursor: default; }
.sx-prop-campo > span:first-child { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--prp); }
.sx-prop-in { display: inline-flex; align-items: center; gap: 4px; }
.sx-prop-in i { font-style: normal; color: var(--muted); }
form.sx-sim .sx-prop-in input[data-sm] { width: 78px; min-width: 0; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line-strong)); border-radius: 10px; background: var(--surface); text-align: right; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sx-prop-atajos { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.sx-prop-atajos button { padding: 3px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--good); font-size: 12px; font-weight: 700; cursor: pointer; }
.sx-prop-atajos button:hover { background: var(--good-soft); }
.sx-prop-campo small { flex-basis: 100%; font-size: 11px; font-weight: 500; color: var(--muted); }
.sx-control { grid-column: 1 / -1; padding: 6px 22px 16px; border-top: 1px solid var(--line); }
.sx-rango { width: 100%; margin: 12px 0 10px; accent-color: var(--gold); }
.sx-rapidos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sx-rapidos > span { margin-right: 2px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.sx-rapidos button { padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.sx-rapidos button:hover { border-color: var(--line-strong); color: var(--ink); }
.sx-rapidos button.meta { border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good); font-weight: 700; }
.sx-rapidos button.rep { border-color: color-mix(in srgb, var(--gold) 50%, transparent); color: var(--prp); }
.sx-rapidos button.prov { border-color: color-mix(in srgb, var(--prv) 40%, transparent); color: var(--prv); }
.sx-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line-strong); }

.sx-veredicto { display: grid; grid-template-columns: 1.2fr 1fr 1fr; align-items: center; gap: 12px 22px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.sx-veredicto.ok { border-left-color: var(--good); background: linear-gradient(90deg, var(--good-soft), var(--surface) 45%); }
.sx-veredicto.regular { border-left-color: var(--warn); background: linear-gradient(90deg, var(--warn-soft), var(--surface) 45%); }
.sx-veredicto.mal { border-left-color: var(--bad); background: linear-gradient(90deg, var(--bad-soft), var(--surface) 45%); }
.sx-v-sello { display: flex; flex-direction: column; }
.sx-v-sello b { font-size: 22px; }
.sx-veredicto.ok .sx-v-sello b { color: var(--good); } .sx-veredicto.regular .sx-v-sello b { color: var(--warn); } .sx-veredicto.mal .sx-v-sello b { color: var(--bad); }
.sx-v-sello small, .sx-v-dato small { font-size: 12px; color: var(--muted); }
.sx-v-dato { display: flex; flex-direction: column; }
.sx-v-dato > span { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sx-v-dato b { font-size: 26px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sx-v-dato b span { font-size: 13px; font-weight: 600; color: var(--muted); }
.sx-v-barra { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 99px; background: var(--surface-3); }
.sx-v-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--line-strong); transition: width .2s; }
.sx-veredicto.ok .sx-v-barra i { background: var(--good); } .sx-veredicto.regular .sx-v-barra i { background: var(--warn); }
.sx-v-barra em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }

.sx-nego, .sx-comp { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sx-nego-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; }
.sx-nego-cab h3, .sx-comp h3 { margin: 0 0 4px; font-size: 16px; }
.sx-nego-cab p { max-width: 72ch; margin: 0; font-size: 14px; }
.sx-nego-cab p .pos { color: var(--good); } .sx-nego-cab p .neg { color: var(--bad); }
.sx-nego-tope { display: flex; flex-direction: column; align-items: flex-end; padding: 10px 16px; border-radius: 14px; background: var(--good-soft); }
.sx-nego-tope span, .sx-nego-tope small { font-size: 11px; color: var(--good); }
.sx-nego-tope b { font-size: 26px; color: var(--good); font-variant-numeric: tabular-nums; }
.sx-regla3 { position: relative; height: 64px; margin: 24px 10px 0; cursor: pointer; }
.sx-zonas { position: absolute; left: 0; right: 0; top: 24px; display: flex; height: 12px; overflow: hidden; border-radius: 99px; }
.sx-zonas i { display: block; height: 100%; transition: width .25s; }
.z-ok { background: color-mix(in srgb, var(--good) 35%, var(--surface)); } .z-corto { background: color-mix(in srgb, var(--warn) 35%, var(--surface)); } .z-mal { background: color-mix(in srgb, var(--bad) 30%, var(--surface)); }
.sx-regla3 .mk { position: absolute; top: 17px; width: 0; transition: left .25s; }
.sx-regla3 .mk::before { content: ''; position: absolute; left: -2px; top: 0; width: 4px; height: 26px; border-radius: 2px; background: currentColor; }
.sx-regla3 .mk span { position: absolute; transform: translateX(-50%); font-size: 11px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-regla3 .mk.tope span, .sx-regla3 .mk.lab span { top: 30px; }
.sx-regla3 .mk.prov span, .sx-regla3 .mk.oferta span { top: -20px; }
.sx-regla3 .mk.tope { color: var(--good); } .sx-regla3 .mk.lab { color: var(--int); } .sx-regla3 .mk.prov { color: var(--prv); } .sx-regla3 .mk.oferta { z-index: 2; color: var(--prp); }
.sx-regla3 .mk.oferta::before { left: -8px; top: 5px; width: 16px; height: 16px; border: 3px solid var(--surface); border-radius: 50%; background: var(--gold); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.sx-brecha { position: absolute; top: 44px; height: 3px; background: repeating-linear-gradient(90deg, var(--prv) 0 6px, transparent 6px 10px); transition: left .25s, width .25s; }
.sx-zonas-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.sx-zonas-ley i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.sx-tip { margin-left: auto; }
.sx-nego-fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sx-nego-fichas > div { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
.sx-nego-fichas span, .sx-nego-fichas small { font-size: 12px; color: var(--muted); }
.sx-nego-fichas b { font-size: 20px; font-variant-numeric: tabular-nums; }
.sx-nego-fichas .pos { color: var(--good); } .sx-nego-fichas .neg { color: var(--bad); } .sx-nego-fichas .reg { color: var(--warn); }
.sx-comp > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.sx-comp-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sx-comp-tabla th, .sx-comp-tabla td { padding: 8px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.sx-comp-tabla th:first-child, .sx-comp-tabla td:first-child { text-align: left; font-weight: 500; color: var(--muted); }
.sx-comp-tabla thead th { vertical-align: bottom; font-size: 12.5px; cursor: pointer; border-bottom: 3px solid var(--c, var(--line-strong)); }
.sx-comp-tabla thead th small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.sx-comp-tabla thead th:hover { background: var(--surface-2); }
.sx-comp-tabla .col-oferta { background: var(--prp-bg); }
.sx-comp-tabla tr.fuerte td { font-size: 15px; font-weight: 700; }
.sx-comp-tabla .pos { color: var(--good); } .sx-comp-tabla .neg { color: var(--bad); }
.sx-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 700; }
.sx-pill.ok { background: var(--good-soft); color: var(--good); } .sx-pill.regular { background: var(--warn-soft); color: var(--warn); } .sx-pill.mal { background: var(--bad-soft); color: var(--bad); }
.sx-bajo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 14px; }
.sx-plegable { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.sx-plegable > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; list-style: none; cursor: pointer; }
.sx-plegable > summary::-webkit-details-marker { display: none; }
.sx-plegable > summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.sx-plegable[open] > summary::after { content: '▴'; }
.sx-plegable h3 { margin: 0; font-size: 14px; }
.sx-plegable summary small { font-size: 12px; color: var(--muted); }
.sx-plegable > .hint, .sx-plegable > .table-scroll, .sx-plegable > .sx-campos { margin-top: 12px; }
.sx-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; }
.sx-tabla th { padding: 6px 8px; text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.sx-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.sx-tabla .r { text-align: right; }
.sx-tabla tr[data-ley] { cursor: pointer; }
.sx-tabla tr[data-ley]:hover td { background: var(--surface-2); }
.sx-tabla tr.actual td { background: var(--prp-bg); font-weight: 700; }
.sx-tabla td small { color: var(--muted); font-weight: 400; }
.sx-tabla .pos { color: var(--good); } .sx-tabla .neg { color: var(--bad); }
.sx-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.sx-campos label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.sx .sx-campos input[data-sm], .sx .sx-campos select[data-sm] { min-width: 0; width: 100%; padding: 7px 9px; border-radius: 9px; font-variant-numeric: tabular-nums; }
.sx .sx-campos input[data-fijo="1"] { border-color: var(--gold); background: var(--prp-bg); }
.sx-c2 { grid-column: span 2; }
.sx-pio { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.sx-pio button { padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 11.5px; cursor: pointer; }
.sx-barra { position: sticky; bottom: 10px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 16px 12px 20px; border: 1px solid var(--line-strong); border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-up); }
.sx-barra.ok { box-shadow: inset 4px 0 0 var(--good), var(--shadow-up); } .sx-barra.regular { box-shadow: inset 4px 0 0 var(--warn), var(--shadow-up); } .sx-barra.mal { box-shadow: inset 4px 0 0 var(--bad), var(--shadow-up); }
.sx-barra-prop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.sx-barra-et { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--prp); }
.sx-barra-prop > span:not(.sx-barra-et) { display: flex; flex-direction: column; line-height: 1.15; }
.sx-barra-prop small { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sx-barra-prop b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sx-barra-prop b i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sx-barra.ok .sx-barra-queda b { color: var(--good); } .sx-barra.regular .sx-barra-queda b { color: var(--warn); } .sx-barra.mal .sx-barra-queda b { color: var(--bad); }
.sx-barra-acc { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1280px) {
  .sx-vs { grid-template-columns: minmax(0, 1fr); }
  .sx-vs-centro { width: auto; height: 1px; margin: 0 18px; }
  .sx-bajo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sx { grid-template-columns: minmax(0, 1fr); }
  .sx-lotes { position: static; max-height: 300px; }
  .sx-cab { grid-template-columns: minmax(0, 1fr); }
  .sx-ruta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-ruta li { border: 1px solid var(--line) !important; border-radius: 12px !important; }
  .sx-veredicto { grid-template-columns: minmax(0, 1fr); }
  .sx-nego-cab { grid-template-columns: minmax(0, 1fr); }
  .sx-nego-tope { align-items: flex-start; }
  .sx-nego-fichas { grid-template-columns: minmax(0, 1fr); }
  .sx-tip { margin-left: 0; }
  form.sx-sim .sx-vs .sx-lado input[data-sm] { font-size: 34px; }
  .sx-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print { .sx { display: block; } .sx-barra, .sx-control, .sx-prop-atajos { display: none; } }

/* ═══════════ Resumen gerencial (ge) ═══════════ */
.ge { --pagar: var(--bad); --cancha: var(--gold); --in: var(--sky); --out: #7A5AF8; --exp: #D97706; --util: var(--good); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
:root[data-theme="dark"] .ge { --out: #A78BFA; --exp: #F5A524; }
.ge-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.ge-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 999px; background: var(--surface-3); }
.ge-seg a { padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.ge-seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 26, 46, .16); }
.ge-periodo label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ge .ge-periodo input[type="date"] { width: auto; min-width: 0; padding: 5px 10px; border-radius: 999px; }
.ge-per-txt { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.ge-per-txt b { color: var(--ink); }
.ge-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ge-t { --c: var(--brand); position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.ge-t::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.ge-t:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.ge-t-pagar { --c: var(--pagar); } .ge-t-cancha { --c: var(--cancha); } .ge-t-in { --c: var(--in); } .ge-t-out { --c: var(--out); } .ge-t-exp { --c: var(--exp); } .ge-t-util { --c: var(--util); }
.ge-t-et { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--c); }
.ge-t-num { font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ge-t-num small { font-size: 15px; font-weight: 700; color: var(--muted); }
.ge-t-sub { font-size: 13px; color: var(--ink-2); }
.ge-t-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--muted); }
.ge-t-pie i, .ge-mini small i, .ge-ley i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; vertical-align: 0; }
.ge-t-sedes { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; font-size: 12.5px; color: var(--muted); }
.ge-t-sedes b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ge .sube { color: var(--good); font-weight: 700; } .ge .baja { color: var(--bad); }
.ge-t-exp.alerta { background: linear-gradient(180deg, color-mix(in srgb, var(--exp) 8%, var(--surface)), var(--surface) 60%); }
.ge-apilada { display: flex; height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.ge-apilada i { display: block; height: 100%; }
.a1 { background: color-mix(in srgb, var(--pagar) 28%, var(--surface)); } .a2 { background: color-mix(in srgb, var(--pagar) 50%, var(--surface)); } .a3 { background: color-mix(in srgb, var(--pagar) 75%, var(--surface)); } .a4 { background: var(--pagar); }
.x1 { background: var(--exp); } .x2 { background: color-mix(in srgb, var(--exp) 35%, var(--surface)); }
.ge-prog { height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.ge-prog i { display: block; height: 100%; border-radius: 99px; background: var(--cancha); }
.ge-meses { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.ge-meses > span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; }
.ge-meses i { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--util) 70%, var(--surface)); }
.ge-meses i.neg { background: var(--bad); }
.ge-meses small { font-size: 10px; color: var(--muted); text-transform: capitalize; }
.ge-prov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ge-prov-col { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.ge-prov-col h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 10px; font-size: 15px; }
.ge-prov-col h3 small { font-size: 12px; font-weight: 500; color: var(--muted); }
.ge-prov-col.mejores h3::before { content: '▲'; color: var(--good); font-size: 12px; }
.ge-prov-col.peores h3::before { content: '▼'; color: var(--bad); font-size: 12px; }
.ge-prov-fila { display: grid; grid-template-columns: 22px minmax(0, 1.6fr) minmax(40px, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.ge-rank { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); font-size: 11px; font-weight: 800; color: var(--ink-2); }
.ge-prov-nom { display: flex; flex-direction: column; min-width: 0; }
.ge-prov-nom b { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.ge-prov-nom small, .ge-prov-num small { font-size: 11px; color: var(--muted); }
.ge-prov-bar { height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.ge-prov-bar i { display: block; height: 100%; border-radius: 99px; background: var(--util); }
.ge-prov-col.peores .ge-prov-bar i { background: color-mix(in srgb, var(--warn) 60%, var(--surface)); }
.ge-prov-bar i.neg, .ge-prov-col.peores .ge-prov-bar i.neg { background: var(--bad); }
.ge-prov-num { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.ge-prov-num b { font-size: 14px; }
.ge-nota-mal { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-size: 12.5px; font-weight: 600; }
.ge-otros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ge-otros a { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; }
.ge-otros a:hover { border-color: var(--line-strong); background: var(--surface); }
.ge-otros small { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ge-otros b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ge-otros span { font-size: 11.5px; color: var(--muted); }
.ge-titulo-det { margin: 10px 0 -4px; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ge-det { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); scroll-margin-top: 16px; }
.ge-det > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 14px 18px; list-style: none; cursor: pointer; }
.ge-det > summary::-webkit-details-marker { display: none; }
.ge-det > summary::after { content: '▾'; margin-left: 4px; color: var(--muted); transition: transform .15s; }
.ge-det[open] > summary::after { transform: rotate(180deg); }
.ge-det-t { font-size: 15px; font-weight: 700; }
.ge-det-r { margin-left: auto; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ge-det-c { display: flex; flex-direction: column; gap: 12px; padding: 0 18px 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.ge-det-c h4 { margin: 4px 0 0; font-size: 13px; }
.ge-det-c .table-scroll { margin: 0; padding: 0; }
.ge-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ge-mini > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.ge-mini small { font-size: 11px; font-weight: 700; color: var(--muted); }
.ge-mini b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ge-mini span { font-size: 11.5px; color: var(--muted); }
.ge-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ge-semanas { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 6px 0 0; }
.ge-sem { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.ge-sem-b { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; }
.ge-sem-b i { width: 42%; max-width: 18px; border-radius: 4px 4px 0 0; }
.ge-sem small { font-size: 10px; color: var(--muted); white-space: nowrap; }
i.in { background: var(--in); } i.out { background: var(--out); }
.ge-ley { display: flex; gap: 14px; margin: 0; font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .ge-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ge-otros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ge-tarjetas, .ge-prov, .ge-dos { grid-template-columns: minmax(0, 1fr); }
  .ge-otros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ge-per-txt { margin-left: 0; }
  .ge-t-num { font-size: 27px; }
  .ge-prov-fila { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .ge-prov-bar { display: none; }
}
@media print { .ge-periodo { display: none; } .ge-det { break-inside: avoid; } .ge-t:hover { transform: none; } }

/* ═══════════ Valorizaciones (vl) ═══════════
   VAL interna con el color de su sede: azul Huanchaco, verde Laredo. VAL Beijing en dorado (lo que se factura). */
.vl, .formato {
  --hua: #1F5FBF; --hua-bg: color-mix(in srgb, #1F5FBF 8%, var(--surface, #fff));
  --lar: #178A55; --lar-bg: color-mix(in srgb, #178A55 8%, var(--surface, #fff));
}
:root[data-theme="dark"] .vl { --hua: #6FA4F2; --lar: #4FC98D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vl { --hua: #6FA4F2; --lar: #4FC98D; } }
.vl { display: flex; flex-direction: column; gap: 16px; }
.vl > .panel, .vl > .kpis, .vl > .grid-2 { margin: 0; }
.vl-sede { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; vertical-align: 2px; color: #fff; background: var(--hua, #1F5FBF); }
.vl-sede.laredo { background: var(--lar, #178A55); }
.lote-cell .vl-sede { margin-right: 6px; font-size: 10px; padding: 0 7px; vertical-align: 1px; }
.vl-flujo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aprob-paso.ahora { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }

.vl-cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 12px 20px; border: 1px solid color-mix(in srgb, var(--good) 35%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--good) 7%, var(--surface)); }
.vl-cierre.sin { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-soft); }
.vl-cierre.distinta { box-shadow: inset 4px 0 0 var(--warn); }
.vl-cierre-et { display: flex; flex-direction: column; min-width: 200px; }
.vl-cierre-et b { font-size: 14px; }
.vl-cierre-et small { font-size: 12px; color: var(--muted); }
.vl-cierre dl { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; }
.vl-cierre dt { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vl-cierre dd { margin: 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vl-cierre dd small { font-size: 12px; font-weight: 600; color: var(--muted); }
.vl-cierre p { margin: 0 0 0 auto; font-size: 13px; }

.vl-vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.vl-vals.solo { grid-template-columns: minmax(0, 1fr); }
.vl-val { margin: 0; }
.vl-interna { --c: var(--hua); --cbg: var(--hua-bg); border-top: 5px solid var(--c); background: linear-gradient(180deg, var(--cbg), var(--surface) 160px); }
.vl-interna.laredo { --c: var(--lar); --cbg: var(--lar-bg); }
.vl-interna .panel-head h2 { color: var(--c); }
.vl-beijing { --c: var(--gold-text); border-top: 5px solid var(--gold); }
.vl-beijing.bloqueada { opacity: .72; }
.vl-candado { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.vl .vl-val label.vl-clave { color: var(--c); font-weight: 800; }
.vl .vl-val label.vl-clave input:not([type=checkbox]) { border-color: color-mix(in srgb, var(--c) 45%, var(--line-strong)); font-weight: 800; }
.vl .vl-val input.vl-puesto:not([type=checkbox]) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.vl-usar-cierre { margin-bottom: 10px; }
.vl-anticipo { margin-top: 10px; }
.vl-total { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.vl-total span { font-size: 12px; color: var(--muted); }
.vl-total b { font-size: 18px; color: var(--c); font-variant-numeric: tabular-nums; }
.vl-total small { color: var(--muted); }
.vl-copiar { margin-top: 10px; }

.vl-dif-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.vl-c { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); border-left: 5px solid var(--line-strong); }
.vl-c span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vl-c b { font-size: 24px; font-variant-numeric: tabular-nums; }
.vl-c small { font-size: 12px; color: var(--muted); }
.vl-c.int { border-left-color: var(--hua); } .vl-c.int.laredo { border-left-color: var(--lar); }
.vl-c.bei { border-left-color: var(--gold); }
.vl-dif.con .vl-c.dif { border-left-color: var(--bad); background: var(--bad-soft); }
.vl-c b.neg, .vl-dif-kpis b.neg, .vl-dif-celda.neg { color: var(--bad); }
.vl-dif-celda { color: var(--warn); }

.vl-dif-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vl-dif-kpis > div { display: flex; flex-direction: column; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.vl-dif-kpis span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vl-dif-kpis b { font-size: 24px; font-variant-numeric: tabular-nums; }
.vl-dif-kpis small { font-size: 12px; color: var(--muted); }
.vl-dif-kpis .dif { border-left: 5px solid var(--bad); }

.vl-dif-grupos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.vl-dif-grupos .panel { margin: 0; }
.vl-dif-grupos .panel:last-child td:first-child { white-space: nowrap; }
@media (max-width: 1280px) { .vl-dif-grupos { grid-template-columns: minmax(0, 1fr); } }

/* VAL interna impresa con el color de su sede */
.formato.f-sede-huanchaco { --fs: #1F5FBF; --fs-bg: #EAF1FC; }
.formato.f-sede-laredo { --fs: #178A55; --fs-bg: #E7F5EE; }
.formato[class*="f-sede-"] .f-cab { border-bottom-color: var(--fs); }
.formato[class*="f-sede-"] .f-titulo h2, .formato[class*="f-sede-"] .f-nro b { color: var(--fs); }
.formato[class*="f-sede-"] .f-zona { color: var(--fs); }
.formato[class*="f-sede-"] .f-nro { border-color: var(--fs); }
.formato[class*="f-sede-"] .f-tabla thead th { background: var(--fs); }
.formato[class*="f-sede-"] .f-tabla tfoot th { background: var(--fs-bg); }
.formato[class*="f-sede-"] .f-totales .f-neto th, .formato[class*="f-sede-"] .f-totales .f-neto td { background: var(--fs); }
.formato .f-sede-tag { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--fs); color: #fff; letter-spacing: .08em; }

@media (max-width: 1100px) { .vl-vals { grid-template-columns: minmax(0, 1fr); } .vl-flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vl-dif-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vl-dif-cifras, .vl-dif-kpis { grid-template-columns: minmax(0, 1fr); } .vl-cierre p { margin: 0; } }

/* Mesa de valorización: bandejas por rol */
.vl-bandejas { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.vl-bandeja { --c: var(--ink-2); display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; box-shadow: var(--shadow); min-width: 0; flex: 1 1 180px; transition: border-color .15s, transform .15s; }
.vl-bandeja:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.vl-bandeja.c-hua { --c: var(--hua); } .vl-bandeja.c-sky { --c: var(--sky-text); } .vl-bandeja.c-gold { --c: var(--gold-text); } .vl-bandeja.c-violet { --c: #6E4FB0; } .vl-bandeja.c-good { --c: var(--good); }
.vl-bandeja-n { flex: none; min-width: 40px; padding: 5px 8px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--c); font-size: 20px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.vl-bandeja-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vl-bandeja-t b { font-size: 13.5px; }
.vl-bandeja-t small { font-size: 11.5px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vl-bandeja.on { border-color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c), var(--shadow); background: color-mix(in srgb, var(--c) 6%, var(--surface)); }
.vl-bandeja.on .vl-bandeja-n { background: var(--c); color: var(--surface); }
/* Una sola caja para el código del lote: se escribe una vez y se elige qué hacer con él —abrirlo, o
   bajar cualquiera de las tres hojas—. Antes eran dos cajas con el mismo contenido en la misma pantalla. */
.vl-lote { flex-wrap: wrap; margin-left: auto; }
.vl .vl-lote input:not([type=checkbox]) { width: 190px; min-width: 0; padding: 7px 12px; border-radius: 999px; font-size: 13px; }
.vl-lote-sep { width: 1px; height: 18px; margin: 0 2px; background: var(--line); }

/* Una barra, no tres islas. Los cuatro controles acotan la misma tabla: con su rótulo delante
   y un fondo que los abraza, el ojo los lee como UN filtro con cuatro perillas. */
.vl-mesa-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.vl-filtros-rotulo { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); flex: none; }
/* Dentro de la barra, las píldoras ya no necesitan su propio marco: lo pone la barra. */
.vl-mesa-filtros .vl-chips { border-color: transparent; background: var(--surface); }
/* La sede va detrás de una raya fina: mismo grupo, distinta pregunta. */
.vl-mesa-filtros .vl-chips-sede { position: relative; margin-left: 4px; }
.vl-mesa-filtros .vl-chips-sede::before { content: ""; position: absolute; left: -7px; top: 5px; bottom: 5px;
  width: 1px; background: var(--line); }
.vl .vl-mesa-filtros .lx-buscar { flex: 1 1 240px; }
.vl .lx-buscar input[type="search"] { border: 0; background: transparent; box-shadow: none; padding: 8px 0; min-width: 0; width: 100%; min-height: 0; }
.vl .vl-mesa-filtros select { width: auto; min-width: 0; border-radius: 999px; }
.vl-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.vl-chips button { padding: 4px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.vl-chips button b { margin-left: 4px; font-size: 11px; color: var(--muted); }
.vl-chips button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.vl-chips button.hua.on { background: var(--hua); color: #fff; } .vl-chips button.lar.on { background: var(--lar); color: #fff; }

.vl-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.vl-tabla th { padding: 9px 10px; text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.vl-tabla th.r, .vl-tabla td.r { text-align: right; }
.vl-tabla td { padding: 9px 10px; vertical-align: top; border-bottom: 1px solid var(--line); }
.vl-tabla tbody tr:hover td { background: var(--surface-2); }
.vl-tabla tr.marcado td { background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.vl-tabla tr.vl-alerta td { background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.vl-sel { width: 30px; }
.vl-tabla td.vl-sel input { width: 17px; height: 17px; accent-color: var(--gold); }
.vl-lote { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.vl-lote b { font-size: 13.5px; }
.vl-lote:hover b { color: var(--brand-text); text-decoration: underline; }
.vl-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); font-weight: 500; }
.vl-sub.tarde { color: var(--warn); font-weight: 700; }
.vl-sub.ok { color: var(--good); font-weight: 700; } .vl-sub.mal { color: var(--warn); font-weight: 700; }
.vl-obs { color: var(--bad); }
.vl-trio { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.vl-trio b { font-size: 14px; }
.vl-trio small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.vl-sincierre { font-size: 12.5px; font-weight: 700; color: var(--warn); text-decoration: none; }
.vl-barra { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); }
.vl-barra.activa { box-shadow: inset 0 2px 0 var(--gold), 0 -10px 24px -14px rgba(20, 26, 46, .25); }
.vl-barra > div:first-child { display: flex; flex-direction: column; line-height: 1.3; }
.vl-barra small { font-size: 12px; color: var(--muted); }

.vl-docs { display: flex; flex-direction: column; gap: 8px; }
.vl-docfila { display: grid; grid-template-columns: minmax(170px, .9fr) minmax(0, 1.6fr) minmax(90px, .6fr) minmax(90px, .6fr) auto; align-items: center; gap: 8px 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
.vl-docfila:hover { border-color: var(--line-strong); background: var(--surface-2); }
.vl-docfila.obs { box-shadow: inset 4px 0 0 var(--bad); }
.vl-docfila.nuevo { box-shadow: inset 4px 0 0 var(--good); }
.vl-docfila-id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vl-docfila .r { text-align: right; }
.vl-docfila .neg { color: var(--bad); }
.vl-nuevo { padding: 1px 8px; border-radius: 999px; background: var(--good); color: #fff; font-size: 10.5px; font-weight: 800; }

/* auto-FIT, no auto-fill: con un solo grupo, auto-fill deja los huecos vacíos creados y mete la
   tarjeta en el primero —340 px con media pantalla al lado vacía, y el código del lote partido
   en tres líneas—. auto-fit los colapsa y la tarjeta ocupa lo que hay. */
.vl-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.vl-grupo { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.vl-grupo header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--gold) 9%, var(--surface)); border-bottom: 1px solid var(--line); }
.vl-grupo header div { display: flex; flex-direction: column; }
.vl-grupo header small { font-size: 11px; color: var(--muted); }
.vl-grupo header span { font-size: 12px; font-weight: 700; color: var(--gold-text); white-space: nowrap; }
.vl-grupo ul { margin: 0; padding: 6px 0; list-style: none; }
.vl-grupo li { display: flex; align-items: center; gap: 8px; padding: 6px 14px; }
.vl-grupo li + li { border-top: 1px solid var(--line); }
/* Dos líneas con sentido: arriba el código con su chapa y el importe; debajo, el lote, las TMH
   y la ley. Envuelve, nunca parte palabras: un código roto en «BH-» «26-» «0029» no se lee. */
.vl-grupo li label { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 3px 6px; cursor: pointer; min-width: 0; font-size: 13px; }
.vl-grupo li label > * { white-space: nowrap; }
/* El subtítulo va el ÚLTIMO en el orden de envoltura aunque en el HTML esté antes: así el importe
   se queda arriba con el código, que es donde se lee, y el detalle baja solo a su línea. */
.vl-grupo li label small { order: 2; flex: 1 1 100%; white-space: normal; color: var(--muted); font-size: 11.5px; }
.vl-grupo li label em { margin-left: auto; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.vl-grupo li a { color: var(--muted); text-decoration: none; }
.vl-grupo footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.vl-hermanos { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.vl-hermanos label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.vl-hermanos small { color: var(--muted); }
.vl-doc-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.vl-doc-mini > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.vl-doc-mini span { font-size: 11px; font-weight: 700; color: var(--muted); }
.vl-doc-mini b { font-size: 16px; }
.vl-doc-mini small { font-size: 11.5px; color: var(--muted); }
.vl-pase { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--good-soft); font-size: 13px; }
.vl-crear-vb { margin-top: 8px; }
.vl-flujo5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vl-link { border: 0; background: none; color: var(--brand-text); font-weight: 700; cursor: pointer; padding: 4px 0; }

/* VAL interna en vivo */
.vl-vivo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); }
.vl-vivo > div { display: flex; flex-direction: column; padding: 4px 8px; }
.vl-vivo span { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.vl-vivo b { font-size: 14px; font-variant-numeric: tabular-nums; }
.vl-vivo .grande { grid-column: span 2; }
.vl-vivo .grande b { font-size: 20px; color: var(--c); }
.vl-vivo small { font-size: 11px; color: var(--muted); }
.vl-vivo small .neg { color: var(--bad); } .vl-vivo small .pos { color: var(--good); }
.vl-vivo.cambiado { box-shadow: inset 4px 0 0 var(--gold); }

/* VAL Beijing: el documento como la hoja */
/* VAL Beijing: azul marino y dorado de la marca (la sede solo va en la etiqueta de cada lote) */
.vb-hoja { --fs: #152A40; --vb-banda: #152A40; --vb-oro: #B8892A; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--vb-banda); box-shadow: var(--shadow), inset 0 3px 0 var(--vb-oro); border-radius: var(--radius); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vb-hoja { --fs: #B9C9DE; --vb-banda: #1E3A58; --vb-oro: #D9AE52; } }
:root[data-theme="dark"] .vb-hoja { --fs: #B9C9DE; --vb-banda: #1E3A58; --vb-oro: #D9AE52; }
.vb-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding-bottom: 12px; border-bottom: 3px double var(--fs); box-shadow: 0 1px 0 var(--vb-oro); }
.vb-zona { color: var(--vb-oro) !important; }
.vb-nro span { color: var(--vb-oro) !important; }
.vb-tabla thead th { background: var(--vb-banda) !important; border-bottom: 2px solid var(--vb-oro); letter-spacing: .03em; }
.vb-banco h3 { border-bottom: 1px solid var(--vb-oro); padding-bottom: 3px; }
.vb-totales .vb-neto th, .vb-totales .vb-neto td { background: var(--vb-banda) !important; }
.vb-totales .vb-neto td { color: #F3DDA6 !important; }
.vb-son { border-left: 4px solid var(--vb-oro) !important; }
/* VAL Beijing · cuadre (pantalla de trabajo; el formato sale aparte en val_formato.php) */
.vc { display: flex; flex-direction: column; gap: 16px; }
.vc .vc-lotes { display: flex; flex-direction: column; gap: 12px; }
.vc-info { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); }
.vc-info div { display: flex; flex-direction: column; }
.vc-info dt { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.vc-info dd { margin: 0; font-weight: 700; }
.vc .vb-tabla thead th { background: var(--surface-2) !important; color: var(--muted); border-bottom: 1px solid var(--line-strong) !important; }
.vc .vc-lotes > .table-scroll { margin: 0; padding: 0; }
.vc .vb-tabla { min-width: 1080px; }
.vc .vb .vb-tabla input.vb-in:not([type=checkbox]), .vb .vc .vb-tabla input.vb-in:not([type=checkbox]) { width: 54px; }
.vb .vc .vb-tabla input.vb-oficio:not([type=checkbox]) { width: 72px; }
.vc .vb-lote small { white-space: normal; max-width: 170px; }
/* En la VAL Beijing predomina el código BJ */
.vc .vc-bj { display: block; font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--text); }
.vc .vb-lote small a { color: var(--muted); }
.vc-svc { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; cursor: pointer; color: var(--muted); }
.vc-svc:has(input:checked) { background: #152A40; border-color: #152A40; color: #F3DDA6; }
.vc-svc input { margin: 0; }
.vc-svc-pill { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: #152A40; color: #F3DDA6; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.vb-fila.es-svc td:not(.vb-lote) { opacity: .55; }
.vb-fila.es-svc td.vb-total { opacity: 1; }
.formato .f-bj b { display: block; font-size: 12.5px; font-weight: 800; }
.formato .f-bj small { font-weight: 500; }
.formato .f-svc { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; color: #9A7120; }
.vc-pie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.vc .vb-totales .vb-neto th, .vc .vb-totales .vb-neto td { background: #152A40 !important; color: #fff; }
.vc .vb-totales .vb-neto td { color: #F3DDA6 !important; }
.vc .vb-totales .vb-sub th, .vc .vb-totales .vb-sub td { background: var(--surface-2); }
.vc-checks { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vc-checks li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; background: var(--surface-2); }
.vc-checks li .ico { flex: none; width: 16px; height: 16px; }
.vc-checks li.bien { background: var(--good-soft); color: var(--good); }
.vc-checks li.mal { background: var(--warn-soft); color: var(--warn); }
.vc-sucio { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--warn); }
.vc-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vc-pie .vc-contra { grid-column: 1 / -1; order: -1; }
.vc-vs { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.vc-vs em { font-style: normal; font-weight: 800; }
.vc-vs em.ter, .vc-contra-cifras .ter b { color: var(--bad); }
.vc-vs em.mas, .vc-contra-cifras .mas b { color: var(--good); }
.vc-contra-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vc-contra-cifras > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); }
.vc-contra-cifras span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vc-contra-cifras b { font-size: 17px; font-variant-numeric: tabular-nums; }
.vc-contra-cifras small { font-size: 11px; color: var(--muted); }
.vc-contra-cifras .ter { background: var(--bad-soft); }
.vc-contra-cifras .mas { background: var(--good-soft); }
@media (max-width: 1100px) { .vc-pie { grid-template-columns: minmax(0, 1fr); } .vc-contra-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vl-pdf-cel { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* El mapa de lo que se tocó contra la VAL interna: la celda cambiada se marca en la tabla y el
   detalle campo por campo va abajo, para poder leerlo meses después */
.vb-cambiado { position: relative; background: var(--warn-soft) !important; border-radius: 6px; }
span.vb-cambiado { display: inline-block; padding: 1px 5px; font-weight: 700; }
input.vb-cambiado { border-color: var(--warn) !important; }
.vc-pie .vc-mapa { grid-column: 1 / -1; order: -2; }
.vc-mapa-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vc-mapa-lista > li { padding: 10px 12px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.vc-mapa-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 7px; }
.vc-mapa-plata { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.vc-mapa-plata b { color: var(--ink); }
.vc-mapa-plata.mas b, .vc-mapa-plata.mas { color: var(--good); }
.vc-mapa-plata.ter b, .vc-mapa-plata.ter { color: var(--bad); }
.vc-mapa-oz { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 1px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); }
.vc-mapa-campos { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-mapa-campo { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--line); font-size: 12px; font-variant-numeric: tabular-nums; }
.vc-mapa-campo i { font-style: normal; font-weight: 700; color: var(--muted); }
.vc-mapa-campo em { font-style: normal; color: var(--muted); }
.vc-mapa-campo b { font-weight: 800; }
.formato-barra .f-ver { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 4px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.formato-barra .f-ver > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.vb .vb-tabla input.vb-oficio:not([type=checkbox]) { width: 84px; text-align: left; }
.vb .vb-tabla input.vb-oficio.falta:not([type=checkbox]) { border-color: var(--warn); background: var(--warn-soft); }
.vb-llacua { font-style: normal; font-weight: 700; color: var(--vb-oro); }
.formato.f-sin-rc .f-c-rc, .formato.f-sin-gr .f-c-gr, .formato.f-sin-of .f-c-of { display: none; }
.vb-cab img { height: 46px; width: auto; }
:root[data-theme="dark"] .vb-cab img { filter: brightness(1.8); }
.vb-titulo { text-align: center; }
.vb-titulo h2 { margin: 0; font-size: 18px; letter-spacing: .3em; color: var(--fs); }
.vb-zona { display: block; margin-top: 3px; font-size: 12px; font-weight: 800; letter-spacing: .25em; color: var(--fs); }
.vb-nro { padding: 6px 14px; border: 2px solid var(--fs); border-radius: 8px; text-align: center; }
.vb-nro span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.vb-nro b { font-size: 20px; color: var(--fs); }
.vb-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; margin: 0; }
.vb-datos div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px; padding: 3px 0; border-bottom: 1px dotted var(--line-strong); }
.vb-datos dt { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.vb-datos dd { margin: 0; font-weight: 700; }
.vb-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vb-tabla thead th { background: var(--fs); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; }
.vb-tabla td { border-bottom: 1px solid var(--line); vertical-align: middle; }
.vb-tabla td.r { text-align: right; }
.vb .vb-tabla input.vb-in:not([type=checkbox]) { min-width: 0; min-height: 0; border: 1px solid var(--line-strong); border-radius: 7px; text-align: right; font-variant-numeric: tabular-nums; }
.vb .vb-tabla input.vb-in.clave:not([type=checkbox]) { border-color: color-mix(in srgb, var(--fs) 55%, var(--line-strong)); font-weight: 800; }
.vb .vb-tabla input.vb-in:not([type=checkbox]):focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); outline: 0; }
.vb-lote { white-space: nowrap; }
.vb-lote a { color: inherit; text-decoration: none; margin-left: 4px; }
.vb-lote small, .vb-guia small { display: block; color: var(--muted); font-size: 10.5px; }
.vb-fila-ag td { background: var(--surface-2); }
.vb-fila-ag.oculta { display: none; }
.vc-ag { display: flex; align-items: flex-start; gap: 10px; align-self: flex-start; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.vc-ag input { margin-top: 3px; }
.vc-ag span { display: flex; flex-direction: column; }
.vc-ag small { color: var(--muted); font-size: 12px; }
.vb-total b { font-size: 14px; }
.vb-quitar { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; }
.vb-pie { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.vb-izq { display: flex; flex-direction: column; gap: 12px; }
.vb-banco h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; color: var(--fs); }
.vb-banco dl { margin: 0; }
.vb-banco dl div { display: grid; grid-template-columns: 140px 1fr; gap: 6px; padding: 3px 0; border-bottom: 1px dotted var(--line-strong); font-size: 13px; }
.vb-banco dt { font-weight: 700; color: var(--muted); }
.vb-banco dd { margin: 0; font-weight: 600; }
.vb-nota { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted); }
.vb-totales { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vb-totales th { padding: 6px 8px; text-align: left; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--line); }
.vb-totales th small { display: block; font-weight: 500; color: var(--muted); }
.vb .vb-totales select { display: block; width: 100%; margin-top: 4px; padding: 4px 6px; border-radius: 8px; font-size: 12px; font-weight: 500; }
.vb-totales td { padding: 6px 8px; text-align: right; font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--line); }
.vb .vb-totales input.vb-in:not([type=checkbox]) { width: 110px; min-width: 0; padding: 5px 8px; border-radius: 8px; text-align: right; font-weight: 700; }
.vb-totales .vb-sub th, .vb-totales .vb-sub td { background: color-mix(in srgb, var(--fs) 9%, var(--surface)); }
.vb-totales .vb-neto th, .vb-totales .vb-neto td { background: var(--fs); color: #fff; font-size: 15px; }
.vb-son { margin: 0; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font-weight: 800; background: var(--surface-2); }
.vb-son small { font-weight: 500; color: var(--muted); }
.vb-barra { margin: 0; }
.vb-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.formato .f-tabla tr.f-ag td { background: #F8F7F6; }

@media (max-width: 1100px) { .vl-flujo5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vb-pie { grid-template-columns: minmax(0, 1fr); } .vl-docfila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vl-vivo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vb-datos { grid-template-columns: minmax(0, 1fr); } .vb-cab { grid-template-columns: minmax(0, 1fr); text-align: center; } .vl-lote { margin-left: 0; } }

/* Ajustes de ancho: el lote no se parte y la hoja entra en la pantalla */
.vl-lote, .vl-lote b { white-space: nowrap; }
.vb-tabla { min-width: 1180px; font-size: 12px; }
.vb .vb-tabla input.vb-in:not([type=checkbox]) { width: 58px; padding: 3px 4px; font-size: 12px; }
.vb-tabla thead th { padding: 5px 3px; }
.vb-tabla td { padding: 4px 3px; }
.vb-guia small { max-width: 70px; white-space: normal; }
.vb-hoja > .table-scroll { margin: 0; padding: 0; }
.formato.f-beijing .f-tabla { font-size: 10.5px; }
.formato.f-beijing .f-tabla td { padding: 3px 3px; white-space: nowrap; }
.formato.f-beijing .f-tabla td small { font-size: 8.5px; }
/* Formato VAL Beijing: azul marino y dorado */
.formato.f-beijing .f-cab { border-bottom: 3px double #152A40; box-shadow: 0 2px 0 -1px #C9962B; }
.formato.f-beijing .f-titulo h2 { color: #152A40; }
.formato.f-beijing .f-zona { color: #9A7120; }
.formato.f-beijing .f-nro { border-color: #152A40; box-shadow: inset 0 -3px 0 #C9962B; }
.formato.f-beijing .f-nro span { color: #9A7120; }
.formato.f-beijing .f-tabla thead th { background: #152A40; border-bottom: 2px solid #C9962B; }
.formato.f-beijing .f-banco h3 { border-bottom: 1px solid #C9962B; padding-bottom: 3px; }
.formato.f-beijing .f-totales .f-neto th, .formato.f-beijing .f-totales .f-neto td { background: #152A40; }
.formato.f-beijing .f-totales .f-neto td { color: #F3DDA6; }
.formato.f-beijing .f-son { border-left: 4px solid #C9962B; }
.formato.f-beijing .f-firmas .f-linea { border-top-color: #152A40; }
@media print { .formato.f-beijing .f-cab, .formato.f-beijing .f-nro, .formato.f-beijing .f-son { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Valorizaciones en una sola hoja: medida con el ancho de la hoja (val_formato.php ajusta el zoom) y más compacta al imprimir */
.formato.f-midiendo { width: 1040px !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; box-shadow: none !important; }
@media print {
  .formato-scroll:has(.f-beijing, [class*="f-sede-"]) { overflow: visible; }
  .formato.f-beijing .f-cab, .formato[class*="f-sede-"] .f-cab { padding-bottom: 8px; }
  .formato.f-beijing .f-datos, .formato[class*="f-sede-"] .f-datos { margin: 8px 0; }
  .formato.f-beijing .f-pie, .formato[class*="f-sede-"] .f-pie { margin-top: 10px; }
  .formato.f-beijing .f-firmas, .formato[class*="f-sede-"] .f-firmas { margin-top: 30px; }
  .formato.f-beijing .f-nota { margin-top: 10px; font-size: 9.5px; }
  .formato.f-beijing .f-son { margin-top: 8px; }
}

/* Terceros (tc): candado y pagos de las diferencias */
.tc-candado { display: grid; place-items: center; min-height: 55vh; }
.tc-caja { width: min(440px, 100%); padding: 28px 30px; text-align: center; }
.tc-icono { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--gold-text); }
.tc-caja h2 { margin: 0 0 6px; }
.tc-caja p { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; }
.tc-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.tc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.tc-form.fila { flex-direction: row; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.tc-olvido { margin-top: 16px; text-align: left; }
.tc-olvido summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.tc-olvido form { margin-top: 10px; }
.tc { display: flex; flex-direction: column; gap: 14px; }
.tc > .panel { margin: 0; }
.tc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tc-kpis > div { display: flex; flex-direction: column; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.tc-kpis span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tc-kpis b { font-size: 24px; font-variant-numeric: tabular-nums; }
.tc-kpis small { font-size: 12px; color: var(--muted); }
.tc-kpis .saldo { border-left: 5px solid var(--bad); } .tc-kpis .saldo b { color: var(--bad); }
.tc-kpis .pagado { border-left: 5px solid var(--good); }
.tc-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tc-tabs a { padding: 7px 14px; border-radius: 999px; color: var(--ink-2); font-weight: 700; font-size: 13px; text-decoration: none; }
.tc-tabs a.on { background: var(--ink); color: var(--surface); }
.tc-reloj { margin-left: auto; font-size: 12px; color: var(--muted); }
.tc-debe { color: var(--bad); }
.tc-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tc-pop { position: relative; }
.tc-pop > summary { list-style: none; }
.tc-pop > summary::-webkit-details-marker { display: none; }
.tc-pop-caja { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; display: flex; flex-direction: column; gap: 8px; width: 290px; padding: 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-up); }
.tc-pop-caja label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.tc-pop-caja small { font-size: 11px; color: var(--muted); }
.tc-anulado td { opacity: .55; text-decoration: line-through; }
.tc-anulado td:last-child { text-decoration: none; }
.tc-anular { display: flex; gap: 4px; }
.tc .tc-anular input:not([type=checkbox]) { width: 120px; min-width: 0; padding: 4px 8px; font-size: 12px; }
.tc-clave { padding: 12px 18px; }
.tc-clave summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); }
@media (max-width: 900px) { .tc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tc-pop-caja { right: auto; left: 0; } }

/* ═══════════ Negociación de leyes (ng) ═══════════
   Mismos colores con sentido: azul = tu laboratorio (interno), violeta = lo que pide el proveedor, dorado = lo que ofreces,
   ocre = lo reportado, verde = cierre. Reusa los componentes del simulador (sx-veredicto, sx-nego, sx-comp, sx-barra). */
.ng {
  --int: var(--sky-text); --int-bg: color-mix(in srgb, var(--sky) 7%, var(--surface));
  --prv: #6E4FB0; --prv-bg: color-mix(in srgb, #6E4FB0 8%, var(--surface));
  --prp: var(--gold-text); --prp-bg: color-mix(in srgb, var(--gold) 9%, var(--surface));
  --rep: #8A6A2A; --rep-bg: color-mix(in srgb, #B08A3A 7%, var(--surface));
  --cie: var(--good); --cie-bg: color-mix(in srgb, var(--good) 8%, var(--surface));
  display: flex; flex-direction: column; gap: 16px;
}
:root[data-theme="dark"] .ng { --prv: #BCA6F4; --rep: #D9B878; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ng { --prv: #BCA6F4; --rep: #D9B878; } }

/* Tablero: las cinco etapas como un camino */

.ng .lx-buscar input[type="search"] { border: 0; background: transparent; box-shadow: none; padding: 9px 0; min-width: 0; width: 100%; min-height: 0; }
.ng-filtros .ng-sede select { min-width: 150px; width: auto; border-radius: 999px; }
.ng-ir { display: flex; gap: 6px; align-items: center; }
.ng .ng-ir input:not([type=checkbox]) { width: 170px; min-width: 0; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; }
.ng-ayuda { margin: 0; font-size: 13px; color: var(--ink-2); }
.ng-sinlab { margin: 0; padding: 7px 12px; border-radius: 10px; background: var(--warn-soft); font-size: 12.5px; }
.ng-sinlab a { font-weight: 700; }
.ng-vacio { text-align: center; }

/* Bandeja de lotes */
.ng-bandeja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ng-bandeja > .table-scroll { margin: 0; padding: 0; }
.ng-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.ng-tabla th { padding: 12px 12px 8px; text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line); }
.ng-tabla th.r, .ng-tabla td.r { text-align: right; }
.ng-tabla th.int { color: var(--int); } .ng-tabla th.prop { color: var(--prp); } .ng-tabla th.rep { color: var(--rep); } .ng-tabla th.prv { color: var(--prv); } .ng-tabla th.cierre { color: var(--cie); }
.ng-tabla td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--line); }
.ng-tabla tbody tr { cursor: default; }
.ng-tabla tbody tr:hover td { background: var(--surface-2); }
.ng-tabla tr.marcado td { background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
.ng-tabla td.int { background: var(--int-bg); }
.ng-tabla tbody tr:hover td.int { background: color-mix(in srgb, var(--sky) 11%, var(--surface)); }
.ng-sel { width: 34px; }
.ng-tabla td.ng-sel input { width: 17px; height: 17px; margin-top: 4px; accent-color: var(--gold); }
.ng-lote a { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; color: inherit; text-decoration: none; }
.ng-lote a b { font-size: 14px; }
.ng-lote a span { color: var(--muted); font-size: 12.5px; }
.ng-lote a:hover b { color: var(--brand-text); text-decoration: underline; }
.ng-lote > small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.ng-v { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.ng-v b { font-size: 15px; font-weight: 800; }
.ng-v small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ng-v em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--prv); }
.ng-v.int b { color: var(--int); } .ng-v.prop b { color: var(--prp); } .ng-v.rep b { color: var(--rep); } .ng-v.prv b { color: var(--prv); } .ng-v.cierre b { color: var(--cie); }
.ng-v.vacio { color: var(--muted); font-size: 12.5px; }
.ng-v.inline { display: inline-flex; flex-direction: row; align-items: baseline; gap: 6px; }
.ng-doc { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ng-doc small { font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: var(--muted); }
.ng-doc.borrador { background: var(--warn-soft); }
.ng-doc.borrador small { color: var(--warn); }
.ng-doc.canje { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.ng-doc:hover { filter: brightness(.96); }
.ng-hace, .ng-sub { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.ng-tabla .pos { color: var(--good); } .ng-tabla .neg { color: var(--bad); }
.ng-acc { text-align: right; white-space: nowrap; }
.ng-acc .btn { margin-left: 4px; }
.ng-abrir { display: inline-block; margin-left: 8px; font-size: 12.5px; font-weight: 700; color: var(--brand-text); text-decoration: none; }
.ng-abrir:hover { text-decoration: underline; }

.ng-envio { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 18px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); }
.ng-envio.activa { box-shadow: inset 0 2px 0 var(--gold), 0 -10px 24px -14px rgba(20, 26, 46, .25); }
.ng-envio:not(.activa) .ng-envio-campos { display: none; }
.ng-envio-cab { display: flex; flex-direction: column; margin-right: auto; line-height: 1.25; }
.ng-envio-cab b { font-size: 14px; }
.ng-envio-cab small { font-size: 12px; color: var(--muted); }
.ng-envio-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.ng-envio-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ng .ng-envio-acc select, .ng .ng-enviar-grupo select { width: auto; min-width: 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; }
.ng-mini { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ng-mini > span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.ng .ng-mini input:not([type=checkbox]) { width: 62px; min-width: 0; padding: 6px 8px; border-radius: 9px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ng .ng-mini select { width: auto; min-width: 0; padding: 6px 8px; border-radius: 9px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.ng-mini select + input { margin-top: 4px; }
.ng-check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); cursor: pointer; }
.ng-dest, .ng-ruc { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ng .ng-dest input:not([type=checkbox]) { width: 240px; min-width: 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; }
.ng .ng-ruc input:not([type=checkbox]) { width: 130px; min-width: 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; font-family: var(--mono); }

/* Ficha del lote */
.ng-volver { align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none; }
.ng-volver:hover { color: var(--ink); }
.ng-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 24px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); }
.ng-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ng-cab h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0; font-family: var(--mono); font-size: 28px; letter-spacing: .02em; }
.ng-cab-id p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.ng-etapa { --c: var(--muted); padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--c); font-family: var(--sans); font-size: 12.5px; font-weight: 800; letter-spacing: 0; }
.ng-etapa.reportar { --c: var(--int); } .ng-etapa.reportado { --c: var(--rep); } .ng-etapa.canjear { --c: var(--prp); } .ng-etapa.encanje { --c: var(--prv); } .ng-etapa.cerrado { --c: var(--cie); } .ng-etapa.sinlab { --c: var(--warn); }
.ng-cab-datos { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; }
.ng-cab-datos dt { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ng-cab-datos dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ng-pasos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 0; padding: 0; list-style: none; }
.ng-pasos li { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 10px 14px 10px 18px; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.ng-pasos li:first-child { border-radius: 14px 0 0 14px; }
.ng-pasos li:last-child { border-radius: 0 14px 14px 0; }
.ng-pasos li + li { border-left: 0; }
.ng-pasos li::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--line-strong); }
.ng-pasos li.hecho::before { background: var(--good); }
.ng-pasos li.curso::before { background: var(--prv); }
.ng-pasos li.curso { background: var(--prv-bg); }
.ng-pasos li.ahora { background: var(--prp-bg); }
.ng-pasos li.ahora::before { background: var(--gold); }
.ng-pasos span { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ng-pasos b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ng-pasos small { overflow: hidden; font-size: 11.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }

.ng-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 16px; }
.ng-principal { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ng-lab { padding: 14px 20px; background: var(--int-bg); border: 1px solid color-mix(in srgb, var(--sky) 25%, var(--line)); border-radius: var(--radius); }
.ng-lab header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ng-lab h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--int); }
.ng-lab h3 em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .75; }
.ng-link { font-size: 12.5px; font-weight: 700; color: var(--brand-text); text-decoration: none; }
.ng-lab dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; margin: 12px 0 0; align-items: start; }
.ng-lab dt { font-size: 11px; font-weight: 700; color: var(--muted); }
.ng-lab dd { margin: 0; font-size: 22px; font-weight: 800; color: var(--int); font-variant-numeric: tabular-nums; }
.ng-lab dd small { font-size: 12px; font-weight: 600; color: var(--muted); }
.ng-lab dl > div > small { font-size: 11.5px; color: var(--muted); }
.ng-aviso { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); font-size: 13px; }
.ng-aviso.suave { background: var(--surface-2); color: var(--ink-2); }

.ng-paso { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ng-paso > header, .ng-sim-cab { display: flex; align-items: flex-start; gap: 14px; }
.ng-paso h3, .ng-sim-cab h3 { margin: 0 0 3px; font-size: 17px; }
.ng-paso h3 small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ng-paso header p, .ng-sim-cab p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.ng-paso-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #2A1C00; font-weight: 800; font-size: 15px; }
.ng-paso-n .ico { width: 16px; height: 16px; }
.ng-paso-cerrado .ng-paso-n { background: var(--good); color: #fff; }
.ng-paso-encanje .ng-paso-n { background: var(--prv); color: #fff; }
.ng-paso-resp .ng-paso-n { background: var(--rep); color: #fff; }
.ng-campos3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; }
.ng-campos3 > label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ng-campos3 > label small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.ng .ng-campos3 input:not([type=checkbox]) { width: 100%; min-width: 0; padding: 9px 12px; border-radius: 11px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.ng .ng-campos3 > label.au input:not([type=checkbox]) { border-color: color-mix(in srgb, var(--gold) 60%, var(--line-strong)); background: var(--prp-bg); }
.ng .ng-campos3.mini input:not([type=checkbox]) { padding: 7px 10px; font-size: 15px; }
.ng-campos3 > label > small[data-ng-r-dif] { font-size: 11.5px; letter-spacing: 0; text-transform: none; }
.ng-campos3 .pos { color: var(--good); } .ng-campos3 .neg { color: var(--bad); }
.ng-atajos { display: flex; flex-wrap: wrap; gap: 4px; letter-spacing: 0; text-transform: none; }
.ng-atajos button { padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.ng-atajos button:hover { border-color: var(--gold); color: var(--ink); }
.ng-paso-pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.ng-enviar-grupo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ng-o { font-size: 12px; color: var(--muted); }
.ng-paso .hint { margin: 0; }
.ng-resp-opciones { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 12px; }
.ng-resp-acepta, .ng-resp-form { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; }
.ng-resp-acepta { justify-content: flex-start; align-self: start; background: var(--cie-bg); border: 1px solid color-mix(in srgb, var(--good) 30%, var(--line)); }
.ng-resp-form { background: var(--prv-bg); border: 1px solid color-mix(in srgb, var(--prv) 25%, var(--line)); }
.ng-resp-acepta b, .ng-resp-form > b { font-size: 14.5px; }
.ng-resp-acepta small, .ng-resp-form > small { font-size: 12.5px; color: var(--ink-2); }
.ng-resp-acepta .btn, .ng-resp-form .btn { align-self: flex-start; }
.ng-nota { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted); }
.ng .ng-nota input:not([type=checkbox]) { width: 100%; min-width: 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; }
.ng-cierre { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.ng-cierre > div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.ng-cierre > div.au { background: var(--cie-bg); }
.ng-cierre dt { font-size: 11px; font-weight: 700; color: var(--muted); }
.ng-cierre dd { margin: 2px 0; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ng-cierre .au dd { color: var(--cie); }
.ng-cierre dd small { font-size: 12px; color: var(--muted); }
.ng-cierre > div > small { font-size: 11.5px; color: var(--muted); }
.ng-reabrir summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ng-reabrir form { display: flex; gap: 6px; margin-top: 6px; }
.ng .ng-reabrir input:not([type=checkbox]) { width: 220px; min-width: 0; padding: 6px 10px; border-radius: 9px; font-size: 13px; }

/* Simulador dentro de la ficha */
.ng-sim { display: flex; flex-direction: column; gap: 14px; }
.ng-sim-cab { padding: 0 4px; }
.ng-sim-cab .ng-paso-n { background: var(--ink); color: var(--surface); }
.ng-caras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
/* ——— El canje, reordenado ———
   TU OFERTA va EN MEDIO de las dos puntas —lo reportado y lo que pide—, porque es exactamente lo que
   es: un punto entre esas dos. Estaba al extremo derecho, lejos del rango en el que vive, y había que
   saltar con la vista de un lado al otro para ver si la oferta estaba cerca de uno o del otro.
   Se hace con «order» para no mover los bloques de sitio en el PHP. */
.ng-cara.oferta { order: 2; }
.ng-cara.prv { order: 3; }
/* Y LO QUE SE GANA sube del todo: era lo último de la pantalla, debajo de tres filas de botones, y
   es la única pregunta que se está contestando aquí. Se decide mirándolo, no al final. */
.ng-sim .sx-veredicto { order: -1; }
.ng-sim .sx-veredicto .sx-v-sello b { font-size: 26px; }
.ng-sim .sx-veredicto .sx-v-dato b { font-size: 25px; }

/* La escalera del canje: de lo reportado a lo que pide, con el número de cada paso debajo */
.sx-escalera button { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; padding: 5px 12px; }
.sx-escalera button small { font-size: 10.5px; font-weight: 700; opacity: .75; font-variant-numeric: tabular-nums; }
.sx-escalera button small:empty { display: none; }
.sx-rapidos button.paso { border-color: color-mix(in srgb, var(--ink) 20%, transparent); color: var(--ink-2); }
.sx-rapidos button.paso:hover { border-color: var(--brand); color: var(--brand-text); }
.ng-cara { --c: var(--ink-2); --bg: transparent; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; background: linear-gradient(180deg, var(--bg), transparent 90%); min-width: 0; }
.ng-cara + .ng-cara { border-left: 1px solid var(--line); }
.ng-cara.lab { --c: var(--int); --bg: var(--int-bg); } .ng-cara.rep { --c: var(--rep); --bg: var(--rep-bg); } .ng-cara.prv { --c: var(--prv); --bg: var(--prv-bg); } .ng-cara.oferta { --c: var(--prp); --bg: var(--prp-bg); }
.ng-cara.oferta { box-shadow: inset 0 3px 0 var(--gold); }
.ng-cara-et { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--c); }
.ng-cara-et em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .75; }
.ng-cara-f { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ng-cara-f b { font-size: 18px; color: var(--c); font-variant-numeric: tabular-nums; text-align: right; }
.ng .ng-cara-f input:not([type=checkbox]) { width: 100%; min-width: 0; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--c); font-size: 17px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.ng .ng-cara-f input:not([type=checkbox]):focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); outline: 0; }
.ng .ng-cara-f input.supuesto:not([type=checkbox]) { border-style: dashed; }
.ng .ng-cara-f input[readonly]:not([type=checkbox]) { border-color: transparent; background: transparent; }
.ng .ng-cara.oferta .ng-cara-f input:not([type=checkbox]) { border-color: color-mix(in srgb, var(--gold) 55%, var(--line-strong)); }
.ng-cara-monto { display: flex; flex-direction: column; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ng-cara-monto em { font-style: normal; font-size: 11px; color: var(--muted); }
.ng-cara-monto b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ng-rapidos { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ng-rapidos .sx-rapidos > span { min-width: 38px; }
.ng-rapidos .sx-rapidos button.lab { border-color: color-mix(in srgb, var(--int) 40%, transparent); color: var(--int); }
.ng-rapidos .sx-rango { margin: 4px 0 0; }
.ng .sx-campos label { display: flex; flex-direction: column; gap: 3px; }
.ng .sx-campos input:not([type=checkbox]), .ng .sx-campos select { min-width: 0; width: 100%; padding: 7px 9px; border-radius: 9px; font-variant-numeric: tabular-nums; }
.ng .sx-campos input[data-fijo="1"] { border-color: var(--gold); background: var(--prp-bg); }
.ng .sx-comp-tabla thead th small { white-space: nowrap; }
.ng-barra .sx-barra-acc { align-items: center; }
.ng-cerrar-directo { color: var(--good); }
.ng-remuestreo { padding: 12px 18px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.ng-remuestreo summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; cursor: pointer; }
.ng-remuestreo summary span { font-size: 12.5px; color: var(--muted); }
.ng-remuestreo form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

/* Historia */
.ng-historia { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ng-historia h3 { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ng-historia ol { position: relative; margin: 0; padding: 0; list-style: none; }
.ng-historia ol::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.ng-h { --c: var(--line-strong); position: relative; display: flex; flex-direction: column; gap: 3px; padding: 0 0 16px 24px; }
.ng-h-punto { position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border: 3px solid var(--surface); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--c); }
.ng-h.reporte { --c: var(--rep); } .ng-h.remuestreo { --c: var(--rep); } .ng-h.canje { --c: var(--prp); } .ng-h.respuesta { --c: var(--prv); }
.ng-h.cierre, .ng-h.acepto, .ng-h.aceptado { --c: var(--good); } .ng-h.rechazo, .ng-h.rechazado { --c: var(--bad); } .ng-h.reabierto { --c: var(--warn); }
.ng-h.anulado { opacity: .55; }
.ng-h.anulado .ng-v b { text-decoration: line-through; }
.ng-h-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ng-h-cab b { font-size: 13px; }
.ng-h-cab a { font-size: 11.5px; font-weight: 700; color: var(--brand-text); text-decoration: none; }
.ng-h .ng-v { align-items: flex-start; }
.ng-h > small { font-size: 11px; color: var(--muted); line-height: 1.4; }
.ng-h > small em { font-style: normal; font-weight: 700; color: var(--c); }

/* Documento: respuesta por lote · Carga de leyes: recuperaciones */
.lx-resp { white-space: nowrap; }
.lx-resp .btn + .btn { margin-left: 4px; }
.lx-resp-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.lx-resp-chip.si { background: var(--good-soft); color: var(--good); } .lx-resp-chip.no { background: var(--bad-soft); color: var(--bad); }
p.lx-volver { margin: 0; }
p.lx-volver a { color: var(--muted); text-decoration: none; }
p.lx-volver a:hover { color: var(--ink); }
.carga-leyes { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.carga-rec { display: flex; flex-direction: column; gap: 10px; }
.carga-rec label { display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 1280px) {
  .ng-ficha { grid-template-columns: minmax(0, 1fr); }
  .ng-historia { position: static; max-height: none; }
}
@media (max-width: 1100px) {
  .carga-leyes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ng-cab { grid-template-columns: minmax(0, 1fr); }
  .ng-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-pasos li { border-radius: 0 !important; border-left: 1px solid var(--line) !important; }
  .ng-resp-opciones { grid-template-columns: minmax(0, 1fr); }
  .ng-cara + .ng-cara { border-left: 0; border-top: 1px solid var(--line); }
  .ng .ng-dest input:not([type=checkbox]) { width: 100%; }
  .ng-envio-cab { width: 100%; }
}
@media print {
  .ng-envio, .ng-rapidos, .ng-barra, .ng-remuestreo, .ng-reabrir { display: none !important; }
  .ng-ficha { grid-template-columns: minmax(0, 1fr); }
  .ng-historia { position: static; max-height: none; box-shadow: none; }
}

/* Por reportar: lo que se reporta se escribe a mano; la sugerencia va de guía */
.ng-th-sub { margin-top: 2px; }
.ng-tabla td.ng-rep { min-width: 290px; background: var(--prp-bg); }
.ng-rep-in { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 6px; }
.ng-rep-in label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ng .ng-rep-in input:not([type=checkbox]) { width: 100%; min-width: 0; min-height: 0; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line-strong)); border-radius: 9px; background: var(--surface); color: var(--prp); font-size: 14.5px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.ng .ng-rep-in input:not([type=checkbox])::placeholder { color: color-mix(in srgb, var(--muted) 55%, transparent); font-weight: 600; }
.ng .ng-rep-in input:not([type=checkbox]):focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); outline: 0; }
.ng-rep-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 5px; font-size: 11px; color: var(--muted); }
.ng-rep-sug button { padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--brand-text); font-size: 11px; font-weight: 700; cursor: pointer; }
.ng-rep-sug button:hover { border-color: var(--gold); }
.ng-mini-et { align-self: center; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--prp); }
.ng-envio:not(.activa) .ng-envio-campos.ng-sugerencia { display: flex; }
.ng-paso > header .ng-usar-sug { margin-left: auto; flex: none; }

/* Remuestreo: otra negociación del lote */
.ng { --rmu: #B4541F; --rmu-bg: color-mix(in srgb, #B4541F 8%, var(--surface)); }
:root[data-theme="dark"] .ng { --rmu: #F0A070; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ng { --rmu: #F0A070; } }
.ng-etapa.remuestreo { --c: var(--rmu); }
/* Los códigos que siguen a su ruma: no son un paso de trabajo, son el mismo mineral con otro código. */
.ng-etapa.hereda { --c: var(--prp); }
.ng-hereda-aviso { margin: 0 0 14px; }
.ng-hereda-aviso a { font-weight: 800; }
.ng-remu-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--rmu-bg); color: var(--rmu); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; }
.ng-v em.ng-orig { color: var(--muted); font-weight: 600; }
.ng-lab-espera { margin: 8px 0 0; font-size: 14px; color: var(--rmu); font-weight: 600; }
.ng-lab-original { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--sky) 30%, var(--line)); font-size: 12.5px; color: var(--ink-2); }
.ng-lab-original .pos { color: var(--good); } .ng-lab-original .neg { color: var(--bad); }
.ng-paso-remuestreo .ng-paso-n { background: var(--rmu); color: #fff; }
.ng-paso-remuestreo { box-shadow: inset 0 3px 0 var(--rmu), var(--shadow); }
.ng .ng-campos3 select.ng-unidad { width: auto; min-width: 0; padding: 4px 8px; border-radius: 8px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.ng-campos3 > label.ng-ancho2 { grid-column: span 2; }
.ng-remuestreo { border-color: color-mix(in srgb, var(--rmu) 45%, var(--line-strong)); }
.ng-remuestreo summary b { color: var(--rmu); }
.ng-remuestreo .hint { margin: 0; }
.ng-h-grupo { position: relative; z-index: 1; margin: 4px 0 12px; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ng-h-grupo.vigente { background: var(--rmu-bg); color: var(--rmu); }
.ng-h.hito.remuestreo, .ng-h.hito.resultado { --c: var(--rmu); }
@media (max-width: 760px) { .ng-campos3 > label.ng-ancho2 { grid-column: auto; } }

/* Remuestreo: elegir con qué ley de laboratorio se negocia */
.ng-pregunta { margin: 4px 0 0; font-size: 14px; font-weight: 700; }
.ng-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ng-opcion { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); transition: border-color .15s, background .15s; }
.ng-opcion:has(input[type="radio"]:checked) { border-color: var(--rmu); background: var(--rmu-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmu) 15%, transparent); }
.ng-opcion-sel { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ng-opcion-sel input[type="radio"] { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rmu); }
.ng-opcion-cab { display: flex; flex-direction: column; gap: 3px; }
.ng-opcion-cab b { font-size: 14.5px; }
.ng-opcion-cab small { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); font-weight: 400; }
.ng-opcion-cab small b { font-size: inherit; color: var(--int); }
.ng-opcion-campos { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 28px; }
.ng-opcion-campos > label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ng-opcion-campos > label small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.ng .ng-opcion-campos input:not([type=checkbox]):not([type=radio]) { width: 96px; min-width: 0; padding: 6px 9px; border-radius: 9px; font-size: 14.5px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ng-in-unidad { display: inline-flex; gap: 4px; align-items: center; }
.ng .ng-in-unidad select { width: auto; min-width: 0; padding: 5px 6px; border-radius: 8px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.ng-cambiar-lab { margin-top: 10px; }
.ng-cambiar-lab summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--rmu); }
.ng-cambiar-lab form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ng-directo { padding: 1px 8px; border-radius: 999px; background: var(--surface-3); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.ng-prv { color: var(--prv); }
@media (max-width: 760px) { .ng-opciones { grid-template-columns: minmax(0, 1fr); } }

/* Lotes sin ley de laboratorio (directos incluidos) */
.ng-sinlab > summary { cursor: pointer; }
.ng-sinlab-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 180px; overflow: auto; }
.ng-sinlab-lista a { padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 12px; }
.ng-sinlab-lista a small { color: var(--muted); }
.ng-sinlab-lista a:hover { box-shadow: inset 0 0 0 1px var(--warn); }

/* Aviso de entorno (config.local.php › entorno › aviso): p. ej. SERVIDOR DE PRUEBAS */
.entorno-aviso { position: sticky; top: 0; z-index: 90; padding: 5px 16px; background: #B42318; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }

/* ═══════════ Documentos por etapa (doc-) y operación de cancha (op-) ═══════════ */
.doc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doc-lista li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.doc-lista li.falta { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
.doc-lista li.ok { border-color: color-mix(in srgb, var(--good) 30%, var(--line)); }
/* Un papel que no se subió en este ingreso: ya estaba en el archivo de la placa o del chofer. Se ve
   hecho, porque lo está, pero más tenue que lo que sí se entregó hoy: son dos cosas distintas y la
   diferencia importa cuando alguien revisa qué trajo el chofer esta vez. */
/* La puerta a la ficha del lote desde «Por hacer VAL Beijing». Era un ↗ a secas y no se veía. */
.vl-grupo li > .vl-abrir { font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; text-decoration: none; }
.vl-grupo li > .vl-abrir:hover { color: var(--gold, #C9962B); border-color: var(--gold, #C9962B); }

.doc-lista li.doc-cubierto { border-style: dashed; background: color-mix(in srgb, var(--good) 3%, var(--surface)); }
.doc-lista li.doc-cubierto .doc-ico { opacity: .62; }
.doc-lista li.doc-cubierto > .doc-txt > small { color: var(--ink-2); }
.doc-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); color: var(--muted); }
li.ok .doc-ico { background: var(--good-soft); color: var(--good); }
li.falta .doc-ico { background: var(--bad-soft); color: var(--bad); }
.doc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc-txt > small { color: var(--muted); font-size: 12px; }
.doc-archivo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.doc-archivo small { color: var(--muted); font-size: 11.5px; }
.doc-archivo form { display: inline; }
.doc-subir label.btn { cursor: pointer; white-space: nowrap; }
.doc-subir label.subiendo { opacity: .7; pointer-events: none; }
.doc-pill { white-space: nowrap; }
.doc-ok { display: flex; align-items: center; gap: 8px; color: var(--good); font-weight: 700; margin: 0; }
.doc-pedir, .doc-resolver { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.doc-pedir label, .doc-resolver label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.doc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.doc-tab { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.doc-tab small { font-size: 12px; font-weight: 700; color: var(--muted); }
.doc-tab b { font-size: 26px; font-variant-numeric: tabular-nums; }
.doc-tab.warn b { color: var(--warn); } .doc-tab.bad b { color: var(--bad); }
.doc-tab.activa { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.bz-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); text-decoration: none; font-size: 12.5px; }
.bz-docs span { flex: 1; min-width: 0; }
.bz-docs b { color: var(--brand); white-space: nowrap; }
.bz-docs.estado-faltan, .bz-docs.estado-rechazada { background: var(--bad-soft); }
.bz-docs.estado-solicitada { background: var(--warn-soft); }
.bz-acc-doc { font-size: 11px; font-weight: 800; min-width: 34px; text-align: center; }
.bz-acc-doc.estado-faltan, .bz-acc-doc.estado-rechazada { color: var(--bad); }
.bz-acc-doc.estado-completo { color: var(--good); }

.op { display: flex; flex-direction: column; gap: 16px; }
.op-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.op-periodo input { width: auto; }
.op-ruta { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.op-tramo { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); position: relative; }
.op-tramo small { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.op-tramo b { font-size: 22px; font-variant-numeric: tabular-nums; }
.op-tramo span { font-size: 12px; color: var(--ink-2); }
.op-tramo.total { background: linear-gradient(135deg, #0C3B3F, #0E7466); color: #fff; }
.op-tramo.total small, .op-tramo.total span { color: rgba(255, 255, 255, .8); }
.op-etapas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.op-etapa { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.op-etapa small { font-size: 12px; font-weight: 700; color: var(--muted); }
.op-etapa b { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--c); }
.op-etapa span { font-size: 11.5px; color: var(--ink-2); }
.op-etapa.activa { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.op-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.op-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-3, var(--surface-2)); }
.op-chips button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.op-chips button.activa { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 26, 46, .16); }
.op-chips b { margin-left: 4px; color: var(--bad); }
.op-buscar { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.op-buscar input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.op-tabla td small { display: block; color: var(--muted); font-size: 11.5px; }
.op-tabla tr.marcado td { background: var(--brand-soft); }
.op-c0 { width: 34px; }
.op-zona { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); }
.op-zona.z-finos { background: #E0ECFF; color: #1D4ED8; } .op-zona.z-gruesos { background: #F3E8D7; color: #8A5A12; }
.op-foto { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; text-decoration: none; font-weight: 800; }
.op-foto.ok { background: var(--good-soft); color: var(--good); } .op-foto.no { background: var(--bad-soft); }

/* ═══ Chancado y muestreo: el lote en grande y el paso que le toca ═══ */
.op-cod .op-lote { display: block; font-size: 15px; font-weight: 800; color: var(--brand); text-decoration: none; }
.op-cod .op-bj { display: block; font-size: 11.5px; color: var(--ink-3); }

/* Las tres fotos del lote: chancado, muestreo y paleta */
.op-fotos { display: inline-flex; gap: 3px; text-decoration: none; }
.op-fotos i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  font-style: normal; font-size: 11px; font-weight: 800; }
.op-fotos i.ok { background: var(--good-soft); color: var(--good); }
.op-fotos i.no { background: var(--bad-soft); color: var(--bad); }

/* ═══ Chancado y muestreo en tablet: cada lote es una ficha que se toca ═══
   Esta pantalla se usa caminando por la cancha con una tableta en la mano, así que no es una tabla:
   son fichas con el paso que le toca a cada lote y la cámara a un toque. */
.op-todos { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.op-todos input { width: 22px; height: 22px; }

.op-lotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.op-lote { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px;
  border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow); }
.op-lote:has(input[data-op-sel]:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.op-lote-cab { display: flex; align-items: flex-start; gap: 10px; }
.op-marca { display: grid; place-items: center; width: 34px; height: 34px; margin: -4px 0 0 -4px; border-radius: 10px; cursor: pointer; }
.op-marca:hover { background: var(--surface-2); }
.op-marca input { width: 22px; height: 22px; }
.op-lote-id { flex: 1 1 auto; min-width: 0; }
.op-lote-cod { display: block; font-size: 18px; font-weight: 800; color: var(--brand); text-decoration: none; letter-spacing: .01em; }
.op-lote-id small { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.op-lote-etapa { flex: none; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.op-lote-prov { margin: -2px 0 0; font-size: 13.5px; line-height: 1.4; }
.op-lote-prov small { display: block; font-size: 11.5px; color: var(--muted); }
.op-lote-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.op-dato { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 10px; background: var(--surface-2); }
.op-dato small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.op-dato b { font-size: 14px; font-variant-numeric: tabular-nums; }
.op-dato.alerta { background: var(--bad-soft); } .op-dato.alerta b { color: var(--bad); }
.op-lote-pasos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.op-lote-paso { display: inline-flex; flex-direction: column; gap: 1px; }
.op-lote-paso small { font-size: 10.5px; color: var(--muted); }
.op-lote-paso small:empty { display: none; }

/* El paso: un botón ancho que abre el panel dentro de la misma ficha */
.op-paso { margin-top: 2px; }
.op-paso > summary { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 10px 16px;
  border-radius: 13px; background: var(--c); color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.op-paso > summary::-webkit-details-marker { display: none; }
.op-paso > summary::after { content: "▾"; font-size: 12px; opacity: .8; }
.op-paso[open] > summary::after { content: "▴"; }
.op-paso > summary:hover { filter: brightness(1.08); }
.op-paso-caja { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.op-campo { display: block; font-size: 11.5px; }
.op-campo span { display: block; margin-bottom: 4px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.op-campo input, .op-campo select { width: 100%; min-height: 46px; font-size: 15px; }
.op-paso-caja .btn { width: 100%; justify-content: center; min-height: 50px; font-size: 15px; border-radius: 13px; }

/* Contar las bolsas dentro del propio paso del muestreo: quién muestreó, la hora y cuántas de cada
   tipo salieron son el mismo dato del mismo momento. Los − y + son los mismos de la vista de envíos.
   Los selectores llevan tres clases porque la regla general de los input (width: 100 %) estiraba el
   campo del medio y empujaba el + fuera de la pantalla del celular, que es donde esto se usa. */
.op-muestras { display: flex; flex-direction: column; gap: 9px; padding: 11px; border-radius: 12px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.op-muestras-et { font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.op-muestras-et small { display: block; margin-top: 2px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
.op-muestras .mu-tipos .mu-tipo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.op-muestras .mu-tipos .mu-contador { display: flex; align-items: center; gap: 3px; flex: none; }
.op-muestras .mu-tipos .mu-contador input { flex: none; width: 58px; min-width: 0; height: 42px; padding: 0; text-align: center;
  font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 11px; }
.op-muestras-tot { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.op-muestras.con .op-muestras-tot { color: var(--good); }
.op-muestras-tot b { font-size: 16px; font-variant-numeric: tabular-nums; }
/* Lo que pide foto no se registra desde la ficha del lote: desde ahí se manda a la pantalla de cancha. */
.op-mini-ir { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.op-mini-ir small { color: var(--muted); font-size: 11.5px; }
.op-paso-otro { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; padding-top: 12px; border-top: 1px dashed var(--line); }
.op-paso-listo { margin: 2px 0 0; padding: 11px; border-radius: 12px; background: var(--good-soft);
  color: var(--good); font-size: 13.5px; font-weight: 700; text-align: center; }
.op-barra-nota { flex: 0 0 100%; margin: 0; font-size: 11.5px; opacity: .75; }

/* La cámara: un cuadro grande que abre la cámara de la tableta y después muestra lo que se tomó */
.op-camara-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 108px; padding: 14px; border: 2px dashed var(--line-2, var(--line)); border-radius: 14px;
  background: var(--surface); cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.op-camara-btn:hover { border-color: var(--brand); background: var(--brand-soft, var(--surface-2)); }
.op-camara-btn svg { width: 34px; height: 34px; fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linejoin: round; }
.op-camara-btn b { font-size: 15px; color: var(--ink); }
.op-camara-btn small { font-size: 11.5px; color: var(--muted); }
.op-camara-vista { position: relative; }
.op-camara-vista img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; }
.op-camara-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(15, 32, 51, .78); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.op-camara-x:hover { background: var(--bad); }

@media (max-width: 560px) {
  .op-lotes { grid-template-columns: minmax(0, 1fr); }
  .op-lote-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Elegir cómo se ven: fichas (tableta, en cancha) o lista (escritorio, para ver muchos de una) */
.op-vista { display: inline-flex; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--surface); }
.op-vista button { padding: 8px 14px; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--muted); cursor: pointer; }
.op-vista button + button { border-left: 1px solid var(--line); }
.op-vista button.activa { background: var(--brand); color: #fff; }
.op-vista button:not(.activa):hover { background: var(--surface-2); color: var(--ink); }

/* ═══ Versiones de una valorización ═══
   Una VAL no se pisa: cada vez que se rehace queda una versión con su motivo y lo que cambió. */
.vl-motivo { display: block; margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.vl-motivo small { display: block; margin-bottom: 4px; font-weight: 500; color: var(--muted); }
.vl-motivo input { width: 100%; }
.vl-vers { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--gold-soft);
  color: var(--gold-text); font: 700 10.5px var(--mono); }

/* El mapa de la valorización: qué versión vale, quién la aprobó, si va por Terceros y su PDF.
   Una VAL se rehace varias veces, y eso hay que poder leerlo de un vistazo. */
.vl-mapa-cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vl-mapa-caja { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.vl-mapa-caja.beijing { background: var(--surface-2); }
.vl-mapa-caja.terceros { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.vl-mapa-caja.vacia { opacity: .7; }
.vl-mapa-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.vl-mapa-n { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0; text-transform: none;
  padding: 1px 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); }
.vl-mapa-caja > b { font-size: 21px; font-variant-numeric: tabular-nums; }
.vl-mapa-no { font-size: 14px !important; font-weight: 600; color: var(--muted); }
.vl-mapa-est { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vl-mapa-est small { font-size: 11.5px; color: var(--muted); }
@media (max-width: 900px) { .vl-mapa-cajas { grid-template-columns: minmax(0, 1fr); } }

.vl-reabrir, .vl-versiones { margin-top: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.vl-reabrir > summary, .vl-versiones > summary { padding: 11px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.vl-reabrir > summary b, .vl-versiones > summary b { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); font-size: 11.5px; }
.vl-reabrir form { padding: 0 14px 14px; }
.vl-reabrir label { display: block; margin: 8px 0 10px; font-size: 12.5px; font-weight: 700; }
.vl-reabrir input { width: 100%; margin-top: 4px; }

.vl-vers-lista { margin: 0; padding: 0 14px 14px; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.vl-vers-item { padding: 11px 13px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 11px; background: var(--surface); }
.vl-vers-item.oficial { border-left-color: var(--gold); }
.vl-vers-item.vigente { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); }
.vl-vers-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vl-vers-cab b { font-size: 13.5px; }
.vl-vers-cuando { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.vl-vers-cifras { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; font-size: 12px; color: var(--ink-2); }
.vl-vers-cifras b { font-variant-numeric: tabular-nums; color: var(--ink); }
.vl-vers-cifras .sub b { color: var(--brand); }
.vl-vers-motivo { margin: 7px 0 0; padding: 6px 9px; border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.vl-vers-obs { margin: 6px 0 0; font-size: 12px; color: var(--bad); }
.vl-vers-cambios { margin: 5px 0 0; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-anular-motivo { display: block; margin: 8px 0; font-size: 12.5px; font-weight: 700; }
.fc-anular-motivo input { width: 100%; margin-top: 4px; }

/* Correlativo: chips de situación que filtran al instante lo que ya está en pantalla */
.lc-chips { align-items: center; margin-bottom: 12px; }
.lc-cuenta { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.lc-cuenta b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ═══ Personal (RRHH) ═══
   El día a día del área: la asistencia de cien personas se marca por cuadrilla, en tablet,
   tocando el estado de cada uno. Todo lo demás sigue el estilo del resto del ERP. */

/* El candado del módulo */
.candado { display: grid; place-items: center; padding: 40px 16px; }
.candado-caja { width: min(440px, 100%); padding: 26px 28px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow); }
.candado-caja h2 { margin: 0 0 8px; font-size: 20px; }
.candado-caja p { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.candado-caja label { display: block; margin-bottom: 12px; font-size: 12.5px; font-weight: 700; }
.candado-caja input { width: 100%; margin-top: 4px; }
.candado-caja .btn { width: 100%; justify-content: center; min-height: 44px; }
.candado-olvide { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.candado-olvide > summary { font-size: 12.5px; color: var(--muted); cursor: pointer; }
.candado-olvide form { margin-top: 12px; }
.rh-cerrar { display: inline; }

/* Asistencia del día por sede, en el tablero */
.rh-sedes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rh-sede { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface-2); text-decoration: none; color: inherit; }
.rh-sede:hover { border-color: var(--brand); background: var(--surface); }
.rh-sede.completa { border-color: var(--good); background: var(--good-soft); }
.rh-sede-nom { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rh-sede b { display: block; margin: 3px 0 7px; font-size: 26px; font-variant-numeric: tabular-nums; }
.rh-sede b small { font-size: 13px; font-weight: 500; color: var(--muted); }
.rh-barra { display: block; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rh-barra i { display: block; height: 100%; background: var(--brand); }
.rh-sede.completa .rh-barra i { background: var(--good); }
.rh-sede-pie { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }

.rh-conteos { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-conteo { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); font-size: 12.5px; }
.rh-conteo b { font-size: 15px; font-variant-numeric: tabular-nums; }
.rh-conteo.good { background: var(--good-soft); color: var(--good); }
.rh-conteo.warn { background: var(--warn-soft); color: var(--warn-text, var(--warn)); }
.rh-conteo.bad { background: var(--bad-soft); color: var(--bad); }
.rh-conteo.pendiente { background: var(--gold-soft); color: var(--gold-text); }

/* La cuadrilla: una ficha por persona con sus estados a un toque */
.rh-buscar { display: block; max-width: 420px; margin: 0 0 14px; }
.rh-todos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 14px;
  border: 1px dashed var(--gold); border-radius: 14px; background: var(--gold-soft); font-size: 13.5px; }
.rh-todos small { flex: 0 0 100%; font-size: 11.5px; color: var(--muted); }
.rh-grupo { margin: 18px 0 8px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.rh-cuadrilla { display: flex; flex-direction: column; gap: 8px; }
.rh-persona { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.rh-persona.marcada { border-color: var(--good); background: color-mix(in srgb, var(--good) 6%, var(--surface)); }
.rh-persona-nom { display: block; font-size: 15px; font-weight: 700; color: var(--brand); text-decoration: none; }
.rh-persona-id small { display: block; font-size: 11.5px; color: var(--muted); }
.rh-estados { display: flex; flex-wrap: wrap; gap: 5px; }
.rh-op { position: relative; }
.rh-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.rh-op span { display: block; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; background: var(--surface); }
.rh-op span:hover { border-color: var(--ink-3); }
.rh-op input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.rh-op.good input:checked + span { background: var(--good); border-color: var(--good); color: #fff; }
.rh-op.warn input:checked + span { background: var(--warn); border-color: var(--warn); color: #fff; }
.rh-op.bad input:checked + span { background: var(--bad); border-color: var(--bad); color: #fff; }
.rh-op.info input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.rh-op.neutral input:checked + span { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.rh-horas > summary { padding: 7px 12px; border-radius: 999px; background: var(--surface-2);
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; list-style: none; }
.rh-horas > summary::-webkit-details-marker { display: none; }
.rh-horas > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.rh-horas label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.rh-horas input { display: block; margin-top: 3px; }
.rh-horas .rh-ancho { flex: 1 1 100%; }
.rh-horas .rh-ancho input { width: 100%; }
.rh-estados-lectura { justify-self: end; }
.rh-guardar { margin-top: 16px; }

/* Ficha y formularios del legajo */
.rh-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px;
  margin: 0 0 16px; padding: 0; border: 0; }
.rh-campos legend { padding: 0 0 8px; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); }
.rh-campos label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.rh-campos label input, .rh-campos label select { width: 100%; margin-top: 4px; }
.rh-campos label small { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--muted); }
.rh-campos .rh-ancho { grid-column: 1 / -1; }
.rh-campos .rh-oblig { font-weight: 800; }
.rh-campos .rh-oblig::after { content: " ·"; color: var(--gold); }
.rh-campos .rh-check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rh-campos .rh-check input { width: auto; margin: 0; }

.rh-agregar { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.rh-agregar > summary { font-size: 13px; font-weight: 700; color: var(--brand); cursor: pointer; }
.rh-agregar form { margin-top: 12px; }

.rh-docs td small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.rh-doc-edit > summary { font-size: 12.5px; font-weight: 700; color: var(--brand); cursor: pointer; white-space: nowrap; }
.rh-doc-edit form { margin-top: 8px; text-align: left; }
.rh-doc-edit label { display: block; margin-bottom: 7px; font-size: 11.5px; font-weight: 700; }
.rh-doc-edit input { width: 100%; margin-top: 3px; }
.rh-doc-edit small { display: block; font-weight: 500; color: var(--muted); }
.rh-subir { margin-top: 8px; }
tr.rh-mal td { background: color-mix(in srgb, var(--bad) 7%, transparent) !important; }
.rh-baja { border-color: var(--line); }

@media (max-width: 900px) {
  .rh-persona { grid-template-columns: minmax(0, 1fr); }
  .rh-estados { gap: 6px; }
  .rh-op span { padding: 10px 15px; font-size: 13.5px; }
  .rh-horas > summary { width: 100%; text-align: center; }
  .rh-estados-lectura { justify-self: start; }
}

/* Laboratorio: recibir la muestra de un toque, desde la propia fila */
.lb-recibir { padding: 6px 14px; border: none; border-radius: 999px; background: var(--gold); color: var(--ink);
  font: 700 12.5px/1 inherit; cursor: pointer; white-space: nowrap; }
.lb-recibir:hover { filter: brightness(1.08); }
.lb-recibir:disabled { opacity: .6; cursor: default; }

/* ── Vista lista: el mismo lote, en un renglón. Mismos datos, mismo panel, mucha más densidad. */
.op-lotes.lista { grid-template-columns: minmax(0, 1fr); gap: 7px; }
.op-lotes.lista .op-lote { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 14px; padding: 9px 14px; border-radius: 12px; }
.op-lotes.lista .op-lote-cab { flex: 0 0 auto; width: 190px; align-items: center; }
.op-lotes.lista .op-lote-cod { font-size: 15px; }
.op-lotes.lista .op-lote-etapa { display: none; }
.op-lotes.lista .op-lote-prov { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-lotes.lista .op-lote-prov small { display: inline; margin-left: 6px; }
.op-lotes.lista .op-lote-datos { flex: 0 0 auto; display: flex; gap: 5px; }
.op-lotes.lista .op-dato { flex-direction: row; align-items: baseline; gap: 5px; padding: 4px 9px; }
.op-lotes.lista .op-dato b { font-size: 12.5px; }
.op-lotes.lista .op-lote-pasos { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; }
.op-lotes.lista .op-lote-paso small { display: none; }
/* El panel se abre flotando sobre la lista, para no empujar los renglones de abajo */
.op-lotes.lista .op-paso { flex: 0 0 auto; position: relative; margin: 0; }
.op-lotes.lista .op-paso > summary { min-height: 36px; padding: 7px 14px; border-radius: 10px; font-size: 13px; }
.op-lotes.lista .op-paso-caja { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: 300px;
  background: var(--surface); box-shadow: var(--shadow-up); }
.op-lotes.lista .op-paso-listo { margin: 0; padding: 7px 12px; font-size: 12px; white-space: nowrap; }
.op-lotes.lista .op-camara-btn { min-height: 86px; }

@media (max-width: 1100px) { .op-lotes.lista .op-lote-datos .op-dato:nth-child(n+3) { display: none; } }
@media (max-width: 820px) { .op-lotes.lista { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .op-lotes.lista .op-lote { flex-direction: column; flex-wrap: wrap; align-items: stretch; padding: 14px 16px 16px; border-radius: 16px; }
  .op-lotes.lista .op-lote-cab { width: auto; align-items: flex-start; }
  .op-lotes.lista .op-lote-etapa { display: block; }
  .op-lotes.lista .op-lote-prov { white-space: normal; }
  .op-lotes.lista .op-paso-caja { position: static; width: auto; box-shadow: none; }
}
.op-barra { position: sticky; bottom: 12px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow-up); }
.op-barra-sel { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.op-x { border: 0; background: rgba(255, 255, 255, .15); color: inherit; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.op-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.op-acciones details { position: relative; }
.op-acciones summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 700; }
.op-acciones summary::-webkit-details-marker { display: none; }
.op-acciones details[open] summary { background: var(--gold); color: #2A1C00; }
.op-acciones details > div { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; min-width: 260px; padding: 12px; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-up); }
.op-acciones details > div input, .op-acciones details > div select { flex: 1 1 140px; }
.op-pasos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.op-pasos li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border-top: 3px solid var(--line); }
.op-pasos li b { font-size: 12.5px; } .op-pasos li small { font-size: 11.5px; color: var(--muted); }
.op-pasos li.hecho { border-top-color: var(--good); } .op-pasos li.ahora { border-top-color: var(--warn); }
.op-ficha .pill[style] { background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); }
.op-ficha-acc { margin-top: 10px; }
.op-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.op-mini input, .op-mini select { flex: 1 1 150px; }
.op-corregir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.op-corregir .op-mini { border: 0; padding: 0; }
@media (max-width: 1100px) { .op-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .op-ruta, .doc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .op-barra { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .op-acciones details > div { position: fixed; left: 12px; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); min-width: 0; }
  .op-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-lista li { grid-template-columns: 28px minmax(0, 1fr); }
  .doc-subir { grid-column: 1 / -1; }
  .doc-subir label.btn { width: 100%; justify-content: center; }
}.doc-datos { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.doc-datos div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--line); }
.doc-datos dt { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.doc-datos dd { margin: 0; }
.op .op-tiempos .panel-head { flex-wrap: wrap; gap: 8px 16px; }
.op .op-tiempos .op-periodo input[type=date]:not([type=checkbox]) { width: 150px; min-height: 36px; padding: 4px 10px; font-size: 13px; }/* Los papeles de la guía —escaneo, REINFO, INGEMMET y MTC— en una sola línea de fichas,
   las mismas de «Guías recientes»: se ve de un vistazo qué falta sin estirar la tarjeta. */
.gx-papeles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.gx-papeles-t { margin-right: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.gb-doc a { margin-left: 3px; padding: 1px 5px; border-radius: 999px; background: var(--surface); color: inherit; font-size: 10.5px; font-weight: 700; text-decoration: none; }
.gb-doc a:hover { background: var(--good); color: #fff; }
.gb-doc em { margin-left: 2px; font-style: normal; font-size: 10px; opacity: .75; }

/* ── Laboratorio (lb-) ── */
.lb-etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lb-etapas .op-etapa em { font-style: normal; font-weight: 700; }
.lb-rapido { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.lb-caja { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lb-caja > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.lb-caja > summary::-webkit-details-marker { display: none; }
.lb-caja > summary::before { content: '+'; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-weight: 800; }
.lb-caja[open] > summary::before { content: '−'; }
.lb-caja > summary small { color: var(--muted); font-size: 12.5px; }
.lb-caja-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 14px; }
.lb-caja-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.lb-caja-form .lb-ancho { grid-column: 1 / -1; }
.lb-caja-pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.lb-oculto { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
.lb-leyes-barra { position: sticky; top: 8px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; padding: 10px 14px; border-radius: 14px; background: var(--gold-soft, #F6ECD4); box-shadow: var(--shadow); font-size: 13px; }
.lb-leyes-barra[hidden] { display: none; }
.lb-leyes-barra label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); }
.lb-leyes-barra button { margin-left: auto; }
.lb .lb-leyes-barra select, .lb .lb-leyes-barra input[type=date]:not([type=checkbox]) { width: auto; min-height: 34px; padding: 3px 8px; }
.lb .lb-tabla td input.lb-in:not([type=checkbox]) { width: 76px; min-height: 32px; padding: 3px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.lb .lb-tabla td.lb-au input.lb-in:not([type=checkbox]) { width: 86px; border-color: var(--brand); }
.lb-tabla td.lb-au b { font-size: 14px; }
.lb-tabla tr.lb-escrita td { background: var(--gold-soft, #F6ECD4); }
.lb-tabla tr.lb-tarde td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.lb-tabla td em { font-style: normal; color: var(--bad); }
.lb-etq { display: inline-block; font-family: "Plus Jakarta Sans", system-ui, sans-serif; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.lb-ficha-ley { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.lb-ficha-ley div { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.lb-ficha-ley dt { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lb-ficha-ley dd { margin: 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-ficha-ley dd small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
@media (max-width: 1100px) { .lb-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lb-rapido { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .lb-caja-form { grid-template-columns: minmax(0, 1fr); } .lb-ficha-ley { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lb-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Negociación: sin ley aún y certificado del proveedor */
.ng-cert { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--good-soft); color: var(--good); text-decoration: none; vertical-align: middle; }
.ng-labest { display: block; font-size: 12.5px; font-weight: 600; }
.ng-labest.en_lab { color: #1D4ED8; } .ng-labest.por_recibir { color: var(--warn); } .ng-labest.sin_muestreo { color: var(--muted); }
.ng-historia .doc-check { margin: 0 0 16px; padding: 12px; box-shadow: none; }
.ng-historia .doc-check .panel-head h2 { font-size: 14px; }
.ng-aviso-cert { margin: 8px 0 0; font-size: 12.5px; color: var(--warn); }

/* Consolidado de leyes (cl-) */
.cl { display: flex; flex-direction: column; gap: 16px; }
.cl-filtros { display: flex; flex-direction: column; gap: 10px; }
.cl-filtros .filters label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cl-filtros .op-chips { align-self: flex-start; }
.cl-filtros .op-chips a { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.cl-filtros .op-chips a.activa { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 26, 46, .16); }
.cl-filtros .op-chips a b { margin-left: 4px; color: var(--muted); }
.cl-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cl-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cl-kpi small { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cl-kpi b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cl-kpi b em { font-style: normal; font-size: 14px; font-weight: 700; }
.cl-kpi b.int { color: var(--int); } .cl-kpi b.cie { color: var(--cie); } .cl-kpi b.rep { color: var(--rep); }
.cl-kpi span { font-size: 12px; color: var(--ink-2); }
.cl-kpi.fuerte { background: var(--cie-bg, var(--surface-2)); border-color: color-mix(in srgb, var(--cie) 35%, var(--line)); }
.cl-kpi.fuerte b { color: var(--cie); }
.cl-prov { max-height: 420px; overflow-y: auto; }
.cl-tabla td small.cl-sub, .cl-tabla td .cl-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.cl-tabla td.ng-lote small { display: block; font-size: 11.5px; color: var(--muted); }
@media (max-width: 1100px) { .cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl .cl-grupos { grid-template-columns: minmax(0, 1fr); }
.cl-filtros form.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cl .cl-filtros form.filters input[type=date]:not([type=checkbox]) { width: 150px; }
.cl .cl-filtros form.filters select { width: auto; }
.cl .cl-filtros form.filters input[type=search]:not([type=checkbox]) { flex: 1 1 240px; width: auto; }
.cl-filtros form.filters label { white-space: nowrap; }
.ng-etapa.cl-revisar { --c: var(--bad); }
.cl-kpi b em { white-space: nowrap; }
/* Factura del proveedor y contabilidad (fc-) */
.fc-panel .fc-esperado { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.fc-panel .fields input[type=file] { padding: 6px; }
.fc-anular { margin-top: 12px; font-size: 13px; }
.fc-anular summary { cursor: pointer; color: var(--muted); }
.fc-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fc-col { display: flex; flex-direction: column; gap: 16px; }
.fc-comp tr.strong td { font-weight: 800; }
.fc-checks { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fc-checks label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.fc-checks label:has(input:checked) { background: var(--good-soft); }
.fc-checks input { margin-top: 3px; flex: none; }
.fc-checks span { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.fc-checks small { font-size: 11.5px; font-weight: 700; }
.fc-nota { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.fc-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.fc-visor { position: sticky; top: 12px; }
.fc-visor iframe { width: 100%; height: 720px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
@media (max-width: 1100px) { .fc-ficha { grid-template-columns: minmax(0, 1fr); } .fc-visor { position: static; } .fc-visor iframe { height: 520px; } }
.fc-panel .fields label:has(input[type=file]) { grid-column: span 2; }
.fc-modelo-tot { max-width: 320px; margin: 10px 0 0 auto; }
/* Pagos de una factura: neto (US$) y detracción (S/) con pagos parciales y comprobantes (pg-) */
.pg-cuentas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pg-cuenta { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pg-cuenta.listo { background: color-mix(in srgb, var(--good) 5%, var(--surface)); border-color: color-mix(in srgb, var(--good) 30%, var(--line)); }
.pg-cuenta header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pg-cuenta header b { display: block; font-size: 15px; }
.pg-cuenta header small { display: block; font-size: 12px; color: var(--muted); }
.pg-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pg-cifras div { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.pg-cifras dt { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pg-cifras dd { margin: 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pg-cifras .falta { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.pg-barra { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pg-barra i { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.pg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pg-lista li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
.pg-lista li > span { flex: 1; display: flex; flex-direction: column; }
.pg-lista small { font-size: 11.5px; color: var(--muted); }
.pg-comp { font-size: 12px; font-weight: 700; white-space: nowrap; }
.pg-comp.no { color: var(--warn); font-weight: 600; }
.pg-lista form { margin: 0; }
.pg-excel { margin: 0; font-size: 12.5px; }
.pg-nuevo > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--brand-text, var(--ink)); }
.pg-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.pg-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.pg-form label small { font-weight: 500; color: var(--muted); }
.pg-form .pg-ancho { grid-column: 1 / -1; }
.pg-form input[type=file] { padding: 6px; }
@media (max-width: 640px) { .pg-cifras, .pg-form { grid-template-columns: minmax(0, 1fr); } }
.pg-fila { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pg-fila b { white-space: nowrap; }
.pg-pagar { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: #C9982F; color: #1F1400 !important; font-size: 12.5px; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.pg-pagar:hover { background: #B4841F; }
.pg-pagar.visto { background: var(--surface-2); color: var(--ink-2) !important; box-shadow: none; }

.fc-modelo .panel-head { gap: 10px; }
.fc-modelo .panel-head .btn { margin-left: auto; }
.fc-modelo-cab { margin-bottom: 10px; }
.fc-liq p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.fc-liq-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.fc-liq-form span { flex: 1 1 320px; font-size: 13.5px; color: var(--ink-2); }
.fc-previa > summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.fc-previa > summary small { color: var(--muted); }
.fc-previa .fc-modelo { margin-top: 12px; box-shadow: none; }

.fc-tot { margin: 12px 0 8px auto; border-collapse: collapse; min-width: 300px; font-variant-numeric: tabular-nums; }
.fc-tot th { text-align: left; font-weight: 600; color: var(--ink-2); padding: 5px 16px 5px 0; font-size: 13.5px; }
.fc-tot td { text-align: right; padding: 5px 0; font-size: 13.5px; white-space: nowrap; }
.fc-tot tr + tr { border-top: 1px solid var(--line); }
.fc-tot tr.fuerte th, .fc-tot tr.fuerte td { font-weight: 800; color: var(--ink); font-size: 15px; }
.fc-tot tr.suave th, .fc-tot tr.suave td { color: var(--muted); font-size: 12.5px; }

.fc-modelo-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fc-modelo-acc p { flex: 1 1 360px; margin: 0; font-size: 13.5px; color: var(--ink-2); }

/* Atrás y ruta sobre el título */
.volver-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 42px; padding: 0 16px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); }
.volver-btn:hover { border-color: var(--gold); color: var(--gold-text, var(--ink)); }
.volver-btn .ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.barra-sup { align-items: center; }
.miga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12.5px; color: var(--muted); }
.miga a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 700; text-decoration: none; }
.miga a:hover { color: var(--ink); text-decoration: underline; }
.miga a .ico { width: 13px; height: 13px; }
.m-top .m-btn[data-volver] svg { stroke: currentColor; fill: none; stroke-width: 2; }
/* Despacho por carros (dp-) */
.dp { display: flex; flex-direction: column; gap: 16px; }
.dp-resumen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dp-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.dp-kpi small { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dp-kpi b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dp-kpi span { font-size: 12px; color: var(--ink-2); }
.dp-barra { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dp-barra i { display: block; height: 100%; background: var(--gold); }
.dp-tablero { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.dp-lotes { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 24px); padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.dp-lotes header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dp-lotes h2 { margin: 0; font-size: 16px; }
.dp-lotes header span { font-size: 12px; color: var(--muted); }
.dp-ayuda { margin: 0; font-size: 12px; color: var(--ink-2); }
.dp-auto { margin: 0; }
.dp-lista { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 2px; }
.dp-lote { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: 10px; background: var(--surface-2); cursor: grab; user-select: none; }
.dp-lote.falta { border-left-color: var(--warn); }
.dp-lote:hover, .dp-lote:focus-visible { border-color: var(--gold); outline: none; }
.dp-lote.elegido { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.dp-lote.arrastrando { opacity: .5; }
.dp-lote-cab { display: flex; justify-content: space-between; gap: 8px; }
.dp-lote-cab em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.dp-lote small { font-size: 11.5px; color: var(--muted); }
.dp-carros { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; align-items: start; }
.dp-carro { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); scroll-margin-top: 80px; }
.dp-carro.pesado { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.dp-carro.salio { background: color-mix(in srgb, var(--good) 5%, var(--surface)); border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.dp-carro.encima { box-shadow: 0 0 0 3px var(--gold); }
.dp-eligiendo .dp-carro.pendiente { cursor: copy; }
.dp-carro.dp-reciente { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 60%, transparent), var(--shadow); }
.dp-carro header { display: flex; align-items: center; gap: 10px; }
.dp-n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: var(--surface); font-weight: 800; }
.dp-carro-id { flex: 1; min-width: 0; }
.dp-carro-id b { display: block; font-size: 14px; }
.dp-carro-id small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-cap { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dp-cap i { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.dp-cap.lleno i { background: var(--gold); } .dp-cap.pasa i { background: var(--bad); }
.dp-cap-txt { margin: 0; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dp-carga { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dp-carga li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--surface-2); }
.dp-carga li.falta { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.dp-carga li > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dp-carga li small { font-size: 11px; color: var(--muted); }
.dp-carga li em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.dp-carga li em small { display: block; font-weight: 600; color: var(--good); }
.dp-carga li form { margin: 0; }
.dp-carga .dp-vacio { justify-content: center; padding: 16px; border: 2px dashed var(--line); background: none; color: var(--muted); font-size: 12.5px; }
.dp-poner { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 6px; }
.dp .dp-poner select, .dp .dp-poner input:not([type=checkbox]) { min-height: 34px; padding: 4px 8px; font-size: 13px; }
.dp-datos summary, .dp-anular summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.dp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.dp-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.dp .dp-form input:not([type=checkbox]) { min-height: 34px; padding: 4px 8px; font-size: 13px; }
.dp-form-pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.dp-balanza { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--sky, #0EA5E9) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--sky, #0EA5E9) 25%, var(--line)); }
.dp-balanza h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.dp-peso { margin: 0; font-size: 13px; } .dp-peso small { display: block; }
.dp-balanza .doc-check { margin: 0; padding: 10px; box-shadow: none; }
.dp-salir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.dp-salir label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.dp-salio { margin: 0; font-size: 12.5px; }
.dp-inline { display: inline; margin-left: 6px; }
.dp-nuevo { border-style: dashed; box-shadow: none; background: transparent; }
.dp-nuevo label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.dp-enviando { opacity: .7; pointer-events: none; }
.dp-prog { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.dp-prog-d { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--surface-2); }
.dp-prog-d:hover { border-color: var(--gold); }
.dp-prog-d span { font-size: 12.5px; color: var(--ink-2); } .dp-prog-d small { font-size: 12px; font-weight: 700; color: var(--gold-text, var(--ink)); }.pr-destinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pr-dest { display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 14px; background: var(--surface); overflow: hidden; }
.pr-dest button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.pr-dest button b { font-size: 15px; } .pr-dest button span { font-size: 12.5px; color: var(--ink-2); } .pr-dest button small { font-size: 12px; color: var(--muted); }
.pr-dest a { padding: 7px 12px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--gold-text, var(--ink)); background: var(--surface-2); }
.pr-filtro-dest { margin: 0; font-size: 13px; } .pr-filtro-dest button { border: 0; background: none; color: var(--brand, #1D4ED8); cursor: pointer; font: inherit; text-decoration: underline; }
.pr-tabla td small { display: block; font-size: 11.5px; color: var(--muted); }
.pr-tabla tr.marcado td { background: var(--brand-soft); }
/* ═══ Los reportes ═══
   La pantalla y el PDF se ven igual a propósito: encabezado azul, líneas finas, franjas suaves
   y los números alineados por la coma. Denso, porque un reporte se lee de un vistazo. */
.rep { font-variant-numeric: tabular-nums; }
.rep h2 { margin: 26px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.rep h2::after { content: ""; display: block; height: 2px; width: 46px; background: var(--gold); margin-top: 6px; }
.rep h2:first-child { margin-top: 0; }
.rep .table-scroll { margin: 0; }
.rep table { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rep th, .rep td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: middle; }
.rep th:last-child, .rep td:last-child { border-right: 0; }
.rep thead th { background: #1F3B63; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border-right-color: rgba(255, 255, 255, .16); border-bottom: 0; line-height: 1.25; white-space: nowrap; }
.rep tbody tr:nth-child(even) td { background: var(--surface-2); }
.rep tbody td:first-child { font-weight: 700; }
.rep tbody tr:hover td { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.rep tfoot th, .rep tfoot td { border-top: 2px solid var(--brand); border-bottom: 0; font-weight: 800; background: var(--surface-3); font-size: 13.5px; }
.rep .r { text-align: right; }
.rep .c { text-align: center; }
.rep td small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
/* Los números que importan: una tira de cuadros del mismo alto, con su filo dorado arriba */
.rep-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 20px; }
.rep-kpi { border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 12px; padding: 11px 14px; background: var(--surface); }
.rep-kpi span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
/* Solo el número grande es «b» directo del cuadro; lo que va dentro del pie sigue chico */
.rep-kpi > b { display: block; margin: 3px 0 1px; font-size: 25px; font-weight: 800; letter-spacing: -.025em; }
.rep-kpi small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--ink-2); }
.rep-kpi small b { font-size: 11.5px; }

/* ——— Los seis cuadros del resumen gerencial ———
   Seis cifras en fila, del mismo tamaño y del mismo color, no son un resumen: son una lista.
   Cada cuadro trae su tono, su barra de contexto y es un enlace a la pantalla donde se arregla.
   Se imprime el MISMO html que se ve, así que nada de sombras ni de efectos: lo que cambia en
   papel es solo el realce del borde, que en pantalla ayuda y en tinta sobra. */
.rep-kpis-6 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rk { display: block; text-decoration: none; color: inherit; padding: 13px 15px 12px; transition: box-shadow .12s, transform .12s; }
.rk:hover { box-shadow: 0 6px 18px -10px rgba(16, 21, 28, .35); transform: translateY(-1px); }
.rk:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rk > b { font-size: 30px; line-height: 1.05; }
.rk .rk-u { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
/* La barra: la cifra grande contra la parte de ella que se puede accionar hoy. */
.rk-barra { display: block; height: 6px; margin: 9px 0 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rk-barra > b { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.rk-ejes { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; font-style: normal; color: var(--muted); }
.rk-ejes span:last-child { font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* La chispa de la utilidad: con un mes no se dibuja —una barra sola no es tendencia—. */
.rk-spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 9px; }
.rk-spark i { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: currentColor; opacity: .55; }
.rk-spark i:last-child { opacity: 1; }
.rk-spark i.baja { background: var(--bad); opacity: .8; }
/* Un tono por cuadro: el filete de arriba y el color de su barra. */
.rk-rojo { border-top-color: var(--bad); color: var(--bad); }
.rk-verde { border-top-color: var(--good); color: var(--good); }
.rk-oro { border-top-color: var(--gold); color: var(--gold); }
.rk-azul { border-top-color: var(--sky, #3B82F6); color: var(--sky, #3B82F6); }
.rk-naranja { border-top-color: #E08A1E; color: #E08A1E; }
.rk-morado { border-top-color: #7C5CD6; color: #7C5CD6; }
/* El texto NO se tiñe del tono: el color es del filete y de la barra, y las cifras se leen en
   tinta normal. Teñir el número hace que seis cuadros griten a la vez y no se lea ninguno. */
.rk > span, .rk > small { color: var(--muted); }
.rk > b { color: var(--ink); }
.rk > b.neg { color: var(--bad); }
.rk > b.pos { color: var(--good); }
@media (max-width: 1100px) { .rep-kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rep-kpis-6 { grid-template-columns: minmax(0, 1fr); } }
@media print { .rk:hover { box-shadow: none; transform: none; } .rk-spark { height: 18px; } }

.rep-nota { margin: 16px 0 0; padding: 10px 13px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
  background: var(--gold-soft); font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.rep .pos { color: var(--good); font-weight: 700; } .rep .neg { color: var(--bad); font-weight: 700; }
/* El semáforo de los reportes contra su meta: dentro, hay que mirarlo, hay que reclamarlo */
/* Un aviso de que el dato no se puede creer va en ámbar, no en dorado: no es una explicación, es una advertencia */
.rep-nota.ojo { border-left-color: var(--warn); background: var(--warn-soft); }
.rep .bien { color: var(--good); font-weight: 700; } .rep .ojo { color: var(--warn); font-weight: 700; } .rep .mal { color: var(--bad); font-weight: 700; }
@media (max-width: 900px) { .rep-kpis { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
/* Las fichas de empresa: Beijing o la empresa que mandó el directo */
.emp-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.emp-beijing { background: var(--brand-soft); color: var(--brand); }
.emp-directo { background: var(--gold-soft); color: var(--gold-text, var(--gold)); }
.emp-sin { background: var(--surface-3); color: var(--muted); }

.pr-blend { font-family: var(--mono, monospace); font-size: 12px; font-weight: 700; }
/* Un lote directo no lleva código BJ: debajo del lote sale de quién es, que es lo que hace falta */
.pr-directo { color: var(--brand); font-weight: 700; }
.pr-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr .pr-acc input:not([type=checkbox]) { width: auto; min-height: 34px; padding: 4px 10px; font-size: 13px; background: var(--surface); color: var(--ink); }

/* «Este lote va mezclado»: el mismo distintivo en cancha, laboratorio, guías, valorizaciones y
   en la ficha del lote. Un lote en blending ya no se mueve solo, así que tiene que verse siempre. */
.chip-bl { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--violet, #6D28D9) 14%, transparent); color: var(--violet, #6D28D9);
  font-family: var(--mono, monospace); font-size: 11.5px; font-weight: 700; line-height: 1.7; text-decoration: none; vertical-align: middle; }
.chip-bl i { font-style: normal; font-size: 9.5px; letter-spacing: .04em; opacity: .75; }
.chip-bl:hover { background: color-mix(in srgb, var(--violet, #6D28D9) 24%, transparent); }
.chip-bl.ido { background: var(--surface-3); color: var(--muted); }

/* El detalle del legajo no puede ensanchar la ventana.
   Una tabla o una cabecera que pide más ancho del que hay empuja la página entera y obliga a
   alejar el zoom para verla: a partir de ahí todo se lee diminuto. Por eso cada caja de esta
   pantalla puede encogerse (min-width: 0) y lo ancho scrollea dentro de su propio marco. */
.tr-legajo, .tr-legajo > * { min-width: 0; }
.lv-cabecera > * { min-width: 0; }
.lv-vistas { flex-wrap: wrap; }
.lv-matriz { max-width: none; }
@media (max-width: 980px) {
  /* La cabecera se apila: el anillo arriba, las cifras y el botón debajo, cada uno a todo el ancho */
  .lv-cabecera { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px; }
  .lv-acciones { align-items: flex-start; max-width: none; }
  .lv-acciones small { text-align: left; }
}
/* ——— Los lotes de un mismo montón, como un bloque ———
   En la cancha salen en filas seguidas repitiendo las mismas etiquetas, y había que leer cinco
   filas para darse cuenta de que son una sola ruma. El filo de color lo dice sin texto, y como
   sale del correlativo del montón, dos vecinos nunca comparten tono.
   La etiqueta del montón se tiñe igual, para que filo y chip se lean como lo mismo. */
tr.ck-enblend > td:first-child { box-shadow: inset 3px 0 0 var(--bl); }
tr.ck-enblend .ck-blend { color: var(--bl); border-color: color-mix(in srgb, var(--bl) 45%, transparent);
  background: color-mix(in srgb, var(--bl) 10%, transparent); }
tr.ck-enblend:hover > td:first-child { box-shadow: inset 4px 0 0 var(--bl); }

/* Las partes de una misma entrega en Aprobaciones: cinco VAL de un lote partido en cinco son
   UNA entrega, y hay que poder verlo y marcarlas juntas. */
.ap-familia { color: var(--gold-text); }
.ap-familia button.link { margin-left: 6px; font-size: inherit; }

/* ═══ Liquidaciones de venta ═══
   La pantalla contesta tres preguntas en este orden: qué me falta subir, cuánto se aparta lo que
   me liquidaron de lo que cerré, y qué hay. Antes solo contestaba la tercera, y lo que había que
   hacer vivía en un panel al costado con la tabla ancha robándole el sitio. */
.vq-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.vq-kpi { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px;
  padding: 15px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.vq-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-strong); }
.vq-kpi.listo::before { background: var(--good); }
.vq-kpi.falta::before { background: var(--gold, #C9962B); }
.vq-kpi.tarde::before { background: var(--loss); }
.vq-kpi span { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.vq-kpi b { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.vq-kpi.listo b { color: var(--good); }
.vq-kpi.tarde b { color: var(--loss); }
.vq-kpi small { font-size: 12px; line-height: 1.35; color: var(--muted); }

/* Lo que falta subir: en fichas y con el botón donde está la mano, porque es la acción del día.
   El filo cambia de color con los días: lo que lleva parado más de dos semanas no es «pendiente». */
.vq-faltan { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.vq-falta { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 14px; background: var(--surface); text-decoration: none; }
.vq-falta:hover { border-color: var(--brand); background: var(--surface-2); }
.vq-falta.ojo { border-left-color: var(--warn); }
.vq-falta.mal { border-left-color: var(--bad); }
.vq-falta b { font-size: 14px; font-weight: 700; color: var(--ink); }
.vq-falta em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.vq-falta span { grid-column: 1 / -1; }
.vq-falta small { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.vq-falta.ojo small, .vq-falta.mal small { color: var(--warn); font-weight: 600; }
.vq-falta.mal small { color: var(--bad); }
@media (max-width: 1100px) { .vq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vq-kpis { grid-template-columns: minmax(0, 1fr); } }

/* ——— Qué viaje del envío se está mirando ———
   Un envío sale en varios carros y a la planta se le manda el legajo del VIAJE que llegó, no el
   del envío entero. El que ya salió lleva su filo verde: es el que toca mandar. */
.lv-carros { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.lv-carro { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  padding: 9px 13px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 12px; background: var(--surface); text-decoration: none; }
.lv-carro b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.lv-carro small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.lv-carro:hover { border-color: var(--brand); }
.lv-carro.salio { border-left-color: var(--good); }
.lv-carro.on { background: var(--brand-soft); border-color: var(--brand); border-left-color: var(--brand); }
.lv-carro.on b { color: var(--brand); }
.lv-aviso-carro { margin: -8px 0 16px; padding: 9px 13px; border-left: 3px solid var(--warn);
  border-radius: 0 10px 10px 0; background: var(--warn-soft); font-size: 12.5px; color: var(--ink-2); }
/* ——— Legajos de venta: la pantalla responde a tres preguntas, en este orden ———
   ¿qué puedo mandar hoy? · ¿a quién le pido lo que falta? · ¿cómo va el conjunto?
   El avance en porcentaje quedó al final a propósito: es lo que se mira al informar, no al trabajar. */
.lv-estado { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.lv-est { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.lv-est::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-strong); }
.lv-est.listo::before { background: var(--good); }
.lv-est.falta::before { background: var(--gold, #C9962B); }
.lv-est.tarde::before { background: var(--loss); }
.lv-est b { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.lv-est.listo b { color: var(--good); }
.lv-est.tarde b { color: var(--loss); }
.lv-est span { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.lv-est small { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* Lo que ya se puede mandar: en tarjetas, con el botón a la vista. Es la acción del día. */
.lv-listos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.lv-listo { border: 1px solid color-mix(in srgb, var(--good) 35%, var(--line)); border-radius: 16px; padding: 14px 16px;
  background: color-mix(in srgb, var(--good) 5%, var(--surface)); flex-direction: column; }
.lv-listo header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lv-listo header a { font-weight: 800; font-size: 15px; text-decoration: none; }
.lv-listo > b { font-size: 15px; }
.lv-listo small { color: var(--muted); font-size: 12.5px; }
.lv-listo-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* A quién pedirle qué: una tarjeta por área, con sus papeles pendientes y a dónde ir */
.lv-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lv-area { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 10px; }
.lv-area header { display: flex; align-items: center; gap: 9px; }
.lv-area header b { font-size: 14.5px; flex: 1; }
.lv-area header em { font-style: normal; font-size: 21px; font-weight: 800; color: var(--gold, #C9962B); }
.lv-area-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-3); }
.lv-area-ico .ico { width: 17px; height: 17px; color: var(--ink-2); }
.lv-area ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.lv-area li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 8px; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.lv-area li:first-child { border-top: 0; }
.lv-area li span { font-weight: 600; }
.lv-area li b { font-weight: 800; color: var(--loss); }
.lv-area li small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; font-family: var(--mono, monospace); }
.lv-area li.mas { color: var(--muted); font-size: 12px; border-top: 1px dashed var(--line); }
.lv-area > .btn { align-self: flex-start; margin-top: auto; }

.lv-area-sub { color: var(--muted); font-size: 11.5px; margin: -4px 0 2px; line-height: 1.35; }
.lv-area li details > summary { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; padding: 5px 0; }
.lv-area li details > summary::-webkit-details-marker { display: none; }
.lv-area li details > summary::after { content: ""; }
.lv-area li details[open] > summary span { color: var(--brand-text, var(--ink)); }
.lv-area-arch { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 10px; }
.lv-arch { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); }
.lv-arch .mono { font-weight: 700; font-size: 12.5px; }
.lv-arch small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.lv-arch form { margin: 0; }

@media (max-width: 1100px) { .lv-estado { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lv-estado { grid-template-columns: minmax(0, 1fr); } }
/* Un envio sin lotes: el anillo no miente con un 100 %, se queda apagado. */
.lv-anillo.vacio .lv-arco { display: none; }
.lv-anillo.vacio b { color: var(--muted); font-weight: 600; }
.lv-sin-armar { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); max-width: 62ch; line-height: 1.5; }
.lv-cabecera.sin-armar { grid-template-columns: auto minmax(0, 1fr); }

/* ——— Flete y molienda: las cuentas de la liquidación en pantalla ——— */
.vs-cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.vs-cuentas div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.vs-cuentas div.fuerte { border-color: color-mix(in srgb, var(--gold, #C9962B) 45%, var(--line)); background: color-mix(in srgb, var(--gold, #C9962B) 7%, var(--surface)); }
.vs-cuentas span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; }
.vs-cuentas b { font-size: 17px; font-variant-numeric: tabular-nums; }
.vs-cuentas input { width: 100%; }
.vs-acciones { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.vs-acciones form { display: flex; flex-direction: column; gap: 6px; }
.vs-acciones small { color: var(--muted); font-size: 12px; }
.vs-acciones .vs-fact, .vs-acciones .vs-anular { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.vs-falta { display: flex; gap: 6px; flex-wrap: wrap; }

/* ——— Mi día: antigüedad y papeles que se suben sin salir ——— */
.md-dias { font-style: normal; color: var(--muted); }
.md-dias.tarde { color: var(--loss); font-weight: 700; }
.md-papeles ul { list-style: none; margin: 0; padding: 0; }
.md-papeles li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line); }
.md-papeles li:first-child { border-top: 0; }
.md-pap-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-3); }
.md-pap-ico .ico { width: 16px; height: 16px; color: var(--ink-2, var(--ink)); }
.md-pap-txt { min-width: 0; }
.md-pap-txt b { display: block; font-size: 13.5px; }
.md-pap-txt small { display: block; font-size: 11.5px; color: var(--muted); }
.md-papeles form { margin: 0; }

/* ——— Uso del ERP ———
   Tres bloques en el orden en que importan: quién entra, dónde se atascó el mineral y qué se
   registró en cada paso. El color fuerte solo marca lo que exige una llamada hoy. */
.ad-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.ad-c { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px;
  box-shadow: var(--shadow); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.ad-c::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-strong); }
.ad-c.bien::before { background: var(--good); }
.ad-c.ojo::before { background: var(--gold, #C9962B); }
.ad-c.mal::before { background: var(--loss); }
.ad-c b { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.ad-c b small { font-size: 17px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ad-c.bien b { color: var(--good); }
.ad-c.mal b { color: var(--loss); }
.ad-c > span { font-size: 13.5px; font-weight: 700; }
.ad-c > small { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* Dónde se quedó parado el mineral */
.ad-atascos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ad-atascos li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 11px 2px; border-top: 1px solid var(--line); }
.ad-atascos li:first-child { border-top: 0; }
.ad-atascos li > b { font-size: 26px; font-weight: 800; color: var(--loss); min-width: 44px;
  font-variant-numeric: tabular-nums; }
.ad-atascos li div span { display: block; font-size: 14px; font-weight: 600; }
.ad-atascos li div small { font-size: 12px; color: var(--muted); }

/* Qué se registró, paso por paso */
.ad-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ad-pasos li { display: grid; grid-template-columns: 92px minmax(130px, 1fr) minmax(90px, 2fr) 56px 82px;
  align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--line); font-size: 13px; }
.ad-pasos li:first-child { border-top: 0; }
.ad-pasos li.cero { opacity: .55; }
.ad-paso-area { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ad-paso-que { font-weight: 600; text-decoration: none; }
.ad-barra { display: block; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ad-barra i { display: block; height: 100%; background: var(--gold, #C9962B); border-radius: 4px; }
.ad-pasos li.cero .ad-barra i { background: var(--loss); }
.ad-pasos li > b { text-align: right; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ad-pasos li > small { color: var(--muted); font-size: 11.5px; text-align: right; }

.ad-apagada td { opacity: .62; }
.ad-nota { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5;
  border-top: 1px dashed var(--line); padding-top: 12px; }

@media (max-width: 1100px) { .ad-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ad-cifras { grid-template-columns: minmax(0, 1fr); }
  .ad-pasos li { grid-template-columns: 1fr auto; }
  .ad-paso-area, .ad-barra { display: none; }
}

/* ——— La ayuda de la pantalla ———
   Un panel lateral, no una página aparte: la duda aparece mirando la pantalla, así que la respuesta
   se lee al lado sin perder de vista lo que se estaba haciendo. */
.ayuda-btn .ico { width: 15px; height: 15px; }
.ayuda-btn[aria-expanded="true"] { border-color: var(--line-strong); }

.ayuda-fondo { position: fixed; inset: 0; background: rgba(12, 10, 8, .38); z-index: 70; }
.ayuda-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); z-index: 71;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -18px 0 46px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; }
.ayuda-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.ayuda-area { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold, #C9962B); margin-bottom: 3px; }
.ayuda-panel h2 { margin: 0; font-size: 17px; line-height: 1.25; }
.ayuda-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer;
  padding: 0 2px; border-radius: 8px; }
.ayuda-x:hover { color: var(--ink); }

.ayuda-cuerpo { padding: 16px 20px 22px; overflow-y: auto; }
.ayuda-que { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.ayuda-cuerpo h3 { margin: 0 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.ayuda-pasos { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: ap; }
.ayuda-pasos li { counter-increment: ap; position: relative; padding-left: 30px; margin-bottom: 9px;
  font-size: 13.5px; line-height: 1.5; }
.ayuda-pasos li::before { content: counter(ap); position: absolute; left: 0; top: 0; width: 21px; height: 21px;
  border-radius: 50%; background: var(--surface-3); color: var(--ink); font-size: 11.5px; font-weight: 800;
  display: grid; place-items: center; }
.ayuda-ojo { background: color-mix(in srgb, var(--gold, #C9962B) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold, #C9962B) 32%, var(--line));
  border-left: 3px solid var(--gold, #C9962B); border-radius: 10px; padding: 11px 13px; margin: 0 0 16px;
  font-size: 13px; line-height: 1.5; }
.ayuda-ojo b { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold, #C9962B); margin-bottom: 4px; }
.ayuda-pie { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5;
  border-top: 1px dashed var(--line); padding-top: 13px; }

@media (max-width: 620px) {
  .ayuda-panel { width: 100vw; top: auto; height: 86vh; border-left: 0; border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0; }
}

/* ——— Unidades y choferes ———
   Una ficha por placa o por chofer, y dentro una celda por papel. Lo que falta se sube sin salir de
   aquí, porque el trabajo es exactamente ese: juntar papeles sueltos de unidades que ya viajaron. */
.uni-resumen { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.uni-resumen b { font-size: 17px; color: var(--ink); }
.uni-resumen em { font-style: normal; color: var(--loss); font-weight: 700; }

.uni-lista { display: flex; flex-direction: column; gap: 10px; }
.uni { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 18px 14px 22px; box-shadow: var(--shadow); overflow: hidden; }
.uni::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold, #C9962B); }
.uni.ok::before { background: var(--good); }

.uni-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.uni-cab > b { font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.uni-cab small { font-size: 12.5px; color: var(--muted); }
.uni-sep { flex: 1 1 auto; }

.uni-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.uni-doc { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; background: var(--surface-2); min-width: 0; }
.uni-doc.si { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); background: color-mix(in srgb, var(--good) 5%, var(--surface-2)); }
.uni-doc.no { border-color: color-mix(in srgb, var(--gold, #C9962B) 40%, var(--line)); }
.uni-doc-nom { font-size: 12.5px; font-weight: 600; min-width: 0; }
.uni-doc-nom small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.uni-doc-ver { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  color: var(--good); text-decoration: none; white-space: nowrap; }
.uni-doc-ver .ico { width: 14px; height: 14px; }
.uni-doc-de { font-size: 11px; color: var(--muted); white-space: nowrap; }
.uni-doc form { margin: 0; }

@media (max-width: 560px) { .uni-docs { grid-template-columns: minmax(0, 1fr); } }

/* ——— Legajos de venta: una lista de envíos, cada uno con su tira de documentos ———
   La idea es que el estado de un envío se lea sin abrirlo y sin contar nada. La tira es un bloque
   por documento, en el orden del legajo: encendido lo que está, apagado lo que falta. Sustituye a
   seis paneles de cifras que, con pocos envíos, se leían como seis cajas vacías. El color fuerte
   se gasta en un solo sitio —el riel de la izquierda y la tira—; lo demás queda en calma. */
.lvx-titular { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px;
  padding: 0 2px 16px; border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.lvx-titular-txt { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.lvx-titular b { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.lvx-titular.hay b { color: var(--good); }
.lvx-titular span { font-size: 15.5px; color: var(--ink-2, var(--ink)); max-width: 56ch; }
.lvx-titular small { font-size: 12.5px; color: var(--muted); }

.lvx-lista { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; }
.lvx { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 18px 15px 22px; box-shadow: var(--shadow); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cab acc" "sub acc" "tira acc" "falta acc";
  align-items: center; gap: 6px 18px; }
.lvx::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-strong); }
.lvx.listo::before { background: var(--good); }
.lvx.falta::before { background: var(--gold, #C9962B); }
.lvx.vacio::before, .lvx.entregado::before { background: var(--line-strong); }
.lvx.entregado { opacity: .72; }

.lvx-cab { grid-area: cab; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.lvx-cod { font-size: 16px; font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
.lvx-flecha { color: var(--muted); }
.lvx-dest { font-size: 15px; font-weight: 700; }
.lvx-cuenta { font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.lvx-cuenta i { font-style: normal; font-weight: 500; opacity: .55; }
.lvx-sub { grid-area: sub; font-size: 12.5px; color: var(--muted); }
.lvx-sub em { font-style: normal; }
.lvx-sub em.tarde { color: var(--loss); font-weight: 700; }

/* La tira: un bloque por documento. Se estira a lo ancho pero nunca pasa de 4px de alto:
   tiene que leerse como una barra, no competir con el texto. */
.lvx-tira { grid-area: tira; display: flex; gap: 2px; margin: 3px 0 1px; }
.lvx-seg { flex: 1 1 0; min-width: 4px; height: 7px; border-radius: 2px; background: var(--line-strong); opacity: .45; }
.lvx-seg.ok { opacity: 1; }
.lvx-seg.ok { background: var(--gold, #C9962B); }
.lvx.listo .lvx-seg.ok { background: var(--good); }
.lvx-seg.na { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

.lvx-falta { grid-area: falta; margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2, var(--ink)); line-height: 1.5; }
.lvx-falta a { font-weight: 700; text-decoration: none; border-bottom: 1px dotted currentColor; }
.lvx-falta small { color: var(--muted); font-size: 11.5px; margin-left: 3px; }
.lvx-mas { color: var(--muted); }
.lvx-acc { grid-area: acc; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.lvx-acc .btn { white-space: nowrap; justify-content: center; }

/* A quién pedirle qué: una fila de fichas, no un panel de tarjetas */
.lvx-areas { display: flex; flex-wrap: wrap; gap: 10px; }
.lvx-area { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "ico num nom" "ico num sub";
  align-items: center; gap: 0 10px; min-width: 210px; flex: 1 1 210px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; background: var(--surface-2); }
.lvx-area:hover { border-color: var(--line-strong); }
.lvx-area-ico { grid-area: ico; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-3); }
.lvx-area-ico .ico { width: 16px; height: 16px; color: var(--ink-2, var(--ink)); }
.lvx-area b { grid-area: num; font-size: 22px; font-weight: 800; color: var(--gold, #C9962B); font-variant-numeric: tabular-nums; }
.lvx-area > span { grid-area: nom; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.lvx-area small { grid-area: sub; font-size: 11.5px; color: var(--muted); }

/* Lo de consulta, plegado */
.lvx-plegado { padding: 0; }
.lvx-plegado > summary { cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 14px; list-style: none; }
.lvx-plegado > summary::-webkit-details-marker { display: none; }
.lvx-plegado > summary::before { content: "▸ "; color: var(--muted); }
.lvx-plegado[open] > summary::before { content: "▾ "; }
.lvx-plegado[open] > summary { border-bottom: 1px solid var(--line); }
.lvx-plegado-cuerpo { padding: 16px 18px 18px; }
.lvx-nota { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.lvx-h3 { margin: 22px 0 10px; font-size: 14px; }

@media (max-width: 760px) {
  .lvx { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "sub" "tira" "falta" "acc"; }
  .lvx-acc { flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
  .lvx-titular b { font-size: 32px; }
}

/* El cuadro completo del legajo: una fila por lote (o por envío) y una columna por documento.
   Es el Excel de toda la vida, y por eso funciona: de un vistazo se ve qué fila está incompleta y
   qué columna está frenando a todos.
   Los títulos van de pie —son 16 y horizontales no entran— y por eso se usan nombres cortos: con el
   nombre completo la cabecera se va a 200 px de alto y el cuadro deja de leerse. */
.lv-matriz { width: auto; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.lv-matriz th.lv-mx-lote { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left;
  min-width: 210px; width: 210px; padding: 7px 12px 7px 2px; border-bottom: 1px solid var(--line); }
.lv-matriz thead th.lv-mx-lote { z-index: 3; vertical-align: bottom; border-bottom: 1px solid var(--line-strong); }
.lv-matriz tbody tr:hover th.lv-mx-lote { background: var(--surface-2); }
.lv-matriz .lv-mx-col { height: 118px; vertical-align: bottom; padding: 8px 0 7px; width: 34px; min-width: 34px;
  border-bottom: 1px solid var(--line-strong); }
.lv-matriz .lv-mx-col span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; text-align: left; }
.lv-matriz .lv-mx-col.opcional span { opacity: .55; font-weight: 500; }
.lv-matriz td.lv-mx { text-align: center; font-weight: 700; font-size: 12px; padding: 7px 2px;
  border-bottom: 1px solid var(--surface); border-right: 1px solid var(--surface); }
.lv-matriz td.lv-mx-ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.lv-matriz td.lv-mx-falta { background: color-mix(in srgb, var(--loss) 14%, transparent); color: var(--loss); }
.lv-matriz td.lv-mx-na { background: var(--surface-3); color: var(--muted); font-weight: 500; }
.lv-matriz tbody tr:hover td.lv-mx { filter: brightness(.97); }
/* La última columna, el avance, se separa del cuadro para que no se lea como un documento más */
.lv-matriz th:last-child, .lv-matriz td:last-child { padding-left: 16px; border-left: 1px solid var(--line); }
.lv-matriz tfoot td.lv-mx { font-size: 11.5px; border-top: 1px solid var(--line-strong); }
.lv-matriz tfoot th.lv-mx-lote { border-top: 1px solid var(--line-strong); font-size: 12px; color: var(--muted); }
/* La leyenda, debajo del cuadro */
.lv-mx-leyenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 12px 0 0; font-size: 12.5px; color: var(--ink-2); }
.lv-mx-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.lv-mx-leyenda i { width: 17px; height: 17px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; font-style: normal; }
.lv-mx-leyenda i.ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.lv-mx-leyenda i.falta { background: color-mix(in srgb, var(--loss) 14%, transparent); color: var(--loss); }
.lv-mx-leyenda i.na { background: var(--surface-3); color: var(--muted); }

/* Blending: simulador y ficha (bs-) */
.bs { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.bs-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.bs-tabla td small { display: block; font-size: 11.5px; color: var(--muted); }
.bs-tabla tbody tr { cursor: pointer; } .bs-tabla tr.marcado td { background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.bs-sim { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); max-height: calc(100vh - 24px); overflow-y: auto; }
.bs-sim header { display: flex; justify-content: space-between; align-items: baseline; }
.bs-sim h2 { margin: 0; font-size: 16px; } .bs-sim header span { font-size: 12.5px; color: var(--muted); }
.bs-ley { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #152A40, #1F3D5C); color: #fff; }
.bs-ley small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; opacity: .8; } .bs-ley b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; } .bs-ley span { font-size: 12px; opacity: .8; }
.bs-cumple { font-style: normal; margin-top: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; align-self: flex-start; }
.bs-cumple.si { background: #1F7A4A; } .bs-cumple.no { background: #B42318; }
.bs-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.bs-datos div { padding: 7px 9px; border-radius: 10px; background: var(--surface-2); }
.bs-datos dt { font-size: 11px; font-weight: 700; color: var(--muted); } .bs-datos dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.bs-barras { position: relative; display: flex; flex-direction: column; gap: 4px; }
.bs-barra { display: grid; grid-template-columns: 60px minmax(0, 1fr) 44px 40px; align-items: center; gap: 4px; font-size: 11px; }
.bs-barra span { font-family: var(--mono, monospace); font-size: 10px; color: var(--muted); overflow: hidden; }
.bs-barra i { display: block; height: 10px; border-radius: 999px; } .bs-barra i.alta { background: var(--good); } .bs-barra i.baja { background: var(--warn); }
.bs-barra b { text-align: right; font-variant-numeric: tabular-nums; } .bs-barra em { font-style: normal; text-align: right; color: var(--muted); }
.bs-linea { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: .6; }
.bs-aviso { margin: 0; font-size: 12px; color: var(--warn); }
.bs-sim label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.bs-ficha { display: flex; flex-direction: column; gap: 14px; }
.bs-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bs-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bs-kpi small { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .bs-kpi b { font-size: 22px; font-weight: 800; } .bs-kpi span { font-size: 12px; color: var(--ink-2); }
.bs-kpi.fuerte { background: linear-gradient(135deg, #152A40, #1F3D5C); border-color: transparent; } .bs-kpi.fuerte * { color: #fff !important; }
@media (max-width: 1100px) { .bs { grid-template-columns: minmax(0, 1fr); } .bs-sim { position: static; max-height: none; } .bs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-dest.vacio { border-top-style: dashed; background: var(--surface-2); }
.pr-dest-cab { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.pr-dest-cab b { font-size: 15px; } .pr-dest-cab span { font-size: 12.5px; color: var(--muted); font-weight: 700; } .pr-dest-cab small { font-size: 12px; color: var(--ink-2); }
.pr-dest-acc { display: flex; margin-top: auto; border-top: 1px solid var(--line); }
.pr-dest-acc button, .pr-dest-acc a { flex: 1; padding: 7px 10px; border: 0; background: var(--surface-2); font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); text-decoration: none; text-align: center; cursor: pointer; }
.pr-dest-acc a { border-left: 1px solid var(--line); color: var(--gold-text, var(--ink)); }
.pr-dest-acc button:hover, .pr-dest-acc a:hover { background: color-mix(in srgb, var(--c) 12%, var(--surface)); }

.pr-tabla tr.pr-aprobado td:first-child { box-shadow: inset 4px 0 0 var(--good); }
.pr-tabla tr.pr-sin-aprobar td:first-child { box-shadow: inset 4px 0 0 var(--warn); }

/* Con la estación de pesaje delante, el recuadro del indicador se queda solo con lo que no
   duplica: conectar el puerto y configurarlo. El peso y el estado los da la estación. */
body:has(.bsal-est) .ind-caja .ind-peso,
body:has(.bsal-est) .ind-caja .ind-est { display: none; }
body:has(.bsal-est) .ind-caja { padding-top: 6px; padding-bottom: 6px; opacity: .85; }
body:has(.bsal-est) .ind-caja .ind-tit::after { content: ' · solo para dar permiso al puerto'; font-weight: 400; color: var(--muted); }

/* ——— La estación de pesaje de salida ———
   Una cosa, un sitio: qué carro, qué lote, cuánto marca la balanza y un botón. Repartirlo entre
   las tarjetas de los carros se probó dos veces y no funciona: con la tarjeta estrecha hay que
   leer tres sitios para entender uno. La lectura va grande porque se mira de lejos, desde la
   balanza, y el botón es la cosa más grande de la pantalla porque es lo único que se pulsa. */
.bsal-est { margin: 0 0 18px; border: 1px solid color-mix(in srgb, var(--gold, #C9962B) 40%, var(--line));
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.bsal-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 8px 0; background: var(--surface-2); }
.bsal-tab { display: flex; flex-direction: column; gap: 1px; padding: 8px 16px; border: 0; border-radius: 12px 12px 0 0;
  background: transparent; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
.bsal-tab b { font-size: 13.5px; font-weight: 700; }
.bsal-tab small { font-size: 11px; color: var(--muted); }
.bsal-tab:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.bsal-tab.on { background: var(--surface); box-shadow: 0 -2px 0 var(--gold, #C9962B) inset; }
.bsal-tab.on b { color: var(--ink); }
.bsal-tab.listo b::after { content: ' ✓'; color: var(--good); }

.bsal-est-cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 10px 26px; padding: 18px 22px 16px; }
.bsal-est-donde { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--muted); }
.bsal-est-donde b { font-family: var(--mono, monospace); color: var(--ink-2); }
.bsal-est-fin { grid-column: 1 / -1; margin: 0; font-size: 14px; }

/* La lectura: lo que se mira de lejos */
.bsal-lectura { display: flex; flex-direction: column; min-width: 190px; }
.bsal-lectura b { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bsal-lectura b em { margin-left: 7px; font-style: normal; font-size: 17px; font-weight: 700; color: var(--muted); }
.bsal-lectura span { margin-top: 3px; font-size: 12px; font-weight: 700; }
.bsal-lectura.ok span { color: var(--good); }
.bsal-lectura.mov span { color: var(--warn); }
.bsal-lectura.sin b { color: var(--muted); }
.bsal-lectura.sin span { color: var(--muted); font-weight: 600; }

/* A qué le toca */
.bsal-toca { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bsal-toca small { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.bsal-toca b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.bsal-toca span { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }

/* El botón, que es lo único que se pulsa */
.bsal-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.bsal-tomar { min-height: 62px; padding: 10px 30px; font-size: 18px; font-weight: 800; border-radius: 16px;
  font-variant-numeric: tabular-nums; }
.bsal-o { font-size: 11.5px; color: var(--muted); }
.bsal-manual { display: inline-flex; align-items: center; gap: 7px; }
.bsal-est .bsal-manual input { width: 104px; min-height: 44px; padding: 5px 12px; font-size: 16px; font-weight: 700;
  text-align: right; font-variant-numeric: tabular-nums; border-radius: 12px; background: var(--surface); }

/* El recorrido del carro, en una línea */
.bsal-ruta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.bsal-tramo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--mono, monospace); font-size: 11.5px; background: var(--surface-3); color: var(--muted); }
.bsal-tramo b { font-family: inherit; font-weight: 800; font-variant-numeric: tabular-nums; }
.bsal-tramo.ok { background: color-mix(in srgb, var(--good) 11%, transparent); color: var(--good); }
.bsal-tramo.toca { background: var(--gold-soft); color: var(--gold-text); font-weight: 800;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, #C9962B) 30%, transparent); }
.bsal-msg { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--good); }
.bsal-msg.mal { color: var(--bad); }

@media (max-width: 900px) {
  .bsal-est-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bsal-acc { flex-wrap: wrap; }
  .bsal-tomar { flex: 1 0 100%; }
}

/* Nuevo envío por carros: planta → lotes y blendings → carros con sus TMH */
.dpn { display: flex; flex-direction: column; gap: 14px; }
.dpn-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.dpn-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dpn-cab h2 { margin: 0; font-size: 17px; font-weight: 800; }
.dpn-cab span { font-size: 12.5px; color: var(--muted); }
.dpn-cab-carros { justify-content: space-between; align-items: center; }
.dpn-cab-carros > div:first-child { display: flex; flex-direction: column; gap: 2px; max-width: 70ch; }
.dpn-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.dpn .dpn-btn { min-height: 34px; padding: 0 14px; font-size: 12.5px; }
.dpn-borrador { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--sky-soft); color: var(--sky-text); font-size: 13px; font-weight: 600; }
.dpn-borrador button { margin-left: 6px; border: 0; background: none; color: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.dpn-plantas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.dpn-planta { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 12px; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 12px; background: var(--surface-2); color: var(--ink); text-align: left; cursor: pointer; transition: box-shadow .15s, background .15s; }
.dpn-planta b { font-size: 14.5px; }
.dpn-planta span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dpn-planta small { font-size: 11.5px; color: var(--muted); }
.dpn-planta.vacia { border-top-style: dashed; }
.dpn-planta.vacia span { color: var(--muted); font-weight: 600; }
.dpn-planta:hover { background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.dpn-planta:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dpn-planta.activa { background: color-mix(in srgb, var(--c) 14%, var(--surface)); box-shadow: 0 0 0 2px var(--c); }
.dpn-otro { display: flex; flex-direction: column; justify-content: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.dpn .dpn-otro input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 36px; font-size: 13px; }
.dpn-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.dpn-datos label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.dpn-datos .dpn-nota { grid-column: span 2; }
.dpn .dpn-datos input:not([type=checkbox]):not([type=radio]):not([type=file]), .dpn .dpn-datos select { min-height: 38px; font-size: 13.5px; }

.dpn-mesa { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 14px; align-items: start; }
.dpn-carga { position: sticky; top: 12px; max-height: calc(100vh - 110px); gap: 10px; padding: 14px; }
.dpn-ver { display: flex; padding: 3px; border-radius: 999px; background: var(--surface-3); }
.dpn-ver button { flex: 1; min-height: 30px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.dpn-ver button.activa { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 26, 46, .12); }
.dpn .dpn-buscar:not([type=checkbox]) { min-height: 36px; font-size: 13px; }
.dpn-bloq { margin: 0; font-size: 12px; color: var(--bad); }
.dpn-lista { display: flex; flex-direction: column; gap: 6px; min-height: 120px; overflow-y: auto; margin: 0 -4px; padding: 0 4px 4px; }
.dpn-vacio { margin: 0; padding: 22px 12px; border: 2px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.dpn-sub { margin: 6px 0 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dpn-blend { display: flex; flex-direction: column; gap: 5px; padding: 8px; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.dpn-blend header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 2px; }
.dpn-blend header > span { display: flex; flex-direction: column; min-width: 0; }
.dpn-blend header b { color: var(--gold-text); }
.dpn-blend header small { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dpn-lote { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 30px; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: 10px; background: var(--surface); cursor: grab; }
.dpn-lote.falta { border-left-color: var(--warn); }
.dpn-lote.parcial { border-left-color: var(--sky); }
.dpn-lote.puesto { cursor: default; border-left-style: dashed; border-left-color: var(--line-strong); background: var(--surface-2); }
.dpn-lote.puesto .dpn-lote-id, .dpn-lote.puesto .dpn-lote-ley { opacity: .55; }
.dpn-lote:hover:not(.puesto) { border-color: var(--gold); }
.dpn-lote.arrastrando, .dpn-filas li.arrastrando { opacity: .45; }
.dpn-lote-id { display: flex; flex-direction: column; min-width: 0; }
.dpn-lote-id small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpn-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.dpn-tag { padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: 10.5px; font-style: normal; font-weight: 700; line-height: 17px; }
.dpn-tag.warn { background: var(--warn-soft); color: var(--warn); }
.dpn-tag.info { background: var(--sky-soft); color: var(--sky-text); }
.dpn-lote-ley, .dpn-lote-tm { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.dpn-lote-ley b { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.dpn-lote-tm b { font-size: 14.5px; font-weight: 800; }
.dpn-lote-ley small, .dpn-lote-tm small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.dpn-mas { width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--gold-soft); color: var(--gold-text); font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; }
.dpn-mas:hover { background: var(--gold); color: #2A1C00; }
.dpn-mas:disabled { background: none; color: var(--good); cursor: default; }
.dpn-mas:focus-visible, .dpn-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.dpn-zona { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dpn-carros { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.dpn-carro { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; transition: box-shadow .15s; }
.dpn-carro.activo { box-shadow: 0 0 0 2px var(--gold), var(--shadow); cursor: default; }
.dpn-carro.pasa { border-color: var(--bad); }
.dpn-carro.encima, .dpn-agregar.encima { box-shadow: 0 0 0 3px var(--gold), var(--shadow-up); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
.dpn-carro header { display: flex; align-items: center; gap: 8px; }
.dpn .dpn-carro input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 32px; padding: 3px 8px; border-radius: 9px; font-size: 13px; }
.dpn .dpn-carro .dpn-placa { flex: 1; min-width: 0; font-weight: 700; text-transform: uppercase; }
.dpn-capin { display: flex; align-items: center; gap: 4px; flex: none; }
.dpn .dpn-capin input:not([type=checkbox]):not([type=radio]):not([type=file]) { width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.dpn-capin small, .dpn-t small { font-size: 11px; font-weight: 700; color: var(--muted); }
.dpn-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.dpn-x:hover { background: var(--bad-soft); color: var(--bad); }
.dpn-aqui { margin: -2px 0 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-text); }
.dpn-filas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dpn-filas li { display: grid; grid-template-columns: minmax(0, 1fr) auto 26px; align-items: center; gap: 6px; padding: 5px 4px 5px 9px; border-radius: 10px; background: var(--surface-2); cursor: grab; }
.dpn-fila-id { display: flex; flex-direction: column; min-width: 0; }
.dpn-fila-id small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.dpn-t { display: flex; }
.dpn .dpn-t input:not([type=checkbox]):not([type=radio]):not([type=file]) { width: 84px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.dpn-filas li.dpn-soltar { display: block; padding: 18px 10px; border: 2px dashed var(--line); background: none; color: var(--muted); font-size: 12.5px; text-align: center; cursor: inherit; }
.dpn-agregar { min-height: 140px; border: 2px dashed var(--line-strong); border-radius: 16px; background: none; color: var(--ink-2); font-size: 14px; font-weight: 800; cursor: pointer; }
.dpn-agregar:hover { border-color: var(--gold); color: var(--gold-text); }

.dpn-pie { position: sticky; bottom: 10px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 12px 10px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-up); }
.dpn-st { display: flex; flex-direction: column; gap: 1px; }
.dpn-st small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dpn-st b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dpn-st-tm .dp-barra { width: 130px; }
.dpn-avisos { flex: 1; min-width: 200px; margin: 0; font-size: 12.5px; color: var(--ink-2); }
.dpn-flash { color: var(--sky-text); font-weight: 700; }
.dpn-enviando { opacity: .7; pointer-events: none; }
@media (max-width: 1000px) {
  .dpn-mesa { grid-template-columns: minmax(0, 1fr); }
  .dpn-carga { position: static; max-height: 60vh; }
  .dpn-datos .dpn-nota { grid-column: auto; }
}
@media (max-width: 560px) {
  .dpn-carros { grid-template-columns: minmax(0, 1fr); }
  .dpn-pie { bottom: 0; gap: 8px 14px; padding: 10px 12px; }
  .dpn-pie .btn { width: 100%; }
}

/* Blending como una sola pieza, con el detalle de sus lotes y ley */
.dpn-pieza-blend { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.dpn-lote.dpn-pieza-blend.falta { border-left-color: var(--warn); }
.dpn-pieza-blend .dpn-lote-id > b, .dpn-filas li.dpn-pieza-blend .dpn-fila-id > b { color: var(--gold-text); }
.dpn-filas li.dpn-pieza-blend { box-shadow: inset 3px 0 0 var(--gold); }
.dpn-det { grid-column: 1 / -1; margin: 0; }
.dpn-det summary { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.dpn-det summary:hover { color: var(--gold-text); }
.dpn-det ul { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dpn-det li { display: grid; align-items: center; gap: 8px; border-radius: 8px; background: var(--surface); box-shadow: none; cursor: default; }
.dpn-det li span { display: flex; flex-direction: column; min-width: 0; }
.dpn-det li b { font-size: 12px; color: var(--ink); }
.dpn-det li small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpn-det li em { display: flex; flex-direction: column; align-items: flex-end; font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dpn-det li em small { font-size: 10px; font-weight: 600; }

/* Filas de carro: código BH o número de blending en grande, BJ pequeño, ley aparte (ponderada en blending) y TMH */
.dpn-cod { font-family: var(--mono); font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpn-cod.bl { color: var(--gold-text); }
.dpn-bj { padding: 0 4px; border-radius: 4px; background: var(--surface-3); font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.dpn-bl-mini { font-family: var(--mono); font-size: 10.5px; color: var(--gold-text); }
.dpn-ley { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--sky-soft); color: var(--sky-text); white-space: nowrap; }
.dpn-ley b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dpn-ley small { font-size: 10px; font-weight: 700; opacity: .85; }
.dpn-pieza-blend .dpn-ley { background: var(--gold-soft); color: var(--gold-text); }
.dpn-ley.sin, .dpn-pieza-blend .dpn-ley.sin { background: var(--surface-3); color: var(--muted); }
.dpn-lote .dpn-ley { align-self: center; }
.dpn-tm { display: flex; flex-direction: column; align-items: flex-end; font-style: normal; font-variant-numeric: tabular-nums; }
.dpn-tm b { font-size: 14px; font-weight: 800; }
.dpn-tm small { font-size: 10.5px; font-weight: 600; color: var(--muted); }

.dpn-filas > li { grid-template-columns: minmax(0, 1fr) auto 26px; grid-template-areas: "id id x" "ley t t"; row-gap: 5px; column-gap: 8px; padding: 8px 6px 8px 10px; }
.dpn-filas > li > .dpn-fila-id { grid-area: id; }
.dpn-filas > li > .dpn-ley { grid-area: ley; justify-self: start; align-self: center; display: inline-flex; flex: none; flex-direction: row; }
.dpn-filas > li > .dpn-t, .dpn-filas > li > .dpn-tm { grid-area: t; justify-self: end; }
.dpn-filas > li > .dpn-x, .dpn-filas > li > form, .dpn-filas > li > span:empty { grid-area: x; justify-self: end; align-self: start; }
.dpn-filas > li > .dpn-det { grid-column: 1 / -1; grid-row: 3; }
.dpn-filas > li.dpn-soltar { grid-template-areas: none; }
.dpn-t { flex-direction: column; align-items: flex-end; gap: 1px; }
.dpn-t small { font-size: 10px; white-space: nowrap; }
.dpn-fila-id b + small { margin-top: 1px; }
.dp-carga.dpn-filas > li { cursor: default; }
.dp-carga.dpn-filas li form { margin: 0; }

.dpn-det li { grid-template-columns: minmax(0, 1fr) auto auto 22px; grid-template-areas: none; padding: 5px 6px 5px 8px; }
.dpn-det li > * { grid-area: auto; }
.dpn-det li .dpn-cod { font-size: 12.5px; }
.dpn-det li .dpn-fila-id { display: flex; flex-direction: column; min-width: 0; }
.dpn-det li .dpn-ley { padding: 1px 6px; }
.dpn-det li .dpn-ley b { font-size: 12px; }
.dpn-det li .dpn-tm b { font-size: 12.5px; }
.dpn-det li .dpn-bj { font-size: 10px; }

.dpn-carro-ley { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: 12px; }
.dpn-carro-ley span { flex: 1; color: var(--ink-2); font-weight: 600; }
.dpn-carro-ley b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dpn-carro-ley small { font-size: 11px; color: var(--muted); }
.dp-lote .dpn-cod { font-size: 13.5px; }

.dpn-det li span.dpn-bj { display: inline; padding: 0 4px; }
.dpn-det li > .dpn-ley { display: inline-flex; flex-direction: row; align-items: baseline; }
.dpn-det li > .dpn-ley small { display: inline; }
.dp-carga .dpn-tm small { color: var(--muted); }
.dp-carga .dpn-tm small:not(:only-child) { display: block; }
/* Autollenado con los maestros */
.mae-nota { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--good); }
input.mae-llenado { box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 35%, transparent) !important; transition: box-shadow .3s; }
input[data-mae-auto="1"] { background: color-mix(in srgb, var(--good) 6%, var(--surface)); }

/* Balanza de salida por carros: pasos, unidad, carga lote por lote, guías, salida y distribución */
.bsal { display: flex; flex-direction: column; gap: 14px; }
.bsal-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bsal-pasos li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; font-weight: 700; color: var(--muted); }
.bsal-pasos li span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); font-size: 12px; }
.bsal-pasos li.hecho { color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.bsal-pasos li.hecho span { background: var(--good); color: #fff; }
.bsal-pasos li.actual { color: var(--ink); border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); }
.bsal-pasos li.actual span { background: var(--gold); color: #2A1C00; }
.bsal-form { display: flex; flex-direction: column; gap: 14px; }
.bsal-panel { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.bsal-panel legend, .bsal-panel > h2 { display: flex; align-items: center; gap: 8px; float: left; width: 100%; margin: 0 0 12px; padding: 0; font-size: 16px; font-weight: 800; }
.bsal-panel legend + * { clear: both; }
.bsal-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 13px; }
.bsal-panel[disabled] input { background: var(--surface-2); color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1; }
.bsal-unidad { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bsal-unidad label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.bsal-unidad .ancho { grid-column: span 2; }
.bsal-tara { grid-column: span 2; }
.bsal .bsal-tara input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 48px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; border-color: var(--gold); }
.bsal-ayuda { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); max-width: 90ch; }
.bsal-lotes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: none; }
.bsal-lote { display: grid; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.bsal-lote.pesado { border-left-color: var(--good); }
.bsal-lote.siguiente { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.bsal-lote.error { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
.bsal-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-3); font-weight: 800; font-size: 13px; }
.bsal-lote.pesado .bsal-n { background: var(--good); color: #fff; }
.bsal-lote.siguiente .bsal-n { background: var(--gold); color: #2A1C00; }
.bsal-mover { display: flex; flex-direction: column; gap: 2px; }
.bsal-mover button { width: 24px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; line-height: 1; cursor: pointer; }
.bsal-mover button:hover { border-color: var(--gold); color: var(--gold-text); }
.bsal-id { min-width: 0; }
.bsal-id small { white-space: normal; }
.bsal-plan, .bsal-tmh { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.bsal-plan b { font-size: 14px; color: var(--ink-2); }
.bsal-tmh b { font-size: 18px; font-weight: 800; }
.bsal-plan small, .bsal-tmh small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bsal-tmh small.cerca { color: var(--good); font-weight: 700; }
/* El ticket de ESTA pesada, en su propia fila: se imprime y se sigue con la siguiente pieza. */
.bsal-tk { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap; }
.bsal-tk:hover { text-decoration: underline; }
.bsal-tk svg { width: 13px; height: 13px; }
.bsal-tmh small.lejos { color: var(--warn); font-weight: 700; }
.bsal-lote.error .bsal-tmh small { color: var(--bad); font-weight: 700; white-space: normal; text-align: right; }
.bsal-peso { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted); }
.bsal .bsal-peso input:not([type=checkbox]):not([type=radio]):not([type=file]) { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.bsal-tot { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.bsal-tot div { display: flex; flex-direction: column; }
.bsal-tot small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bsal-tot b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bsal-guardar { position: sticky; bottom: 10px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-up); }
.bsal-guardar span { flex: 1; font-size: 12.5px; color: var(--muted); }
.bsal-salida { display: flex; flex-direction: column; gap: 10px; }
.bsal-falta { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 13.5px; }
.bsal-salio { margin: 0; font-size: 14px; }
.bsal-salir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.bsal-salir label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.bsal .doc-check { margin: 0; }
/* Lista de carros */
.bsal-carros { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.bsal-carro { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none; }
.bsal-carro:hover { border-color: var(--gold); }
.bsal-carro.salio { background: color-mix(in srgb, var(--good) 5%, var(--surface)); }
.bsal-carro-cab { display: flex; align-items: center; gap: 8px; }
.bsal-carro-cab b { flex: 1; font-size: 15px; }
.bsal-carro small { font-size: 12px; color: var(--muted); }
.bsal-carro-carga { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bsal-carro-lotes { font-family: var(--mono); font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsal-carro-paso { margin-top: 4px; font-size: 13px; font-weight: 800; }
.bsal-carro-paso.warn { color: var(--warn); } .bsal-carro-paso.good { color: var(--good); } .bsal-carro-paso.info { color: var(--sky-text); } .bsal-carro-paso.neutral { color: var(--ink-2); }
/* En el tablero del envío */
.dp-a-balanza { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--sky) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--sky) 6%, var(--surface)); color: var(--ink); text-decoration: none; }
.dp-a-balanza:hover { border-color: var(--sky); }
.dp-a-balanza svg { width: 20px; height: 20px; flex: none; }
.dp-a-balanza span { flex: 1; display: flex; flex-direction: column; }
.dp-a-balanza b { font-size: 13.5px; } .dp-a-balanza small { font-size: 12px; color: var(--muted); }
.dp-a-balanza em { font-style: normal; font-weight: 800; color: var(--sky-text); }
.dp-a-balanza.salio { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); background: color-mix(in srgb, var(--good) 6%, var(--surface)); }
@media (max-width: 900px) {
  .bsal-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsal-lote { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "n id plan" "peso peso tmh"; }
  .bsal-lote .bsal-n { grid-area: n; } .bsal-lote .bsal-id { grid-area: id; } .bsal-lote .bsal-plan { grid-area: plan; }
  .bsal-lote .bsal-peso { grid-area: peso; } .bsal-lote .bsal-tmh { grid-area: tmh; } .bsal-lote .bsal-mover { display: none; }
  .bsal-tot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bsal-unidad .ancho, .bsal-tara { grid-column: auto; }
}

/* Balanza de salida v2: toneladas, balanza ↔ lote enlazados, avance en vivo, guía única o por lote, guardado automático */
.bsal-carga-viva { position: sticky; top: 8px; z-index: 6; display: grid; align-items: center; gap: 18px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-up); }
.bsal-cv-num { display: flex; flex-direction: column; }
.bsal-cv-num small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bsal-cv-num b { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bsal-cv-num em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); }
.bsal-cv-barras { display: flex; flex-direction: column; gap: 6px; }
.bsal-cv-barra { display: flex; flex-direction: column; gap: 3px; }
.bsal-cv-barra span { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.bsal-cv-barra span b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bsal-cv-barra i { display: block; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bsal-cv-barra i b { display: block; height: 100%; border-radius: 999px; background: var(--good); transition: width .25s; }
.bsal-cv-barra.cap i b { background: var(--sky); }
.bsal-cv-barra.cap i b.pasa { background: var(--bad); }

.bsal-tm-in { position: relative; display: block; }
.bsal-tm-in em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); pointer-events: none; }
.bsal .bsal-tm-in input:not([type=checkbox]):not([type=radio]):not([type=file]) { padding-right: 34px; }

.bsal-cab-lotes, .bsal-lote { grid-template-columns: 58px minmax(0, 1fr) 76px 150px 130px 110px; }
.bsal-cab-lotes { display: grid; gap: 12px; padding: 0 12px 4px 16px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bsal-cab-lotes span:nth-child(n+3) { text-align: right; }
.bsal-lote { row-gap: 8px; }
.bsal-izq { display: flex; align-items: center; gap: 6px; }
.bsal-peso { align-items: stretch; }
.bsal-peso small { text-align: right; font-size: 10.5px; }
.bsal .bsal-peso input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 44px; font-size: 18px; }
.bsal .bsal-peso.neto input:not([type=checkbox]):not([type=radio]):not([type=file]) { font-size: 16px; background: var(--surface-2); }
.bsal-lote.pesado .bsal-peso.neto input { color: var(--good); }
.bsal-tmh { gap: 4px; }
.bsal-mini { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bsal-mini i { display: block; height: 100%; border-radius: 999px; background: var(--good); transition: width .25s; }
.bsal-mini i.lejos { background: var(--warn); }
.bsal-tmh small { font-size: 12px; }
.bsal-guias-lote { display: none; grid-column: 2 / -1; gap: 10px; }
.bsal-lotes.con-guias .bsal-guias-lote { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); }
.bsal-guias-lote label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.bsal .bsal-guias-lote input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 34px; padding: 4px 10px; font-size: 13px; }

.bsal-modo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.bsal-modo label { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.bsal-modo label input { position: absolute; left: 14px; top: 15px; }
.bsal-modo label b { font-size: 14px; }
.bsal-modo label small { font-size: 12px; color: var(--muted); }
.bsal-modo label.activo { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent); }
.bsal-guia-lote-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; color: var(--ink-2); }
.bsal-guia-lote-acc span { flex: 1; }
.bsal-estado { flex: 1; font-size: 13px; font-weight: 600; color: var(--muted); }
.bsal-estado.bien { color: var(--good); }
.bsal-estado.mal { color: var(--bad); }
@media (max-width: 900px) {
  .bsal-carga-viva { grid-template-columns: 1fr 1fr; top: 0; }
  .bsal-cv-barras { grid-column: 1 / -1; grid-row: 2; }
  .bsal-cab-lotes { display: none; }
  .bsal-lote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "id id" "plan tmh" "peso neto" "guias guias"; }
  .bsal-lote .bsal-izq { display: none; }
  .bsal-lote .bsal-id { grid-area: id; } .bsal-lote .bsal-plan { grid-area: plan; align-items: flex-start; } .bsal-lote .bsal-tmh { grid-area: tmh; }
  .bsal-lote .bsal-peso { grid-area: peso; } .bsal-lote .bsal-peso.neto { grid-area: neto; } .bsal-lote .bsal-guias-lote { grid-area: guias; grid-column: auto; }
  .bsal-modo { grid-template-columns: 1fr; }
}

/* Balanza: un blending es una sola pieza */
.bsal-blend { background: color-mix(in srgb, var(--gold) 5%, var(--surface)); }
.bsal-blend-lotes { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 2px; font-family: var(--mono); font-size: 10.5px !important; color: var(--muted); }
.bsal-blend-lotes b { color: var(--ink-2); font-weight: 700; }

/* Balanza: rango aceptado de merma según humedad (TMS a lo que ingresó) */
.bsal-tms { font-size: 10.5px !important; white-space: nowrap; }
.bsal-rango { position: relative; display: block; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--good) 35%, var(--surface-3)), color-mix(in srgb, var(--good) 15%, var(--surface-3))); }
.bsal-rango i { display: none; }
.bsal-rango i.marca { display: block; position: absolute; top: 50%; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--surface); border-radius: 50%; background: var(--good); transform: translateY(-50%); box-shadow: 0 0 0 1px var(--good); }
.bsal-lote.r-bajo .bsal-rango i.marca { background: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.bsal-lote.r-sobre .bsal-rango i.marca { background: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.bsal-lote.r-sin .bsal-rango i.marca { background: var(--muted); box-shadow: 0 0 0 1px var(--muted); }
.bsal-lote.r-bajo { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
.bsal-tmh small.mal { color: var(--bad); font-weight: 800; white-space: normal; text-align: right; }
.bsal-procede b { font-size: 16px !important; line-height: 1.25; }
.bsal-procede.bien b { color: var(--good); } .bsal-procede.ojo b { color: var(--warn); } .bsal-procede.mal b { color: var(--bad); }
.bsal-carga-viva { grid-template-columns: auto minmax(0, 1fr) auto auto; }
@media (max-width: 900px) { .bsal-carga-viva { grid-template-columns: 1fr 1fr; } .bsal-procede { grid-column: 1 / -1; } }

.bsal-cab-lotes, .bsal-lote { grid-template-columns: 58px minmax(0, 1fr) 118px 150px 130px 160px; }
.bsal-tmh small { white-space: normal; text-align: right; line-height: 1.25; }
@media (max-width: 900px) { .bsal-lote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Distribución por destino (carros que ya salieron) */
.tabla-scroll { overflow-x: auto; }
.ddes { border-top: 4px solid var(--c); }
.ddes-tabla { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ddes-tabla th { position: sticky; top: 0; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line-strong); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); text-align: left; white-space: nowrap; }
.ddes-tabla td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ddes-tabla .r { text-align: right; white-space: nowrap; }
.ddes-tabla .ddes-carro td { padding: 9px 10px; background: color-mix(in srgb, var(--c) 9%, var(--surface)); border-top: 2px solid color-mix(in srgb, var(--c) 40%, var(--line)); }
.ddes-carro td { display: table-cell; }
.ddes-carro span { font-size: 13px; }
.ddes-carro em { float: right; font-style: normal; font-weight: 800; }
.ddes-tabla tfoot td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 0; }
.ddes-tabla td .cell-sub { display: block; font-size: 11px; color: var(--muted); }

.ddes-pdf { margin-left: 10px; font-size: 12px; font-weight: 800; color: var(--gold-text); }
/* El ticket de cada lote, pegado a su código: se revisa el despacho y se reimprime sin salir. */
.ddes-tk { margin-left: 7px; color: var(--muted); vertical-align: -2px; opacity: .55; }
.ddes-tk:hover { color: var(--brand); opacity: 1; }
.ddes-tk svg { width: 13px; height: 13px; }
.ddes .panel-head .btn { margin-left: auto; order: 3; }

/* Guardar sin recargar: barra fina arriba mientras guarda */
body.erp-guardando::before { content: ''; position: fixed; inset: 0 0 auto 0; z-index: 9999; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: erp-guardando 1s linear infinite; }
@keyframes erp-guardando { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { body.erp-guardando::before { animation: none; background: var(--gold); } }
button.guardando { opacity: .7; cursor: progress; }

/* Nuevo envío: remanentes de un lote o blending cargado a medias */
.dpn-tag.remanente { background: var(--warn-soft); color: var(--warn); }
.dpn-filas > li.dpn-parcial { box-shadow: inset 3px 0 0 var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--surface-2)); }
.dpn-remanente { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 5px 8px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 11.5px; font-weight: 600; }
.dpn-remanente span { flex: 1; min-width: 150px; }
.dpn-remanente button { border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 999px; background: var(--surface); color: var(--warn); font-size: 11.5px; font-weight: 800; padding: 2px 10px; cursor: pointer; }
.dpn-remanente button:hover { background: var(--warn); color: #fff; }.dpn-rem-aviso { color: var(--warn); font-weight: 700; }
.dpn-filas > li > .dpn-remanente { grid-row: 3; }
.dpn-filas > li > .dpn-remanente ~ .dpn-det { grid-row: 4; }

/* Tránsito y recepción (Fase 5) */
.tr-envio { border-top: 4px solid var(--c); }
.tr-envio .panel-head { flex-wrap: wrap; gap: 8px; }
.tr-legajo-chip { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; text-decoration: none; }
.tr-legajo-chip.ok { background: var(--good-soft); color: var(--good); }
.tr-legajo-chip.falta { background: var(--warn-soft); color: var(--warn); }
.tr-legajo-chip.listo { background: var(--sky-soft); color: var(--sky-text); }
.tr-carros { display: grid; gap: 12px; align-items: start; }
.tr-carro { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); scroll-margin-top: 90px; }
.tr-carro.tarde { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 4%, var(--surface)); }
.tr-carro header { display: flex; align-items: center; gap: 8px; }
.tr-carro header b { font-size: 15px; }
.tr-carro header em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.tr-sub { margin: 0; font-size: 12px; color: var(--muted); }
.tr-dias { padding: 1px 8px; border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.tr-dias.ojo { background: var(--warn-soft); color: var(--warn); }
.tr-dias.tarde { background: var(--bad-soft); color: var(--bad); }
.tr-piezas { display: flex; flex-wrap: wrap; gap: 4px; }
.tr-piezas b { padding: 1px 7px; border-radius: 6px; background: var(--surface-3); font-family: var(--mono); font-size: 11.5px; }
.tr-piezas b.bl { background: var(--gold-soft); color: var(--gold-text); }
.tr-registrar summary, .tr-corregir summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--gold-text); }
.tr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 8px; }
.tr-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.tr-form label small { font-size: 11px; font-weight: 600; color: var(--muted); }
.tr-form label small.neg { color: var(--bad); } .tr-form label small.ojo { color: var(--warn); } .tr-form label small.pos { color: var(--good); }
.tr-form .ancho, .tr-form-pie { grid-column: 1 / -1; }
.tr-form-pie { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .tr-form select { min-height: 36px; font-size: 13px; }
.tr-corregir { min-width: 260px; }
.tr-corregir .tr-form { grid-template-columns: minmax(0, 1fr); }
.tr-legajo { display: flex; flex-direction: column; gap: 14px; }
.tr-auto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-auto li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 8px 36px; border-radius: 10px; background: var(--surface-2); position: relative; font-size: 13px; }
.tr-auto li::before { position: absolute; left: 12px; top: 8px; font-weight: 800; }
.tr-auto li.ok::before { content: '✓'; color: var(--good); } .tr-auto li.falta::before { content: '!'; color: var(--warn); }
.tr-auto li span { font-size: 12px; color: var(--ink-2); }
.tr-falta { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13px; }

/* ——— Legajo para la planta ——— */
.lv-cabecera { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.lv-anillo { position: relative; width: 108px; height: 108px; }
.lv-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lv-anillo circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.lv-anillo .lv-pista { stroke: var(--line); }
.lv-anillo .lv-arco { stroke: var(--good); transition: stroke-dasharray .5s ease; }
.lv-anillo b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-anillo b small { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.lv-cifras h2 { margin: 0 0 4px; font-size: 18px; }
.lv-cifras p { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.lv-cambiar { margin-left: 8px; font-size: 12px; }
.lv-pendientes { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-pendientes a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12px; font-weight: 700; text-decoration: none; }
.lv-pendientes a b { font-size: 12.5px; }
.lv-listo { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--good); font-weight: 700; font-size: 13px; }
.lv-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 220px; }
.lv-acciones small { font-size: 11px; color: var(--muted); text-align: right; }
.lv-vistas { display: flex; align-items: center; gap: 8px; margin: -4px 0 0; }
.lv-vistas span { flex: 1; }
.lv-vistas a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.lv-vistas a.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.lv-vistas a.lv-filtro { font-weight: 600; font-size: 12px; color: var(--muted); }
.lv-vistas a.lv-filtro.on { background: var(--gold-soft, var(--surface-2)); color: var(--gold-text, var(--ink)); border-color: transparent; }

.lv-barra { display: inline-block; width: 46px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; vertical-align: middle; margin-right: 5px; }
.lv-barra.grande { width: 100%; height: 9px; margin: 0; }
.lv-barra i { display: block; height: 100%; background: var(--good); }

.lv-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lv-doc-fila { padding: 11px 13px; border-radius: 13px; background: var(--surface-2); border-left: 4px solid var(--line); }
.lv-doc-fila.ok { border-left-color: var(--good); }
.lv-doc-fila.falta { border-left-color: var(--warn); }
.lv-doc-fila.op { border-left-color: var(--line); opacity: .85; }
.lv-doc-cab { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(90px, 3fr) auto; align-items: center; gap: 12px; }
.lv-doc-cab b { font-size: 13.5px; }
.lv-doc-cab b small { font-weight: 500; color: var(--muted); }
.lv-doc-cab em { font-style: normal; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-doc-cab em small { font-weight: 600; color: var(--muted); }
.lv-doc-como { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.lv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lv-chip > summary { list-style: none; cursor: pointer; padding: 3px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 11.5px; font-weight: 700; font-family: var(--mono, monospace); }
.lv-chip > summary::-webkit-details-marker { display: none; }
.lv-chip[open] > summary { background: var(--ink); color: var(--surface); }
.lv-ver-lote { font-size: 11.5px; }

.lv-lotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.lv-lote-ficha { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px; border-radius: 14px; background: var(--surface-2); border-left: 4px solid var(--good); }
.lv-lote-ficha.falta { border-left-color: var(--warn); }
.lv-lote-ficha > header { display: flex; align-items: center; gap: 8px; }
.lv-lote-ficha > header a { font-weight: 800; font-size: 14px; }
.lv-lote-ficha > header .lv-barra { flex: 1; width: auto; margin: 0; }
.lv-lote-ficha > header em { font-style: normal; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lv-lote-ficha > small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-puntos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.lv-punto > summary { list-style: none; cursor: pointer; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--surface); color: var(--ink-2); }
.lv-punto > summary::-webkit-details-marker { display: none; }
.lv-punto.ok > summary { background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: var(--good); }
.lv-punto.falta > summary { background: var(--warn-soft); color: var(--warn); }
.lv-punto.na > summary { color: var(--muted); }
@media (max-width: 800px) { .lv-cabecera { grid-template-columns: minmax(0, 1fr); } .lv-acciones { align-items: stretch; max-width: none; } .lv-acciones small { text-align: left; } }
/* La ficha del punto la saca el guion de la página al final del documento y la coloca sobre la celda, así no la recorta la tabla */
.lv-pop { display: none; }
.lv-pop.abierta { position: fixed; z-index: 60; min-width: 240px; max-width: 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.lv-pop small { font-size: 11.5px; color: var(--muted); }
.lv-pop form { display: flex; gap: 6px; flex-wrap: wrap; }
.lv-lista-docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px; }
.lv-lista-docs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: 10px; background: var(--surface-2); }
.lv-doc { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.lv-doc span { display: flex; flex-direction: column; min-width: 0; }
.lv-doc small { font-size: 11px; color: var(--muted); }
.lv-opcional { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.doc-acc { display: flex; flex-wrap: wrap; gap: 5px; }
.tr-enviar .tr-form { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: end; }
.tr-enviar .tr-form .btn { justify-self: start; }
@media (max-width: 560px) { .tr-carros { grid-template-columns: minmax(0, 1fr); } .tr-form { grid-template-columns: minmax(0, 1fr); } }

.fv-enlazar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.fv-enlazar > label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); min-width: 320px; }
.fv-carros { display: flex; flex-wrap: wrap; gap: 6px 14px; flex: 1; }
.fv-carros label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* Recepción: código de planta por lote */
.tr-pzs { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.tr-pz-cab, .tr-pz { display: grid; grid-template-columns: minmax(0, 1fr) 62px minmax(90px, 130px) 100px; align-items: center; gap: 8px; }.tr-pz-cab span:nth-child(2), .tr-pz-sal { text-align: right; }
.tr-pz-id { display: flex; flex-direction: column; min-width: 0; }
.tr-pz-id b { font-size: 12.5px; } .tr-pz-id b.bl { color: var(--gold-text); }
.tr-pz-id small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-pz-sal { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tr-form .tr-pz input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 32px; padding: 3px 8px; font-size: 12.5px; }
.tr-form .tr-pz .bsal-tm-in input { padding-right: 30px; text-align: right; }
.tr-pz-ayuda { font-size: 11px; color: var(--muted); }
.tr-pz-ayuda.neg { color: var(--bad); font-weight: 700; }
.tr-cods { display: flex; flex-direction: column; gap: 2px; }
.tr-cods span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.tr-cods small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.tr-cods em { font-style: normal; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.tr-carros { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.tr-pz-cab { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tr-pz { grid-template-columns: minmax(0, 1fr) 108px; grid-template-areas: "id sal" "cod tm"; row-gap: 4px; padding: 6px 0; border-top: 1px dashed var(--line); }
.tr-pz:first-of-type { border-top: 0; }
.tr-pz > .tr-pz-id { grid-area: id; } .tr-pz > .tr-pz-sal { grid-area: sal; align-self: start; }
.tr-pz > input { grid-area: cod; } .tr-pz > .tr-pz-tm { grid-area: tm; }
.tr-pz > input:only-of-type { grid-column: 1 / -1; }
.tr-pz:not(:has(.tr-pz-tm)) > input { grid-column: 1 / -1; }
@media (max-width: 560px) { .tr-carros { grid-template-columns: minmax(0, 1fr); } }

/* Tránsito: lista limpia de carros en camino */
.tr-lista { display: flex; flex-direction: column; gap: 18px; }
.tr-grupo { display: flex; flex-direction: column; gap: 6px; }
.tr-grupo-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 4px 6px; border-bottom: 2px solid var(--c); }
.tr-grupo-cab > b { font-size: 15px; }
.tr-dest { font-size: 16px; font-weight: 800; }
.tr-grupo-cab small { color: var(--muted); font-size: 12.5px; }
.tr-grupo-cab .tr-legajo-chip { margin-left: auto; }
.tr-fila { display: grid; grid-template-columns: 32px minmax(150px, 1.2fr) 100px 78px minmax(0, 2fr) 90px 150px; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.tr-fila:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.tr-fila.tarde { border-left: 4px solid var(--bad); }
.tr-fila span { min-width: 0; }
.tr-fila-placa, .tr-fila-salio, .tr-fila-tm { display: flex; flex-direction: column; }
.tr-fila-placa b { font-size: 15px; } .tr-fila-placa small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-fila-salio small, .tr-fila-tm small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tr-fila-salio b { font-size: 13px; }
.tr-fila-tm { align-items: flex-end; } .tr-fila-tm b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-fila-ir { justify-self: end; padding: 7px 14px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-text); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.tr-fila:hover .tr-fila-ir { background: var(--gold); color: #2A1C00; }
@media (max-width: 1000px) {
  .tr-fila { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "n placa tm" "n salio dias" "carga carga carga" "ir ir ir"; row-gap: 6px; }
  .tr-fila .dp-n { grid-area: n; } .tr-fila-placa { grid-area: placa; } .tr-fila-tm { grid-area: tm; } .tr-fila-salio { grid-area: salio; flex-direction: row; gap: 6px; align-items: baseline; }
  .tr-fila-dias { grid-area: dias; justify-self: end; } .tr-fila-carga { grid-area: carga; } .tr-fila-ir { grid-area: ir; justify-self: stretch; text-align: center; }
}

/* Llegada a planta de un carro */
.rc { display: flex; flex-direction: column; gap: 14px; max-width: 1080px; }
.rc-viaje { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1.2fr; gap: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.rc-dato { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-left: 1px solid var(--line); }
.rc-dato:first-child { border-left: 0; }
.rc-dato small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rc-dato b { font-size: 16px; font-weight: 800; }
.rc-dato.grande b { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rc-dato b em { font-style: normal; font-size: 13px; color: var(--muted); }
.rc-dato span { font-size: 12.5px; color: var(--ink-2); }
.rc-panel { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.rc-panel legend { display: flex; align-items: center; gap: 8px; float: left; width: 100%; margin: 0 0 14px; padding: 0; font-size: 17px; font-weight: 800; }
.rc-panel legend + * { clear: both; }
.rc-panel > input { width: 100%; }
.rc-llegada { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 14px; }
.rc-campo { display: flex; flex-direction: column; gap: 5px; }
/* El papel del ticket, no solo su número: contra ese papel se discute la merma de transporte. */
.rc-campo em { font-style: normal; font-size: 11.5px; font-weight: 600; }
.rc-ok { color: var(--good); }
.rc-falta { color: var(--warn); }
.rc-campo small, .rc-lote-cod small, .rc-lote-tm small, .rc-lote-tk small, .rc-lote-pdf small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.rc .rc-campo input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 52px; font-size: 17px; font-weight: 700; border-radius: 14px; }
.rc .rc-peso input:not([type=checkbox]):not([type=radio]):not([type=file]) { font-size: 24px; font-weight: 800; border-color: var(--gold); text-align: right; padding-right: 44px; font-variant-numeric: tabular-nums; }
.rc .rc-peso .bsal-tm-in em { font-size: 13px; right: 16px; }
.rc-ayuda { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); max-width: 90ch; }
.rc-lotes { display: flex; flex-direction: column; gap: 10px; }
.rc-lote { display: grid; grid-template-columns: minmax(0, 1.3fr) 80px minmax(150px, 1fr) 130px 110px 150px 150px; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--sky); border-radius: 14px; background: var(--surface-2); }
.rc-lote.bl { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 5%, var(--surface)); }
.rc-lote:not(:has([data-tr-pz-tm])) { grid-template-columns: minmax(0, 1.3fr) 80px minmax(170px, 1.2fr) 110px 150px 150px; }
.rc-lote-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-lote-id .dpn-cod { font-size: 17px; }
.rc-lote-id small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-lote-sal { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.rc-lote-sal small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rc-lote-sal b { font-size: 17px; } .rc-lote-sal em { font-style: normal; font-size: 11px; color: var(--muted); }
.rc-lote-cod, .rc-lote-tm, .rc-lote-tk, .rc-lote-pdf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* El N° del ticket y su papel, en la misma fila del lote: el número solo no prueba nada, y
   contra ese papel se discute la merma, que es dinero. Pedirlo en otra pantalla es pedirlo dos
   veces, y la segunda no se hace. */
.rc .rc-lote-tk input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 46px; font-size: 15px; font-weight: 700; border-radius: 12px; }
.rc .rc-lote-pdf input[type=file] { font-size: 11px; max-width: 100%; }
.rc-tk-ver { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 11px; font-weight: 800; text-decoration: none; }
.rc-tk-ver:hover { text-decoration: underline; }
.rc .rc-lote-cod input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 46px; font-size: 18px; font-weight: 800; letter-spacing: .02em; border-radius: 12px; text-transform: uppercase; }
.rc .rc-lote-tm input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 46px; font-size: 16px; font-weight: 700; text-align: right; padding-right: 36px; border-radius: 12px; }
.rc-lote-merma { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.rc-lote-merma small { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.rc-lote-merma.bien, .rc-pie b.bien { color: var(--good); } .rc-lote-merma.ojo, .rc-pie b.ojo { color: var(--warn); } .rc-lote-merma.mal, .rc-pie b.mal { color: var(--bad); }
.rc .tr-pz-ayuda { margin: 10px 0 0; font-size: 12.5px; }
.rc .tr-pz-ayuda:empty { display: none; }
.rc-pie { position: sticky; bottom: 10px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 12px 14px 12px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-up); }
.rc-pie > div { display: flex; flex-direction: column; }
.rc-pie small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rc-pie b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-acc { margin-left: auto; display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) {
  .rc-viaje { grid-template-columns: 1fr 1fr; } .rc-dato:nth-child(3) { border-left: 0; } .rc-dato:nth-child(n+3) { border-top: 1px solid var(--line); }
  .rc-llegada { grid-template-columns: 1fr; }
  .rc-lote, .rc-lote:not(:has([data-tr-pz-tm])) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id sal" "cod cod" "tm merma"; }
  .rc-lote-id { grid-area: id; } .rc-lote-sal { grid-area: sal; } .rc-lote-cod { grid-area: cod; } .rc-lote-tm { grid-area: tm; } .rc-lote-merma { grid-area: merma; }
  .rc-acc { width: 100%; } .rc-acc .btn-gold { flex: 1; }
}

.rc-ultimo { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--sky-soft); color: var(--sky-text); font-size: 12.5px; }

/* Código de planta ya registrado */
.rc .rc-lote-cod input.invalido:not([type=checkbox]) { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
.rc-cod-aviso { font-size: 12px; font-weight: 700; color: var(--bad); line-height: 1.35; }
.rc-acc .btn-gold:disabled { opacity: .5; cursor: not-allowed; }

/* ——— Por cerrar: lista + mesa de negociación (mc-) ——— */
.mc { --mc-prv: #6D4FE0; --mc-prv-soft: color-mix(in srgb, #6D4FE0 9%, var(--surface)); display: flex; flex-direction: column; gap: 16px; }
:root[data-theme="dark"] .mc { --mc-prv: #B7A3F7; }
.mc-resumen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.mc-resumen > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--surface); }
.mc-resumen small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mc-resumen b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mc-resumen .mal b { color: var(--bad); }
.mc-filtros { display: flex; flex-direction: column; gap: 10px; }
.mc-provs { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-provs .prov-opcion { cursor: pointer; font-family: inherit; }
.mc-filtros-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mc-filtros-fila input[type=search] { flex: 1 1 200px; max-width: 280px; }
.mc-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-3); }
.mc-seg button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 6px 13px; border-radius: 999px; cursor: pointer; }
.mc-seg button.activo { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.mc-pegar-btn { margin-left: auto; }
.mc-pegar { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.6fr); gap: 10px 18px; padding: 16px 18px; border: 1px dashed var(--mc-prv); border-radius: 18px; background: var(--mc-prv-soft); }
.mc-pegar p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.mc-pegar textarea { width: 100%; font-size: 13px; }
.mc-pegar-acc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-pegar-msg { font-size: 13px; font-weight: 700; } .mc-pegar-msg.ok { color: var(--good); } .mc-pegar-msg.ojo { color: var(--warn); }

.mc-mesa { border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-up); overflow: hidden; }
.mc-mesa-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--gold-soft), var(--surface) 60%); }
.mc-mesa-cab h2 { margin: 0; font-size: 17px; }
.mc-mesa-cab > div:first-child span { font-size: 12.5px; color: var(--ink-2); }
.mc-mesa-tot { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.mc-mesa-tot > .mc-tot-g > div { display: flex; flex-direction: column; }
.mc-mesa-tot small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mc-mesa-tot b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mc-mesa-tot b.pos { color: var(--good); } .mc-mesa-tot b.neg { color: var(--loss); }
/* El resumen de la mesa en dos grupos y no en seis cifras seguidas: lo que HAY (TMH y compra) y lo
   que GANAS si cierras. Seis números del mismo tamaño en fila se leen como un murmullo, y con un
   solo código en la mesa repetían lo que la ficha ya dice debajo. */
.mc-tot-g { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 6px 20px; }
.mc-tot-g.gana { padding-left: 20px; border-left: 1px solid var(--line-strong); }
.mc-tot-mio b { font-size: 21px; color: var(--gold-text); }
.mc-tot-mio small { color: var(--gold-text); }
.mc-tot-mio em { font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-tot-mio em .pos { color: var(--good); } .mc-tot-mio em .neg { color: var(--loss); }
@media (max-width: 1100px) { .mc-tot-g.gana { padding-left: 0; border-left: 0; } }

/* «Frente a tu lab»: la diferencia manda, con su unidad a la vista, y lo demás baja a una sola
   línea de apoyo. Antes eran tres líneas del mismo tamaño diminuto. */
.mf-dif b i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.mc-mesa-scroll { overflow-x: auto; }
.mc-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.mc-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--line); }
.mc-tabla thead tr + tr th { top: 29px; }
.mc-tabla th.l { text-align: left; padding-left: 16px; }
.mc-tabla th.g-b { color: var(--sky-text); } .mc-tabla th.g-p { color: var(--mc-prv); } .mc-tabla th.g-c { color: var(--gold-text); } .mc-tabla th.g-r { color: var(--ink-2); }
.mc-tabla td { padding: 8px 5px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mc-tabla td.g-b { background: color-mix(in srgb, var(--sky) 5%, var(--surface)); }
.mc-tabla td.g-p { background: var(--mc-prv-soft); }
.mc-tabla td.g-c { background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.mc-tabla tr.conviene td:first-child { box-shadow: inset 4px 0 0 var(--good); }
.mc .mc-tabla input[data-k] { width: 60px; min-width: 0; padding: 7px 7px; font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; border-radius: 9px; }
.mc .mc-tabla input[data-k^="ley"] { width: 72px; }
.mc .mc-tabla td.g-p input[data-k="ley"] { border-color: var(--mc-prv); }
.mc-m-cod { padding-left: 16px !important; min-width: 170px; position: sticky; left: 0; z-index: 1; background: var(--surface); }
.mc-tabla th.l { position: sticky; left: 0; z-index: 3; }
.mc-m-cod b { display: block; font-family: var(--mono); font-size: 14.5px; }
.mc-m-cod small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.mc-m-cod .prov { font-size: 11px; padding: 1px 8px 1px 1px; } .mc-m-cod .prov i { width: 17px; height: 17px; font-size: 8px; }
.mc-m-cod .pill { font-size: 10.5px; padding: 1px 7px; }
.mc-m-err { color: var(--bad) !important; font-weight: 700; }
.mc-tabla [data-o="util"] { text-align: right; min-width: 104px; font-variant-numeric: tabular-nums; }
.mc-tabla [data-o="util"] b { font-size: 14px; } .mc-tabla [data-o] small { display: block; font-size: 11px; color: var(--muted); }
.mc-tabla [data-o="ver"] { min-width: 128px; } .mc-tabla [data-o="ver"] small.pos { color: var(--good); } .mc-tabla [data-o="ver"] small.neg { color: var(--loss); }
.mc-tabla tr.mc-cargando td { padding: 14px 16px; color: var(--muted); }
.mc-quitar { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.mc-quitar:hover { color: var(--bad); background: var(--bad-soft); }
.mc-mesa-pie { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
.mc-prop { display: flex; gap: 6px; align-items: center; }
.mc .mc-obs { flex: 1 1 220px; min-width: 180px; }
.mc-guardado { font-size: 12px; font-weight: 700; color: var(--muted); } .mc-guardado.ok { color: var(--good); } .mc-guardado.mal { color: var(--bad); } .mc-guardado.trabajando { color: var(--warn); }
.mc-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.mc-lista-panel { padding: 14px; }
.mc-lista-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 2px 6px 12px; }
.mc-marcar { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.mc-lista { display: flex; flex-direction: column; gap: 6px; }
.mc-fila { display: grid; grid-template-columns: 28px minmax(130px, 1.1fr) minmax(120px, .9fr) 130px 80px 110px minmax(150px, 1.2fr) 80px; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.mc-fila:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.mc-fila.tarde { border-left: 4px solid var(--bad); }
.mc-fila.en-mesa { background: var(--gold-soft); border-color: var(--gold); }
.mc-fila > * { min-width: 0; }
.mc-chk { display: grid; place-items: center; cursor: pointer; }
.mc-cod b { display: block; font-family: var(--mono); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-cod small, .mc-est small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-est small.mc-borr { color: var(--gold-text); font-weight: 700; }
.mc-rec { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .mc-rec b { font-size: 13px; }
.mc-rec .pill { font-size: 10.5px; padding: 1px 8px; }
.mc-n { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.mc-n small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mc-n b { font-size: 14.5px; } .mc-n em { font-style: normal; font-size: 11px; color: var(--muted); }
.mc-det { justify-self: end; font-size: 12.5px; font-weight: 800; color: var(--brand-text); text-decoration: none; white-space: nowrap; }
.mc-det:hover { text-decoration: underline; }
.mc-mas { align-self: center; margin: 12px auto 2px; display: flex; }
@media (max-width: 1100px) {
  .mc-resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-fila { grid-template-columns: 28px minmax(0, 1fr) auto 80px; }
  .mc-fila .mc-prov, .mc-fila .mc-n:nth-of-type(6), .mc-fila .mc-est { display: none; }
  .mc-pegar { grid-template-columns: 1fr; }
  .mc-pegar-btn { margin-left: 0; }
}
@media (max-width: 640px) {
  .mc-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-fila { grid-template-columns: 28px minmax(0, 1fr) 80px; }
  .mc-fila .mc-rec, .mc-fila .mc-det { display: none; }
  .mc-mesa-tot { margin-left: 0; }
}
/* Por cerrar v2: filtros ordenados, vistas Fichas / Tabla y ficha de decisión (mf-) */
.mc .mc-filtros-fila { flex-wrap: wrap; }
.mc .mc-filtros-fila input[type=search] { flex: 0 1 260px !important; width: 260px !important; max-width: 100%; }
.mc .mc-filtros-fila select[data-mc-dias] { flex: 0 0 auto !important; width: auto !important; min-width: 170px; }
.mc-mesa-cab .mc-vistas { margin-left: 8px; }
.mc-mesa-cab .mc-mesa-tot { margin-left: auto; }
.mc-contenido.mc-fichas { display: flex; flex-direction: column; gap: 14px; padding: 14px; background: var(--surface-2); }
.mc-tabla th.g-ref { color: var(--ink-2); }
.mc-tabla td.g-ref { text-align: right; padding: 8px 10px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.mc-tabla td.g-ref b { display: block; font-size: 14px; } .mc-tabla td.g-ref b.lab { color: var(--sky-text); }
.mc-tabla td.g-ref small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.mc-tabla .mc-dif { display: block; font-size: 10.5px; font-weight: 700; text-align: right; margin-top: 2px; white-space: nowrap; }
.mc-tabla { min-width: 1060px; }
.mc-m-cod .link { font-size: 11.5px; padding: 0; }

.mf { --b: var(--sky); --p: var(--mc-prv); --c: var(--gold); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.mf.conviene { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.mf.cargando { padding: 22px; color: var(--muted); }
.mf-cab { display: flex; align-items: center; gap: 16px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.mf-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mf-id > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mf-id > div > b { font-family: var(--mono); font-size: 19px; letter-spacing: -.01em; }
.mf-id small { font-size: 12px; color: var(--muted); }
.mf-top { display: flex; align-items: center; gap: 14px; }
.mf-top > div { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.mf-top small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mf-top b { font-size: 22px; font-weight: 800; line-height: 1.1; } .mf-top em { font-style: normal; font-size: 12px; color: var(--ink-2); }
/* TU PROPUESTA MANDA. La cifra grande es la de la ley que TÚ propones; la del proveedor queda al
   lado, más chica, como lo que es: la referencia contra la que negocias. Antes era al revés, y
   lo que uno gana con su propia propuesta estaba en letra chica en la barra de arriba. */
.mf-top-mio b { font-size: 26px; }
.mf-top-mio small { color: var(--gold-text); }
.mf-top-suyo { padding-left: 14px; border-left: 1px solid var(--line); }
.mf-top-suyo b { font-size: 16px; color: var(--ink-2); font-weight: 700; }
.mf-top-suyo em { font-size: 11px; }
.mf-cuerpo { display: grid; }
.mf-cuerpo > section { padding: 14px 18px 16px; min-width: 0; }
.mf-cuerpo > section + section { border-left: 1px solid var(--line); }
.mf h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.mf h3 span { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.mf-ref { background: color-mix(in srgb, var(--sky) 3%, var(--surface)); }
.mf-reft { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; }
.mf-reft th, .mf-reft td { padding: 5px 4px; border-bottom: 1px dashed var(--line); text-align: right; }
.mf-reft tbody th { text-align: left; font-weight: 600; color: var(--ink-2); white-space: nowrap; } .mf-reft th small { color: var(--muted); font-weight: 600; }
.mf-reft thead th { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.mf-reft .lab { color: var(--sky-text); } .mf-reft thead .cmp { color: var(--ink-2); }
.mf-reft td { font-weight: 700; } .mf-reft td.big { font-size: 18px; font-weight: 800; }
.mf-reft td.nd { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.mf-ref-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 12px; }
.mf-ref-pie > div { display: flex; flex-direction: column; }
.mf-ref-pie small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mf-ref-pie b { font-size: 14px; font-variant-numeric: tabular-nums; } .mf-ref-pie em { display: block; font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); }
.mf-grid { display: grid; grid-template-columns: 96px 88px 68px 68px minmax(150px, 1fr); align-items: center; gap: 7px 8px; }
.mf-grid > small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; }
.mf-grid > small:last-child { text-align: left; }
.mf .mf-grid input[data-k], .mf .mf-neg input.mf-tmh { width: 100%; min-width: 0; padding: 8px 8px; font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; border-radius: 10px; }
.mf .mf-neg input.mf-tmh { width: 86px; padding: 5px 8px; font-size: 13px; }
.mf .mf-grid input.fuerte { border: 2px solid var(--p); font-size: 16px; }
.mf-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.mf-lbl::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--muted); }
.mf-lbl.b::before { background: var(--b); } .mf-lbl.p::before { background: var(--p); } .mf-lbl.c::before { background: var(--c); } .mf-lbl.a::before { background: var(--line-strong); }
.mf-dif { display: flex; flex-direction: column; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.mf-dif b { font-size: 13.5px; } .mf-dif em { font-style: normal; color: var(--ink-2); font-size: 11.5px; } .mf-dif small { color: var(--muted); font-size: 11px; }
.mf-dif b.pos, .mf-dif span.pos { color: var(--good); } .mf-dif b.neg { color: var(--loss); }
.mf-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.mf-atajos small { font-size: 11px; font-weight: 700; color: var(--muted); }
.mf-atajo { border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--gold-soft); color: var(--gold-text); font: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.mf-atajo b { font-variant-numeric: tabular-nums; } .mf-atajo:hover { background: var(--gold); color: #2A1C00; }
.mf-escala { margin-top: 16px; }
.mf-esc-barra { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); }
.mf-esc-barra > i { position: absolute; top: 0; bottom: 0; }
.mf-esc-barra .z-mal { left: 0; border-radius: 999px 0 0 999px; background: color-mix(in srgb, var(--bad) 30%, var(--surface)); }
.mf-esc-barra .z-ojo { background: color-mix(in srgb, var(--warn) 30%, var(--surface)); }
.mf-esc-barra .z-bien { border-radius: 0 999px 999px 0; background: color-mix(in srgb, var(--good) 30%, var(--surface)); }
.mf-esc-lim { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink-2); transform: translateX(-1px); }
.mf-esc-lim em { position: absolute; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.mf-esc-lim.meta { background: var(--good); } .mf-esc-lim.meta em { color: var(--good); }
.mf-esc-marca { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--m, var(--ink)); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--m, var(--ink)); transform: translate(-50%, -50%); z-index: 1; }
.mf-esc-marca b { position: absolute; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 800; color: var(--m, var(--ink)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mf-esc-marca.abajo b { bottom: auto; top: 16px; }
.mf-esc-marca.lab { --m: var(--sky-text); } .mf-esc-marca.cmp { --m: var(--ink-2); } .mf-esc-marca.prv { --m: var(--mc-prv); } .mf-esc-marca.prp { --m: var(--gold-text); }
.mf-esct { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mf-esct th { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: right; padding: 4px 5px; border-bottom: 1px solid var(--line); }
.mf-esct th:first-child, .mf-esct td:first-child { text-align: left; }
.mf-esct td { padding: 6px 5px; text-align: right; border-bottom: 1px dashed var(--line); white-space: nowrap; }
.mf-esct td small { display: block; font-size: 10.5px; color: var(--muted); }
.mf-esct td.pos b { color: var(--good); } .mf-esct td.neg b { color: var(--loss); }
.mf-esct tr.dim td { color: var(--muted); }
.mf-pct { display: inline-block; width: 34px; height: 5px; margin-right: 6px; vertical-align: middle; border-radius: 9px; background: var(--surface-3); overflow: hidden; }
.mf-pct i { display: block; height: 100%; } .mf-pct i.bien { background: var(--good); } .mf-pct i.ojo { background: var(--warn); } .mf-pct i.mal { background: var(--bad); }
.mf-lineas { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.mf-contrato { margin: 8px 0 0; font-size: 11px; color: var(--muted); }
.mf-lotes { border-top: 1px solid var(--line); }
.mf-lotes summary { cursor: pointer; padding: 10px 20px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.mf-lotes-scroll { overflow-x: auto; padding: 0 16px 14px; }
.mf-lotes table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mf-lotes th { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--line); }
.mf-lotes th.lab { color: var(--sky-text); } .mf-lotes td { padding: 6px; text-align: right; border-bottom: 1px dashed var(--line); }
.mf-lotes td:first-child, .mf-lotes th:first-child { text-align: left; }
.mf-lotes td small { display: block; font-size: 10.5px; color: var(--muted); }
.mf-lotes td.lab { color: var(--sky-text); font-weight: 700; } .mf-lotes td.pos { color: var(--good); } .mf-lotes td.neg { color: var(--loss); }
@media (max-width: 1280px) {
  .mf-cuerpo { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr); }
  .mf-dec { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--line); }
}
@media (max-width: 800px) {
  .mf-cuerpo { grid-template-columns: 1fr; }
  .mf-cuerpo > section + section { border-left: 0; border-top: 1px solid var(--line); }
  .mf-cab { flex-wrap: wrap; } .mf-top { order: 3; width: 100%; justify-content: space-between; }
  .mf-grid { grid-template-columns: 80px 1fr 1fr 1fr; } .mf-grid > small:last-child, .mf-dif { grid-column: 1 / -1; }
}
/* Ficha: decisión a todo el ancho y escala con carriles */
.mf-cuerpo { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.45fr); }
.mf-cuerpo > .mf-dec { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--line); }
.mf-dec-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 8px 26px; align-items: start; }
.mf-dec-grid > div:first-child { overflow-x: auto; }
.mf-lineas { margin-top: 0; }
.mf-esc-barra { margin: 62px 8px 50px; }
.mf-esc-marca b { bottom: 14px; }
.mf-esc-marca.c1 b { bottom: 30px; } .mf-esc-marca.c2 b { bottom: 46px; }
.mf-esc-marca.c1 b::after, .mf-esc-marca.c2 b::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 16px; background: currentColor; opacity: .35; }
.mf-esc-marca.c2 b::after { height: 32px; }
.mf-esc-lim em { top: 18px; bottom: auto; }
.mf-esc-lim.meta em { top: 18px; bottom: auto; }
.mf-esc-lim.c1 em { top: 32px; } .mf-esc-lim.c2 em { top: 46px; }
.mf-esc-ley { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -14px 8px 0; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.mf-esc-ley span::before { content: ""; display: inline-block; width: 10px; height: 6px; margin-right: 5px; border-radius: 3px; vertical-align: middle; }
.mf-esc-ley .z-mal::before { background: color-mix(in srgb, var(--bad) 45%, var(--surface)); }
.mf-esc-ley .z-ojo::before { background: color-mix(in srgb, var(--warn) 45%, var(--surface)); }
.mf-esc-ley .z-bien::before { background: color-mix(in srgb, var(--good) 45%, var(--surface)); }
@media (max-width: 1100px) { .mf-dec-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .mf-cuerpo { grid-template-columns: 1fr; } .mf-cuerpo > section + section { border-left: 0; } }
/* ——— Componentes comunes para las áreas unificadas (17/09/2026) ——— */
/* Pestañas de un área: <nav class="tabs"><a class="tab activa">Nombre <small>detalle</small></a>… */
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; border-radius: 16px; background: var(--surface-3); scrollbar-width: thin; }
.tab { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; padding: 9px 16px; border-radius: 12px; color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; transition: background .15s, color .15s; }
.tab small { font-size: 11px; font-weight: 600; color: var(--muted); }
.tab b.tab-n { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--line); color: var(--ink-2); font-size: 11px; text-align: center; }
.tab:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--ink); }
.tab.activa { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.tab.activa b.tab-n { background: var(--gold); color: #2A1C00; }
/* Menú de acciones que se abre desde un botón: <details class="menu-acciones"><summary class="btn">…</summary><div class="menu-caja">…</div></details> */
.menu-acciones { position: relative; }
.menu-acciones > summary { list-style: none; }
.menu-acciones > summary::-webkit-details-marker { display: none; }
.menu-caja { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: flex; flex-direction: column; gap: 8px; width: min(340px, 90vw); padding: 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-up); }
.menu-caja form { display: flex; flex-direction: column; gap: 8px; }
.menu-caja .hint { margin: 0; }
@media (max-width: 640px) { .menu-caja { right: auto; left: 0; } }
/* Áreas: el menú lleva una entrada por área y cada página muestra las pestañas de su área */
/* Sin margen inferior: «main» ya separa sus bloques con 14 px y aquí se contaba dos veces. */
.area-nav { display: flex; align-items: center; gap: 14px; margin: 0; min-width: 0; }
.area-nom { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.area-nom .ico { width: 15px; height: 15px; color: var(--gold); }
.area-nav .tabs { flex: 0 1 auto; min-width: 0; }
.area-nav .tab { padding: 8px 14px; font-size: 13.5px; }
.area-nav .tab > span { display: inline-flex; align-items: center; }
/* El área y el grupo activo son lo mismo a dos niveles. Van en un solo renglón, separados por una
   línea: dos franjas apiladas empujaban la tabla fuera de la primera pantalla (890 px en un 1440x900). */
.area-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.area-barra .area-nav { flex: 0 1 auto; }
.area-barra .sub-tabs { margin: 0; }
.area-barra.con-sub .sub-tabs { position: relative; padding-left: 15px; }
.area-barra.con-sub .sub-tabs::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 20px; background: var(--line); transform: translateY(-50%); }
/* Las del grupo pesan un poco menos que las del área: así se lee el nivel sin una franja aparte. */
.area-barra.con-sub .sub-tabs .tab { padding: 5px 11px; font-size: 12.5px; }
/* Desde 821 px el lateral está fijo y se abre SOLO en el área de la página (details open en cada
   carga), con sus grupos y sus páginas a la vista. Esta barra repetía esos mismos enlaces palabra
   por palabra, 48 px más el hueco, empujando el dato fuera de la primera pantalla. Se queda donde
   sí hace falta: por debajo de 821 px, que es donde el lateral pasa a ser un cajón. */
@media (min-width: 821px) { .area-barra { display: none; } }


.nav-sub { display: none; }
@media (max-width: 820px) {
  .area-nav { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 12px; }
  .area-nav .tabs { width: auto; }
  .nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 30px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .12); }
  .nav-sub a { padding: 7px 10px; font-size: 13px; }
  .nav-sub a[aria-current] { color: var(--gold); background: none; box-shadow: none; }
}
/* Avisos personales en vivo (lib/notificaciones.php + assets/notificaciones.js) */
.notif-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notif-todas, .notif-escritorio { background: none; border: 0; padding: 2px 0; color: var(--brand-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.notif-todas:hover, .notif-escritorio:hover { text-decoration: underline; }
.notif-escritorio { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.notif-escritorio .ico { width: 14px; height: 14px; }
.notif { position: relative; align-items: flex-start; }
.notif:not(.leida) { background: color-mix(in srgb, var(--brand) 7%, var(--surface-2)); }
.notif:not(.leida)::after { content: ""; position: absolute; top: 12px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.notif.leida { opacity: .72; }
.notif > div { padding-right: 14px; }
.notif.good .aviso-ico { background: var(--good-soft, #DDF5E8); color: var(--good, #139A4E); }
.notif-veces { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: 11px; color: var(--ink-2); }
.notif-hace { margin-top: 2px; font-variant-numeric: tabular-nums; }
.notif.nueva { animation: notif-llega .5s var(--ease-out) both; }
@keyframes notif-llega { from { transform: translateY(-6px); background: color-mix(in srgb, var(--gold) 22%, var(--surface-2)); } }
.notif-pila { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.notif-flotante { display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-up); font-size: 13.5px; line-height: 1.4; animation: notif-entra .4s var(--ease-out) both; transition: opacity .3s, transform .3s; }
.notif-flotante > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-flotante b { font-weight: 800; }
.notif-flotante span { color: var(--ink-2); font-size: 12.5px; }
.notif-flotante a { align-self: flex-start; margin-top: 4px; font-weight: 800; color: var(--brand-text); text-decoration: none; }
.notif-flotante button { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.notif-flotante-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--sky-soft); color: var(--sky-text); }
.notif-flotante-ico .ico { width: 17px; height: 17px; }
.notif-flotante.good .notif-flotante-ico { background: var(--good-soft, #DDF5E8); color: var(--good, #139A4E); }
.notif-flotante.warn .notif-flotante-ico { background: var(--warn-soft); color: var(--warn); }
.notif-flotante.bad .notif-flotante-ico { background: var(--bad-soft); color: var(--bad); }
.notif-flotante.saliendo { opacity: 0; transform: translateX(24px); }
@keyframes notif-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 820px) { .notif-pila { right: 16px; left: 16px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .notif.nueva, .notif-flotante { animation: none; } }
/* Cambios sensibles con motivo y visto bueno de supervisor (lib/seguridad.php) */
.aut-accion { margin-top: 10px; }
.aut-accion > summary { list-style: none; display: inline-flex; }
.aut-accion > summary::-webkit-details-marker { display: none; }
.aut-form { margin-top: 10px; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line)); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.aut-caja { display: flex; flex-direction: column; gap: 8px; }
.aut-motivo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.aut-sup { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aut-sup > span { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 560px) { .aut-sup { grid-template-columns: 1fr; } }
/* Mi día (hoy.php): lo que le toca a cada persona */
.md { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.md-tareas { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.md-tarea { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; overflow: hidden; }
.md-tarea::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sky); }
.md-tarea.warn::before { background: var(--warn); }
.md-tarea.bad::before { background: var(--bad); }
.md-tarea:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.md-tarea:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
.md-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--sky-soft); color: var(--sky-text); }
.md-tarea.warn .md-ico { background: var(--warn-soft); color: var(--warn); }
.md-tarea.bad .md-ico { background: var(--bad-soft); color: var(--bad); }
.md-ico .ico { width: 18px; height: 18px; }
.md-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.md-txt small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.md-txt b { font-size: 14px; line-height: 1.3; }
.md-txt > span { font-size: 12px; color: var(--ink-2); }
.md-n { flex: none; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.md-tarea.bad .md-n { color: var(--bad); }
.md-vacio { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; border-radius: 18px; background: var(--surface); border: 1px dashed var(--line-strong); text-align: center; color: var(--ink-2); }
.md-vacio .ico { width: 34px; height: 34px; color: var(--good); }
.md-vacio b { font-size: 18px; color: var(--ink); }
.md-nov .avisos { margin-top: 4px; }
@media (max-width: 980px) { .md { grid-template-columns: 1fr; } }
/* Legajo de la factura en Contabilidad (VAL Beijing y guías de sus lotes) */
.lg-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.lg-bloque { display: flex; flex-direction: column; gap: 8px; }
.lg-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.lg-item > div:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lg-item small { color: var(--muted); font-size: 11.5px; }
.lg-acc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* El legajo abierto: la VAL y cada guía se ven dentro de la revisión, sin ir a otro módulo */
.lg-docs { display: flex; flex-direction: column; gap: 14px; }
.lg-doc { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.lg-doc > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lg-doc > header > div:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lg-doc > header small { color: var(--muted); font-size: 11.5px; }
.lg-doc .empty { margin: 0; }
.lg-marco { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.lg-marco.lg-val { height: 560px; }
.lg-foto { display: grid; place-items: center; overflow: auto; padding: 8px; }
.lg-foto img { max-width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 720px) { .lg-marco, .lg-marco.lg-val { height: 380px; } }
/* Legajo de la operación: el checklist de cada etapa */
.lgo-etapa { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; }
.lgo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.lgo-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.lgo-item > div:first-of-type { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lgo-item small { font-size: 11.5px; color: var(--muted); }
.lgo-item i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; }
.lgo-item.si i { background: var(--good-soft, #E4F5EC); color: var(--good); }
.lgo-item.no i { background: var(--bad-soft, #FDEBEA); color: var(--bad, var(--loss)); }
.lgo-item.op i { background: var(--surface-3); color: var(--muted); }
.lgo-item.no { background: color-mix(in srgb, var(--loss) 5%, var(--surface-2)); }
.lgo-acc { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lgo-subir { display: inline-flex; }
.lgo-subir label { cursor: pointer; margin: 0; }

/* ——— Pasos numerados arriba de una pantalla que se hace en orden ——— */
.pasos-arriba { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.pasos-arriba li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pasos-arriba li > span { display: grid; place-items: center; flex: none; width: 27px; height: 27px; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 13px; font-weight: 800; }
.pasos-arriba li div { display: flex; flex-direction: column; min-width: 0; }
.pasos-arriba li b { font-size: 13.5px; }
.pasos-arriba li small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasos-arriba li.hecho { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.pasos-arriba li.hecho > span { background: var(--good); color: #fff; }
.pasos-arriba li.actual { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent); }
.pasos-arriba li.actual > span { background: var(--gold); color: #2A1C00; }

/* ——— Armar la factura de venta: cuándo se pone el número y qué códigos entran ——— */
.fv-cuando { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.fv-opcion { position: relative; display: flex; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.fv-opcion input { margin-top: 3px; flex: none; }
.fv-opcion span { display: flex; flex-direction: column; gap: 2px; }
.fv-opcion b { font-size: 14px; }
.fv-opcion small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.fv-opcion.activo { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 22%, transparent); }
.fv-numerar { border: 1px solid var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.fv-numerar .panel-head h2 { display: flex; align-items: center; gap: 8px; color: var(--gold-text); }
.fv-agregar { margin-top: 14px; }
.fv-agregar > summary { cursor: pointer; font-weight: 700; color: var(--brand-text); padding: 8px 0; }
.fv-mas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; padding: 4px 2px; }
.fv-mas-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.fv-mas-item:has(input:checked) { background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.fv-mas-item span { display: flex; flex-direction: column; min-width: 0; }
.fv-mas-item small { font-size: 11.5px; color: var(--muted); }
.data tr.marcado td { background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }

/* ——— La valorización que manda la planta: campos agrupados y el resultado al costado ——— */
.vl-armar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.vl-armar .barra-puntos { grid-column: 1 / -1; }
.vl-campos { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Acotado a .vl-campos: «.vl-grupo» a secas también lo lleva la tarjeta de «Lotes con pase» de
   la mesa de valorización, que no tiene nada que ver con esto, y al ir este bloque después en
   el archivo le pisaba el relleno y el fondo. Dos componentes distintos no comparten nombre. */
.vl-campos > .vl-grupo { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.vl-campos > .vl-grupo legend { display: flex; align-items: baseline; gap: 8px; padding: 0 6px; font-size: 13px; font-weight: 800; color: var(--brand-text); }
.vl-campos > .vl-grupo legend small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.vl-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vl-fila label { display: flex; flex-direction: column; gap: 3px; }
.vl-fila label > span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.vl-fila label > small { font-size: 10.5px; color: var(--muted); }
.vl-fila input { font-variant-numeric: tabular-nums; }
.vl-extra { padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.vl-extra > summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.vl-extra > summary + * { margin-top: 12px; }
.vl-resultado { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.vl-resultado header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vl-resultado h3 { margin: 0; font-size: 15px; }
.vl-resultado header span { font-size: 11.5px; color: var(--muted); }
.vl-grande { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #152A40, #1F3D5C); color: #fff; }
.vl-grande small { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.vl-grande b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vl-grande span { font-size: 12px; opacity: .85; font-variant-numeric: tabular-nums; }
.vl-cifras { display: flex; flex-direction: column; gap: 0; margin: 0; }
.vl-cifras div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px; font-size: 13px; }
.vl-cifras div + div { border-top: 1px solid var(--line); }
.vl-cifras dt { color: var(--ink-2); } .vl-cifras dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.vl-cifras .fuerte { font-size: 14.5px; } .vl-cifras .fuerte dd { font-weight: 800; color: var(--good); }
.vl-comparar { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.vl-comparar small { font-size: 11px; font-weight: 700; color: var(--muted); }
.vl-comparar b { font-size: 15px; font-variant-numeric: tabular-nums; }
.vl-comparar b.pos { color: var(--good); } .vl-comparar b.neg { color: var(--loss); }
.vl-comparar.mal { background: color-mix(in srgb, var(--loss) 10%, var(--surface)); }
.vl-aviso { margin: 0; font-size: 12px; color: var(--warn); }
.vl-aviso:empty { display: none; }
@media (max-width: 1100px) { .vl-armar { grid-template-columns: minmax(0, 1fr); } .vl-resultado { position: static; } }

/* ——— Cuadre de terceros: lo que está de más contra lo que está de menos ——— */
.tc-cuadre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tc-lado { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.tc-lado h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font-size: 13.5px; }
.tc-lado h3 small { font-weight: 500; color: var(--muted); }
.tc-mas h3 { color: var(--good); } .tc-menos h3 { color: var(--loss); }
.tc-lista { display: flex; flex-direction: column; gap: 4px; max-height: 460px; overflow-y: auto; }
.tc-item { grid-template-columns: 20px minmax(0, 1fr) auto; cursor: pointer; }
.tc-item span { display: flex; flex-direction: column; min-width: 0; }
.tc-item small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-item em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.tc-item em.pos { color: var(--good); } .tc-item em.neg { color: var(--loss); }.tc-cuadre-ficha { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); margin-bottom: 10px; }
.tc-cuadre-ficha > header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tc-cuadre-ficha > header b { font-size: 15px; }
.tc-cuadre-ficha > header span { flex: 1; font-size: 12.5px; color: var(--muted); }
.tc-cuadre-ficha form { display: flex; gap: 6px; align-items: center; }
.tc-motivo { max-width: 180px; }
.tc-cuadre-lotes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px; }
.tc-cuadre-lotes li { display: flex; align-items: baseline; gap: 6px; padding: 5px 8px; border-radius: 8px; background: var(--surface); font-size: 12.5px; }
.tc-cuadre-lotes li small { flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-cuadre-lotes em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.tc-cuadre-lotes em.pos { color: var(--good); } .tc-cuadre-lotes em.neg { color: var(--loss); }
.tc-tabs a b { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: 11px; }
@media (max-width: 900px) { .tc-cuadre { grid-template-columns: minmax(0, 1fr); } }
/* Armar el cuadre: las dos columnas de lotes y, al costado, cómo queda la ley ponderada */
/* 340 y no 300: la tabla del cuadre lleva tres columnas de números y en 300 el monto se partía. */
.tc-armar { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
/* Cada lote del cuadre: a la izquierda se marca, a la derecha se escribe la ley que va a llevar su VAL Beijing */
.tc-item-ley { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; cursor: default; }
.tc-marca { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.tc-ley-campo { display: flex; align-items: center; gap: 8px; }
.tc-ley-campo label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.tc-ley-campo input { width: 104px; padding: 5px 7px; font-variant-numeric: tabular-nums; text-align: right; }
.tc-ley-campo em { font-style: normal; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.tc-ley-campo em.pos { color: var(--good); } .tc-ley-campo em.neg { color: var(--loss); }
/* El blending al que YA pertenece el lote, pegado a su código en la mesa de cuadre: el cuadre
   se guarda sobre un blending, y sin verlo hay que ir a Cancha lote por lote. Verde = es el que
   estás cuadrando; ámbar = es otro, y marcarlo lo traería de aquel a este. */
.tc-bl { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-text); font-family: var(--mono, monospace);
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; }
.tc-bl.on { background: var(--good-soft); color: var(--good); }
.tc-hint-bl { color: var(--gold-text); font-weight: 600; }
.tc-prov { margin: 8px 0 2px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; justify-content: space-between; }.tc-leyes { font-variant-numeric: tabular-nums; }
.tc-leyes b { color: var(--ink); }
.tc-resultado { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.tc-resultado header { display: flex; justify-content: space-between; align-items: baseline; }
.tc-resultado h3 { margin: 0; font-size: 15px; }
.tc-resultado header span { font-size: 12px; color: var(--muted); }
.tc-ley-grande { display: flex; flex-direction: column; gap: 2px; padding: 13px; border-radius: 14px; background: linear-gradient(135deg, #152A40, #1F3D5C); color: #fff; }
.tc-ley-grande small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.tc-ley-grande b { font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tc-ley-grande span { font-size: 11.5px; opacity: .8; }
.tc-plata { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tc-plata div { display: flex; flex-direction: column; padding: 8px 9px; border-radius: 10px; background: var(--surface-2); }
.tc-plata small { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.tc-plata b { font-size: 13px; font-variant-numeric: tabular-nums; }
.tc-plata b.pos { color: var(--good); } .tc-plata b.neg { color: var(--loss); }
@media (max-width: 1100px) { .tc-armar { grid-template-columns: minmax(0, 1fr); } .tc-resultado { position: static; } }
/* Indicadores (kpis.php) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.kpi-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); position: relative; }
.kpi-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kpi-nombre { font-size: 12.5px; font-weight: 700; color: var(--ink-2); line-height: 1.25; }
.kpi-luz { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 2px; background: var(--line-strong); }
.kpi-card.bien .kpi-luz { background: var(--good); }
.kpi-card.atencion .kpi-luz { background: var(--warn); }
.kpi-card.mal .kpi-luz { background: var(--bad); }
.kpi-card.mal { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.kpi-num { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-linea { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.kpi-meta { color: var(--muted); font-weight: 700; }
.kpi-var { font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.kpi-spark i { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--brand) 35%, transparent); }
.kpi-card.bien .kpi-spark i { background: color-mix(in srgb, var(--good) 45%, transparent); }
.kpi-card.mal .kpi-spark i { background: color-mix(in srgb, var(--bad) 40%, transparent); }
.kpi-spark i:last-child { background: var(--brand); }
.kpi-card.bien .kpi-spark i:last-child { background: var(--good); }
.kpi-card.mal .kpi-spark i:last-child { background: var(--bad); }
.kpi-que { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.kpi-meta-edit { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
.kpi-meta-edit input { min-height: 32px !important; padding: 4px 8px !important; font-size: 13px !important; }
.kpi-meta-edit small { font-weight: 500; font-size: 10.5px; }
@media print { .kpi-card { break-inside: avoid; } }
/* KYC: ficha de la contraparte */
.kyc-listas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.kyc-lista { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.kyc-lista > span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.kyc-lista select, .kyc-lista input { min-height: 34px !important; font-size: 13px !important; }
.kyc-hoja { max-width: 200mm; margin: 0 auto; background: var(--surface); color: var(--ink); padding: 26px 30px; border-radius: 12px; box-shadow: var(--shadow); }
.kyc-hoja header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--brand); padding-bottom: 12px; margin-bottom: 16px; }
.kyc-hoja h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
.kyc-hoja header p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.kyc-estado { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.kyc-estado small { color: var(--muted); font-size: 11.5px; }
.kyc-hoja h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-text); margin: 18px 0 8px; }
.kyc-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; margin: 0; }
.kyc-dl div { border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.kyc-dl dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.kyc-dl dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; }
.kyc-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kyc-t th, .kyc-t td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; }
.kyc-t th { background: var(--surface-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.kyc-firmas { display: flex; gap: 40px; margin-top: 40px; }
.kyc-firmas > div { flex: 1; text-align: center; }
.kyc-firmas span { display: block; border-top: 1px solid var(--ink); margin-bottom: 5px; }
.kyc-firmas b { font-size: 11.5px; letter-spacing: .05em; }
.kyc-firmas small { display: block; color: var(--muted); font-size: 11px; }
@media print { .kyc-hoja { box-shadow: none; padding: 0; } }
/* ——— Señales de alerta de cumplimiento (operaciones inusuales) y vencimientos ——— */
.ops-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.op-alerta { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.op-alerta.n-warn { border-left-color: var(--warn); }
.op-alerta.n-bad { border-left-color: var(--bad); }
.op-alerta.e-descartada, .op-alerta.e-reportada { opacity: .78; }
.op-alerta header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.op-alerta header b { font-size: 14px; flex: 1 1 180px; }
.op-tipo { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-3); border-radius: 6px; padding: 2px 6px; }
.op-estado { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.op-estado.warn { background: var(--warn-soft); color: var(--warn); }
.op-estado.info { background: var(--brand-soft); color: var(--brand); }
.op-estado.bad { background: var(--bad-soft); color: var(--bad); }
.op-detalle { margin: 0; font-size: 13px; line-height: 1.45; }
.op-pie { color: var(--muted); font-size: 12px; line-height: 1.6; }
.op-analisis { margin: 0; font-size: 12.5px; background: var(--surface-2); border-radius: 8px; padding: 6px 9px; }
.op-form summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--brand); }
.op-form form { display: flex; flex-direction: column; gap: 7px; margin-top: 7px; }
.op-form textarea, .op-form input { width: 100%; }
.param-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-items: start; }
.param-grid .barra-puntos { grid-column: 1 / -1; }
table.data tr.vencido td { background: var(--bad-soft); }
table.data tr.vence td { background: var(--warn-soft); }
.asis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 10px; margin-bottom: 10px; }
.asis-grid label.check { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 3px 0; }
.asis-grid label.check small { font-weight: 500; }

/* ——— Legajo del proveedor ——— */
.leg-carpeta { display: flex; align-items: center; gap: 7px; font-size: 14px; margin: 16px 0 6px; }
.leg-carpeta:first-of-type { margin-top: 4px; }
.leg-carpeta small { font-weight: 600; }
.leg-acc { display: inline-flex; gap: 4px; align-items: center; }
.leg-acc form { display: inline; }

/* ——— Tablas largas: «ver todas» y sub-pestañas de una sección ——— */
.tabla-mas td { background: var(--surface-2); color: var(--ink-2); font-size: 13px; text-align: center; padding: 10px 12px; }
.tabla-mas a { font-weight: 700; }
/* Pegada a la tira de arriba —son dos niveles de LA MISMA navegación, no dos bloques— y sin
   fondo ni caja: con relleno gris y esquinas pesaba lo mismo que una tarjeta de datos. */
.sub-tabs { margin: -8px 0 0; padding: 3px 0; border-radius: 0; background: none; width: fit-content; max-width: 100%; }
.sub-tabs .tab { padding: 6px 13px; font-size: 13px; border-radius: 9px; }

/* ——— Puesta en marcha ——— */
.pm-barra { flex: 1 1 200px; max-width: 320px; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pm-barra i { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.pm-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pm-paso { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pm-paso.good { background: color-mix(in srgb, var(--good-soft) 55%, var(--surface)); }
.pm-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--surface-3); color: var(--ink-2); }
.pm-paso.good .pm-num { background: var(--good); color: #fff; }
.pm-paso.bad .pm-num { background: var(--bad-soft); color: var(--bad); }
.pm-paso.warn .pm-num { background: var(--warn-soft); color: var(--warn); }
.pm-tit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14.5px; }
.pm-cuerpo p { margin: 3px 0 2px; font-size: 13px; color: var(--ink-2); }
.pm-cuerpo small { font-size: 12px; }
@media (max-width: 640px) { .pm-paso { grid-template-columns: 30px 1fr; } .pm-acc { grid-column: 2; } }

.sub-tabs .tab { flex-direction: row; align-items: center; gap: 6px; }
.sub-tabs .tab b.tab-n { margin-left: 0; }

/* ——— Menú: áreas numeradas y desplegables (se abre el área y muestra sus grupos y páginas) ——— */
.nav-area > summary { list-style: none; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px;
  color: rgba(230, 242, 239, .78); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.nav-area > summary::-webkit-details-marker { display: none; }
.nav-area > summary:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-area > summary:focus-visible, .nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.nav-area[open] > summary { color: #fff; }
.nav-area > summary[aria-current="page"] { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nav-area > summary > span:not(.nav-num):not(.badge) { flex: 1; }
.nav-num { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: rgba(255, 255, 255, .08); color: var(--side-muted); font-variant-numeric: tabular-nums; }
.nav-area[open] > summary .nav-num, .nav-area > summary[aria-current] .nav-num, .nav-area-link[aria-current] .nav-num { background: var(--gold); color: #1b1405; }
.nav-area-link > span:not(.nav-num):not(.badge) { flex: 1; }
.nav-flecha { flex: none; width: 7px; height: 7px; margin-left: 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); opacity: .55; transition: transform .18s; }
.nav-area[open] .nav-flecha { transform: rotate(45deg); opacity: .8; }
.nav-desp { display: flex; flex-direction: column; gap: 1px; margin: 3px 0 8px 23px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .12); }
.nav .nav-desp a { padding: 7px 10px; font-size: 13px; font-weight: 500; border-radius: 9px; gap: 8px; }
.nav .nav-desp a > span:first-child { flex: 1; }
.nav .nav-desp a[aria-current] { color: var(--gold); background: rgba(255, 255, 255, .06); font-weight: 700; }
.nav .nav-desp a.nav-pag { padding-left: 18px; }
.nav-grupo { display: block; padding: 9px 10px 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); }
.nav-desp .badge { font-size: 10.5px; }
@media (prefers-reduced-motion: reduce) { .nav-flecha { transition: none; } }

.area-num { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--gold); color: #1b1405; font-size: 11.5px; font-weight: 800; letter-spacing: 0; }

.pr-otra { position: relative; }
.pr-otra > summary { list-style: none; }
.pr-otra > summary::-webkit-details-marker { display: none; }
.pr-otra[open] { flex-basis: 100%; }
.pr-otra-caja { position: static; margin-top: 10px; width: 100%; max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.pr-otra-caja .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ——— Lectura directa del indicador de la balanza (assets/indicador.js) ——— */
/* El sello de cada peso: de dónde salió el número. Va pegado a su casilla, pequeño, porque es
   un dato de respaldo —no estorba al pesar y está ahí el día que alguien discuta el peso. */
.ind-sello { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; vertical-align: 1px; }
.ind-sello[data-origen="BALANZA"] { background: var(--good-soft); color: var(--good); }
.ind-sello[data-origen="MANUAL"] { background: var(--surface-3); color: var(--muted); }
/* Mientras el camión acaba de subir, el número de la casilla todavía baila: decirlo evita que
   alguien guarde un peso a medio asentar creyendo que ya es el bueno. */
.ind-sello[data-origen="BALANZA"].mov { background: var(--warn-soft); color: var(--warn); }

.ind-caja { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ind-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* El semáforo de la balanza. Verde con latido = está entrando peso y las casillas se llenan
   solas; gris = no hay balanza y el peso lo escribe el balancero. Es lo primero que se mira. */
.ind-luz { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; white-space: nowrap; }
.ind-luz i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.ind-luz.on { background: var(--good-soft); color: var(--good); }
.ind-luz.on i { animation: ind-latido 1.6s ease-in-out infinite; }
.ind-luz.busca { background: var(--warn-soft); color: var(--warn); }
.ind-luz.busca i { animation: ind-latido .8s ease-in-out infinite; }
.ind-luz.off { background: var(--surface-3); color: var(--muted); }
@keyframes ind-latido { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 70% { opacity: .55; box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { .ind-luz i { animation: none !important; } }
/* Con la balanza en línea el recuadro entero se nota, para que no haya duda de dónde sale el peso. */
.ind-caja.ind-online { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.ind-tit { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ind-peso { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; min-width: 150px; }
.ind-est { font-size: 13px; font-weight: 600; color: var(--muted); }
.ind-est.ok { color: var(--good); }
.ind-est.mov { color: var(--warn); }
.ind-esp { flex: 1; }
.ind-conf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ind-conf label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; }
.ind-conf small { flex-basis: 100%; }
.ind-crudo { flex-basis: 100%; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 12px; max-height: 160px; overflow: auto; }
.ind-con-boton { position: relative; }
.ind-usar { margin-left: 6px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.ind-usar:disabled { opacity: .45; cursor: default; }
.ind-usar.ok { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.ind-usar:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* La casilla que está siguiendo a la balanza ahora mismo. En la ficha de un carro hay cinco
   casillas de peso y solo una se llena sola: hay que verla sin leer nada. */
.ind-en-turno { border-color: var(--good) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 18%, transparent); }

/* ——— Centro de reportes: una línea por reporte, con buscador (public/reportes.php) ——— */
.rep-buscar { margin-left: auto; min-width: 220px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); font: inherit; font-size: 14px; color: var(--ink); }
.rep-buscar:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.rep-area { margin: 18px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rep-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rep-fila { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.rep-fila:hover { background: var(--surface-2); }
.rep-txt { flex: 1; min-width: 0; }
.rep-txt b { display: block; font-size: 14.5px; }
.rep-txt small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.rep-acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rep-nada { color: var(--muted); padding: 14px 4px; }
@media (max-width: 720px) {
  .rep-fila { flex-direction: column; align-items: stretch; }
  .rep-acc { justify-content: flex-start; }
  .rep-buscar { width: 100%; margin: 8px 0 0; }
}
/* ——— Barra del proceso: en qué paso estás y cuál sigue (flujo_barra) ——— */
/* Sin caja: solo una raya arriba. Era un recuadro con fondo y filete que pesaba igual que un
   panel de datos, y esto es señalización, no contenido. */
.flujo { display: flex; flex-wrap: wrap; margin: 0; padding: 10px 2px 0; border-radius: 0;
  background: none; border: 0; border-top: 1px solid var(--line); font-size: 12.5px; }
/* ——— Los dos niveles de la barra del proceso ———
   Arriba las cuatro fases grandes, abajo solo los pasos de la fase donde estás. Antes eran las 18
   pastillas seguidas: se partían en dos líneas y había que leerlas una por una para saber dónde
   estabas. */
.flujo { flex-direction: column; align-items: stretch; gap: 8px; }
/* Un lote directo no lleva código BJ y no le falta: va tal cual a la planta. Donde el lote normal
   lleva su BJ, el directo dice a qué empresa va. */
/* El mapa de la valorización, plegado: es material de consulta y estaba ocupando lo primero que
   se ve cuando uno viene a valorizar. Plegado ocupa una línea y sigue a mano. */
details.vl-mapa > summary { cursor: pointer; list-style: none; }
details.vl-mapa > summary::-webkit-details-marker { display: none; }
details.vl-mapa > summary::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: 12px; transition: transform .15s; }
details.vl-mapa[open] > summary::after { transform: rotate(180deg); }
details.vl-mapa > summary:hover h2 { color: var(--brand-text); }

/* ——— La ruma en la VAL interna ———
   Partir un lote le pone códigos distintos al mismo mineral. Su VAL interna es la misma para todas
   sus partes; lo único que cambia son las TMH. Van marcadas de entrada porque lo normal es
   valorizarlas juntas, y cada una puede irse por un tercero con su propio monto. */
.vl-ruma-box { margin: 14px 0 0; padding: 12px 14px 10px; border: 1px solid var(--gold); border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 5%, var(--surface)); }
.vl-ruma-box legend { padding: 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold-text); }
.vl-ruma-box .hint { margin: 0 0 10px; }
/* Una línea por lote: el lote a la izquierda y su monto a la derecha. Antes envolvía, y el monto
   caía debajo ocupando otra fila entera. */
.vl-ruma-l { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 16px; padding: 7px 0; }
.vl-ruma-l + .vl-ruma-l { border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); }
.vl-ruma-sel { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.vl-ruma-sel input { width: 16px; height: 16px; flex: none; align-self: center; }
.vl-ruma-sel small { color: var(--muted); font-size: 11.5px; }
.vl-ruma-tc { display: flex; align-items: center; gap: 6px; margin-left: auto; cursor: pointer; font-size: 12.5px; color: var(--ink-2); }
.vl-ruma-tc input { width: 15px; height: 15px; flex: none; }
/* OJO con la especificidad: la regla general de los campos —«input:not([type=checkbox])…»— vale
   (0,3,1) y le ponía width 100 % a esta casilla, que solo valía (0,1,0). Por eso el monto salía
   ocupando toda la fila, debajo del lote, en vez de a su derecha. Se iguala con el :not() para
   empatar en especificidad y ganar por ir después. */
.vl-ruma-l input.vl-ruma-monto:not([type=checkbox]) { width: 150px; min-height: 36px; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
/* Lo que significa lo que acabas de marcar, dicho en la propia fila: vacío es «el 100 %», y con
   un número escrito, qué parte de su VAL interna representa. Va pegado a la casilla y no a la
   izquierda, porque es la explicación del monto, no del lote. */
.vl-ruma-nota { margin-left: auto; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.vl-ruma-nota:empty { display: none; }
.vl-ruma-nota.todo { color: var(--gold-text); }
.vl-ruma-nota.parte { color: var(--ink-2); }
.vl-ruma-nota.mal { color: var(--loss); }
/* Con la nota puesta, el monto ya no necesita empujarse solo al borde. */
.vl-ruma-l:has(.vl-ruma-nota:not(:empty)) input.vl-ruma-monto { margin-left: 12px; }
/* El total de Terceros, que es la pregunta de fondo de todo el recuadro. */
.vl-ruma-total { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: right; }
.vl-ruma-total.hay { color: var(--gold-text); font-size: 13.5px; }

/* La casilla del monto solo tiene sentido en un lote marcado. Sin marcar no se pinta: seis cajas
   vacías diciendo «monto a pagar» cuando no hay ningún tercero es ruido que tapa la pregunta. */
.vl-ruma-l:not(:has(input[type=checkbox]:checked)) input.vl-ruma-monto { display: none; }
.vl-ruma-l:has(input[type=checkbox]:checked) { background: color-mix(in srgb, var(--gold) 8%, transparent); border-radius: 10px; padding-left: 8px; padding-right: 8px; }


/* ——— Programación: un blending es UNA fila ———
   Los lotes de un blending están físicamente uno encima de otro. Listarlos sueltos era pedirle a
   quien programa que marcara cinco códigos acordándose de que son la misma ruma. Ahora manda el
   código del montón y los lotes se abren debajo si hacen falta. */
.pr-blend-cod { color: var(--gold-text) !important; }
.pr-codigos { margin-top: 2px; }
.pr-codigos summary { cursor: pointer; font-size: 11px; font-weight: 700; color: var(--muted); list-style: none; }
.pr-codigos summary::-webkit-details-marker { display: none; }
.pr-codigos summary::before { content: '▸ '; }
.pr-codigos[open] summary::before { content: '▾ '; }
.pr-codigos summary:hover { color: var(--gold-text); }
/* El recuadro del resumen solo cuando se llega con el teclado: al pulsarlo con el ratón salía un
   rectángulo alrededor que parecía un campo de formulario vacío. */
.pr-codigos summary:focus { outline: none; }
.pr-codigos summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
/* Los lotes del montón, en rejilla. Uno debajo de otro, la fila del blending medía casi 300 px de
   alto —cuatro veces las demás— y empujaba la tabla entera hacia abajo. Cada uno con su peso al
   lado, que es el dato con el que se reparte la carga entre carros. */
.pr-codigos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 3px 6px; margin-top: 5px; }
.pr-cod-item { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 2px 7px; border-radius: 6px; background: var(--surface-2); text-decoration: none; }
.pr-cod-item .mono { font-size: 11px; color: var(--ink-2); }
.pr-cod-item em { font-style: normal; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-cod-item:hover { background: var(--surface-3); }
.pr-cod-item:hover .mono { color: var(--brand-text); }
/* La casilla de «llevarse el montón entero» en traslados, retiros y desmontes */
.pr-monton-sw { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 10px; cursor: pointer;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.pr-monton-sw input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; }
.pr-monton-sw b { display: block; font-size: 12.5px; }
.pr-monton-sw small { display: block; font-size: 11px; line-height: 1.4; color: var(--muted); }
.pr-monton-sw:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }

.pr-un-monton { font-size: 11.5px; font-weight: 700; color: var(--gold-text); }

/* ——— Las dos leyes del laboratorio: un color para cada una, en todo el ERP ———
   El laboratorio reporta DOS ensayos de la misma muestra, y cada uno manda en un sitio distinto:
     SACOS  es la BASE DEL REPORTE al proveedor. Fuera del reporte, informativa.
     LOTES  es la PRINCIPAL, la de confianza: venta, utilidad y blending.
   Son dos números parecidos, de la misma muestra y del mismo tamaño. Lo único que los distingue es
   el nombre y el color, así que eso tiene que ser lo mismo en todas las pantallas: el dorado —el
   color del circuito en esta casa— para la que manda, y el azul para la del reporte. En una mesa con
   prisa, confundirlas es reportar o cobrar con la que no era.
   Van como variables para que un cambio de color no deje media pantalla diciendo otra cosa. */
.ley-dos { --ley-lote: var(--gold); --ley-lote-bg: var(--gold-soft); --ley-lote-tx: var(--gold-text);
  --ley-saco: var(--sky); --ley-saco-bg: var(--sky-soft); --ley-saco-tx: var(--sky-text); }
.ng, .lb { --ley-lote: var(--gold); --ley-lote-bg: var(--gold-soft); --ley-lote-tx: var(--gold-text);
  --ley-saco: var(--sky); --ley-saco-bg: var(--sky-soft); --ley-saco-tx: var(--sky-text); }

/* En la mesa, debajo de la ley de sacos va la de lotes, con su dorado: es la base del cálculo */
.ng-lote-mini { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--ley-lote-tx); }
.ng-lote-falta { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--warn); }
.ng-th-sub { display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: none; color: var(--muted); }

/* Las dos leyes de un metal, en una sola casilla y a dos columnas: sueltas eran seis bloques en
   fila que no dejaban sitio ni para los títulos, y además no son seis datos sino tres pares de la
   misma muestra. El filete de color va ARRIBA de cada mitad, no al costado: puesto al costado se
   comía la primera letra del título. */
.ng-par { grid-column: span 2; min-width: 0; }
.ng-par dd { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 3px; }
.ng-p { display: block; min-width: 0; padding: 7px 10px 6px; border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border-top: 3px solid var(--c, var(--line-strong)); }
.ng-p i { display: block; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c); }
.ng-p b { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; color: var(--int); font-variant-numeric: tabular-nums; }
.ng-p small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.ng-p-saco { --c: var(--ley-saco); }
.ng-p-lote { --c: var(--ley-lote); }
/* El pie nombra cada una con su color, para no tener que mirar arriba */
.ng-p-et { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; }
b.ng-p-et.ng-p-saco { background: var(--ley-saco-bg); color: var(--ley-saco-tx); }
b.ng-p-et.ng-p-lote { background: var(--ley-lote-bg); color: var(--ley-lote-tx); }

@media (max-width: 900px) {
  .ng-par { grid-column: span 1; }
  .ng-par dd { grid-template-columns: 1fr; }
}

/* Y en el laboratorio, donde se escriben: dos grupos de casillas que no se pueden confundir.
   lb-g1 son las de SACOS (van primero, son la base del reporte) y lb-g2 las de LOTES. */
.lb-g1 { background: color-mix(in srgb, var(--ley-saco) 5%, transparent); }
.lb-g2 { background: color-mix(in srgb, var(--ley-lote) 7%, transparent); }
thead .lb-g1, thead .lb-g2 { white-space: nowrap; }
thead .lb-g1 { box-shadow: inset 0 -2px 0 var(--ley-saco); }
thead .lb-g2 { box-shadow: inset 0 -2px 0 var(--ley-lote); }
thead .lb-g1 small, thead .lb-g2 small { display: block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; }
thead .lb-g1 small { color: var(--ley-saco-tx); }
thead .lb-g2 small { color: var(--ley-lote-tx); }

/* ——— Las siete etapas de negociación, en UNA fila ———
   Primero fueron siete pestañas iguales: para saber si había trabajo tuyo había que abrirlas una por
   una. Después las agrupé por quién tiene la pelota, pero en TRES paneles apilados, y salió peor:
   casi todas las etapas están en cero casi siempre, así que la pantalla se iba en 390 px de cajas
   vacías antes de llegar a los lotes —con dos filas de navegación ya puestas encima—.

   Ahora es un panel y una fila. El grupo que no tiene nada se apaga entero, que dice «aquí no hay
   trabajo» mucho mejor que tres tarjetas con un 0 cada una, y lo que sí tiene queda a tamaño
   normal y se lee solo. */
.ng-tablero { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px 0; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.ng-grupo { display: flex; flex-direction: column; gap: 5px; padding: 2px 16px; min-width: 0; }
.ng-grupo:first-child { padding-left: 0; }
.ng-grupo:last-child { padding-right: 0; }
.ng-grupo + .ng-grupo { border-left: 1px solid var(--line); }
.ng-grupo-tit { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ng-grupo-tit i { font-style: normal; min-width: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2); font-size: 10px; line-height: 16px; text-align: center; }
/* El grupo sin nada se apaga: es la respuesta a «¿tengo algo que hacer?» de un vistazo */
.ng-grupo.vacio { opacity: .4; }
.ng-grupo.vacio:hover { opacity: .75; }
/* Y lo que te toca a ti, cuando toca, se marca: es el único grupo donde se trabaja */
.ng-banda-tuyo:not(.vacio) .ng-grupo-tit { color: var(--gold-text); }
.ng-banda-tuyo:not(.vacio) .ng-grupo-tit i { background: var(--gold-soft); color: var(--gold-text); }

.ng-grupo-et { display: flex; gap: 3px; }
.ng-et { --c: var(--line-strong); display: flex; align-items: center; gap: 9px; padding: 7px 11px;
  border-radius: 10px; color: inherit; text-decoration: none; white-space: nowrap; transition: background .14s; }
.ng-et b { flex: none; font-size: 19px; font-weight: 800; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; }
.ng-et span { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.ng-et small { font-size: 10.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ng-et:hover { background: var(--surface-2); }
/* Una etapa en cero no desaparece —hay que poder entrar— pero deja de pedir atención */
.ng-et.cero { opacity: .5; }
.ng-et.cero b { color: var(--muted); font-weight: 700; }
.ng-et.on { opacity: 1; background: color-mix(in srgb, var(--c) 10%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 48%, transparent); }
.ng-et.reportar { --c: var(--int); } .ng-et.reportado { --c: var(--rep); } .ng-et.canjear { --c: var(--prp); }
.ng-et.encanje { --c: var(--prv); } .ng-et.cerrado { --c: var(--cie); }
.ng-et.sinlab { --c: var(--warn); } .ng-et.remuestreo { --c: var(--rmu); }

/* Angosto: cada grupo pasa a su propia línea, sin la raya que los separa en fila */
@media (max-width: 1100px) {
  .ng-grupo { flex: 1 1 100%; padding: 6px 0; }
  .ng-grupo + .ng-grupo { border-left: 0; border-top: 1px solid var(--line); }
  .ng-grupo-et { flex-wrap: wrap; }
}

/* ——— Lo que se juega en la negociación ———
   El número que decide: cuánto vale en dólares la diferencia de ley que se está discutiendo. Va
   arriba de la bandeja y repetido en cada fila, porque una décima no vale lo mismo en un lote de 3
   TMH que en uno de 25, y sin verlo al lado ceder parece gratis. */
.ng-juego { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 0 0 12px;
  padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--gold, #C9962B) 5%, var(--surface)); }
.ng-juego > div { display: flex; align-items: baseline; gap: 10px; }
.ng-juego span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Solo la cifra de la banda es grande. Antes esta regla alcanzaba a CUALQUIER negrita de dentro, así
   que las del párrafo explicativo salían a 22 px, como titulares en medio de una frase. */
.ng-juego > div > b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ng-juego p b { font-size: inherit; font-weight: 700; color: var(--ink); }
.ng-juego .ng-pct { margin-left: 2px; font-size: 15px; font-weight: 800; color: var(--good); font-variant-numeric: tabular-nums; }
.ng-juego .ng-pct.neg { color: var(--loss); }
.ng-juego small { color: var(--muted); font-size: 12px; }
.ng-juego p { flex: 1 1 320px; margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.ng-juego.sinprecio { background: var(--surface); border-style: dashed; }
.ng-juego-c b { font-variant-numeric: tabular-nums; }
.ng-th-juego { white-space: nowrap; }

/* Un lote partido es UN montón de mineral con varios códigos: la bandeja lo dice, para que no se
   valorice uno y se queden los hermanos esperando. */
.vl-ruma { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--gold-text);
  background: var(--gold-soft); border-radius: 6px; padding: 1px 6px; margin-top: 3px; width: fit-content; }
/* Y al partir, la casilla de separarlas de verdad. */
.bz-separar { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px;
  border: 1px dashed var(--line-strong); border-radius: 10px; cursor: pointer; }
.bz-separar span { display: block; }
.bz-separar small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.45; margin-top: 2px; }

/* El texto que se copia al acta, en la tarjeta de la guía: una línea, para llevarla de un tirón. */
/* El botón de copiar el texto del acta. Va pegado al texto porque es lo que se transcribe a mano
   al papel que firma el proveedor, y ahí es donde se cuela un dígito cambiado. */
.gx-copiar { margin-left: 8px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); font-size: 11.5px; font-weight: 700; cursor: pointer; vertical-align: 1px; transition: background .15s, color .15s, border-color .15s; }
.gx-copiar:hover { border-color: var(--brand); color: var(--brand); }
.gx-copiar.ok { border-color: var(--good); color: var(--good); background: var(--good-soft); }
/* El propio texto también se copia tocándolo: la mano va al número, no al botón. */
.gx-nc-dice code[data-gx-copiar] { cursor: copy; }
.gx-nc-dice code[data-gx-copiar]:hover { outline: 1px dashed var(--brand); outline-offset: 2px; }

.gx-nc-dice { margin: 10px 0 0; }
.gx-nc-dice code { display: block; padding: 7px 10px; border: 1px dashed var(--line-strong); border-radius: 8px;
  background: var(--surface); font-size: 11.5px; line-height: 1.5; color: var(--ink); overflow-x: auto; white-space: nowrap; }
.gb-nc-dice { margin: 6px 0 0; }
.gb-nc-dice code, .nc-dice code { display: block; padding: 7px 10px; border: 1px dashed var(--line-strong); border-radius: 8px;
  background: var(--surface); font-size: 11.5px; line-height: 1.5; color: var(--ink); overflow-x: auto; white-space: nowrap; }

/* El plazo de una no conformidad y el texto que va al acta. El contador arriba y a la vista:
   pasado el 7 del mes siguiente ya no se puede levantar, y avisar después no sirve de nada. */
.nc-plazo { margin: 6px 0 2px; }
.nc-dice { margin: 8px 0 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 10px;
  background: var(--surface-2, var(--surface)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-x: auto; }

.ck-directo { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--gold-text); background: var(--gold-soft); border-radius: 7px; padding: 2px 7px; }

.flujo-fases { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* Las fases no se estiran a lo ancho: eran cuatro botones del tamaño de la pantalla para decir en
   cuál de las cuatro estás, y es lo más pesado que había encima del dato. Como pastillas dicen lo
   mismo, en la mitad de alto y sin gritar. Siguen siendo las cuatro, y siguen llevando a su fase. */
.flujo-fase { flex: 0 1 auto; min-width: 0; text-align: center; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em; color: var(--muted); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flujo-fase:hover { color: var(--ink); border-color: var(--line-strong); }
.flujo-fase.hecho { color: var(--good); border-color: color-mix(in srgb, var(--good) 28%, var(--line)); }
.flujo-fase.hecho::before { content: "✓ "; }
.flujo-fase.aqui { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.flujo-pasos { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* La aprobación no es un paso de la fila: es un módulo aparte al que se entra por el menú. Se ve,
   pero con su propia forma, para que no se lea como el eslabón siguiente de la compra. */
.flujo-aparte { margin-left: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--muted); text-decoration: none; border: 1px dashed var(--line-strong); white-space: nowrap; }
.flujo-aparte::before { content: "↗ "; opacity: .7; }
.flujo-aparte:hover, .flujo-aparte.aqui { color: var(--ink); border-color: var(--gold, #C9962B); }
.flujo-paso { font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.flujo-i { padding: 4px 9px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.flujo-i:hover { background: var(--surface); color: var(--ink); }
.flujo-i.hecho { color: var(--good); }
.flujo-i.hecho::before { content: "✓ "; }
.flujo-i.aqui { background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.flujo-sigue { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-text);
  font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid var(--gold); }
.flujo-sigue:hover { background: var(--gold); color: #fff; }
@media (max-width: 900px) { .flujo-i { display: none; } .flujo-i.aqui, .flujo-i.hecho:last-of-type { display: inline-block; } }
/* ——— Barra de acción pegada abajo: se ve siempre, sin bajar hasta el final de la página ——— */
.barra-puntos {
  position: sticky; bottom: 0; z-index: 20; margin-top: 14px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(20, 30, 45, .10); backdrop-filter: blur(6px);
}
.barra-puntos .hint { flex: 1 1 100%; margin: 0; }
/* Un resumen de lo que se va a guardar, al lado de los botones */
.barra-resumen { font-weight: 700; color: var(--brand-text); margin-right: auto; }
.barra-resumen small { display: block; font-weight: 500; color: var(--muted); }

/* ——— Simulador de blending: fichas, efecto de cada lote y mezcla sugerida ——— */
.bs-destinos { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-3); }
.bs-destinos small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.bs-destinos b { font-size: 14px; }
.bs-destinos.mal { background: color-mix(in srgb, var(--loss) 12%, var(--surface)); }
.bs-destinos.mal b { color: var(--loss); }
.bs-cab-acc { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); }
.bs-vaciar { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.bs-vaciar:hover { border-color: var(--loss); color: var(--loss); }
.bs-chips { display: flex; flex-wrap: wrap; gap: 5px; max-height: 132px; overflow-y: auto; }
.bs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 10%, var(--surface)); font-size: 11.5px; cursor: pointer; }
.bs-chip b { font-family: var(--mono, monospace); font-weight: 700; }
.bs-chip em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.bs-chip button { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; }
.bs-chip button:hover { background: var(--loss); color: #fff; }
.bs-efecto { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs-efecto b { display: block; font-size: 12.5px; }
.bs-efecto small { display: block; font-size: 10.5px; color: var(--muted); }
.bs-efecto b.sube { color: var(--good); } .bs-efecto b.baja { color: var(--warn); }
.bs-efecto.quitar b.sube, .bs-efecto.quitar b.baja { opacity: .75; }
.bs-tabla tr.bs-resalta td { background: color-mix(in srgb, var(--gold) 28%, var(--surface)); transition: background .4s; }
.bs-obj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.bs-obj label { font-size: 12px; }
.bs-obj label small { font-weight: 500; color: var(--muted); font-size: 10.5px; }
.bs-obj .bs-sugerir { grid-column: 1 / -1; justify-content: center; }
.bs-progreso { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.bs-progreso i { display: block; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bs-progreso i b { display: block; height: 100%; border-radius: 999px; background: var(--sky); transition: width .25s; }
.bs-progreso i b.listo { background: var(--good); }

/* ——— Registrar la factura del proveedor: comparación en vivo contra la liquidación ——— */
.fcx { display: flex; flex-direction: column; gap: 12px; }
.fcx-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.fcx-campos label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.fcx-campos label small { font-weight: 500; color: var(--muted); font-size: 11px; }
.fcx-campos .fcx-usar { grid-column: 1 / -1; }
.fcx-aviso-nro { min-height: 14px; font-size: 11px; font-weight: 700; color: var(--warn); }
.fcx-cmp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fcx-cmp th, .fcx-cmp td { padding: 6px 8px; font-size: 13px; text-align: right; }
.fcx-cmp thead th { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.fcx-cmp tbody th { text-align: left; font-weight: 600; color: var(--ink-2); }
.fcx-cmp tbody tr + tr { border-top: 1px solid var(--line); }
.fcx-cmp tr.fuerte th, .fcx-cmp tr.fuerte td { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.fcx-cmp td.esp { color: var(--muted); }
.fcx-cmp td.dif.ok { color: var(--good); } .fcx-cmp td.dif.mal { color: var(--loss); font-weight: 800; }
.fcx-archivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fcx-file { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 12px;
  background: var(--surface-2); cursor: pointer; text-align: center; }
.fcx-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fcx-file b { font-size: 13px; }
.fcx-file span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.fcx-file.puesto { border-style: solid; border-color: var(--good); background: color-mix(in srgb, var(--good) 7%, var(--surface)); }
.fcx-file.puesto span { color: var(--good); font-weight: 700; }
.fcx-file.encima { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.fcx-nota { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
@media (max-width: 720px) { .fcx-campos, .fcx-archivos, .bs-obj { grid-template-columns: minmax(0, 1fr); } }

/* ——— La VAL aprobada que hay que mandarle al proveedor: formato y «ya la mandé» en la misma fila ——— */
.vl-enviar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.vl-enviar form { display: flex; align-items: center; gap: 6px; margin: 0; }
.vl-enviar select { max-width: 132px; padding: 5px 8px; font-size: 12.5px; }

/* ——— Ficha de la mezcla: los lotes del blending con la ley y la humedad de su VAL Beijing aprobada ——— */
/* La ficha de la mezcla se dibuja ahora como los demás formatos (hoja A4, cabecera con logo):
   su estilo vive en blending_ficha.php, junto al de la DJVM y la DJ de traslado. */

/* ——— El proceso completo: las cuatro etapas y sus pasos, uno debajo de otro ——— */
.pr { display: flex; flex-direction: column; gap: 30px; }
.pr-mapa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pr-fase-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; overflow: hidden; transition: border-color .15s, transform .15s; }
.pr-fase-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); }
.pr-fase-card:hover { border-color: var(--c); transform: translateY(-1px); }
.pr-fase-n { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.pr-fase-card b { font-size: 16.5px; line-height: 1.25; }
.pr-fase-card small { color: var(--ink-2); font-size: 12px; line-height: 1.4; flex: 1; }
.pr-fase-pend { margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pr-fase-pend i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

.pr-fase { display: flex; flex-direction: column; gap: 14px; }
.pr-fase-cab { display: flex; align-items: center; gap: 14px; }
.pr-fase-num { flex: none; min-width: 58px; height: 34px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.pr-fase-cab h2 { margin: 0; font-size: 19px; }
.pr-fase-cab p { margin: 1px 0 0; color: var(--ink-2); font-size: 12.5px; }

.pr-pasos { list-style: none; margin: 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.pr-pasos::before { content: ''; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.pr-paso { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; }
.pr-paso.ojo { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.pr-paso-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.pr-num { position: absolute; left: -26px; top: 15px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pr-paso-cab > .pr-num { position: absolute; }
.pr-titulo { grid-column: 2; min-width: 0; }
.pr-titulo h3 { margin: 0; font-size: 15.5px; }
.pr-titulo h3 a { color: inherit; text-decoration: none; }
.pr-titulo h3 a:hover { color: var(--brand-text); }
.pr-titulo p { margin: 1px 0 0; color: var(--ink-2); font-size: 12.5px; }
.pr-meta { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pr-quien { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pr-pend { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; background: var(--surface-2); border-radius: 999px; padding: 2px 9px; }.pr-pend.ojo { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }

.pr-cuerpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pr-flujo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.pr-cuerpo small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.pr-cuerpo span { font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.pr-flecha { color: var(--c); font-size: 17px; font-weight: 700; }
.pr-control span { color: var(--ink-2); }
.pr-ojo { border-left: 2px solid color-mix(in srgb, var(--c) 35%, transparent); padding-left: 11px; }
.pr-ojo span { color: var(--ink-2); font-style: italic; }

.pr-apoyo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 12px; }
.pr-apoyo-c { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface); text-decoration: none; color: inherit; transition: border-color .15s; }
.pr-apoyo-c:hover { border-color: var(--brand); }
.pr-apoyo-c b { font-size: 14px; }
.pr-apoyo-c small { color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.pr-pie { text-align: center; color: var(--ink-2); font-size: 13px; margin: 0; }

@media (max-width: 1100px) { .pr-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-cuerpo { grid-template-columns: minmax(0, 1fr); } }
@media print { .pr-paso { break-inside: avoid; } .pr-mapa { display: none; } }

/* ——— Consolidado del laboratorio: el correlativo de cada serie, sus filtros y el arreglo de un código mal escrito ——— */
.lc-series { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 12px; margin-top: 14px; }
.lc-serie { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.lc-serie:hover { border-color: var(--brand); }
.lc-serie small { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.lc-serie b { font-family: var(--mono); font-size: 14.5px; }
.lc-serie span { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.lc-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.lc-filtros > label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.lc-filtros .lc-check { flex-direction: row; align-items: center; gap: 7px; padding-bottom: 8px; }
.lb-mini { display: block; margin-top: 5px; }

.ng-falta-guia { color: var(--warn); font-weight: 700; text-decoration: none; border-bottom: 1px dotted currentColor; }
.ng-falta-guia:hover { color: var(--bad); }

/* ——— Manual de procedimientos: un área por bloque, pensado para leerse e imprimirse ——— */
.mn { display: flex; flex-direction: column; gap: 26px; }
.mn-indice { display: flex; flex-wrap: wrap; gap: 7px; }
.mn-ix { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: 12.5px; font-weight: 700; }
.mn-ix:hover { border-color: var(--brand); color: var(--ink); }
.mn-ix.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.mn-ix .ico { width: 14px; height: 14px; }

.mn-params-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.mn-params-grid > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.mn-params-grid small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.mn-params-grid b { display: block; font-size: 19px; letter-spacing: -.01em; }
.mn-params-grid span { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }

.mn-area { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 20px 22px; box-shadow: 0 1px 1px rgba(20,26,46,.03), 0 8px 20px -14px rgba(20,26,46,.18); }
.mn-area-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.mn-area-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.mn-area-ico .ico { width: 20px; height: 20px; }
.mn-area-cab h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.mn-mision { margin: 3px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.mn-resp { text-align: right; }
.mn-resp small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mn-resp b { font-size: 13px; }

.mn-cadena { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin: 14px 0 18px;
  padding: 12px 14px; border-radius: 13px; background: var(--surface-2); }
.mn-cadena small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.mn-cadena span { font-size: 12.5px; line-height: 1.4; }
.mn-flecha { color: var(--gold); font-size: 20px; font-weight: 700; }

.mn-procs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mn-proc { border-left: 3px solid var(--brand-soft); padding-left: 16px; }
.mn-proc-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.mn-proc-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 800; }
.mn-proc-cab h3 { margin: 0; font-size: 15px; }
.mn-pantalla { font-size: 11.5px; font-weight: 700; color: var(--brand-text); text-decoration: none; border-bottom: 1px dotted currentColor; }
.mn-pasos { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.mn-pasos li { font-size: 13px; line-height: 1.45; }
.mn-control { margin: 9px 0 0; padding: 8px 11px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-text); font-size: 12.5px; line-height: 1.4; }
.mn-control small { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: 10px; margin-right: 5px; }

.mn-pie { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.mn-pie h4 { margin: 0 0 7px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mn-mide table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mn-mide td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.mn-meta { text-align: right; font-weight: 700; color: var(--good); white-space: nowrap; padding-left: 12px; }
.mn-limites ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.mn-limites li { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.mn-firma { text-align: center; color: var(--muted); font-size: 12px; }

@media (max-width: 900px) { .mn-area-cab { grid-template-columns: auto minmax(0, 1fr); } .mn-resp { grid-column: 2; text-align: left; }
  .mn-cadena, .mn-pie { grid-template-columns: minmax(0, 1fr); } .mn-flecha { display: none; } }
@media print { .mn-area { break-inside: avoid; border: none; box-shadow: none; padding: 0 0 18px; } .mn-proc { break-inside: avoid; } }

/* ——— Reporte gerencial: las cifras del mes, sus ratios y el top de mejores y peores ——— */
.gg { display: flex; flex-direction: column; gap: 18px; }
.gg-hero { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gg-h { position: relative; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  overflow: hidden; box-shadow: 0 1px 1px rgba(20,26,46,.03), 0 10px 24px -16px rgba(20,26,46,.25); }
.gg-h::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c, var(--brand)); }
.gg-h small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gg-h b { display: block; font-size: clamp(20px, 2.1vw, 28px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 3px 0 2px; }
.gg-h span { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.gg-h-in { --c: var(--sky); } .gg-h-out { --c: var(--good); } .gg-h-cancha { --c: var(--gold); } .gg-h-expo { --c: #7C3AED; }
.gg-h-util { --c: var(--good); } .gg-h-util.mal { --c: var(--bad); } .gg-h-util.mal b { color: var(--bad); }
.gg-h-util.bien b { color: var(--good); }

.gg-ratios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.gg-rgrupo h3 { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.gg-ratio { padding: 9px 11px; border-radius: 11px; background: var(--surface-2); margin-bottom: 7px; border-left: 3px solid transparent; }
.gg-ratio.pos { border-left-color: var(--good); } .gg-ratio.neg { border-left-color: var(--bad); }
.gg-r-n { display: block; font-size: 11.5px; color: var(--ink-2); }
.gg-ratio b { display: block; font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gg-ratio.pos b { color: var(--good); } .gg-ratio.neg b { color: var(--bad); }
.gg-ratio small { font-size: 10.5px; color: var(--muted); }

.gg-barras { display: flex; align-items: flex-end; gap: 6px; height: 180px; margin-top: 14px; padding: 0 2px; }
.gg-bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; height: 100%; }
.gg-bpar { flex: 1; display: flex; align-items: flex-end; gap: 2px; width: 100%; justify-content: center; }
.gg-bpar i { width: 42%; border-radius: 3px 3px 0 0; min-height: 2px; display: block; }
i.gg-bin { background: var(--sky); } i.gg-bout { background: var(--good); }
.gg-bmes { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.gg-bpct { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gg-leyenda { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
.gg-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.gg-proy-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.gg-p { padding: 13px 15px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); }
.gg-p small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.gg-p b { display: block; font-size: 21px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0; }
.gg-p span { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.gg-p-caja { border-color: var(--gold); background: var(--gold-soft); }
.gg-p-caja b { color: var(--gold-text); }
.gg-p-falta { border-color: var(--bad); background: var(--bad-soft); } .gg-p-falta b { color: var(--bad); }
.gg-p-sobra { border-color: var(--good); background: var(--good-soft); } .gg-p-sobra b { color: var(--good); }
.gg-nota { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; font-style: italic; }
@media (max-width: 1200px) { .gg-proy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .gg-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gg-ratios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .gg-hero { grid-template-columns: repeat(5, 1fr); } .panel { break-inside: avoid; } }

/* ——— Gráficos de los reportes: barras, línea, ranking y dona. Mismos colores del ERP, claro y oscuro ——— */
svg.gr { display: block; width: 100%; height: auto; margin-top: 10px; }
svg.gr .c-bar.c-in { fill: var(--sky); }
svg.gr .c-bar.c-out { fill: var(--good); }
svg.gr .c-bar:hover { fill: var(--gold); }
.gr-leyenda { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
.gr-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gr-leyenda i.gr-in { background: var(--sky); } .gr-leyenda i.gr-out { background: var(--good); }
.gr-area { fill: var(--brand); fill-opacity: .10; stroke: none; }
.gr-linea { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gr-punto { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.gr-punto:hover { fill: var(--gold); stroke: var(--gold); }

.gr-rank { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.gr-rf { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; }
.gr-rn { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-rb { height: 15px; background: var(--surface-3); border-radius: 8px; overflow: hidden; }
.gr-rb i { display: block; height: 100%; background: var(--brand); border-radius: 8px; transition: width .5s var(--ease-out); }
.gr-rb i.neg { background: var(--bad); }
.gr-rf b { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gr-rf b.pos { color: var(--good); } .gr-rf b.neg { color: var(--bad); }

.gr-dona { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.gr-dona svg { width: 150px; height: 150px; flex: none; }
.gr-seg { stroke: var(--surface); stroke-width: 1.5; transition: opacity .15s; }
.gr-seg:hover { opacity: .78; }
.gr-c0 { fill: var(--brand); } .gr-c1 { fill: var(--gold); } .gr-c2 { fill: var(--sky); }
.gr-c3 { fill: var(--good); } .gr-c4 { fill: #7C3AED; } .gr-c5 { fill: var(--muted); }
.gr-dona-leyenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 5px; }
.gr-dona-leyenda li { display: grid; grid-template-columns: 11px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; }
.gr-dona-leyenda i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.gr-dona-leyenda i.gr-c0 { background: var(--brand); } .gr-dona-leyenda i.gr-c1 { background: var(--gold); }
.gr-dona-leyenda i.gr-c2 { background: var(--sky); } .gr-dona-leyenda i.gr-c3 { background: var(--good); }
.gr-dona-leyenda i.gr-c4 { background: #7C3AED; } .gr-dona-leyenda i.gr-c5 { background: var(--muted); }
.gr-dona-leyenda span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-dona-leyenda b { font-variant-numeric: tabular-nums; }

.gr-tit { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Dos gráficos lado a lado dentro de un panel */
.gr-par { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .gr-par { grid-template-columns: minmax(0, 1fr); } }
@media print { svg.gr, .gr-rank, .gr-dona { break-inside: avoid; } .c-bar { animation: none !important; } }

/* ═══ Acabado general: profundidad, foco, tablas y tipografía de números ═══
   Reglas de puro aspecto. No cambian display, grid ni posiciones: si se quitan, el ERP sigue funcionando igual. */

/* Superficies: un borde más fino y una sombra en dos capas dan profundidad sin ensuciar */
.panel, .kpi, .card, .tz-card, .vl-docfila, .lc-serie, .pr-paso, .pr-fase-card, .pr-apoyo-c {
  box-shadow: 0 1px 1px rgba(20, 26, 46, .03), 0 8px 20px -14px rgba(20, 26, 46, .18);
}
.panel { transition: box-shadow .18s ease, border-color .18s ease; }

/* Título de panel: una marca dorada corta antes del texto, para que la vista encuentre el bloque */
.panel-head h2, .seccion-head h2 { display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.panel-head h2::before, .seccion-head h2::before {
  content: ''; width: 3px; height: 1em; border-radius: 3px; background: var(--gold); opacity: .85; flex: none;
}

/* Números: todos con el mismo ancho de dígito, para que las columnas se lean de un vistazo */
.kpi-value, .bs-kpi b, .pr-pend b, td.r, th.r, .totales b, .summary b, .rec-e b { font-variant-numeric: tabular-nums; }

/* Tarjetas de indicador: un lavado suave del color de su tono y el número más presente */
.kpi { transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease; }
a.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-up); }
.kpi-value { letter-spacing: -.02em; }
.kpi[data-tono="ok"], .kpi[data-tono="bueno"] { background: linear-gradient(180deg, color-mix(in srgb, var(--good) 5%, var(--surface)), var(--surface) 60%); }
.kpi[data-tono="alerta"], .kpi[data-tono="warn"] { background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 6%, var(--surface)), var(--surface) 60%); }
.kpi[data-tono="malo"], .kpi[data-tono="bad"] { background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 6%, var(--surface)), var(--surface) 60%); }

/* Tablas: encabezado que se queda arriba al bajar, y la fila bajo el cursor marcada */
.table-scroll { scrollbar-width: thin; }
/* Opaco a propósito: una cabecera translúcida deja ver las filas pasando por detrás y se lee peor
   que no tenerla. La raya de abajo la separa de lo que pasa. */
.table-scroll table.data thead th { position: sticky; top: var(--alto-barra, 0px); z-index: 3; background: var(--surface-2);
  box-shadow: inset 0 -1px 0 var(--line-strong), 0 6px 8px -7px color-mix(in srgb, var(--ink) 55%, transparent); }
/* Y la fila de totales se queda abajo: bajar 400 filas para ver la suma y perder de vista las
   columnas es justo lo que se está arreglando. */
.table-scroll table.data tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--surface-2);
  box-shadow: inset 0 1px 0 var(--line-strong), 0 -6px 8px -7px color-mix(in srgb, var(--ink) 55%, transparent); }
table.data tbody tr { transition: background .12s ease; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--brand) 3.5%, var(--surface)); }
table.data tfoot td { background: var(--surface-2); font-weight: 700; }

/* Botones: se levantan al pasar, se hunden al pulsar, y el foco del teclado siempre se ve */
.btn { transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px;
}

/* Pastillas y chips: un poco más compactas y legibles */
.pill { letter-spacing: .01em; font-weight: 700; }

/* Cuando no hay nada que mostrar, que se note que está bien, no que falta algo */
.empty { border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--surface-2); color: var(--ink-2); }

/* Que nada salte al cargar si la persona pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ═══ Negociación: la mesa donde se decide cuánto se cede ═══ */
/* El tablero de etapas gana una barra que dice qué parte de la cola está en cada una */
/* El tablero se acomoda a cuántas etapas haya, sin dejar una tarjeta sola en la fila de abajo */

/* La tabla de la bandeja: encabezado fijo y fila marcada, como el resto del ERP */
.table-scroll .ng-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.ng-tabla tbody tr { transition: background .12s ease; }
.ng-tabla tbody tr:hover { background: color-mix(in srgb, var(--brand) 3.5%, var(--surface)); }

/* La cabecera de la ficha del lote: más aire y la etapa con su color */
.ng-cab { border-radius: 18px; box-shadow: 0 1px 1px rgba(20, 26, 46, .03), 0 10px 26px -16px rgba(20, 26, 46, .22); }
.ng-cab-id h2 { letter-spacing: -.02em; }
.ng-pasos li { transition: border-color .15s ease, background .15s ease; }
.ng-pasos li.ahora { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent); }

/* ═══ Carátula de ingreso ═══
   El cerro en corte: cielo de madrugada arriba, la roca con su veta abajo y la bocamina encendida.
   Todo dibujado en el SVG .login-escena, que se ancla al pie del panel y se recorta a lo ancho. */
.login { min-height: 100vh; min-height: 100svh; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.login-arte {
  padding: 0; justify-content: stretch;
  background:
    radial-gradient(70% 45% at 16% 78%, rgba(201, 150, 43, .10) 0%, rgba(201, 150, 43, 0) 100%),
    radial-gradient(120% 90% at 8% 0%, #16304f 0%, #0d1f34 42%, #070d16 100%);
}
/* Un anillo dorado muy tenue arriba: da profundidad al cielo sin distraer */
.login-arte::before { content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%;
  left: -220px; top: -300px; border: 1px solid rgba(201, 150, 43, .16); }
.login-arte::after { content: none; }

.login-escena { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44%; z-index: 0; display: block; }
/* Polvo de mineral suspendido: siete motas que suben despacio */
.login-polvo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.login-polvo span { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); opacity: 0; animation: polvo 17s linear infinite; }
.login-polvo span:nth-child(1) { left: 12%; animation-duration: 19s; }
.login-polvo span:nth-child(2) { left: 26%; width: 2px; height: 2px; animation-delay: -4s; animation-duration: 23s; }
.login-polvo span:nth-child(3) { left: 39%; animation-delay: -9s; animation-duration: 16s; }
.login-polvo span:nth-child(4) { left: 54%; width: 4px; height: 4px; animation-delay: -13s; animation-duration: 25s; }
.login-polvo span:nth-child(5) { left: 67%; width: 2px; height: 2px; animation-delay: -2s; animation-duration: 20s; }
.login-polvo span:nth-child(6) { left: 79%; animation-delay: -16s; animation-duration: 22s; }
.login-polvo span:nth-child(7) { left: 91%; width: 2px; height: 2px; animation-delay: -7s; animation-duration: 18s; }
@keyframes polvo {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  10%  { opacity: .5; }
  70%  { opacity: .22; }
  100% { transform: translateY(-72vh) scale(1); opacity: 0; }
}

.login-arte-in { position: relative; z-index: 1; padding: 54px 52px 0; display: flex; flex-direction: column; justify-content: center; flex: 1; }
.login-marca-top { margin-bottom: 34px; }
.login-logo { display: block; width: min(196px, 46%); margin: 0 0 12px; filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .5)); }
.login-razon { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); padding-top: 11px; border-top: 1px solid rgba(201, 150, 43, .28); width: min(300px, 70%);
  text-shadow: 0 1px 10px rgba(5, 9, 15, .8); }
.login-arte h2 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 14px; max-width: none;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .45); }
.login-arte p { font-size: 15.5px; color: rgba(255, 255, 255, .72); max-width: 46ch; line-height: 1.55; }

.login-puntos { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; max-width: 46ch; }
.login-puntos li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.login-puntos li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
/* La lista nueva no lleva el visto del diseño anterior: su numeración va en el <em> */
.login-puntos li::before { content: none; display: none; }

.login-puntos em { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--gold); letter-spacing: .06em; padding-top: 2px; }
.login-puntos span { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .62); line-height: 1.45; text-shadow: 0 1px 10px rgba(5, 9, 15, .7); }
.login-puntos b { display: block; font-size: 14.5px; color: #fff; font-weight: 700; margin-bottom: 1px; letter-spacing: -.01em; }
.login-pie { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 26px 52px 30px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.login-pie-m { color: var(--gold); opacity: .75; }

.login-form { padding: 48px 28px; background: var(--surface); }
.login-caja { width: min(390px, 100%); gap: 15px; }
.login-marca { display: none; width: 96px; height: auto; margin: 0 auto 6px; }
.login-tit h1 { margin: 0 0 5px; font-size: clamp(25px, 2.5vw, 31px); letter-spacing: -.03em; }
.login-tit p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.login-caja label { gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.login-caja input { padding: 13px 14px; border-radius: 13px; font-size: 15px; border: 1px solid var(--line-strong);
  background: var(--surface-2); transition: border-color .15s, box-shadow .15s, background .15s; }
.login-caja input:hover { border-color: var(--muted); }
.login-caja input:focus { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); outline: none; }
.login-caja input::placeholder { color: var(--muted); opacity: .55; font-weight: 400; letter-spacing: 0; }
.login-in { position: relative; display: block; }
.login-in input { width: 100%; padding-right: 46px; }
.login-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  display: grid; place-items: center; border: none; background: none; border-radius: 9px; cursor: pointer; color: var(--muted); }
.login-ojo:hover { background: var(--surface-3); color: var(--ink); }
.login-ojo svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.login-ojo.on { color: var(--brand-text); }
.login-caja .btn { min-height: 50px; border-radius: 13px; font-size: 15px; letter-spacing: .01em; margin-top: 3px; }
.login-error, .login-aviso { border-radius: 12px; padding: 11px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.login-aviso { background: var(--gold-soft); color: var(--gold-text); }
.login-nota { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.5; }

/* ——— Los datos de la casa, debajo del titular ———
   Donde antes iban tres viñetas numeradas vendiendo funciones. A una pantalla que la misma gente
   abre cada mañana no hay nada que venderle: ya decidió entrar. Lo que corresponde es decir quién
   es la empresa, con la sobriedad que se le pide a una comercializadora de oro. */
.login-datos { margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; max-width: 46ch;
  border-top: 1px solid rgba(214, 170, 70, .22); }
.login-datos > div { padding: 14px 26px 0 0; margin-right: 26px; border-right: 1px solid rgba(255, 255, 255, .08); }
.login-datos > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.login-datos dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(214, 170, 70, .85); font-weight: 700; margin: 0 0 4px; }
.login-datos dd { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .88); font-weight: 600;
  letter-spacing: -.005em; text-shadow: 0 1px 10px rgba(5, 9, 15, .7); }

/* ——— En qué planta estás ———
   No tenía ni una línea de estilo, así que salían los círculos que pinta el navegador: diminutos y
   difíciles de dar en una tableta, que es donde se usa. Son dos botones y se eligen de un toque. */
.login-sede { border: 0; margin: 2px 0 0; padding: 0; }
.login-sede legend { padding: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
.login-sede-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.login-sede-ops label { position: relative; display: block; cursor: pointer; }
.login-sede-ops input { position: absolute; opacity: 0; width: 0; height: 0; }
.login-sede-ops span { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 62px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s; }
.login-sede-ops span b { font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--ink); }
.login-sede-ops label:hover span { border-color: var(--line-strong); }
.login-sede-ops input:checked + span { border-color: var(--gold, #C9962B); color: var(--ink);
  background: color-mix(in srgb, var(--gold, #C9962B) 9%, var(--surface)); }
.login-sede-ops input:checked + span b { color: var(--gold, #C9962B); }
.login-sede-ops input:focus-visible + span { outline: 2px solid var(--gold, #C9962B); outline-offset: 2px; }

/* En el celular el cerro no se va: se vuelve una banda encima del formulario, con el logo.
   Así la carátula es la misma en la oficina y en la cancha. */
@media (max-width: 1100px) {
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-arte { display: flex; min-height: 0; height: 208px; }
  .login-escena { height: 76%; }
  .login-polvo { display: none; }
  .login-arte::before { width: 380px; height: 380px; left: -160px; top: -210px; }
  .login-arte-in { padding: 0 26px; justify-content: center; }
  .login-marca-top { margin: 0; }
  .login-logo { width: 138px; }
  .login-razon { width: auto; max-width: 300px; font-size: 10px; padding-top: 9px; }
  /* «.login-arte ul» pesa más que «.login-puntos»: hay que ocultarla con el mismo selector */
  .login-arte h2, .login-arte p, .login-arte ul, .login-datos, .login-pie { display: none; }
  .login-form { padding: 30px 22px 44px; align-content: start; }
  .login-marca { display: none; }
}
@media (prefers-reduced-motion: reduce) { .login-caja { animation: none; } .login-polvo { display: none; } }

/* ——— Cancha, laboratorio y programación en el celular o la tableta ———
   Estas son las pantallas que se usan caminando por la cancha: cada lote pasa a ser una tarjeta
   que se toca para marcarla, en vez de una tabla de 950 px que hay que arrastrar de lado. */
@media (max-width: 820px) {
  .op-tabla { min-width: 0 !important; width: 100%; border-collapse: separate; border-spacing: 0; }
  .op-tabla thead { display: none; }
  .op-tabla tbody { display: flex; flex-direction: column; gap: 10px; }
  .table-scroll:has(> .op-tabla) { overflow: visible; margin: 0; padding: 0; }
  .op-tabla tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
  }
  .op-tabla tr:has(input[data-op-sel]:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }
  .op-tabla td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; min-width: 0; }
  .op-tabla td::before { display: none; }
  /* El cuadrito de marcar: grande y a la izquierda del código */
  .op-tabla td.op-c0 { order: 1; flex: none; }
  .op-tabla td.op-c0 input { width: 26px; height: 26px; }
  .op-tabla td.op-cod { order: 2; flex: 1 1 auto; font-size: 15.5px; }
  .op-tabla td.op-cod small { display: inline; margin-left: 6px; font-size: 11.5px; color: var(--muted); }
  .op-tabla td.op-prov { order: 3; flex: 0 0 100%; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
  .op-tabla td.op-prov small { display: block; font-size: 11px; color: var(--muted); }
  /* Las cifras, la zona y los tiempos, en una línea de fichitas debajo del nombre */
  .op-tabla td.op-tmh, .op-tabla td.op-zona-c, .op-tabla td.op-espera, .op-tabla td.op-desde, .op-tabla td.op-foto-c {
    order: 4; flex: none; display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 3px 9px !important;
    border-radius: 999px; background: var(--surface-2); font-size: 11.5px;
  }
  .op-tabla td.op-tmh::after { content: 'TMH'; color: var(--muted); }
  .op-tabla td.op-espera::before, .op-tabla td.op-desde::before { display: inline; content: attr(data-l); margin-right: 3px; color: var(--muted); font-weight: 600; }
  .op-tabla td.op-espera:has(.muted), .op-tabla td.op-desde:has(.muted) { display: none; }
  .op-tabla td.op-foto-c { padding: 0 !important; background: none; }
  /* En el celular el paso va en su propio renglón, ancho completo, y el panel se abre en línea */
  .op-tabla td.op-paso-c { order: 7; flex: 0 0 100%; margin-top: 8px; padding-top: 8px !important; border-top: 1px dashed var(--line) !important; }
  .op-paso > summary { width: 100%; justify-content: center; padding: 9px 12px; font-size: 13.5px; }
  .op-paso-caja { position: static; width: auto; }
  /* El chancado y el muestreo, cada uno en su renglón y con su título */
  .op-tabla td.op-chan, .op-tabla td.op-mues { order: 5; flex: 0 0 100%; margin-top: 8px; padding-top: 8px !important; border-top: 1px dashed var(--line) !important; }
  /* Las demás columnas (laboratorio, programación) caen en «título ....... valor», una por renglón */
  .op-tabla td:not([class]), .op-tabla td.r:not([class*="op-"]) {
    order: 6; flex: 0 0 100%; margin-top: 4px; padding-top: 4px !important; text-align: right !important;
    border-top: 1px dashed var(--line) !important; overflow-wrap: anywhere;
  }
  .op-tabla td:not([class])::before, .op-tabla td.r:not([class*="op-"])::before {
    display: block; float: left; max-width: 48%; content: attr(data-l); text-align: left; font-size: 11.5px; font-weight: 700; color: var(--muted);
  }
  .op-tabla td:not([class]):empty, .op-tabla td[data-l=""]:not([class])::before { display: none; }
  .op-tabla td.op-chan::before, .op-tabla td.op-mues::before { display: block; content: attr(data-l); margin-bottom: 2px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .op-tabla td.op-chan small, .op-tabla td.op-mues small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
  /* La animación de entrada deja un «transform» en cada bloque de la página, y eso hace que lo
     que va fijo a la pantalla se ancle al bloque en vez de a la ventana. En el celular se quita:
     además va más suelto en equipos modestos. */
  main > * { animation: none !important; }
  /* La barra de acciones se queda pegada abajo y a la vista: con cientos de lotes, si fuera
     «sticky» al final de la lista habría que bajar miles de píxeles para llegar a ella. */
  .op-barra { position: fixed; left: 10px; right: 10px; bottom: 74px; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; }
  [data-op-form] { padding-bottom: 96px; }
  .op-acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px; }
  .op-acciones > details { min-width: 0; }
  .op-acciones summary { text-align: center; padding: 11px 8px; font-size: 12.5px; }
  /* El desplegable de cada acción se abre hacia arriba y a todo lo ancho de la barra */
  .op-acciones details > div { position: fixed; left: 16px; right: 16px; bottom: 160px; min-width: 0; padding: 12px; }
  .op-acciones details > div { flex-direction: column; align-items: stretch; }
  /* Los campos no se estiran para llenar la caja: cada uno con su alto de siempre */
  .op-acciones details > div input, .op-acciones details > div select { flex: none !important; }
  .op-acciones input, .op-acciones select, .op-acciones .btn { width: 100%; min-height: 44px; }
  /* Los filtros de arriba: que se puedan deslizar en vez de apretarse */
  .op-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; max-width: 100%; }
  .op-chips::-webkit-scrollbar { display: none; }
  .op-chips button { flex: none; }
  /* Las etapas: de a tres y compactas, para no comerse la pantalla antes de llegar a los lotes */
  .op-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px; }
  .op-etapa { padding: 8px 9px; gap: 0; border-top-width: 3px; }
  .op-etapa small { font-size: 10.5px; line-height: 1.2; }
  .op-etapa b { font-size: 19px; }
  .op-etapa span { display: none; }
  /* Los tramos de tiempo, de a dos */
  .op-ruta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px; }
  .op-tramo { padding: 9px 10px; }
  .op-tramo b { font-size: 18px; }
  .op-tramo span { font-size: 10.5px; }
}
/* El stock en cancha, también en tarjetas: es la otra pantalla que se usa caminando */
@media (max-width: 820px) {
  .ck-tabla { overflow: visible; }
  .ck-tabla table { min-width: 0 !important; width: 100%; border-collapse: separate; border-spacing: 0; }
  .ck-tabla thead { display: none; }
  .ck-tabla tbody { display: flex; flex-direction: column; gap: 10px; }
  .ck-tabla tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
  }
  .ck-tabla tr:has(input.sel:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }
  .ck-tabla td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; min-width: 0; }
  .ck-tabla td.ck-c0 { order: 1; flex: none; }
  .ck-tabla td.ck-c0 input { width: 26px; height: 26px; }
  .ck-tabla td.ck-cod { order: 2; flex: 1 1 auto; }
  .ck-tabla td.ck-prov { order: 3; flex: 0 0 100%; margin-top: 4px; font-size: 12.5px; }
  .ck-tabla td.ck-tmh { order: 4; flex: none; margin-top: 6px; padding: 3px 9px !important; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; }
  .ck-tabla td.ck-tmh::after { content: 'TMH'; margin-left: 3px; color: var(--muted); }
  /* Las demás columnas, en «título ....... valor» */
  .ck-tabla td:not([class]), .ck-tabla td.r:not([class*="ck-"]) {
    order: 6; flex: 0 0 100%; margin-top: 4px; padding-top: 4px !important; text-align: right !important;
    border-top: 1px dashed var(--line) !important; overflow-wrap: anywhere;
  }
  .ck-tabla td:not([class])::before, .ck-tabla td.r:not([class*="ck-"])::before {
    display: block; float: left; max-width: 46%; content: attr(data-l); text-align: left; font-size: 11.5px; font-weight: 700; color: var(--muted);
  }
  .ck-tabla td:not([class]):empty { display: none; }
  .ck-tabla td small { display: block; font-size: 11px; color: var(--muted); }
}

/* En pantallas muy angostas las etapas van de a dos, para que el número se siga leyendo */
@media (max-width: 420px) {
  .op-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── No conformidades de la guía ─────────────────────────────────────────────────────────────── */
/* El acta se imprime y se le manda al proveedor, así que se lee como un documento: los tres pesos
   arriba, el relato debajo y la firma al pie. En flex y no en rejilla porque en el celular la regla
   general apila todas las rejillas, y estos tres números se leen mejor uno al lado del otro. */
.nc-pesos { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.nc-peso { flex: 1 1 140px; display: flex; flex-direction: column; gap: 1px; padding: 11px 13px; border-radius: 13px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.nc-peso small { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.nc-peso b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.nc-peso em { font-size: 11px; font-style: normal; color: var(--muted); }
.nc-peso.dif { background: var(--surface); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bad) 35%, transparent); }
.nc-textos { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }
.nc-textos h3 { margin: 0 0 3px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.nc-textos p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.nc-firma { margin: 18px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-2); }
.nc-form { display: flex; flex-direction: column; gap: 11px; }
.nc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.nc-form label small { font-weight: 600; color: var(--muted); }
.nc-form textarea { min-height: 62px; font-size: 14px; }
.nc-form-fila { display: flex; flex-wrap: wrap; gap: 11px; }
.nc-form-fila label { flex: 1 1 200px; }
.nc-form-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nc-anular summary { font-size: 12.5px; color: var(--muted); cursor: pointer; }
.nc-anular > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.nc-anular input { flex: 1 1 200px; }
/* El formulario se abre bajo la fila, en la misma tabla: no hace falta ir a otra pantalla para levantarla. */
.nc-nueva summary { display: inline-flex; list-style: none; }
.nc-nueva summary::-webkit-details-marker { display: none; }
.nc-nueva[open] summary { visibility: hidden; height: 0; }
.nc-nueva .nc-form { margin-top: 6px; padding: 13px; border-radius: 13px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.nc-celda-txt { max-width: 420px; font-size: 13px; color: var(--ink-2); }

/* ── Cambio de planta: el recorrido del lote de planta en planta ─────────────────────────────── */
/* Se lee como un itinerario, de arriba abajo, porque eso es lo que es: el mismo lote pasando por
   una planta que no lo tomó y siguiendo a otra. */
.rp-ruta { display: flex; flex-direction: column; gap: 0; margin: 14px 0 0; padding: 0 0 0 20px; list-style: none; }
.rp-ruta li { position: relative; padding: 8px 0 8px 14px; border-left: 2px solid var(--line-strong); }
.rp-ruta li:first-child { border-left-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.rp-ruta li:last-child { border-left-color: var(--brand); }
.rp-ruta li::before { content: ''; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 2px var(--line-strong); }
.rp-ruta li:last-child::before { background: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.rp-ruta b { display: block; font-size: 14.5px; }
.rp-ruta small { display: block; font-size: 11.5px; color: var(--muted); }
.rp-ruta em { display: block; margin-top: 2px; font-size: 12.5px; font-style: normal; color: var(--ink-2); }
.rp-nota { margin: 10px 0 0; font-size: 12px; }

/* Las no conformidades por levantar: fichas, no tabla. Se levantan desde el celular, con el
   formulario debajo de su guía; en una tabla el formulario quedaba en la última columna y se salía. */
.nc-pendientes { display: flex; flex-direction: column; gap: 11px; }
.nc-pend { padding: 13px 15px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.nc-pend > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nc-pend-guia b { display: block; font-size: 15px; }
.nc-pend-guia small { display: block; font-size: 11.5px; color: var(--muted); }
.nc-pend-dif { flex: none; text-align: right; }
.nc-pend-dif b { display: block; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nc-pend-dif small { font-size: 10.5px; color: var(--muted); }
.nc-pend-pesos { margin: 9px 0 0; font-size: 13px; color: var(--ink-2); }
.nc-pend-lotes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 7px 0 10px; }
.nc-pend-lotes a { padding: 2px 8px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; }
.nc-pend-lotes small { width: 100%; font-size: 11.5px; color: var(--muted); }
.nc-pend .nc-form { margin-top: 8px; padding: 0; background: none; box-shadow: none; }

/* La cuenta de auditoría: mismo aviso pegajoso que el del entorno de pruebas, en otro color, para
   que nadie confunda «no puedo guardar» con «el ERP está fallando». */
.aud-aviso { background: #1D4ED8; }

/* El antes y el después de un cambio auditado: plegado, porque de un vistazo importa quién y por
   qué, y el detalle solo cuando alguien va a revisar ese caso. */
.aud-det summary { font-size: 12px; color: var(--brand); cursor: pointer; }
.aud-det > div { margin-top: 6px; }
.aud-det b { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.aud-det pre { margin: 2px 0 0; padding: 7px 9px; max-width: 420px; border-radius: 9px; background: var(--surface-2);
  font-size: 11.5px; white-space: pre-wrap; word-break: break-word; }

/* ── Plata parada en cancha ──────────────────────────────────────────────────────────────────── */
/* Las TMH no dicen si lo que está parado son cien mil dólares o un millón. En flex y no en rejilla:
   en el celular la regla general apila toda rejilla, y estas cifras se leen mejor de a dos. */
.ck-plata { margin-bottom: 14px; }
.ck-plata-cifras { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-plata-tot, .ck-plata-c { flex: 1 1 150px; display: flex; flex-direction: column; gap: 1px; padding: 11px 13px;
  border-radius: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ck-plata-tot { flex-basis: 200px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.ck-plata-cifras small { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ck-plata-cifras b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ck-plata-tot b { font-size: 26px; color: var(--brand); }
.ck-plata-cifras em { font-size: 11.5px; font-style: normal; color: var(--muted); }
.ck-plata-c.ojo { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--warn) 45%, transparent); }
.ck-plata-edades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ck-edad { flex: 1 1 130px; display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; border-radius: 11px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ck-edad small { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ck-edad b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ck-edad em { font-size: 11px; font-style: normal; color: var(--muted); }
.ck-edad.viejo { background: color-mix(in srgb, var(--bad) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 30%, transparent); }
.ck-edad.viejo b { color: var(--bad); }
.ck-plata-prov { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 11px 0 0; font-size: 12px; }
.ck-plata-prov span { color: var(--muted); font-weight: 700; }
.ck-plata-prov b { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 700; }
.ck-plata-prov i { font-style: normal; color: var(--brand); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Notas de crédito y débito ───────────────────────────────────────────────────────────────── */
/* Una factura emitida no se corrige: se ajusta con otro documento, y ese documento se lee entero
   —número, monto, motivo y quién lo registró— sin abrir nada. */
.nt-lista { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.nt { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.nt-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nt-cab b { font-size: 14px; }
.nt-cab em { font-style: normal; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nt small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.nt-anulada { opacity: .6; }
.nt-anulada .nt-cab em { text-decoration: line-through; }
.nt-anular { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nt-anular input { flex: 1 1 180px; min-height: 34px; font-size: 12.5px; }
.nt-nueva { margin-top: 12px; }
.nt-nueva summary { font-size: 13px; font-weight: 700; color: var(--brand); cursor: pointer; }
.nt-nueva .fields { margin-top: 10px; }

/* Avisos por correo: el estado del buzón de un vistazo y los dos botones de probarlo. */
.cr-estado { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0; }
.cr-e { flex: 1 1 130px; display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 12px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.cr-e small { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cr-e b { font-size: 15px; font-weight: 800; }
.cr-e.ok b { color: var(--good); }
.cr-e.no b { color: var(--muted); }
.cr-e.ojo { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--warn) 45%, transparent); }
.cr-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cr-probar { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-probar input { width: 240px; min-height: 38px; }
.cr-min { display: flex; align-items: center; gap: 8px; }
.cr-min input { width: 90px; }
.cr-min small { color: var(--muted); }
/* Una casilla con su texto al lado, dentro de una fila de campos. */
.ck-inline { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ck-inline input { width: auto; min-height: 0; }

/* Terceros: registrar una devolución sin salir de la fila, y de quién hay que cobrarla. */
.tc-devuelve { color: var(--ink-2); }
.tc-devuelve b { color: var(--ink); }
.tc-cobro summary { display: inline-flex; list-style: none; }
.tc-cobro summary::-webkit-details-marker { display: none; }
.tc-cobro[open] summary { visibility: hidden; height: 0; }
.tc-cobro-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding: 11px; width: 320px;
  border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.tc-cobro-form label { flex: 1 1 130px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.tc-cobro-form label.tc-cobro-ancho { flex-basis: 100%; }
.tc-cobro-form input { min-height: 34px; font-size: 13px; }
.tc-cobro-form button { flex: 1 1 100%; }

/* La plantilla que hay que crear en Meta, para copiarla tal cual. */
.wa-plantilla { margin: 8px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }

/* Puesta en marcha · relleno rápido del buzón: escribir el servidor a mano es de donde salen
   casi todos los fallos de configuración */
.cr-rapido { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cr-rapido > span { font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ——— El mapa de una plata: en qué se fue y qué queda ———————————————————————————
   La barra da la proporción de un vistazo; los nombres van en la lista de abajo, nunca DENTRO de
   la barra, porque un tramo chico cortaría el texto y un monto cortado engaña más que no ponerlo.
   Cada tramo tiene ancho mínimo para que ninguno desaparezca, y su color se repite en el punto de
   la lista, que es lo que permite decir cuál es cuál.

   Los tonos no usan --brand a propósito: en modo oscuro --brand ES dorado y chocaría con el tono
   del saldo. Azul para lo que ya se descontó, dorado para lo que sigue en la calle. */
.mapa { display: grid; gap: 10px; }
.mapa-barra { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.mapa-tramo { flex: var(--parte, 1) 0 0; min-width: 5px; background: var(--sky); }
/* El escalón corre solo entre los tramos «usado»: son varios del mismo tipo y hay que distinguirlos.
   Se mezcla contra --ink, que es oscuro en claro y claro en oscuro, así que la escalera funciona en
   los dos temas sin invertirse. */
.mapa-tramo[data-tono="usado"], .mapa-lista li[data-tono="usado"] .mapa-punto {
  background: color-mix(in srgb, var(--sky) calc(100% - var(--paso, 0) * 10%), var(--ink));
}
.mapa-tramo[data-tono="resto"], .mapa-lista li[data-tono="resto"] .mapa-punto { background: var(--gold); }
.mapa-tramo[data-tono="camino"], .mapa-lista li[data-tono="camino"] .mapa-punto {
  background: repeating-linear-gradient(135deg, var(--line-strong) 0 5px, var(--surface-3) 5px 10px);
}
.mapa-tramo[data-tono="fuera"], .mapa-lista li[data-tono="fuera"] .mapa-punto { background: var(--line-strong); }

.mapa-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.mapa-lista li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 6px 2px; font-size: 13px; }
.mapa-lista li + li { border-top: 1px solid var(--line); }
.mapa-punto { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.mapa-nombre { min-width: 0; font-weight: 600; color: var(--ink-2); }
.mapa-nombre small { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); }
.mapa-lista b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.mapa-lista i { font-style: normal; min-width: 42px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Dentro de una celda de tabla: solo la barra, que ahí el nombre ya está en la fila */
.mapa.compacto { display: block; min-width: 96px; }
.mapa.compacto .mapa-barra { height: 8px; }

/* ——— Registrar una factura: el veredicto y lo que llevas metido ——————————————————————
   Dos piezas que resuelven lo mismo en los dos lados: saber en el acto en qué estás. */

/* COMPRA · el «cuadra o no cuadra» pegado a la tabla de diferencias, no solo en la barra de abajo:
   quien está leyendo la columna de diferencias no debería tener que bajar la vista al pie. */
.fcx-veredicto { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 9px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); }
.fcx-veredicto b { font-size: 13.5px; color: var(--ink-2); }
.fcx-veredicto span { font-size: 11.5px; color: var(--muted); }
.fcx-veredicto.ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: var(--good-soft); }
.fcx-veredicto.ok b { color: var(--good); }
.fcx-veredicto.ok span { color: color-mix(in srgb, var(--good) 65%, var(--ink-2)); }
/* La diferencia avisa, no prohíbe: la factura se manda igual y contabilidad decide. Por eso es
   ámbar y no rojo. */
.fcx-veredicto.mal { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); }
.fcx-veredicto.mal b { color: var(--warn); }
.fcx-veredicto.mal span { color: color-mix(in srgb, var(--warn) 65%, var(--ink-2)); }

/* VENTA · los códigos que ya entraron en la factura. La tabla de donde salen se desplaza y se
   filtra al buscar, así que un contador no dice cuáles son. */
.fv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fv-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--surface-2); font: inherit; font-size: 12.5px; line-height: 1.2; cursor: pointer; }
.fv-chip b { font-weight: 700; color: var(--ink); }
.fv-chip span { color: var(--muted); font-variant-numeric: tabular-nums; }
.fv-chip i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2); font-style: normal; font-size: 12px; }
.fv-chip:hover { border-color: var(--bad); }
.fv-chip:hover i { background: var(--bad); color: var(--surface); }
.fv-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ——— El montón partido, a la vista ————————————————————————————————————————————
   Un lote partido es UN montón con varios códigos. Decirlo con un chip de texto obliga a leer y
   comparar códigos fila por fila; con dos o tres montones seguidos en la mesa, eso se confunde.

   El carril de la izquierda los agrupa de un vistazo, con tapa redondeada arriba y abajo para que
   se lea como un corchete. Las tapas las pone el guion sobre las filas que SE VEN y se recalculan
   en cada filtro: dibujarlas desde el servidor dejaría corchetes abiertos al esconder una fila.

   El color agrupa; el que identifica sigue siendo el chip. Por eso el chip no se quita: el color
   se reparte por orden de aparición y, pasados seis montones, se repite. */
:root {
  --ruma-1: #3B82F6; --ruma-2: #7C5CD6; --ruma-3: #0E9B8E;
  --ruma-4: #B4651E; --ruma-5: #C2416B; --ruma-6: #4E8A2C;
}
:root[data-theme="dark"] {
  --ruma-1: #6FA8FF; --ruma-2: #A68CF0; --ruma-3: #3FC4B5;
  --ruma-4: #E0924A; --ruma-5: #E8769B; --ruma-6: #8CC25E;
}
.vl-tabla tr[data-ruma-n="0"] { --ruma-c: var(--ruma-1); }
.vl-tabla tr[data-ruma-n="1"] { --ruma-c: var(--ruma-2); }
.vl-tabla tr[data-ruma-n="2"] { --ruma-c: var(--ruma-3); }
.vl-tabla tr[data-ruma-n="3"] { --ruma-c: var(--ruma-4); }
.vl-tabla tr[data-ruma-n="4"] { --ruma-c: var(--ruma-5); }
.vl-tabla tr[data-ruma-n="5"] { --ruma-c: var(--ruma-6); }

.vl-tabla tr[data-ruma-n] > td:first-child { position: relative; }
.vl-tabla tr[data-ruma-n] > td:first-child::before {
  content: ''; position: absolute; left: 2px; top: 0; bottom: 0; width: 4px; background: var(--ruma-c);
}
/* Las tapas: arriba en la primera fila del montón, abajo en la última. Si el montón es una sola
   fila a la vista, lleva las dos y queda como una pastilla. */
.vl-tabla tr.ruma-ini > td:first-child::before { top: 5px; border-radius: 3px 3px 0 0; }
.vl-tabla tr.ruma-fin > td:first-child::before { bottom: 5px; border-radius: 0 0 3px 3px; }

/* El chip toma el color de su montón y lleva su punto: así el color y el texto dicen lo mismo,
   y quien no distinga los colores sigue teniendo el código. */
.vl-tabla tr[data-ruma-n] .vl-ruma { color: var(--ruma-c); }
.vl-tabla tr[data-ruma-n] .vl-ruma::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px;
  border-radius: 2px; background: var(--ruma-c);
}
/* Pasar el ratón por una enciende a todas sus hermanas, aunque el filtro las haya separado */
.vl-tabla tr.ruma-ilumina > td { background: color-mix(in srgb, var(--ruma-c) 9%, var(--surface)); }
.vl-tabla tr.ruma-ilumina > td:first-child::before { left: 0; width: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .vl-tabla tr[data-ruma-n] > td:first-child::before { transition: left .12s ease, width .12s ease; }
}

/* ——— El cuadre: las tres cifras contra la VAL interna ————————————————————————————
   Ley ponderada, finos y monto. Las tres tienen que cuadrar contra las VAL internas, que es lo que
   ya está acordado con cada proveedor; el laboratorio va debajo, apagado, porque dice cuánto te
   separas del oro que midió y eso hay que saberlo aunque no frene el cuadre.

   Ley ponderada y finos son la MISMA condición (ley = finos / TMS·factor, y el cuadre no toca las
   TMS): se enseñan las dos porque son los dos idiomas en que se habla de lo mismo. El monto es un
   eje aparte, y solo cuadra solo cuando todos los lotes mueven lo mismo por onza. */
.tc-cuadro { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0; }
/* Los números no se parten: si alguna vez no cupieran, es mejor ver que no caben que leer un
   número cortado por la mitad y creérselo. */
.tc-cuadro th, .tc-cuadro td { padding: 6px 4px; font-size: 13px; text-align: right; white-space: nowrap; }
.tc-cuadro td { font-variant-numeric: tabular-nums; }
/* La unidad, en pequeño al lado del nombre de la fila */
.tc-cuadro tbody th small { font-weight: 600; font-size: 10.5px; color: var(--muted); }
.tc-cuadro tbody th { white-space: normal; }
.tc-cuadro thead th { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border-bottom: 1px solid var(--line); line-height: 1.25; }
.tc-cuadro thead th small { display: block; font-size: 9.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.tc-cuadro tbody th { text-align: left; font-weight: 600; color: var(--ink-2); }
.tc-cuadro tbody tr + tr { border-top: 1px solid var(--line); }
.tc-cuadro tr.fuerte th, .tc-cuadro tr.fuerte td { font-weight: 800; font-size: 14px; color: var(--ink); }
.tc-cuadro .pos { color: var(--good); } .tc-cuadro .neg { color: var(--warn); font-weight: 800; }

.tc-lab-linea, .tc-tms { margin: 0 0 4px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tc-lab-linea b, .tc-tms b { color: var(--ink-2); }
/* En la fila de cada lote, el laboratorio también va en segundo plano */
.tc-lab-ref { display: block; color: var(--muted); font-size: 10.5px; }

/* El veredicto, con la misma gramática que el de la factura de compra: ámbar avisa, no prohíbe */
.tc-veredicto { display: flex; flex-direction: column; gap: 1px; margin: 10px 0 0; padding: 9px 12px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.tc-veredicto b { font-size: 13px; color: var(--ink-2); }
.tc-veredicto span { font-size: 11.5px; color: var(--muted); }
.tc-veredicto.ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: var(--good-soft); }
.tc-veredicto.ok b { color: var(--good); }
.tc-veredicto.mal { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); }
.tc-veredicto.mal b { color: var(--warn); }

/* Quién pone y quién recibe: con dos proveedores en el cuadre hay plata cambiando de empresa */
.tc-provs { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line-strong); }
.tc-provs h4 { margin: 0 0 4px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tc-prov-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; font-size: 12.5px; }
.tc-prov-fila span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.tc-prov-fila b { font-variant-numeric: tabular-nums; }
.tc-prov-fila b.pos { color: var(--good); } .tc-prov-fila b.neg { color: var(--warn); }

/* ——— La fila del cuadre: las tres palancas y lo que sale ————————————————————————
   La LEY mueve las onzas y el dinero a la vez; la RECUPERACIÓN y el DES. INTER mueven el dinero
   sin tocar las onzas. Las tres juntas son lo que permite cuadrar el monto exacto aunque los lotes
   tengan condiciones distintas, que es lo que hace la hoja de verdad.

   Cada fila enseña lo que SALE de ese lote —su monto y sus onzas, con la diferencia contra su VAL
   interna— porque es lo que se mira para decidir dónde subir y dónde bajar. */
/* Envuelve, no reparte en columnas fijas: con cuatro casillas la rejilla dejaba el nombre del
   lote en cero px y el código salía partido. Así el nombre conserva su sitio y las palancas
   bajan solas cuando no caben. */
.tc-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tc-item > .tc-marca { min-width: 0; }
.tc-item > .tc-palancas { flex: 0 1 auto; }
.tc-item > .tc-sale { flex: 0 0 auto; margin-left: auto; }
.tc-item + .tc-item { margin-top: 6px; }
.tc-item.on { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }

.tc-palancas { display: flex; gap: 8px; }
.tc-palancas label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* La unidad DEBAJO del nombre, no al lado: «Des. inter $/oz» en una línea hacía la columna de
   110 px y las cuatro juntas pedían 820, que no caben con el lote y el resultado. */
.tc-palancas label small { display: block; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
/* max-width además de width, y no por gusto: la regla global de formularios es
   «input:not([type=checkbox]):not([type=radio]):not([type=file])», que con sus tres :not() pesa
   0,3,1 y le gana a cualquier «.clase input» (0,1,1). Su width:100% ganaba y las casillas salían
   de 199 px. max-width no lo toca esa regla, así que no hay pelea de especificidad que perder. */
.tc-palancas input { width: 74px; max-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }

/* Lo que sale del lote: el monto manda, las onzas debajo */
.tc-sale { display: grid; grid-template-columns: auto auto; gap: 0 8px; align-items: baseline;
  min-width: 164px; text-align: right; font-variant-numeric: tabular-nums; }
.tc-sale b { font-size: 14px; font-weight: 800; color: var(--ink); }
.tc-sale span { font-size: 12px; color: var(--ink-2); }
.tc-sale i { font-style: normal; font-size: 11.5px; font-weight: 700; min-width: 62px; }
.tc-sale .pos { color: var(--good); } .tc-sale .neg { color: var(--loss); }

@media (max-width: 900px) {
  .tc-item > .tc-marca { flex: 1 1 100%; }
  .tc-palancas { flex-wrap: wrap; }
  .tc-item > .tc-sale { margin-left: 0; text-align: left; }
}

/* ——— En aprobaciones: esta VAL Beijing viene de un cuadre ——————————————————————
   Una VAL cuadrada no se juzga sola: es de UN proveedor y el cuadre reparte entre varios, así que
   por sí sola no cuadra contra su VAL interna. Quien aprueba necesita el panorama entero. */
.aprob-cuadre td { padding-top: 0 !important; font-size: 12px; color: var(--ink-2); }
.aprob-cuadre td > b:first-child { color: var(--gold-text); }
.aprob-cuadre-provs { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 6px; }
.aprob-cuadre-provs span { white-space: nowrap; }
.aprob-cuadre-provs b { font-variant-numeric: tabular-nums; }
.aprob-cuadre-provs b.pos { color: var(--good); } .aprob-cuadre-provs b.neg { color: var(--warn); }

/* ——— El panel del cuadre, de nuevo ————————————————————————————————————————————
   Quien cuadra está llevando una cifra a CERO. Esa cifra tiene que ser la grande y lo primero que
   se lee; las tres filas de detalle van debajo, y el laboratorio y las TMS al pie, apagados,
   porque son referencia y no decisión.

   La barra mide el hueco contra el 5 % del grupo: se vacía según te acercas y da la sensación de
   ir llegando mientras se teclea. No es una escala exacta —no pretende serlo—, es un termómetro. */
.tc-hueco { display: grid; gap: 2px; padding: 13px 14px 12px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-soft); }
.tc-hueco small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--warn); }
.tc-hueco b { font-size: 25px; font-weight: 800; line-height: 1.1; color: var(--warn); font-variant-numeric: tabular-nums; }
.tc-hueco span { font-size: 11.5px; color: color-mix(in srgb, var(--warn) 70%, var(--ink-2)); }
.tc-hueco-barra { display: block; height: 5px; margin-top: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 18%, transparent); overflow: hidden; }
.tc-hueco-barra em { display: block; height: 100%; border-radius: 999px; background: var(--warn); }
@media (prefers-reduced-motion: no-preference) { .tc-hueco-barra em { transition: width .18s ease; } }

/* Cuando cuadra, el mismo bloque cambia de signo: verde y sin barra que llenar */
.tc-hueco.ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: var(--good-soft); }
.tc-hueco.ok small, .tc-hueco.ok b { color: var(--good); }
.tc-hueco.ok span { color: color-mix(in srgb, var(--good) 65%, var(--ink-2)); }
.tc-hueco.ok .tc-hueco-barra { background: color-mix(in srgb, var(--good) 18%, transparent); }
.tc-hueco.ok .tc-hueco-barra em { background: var(--good); }
/* Y sin lotes marcados, apagado: no hay nada que cuadrar todavía */
.tc-hueco.vacio { border-color: var(--line); background: var(--surface-2); }
.tc-hueco.vacio small { color: var(--muted); }
.tc-hueco.vacio b { color: var(--ink-2); font-size: 19px; }
.tc-hueco.vacio span { color: var(--muted); }
.tc-hueco.vacio .tc-hueco-barra { display: none; }

/* La columna de la diferencia, con aire y pegada al borde justo */
.tc-cuadro th:last-child, .tc-cuadro td:last-child { padding-right: 0; min-width: 76px; }
.tc-cuadro tbody th { padding-left: 0; }

/* El pie: referencia, en segundo plano */
.tc-pie { display: grid; gap: 2px; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line); }
.tc-pie > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tc-pie dt { font-size: 11.5px; color: var(--muted); }
.tc-pie dt small { font-size: 10px; }
.tc-pie dd { margin: 0; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tc-pie dd b { font-weight: 700; }
.tc-pie dd span { color: var(--muted); }

/* El consejo ya no repite el número: lo dice el bloque de arriba */
.tc-resultado .tc-veredicto { margin-top: 10px; }
.tc-forzar { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--ink-2); cursor: pointer; }

/* El subtítulo del lote envuelve en vez de cortarse: un dato a medias no sirve de nada. */
.tc-item > .tc-marca span small { display: block; white-space: normal; }
/* Con tope: sin él, el nombre crece hasta llenar la línea y empuja las palancas abajo aunque
   hubiera sitio de sobra para las tres cosas. */
.tc-item > .tc-marca { flex: 1 1 230px; max-width: 360px; }

/* ═══ EL HOVER EN PANTALLAS TÁCTILES ═══
   Al tocar, el navegador dispara :hover y lo deja puesto hasta que tocas otra cosa. Sin esto,
   la tarjeta que tocaste se queda levantada: en balanza y en cancha, que se usan con el
   teléfono en la mano, quedaban varias flotando a la vez. Se quita el movimiento; el color y
   la sombra se quedan, que no estorban. */
@media (hover: none), (pointer: coarse) {
  .btn:hover,
  .ck-sede:hover,
  .dx-chips button:hover,
  .ex-planta:hover,
  .ge-t:hover,
  .gx-kpi:hover,
  .kpi:hover,
  .lx-docfila:hover,
  .lx-paso:hover,
  .md-tarea:hover,
  .nav a:hover,
  .pr-fase-card:hover,
  .prov-card:hover,
  .prov-opcion:hover,
  .rec-e a:hover,
  .reclamo-card:hover,
  .tz-sug a:hover,
  .vl-bandeja:hover,
  a.kpi:hover,
  a.rg-celda:hover,
  a.tz-nodo:hover .tz-bola { transform: none; }
}

/* ═══ LAS TABLAS ANCHAS, EN FICHAS EN EL CELULAR ═══
   Una tabla de 1200px dentro de una caja con scroll es, en un teléfono, una tabla que se
   arrastra de lado: para ver el importe hay que irse a la derecha y ya no se ve de qué lote
   era. Cada fila pasa a ser una ficha; la primera celda es el título y las demás se leen
   «etiqueta ....... valor», con el nombre que lleva cada celda en data-col.
   Vale para CUALQUIER tabla que dibuje tabla(), que son diecinueve pantallas. */
@media (max-width: 820px) {
  .table-scroll { overflow: visible; max-height: none; margin: 0; padding: 0; }
  .table-scroll table.data { min-width: 0 !important; display: block; }
  .table-scroll table.data thead { display: none; }
  .table-scroll table.data tbody { display: flex; flex-direction: column; gap: 10px; }
  .table-scroll table.data tbody tr { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .table-scroll table.data td { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    flex: 0 0 100%; padding: 2px 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; }
  /* La etiqueta la pone la celda, no la cabecera, que aquí no existe */
  .table-scroll table.data td[data-col]:not([data-col=""])::before {
    content: attr(data-col); flex: none; font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
  /* La primera celda es el título de la ficha: sin etiqueta y a lo ancho */
  .table-scroll table.data td:first-child { flex: 0 0 100%; font-weight: 700; font-size: 14.5px;
    margin-bottom: 4px; padding-bottom: 6px !important; border-bottom: 1px solid var(--line) !important; }
  .table-scroll table.data td:first-child::before { display: none; }
  /* Una celda vacía no merece una línea en la ficha */
  .table-scroll table.data td:empty { display: none; }
  .table-scroll table.data tfoot { display: block; margin-top: 10px; }
  .table-scroll table.data tfoot tr { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 12px 14px;
    border-radius: 14px; background: var(--surface-2); font-weight: 700; }
  .table-scroll .tabla-mas tr, .table-scroll .tabla-mas td { display: block; flex: 1 1 100%; }
  .table-scroll .tabla-mas td::before { display: none; }
}

/* ═══ NOMBRES LARGOS EN COLUMNAS ESTRECHAS ═══
   Una razón social peruana de 85 caracteres en una columna de 100 px se parte en doce
   renglones y revienta el alto de la fila. Dos renglones se leen; doce no. El nombre
   entero queda en el «title», y casi siempre la celda es además un enlace a su ficha. */
.celda-nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; }

/* ═══ LA COLUMNA DEL PROVEEDOR NECESITA SITIO ═══
   «COMPAÑÍA MINERA E INVERSIONES SAN FRANCISCO DE ASÍS DEL PERÚ S.A.C.» son 85 caracteres, y
   razones sociales así hay a montones. Con 114 px de ancho el nombre se partía en una docena
   de renglones y la fila crecía a 249 px: una tabla con filas de ese alto no se puede barrer
   con la vista, que es justo para lo que está.
   Se le da suelo de ancho —el navegador se lo quita a las columnas de números, que no lo
   necesitan— en vez de recortar el nombre: un RUC o una razón social a medias no sirven.
   Vale para las 17 pantallas que listan proveedores, porque cada celda lleva su columna en
   data-col desde que las tablas se vuelven fichas en el celular. */
table.data td[data-col="Proveedor"], table.data th:nth-child(1):not(:only-child) { overflow-wrap: anywhere; }
@media (min-width: 821px) {
  table.data td[data-col="Proveedor"] { min-width: 190px; }
}

/* ═══ Revisar una VAL Beijing antes de aprobarla ═══
   Quien aprueba no llena el documento, lo revisa. La lista contesta cada punto antes de que
   lo pregunte: verde es «ya está comprobado, no lo mires», ámbar es «léelo antes de firmar»,
   rojo es «esto no se firma». El color va en la barra de la izquierda y en el icono, nunca en
   el texto del punto, que tiene que leerse igual de bien en los tres casos. */
.vr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vr-punto { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start;
            padding: 10px 12px 10px 10px; border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
            border-radius: 12px; background: var(--surface-2); }
.vr-punto > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.vr-punto > i svg { width: 15px; height: 15px; }
.vr-punto b { font-size: 14px; }
.vr-punto p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.vr-ok { border-left-color: var(--good); }
.vr-ok > i { background: var(--good-soft); color: var(--good); }
.vr-aviso { border-left-color: var(--warn); }
.vr-aviso > i { background: var(--warn-soft); color: var(--warn); }
.vr-falta { border-left-color: var(--bad); background: var(--bad-soft); }
.vr-falta > i { background: var(--bad); color: #FFFFFF; }
/* Los lotes que fallan, para no tener que buscarlos en la tabla de abajo */
.vr-lotes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.vr-lotes span { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); }

.vr-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .vr-dos { grid-template-columns: minmax(0, 1fr); } }
.vr-quien { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vr-quien > div { display: grid; gap: 1px; }
.vr-quien span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.vr-quien b { font-size: 14px; }
.vr-quien small { font-size: 11.5px; color: var(--muted); }
.vr-nota { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }

/* ═══ El camino para corregir una VAL ═══
   «Una vez aprobado es como que se cerró.» El circuito existía pero no se podía leer: aprobada la
   VAL Beijing la pantalla no ofrecía nada ni decía por qué. Esto lo cuenta en pasos numerados —el
   que toca ahora en oro, los siguientes apagados, el que traba en rojo— y debajo enseña el
   historial, que es lo que de verdad frena a la gente antes de tocar algo aprobado. */
.vc-cab { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); background: var(--surface-2); }
.vc-cab b { font-size: 15px; }
.vc-cab p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.vc-bien { border-left-color: var(--good); background: var(--good-soft); }
.vc-aviso { border-left-color: var(--gold); background: var(--gold-soft); }
.vc-frena { border-left-color: var(--bad); background: var(--bad-soft); }

.vc-pasos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.vc-paso { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; position: relative; }
.vc-paso:last-child { padding-bottom: 0; }
/* La línea que une los pasos: nace del número y muere en el siguiente, nunca después del último */
.vc-paso:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.vc-paso > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal;
               font-weight: 800; font-size: 13px; background: var(--surface-3); color: var(--muted); z-index: 1; }
.vc-paso b { font-size: 14px; }
.vc-paso p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.vc-paso .btn { margin-top: 8px; }
/* El paso que toca ahora es el único que se lee a la primera; los demás están, pero esperan */
.vc-ahora > i { background: var(--gold); color: #FFFFFF; }
.vc-ahora b { color: var(--ink); }
.vc-luego > i { background: var(--surface-3); color: var(--muted); }
.vc-luego b, .vc-luego p { color: var(--muted); }
.vc-traba > i { background: var(--bad); color: #FFFFFF; }

.vc-hist { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.vc-hist h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vc-hist ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vc-hist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-2); }
.vc-hist li b { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.vc-hist li em { font-style: normal; font-size: 12px; color: var(--good); }
.vc-hist li p { flex: 1 1 100%; margin: 0 0 0 30px; font-size: 12.5px; color: var(--muted); }
.vc-vig b { color: var(--gold-text); }

/* Lo programado que todavía no sale, en la exposición de una planta. Se distingue de las tres
   etapas de carga enviada a propósito: comprometido no es lo mismo que entregado, y pintarlo
   igual haría creer que el descubierto ya bajó. */
.ex-etapa.prog { border-style: dashed; border-color: var(--gold); background: var(--gold-soft); }
.ex-etapa.prog b { color: var(--gold-text); }

/* Lo que ya salió del lote y lo que está comprometido en un envío. La cancha mostraba la TMH de
   balanza entera aunque la mitad ya fuera camino a la planta, y con ese número se decide qué
   despachar: se decidía sobre mineral que ya no estaba. */
.ck-salio, .ck-reserv { display: block; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-salio { color: var(--muted); }
.ck-reserv { color: var(--gold-text); }
/* Un montón del que ya salió una parte: lo que queda es un remanente, no el montón entero */
.ck-blend.parcial { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); border: 1px dashed var(--gold); }