/* ==================================================================================================
   Partner feedback · F8 global y F3 compra (2026-11-11). base.html lo carga DESPUÉS de app.css y
   desktop.css y ANTES del CSS de cada página. Sólo tokens y clases existentes: sin inline, sin JS,
   sin degradés. Un acento chico por sección (punto del título, eyebrow, ítem activo); el estado
   sigue siendo texto.
   ================================================================================================== */

/* 1. Archivo en toda la UI. Fraunces sigue declarada en app.css pero ya nadie la pide, así que el
      navegador no la descarga. */
:root { --font-display: var(--font-ui); }

/* 2. Acento por sección: base.html pone `body.sec-*` según el namespace de la URL. Stock es oliva,
      no Compras. Neutro (Inicio, Actividad, Usuarios…) deja el vino de siempre en el menú. */
body {
  --sec-strong: var(--primary);
  --sec-soft: var(--primary-subtle);
  --sec-dot: var(--border-strong, #BAB0B7);
  --sec-ink: var(--text-muted);
}
body.sec-ventas   { --sec-strong: #5E1B2E; --sec-soft: #F6EEF1; --sec-dot: #5E1B2E; --sec-ink: #5E1B2E; }
body.sec-compras  { --sec-strong: #17616B; --sec-soft: #EAF3F4; --sec-dot: #17616B; --sec-ink: #17616B; }
body.sec-stock    { --sec-strong: #5A6324; --sec-soft: #F1F3E6; --sec-dot: #5A6324; --sec-ink: #5A6324; }
body.sec-finanzas { --sec-strong: #2C4A80; --sec-soft: #ECF0F7; --sec-dot: #2C4A80; --sec-ink: #2C4A80; }

/* 3. Escala: cuerpo 14/20, título de página 24/30 semibold. Los controles mantienen su
      `--control-font` (16 en el teléfono, sin zoom de iOS). */
body { font-size: 14px; line-height: 20px; }
h1, .display { font: 600 24px/30px var(--font-ui); letter-spacing: -0.01em; }
h2, h3, .card__title, .sheet__title, .topbar__brand { font-family: var(--font-ui); font-weight: 600; }

/* 4. Cifras tabulares donde hay plata o cantidades. */
.row__amount, .record-cell, .stat__value, .metric__value, .kpi__value, .bulk-bar__count, .bulk-bar__detail,
td, th, time, input[type="number"], .compras-summary__rows dd, .compras-stock__qty { font-variant-numeric: tabular-nums; }

/* 5. Acentos chicos. */
.eyebrow { color: var(--sec-ink); }
.card__title::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px;
  background: var(--sec-dot); vertical-align: 0.08em; flex: none;
}
.sidebar__item.is-active { background: var(--sec-soft); color: var(--sec-strong); box-shadow: inset 3px 0 var(--sec-strong); }

/* 6. Marca: la copa original (PNG estático). Teléfono: 18×25 en la barra vino. */
.topbar__brand { display: inline-flex; align-items: center; gap: 8px; }
.topbar__mark { display: block; flex: none; width: 18px; height: 25px; object-fit: contain; }
@media (min-width: 900px) {
  .sidebar__brand { font: 600 17px/1.2 var(--font-ui); }
  .brand-mark { padding: 0; font-size: 0; border-radius: var(--radius-md, 10px); }
  .brand-mark img { display: block; width: 20px; height: 28px; object-fit: contain; }
}

/* 7. F3 compra: «Agregar producto» (primaria) + «Agregar texto» debajo de las filas. A 390 se
      apilan a lo ancho; cada uno conserva el alto táctil. */
.compras-add { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); }
.compras-add .btn { flex: 1 1 10rem; min-height: var(--tap); }
.compras-side { display: none; }

.compras-summary__rows { margin: 0; }
.compras-summary__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3, 12px); padding: 6px 0; border-bottom: 1px solid var(--border); }
.compras-summary__rows > div[hidden] { display: none; }
.compras-summary__rows dt { color: var(--text-muted); }
.compras-summary__rows dd { margin: 0; text-align: right; white-space: nowrap; }
.compras-summary__rows > .compras-summary__total { border-bottom: 0; padding-top: 10px; }
.compras-summary__total dt, .compras-summary__total dd { color: var(--text); font-size: 16px; font-weight: 650; }

.compras-stock__rows { margin: 0 0 var(--space-2, 8px); padding: 0; list-style: none; }
.compras-stock__rows li { display: flex; justify-content: space-between; gap: var(--space-3, 12px); padding: 6px 0; border-bottom: 1px solid var(--border); }
.compras-stock__rows li[hidden] { display: none; }
.compras-stock__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compras-stock__qty { flex: none; color: var(--sec-strong); font-weight: 600; }

@media (min-width: 1280px) {
  .compras-main { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-5, 20px); align-items: start; margin-bottom: var(--space-4, 16px); }
  .compras-main > .compras-products { margin-bottom: 0; }
  .compras-side { display: flex; flex-direction: column; gap: var(--space-4, 16px); position: sticky; top: calc(var(--topbar-h) + 16px); }
  .compras-side > .card { margin: 0; }
  .compras-add .btn { flex: 0 0 auto; }
  /* La columna izquierda mide ~640-780 px: sin el mínimo de 850 de desktop.css no aparece scroll lateral. */
  .page-lines .compras-main .lines--grid .lines-head,
  .page-lines .compras-main .lines--grid .row--line-entry { min-width: 0; }
  .compras-main .lines--purchase { --line-cols: minmax(9rem, 1fr) 4.5rem 8.5rem 7.5rem 2.75rem; }
  .compras-main .lines--purchase.lines--iva { --line-cols: minmax(9rem, 1fr) 4.5rem 8.5rem 5rem 7.5rem 2.75rem; }
}