/* Takeway — sistema profesional: una escala, un acento, un radio. Sin build. */
:root {
  /* TYPE — escala 1.200 (minor third), densa para panel y tablas */
  --step--2: .694rem; --step--1: .833rem; --step-0: 1rem; --step-1: 1.25rem;
  --step-2: 1.563rem; --step-3: 1.953rem; --step-4: 2.441rem;
  --tracking-tight: -.02em;
  --tracking-label: .08em;
  /* SPACE — escala única. No se usan valores intermedios. */
  --s1: .25rem; /*  4px */
  --s2: .5rem;  /*  8px */
  --s3: .75rem; /* 12px */
  --s4: 1rem;   /* 16px */
  --s5: 1.5rem; /* 24px */
  --s6: 2rem;   /* 32px */
  --s7: 3rem;   /* 48px */
  --s8: 4.5rem; /* 72px */
  --s9: 7rem;   /* 112px */
  /* COLOR — 3 niveles de tinta, un acento (<10% superficie) */
  --bg: #100e0c; --card: #1c1815; --card2: #242019; --inset: #141110;
  --acc: #ffb800; --acc2: #ff8a00; --acc-ink: #1a1000;
  --txt: #fff8ef; --mut: #c9bda9; --faint: #8d8172;
  --ok: #25d366; --red: #ff6b6b; --warnc: #ffc857;
  --line: #33291d;
  --focus: #ffd166;
  /* FORMA — un único radio de superficie */
  --r: 12px;
  --border: 1px solid var(--line);
  --shadow-far: 0 12px 32px #00000066;
  --shadow-sticky: 0 2px 12px #00000055;
  /* Z — escala nombrada */
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-toast: 1200;
  /* MOTION — 3 duraciones, 2 easings */
  --dur-fast: 120ms; --dur: 220ms; --dur-slow: 420ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --tap: 44px; /* objetivo táctil mínimo */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; background: var(--bg); color: var(--txt); line-height: 1.55; min-height: 100svh; }
/* Foco siempre visible (WCAG 2.4.11 / 2.4.13). Nunca outline:none sin reemplazo. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ---------- cabecera ---------- */
header { position: sticky; top: 0; z-index: 10; background: #000000d9; backdrop-filter: blur(10px); padding: var(--s2) var(--s4); display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border); }
.brand { display: flex; gap: var(--s2); align-items: center; font-size: var(--step-0); }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, var(--acc), var(--acc2)); }
.brand b { color: var(--acc); }
.brand .dom { color: var(--faint); font-size: var(--step--1); }
nav.top { display: flex; gap: var(--s2); }
nav.top a { color: var(--txt); text-decoration: none; font-size: var(--step--1); padding: var(--s1) var(--s3); border: var(--border); border-radius: 999px; background: #221c15; }
nav.top a:hover { border-color: var(--acc); }
/* ---------- layout ---------- */
main { max-width: 46rem; margin: 0 auto; padding: var(--s3) var(--s3) 9rem; }
.card { background: var(--card); border: var(--border); border-radius: var(--r); padding: var(--s4); margin: var(--s3) 0; }
.row { display: flex; gap: var(--s2); align-items: center; }
.sec-head { display: flex; align-items: baseline; gap: var(--s2); margin: var(--s5) 0 var(--s2); }
.sec-head h2, .sec-head h3 { margin: 0; font-size: var(--step-1); }
.sec-head .rule { flex: 1; border-top: var(--border); }
.sec-head .n { color: var(--acc); font-weight: 800; }
.small { font-size: var(--step--1); color: var(--mut); }
.price { color: var(--acc); font-weight: 800; font-variant-numeric: tabular-nums; }
.ok { color: var(--ok); } .warn { color: var(--red); }
/* ---------- panel / asistente de dominio ---------- */
label.f { display: block; font-size: var(--step--1); color: var(--mut); margin-bottom: var(--s1); }
.variant .em { font-size: 1.1rem; line-height: 1; flex: none; }
.variant .grow p { margin: 2px 0 6px; }
.bar { height: 8px; border-radius: 999px; background: var(--inset); border: var(--border); overflow: hidden; margin: var(--s2) 0; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.codeblk { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; background: var(--inset); border: var(--border); border-radius: var(--r); padding: var(--s2) var(--s3); margin: var(--s2) 0; flex-wrap: wrap; }
.codeblk code { font-size: var(--step--1); color: var(--acc); word-break: break-all; }
a .sec, a button { text-decoration: none; }

/* ================================================================
   PANEL DE ADMINISTRACIÓN
   Soft Utility: escala 1.200, un solo radio, separación por tint,
   reglas hairline, cabeceras sticky. Cifras siempre tabulares.
   ================================================================ */
.skip {
  position: absolute; left: var(--s2); top: -3rem; z-index: var(--z-toast);
  background: var(--acc); color: var(--acc-ink); padding: var(--s2) var(--s4);
  border-radius: var(--r); font-weight: 600; transition: top var(--dur) var(--ease-out);
}
.skip:focus { top: var(--s2); }

/* Navegación: siempre sabes dónde estás. Un tab stop, flechas para moverse. */
.panelnav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: #0d0b0ae6; backdrop-filter: blur(12px);
  border-bottom: var(--border); box-shadow: var(--shadow-sticky);
}
.panelnav ol {
  list-style: none; margin: 0; padding: var(--s2) var(--s3);
  display: flex; gap: var(--s1); overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.panelnav ol::-webkit-scrollbar { display: none; }
.panelnav .grp { display: flex; gap: var(--s1); align-items: center; padding-right: var(--s3); margin-right: var(--s1); border-right: 1px solid var(--line); }
.panelnav .grp:last-child { border-right: 0; }
.panelnav button {
  flex: none; min-height: var(--tap); padding: 0 var(--s3);
  background: transparent; color: var(--mut); border: 1px solid transparent;
  border-radius: var(--r); font: inherit; font-size: var(--step--1); font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.panelnav button:hover { color: var(--txt); background: var(--card); }
.panelnav button[aria-current="page"] {
  color: var(--acc-ink); background: var(--acc); border-color: var(--acc); font-weight: 600;
}
.panelnav .count {
  font-variant-numeric: tabular-nums; font-size: var(--step--2);
  background: var(--acc); color: var(--acc-ink); border-radius: 999px;
  padding: 0 var(--s2); margin-left: var(--s1); font-weight: 700;
}
.panelnav button[aria-current="page"] .count { background: #00000033; color: var(--acc-ink); }

/* Cabecera de sección: jerarquía por tamaño, no por color */
.sect { margin: var(--s7) 0 var(--s3); display: flex; align-items: baseline; gap: var(--s3); }
.sect:first-child { margin-top: var(--s5); }
.sect h2 { margin: 0; font-size: var(--step-1); font-weight: 600; letter-spacing: var(--tracking-tight); text-wrap: balance; }
.sect .rule { flex: 1; border-top: var(--border); }
.sect .meta { font-size: var(--step--1); color: var(--faint); font-variant-numeric: tabular-nums; }

/* Regla 4:1 — dentro del grupo 4px, entre grupos 24px */
.frm { display: grid; gap: var(--s3); }
.frm > * + * { margin-top: var(--s5); }
.frm .row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Campos: una columna, label siempre visible, ayuda y error enlazados */
.fld { display: grid; gap: var(--s1); }
.fld label { font-size: var(--step--1); color: var(--mut); font-weight: 500; }
.fld .hint { font-size: var(--step--2); color: var(--faint); }
.fld input, .fld select, .fld textarea {
  min-height: var(--tap); background: var(--inset); color: var(--txt);
  border: var(--border); border-radius: var(--r); padding: var(--s2) var(--s3);
  font: inherit; font-size: var(--step-0); width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
.fld input:focus-visible, .fld select:focus-visible { border-color: var(--acc); }
.fld input[aria-invalid="true"] { border-color: var(--red); }
.fld .err { font-size: var(--step--2); color: var(--red); }

/* Botones: nombran la acción, objetivo táctil 44px, peso por jerarquía */
.btn {
  min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--r);
  font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--card2); color: var(--txt);
  display: inline-flex; align-items: center; gap: var(--s2);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { border-color: var(--acc); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn--primary:hover { background: var(--acc2); border-color: var(--acc2); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--mut); }
.btn--ghost:hover { color: var(--txt); background: var(--card); }
.btn--danger { border-color: var(--red); color: var(--red); background: transparent; }
.btn--danger:hover { background: var(--red); color: #1a0808; border-color: var(--red); }
/* Área de toque ampliada sin cambiar el tamaño visual */
.btn::after { content: ""; position: absolute; inset: -4px; }
.btn { position: relative; }

/* Fila de tarjeta: contenido arriba, acciones fijadas abajo (alcance del pulgar) */
.tile { background: var(--card); border: var(--border); border-radius: var(--r); padding: var(--s3); display: grid; grid-template-rows: auto 1fr auto; gap: var(--s2); }
.tile .head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.tile .code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: var(--step--1); color: var(--acc); font-weight: 600; }
.tile .who { font-weight: 600; }
.tile .meta { font-size: var(--step--1); color: var(--mut); }
.tile .acts { display: flex; flex-wrap: wrap; gap: var(--s1); }
.tile .money { font-variant-numeric: tabular-nums lining-nums; font-weight: 700; color: var(--acc); }

/* Kanban: columnas con scroll propio. La página NUNCA hace scroll horizontal. */
.board { display: grid; gap: var(--s3); grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--s2); }
.col { background: var(--inset); border: var(--border); border-radius: var(--r); display: grid; grid-template-rows: auto 1fr; min-height: 8rem; max-height: 70svh; }
.col > h3 {
  margin: 0; padding: var(--s2) var(--s3); font-size: var(--step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--mut);
  border-bottom: var(--border); position: sticky; top: 0; background: var(--inset);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
}
.col > h3 .n { font-variant-numeric: tabular-nums; color: var(--faint); }
/* Estado por etiqueta + icono, nunca solo color */
.state { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--step--2); font-weight: 600; }
.state::before { content: ""; width: var(--s2); height: var(--s2); border-radius: 50%; background: currentColor; }
.state--pendiente { color: var(--warnc); }
.state--cocina { color: var(--acc); }
.state--reparto { color: #6db3f2; }
.state--listo { color: var(--ok); }
.state--cerrado { color: var(--faint); }
.col .body { overflow-y: auto; padding: var(--s2); display: grid; gap: var(--s2); align-content: start; }

/* Estados vacíos: cuatro distintos, ninguno es "No data" */
.empty { padding: var(--s5) var(--s3); text-align: center; display: grid; gap: var(--s2); justify-items: center; }
.empty h4 { margin: 0; font-size: var(--step-0); font-weight: 600; }
.empty p { margin: 0; font-size: var(--step--1); color: var(--mut); text-wrap: pretty; }

/* Datos tabulares: cifras a la derecha y tabulares siempre */
.data { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.data th, .data td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.data thead th { position: sticky; top: 0; background: var(--card); color: var(--mut); font-weight: 600; font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.data td.num, .data th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; border: var(--border); border-radius: var(--r); }

/* Avisos: el color nunca es la única señal (icono + palabra) */
.note { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); border-radius: var(--r); background: var(--card2); border: var(--border); font-size: var(--step--1); text-wrap: pretty; }
.note .ic { flex: none; font-weight: 700; }
.note--ok { border-color: #1e5c37; } .note--ok .ic { color: var(--ok); }
.note--warn { border-color: #6b5420; } .note--warn .ic { color: var(--warnc); }
.note--error { border-color: #6b2b2b; } .note--error .ic { color: var(--red); }

/* Medidor de progreso */
.meter { height: var(--s1); border-radius: 999px; background: var(--inset); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--acc); transition: width var(--dur) var(--ease-out); }

/* Pilas de tarjetas: la superficie de trabajo manda, sin cajas anidadas */
.stack { display: grid; gap: var(--s3); }
.stack:empty { display: none; }
.tile .meta .addr { font-size: var(--step-0); font-weight: 600; color: var(--txt); line-height: 1.35; }
.tile.live { border-color: var(--acc); }
/* Regla de radio concéntrico: el radio exterior = interior + padding */
.card { border-radius: var(--r); padding: var(--s4); }
.tile { border-radius: calc(var(--r) - 2px); padding: var(--s3); }
.btn, .fld input, .fld select, .col, .note, .toast { border-radius: calc(var(--r) - 4px); }

/* En oscuro la profundidad se marca con anillo, no con sombra colgante */
@media (prefers-color-scheme: dark) {
  .card, .tile, .col, .note { box-shadow: inset 0 0 0 1px #ffffff0d; }
}

/* Barra de acción fija del repartidor: al alcance del pulgar */
#actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay);
  display: none; gap: var(--s2); padding: var(--s3);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  background: #0d0b0af2; backdrop-filter: blur(12px); border-top: var(--border);
}
#actionbar.on { display: flex; }
#actionbar .btn { flex: 1; justify-content: center; }
body.hasbar { padding-bottom: 6rem; }

/* Toast: solo para lo reversible; los errores no se aut ocultan */
.toasts { position: fixed; left: 50%; bottom: max(var(--s3), env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: var(--s2); width: min(28rem, calc(100vw - var(--s4))); }
.toast {
  background: var(--card2); border: var(--border); border-left: 3px solid var(--acc);
  border-radius: var(--r); padding: var(--s3); font-size: var(--step--1);
  display: flex; align-items: center; gap: var(--s3); box-shadow: var(--shadow-far);
  animation: toast-in var(--dur) var(--ease-out);
}
.toast--error { border-left-color: var(--red); }
.toast--ok { border-left-color: var(--ok); }
.toast .msg { flex: 1; text-wrap: pretty; }
.toast button { min-height: var(--tap); background: transparent; border: 0; color: var(--acc); font: inherit; font-weight: 600; cursor: pointer; padding: 0 var(--s2); }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--s2)); } to { opacity: 1; transform: none; } }

/* Barra inferior de seguridad en móvil */
.safe { padding-bottom: max(var(--s3), env(safe-area-inset-bottom)); }
@media (min-width: 48em) {
  main { max-width: 72rem; }
  .panelnav ol { flex-wrap: wrap; overflow: visible; }
  .board { grid-auto-flow: column; }
  .col { max-height: none; }
}
/* ---------- hero ---------- */
.hero { background: linear-gradient(135deg, #2a1c05 0%, #4d2f00 48%, #5c1f1a 100%); border: var(--border); border-radius: var(--r); padding: var(--s5) var(--s4) var(--s4); margin: var(--s3) 0; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto -40px -70px auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, #ffb80033, transparent 70%); pointer-events: none; }
.modes { position: relative; z-index: 1; }
.hero h2 { margin: 0; font-size: var(--step-2); letter-spacing: .2px; }
.hero .meta { margin: var(--s1) 0 0; color: #f3e3c2; font-size: var(--step--1); }
.status-pill { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--step--1); font-weight: 700; border-radius: 999px; padding: var(--s1) var(--s3); margin-bottom: var(--s2); border: 1px solid #ffffff2e; background: #00000055; }
.status-pill.open { color: #b8f5cd; border-color: #25d36666; }
.status-pill.closed { color: #ffc9c9; border-color: #ff6b6b66; }
.status-pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badges { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s3); }
.badge { background: #00000055; border: 1px solid #ffffff2e; border-radius: 999px; padding: var(--s1) var(--s3); font-size: var(--step--1); }
.notice { border-radius: var(--r); padding: var(--s3) var(--s4); margin: var(--s3) 0; border: 1px solid #ffb80066; background: #ffb80014; font-size: var(--step-0); }
.notice.closed { border-color: #ff6b6b66; background: #ff6b6b14; }
/* ---------- modos ---------- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s4); }
.mode { border: 2px solid var(--line); border-radius: var(--r); padding: var(--s3); text-align: center; cursor: pointer; background: #141110; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); font: inherit; color: inherit; box-shadow: none; font-size: var(--step-0); }
.mode:hover { border-color: var(--faint); }
.mode.on { border-color: var(--acc); background: #ffb80012; box-shadow: 0 0 0 3px #ffb80022; }
.mode b { display: block; margin: var(--s1) 0; }
/* ---------- carta ---------- */
.chips { display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s2); margin: 0 calc(-1 * var(--s3)); padding-left: var(--s3); position: sticky; top: 53px; z-index: 5; background: linear-gradient(180deg, var(--bg) 85%, transparent); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; background: #221c15; border: var(--border); color: var(--txt); border-radius: 999px; padding: var(--s2) var(--s4); font-size: var(--step--1); box-shadow: none; transition: all var(--dur) var(--ease); }
.chip:hover { border-color: var(--acc); }
.chip.on { background: linear-gradient(180deg, var(--acc), var(--acc2)); color: var(--acc-ink); border-color: transparent; font-weight: 800; }
details.group { background: var(--card); border: var(--border); border-radius: var(--r); margin: var(--s3) 0; overflow: hidden; }
details.group > summary { list-style: none; cursor: pointer; padding: var(--s4); display: flex; gap: var(--s3); align-items: center; transition: background var(--dur) var(--ease); }
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary:hover { background: var(--card2); }
details.group h3 { margin: 0; font-size: var(--step-0); }
details.group .chev { margin-left: auto; color: var(--mut); transition: transform var(--dur) var(--ease); font-size: var(--step--1); }
details.group[open] .chev { transform: rotate(90deg); }
.variants { border-top: 1px dashed var(--line); padding: var(--s2) var(--s3) var(--s3); display: grid; gap: var(--s2); }
.variant { display: flex; gap: var(--s3); align-items: center; background: var(--inset); border: var(--border); border-radius: var(--r); padding: var(--s3); }
.variant h4 { margin: 0 0 2px; font-size: var(--step-0); }
.variant p { margin: 0; color: var(--mut); font-size: var(--step--1); }
.variant .grow { flex: 1; min-width: 0; }
.art svg { width: 52px; height: 52px; display: block; flex: none; }
.g-art { background: #00000055; border-radius: var(--r); padding: var(--s1); }
.g-art svg { width: 46px; height: 46px; display: block; }
.addbtn { width: 40px; height: 40px; border-radius: 50%; font-size: 22px; line-height: 1; padding: 0; flex: none; }
.tag { font-size: var(--step--1); background: #ffb8001f; color: var(--acc); border: 1px solid #ffb80055; border-radius: 999px; padding: 1px var(--s2); margin-left: var(--s1); white-space: nowrap; }
.tag.soon { background: #ffffff10; color: #fff; border-color: #ffffff30; }
/* ---------- formularios y botones ---------- */
button, .btn { background: linear-gradient(180deg, var(--acc), var(--acc2)); color: var(--acc-ink); border: 0; border-radius: var(--r); padding: var(--s3) var(--s4); font-weight: 800; cursor: pointer; font-size: var(--step-0); box-shadow: 0 4px 14px #00000055; transition: filter var(--dur) var(--ease), transform 80ms var(--ease); }
button:hover { filter: brightness(1.07); }
button:active { transform: scale(.97); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;
}
button.sec { background: #2d2721; color: var(--txt); box-shadow: none; border: var(--border); font-weight: 600; }
button.sec:hover { border-color: var(--acc); filter: none; }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
button.block { width: 100%; padding: var(--s4); font-size: var(--step-1); }
input, select, textarea { width: 100%; background: #0f0d0b; color: var(--txt); border: var(--border); border-radius: var(--r); padding: var(--s3); margin: var(--s1) 0 var(--s2); font-size: var(--step-0); font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc); border-color: var(--acc); }
label.f { display: block; font-size: var(--step--1); color: var(--mut); margin-top: var(--s2); }
.frm { display: grid; gap: var(--s2); }
.frm.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .frm.two { grid-template-columns: 1fr; } }
/* ---------- carrito y checkout ---------- */
#cartbar { position: fixed; bottom: 0; left: 0; right: 0; background: #000000f0; border-top: var(--border); padding: var(--s3) var(--s4); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); backdrop-filter: blur(10px); box-shadow: var(--shadow-far); z-index: 9; }
#cartbar .tot b { display: block; font-size: var(--step-1); color: var(--acc); font-variant-numeric: tabular-nums; }
.step { display: flex; gap: var(--s2); align-items: baseline; margin: var(--s4) 0 var(--s1); }
.step .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, var(--acc), var(--acc2)); color: var(--acc-ink); font-weight: 800; font-size: var(--step--1); display: inline-flex; align-items: center; justify-content: center; }
.step h4 { margin: 0; font-size: var(--step-0); }
.cartline { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px dashed var(--line); }
/* ---------- mapas, timeline, varios ---------- */
.map { height: 260px; border-radius: var(--r); border: var(--border); z-index: 0; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; margin: 0; padding: var(--s2) 0 var(--s2) var(--s5); color: var(--mut); }
.timeline li::before { content: ""; position: absolute; left: 8px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.timeline li::after { content: ""; position: absolute; left: 12px; top: 28px; bottom: -6px; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li.done { color: var(--txt); }
.timeline li.done::before { background: var(--ok); }
.qrbox { background: #fff; padding: var(--s3); border-radius: var(--r); display: inline-block; }
code.addr, code.pin { word-break: break-all; background: #000; display: block; padding: var(--s2); border-radius: var(--r); font-size: var(--step--1); border: var(--border); }
nav.tabs { display: flex; gap: var(--s2); margin: var(--s2) 0; flex-wrap: wrap; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.tbl td, .tbl th { border-bottom: var(--border); padding: var(--s2) var(--s1); text-align: left; vertical-align: middle; }
.tbl th { color: var(--mut); font-weight: 600; }
.pill { display: inline-block; font-size: var(--step--1); border-radius: 999px; padding: 1px var(--s3); border: var(--border); background: var(--inset); }
.pill.hot { border-color: var(--acc); color: var(--acc); }
.pill.live { border-color: #25d36688; color: #b8f5cd; }
.pill.off { color: var(--faint); }
/* ---------- rider móvil: legible al sol, pulgar gordo, una mano ---------- */
.rider-hello { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.rider-hello h1 { margin: 0; }
/* .job* quedo obsoleto: la app del repartidor usa .tile + .btn como el panel.
   Se mantienen solo durante una version por si hay enlaces guardados. */
body.hasbar main { padding-bottom: 11rem; }
.login-hero p { color: var(--mut); }
#lock input { font-size: var(--step-1); padding: var(--s4); text-align: center; }
#lock button { width: 100%; min-height: 56px; font-size: var(--step-1); }
.gpsline { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }