/* cel4 · sistema de prueba. Usa assets/base.css (tokens, logo, formularios) y assets/botones.css. */
:root {
  --warn: var(--acc);
  --p1: var(--ink); --p2: #5d5d63; --p3: #9a9aa0; --p4: #c4c4c9; --p5: #e0e0e4;
  --bh-arrow: 40px;
  /* Escala de botones de la demo (la base está en botones.css) */
  --bh: 36px; --bp: 16px; --bf: 13px; --bh-sm: 30px; --bp-sm: 12px; --bf-sm: 12.5px;
}
html, body { min-height: 100%; }
body { font-size: 14px; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-inline: 32px; }

/* ---------- Estructura con sidebar ---------- */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.main { min-width: 0; }
/* Sidebar grafito: cada parte en su módulo recortado (.mod-dk) */
.side {
  --s-bg: var(--dk-bg); --s-fg: #fff; --s-fg2: var(--dk-fg2); --s-fg3: var(--dk-fg3); --s-line: var(--dk-line); --s-ind: #fff; --s-ind-fg: var(--ink); --s-ind-r: 10px;
  position: sticky; top: 0; height: 100vh; z-index: 30; display: flex; background: var(--s-bg); color: var(--s-fg);
  border-right: 1px solid #34343a; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
}
.side::-webkit-scrollbar { display: none; }
.s-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px; }
.logo { display: inline-flex; font-size: 19px; }
.logo svg { height: 26px; }
.logo small { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .04em; color: var(--s-fg3, var(--ink-3)); padding: 3px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--s-line, var(--line)); }
.side-close { display: none !important; }
.store { display: flex; align-items: center; gap: 12px; }
.store b { display: block; font-weight: 600; font-size: 14px; }
.store span { font-family: var(--mono); font-size: 11px; color: var(--s-fg3); }
.nav { position: relative; display: grid; }
.nav a { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 11px 12px; font-size: 13.5px; color: var(--s-fg2); transition: color .35s var(--ease); }
.nav a span { flex: 1; }
.nav a:hover { color: var(--s-fg); }
.nav a.on { color: var(--s-fg); font-weight: 500; }
.nav a.hot, .nav a.hot:hover { color: var(--s-ind-fg); }
.nav-ind { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: var(--s-ind-r); background: var(--s-ind); transition: top .5s var(--ease), height .5s var(--ease); pointer-events: none; }
.side-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.me { display: flex; align-items: center; gap: 10px; }
.me b { display: block; font-size: 13.5px; font-weight: 500; }
.me small { display: block; font-size: 12px; color: var(--s-fg3); }
.side .ini { box-shadow: inset 0 0 0 1.5px var(--s-fg); }
/* Dólar blue (dolarapi.com) */
.fx { display: grid; gap: 10px; }
.fx-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fx-h span { font-size: 12.5px; color: var(--s-fg2); }
.fx-h time { font-family: var(--mono); font-size: 10.5px; color: var(--s-fg3); }
.fx-v { display: grid; grid-template-columns: 1fr 1fr; }
.fx-v div { display: grid; gap: 3px; }
.fx-v div + div { padding-left: 12px; border-left: 1px solid var(--s-line); }
.fx-v small { font-size: 11px; color: var(--s-fg3); }
.fx-v b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: 17px; letter-spacing: var(--dls-s); font-variant-numeric: tabular-nums; transition: opacity .3s; }
.fx.loading .fx-v b { opacity: .35; }
.fx-sp { display: block; width: 100%; height: 24px; margin-top: 6px; }
.fx.off .fx-h time { color: var(--acc-l); }

/* Engranaje dibujado a mano (sin librería): gira al pasar el mouse */
.gear { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--s-fg2); box-shadow: inset 0 0 0 1px var(--s-line); transition: color .3s var(--ease), background .3s var(--ease); }
.gear svg { width: 17px; height: 17px; fill: currentColor; }
.gear:hover { color: var(--ink); background: #fff; }
.gear.on { color: var(--ink); background: #fff; }
.mbar, .side-scrim { display: none; }
/* Con algo abierto encima (menú, buscador, ventanas, paneles, asistente) el fondo no se desliza: en celular se fija la página, en compu se corta el scroll */
body.locked { position: fixed; left: 0; right: 0; overflow: hidden; }
html.locked { overflow: hidden; }
html { scrollbar-gutter: stable; }
.side-scrim { touch-action: none; }

/* Barra superior en grafito, como el sidebar: dónde estás + notificaciones, ayuda y cerrar sesión (íconos propios) */
.tbar { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 32px; background: var(--dk-bg); border-bottom: 1px solid var(--dk-line); }
.crumb { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--dk-fg2); min-width: 0; }
.crumb b { font-weight: 500; color: #fff; white-space: nowrap; }
.crumb i { font-style: normal; color: var(--dk-fg3); }
.crumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-r { display: flex; align-items: center; gap: 4px; }
.tb-b { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 11px; background: none; color: var(--dk-fg2); cursor: pointer; transition: background .2s, color .2s; }
.tb-b:hover { background: var(--dk-mod); color: #fff; }
/* Íconos de píxeles: grilla de 9×9, el mismo lenguaje del stock y el calendario */
.tb-b svg { width: 17px; height: 17px; fill: currentColor; }
.tb-b .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc-l); box-shadow: 0 0 0 2px var(--dk-bg); }
.tb-b .dot[hidden] { display: none; }
.tb-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--dk-line); }
/* Panel desplegable (notificaciones y ayuda) */
.pop { position: fixed; z-index: 60; width: min(380px, calc(100vw - 20px)); max-height: min(520px, calc(100vh - 90px)); display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(11,11,12,.35); animation: pop .3s var(--ease); overflow: hidden; }
.pop[hidden] { display: none; }
.pop-h { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.pop-h b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(18px * var(--dk)); letter-spacing: var(--dls-s); }
.pop-h span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.pop-l { overflow-y: auto; padding: 6px; }
.nt { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.nt:hover { background: var(--bg-soft); }
.nt b { display: block; font-weight: 500; font-size: 13.5px; }
.nt small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.nt time { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.nt.new::after { content: ""; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--acc); }
/* Glifo de cada tipo de aviso, con el lenguaje de píxeles */
.nt-g { width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.nt-g::after { content: ""; width: 9px; height: 9px; }
.nt-g.pend::after { box-shadow: inset 0 0 0 1.5px var(--acc); }
.nt-g.rep::after { width: 14px; height: 4px; background: linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 5px, var(--ink) 5px 9px, transparent 9px 10px, var(--acc) 10px); }
.nt-g.late::after { background: var(--acc); border-radius: 50%; }
.nt-g.stock::after { background: linear-gradient(var(--acc), var(--acc)) bottom / 100% 40% no-repeat; box-shadow: inset 0 0 0 1.5px var(--acc); }
.nt-g.po::after { background: var(--ink); }
.pop-empty { margin: 0; padding: 28px 12px; text-align: center; color: var(--ink-2); }
.side.dk .btn-ghost, .mbar .btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.side.dk .btn-ghost::before, .mbar .btn-ghost::before { background: #fff; }
.side.dk .btn-ghost:hover, .mbar .btn-ghost:hover { color: var(--ink); }

.s-menu { padding: 6px; }
.nav a + a::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--s-line); transition: opacity .3s; }
.nav a.hot::before, .nav a.hot + a::before { opacity: 0; }
/* Caja: la tienda y el dólar en un mismo módulo, separados por una línea */
.caja .fx { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--s-line); }
/* Buscar (⌘K) */
.find { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 10px 0 14px; color: var(--s-fg3); font: inherit; font-size: 13px; cursor: pointer; transition: color .25s, box-shadow .25s; }
.find:hover { color: var(--s-fg2); border-color: #3a3a40; }
kbd { font-family: var(--mono); font-size: 10.5px; line-height: 1; padding: 4px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px currentColor; opacity: .8; }

/* ---------- Página ---------- */
/* Colores de los bloques (--p-*) fuera de un .pnl: los de la página clara */
.page { padding-top: 24px; padding-bottom: 72px; display: grid; gap: 32px; --p-fg: var(--ink); --p-fg2: var(--ink-2); --p-fg3: var(--ink-3); --p-line: var(--line); --p-px: var(--ink); --p-px0: var(--line); }
.page > * { min-width: 0; }
/* Turnos: la agenda ocupa la pantalla justa, sin margen de más abajo */
.page.fit { padding-bottom: 20px; }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ph h1 { margin: 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(36px * var(--dk)); letter-spacing: var(--dls); line-height: 1; }
.ph p { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; }
.ph-act { display: flex; gap: 10px; flex-wrap: wrap; }

/* Botones del sistema (efectos en /assets/botones.css) */
.btn i { font-style: normal; font-family: var(--mono); font-size: 10.5px; opacity: .6; }
.on-dark .btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.on-dark .btn-ghost::before { background: #fff; }
.on-dark .btn-ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px #fff; }

/* ---------- Herramientas ---------- */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tools .grow { flex: 1; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.search { display: flex; align-items: center; gap: 10px; height: 36px; min-width: 260px; flex: 1; max-width: 420px; border-bottom: 1.5px solid var(--ink); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; }
.search input::placeholder { color: var(--ink-3); }
.select { height: 36px; border-radius: 999px; border: 0; padding: 0 36px 0 16px; font: inherit; font-size: 13.5px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230b0b0c' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; box-shadow: inset 0 0 0 1px var(--line); appearance: none; cursor: pointer; }
.select:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- Inicio ---------- */
/* Ventas por hora (Hoy / Ayer), dentro del gráfico de ventas */
.hrs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 210px; padding-top: 40px; }
.hrs[hidden], .chart[hidden] { display: none; }
.hr { display: grid; grid-template-rows: 1fr auto; gap: 8px; }
.hr .col { position: relative; border-bottom: 1.5px solid var(--ink); border-radius: 6px 6px 0 0; transition: background .2s; }
.hr:hover .col { background: var(--bg-soft); }
.hr .col i { position: absolute; left: 16%; right: 16%; bottom: 0; }
/* Bloques de píxeles (negro; la hora actual en acento) */
.hr .t { left: 26%; right: 26%; background: repeating-linear-gradient(to top, var(--ink) 0 5px, transparent 5px 7px); }
.hr.now .t { background: repeating-linear-gradient(to top, var(--acc) 0 5px, transparent 5px 7px); }
.hr.later .col { border-bottom: 1.5px dashed var(--line); }
.hr span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); text-align: center; }
.hr.now span { color: var(--acc); font-weight: 500; }
.hrs .tip { transform: translate(-50%, 0); }
.chart-sub { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 10px; color: var(--ink-2); font-size: 13px; }
.chart-sub p { margin: 0; }
.chart-sub b { color: var(--ink); font-weight: 600; }
.delta { font-family: var(--mono); font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--ink); color: #fff; }
.delta.down { background: var(--bad); }

.chart { position: relative; height: 210px; }
.chart canvas { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: pan-y; user-select: none; }
.tip { position: absolute; pointer-events: none; padding: 9px 12px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 12px; transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.tip b { display: block; font-size: 14px; font-weight: 600; }
.chart .tip { line-height: 1.5; }
/* Tramo elegido: el aviso va dentro del gráfico, arriba, para no tapar el total */
.chart .tip.rng { transform: translate(-50%, 0); }


.block-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.block-h h2 { margin: 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(18px * var(--dk)); letter-spacing: var(--dls-s); }

.rows { display: grid; }
.row { display: grid; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.row.rank { grid-template-columns: 34px 1fr auto; }
.row.lr { grid-template-columns: minmax(0, 1fr) auto; }
.row.lr .r { font-weight: 500; }
#ctab { flex-wrap: nowrap; }
.row .n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.row b { font-weight: 500; display: block; }
.row small { color: var(--ink-3); font-size: 12.5px; }
.row .r { text-align: right; font-weight: 600; }
.bar { height: 3px; margin-top: 8px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); }

/* Bloque grafito: para reponer. Las líneas salen de la sombra de cada casilla, así el lugar vacío del final queda del color del bloque */
.restock-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; padding: 1px; background: var(--p-bg); border-radius: 16px; overflow: hidden; }
.ri { background: var(--p-bg); box-shadow: 0 0 0 1px var(--p-line); padding: 14px; display: grid; gap: 10px; }
.ri b { font-weight: 500; }
.ri small { color: var(--p-fg2); font-size: 12px; display: block; margin-top: 3px; }
.ri .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- Estados con píxeles ---------- */
.st { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.st::before { content: ""; width: 9px; height: 9px; flex: none; }
.st.paid::before { background: var(--ink); }
.st.pending { color: var(--acc); }
.st.pending::before { box-shadow: inset 0 0 0 1.5px var(--acc); }
.st.void { color: var(--ink-3); text-decoration: line-through; }
.st.void::before { background: #d4d4d8; }

.stk { display: inline-flex; align-items: center; gap: 10px; }
.segs { display: inline-flex; gap: 3px; }
.segs i { width: 7px; height: 14px; border-radius: 2px; background: #e4e4e7; }
.segs i.f { background: var(--ink); }
.stk.low .segs i.f { background: var(--warn); }
.stk.out .segs i { background: #f3d5d2; }
.stk em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--warn); white-space: nowrap; }
.stk.out em { color: var(--bad); }
.on-dark .segs i { background: rgba(255,255,255,.18); }
.on-dark .segs i.f { background: #fff; }
.on-dark .stk.low .segs i.f { background: var(--acc-l); }
.on-dark .stk.out .segs i { background: rgba(240,120,100,.35); }
.on-dark .stk em { color: var(--acc-l); }
.on-dark .stk.out em { color: #f5a09a; }

/* ---------- Tablas ---------- */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); }
th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th.r, td.r { text-align: right; }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr { cursor: pointer; transition: background .15s; }
tbody tr:hover { background: #fafafa; }
td b { font-weight: 500; }
td small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 3px; }
td .amt { font-weight: 600; font-size: 14px; }
.who { display: flex; align-items: center; gap: 12px; }
.ini { width: 30px; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--ink); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; flex: none; }
.code { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper b { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 0; font-size: 13px; color: var(--ink-3); }
.pager .btns { display: flex; gap: 6px; }
.empty { padding: 48px 0; text-align: center; color: var(--ink-2); border-top: 1.5px solid var(--ink); }
.empty b { display: block; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(20px * var(--dk)); letter-spacing: var(--dls-s); color: var(--ink); margin-bottom: 6px; }
.sm-only { display: none !important; }

/* ---------- Panel lateral ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(11,11,12,.25); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(500px, 100%); background: #fff; transform: translateX(102%); transition: transform .5s var(--ease); display: flex; flex-direction: column; }
/* La sombra solo con el panel abierto: cerrado quedaría asomando en el borde */
.drawer.on { transform: none; box-shadow: -40px 0 80px -40px rgba(11,11,12,.35); }
.drawer-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 28px 28px 22px; }
.drawer-h .k { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin: 0 0 8px; }
.drawer-h h3 { margin: 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(24px * var(--dk)); letter-spacing: var(--dls); line-height: 1.05; }
.drawer-b { padding: 0 28px 24px; overflow-y: auto; flex: 1; display: grid; gap: 28px; align-content: start; }
.drawer-f { padding: 18px 28px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--ink); }
.fact { padding: 14px 14px 2px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact span { font-size: 12px; color: var(--ink-3); }
.fact b { display: block; margin-top: 6px; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(22px * var(--dk)); letter-spacing: var(--dls-s); }
.dl { display: grid; grid-template-columns: 120px 1fr; margin: 0; }
.dl dt, .dl dd { padding: 11px 0; border-bottom: 1px solid var(--line); margin: 0; font-size: 14px; }
.dl dt { color: var(--ink-3); }
.sec-t { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(17px * var(--dk)); letter-spacing: var(--dls-s); margin: 0; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.lines { display: grid; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.line small { color: var(--ink-3); font-size: 12px; }
.line.click { cursor: pointer; }
.line.click:hover { background: #fafafa; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; }
.total span { color: var(--ink-2); }
.total b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(28px * var(--dk)); letter-spacing: var(--dls); }

/* ---------- Ventanas ---------- */
dialog { border: 0; padding: 0; border-radius: 24px; width: min(560px, calc(100% - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 50px 120px -30px rgba(11,11,12,.5); color: var(--ink); }
dialog::backdrop { background: rgba(11,11,12,.3); backdrop-filter: blur(3px); }
dialog[open] { animation: pop .45s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.dlg-h { padding: 26px 28px 8px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dlg-h h3 { margin: 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(22px * var(--dk)); letter-spacing: var(--dls); }
.dlg-h p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
.dlg-b { padding: 18px 28px; display: grid; gap: 20px; overflow-y: auto; max-height: 64vh; }
.dlg-f { padding: 18px 28px 26px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.field .select { width: 100%; margin-top: 4px; }

/* Nueva venta: caja */
dialog.pos { width: min(1080px, calc(100% - 24px)); height: min(760px, calc(100vh - 32px)); max-height: none; overflow: hidden; }
.pos-in { display: grid; grid-template-columns: 1.35fr 1fr; height: 100%; }
.pos-cat { display: flex; flex-direction: column; min-height: 0; padding: 26px 28px 0; }
.pos-cat .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.pos-cat h3 { margin: 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(24px * var(--dk)); letter-spacing: var(--dls); }
.pos-cat .tools { margin-bottom: 16px; }
.tiles { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; align-content: start; padding: 2px 2px 26px; }
.tile { text-align: left; border: 0; background: #fff; border-radius: 16px; padding: 14px; cursor: pointer; display: grid; gap: 10px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s var(--ease); }
.tile:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.tile:active { transform: scale(.98); }
.tile b { font-weight: 500; font-size: 13.5px; line-height: 1.3; min-height: 2.6em; }
.tile .pr { font-weight: 600; }
.tile .bt { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tile.in-cart { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tile .q { display: none; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 11px; }
.tile.in-cart .q { display: inline-grid; }
.tile[disabled] { opacity: .4; pointer-events: none; }
.tiles .empty { grid-column: 1 / -1; border-top: 0; padding: 48px 0; }
.ticket { background: var(--bg-soft); display: flex; flex-direction: column; min-height: 0; }
.ticket-h { padding: 26px 26px 12px; display: grid; gap: 12px; }
.ticket-h .k { font-family: var(--mono); font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; }
.ticket .select { width: 100%; background-color: #fff; }
.cart { flex: 1; overflow-y: auto; padding: 4px 26px; }
.ci { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 0; border-bottom: 1px dashed #d4d4d8; }
.ci b { font-weight: 500; }
.ci small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.ci .r { text-align: right; font-weight: 600; }
.ci .ctl { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.cart-empty { padding: 40px 0; text-align: center; color: var(--ink-3); font-size: 13.5px; line-height: 1.6; }
.ticket-f { padding: 16px 26px 24px; display: grid; gap: 14px; border-top: 1.5px solid var(--ink); }
.ticket-f .total b { font-size: calc(32px * var(--dk)); }
.ticket-f > .btn-dark { width: 100%; justify-content: space-between; }
.pos-err { color: var(--bad); font-size: 12.5px; }

/* ---------- Ficha de cliente ---------- */
.cli { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
/* Columna de la persona: quién es y cómo contactarla */
.person { display: grid; gap: 18px; padding: 20px; border-radius: 18px; background: var(--bg-soft); }
.person .ini.xl { width: 52px; height: 52px; border-radius: 14px; font-size: 15px; }
.person h1 { margin: 14px 0 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(26px * var(--dk)); letter-spacing: var(--dls); line-height: 1.02; }
.person .since { margin: 8px 0 0; color: var(--ink-2); font-size: 13.5px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.badge { font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ink); }
.badge.solid { background: var(--ink); color: #fff; box-shadow: none; }
.who .badge { margin-left: 4px; padding: 1px 6px; font-size: 10.5px; font-weight: 400; vertical-align: 1px; }
.person .acts { display: grid; gap: 8px; }
.person .acts .btn-dark { width: 100%; justify-content: space-between; }
.person .acts .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.person .acts .two .btn { justify-content: center; background: #fff; }
.person .sec-t { border-bottom-width: 1px; }
.person .dl, .pnl .dl { grid-template-columns: 1fr; }
.person .dl dt, .pnl .dl dt { padding: 12px 0 0; border: 0; font-size: 12px; }
.person .dl dd, .pnl .dl dd { padding: 3px 0 12px; word-break: break-word; }
.person .dl dd small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.owe { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.owe span { font-size: 12px; color: var(--ink-3); }
.owe b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(20px * var(--dk)); letter-spacing: var(--dls); color: var(--acc); }
.owe small { font-size: 12px; color: var(--ink-2); }
.paybar { display: flex; height: 10px; gap: 3px; margin-top: 14px; }
.paybar i { border-radius: 3px; }
.paylist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.paylist li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; }
.paylist li i { width: 10px; height: 10px; border-radius: 3px; }
.paylist li span { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
/* Columna de lo que hizo: cada bloque en su recuadro */
.cli-main { display: grid; gap: 14px; min-width: 0; }
.box { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 18px; min-width: 0; }
.box-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.box-h h2 { margin: 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(17px * var(--dk)); letter-spacing: var(--dls-s); }
.box-h span { font-size: 13px; color: var(--ink-3); }
.box table { border-top: 0; }
.box th { padding-top: 0; }
.box tbody tr:last-child td { border-bottom: 0; padding-bottom: 4px; }
.box .rows .row:last-child { border-bottom: 0; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.kpi { padding: 14px 18px; border-left: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.kpi:first-child { border-left: 0; }
.kpi span { font-size: 12.5px; color: var(--ink-2); }
.kpi b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(24px * var(--dk)); letter-spacing: var(--dls); line-height: 1.05; white-space: nowrap; }
.kpi small { font-size: 12px; color: var(--ink-3); }
.tl { position: relative; height: 72px; border-bottom: 1.5px solid var(--ink); }
.tl i { position: absolute; bottom: 0; translate: -50% 0; width: 10px; border-radius: 3px 3px 0 0; background: var(--ink); cursor: pointer; transition: transform .25s var(--ease); transform-origin: bottom; }
.tl i.pending { background: transparent; box-shadow: inset 0 0 0 1.5px var(--acc); }
.tl i:hover { transform: scaleY(1.06); }
.tl .wk { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--line); }
.axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.nw { white-space: nowrap; }
.fw4 { font-weight: 400; }

/* Acento (--acc): solo para lo pendiente (ventas, saldo, reponer) y lo de hoy. Cada componente lo aplica en su regla. */
.badge.warn { box-shadow: inset 0 0 0 1px var(--acc); color: var(--acc); }

/* ---------- Inicio: tablero de bloques ---------- */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.c4 { grid-column: span 4; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
/* Bloque con el lenguaje de "Para reponer": grafito por defecto (el de los recuadros del sidebar), claro con .lt (los colores son variables) */
.pnl {
  --p-bg: var(--dk-mod); --p-fg: #fff; --p-fg2: var(--dk-fg2); --p-fg3: var(--dk-fg3); --p-line: var(--dk-line); --p-px: #fff; --p-px0: rgba(255,255,255,.13);
  --ch-ink: #fff; --ch-mute: var(--dk-fg3); --ch-grid: rgba(255,255,255,.1); --ch-bg: var(--dk-mod);
  background: var(--p-bg); color: var(--p-fg); border-radius: 18px; padding: 22px; display: grid; gap: 18px; align-content: start; min-width: 0; box-shadow: inset 0 0 0 1px var(--dk-line);
}
.pnl.lt { --p-bg: #fff; --p-fg: var(--ink); --p-fg2: var(--ink-2); --p-fg3: var(--ink-3); --p-line: var(--line); --p-px: var(--ink); --p-px0: var(--line);
  --ch-ink: var(--ink); --ch-mute: var(--ink-3); --ch-grid: #ececee; --ch-bg: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pnl-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pnl-h h2 { margin: 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(22px * var(--dk)); letter-spacing: var(--dls); }
.pnl-h p { margin: 6px 0 0; color: var(--p-fg2); font-size: 13px; }
.pnl-h p b { color: var(--p-fg); font-weight: 600; }
.pnl .lk { color: var(--p-fg2); }
.pnl .lk:hover { color: var(--p-fg); }
.pnl-f { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--p-line); font-size: 13px; color: var(--p-fg2); }
.pnl-f b { color: var(--p-fg); font-weight: 600; }
/* Opciones dentro del bloque */
.pnl .opts { flex-wrap: wrap; }
.pnl .btn-opt.btn-ghost, .pnl .btn-ghost.sec { background: transparent; color: var(--p-fg2); box-shadow: inset 0 0 0 1px var(--p-line); }
.pnl .btn-opt.btn-ghost::before, .pnl .btn-ghost.sec::before { background: var(--p-fg); }
.pnl .btn-opt.btn-ghost:hover, .pnl .btn-ghost.sec:hover { color: var(--p-bg); }
.pnl .btn-opt.btn-dark, .pnl .btn-opt.btn-dark:hover { background: var(--p-fg); color: var(--p-bg); }
.pnl .tip { background: var(--p-fg); color: var(--p-bg); }
/* Ventas */
/* El gráfico ocupa todo el alto que le queda al bloque */
.dash .pnl.c8 { grid-template-rows: auto auto minmax(210px, 1fr); }
.dash .c8 .chart, .dash .c8 .hrs { height: auto; }
.amt-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: -6px; }
.amt { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(42px * var(--dk)); letter-spacing: var(--dls); line-height: 1; }
.pnl .hr .col { border-bottom-color: var(--p-fg); }
.pnl .hr:hover .col { background: var(--p-px0); }
.pnl .hr .t { background: repeating-linear-gradient(to top, var(--p-px) 0 5px, transparent 5px 7px); }
.pnl .hr.now .t { background: repeating-linear-gradient(to top, var(--acc-l) 0 5px, transparent 5px 7px); }
.pnl .hr.now span { color: var(--acc-l); }
.pnl .hr.later .col { border-bottom: 1.5px dashed var(--p-line); }
.pnl .hr span { color: var(--p-fg3); }
/* Detalle de una venta: cabecera grafito, productos con su garantía, cliente e historial */
.its-h { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0 10px; border-top: 1.5px solid var(--p-fg); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--p-fg2); }
.its + .its { margin-top: 10px; }
.stack { display: grid; gap: 14px; align-content: start; min-width: 0; }
.vh { gap: 22px; }
.vh-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vh-act .st { margin-right: 8px; }
.pnl .st.paid::before { background: var(--p-fg); }
.pnl .st.pending { color: var(--acc-l); }
.pnl .st.pending::before { box-shadow: inset 0 0 0 1.5px var(--acc-l); }
.pnl .st.void { color: var(--p-fg3); }
.pnl .st.void::before { background: var(--p-fg3); }
.vfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 18px; border-top: 1px solid var(--p-line); }
.vfacts > div { display: grid; gap: 4px; align-content: start; padding: 0 18px; border-left: 1px solid var(--p-line); min-width: 0; }
.vfacts > div:first-child { padding-left: 0; border-left: 0; }
.vfacts span { font-size: 12px; color: var(--p-fg3); }
.vfacts b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(19px * var(--dk)); letter-spacing: var(--dls-s); overflow-wrap: anywhere; }
.vfacts > div:first-child b { font-weight: var(--dw); font-size: calc(26px * var(--dk)); letter-spacing: var(--dls); }
.vfacts small { font-size: 12px; color: var(--p-fg2); }
.vfacts .due span, .vfacts .due b { color: var(--acc-l); }
.its { display: grid; }
.it { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 112px; gap: 8px 20px; align-items: start; padding: 16px 0; border-top: 1px solid var(--p-line); }
.it-n b { display: block; font-weight: 500; }
.it-n small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--p-fg3); }
.it .lk { margin-top: 6px; font-size: 12.5px; }
.it-p { font-weight: 600; text-align: right; }
.war { display: grid; gap: 6px; }
.wpx i { width: 9px; height: 9px; border-radius: 2px; }
.war.soon .wpx i.f { background: var(--acc); }
.wl { font-size: 13px; color: var(--p-fg2); }
.wl b { font-weight: 500; color: var(--p-fg); }
.war.soon .wl b { color: var(--acc); }
.war small { font-size: 12px; color: var(--p-fg3); }
.pnl .total { padding-top: 14px; border-top: 1.5px solid var(--p-fg); }
.pnl .who b { font-weight: 500; }
.pnl .who small { display: block; color: var(--p-fg2); }
.pnl .ini { box-shadow: inset 0 0 0 1.5px var(--p-fg); }
.pnl .badge { box-shadow: inset 0 0 0 1px var(--p-fg2); color: var(--p-fg); }
.tline { list-style: none; margin: 0; padding: 0; display: grid; }
.tline li { position: relative; display: grid; gap: 3px; padding: 0 0 16px 22px; }
.tline li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 2px; background: var(--p-px); }
.tline li::after { content: ""; position: absolute; left: 4px; top: 18px; bottom: 2px; width: 1px; background: var(--p-line); }
.tline li:last-child { padding-bottom: 0; }
.tline li:last-child::after { display: none; }
.tline li:not(:first-child)::before { background: var(--p-px0); }
.tline li.bad::before { background: var(--bad); }
.tline b { font-weight: 500; font-size: 13.5px; }
.tline small { font-size: 12px; color: var(--p-fg3); }
/* Medidor de cuadraditos (tráfico y ranking) */
.px { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.px i { width: 7px; height: 7px; border-radius: 1.5px; background: var(--p-px0); }
.px i.f { background: var(--p-px); }
.px em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--p-fg3); margin-left: 4px; line-height: 7px; }
/* Tráfico */
.src { display: grid; }
.src-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 38px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--p-line); }
.chi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--p-fg); box-shadow: inset 0 0 0 1px var(--p-line); }
.chi svg { width: 17px; height: 17px; }
.src-r b { display: block; font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src .px i { width: 6px; height: 6px; }
.src-r small { display: block; font-size: 11.5px; color: var(--p-fg3); margin-top: 1px; }
.src-r .pc { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--p-fg2); }
/* El mes: calendario de píxeles */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 26px)); gap: 5px; justify-content: space-between; }
.cal .wd { font-family: var(--mono); font-size: 10px; color: var(--p-fg3); text-align: center; padding-bottom: 2px; }
.cal i { aspect-ratio: 1; border-radius: 4px; background: var(--p-px0); }
.cal i.l1 { background: color-mix(in srgb, var(--p-px) 25%, var(--p-px0)); }
.cal i.l2 { background: color-mix(in srgb, var(--p-px) 50%, var(--p-px0)); }
.cal i.l3 { background: color-mix(in srgb, var(--p-px) 75%, var(--p-px0)); }
.cal i.l4 { background: var(--p-px); }
.cal i.today { box-shadow: 0 0 0 2px var(--p-bg), 0 0 0 3.5px var(--acc-l); }
.cal i.later { background: transparent; box-shadow: inset 0 0 0 1px var(--p-line); }
.mini { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 2px 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--p-line); }
.mini dt { grid-row: 1; font-size: 11.5px; color: var(--p-fg3); }
.mini dd { grid-row: 2; margin: 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(19px * var(--dk)); letter-spacing: var(--dls-s); }
/* Más vendidos: ranking */
.rank { list-style: none; margin: 0; padding: 0; display: grid; }
.rank li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--p-line); }
.rank .rk { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(24px * var(--dk)); color: var(--p-fg3); line-height: 1; }
.rank li:first-child .rk { color: var(--p-fg); }
.rank b { display: block; font-weight: 500; font-size: 13.5px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank .v { text-align: right; font-weight: 600; font-size: 13.5px; }
.rank .v small { display: block; font-weight: 400; font-size: 11.5px; color: var(--p-fg3); }
/* Últimas ventas: ticket de caja */
.rcpt { position: relative; display: grid; align-content: start; background: #fff; color: var(--ink); font-family: var(--mono); font-size: 12px; padding: 20px 20px 30px; border-radius: 18px 18px 0 0; box-shadow: inset 0 0 0 1px var(--line);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
.rc-h { text-align: center; padding-bottom: 12px; border-bottom: 1px dashed #c9c9ce; }
.rc-h b { display: block; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: 16px; letter-spacing: var(--dls-s); }
.rc-h span { color: var(--ink-3); font-size: 11px; }
.rc-l { display: grid; }
.rc-i { display: grid; gap: 3px; width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px dashed #d9d9dd; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rc-i:hover { background: var(--bg-soft); }
.rc-i .r1, .rc-i .r2 { display: flex; justify-content: space-between; gap: 10px; }
.rc-i .r1 b { font-weight: 500; }
.rc-i .r2 { color: var(--ink-3); font-size: 11px; }
.rc-i .r2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-i em { font-style: normal; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; color: var(--acc); }
.rc-i.void .r1 b { text-decoration: line-through; color: var(--ink-3); }
.rc-i.void em { color: var(--ink-3); }
.rc-f { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--ink-2); }
.rc-f:hover { color: var(--ink); }

/* ---------- Reparaciones ---------- */
/* Etapas como indicadores que filtran (reusa .kpis/.kpi) */
.kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
button.kpi { border: 0; border-left: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .2s; }
button.kpi:first-child { border-left: 0; }
button.kpi:hover { background: var(--bg-soft); }
.kpi.on { box-shadow: inset 0 -2px 0 var(--ink); background: var(--bg-soft); }
/* Proveedores: cuánto se vendió de cada producto del lote */
.sell { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.note { margin: 12px 0 0; font-size: 12.5px; }
/* Cuadraditos grandes (resumen, filas de proveedores, lotes); 'a' = en acento */
.rpx { gap: 3px; }
.rpx i { width: 9px; height: 9px; border-radius: 2px; }
.px i.a { background: var(--acc); }
/* Resumen de arriba: banda grafito (proveedores, lotes); se comparó con una frase y con bloques sueltos */
.pnl:not(.lt) .px i.a { background: var(--acc-l); }
.rs-a { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 22px 0; }
.rs-a > div { display: grid; gap: 8px; align-content: start; padding: 0 22px; border-left: 1px solid var(--p-line); min-width: 0; }
.rs-a > div:first-child { border-left: 0; }
.rs-a span { font-size: 12.5px; color: var(--p-fg3); }
.rs-a b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(26px * var(--dk)); letter-spacing: var(--dls); line-height: 1; }
.rs-a small { font-size: 12px; color: var(--p-fg2); }
.rs-a .due b { color: var(--acc-l); }
#ptab-b .rs-a { margin-bottom: 28px; }
/* ---------- Turnos: agenda del día que entra entera en la pantalla ---------- */
/* Estados por color de bloque: grafito = llegó, blanco = confirmado, acento suave = sin confirmar, gris rayado = no vino / cancelado */
.av { width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--dk-mod); color: #fff; font-family: var(--mono); font-size: 10px; line-height: 1; }
.chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--bg-soft); color: var(--ink-2); }
.chip.is-pend { background: color-mix(in srgb, var(--acc) 12%, #fff); color: var(--acc); }
.chip.is-in { background: var(--dk-mod); color: #fff; }
.chip.is-off { color: var(--ink-3); text-decoration: line-through; }
.soft { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 20px; background: var(--bg-soft); }
.soft h3 { margin: 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(15px * var(--dk)); letter-spacing: var(--dls-s); }
.occbar { display: block; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.occbar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.dstats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.dstats b { color: var(--ink); font-weight: 600; }
.dstats .acc, .dstats .acc b { color: var(--acc); }
.dstats .occ { display: inline-flex; align-items: center; gap: 6px; }
.dstats .occ .occbar { width: 54px; height: 5px; }
.todo { background: color-mix(in srgb, var(--acc) 8%, #fff); }
.todo h3 { color: var(--acc); }
.todo-r { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 10px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 13px; color: inherit; text-align: left; cursor: pointer; transition: transform .2s var(--ease); }
.todo-r:hover { transform: translateX(2px); }
.todo-r b { font-weight: 600; }
.todo-r small { display: block; font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo > .muted { font-size: 12px; }
.v1 { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 18px; align-items: start; }
.v1-side { display: grid; gap: 12px; position: sticky; top: 84px; }
.v1-side > .btn { justify-content: space-between; }
.mcal { gap: 12px; padding: 18px; }
.mcal-h { display: flex; align-items: center; justify-content: space-between; }
.mcal-h b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(15px * var(--dk)); }
.mc-nav { width: 30px; height: 30px; flex: none; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font: inherit; cursor: pointer; transition: background .2s; }
.mc-nav:hover { background: rgba(255,255,255,.16); }
.mc-nav.lt { background: var(--bg-soft); color: var(--ink); }
.mc-nav.lt:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.mcal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.mcal-g > span { font-family: var(--mono); font-size: 10.5px; color: var(--p-fg3); padding-bottom: 3px; }
.mcal-g button { aspect-ratio: 1; display: grid; place-items: center; align-content: center; border: 0; border-radius: 9px; background: none; color: #fff; font: inherit; font-size: 12.5px; cursor: pointer; }
.mcal-g button small { font-family: var(--mono); font-size: 8.5px; color: var(--p-fg3); line-height: 1; }
.mcal-g button:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.mcal-g button:disabled { color: var(--p-fg3); opacity: .5; cursor: default; }
.mcal-g button.today { box-shadow: inset 0 0 0 1.5px var(--acc-l); }
.mcal-g button.on { background: #fff; color: var(--ink); }
.mcal-g button.on small { color: var(--ink-3); }
.v1-main { position: relative; display: grid; gap: 14px; padding: 18px 20px 20px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(11,11,12,.04), inset 0 0 0 1px var(--line); }
.v1-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.v1-day { display: flex; align-items: center; gap: 12px; }
.v1-day h1 { margin: 0; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(24px * var(--dk)); letter-spacing: var(--dls); line-height: 1.05; }
.v1-day p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.lg.is-pend::before { background: color-mix(in srgb, var(--acc) 18%, #fff); box-shadow: inset 2px 0 0 var(--acc); }
.lg.is-in::before { background: var(--dk-mod); box-shadow: none; }
.lg.is-off::before { background: repeating-linear-gradient(-45deg, var(--bg-soft) 0 3px, #fff 3px 6px); }
/* --hh: alto de una hora; lo calcula fitAgenda() para que entre el día entero */
.vtl { --hh: 52px; --span: 12; position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); row-gap: 8px; }
.vtl-heads { grid-column: 2; display: grid; gap: 8px; }
.vtl-heads span { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 4px; }
.vtl-heads .av { width: 24px; height: 24px; font-size: 9px; }
.vtl-heads b { font-weight: 600; font-size: 13px; }
.vtl-heads small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtl-hours { display: grid; grid-auto-rows: var(--hh); }
.vtl-hours span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); transform: translateY(-6px); }
.vtl-lanes { position: relative; display: grid; gap: 8px; height: calc(var(--hh) * var(--span)); background: repeating-linear-gradient(to bottom, var(--bg-soft) 0 var(--hh), transparent var(--hh) calc(var(--hh) * 2)); border-radius: 14px; }
.lane { position: relative; border-radius: 12px; cursor: copy; transition: background .2s; }
.lane:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ev { position: absolute; left: 3px; right: 3px; display: grid; align-content: start; gap: 1px; padding: 5px 9px; border: 0; border-radius: 9px; background: #fff; box-shadow: 0 1px 4px rgba(11,11,12,.08), inset 0 0 0 1px var(--line); font: inherit; text-align: left; color: var(--ink); cursor: pointer; overflow: hidden; z-index: 1; transition: transform .2s var(--ease), box-shadow .2s; }
.ev:hover { transform: translateX(2px); box-shadow: 0 8px 18px rgba(11,11,12,.14); z-index: 3; }
.ev b, .ev small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev b { font-size: 12px; font-weight: 600; }
.ev b em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.ev small { font-size: 11.5px; color: var(--ink-2); }
.ev.one { align-content: center; padding-block: 0; }
.ev.one small { display: none; }
.ev.tiny { padding: 0; }
.ev.tiny b, .ev.tiny small { display: none; }
.ev.is-pend { background: color-mix(in srgb, var(--acc) 12%, #fff); box-shadow: inset 3px 0 0 var(--acc); }
.ev.is-in { background: var(--dk-mod); color: #fff; box-shadow: none; }
.ev.is-in small, .ev.is-in b em { color: var(--dk-fg2); }
.ev.is-off { background: repeating-linear-gradient(-45deg, var(--bg-soft) 0 5px, #fff 5px 10px); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
.ev.is-off b { text-decoration: line-through; }
.now { position: absolute; left: -4px; right: 0; height: 2px; background: var(--acc); z-index: 2; pointer-events: none; }
.now em { position: absolute; left: -6px; top: 50%; transform: translate(-100%, -50%); padding: 2px 6px; border-radius: 99px; background: var(--acc); color: #fff; font-style: normal; font-family: var(--mono); font-size: 10px; }
/* Detalle al pasar el mouse */
.evtip { position: absolute; z-index: 5; width: 250px; display: grid; gap: 6px; justify-items: start; padding: 14px 16px; border-radius: 16px; background: var(--dk-mod); color: #fff; box-shadow: 0 16px 36px rgba(11,11,12,.25); pointer-events: none; font-size: 12.5px; }
.evtip[hidden] { display: none; }
.evtip > .num { color: var(--dk-fg2); font-size: 12px; }
.evtip b { font-size: 15px; font-weight: 600; }
.evtip p { margin: 0; color: var(--dk-fg2); }
.evtip small { display: flex; align-items: center; gap: 8px; color: var(--dk-fg2); }
.evtip .av { width: 22px; height: 22px; font-size: 8.5px; background: #fff; color: var(--ink); }
.evtip .chip { background: rgba(255,255,255,.1); color: #fff; }
.evtip .chip.is-pend { background: color-mix(in srgb, var(--acc-l) 22%, transparent); color: var(--acc-l); }
/* ---------- Cajas y cuentas corrientes ---------- */
.chip.is-live { background: color-mix(in srgb, var(--acc-l) 22%, transparent); color: var(--acc-l); }
.regc { gap: 14px; }
.regc-m span { display: block; font-size: 12.5px; color: var(--p-fg3); }
.regc-m b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dw); font-size: calc(30px * var(--dk)); letter-spacing: var(--dls); line-height: 1.1; }
.regc-d { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; padding-top: 12px; border-top: 1px solid var(--p-line); font-size: 13px; }
.regc-d dt { color: var(--p-fg2); }
.regc-d dd { margin: 0; text-align: right; }
.regc-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.regc-off { margin: 0; font-size: 13px; color: var(--p-fg2); }
.mline small { grid-column: 1 / -1; }
.mline .occbar { margin-top: 2px; }
.lim { display: block; width: 100%; max-width: 180px; }
.occbar.over i { background: var(--acc); }
.amt.out { color: var(--ink-3); }
.amt.late { color: var(--acc); }
em.bad { font-style: normal; color: var(--bad); }
.hint { font-size: 13px; }
.owe small .lk { font-size: 12px; }
/* Lista de proveedores */
.sf { margin-bottom: 16px; }
.srows { display: grid; gap: 10px; }
.srow { display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr) minmax(150px, auto) 18px; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; }
.srow:hover { background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--ink-3); }
.srow .ini { width: 40px; height: 40px; border-radius: 11px; }
.sr-n b { display: block; font-weight: 500; font-size: 15px; }
.srow small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.sr-d { text-align: right; }
.sr-d b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(18px * var(--dk)); letter-spacing: var(--dls-s); }
.sr-d b.late { color: var(--acc); }
.srow .arrow { color: var(--ink-3); transition: transform .3s var(--ease), color .2s; }
.srow:hover .arrow { color: var(--ink); transform: translateX(3px); }
/* Lotes de un proveedor */
.lots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.lot { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; }
.lot:hover { background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--ink-3); }
.lot.wait { box-shadow: inset 0 0 0 1px var(--line); background: repeating-linear-gradient(-45deg, transparent 0 8px, var(--bg-soft) 8px 9px); }
.lot-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; }
.lot-n { font-weight: 500; font-size: 14.5px; }
.lot-m { display: grid; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.lot-f { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.lot-f b { font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(18px * var(--dk)); letter-spacing: var(--dls-s); color: var(--ink); }
.sell .px { flex-wrap: nowrap; }
#ptab, #pf, #cf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#ptab > *, #pf > *, #cf > * { flex: none; }
.late { font-style: normal; color: var(--acc); }
/* Progreso de la orden: la barra de etapa de la marca (base.css), en chico */
.etapa.rp { gap: 10px; font-size: 13px; white-space: nowrap; }
.etapa.rp .seg i { width: 14px; height: 5px; }
.etapa.rp.ready > span:last-child { color: var(--acc); font-weight: 500; }
.etapa.rp.ready .seg i.n { background: linear-gradient(90deg, var(--acc) 50%, #e4e4e7 50%); background-size: 200% 100%; }

/* ---------- Compras ---------- */
.row .r small { display: block; font-weight: 400; }
.po-line { align-items: center; }
.po-line small { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.po-tot { margin-right: auto; font-size: 13.5px; color: var(--ink-2); }
.po-tot b { color: var(--ink); }

/* ---------- Asistente: segundo sidebar a la derecha, en forma de chat ---------- */
.chat { position: fixed; z-index: 55; top: 0; right: 0; bottom: 0; width: min(410px, 100%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr); background: #fff; border-left: 1px solid var(--line); transform: translateX(102%); transition: transform .45s var(--ease); }
.chat.on { transform: none; box-shadow: -40px 0 80px -40px rgba(11,11,12,.3); }
.chat-h { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 12px 0 16px; background: var(--dk-bg); color: #fff; border-bottom: 1px solid var(--dk-line); }
.chat-h div { flex: 1; min-width: 0; }
.chat-h b { display: block; font-weight: 500; font-size: 14px; }
.chat-h small { display: block; font-size: 12px; color: var(--dk-fg2); }
.chat-av { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--ink); box-shadow: inset 0 0 0 1px var(--dk-line); }
.chat-av svg { height: 15px; width: auto; aspect-ratio: 340 / 420; fill: #fff; }
.chat-b { overflow-y: auto; padding: 18px 16px; display: grid; align-content: start; gap: 14px; overscroll-behavior: contain; }
.msg { display: flex; gap: 10px; align-items: flex-end; max-width: 92%; animation: msg-in .35s var(--ease) both; }
.msg .bb { padding: 11px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; }
.msg.ai .bb { background: var(--bg-soft); border-bottom-left-radius: 4px; }
.msg.me { justify-self: end; }
.msg.me .bb { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.msg .bb a { display: inline-block; margin-top: 4px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.msg .bb kbd { color: var(--ink-2); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
/* Escribiendo: tres cuadraditos */
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 1.5px; background: var(--ink-3); animation: type 1s var(--ease) infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes type { 50% { transform: translateY(-4px); background: var(--ink); } }
.chat-q { min-width: 0; padding: 12px 16px 4px; border-top: 1px solid var(--line); }
.chat-q p { margin: 0 0 8px; font-size: 12px; color: var(--ink-3); }
.chat-q div { display: flex; flex-wrap: wrap; gap: 6px; }
.qk { border: 0; border-radius: 999px; padding: 7px 12px; background: none; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; transition: box-shadow .2s, color .2s; }
.qk:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chat-f { display: flex; gap: 8px; padding: 12px 16px 16px; }
.chat-f input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--bg-soft); font: inherit; font-size: 14px; outline: 0; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s; }
.chat-f input:focus { box-shadow: inset 0 0 0 1px var(--ink); }
.chat-f button { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--ink); color: #fff; cursor: pointer; }
.chat-f button svg { width: 16px; height: 16px; fill: currentColor; }
.tb-b.on { background: var(--dk-mod); color: #fff; }
@media (prefers-reduced-motion: reduce) { .msg, .typing i { animation: none; } }

/* ---------- Buscar ---------- */
dialog.findd { width: min(600px, calc(100% - 24px)); align-self: start; margin-top: 12vh; border-radius: 20px; }
.find-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.find-h input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; background: none; }
.find-h kbd, .find-f kbd { color: var(--ink-3); }
.find-r { max-height: min(420px, 56vh); overflow-y: auto; padding: 6px 8px 10px; }
.find-g { padding: 12px 12px 6px; font-size: 12px; color: var(--ink-3); }
.find-i { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.find-i.on { background: var(--ink); color: #fff; }
.find-i.on small, .find-i.on .r { color: #a9a9ae; }
.find-i.on .ini { box-shadow: inset 0 0 0 1.5px #fff; }
.find-i b { display: block; font-weight: 500; font-size: 14px; }
.find-i small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.find-i .r { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.find-i .sq { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.find-i.on .sq { box-shadow: inset 0 0 0 1px #3a3a40; }
.find-none { padding: 32px 12px; text-align: center; color: var(--ink-2); }
.find-f { display: flex; gap: 18px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.find-f kbd { margin-right: 4px; }

/* ---------- Avisos ---------- */
.toasts { position: fixed; z-index: 60; left: 50%; bottom: 24px; translate: -50% 0; display: grid; gap: 8px; justify-items: center; }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; box-shadow: 0 20px 40px -20px rgba(11,11,12,.6); animation: toast .5s var(--ease); white-space: nowrap; }
.toast i { width: 8px; height: 8px; background: var(--acc-l); flex: none; }
@keyframes toast { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Ajustes ---------- */
.settings { display: grid; gap: 56px; max-width: 760px; }
.settings section { display: grid; gap: 18px; }
.settings p { margin: 0; color: var(--ink-2); line-height: 1.6; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .c8, .c12 { grid-column: span 12; }
  .c4 { grid-column: span 6; }
  .cli { grid-template-columns: 1fr; }
  .stack.c4 { grid-column: span 12; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .wrap { padding-inline: 16px; }
  .v1 { grid-template-columns: minmax(0, 1fr); }
  .v1-side { position: static; }
  .v1-main { padding: 14px; }
  .legend { display: none; }
  .vtl { grid-template-columns: 38px minmax(0, 1fr); }
  .vtl-heads small, .vtl-heads b { display: none; }
  .vtl-heads span { justify-content: center; }
  .vtl-lanes, .vtl-heads { gap: 3px; }
  .rs-a { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .rs-a > div:nth-child(3) { border-left: 0; }
  .srow { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .srow .ini { width: 36px; height: 36px; }
  .sr-o, .srow .arrow { display: none; }
  .sell .px i { width: 5px; height: 5px; }
  .rpx { gap: 2px; }
  .rpx i { width: 7px; height: 7px; }
  .stack.c4 { grid-template-columns: minmax(0, 1fr); }
  .vfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .vfacts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .it { grid-template-columns: minmax(0, 1fr) auto; }
  .it-w { grid-column: 1 / -1; grid-row: 2; }
  #ctab-s { display: none; }
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto; z-index: 50; transform: translateX(-102%); transition: transform .45s var(--ease); }
  .side.open { transform: none; box-shadow: 30px 0 60px -30px rgba(11,11,12,.45); }
  .box { padding: 14px 14px 16px; }
  .box.kpis { padding: 0; }
  .c4, .c8, .c12 { grid-column: span 12; }
  .amt-row { flex-wrap: wrap; }
  .dash .pnl.c8 { grid-template-rows: auto auto minmax(180px, 1fr); }
  .etapa.rp > span:last-child { display: none; }
  /* Asistente en celular: pantalla completa que se ajusta al teclado, preguntas rápidas en una fila */
  .chat { width: 100%; height: 100dvh; bottom: auto; border-left: 0; }
  .chat-b { padding: 16px; }
  .chat-q { padding: 10px 0 0; }
  .chat-q p { padding: 0 16px; }
  .chat-q div { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; }
  .chat-q div::-webkit-scrollbar { display: none; }
  .qk { flex: none; white-space: nowrap; padding: 8px 13px; font-size: 13px; }
  .chat-f { padding: 10px 16px 16px; }
  .chat-f input { height: 46px; font-size: 16px; }
  .chat-f button { width: 46px; height: 46px; }
  .kpis.k5 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 132px; overflow-x: auto; scrollbar-width: none; }
  .kpis.k5 .kpi { border-top: 0; }
  .kpis.k5 .kpi + .kpi { border-left: 1px solid var(--line); }
  .person { padding: 18px 16px; }
  .kpi { padding: 12px 14px; }
  .kpi b { font-size: 19px; }
  .side-close { display: inline-flex !important; }
  .find kbd { display: none; }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(11,11,12,.3); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .side-scrim.on { opacity: 1; pointer-events: auto; }
  .mbar { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; justify-content: space-between; gap: 10px; height: 60px; padding: 0 16px; background: var(--dk-bg); border-bottom: 1px solid var(--dk-line); color: #fff; }
  .mbar .r { display: flex; align-items: center; gap: 2px; }
  .mbar .menu-b { margin-left: 6px; }
  .mbar .tb-sep { margin: 0 2px; }
  .tbar { display: none; }
  .menu-b i { width: 7px; height: 7px; background: currentColor; font-size: 0; opacity: 1; }
  .page { padding-top: 28px; padding-bottom: 72px; gap: 40px; }
  .hrs { height: 180px; gap: 2px; }
  .hr span { font-size: 9.5px; }
  .chart { height: 180px; }
  .facts .fact b { font-size: 17px; }
  .hm { display: none; }
  .sm-only { display: block !important; }
  th, td { padding: 13px 10px; }
  .row-2 { grid-template-columns: 1fr; }
  .toasts { bottom: 20px; }
  dialog.pos { height: calc(100vh - 24px); }
  .pos-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pos-cat { padding: 20px 18px 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  td .st { font-size: 0; gap: 0; }
  td .st::before { width: 10px; height: 10px; }
  .ticket { max-height: 54vh; }
  .ticket-h { padding: 16px 18px 8px; }
  .cart { padding: 0 18px; }
  .ticket-f { padding: 12px 18px 18px; }
}
@media (max-width: 520px) {
  .search { min-width: 0; max-width: none; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}