:root {
  color-scheme: light;
  --surface-1: #fcfcfb; --page: #f9f9f7; --text-primary: #0b0b0b; --text-secondary: #52514e; --muted: #898781;
  --gridline: #e1e0d9; --border: rgba(11,11,11,0.10); --border-strong: rgba(11,11,11,0.16);
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #7a4fd1;
  --good: #0ca30c; --warning: #fab219; --warning-ink: #8a5c00; --serious: #ec835a; --critical: #d03b3b;
  --chip-bg: #f1f0ec; --chip-bg-active: #0b0b0b; --chip-text-active: #fcfcfb; --input-bg: #ffffff;
  --shadow: 0 1px 2px rgba(11,11,11,0.06), 0 1px 8px rgba(11,11,11,0.04);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19; --page: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --muted: #898781;
    --gridline: #2c2c2a; --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #9b78ef;
    --good: #0ca30c; --warning: #fab219; --warning-ink: #fab219; --serious: #ec835a; --critical: #e66767;
    --chip-bg: #262625; --chip-bg-active: #ffffff; --chip-text-active: #0b0b0b; --input-bg: #232322;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 8px rgba(0,0,0,0.2);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19; --page: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --muted: #898781;
  --gridline: #2c2c2a; --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18);
  --series-1: #3987e5; --series-2: #d95926; --series-3: #9b78ef;
  --good: #0ca30c; --warning: #fab219; --warning-ink: #fab219; --serious: #ec835a; --critical: #e66767;
  --chip-bg: #262625; --chip-bg-active: #ffffff; --chip-text-active: #0b0b0b; --input-bg: #232322;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 8px rgba(0,0,0,0.2);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { background: var(--page); color: var(--text-primary); font-family: system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing: antialiased; padding-bottom: 48px; }
a { color: var(--series-1); }

.app-header { position: sticky; top: 0; z-index: 30; background: var(--surface-1); border-bottom: 1px solid var(--border); padding: 12px 16px; }
.app-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1360px; margin: 0 auto; }
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.back-btn { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); width: 36px; height: 36px; border-radius: 10px; display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; flex-shrink: 0; }
.back-btn.show { display: flex; }
.app-title { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; min-width: 0; }
.app-title h1 { font-size: 18px; margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-title .subtitle { font-size: 12px; color: var(--muted); }
/* En la tienda, la sucursal va grande al costado del nombre. */
.app-title .subtitle.sucursal { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text-primary); }
.sucursal-nombre { font-size: 20px; font-weight: 900; letter-spacing: .05em; color: var(--series-1); white-space: nowrap; }
.sucursal-usuario { font-size: 13px; color: var(--muted); font-weight: 600; }
.icon-btn { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 16px; }
.icon-btn:hover { background: var(--chip-bg); }
.header-right { display: flex; gap: 8px; align-items: center; }
.logout-btn { display: none; }
.logout-btn.show { display: flex; }

/* ---------- Login gate ---------- */
#login-gate {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--page);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 32px 28px;
  max-width: 320px;
  width: 100%;
  text-align: center;
}
.login-emoji { font-size: 40px; margin-bottom: 8px; }
.login-card h2 { margin: 0 0 4px; font-size: 19px; }
.login-card p { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.login-card input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 15px; text-align: center; box-sizing: border-box; margin-bottom: 12px; }
.login-card input:focus { outline: 2px solid var(--series-1); outline-offset: 1px; }
.login-card .btn-primary { width: 100%; padding: 11px; }
.login-error { display: none; color: var(--critical); font-size: 12.5px; margin-top: 10px; }
.login-error.show { display: block; }

.tabbar { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; background: var(--surface-1); border-bottom: 1px solid var(--border); position: sticky; top: 61px; z-index: 29; scrollbar-width: thin; }
.tabbar::-webkit-scrollbar { height: 6px; }
.tabbar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.tab-chip { flex-shrink: 0; border: 1px solid var(--border); background: var(--chip-bg); color: var(--text-primary); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tab-chip[aria-selected="true"] { background: var(--chip-bg-active); color: var(--chip-text-active); border-color: transparent; }

main { max-width: 1360px; margin: 0 auto; padding: 16px; }
.view { display: none; }
.view.active { display: block; }
.section { display: none; }
.section.active { display: block; }
.section-head { margin-bottom: 12px; }
.section-head h2 { font-size: 16px; margin: 0 0 4px; }
.section-head .note { font-size: 12.5px; color: var(--muted); }

/* ---------- Compact top navigation (Tacna/Lima/Inventario) ---------- */
.quick-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.quick-nav-btn {
  flex: 1 1 116px;
  padding: 12px 6px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow);
}
.quick-nav-btn span { font-size: 16px; }
.quick-nav-btn.tacna { background: var(--series-2); }
.quick-nav-btn.lima { background: var(--series-1); }
.quick-nav-btn.inv { background: var(--muted); }
.quick-nav-btn.compras { background: var(--good); }
.quick-nav-btn.maquina { background: var(--series-3); }
.quick-nav-btn.usuarios { background: var(--chip-bg-active); color: var(--chip-text-active); }
.quick-nav-btn:hover { opacity: 0.88; }
@media (max-width: 420px) { .quick-nav-btn { font-size: 11px; padding: 10px 4px; } }

/* ---------- Home menu ---------- */
.home-hero { padding: 24px 4px 8px; text-align: center; }
.home-hero h2 { font-size: 20px; margin: 0 0 4px; }
.home-hero p { color: var(--muted); font-size: 13.5px; margin: 0; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.menu-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px; padding: 24px 20px; cursor: pointer; box-shadow: var(--shadow); text-align: left; display: flex; flex-direction: column; gap: 10px; transition: transform .1s ease, border-color .1s ease; }
.menu-card:hover { transform: translateY(-2px); border-color: var(--series-1); }
.menu-card .emoji { font-size: 30px; }
.menu-card h3 { margin: 0; font-size: 18px; }
.menu-card p { margin: 0; color: var(--muted); font-size: 12.5px; }
.menu-card .kpis { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.menu-card .kpis div { font-size: 12px; color: var(--text-secondary); }
.menu-card .kpis strong { display: block; font-size: 16px; color: var(--text-primary); font-weight: 700; }
.menu-card.tacna .emoji, .menu-card.lima .emoji { }
.menu-card.tacna { border-top: 3px solid var(--series-2); }
.menu-card.lima { border-top: 3px solid var(--series-1); }
.menu-card.general { border-top: 3px solid var(--muted); }

/* ---------- Stat tiles ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat-tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.stat-tile .label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.stat-tile .value { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.stat-tile .value.good { color: var(--good); }
.stat-tile .value.critical { color: var(--critical); }

/* ---------- Controls / table ---------- */
.controls { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.search-input { flex: 1 1 220px; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 14px; }
.search-input:focus { outline: 2px solid var(--series-1); outline-offset: 1px; }
.select-input { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 13px; }
.row-count { font-size: 12px; color: var(--muted); margin: 6px 2px 10px; }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; margin-bottom: 18px; }
table.data-table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 12.5px; }
table.data-table th, table.data-table td { padding: 7px 7px; text-align: left; border-bottom: 1px solid var(--gridline); white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
table.data-table thead th { position: sticky; top: 0; background: var(--surface-1); cursor: pointer; user-select: none; font-weight: 700; color: var(--text-secondary); border-bottom: 1px solid var(--border-strong); }
table.data-table thead th:first-child, table.data-table tbody td:first-child { position: sticky; left: 0; background: var(--surface-1); z-index: 2; box-shadow: 1px 0 0 var(--border); }
table.data-table thead th .sort-arrow { font-size: 10px; color: var(--muted); margin-left: 4px; }
table.data-table tbody tr:hover td { background: var(--chip-bg); }
table.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.pagination button { border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination .page-info { font-size: 12.5px; color: var(--muted); }

/* ---------- Catalog ---------- */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.product-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.product-card .thumb { width: 100%; aspect-ratio: 1/1; background: var(--chip-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card .thumb .noimg { font-size: 11px; color: var(--muted); text-align: center; padding: 8px; }
.product-card .body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .name { font-size: 13px; font-weight: 700; line-height: 1.3; min-height: 2.6em; }
.product-card .price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.product-card .price-main { font-size: 16px; font-weight: 800; color: var(--series-1); }
.product-card .price-old { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.stock-badge { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.stock-badge.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.stock-badge.warning { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning-ink); }
.stock-badge.critical { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); }
.product-card .more-btn { margin-top: auto; border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); border-radius: 8px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
.product-card .sku { font-size: 11px; color: var(--muted); margin-top: -4px; }
.product-card .price-tiers { display: flex; flex-direction: column; gap: 2px; }
.price-tier { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.price-tier .tier-label { color: var(--muted); }
.price-tier .tier-value { font-weight: 700; }
.price-tier .tier-value.muted { font-weight: 600; color: var(--muted); text-decoration: line-through; }
.price-tier:first-child .tier-value { font-size: 16px; font-weight: 800; color: var(--series-1); }
.category-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: flex-end; justify-content: center; z-index: 100; }
.modal-backdrop.open { display: flex; }
.modal-sheet { background: var(--surface-1); color: var(--text-primary); width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 18px; }
@media (min-width: 640px) { .modal-backdrop { align-items: center; } .modal-sheet { border-radius: 16px; } }

/* ---------- Cuadro de confirmar / avisar (en vez de confirm/alert) ---------- */
.dialogo-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dialogo-card { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.18), var(--shadow); padding: 20px 18px 16px; width: 100%; max-width: 380px; }
.dialogo-msg { font-size: 14.5px; line-height: 1.5; white-space: pre-line; }
.dialogo-card .form-actions.apilado { flex-direction: column; }
.dialogo-card .form-actions.apilado button { flex: none; white-space: normal; line-height: 1.35; }
.dialogo-entrada { display: flex; gap: 8px; margin-top: 12px; }
.dialogo-entrada input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 14px; }
.dialogo-entrada button { flex: none; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--chip-bg); color: var(--text-primary); font-size: 13px; font-weight: 700; cursor: pointer; }
.dialogo-entrada button:hover { border-color: var(--series-1); color: var(--series-1); }
/* El codigo del producto se muestra, no se edita. */
.f-codigo-fijo { padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--border-strong); background: var(--chip-bg); color: var(--text-primary); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.f-codigo-nota { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* ---------- Inventario: tarjetas chicas, mas columnas ---------- */
.catalog-grid.compacta { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.catalog-grid.compacta .product-card { border-radius: 10px; }
.catalog-grid.compacta .thumb { aspect-ratio: 4 / 3; }
.catalog-grid.compacta .body { padding: 8px 9px 9px; gap: 4px; }
.catalog-grid.compacta .name { font-size: 12px; min-height: 0; }
.catalog-grid.compacta .sku { font-size: 10.5px; margin-top: -2px; }
.catalog-grid.compacta .price-tier { font-size: 11.5px; }
.catalog-grid.compacta .price-tier:first-child .tier-value { font-size: 14px; }
.catalog-grid.compacta .store-badge { font-size: 10px; padding: 2px 6px; }
.catalog-grid.compacta .card-actions button { padding: 4px 6px; font-size: 11px; }
.catalog-grid.compacta .add-card { min-height: 140px; font-size: 12px; }
.inv-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.category-pills .tab-chip small { font-weight: 600; opacity: .7; margin-left: 2px; }

/* ---------- Conteo de stock ---------- */
.ct-modos { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.ct-modo { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.ct-resultados { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
.ct-resultado { text-align: left; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; cursor: pointer; }
.ct-resultado:hover { border-color: var(--series-1); }
.ct-resultado span { color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.ct-elegidos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ct-elegidos .row-count { width: 100%; margin: 0 0 2px; }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; background: var(--chip-bg); border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 6px 4px 10px; }
.ct-chip button { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 4px; }
.ct-chip button:hover { color: var(--critical); }
.ct-scroll { max-height: 52vh; }
.ct-tabla td.ct-nombre { white-space: normal; min-width: 180px; }
/* La fila del conteo lleva la foto del producto en miniatura y un lapiz para editarlo (ponerle foto, sobre todo). */
.ct-nombre-fila { display: flex; align-items: center; gap: 8px; }
.ct-mini-foto { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--chip-bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ct-mini-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-sin-foto { font-size: 16px; opacity: .45; }
.ct-nombre-texto { flex: 1; min-width: 0; }
.ct-editar { flex-shrink: 0; margin-left: auto; min-width: 34px; min-height: 34px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--chip-bg); color: var(--text-primary); font-size: 15px; cursor: pointer; }
.ct-editar:hover { background: var(--series-1); color: #fff; border-color: transparent; }
.ct-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.ct-stepper button { width: 34px; height: 32px; border: none; background: var(--chip-bg); color: var(--text-primary); font-size: 18px; font-weight: 700; cursor: pointer; }
.ct-stepper button:hover { background: var(--series-1); color: #fff; }
.ct-stepper input { width: 54px; height: 32px; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--input-bg); color: var(--text-primary); text-align: center; font-size: 14px; font-weight: 700; -moz-appearance: textfield; }
.ct-stepper input::-webkit-outer-spin-button, .ct-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
tr.ct-cambiado td { background: color-mix(in srgb, var(--series-1) 10%, transparent); }
.ct-queda { font-weight: 800; }
.ct-queda.negativo { color: var(--critical); }
.ct-resumen { font-size: 13px; color: var(--text-secondary); margin-top: 10px; }
.ct-ahora-mini { display: none; }
}
.mq-mov-baja.sube { color: var(--good); }

/* ---------- Barra «instalar como app» ---------- */
.instalar-barra { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1200; display: flex; align-items: center; gap: 10px; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 14px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.25), var(--shadow); font-size: 13px; }
.instalar-icono { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; }
.instalar-texto { flex: 1; line-height: 1.4; }
.instalar-barra .btn-primary { padding: 8px 14px; white-space: nowrap; }
.instalar-luego { border: none; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 6px; }
@media (min-width: 640px) { .instalar-barra { left: auto; max-width: 460px; } }

/* ---------- Traslados y movimientos ---------- */
.ct-extra { margin-top: 12px; }
.ct-extra .btn-secondary { width: 100%; }
.tr-elegido { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 13.5px; }
.tr-elegido:empty { display: none; }
.tr-elegido span { color: var(--muted); font-size: 12.5px; }
.tr-elegido button { border: 1px solid var(--border-strong); background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; padding: 3px 8px; }
.tr-hist-titulo { margin: 18px 0 8px; font-size: 13.5px; }
.tr-fila { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tr-cant { flex: none; min-width: 44px; text-align: center; font-size: 15px; font-weight: 800; color: var(--series-1); }
.tr-medio { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-prod { font-size: 13px; font-weight: 700; }
.tr-pie { font-size: 11.5px; color: var(--muted); }

/* ---------- Historial de stock por dia ---------- */
.hs-dias { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; margin-bottom: 12px; }
.hs-dia { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.hs-dia span { font-size: 12px; color: var(--muted); }
.hs-dia:hover { border-color: var(--series-1); }
.hs-dia[aria-selected="true"] { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 10%, transparent); }
.hs-cabecera { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.hs-dif.sube { color: var(--good); font-weight: 700; }
.hs-dif.baja { color: var(--critical); font-weight: 700; }
.modal-sheet h3 { margin: 8px 0 4px; font-size: 17px; }
.modal-sheet img { width: 100%; border-radius: 10px; margin-bottom: 10px; background: var(--chip-bg); }
.modal-close { float: right; border: none; background: var(--chip-bg); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; }
.modal-price-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 10px 0; }
.modal-price-grid div { background: var(--chip-bg); border-radius: 8px; padding: 8px; }
.modal-price-grid .label { font-size: 11px; color: var(--muted); }
.modal-price-grid .value { font-size: 15px; font-weight: 700; }
.modal-sheet .desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.modal-sheet .links { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.modal-sheet .links a { font-size: 12.5px; border: 1px solid var(--border-strong); padding: 6px 10px; border-radius: 8px; text-decoration: none; }

/* ---------- Accordion ---------- */
.accordion-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--surface-1); }
.accordion-head { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 700; font-size: 14px; }
.accordion-head .chev { transition: transform .15s ease; color: var(--muted); }
.accordion-item.open .accordion-head .chev { transform: rotate(90deg); }
.accordion-body { display: none; padding: 0 14px 14px; }
.accordion-item.open .accordion-body { display: block; }

.empty-note { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- Ventas: inline add row ---------- */
/* No "hoy" color anywhere in the row — the only color-coded signal in this
   table is the small dot next to the ENVÍO select. */
table.data-table tbody tr.venta-edit-row td { background: var(--chip-bg); padding: 6px 8px; white-space: normal; }
table.data-table tbody tr.venta-edit-row td:first-child { background: var(--chip-bg); }
tr.venta-edit-row input, tr.venta-edit-row select { width: 100%; min-width: 70px; box-sizing: border-box; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 12.5px; }
tr.venta-edit-row input:disabled { opacity: 0.5; }
.row-actions { white-space: nowrap; }
.row-menu-btn { width: 28px; height: 26px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--chip-bg); color: var(--text-primary); font-size: 16px; line-height: 1; cursor: pointer; vertical-align: middle; padding: 0; }
.row-menu-btn:hover { border-color: var(--series-1); color: var(--series-1); }
.fila-menu { position: fixed; z-index: 1000; min-width: 190px; padding: 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-1); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.fila-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: none; border-radius: 8px; background: transparent; color: var(--text-primary); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.fila-menu button:hover, .fila-menu button:focus-visible { background: var(--chip-bg); outline: none; }
.fila-menu button.peligro { color: var(--critical); }
.fila-menu-icono { width: 20px; text-align: center; }
.table-scroll.arrastrando { cursor: grabbing; user-select: none; }
.table-scroll.arrastrando * { cursor: grabbing !important; }
/* ---------- Marcar varias ventas a la vez ---------- */
.row-check { width: 17px; height: 17px; margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--series-1); cursor: pointer; flex: none; }
table.data-table thead th:first-child { cursor: default; }
.sel-bar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100vw - 20px); padding: 9px 11px; border-radius: 14px;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18), var(--shadow);
}
.sel-bar[hidden] { display: none; }
.sel-bar .sel-count { font-size: 13px; font-weight: 800; white-space: nowrap; padding: 0 4px; }
.sel-bar button { padding: 8px 13px; font-size: 13px; }
.sel-bar .sel-del { color: var(--critical); border-color: var(--critical); }
.sel-bar .sel-close { background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 6px; }
.row-ok-btn, .row-cancel-btn, .edit-row-btn, .print-row-btn, .row-del-btn { border: none; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 13px; margin-right: 4px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; padding: 0; }
.row-actions svg, .btn-con-icono svg { width: 15px; height: 15px; flex: none; }
.btn-con-icono { display: inline-flex; align-items: center; gap: 6px; }
.row-ok-btn { background: var(--good); }
.row-cancel-btn { background: var(--critical); }
.edit-row-btn, .print-row-btn, .row-del-btn { background: var(--chip-bg); color: var(--text-primary); border: 1px solid var(--border-strong); }
.edit-row-btn:hover { background: var(--series-1); color: #fff; border-color: transparent; }
.print-row-btn:hover { background: var(--series-2); color: #fff; border-color: transparent; }
.row-del-btn:hover { background: var(--critical); color: #fff; border-color: transparent; }

/* ---------- Ventas: Shalom shipping-guide cell ---------- */
td.shalom-cell, td.envio-cell { white-space: normal; overflow: visible; max-width: none; padding: 5px 6px; }
.shalom-box { display: flex; align-items: center; gap: 5px; }
.shalom-thumb { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; display: block; cursor: pointer; background: var(--chip-bg); flex: none; }
.shalom-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--muted); border: 1px dashed var(--border-strong); box-sizing: border-box; }
.shalom-side { display: flex; flex-direction: column; gap: 3px; }
.shalom-code-input { width: 74px; padding: 3px 5px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 10.5px; }
.shalom-download-btn { border: 1px solid var(--border-strong); background: var(--chip-bg); color: var(--text-primary); border-radius: 5px; width: 22px; height: 19px; cursor: pointer; font-size: 10.5px; align-self: flex-start; line-height: 1; padding: 0; }
.shalom-download-btn:disabled { opacity: 0.35; cursor: default; }
.envio-box { display: flex; align-items: center; gap: 6px; }
.shalom-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1.5px var(--border-strong); flex: none; }
.shalom-dot.tienda { background: var(--muted); box-shadow: none; }
.shalom-dot.camino { background: var(--warning); box-shadow: none; }
.shalom-dot.recibido { background: var(--good); box-shadow: none; }
.envio-select { padding: 4px 5px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 11px; }
.modal-sheet.wide { max-width: 760px; }
.form-group select { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 14px; }
.btn-secondary { background: var(--chip-bg); color: var(--text-primary); border: 1px solid var(--border-strong); padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.btn-secondary:hover { border-color: var(--series-1); color: var(--series-1); }
.mps-subtitle { color: var(--text-secondary); font-size: 13px; margin: -6px 0 16px; }
.mps-section { border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; background: var(--chip-bg); }
.mps-section .form-group:last-child { margin-bottom: 0; }
.mps-section-title { margin: 0 0 12px; font-size: 13.5px; color: var(--text-primary); }
.mps-table th, .mps-table td { padding: 6px 8px; }
.mps-table input { width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 13.5px; }
.mps-col-num { width: 100px; }
.mps-col-del { width: 36px; }
.mps-section #mps-add-line { margin-top: 10px; }
.mps-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-strong); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.mps-total strong { font-size: 17px; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* --- Sugerencias con pista (la dirección de la oficina, bajo su nombre) --- */
.ac-hint { display: block; font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.35; }
.ac-item:hover .ac-hint, .ac-item.active .ac-hint { color: rgba(255,255,255,0.85); }

/* --- Elegir agencia de transporte --- */
.agencia-picker, .doc-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.agencia-chip, .doc-chip { border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; }
.agencia-chip:hover, .doc-chip:hover { border-color: var(--series-1); color: var(--series-1); }
.agencia-chip.selected, .doc-chip.selected { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.oficina-hint { font-weight: 500; color: var(--muted); text-transform: none; }
.envio-nota { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

/* --- Foto del producto dentro del formulario --- */
.vfoto-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-strong); }
.vfoto-btn { border: 1px dashed var(--border-strong); background: transparent; color: var(--text-secondary); padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; }
.vfoto-btn:hover { border-color: var(--series-1); color: var(--series-1); }
.vfoto-preview { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.vfoto-preview img { max-width: 160px; max-height: 160px; border-radius: 10px; border: 1px solid var(--border-strong); }
.vfoto-quitar { border: 1px solid var(--border-strong); background: var(--chip-bg); color: var(--text-primary); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px; flex-shrink: 0; }

/* --- Columna ⋯ y panel de detalle de la venta --- */
.detalle-cell { width: 40px; text-align: center; }
.detalle-btn { border: 1px solid var(--border-strong); background: var(--chip-bg); color: var(--text-primary); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; }
.detalle-btn:hover { border-color: var(--series-1); color: var(--series-1); }
.det-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; }
.det-label { font-size: 11.5px; color: var(--text-secondary); font-weight: 600; margin-bottom: 2px; }
.det-value { font-size: 14px; color: var(--text-primary); word-break: break-word; }
.det-foto { width: auto; max-width: 100%; max-height: 260px; border-radius: 10px; border: 1px solid var(--border-strong); margin-bottom: 12px; }
.det-nota { margin: 12px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.det-guia-acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
/* ---------- Pegar el pedido: el mensaje de WhatsApp, en crudo ---------- */
.pg-texto {
  width: 100%; box-sizing: border-box; min-height: 150px; resize: vertical;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--input-bg); color: var(--text-primary);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px; line-height: 1.5;
}
.pg-leido { margin-top: 12px; }
.pg-leido .form-group { margin-bottom: 10px; }
.pg-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .pg-dos { grid-template-columns: 1fr; } }
.pg-aviso { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--warning); }
.pg-nota { margin: 8px 0 0; font-size: 12px; color: var(--text-secondary); }
.pg-acciones { gap: 8px; margin-top: 16px; }

/* ---------- Una venta con varios productos ----------
   En la tabla, la venta que lleva varias lineas las muestra apiladas en su
   celda —tres renglones cortos— en vez de un texto largo cortado con puntos;
   la cantidad de al lado es la suma. En el pedido pegado, cada articulo es un
   bloque con su propio sello de Inventario. */
table.data-table td.td-productos { white-space: normal; max-width: 260px; line-height: 1.3; padding-top: 5px; padding-bottom: 5px; }
.td-producto-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-producto-cant { display: inline-block; min-width: 2em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.pg-items { display: flex; flex-direction: column; gap: 6px; }
.pg-item { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 2px; background: var(--surface-1); }
.pg-item .mq-prod-fila .row-del-btn { flex: none; width: auto; height: auto; padding: 0 10px; margin: 0; border-radius: 10px; }
.pg-agregar { width: 100%; margin: 2px 0 12px; }
.sel-bar .sel-fusion[hidden] { display: none; }
.mps-fecha-fila { margin-top: 14px; max-width: 240px; }
@media (max-width: 560px) {
  .sel-bar button { flex: 1 1 45%; }
  /* El producto es lo que hay que leer: los botones bajan a su propio renglon. */
  .pg-item .mq-prod-fila { flex-wrap: wrap; }
  .pg-item .mq-prod-fila input { flex: 1 1 100%; }
  .pg-item .mq-prod-fila button { flex: 1 1 auto; padding-top: 8px; padding-bottom: 8px; }
  table.data-table.mps-table { min-width: 0; }
  .mps-table input { font-size: 16px; }
}

.det-acciones { display: flex; justify-content: flex-end; margin-top: 18px; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.modal-actions .btn-primary { padding: 11px 24px; }
.shalom-lightbox-body { display: flex; gap: 14px; align-items: flex-start; }
.modal-sheet .shalom-lightbox-body img { width: auto; max-width: 60%; max-height: 65vh; margin-bottom: 0; }
.shalom-lightbox-info { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 140px; }
.shalom-lightbox-info div { background: var(--chip-bg); border-radius: 8px; padding: 10px; }
.shalom-lightbox-info .label { font-size: 11px; color: var(--muted); }
.shalom-lightbox-info .value { font-size: 15px; font-weight: 700; margin-top: 2px; }
@media (max-width: 560px) { .shalom-lightbox-body { flex-direction: column; } .modal-sheet .shalom-lightbox-body img { max-width: 100%; } }

/* ---------- Autocomplete ---------- */
.autocomplete-box {
  position: fixed;
  z-index: 300;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}
.ac-item { padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text-primary); }
.ac-item:hover, .ac-item.active { background: var(--series-1); color: #fff; }

/* ---------- Duplicate product alerts ---------- */
.dupe-banner { border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border-strong)); background: color-mix(in srgb, var(--warning) 10%, var(--surface-1)); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.dupe-banner-head { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.dupe-list { display: flex; flex-direction: column; gap: 10px; }
.dupe-item { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.dupe-names { font-size: 13.5px; }
.dupe-vs { color: var(--muted); margin: 0 6px; }
.dupe-reason { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dupe-actions { display: flex; gap: 8px; margin-top: 8px; }
.dupe-merge-btn, .dupe-dismiss-btn { border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.dupe-merge-btn { background: var(--series-1); color: #fff; border: none; }
.dupe-dismiss-btn { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }

/* ---------- Inventory manager ---------- */
.store-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.store-badge { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; }
.store-badge.lima { background: color-mix(in srgb, var(--series-1) 16%, transparent); color: var(--series-1); }
.store-badge.tacna { background: color-mix(in srgb, var(--series-2) 16%, transparent); color: var(--series-2); }
.store-badge.critical { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); }
.card-actions { display: flex; gap: 6px; margin-top: auto; }
.card-actions button { flex: 1; border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); border-radius: 8px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
.card-actions button.danger { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, var(--border-strong)); }
.add-card { border: 2px dashed var(--border-strong); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; min-height: 180px; color: var(--muted); background: transparent; font-size: 13px; }
.add-card .plus { font-size: 30px; line-height: 1; color: var(--series-1); }
.add-card:hover { border-color: var(--series-1); color: var(--text-primary); }

.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 600; }
.form-group input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row[hidden] { display: none; }
.photo-upload-row { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-upload-row input { flex: 1 1 auto; min-width: 0; }
.photo-upload-btn { flex: none; white-space: nowrap; cursor: pointer; font-weight: 700; }
.photo-upload-btn:disabled { opacity: .6; cursor: default; }
.foto-preview:empty { display: none; }
.foto-preview img { max-width: 100%; max-height: 160px; border-radius: 10px; margin-top: 8px; display: block; background: var(--chip-bg); object-fit: contain; }
.form-actions { display: flex; gap: 8px; margin-top: 16px; }
.form-actions button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border-strong); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.form-actions .primary { background: var(--series-1); color: #fff; border-color: transparent; }
.form-actions button:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--series-1); color: #fff; border: none; padding: 10px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.btn-primary:hover { opacity: .9; }
.form-actions .danger { background: transparent; color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, var(--border-strong)); }
.form-actions .ghost { background: transparent; color: var(--text-primary); }
footer.app-footer { text-align: center; color: var(--muted); font-size: 11.5px; padding: 24px 16px 8px; }

/* ---------- Compra modal ---------- */
.modal-subtitle { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.field-hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.radio-row { display: flex; gap: 16px; align-items: center; }
.radio-row label { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13.5px; cursor: pointer; }
.link-btn { border: none; background: transparent; color: var(--series-1); font-weight: 700; font-size: 13px; cursor: pointer; padding: 8px 0; }

/* ---------- Ingresar compra (cp-) y su historial (cph-) ---------- */
.cp-pasos { display: flex; gap: 6px; overflow-x: auto; margin: -4px 0 14px; padding-bottom: 2px; scrollbar-width: none; }
.cp-paso-flecha { align-self: center; color: var(--muted); font-size: 15px; font-weight: 700; flex-shrink: 0; }
.cp-pasos .tab-chip { padding: 5px 11px; font-size: 12px; cursor: default; }
.cp-pasos .tab-chip[data-hecho] { border-color: var(--series-1); color: var(--series-1); }
.cp-almacen-fijo { font-size: 14px; margin: 0 0 14px; }
.cp-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.cp-tipo button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 92px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1); color: var(--text-primary); text-align: left; cursor: pointer; }
.cp-tipo button:hover, .cp-tipo button[aria-selected="true"] { border-color: var(--series-1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--series-1) 25%, transparent); }
.cp-tipo-icono { font-size: 26px; }
.cp-tipo-titulo { font-size: 15px; font-weight: 800; }
.cp-tipo-sub { font-size: 12.5px; color: var(--muted); }
.cp-sin-resultado { display: flex; flex-direction: column; gap: 8px; padding: 10px; font-size: 13px; color: var(--text-secondary); }
.cp-tabla .cp-quitar { color: var(--muted); }
.cp-tabla .cp-quitar:hover { background: transparent; color: var(--critical); border-color: var(--critical); }
tr.cp-falta td.ct-queda, tr.cp-falta .ct-stepper { color: var(--critical); border-color: var(--critical); }
@keyframes cp-flash { from { background: color-mix(in srgb, var(--series-1) 28%, transparent); } to { background: transparent; } }
tr.cp-flash { animation: cp-flash .7s ease-out; }
.cp-pie { position: sticky; bottom: -18px; margin: 16px -18px -18px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); background: var(--surface-1); border-top: 1px solid var(--border); z-index: 2; }
.cp-prov-fila { display: flex; gap: 8px; }
.cp-prov-fila .select-input { flex: 1; min-width: 0; }
.cp-prov-fila .btn-secondary { flex: none; white-space: nowrap; }
.cp-prov-nuevo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cp-prov-nuevo input { flex: 1 1 160px; }
.cp-prov-nuevo[hidden], .cp-prov-panel[hidden], .ct-resultados[hidden] { display: none; }
.cp-prov-panel { margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.cp-prov-panel-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 13px; }
.cp-prov-panel-cab span { font-size: 12px; color: var(--muted); }
.cp-prov-row { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 0; border-top: 1px solid var(--border); }
.cp-prov-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; font-size: 13.5px; }
.cp-prov-nombre small { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.cp-prov-row button { min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--chip-bg); color: var(--text-primary); font-weight: 700; cursor: pointer; white-space: nowrap; }
.cp-prov-row .cp-prov-quitar:hover { color: var(--critical); border-color: var(--critical); }
.cp-prov-quitados summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 8px 0 4px; }
.cp-adj { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 10px; margin: -6px 0 14px; }
.cp-adj-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 13px; }
.cp-adj-cab span { font-size: 12px; color: var(--muted); }
.cp-adj .cp-adj-subir { width: 100%; min-height: 46px; }
.cp-adj .cp-adj-subir small { font-weight: 500; opacity: .75; }
.cp-adj-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cp-adj-lista:empty { display: none; }
.cp-adj-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; }
.cp-adj-item img, .cp-adj-pdf { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 34px; background: var(--chip-bg); }
.cp-adj-nombre { display: flex; flex-direction: column; align-items: center; width: 100%; font-size: 11px; text-align: center; overflow: hidden; }
.cp-adj-nombre small { color: var(--muted); }
.cp-adj-item span:first-child, .cp-adj-nombre { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.cp-adj-quitar { position: absolute; top: -8px; right: 0; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--surface-1); background: var(--critical); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; }
.cp-peso { font-size: 12.5px; color: var(--muted); margin: -6px 0 12px; }
.cp-resumen { background: var(--chip-bg); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; margin-bottom: 12px; }
.cp-resumen-grande { font-size: 17px; line-height: 1.35; }
.cp-resumen-grande strong { font-size: 19px; }
.cp-quien { font-size: 12.5px; color: var(--muted); }
.cp-aviso { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning-ink); font-size: 13px; font-weight: 600; }
.cp-nota-guardar { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.cp-nota-guardar:empty { display: none; }
.cph-filtros { margin-bottom: 10px; flex-wrap: wrap; }
.cph-lista { max-height: 260px; }
.cph-vista .cph-lista { max-height: 420px; }
.cp-anulada { text-decoration: line-through; color: var(--critical); }
.hs-dia.cp-anulada { opacity: .7; }
.cp-extra-arriba { margin: 0 0 12px; }
.cp-extra-arriba .btn-primary { width: 100%; }
.cp-det { border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.cp-det-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cp-det-datos > div { background: var(--chip-bg); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.cp-det-datos .label { font-size: 11px; color: var(--muted); }
.cp-det-datos .value { font-size: 14px; font-weight: 700; margin-top: 2px; word-break: break-word; }
.cp-det-anulada { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--critical) 12%, transparent); font-size: 13px; }
.cp-docs { margin-top: 12px; }
.cp-docs-titulo { margin: 0 0 8px; font-size: 14px; }
.cp-docs-orden { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.cp-docs-ranura { display: flex; flex-direction: column; gap: 8px; width: 128px; }
.cp-docs-ranura > strong { font-size: 12.5px; color: var(--text-secondary); min-height: 2.4em; }
.cp-docs-ranura.vacia { opacity: .55; }
.cp-doc-hueco { align-items: center; color: var(--muted); font-size: 12px; border-style: dashed; }
.cp-docs-titulo small { font-weight: 400; color: var(--muted); }
.cp-docs-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-doc { margin: 0; width: 128px; cursor: zoom-in; }
.cp-doc:hover .cp-doc-previa, .cp-doc:focus-visible .cp-doc-previa { border-color: var(--series-1); }
/* La previa es vertical, como una hoja A4: se ve la pagina entera, no un recorte. */
.cp-doc-previa { width: 128px; height: 181px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--chip-bg); display: flex; align-items: flex-start; justify-content: center; }
.cp-doc-previa img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cp-doc-previa .cp-visor-mini { width: 100%; }
.cp-doc-previa .cp-visor-mini canvas.cp-visor-pag { border: none; border-radius: 0; }
.cp-doc-previa .cp-visor-pie { display: none; }
.cp-doc figcaption { font-size: 11.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-visor canvas.cp-visor-pag { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.cp-visor-pie { font-size: 11.5px; color: var(--muted); text-align: center; margin: 4px 0 10px; }
/* Documento en grande: encima del cuadro, con barra arriba, y el cuerpo se desplaza (y en el celular se acerca con los dedos). */
.cp-lightbox { position: fixed; inset: 0; z-index: 1050; background: rgba(0, 0, 0, .88); display: flex; flex-direction: column; }
.cp-lightbox-barra { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; background: rgba(0, 0, 0, .5); }
.cp-lightbox-nombre { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-lightbox-peso { font-size: 12px; opacity: .7; }
.cp-lightbox-cerrar { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px; cursor: pointer; }
.cp-lightbox-cuerpo { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; align-items: center; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.cp-lightbox-cuerpo.con-zoom { align-items: flex-start; }
.cp-lightbox-contenido { flex-shrink: 0; }
.cp-lightbox-contenido img { width: 100%; height: auto; border-radius: 6px; display: block; }
.cp-zoom { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; overflow: hidden; }
.cp-zoom button { border: none; background: transparent; color: #fff; min-width: 40px; height: 36px; font-size: 20px; font-weight: 700; cursor: pointer; }
.cp-zoom button:hover { background: rgba(255, 255, 255, .15); }
.cp-zoom .cp-zoom-nivel { font-size: 12.5px; font-weight: 600; min-width: 56px; border-left: 1px solid rgba(255, 255, 255, .25); border-right: 1px solid rgba(255, 255, 255, .25); }
@media (max-width: 560px) { .cp-lightbox-peso { display: none; } .cp-zoom button { min-width: 44px; height: 40px; } }
.cp-visor-grande { width: 100%; }
.cp-visor-grande .cp-visor-pie { color: rgba(255, 255, 255, .7); }

/* ---------- Dashboard / charts ---------- */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 640px) { .dashboard-grid { grid-template-columns: 1fr; } }
.chart-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.chart-card h3 { margin: 0 0 10px; font-size: 14px; }
/* Cabecera de una grafica con filtro: manda el titulo y los chips se van
   al otro extremo, pero en el celular bajan a su propia linea en vez de
   apretar el titulo hasta partirlo. */
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.chart-head h3 { margin: 0; }
.chart-filtros { display: flex; gap: 6px; }
.chart-filtros .tab-chip { padding: 5px 11px; font-size: 12px; }
/* Los dos segmentadores van en su propia linea, debajo del titulo: son
   desplegables largos (el nombre del tipo y su cuenta) y al lado de los
   chips no cabrian sin encogerse hasta no poder leerse. */
.chart-segmentos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chart-segmentos .select-input { flex: 1 1 180px; max-width: 260px; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gridline { stroke: var(--gridline); stroke-width: 1; }
.baseline { stroke: var(--border-strong); stroke-width: 1; }
.axis-label { fill: var(--muted); font-size: 9px; }
.bar-mark { transition: opacity .1s ease; cursor: pointer; }
.bar-mark:hover { opacity: .85; }
.bar-value { fill: var(--text-primary); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-value-h { fill: var(--text-secondary); font-size: 10.5px; font-variant-numeric: tabular-nums; }
/* Cuando una fila lleva dos barras (Lima y Tacna), sus cifras van mas
   chicas para que no se pisen entre si. */
.bar-value-h.mini { font-size: 9px; }
.rank-label { fill: var(--text-primary); font-size: 10.5px; }
.line-mark { stroke-width: 2; fill: none; }
.line-dot { stroke: var(--surface-1); stroke-width: 2; cursor: pointer; }
.line-end-label { font-size: 10.5px; font-weight: 700; }
.chart-legend { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.legend-item { font-size: 12px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.legend-item .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-tooltip { position: fixed; display: none; background: var(--text-primary); color: var(--page); font-size: 12px; padding: 6px 10px; border-radius: 8px; pointer-events: none; z-index: 200; line-height: 1.4; box-shadow: var(--shadow); max-width: 220px; }

@media (max-width: 560px) {
  .app-title h1 { font-size: 16px; }
  .sucursal-nombre { font-size: 17px; }
  table.data-table { font-size: 12px; }
  table.data-table th, table.data-table td { padding: 6px 6px; max-width: 140px; }
}


/* ========================== Maquina automatica ============================
   Tres columnas que se leen de izquierda a derecha como los tres pasos: el
   mensaje pegado, lo que se entendio de el, y la etiqueta tal cual va a
   salir. En movil se apilan en ese mismo orden. La previa es la etiqueta de
   verdad —210 mm de ancho— encogida con transform desde app.js, por eso su
   caja recorta lo que sobra y no impone medidas. */
.mq-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.mq-col { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.mq-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.mq-col-head h3 { margin: 0; font-size: 14px; }
.mq-link { background: none; border: none; padding: 0; color: var(--series-1); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mq-link:hover { text-decoration: underline; }

#mq-texto {
  width: 100%; min-height: 420px; resize: vertical;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--input-bg); color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55;
}
.mq-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.mq-conteo { font-size: 12px; color: var(--muted); }
.mq-conteo.aviso { color: var(--warning-ink); font-weight: 700; }

.mq-pedidos { display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow-y: auto; }
.mq-pedido { flex: none; border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px; background: var(--chip-bg); }
.mq-pedido-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mq-pedido .form-group { margin-bottom: 8px; }
.mq-pedido .form-group:last-child { margin-bottom: 0; }
.mq-pedido .form-group label { font-size: 11.5px; margin-bottom: 3px; }
.mq-pedido input { font-size: 13px; padding: 7px 10px; }
.mq-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mq-chk input { width: 16px; height: 16px; accent-color: var(--series-1); }

.mq-insignia { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--surface-1); color: var(--muted); border: 1px solid var(--border); }
.mq-insignia.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, var(--border)); }
.mq-insignia.guardada { color: var(--series-1); border-color: color-mix(in srgb, var(--series-1) 35%, var(--border)); }
.mq-insignia.falta { color: var(--warning-ink); background: color-mix(in srgb, var(--warning) 14%, var(--surface-1)); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }

/* La previa es el papel: una hoja A4 por bloque, con sus dos mitades y la
   raya del corte en medio. La etiqueta se dibuja a 210 mm y la hoja entera se
   encoge con transform, que no toca ninguna medida. */
.mq-previa { display: flex; flex-direction: column; gap: 16px; max-height: 560px; overflow-y: auto; }
.mq-papel-grupo { flex: none; }
.mq-papel-rotulo { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.mq-papel { position: relative; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.mq-hoja { width: 210mm; transform-origin: 0 0; }
.mq-mitad { cursor: pointer; }
.mq-mitad:last-child .etq-hoja { border-bottom: none; }
.mq-vacia { height: 148.5mm; box-sizing: border-box; padding: 5mm; cursor: default; }
.mq-vacia-marco { height: 100%; border: 5px dashed #d8d8d2; border-radius: 4mm; }
.mq-otra { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); z-index: 2; white-space: nowrap; }
.mq-otra-nota { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 2; font-size: 11px; color: #8a8a84; white-space: nowrap; }
/* El cotejo con el Inventario: la sugerencia se ofrece, y el visto verde solo
   aparece cuando el nombre ya es el del Inventario. */
.mq-prod-fila { display: flex; gap: 6px; align-items: stretch; }
.mq-prod-fila input { flex: 1; min-width: 0; }
.mq-buscar { flex: none; font-size: 12px; font-weight: 700; padding: 0 12px; border-radius: 10px; cursor: pointer;
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-strong); white-space: nowrap; }
.mq-buscar:hover { border-color: var(--series-1); color: var(--series-1); }
/* Dar de alta lo que no existe, sin salir del detector. */
.mq-alta { flex: none; font-size: 12px; font-weight: 700; padding: 0 12px; border-radius: 10px; cursor: pointer;
  background: var(--chip-bg); color: var(--good); border: 1px dashed var(--good); white-space: nowrap; }
.mq-alta:hover { border-style: solid; }
.binv-lista { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; margin-top: 10px; }
.binv-item { display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 10px; cursor: pointer; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text-primary); }
.binv-item:hover { border-color: var(--good); }
.binv-nombre { font-size: 13px; font-weight: 700; }
.binv-datos { font-size: 11.5px; color: var(--muted); }
.mq-nocheck { color: var(--critical); font-weight: 800; font-size: 11px; margin-left: 6px; }
.mq-aviso-inv { margin: 8px 0 0; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--critical); }
.mq-check { color: var(--good); font-weight: 800; font-size: 11px; margin-left: 6px; }
.mq-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; }
.mq-sug > span { font-size: 11.5px; color: var(--muted); }
.mq-sug-btn { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; cursor: pointer;
  background: var(--surface-1); color: var(--text-primary); border: 1px dashed var(--border-strong); }
.mq-sug-btn:hover { border-style: solid; border-color: var(--good); color: var(--good); }

.mq-logo-opt { margin-right: 2px; }
.mq-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.mq-acciones button { flex: 1 1 auto; }
.mq-tienda { width: 100%; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.mq-tienda select { flex: 1; }
/* Paso 4: lo que la venta se llevó del almacén. Un renglón por producto, la
   baja delante y lo que quedó detrás, porque el que despacha necesita ver que
   el stock se movió —y cuánto queda— sin salir de la Máquina. En rojo el que
   se pasó de cero, que es el que hay que ir a contar. */
.mq-movs-col { margin-top: 14px; }
.mq-movs { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.mq-mov { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; background: var(--chip-bg); border: 1px solid var(--border); }
.mq-mov-baja { flex: none; min-width: 44px; text-align: center; font-size: 13.5px; font-weight: 800;
  color: var(--critical); font-variant-numeric: tabular-nums; }
.mq-mov-medio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mq-mov-prod { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-mov-pie { font-size: 11px; color: var(--muted); }
.mq-mov-queda { flex: none; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--text-secondary); }
.mq-mov-queda.cero { color: var(--warning-ink); }
.mq-mov-queda.negativo { color: var(--critical); }
.mq-mov-queda.sin { color: var(--muted); font-weight: 600; }

.btn-primary:disabled, .btn-secondary:disabled { opacity: .45; cursor: default; }
.btn-secondary:disabled:hover { border-color: var(--border-strong); color: var(--text-primary); }

@media (max-width: 1080px) {
  .mq-grid { grid-template-columns: 1fr; }
  #mq-texto { min-height: 240px; }
  .mq-pedidos, .mq-previa { max-height: none; }
}

/* ===================== Etiqueta imprimible (media A4) =====================
   Media hoja A4 echada (210 x 148,5 mm) con su recuadro: se corta por la
   linea de puntos y se pega en el paquete. Todo va apretado —sin rotulos,
   sin nombre de agencia y sin huecos— porque lo que tiene que verse desde
   lejos es la oficina de destino, que se dibuja tan grande como quepa
   (ajustarEtiqueta en app.js). Fuera de la impresion la etiqueta se aparca
   fuera de pantalla, no en display:none: escondida del todo no se puede
   medir el texto para dimensionarlo. */
#etiqueta-print { position: fixed; left: -10000px; top: 0; width: 210mm; z-index: -1; }
@page { size: A4 portrait; margin: 0; }

.etq-pagina { height: 297mm; overflow: hidden; break-after: page; page-break-after: always; }
.etq-pagina:last-child { break-after: auto; page-break-after: auto; }
.etq-hoja {
  width: 210mm; height: 148.5mm; box-sizing: border-box; overflow: hidden;
  padding: 5mm; background: #fff; border-bottom: 1px dashed #999;
}
.etiqueta {
  width: 100%; height: 100%; box-sizing: border-box;
  border: 2.5pt solid #000; padding: 4mm 6mm 5mm;
  background: #fff; color: #000; display: flex; flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Alto y ancho escritos los dos: si se dejara «auto» el navegador mediria la
   etiqueta antes de descifrar la imagen, y el ajuste del destino se haria con
   un logo de cero pixeles de alto. */
.etq-logo { align-self: center; width: 46mm; height: 15.8mm; margin: 0 0 2mm; }
.etq-codigo { align-self: flex-end; font-size: 12pt; font-weight: 700; letter-spacing: -0.2pt; line-height: 1; }
.etq-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 1mm; }
.etq-destino { font-size: 52pt; font-weight: 800; line-height: 0.9; letter-spacing: -1.6pt; text-transform: uppercase; }
.etq-agencia { font-size: 24pt; font-weight: 800; line-height: 1.05; letter-spacing: -0.5pt; margin-top: 2mm; }
.etq-region { font-size: 15pt; font-weight: 600; line-height: 1.05; letter-spacing: -0.3pt; margin-top: 1mm; }
.etq-persona { border-top: 2pt solid #000; padding-top: 2.5mm; }
.etq-nombre { font-size: 36pt; font-weight: 700; line-height: 1; letter-spacing: -0.9pt; }
.etq-pie { display: flex; justify-content: space-between; gap: 8mm; margin-top: 2mm; }
.etq-dato { font-size: 30pt; font-weight: 700; letter-spacing: -0.5pt; line-height: 1; white-space: nowrap; }
.etq-clave { font-size: 0.62em; letter-spacing: 0; margin-right: 0.28em; }
.etq-producto { font-size: 9pt; font-weight: 600; line-height: 1.15; letter-spacing: 0; margin-top: 2.5mm; color: #333; }

@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body > *:not(#etiqueta-print) { display: none !important; }
  #etiqueta-print { position: static !important; left: auto !important; top: auto !important; width: auto !important; z-index: auto !important; }
}

/* ---------- En el celular, todo mas grande: se toca con el dedo ---------- */
@media (max-width: 560px) {
  body { font-size: 15px; }
  .btn-primary, .btn-secondary { padding: 12px 16px; font-size: 15px; border-radius: 12px; }
  .select-input, .search-input, .form-group input, .form-group select, .login-card input, .dialogo-entrada input { font-size: 16px; padding: 12px 12px; min-height: 46px; }
  .tab-chip { padding: 10px 16px; font-size: 14.5px; }
  .icon-btn, .back-btn { width: 42px; height: 42px; font-size: 18px; }
  .form-actions button { padding: 13px; font-size: 15px; }
  .form-group label { font-size: 13.5px; }
  .quick-nav-btn { padding: 14px 8px; font-size: 13.5px; }
  .row-actions button { min-width: 38px; min-height: 38px; font-size: 16px; }
  table.data-table th, table.data-table td { padding: 10px 9px; font-size: 13.5px; }
  .catalog-grid.compacta { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .catalog-grid.compacta .name { font-size: 13.5px; }
  .catalog-grid.compacta .sku { font-size: 11.5px; }
  .catalog-grid.compacta .price-tier { font-size: 13px; }
  .catalog-grid.compacta .price-tier:first-child .tier-value { font-size: 16px; }
  .catalog-grid.compacta .store-badge { font-size: 11.5px; padding: 4px 8px; }
  .catalog-grid.compacta .card-actions button, .card-actions button { padding: 10px 8px; font-size: 13.5px; }
  .dupe-merge-btn, .dupe-dismiss-btn { padding: 10px 14px; font-size: 13.5px; }
  .dialogo-msg { font-size: 15.5px; }
  .ct-modo { font-size: 15px; }
  .ct-modo input { width: 20px; height: 20px; }
  .ct-resultado { padding: 11px 12px; font-size: 14px; }
  .ct-chip { font-size: 13.5px; padding: 7px 8px 7px 12px; }
  .hs-dia { padding: 12px 14px; font-size: 14px; }
  /* la fila del conteo se apila: nombre arriba; abajo «ahora», el mas/menos y «queda» */
  .ct-tabla thead { display: none; }
  table.ct-tabla, .ct-tabla tbody { display: block; width: 100%; min-width: 0; }
  .ct-scroll { overflow-x: hidden; }
  .ct-tabla tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 8px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
  .ct-tabla tr td { display: block; border: none; padding: 2px 0; max-width: none; white-space: normal; position: static; box-shadow: none; }
  .ct-tabla tr td.ct-nombre { grid-column: 1 / -1; font-size: 14.5px; font-weight: 700; min-width: 0; }
  .ct-tabla tr td.ct-codigo { display: none; }
  .ct-ahora-mini { display: none; }
  .ct-tabla tr td.ct-ahora { text-align: left; font-size: 13.5px; color: var(--muted); }
  .ct-tabla tr td.ct-ahora::before { content: 'ahora '; }
  .ct-tabla tr td.ct-queda { text-align: right; font-size: 17px; }
  .ct-tabla tr td.ct-queda::before { content: 'queda '; font-size: 12.5px; font-weight: 400; color: var(--muted); }
  .ct-stepper { justify-self: center; }
  .ct-stepper button { width: 48px; height: 46px; font-size: 24px; }
  .ct-stepper input { width: 64px; height: 46px; font-size: 19px; }
  .ct-mini-foto { width: 54px; height: 54px; }
  .ct-editar { min-width: 44px; min-height: 44px; font-size: 18px; }
  /* Ingresar compra en el celular: tarjetas y botones grandes, la fila del producto apilada como en el conteo */
  .cp-tipo { grid-template-columns: 1fr; }
  .cp-almacen .tab-chip, .cph-filtros .tab-chip { min-height: 44px; padding: 10px 16px; font-size: 14.5px; }
  .cp-tipo button { min-height: 80px; }
  .cp-pie button { min-height: 48px; font-size: 16px; }
  .cp-hoja input, .cp-hoja select { font-size: 16px; }
  .inv-acciones #inv-compra { flex: 1 0 100%; min-height: 48px; font-size: 16px; }
  .cp-prov-fila { flex-wrap: wrap; }
  .cp-prov-fila .btn-secondary { flex: 1; }
  .cp-adj-item { width: 84px; }
  .cp-docs-ranura, .cp-doc { width: calc(50% - 6px); }
  .cp-doc-previa { width: 100%; height: auto; aspect-ratio: 1 / 1.414; }
  .cp-adj-item img, .cp-adj-pdf { width: 72px; height: 72px; }
  tr.ct-cambiado { background: color-mix(in srgb, var(--series-1) 10%, transparent); border-radius: 8px; }
  tr.ct-cambiado td { background: transparent; }
}

/* ============ Ventas mas compactas + fila verde si guardo la guia de Shalom ============ */
table.data-table th, table.data-table td { padding: 3px 5px; font-size: 12px; line-height: 1.25; max-width: 150px; border-right: 1px solid var(--gridline); }
table.data-table th:last-child, table.data-table td:last-child { border-right: none; }
table.data-table thead th { border-right-color: var(--border-strong); }
.row-actions button { min-width: 24px; min-height: 24px; padding: 2px; font-size: 13px; }
.row-actions svg { width: 13px; height: 13px; }
.row-check { width: 15px; height: 15px; margin: 0 4px 0 0; }
td.shalom-cell, td.envio-cell { padding: 3px 6px; }
.shalom-thumb { width: 24px; height: 24px; }
td.envio-cell select, .envio-box select { padding: 2px 4px; font-size: 11px; }
/* Una venta con su guia de Shalom guardada (foto o codigo) se pinta verde entera. */
table.data-table tbody tr.row-guia td { background: color-mix(in srgb, var(--good, #0FA958) 16%, transparent); }
table.data-table tbody tr.row-guia:hover td { background: color-mix(in srgb, var(--good, #0FA958) 26%, transparent); }
table.data-table tbody tr.row-guia td:first-child { background: color-mix(in srgb, var(--good, #0FA958) 16%, var(--surface-1)); }

/* La tabla de lineas del detalle: la fila 750 le ganaba a .det-lineas por
   especificidad, y el nombre del producto se cortaba con puntos en el celular
   sin sitio donde leerlo entero. */
table.data-table.det-lineas { min-width: 0; margin-bottom: 0; }
table.data-table.det-lineas th, table.data-table.det-lineas td { padding: 6px 8px; font-size: 13px; }
table.data-table.det-lineas td:first-child { white-space: normal; max-width: none; overflow: visible; text-overflow: clip; }

/* Historial de stock por dia: de fabrica solo los productos que se movieron. */
.hs-controles { align-items: center; }
.hs-solo-mov { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.hs-solo-mov input { width: 16px; height: 16px; accent-color: var(--series-1); }
table.data-table td.hs-cuando { white-space: normal; max-width: 320px; line-height: 1.35; padding-top: 5px; padding-bottom: 5px; }
.hs-mov { white-space: nowrap; font-size: 11.5px; color: var(--text-secondary); }
.hs-mov-hora { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary); }
.hs-mov-nada { color: var(--muted); }

/* Franjas de estado: sin conexión con la base, o versión nueva por tomar. */
.franja-estado { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
.franja-estado.sin-conexion { background: var(--critical); color: #fff; }
.franja-estado.version { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }
.franja-estado button { border: 0; border-radius: 8px; padding: 7px 12px; font-weight: 700; cursor: pointer; background: var(--series-1); color: #fff; white-space: nowrap; }
.cp-clave { margin: -4px 0 14px; }
.cp-clave label { letter-spacing: .04em; }

/* Boleta o factura de la venta, en el detalle */
.det-opcional { font-weight: 400; color: var(--muted); font-size: 12px; }
.det-comprobante { margin: 0; }
.det-comprobante .det-guia-acciones { margin-top: 10px; }
.cp-doc-archivo { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 38px; gap: 4px; }
.cp-doc-archivo small { font-size: 12px; font-weight: 700; color: var(--muted); }
.clip-boleta { font-size: 11px; margin-left: 2px; }

/* Comprobante de pago en la fila de Ventas */
.td-pago { white-space: nowrap; max-width: 210px; }
.pago-subir, .pago-ver, .pago-menu { border: 1px solid var(--border-strong); background: var(--chip-bg); color: var(--text-primary); border-radius: 7px; height: 26px; padding: 0 8px; font-size: 12px; font-weight: 600; cursor: pointer; vertical-align: middle; }
.pago-subir:hover, .pago-ver:hover, .pago-menu:hover { border-color: var(--series-1); color: var(--series-1); }
.pago-ver { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pago-ver span { font-weight: 500; }
.pago-menu { width: 26px; padding: 0; margin-left: 3px; font-size: 14px; }
.pago-guardando { font-size: 12px; color: var(--muted); }
.det-adj-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.det-adj-botones .cp-adj-subir { flex: 1; width: auto; }
@media (max-width: 560px) { .pago-subir, .pago-ver, .pago-menu { height: 38px; font-size: 13.5px; } .pago-menu { width: 38px; } }
.td-medio-pago { white-space: nowrap; }
.medio-pago-select { min-width: 110px; }
@media (max-width: 560px) { .medio-pago-select { min-height: 38px; font-size: 13.5px; } }

/* Costo unitario en la compra (solo admin) */
.cp-costo label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cp-costo input { width: 92px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-size: 13px; font-weight: 700; text-align: right; }
@media (max-width: 560px) {
  .cp-tabla tr td.cp-costo { grid-column: 1 / -1; padding-top: 6px; }
  .cp-costo label { font-size: 13.5px; }
  .cp-costo input { flex: 1; max-width: 160px; min-height: 40px; font-size: 15px; }
}

.cp-nota-codigo { margin: 0 0 12px; }
.cph-anular-fila { display: flex; justify-content: flex-end; margin-top: 14px; }
.cph-anular { border: none; background: transparent; color: var(--muted); border-radius: 6px; padding: 2px 6px; font-size: 10.5px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cph-anular:hover { color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); }

/* Moneda e IGV en la compra */
.cp-costo-opciones { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--chip-bg); }
.cp-opcion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cp-opcion-titulo { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.cp-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface-1); }
.cp-switch button { border: none; background: transparent; color: var(--text-secondary); padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.cp-switch button[aria-pressed="true"] { background: var(--series-1); color: #fff; }
.cp-tc { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.cp-tc[hidden] { display: none; }
.cp-tc input { width: 78px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text-primary); font-weight: 700; text-align: right; }
.cp-costo-simbolo { font-weight: 700; color: var(--text-primary); }
.cp-costo-calc { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); white-space: normal; }
.cp-costo-calc:empty { display: none; }
@media (max-width: 560px) { .cp-switch button { padding: 10px 14px; font-size: 14px; } .cp-tc input { min-height: 40px; font-size: 15px; } .cp-costo-calc { font-size: 12px; } }

/* De dónde salió el tipo de cambio */
.cp-tc { flex-wrap: wrap; }
.cp-tc-fuente { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--muted); }
.cp-tc-fuente.sunat { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.cp-tc-fuente.sunat strong { letter-spacing: .04em; }
.cp-tc-fuente.manual { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning-ink); }
.cp-tc-fuente.error { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); }
.cp-tc-actualizar { border: 1px solid var(--border-strong); background: var(--chip-bg); color: var(--text-primary); border-radius: 50%; width: 28px; height: 28px; font-size: 15px; cursor: pointer; }
.cp-tc-actualizar:hover { border-color: var(--series-1); color: var(--series-1); }

/* Rankings de ventas y de antiguedad */
.chart-filtros-grupo { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-end; }
.chart-head h3 small { font-weight: 500; color: var(--muted); font-size: 12px; }
.chart-nota { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
.chart-mas { margin-top: 8px; font-size: 12.5px; }
.chart-mas summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; }
.chart-mas ul { margin: 8px 0 0; padding-left: 18px; columns: 2; column-gap: 24px; }
.chart-mas li { margin-bottom: 3px; break-inside: avoid; }
.chart-mas li span { color: var(--muted); font-size: 11.5px; }
@media (max-width: 560px) { .chart-mas ul { columns: 1; } }

/* Documentos que faltan: punto rojo que parpadea. Editar compras. */
@keyframes punto-falta { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.punto-falta { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--critical); box-shadow: 0 0 0 2px color-mix(in srgb, var(--critical) 30%, transparent); margin-right: 6px; vertical-align: middle; animation: punto-falta 1s ease-in-out infinite; }
.cp-doc-hueco .punto-falta { margin: 0 0 6px; }
.cp-doc-hueco { flex-direction: column; color: var(--critical); }
.cp-docs-ranura.vacia:has(.punto-falta) { opacity: 1; }
.hs-dia { position: relative; }
.hs-editar { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--chip-bg); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transition: opacity .15s; }
.hs-dia:hover .hs-editar, .hs-dia:focus-visible .hs-editar { opacity: 1; }
.hs-editar:hover { border-color: var(--series-1); color: var(--series-1); }
@media (hover: none) { .hs-editar { opacity: 1; } }
.cp-det-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cp-det-editar { padding: 5px 10px; font-size: 12.5px; }
.cp-editando { font-size: 12.5px; color: var(--muted); margin: -4px 0 6px; }
.cp-det-ediciones { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--chip-bg); font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.cp-det-ediciones strong { font-size: 12px; color: var(--text-secondary); }

/* Los rankings llevan nombre grande, como pidió Williams: EXISTENCIAS, MÁS VENDIDOS, PARA LIQUIDAR, UTILIDADES */
.chart-card h3.grande { font-size: 20px; font-weight: 900; letter-spacing: .05em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.chart-card h3.grande small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
@media (max-width: 560px) { .chart-card h3.grande { font-size: 17px; } }