/* =====================================================================
   typography-premium.css — Capa tipográfica premium · v2.2
   ---------------------------------------------------------------------
   Aplica principios de Emil Kowalski (craft details), impeccable/typeset
   (modular scale, font features, optical sizing) y frontend-design
   (deliberate pairing, intentional weights, memorable type treatment).

   Carga DESPUÉS de manager.css para máxima prioridad.
   No redefine --bc-font-* (single source of truth en manager.css),
   solo refina cómo se renderizan: features, spacing, rendering, scale.
   ===================================================================== */

/* ── 1. Premium font rendering ────────────────────────────────────
   -webkit-font-smoothing: antialiased → edges más limpios en macOS
   text-rendering: optimizeLegibility → kerning + ligatures activos
   font-optical-sizing: auto → variable fonts ajustan al tamaño */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

/* ── 2. Font feature settings por rol ─────────────────────────────
   Body: kerning + ligatures + contextual alternates (cursivas en es)
   Display: kerning + discretionary ligatures (apertura estética)
   Serif: kerning + oldstyle figures para texto corrido
   Mono: tabular nums (alineación en tablas/precios) */
body,
.bc-page-title,
.bc-card-title,
.btn,
.bcd-order-card,
.track-card {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
}

.bc-display,
.bc-brand,
.login-title,
.kds-brand-title,
.bcd-topbar-brand,
.track-brand-title {
  font-feature-settings: 'kern' 1, 'dlig' 1, 'case' 1;
}

.bc-font-serif,
.kpi-value,
.pos-product-price,
.pos-cart-totals-total strong,
.pos-checkout-total strong,
.empty-title,
.bc-page-title em,
.login-title em {
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
}

code, kbd, pre,
.bc-font-mono,
.bc-kbd,
.bc-now-clock,
.bc-sidebar-ver,
.bcd-order-num,
.bcd-gps-coord,
.bcd-price,
.track-order-num {
  font-feature-settings: 'tnum' 1, 'zero' 1, 'cv01' 1;
}

/* ── 3. Modular type scale (1.250 — Major Third) ──────────────────
   Escala modular basada en 1rem (16px) con ratio 1.250.
   Cada paso es fluido via clamp() para responsive sin media queries.
   Tokens nombrados semánticamente para uso directo. */
:root {
  /* Type scale — Major Third (1.250) */
  --bc-fs-xs:    clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);   /* 11.25-13.8px */
  --bc-fs-sm:    clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);  /* 13.1-15.9px */
  --bc-fs-base:  1rem;                                         /* cuerpo = root 15-17px */
  --bc-fs-md:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);      /* 16-17px */
  --bc-fs-lg:    clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem);   /* 18-20px */
  --bc-fs-xl:    clamp(1.25rem, 1.18rem + 0.35vw, 1.4375rem);  /* 20-23px */
  --bc-fs-2xl:   clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);       /* 24-28px */
  --bc-fs-3xl:   clamp(1.875rem, 1.72rem + 0.78vw, 2.25rem);   /* 30-36px */
  --bc-fs-4xl:   clamp(2.25rem, 2rem + 1.25vw, 2.875rem);      /* 36-46px */
  --bc-fs-5xl:   clamp(2.75rem, 2.4rem + 1.75vw, 3.5rem);      /* 44-56px */

  /* Line-height tokens (Emil Kowalski: tighter for display, looser for body) */
  --bc-lh-tight:    1.05;  /* display headings, KPI values */
  --bc-lh-snug:     1.2;   /* card titles, subtitles */
  --bc-lh-normal:   1.45;  /* body text, descriptions */
  --bc-lh-relaxed:  1.625; /* long-form reading, help text */
  --bc-lh-loose:    1.8;   /* very wide spacing, special */

  /* Letter-spacing tokens (frontend-design: intentional spacing per role) */
  --bc-ls-display:  0.04em;   /* Bebas Neue — needs air */
  --bc-ls-heading:  -0.025em; /* Montserrat bold — tighten */
  --bc-ls-body:     -0.005em; /* Montserrat regular — slight tighten */
  --bc-ls-caption:  0.02em;   /* small text — open up */
  --bc-ls-eyebrow:  0.14em;   /* uppercase labels — wide */
  --bc-ls-mono:     0;        /* mono — neutral */

  /* Font weight tokens (deliberate, not arbitrary) */
  --bc-fw-regular:   400;
  --bc-fw-medium:    500;
  --bc-fw-semibold:  600;
  --bc-fw-bold:      700;
  --bc-fw-heavy:     800;
}

/* ── 4. Heading refinements ───────────────────────────────────────
   frontend-design: headings carry personality, set clear type scale. */
h1 {
  font-size: var(--bc-fs-3xl);
  font-weight: var(--bc-fw-heavy);
  letter-spacing: var(--bc-ls-heading);
  line-height: var(--bc-lh-tight);
}
h2 {
  font-size: var(--bc-fs-2xl);
  font-weight: var(--bc-fw-bold);
  letter-spacing: var(--bc-ls-heading);
  line-height: var(--bc-lh-snug);
}
h3 {
  font-size: var(--bc-fs-xl);
  font-weight: var(--bc-fw-bold);
  letter-spacing: var(--bc-ls-heading);
  line-height: var(--bc-lh-snug);
}
h4 {
  font-size: var(--bc-fs-lg);
  font-weight: var(--bc-fw-semibold);
  letter-spacing: var(--bc-ls-heading);
  line-height: var(--bc-lh-snug);
}
h5 {
  font-size: var(--bc-fs-md);
  font-weight: var(--bc-fw-semibold);
  letter-spacing: var(--bc-ls-body);
  line-height: var(--bc-lh-normal);
}
h6 {
  font-size: var(--bc-fs-base);
  font-weight: var(--bc-fw-semibold);
  letter-spacing: var(--bc-ls-body);
  line-height: var(--bc-lh-normal);
}

/* ── 5. Body text refinements ───────────────────────────────────── */
body {
  font-size: var(--bc-fs-base);
}
p {
  line-height: var(--bc-lh-normal);
  letter-spacing: var(--bc-ls-body);
}
small, .text-sm, .form-text {
  font-size: var(--bc-fs-sm);
  letter-spacing: var(--bc-ls-caption);
  line-height: var(--bc-lh-normal);
}
figcaption, .text-xs {
  font-size: var(--bc-fs-xs);
  letter-spacing: var(--bc-ls-caption);
  line-height: var(--bc-lh-normal);
}

/* ── 6. Eyebrow / overline labels (impeccable: structural device) ─
   Uppercase labels above headings — encode hierarchy, not decorate. */
.bc-eyebrow,
.bc-section-label,
.bcd-section-label,
.track-eyebrow {
  font-size: var(--bc-fs-xs);
  font-weight: var(--bc-fw-semibold);
  letter-spacing: var(--bc-ls-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  color: var(--bc-text-muted);
}

/* ── 7. Numeric display (Emil Kowalski: tabular nums for data) ────
   KPIs, precios, totales, contadores → tabular nums lining figures
   para alineación perfecta en columnas y tablas. */
.kpi-value,
.bc-ord-total,
.bcd-order-total,
.bcd-price,
.bcd-distance,
.bcd-eta,
.track-order-num,
.pos-product-price,
.pos-cart-totals-total,
.pos-checkout-total,
.bc-livemap-stats strong,
.bc-21st-counter {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ── 8. Display font refinements (Bebas Neue) ─────────────────────
   Bebas Neue es condensed → necesita letter-spacing positivo y
   line-height muy tight para sensación editorial premium. */
.bc-display,
.bc-brand,
.login-title,
.kds-brand-title,
.bcd-topbar-brand,
.track-brand-title {
  letter-spacing: var(--bc-ls-display);
  line-height: var(--bc-lh-tight);
}

/* ── 9. Serif refinements (Playfair Display) ──────────────────────
   Playfair es high-contrast → oldstyle figures en texto corrido,
   lining figures en datos numéricos. Italic para acentos de marca. */
.bc-font-serif,
.kpi-value,
.pos-product-price,
.empty-title,
.bc-page-title em,
.login-title em,
.kds-brand-title em {
  letter-spacing: -0.01em;
  line-height: var(--bc-lh-tight);
}
/* Pero cuando serif se usa para números (KPIs, precios), lining nums */
.kpi-value,
.pos-product-price,
.pos-cart-totals-total strong,
.pos-checkout-total strong,
.bc-livemap-stats strong {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* ── 10. Button typography (Emil Kowalski: feel responsive) ───────
   Botones: peso semibold, letter-spacing ligeramente positivo,
   transición de color con ease-out custom (no ease-in nunca). */
.btn,
.bcd-action-btn,
.bcd-status-btn,
.bcd-quick-action,
.bc-21st-btn-primary,
.bc-21st-btn-secondary {
  font-weight: var(--bc-fw-semibold);
  letter-spacing: 0.01em;
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── 11. Link refinements ───────────────────────────────────────── */
a {
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(var(--bc-brand-rgb, 160, 24, 24), 0.3);
}
a:hover {
  text-decoration-color: rgba(var(--bc-brand-rgb, 160, 24, 24), 0.6);
}

/* ── 12. Selection styling (premium detail) ─────────────────────── */
::selection {
  background: rgba(var(--bc-brand-rgb, 160, 24, 24), 0.15);
  color: var(--bc-text);
  text-shadow: none;
}
[data-bs-theme="dark"] ::selection {
  background: rgba(var(--bc-brand-rgb, 160, 24, 24), 0.25);
}

/* ── 13. Micro-typography (impeccable: craft floor) ───────────────
   Orphans/widows control para texto largo. Hanging punctuation
   para blockquotes. */
blockquote {
  text-indent: -0.4em;
}
/* Hyphenation para texto largo en columnas estrechas */
.bc-card-body p,
.track-card p,
.bcd-order-card p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ── 14. Dark mode adjustments ────────────────────────────────────
   En dark mode, reducir font-weight ligeramente para compensar
   el halation (texto blanco sobre fondo oscuro se ve más grueso). */
[data-bs-theme="dark"] {
  --bc-fw-regular: 400;
  --bc-fw-medium: 500;
  --bc-fw-semibold: 600;
  --bc-fw-bold: 700;
  --bc-fw-heavy: 800;
}
/* En dark mode, headings pueden usar 700 en vez de 800 porque
   el halation hace que 800 se vea demasiado pesado. */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2 {
  font-weight: var(--bc-fw-bold);
}

/* ── 15b. Grain sutil en superficies premium (dark mode) ──────────
   Ruido fractal SVG al ~4% sobre cards/KPIs: rompe el "flat gris"
   del dark mode (patrón Linear/Arc). Se aplica como background-image
   extra sobre el color de surface — sin pseudo-elementos ni tocar
   position/overflow de las cards. El feColorMatrix convierte el ruido
   a blanco con alpha bajo: speckle apenas perceptible. */
[data-bs-theme="dark"] .kpi,
[data-bs-theme="dark"] .bc-card {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 15c. Kerning editorial en cifras grandes ─────────────────────
   -0.01em compacta la cifra sin perder legibilidad; el espacio fino
   (U+2009) antes del € lo aplica formatCurrency en JS. */
.kds-stat-value,
.kds-card-total,
.bcd-price,
.bcd-order-total {
  letter-spacing: -0.01em;
}

/* ── 15. Reduced motion: keep color/border state, drop transform/scale ── */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .bcd-action-btn,
  .bcd-status-btn,
  .bcd-quick-action,
  .bc-21st-btn-primary,
  .bc-21st-btn-secondary,
  a {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    transform: none !important;
  }
}

/* =====================================================================
   Pass 3 — Tipografía legible transversal (Manager / Driver / KDS / Track)
   ---------------------------------------------------------------------
   Alinea la capa tipográfica premium en todas las superficies de la app,
   no solo en Manager. Sincroniza raíz fluida, balance de titulares,
   números tabulares y ritmo de lectura en cuerpo. */

/* 3.1 Raíz fluida con piso legible (min 15px, no 14px) */
html {
  font-size: clamp(15px, 0.45vw + 13.5px, 17px);
}

/* 3.2 Balance y jerarquía de titulares en todas las vistas */
h1, h2, h3, h4, h5, h6,
.bc-page-title, .bc-section-title, .bc-card-title,
.kds-col-title, .kds-detail-title,
.bcd-stop-name, .bcd-order-label, .bcd-next-stop-label,
.track-stage-title, .track-order-status, .track-brand-title {
  text-wrap: balance;
}

/* 3.3 Lectura cómoda en párrafos y textos legales */
p, .bc-prose, .bc-legal-body, .track-legal-body,
.bcd-order-card p, .track-card p, .kds-card-body p, .kds-detail-notes,
.bcsync-description {
  text-wrap: pretty;
  line-height: 1.6;
}

/* 3.4 Números tabulares / lining para datos, KPIs, tiempos y cantidades */
.kds-card-num,
.kds-stat-value,
.kds-card-total,
.kds-card-timer,
.kds-qty,
.bcd-order-num,
.bcd-price,
.bcd-order-total,
.bcd-distance,
.bcd-eta,
.track-order-num,
.track-eta-value,
.bcsync-kpi-value,
.bcsync-stat-num,
.bcsync-pin-display span {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* 3.5 Ajustes en dark mode para halation (texto claro sobre fondo oscuro) */

/* 3.6 Garantizar que los micro-labels no desaparezcan en pantallas pequeñas */
.bc-eyebrow,
.bc-section-label,
.bcd-section-label,
.track-eyebrow {
  min-height: 1em;
}