/* Hallmark · genre: modern-minimal · theme: Cobalt · design-system: design.md · designed-as-app
 * paper: oklch(98.5% 0.004 250) cool-light · accent: oklch(52% 0.21 258) electric cobalt
 * display: Space Grotesk · body: Inter · mono: JetBrains Mono
 * axes — paper band: light · display style: grotesk-sans · accent hue: cool
 * macrostructures — app: Workbench · content: Index-First · auth: Workbench (stripped)
 * nav: app-bar (Cobalt sig. 5, flush + hairline) · footer: Ft2 (solo login) · enrichment: none
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */

/* ─────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Paper — cool engineered near-white, never #fff */
  --color-paper:        oklch(98.5% 0.004 250);
  --color-paper-2:      oklch(96.4% 0.006 252);
  --color-paper-3:      oklch(93.4% 0.008 254);

  /* Ink — cool charcoal, never #000. Darkened past canon for outdoor legibility. */
  --color-ink:          oklch(22%   0.022 258);
  --color-ink-2:        oklch(32%   0.018 257);
  --color-ink-3:        oklch(50%   0.014 256);

  /* Hairlines do the structural work */
  --color-rule:         oklch(89%   0.008 254);
  --color-rule-2:       oklch(80%   0.010 254);

  /* The one signal — under 5% of any viewport */
  --color-accent:       oklch(52%   0.21  258);
  --color-accent-2:     oklch(44%   0.19  258);
  --color-accent-ink:   oklch(99%   0.003 250);
  --color-accent-wash:  oklch(95.5% 0.030 258);

  /* The one dark band per page */
  --color-graphite:     oklch(22%   0.016 260);
  --color-graphite-2:   oklch(29%   0.016 260);
  --color-graphite-ink: oklch(93%   0.008 254);

  --color-focus:        oklch(58%   0.20  256);

  /* Status — each one earns its hue by meaning, none competes with the signal */
  --color-ok:           oklch(52%   0.15  155);
  --color-ok-wash:      oklch(95%   0.035 155);
  --color-warn:         oklch(52%   0.13  75);
  --color-warn-wash:    oklch(95%   0.045 85);
  --color-danger:       oklch(52%   0.19  27);
  --color-danger-wash:  oklch(95%   0.030 27);
  --color-wa:           oklch(52%   0.15  152);
  --color-wa-2:         oklch(45%   0.14  152);
  --color-wa-ink:       oklch(99%   0.003 152);

  /* Stores and riders are parameterised by hue, not by hard-coded colour.
     The formula lives here; the JS only ever passes a number. */
  --store-h:            258;
  --color-store-wash:   oklch(94% 0.045 var(--store-h));
  --color-store-ink:    oklch(38% 0.12  var(--store-h));

  --rider-h:            258;
  --color-rider:        oklch(52% 0.18 var(--rider-h));
  --color-rider-halo:   oklch(55% 0.18 var(--rider-h) / 0.35);

  /* Type */
  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-3xs:  0.5625rem;
  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;

  --track-display: -0.025em;
  --track-mono:     0.06em;

  /* 4-point scale (+ one named 2px step for optical nudges) */
  --space-4xs: 0.125rem;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;

  /* Drawn with a ruler — tight technical radii */
  --radius-control: 6px;
  --radius-card:    10px;
  --radius-chip:    4px;
  --radius-pill:    999px;

  --rule-hair: 1px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 160ms;
  --dur-mid:   240ms;

  /* Six-level z scale — no z-index: 9999 anywhere */
  --z-base:    0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay:30;
  --z-modal:  40;
  --z-toast:  50;

  /* A rider wearing gloves needs a real target */
  --tap-min: 44px;

  --shell: 46rem;
  --shell-wide: 68rem;
}

/* ─────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: clip;
  margin: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

h1 { font-size: var(--text-md); }
h2 { font-size: var(--text-base); }
h3 { font-size: var(--text-base); }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }

/* Focus rings appear instantly — never transitioned */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-chip);
}

::selection { background: var(--color-accent-wash); color: var(--color-ink); }

/* ─────────────────────────────────────────────
   HELPERS
   ───────────────────────────────────────────── */
.is-hidden { display: none !important; }

/* Enlace inutilizable (ej. "Iniciar" cuando ninguna parada tiene coordenadas):
   sigue visible para no mover el layout, pero no se puede accionar. */
.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  letter-spacing: 0;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* Un valor de metadato, no un eyebrow: mono pero sin caja alta, para que
   nunca se lea como el kicker de un encabezado (gate 54). */
.meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-3);
}

.muted { color: var(--color-ink-3); }
.grow  { flex: 1 1 auto; min-width: 0; }
.push  { margin-left: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
}
.row--between { justify-content: space-between; }
.row--top     { align-items: flex-start; }
.row--wrap    { flex-wrap: wrap; }

.mt-3xs { margin-top: var(--space-3xs); }
.mt-xs  { margin-top: var(--space-xs); }

/* Leaves room for the fixed C4 bar so the last row is never covered */
.page-pad { padding-bottom: 5.5rem; }
.main-pad { padding-block: var(--space-sm); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}
.shell--wide { max-width: var(--shell-wide); }

.stack > * + * { margin-top: var(--space-sm); }

/* ─────────────────────────────────────────────
   APP BAR — flush, hairline-bottomed, never a gradient
   ───────────────────────────────────────────── */
.app-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.app-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  min-height: 52px;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}
.app-bar__inner--wide { max-width: var(--shell-wide); }

.app-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  white-space: nowrap;
  min-width: 0;
}

.app-bar__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--radius-chip);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
}

.app-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  flex: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink-3);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.icon-btn:hover  { background: var(--color-paper-3); color: var(--color-ink); }
.icon-btn:active { background: var(--color-rule); }
.icon-btn:disabled { color: var(--color-rule-2); cursor: not-allowed; background: transparent; }
.icon-btn--danger:hover { color: var(--color-danger); background: var(--color-danger-wash); }

/* GPS pilot light — three states, colour carried by a token each */
.pilot { color: var(--color-ink-3); }
.pilot[data-state="on"]    { color: var(--color-ok); }
.pilot[data-state="error"] { color: var(--color-danger); }

/* ─────────────────────────────────────────────
   PANEL — hairline surfaces, no drop shadows
   ───────────────────────────────────────────── */
.panel {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  min-width: 0;
}

.panel__body { padding: var(--space-sm); }

.panel__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  overflow-x: auto;
  scrollbar-width: thin;
}

/* The one dark band per page — the instrument-panel moment */
.band {
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
  padding: var(--space-sm);
}
.band h1, .band h2, .band h3 { color: var(--color-graphite-ink); }
.band .label { color: color-mix(in oklab, var(--color-graphite-ink) 62%, transparent); }

/* ─────────────────────────────────────────────
   BUTTONS — 8 states, 6px radius, never a pill, never a gradient
   ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: var(--tap-min);
  padding: 0 var(--space-sm);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-control);
  background: var(--color-paper-3);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.btn:hover  { background: var(--color-rule); }
.btn:active { transform: translateY(1px); }
/* Disabled se señala por tres canales: color, opacidad y cursor */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-paper-2);
  color: var(--color-ink-3);
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn[data-state="loading"] { color: var(--color-ink-3); cursor: progress; }
.btn[data-state="error"]   { background: var(--color-danger-wash); color: var(--color-danger); border-color: var(--color-danger); }
.btn[data-state="success"] { background: var(--color-ok-wash);     color: var(--color-ok);     border-color: var(--color-ok); }

.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover  { background: var(--color-accent-2); }
.btn--primary:disabled { background: var(--color-paper-2); color: var(--color-ink-3); }
.btn--primary[data-state="loading"] { background: var(--color-accent-2); color: var(--color-accent-ink); }

.btn--outline { background: transparent; border-color: var(--color-rule-2); color: var(--color-ink); }
.btn--outline:hover { background: var(--color-paper-3); border-color: var(--color-ink-3); }

.btn--wa { background: var(--color-wa); color: var(--color-wa-ink); }
.btn--wa:hover { background: var(--color-wa-2); }

.btn--danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger-wash); }
.btn--danger:hover { background: var(--color-danger-wash); }

.btn--sm { min-height: 36px; padding: 0 var(--space-xs); font-size: var(--text-xs); }
.btn--block { width: 100%; }

/* ─────────────────────────────────────────────
   CHIPS
   ───────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-chip);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip--ok     { background: var(--color-ok-wash);     color: var(--color-ok); }
.chip--live   { background: var(--color-accent-wash); color: var(--color-accent); }
.chip--warn   { background: var(--color-warn-wash);   color: var(--color-warn); }
.chip--store  { background: var(--color-store-wash);  color: var(--color-store-ink); text-transform: none; letter-spacing: 0.02em; }
.chip--count  { background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-pill); padding-inline: var(--space-2xs); }

/* Connection pilot light — the dot inherits the chip's own colour */
.chip__dot { width: 7px; height: 7px; flex: none; border-radius: var(--radius-pill); background: currentColor; }
.chip[data-state="on"]    { background: var(--color-ok-wash);     color: var(--color-ok); }
.chip[data-state="error"] { background: var(--color-danger-wash); color: var(--color-danger); }

/* ─────────────────────────────────────────────
   FORM CONTROLS
   ───────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }

.input {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  /* Reservado en reposo para que activar el foco no mueva la geometría */
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.input:hover  { border-color: var(--color-ink-3); }
.input:active { border-color: var(--color-accent); }
.input:focus-visible { border-color: var(--color-accent); outline-color: var(--color-focus); }
.input:disabled { background: var(--color-paper-2); color: var(--color-ink-3); opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.input--date { font-family: var(--font-mono); font-size: var(--text-sm); }

.check {
  width: 26px;
  height: 26px;
  flex: none;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.check:disabled { cursor: not-allowed; opacity: 0.4; }

.check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  min-height: var(--tap-min);
}

/* ─────────────────────────────────────────────
   DELIVERY ROWS — hairline separated, no side-stripe cards
   ───────────────────────────────────────────── */
.list > li + li { border-top: var(--rule-hair) solid var(--color-rule); }

.row-item {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm);
  transition: background-color var(--dur-short) var(--ease-out);
}
.row-item:hover { background: var(--color-paper-2); }
.row-item[data-selected="true"] { background: var(--color-accent-wash); }
.row-item[data-geo="missing"]   { background: var(--color-warn-wash); }

.row-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2xs);
  min-width: 0;
}

.row-item__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
  min-width: 0;
}

.row-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* Sequence marker on the optimised route */
.seq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-chip);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.facts { display: flex; flex-direction: column; gap: var(--space-3xs); margin-top: var(--space-2xs); }

.fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.35;
  min-width: 0;
}
.fact > i { width: 14px; flex: none; margin-top: var(--space-4xs); text-align: center; color: var(--color-ink-3); font-size: var(--text-xs); }
.fact span { overflow-wrap: anywhere; min-width: 0; }
.fact--addr { font-weight: 500; color: var(--color-ink); }
.fact--addr > i { color: var(--color-accent); }

.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  padding: var(--space-2xs);
  border-left: var(--rule-hair) solid var(--color-warn);
  background: var(--color-warn-wash);
  border-radius: var(--radius-chip);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  line-height: 1.35;
}
.callout > i { color: var(--color-warn); margin-top: var(--space-4xs); flex: none; }

/* ─────────────────────────────────────────────
   PROGRESS
   ───────────────────────────────────────────── */
.progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-graphite-2);
  overflow: hidden;
}
/* Escala en lugar de animar width — gate 14 prohíbe animar propiedades de layout */
.progress__bar {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-mid) var(--ease-out);
}

/* ─────────────────────────────────────────────
   STAT STRIP — real counts only, tabular
   ───────────────────────────────────────────── */
.stats { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.stat { display: flex; flex-direction: column; gap: var(--space-4xs); min-width: 0; }
.stat__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-graphite-ink);
}
.stat__num[data-tone="accent"] { color: var(--color-focus); }

/* ─────────────────────────────────────────────
   TABLE
   ───────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.table th {
  padding: var(--space-2xs) var(--space-xs);
  text-align: left;
  white-space: nowrap;
  background: var(--color-paper-2);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.table td {
  padding: var(--space-2xs) var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
}
.table tbody tr:hover td { background: var(--color-paper-2); }
.table .t-name { font-weight: 500; color: var(--color-ink); }
.table .t-note { color: var(--color-ink-3); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.group-row td,
.group-bar {
  background: var(--color-paper-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.group-bar { padding: var(--space-2xs) var(--space-sm); }

/* ─────────────────────────────────────────────
   DISCLOSURE (rutas)
   ───────────────────────────────────────────── */
.disclosure + .disclosure { border-top: var(--rule-hair) solid var(--color-rule); }
.disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  list-style: none;
  min-height: var(--tap-min);
  transition: background-color var(--dur-short) var(--ease-out);
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary:hover { background: var(--color-paper-2); }
.disclosure__caret { color: var(--color-ink-3); font-size: var(--text-xs); transition: transform var(--dur-short) var(--ease-out); }
.disclosure[open] .disclosure__caret { transform: rotate(180deg); }
.disclosure__body {
  padding: 0 var(--space-sm) var(--space-xs) calc(var(--space-sm) + var(--space-md));
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.disclosure__body li { list-style: decimal; margin-top: var(--space-4xs); }
.disclosure__summary:active { background: var(--color-paper-3); }

.link {
  color: var(--color-accent);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}
.link:hover  { border-bottom-color: var(--color-accent); }
.link:active { color: var(--color-accent-2); border-bottom-color: var(--color-accent-2); }

/* ─────────────────────────────────────────────
   EMPTY / ERROR STATES
   ───────────────────────────────────────────── */
.empty {
  padding: var(--space-xl) var(--space-sm);
  text-align: center;
  color: var(--color-ink-3);
  font-size: var(--text-sm);
}
.empty > i { display: block; font-size: var(--text-xl); margin-bottom: var(--space-2xs); color: var(--color-ink-3); }
.empty--error { color: var(--color-danger); }
.empty--error > i { color: var(--color-danger); }

/* ─────────────────────────────────────────────
   STICKY CTA (C4) — replaces the floating gradient pill
   ───────────────────────────────────────────── */
.cta-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  padding-bottom: calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in oklab, var(--color-paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.cta-sticky__meta { flex: 1 1 auto; min-width: 0; }
.cta-sticky .btn { flex: none; }

/* ─────────────────────────────────────────────
   MODAL
   ───────────────────────────────────────────── */
dialog.modal {
  width: min(24rem, calc(100vw - 2 * var(--space-sm)));
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  color: var(--color-ink-2);
}
dialog.modal::backdrop { background: color-mix(in oklab, var(--color-graphite) 55%, transparent); }

.modal__option {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.modal__option:hover  { background: var(--color-paper-2); border-color: var(--color-ink-3); }
.modal__option:active { background: var(--color-paper-3); }
.modal__option:disabled { color: var(--color-ink-3); opacity: 0.55; cursor: not-allowed; background: var(--color-paper-2); }
.modal__option > i { color: var(--color-accent); width: 16px; text-align: center; flex: none; }

/* The origin picker is the panel itself, not a button inside a card */
.modal__option--flush { border: 0; border-radius: 0; }
.modal__option--flush:hover { border: 0; }
.picker__label { display: block; }
.picker__value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-ink);
}

/* ─────────────────────────────────────────────
   TOAST — corner-stacked, never shifts layout
   ───────────────────────────────────────────── */
.toast {
  position: fixed;
  top: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  max-width: calc(100vw - 2 * var(--space-sm));
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-control);
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.toast[data-show="true"] { opacity: 1; }

/* ─────────────────────────────────────────────
   BANNER
   ───────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-control);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────
   LEAFLET MAP + RIDER MARKERS
   ───────────────────────────────────────────── */
.map {
  height: 320px;
  border-top: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

.rider { position: relative; width: 34px; height: 34px; }
.rider__pulse {
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-pill);
  background: var(--color-rider-halo);
  animation: rider-ping 1.8s var(--ease-out) infinite;
}
.rider__dot {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-paper);
  background: var(--color-rider);
  color: var(--color-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
}
/* Rótulo con el nombre del repartidor, bajo el marcador. Es la identificación
   visible en el mapa: no hay numeración, se lee el usuario. */
.rider__name {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-paper);
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
  font-size: var(--text-3xs);
  font-weight: 600;
  line-height: 1.4;
}
@keyframes rider-ping {
  from { transform: scale(0.75); opacity: 0.6; }
  to   { transform: scale(1.8);  opacity: 0; }
}

/* ─────────────────────────────────────────────
   LOGIN
   ───────────────────────────────────────────── */
.auth {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
}
.auth__card {
  width: 100%;
  max-width: 21rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-paper);
}
.auth__mast {
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
}
.auth__mast .label { color: color-mix(in oklab, var(--color-graphite-ink) 65%, transparent); }
.auth__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--color-graphite-ink);
  margin: 0;
}
.auth__body { padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); }
.auth__error {
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-danger);
  border-radius: var(--radius-control);
  background: var(--color-danger-wash);
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: 500;
}
.auth__foot {
  padding: var(--space-2xs) var(--space-sm) var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* ─────────────────────────────────────────────
   FILTER BAR
   ───────────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
}
.filters .field { flex: 1 1 8rem; }

/* ─────────────────────────────────────────────
   RESPONSIVE — verified at 320 / 375 / 414 / 768
   ───────────────────────────────────────────── */
@media (max-width: 24.5rem) {
  :root { --space-sm: 0.875rem; }
  .app-bar__brand span { display: none; }
  .icon-btn { width: 36px; }
  .row-item { padding: var(--space-xs); }
  .stats { gap: var(--space-sm); }
}

@media (min-width: 48rem) {
  h1 { font-size: var(--text-lg); }
  .map { height: 380px; }
}

/* ─────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .toast { transition: opacity 150ms linear; }
  .rider__pulse { display: none; }
}