/* ============================================================
   VINO-TEMPO · DESIGN SYSTEM (app.css)
   Traducido del bundle oficial de diseno (diseno/mockup.html).
   Referencias: Linear, Stripe, Vercel, Notion. Acento vino sutil.
============================================================ */
:root {
  --c-bg:#fafaf9; --c-surface:#fff; --c-surface-2:#f7f6f4; --c-surface-3:#f1efeb;
  --c-border:#e8e6e1; --c-border-2:#dcd9d3; --c-divider:#efedea;
  --c-text:#1a1816; --c-text-2:#4b4842; --c-text-3:#807c75; --c-text-4:#a6a29a;
  --c-wine:#7a1f2b; --c-wine-hover:#6a1923; --c-wine-press:#5a141d;
  --c-wine-soft:#fbeef0; --c-wine-soft-2:#f5dde1; --c-wine-text:#5a141d;
  --c-success:#1f7a4d; --c-success-soft:#e6f4ec; --c-success-line:#b9dec8;
  --c-warning:#a35a00; --c-warning-soft:#fbf1e0; --c-warning-line:#f1d9a8;
  --c-danger:#b3261e;  --c-danger-soft:#fbe9e7;  --c-danger-line:#f1c2bd;
  --c-info:#1f5fae;    --c-info-soft:#e6effb;    --c-info-line:#b9d0ed;
  --c-gold:#8a6a18;    --c-gold-soft:#f7efd9;    --c-gold-line:#e3d29a; --c-gold-bg:#fdf8e8;
  --f-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fz-caps:11px; --fz-meta:12.5px; --fz-table:13.5px; --fz-body:14px;
  --fz-h3:16px; --fz-h2:18px; --fz-h1:22px;
  --r-chip:6px; --r-ctrl:8px; --r-mid:10px; --r-card:14px;
  /* Escala de espaciado (padding/margin/gap). Valores exactos del diseno, sin drift. */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px; --sp-6:14px; --sp-7:16px;
  --sh-base:0 1px 2px rgba(15,15,14,.04);
  --sh-up:0 1px 3px rgba(15,15,14,.06),0 0 0 1px rgba(15,15,14,.02);
  --sh-pop:0 6px 20px rgba(15,15,14,.08),0 1px 3px rgba(15,15,14,.06);
  --side-w:240px; --top-h:60px; --pad:28px; --maxw:1400px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family:var(--f-sans); font-size:var(--fz-body); color:var(--c-text);
  background:var(--c-bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; }
.caps { font-size:var(--fz-caps); letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-3); font-weight:600; }
.meta { font-size: var(--fz-meta); color: var(--c-text-3); }
h1,h2,h3,h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--fz-h1); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--fz-h2); } h3 { font-size: var(--fz-h3); }

/* ---- App shell ---- */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
.sidebar { background:var(--c-surface-2); border-right:1px solid var(--c-border);
  display:flex; flex-direction:column; height:100vh; position:sticky; top:0; }
.brand { display:flex; align-items:center; gap: 11px; padding: 16px var(--sp-6); border-bottom:1px solid var(--c-border); min-height:var(--top-h); }
.brand-mark { width:30px; height:30px; border-radius:9px; background:var(--c-wine);
  display:grid; place-items:center; color:#fff; flex:0 0 30px; cursor:pointer;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18),0 1px 2px rgba(122,31,43,.35); transition:transform 150ms ease; }
.brand-mark svg { width:18px; height:18px; }
.brand-mark.has-logo { width:36px; height:36px; flex:0 0 36px; border-radius:9px; background:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.18); padding:0; overflow:hidden; }
.brand-mark.has-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.app.collapsed .brand-mark.has-logo { width:40px; height:40px; flex:0 0 40px; }
.brand-name { font-weight:600; font-size:16px; letter-spacing:-.01em; white-space:nowrap; }
.brand-name .dot { color: var(--c-wine); padding: 0 1px; }
.collapse-btn { margin-left:auto; width:28px; height:28px; border-radius:7px; border:1px solid transparent;
  background:transparent; color:var(--c-text-3); display:grid; place-items:center; cursor:pointer; flex:0 0 28px;
  transition:background 150ms ease, color 150ms ease; }
.collapse-btn:hover { background: var(--c-surface-3); color: var(--c-text); }
.collapse-btn svg { width: 17px; height: 17px; }
.login-logo { width: 180px; max-width: 80%; height: auto; display: block; }
.nav { padding: var(--sp-4) var(--sp-3); flex: 1; overflow-y: auto; }
.nav-section { margin-top: var(--sp-6); } .nav-section:first-child { margin-top: var(--sp-1); }
.nav-label { font-size:var(--fz-caps); letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-4); padding: var(--sp-2) var(--sp-4); font-weight:600; }
.nav-link { display:flex; align-items:center; gap: var(--sp-4); padding: 7px var(--sp-4); border-radius:var(--r-ctrl);
  color:var(--c-text-2); cursor:pointer; font-size:var(--fz-body); font-weight:500;
  transition:background 150ms ease, color 150ms ease; position:relative; }
.nav-link:hover { background: var(--c-surface-3); color: var(--c-text); }
.nav-link.active { background:#fff; color:var(--c-text); box-shadow:var(--sh-base); font-weight:600; }
.nav-link.active::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--c-wine); }
.nav-link svg { width:18px; height:18px; flex:0 0 18px; color:var(--c-text-3); }
.nav-link.active svg { color: var(--c-wine); }
.nav-link .count { margin-left: auto; font-size:11px; padding: 2px var(--sp-2); border-radius:999px;
  background:var(--c-warning-soft); color:var(--c-warning); font-weight:600; border:1px solid var(--c-warning-line); }
.side-foot { border-top:1px solid var(--c-border); padding: var(--sp-5); display:flex; align-items:center; gap: var(--sp-4); }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--c-wine); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:600; flex:0 0 32px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.side-foot .who { line-height: 1.2; min-width: 0; flex: 1; }
.side-foot .who .nm { font-size: 13px; font-weight: 500; }
.side-foot .who .rl { font-size: 12px; color: var(--c-text-3); }

/* ---- Topbar ---- */
.main { min-width: 0; }
.topbar { height:var(--top-h); border-bottom:1px solid var(--c-border);
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  display:flex; align-items:center; gap: var(--sp-7); padding: 0 var(--pad); position:sticky; top:0; z-index:20; }
.crumbs { display:flex; align-items:center; gap: var(--sp-3); font-size:13px; color:var(--c-text-3); }
.crumbs .sep { color: var(--c-text-4); }
.crumbs .now { color: var(--c-text); font-weight: 500; }
/* Indicador de conexion: SOLO un puntito (el mensaje va en el tooltip/title). */
.live { display:inline-flex; align-items:center; padding:6px; cursor:default; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--c-success); position:relative; }
.live-dot::after { content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid var(--c-success); animation:pulseRing 2s ease-out infinite; }
@keyframes pulseRing { 0%{transform:scale(.6);opacity:.9;} 100%{transform:scale(1.8);opacity:0;} }
/* Reconectando: ambar, sigue pulsando porque esta intentando. */
.live.retry .live-dot { background:var(--c-warning); }
.live.retry .live-dot::after { border-color:var(--c-warning); }
/* Sin conexion: rojo y sin pulso (no finge actividad). */
.live.down .live-dot { background:var(--c-danger,#c0392b); }
.live.down .live-dot::after { border-color:var(--c-danger,#c0392b); animation:none; }
.notif-bell { position:relative; text-decoration:none; }
.notif-count { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding: 0 var(--sp-1);
  border-radius:999px; background:var(--c-danger,#c0392b); color:#fff; font-size:11px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.top-spacer { flex: 1; }
.icon-btn { width:32px; height:32px; border-radius:var(--r-ctrl); display:grid; place-items:center;
  border:1px solid transparent; background:transparent; color:var(--c-text-2); cursor:pointer; position:relative;
  transition:background 150ms ease, border-color 150ms ease; }
.icon-btn:hover { background:var(--c-surface-3); border-color:var(--c-border); color:var(--c-text); }
.icon-btn svg { width: 17px; height: 17px; }
.btn-logout { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px;
  border-radius:var(--r-ctrl); border:1px solid var(--c-border-2); background:#fff; color:var(--c-text-2);
  font-size:13px; font-weight:500; cursor:pointer; text-decoration:none;
  transition:background 150ms ease, border-color 150ms ease, color 150ms ease; }
.btn-logout:hover { background:var(--c-danger-soft); border-color:var(--c-danger-line); color:var(--c-danger); }
.btn-logout svg { width: 15px; height: 15px; }

/* ---- Page ---- */
.page { padding: var(--pad); max-width: var(--maxw); margin: 0 auto; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap: var(--sp-7); margin-bottom: 20px; }
.page-head .ttl { display: flex; flex-direction: column; gap: var(--sp-1); }
.page-head .ttl p { margin: 0; color: var(--c-text-3); font-size: 13px; }
.page-actions { display: flex; gap: var(--sp-3); align-items: center; }

/* ---- Controls ---- */
.btn { display:inline-flex; align-items:center; gap: var(--sp-2); height:32px; padding: 0 var(--sp-5);
  border-radius:var(--r-ctrl); border:1px solid var(--c-border-2); background:#fff; color:var(--c-text);
  font-size:13px; font-weight:500; cursor:pointer;
  transition:background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease; white-space:nowrap; }
.btn svg { width: 14px; height: 14px; }
.btn:hover { background: var(--c-surface-2); border-color: var(--c-text-4); }
.btn:focus-visible { outline: 2px solid var(--c-info); outline-offset: 2px; }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--c-wine); color: #fff; border-color: var(--c-wine); }
.btn.primary:hover { background: var(--c-wine-hover); border-color: var(--c-wine-hover); }
.btn.primary:active { background: var(--c-wine-press); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--c-text-2); }
.btn.ghost:hover { background: var(--c-surface-3); color: var(--c-text); }
.btn.danger { color: var(--c-danger); border-color: var(--c-danger-line); background: #fff; }
.btn.danger:hover { background: var(--c-danger-soft); }
.btn.sm { height: 26px; padding: 0 var(--sp-3); font-size: 12px; }
.btn.icon { padding: 0; width: 34px; justify-content: center; }
.btn.sm.icon { width: 28px; }
.btn.full { width: 100%; justify-content: center; }

.input, .select, .textarea { width:100%; height:34px; padding: 0 var(--sp-4); border-radius:var(--r-ctrl);
  border:1px solid var(--c-border-2); background:#fff; font-size:13.5px; color:var(--c-text);
  transition:border-color 150ms ease, box-shadow 150ms ease; }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--c-wine); box-shadow:0 0 0 3px rgba(122,31,43,.12); }
/* Input de archivo: estilizar el boton nativo para que siga la plantilla (no el feo del navegador) */
.input[type="file"] { height:auto; min-height:34px; padding:5px 8px; display:flex; align-items:center; font-size:12.5px; color:var(--c-text-3); }
.input[type="file"]::file-selector-button {
  margin-right:10px; padding:6px 12px; border:1px solid var(--c-border); border-radius:var(--r-ctrl);
  background:var(--c-surface-2); color:var(--c-text); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background 150ms ease, border-color 150ms ease; }
.input[type="file"]::file-selector-button:hover { background:var(--c-surface-3); border-color:var(--c-text-4); }
.textarea { height: auto; padding: var(--sp-3) var(--sp-4); min-height: 76px; resize: vertical; }
.input.error, .select.error, .textarea.error { border-color:var(--c-danger); box-shadow:0 0 0 3px rgba(179,38,30,.10); }
/* Select: quitar estilo nativo y poner flecha propia */
.select { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right: 30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23807c75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; }
/* Checkbox / radio en color de marca y tamaño consistente */
input[type="checkbox"], input[type="radio"] { accent-color:var(--c-wine); width:16px; height:16px; cursor:pointer; vertical-align:-2px; }
/* Inputs de fecha/archivo y números: heredan el estilo .input; alinear texto */
.input[type="date"] { line-height:1; }
input.input::-webkit-outer-spin-button, input.input::-webkit-inner-spin-button { opacity:.5; }

/* ---- Autocompletado (.ac-cell) ---- */
.ac-cell { position: relative; }
.ac-menu { display:none; position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
  background:#fff; border:1px solid var(--c-border); border-radius:var(--r-ctrl); box-shadow:var(--sh-pop);
  max-height:280px; overflow-y:auto; overflow-x:hidden; padding: var(--sp-1);
  /* la celda de producto es angosta (columna de tabla); con sub + precio agregados no alcanza el
     ancho de la celda para no envolver feo — el menu puede ser mas ancho que su celda (el card
     "flush" ya permite overflow:visible para el propio menu). */
  min-width: 300px; }
.ac-item { display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-radius:6px; cursor:pointer; font-size:13.5px; }
.ac-item:hover, .ac-item.active { background:var(--c-wine-soft); }
.ac-item .ac-lbl { color:var(--c-text); flex:1 1 auto; min-width:0; }
.ac-item .ac-sub { color:var(--c-text-3); font-size:12px; font-family:var(--f-mono); white-space:nowrap; }
.ac-price { font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--c-text); }
.ac-empty { padding: var(--sp-4); color:var(--c-text-3); font-size:13px; }
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.field label { font-size: 12.5px; font-weight: 500; color: var(--c-text-2); }
.field .hint { font-size: 12px; color: var(--c-text-3); }
.field .err { font-size: 12px; color: var(--c-danger); }
.search { position: relative; display: flex; align-items: center; }
.search input { padding-left: 32px; }
.search > svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--c-text-3); cursor:pointer; }
.search > svg:hover { color:var(--c-wine); }
[hidden]{ display:none !important; }
.input-prefix { display:flex; align-items:stretch; border:1px solid var(--c-border-2); border-radius:var(--r-ctrl); background:#fff; overflow:hidden; }
.input-prefix:focus-within { border-color: var(--c-wine); box-shadow: 0 0 0 3px rgba(122,31,43,.12); }
.input-prefix .pfx { background:var(--c-surface-3); color:var(--c-text-3); padding: 0 var(--sp-4); display:grid; place-items:center;
  font-family:var(--f-mono); font-size:12.5px; border-right:1px solid var(--c-border); }
.input-prefix input { border:0; outline:0; padding: 0 var(--sp-4); height:32px; flex:1; min-width:0; font-family:var(--f-mono); }

/* ---- Badges & pills ---- */
.badge { display:inline-flex; align-items:center; gap: 5px; padding: 2px var(--sp-3); border-radius:var(--r-chip);
  font-size:11.5px; font-weight:600; line-height:1.5; background:var(--c-surface-3); color:var(--c-text-2);
  border:1px solid var(--c-border); white-space:nowrap; }
.badge .pip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge.success { background:var(--c-success-soft); color:var(--c-success); border-color:var(--c-success-line); }
.badge.warning { background:var(--c-warning-soft); color:var(--c-warning); border-color:var(--c-warning-line); }
.badge.danger  { background:var(--c-danger-soft);  color:var(--c-danger);  border-color:var(--c-danger-line); }
.badge.info    { background:var(--c-info-soft);    color:var(--c-info);    border-color:var(--c-info-line); }
.badge.wine    { background:var(--c-wine-soft);    color:var(--c-wine-text); border-color:var(--c-wine-soft-2); }
.badge.gold    { background:var(--c-gold-soft);    color:var(--c-gold);    border-color:var(--c-gold-line); }
.pill { display:inline-flex; align-items:center; gap: var(--sp-2); padding: 2px var(--sp-3); border-radius:999px;
  background:var(--c-surface-3); color:var(--c-text-2); font-size:12px; font-weight:500; border:1px solid var(--c-border); }
/* Indicadores secundarios (Cobro / Fiscal): SOLO icono color-codificado + tooltip (title).
   Cuadrito compacto junto al pill primario del pedido; el detalle vive en el tooltip. */
.inds { display:inline-flex; gap:4px; align-items:center; }
.ind { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:var(--r-chip); cursor:default;
  background:var(--c-surface-3); color:var(--c-text-2); border:1px solid var(--c-border); }
.ind svg { width:13px; height:13px; }
.ind.muted   { background:var(--c-surface-3); color:var(--c-text-4); border-color:var(--c-border); }
.ind.info    { background:var(--c-info-soft);    color:var(--c-info);    border-color:var(--c-info-line); }
.ind.warning { background:var(--c-warning-soft); color:var(--c-warning); border-color:var(--c-warning-line); }
.ind.success { background:var(--c-success-soft); color:var(--c-success); border-color:var(--c-success-line); }
.ind.danger  { background:var(--c-danger-soft);  color:var(--c-danger);  border-color:var(--c-danger-line); }

/* Rotacion: fila de pills con pip de color (alta/media/baja) */
.rotation { display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap; margin: 18px 0 24px; }
.rotation .rl { font-size:12.5px; color:var(--c-text-3); font-weight:500; margin-right:2px; }
.rotation .pill { background:#fff; }
.rotation .pill b { font-family:var(--f-mono); font-weight:600; color:var(--c-text); }
.rotation .pill .pip { width:7px; height:7px; border-radius:50%; }
.rotation .pill.alta .pip { background:var(--c-success); }
.rotation .pill.media .pip { background:var(--c-warning); }
.rotation .pill.baja .pip { background:var(--c-text-4); }

/* ---- Cards / KPI ---- */
.card { background:#fff; border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:var(--sh-base); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-5); padding: var(--sp-6) var(--sp-7); border-bottom:1px solid var(--c-divider); }
.card-head h3 { font-size: 14px; font-weight: 600; }
.card-body { padding: var(--sp-7); }
.card-body.flush { padding: 0; }
.kpi { position:relative; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-card); padding: 13px 16px;
  box-shadow:var(--sh-base); display:flex; flex-direction:column; gap: 4px; min-width:0; }
.kpi .lbl { font-size: 12px; color: var(--c-text-3); font-weight:500; padding-right: 24px; }
.kpi .val { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-family: var(--f-mono); line-height:1.05; }
.kpi .sub { font-size: 12px; color: var(--c-text-4); }
/* Desglose compacto dentro de un KPI (ej. Facturado del mes: Base/IEPS/IVA) */
.kpi-desglose { margin-top: 4px; display:flex; flex-direction:column; gap:1px; font-size:11.5px; color:var(--c-text-3); }
.kpi-desglose .row.sb { padding:0; }
.kpi-desglose .mono { color:var(--c-text-2); }
.kpi .delta { font-size: 12px; color: var(--c-success); }
.kpi .delta.neg { color: var(--c-danger); }
.kpi .tr { position:absolute; top:13px; right:14px; color:var(--c-text-4); }
.kpi .tr svg { width:16px; height:16px; }
.kpi.feature { border-color:var(--c-wine-soft-2); background:linear-gradient(180deg,#fff,var(--c-wine-soft)); }
.kpi.feature .val { color:var(--c-wine); } .kpi.feature .tr { color:var(--c-wine); }
.kpi.warn { background:var(--c-warning-soft); border-color:var(--c-warning-line); }
.kpi.warn .lbl, .kpi.warn .val, .kpi.warn .tr { color:var(--c-warning); } .kpi.warn .sub { color:#b07a2e; }
.kpi.danger { background:var(--c-danger-soft); border-color:var(--c-danger-line); }
.kpi.danger .lbl, .kpi.danger .val, .kpi.danger .tr { color:var(--c-danger); } .kpi.danger .sub { color:#c0584f; }
.kpi.gold { background: var(--c-gold-bg); border-color: var(--c-gold-line); }
.kpi.gold .lbl { color: var(--c-gold); }

/* ---- Polish ligero global: tarjetas con realce sutil al pasar el cursor ---- */
.kpi, .al-kpi { transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease; }
.kpi:hover, .al-kpi:hover { box-shadow: 0 6px 18px rgba(17,17,26,.07); }
/* KPI clicable: enlaza a la lista filtrada de lo que indica (dashboard accionable) */
a.kpi { text-decoration: none; color: inherit; cursor: pointer; }
a.kpi:hover { box-shadow: 0 8px 22px rgba(17,17,26,.10); transform: translateY(-1px); }
.card-head h3 { letter-spacing: -.01em; }
.page-head .ttl h1 { letter-spacing: -.02em; }

/* ---- Tables ---- */
.tbl-wrap { overflow: auto; border: 1px solid var(--c-border); border-radius: var(--r-card); background: #fff; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fz-table); background: #fff; }
.tbl thead th { position:sticky; top:0; background:var(--c-surface-2); color:var(--c-text-3); font-weight:600;
  font-size:12px; letter-spacing:.02em; text-align:left; padding: 7px var(--sp-6); border-bottom:1px solid var(--c-border); z-index:1; }
.tbl thead th.r { text-align: right; }
/* Encabezado ordenable (estandar de la app): clic alterna asc/desc, flecha en la columna activa */
.tbl thead th a.sort { color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  user-select: none; transition: color 120ms ease; }
.tbl thead th a.sort:hover { color: var(--c-text); }
.tbl thead th.r a.sort { justify-content: flex-end; }
.tbl thead th a.sort .ar { color: var(--c-wine); font-size: 9px; line-height: 1; }
.tbl tbody td { padding: 6px var(--sp-6); border-bottom: 1px solid var(--c-divider); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background 120ms ease; }
.tbl tbody tr:hover { background: var(--c-surface-2); }
.tbl tbody td.r { text-align: right; font-family: var(--f-mono); }
.tbl tbody td.dim { color: var(--c-text-3); }
/* Variante compacta: mas filas visibles (paneles de Reabastecer / Ultimos movimientos) */
.tbl.compact { font-size: 12.5px; }
.tbl.compact thead th { padding-top: 6px; padding-bottom: 6px; }
.tbl.compact tbody td { padding-top: 4px; padding-bottom: 4px; }
@keyframes rowHL { 0%{background:#d6f0e0;} 85%{background:#eaf7ef;} 100%{background:transparent;} }
.tbl tbody tr.hl { animation: rowHL 3000ms ease forwards; }

/* Auditoria: grid agrupado por referencia, filas expandibles */
.tbl.audit .g-head { cursor: pointer; }
.tbl.audit .g-head .chev { display:inline-block; transition: transform 120ms ease; color: var(--c-text-3); font-size: 12px; }
.tbl.audit .g-head.open .chev { transform: rotate(90deg); }
.tbl.audit .g-head.open { background: var(--c-surface-2); }
.tbl.audit .g-detail > td { padding: 0; border-bottom: 1px solid var(--c-divider); }
.tbl.audit .g-detail-cell { background: var(--c-surface-2); padding-left: 28px; }
.tbl.audit table.subtbl { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; background:transparent; }
.tbl.audit table.subtbl thead th { position:static; background:transparent; color:var(--c-text-4); font-weight:600;
  text-align:left; padding:5px var(--sp-6); border-bottom:1px solid var(--c-divider); }
.tbl.audit table.subtbl tbody td { padding:4px var(--sp-6); border-bottom:1px solid var(--c-divider); vertical-align:middle; }
.tbl.audit table.subtbl tbody tr:last-child td { border-bottom:0; }
.stock { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--f-mono); }
.stock svg { width: 13px; height: 13px; flex: 0 0 13px; }
.stock.low { color: var(--c-danger); font-weight: 600; }
.stock.mid { color: var(--c-warning); font-weight: 600; }
.stock.ok  { color: var(--c-success); }

/* ---- Filter / status pills ---- */
.filterbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.filterbar .grow { flex: 1; min-width: 220px; }
.spill { display:inline-flex; align-items:center; gap: var(--sp-2); padding: 3px 9px; border-radius:999px; font-size:12px;
  font-weight:500; border:1px solid var(--c-border); background:#fff; color:var(--c-text-2); cursor:pointer; transition:background 150ms ease; }
.spill:hover { background: var(--c-surface-2); }
.spill.active { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.spill .pip { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---- Toasts ---- */
.toast-stack { position: fixed; top: 16px; right: 16px; display: flex; flex-direction: column; gap: var(--sp-3); z-index: 100; pointer-events: none; }
.toast { pointer-events:auto; display:flex; align-items:flex-start; gap: var(--sp-4); background:#fff; border:1px solid var(--c-border);
  border-radius:var(--r-mid); box-shadow:var(--sh-pop); padding: var(--sp-5) var(--sp-6); min-width:280px; max-width:360px; animation:toastIn 250ms ease; }
.toast .ti { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 28px; }
.toast.success .ti { background: var(--c-success-soft); color: var(--c-success); }
.toast.info    .ti { background: var(--c-info-soft);    color: var(--c-info); }
.toast .tc { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.toast .tt { font-weight: 600; font-size: 13.5px; }
.toast .td { font-size: 12.5px; color: var(--c-text-3); }
@keyframes toastIn { from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:translateX(0);} }

/* ---- Banner / timeline / skeleton / modal ---- */
.banner { display:flex; align-items:center; gap: var(--sp-4); padding: 11px 15px; border-radius:var(--r-mid);
  background:var(--c-success-soft); color:var(--c-success); border:1px solid var(--c-success-line); font-size:13px; }
.banner svg { width:17px; height:17px; flex:0 0 17px; }
.banner b { font-weight:600; }
.banner.warn { background:var(--c-warning-soft); color:var(--c-warning); border-color:var(--c-warning-line); }
.banner.gold { background: var(--c-gold-bg); color: var(--c-gold); border-color: var(--c-gold-line); }
.banner.danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger-line); }
.timeline { display: flex; flex-direction: column; }
.timeline-item { position: relative; padding: 0 0 18px 28px; }
.timeline-item::before { content:""; position:absolute; left:9px; top:18px; bottom:-4px; width:2px; background:var(--c-border); }
.timeline-item:last-child::before { display: none; }
.timeline-item .dot { position:absolute; left:4px; top:4px; width:12px; height:12px; border-radius:50%;
  background:#fff; border:2px solid var(--c-border-2); z-index:1; }
.timeline-item.done .dot { background: var(--c-success); border-color: var(--c-success); }
.timeline-item.now .dot { background:var(--c-wine); border-color:var(--c-wine); box-shadow:0 0 0 4px rgba(122,31,43,.15); }
.timeline-item .ti-title { font-weight: 500; font-size: 13.5px; }
.timeline-item .ti-meta { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
@keyframes shimmer { 0%{background-position:-240px 0;} 100%{background-position:240px 0;} }
.skel { display:inline-block; height:12px; border-radius:6px;
  background:linear-gradient(90deg,#ece9e3 0%,#f5f3ef 50%,#ece9e3 100%); background-size:480px 100%; animation:shimmer 1.4s linear infinite; }
.modal-overlay { position:fixed; inset:0; background:rgba(20,18,16,.45); display:none; align-items:flex-start; justify-content:center; padding-top: 10vh; z-index:80; }
.modal-overlay.show { display: flex; animation: fadeIn 200ms ease; }
.modal.lg { width:760px; }   /* dialogos densos (Facturar CFDI) */
.modal { width:480px; max-width:calc(100vw - 32px); background:#fff; border-radius:var(--r-card);
  box-shadow:var(--sh-pop); border:1px solid var(--c-border); display:flex; flex-direction:column; animation:modalIn 200ms ease; }
.modal-head { padding: var(--sp-7); border-bottom:1px solid var(--c-divider); display:flex; justify-content:space-between; align-items:center; }
.modal-body { padding: 18px var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-6); }
.modal-foot { padding: var(--sp-5) var(--sp-7); border-top: 1px solid var(--c-divider); display: flex; justify-content: flex-end; gap: var(--sp-3); }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes modalIn { from{opacity:0;transform:translateY(-6px) scale(.98);} to{opacity:1;transform:none;} }

/* ---- Layout helpers ---- */
.grid { display: grid; gap: var(--sp-7); }
.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cols-2-3 { grid-template-columns: 2fr 1fr; }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row.sb { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: var(--sp-5); }
.mt-8 { margin-top: var(--sp-3); } .mt-16 { margin-top: var(--sp-7); } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: var(--sp-3); } .mb-16 { margin-bottom: var(--sp-7); } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.muted { color: var(--c-text-3); } .right { text-align: right; }
.divider { height: 1px; background: var(--c-divider); margin: var(--sp-3) 0; }
.gold-block { background: var(--c-gold-bg); border: 1px solid var(--c-gold-line); border-radius: var(--r-mid); padding: var(--sp-6); }

/* Layout de formulario: columna principal + tarjeta lateral de ayuda/resumen.
   Evita la tarjeta solitaria flotando en una pagina enorme (Recepcion, Ajustes). */
.form-layout { display:grid; grid-template-columns:1.7fr 1fr; gap: var(--sp-7); align-items:start; }
/* .even iguala la altura de las dos columnas (pagina mas ordenada cuando los dos bloques son cortos) */
.form-layout.even { align-items:stretch; }
/* Helper = panel de ayuda secundario: compacto y discreto, no compite con la tarjeta principal */
.helper { background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:var(--r-card); padding: 16px;
  display:flex; flex-direction:column; }
.helper h4 { margin:0 0 5px; font-size:13px; font-weight:600; }
.helper p { margin:0 0 12px; font-size:12px; color:var(--c-text-3); line-height:1.5; }
.helper .stat { display:flex; align-items:center; justify-content:space-between; padding: 7px 0;
  border-top:1px dashed var(--c-border-2); font-size:12.5px; }
.helper .stat .v { font-family:var(--f-mono); font-weight:600; }
.note { font-size:12px; color:var(--c-text-3); margin-top: var(--sp-6); }
.note a { color:var(--c-wine); text-decoration:none; font-weight:500; }
/* dentro del helper la nota se ancla al fondo (se ve bien cuando la columna estira con .even) */
.helper .note { margin-top:auto; padding-top: 14px; }
@media (max-width:1100px){ .form-layout, .form-layout.even { grid-template-columns:1fr; } }
/* Boton de quitar renglon (recepcion) */
.rec-x { width:34px; height:34px; border-radius:var(--r-ctrl); border:1px solid var(--c-border-2); background:#fff;
  color:var(--c-text-3); display:grid; place-items:center; cursor:pointer; }
.rec-x:hover { color:var(--c-danger); border-color:var(--c-danger-line); background:var(--c-danger-soft); }
.rec-x svg { width:16px; height:16px; }
.empty { display:flex; flex-direction:column; align-items:center; gap: var(--sp-4); padding: 48px 24px; text-align:center; color:var(--c-text-3); }
.progress { height: 8px; background: var(--c-surface-3); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--c-wine); border-radius: 999px; }

/* ---- Tabs ---- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--c-border); padding: 0 var(--sp-1); }
.tab { padding: var(--sp-4) var(--sp-5); font-size:13px; font-weight:500; color:var(--c-text-3); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom: -1px; }
.tab.active { color: var(--c-text); border-bottom-color: var(--c-wine); }

/* ---- Login (pagina standalone) ---- */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(1200px 600px at 50% -10%, #f1ebe8 0%, transparent 60%), var(--c-bg); padding: 40px 20px; }
.login-card { width:400px; max-width:100%; background:#fff; border:1px solid var(--c-border);
  border-radius:var(--r-card); box-shadow:var(--sh-up); padding: 32px; }
.login-brand { display:flex; flex-direction:column; align-items:center; gap: var(--sp-4); margin-bottom: 22px; }
.login-brand .mark { width:44px; height:44px; border-radius:12px; background:var(--c-wine); color:#fff; display:grid; place-items:center; font-weight:700; font-size:18px; }
.login-brand h1 { font-size: 20px; } .login-brand p { margin: 0; font-size: 13px; color: var(--c-text-3); }
.login-foot { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--c-text-3); }

/* ---- Rastreo publico ---- */
.rastreo-page { min-height: 100vh; background: var(--c-bg); padding: 40px 20px; }
.tracker { max-width:720px; margin: 0 auto; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:var(--sh-base); overflow:hidden; }

/* ---- Vista movil repartidor (<=420px) ---- */
.repartidor-page { min-height: 100vh; background: var(--c-bg); padding: var(--sp-7); }
.mobile { max-width:420px; margin: 0 auto; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:var(--sh-up); overflow:hidden; }
.mobile-top { padding: var(--sp-7) 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--c-divider); }
.mobile-body { padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5); }
.mobile-btn { display:flex; align-items:center; justify-content:center; gap: var(--sp-2); height:44px; border-radius:var(--r-ctrl);
  background:var(--c-wine); color:#fff; border:0; font-weight:500; font-size:14px; cursor:pointer; width:100%; }
.mobile-btn.ghost { background: #fff; color: var(--c-text); border: 1px solid var(--c-border-2); }

/* ---- Responsive: apila grids multi-columna antes (el sidebar ~240px reduce el ancho util,
       evita tablas apretadas con scroll horizontal en pantallas medianas) ---- */
@media (max-width: 1100px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3, .cols-2, .cols-2-3 { grid-template-columns: 1fr; }
}

/* ---- Responsive: apila columnas en movil (el drawer del sidebar va al FINAL del archivo,
       despues de las reglas .app.collapsed, para que sus overrides ganen por orden) ---- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3, .cols-2, .cols-2-3 { grid-template-columns: 1fr; }
}

/* ===== Dashboard: banner de objetivo + barra de progreso ===== */
.obj-banner { background: var(--c-gold-bg); border: 1px solid var(--c-gold-line); border-radius: var(--r-card); padding: var(--sp-7) 18px; }
.obj-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.obj-line { font-size: 14px; color: var(--c-text-2); }
.obj-line b { color: var(--c-gold); font-weight: 700; }
.obj-nums { font-size: 18px; margin-top: 3px; font-weight: 600; }
.obj-nums .dim { font-size: 13px; color: var(--c-text-3); font-weight: 400; }
.obj-pct { font-size: 24px; font-weight: 700; color: var(--c-gold); font-family: var(--f-mono); }
.obj-note { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4);
  font-size: 12.5px; color: var(--c-text-3); }
.obj-note svg { color: var(--c-gold); flex: 0 0 14px; }
.obj-note b { color: var(--c-text-2); }
.progress { margin-top: var(--sp-5); height: 8px; border-radius: 999px; background: var(--c-gold-soft); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--c-gold); border-radius: 999px; transition: width .4s ease; }

/* ===== Reportes: grafico de barras (CSS puro) ===== */
.barchart { display: flex; align-items: flex-end; gap: var(--sp-4); height: 180px; padding: var(--sp-3) var(--sp-1) 0; }
.barchart .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-2); height: 100%; }
.barchart .bar .fill { width: 60%; max-width: 34px; background: var(--c-wine); border-radius: 6px 6px 0 0; min-height: 2px; transition: height .4s ease; }
.barchart .bar .fill.prev { background: var(--c-border-2); }
.barchart .bar .lbl { font-size: 11px; color: var(--c-text-3); }

/* ===== Logo de marca + credito sscr.mx ===== */
.brand-logo { height: 44px; width: auto; max-width: 180px; display: block; object-fit: contain; margin: 0 auto; }
.side-credit { padding: var(--sp-4) var(--sp-5) var(--sp-6); font-size: 11px; color: var(--c-text-4); text-align: center; }
.side-credit a { color: var(--c-text-3); font-weight: 500; }
.side-credit a:hover { color: var(--c-wine); }

/* ===== Colapsar sidebar (modo solo-iconos ~74px) ===== */
.app { transition: grid-template-columns 220ms cubic-bezier(.4,0,.2,1); }
.app.collapsed { --side-w: 74px; }
.app.collapsed .brand { justify-content: center; padding: 16px 0; }
.app.collapsed .brand-name, .app.collapsed .nav-label, .app.collapsed .nav-link .lbl,
.app.collapsed .nav-link .count, .app.collapsed .nav-sublink,
.app.collapsed .side-foot .who, .app.collapsed .side-credit { display: none; }
.app.collapsed .collapse-btn { display: none; }
.app.collapsed .brand-mark { margin: 0 auto; }
.app.collapsed .brand-mark:hover { transform: scale(1.06); }
.app.collapsed .nav { padding: 12px; }
.app.collapsed .nav-link { justify-content: center; padding: 11px 0; }
/* iconos mas grandes en modo colapsado (en expandido siguen en 18px) */
.app.collapsed .nav-link svg { width: 23px; height: 23px; flex-basis: 23px; }
.app.collapsed .nav-link.active::before { display: none; }
.app.collapsed .side-foot { justify-content: center; padding: 12px 0; }

/* Tooltip de cada icono cuando el sidebar esta colapsado: div .nav-tip position:fixed (lo pinta
   app-ui.js al hover, INSTANTANEO); un tooltip CSS ::after lo recortaria el overflow del sidebar. */

/* Boton hamburguesa del topbar: oculto en escritorio, visible en movil */
.menu-toggle { display: none; width: 36px; height: 36px; margin-right: 4px; border: 1px solid var(--c-border);
  background: #fff; color: var(--c-text-2); border-radius: var(--r-ctrl); align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 36px; }
.menu-toggle:hover { background: var(--c-surface-2); color: var(--c-text); }
.menu-toggle svg { width: 20px; height: 20px; }
.sidebar-backdrop { display: none; }

/* ===== Sub-enlaces del sidebar (submenu indentado) ===== */
.nav-sublink { display:flex; align-items:center; padding: 5px var(--sp-4) 5px 30px; border-radius:var(--r-ctrl);
  color:var(--c-text-3); cursor:pointer; font-size:var(--fz-meta); font-weight:500; position:relative;
  transition:background 150ms ease, color 150ms ease; }
.nav-sublink::before { content:""; position:absolute; left:18px; top:50%; width:4px; height:4px; margin-top:-2px;
  border-radius:50%; background:var(--c-text-4); }
.nav-sublink:hover { background: var(--c-surface-3); color: var(--c-text); }
.nav-sublink.active { color: var(--c-wine); font-weight:600; }
.nav-sublink.active::before { background: var(--c-wine); }

/* ===== Submenu colapsable (nav-group): el padre es un toggle; los hijos se ocultan ===== */
.nav-group-toggle { width:100%; background:none; border:0; font:inherit; cursor:pointer; }
.nav-group-toggle .chev { margin-left:auto; width:14px; height:14px; flex:0 0 14px;
  color:var(--c-text-4); transition:transform 160ms ease; }
.nav-group.open > .nav-group-toggle .chev { transform:rotate(180deg); }
.nav-group.open > .nav-group-toggle { color:var(--c-text); }
/* Animacion suave al abrir/cerrar: max-height + opacity (display:none no transiciona). */
.nav-group-items { overflow:hidden; max-height:0; opacity:0;
  transition: max-height 240ms cubic-bezier(.4,0,.2,1), opacity 160ms ease; }
.nav-group.open > .nav-group-items { max-height:380px; opacity:1; }
/* En sidebar colapsado (iconos): el grupo se ve como un icono mas; sin chevron ni hijos inline. */
.app.collapsed .nav-group-items { display:none; }
.app.collapsed .nav-group-toggle .chev { display:none; }

/* ===== Menu de acciones por fila ("...") ===== */
.tbl thead th.acciones, .tbl tbody td.acciones { text-align: right; width: 1%; white-space: nowrap; }
.actions { position: relative; display: inline-block; }
.actions-toggle { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border:1px solid var(--c-border); background:#fff; border-radius:var(--r-ctrl); color:var(--c-text-2);
  cursor:pointer; line-height:1; font-size:16px; transition:background 150ms ease, border-color 150ms ease; }
.actions-toggle svg { width:16px; height:16px; }   /* sin esto, el icono hereda alto libre e infla el header */
.actions-toggle:hover { background: var(--c-surface-2); border-color: var(--c-text-4); }
.actions-menu { position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:150px; padding: var(--sp-1);
  background:#fff; border:1px solid var(--c-border); border-radius:var(--r-mid); box-shadow:var(--sh-pop);
  display:none; text-align:left; }
.actions.open .actions-menu { display:block; }
.actions-menu a, .actions-menu button { display:flex; align-items:center; width:100%; gap: var(--sp-3);
  padding: 7px var(--sp-4); border:0; background:transparent; border-radius:var(--r-chip); color:var(--c-text-2);
  cursor:pointer; font-size:var(--fz-meta); text-align:left; }
.actions-menu a svg, .actions-menu button svg { width:15px; height:15px; flex:none; }
.actions-menu a:hover, .actions-menu button:hover { background: var(--c-surface-3); color: var(--c-text); }
.actions-menu button.danger, .actions-menu a.danger { color: var(--c-danger); }
.actions-menu button.danger:hover, .actions-menu a.danger:hover { background: var(--c-danger-soft); }
.actions-menu form { margin: 0; }
.actions-menu .sep { height:1px; margin: var(--sp-1) 0; background: var(--c-divider); }
/* Variante de toggle con etiqueta (dropdowns agrupados: "Pedido", "Facturacion").
   Igual altura/estilo que .btn para que la barra de acciones se vea alineada y limpia. */
.actions-toggle.labeled { width:auto; height:32px; gap:6px; padding:0 13px; font-size:13px; font-weight:500;
  border-radius:var(--r-ctrl); color:var(--c-text); }
.actions-toggle.labeled svg { width:14px; height:14px; }
.actions-toggle.labeled .caret { width:13px; height:13px; opacity:.6; margin-left:-1px; }
/* Barra de acciones agrupadas (gestion del pedido): banda a todo lo ancho, integrada con el card
   (sin recuadro flotante). El card recorta con overflow:hidden, asi los bordes quedan limpios. */
.mgmt-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:12px 16px; background:var(--c-surface-2); border-bottom:1px solid var(--c-border); }
.mgmt-actions > .btn, .mgmt-actions > .actions > .actions-toggle.labeled { height:32px; }

/* ===== Fecha + hora (hora muted debajo) ===== */
.fh { display: inline-flex; flex-direction: column; line-height: 1.3; }
.fh-d { white-space: nowrap; }
.fh-t { font-size: 11px; color: var(--c-text-4); font-variant-numeric: tabular-nums; }

/* ===== Grid toolbar: busqueda + botones Filtros/Ordenar (popover) + chips de filtro activo =====
   Reemplaza el "card con search + selects" por una barra limpia; los filtros viven en un popover. */
.gtoolbar { display:flex; align-items:center; gap: var(--sp-3); margin-bottom: var(--sp-7); flex-wrap:wrap; }
.gtoolbar .search { flex:1; min-width:240px; }
.gtoolbar .search input { height:38px; }
.gtoolbar .spacer { flex:1; }
/* Botones inyectados al final del toolbar: buscar (lupa) y limpiar filtros */
.gtoolbar .gsearch, .gtoolbar .gclear { height:38px; }
.gtoolbar .gsearch { padding-left:12px; padding-right:12px; }
.gtoolbar .gsearch svg, .gtoolbar .gclear svg { width:15px; height:15px; }
.pop-wrap { position:relative; }
.pop-toggle .caret { width:13px; height:13px; margin-left:1px; color:var(--c-text-3); transition:transform 120ms ease; }
.pop-wrap.open > .pop-toggle .caret { transform:rotate(180deg); }
.pop-toggle .pop-count { margin-left:2px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--c-wine); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.pop { position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:280px;
  background:#fff; border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:var(--sh-pop); display:none; }
.pop-wrap.open .pop { display:block; animation:fadeIn 120ms ease; }
.pop-wrap.open > .pop-toggle { background:var(--c-surface-2); border-color:var(--c-text-4); }
.pop-head { padding: var(--sp-4) var(--sp-6); border-bottom:1px solid var(--c-divider);
  font-size:11px; font-weight:600; color:var(--c-text-3); text-transform:uppercase; letter-spacing:.06em; }
.pop-body { padding: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-6); }
.pop-foot { padding: var(--sp-4) var(--sp-6); border-top:1px solid var(--c-divider); display:flex; justify-content:space-between; align-items:center; gap: var(--sp-3); }
.pop .field { margin:0; }
/* popover-menu (Ordenar): lista de opciones con check en la activa */
.pop.menu { min-width:230px; padding: var(--sp-1); }
.pop.menu a { display:flex; align-items:center; gap: var(--sp-3); padding: 7px var(--sp-4); border-radius:var(--r-chip);
  font-size:13px; color:var(--c-text-2); cursor:pointer; white-space:nowrap; }
.pop.menu a:hover { background:var(--c-surface-3); color:var(--c-text); }
.pop.menu a.active { color:var(--c-wine); font-weight:600; }
.pop.menu a .check { margin-left:auto; width:15px; height:15px; opacity:0; color:var(--c-wine); flex:0 0 15px; }
.pop.menu a.active .check { opacity:1; }
.pop.menu .sep { height:1px; margin: var(--sp-1) 0; background:var(--c-divider); }
/* presets + rango de fecha dentro del popover de Filtros */
.date-presets { display:flex; flex-wrap:wrap; gap: var(--sp-2); }
.date-presets button { border:1px solid var(--c-border-2); background:#fff; color:var(--c-text-2);
  font-size:12px; padding:5px 10px; border-radius:999px; cursor:pointer; transition:background 120ms ease; }
.date-presets button:hover { background:var(--c-surface-2); }
.date-presets button.active { background:var(--c-text); color:#fff; border-color:var(--c-text); }
.date-range { display:flex; gap: var(--sp-3); }
.date-range .field { flex:1; }
/* chips de filtros activos (debajo del toolbar) */
.chips { display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.chip { display:inline-flex; align-items:center; gap: var(--sp-2); padding: 4px 5px 4px 11px; border-radius:999px;
  background:var(--c-wine-soft); color:var(--c-wine-text); border:1px solid var(--c-wine-soft-2); font-size:12.5px; font-weight:500; }
.chip b { font-weight:600; }
.chip .x { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; cursor:pointer; color:var(--c-wine-text); }
.chip .x:hover { background:var(--c-wine-soft-2); }
.chip .x svg { width:12px; height:12px; }
.chips .clear-all { font-size:12.5px; color:var(--c-text-3); cursor:pointer; font-weight:500; }
.chips .clear-all:hover { color:var(--c-wine); }
/* accesos rapidos por estado (segmented pills sobre el grid) */
.qf { display:flex; flex-wrap:wrap; gap:6px; margin-bottom: var(--sp-6); align-items:center; }
.qf-cap { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-text-4); margin-right:2px; }
.qf-pill { padding:6px 13px; border-radius:999px; border:1px solid var(--c-border-2); background:#fff;
  color:var(--c-text-2); font-size:13px; font-weight:500; white-space:nowrap; transition:background 120ms ease, border-color 120ms ease, color 120ms ease; }
.qf-pill:hover { background:var(--c-surface-2); border-color:var(--c-text-4); }
.qf-pill.active { background:var(--c-wine); border-color:var(--c-wine); color:#fff; }
/* filas con doble-clic para abrir: pista visual sutil al pasar el cursor */
.tbl tbody tr[data-href] { cursor:default; }

/* ===== Editor de cotizacion: rejilla principal (formulario) + lateral (resumen) ===== */
.editor-grid { display:grid; grid-template-columns:1.7fr 1fr; gap: var(--sp-7); align-items:start; }
@media (max-width:1100px){ .editor-grid { grid-template-columns:1fr; } }
/* En el detalle: lateral de gestion mas estrecho (ancho fijo) -> mas amplitud a datos+productos,
   e iguala la altura de la columna de contenido (alineada). */
.editor-grid.stretch { grid-template-columns: minmax(0,1fr) 330px; align-items:stretch; }
.editor-grid.stretch > .col { height:100%; }
@media (max-width:1100px){ .editor-grid.stretch { grid-template-columns:1fr; } }

/* Productos del detalle: cuerpo con scroll (~10 renglones) y total SIEMPRE visible debajo */
/* Reserva ~10 lineas (min-height) y crece para alinear con la tarjeta de gestion; scroll si hay mas */
.prod-scroll { flex: 1; min-height: 280px; overflow-y: auto; }
.prod-totals { padding: 10px var(--sp-7); border-top: 2px solid var(--c-border-2); background: var(--c-surface); }
.prod-totals .pt-row { display:flex; justify-content:flex-end; align-items:baseline; gap: 32px; padding: 3px 0; font-size: 13px; }
.prod-totals .pt-row > span:first-child { color: var(--c-text-3); min-width: 80px; text-align: right; }
.prod-totals .pt-row .v { font-family: var(--f-mono); min-width: 110px; text-align: right; }
.prod-totals .pt-row.tot { border-top: 1px solid var(--c-divider); margin-top: 5px; padding-top: 9px; }
.prod-totals .pt-row.tot > span:first-child { color: var(--c-text); font-weight: 600; }
.prod-totals .pt-row.tot .v { color: var(--c-wine); font-weight: 700; font-size: 15px; }

/* Lista compacta de pagos registrados (con enlace a su evidencia) */
.pago-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px;
  font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--c-divider); }
.pago-row .pg-met { color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pago-row .pg-ev { display: inline-grid; place-items: center; color: var(--c-wine); }
.pago-row .pg-ev svg { width: 14px; height: 14px; }

/* ===================================================================
   Detalle de cotizacion (diseno definitivo): encabezado + stepper,
   banda de cliente, fila Productos | Gestion del pedido alineados.
=================================================================== */
.btn.block { width: 100%; justify-content: center; }
.btn.danger-o { color: var(--c-danger); border-color: var(--c-danger-line); background: #fff; }
.btn.danger-o:hover { background: var(--c-danger-soft); border-color: var(--c-danger); }

/* Encabezado: volver + folio + subtitulo + stepper en una banda */
.detail-top { display:flex; align-items:center; gap:28px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--c-divider); flex-wrap:wrap; }
.detail-top .dt-left { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.dt-back { width:38px; height:38px; border-radius:var(--r-ctrl); border:1px solid var(--c-border-2); background:#fff; color:var(--c-text-2); display:grid; place-items:center; cursor:pointer; transition:background 150ms,border-color 150ms; flex:0 0 38px; }
.dt-back:hover { background:var(--c-surface-2); border-color:var(--c-text-4); color:var(--c-text); }
.dt-back svg { width:17px; height:17px; }
.dt-folio { font-family:var(--f-mono); font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.1; }
.dt-sub { font-size:12px; color:var(--c-text-3); margin-top:2px; }
.detail-top .stepper { flex:1; min-width:420px; }

/* Banda de datos del cliente: identidad a la izquierda + campos en 3 columnas */
.client-band { display:flex; gap:0; align-items:stretch; border:1px solid var(--c-divider); border-radius:10px; padding:10px 14px; }
.client-band .cb-id { flex:0 0 244px; display:flex; gap:12px; align-items:flex-start; padding-right:20px; border-right:1px solid var(--c-divider); }
.client-band .cb-id .ci-av { width:36px; height:36px; border-radius:10px; background:var(--c-wine); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 36px; letter-spacing:.02em; }
.client-band .cb-id .ci-name { font-size:14.5px; font-weight:600; line-height:1.25; }
.client-band .cb-id .ci-meta { font-size:11.5px; color:var(--c-text-3); font-family:var(--f-mono); margin-top:3px; }
.cb-fields { flex:1; padding-left:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:0 26px; }
.cb-f { display:flex; flex-direction:column; gap:1px; padding:3px 0; border-bottom:1px solid var(--c-divider); min-width:0; }
.cb-f.span2 { grid-column:span 2; }
.cb-f.span3 { grid-column:1 / -1; border-bottom:0; }
.cb-f .il { font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-text-4); font-weight:700; }
.cb-f .iv { font-size:13px; font-weight:500; line-height:1.25; overflow:hidden; text-overflow:ellipsis; }
.cb-f .iv.mono { font-family:var(--f-mono); }
.cb-f .iv.dim { color:var(--c-text-4); }
@media (max-width:980px){
  .client-band { flex-direction:column; gap:14px; }
  .client-band .cb-id { flex:none; border-right:0; border-bottom:1px solid var(--c-divider); padding:0 0 12px; }
  .cb-fields { padding-left:0; grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){ .cb-fields { grid-template-columns:1fr; } }
/* Banda de datos del cliente (editable, dentro del editor): mismo tratamiento que .client-band
   pero sin el bloque de identidad -> bloque unico con borde leve, campos sin caja de input. */
.cli-band { border:1px solid var(--c-divider); border-radius:10px; padding:10px 14px; }
.cli-band .cb-fields { padding-left:0; }
.cli-band .cb-f input, .cli-band .cb-f select { border:none; background:transparent; padding:0; font-size:13px; }

/* Fila Productos | Gestion del pedido (misma altura) */
.order-row { display:grid; grid-template-columns:1.62fr 1fr; gap:16px; align-items:stretch; }
.order-row > .card { height:100%; display:flex; flex-direction:column; min-height:0; }
@media (max-width:1100px){ .order-row { grid-template-columns:1fr; } }

/* Productos: cuerpo con scroll (~10 lineas, encabezado fijo) + pie de totales fijo */
.prod-card { overflow:hidden; }
.prod-card .card-body { flex:1; display:flex; flex-direction:column; min-height:0; padding:0; }
/* El scroll LLENA el alto disponible (lo define el card de gestion, mas alto) sin inflar la pagina:
   el contenido va absoluto para no contar en el tamano del track del grid. Total fijo abajo, sin gap. */
.prod-card .prod-scroll { flex:1; position:relative; overflow:hidden; min-height:230px; }
.prod-card .prod-scroll-in { position:absolute; inset:0; overflow:auto; }
.prod-card .prod-scroll table.tbl { margin:0; }
.prod-card .prod-scroll-in thead th { position:sticky; top:0; background:var(--c-surface-2); z-index:1; }
.prod-foot { border-top:1px solid var(--c-border); padding:13px 18px; display:flex; flex-direction:column; gap:5px; background:var(--c-surface); border-radius:0 0 var(--r-card) var(--r-card); }
.prod-foot .pf-row { display:flex; justify-content:space-between; font-size:12.5px; color:var(--c-text-3); }
.prod-foot .pf-row .v { font-family:var(--f-mono); color:var(--c-text-2); }
.prod-foot .pf-row.tot { border-top:1px solid var(--c-divider); padding-top:8px; margin-top:3px; }
.prod-foot .pf-row.tot span:first-child { font-weight:700; color:var(--c-text); font-size:14px; }
.prod-foot .pf-row.tot .v { font-size:17px; font-weight:700; color:var(--c-wine); }

/* Gestion del pedido: secciones apiladas. overflow:hidden en el card -> esquinas inferiores
   redondeadas correctas (la ultima seccion no se sale del borde). */
.mgmt { overflow:hidden; }
.mgmt .card-body { padding:0; flex:1; display:flex; flex-direction:column; min-height:0; }
.mgmt-sec { padding:13px 16px; border-bottom:1px solid var(--c-divider); }
.mgmt-sec:last-child { border-bottom:0; }
.mgmt-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-4); font-weight:700; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mgmt-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; padding:3px 0; }
/* Acciones fusionadas a la linea del label de cada seccion (badge + boton chico) */
.mgmt-lbl .lbl-acts { display:flex; align-items:center; gap:7px; text-transform:none; letter-spacing:0; }
.mgmt-lbl .lbl-acts .btn.sm { height:24px; padding:0 10px; font-size:11.5px; }
.mgmt-row .k { color:var(--c-text-3); }
.mgmt-row .v { font-weight:500; }
.mgmt-row .v.mono { font-family:var(--f-mono); }
/* Opcion A: panel "Gestion del pedido" — siguiente paso, gating y documento */
.head-tools { display:flex; align-items:center; gap:6px; }
.mgmt .card-head { padding:9px 16px; }
.nextstep { padding:9px 16px 11px; border-bottom:1px solid var(--c-divider); background:linear-gradient(180deg, var(--c-wine-soft), var(--c-surface)); }
.nextstep .ns-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--c-wine-text); font-weight:700; margin-bottom:6px; }
/* botones del panel mas compactos */
.mgmt .btn.block { height:30px; font-size:12.5px; }
.mgmt-sec { padding:11px 16px; }
.mgmt-help { font-size:12px; color:var(--c-text-3); line-height:1.45; margin:0 0 10px; }
.section-action { margin-top:11px; }
.gate-hint { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--c-text-4); margin-top:7px; line-height:1.3; }
.gate-hint svg { width:12px; height:12px; flex:0 0 12px; }
.btn.wine-o { color:var(--c-wine); border-color:var(--c-wine); background:var(--c-surface); }
.btn.wine-o:hover:not([disabled]) { background:var(--c-wine-soft); }
.doc-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.doc-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:44px;
    border:1px solid var(--c-border-2); border-radius:var(--r-ctrl); background:var(--c-surface); color:var(--c-text-2);
    font:inherit; font-size:11.5px; font-weight:500; cursor:pointer; text-decoration:none;
    transition:background .15s, border-color .15s, color .15s; }
.doc-btn:hover { background:var(--c-surface-2); border-color:var(--c-text-4); color:var(--c-text); }
.doc-btn svg { width:17px; height:17px; color:var(--c-text-3); }
.doc-btn:hover svg { color:var(--c-text); }
.assign-inline { display:flex; gap:8px; margin-top:4px; }
.assign-inline .select { flex:1; }
/* Variante compacta del valor de KPI (para importes largos en tarjetas angostas) */
.kpi .val.sm { font-size: 22px; }
/* Tabla de renglones del editor: inputs alineados arriba (junto al buscador de producto) */
#renglones td { vertical-align: top; }
#renglones .disp-badge { display: inline-block; margin-top: 8px; }
/* Pie de totales de una tabla (desglose Subtotal/IVA/Total): alineado a la derecha */
.tbl tfoot td { padding: 5px var(--sp-6); border: 0; }
.tbl tfoot td.lbl { text-align: right; color: var(--c-text-3); }
.tbl tfoot td.val { text-align: right; font-family: var(--f-mono); }
.tbl tfoot tr.tot td { border-top: 1px solid var(--c-border-2); padding-top: 9px; padding-bottom: 9px; font-weight: 700; }
.tbl tfoot tr.tot td.lbl { color: var(--c-text); }
.tbl tfoot tr.tot td.val { color: var(--c-wine); font-size: 14px; }

/* ===== Vendedor: panel-resumen lateral pegajoso + barra de pago ===== */
/* Tarjeta lateral que acompana al scroll (Nueva cotizacion, Editar cliente).
   Se queda fija mientras la columna principal (formulario largo) se desplaza. */
.aside-sticky { position: sticky; top: calc(var(--top-h) + var(--sp-7)); align-self: start; }
@media (max-width:1100px){ .aside-sticky { position: static; } }
/* Total destacado al pie de la lista de stats del helper */
.helper .stat.total { border-top:1px solid var(--c-border-2); margin-top: var(--sp-1); padding-top: 12px; }
.helper .stat.total span:first-child { font-weight:600; }
.helper .stat.total .v { font-size:18px; color:var(--c-wine); }
.save-group { display:flex; flex-direction:column; gap: var(--sp-3); margin-top: var(--sp-6); }
/* Pills de atajo del Inicio del vendedor (enlazan a listas filtradas) */
a.pill { cursor:pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
a.pill:hover { background: var(--c-surface-2); border-color: var(--c-text-4); }
a.pill b { font-family: var(--f-mono); font-weight:600; color: var(--c-text); }
a.pill.go { background: var(--c-wine-soft); color: var(--c-wine-text); border-color: var(--c-wine-soft-2); }
a.pill.go:hover { border-color: var(--c-wine); }
a.pill.go b { color: var(--c-wine-text); }
a.pill svg { width:13px; height:13px; }
/* Barra de progreso de cobranza (pagado vs total) */
.paybar { height:8px; border-radius:999px; background:var(--c-surface-3); overflow:hidden; margin: var(--sp-2) 0 var(--sp-3); }
.paybar .fill { height:100%; background:var(--c-success); border-radius:999px; transition:width .4s ease; }
.paystatus { display:flex; align-items:center; gap: var(--sp-3); padding: 9px var(--sp-5); border-radius:var(--r-ctrl);
  background:var(--c-success-soft); border:1px solid var(--c-success-line); color:var(--c-success); font-size:12.5px; font-weight:600; }
.paystatus svg { width:15px; height:15px; }

/* ===== Pestanas (sub-navegacion dentro de una pantalla) ===== */
.tabs { display:flex; gap: var(--sp-2); border-bottom:1px solid var(--c-border); margin-bottom: var(--sp-7); }
.tabs a { padding: var(--sp-3) var(--sp-5); font-size:var(--fz-body); font-weight:500; color:var(--c-text-3);
  border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.tabs a:hover { color: var(--c-text); }
.tabs a.active { color: var(--c-wine); border-bottom-color: var(--c-wine); font-weight:600; }

/* ===== Detalle de cotizacion: tarjeta de cliente enriquecida ===== */
.client-id{display:flex;align-items:center;gap:13px;padding:0 0 14px;border-bottom:1px solid var(--c-divider);margin-bottom:6px;}
.client-id .ci-av{width:44px;height:44px;border-radius:11px;background:var(--c-wine);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:0 0 44px;letter-spacing:.02em;}
.client-id .ci-name{font-size:15.5px;font-weight:600;line-height:1.25;}
.client-id .ci-meta{font-size:12px;color:var(--c-text-3);font-family:var(--f-mono);margin-top:3px;}
/* Datos del cliente compacto: 3 columnas en ancho, menos alto desperdiciado */
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;}
@media (max-width:1280px){ .info-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .info-grid{grid-template-columns:1fr;} }
/* Banda de datos del cliente a todo el ancho: 4 columnas (mas compacta en alto) */
.info-grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1100px){ .info-grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .info-grid.cols4{grid-template-columns:1fr;} }
.info-field{display:flex;flex-direction:column;gap:1px;padding:6px 0;border-bottom:1px solid var(--c-divider);min-width:0;}
.info-field.span2{grid-column:1 / -1;}
.info-grid .info-field:last-child{border-bottom:0;}
.info-field .il{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-4);font-weight:700;}
.info-field .iv{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;}
.info-field .iv.mono{font-family:var(--f-mono);}
.info-field .iv.dim{color:var(--c-text-4);}
@media (max-width:560px){ .info-grid{grid-template-columns:1fr;} }

/* ===== Stepper horizontal (estados del pedido) ===== */
.stepper{display:flex;align-items:flex-start;}
.stepper .st{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;min-width:0;}
.stepper .st::before{content:"";position:absolute;top:8px;left:-50%;width:100%;height:2px;background:var(--c-border-2);z-index:0;}
.stepper .st:first-child::before{display:none;}
.stepper .st.done::before,.stepper .st.current::before{background:var(--c-success);}
.stepper .sd{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--c-border-2);z-index:1;display:grid;place-items:center;}
.stepper .sd svg{width:10px;height:10px;color:#fff;}
.stepper .st.done .sd{background:var(--c-success);border-color:var(--c-success);}
.stepper .st.current .sd{background:var(--c-wine);border-color:var(--c-wine);box-shadow:0 0 0 4px var(--c-wine-soft);}
/* Pago parcial: ambar (no vino) para diferenciar "a medias" de un paso comercial en curso. */
.stepper .st.partial .sd{background:var(--c-warning);border-color:var(--c-warning);box-shadow:0 0 0 4px var(--c-warning-soft);}
.stepper .st.partial .sname{color:var(--c-warning);}
/* Paso cancelado (p. ej. CFDI cancelado): rojo. */
.stepper .st.cancel .sd{background:var(--c-danger);border-color:var(--c-danger);box-shadow:0 0 0 4px var(--c-danger-soft);}
.stepper .st.cancel .sname{color:var(--c-danger);}
.stepper .sname{font-size:11px;font-weight:700;margin-top:8px;letter-spacing:.02em;}
.stepper .st.pending .sname{color:var(--c-text-4);}
.stepper .stime{font-size:10px;color:var(--c-text-4);font-family:var(--f-mono);margin-top:2px;}

/* ===== Factura: representacion impresa (CFDI 4.0) ===== */
.fac-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.fac-toolbar .ttl h1{font-size:20px;}
.fac-toolbar .ttl p{margin:2px 0 0;color:var(--c-text-3);font-size:13px;}
.sheet-wrap{display:flex;justify-content:center;padding-bottom:40px;}
.sheet{background:#fff;width:816px;max-width:100%;border:1px solid var(--c-border);border-radius:8px;box-shadow:var(--sh-pop);padding:46px 52px;color:#1a1816;font-size:12.5px;}
.sheet .f-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;border-bottom:2px solid var(--c-wine);padding-bottom:18px;}
.sheet .f-emisor{display:flex;gap:13px;align-items:flex-start;}
.sheet .f-logo{width:46px;height:46px;border-radius:10px;background:var(--c-wine);color:#fff;display:grid;place-items:center;flex:0 0 46px;}
.sheet .f-logo svg{width:26px;height:26px;}
.sheet .f-name{font-size:17px;font-weight:700;letter-spacing:-.01em;}
.sheet .f-name .dot{color:var(--c-wine);}
.sheet .f-em-meta{font-size:11.5px;color:var(--c-text-2);line-height:1.6;margin-top:3px;}
.sheet .f-doc{text-align:right;flex:0 0 auto;}
.sheet .f-doc .f-tag{display:inline-block;background:var(--c-wine-soft);color:var(--c-wine-text);border:1px solid var(--c-wine-soft-2);font-weight:700;font-size:11px;letter-spacing:.08em;padding:4px 10px;border-radius:6px;}
.sheet .f-doc .f-folio{font-family:var(--f-mono);font-size:19px;font-weight:600;margin-top:8px;}
.sheet .f-doc .f-sub{font-size:11px;color:var(--c-text-3);margin-top:2px;line-height:1.6;}
.f-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px;}
.f-block .f-bh{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--c-text-3);font-weight:700;margin-bottom:7px;border-bottom:1px solid var(--c-divider);padding-bottom:5px;}
.f-row{display:flex;justify-content:space-between;gap:14px;padding:2.5px 0;font-size:12px;}
.f-row .l{color:var(--c-text-3);}
.f-row .v{font-weight:500;text-align:right;}
.f-row .v.mono{font-family:var(--f-mono);}
table.f-tbl{width:100%;border-collapse:collapse;margin-top:20px;font-size:11.5px;}
table.f-tbl th{background:var(--c-surface-2);text-align:left;padding:8px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--c-text-3);border-bottom:1px solid var(--c-border-2);}
table.f-tbl th.r{text-align:right;}
table.f-tbl td{padding:8px 9px;border-bottom:1px solid var(--c-divider);vertical-align:top;}
table.f-tbl td.r{text-align:right;font-family:var(--f-mono);}
table.f-tbl td.clave{font-family:var(--f-mono);color:var(--c-text-3);font-size:11px;}
.f-totals{display:flex;justify-content:flex-end;margin-top:16px;}
.f-sumbox{width:280px;max-width:100%;}
.f-sumbox .f-srow{display:flex;justify-content:space-between;padding:5px 0;font-size:12.5px;}
.f-sumbox .f-srow.tot{border-top:2px solid var(--c-wine);margin-top:5px;padding-top:9px;font-weight:700;font-size:15px;color:var(--c-wine);}
.f-sumbox .v{font-family:var(--f-mono);}
.f-timbre{margin-top:22px;border-top:1px dashed var(--c-border-2);padding-top:16px;}
.f-tdata .f-th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--c-text-3);font-weight:700;margin-bottom:6px;}
.f-tdata .f-trow{display:grid;grid-template-columns:170px 1fr;gap:10px;padding:2px 0;font-size:11px;}
.f-tdata .f-trow .k{color:var(--c-text-3);}
.f-tdata .f-trow .val{font-family:var(--f-mono);word-break:break-all;color:var(--c-text-2);}
.f-note{margin-top:12px;font-size:11px;color:var(--c-text-3);background:var(--c-surface-2);border:1px solid var(--c-divider);border-radius:8px;padding:10px 12px;line-height:1.5;}
.f-foot{margin-top:18px;text-align:center;font-size:10.5px;color:var(--c-text-4);border-top:1px solid var(--c-divider);padding-top:12px;}
@media (max-width:860px){
  .sheet{padding:28px 22px;}
  .f-grid2{grid-template-columns:1fr;gap:14px;}
}
/* ===== Impresion: documento limpio (reportes y factura), NO un screenshot de la pantalla ===== */
.print-head{display:none;}                 /* encabezado solo visible al imprimir (layout/base) */
@media print{
  @page{size:Letter;margin:12mm;}
  html,body{background:#fff !important;}
  /* shell de la app fuera */
  .sidebar,.topbar,.fac-toolbar,.toast-stack,.sidebar-backdrop{display:none !important;}
  .app{display:block !important;}
  .main{margin:0 !important;background:#fff !important;}
  .page{padding:0 !important;max-width:100% !important;}
  /* chrome interactivo de los grids fuera */
  .gtoolbar,.chips,.page-actions,.actions,.pop-wrap,.qf,.tabs,.no-print{display:none !important;}
  /* encabezado del documento: marca + fecha de generacion (el titulo lo pone .page-head) */
  .print-head{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:2px solid #1b1b1b;padding-bottom:6px;margin-bottom:14px;}
  .print-head .ph-brand{font-size:15px;font-weight:600;letter-spacing:-.01em;color:#1b1b1b;}
  .print-head .ph-meta{font-size:10px;color:#555;}
  .page:has(.sheet) .print-head{display:none;}     /* la factura ya es un documento formal */
  .page-head{margin-bottom:10px;align-items:flex-start;}
  .page-head .ttl h1{font-size:17px;}
  .page-head .ttl h1 svg{display:none;}
  .page-head .ttl p{font-size:10.5px;}
  /* KPIs como franja compacta de una sola fila (el ancho de papel dispara los breakpoints moviles) */
  .kstrip{box-shadow:none !important;border:1px solid #bbb;border-radius:0;background:#bbb;break-inside:avoid;
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr)) !important;}
  .kcell{padding:7px 10px !important;background:#fff !important;}
  .kcell .val{font-size:13px !important;}
  .kcell .lbl{font-size:9px !important;}
  .kcell .foot,.kcell .meta{font-size:8.5px !important;}
  /* tablas: completas (sin scroll), compactas, con encabezado repetido por pagina */
  .tbl-wrap{overflow:visible !important;border:1px solid #ccc;border-radius:0;}
  .card,.kpi{box-shadow:none !important;break-inside:avoid;}
  .card{border:1px solid #ccc;border-radius:0;}
  .grid.c-2-1,.grid.c-3-2,.grid.cols-2{display:block;}
  .grid.c-2-1 > *,.grid.c-3-2 > *,.grid.cols-2 > *{margin-bottom:10px;}
  table.tbl{font-size:9.5px !important;}
  .tbl thead{display:table-header-group;}
  .tbl thead th{position:static !important;font-size:8.5px !important;padding:4px 7px !important;}
  .tbl tbody td{font-size:9.5px !important;padding:4px 7px !important;}
  .tbl .mono,.tbl td.r{white-space:nowrap;}
  .tbl tr{break-inside:avoid;}
  .tbl a{color:inherit !important;text-decoration:none !important;}
  .tbl .sort .ar{display:none;}
  .subtbl{font-size:9px;}
  .badge{background:#fff !important;border:1px solid #aaa;color:#222 !important;}
  .chart-box,.legend{break-inside:avoid;}
  /* factura imprimible (hoja formal) */
  .sheet-wrap{padding:0 !important;}
  .sheet{box-shadow:none !important;border:0 !important;border-radius:0 !important;width:100% !important;max-width:100% !important;padding:0 !important;}
}

/* ============================================================================
   MOVIL (<=640px). Convencion de breakpoints del sitio:
     640  telefono — grids opt-in (.tbl.m-cards) como tarjetas; utilidades .m-only/.m-hide
     900  tablet   — sidebar como drawer (seccion al final del archivo)
     1100 laptop   — apilado de columnas (.form-layout, .editor-grid, .cols-*)
   SIEMPRE `screen and` en esta seccion: al imprimir el viewport es el ancho del papel
   (~816px Carta) y las tablas deben seguir siendo tablas (ver @media print).
   ========================================================================== */
/* Piezas que solo existen en movil (el JS las inyecta siempre; aqui se apagan en escritorio) */
.m-more { display: none; }
.gsort { display: none; }
.m-only { display: none; }

@media screen and (max-width: 640px) {
  .m-hide { display: none !important; }
  .m-only { display: revert; }
  .gsort { display: block; }

  /* ---- Grid como tarjetas apiladas (opt-in: <table class="tbl m-cards">) ---- */
  .tbl-wrap:has(> .tbl.m-cards) { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  table.tbl.m-cards { display: block; background: transparent; }
  .tbl.m-cards thead { display: none; }   /* se conserva en el DOM: alimenta el menu Ordenar */
  .tbl.m-cards tbody { display: block; }
  .tbl.m-cards tbody tr { display: block; position: relative; background: #fff;
    border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--sh-base);
    padding: 10px 12px 8px; margin-bottom: 10px; }
  .tbl.m-cards tbody tr:hover { background: #fff; }
  .tbl.m-cards tbody td { display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 2px 0; border-bottom: 0; }
  .tbl.m-cards tbody td[data-th]::before { content: attr(data-th); color: var(--c-text-3);
    font-size: 11.5px; font-weight: 500; flex: 0 0 auto; }
  /* La primera celda (sea data-th o td-primary) libera el hueco arriba-derecha del boton (...) */
  .tbl.m-cards tbody tr > td:first-child { padding-right: 34px; }
  /* Titulo de la tarjeta: sin etiqueta, tipografia mayor; hueco a la derecha para el boton (...) */
  .tbl.m-cards tbody td.td-primary { display: block; font-size: 14.5px; font-weight: 600;
    padding: 0 34px 4px 0; }
  .tbl.m-cards tbody td.td-primary .m-more { margin-left: 7px; }
  /* Acciones (menu ...) arriba a la derecha; el menu ya se posiciona con position:fixed via JS */
  .tbl.m-cards tbody td.acciones { position: absolute; top: 6px; right: 8px; width: auto; padding: 0; }
  .tbl.m-cards tbody td.acciones::before { content: none; }
  /* Campos secundarios tras el boton "mas" */
  .tbl.m-cards tbody td.td-more { display: none; }
  .tbl.m-cards tbody tr.open td.td-more { display: flex; }
  .m-more { display: inline-flex; align-items: center; border: 0; background: none;
    color: var(--c-wine); font-size: 12px; font-weight: 600; cursor: pointer; padding: 3px 0 0; }
  /* Fila "Sin resultados" y filas de agrupacion: texto plano */
  .tbl.m-cards tbody td[colspan] { display: block; }
  /* Pie de totales (tfoot de reportes) como bloque compacto */
  .tbl.m-cards tfoot { display: block; background: #fff; border: 1px solid var(--c-border);
    border-radius: var(--r-card); padding: 6px 12px; }
  .tbl.m-cards tfoot tr { display: flex; justify-content: space-between; gap: 12px; }
  .tbl.m-cards tfoot td { padding: 4px 0; }

  /* ---- Popovers de filtros/Ordenar: hoja anclada al viewport (no se salen de pantalla) ---- */
  .pop-wrap .pop { position: fixed; left: 12px; right: 12px; top: 110px; min-width: 0;
    max-height: 72vh; overflow: auto; z-index: 70; }
  .pop.menu a { white-space: normal; }

  /* ---- Desbordes de texto ---- */
  .chip { max-width: 100%; }
  .chip b { display: inline-block; max-width: 45vw; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; vertical-align: bottom; }
  .brk { word-break: break-all; }   /* UUID, referencias largas sin espacios */

  /* ---- Toolbar del grid: la busqueda toma su propia fila completa ---- */
  .gtoolbar .search { flex: 1 1 100%; min-width: 0; }

  /* ---- Encabezado de pagina: titulo + botones de accion apilan en vez de desbordar ---- */
  .page-head { flex-wrap: wrap; }
  .page-actions { flex-wrap: wrap; }
  /* ---- Filas genericas (.row): envuelven en vez de desbordar (selectores de periodo, forms inline) ---- */
  .row { flex-wrap: wrap; }
  /* ---- KPIs .cols-4 (kpi cards, no kstrip): 2 columnas de 144px no alcanzan para montos grandes ---- */
  .cols-4 { grid-template-columns: 1fr; }
}

/* ===== Sidebar como cajon deslizable (drawer) en movil — AL FINAL para ganar a .app.collapsed ===== */
@media (max-width: 900px) {
  .topbar .menu-toggle { display: inline-flex; }
  /* el sidebar sale de pantalla y se desliza al abrir; nunca en modo icono-solo en movil */
  .app.collapsed { --side-w: 240px; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease; }
  .app.nav-open .sidebar { transform: none; box-shadow: 0 10px 40px rgba(0,0,0,.28); }
  /* en movil el cajon se ve completo aunque este 'collapsed' en escritorio */
  .app.collapsed .brand-name, .app.collapsed .nav-label, .app.collapsed .nav-link .lbl,
  .app.collapsed .nav-link .count, .app.collapsed .nav-sublink,
  .app.collapsed .side-foot .who, .app.collapsed .side-credit { display: revert; }
  .app.collapsed .nav-link { justify-content: flex-start; padding: 7px var(--sp-4); }
  .app.collapsed .nav-link svg { width: 18px; height: 18px; flex-basis: 18px; }  /* en el cajon, iconos normales */
  .app.collapsed .nav { padding: var(--sp-4); }
  .app.collapsed .brand { justify-content: space-between; padding: 16px var(--sp-6); }
  .app.collapsed .collapse-btn { display: none; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 55; }
  .app.nav-open .sidebar-backdrop { display: block; }
  /* topbar mas compacto en movil: menos padding/gap y breadcrumb solo con la seccion actual */
  .topbar { gap: var(--sp-4); padding: 0 var(--sp-5); }
  .crumbs .crumb-root, .crumbs .sep { display: none; }
}

/* ===== Telefono: el header deja solo iconos (En linea -> punto, Salir -> icono) para ganar espacio ===== */
@media (max-width: 560px) {
  .topbar { gap: var(--sp-3); padding: 0 var(--sp-4); }
  .btn-logout { gap: 0; width: 34px; padding: 0; justify-content: center; }
  .btn-logout .logout-txt { display: none; }
}

/* Celdas editables con doble clic (precio/cantidad en pedido GENERADO) */
.tbl td.editable{cursor:pointer;}
.tbl td.editable:hover{background:var(--c-gold-bg, #fdf6e3); box-shadow:inset 0 0 0 1px var(--c-border);}

/* ===== Editor de cotizacion: captura profesional (rediseno 2026-06-07) ===== */
.editor-wide{display:grid;grid-template-columns:1fr 250px;gap:16px;align-items:stretch;}
.editor-wide .prod-card,.editor-wide .notas-int{grid-column:1 / -1;}
.editor-wide .res-card .helper{height:100%;display:flex;flex-direction:column;justify-content:flex-start;}
/* Card de resumen: título dentro de la caja */
.resumen-min .res-title{ font-size:13px; font-weight:600; color:var(--c-text); margin-bottom:8px;
    padding-bottom:7px; border-bottom:1px solid var(--c-border); }
/* Card de productos del EDITOR: no recortar el dropdown del buscador */
.prod-card--edit{ overflow:visible; }
.prod-card--edit .card-body.flush{ overflow:visible; }
/* Producto elegido: el buscador se ve como texto (doble clic para cambiarlo) */
#renglones td .ac-input.astext{ border-color:transparent; background:transparent; box-shadow:none; padding-left:4px; }
@media (max-width: 980px){ .editor-wide{grid-template-columns:1fr;} .editor-wide .prod-card,.editor-wide .notas-int{grid-column:1;} }
/* Encabezado: fila 1 = solo Cliente (ancho completo, la fecha y la factura viven
   dentro de la banda .cli-band). Fila 2 mantiene Notas/Vendedor/flags en columnas. */
.enc-row{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;}
.enc-row2{display:grid;grid-template-columns:1fr 180px 180px;gap:14px;align-items:start;}
@media (max-width: 820px){ .enc-row2{grid-template-columns:1fr;} }
.cli-ctx{margin-top:5px;font-size:12px;color:var(--c-text-3);min-height:15px;}
.cli-vencido{color:var(--c-danger);font-weight:600;}
.flag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:400;color:var(--c-text-2);white-space:nowrap;cursor:pointer;}
/* Columna Stock: numero de color (verde alcanza / naranja pocos / rojo sin stock) */
.stk{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono,monospace);font-size:12.5px;cursor:default;}
.sdot{width:9px;height:9px;border-radius:50%;background:var(--c-border);flex:none;}
.sdot.ok{background:var(--c-success);}
.sdot.low{background:var(--c-warning);}
.stk-num{font-family:var(--font-mono,monospace);font-weight:600;font-size:13px;color:var(--c-text-4);cursor:default;}
.stk-num.ok{color:var(--c-success);}
.stk-num.pocos{color:var(--c-warning);}
.stk-num.sin{color:var(--c-danger);}
/* Cliente elegido como texto (igual que producto) */
#cliCell .ac-input.astext{ border-color:transparent; background:transparent; box-shadow:none; }
/* Notas del cliente: nace en modo texto (doble clic para editar, igual que producto/cliente) */
.notas-edit.astext{ border-color:transparent; background:transparent; box-shadow:none; }
/* Fecha como texto; doble clic muestra el calendario nativo */
.date-cell .datedisp{ display:block; cursor:pointer; padding:7px 11px; border:1px solid transparent;
    border-radius:var(--r-ctrl); font-size:13px; }
.date-cell .datedisp:hover{ background:var(--c-surface-2); }
/* Distintivo sutil de editable por doble clic: pequeño triangulo (esquina sup. der.) en color vino */
.celldisp, .date-cell .datedisp, .ed-cant.editable, .ed-precio.editable, .input.astext,
.fxf[data-name] .fxv{
    background-image: linear-gradient(to bottom left, var(--c-wine) 50%, transparent 50%) !important;
    background-repeat: no-repeat !important; background-position: top right !important; background-size: 4px 4px !important; }
/* Fecha de pago dentro de la banda de datos del cliente: compacta */
.cb-f .iv.date-cell{ display:inline-flex; align-items:center; }
.cb-f .iv.date-cell .datedisp{ padding:0; border:0; font-size:12px; font-family:var(--font-mono,monospace); }
.cb-f .iv.date-cell .datein{ height:26px; font-size:12px; }
/* Boton trash por renglon */
.rg-del{color:var(--c-text-4);}
.rg-del:hover{color:var(--c-danger);}
/* Resumen minimo: solo totales */
.resumen-min .stat{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;}
.resumen-min .stat .v{font-family:var(--font-mono,monospace);}
.resumen-min .stat.total{border-top:1.5px solid var(--c-wine);margin-top:6px;padding-top:9px;font-weight:700;font-size:15px;}
/* Notas internas plegadas */
.notas-int summary{cursor:pointer;font-size:12.5px;color:var(--c-text-3);margin-bottom:8px;}
/* Bitacora del pedido (Notas internas) */
.hist{display:flex;flex-direction:column;gap:5px;}
.hist-row{display:flex;align-items:baseline;gap:10px;font-size:12px;line-height:1.35;}
.hist-f{font-family:var(--f-mono);color:var(--c-text-4);font-size:11px;white-space:nowrap;flex:0 0 auto;}
.hist-a{color:var(--c-text-2);flex:1 1 auto;}
.hist-u{color:var(--c-text-4);font-size:11px;flex:0 0 auto;}
/* La tabla pegada al fondo de la card respeta el redondeo */
.card-body.flush{border-radius:0 0 14px 14px;overflow:hidden;}
/* Pero si el card "flush" contiene un autocompletar, NO recortar: el .ac-menu (dropdown
   absoluto) quedaba oculto detras del card y solo se veia ~1 resultado. Fix global para
   todos los buscadores dentro de un card flush (recepcion, etc.). Ver ERRORES-CONOCIDOS.md. */
.card-body.flush:has(.ac-cell){overflow:visible;}
/* Inputs numericos del grid: sin spinners (limpieza visual), alineados a la derecha */
.tbl input.num::-webkit-outer-spin-button, .tbl input.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.tbl input.num{-moz-appearance:textfield;appearance:textfield;text-align:right;}

.cli-warn{ font-size:12px; color:#92400e; background:#fef3c7; border:1px solid #fcd34d;
           border-radius:6px; padding:4px 8px; margin-top:4px; }
.cli-warn .cli-sim{ border:1px solid #d97706; background:#fff; color:#92400e;
           border-radius:5px; padding:1px 7px; margin:0 2px; cursor:pointer; font-size:12px; }
.cli-warn .cli-sim:hover{ background:#fde68a; }

/* Líneas de producto: inputs que se ven como texto y se editan con doble clic */
#renglones td .num.celled{ border:1px solid transparent; background:transparent; text-align:right;
    padding:2px 4px; box-shadow:none; -moz-appearance:textfield; }
#renglones td .num.celled::-webkit-outer-spin-button,
#renglones td .num.celled::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#renglones td .num.celled:not([readonly]){ border-color:var(--c-wine); background:var(--c-surface); }
#renglones td, #renglones th{ vertical-align:middle; }
#renglones td.imp, #renglones td .num.celled{ line-height:28px; }
.icon-btn.sm{ width:24px; height:24px; }
.icon-btn.sm svg{ width:13px; height:13px; }
.unit-tag{ display:inline-block; margin-left:6px; font-size:10px; font-weight:600; color:var(--c-wine);
    background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:5px; padding:0 6px; }

/* --- Líneas del editor: producto+chip en línea, celdas como texto, columnas delimitadas --- */
#renglones td, #renglones th{ font-size:12px; }
#renglones tbody td, #renglones thead th{ border-left:1px solid var(--c-divider); }
#renglones tbody td:first-child, #renglones thead th:first-child{ border-left:none; }
.prod-line{ display:flex; align-items:center; gap:8px; }
.prod-line .ac-cell{ flex:1 1 auto; min-width:0; }
.prod-line .unit-sel{ flex:0 0 auto; font-size:11px; font-weight:600; color:var(--c-wine);
    border:1px solid var(--c-border); border-radius:6px; padding:2px 6px; background:var(--c-surface-2); cursor:pointer; }
.unit-chip{ flex:0 0 auto; font-size:10px; font-weight:600; color:var(--c-wine); white-space:nowrap;
    background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:5px; padding:1px 7px; }
#renglones td.cell-edit{ padding:0; }
.celldisp{ display:block; text-align:right; cursor:pointer; padding:6px 8px; line-height:1.4;
    font-family:var(--f-mono); white-space:nowrap; }
.celldisp:hover{ background:var(--c-surface-2); }
#renglones td.cell-edit .celledit{ text-align:right; padding:4px 6px; }

/* --- Switch component (editor flags: Factura / Bonificacion) --- */
.switch{ position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch .track{ width:38px; height:22px; border-radius:11px; background:var(--c-border); transition:.15s; flex:0 0 auto; position:relative; }
.switch .track::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
/* ~ (no +) porque th:field inserta un <input type=hidden> entre el checkbox y el track */
.switch input:checked ~ .track{ background:var(--c-wine); }
.switch input:checked ~ .track::after{ transform:translateX(16px); }

/* --- Editor flags: evitar desbordamiento sobre la tarjeta de totales --- */
.enc-flags{ min-width:0; }
.enc-flags .row{ flex-wrap:wrap; }

/* --- Dialogo Facturar (CFDI): receptor editable con doble clic + secciones --- */
.fxsec{ border:1px solid var(--c-divider); border-radius:var(--r-ctrl); padding:11px 13px; margin-bottom:11px; }
.fxsec:last-child{ margin-bottom:0; }
.fxhead{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.fxlbl{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-4); font-weight:700; }
.fxgrid{ display:grid; grid-template-columns:1fr 1fr; gap:7px 14px; }
.fxf label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-text-4); margin-bottom:2px; }
.fxf .fxv{ display:block; font-size:13px; padding:3px 0; min-height:22px; cursor:text; border-bottom:1px dashed transparent; }
/* el triangulo vino de "editable con doble clic" lo aporta la regla compartida (.celldisp, ...) */
.fxf:not(.edit) .fxv:hover{ border-bottom-color:var(--c-border); }
.fxf .fxv[data-value=""]{ color:var(--c-text-4); }
.fxf input, .fxf select{ display:none; height:30px; font-size:13px; }
.fxf.edit .fxv{ display:none; }
.fxf.edit input, .fxf.edit select{ display:block; width:100%; }
.fxhint{ font-size:11px; color:var(--c-text-4); margin-top:8px; line-height:1.4; }
.fxwarn{ font-size:12px; color:var(--c-gold); background:var(--c-gold-bg); border-radius:var(--r-ctrl);
  padding:7px 10px; margin-top:8px; font-weight:500; }

/* Tooltip instantaneo del sidebar colapsado (div fixed: escapa el overflow del sidebar) */
.nav-tip{ position:fixed; transform:translateY(-50%); background:#26231f; color:#fff; font-size:12px;
  font-weight:500; padding:4px 10px; border-radius:6px; z-index:200; pointer-events:none;
  opacity:0; transition:opacity .08s; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.nav-tip.show{ opacity:1; }

/* --- Boton de iconos: ojo de la linea de tiempo (alterna abierto/cerrado) --- */
.tl-toggle .ico-off { display:none; }
.tl-toggle.on .ico-on { display:none; }
.tl-toggle.on .ico-off { display:inline; }
.tl-toggle.on { background:var(--c-wine-soft); color:var(--c-wine); border-color:var(--c-wine-line,#e7c9cd); }

/* --- Linea de tiempo lateral (drawer) del pedido --- */
.tl-backdrop { position:fixed; inset:0; background:rgba(20,18,16,.38); opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s; z-index:90; }
.tl-backdrop.show { opacity:1; visibility:visible; }
.tl-drawer { position:fixed; top:0; right:0; height:100vh; width:380px; max-width:92vw; background:var(--c-surface,#fff);
  box-shadow:-8px 0 28px rgba(0,0,0,.16); transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:91; display:flex; flex-direction:column; }
.tl-drawer.open { transform:translateX(0); }
.tl-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px;
  border-bottom:1px solid var(--c-divider); flex:0 0 auto; }
.tl-head h3 { font-size:15px; font-weight:650; letter-spacing:-.01em; }
.tl-body { padding:18px; overflow-y:auto; flex:1; }
/* Timeline vertical: linea + nodos */
.tl { list-style:none; margin:0; padding:0; position:relative; }
.tl::before { content:''; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background:var(--c-divider); }
.tl-item { position:relative; padding:0 0 16px 26px; }
.tl-item:last-child { padding-bottom:0; }
.tl-dot { position:absolute; left:0; top:3px; width:14px; height:14px; border-radius:50%; background:var(--c-wine);
  border:3px solid var(--c-surface,#fff); box-shadow:0 0 0 1px var(--c-wine-line,#e7c9cd); }
.tl-card { background:var(--c-surface-2); border:1px solid var(--c-divider); border-radius:10px; padding:9px 11px; }
.tl-acc { font-size:13px; font-weight:600; color:var(--c-text); }
.tl-det { font-size:12.5px; color:var(--c-text-3); margin-top:2px; line-height:1.4; }
.tl-meta { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:11px; color:var(--c-text-4); font-family:var(--f-mono); }
.tl-user { background:var(--c-surface-3); color:var(--c-text-3); padding:1px 7px; border-radius:999px; font-family:inherit; }
.tl-note { margin-top:16px; padding:11px 13px; background:var(--c-gold-bg); border:1px solid var(--c-gold-line,#e8d9a8); border-radius:10px; }
.tl-note-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--c-gold); font-weight:700; margin-bottom:4px; }
.tl-note p { font-size:13px; white-space:pre-wrap; margin:0; color:var(--c-text-2); }

/* --- Selector de foto estilo "tomar foto" (repartidor y entrega directa del vendedor) --- */
.foto-take { width:100%; padding:11px; border:1.5px dashed var(--c-border); border-radius:10px; background:var(--c-surface-2);
  font-weight:600; font-size:13px; color:var(--c-text-2); display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.foto-take:hover { border-color:var(--c-text-4); background:var(--c-surface-3); }
.foto-take[disabled] { opacity:.5; }
.deliv-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 8px; }
.deliv-thumbs img { width:56px; height:56px; object-fit:cover; border-radius:9px; border:1px solid var(--c-border); }

/* --- Indicador de modo facturación simulada (chip en el topbar, junto a "En linea") --- */
.sim-flag{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:8px;
    color:#9a6a00;background:#fff3cd;border:1px solid #ffe08a;
    cursor:help;flex:0 0 auto;
}
.sim-flag svg{width:17px;height:17px;}
.sim-flag:focus{outline:2px solid #ffce4d;outline-offset:1px;}