/* 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;
  --muted: #8790AB;
  --line: #E4E7F0;
  --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); }
.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; } }
main > * { animation: subir .45s cubic-bezier(.2, .8, .2, 1) both; }
main > *:nth-child(2) { animation-delay: .04s; }
main > *:nth-child(3) { animation-delay: .08s; }
main > *:nth-child(4) { animation-delay: .12s; }
main > *:nth-child(5) { animation-delay: .16s; }
main > *:nth-child(6) { animation-delay: .2s; }
main > *:nth-child(n+7) { animation-delay: .24s; }

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

/* ——— 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; 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 */
.barra-sup { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 30; }
.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); }
.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 cubic-bezier(.2, .8, .2, 1) 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; box-shadow: var(--shadow); }
.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 { color: var(--muted); 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; }
.kpi { --k: var(--brand); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 3px; min-width: 0; box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--k) 16%, 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 { width: 40px; height: 40px; border-radius: 13px; background: color-mix(in srgb, var(--k) 15%, var(--surface)); color: var(--k); display: grid; place-items: center; margin-bottom: 10px; }
.kpi-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.kpi-value { font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -.025em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-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 cubic-bezier(.2, .8, .2, 1) 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 ——— */
.table-scroll { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
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 { font-weight: 800; 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; font-weight: 700; 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); }

/* ——— 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; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, #2B4E80, #152A45); color: #fff; box-shadow: 0 8px 18px -8px rgba(21, 42, 69, .75); }
.btn-primary:hover { box-shadow: 0 12px 22px -8px rgba(21, 42, 69, .9); }
.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; font-variant-numeric: tabular-nums; }
.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 cubic-bezier(.2, .8, .2, 1); }
.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: auto; max-height: 68vh; 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 cubic-bezier(.2, .8, .2, 1) both; }
.c-bar.neg { fill: var(--loss); transform-origin: top; }
.c-bar:hover { fill: var(--gold); }

/* ——— Pantalla de ingreso ——— */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--bg); }
.login-arte { position: relative; overflow: hidden; color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(80% 55% at 85% 0%, rgba(214, 170, 70, .26), transparent 60%), linear-gradient(160deg, #070B0B 0%, #10171A 62%, #1A1810 100%); }
.login-arte::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -120px; bottom: -160px; border: 60px solid rgba(214, 170, 70, .07); }
.login-logo { display: block; width: min(260px, 60%); height: auto; }
.login-arte h2 { font-size: 40px; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 12px; font-weight: 800; max-width: 14ch; }
.login-arte p { font-size: 16px; color: rgba(255, 255, 255, .85); max-width: 42ch; 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; padding: 40px 24px; }
.login-caja { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; 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; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.login-caja .btn { width: 100%; min-height: 48px; font-size: 15px; }
.login-error { background: var(--bad-soft); color: var(--bad); border-radius: 12px; padding: 10px 13px; font-weight: 600; font-size: 13.5px; }

/* ——— 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 { max-height: 60vh; overflow: 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; }
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; margin-top: 12px; }
.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-size: 12px; 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; background: #1F3B63; color: #FFFFFF; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-align: left; border-color: rgba(255, 255, 255, .14); }
table.hoja thead tr.grupos th { height: 22px; background: #0F2033; color: #E3B54F; text-align: center; font-size: 10px; letter-spacing: .14em; }
table.hoja thead tr.cols th { top: 22px; height: 30px; }
table.hoja thead tr.cols th.ed { box-shadow: inset 0 -3px 0 #C9962B; }
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 .fz1 { min-width: 106px; max-width: 106px; }
table.hoja .fz2 { left: 106px; min-width: 100px; max-width: 100px; box-shadow: 2px 0 0 var(--line-strong); font-family: 'IBM Plex Mono', Consolas, monospace; }
table.hoja thead .fz1, table.hoja thead .fz2, table.hoja thead .fzg { z-index: 5; }
table.hoja thead tr.cols th.fz2 { box-shadow: 2px 0 0 rgba(255, 255, 255, .3); }
table.hoja thead tr.cols th.fz2.ed { box-shadow: inset 0 -3px 0 #C9962B, 2px 0 0 rgba(255, 255, 255, .3); }
table.hoja td.fz1 a { font-family: 'IBM Plex Mono', Consolas, monospace; font-weight: 700; text-decoration: none; }
table.hoja tbody tr:nth-child(even) td { background: var(--surface-2); }
table.hoja tbody tr.pend td { background: color-mix(in srgb, var(--warn) 11%, var(--surface)); }
table.hoja tbody tr.nuevo td.fz1 { box-shadow: inset 4px 0 0 var(--warn); }
table.hoja td.bal { color: var(--muted); font-style: italic; }
table.hoja td.nc { color: var(--loss); font-weight: 700; }
table.hoja td.activa { outline: 2px solid #1F7A4C; outline-offset: -2px; }
table.hoja td.editando { padding: 0; overflow: visible; }
table.hoja td.editando input:not([type=checkbox]) { width: 100%; min-width: 150px; height: 25px; min-height: 0; padding: 0 6px; border: 0; border-radius: 0; font-size: 12px; box-shadow: inset 0 0 0 2px #1F7A4C; 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 { height: 30px; background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); font-weight: 800; font-size: 11px; letter-spacing: .05em; border-top: 2px solid var(--warn); }
table.hoja tbody tr.sep td span { position: sticky; left: 12px; }
table.hoja tbody tr.g1 td.gg { background: color-mix(in srgb, #3B82F6 13%, var(--surface)); }
table.hoja tbody tr.g2 td.gg { background: color-mix(in srgb, #8B5CF6 13%, var(--surface)); }
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); padding: 14px 16px 14px; }
.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 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 10px; }
.dx-chips button { --c: #64748B; display: inline-flex; align-items: center; gap: 7px; padding: 5px 6px 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.dx-chips button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.dx-chips button b { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); font-size: 11.5px; text-align: center; font-variant-numeric: tabular-nums; }
.dx-chips button:hover { border-color: var(--c); color: var(--ink); transform: translateY(-1px); }
.dx-chips button.activo { border-color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--ink); }
.dx-chips button.activo b { background: var(--c); color: #FFFFFF; }
.dx-chips button.vacio { opacity: .45; }
.dx-sig { margin-left: auto; font-size: 12.5px; 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; min-height: 32px; margin-bottom: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.dx-formula b { padding: 7px 10px; background: var(--surface-3); color: var(--ink-2); 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); border-radius: 14px; }
/* Encabezados con el color de cada grupo */
table.hoja thead tr.grupos th { background: var(--g, #0F2033); color: #FFFFFF; letter-spacing: .12em; }
table.hoja thead tr.cols th { box-shadow: inset 0 3px 0 var(--g, transparent); }
table.hoja thead tr.cols th.ed { box-shadow: inset 0 3px 0 var(--g, transparent), inset 0 -3px 0 #C9962B; }
table.hoja thead tr.cols th.fz2 { box-shadow: inset 0 3px 0 var(--g, transparent), 2px 0 0 rgba(255, 255, 255, .3); }
table.hoja thead tr.cols th.fz2.ed { box-shadow: inset 0 3px 0 var(--g, transparent), inset 0 -3px 0 #C9962B, 2px 0 0 rgba(255, 255, 255, .3); }
table.hoja td { height: 27px; font-size: 12.5px; }
table.hoja.amplia td { height: 36px; font-size: 13.5px; }
table.hoja tbody tr.fila-act td { box-shadow: inset 0 1px 0 color-mix(in srgb, #1F7A4C 45%, transparent), inset 0 -1px 0 color-mix(in srgb, #1F7A4C 45%, transparent); }
table.hoja tbody tr.fila-act td.fz1 { box-shadow: inset 4px 0 0 #1F7A4C; }
table.hoja td.fz2 { font-weight: 700; }
table.hoja .fz1 { min-width: 128px; max-width: 128px; }
table.hoja .fz2 { left: 128px; min-width: 108px; max-width: 108px; }
table.hoja .ch { display: inline-block; max-width: 100%; padding: 0 8px; overflow: hidden; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 18px; 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); border-radius: 16px; background: var(--surface-2); 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; grid-template-columns: 1fr auto 52px; 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: 24px; padding-bottom: 14px; 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: 19px; letter-spacing: .32em; font-weight: 800; color: #152A40; text-wrap: balance; }
.formato .f-zona { display: block; margin-top: 4px; letter-spacing: .28em; font-weight: 700; color: #8A6212; font-size: 11px; }
.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: 20px; color: #152A40; }
.formato .f-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; margin: 14px 0; }
.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; }
.formato .f-tabla tfoot th { text-align: right; background: #F3EBD6; }
.formato .f-num { font-weight: 800; }
.formato .f-pie { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; margin-top: 16px; align-items: start; }
.formato h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; 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: repeat(2, minmax(0, 1fr)); gap: 60px; margin-top: 46px; }
.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: 1fr auto auto; align-items: center; gap: 18px; margin-top: 12px; padding: 7px 10px;
  border: 1px solid #C8D2DF; border-left: 3px solid var(--gold, #B8860B); border-radius: 4px; background: #FBFCFD; }
.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; }
}
@media print {
  .rail, .barra-sup, .topbar .tools, .no-print, .toasts, .banner { display: none !important; }
  .app { display: block; }
  main { padding: 0; }
  main > * { animation: none !important; }
  body { background: #fff; }
  .panel { box-shadow: none; border: 0; padding: 0; }
  .table-scroll { overflow: visible; margin: 0; padding: 0; }
}

@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; 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 cubic-bezier(.2, .8, .2, 1); 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; }
  .barra-sup { gap: 8px; }
  .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: 14px 12px; 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); padding: 6px; 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; box-shadow: var(--shadow); 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; font-variant-numeric: tabular-nums; 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-nota { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.gb-quien { margin: -4px 0 0; 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); }

/* ——— 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; }
.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); }
}

/* ——— 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; }
.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; }
.bz-unidad { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.bz-unidad label { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.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-pregunta { margin: 14px 0 6px; font-weight: 800; font-size: 13.5px; }
.bz-metodo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.bz-metodo .bz-pregunta { grid-column: 1 / -1; margin-bottom: 0; }
.bz-metodo[hidden], .bz-uno[hidden], .bz-vacio[hidden] { display: none; }
.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; }
.bz-ahora-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.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; }
.tk-lote { 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; }
.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; }
.tk-firmas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 34px; }
.tk-firmas div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.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; }
}

@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 cubic-bezier(.2, .8, .2, 1); }
.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 cubic-bezier(.2, .8, .2, 1); }
.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 cubic-bezier(.2, .8, .2, 1); 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; }
.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); }
@media (max-width: 1100px) {
  .kx-estado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kx-op { display: none; }
  .kx-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .kx-estado { grid-template-columns: minmax(0, 1fr); } .kx-rango { margin-left: 0; } .kx-tramo { grid-template-columns: 80px minmax(0, 1fr); } .kx-tramo-num { grid-column: 1 / -1; text-align: left; } }
@media print { .kx-barra, .kx-mov-herr { display: none !important; } .kx-mov-scroll { max-height: none; } .kx-estado, .kx-ind { break-inside: avoid; } }
.z-ok { background: #bfe6cc; } .z-corto { background: #f6dfa4; } .z-mal { background: #f4c2c2; }
.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); }
.vl-ir { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vl .vl-ir input:not([type=checkbox]) { width: 190px; min-width: 0; padding: 7px 12px; border-radius: 999px; font-size: 13px; }

.vl-mesa-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.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; }

.vl-grupos { display: grid; grid-template-columns: repeat(auto-fill, 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: 6px; padding: 4px 14px; }
.vl-grupo li label { display: flex; flex: 1; align-items: center; gap: 6px; cursor: pointer; min-width: 0; font-size: 13px; }
.vl-grupo li label small { 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)); } }
.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%; min-width: 1350px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.vb-tabla thead th { padding: 6px 5px; background: var(--fs); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; }
.vb-tabla td { padding: 5px 4px; 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]) { width: 70px; min-width: 0; min-height: 0; padding: 4px 5px; border: 1px solid var(--line-strong); border-radius: 7px; text-align: right; font-size: 12.5px; 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-ir { 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-tablero { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.ng-etapa-t { --c: var(--line-strong); position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 22px; border-radius: 13px; color: inherit; text-decoration: none; min-width: 0; transition: background .15s; }
.ng-etapa-t + .ng-etapa-t::before { content: ''; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); opacity: .5; }
.ng-etapa-t:hover { background: var(--surface-2); }
.ng-etapa-t.reportar { --c: var(--int); } .ng-etapa-t.reportado { --c: var(--rep); } .ng-etapa-t.canjear { --c: var(--prp); } .ng-etapa-t.encanje { --c: var(--prv); } .ng-etapa-t.cerrado { --c: var(--cie); }
.ng-etapa-n { flex: none; min-width: 44px; padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--c); font-size: 22px; font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.ng-etapa-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ng-etapa-txt b { font-size: 14px; }
.ng-etapa-txt small { overflow: hidden; font-size: 11.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.ng-etapa-t.on { background: color-mix(in srgb, var(--c) 9%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); }
.ng-etapa-t.on .ng-etapa-n { background: var(--c); color: var(--surface); }

.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); border-radius: var(--radius); box-shadow: var(--shadow); }
.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(130px, 1fr)); gap: 8px 18px; margin: 10px 0 0; }
.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); }
.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) {
  .ng-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ng-etapa-t + .ng-etapa-t::before { display: none; }
  .carga-leyes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ng-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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 { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.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-tablero { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ng-etapa-t.remuestreo { --c: var(--rmu); }
.ng-etapa.remuestreo { --c: var(--rmu); }
.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: 1280px) { .ng-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ng-etapa-t + .ng-etapa-t::before { display: none; } }
@media (max-width: 760px) { .ng-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .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; }
@media print { .entorno-aviso { display: none; } }

/* ═══════════ 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)); }
.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; }
.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); }

.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-etapa-t.sinlab { --c: var(--warn); }
.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; }
@media print { .volver-btn, .miga { display: none !important; } }
/* 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)); }
@media (max-width: 1100px) { .dp-tablero { grid-template-columns: minmax(0, 1fr); } .dp-lotes { position: static; max-height: 420px; } .dp-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Programación de despacho (pr-) */
.pr { display: flex; flex-direction: column; gap: 14px; }
.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; }
.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; }
@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); }

/* 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; font-variant-numeric: tabular-nums; } .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); }

/* 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; align-items: center; gap: 4px; }
.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; grid-template-columns: minmax(0, 1fr) 62px 66px; align-items: center; gap: 8px; padding: 4px 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; grid-template-columns: 30px auto minmax(0, 1fr) 90px minmax(150px, 190px) 130px; 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; }
.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]) { min-height: 42px; font-size: 17px; 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(250px, 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; grid-template-columns: auto minmax(0, 1fr) auto; 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); }
.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-filas > li > .dpn-remanente { grid-row: auto; }
.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; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); 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 { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.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; }
.rc-campo small, .rc-lote-cod small, .rc-lote-tm 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.4fr) 90px minmax(170px, 1fr) 150px 170px; 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.4fr) 90px minmax(200px, 1.3fr) 170px; }
.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 { display: flex; flex-direction: column; gap: 4px; }
.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 > 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); }
.mc-mesa-scroll { overflow-x: auto; max-height: 56vh; overflow-y: auto; }
.mc-tabla { width: 100%; min-width: 930px; 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); }
.mf-cuerpo { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(380px, 1.3fr) minmax(360px, 1.2fr); }
.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(120px, 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; margin: 30px 6px 34px; 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; top: 20px; 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 { top: auto; bottom: 20px; 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; bottom: 16px; 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 */
.area-nav { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; 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; }
.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; }
}
@media print { .area-nav { display: none !important; } }
/* 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 cubic-bezier(.2, .8, .2, 1) 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 cubic-bezier(.2, .8, .2, 1) 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; } }
@media print { .notif-pila { display: none !important; } }
/* 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; }
.vl-grupo { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.vl-grupo legend { display: flex; align-items: baseline; gap: 8px; padding: 0 6px; font-size: 13px; font-weight: 800; color: var(--brand-text); }
.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 { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: var(--surface); 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-item.on { background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.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 */
.tc-armar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; 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); }
.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-forzar { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.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; }
.sub-tabs { margin: -4px 0 14px; padding: 3px; border-radius: 12px; 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) ——— */
.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; }
.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; }

/* ——— 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) ——— */
.flujo { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; padding: 8px 10px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; }
.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); }
@media print { .barra-puntos { position: static; box-shadow: none; } }

/* ——— 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 b { font-variant-numeric: tabular-nums; }
.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 cubic-bezier(.2,.8,.2,1); }
.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; }
.table-scroll table.data thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
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: translateY(0); }
: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 */
.ng-tablero { padding: 8px; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); }
.ng-etapa-t { flex-direction: column; align-items: stretch; gap: 8px; padding: 13px 14px 11px; }
.ng-etapa-t + .ng-etapa-t::before { top: 26px; }
.ng-etapa-t .ng-etapa-n {
  align-self: flex-start; min-width: 34px; height: 30px; padding: 0 9px; border-radius: 9px;
  display: grid; place-items: center; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c);
}
.ng-etapa-t.on { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent), 0 6px 16px -10px color-mix(in srgb, var(--c) 70%, transparent); }
.ng-etapa-t::after { content: ''; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--c) 18%, transparent); }
.ng-etapa-t.on::after { background: var(--c); }

/* 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; }

/* 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-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; }
}