/* Sistema de gestión de la red · demo. Se apoya en ../assets/bagels.css (tokens, fuentes, .btn, .ticket, .sello, .row)
   y no redefine sus valores. Dirección: "libreta de reparto de la planta": papel liso y calmo para trabajar, barra café
   como el appbar del deck, oliva solo para la acción principal y el estado activo, kraft para lo que viaja
   (pedido, remito, liquidación) y sello de tinta para las conformidades. Una sola separación por superficie: borde fino. */

:root { --side: 252px; --bnav: 84px; /* alto de la píldora + su margen inferior */ --r-ui: 12px; --r-in: 10px; }
body { font-size: 1rem; }
/* herramienta de trabajo: las semillas quedan apenas sugeridas */
body::before { opacity: .12; }
body::after { opacity: .04; }
.sr { position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.pad { padding: 4px 0 0; margin: 0; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
p { margin: 0; }
h2, h3 { margin: 0; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- barra de demo ---------- */
:root { --strip-h: 46px; }
.demo-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px 0 16px;
  background: var(--olive-soft); color: var(--olive-ink); font-size: .8rem; border-bottom: 1px solid #D3D7B4; }
.demo-strip p { color: var(--olive-ink); letter-spacing: .01em; }
.demo-strip .ds-full { display: none; }
.ds-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.ds-actions a, .ds-actions button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; background: none;
  color: var(--olive-ink); font: 700 .8rem var(--font); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(63 74 33 / .45); cursor: pointer; }
.ds-actions button { display: none; }

/* ---------- shell ---------- */
.shell { display: block; }
@media (min-width: 1024px) { .shell { background: linear-gradient(to right, var(--card) var(--side), transparent 0); } .side { align-self: start; } }
.side { display: none; }
.work { min-width: 0; padding-bottom: calc(var(--bnav) + env(safe-area-inset-bottom) + 24px); }

.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.top-txt { min-width: 0; }
.top-ctx { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.top-ctx .ico { width: 15px; height: 15px; }
.top-ctx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-title { font-size: 1.55rem; line-height: 1.05; margin-top: 3px; outline: none; }
.top-side { display: flex; align-items: center; gap: 10px; flex: none; }
.top-date { display: none; font-size: .86rem; color: var(--muted); }

.viewas { position: relative; }
.viewas-btn { min-width: 7.2rem; display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; min-height: 48px; padding: 4px 10px 4px 14px; border: 1.5px solid var(--line-strong);
  border-radius: 14px; background: var(--card); cursor: pointer; text-align: left; }
.viewas-btn .ico { width: 16px; height: 16px; color: var(--muted); grid-column: 2; grid-row: 1 / 3; justify-self: end; }
.viewas-btn { grid-template-columns: 1fr auto; }
.viewas-k, .viewas-v { grid-column: 1; line-height: 1.15; }
.viewas-k { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.viewas-v { font-weight: 700; font-size: .92rem; }
.viewas-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(320px, calc(100vw - 24px)); padding: 8px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 48px -24px rgb(43 33 26 / .45), 0 2px 6px rgb(43 33 26 / .08); }
.va-k { font: 700 .7rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 10px 10px 8px; }
.viewas-menu > button { position: relative; display: grid; width: 100%; min-height: 56px; padding: 9px 40px 9px 12px; border: 0; border-radius: 10px;
  background: none; text-align: left; cursor: pointer; }
.viewas-menu > button:hover { background: var(--paper); }
.viewas-menu > button[aria-pressed="true"] { background: var(--olive-soft); }
.viewas-menu > button b { font-size: .95rem; }
.viewas-menu > button span { font-size: .82rem; color: var(--muted); }
.viewas-menu > button .ico { position: absolute; right: 12px; top: 50%; translate: 0 -50%; color: var(--olive-ink); }
.va-foot { display: flex; gap: 6px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.va-foot button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: var(--paper); font-weight: 700; font-size: .86rem; cursor: pointer; }

.main { padding: 16px 16px 8px; outline: none; max-width: 1320px; }
.main.enter .view { animation: rise .28s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.view { display: grid; gap: 16px; }

/* barra inferior (celular y tablet) */
/* barra flotante tipo píldora: separada del borde, con una pastilla oliva que se desliza al ítem activo */
.bottom-nav { position: fixed; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding: 6px; border-radius: 999px; color: var(--soft);
  background: rgb(255 253 248 / .97); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -18px rgb(43 33 26 / .45), 0 2px 8px rgb(43 33 26 / .08); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .bottom-nav { background: rgb(255 253 248 / .88); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
}
@media (prefers-reduced-transparency: reduce) { .bottom-nav { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.bottom-nav::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n, 4)); border-radius: 999px;
  background: var(--olive-soft); transform: translateX(calc(var(--idx, 0) * 100%)); transition: transform .38s var(--spring); }
.bottom-nav a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px;
  padding: 4px 2px; border-radius: 999px; text-decoration: none; font-size: .7rem; font-weight: 600; color: var(--muted); min-width: 0; }
.bottom-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav a .ico { width: 22px; height: 22px; }
.bottom-nav a[aria-current="page"] { color: var(--olive-ink); font-weight: 800; }
.bottom-nav .nb { position: absolute; top: 3px; left: calc(50% + 8px); }
.bottom-nav[style*="--n: 5"] a, .bottom-nav[style*="--n:5"] a { font-size: .64rem; }
@media (prefers-reduced-motion: reduce) { .bottom-nav::before { transition: none; } }
.nb { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--olive); color: #fff;
  font: 800 .72rem/1 var(--font); font-variant-numeric: tabular-nums; }
.nb.dot { min-width: 9px; width: 9px; height: 9px; padding: 0; }

/* ---------- piezas comunes ---------- */
.btn .ico { width: 18px; height: 18px; }
.btn.sm { min-height: 44px; padding: 0 16px; font-size: .92rem; }
.btn.full { width: 100%; }
.btn.quiet { border-width: 1.5px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.danger { background: var(--bad); }
[data-action="enviar-liqs"] { min-width: 15.5em; }
.btn:hover:not(:disabled) { filter: brightness(1.06); }
.mini { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--card); color: var(--soft); font: 700 .84rem var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.mini:hover { background: var(--paper); }
.mini .ico { width: 16px; height: 16px; }
.label { display: block; }

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--paper-2); color: var(--soft);
  font: 700 .78rem/1.2 var(--font); white-space: nowrap; }
.tag .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.olive { background: var(--olive-soft); color: var(--olive-ink); }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ui); padding: 12px 14px 13px; min-width: 0; }
.kpi-l { font-size: .8rem; font-weight: 700; color: var(--muted); line-height: 1.25; }
.kpi-v { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-v small { font-family: var(--font); font-size: .9rem; font-weight: 700; color: var(--muted); }
.kpi-f { font-size: .78rem; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.kpi-v { color: var(--olive); }
.kpi.warn .kpi-v { color: var(--warn); }
.kpi.warn { border-color: #E5C2A9; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0; }
.panel.flush { padding: 0; overflow: hidden; }
.panel.flush > .panel-h { padding: 16px 16px 12px; }
.panel-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.panel.flush > .panel-h { margin: 0; border-bottom: 1px solid var(--line); }
.panel h2, .empty h2 { font-family: var(--font); font-weight: 800; font-size: 1.05rem; text-transform: none; line-height: 1.25; }
.panel-h p { font-size: .86rem; color: var(--muted); margin-top: 2px; }
.panel-foot { display: grid; gap: 8px; margin-top: 14px; }
.count-pill { font-weight: 800; font-size: .86rem; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); }

.lede { display: grid; gap: 6px; }
.lede p { max-width: 72ch; color: var(--soft); font-size: .95rem; }
.lede-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem !important; color: var(--muted) !important; }
.banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-ui); background: var(--paper-2); color: var(--soft); font-size: .9rem; }
.banner .ico { margin-top: 2px; color: var(--muted); }
.banner p { flex: 1; max-width: 80ch; }
.banner.ok { background: var(--ok-soft); color: var(--ok); flex-wrap: wrap; align-items: center; }
.banner.ok .ico { color: var(--ok); margin: 0; }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--card); color: var(--soft); font-weight: 700; font-size: .86rem; cursor: pointer; }
.seg button span { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg button[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: #fff; }
.seg button[aria-pressed="true"] span { color: #fff; opacity: .85; }

.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 16px; background: var(--card); border: 1px dashed var(--line-strong); border-radius: 14px; }
.panel .empty, .ticket-wrap .empty { border: 0; background: none; padding: 24px 8px; }
.empty-art { width: 84px; color: var(--line-strong); margin-bottom: 4px; }
.empty p { color: var(--muted); max-width: 46ch; font-size: .92rem; }
.empty .btn { margin-top: 8px; }

/* barras de valor dentro de tablas */
.vbar { display: grid; gap: 5px; min-width: 0; }
.vbar i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(var(--kraft-2), var(--kraft-2)) 0 0 / var(--w) 100% no-repeat, var(--paper-2); }
.vbar.warm i, .vbar.warn i { background-image: linear-gradient(var(--warn), var(--warn)); }
.vbar.bad i { background-image: linear-gradient(var(--bad), var(--bad)); }
.vbar.ok i { background-image: linear-gradient(var(--olive-2), var(--olive-2)); }
.mpct { font-weight: 800; }
.mpct.warn { color: var(--warn); } .mpct.bad { color: var(--bad); }

/* ---------- tablas ---------- */
/* las tablas pasan a tarjetas según el ancho de su columna, no del viewport (con barra lateral y panel al costado, a 1024–1366 no entran) */
.tbl-wrap { width: 100%; container: tbl / inline-size; }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; vertical-align: middle; }
.tbl thead th { font: 700 .7rem/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--paper);
  border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.tbl thead th .u { display: block; letter-spacing: .04em; text-transform: none; font-weight: 600; color: var(--faint); }
.tbl tbody tr { border-bottom: 1px solid var(--line); }
.tbl tbody tr:last-child { border-bottom: 0; }
.tbl tbody tr:hover { background: rgb(247 241 230 / .55); }
.tbl .r { text-align: right; }
.tbl th.loc b { display: block; font-weight: 700; white-space: nowrap; }
.tbl th.loc span { white-space: nowrap; }
.tbl abbr { text-decoration: none; }
.tbl th.loc span { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); }
.tbl tbody th { font-weight: 600; }
.tbl tfoot th, .tbl tfoot td { font-weight: 800; border-top: 2px solid var(--line-strong); background: var(--paper); }
.tbl tr.off th.loc b { color: var(--muted); }
.tbl td.pend { color: var(--muted); font-size: .86rem; }
.tbl .sug { display: inline-block; padding: 3px 9px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-weight: 800; }
.tbl .dline { display: block; font-size: .86rem; }
.scroll-y { border-top: 1px solid var(--line); }
.days th, .days td { padding: 8px 14px; }
.days tbody th { font-weight: 500; color: var(--soft); }

/* tablas que en celular se vuelven tarjetas */
@container tbl (max-width: 760px) {
  .tbl.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl.cards, .tbl.cards tbody, .tbl.cards tfoot { display: block; }
  .tbl.cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 16px; }
  .tbl.cards th, .tbl.cards td { display: block; padding: 0 !important; text-align: left; min-width: 0; }
  .tbl.cards th.loc, .tbl.cards tfoot th { grid-column: 1 / -1; }
  .tbl.cards td[colspan] { grid-column: 1 / -1; }
  .tbl.cards td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 700 .66rem/1.2 var(--font); letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); }
  .tbl.cards td:empty { display: none; }
  .tbl.cards tfoot tr { background: var(--paper); }
  .tbl.cards tfoot th, .tbl.cards tfoot td { border: 0; background: none; }
  .tbl.mtx tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tbl.mtx td[data-label="Remito"] { grid-column: 1 / -1; }
  .tbl.ped tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tbl.ped td.cell-in { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .tbl.ped td.cell-in::before { margin: 0; }
  .tbl.ped td[data-label="Subtotal"] { grid-column: 1 / -1; text-align: right; }
  .tbl.ped td[data-label="Subtotal"]::before { display: inline; margin-right: 8px; }
  .tbl.liq td[data-label="Estado"], .tbl.rem td[data-label="Diferencias"], .tbl.rem td[data-label="Acción"] { grid-column: 1 / -1; }
}

/* ---------- gráfico de 7 días ---------- */
.chart { display: block; width: 100%; height: auto; }
.c-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.c-base { stroke: var(--line-strong); }
.c-axis { fill: var(--faint); font: 600 11px var(--font); }
/* la altura final es el estado base; el crecimiento es solo un extra cuando se permite movimiento */
.c-bar rect { fill: var(--kraft); transform-box: fill-box; transform-origin: bottom; }
.c-bar.today rect { fill: var(--olive); }
.c-bar.today .c-val { fill: var(--olive-ink); }
@media (prefers-reduced-motion: no-preference) { .c-bar rect { animation: grow .5s var(--ease); } }
.c-val { fill: var(--soft); font: 800 12.5px var(--font); }
.c-day { fill: var(--soft); font: 700 12.5px var(--font); }
.c-date { fill: var(--muted); font: 500 11px var(--font); }
@keyframes grow { from { transform: scaleY(0); } }

.alerts { list-style: none; margin: 0; padding: 0; }
.al { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.al:first-child { padding-top: 0; } .al:last-child { border-bottom: 0; padding-bottom: 0; }
.al > .ico { width: 20px; height: 20px; }
.al.bad > .ico { color: var(--bad); } .al.olive > .ico { color: var(--olive); } .al.warn > .ico { color: var(--warn); } .al.ok > .ico { color: var(--muted); }
.al b { display: block; font-size: .92rem; }
.al span { display: block; font-size: .82rem; color: var(--muted); }

/* ---------- conteo ---------- */
.split { display: grid; gap: 16px; align-items: start; }
.clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.crow { display: grid; gap: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s var(--ease); }
.crow.done { border-color: var(--olive-2); }
.crow h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; }
.crow.done h3::after { content: "Contado"; font: 700 .7rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--olive-ink); background: var(--olive-soft); padding: 4px 7px; border-radius: 6px; }
.crow-t p { font-size: .86rem; color: var(--muted); margin-top: 2px; }
.crow-t .crow-est { color: var(--soft); }
.crow-d:not(:empty) { margin-top: 8px; }
.crow-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crow-in::before { content: "Contado"; font-size: .82rem; font-weight: 700; color: var(--muted); }
.crow-in .unit { display: none; }
.lockv { font: 800 1.3rem var(--font); }

.stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line-strong); border-radius: var(--r-in); background: var(--card); overflow: hidden; }
.stepper:focus-within { border-color: var(--olive); box-shadow: 0 0 0 2px var(--olive-soft); }
.st-b { display: grid; place-items: center; width: 46px; min-height: 50px; border: 0; background: var(--paper); color: var(--soft); cursor: pointer; }
.st-b:hover { background: var(--paper-2); }
.st-b .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.st-in { width: 84px; border: 0; border-inline: 1px solid var(--line); background: var(--card); color: var(--ink); text-align: center;
  font: 800 1.35rem var(--font); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.st-in::-webkit-outer-spin-button, .st-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-in::placeholder { color: var(--faint); }
.st-in:focus { outline: none; }

.sumbox { display: grid; gap: 10px; }
.sumbox-in { display: grid; gap: 10px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.prog-n { font-size: .92rem; color: var(--muted); }
.prog-n b { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--ink); }
.prog { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.prog i { display: block; height: 100%; width: var(--w); background: var(--olive); border-radius: 4px; transition: width .3s var(--ease); }
.sum-meta { font-size: .84rem; color: var(--muted); }
.sum-hint { font-size: .82rem; color: var(--muted); }
.sum-big { font-family: var(--display); font-size: 1.8rem; text-transform: uppercase; line-height: 1; }

/* en el celular, el progreso y el guardado quedan a mano, arriba de la barra inferior */
@media (max-width: 1023px) {
  .v-conteo .sumbox { position: sticky; bottom: calc(var(--bnav) + env(safe-area-inset-bottom) + 8px); z-index: 5; }
  .v-conteo .sumbox-in { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px; box-shadow: 0 18px 36px -18px rgb(43 33 26 / .45); border-color: var(--line-strong); }
  .v-conteo .sumbox-in .label, .v-conteo .sum-meta, .v-conteo .sum-hint { display: none; }
  .v-conteo .prog-n { grid-column: 1; align-self: center; }
  .v-conteo .prog-n b { font-size: 1.4rem; }
  .v-conteo .prog { grid-column: 2; align-self: center; }
  .v-conteo .sumbox-in .btn { min-height: 46px; padding: 0 12px; font-size: .92rem; }
  body.touring .v-conteo .sumbox { position: static; }
}

/* ---------- pedido / tickets ---------- */
.ticket-wrap { display: grid; gap: 16px; min-width: 0; }
.ticket { position: relative; }
.ticket.tk-lg { padding: 26px 22px 28px; }
.ticket .label { color: var(--soft); }
.ticket h3 { font-size: 1.7rem; }
.tk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tk-head > div { min-width: 0; }
.tk-sub { font-size: .86rem; color: var(--soft); }
.tk-hint { font-size: .88rem; color: var(--soft); margin: 4px 0 8px; }
.ticket .row { min-height: 40px; }
.ticket .row span { display: grid; }
.ticket .row small { font-size: .78rem; color: var(--warn); font-weight: 700; }
.ticket .row s { color: var(--soft); opacity: .7; font-weight: 500; margin-right: 6px; }
.ticket .row.miss b { color: var(--warn); }
.ticket .row.tot { border-top: 2px solid rgb(68 46 35 / .55); border-bottom: 0; margin-top: 4px; padding-top: 12px; font-weight: 800; }
.ticket .row.tot b { font-size: 1.15rem; }
.ticket .big-n { font-family: var(--display); font-weight: 400; font-size: 1.9rem !important; }
.ticket .btn.full { margin-top: 14px; }
.tk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tk-actions .btn.ghost { border-color: rgb(43 33 26 / .45); }
.tk-foot { display: grid; gap: 4px; margin-top: 8px; }
.tk-foot p { font-size: .86rem; font-weight: 700; color: var(--soft); }
.sello { flex: none; font-size: 1.2rem; background: rgb(255 253 248 / .35); white-space: nowrap; }
.sello.diff { color: var(--warn); }
.cell-in { white-space: nowrap; }
.reset-sug { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: 6px; padding: 0; border: 1.5px solid var(--olive-2); border-radius: 50%;
  background: var(--olive-soft); color: var(--olive-ink); cursor: pointer; vertical-align: middle; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.reset-sug:hover { background: var(--olive); color: #fff; }
.reset-sug .ico { width: 16px; height: 16px; }
/* el lugar queda reservado: al editar una cantidad no se corre nada */
.reset-sug.off { visibility: hidden; opacity: 0; transform: scale(.8); }
.ped .stepper .st-in { width: 72px; font-size: 1.1rem; }
.ped .st-b { width: 42px; min-height: 44px; }

/* recepción del remito */
.tk-rows { display: grid; }
.rrow { border-bottom: 2px dashed rgb(68 46 35 / .25); padding: 6px 0; }
.rrow:last-child { border-bottom: 0; }
.rrow-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rrow-h p { display: grid; min-width: 0; }
.rname { font-weight: 700; }
.rrow-h b small { font-weight: 500; font-size: .78rem; color: var(--soft); }
.diff-btn { flex: none; min-height: 44px; padding: 0 14px; border: 1.5px dashed rgb(43 33 26 / .55); border-radius: 999px;
  background: transparent; color: var(--soft); font: 700 .84rem var(--font); cursor: pointer; }
.diff-btn[aria-pressed="true"] { background: var(--olive); border-style: solid; border-color: var(--olive); color: #fff; }
.rrow.open { background: rgb(255 253 248 / .4); margin: 0 -10px; padding: 6px 10px 12px; border-radius: 10px; }
.rrow-x { display: grid; gap: 8px; margin-top: 8px; }
.rrow-x label { font-size: .82rem; font-weight: 700; color: var(--soft); }
.rrow-x .stepper { justify-self: start; }
.reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.reason { min-height: 44px; padding: 0 14px; border: 1.5px solid rgb(43 33 26 / .3); border-radius: 999px; background: var(--card); color: var(--soft);
  font: 700 .84rem var(--font); cursor: pointer; }
.reason[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: #fff; }

.hist { list-style: none; margin: 0; padding: 0; }
.hist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hist li:first-child { padding-top: 0; } .hist li:last-child { border-bottom: 0; padding-bottom: 0; }
.hist li > div { min-width: 0; }
.hist b { display: block; font-size: .92rem; }
.hist span { display: block; font-size: .8rem; color: var(--muted); }
.hist .hd { color: var(--warn); font-weight: 600; }

/* ---------- producción ---------- */
.bakes { list-style: none; margin: 0; padding: 0; }
.bake { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bake:first-child { padding-top: 0; }
.bake h3 { font-size: .98rem; font-weight: 800; }
.bake-t p { font-size: .84rem; color: var(--muted); }
.bake-t p b { font-family: var(--display); font-weight: 400; font-size: 1.45rem; color: var(--ink); margin-right: 2px; }
.bake-bar { height: 6px; border-radius: 3px; background: var(--paper-2); margin-top: 6px; overflow: hidden; }
.bake-bar i { display: block; height: 100%; width: var(--w); background: var(--kraft-2); border-radius: 3px; }
.bake.on .bake-bar i { background: var(--olive-2); }
.bake-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 10.6em; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px;
  background: var(--card); color: var(--soft); font: 700 .88rem var(--font); cursor: pointer; white-space: nowrap; }
.bake-btn[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: #fff; }
.bake-btn .ico { stroke-width: 2.4; }
.okline { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ok); }
.mtx td.r { font-weight: 600; }

/* ---------- mi liquidación ---------- */
.stack { display: grid; gap: 16px; min-width: 0; }
.canales { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.canales li { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; }
.canales .vbar span { font-size: .9rem; font-weight: 600; }
.canales b { font-size: .95rem; }
.spark { display: block; width: 100%; height: auto; padding: 14px 16px 6px; box-sizing: border-box; }
.spark rect { fill: var(--kraft-2); } .spark rect.we { fill: var(--soft); }
.spark text { fill: var(--muted); font: 600 11px var(--font); }

/* ---------- toasts ---------- */
.toasts { position: fixed; z-index: 60; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 10px); bottom: auto; display: grid; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; min-height: 48px; border-radius: 12px; background: var(--ink); color: var(--paper);
  font-size: .9rem; box-shadow: 0 18px 40px -18px rgb(43 33 26 / .6); pointer-events: auto; animation: tin .25s var(--ease); transition: opacity .25s, transform .25s; }
.toast .ico { color: #B9CF8C; }
.toast.warn .ico { color: #F0B48C; }
.toast p { flex: 1; overflow-wrap: anywhere; }
.toast button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: rgb(247 241 230 / .12); color: var(--paper); font-weight: 700; cursor: pointer; white-space: nowrap; }
.toast.out { opacity: 0; transform: translateY(6px); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* ---------- tutoriales con spotlight ---------- */
.coach-veil { position: fixed; inset: 0; z-index: 70; }
.coach-hole { position: fixed; z-index: 71; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 200vmax rgb(30 24 18 / .58);
  outline: 2px solid rgb(255 253 248 / .9); outline-offset: 0; transition: left .32s var(--ease), top .32s var(--ease), width .32s var(--ease), height .32s var(--ease); }
.coach-card { position: fixed; z-index: 72; width: 360px; max-width: calc(100vw - 24px); padding: 14px 16px; background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 24px 50px -20px rgb(30 24 18 / .6); transition: left .32s var(--ease), top .32s var(--ease); }
.coach-h { display: flex; align-items: center; justify-content: space-between; margin: -6px -8px 0 0; }
.coach-h .label { color: var(--olive-ink); }
.coach-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; border-radius: 10px; cursor: pointer; color: var(--muted); }
.coach-card h2 { font-size: 1.4rem; margin: 0 0 4px; }
.coach-card p:not(.label) { font-size: .92rem; color: var(--soft); }
.coach-dots { display: flex; gap: 5px; margin: 10px 0; }
.coach-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); }
.coach-dots i.on { background: var(--olive); }
.coach-a { display: flex; gap: 8px; justify-content: flex-end; }
.coach-a .skipb { margin-right: auto; padding: 0 10px; border: 0; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) { .coach-card { width: auto; transition: none; } }
@media (prefers-reduced-motion: reduce) { .coach-hole, .coach-card { transition: none; } }
.help-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0; border: 1.5px solid var(--line-strong);
  border-radius: 999px; background: var(--card); color: var(--olive-ink); font: 700 .88rem var(--font); cursor: pointer; }
.help-btn:hover { background: var(--olive-soft); }
.help-q { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--olive); color: #fff; font: 800 .8rem/1 var(--font); }
.help-t { display: none; }
@media (min-width: 900px) { .help-btn { padding: 0 14px 0 10px; } .help-t { display: inline; } }

/* ---------- diálogo ---------- */
.dlg { width: min(460px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 16px; background: var(--card); color: var(--ink);
  box-shadow: 0 40px 80px -30px rgb(43 33 26 / .6); }
.dlg::backdrop { background: rgb(43 33 26 / .45); }
.dlg form { display: grid; gap: 14px; padding: 22px 20px 18px; }
.dlg h2 { font-size: 1.6rem; }
.dlg-body { display: grid; gap: 10px; color: var(--soft); font-size: .95rem; }
.dlg-list { list-style: none; margin: 0; padding: 10px 14px; background: var(--kraft-soft); border-radius: 12px; }
.dlg-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed rgb(68 46 35 / .25); font-size: .9rem; }
.dlg-list li:last-child { border-bottom: 0; }
.dlg-list li b { font-variant-numeric: tabular-nums; }
.dlg-list li.tot { font-weight: 800; border-top: 2px solid rgb(68 46 35 / .4); border-bottom: 0; margin-top: 2px; }
.dlg-warn { display: flex; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-weight: 600; font-size: .88rem; }
.dlg-l { font-weight: 700; font-size: .88rem; }
.dlg textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: inherit; color: var(--ink); background: var(--card); resize: vertical; }
.dlg textarea:focus { outline: 3px solid var(--olive); outline-offset: 1px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dlg-actions .btn { min-height: 46px; }

/* =========================================================
   Anchos mayores
   ========================================================= */
@media (min-width: 520px) {
  .crow { grid-template-columns: 1fr auto; align-items: center; }
  .crow-in::before { content: none; }
  .crow-in .unit { display: inline; min-width: 1.4em; font-weight: 700; color: var(--muted); }
}
@media (min-width: 640px) {
  .demo-strip .ds-full { display: inline; } .demo-strip .ds-short { display: none; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi:last-child:nth-child(odd) { grid-column: auto; }
  .kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-v { font-size: 1.85rem; }
  .viewas-btn { padding: 4px 14px 4px 16px; min-width: 8.6rem; }
  .toasts { left: auto; right: 20px; width: 380px; top: auto; bottom: calc(var(--bnav) + env(safe-area-inset-bottom) + 12px); }
  .main { padding: 20px 24px 8px; }
  .top { padding: 12px 24px; }
}
@media (min-width: 760px) {
  .grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
}
@media (max-width: 759px) { .grid-2 { display: grid; gap: 16px; } }

@media (min-width: 1024px) {
  .ds-actions button { display: inline-flex; }
  .demo-strip { position: sticky; top: 0; z-index: 40; box-sizing: border-box; height: var(--strip-h); min-height: 0; }
  .top { top: var(--strip-h); }
  .sumbox { top: calc(104px + var(--strip-h)); }
  .shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: calc(100vh - var(--strip-h)); }
  .side { position: sticky; top: var(--strip-h); height: calc(100vh - var(--strip-h)); max-height: calc(100vh - var(--strip-h)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px 18px; background: var(--card); color: var(--soft); border-right: 1px solid var(--line); }
  .side-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 14px; border-bottom: 1px solid var(--line); }
  .side-brand .ring { width: 30px; height: 30px; color: var(--olive); flex: none; }
  .side-brand b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; }
  .side-brand span { display: block; font-size: .78rem; color: var(--muted); }
  .side-nav { display: grid; gap: 3px; }
  .side-role { display: grid; gap: 2px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
  .side-k { font: 700 .66rem/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--olive-ink); }
  .side-role b { font-size: .98rem; }
  .side-role span { font-size: .8rem; color: var(--muted); }
  .side-change { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; padding: 0 12px; border: 1.5px solid var(--olive);
    border-radius: 999px; background: var(--card); color: var(--olive-ink); font: 700 .84rem var(--font); cursor: pointer; }
  .side-change:hover { background: var(--olive-soft); }
  .side-change .ico { width: 16px; height: 16px; }
  .side-nav a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 10px; color: var(--soft); position: relative;
    text-decoration: none; font-weight: 600; font-size: .95rem; }
  .side-nav a:hover { background: var(--paper); color: var(--ink); }
  .side-nav a[aria-current="page"] { background: var(--olive-soft); color: var(--olive-ink); font-weight: 800; }
  .side-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--olive); }
  .side-nav a .ico { width: 20px; height: 20px; }
  .side-nav .nb { margin-left: auto; }
  .side-foot { margin-top: auto; }
  .side-fudo { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; font-size: .8rem; color: var(--muted); background: var(--paper); line-height: 1.35; }
  .side-fudo svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--olive); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
  .side-fudo b { color: var(--ink); }
  .bottom-nav { display: none; }
  .work { padding-bottom: 40px; }
  .top { padding: 16px 32px; }
  .top-title { font-size: 2.1rem; }
  .top-date { display: block; }
  .main { padding: 24px 32px 16px; }
  .view { gap: 20px; }
  .toasts { top: 152px; bottom: auto; right: 32px; }
  .split { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
  .split.wide { grid-template-columns: minmax(0, 1fr) 360px; }
  .split.prod { grid-template-columns: 360px minmax(0, 1fr); }
  .tbl.mtx th, .tbl.mtx td { padding-inline: 8px; }
  .tbl.mtx th.loc span { white-space: normal; }
  .tbl.mtx td[data-label="Remito"] .tag { padding-inline: 7px; }
  .v-mi-liquidacion .split, .v-remitos .split { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .sumbox { position: sticky; top: 104px; }
  .kpi { padding: 14px 18px 16px; }
  .kpi-v { font-size: 2.1rem; }
  .panel { padding: 18px 20px; }
  .panel.flush > .panel-h { padding: 18px 20px 14px; }
  .tbl th:first-child, .tbl td:first-child { padding-left: 20px; }
  .tbl th:last-child, .tbl td:last-child { padding-right: 20px; }
  .ticket.tk-lg { padding: 30px 28px 32px; }
}
@media (min-width: 1280px) {
  .split.prod { grid-template-columns: 380px minmax(0, 1fr); }
  .tbl.mtx th, .tbl.mtx td { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .main.enter .view { animation: none; }
}
@media (forced-colors: active) {
  .tag, .kpi, .panel, .seg button { border: 1px solid CanvasText; }
}
@media (max-width: 519px) {
  .days { font-size: .8rem; }
  .days th, .days td { padding: 7px 6px; }
  .days th:first-child, .days td:first-child { padding-left: 10px; }
  .days th:last-child, .days td:last-child { padding-right: 10px; }
  .days { font-size: .78rem; }
  .days thead th { letter-spacing: .04em; }
}

/* tablas anchas (matriz, pedido, liquidaciones, despachos): tarjetas hasta 920 px de columna */
@container tbl (min-width: 761px) and (max-width: 920px) {
  .tbl.mtx thead, .tbl.ped thead, .tbl.liq thead, .tbl.rem thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :is(.mtx, .ped, .liq, .rem).tbl, :is(.mtx, .ped, .liq, .rem).tbl tbody, :is(.mtx, .ped, .liq, .rem).tbl tfoot { display: block; }
  :is(.mtx, .ped, .liq, .rem).tbl tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; padding: 14px 20px; }
  .tbl.mtx tr { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :is(.mtx, .ped, .liq, .rem).tbl :is(th, td) { display: block; padding: 0 !important; text-align: left; min-width: 0; }
  :is(.mtx, .ped, .liq, .rem).tbl th.loc, :is(.mtx, .ped, .liq, .rem).tbl tfoot th, :is(.mtx, .ped, .liq, .rem).tbl td[colspan] { grid-column: 1 / -1; }
  :is(.mtx, .ped, .liq, .rem).tbl td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 700 .66rem/1.2 var(--font);
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  :is(.mtx, .ped, .liq, .rem).tbl td:empty { display: none; }
  :is(.mtx, .ped, .liq, .rem).tbl tfoot tr { background: var(--paper); }
  :is(.mtx, .ped, .liq, .rem).tbl tfoot :is(th, td) { border: 0; background: none; }
  .tbl.mtx td[data-label="Remito"], .tbl.rem td[data-label="Diferencias"], .tbl.rem td[data-label="Acción"] { grid-column: span 2; }
  .tbl.ped td.cell-in { grid-column: span 2; }
}
/* entre 1024 y 1279 los remitos y la liquidación del franquiciado van en una columna; desde 1280, en dos */
@media (min-width: 1280px) {
  .v-mi-liquidacion .split, .v-remitos .split { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); max-width: none; }
}
@container tbl (min-width: 560px) and (max-width: 760px) {
  .tbl.mtx tr { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tbl.mtx td[data-label="Remito"] { grid-column: 1 / -1; }
}