/* ============================================================
   Backoffice Ticam — sistema de diseño
   Instrumento de control: denso, tranquilo, preciso. Un acento para lo
   accionable; los semánticos solo para estado. Números tabulares siempre.
   Las explicaciones viven en tooltips (ⓘ), no en párrafos.
   ============================================================ */

/* Tokens del rediseño "Aguja de brújula" (.rig/diseno/spec.md §2, variante B): relleno #266BCF
   (el hover de ticam.cl) y el azul de marca #1C4F99 para texto, la aguja y el logo. Los dos
   bloques oscuros son iguales y tienen que seguir siéndolo. */
:root {
  color-scheme: light;
  --bg: #F4F6FA; --surface: #FFFFFF; --surface-2: #EEF2F9; --elevated: #FFFFFF;
  --border: #DFE5F0; --border-strong: #7F8AA0;
  --ink: #16233B; --ink-soft: #3D4657; --muted: #556076; --faint: #5F6A80;
  --accent: #266BCF; --accent-ink: #1C4F99; --accent-wash: #E8EFFA; --accent-hover: #1C4F99; --teal: #0E8C80;
  --on-accent: #FFFFFF; --on-warn: #FFFFFF;
  --ok: #17703D; --ok-wash: #E7F3EC; --warn: #B54708; --warn-wash: #FEF1E3; --danger: #C0262D; --danger-wash: #FDECEC;
  --mark: #6F87AD; --mark-soft: #E8EDF5;
  --s1: #266BCF; --s2: #D9662B; --s3: #1E8F62; --s4: #B07A00;
  --o1: #5182CD; --o2: #3971C6; --o3: #305FA6; --o4: #1C4F99;
  --tt-ev: #E0A52A;
  --scrim: rgba(22,35,59,.45);
  --shadow-sm: 0 1px 2px rgba(22,35,59,.06);
  --shadow-md: 0 1px 2px rgba(22,35,59,.06), 0 12px 32px -8px rgba(28,79,153,.22);
  --radius: 15px; --radius-sm: 10px;
  --r-panel: 20px; --r-pop: 12px; --r-inner: 8px; --r-pill: 999px;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --font-title: "Poppins", var(--font-ui);
  --font-label: "IBM Plex Sans Condensed", var(--font-ui);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-1: 120ms; --dur-2: 160ms; --dur-3: 200ms; --dur-4: 240ms;
  --z-tabla: 2; --z-barra-editor: 15; --z-pestanas: 19; --z-superior: 20; --z-fondo-menu: 29; --z-menu: 30;
  --z-menu-pop: 35; --z-chat: 45; --z-modal: 90; --z-popover: 110; --z-tooltip: 120; --z-toast: 130;
  --sidebar-w: 216px;
  --rail-w: 84px;
  --topbar-h: 52px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1424; --surface: #151E33; --surface-2: #1B2640; --elevated: #1C2741;
    --border: #26334F; --border-strong: #62729A;
    --ink: #E8EDF7; --ink-soft: #B8C2D6; --muted: #9AA5BC; --faint: #8F9AB2;
    --accent: #7AA7EA; --accent-ink: #A9C6F2; --accent-wash: #1A2B4D; --accent-hover: #A9C6F2; --teal: #2CC4B4;
    --on-accent: #0E1424; --on-warn: #16233B;
    --ok: #4CC38A; --ok-wash: #11291E; --warn: #F0A53A; --warn-wash: #2E2210; --danger: #F27A7F; --danger-wash: #33161A;
    --mark: #7F97BD; --mark-soft: #2C3A58;
    --s1: #7AA7EA; --s2: #E8814A; --s3: #3DBB86; --s4: #E0A52A;
    --o1: #4985DF; --o2: #6C9CE5; --o3: #93B6EC; --o4: #BED3F4;
    --tt-ev: #8F5C00;
    --scrim: rgba(4,7,15,.62);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 2px 6px rgba(0,0,0,.3), 0 16px 40px -10px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1424; --surface: #151E33; --surface-2: #1B2640; --elevated: #1C2741;
  --border: #26334F; --border-strong: #62729A;
  --ink: #E8EDF7; --ink-soft: #B8C2D6; --muted: #9AA5BC; --faint: #8F9AB2;
  --accent: #7AA7EA; --accent-ink: #A9C6F2; --accent-wash: #1A2B4D; --accent-hover: #A9C6F2; --teal: #2CC4B4;
  --on-accent: #0E1424; --on-warn: #16233B;
  --ok: #4CC38A; --ok-wash: #11291E; --warn: #F0A53A; --warn-wash: #2E2210; --danger: #F27A7F; --danger-wash: #33161A;
  --mark: #7F97BD; --mark-soft: #2C3A58;
  --s1: #7AA7EA; --s2: #E8814A; --s3: #3DBB86; --s4: #E0A52A;
  --o1: #4985DF; --o2: #6C9CE5; --o3: #93B6EC; --o4: #BED3F4;
  --tt-ev: #8F5C00;
  --scrim: rgba(4,7,15,.62);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 2px 6px rgba(0,0,0,.3), 0 16px 40px -10px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; } }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui); background: var(--bg); color: var(--ink);
  font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0; letter-spacing: -.01em; font-weight: 600; }
p { margin: 0; }
small { font-size: 11.5px; }
b, strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: .95em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.t-ok { color: var(--ok); } .t-warn { color: var(--warn); } .t-bad { color: var(--danger); }
.hidden { display: none !important; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; min-height: calc(100vh / var(--zoom, 1)); }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh; height: calc(100vh / var(--zoom, 1)); overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; z-index: var(--z-menu);
}
.brand { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; color: var(--accent-ink); }
.brand-name { font-family: var(--font-title); font-weight: 600; font-size: 14px; letter-spacing: -.005em; line-height: 1.1; white-space: nowrap; }
.brand-sub { font-size: 11px; color: var(--faint); letter-spacing: .02em; white-space: nowrap; }
.nav { position: relative; padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 2px; }
/* Guía de 1 px y la aguja en el ítem activo (por ahora quieta; viajará en la etapa 3). */
.nav::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 16px; width: 1px; background: var(--border); pointer-events: none; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 12px;
  border-radius: var(--radius-sm); border: 0; cursor: pointer; background: transparent; color: var(--ink-soft);
  font-weight: 500; font-size: 13.5px; text-align: left; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: transparent; color: var(--ink); font-weight: 600; }
.nav-item.active:hover { background: var(--surface-2); }
.nav-item.active::before {
  content: ""; position: absolute; left: -7px; top: calc(50% - 9px); width: 8px; height: 18px; pointer-events: none;
  background: var(--accent-ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.sidebar.open .nav-item.active::before { animation: bo-aparecer var(--dur-1) var(--ease); }
@keyframes bo-aparecer { from { opacity: 0; } to { opacity: 1; } }
.nav-item .ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); display: inline-grid; place-items: center; }
.nav-item .ico svg { width: 18px; height: 18px; }
.nav-item.active .ico { color: var(--accent-ink); }
.nav-item .nav-txt { overflow: hidden; text-overflow: ellipsis; }
.nav-item .badge { margin-left: auto; font-family: var(--font-label); font-size: 11.5px; font-weight: 600; padding: 0 6px; height: 18px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.nav-item.active .badge { background: var(--accent); color: var(--on-accent); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); flex-shrink: 0; position: sticky; top: 0; z-index: var(--z-superior);
  background: var(--surface);
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.topbar h1 { font-family: var(--font-title); font-size: 17px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.content { padding: 18px 20px 40px; max-width: 1360px; width: 100%; }
.section { display: none; }
.section.active { display: block; animation: fade .16s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .section.active { animation: none; } }

/* Riel en pantallas medianas (761–1180 px: tabletas y el notebook escalado del usuario): las seis
   áreas siempre a la vista, con ícono y nombre; no hace falta un botón de menú. */
@media (max-width: 1180px) and (min-width: 761px) {
  .sidebar { width: var(--rail-w); }
  .brand { padding: 0; justify-content: center; }
  .brand > div { display: none; }
  .nav { padding: 10px 6px 16px; gap: 4px; }
  .nav::before { top: 10px; }
  .nav-item.active::before { left: -3px; }
  .nav-item { flex-direction: column; justify-content: center; gap: 4px; height: 60px; padding: 6px 2px; position: relative; text-align: center; font-size: 11.5px; }
  .nav-item .ico, .nav-item .ico svg { width: 20px; height: 20px; }
  .nav-item .nav-txt { max-width: 100%; line-height: 1.15; }
  .nav-item .badge { position: absolute; top: 5px; left: calc(50% + 6px); margin: 0; height: 16px; min-width: 16px; padding: 0 4px; font-size: 10px; justify-content: center; }
}
@media (max-width: 760px) {
  .sidebar { position: fixed; transform: translateX(-100%); transition: transform .2s; box-shadow: none; width: min(var(--sidebar-w), 82vw); }
  .sidebar.open { transform: none; box-shadow: var(--shadow-md); }
  .topbar { padding: 0 12px; gap: 8px; }
  .content { padding: 12px 12px 32px; }
  .nav-item { height: 44px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ---------- Pestañas del área (bajo la barra superior) ---------- */
.area-tabs {
  position: sticky; top: var(--topbar-h); z-index: var(--z-pestanas); display: flex; gap: 2px; padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
}
.area-tabs::-webkit-scrollbar { display: none; }
/* Vistas dentro de una pestaña (Competencia: Productos | Tiendas rastreadas): navegación, no
   filtro; por eso píldoras sin caja, distintas de los segmentos que filtran. */
.sub-tabs { display: flex; gap: 4px; margin: -6px 0 14px; overflow-x: auto; scrollbar-width: none; }
.sub-tabs[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tabs .seg-btn { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; color: var(--ink-soft); text-decoration: none; }
.sub-tabs .seg-btn.on { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.sub-tabs .seg-btn .n { background: var(--surface-2); color: var(--ink-soft); border-radius: 999px; padding: 0 6px; line-height: 17px; opacity: 1; }
.area-tabs.mas-der { mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.area-tabs.mas-izq { mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.area-tabs.mas-der.mas-izq { mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.area-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; flex-shrink: 0;
  color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.area-tab:hover { color: var(--ink); border-bottom-color: var(--border-strong); }
.area-tab[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent-ink); }
.area-tab .badge { font-family: var(--font-label); font-size: 11px; font-weight: 600; height: 17px; min-width: 17px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: var(--on-warn); display: inline-flex; align-items: center; justify-content: center; }
.area-tab[aria-current="page"] .badge { background: var(--accent); color: var(--on-accent); }
@media (max-width: 760px) { .area-tabs { padding: 0 6px; } .area-tab { padding: 0 10px; } }
@media (pointer: coarse) { .area-tab { height: 46px; font-size: 14px; } }

/* ---------- Chips de estado ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.chip.ok .dot { background: var(--ok); } .chip.bad .dot { background: var(--danger); } .chip.warn .dot { background: var(--warn); }
.chip.bad { color: var(--danger); } .chip.warn { color: var(--warn); }
button.chip { cursor: pointer; }
button.chip:hover { background: var(--surface-2); }
.chip-txt { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .chip.estado .chip-txt { display: none; } .chip.estado { width: 28px; padding: 0; justify-content: center; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; height: 30px; padding: 0 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font-size: 12.5px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-ink); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-strong)); }
.btn.danger:hover { background: var(--danger-wash); }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn.lg { height: 38px; padding: 0 16px; font-size: 14px; }
.btn .ico, .btn > svg { width: 14px; height: 14px; }
.icon-btn {
  width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: var(--radius-sm); flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); cursor: pointer; padding: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn .ico, .icon-btn > svg { width: 16px; height: 16px; }
/* acción de fila: solo ícono, sin borde, con título */
.ibtn { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 6px; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; text-decoration: none; }
.ibtn:hover { background: var(--surface-2); color: var(--accent); text-decoration: none; }
.ibtn > svg { width: 15px; height: 15px; }
.ibtn.primary { color: var(--accent); }
.acts { display: inline-flex; gap: 2px; align-items: center; }

/* ---------- Tarjetas y grillas ---------- */
.grid { display: grid; gap: 12px; }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .cols-4 { grid-template-columns: repeat(2,1fr); } .cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .cols-4,.cols-3,.cols-2 { grid-template-columns: 1fr; } }
.grid > * { min-width: 0; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.card-head { display: flex; align-items: center; gap: 8px 10px; min-height: 42px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.card-head .sub { font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head .spacer + * { flex-shrink: 0; }
.card-head .fresh { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-head .spacer { margin-left: auto; }
.card-body, .card-pad { padding: 14px; }
.card-body.tight { padding: 8px 14px; }
.card-foot { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.card > .table-wrap { border-radius: 0 0 var(--radius) var(--radius); }
.card > .table-wrap:first-child { border-radius: var(--radius); }
.card .tbl th:first-child, .card .tbl td:first-child { padding-left: 14px; }
.card .tbl th:last-child, .card .tbl td:last-child { padding-right: 14px; }
.card .tbl tbody tr:last-child td { border-bottom: 0; }
.stack { display: grid; gap: 12px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two-wide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 12px; }
@media (max-width: 960px) { .two, .two-wide { grid-template-columns: 1fr; } }
.two > *, .two-wide > * { min-width: 0; }

/* ---------- KPIs (franja de cifras) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.kpis.k3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kpis.inner { border: 0; border-radius: 0; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.kpi { background: var(--surface); padding: 11px 14px 10px; min-width: 0; display: flex; flex-direction: column; gap: 2px; box-shadow: 1px 1px 0 0 var(--border); }
.kpi .k { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 0; }
.kpi .k > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
.kpi .v { font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v.sm { font-size: 17px; }
.kpi .d { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .d.up { color: var(--ok); } .kpi .d.down { color: var(--danger); }
.kpi .d .ar { font-size: 10.5px; margin-right: 2px; }
.kpi .s { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.dentro .v { color: var(--ok); } .kpi.fuera .v { color: var(--danger); }
.kpi.alerta .v { color: var(--warn); }
@media (max-width: 1180px) { .kpis, .kpis.inner { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } .kpi { padding: 9px 11px 8px; } .kpi .v { font-size: 18px; } }
@media (max-width: 640px) { .kpis, .kpis.inner { grid-template-columns: repeat(2, 1fr); } }
/* compat: <dl class="cifras"> (fichas de catálogo y bloques viejos) */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; margin: 0; padding: 0; }
.cifras > div { border-top: 2px solid var(--border); padding-top: 6px; min-width: 0; }
.cifras dt { font-size: 11.5px; color: var(--muted); margin: 0; }
.cifras dd { margin: 1px 0 0; font-weight: 600; font-size: 17px; line-height: 1.2; }
.cifras dd small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.cifras dd small.mas { color: var(--ok); } .cifras dd small.menos { color: var(--danger); } .cifras dd small.antes { color: var(--muted); }
.cifras dd.dentro { color: var(--ok); } .cifras dd.fuera { color: var(--danger); }
.cifras dd.texto { font-weight: 500; font-size: 12.5px; line-height: 1.4; }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td small { font-size: 11px; color: var(--muted); }
.tbl a { color: inherit; }
.tbl a:hover { color: var(--accent); }
.tbl td .sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .texto { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .texto.ancho { max-width: 560px; }
.tbl .clip { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl tr[data-href], .pedidos-tbl tr[data-id], .tbl tr[data-id][tabindex] { cursor: pointer; }
.tbl tr.dim td { color: var(--muted); }
.tbl .acts { justify-content: flex-end; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--ink); background: var(--surface-2); }
.tbl th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tbl th.sortable.on { color: var(--accent-ink); }
.sort-ar { display: inline-block; min-width: 9px; font-size: 9px; margin-left: 3px; }
.tbl th.sortable:not(.on):hover .sort-ar::after { content: "↕"; opacity: .45; }
.t-accent { color: var(--accent); }
/* Catálogo: tabla de productos (columnas alineadas, orden en el servidor) */
.catalogo-tbl td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
.catalogo-tbl tr[data-sku] { cursor: pointer; }
.catalogo-tbl .cat-img { width: 46px; padding-right: 0; }
.catalogo-tbl .cat-img .thumb { width: 36px; height: 36px; border-radius: 5px; overflow: hidden; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; }
.catalogo-tbl .cat-img .thumb img { width: 100%; height: 100%; object-fit: contain; }
.catalogo-tbl .cat-img .thumb .ph { color: var(--faint); font-size: 9px; }
.catalogo-tbl .cat-nom { min-width: 220px; max-width: 380px; }
.catalogo-tbl .cat-nom b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalogo-tbl td.num b { font-weight: 600; }
.catalogo-tbl .cat-estado { white-space: nowrap; }
/* En el teléfono la tabla se desliza de lado con el nombre fijo a la izquierda. */
@media (max-width: 760px) {
  .catalogo-tbl .cat-img { display: none; }
  .catalogo-tbl .cat-nom { min-width: 160px; max-width: 180px; position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
  .catalogo-tbl thead th:nth-child(2) { position: sticky; left: 0; z-index: 3; box-shadow: 1px 0 0 var(--border); }
  .catalogo-tbl tbody tr:hover .cat-nom { background: var(--surface-2); }
}
.tbl.compact td { padding: 5px 10px; }
@media (max-width: 760px) { .tbl .texto { max-width: 200px; } }

/* ---------- Pastillas ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.pill[hidden] { display: none; }
.pill.ok { background: var(--ok-wash); color: var(--ok); }
.pill.warn { background: var(--warn-wash); color: var(--warn); }
.pill.bad { background: var(--danger-wash); color: var(--danger); }
.pill.accent { background: var(--accent-wash); color: var(--accent-ink); }
.pill.lg { height: 22px; font-size: 12px; padding: 0 9px; }
div.pill { display: block; white-space: normal; height: auto; padding: 5px 10px; line-height: 1.4; border-radius: 8px; max-width: 100%; font-weight: 500; }
div.pill b { font-weight: 600; }

/* ---------- Formularios ---------- */
.input, .select {
  height: 30px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12.5px; width: 100%;
}
textarea.input { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.45; }
textarea.input.mono { font-family: var(--font-mono); font-size: 12px; }
.input::placeholder { color: var(--faint); }
.input:focus, .select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.input.sm { height: 26px; font-size: 12px; padding: 0 8px; }
.input:disabled, .select:disabled { opacity: .6; background: var(--surface-2); }
select.input, .select { appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7488' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; cursor: pointer; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .search { position: relative; flex: 1 1 220px; min-width: 180px; max-width: 360px; }
/* La lupa va dentro del campo en cualquier buscador (barra, cabecera de tarjeta o modal). */
.search { position: relative; }
.search .ico, .search > svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--faint); pointer-events: none; }
.search .input { padding-left: 28px; }
.toolbar .input, .toolbar .select { width: auto; }
.toolbar .search .input { width: 100%; }
.field label, .campo > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.campo { display: block; font-size: 12.5px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.chk input { accent-color: var(--accent); margin: 0; }
/* formulario en línea: campos con etiqueta encima, en una fila que envuelve */
.inline-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.inline-form .campo { display: grid; gap: 4px; }
.inline-form .campo .row { gap: 6px; }
.inline-form .input { width: 110px; }

/* Interruptor */
.switch { position: relative; display: inline-flex; width: 32px; height: 18px; cursor: pointer; vertical-align: middle; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Segmentos y pestañas ---------- */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.seg-btn { border: none; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; height: 28px; padding: 0 10px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.seg-btn:hover { background: var(--surface-2); color: var(--ink); }
.seg-btn.on { background: var(--accent); color: var(--on-accent); }
.seg-btn .n { font-weight: 500; opacity: .9; font-size: 11px; }
.seg-btn.on .n, .seg-btn:has(input:checked) .n { opacity: 1; }   /* al 90 % sobre el relleno no llegaba a 4,5:1 */
.seg.wrap { flex-wrap: wrap; border-radius: var(--radius-sm); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 12px; overflow-x: auto; }
.tab { border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; padding: 8px 10px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tab .badge { font-size: 11px; font-weight: 600; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: var(--on-warn); display: inline-flex; align-items: center; }
.tab.on .badge { background: var(--accent); }

/* ---------- Listas compactas (filas de entidad) ---------- */
.lst { list-style: none; margin: 0; padding: 0; }
.lst > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.lst > li:last-child { border-bottom: 0; }
.lst .l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.lst .l1 b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst .l2 { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lst .r b { font-weight: 600; font-size: 13px; }
.lst .r small { display: block; color: var(--muted); }
.lst .acts { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.lst li.con-acts { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
.lst li.con-acts .r { grid-column: 2; grid-row: 1; align-self: baseline; }
.lst li.con-acts .acts { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; margin-right: -4px; }
.lst li.dim { background: var(--surface-2); }
.lst li.dim .l1, .lst li.dim .l2 { color: var(--muted); }

/* ---------- Avisos y notas ---------- */
.alerts { list-style: none; margin: 0; padding: 0; }
.alerts > li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.alerts > li:last-child { border-bottom: 0; }
.alerts .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--muted); }
.alerts li.danger .ic { color: var(--danger); } .alerts li.warn .ic { color: var(--warn); } .alerts li.info .ic { color: var(--accent); }
.alerts .t { font-weight: 600; }
.alerts .d { font-size: 11.5px; color: var(--muted); grid-column: 2; overflow-wrap: anywhere; }
.alerts .btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.ok-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 12px 14px; }
.ok-line .ico { width: 15px; height: 15px; color: var(--ok); }
/* una sola línea de hallazgo accionable por página, como máximo */
.insight { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); font-size: 12.5px; }
.insight.warn { border-left-color: var(--warn); } .insight.bad { border-left-color: var(--danger); }
.insight > svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.insight .spacer { margin-left: auto; }
.insight b { font-variant-numeric: tabular-nums; }
.note { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.stamps { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); }
.fresh { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fresh::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.fresh.stale { color: var(--warn); } .fresh.stale::before { background: var(--warn); }
.fresh.none::before { background: var(--faint); }

/* ---------- Tooltip (ⓘ) y popover ---------- */
.i-tip { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 0; background: transparent; color: var(--faint); cursor: help; padding: 0; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
.i-tip:hover, .i-tip:focus-visible { color: var(--accent); }
.i-tip > svg { width: 13px; height: 13px; }
[data-tip] { cursor: help; }
.tt { position: fixed; z-index: 120; max-width: 300px; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.45; padding: 7px 10px; border-radius: 7px; box-shadow: var(--shadow-md); pointer-events: none; font-weight: 400; font-variant-numeric: tabular-nums; }
.tt b { color: inherit; }
.popover { position: absolute; z-index: 110; min-width: 220px; max-width: 320px; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; }
.popover .pop-head { padding: 8px 10px 6px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.popover .pop-head b { display: block; color: var(--ink); font-size: 13px; }
.pop-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border-radius: 6px; border: 0; background: transparent; color: var(--ink); font-size: 12.5px; text-align: left; cursor: pointer; text-decoration: none; }
.pop-item:hover { background: var(--surface-2); text-decoration: none; }
.pop-item > svg, .pop-item .ico { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.pop-item .spacer { margin-left: auto; }
.pop-item .switch { pointer-events: none; }
.pop-item.static { cursor: default; } .pop-item.static:hover { background: transparent; }
.pop-item small { color: var(--muted); display: block; font-size: 11px; }
.pop-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ---------- Avatar de usuario ---------- */
.avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--accent-wash); color: var(--accent-ink); font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; cursor: pointer; letter-spacing: .02em; padding: 0; }
.avatar:hover { border-color: var(--accent); }

/* ---------- Tarjetas de producto (herramientas) ---------- */
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.pcard .thumb { aspect-ratio: 4/3; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.pcard .thumb img { width: 100%; height: 100%; object-fit: contain; }
.pcard .thumb .ph { color: var(--faint); font-size: 12px; }
.pcard .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pcard .name { font-size: 12.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .sku { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.pcard .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; }
.thumb-sm { overflow: hidden; border-radius: 5px; background: var(--surface-2); display: grid; place-items: center; }
.thumb-sm .thumb { width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; }
.thumb-sm .thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb-sm .ph { color: var(--faint); font-size: 9px; line-height: 1; text-align: center; }
.thumb-xs { width: 32px; height: 32px; border-radius: 5px; background: #fff; border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center; flex-shrink: 0; }
.thumb-xs img { width: 100%; height: 100%; object-fit: contain; }
.thumb-xs .ph { color: var(--faint); }
.thumb-xs .ph svg { width: 13px; height: 13px; }

/* ---------- Paginación ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pager .info { font-size: 12px; color: var(--muted); width: auto; height: auto; display: inline; cursor: default; }
.pager .ctrls { display: flex; gap: 6px; align-items: center; }

/* ---------- Estados ---------- */
.state { text-align: center; padding: 36px 20px; color: var(--muted); }
.state .ico { width: 28px; height: 28px; margin: 0 auto 10px; color: var(--faint); }
.state .title { font-weight: 600; color: var(--ink-soft); margin-bottom: 3px; }
.state .msg { font-size: 12.5px; max-width: 420px; margin: 0 auto; }
.state.error .ico { color: var(--danger); }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 18px; right: 18px; z-index: 130; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--elevated); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 10px 14px; min-width: 240px; max-width: 360px; font-size: 12.5px; }
.toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: var(--danger); } .toast.warn { border-left-color: var(--warn); }
.toast .t-title { font-weight: 600; margin-bottom: 2px; }
.toast.con-accion { display: flex; align-items: center; gap: 12px; }
/* En el editor, los avisos van sobre la barra de guardar (si no, tapan "Guardar"). */
body:has(.ped-barra) .toast-wrap { bottom: 74px; }
.toast.con-accion > div:not(.t-title) { flex: 1; }
.toast .t-accion { border: 0; background: none; padding: 4px 8px; margin: -4px -6px -4px 0; border-radius: 999px; font: inherit; font-weight: 600; color: var(--accent-ink); cursor: pointer; }
.toast .t-accion:hover { background: var(--accent-wash); }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(10,14,26,.5); z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; max-width: 560px; max-height: 88vh; max-height: calc(88vh / var(--zoom, 1)); overflow: auto; }
/* El título y los botones de una ventana quedan a la vista aunque su contenido se desplace. */
.modal > .m-head { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.modal > .m-foot { position: sticky; bottom: 0; z-index: 2; background: var(--surface); }
.modal .m-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.modal .m-head h3 { font-size: 14px; font-weight: 600; }
.modal .m-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.modal .m-foot { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.modal .m-foot .spacer { margin-left: auto; }
@media (max-width: 640px) { .modal-back { padding: 10px; } .card-head { flex-wrap: wrap; row-gap: 2px; } .card-head .sub { flex: 1 1 100%; white-space: normal; order: 3; } }

/* ---------- Medidores ---------- */
.meter { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.meter.accent > span { background: var(--accent); } .meter.ok > span { background: var(--ok); } .meter.warn > span { background: var(--warn); } .meter.bad > span { background: var(--danger); }
.meter.indet > span { width: 40% !important; transition: none; animation: indet 1.3s ease-in-out infinite; }
@keyframes indet { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
@media (prefers-reduced-motion: reduce) { .meter.indet > span { animation: none; width: 100% !important; opacity: .35; } }
.progress { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .4s cubic-bezier(.4,0,.2,1); }
.progress > span.ok { background: var(--ok); } .progress > span.warn { background: var(--warn); }
.bulkbar { border: 1px solid var(--accent); background: var(--accent-wash); }

/* ---------- Barras horizontales (embudo / nominales) ---------- */
.hbars { display: grid; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) 60px; gap: 10px; align-items: center; font-size: 12.5px; }
.hbar.con-sub { grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) 60px minmax(0, 1fr); }
.hbar .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.hbar .c { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .barra { height: 10px; border-radius: 3px; background: var(--mark-soft); position: relative; overflow: hidden; }
.hbar .barra > span { position: absolute; inset: 0 auto 0 0; background: var(--mark); border-radius: 3px; min-width: 2px; }
.hbar .barra > span.o1 { background: var(--o1); } .hbar .barra > span.o2 { background: var(--o2); } .hbar .barra > span.o3 { background: var(--o3); } .hbar .barra > span.o4 { background: var(--o4); }
.hbar .barra > span.s1 { background: var(--s1); } .hbar .barra > span.final { background: var(--accent); }
@media (max-width: 640px) { .hbar.con-sub { grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) 50px; } .hbar.con-sub .c { display: none; } }

/* ---------- Misc ---------- */
.row { display: flex; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
.spacer { margin-left: auto; }
.mt { margin-top: 12px; } .mb { margin-bottom: 12px; }
.copyable { cursor: copy; border-bottom: 1px dashed var(--border-strong); }
.copyable:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sk-line { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 37%, var(--surface-2) 63%); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 12.5px; margin: 0; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .dl { grid-template-columns: 1fr; gap: 2px; } .dl dd { margin-bottom: 6px; } }
.payload { font-family: var(--font-mono); font-size: 11.5px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px; overflow: auto; max-height: 260px; white-space: pre-wrap; overflow-wrap: anywhere; }
.section-label { font-size: 12.5px; font-weight: 600; color: var(--ink); margin: 4px 0 10px; display: flex; align-items: center; gap: 6px; }
.section-label .ico, .section-label svg { color: var(--accent); width: 14px; height: 14px; }

/* --- Estado del sistema (hz-*) y palancas: usados por herramientas --- */
.hz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); vertical-align: middle; flex: 0 0 auto; }
.hz-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-wash); } .hz-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-wash); } .hz-dot.bad { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-wash); } .hz-dot.idle { background: var(--faint); }
.hz-tile { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; border-left: 3px solid var(--border); }
.hz-tile.ok { border-left-color: var(--ok); } .hz-tile.warn { border-left-color: var(--warn); } .hz-tile.bad { border-left-color: var(--danger); } .hz-tile.idle { border-left-color: var(--faint); }
.hz-tile-head { display: flex; align-items: center; gap: 8px; }
.hz-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.hz-value { font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.hz-foot { font-size: 11.5px; color: var(--muted); }
.hz-table-wrap { overflow-x: auto; }
.hz-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hz-table th { text-align: left; padding: 8px 12px; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.hz-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.hz-table td.num, .hz-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hz-table tbody tr:last-child td { border-bottom: none; }
.stat { padding: 12px 14px; }
.stat .label { font-size: 11.5px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.stat .label .ico { width: 14px; height: 14px; color: var(--accent); }
.stat .value { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .foot { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.lever { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; border-top: 3px solid var(--border); }
.lever[data-goto]:hover { box-shadow: var(--shadow-md); cursor: pointer; }
.lever.ok { border-top-color: var(--ok); } .lever.bad { border-top-color: var(--danger); } .lever.accent { border-top-color: var(--accent); }
.lever-kicker { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.lever-kicker svg { width: 13px; height: 13px; }
.lever.ok .lever-kicker svg { color: var(--ok); } .lever.bad .lever-kicker svg { color: var(--danger); }
.lever-value { font-size: 22px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.lever-title { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.lever-foot { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.posbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-2); gap: 2px; }
.posseg { height: 100%; } .posseg.ok { background: var(--ok); } .posseg.mid { background: var(--faint); } .posseg.bad { background: var(--danger); }
.mc-locked .mc-editable { display: none; }
.mc-locked.mc-editing .mc-editable { display: inline-flex; }
.mc-locked.mc-editing .mc-edit-toggle { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; }

/* --- Ficha de catálogo: HTML de la tienda y editor --- */
.ficha-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ficha-meta { display: grid; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12.5px; }
.ficha-meta > div > div { margin-top: 2px; }
.rich-html { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); max-height: 340px; overflow: auto; word-break: break-word; }
.rich-html p { margin: 0 0 .6em; }
.rich-html b, .rich-html strong { font-weight: 600; color: var(--ink); }
.rich-html ul, .rich-html ol { margin: .3em 0 .7em; padding-left: 1.4em; }
.rich-html li { margin: .15em 0; }
.rich-html a { color: var(--accent); text-decoration: underline; }
.rich-html img { max-width: 100%; height: auto; border-radius: 6px; }
.rich-html table { border-collapse: collapse; width: 100%; margin: .5em 0; }
.rich-html td, .rich-html th { border: 1px solid var(--border); padding: 4px 8px; }
.rich-html h1, .rich-html h2, .rich-html h3, .rich-html h4 { color: var(--ink); margin: .6em 0 .3em; line-height: 1.3; }
.ed-html { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.ed-preview { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--surface-2); max-height: 280px; overflow: auto; }
.ed-preview .rich-html { max-height: none; margin-top: 4px; }
.ed-imgs { display: flex; flex-direction: column; gap: 6px; }
.ed-img { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; }
.ed-img img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.ed-img-url { flex: 1; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .ed-html { grid-template-columns: 1fr; } }

/* --- Barra de filtros reutilizable --- */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
select.fsel { width: auto; min-width: 120px; max-width: 220px; height: 30px; padding: 0 26px 0 10px; font-size: 12.5px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7488' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
select.fsel:hover { border-color: var(--border-strong); }
select.fsel:focus { outline: none; border-color: var(--accent); }

/* --- Marcas / Brand Hub (vitrina para vender) --- */
/* Tipografía display propia (self-hosted): Sora — geométrica, técnica. */
@font-face { font-family:'Sora'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('/static/fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family:'Sora'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('/static/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0300-0301, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; }
/* Rojo Dahua OFICIAL (#E60012, extraído del vector oficial). No alterar el logo. */
:root { --dahua:#E60012; --dahua-deep:#b3000e; --font-display:'Sora', system-ui, sans-serif; }

/* ===== Sistema de movimiento del Brand Hub =====
   Entrada coreografiada (rise), reveals al scroll (.reveal→.in), flotación suave,
   brillo animado del hero, shimmer de skeletons. Respeta prefers-reduced-motion. */
@keyframes bh-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes bh-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes bh-glow { 0%,100% { opacity:.85; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes bh-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
.bh-rise { animation:bh-rise .65s cubic-bezier(.2,.75,.25,1) both; }
.reveal { opacity:0; transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.2,.75,.25,1), transform .6s cubic-bezier(.2,.75,.25,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .bh-rise, .bhx-glow, .bhx-hero-img, .fcard, .tech-card, .pcard-sell { animation:none !important; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}
/* Mini-plancha con el logo OFICIAL (nunca recomponer "DAHUA" tipográficamente:
   la guía de marca prohíbe alterar tipografía/color del wordmark). */
.brand-mini { display:inline-flex; align-items:center; background:#fff; border-radius:6px;
  padding:4px 10px; box-shadow:0 2px 8px rgba(0,0,0,.22); }
.brand-mini img { height:15px; width:auto; display:block; }
/* El logo oficial va SIN recolorear, sobre plancha blanca (uso permitido). */
.brand-logo-plate { display:inline-flex; align-items:center; background:#fff; border-radius:10px;
  padding:12px 18px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.brand-logo-plate img { height:34px; width:auto; display:block; }
.tm-note { font-size:11px; color:var(--muted); line-height:1.5; margin-top:26px;
  padding-top:14px; border-top:1px solid var(--border); }

/* Hero cinematográfico */
.brand-hero-xl { position:relative; overflow:hidden; border-radius:20px; margin-bottom:22px;
  padding:46px 50px; min-height:290px; display:flex; align-items:center; gap:28px;
  background:radial-gradient(120% 140% at 100% 0%, #2a0a0d 0%, #14161c 42%, #0c0d12 100%);
  color:#fff; isolation:isolate; }
.brand-hero-xl::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(80% 100% at 70% 40%, #000 30%, transparent 75%); }
.bhx-glow { position:absolute; inset:0; z-index:-1; transform-origin:88% 30%;
  background:radial-gradient(60% 90% at 88% 30%, rgba(230,0,18,.45), transparent 60%);
  animation:bh-glow 7s ease-in-out infinite; }
.bhx-content { flex:1 1 420px; max-width:660px; }
.bhx-logo { font-weight:900; font-size:30px; letter-spacing:.24em; color:#fff; line-height:1;
  padding-left:14px; border-left:5px solid var(--dahua); margin-bottom:16px; }
.bhx-slogan { font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:#ff5a63;
  font-weight:700; margin-bottom:10px; }
.bhx-headline { font-family:var(--font-display); font-size:36px; line-height:1.1; font-weight:800;
  margin:0 0 12px; letter-spacing:-.025em; text-wrap:balance; }
.bhx-sub { font-size:14.5px; line-height:1.6; opacity:.85; margin:0 0 22px; max-width:56ch; }
.bhx-stats { display:flex; gap:34px; margin-bottom:24px; }
.bhx-stats > div { display:flex; flex-direction:column; }
.bhx-stats b { font-family:var(--font-display); font-size:30px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; }
.bhx-stats span { font-size:11.5px; opacity:.7; text-transform:uppercase; letter-spacing:.05em; margin-top:5px; }
.bhx-cta { background:var(--dahua); border-color:var(--dahua); color:#fff; font-weight:700;
  padding:12px 24px; font-size:14px; font-family:var(--font-display); border-radius:10px;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 10px 26px rgba(230,0,18,.35); transition:transform .16s, box-shadow .16s, background .16s; }
.bhx-cta:hover { background:var(--dahua-deep); transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(230,0,18,.45); }
.bhx-cta svg { transition:transform .16s; }
.bhx-cta:hover svg { transform:translateX(3px); }
.bhx-hero-img { flex:0 0 310px; display:grid; place-items:center; padding:20px;
  background:rgba(255,255,255,.95); border-radius:18px;
  box-shadow:0 28px 56px rgba(0,0,0,.5); animation:bh-float 6.5s ease-in-out infinite; }
.bhx-hero-img img { max-width:100%; max-height:205px; object-fit:contain; }
@media (max-width:820px) { .brand-hero-xl { padding:30px; } .bhx-hero-img { display:none; } .bhx-headline { font-size:27px; } }

/* Franja de confianza (por qué comprar aquí) */
.trust-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:0;
  border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface);
  margin-bottom:26px; }
.trust-item { display:flex; align-items:center; gap:11px; padding:15px 18px; font-size:12.5px;
  border-right:1px solid var(--border); }
.trust-item:last-child { border-right:none; }
.trust-item svg { width:19px; height:19px; color:var(--dahua); flex:0 0 auto; }
.trust-item b { display:block; font-size:12.5px; color:var(--ink); }
.trust-item span { color:var(--muted); font-size:11.5px; }
@media (max-width:820px) { .trust-item { border-right:none; border-bottom:1px solid var(--border); } .trust-item:last-child { border-bottom:none; } }

/* Encabezados de sección con jerarquía editorial */
.bh-sechead { margin:34px 0 16px; }
.bh-kicker { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dahua); margin-bottom:5px; }
.bh-h2 { font-family:var(--font-display); font-size:23px; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); margin:0; }
.bh-subtext { font-size:13px; color:var(--muted); margin:5px 0 0; max-width:70ch; }

/* Carrusel de destacados: controles + fundido en bordes */
.fcarousel { position:relative; }
.fcarousel .fcard-row { scroll-behavior:smooth; padding-bottom:14px;
  mask-image:linear-gradient(90deg, #000 92%, transparent); }
.fc-arrows { position:absolute; top:-52px; right:2px; display:flex; gap:6px; }
.fc-btn { width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:background .14s, border-color .14s, transform .14s; }
.fc-btn:hover { border-color:var(--dahua); color:var(--dahua); transform:translateY(-1px); }
.fc-btn:disabled { opacity:.35; cursor:default; transform:none; }

/* Skeletons de carga (shimmer) — más cómodos que un spinner */
.skel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1080px) { .skel-grid { grid-template-columns:repeat(2,1fr); } }
.skel-card { border:1px solid var(--border); border-radius:13px; overflow:hidden; background:var(--surface); }
.skel-card .sk-img { height:150px; }
.skel-card .sk-l1 { height:13px; margin:12px 13px 8px; border-radius:6px; }
.skel-card .sk-l2 { height:11px; margin:0 13px 14px; width:55%; border-radius:6px; }
.sk { background:linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 37%, var(--surface-2) 63%);
  background-size:200% 100%; animation:bh-shimmer 1.3s linear infinite; }

/* Propuestas de valor */
.vprops { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:12px; margin-bottom:24px; }
.vprop { display:flex; gap:12px; align-items:flex-start; padding:15px 16px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface); }
.vprop-ic { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:10px;
  background:color-mix(in srgb, var(--dahua) 12%, transparent); color:var(--dahua); }
.vprop-ic svg { width:19px; height:19px; }
.vprop-t { font-weight:700; font-size:13.5px; color:var(--ink); }
.vprop-x { font-size:12px; color:var(--muted); line-height:1.45; margin-top:2px; }

/* Showcase de tecnologías */
.tech-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; }
.tech-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  text-align:left; padding:16px; border:1px solid var(--border); border-radius:13px; background:var(--surface);
  cursor:pointer; transition:border-color .14s, transform .14s, box-shadow .14s; }
.tech-card:hover { border-color:var(--dahua); transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.10); }
.tech-card.on { border-color:var(--dahua); box-shadow:0 0 0 1px var(--dahua) inset; }
.tech-ic { display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:color-mix(in srgb, var(--dahua) 12%, transparent); color:var(--dahua); }
.tech-ic svg { width:18px; height:18px; }
.tech-name { font-size:14px; font-weight:750; color:var(--ink); }
/* Logo oficial de sub-marca en la tarjeta: plancha blanca, sin alterar. */
.tech-logo { display:inline-flex; align-items:center; background:#fff; border:1px solid var(--border);
  border-radius:8px; padding:7px 12px; min-height:38px; }
.tech-logo img { height:22px; width:auto; max-width:150px; object-fit:contain; display:block; }
/* Logos claros (ePoE): chip oscuro para que se lean, sin recolorear el logo. */
.tech-logo.dark { background:#14161c; border-color:#14161c; }
.tech-blurb { font-size:12px; color:var(--muted); line-height:1.45; }
.tech-count { font-size:12px; font-weight:700; color:var(--dahua); margin-top:2px; }

/* Destacados (carrusel horizontal) */
.fcard-row { display:flex; gap:14px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x proximity; }
.fcard { flex:0 0 210px; scroll-snap-align:start; text-align:left; padding:0; border:1px solid var(--border);
  border-radius:13px; overflow:hidden; background:var(--surface); cursor:pointer;
  transition:transform .14s, box-shadow .14s, border-color .14s; }
.fcard:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.12); border-color:var(--dahua); }
.fcard-img { position:relative; height:150px; display:grid; place-items:center; background:#fff; overflow:hidden; }
.fcard-img img { max-width:100%; max-height:100%; object-fit:contain; }
.fcard-img .ph { color:var(--faint); }
.fcard-tag { position:absolute; top:8px; left:8px; font-size:10.5px; font-weight:700; padding:3px 8px;
  border-radius:999px; background:var(--ok); color:#fff; }
.fcard-body { padding:11px 13px; }
.fcard-name { font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.fcard-foot { display:flex; align-items:center; justify-content:space-between; padding:8px 0 0; }
.fcard .price { font-size:15px; font-weight:750; }
.fcard-cta { font-size:11.5px; color:var(--dahua); font-weight:700; display:inline-flex; align-items:center; gap:2px; }
.fcard-cta svg { width:13px; height:13px; }

/* Tarjeta de producto orientada a venta */
/* Pozo de imagen SIEMPRE blanco (las fotos de producto traen fondo blanco):
   grilla uniforme en tema claro y oscuro, estándar retail. */
.pcard-sell .thumb { background:#fff; }
.pcard-sell { transition:transform .18s cubic-bezier(.2,.75,.25,1), box-shadow .18s, border-color .18s; }
.pcard-sell:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,.12); border-color:var(--dahua); }
.pcard-sell .pcard-imgwrap { position:relative; overflow:hidden; }
.pcard-sell .thumb img { transition:transform .3s cubic-bezier(.2,.75,.25,1); }
.pcard-sell:hover .thumb img { transform:scale(1.06); }
.pcard-stock { position:absolute; top:6px; right:6px; font-size:10px; font-weight:700; padding:2px 7px;
  border-radius:999px; background:var(--surface-2); color:var(--muted); z-index:1; }
.pcard-stock.ok { background:var(--ok-wash); color:var(--ok); }
.pcard-more { font-size:11px; color:var(--dahua); font-weight:700; display:inline-flex; align-items:center; gap:2px;
  transition:gap .15s; }
.pcard-sell:hover .pcard-more { gap:5px; }
.pcard-more svg { width:12px; height:12px; }

/* Ficha de producto del Brand Hub — donde se cierra la venta */
.bf-top { display:grid; grid-template-columns:1.15fr 1fr; gap:22px; align-items:start; }
@media (max-width:720px) { .bf-top { grid-template-columns:1fr; } }
.bf-main { background:#fff; border:1px solid var(--border); border-radius:14px;
  display:grid; place-items:center; min-height:330px; overflow:hidden; padding:14px; }
.bf-main img { max-width:100%; max-height:48vh; object-fit:contain; }
.bf-thumbs { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
.bf-thumbs img { width:64px; height:64px; object-fit:contain; background:#fff; border-radius:9px;
  cursor:pointer; border:2px solid var(--border); transition:border-color .14s, transform .14s; flex:0 0 auto; }
.bf-thumbs img:hover { transform:translateY(-2px); }
.bf-thumbs img.on { border-color:var(--dahua); }
.bf-name { font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.015em;
  line-height:1.25; margin:10px 0 4px; color:var(--ink); }
.bf-model { font-size:12px; color:var(--muted); margin-bottom:14px; }
.bf-price-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.bf-price { font-family:var(--font-display); font-size:30px; font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--ink); letter-spacing:-.02em; }
.bf-meta { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; font-size:13px; }
.bf-meta > div { display:flex; justify-content:space-between; gap:14px; padding:7px 0;
  border-bottom:1px dashed var(--border); }
.bf-meta span { color:var(--muted); }
.bf-ds { width:100%; justify-content:center; text-align:center; }
.bf-trust { display:flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; color:var(--muted); }
.bf-trust svg { width:15px; height:15px; color:var(--ok); flex:0 0 auto; }
.bf-specs tbody tr:nth-child(odd) td { background:var(--surface-2); }

/* Página de sub-marca / tecnología */
.tech-hero { position:relative; overflow:hidden; border-radius:18px; margin:12px 0 20px;
  padding:38px 42px; min-height:230px; display:flex; align-items:center; gap:24px; color:#fff;
  background:radial-gradient(120% 140% at 100% 0%, #2a0a0d 0%, #14161c 45%, #0c0d12 100%); }
.th-content { flex:1 1 380px; }
.th-eyebrow { display:flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; opacity:.75; margin-bottom:12px; }
.th-title { font-family:var(--font-display); font-size:34px; font-weight:800; letter-spacing:-.025em;
  margin:0 0 8px; line-height:1.05; }
/* Logo oficial de la sub-marca: sin alterar, sobre plancha blanca (regla de marca). */
.th-logo { display:inline-flex; background:#fff; border-radius:12px; padding:14px 22px;
  margin:0 0 14px; box-shadow:0 10px 26px rgba(0,0,0,.35); }
.th-logo img { height:44px; width:auto; display:block; max-width:280px; object-fit:contain; }
/* Logos claros oficiales (p.ej. ePoE): directo sobre el hero oscuro, sin plancha. */
.th-logo.light { background:transparent; box-shadow:none; padding:0; }
.th-logo.light img { height:52px; }
.th-lead { font-size:15px; line-height:1.55; opacity:.88; margin:0 0 20px; max-width:52ch; }
.th-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.th-count { font-size:12.5px; opacity:.75; color:#fff; }
.th-img { flex:0 0 280px; display:grid; place-items:center; padding:16px;
  background:rgba(255,255,255,.94); border-radius:16px; box-shadow:0 24px 50px rgba(0,0,0,.45); }
.th-img img { max-width:100%; max-height:190px; object-fit:contain; }
@media (max-width:820px) { .tech-hero { padding:26px; } .th-img { display:none; } .th-title { font-size:26px; } }

/* ===== Pasada de usabilidad (app-wide) ===== */
/* Filas de tabla con hover para seguir la línea con la vista */
.tbl tbody tr:hover { background: var(--surface-2); }
/* SKUs/ids copiables */
.copyable { cursor: copy; border-bottom: 1px dashed var(--border); }
.copyable:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* Esqueleto de carga */
.sk-line { display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 37%, var(--surface-2) 63%);
  background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Toolbar y KPIs pegajosos al hacer scroll largo de tablas */
@media (min-height: 700px) {
  .tbl thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
}
/* KPIs y grillas responsivas: nunca se rompen en pantallas chicas */
@media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }
/* La toolbar envuelve con orden en pantallas medianas */
@media (max-width: 820px) { .toolbar .search { max-width: none; flex: 1 1 100%; } }
/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }

/* ===== Usabilidad ronda 2 ===== */
/* Barra de progreso amigable para acciones en masa */
.progress { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--accent); transition: width .4s cubic-bezier(.4,0,.2,1); }
.progress > span.ok { background: var(--ok); }
.progress > span.warn { background: var(--warn); }
/* Barra de lote resaltada */
.bulkbar { border: 1px solid var(--accent); background: var(--accent-wash); }
/* Transiciones/microinteracciones */
.btn { transition: background-color .15s, border-color .15s, transform .08s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.pill { transition: background-color .15s, color .15s; }
.card.stat { transition: box-shadow .2s, transform .12s; }
.card.stat:hover { box-shadow: var(--shadow-md); }
.tbl tbody tr { transition: background-color .12s; }
.nav-item, .switch span, .switch span::after { transition: background-color .15s, color .15s, transform .15s; }
/* Toast: entra deslizando */
.toast { animation: toast-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Fila recién actualizada: resaltado que se desvanece */
.tbl tbody tr.just-updated { animation: rowflash 1.1s ease; }
@keyframes rowflash { from { background: var(--accent-wash); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .progress > span, .btn, .toast, .tbl tbody tr.just-updated { transition: none; animation: none; }
}

/* ===== Usabilidad ronda 3 ===== */
/* Chips de filtros activos */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; }
.fchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 8px;
  border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); }
.fchip .x { display: inline-flex; cursor: pointer; opacity: .7; }
.fchip .x:hover { opacity: 1; }
.fchip .x svg { width: 12px; height: 12px; }
/* Columnas ordenables */
th.sortable:hover { color: var(--ink); background: var(--surface-2); }
th.sortable.on { color: var(--accent-ink); }
.sort-ar { font-size: 10px; }
/* Densidad compacta */
.mc-compact .tbl th, .mc-compact .tbl td { padding-top: 5px; padding-bottom: 5px; }
.mc-compact .card.stat { padding: 12px 14px; }
.mc-compact .content { padding: 14px; }
.mc-compact .toolbar { margin-bottom: 10px; }
/* Paleta de comandos */
.cmdk { padding: 0; }
.ck-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.ck-item .ico { width: 16px; height: 16px; color: var(--muted); }
.ck-item:hover, .ck-item.active { background: var(--accent-wash); color: var(--accent-ink); }
.ck-item.active .ico { color: var(--accent-ink); }

/* Pastillas de opción en el menú "Agregar filtro" (estilo Gmail) */
.chip-opt { font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft); transition: all .12s; }
.chip-opt:hover { border-color: var(--accent); color: var(--accent-ink); }
.chip-opt.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Constructor de filtros por grupos (multivalor + OR) */
.fgroup { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 6px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.or-sep { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em; padding: 0 2px; }

/* Crawlers: botón del menú (⋯), sparklines y franja de estado en la tarjeta */
.cr-card { transition: box-shadow .15s ease; }
.cr-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.09); }
.cr-menu-toggle { font-size: 16px; line-height: 1; letter-spacing: 1px; padding: 4px 9px; }
.cr-spark svg { width: 100%; height: 28px; display: block; }
.cr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cr-dot.live { animation: crpulse 1.4s ease-in-out infinite; }
@keyframes crpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .cr-dot.live { animation: none; } }

/* Chip del límite de velocidad: se lee como dato y se usa como botón. */
.cr-limit { font-variant-numeric: tabular-nums; border-style: dashed; }
.cr-limit:hover { border-style: solid; border-color: var(--accent); color: var(--accent); }
/* Selector de modo del límite (manual fijo vs adaptativo). */
.cr-mode { display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--border); border-radius: 9px; padding: 10px; font-size: 13px; }
.cr-mode:hover { border-color: var(--border-strong); }
.cr-mode.on { border-color: var(--accent); background: var(--accent-wash); }
.cr-mode input { margin-top: 2px; flex-shrink: 0; }


/* ============================================================
   Compatibilidad con bloques antiguos (fichas de catálogo, herramientas)
   ============================================================ */
.bloque { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; min-width: 0; }
.bloque > h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bloque > h3 small { font-weight: 400; color: var(--muted); font-size: 12px; }
.bloque > h3 .spacer, .bloque > h3 [data-anotar] { margin-left: auto; }
.bloque.hero { background: transparent; border: 0; padding: 0; }
.frase { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 10px; }
.frase .cifra { font-variant-numeric: tabular-nums; }
.frase .mas { color: var(--ok); } .frase .menos { color: var(--danger); }
.frase-sm { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 8px; }
.frase-sm b { color: var(--ink-soft); }
.embudo-nota, .dias-leyenda { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.embudo-filas { display: grid; gap: 6px; }
.embudo-fila { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) 60px; gap: 10px; align-items: center; font-size: 12.5px; }
.embudo-fila .n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.embudo-fila .barra { height: 10px; border-radius: 3px; background: var(--mark-soft); position: relative; overflow: hidden; }
.embudo-fila .barra > span { position: absolute; inset: 0 auto 0 0; background: var(--mark); border-radius: 3px; min-width: 2px; }
.embudo-fila.final .barra > span { background: var(--accent); }
.embudo-fila .barra > span.o1 { background: var(--o1); } .embudo-fila .barra > span.o2 { background: var(--o2); } .embudo-fila .barra > span.o3 { background: var(--o3); } .embudo-fila .barra > span.o4 { background: var(--o4); }

/* ============================================================ Gráfico de barras diarias / mensuales */
.dias-wrap { position: relative; }
.dias { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; height: 96px; border-bottom: 1px solid var(--border-strong); }
.dias .d { height: 100%; display: flex; align-items: flex-end; cursor: default; position: relative; }
.dias .bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--mark); min-height: 2px; }
.dias .hoy .bar { background: var(--accent); }
.dias .cero .bar { background: var(--mark-soft); }
.dias .d:hover .bar { background: var(--accent); }
.dias-lbl { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.dias-lbl span { font-size: 11px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; overflow: hidden; }
.dias-lbl span.fin { color: var(--faint); }
.dias.meses { height: 120px; }
.dias.meses .stack { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.dias.meses .bar.ml { background: var(--teal); }
.dias.meses .bar.vacio { height: 2px; background: var(--mark-soft); }
.dias.meses .hoy .bar:not(.ml) { background: var(--accent); }
.dias.meses .d:hover .bar { filter: brightness(1.12); }
.dias-wrap.meses .dias-lbl span { font-size: 11px; }
@media (max-width: 760px) { .dias-wrap.meses .dias-lbl span:nth-child(odd) { visibility: hidden; } }
.tip { position: absolute; pointer-events: none; top: 0; left: 0; background: var(--ink); color: var(--bg); font-size: 12px; padding: 6px 9px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, calc(-100% - 8px)); box-shadow: var(--shadow-md); z-index: 5; line-height: 1.4; }
.tip b { font-variant-numeric: tabular-nums; }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); margin-top: 8px; align-items: center; }
.leyenda .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--mark); }
.leyenda .sw.ml { background: var(--teal); } .leyenda .sw.s1 { background: var(--s1); } .leyenda .sw.s2 { background: var(--s2); }

/* Bitácora de cambios sobre los gráficos */
.viz-ev { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--s4); pointer-events: auto; cursor: help; }
.viz-ev i { position: absolute; top: -4px; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--s4); border: 2px solid var(--surface); }
.dias .d.evento::before { content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--s4); }
.tip .tip-ev { color: var(--s4); font-size: 11.5px; margin-top: 2px; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; align-items: center; }
.ev-chips .ev { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 22px; padding: 0 8px 0 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 11.5px; color: var(--ink-soft); cursor: help; }
.ev-chips .ev i { width: 6px; height: 6px; border-radius: 50%; background: var(--s4); flex-shrink: 0; }
.ev-chips .ev time { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ev-chips .ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-chips .lbl { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.ev-tipo { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); color: var(--ink-soft); white-space: nowrap; }
.ev-tipo.ads { background: var(--warn-wash); color: var(--warn); } .ev-tipo.medicion { background: var(--accent-wash); color: var(--accent-ink); } .ev-tipo.envio { background: var(--ok-wash); color: var(--ok); }
.eventos-lista { margin-top: 8px; font-size: 12px; }
.eventos-lista b { display: block; margin-bottom: 4px; color: var(--ink-soft); }
.eventos-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.eventos-lista li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.eventos-lista time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 44px; }

/* ============================================================ Inicio */
.inicio { display: grid; gap: 12px; }
.inicio > * { min-width: 0; }
.inicio .fecha { font-size: 12.5px; color: var(--muted); }
.ab-lst .l1 .quien { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-lst .l1 .donde { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.intentos { color: var(--warn); font-weight: 500; }
.pie { font-size: 11.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 4px 2px 0; }

/* ============================================================ Ventas */
.ventas { display: grid; gap: 12px; }
.ventas > * { min-width: 0; }
.exp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exp-col { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.exp-col h4 { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 7px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.exp-col .kpis { border: 0; border-radius: 0; }
.exp-col .note { padding: 6px 12px 8px; border-top: 1px solid var(--border); }
@media (max-width: 640px) { .exp-cols { grid-template-columns: 1fr; } }
.pedido-modal { max-width: 720px; width: calc(100% - 24px); }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; }
.pm-k { font-size: 11px; color: var(--muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.pm-v { font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pedidos-tbl td { padding-top: 6px; padding-bottom: 6px; }
.pedidos-tbl .id { font-weight: 600; white-space: nowrap; }
.pedidos-tbl .id small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.pedidos-tbl .quien { max-width: 220px; }
.pedidos-tbl .quien b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pedidos-tbl .prods { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pedidos-tbl .meta { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.pedidos-tbl td.total { font-weight: 600; }
@media (max-width: 960px) { .pedidos-tbl .meta, .pedidos-tbl .th-meta { display: none; } .pedidos-tbl .clip { max-width: 220px; } }
@media (max-width: 640px) { .pedidos-tbl .prods, .pedidos-tbl .th-prods { display: none; } .pedidos-tbl .quien { max-width: 140px; } .pedidos-tbl td { padding-left: 6px; padding-right: 6px; } }
.ab-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .ab-grid.dos { grid-template-columns: 1fr 1fr; } .ab-grid.dos > li:nth-child(odd) { border-right: 1px solid var(--border); } }
.ab-grid > li .prods { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================ Catálogo */
.catalogo { display: grid; gap: 12px; }
.catalogo > * { min-width: 0; }
ul.prods { list-style: none; margin: 0; padding: 0; display: grid; }   /* solo listas: una celda .prods de tabla no puede ser grilla */
.prod { display: grid; gap: 2px 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 12.5px; background: var(--surface);
  grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "img nom precio" "img costo margen" "img comp comp" "img stock stock"; align-items: start; }
.prod.prod-head { display: none; }
.prod:last-child { border-bottom: 0; }
.prod:hover { background: var(--surface-2); }
.prod:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.prod-img { grid-area: img; } .prod-img .thumb { width: 34px; height: 34px; border-radius: 5px; overflow: hidden; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; }
.prod-img .thumb img { width: 100%; height: 100%; object-fit: contain; }
.prod-img .thumb .ph { color: var(--faint); font-size: 9px; }
.prod-nom { grid-area: nom; min-width: 0; } .prod-nom b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-nom .muted { font-size: 11.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-precio { grid-area: precio; justify-self: end; text-align: right; } .prod-precio b { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.prod-precio .reco { display: block; font-size: 11px; color: var(--accent); white-space: nowrap; }
.prod-costo { grid-area: costo; font-size: 11.5px; color: var(--muted); } .prod-costo span { margin-left: 6px; }
.prod-margen { grid-area: margen; justify-self: end; font-size: 12px; white-space: nowrap; } .prod-margen b { font-variant-numeric: tabular-nums; margin-right: 3px; }
.prod-comp { grid-area: comp; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prod-comp .muted { margin-left: 5px; }
.prod-stock { grid-area: stock; justify-self: start; font-size: 11.5px; display: flex; gap: 8px; align-items: center; white-space: nowrap; color: var(--muted); flex-wrap: wrap; }
@media (min-width: 1000px) {
  .prod { grid-template-columns: 34px minmax(160px, 1.6fr) 100px minmax(120px, 1.2fr) 80px minmax(100px, 1fr) auto; grid-template-areas: "img nom precio costo margen comp stock"; align-items: center; padding: 6px 14px; }
  .prod-precio, .prod-margen { justify-self: start; text-align: left; }
  .prod-stock { justify-self: end; flex-wrap: nowrap; }
  .prod-costo span { display: block; margin: 0; }
  .prod.prod-head { display: grid; cursor: default; background: var(--surface); padding: 8px 14px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); grid-template-areas: none; }
  .prod.prod-head:hover { background: var(--surface); }
  .prod.prod-head > span { grid-area: auto; }
}
.prod.solo-tienda { opacity: .72; } .prod.solo-tienda:hover, .prod.solo-tienda:focus { opacity: 1; }
.prod.cand .prod-stock { gap: 10px; }
.ficha { gap: 12px; }
.ficha-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 800px) { .ficha-head { grid-template-columns: 200px minmax(0, 1fr); } }
@media (max-width: 799px) { .ficha-head .ficha-thumbs { display: none; } .ficha-head h2 { font-size: 16px !important; } }
.ficha-img img { width: 100%; max-width: 200px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.ficha-thumbs { display: flex; gap: 6px; margin-top: 6px; } .ficha-thumbs img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid var(--border); }
.ficha-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* Dos columnas que se llenan de arriba abajo (sin huecos entre tarjetas de distinto alto). */
@media (min-width: 1100px) { .ficha-grid { display: block; columns: 2; column-gap: 12px; } .ficha-grid > * { break-inside: avoid; margin-bottom: 12px; } }
.ficha-grid > * { min-width: 0; }
/* Lo único que se decide en la ficha (el precio sugerido): una franja arriba con las dos salidas. */
.decision { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--accent); background: var(--accent-wash); border-radius: var(--radius); }
.decision .dec-txt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; flex: 1 1 280px; font-size: 13px; }
.decision .dec-k { color: var(--accent-ink); font-weight: 600; }
.decision b { font-size: 17px; font-variant-numeric: tabular-nums; }
.decision .muted { color: var(--ink-soft); }
.decision .acts { flex-wrap: wrap; }
.cat-cabecera { margin-bottom: 4px; }
.sup-prod { max-width: 460px; }
.sup-prod b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-prod .sub { display: block; font-size: 11.5px; }
.fb h4 { font-size: 12.5px; margin: 14px 0 6px; } .fb h4 small { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 11.5px; }
.razones { margin: 8px 0 0; padding-left: 16px; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.comp { list-style: none; margin: 0; padding: 0; display: grid; }
.comp li { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.comp li:last-child { border-bottom: 0; } .comp-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); } .comp b { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .comp li { grid-template-columns: 1fr auto; } .comp-n { display: none; } }
.dims-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; margin-top: 10px; }
.dims-form label { display: grid; gap: 2px; font-size: 11.5px; color: var(--muted); } .dims-form .input { width: 84px; }
.dims-form .dims-ayuda { flex: 1 1 100%; font-size: 12px; color: var(--muted); line-height: 1.45; }
.dims-form .dims-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.dims-form .dims-estado { flex: 1 1 100%; font-size: 12px; }
.prov { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 10px; font-size: 12.5px; }
.prov .thumb { width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; } .prov .thumb img { width: 100%; height: 100%; object-fit: contain; }
.issues { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 12px; }
.demanda-wrap .dias { height: 56px; gap: 1px; }

/* ============================================================ Marketing */
.marketing { display: grid; gap: 12px; }
.marketing > * { min-width: 0; }
.mk-dos { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1000px) { .mk-dos { grid-template-columns: 1fr 1fr; } }
.mk-dos > * { min-width: 0; }
.viz { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "y plot" ". x" ". leg"; column-gap: 8px; }
.viz-y { grid-area: y; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; padding: 2px 0; }
.viz-plot { grid-area: plot; position: relative; height: 190px; }
.viz.barras .viz-plot { height: 170px; }
.viz-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); }
.viz svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.viz .line { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .area { fill: var(--s1); opacity: .08; }
.viz-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-soft); opacity: .5; pointer-events: none; }
.viz-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--s1); border: 2px solid var(--surface); transform: translate(-50%, -50%); pointer-events: none; box-sizing: content-box; }
.viz-tip { transform: translate(-50%, -100%); top: 0; }
.viz-tip .tip-t { color: var(--faint); margin-bottom: 2px; }
.viz-tip .lk { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 6px; background: var(--s1); }
.viz-tip .lk.s2 { background: var(--s2); }
.viz-x { grid-area: x; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.viz-x span { text-align: center; }
.viz .leyenda { grid-area: leg; }
.wks { position: absolute; inset: 0; display: grid; gap: 4px; align-items: end; }
.wk { height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; outline: none; }
.wk-bars { display: flex; gap: 2px; align-items: flex-end; height: 100%; width: 100%; max-width: 46px; }
.wk .bar { flex: 1; max-width: 22px; min-height: 2px; border-radius: 3px 3px 0 0; }
.wk .bar.s1 { background: var(--s1); } .wk .bar.s2 { background: var(--s2); }
.wk.on .bar, .wk:focus-visible .bar { filter: brightness(1.12); }
.camp-tbl .presu { display: inline-flex; gap: 4px; align-items: center; }
.camp-tbl .presu .input { width: 84px; }
.camp-tbl .texto { max-width: 170px; }
.tabla-datos summary { cursor: pointer; font-size: 12.5px; color: var(--accent); padding: 4px 0; }
.tabla-datos .table-wrap { margin-top: 8px; }

/* ============================================================ Sistema */
.sistema { display: grid; gap: 12px; }
.sistema > * { min-width: 0; }
.jobs-tbl .job-r { font-size: 11px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.clave-temporal { font-family: var(--font-mono); font-size: 17px; letter-spacing: .04em; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--border-strong); display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.metas-form .input { width: 130px; }

/* ============================================================ Productos */
.productos { display: grid; gap: 12px; }
.productos > * { min-width: 0; }
.productos-tbl th, .productos-tbl td { vertical-align: top; }
.productos-tbl td { padding-top: 8px; padding-bottom: 8px; }
.productos-tbl .prod-c { min-width: 220px; max-width: 300px; }
.productos-tbl .prod-cell b { font-weight: 600; display: block; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.productos-tbl .prod-cell b a { color: inherit; }
.productos-tbl .prod-cell small { display: block; font-size: 11px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.productos-tbl .senales { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.productos-tbl .senales .pill { font-size: 11px; height: 16px; }
.productos-tbl td.num small { display: block; }
.productos-tbl .accion { min-width: 190px; max-width: 260px; font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); white-space: normal; }
.productos-tbl tr[data-href]:hover td { background: var(--surface-2); }

/* ============================================================ Resultado / clientes / regiones */
.resultado { display: grid; gap: 12px; }
.resultado > * { min-width: 0; }
.resultado-tbl td.num small { display: block; }
.clientes-tbl td small, .regiones-tbl td small { display: block; font-size: 11px; }
.clientes-tbl td.num small, .regiones-tbl td.num small { display: inline; }

/* ============================================================ Ingreso (sin sesión) */
body.sin-sesion .app, body.sin-sesion .toast-wrap { display: none; }
.ingreso { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.ingreso-caja { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px 24px 20px; box-shadow: var(--shadow-sm); display: grid; gap: 12px; }
.ingreso-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ingreso-caja h1 { font-family: var(--font-title); font-weight: 600; font-size: 20px; margin: 0 0 2px; }
.ingreso-caja .campo { display: grid; gap: 4px; }
.ingreso-caja .campo .input { height: 36px; font-size: 14px; }
.ingreso-recordar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.ingreso-recordar input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.ingreso-error { margin: 0; padding: 8px 10px; border-radius: 7px; background: var(--danger-wash); color: var(--danger); font-size: 12.5px; line-height: 1.4; }
.ingreso-aviso { margin: 0; padding: 10px 12px; border-radius: 7px; background: var(--warn-wash); color: var(--warn); font-size: 12px; line-height: 1.5; }
.ingreso-aviso code { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink); white-space: pre-wrap; word-break: break-all; }
.ingreso-pie { margin: 2px 0 0; font-size: 11.5px; color: var(--faint); line-height: 1.45; }
.modal.clave .m-body { display: grid; gap: 10px; }

/* ============================================================ Selector de período */
/* Período (barra superior): flechas, botón con el rango y una ventana con atajos,
   calendario de dos meses, fechas a mano y comparación. En el teléfono, hoja desde abajo. */
.periodo { display: inline-flex; align-items: center; height: 34px; padding: 0 2px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); flex: none; }
.per-flecha { width: 28px; height: 28px; border: 0; background: none; border-radius: 50%; display: inline-grid; place-items: center; color: var(--ink-soft); cursor: pointer; padding: 0; flex: none; }
.per-flecha:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.per-flecha:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.per-flecha:disabled { opacity: .35; cursor: default; }
.per-flecha svg { width: 16px; height: 16px; }
.per-btn { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--ink); white-space: nowrap; font-size: 12.5px; cursor: pointer; }
.per-btn:hover, .per-btn[aria-expanded="true"] { background: var(--surface-2); }
.per-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.per-btn svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.per-btn b { font-weight: 600; }
.per-btn .r { color: var(--muted); }
.per-btn .cmp { color: var(--accent-ink); font-weight: 500; }
@media (max-width: 1240px) { .per-btn .r { display: none; } }
@media (max-width: 760px) { .per-btn .cmp, .periodo .per-flecha { display: none; } .periodo { height: 32px; } }
.per-capa { position: fixed; inset: 0; z-index: 120; }
.per-fondo { position: absolute; inset: 0; }
.per-pop { position: absolute; zoom: var(--zoom); width: min(716px, calc(100vw - 24px)); display: grid; grid-template-columns: 178px minmax(0, 1fr); background: var(--elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); overflow: hidden; animation: per-in .16s cubic-bezier(.22, .61, .36, 1); }
@keyframes per-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.per-pre { border-right: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 1px; }
.per-pre button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; color: var(--ink-soft); font-size: 12.5px; cursor: pointer; transition: background-color .12s, color .12s; }
.per-pre button:hover { background: var(--surface-2); color: var(--ink); }
.per-pre button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.per-pre button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.per-cal { padding: 12px 16px 6px; min-width: 0; }
.cal-cab { display: flex; align-items: flex-start; gap: 6px; }
.cal-cab .per-flecha { margin-top: 2px; }
.cal-meses { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; flex: 1; min-width: 0; }
.cal-tit { font-weight: 600; font-size: 13px; text-align: center; margin: 4px 0 6px; }
.cal-sem, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-sem span { text-align: center; font-size: 11.5px; color: var(--muted); padding: 4px 0; }
.dia { all: unset; position: relative; height: 34px; display: grid; place-items: center; cursor: pointer; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dia span { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; transition: background-color .12s, color .12s; }
.dia:hover:not(:disabled) span { background: var(--surface-2); }
.dia:focus-visible span { outline: 2px solid var(--accent); outline-offset: 1px; }
.dia.hoy span { box-shadow: inset 0 0 0 1px var(--border-strong); }
.dia:disabled { cursor: default; color: var(--faint); opacity: .45; }
.dia.rango::before { content: ""; position: absolute; inset: 3px 0; background: var(--accent-wash); }
.dia.ini::before { left: 50%; } .dia.fin::before { right: 50%; } .dia.ini.fin::before { display: none; }
.dia.ini span, .dia.fin span { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.per-pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-top: 1px solid var(--border); }
.per-fechas { display: flex; align-items: center; gap: 6px; }
.per-fechas .input { width: 112px; height: 32px; text-align: center; }
.per-fechas .input.mal { border-color: var(--danger); }
.per-cmp { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.per-nota { grid-column: 1 / -1; padding: 0 16px 12px; color: var(--muted); font-size: 11.5px; }
@media (max-width: 760px) {
  .per-fondo { background: rgba(10, 14, 26, .5); }
  .per-pop { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 92vh; overflow: auto; border-radius: 20px 20px 0 0; grid-template-columns: minmax(0, 1fr); animation: per-hoja .24s cubic-bezier(.22, .61, .36, 1); }
  .per-pre { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px 12px; gap: 6px; scrollbar-width: none; }
  .per-pre button { white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
  .cal-meses { grid-template-columns: minmax(0, 1fr); }
  .cal-mes + .cal-mes { display: none; }
  .per-pie .spacer { display: none; }
  .per-pie .btn.primary { flex: 1; }
}
@keyframes per-hoja { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .per-pop { animation: none; } }

/* Densidad compacta */
.mc-compact .tbl th, .mc-compact .tbl td { padding-top: 4px; padding-bottom: 4px; }
.mc-compact .kpi { padding: 8px 12px 7px; }
.mc-compact .kpi .v { font-size: 18px; }
.mc-compact .content { padding: 12px 14px 32px; }
.mc-compact .lst > li, .mc-compact .alerts > li { padding-top: 5px; padding-bottom: 5px; }

/* Lectura: nada que cambie cosas */
body.solo-lectura .solo-admin { display: none !important; }
/* Permisos: lo que solo ve un administrador y los datos de costo (columnas, bloques). */
body:not(.es-admin) .solo-administrador { display: none !important; }
body.sin-costos .dato-costo { display: none !important; }
[hidden] { display: none !important; }

/* Nada más ancho que la pantalla */
.ventas > *, .ventas [data-panel], [data-lista], .col-a > *, .col-b > * { min-width: 0; }
@media (max-width: 720px) {
  .lst .l2 { white-space: normal; }
  .tbl .texto { max-width: 150px; }
  .toolbar, .row { flex-wrap: wrap; row-gap: 6px; }
  .toolbar > *, .row > * { max-width: 100%; }
  .section > table.tbl, .card > table.tbl, table.tbl:not(.table-wrap table) { display: block; max-width: 100%; overflow-x: auto; }
}

/* Inicio: dos columnas con pilas independientes */
.inicio-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 12px; align-items: start; }
.inicio-cols > * { display: grid; gap: 12px; min-width: 0; align-content: start; }
@media (max-width: 960px) { .inicio-cols { grid-template-columns: 1fr; } }
.semana-linea { font-size: 12.5px; margin-bottom: 10px; }
.semana-linea b { font-variant-numeric: tabular-nums; }
.lst .l1, .lst .l2 { grid-column: 1; }
.alerts .ic { grid-row: 1 / span 2; }
.alerts .t { grid-column: 2; }

/* ============================================================ tienda (sección Tienda y acciones del pedido en Ventas) */
.tienda > *, .tienda [data-panel], .tienda-form > * { min-width: 0; }
.tienda-form .campo { display: grid; gap: 4px; }
.tienda-form .campo .input { width: 100%; }
.tienda-form textarea.input { min-height: 0; }
.tienda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 12px; }
.tienda-bloque { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: grid; gap: 8px; margin-bottom: 8px; background: var(--surface); }
.tienda-fila { margin-bottom: 6px; }
.tienda-fila .input { flex: 1 1 120px; min-width: 0; }
.tienda-fila .input[type=time] { flex: 0 0 auto; width: 9.5em; min-width: 9.5em; }   /* cabe "09:00 a. m." en cualquier idioma del equipo */
.tienda-miniatura { max-width: 220px; max-height: 90px; border-radius: 6px; border: 1px solid var(--border); object-fit: cover; justify-self: start; }
.tienda-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-sku { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-sku button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.tienda-sug { display: grid; gap: 2px; margin-top: 4px; max-width: 480px; }
.tienda-sug-item { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12.5px; cursor: pointer; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tienda-sug-item:hover { background: var(--surface-2); border-color: var(--accent); }
.tienda-arbol { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; display: grid; gap: 2px; }
.tienda-cat { white-space: normal; color: var(--ink); }
.tienda-cat small { color: var(--muted); }
.tienda-vista { display: grid; gap: 10px; }
.tienda-modal [data-confirma] { margin: 0 16px 10px; }
.insight[hidden] { display: none; }
.tienda-modal .m-body { display: grid; }
.tienda-menu > li { grid-template-columns: minmax(0, 1fr) auto; }
.tienda-menu .l1 .chk { color: var(--ink); font-size: 12.5px; }
.tienda-prod .lst > li { cursor: pointer; }
.tienda-prod .lst > li.on, .tienda-prod .lst > li:hover { background: var(--surface-2); }
.campos-tbl td { padding: 4px 6px; }
.campos-tbl .input.sm { width: 100%; min-width: 120px; }
.ibtn.arriba > svg { transform: rotate(180deg); }
.tienda .seg-btn, .tienda-modal .seg-btn { height: 26px; }
/* Ventas: gestión del pedido (acciones del operador) */
.pm-gestion { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; display: grid; gap: 10px; }
.pm-gestion .acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-gestion form.row { flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.pm-gestion form.row .campo { display: grid; gap: 3px; flex: 1 1 140px; min-width: 0; }
.pm-gestion form.row .input { width: 100%; }
.pm-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.pm-notas li { padding: 6px 10px; border-left: 3px solid var(--border); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; overflow-wrap: anywhere; }
.pm-notas li small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
@media (max-width: 720px) {
  .tienda-grid { grid-template-columns: 1fr; }
  .tienda-fila .input[type=time] { flex: 1 1 40%; }
  .tienda-miniatura { max-width: 100%; }
  .tienda .two-wide, .tienda-prod { grid-template-columns: 1fr; }
}

/* ---- Usuarios y permisos: editor por área (radios con aspecto de selector segmentado) ---- */
.modal.perm-modal { max-width: 720px; }
.perm-modal .perm-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.perm-modal .perm-correo { margin: 0; font-size: 12.5px; }
.seg-btn input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.seg-btn:has(input:checked) { background: var(--accent); color: var(--on-accent); }
.seg-btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.perm-tipo { align-self: flex-start; }
.perm-tipo .seg-btn, .perm-seg .seg-btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
.perm-seg { justify-self: start; }
.perm-seg .seg-btn { justify-content: center; min-width: 64px; }
.perm-seg .seg-btn:first-child { min-width: 96px; }
.perm-admin-nota { margin: 0; font-size: 12.5px; line-height: 1.5; }
.perm-colab { display: grid; gap: 12px; }
.perm-colab .campo .select { max-width: 320px; }
.perm-lista { display: grid; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.perm-fila { display: grid; grid-template-columns: minmax(0, 1fr) 238px; align-items: center; gap: 6px 16px;
  margin: 0; padding: 10px 12px; border: 0; border-top: 1px solid var(--border); min-width: 0; }
.perm-fila:first-child { border-top: 0; }
.perm-fila .perm-nombre { float: left; padding: 0; font-weight: 600; font-size: 13px; color: var(--ink); }
.perm-fila .perm-nombre small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.perm-fila[data-area="costos"] { background: var(--surface-2); }
.perm-fila.bloqueada { opacity: .5; }
.perm-pie { margin: 0; font-size: 12px; line-height: 1.5; }
.usuarios-tbl .sub { white-space: normal; max-width: 460px; }
@media (max-width: 640px) {
  .perm-modal .perm-datos { grid-template-columns: 1fr; }
  .perm-fila { grid-template-columns: 1fr; }
  .perm-seg { width: 100%; }
  .perm-seg .seg-btn { flex: 1 1 0; justify-content: center; height: 40px; }
  .perm-tipo { width: 100%; } .perm-tipo .seg-btn { flex: 1 1 0; justify-content: center; height: 40px; }
}

/* Inicio de un colaborador sin ventas: accesos a sus secciones */
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.acceso { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.acceso:hover { border-color: var(--accent); }
.acceso .ico { grid-row: span 2; width: 18px; height: 18px; color: var(--accent); }
.acceso span { font-weight: 600; font-size: 13px; }
.acceso small { color: var(--muted); font-size: 11.5px; }
/* Precios y competencia: confirmar, rechazar y editar emparejamientos son cambios */
body.solo-lectura [data-verdict], body.solo-lectura .mc-editable, body.solo-lectura [data-edit-toggle] { display: none !important; }
body.solo-lectura .cmp-dec, body.solo-lectura .cmp-dec-h { display: none !important; }   /* quien solo mira no responde "¿Mismo producto?" */

/* ============================================================
   Pantallas: del teléfono al televisor
   ============================================================ */
/* Monitores grandes, TV y proyectores de alta resolución: la app entera se agranda en la misma
   proporción (texto, controles y espacios) y el contenido se centra. Menús emergentes, avisos y
   ventanas se agrandan igual; el código que los posiciona descuenta el zoom (ui.js → zoomDe). */
:root { --zoom: 1; }
@media (min-width: 1800px) { :root { --zoom: 1.1; } }
@media (min-width: 2200px) { :root { --zoom: 1.25; } }
@media (min-width: 2800px) { :root { --zoom: 1.5; } }
@media (min-width: 3400px) { :root { --zoom: 1.8; } }
.app, #modal-root, .toast-wrap, .popover, .tt, .chat { zoom: var(--zoom); }
@media (min-width: 1500px) { .content { margin-inline: auto; } }

/* Pantallas táctiles (teléfonos, iPad, pantallas con dedo): controles de al menos 36–44 px.
   Los campos usan 16 px para que el iPhone no acerque la página al escribir. */
@media (pointer: coarse) {
  .btn { height: 40px; }
  .btn.sm { height: 36px; padding: 0 12px; font-size: 13px; }
  .btn.lg { height: 46px; }
  .icon-btn { width: 40px; height: 40px; }
  .input, .select, .input.sm, textarea.input { font-size: 16px; }
  .input, .select { height: 42px; }
  .input.sm { height: 38px; }
  textarea.input { height: auto; }
  .seg-btn { height: 38px; padding: 0 12px; }
  .chip { height: 36px; }
  button.chip { min-width: 36px; }
  .nav-item { min-height: 44px; }   /* mínimo táctil; el riel mantiene su alto con nombre */
  .tab { min-height: 40px; }
  .pager .btn, .pager button { min-width: 40px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  .tbl th.sortable { padding-top: 11px; padding-bottom: 11px; }
  .pop-item { min-height: 44px; }
  .ck-item { min-height: 44px; }
  .avatar { width: 40px; height: 40px; }
  /* Botones chicos por diseño (ⓘ, quitar un SKU): mismo aspecto, zona de toque de 40 px. */
  .i-tip { position: relative; }
  .i-tip::after { content: ""; position: absolute; inset: -12px; }
  .chip-sku { min-height: 34px; }
  .chip-sku button { min-width: 34px; min-height: 34px; }
}

/* Menú lateral en teléfonos: se abre sobre el contenido con un fondo que lo cierra. */
.nav-back { position: fixed; inset: 0; z-index: 29; background: rgba(10,14,26,.45); }
@media (min-width: 761px) { .nav-back { display: none !important; } }
/* El botón ☰ solo existe donde el menú se pliega (teléfonos). Lleva .icon-btn, que es posterior
   y le pondría display: inline-grid en todos los tamaños. */
.icon-btn.menu-trigger { display: none; }
@media (max-width: 760px) { .icon-btn.menu-trigger { display: inline-grid; } }

@media (max-width: 640px) {
  /* Ventanas como hoja que sube desde abajo, con título y botones siempre visibles. */
  .modal-back { padding: 0; place-items: end stretch; }
  .modal-back > .modal { max-width: none !important; width: 100%; max-height: 92vh; max-height: calc(92dvh / var(--zoom, 1));
    border-radius: 14px 14px 0 0; border-bottom: 0; }
  /* Cifras en dos columnas: si la última queda sola, ocupa la fila completa. */
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Avisos arriba: abajo tapaban los botones de las ventanas. */
  .toast-wrap { left: 12px; right: 12px; bottom: auto; top: calc(var(--topbar-h) + 8px); }
  .perm-colab .campo .select { max-width: none; }
}

/* Tablas que no caben en un teléfono: cada fila pasa a ser una fila compacta. El nombre va arriba
   y los datos siguen en línea ("Unidades 90 · Pedidos 2 · Ingresos $575.100"); las frases largas
   quedan en dos líneas y los botones al final. Los encabezados quedan como botones para ordenar
   (ui.js → tablasEnTarjetas). Antes cada dato iba en su propia celda de una grilla: ~340 px por fila. */
.tbl.tarjetas, .tbl.tarjetas tbody { display: block; width: 100%; }
.tbl.tarjetas thead { display: block; }
.tbl.tarjetas thead tr { display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tbl.tarjetas thead tr::-webkit-scrollbar { display: none; }
.tbl.tarjetas thead th { display: none; }
.tbl.tarjetas thead tr:not(:has(th.sortable)) { display: none; }   /* sin orden que elegir, la barra sobra */
.tbl.tarjetas thead th.sortable { display: inline-flex; flex: none; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; white-space: nowrap; }
.tbl.tarjetas thead th.sortable.on { border-color: var(--accent); background: var(--accent-wash); }
.tbl.tarjetas thead th.sortable:not(.on) .sort-ar { display: none; }
.tbl.tarjetas tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 3px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.tbl.tarjetas tbody tr:last-child { border-bottom: 0; }
.tbl.tarjetas tbody td { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; padding: 0 !important; border: 0; text-align: left !important; min-width: 0; max-width: 100% !important;
  white-space: normal; position: static !important; box-shadow: none !important; background: none !important; font-size: 13px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.tbl.tarjetas tbody td::before { content: attr(data-label); font-size: 12px; font-weight: 400; color: var(--muted); }
.tbl.tarjetas tbody td:not([data-label])::before, .tbl.tarjetas tbody td[data-label=""]::before, .tbl.tarjetas tbody td.td-titulo::before { content: none; }
.tbl.tarjetas tbody td.td-titulo, .tbl.tarjetas tbody td[colspan] { display: block; flex-basis: 100%; font-size: 14px; margin-bottom: 1px; }
.tbl.tarjetas tbody td.td-ancho { display: block; flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.tbl.tarjetas tbody td.td-ancho::before { display: inline; margin-right: 4px; }
.tbl.tarjetas tbody td.td-ancho:not(:has(button, .btn, a.btn, .acts)) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tbl.tarjetas tbody td .sub, .tbl.tarjetas tbody td small { font-size: 12px; }
.tbl.tarjetas tbody td:not(.td-titulo) .sub, .tbl.tarjetas tbody td:not(.td-titulo) small { display: inline; margin-left: 2px; }
.tbl.tarjetas tbody td.td-titulo b, .tbl.tarjetas .texto, .tbl.tarjetas .clip, .tbl.tarjetas td .sub, .tbl.tarjetas td small { white-space: normal; overflow: visible; max-width: none; }
.tbl.tarjetas tbody td.td-titulo > * { padding-left: 0; margin-left: 0; }
.tbl.tarjetas tbody td:empty { display: none; }
.tbl.tarjetas tbody td.vacia { display: none; }   /* sin dato: en la tarjeta no se escribe "Margen —" */
.tbl.tarjetas .acts { justify-content: flex-start; flex-wrap: wrap; }
/* Botones de la fila: al final de la misma línea, no en una fila propia. */
.tbl.tarjetas tbody td.td-acciones { margin-left: auto; align-self: center; }
.tbl.tarjetas tbody td.td-acciones .acts { flex-wrap: nowrap; }
/* Grillas de tarjetas con foto (fichas preparadas, catálogo del proveedor): dos por fila en el teléfono. */
@media (max-width: 640px) {
  .grid.cols-4:has(> .pcard), .grid.cols-3:has(> .pcard) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pcard .thumb { aspect-ratio: 1; }
  .pcard .body { padding: 8px 10px; }
}
.table-wrap:has(> .tbl.tarjetas) { overflow-x: visible; }
.tbl.tarjetas .cat-img { display: none; }
.tbl.tarjetas.recortada tbody tr:nth-child(n+26) { display: none; }
.ver-resto { display: flex; width: calc(100% - 24px); margin: 8px 12px 12px; justify-content: center; }

/* ============================================================ edición del producto (tienda propia) */
.prod-form { display: grid; gap: 16px; }
.prod-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.prod-form legend { float: left; width: 100%; padding: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--ink); grid-column: 1 / -1; }
.prod-form .campo { display: grid; gap: 4px; min-width: 0; }
.prod-form .ancho { grid-column: 1 / -1; }
.prod-form .input { width: 100%; }
.prod-form .row .input { flex: 1 1 auto; }
.prod-form textarea.input { min-height: 0; resize: vertical; }
.prod-form textarea.mono { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 640px) { .prod-form fieldset { grid-template-columns: minmax(0, 1fr); } }
.prod-cats { display: grid; gap: 2px; max-height: 220px; overflow: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.prod-cats .chk { white-space: normal; color: var(--ink); font-size: 12.5px; }

/* ============================================================ Ventas: atajos y análisis plegado */
.ventas-rapidos { margin: 10px 0 2px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.ventas-rapidos::-webkit-scrollbar { display: none; }
.plegado-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.plegado-card > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); font-size: 13.5px; }
.plegado-card > summary::-webkit-details-marker { display: none; }
.plegado-card[open] > summary { border-bottom: 1px solid var(--border); }
.plegado-card > [data-experimento] > .card { border: 0; box-shadow: none; }

/* ---------- Backoffice modular (20-10-2026) ---------- */
/* Resumen de una línea arriba de una lista (Ventas → Pedidos). */
.resumen-linea { font-size: 13px; color: var(--ink-soft); margin: 0 0 4px; min-height: 18px; }
.resumen-linea b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* Segmentos que son enlaces (cambian la dirección). */
a.seg-btn { text-decoration: none; }
/* Sistema → Ajustes: módulos con interruptor. */
.lst.modulos .l2 { white-space: normal; }

/* Precios y competencia: una fila por producto; al abrirla, sus ofertas. */
.cmp-toolbar { flex-wrap: wrap; }
.cmp-tbl .cmp-fila { cursor: pointer; }
.cmp-flecha { width: 28px; color: var(--muted); }
.cmp-flecha svg { transform: rotate(-90deg); transition: transform .15s; }
.cmp-flecha .ibtn { opacity: 1 !important; }
.cmp-fila.abierta .cmp-flecha svg { transform: none; }
.cmp-fila.abierta td { background: var(--surface-2); border-bottom-color: transparent; }
.cmp-prod { max-width: 360px; }
.cmp-prod b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.cmp-prod .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; font-size: 11.5px; }
.cmp-dec-h { text-align: right; }
.cmp-dec .acts { justify-content: flex-end; flex-wrap: nowrap; }
.cmp-tbl tr.detalle > td { padding: 0 14px 14px; background: var(--surface-2); }
.cmp-detalle { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cmp-det-acts { padding: 8px 12px; gap: 6px 10px; border-bottom: 1px solid var(--border); align-items: center; }
.cmp-decidir { flex-wrap: wrap; }
/* Quién revisó el grupo y por qué: una línea; el motivo completo, en el título. */
.cmp-rev { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; font-size: 12.5px; }
.cmp-quien { font-weight: 500; color: var(--ink-soft); }
.cmp-quien.nadie { color: var(--muted); font-weight: 400; }
.cmp-motivo { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 640px; }
.cmp-sug { display: inline-flex; gap: 5px; align-items: center; color: var(--accent-ink); }
.cmp-sug svg { width: 14px; height: 14px; }
.cmp-tienda { white-space: nowrap; }
.cmp-nom { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 520px; }
.cmp-mini { width: 30px; height: 30px; object-fit: contain; border-radius: 4px; background: #fff; border: 1px solid var(--border); flex: none; }
.cmp-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cmp-cod { font-size: 11px; color: var(--warn); background: var(--warn-wash); border-radius: 4px; padding: 0 5px; flex: none; }
.cmp-pie { align-items: stretch; gap: 0; border-top: 1px solid var(--border); background: var(--surface-2); }
.cmp-pie .cmp-costo { border-top: 0; flex: 1 1 auto; }
.cmp-pie > .btn { align-self: center; margin: 6px 12px; }
/* Teléfono: la flecha de abrir va arriba a la derecha de cada tarjeta, no en una línea propia;
   los segmentos de estado se deslizan en vez de cortarse. */
.cmp-tbl.tarjetas tbody tr.cmp-fila { position: relative; padding-right: 56px; }
.cmp-tbl.tarjetas tbody td.cmp-flecha { position: absolute !important; top: 8px; right: 8px; margin: 0; }   /* las celdas de tarjeta llevan static !important */
.cmp-miembros.tarjetas .cmp-nom { max-width: 100%; }
.cmp-miembros.tarjetas .cmp-n { white-space: normal; }
@media (max-width: 760px) {
  .toolbar > .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .toolbar > .seg::-webkit-scrollbar { display: none; }
  .toolbar > .seg .seg-btn { flex: none; }
  .cmp-motivo { white-space: normal; }
}
.cmp-detalle .tbl tr.cmp-barato td { background: var(--ok-wash); }
.cmp-detalle .tbl tr.cmp-mia td { background: var(--accent-wash); }
.cmp-costo { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; }
.campo-pop { display: flex; align-items: center; gap: 8px; }
.campo-pop .select { margin-left: auto; width: auto; }
@media (prefers-reduced-motion: reduce) { .cmp-flecha svg { transition: none; } }
/* Columnas técnicas que sobran en pantallas angostas (p. ej. límite y velocidad de un rastreo). */
@media (max-width: 900px) { .tbl .solo-ancho { display: none !important; } }
/* Una sola línea de frescura de los datos (Catálogo). */
.fresh-linea { font-size: 12px; color: var(--muted); }
.fresh-linea.stale { color: var(--warn); }
.btn .n { font-weight: 500; color: var(--muted); }
/* Teléfonos: la línea de detalle de cada cifra en un solo renglón, y lo que repite otro control se oculta. */
@media (max-width: 640px) { .kpi .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi { padding: 9px 12px 8px; } }
@media (max-width: 760px) { .oculto-tel { display: none !important; } }
/* Acciones de cada fila más suaves hasta pasar el cursor o enfocar la fila (con mouse); en
   pantallas táctiles quedan siempre a la vista. Menos ruido en tablas largas. */
@media (hover: hover) and (pointer: fine) {
  .tbl tbody tr .acts .ibtn, .lst li .acts .ibtn { opacity: .45; transition: opacity .12s; }
  .tbl tbody tr:hover .acts .ibtn, .tbl tbody tr:focus-within .acts .ibtn,
  .lst li:hover .acts .ibtn, .lst li:focus-within .acts .ibtn { opacity: 1; }
}

/* Táctil: los botones de ícono de cada fila (26 px) y los selectores compactos llegan al mínimo cómodo. */
@media (pointer: coarse) {
  .ibtn { width: 36px; height: 36px; }
  .ibtn svg { width: 18px; height: 18px; }
  select.fsel { height: 42px; font-size: 16px; }
}

/* Enlaces dentro de un texto: subrayados (no se distinguen solo por el color). */
.insight a, .note a, .muted a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Editor de producto (#catalogo/<sku>/editar) ----
   Página completa: contenido a la izquierda (nombre, descripción, Google), venta y datos a
   la derecha; en pantallas angostas, una columna. La barra de guardar queda pegada abajo. */
.ped { display: flex; flex-direction: column; gap: 14px; }
.ped-top { gap: 8px; align-items: center; }
.ped-cab { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ped-cab h2 { font-size: 18px; margin: 0 0 2px; }
.ped-foto { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border); background: #fff; overflow: hidden; display: grid; place-items: center; }
.ped-foto .thumb { width: 100%; height: 100%; display: grid; place-items: center; }
.ped-foto img { width: 100%; height: 100%; object-fit: contain; }
.ped-foto .ph { color: var(--faint); font-size: 10px; }
.ped-foto .ph svg { width: 20px; height: 20px; }
.ped-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 14px; align-items: start; }
.ped-main, .ped-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1000px) { .ped-grid { grid-template-columns: minmax(0, 1fr); } }
.ped .bloque { display: flex; flex-direction: column; gap: 12px; }
.ped .bloque > h3 { margin: 0; }
.ped .campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ped-etq { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.ped-etq label, .ped-etq > span { font-weight: 600; font-size: 12.5px; color: var(--ink-soft); }
.ped-cuenta { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ped #ped-name { font-size: 15px; font-weight: 600; height: 38px; }
.ped .input.num { font-variant-numeric: tabular-nums; }

/* Precio: venta y referencia en fila; abajo el descuento y cómo se verá en la tienda. */
.ped-precios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.ped-desc { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: end; }
.ped-pct-in { position: relative; }
.ped-pct-in .input { padding-right: 24px; width: 100%; }
.ped-pct-in span { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
.ped-vista-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; min-height: 32px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; }
.ped-antes { color: var(--muted); }
.ped-ahora { font-size: 17px; color: var(--ink); }
.ped-promo { flex-basis: 100%; font-size: 11.5px; }
.ped-reco { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Estado: tres opciones con su explicación corta. */
.ped-estados { display: flex; flex-direction: column; gap: 6px; }
.ped-estado { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.ped-estado input { margin: 3px 0 0; accent-color: var(--accent); }
.ped-estado b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.ped-estado small { display: block; font-size: 12px; color: var(--muted); }
.ped-estado:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.ped-estado:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.ped-dest { font-size: 13px; color: var(--ink-soft); }

/* Categorías: las elegidas como fichas y el árbol con buscador. */
.ped-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ped-chip { gap: 4px; padding-right: 3px; color: var(--ink); }
.ped-chip-x { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.ped-chip-x:hover { background: var(--surface-2); color: var(--danger); }
.ped-chip-x svg { width: 12px; height: 12px; }
.ped-sin-cat { font-size: 12.5px; }
.ped-arbol { display: flex; flex-direction: column; max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 0; }
.ped-cat { padding: 5px 10px 5px calc(10px + var(--nivel, 0) * 16px); font-size: 13px; color: var(--ink-soft); white-space: normal; }
.ped-cat:hover { background: var(--surface-2); }
.ped-stock { gap: 10px; align-items: center; }
.ped-stock .input { width: 120px; }
.ped-stock-ro { margin: 0; font-size: 13px; }

/* Vista previa en Google (colores de Google, pero con los tokens para el tema oscuro). */
.serp { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-family: Arial, sans-serif; }
.serp-url { font-size: 12px; color: var(--ink-soft); }
.serp-tit { font-size: 18px; line-height: 1.3; color: #1a0dab; margin: 2px 0; overflow-wrap: anywhere; }
.serp-desc { font-size: 13px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
:root[data-theme="dark"] .serp-tit { color: #99c3ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .serp-tit { color: #99c3ff; } }

/* Sugerencias (IA o asistente) junto a cada campo: nada se guarda solo. */
.ped-sug:empty { display: none; }
.ped-sug-caja { border: 1px dashed var(--accent); border-radius: var(--radius-sm); background: var(--accent-wash); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ped-sug-k { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--accent-ink); }
.ped-sug-v { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.ped-sug-html { max-height: 220px; margin: 0; }

/* Fotos y archivos del editor (producto-medios.js). */
.ped-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.ped-ft { position: relative; aspect-ratio: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; overflow: hidden; cursor: grab; outline: none;
  transition: transform .16s ease, opacity .16s ease, box-shadow .12s ease, border-color .12s ease; }
.ped-ft img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; pointer-events: none; }
.ped-ft:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.ped-ft.elegida { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ped-ft.arrastrando { opacity: .35; }
.ped-ft.destino { box-shadow: -4px 0 0 -1px var(--accent); }
.ped-ft.sale { transform: scale(.9); opacity: 0; }
.ped-ft.entra { animation: ped-ft-in .2s cubic-bezier(.22,.61,.36,1); }
@keyframes ped-ft-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.ped-ft.subiendo { display: grid; place-items: center; cursor: default; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.ped-ft-etq { position: absolute; left: 6px; top: 6px; }
.ped-ft-n { position: absolute; right: 8px; top: 5px; font-size: 11px; font-weight: 600; color: #5F6A80; }
.ped-ft-x { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.95); color: #3C4460;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.ped-ft-x svg { width: 14px; height: 14px; }
.ped-ft:hover .ped-ft-x, .ped-ft:focus-within .ped-ft-x, .ped-ft.elegida .ped-ft-x { opacity: 1; }
.ped-ft-x:hover { color: var(--danger); }
@media (hover: none) { .ped-ft-x { opacity: 1; } }
.ped-ft-soltar { aspect-ratio: 1; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px;
  text-align: center; color: var(--muted); font-size: 12px; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.ped-ft-soltar svg { width: 20px; height: 20px; }
.ped-ft-soltar:hover, .ped-ft-soltar.encima { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }
.ped-ft-det { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s cubic-bezier(.22,.61,.36,1); margin-top: -12px; }
.ped-ft-det.abierto { grid-template-rows: 1fr; margin-top: 0; }
.ped-ft-det > div { min-height: 0; overflow: hidden; }
.ped-ft-caja { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ped-ft-caja > img { width: 112px; height: 112px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.ped-ft-campos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ped-ft-btns { gap: 6px; }
@media (max-width: 600px) { .ped-ft-caja { grid-template-columns: minmax(0, 1fr); } .ped-ft-caja > img { width: 100%; height: 150px; } .ped-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ped-arch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ped-arch-it { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ped-arch-it.entra { animation: ped-ft-in .2s cubic-bezier(.22,.61,.36,1); }
.ped-arch-ico { width: 32px; height: 38px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 700; }
.ped-arch-ico.pdf { background: var(--danger-wash); color: var(--danger); }
.ped-arch-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ped-arch-txt .input { height: 32px; font-weight: 600; }
.ped-arch-txt small { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.ped-arch-acc { display: flex; gap: 2px; }
.ped-arch-acc .ibtn { width: 30px; height: 30px; }
.ped-arch-acc .ibtn:disabled { opacity: .3; cursor: default; background: transparent; }
.ped-arch-acc .rot180 { transform: rotate(180deg); }
.ped-arch-vacio { padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 12.5px; text-align: center; }
.ped-arch-sug { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--radius-sm); background: var(--accent-wash); font-size: 12.5px; }
.ped-arch-sug > svg { color: var(--accent-ink); flex: none; }
.ped-arch-sug span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .ped-ft, .ped-ft-det, .ped-ft-soltar { transition: none; } .ped-ft.entra, .ped-arch-it.entra { animation: none; } }

/* Barra de guardar, pegada abajo mientras se edita. */
.ped-barra { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: 8px; margin: 0 -20px -40px; padding: 10px 20px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.ped-estado-cambios { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .ped-barra { margin: 0 -12px -40px; padding-left: 12px; padding-right: 12px; } .ped-barra .btn { min-height: 40px; } }

/* Editor de texto con formato. */
.rt { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
.rt:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.rt-barra { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 4px 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.rt-barra .rt-bloque { width: auto; height: 28px; margin-right: 4px; }
.rt-barra .ibtn[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-ink); }
.rt-barra .ibtn:disabled, .rt-barra select:disabled { opacity: .4; cursor: default; }
.rt-barra .spacer { flex: 1; }
.rt-area { min-height: 220px; max-height: 60vh; overflow: auto; padding: 10px 12px; margin: 0; outline: none; font-size: 13.5px; color: var(--ink); }
.rt-area:empty::before { content: attr(data-placeholder); color: var(--faint); }
.rt-area iframe { max-width: 100%; border: 0; border-radius: 6px; }
.rt-codigo { border: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); min-height: 240px; width: 100%; }
.rt-codigo:focus { outline: none; }
@media (pointer: coarse) { .rt-barra .ibtn { width: 38px; height: 38px; } }

/* ---- Asistente IA (chat.js) ----
   Panel a la derecha que no tapa el contenido en pantallas anchas (el contenido se corre),
   lo cubre en notebooks y ocupa toda la pantalla en el teléfono. */
.chat-boton svg { color: var(--accent); width: 14px; height: 14px; }
.chat-boton[aria-expanded="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }
.chat { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 45; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-md); }
.chat[hidden] { display: none; }
@media (min-width: 1400px) { body.chat-abierto .main { margin-right: 420px; } body.chat-abierto .chat { box-shadow: none; } }
@media (max-width: 760px) { .chat { width: 100vw; border-left: 0; } body.chat-abierto { overflow: hidden; } }
.chat-cab { display: flex; align-items: center; gap: 6px; height: var(--topbar-h); padding: 0 10px 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.chat-tit { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.chat-tit b { font-size: 14px; }
.chat-modelo { font-size: 12px; color: var(--muted); white-space: nowrap; }
.chat-cuerpo { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.chat-msg { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; min-width: 0; }
.chat-msg.persona { align-self: flex-end; max-width: 88%; background: var(--accent-wash); color: var(--ink); padding: 8px 12px; border-radius: 12px 12px 4px 12px; }
.chat-msg.asistente { color: var(--ink); }
.chat-msg.asistente p { margin: 0 0 .6em; }
.chat-msg.asistente p:last-child { margin-bottom: 0; }
.chat-msg.asistente ul, .chat-msg.asistente ol { margin: .2em 0 .7em; padding-left: 1.3em; }
.chat-msg.asistente li { margin: .15em 0; }
.chat-msg.asistente h4 { font-size: 13.5px; margin: .8em 0 .3em; }
.chat-msg.asistente a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.chat-msg.asistente code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); padding: 0 4px; border-radius: 4px; }
.chat-msg.asistente pre { background: var(--surface-2); padding: 8px 10px; border-radius: 6px; overflow-x: auto; font-size: 12px; }
.chat-msg.herramienta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.chat-msg.herramienta svg { width: 12px; height: 12px; flex-shrink: 0; }
.chat-msg.error { color: var(--danger); background: var(--danger-wash); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; }
.chat-tabla { overflow-x: auto; margin: .3em 0 .8em; border: 1px solid var(--border); border-radius: 6px; }
.chat-tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.chat-tbl th, .chat-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.chat-tbl th { background: var(--surface-2); font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.chat-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-tbl tr:last-child td { border-bottom: 0; }
.chat-puntos { display: inline-flex; gap: 3px; }
.chat-puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: chat-punto 1s infinite ease-in-out; }
.chat-puntos i:nth-child(2) { animation-delay: .15s; } .chat-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-punto { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-puntos i { animation: none; opacity: .6; } }
.chat-vacio { margin: auto 0; display: flex; flex-direction: column; gap: 8px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.chat-vacio b { font-size: 15px; color: var(--ink); }
.chat-vacio p { margin: 0; }
.chat-sugs { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.chat-sug { text-align: left; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.chat-sug:hover { background: var(--surface-2); border-color: var(--border-strong); }
.chat-pie { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); flex-shrink: 0; }
.chat-pie textarea { flex: 1; resize: none; min-height: 38px; max-height: 160px; line-height: 1.4; padding: 8px 10px; }
.chat-enviar { width: 38px; height: 38px; padding: 0; justify-content: center; flex-shrink: 0; }
.chat.ocupado .chat-enviar { opacity: .5; pointer-events: none; }
.chat-linea { font-size: 13px; color: var(--muted); }
.chat-lista-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.chat-lista li { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); }
.chat-conv { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.chat-conv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.chat-conv small { color: var(--muted); font-size: 11.5px; }
.chat-conv:hover span { color: var(--accent); }
.chat-prop { border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; background: var(--surface); }
.chat-prop-cab { display: flex; align-items: center; gap: 6px; color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.chat-prop-nom { font-size: 13.5px; color: var(--ink); }
.chat-prop-cab svg { width: 14px; height: 14px; }
.chat-prop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chat-prop li { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.chat-prop-k { font-weight: 600; color: var(--ink-soft); flex: 0 0 100%; font-size: 12px; }
.chat-prop-mot { margin: 0; color: var(--muted); font-size: 12.5px; }
@media (pointer: coarse) { .chat-cab .icon-btn { width: 40px; height: 40px; } .chat-pie textarea { font-size: 16px; } }
@media (max-width: 760px) { .chat-boton .chip-txt { display: none; } .chat-boton { width: 32px; padding: 0; justify-content: center; } }
/* Ajustes → Asistente IA */
.ia-gasto { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ia-ajustes { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-bottom: 6px; }
.ia-ajustes .campo { display: flex; flex-direction: column; gap: 4px; }
.ia-ajustes .campo > span { font-weight: 600; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 900px) { .ia-ajustes { grid-template-columns: 1fr 1fr; } .ia-ajustes .campo:first-child { grid-column: 1 / -1; } }

/* ---------- Editor de promociones (Tienda → Promociones): descuento arriba y, abajo, a qué
   productos se aplica: árbol de categorías con casillas de tres estados y la lista con foto. */
.pr-editor { display: grid; gap: 16px; }
.pr-cab { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.pr-volver { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 10px 0 4px; border: 0; border-radius: 999px; background: none; color: var(--accent-ink); font-weight: 500; font-size: 13px; cursor: pointer; }
.pr-volver:hover { background: var(--accent-wash); }
.pr-volver svg { width: 16px; height: 16px; }
.pr-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; flex: 1 1 280px; }
.pr-tit h2 { margin: 0; font-family: var(--font-title); font-weight: 600; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.pr-tit .muted { font-size: 12.5px; }
.pr-desc { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 190px) repeat(2, minmax(0, 1fr)) minmax(0, .9fr) auto; gap: 12px 16px; align-items: end; padding: 14px 16px 16px; }
.pr-desc .campo { display: grid; gap: 5px; margin: 0; min-width: 0; }
.pr-desc .campo > span { font-size: 12px; font-weight: 500; color: var(--muted); }
.pr-desc .campo small { font-weight: 400; color: var(--faint); }
.pr-desc .input { min-width: 0; width: 100%; }
.pr-valor { display: flex; align-items: center; gap: 6px; }
.pr-valor .input { width: 76px; flex: none; text-align: right; font-weight: 600; font-size: 15px; }
.pr-sws { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.pr-sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; font-size: 12.5px; color: var(--ink-soft); }
.pr-sw .switch input:checked + span { background: var(--accent); }
.pr-sw .switch span::after { background: var(--on-accent); }
.pr-alcance { overflow: clip; }
.pr-res { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 28px; align-items: center; padding: 16px 18px 14px; border-bottom: 1px solid var(--border); }
.pr-cifra { display: flex; flex-direction: column; gap: 2px; }
.pr-cifra .k { font-family: var(--font-label); font-weight: 500; font-size: 12px; color: var(--muted); }
.pr-cifra .v { font-weight: 600; font-size: 32px; line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pr-cifra .v small { font-weight: 500; font-size: 13px; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.pr-cifra .s { font-size: 12px; color: var(--muted); }
.pr-cifra .s b { color: var(--ink-soft); font-weight: 600; }
.pr-mapa { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pr-mapa-barra { display: flex; gap: 3px; height: 12px; }
.pr-mapa-seg { position: relative; height: 100%; min-width: 6px; padding: 0; border: 0; border-radius: 4px; background: var(--mark-soft); overflow: hidden; cursor: pointer; }
.pr-mapa-seg > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 4px; transition: width var(--dur-4) var(--ease); }
.pr-mapa-seg:hover > span { background: var(--accent-hover); }
.pr-mapa-seg.sel { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.pr-mapa-ley { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); }
.pr-mapa-ley button { border: 0; background: none; padding: 1px 3px; border-radius: 6px; color: inherit; font: inherit; cursor: pointer; display: inline-flex; gap: 5px; align-items: baseline; }
.pr-mapa-ley button:hover { color: var(--ink); }
.pr-mapa-ley b { color: var(--ink-soft); font-family: var(--font-label); font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-cuerpo { display: grid; grid-template-columns: 296px minmax(0, 1fr); }
.pr-arbol { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.pr-buscar .input { border-radius: 999px; height: 34px; }
.pr-arbol .pr-buscar { margin: 12px 12px 6px; }
.ar { overflow: auto; padding: 2px 8px 14px; max-height: 640px; }
.ar-todas, .ar-fila { display: grid; grid-template-columns: 22px 24px minmax(0, 1fr) auto; align-items: center; gap: 2px; min-height: 34px; padding-right: 8px; border-radius: var(--radius-sm); transition: background-color var(--dur-1) var(--ease); }
.ar-todas { grid-template-columns: minmax(0, 1fr) auto; padding-left: 8px; margin-bottom: 2px; }
.ar-fila { padding-left: calc(var(--niv, 0) * 16px); }
.ar-fila:hover, .ar-todas:hover { background: var(--surface-2); }
.ar-fila.sel, .ar-todas.sel { background: var(--accent-wash); }
.ar-fila.sel .ar-n, .ar-todas.sel .ar-n { color: var(--accent-ink); font-weight: 600; }
.ar-chev { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; display: grid; place-items: center; color: var(--faint); cursor: pointer; }
.ar-chev svg { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease); }
.ar-chev[aria-expanded="true"] svg { transform: rotate(90deg); }
.ar-chev:hover { color: var(--ink); background: var(--surface-2); }
.ar-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.ar-fila.oculta .ar-n { color: var(--muted); }
.ar-c { font-family: var(--font-label); font-weight: 600; font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-c.lleno { color: var(--accent-ink); }
.ar-hijos { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease); }
.ar-hijos.abierto { grid-template-rows: 1fr; }
.ar-hijos > div { min-height: 0; overflow: hidden; }
/* Casilla de tres estados (sí, en parte, no). */
.tri { position: relative; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.tri:hover:not(:disabled) { border-color: var(--accent); }
.tri:active:not(:disabled) { transform: scale(.9); }
.tri:disabled { cursor: default; opacity: .6; }
.tri svg { width: 13px; height: 13px; stroke-width: 3; color: var(--on-accent); opacity: 0; transform: scale(.6); transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); }
.tri .medio { position: absolute; width: 9px; height: 2px; border-radius: 1px; background: var(--on-accent); opacity: 0; }
.tri[aria-checked="true"], .tri[aria-checked="mixed"] { background: var(--accent); border-color: var(--accent); }
.tri[aria-checked="true"] svg { opacity: 1; transform: none; }
.tri[aria-checked="mixed"] .medio { opacity: 1; }
.pr-lista { display: flex; flex-direction: column; min-width: 0; }
.pl-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.pl-barra .pr-buscar { flex: 1 1 220px; max-width: 360px; }
.pl-filtro { display: inline-flex; align-items: center; gap: 4px; height: 26px; max-width: 260px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; font-size: 12px; white-space: nowrap; }
.pl-filtro span { overflow: hidden; text-overflow: ellipsis; }
.pl-filtro button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; }
.pl-filtro button svg { width: 12px; height: 12px; }
.pl-cats { display: none; }
.pl-masivo { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; color: var(--ink-soft); }
.pl-masivo b { color: var(--ink); }
.pl-filas { list-style: none; margin: 0; padding: 0; }
.pl-fila { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; grid-template-areas: "ck img nom pre"; align-items: center; gap: 4px 12px; padding: 9px 14px; border-top: 1px solid var(--border);
  transition: background-color var(--dur-1) var(--ease), opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.pl-fila:first-child { border-top: 0; }
.pl-fila:hover { background: var(--surface-2); }
.pl-fila .tri { grid-area: ck; }
.pl-fila.sale { opacity: 0; transform: translateX(10px); }
.pl-img { grid-area: img; width: 44px; height: 44px; border-radius: var(--r-inner); border: 1px solid var(--border); background: #fff; display: grid; place-items: center; color: var(--faint); overflow: hidden; }
.pl-img img { width: 100%; height: 100%; object-fit: contain; }
.pl-img svg { width: 18px; height: 18px; }
.pl-nom { grid-area: nom; min-width: 0; }
.pl-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; color: var(--ink); line-height: 1.35; }
.pl-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.pl-m .sku { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pl-pre { grid-area: pre; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-pre b { display: block; font-size: 13.5px; }
.pl-pre s { font-size: 12px; color: var(--muted); }
.pl-pre .pct { margin-left: 4px; font-family: var(--font-label); font-weight: 600; font-size: 11.5px; color: var(--ok); }
.pl-fila.no .pl-pre b { font-weight: 500; color: var(--ink-soft); }
.pl-vacio { padding: 28px 16px; text-align: center; color: var(--muted); }
.pl-mas { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--border); }
.pr-barra .pr-confirma { flex: 1; margin: 0; }
@media (max-width: 1240px) { .pr-desc { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pr-nombre { grid-column: span 2; } }
@media (max-width: 760px) {
  .pr-tit h2 { font-size: 17px; }
  .pr-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pr-nombre, .pr-fecha, .pr-sws { grid-column: 1 / -1; }
  .pr-sws { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
  .pr-res { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .pr-cifra .v { font-size: 28px; }
  .pr-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pr-arbol { display: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .pr-cuerpo.ver-arbol .pr-arbol { display: flex; }
  .pl-cats { display: inline-flex; }
  .pl-barra { padding: 10px 12px; }
  .pl-barra .pr-buscar { flex-basis: 100%; max-width: none; order: -1; }
  .pl-barra .seg .largo { display: none; }
  .pl-fila { grid-template-columns: 22px 40px minmax(0, 1fr); grid-template-areas: "ck img nom" "ck img pre"; padding: 10px 12px; }
  .pl-img { width: 40px; height: 40px; }
  .pl-pre { text-align: left; }
  .pl-pre b { display: inline; margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .pl-fila, .ar-hijos, .tri, .tri svg, .pr-mapa-seg > span { transition: none; } }

/* ============================================================
   Tacto y textos completos (03-11-2026). Al final para ganarle a reglas más específicas de
   arriba (.tienda .seg-btn, .ped-arch-acc .ibtn, body:has(.ped-barra) .toast-wrap…).
   ============================================================ */
/* Los avisos no tapan la pantalla: en el teléfono, con la barra de guardar del editor, la caja de
   avisos (vacía) se estiraba de arriba abajo y se comía todos los toques del editor. */
.toast-wrap { pointer-events: none; }
.toast-wrap > * { pointer-events: auto; }
@media (max-width: 640px) { body:has(.ped-barra) .toast-wrap { bottom: auto; } }

/* Cifras: el nombre, la variación y el detalle se leen completos (en dos líneas si hace falta);
   cortados con "…" no había cómo verlos al tacto. */
.kpi .k { white-space: normal; }
.kpi .k > span { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.kpi .d, .kpi .s { white-space: normal; overflow-wrap: anywhere; }
/* Listas "#1686 Nombre · Comuna": el número no se corta ("#16…"); el resto toma el espacio que queda. */
.lst .l1 > .donde { flex: 1 1 0; min-width: 0; }
/* Barras con detalle ("3 compras · $450.000"): el detalle baja de línea en vez de cortarse. */
.hbar .c { white-space: normal; line-height: 1.3; }

/* Safari del iPad solo entrega el toque a lo que parece tocable: ⓘ, celdas con el texto
   completo, chips de cambios y barras de los gráficos. */
@media (hover: none) { [data-tip], .dias .d { cursor: pointer; } }
.viz-plot { touch-action: pan-y; }

@media (pointer: coarse) {
  /* Período de la barra superior */
  .periodo { height: 42px; }
  .per-btn { height: 38px; }
  .per-flecha { width: 38px; height: 38px; }
  .per-pre button { min-height: 40px; }
  .per-fechas .input { height: 40px; }
  /* Interruptores (Ajustes → Módulos, promociones, menú de la cuenta) */
  .switch { width: 44px; height: 24px; }
  .switch span::after { width: 20px; height: 20px; }
  .switch input:checked + span::after { transform: translateX(20px); }
  .switch::before { content: ""; position: absolute; inset: -10px -4px; }   /* zona de toque de 44 px */
  /* Detalles y errores que al tacto no tienen cursor para leerse completos */
  .lst .l2, .tbl td .sub.t-bad, .card-head .sub { white-space: normal; }
  .ev-chips .ev { height: 32px; }
  .camp-tbl .presu .input { width: 96px; }
  .cmp-flecha { width: 40px; }
  .cmp-flecha .ibtn { flex: none; }
  .fc-btn { width: 40px; height: 40px; }
  /* Editor de producto */
  .ped-ft-x { width: 36px; height: 36px; }
  .ped-chip-x { width: 32px; height: 32px; }
  .ped-arch-acc .ibtn { width: 36px; height: 36px; }
  .ped-arch-txt .input { height: 40px; }
  .ped-cat { min-height: 40px; }
  .rt-barra .rt-bloque { height: 38px; }
  /* Tienda y editor de promociones */
  .tienda .seg-btn, .tienda-modal .seg-btn { height: 38px; }
  .tri::after { content: ""; position: absolute; inset: -9px; }
  .ar-todas, .ar-fila { min-height: 44px; }
  .ar-fila { grid-template-columns: 36px 36px minmax(0, 1fr) auto; }
  .ar-chev { width: 36px; height: 36px; }
  .pl-filtro { height: 34px; }
  .pl-filtro button { width: 30px; height: 30px; }
  .pr-mapa-ley button { min-height: 32px; }
  .ar-n { min-height: 40px; }
  .pr-valor .input { flex: 1 1 0; width: 0; min-width: 64px; max-width: 120px; }
}
@media (max-width: 760px) { .pr-desc .campo:has(> .pr-valor) { grid-column: 1 / -1; } }
/* Archivos del editor en el teléfono: los botones bajo el nombre, para que el nombre quepa. */
@media (max-width: 600px) { .ped-arch-it { grid-template-columns: auto minmax(0, 1fr); } .ped-arch-acc { grid-column: 2; justify-content: flex-end; } }
/* Horario en el teléfono: días y quitar arriba; desde y hasta lado a lado debajo (antes "hasta"
   quedaba solo en una segunda línea). */
@media (max-width: 720px) {
  .tienda-fila:has(> .input[type=time]) > .input:not([type=time]) { flex: 1 1 calc(100% - 52px); }
  .tienda-fila:has(> .input[type=time]) > .ibtn { order: 1; }
  .tienda-fila:has(> .input[type=time]) > .input[type=time] { order: 2; flex: 1 1 0; width: auto; min-width: 0; }
}
/* Teléfono: un título largo de tarjeta (p.ej. el nombre de un producto) baja de línea en vez de ensanchar la página. */
@media (max-width: 640px) { .card-head h3 { white-space: normal; flex-shrink: 1; min-width: 0; overflow-wrap: anywhere; } }