/* ============================================================
   HOPE — sistema visual
   Superficies con materia, no cajas planas. Jerarquía por peso y
   espacio, no por líneas. Movimiento corto y siempre ease-out.
   Claro para el mostrador de día, oscuro para el turno de noche.
   ============================================================ */

:root {
  color-scheme: light;

  /* Grises fríos: neutros templados hacia el azul, nunca planos ni sucios */
  --bg:        oklch(0.970 0.004 254);
  --bg-2:      oklch(0.955 0.006 254);
  --surface:   oklch(1.000 0.000 0);
  --surface-2: oklch(0.978 0.004 254);
  --surface-3: oklch(0.944 0.007 254);
  --hover:     oklch(0.958 0.010 254);

  --line:      oklch(0.902 0.008 254);
  --line-soft: oklch(0.936 0.006 254);

  --ink:       oklch(0.235 0.018 258);
  --ink-2:     oklch(0.455 0.018 256);
  --ink-3:     oklch(0.610 0.016 256);

  /* Azul: uno solo, y con sitio fijo (acción, selección, dato en foco) */
  /* Azul marino oficial de HOPE (#10347A) y sus derivados */
  --accent:      #10347A;
  --accent-hi:   #274F9C;
  --accent-ink:  #0B2456;
  --accent-bg:   #E9EEF8;
  --accent-line: #C4D0EA;

  --ok:         oklch(0.548 0.118 152);
  --ok-bg:      oklch(0.952 0.038 156);
  --ok-line:    oklch(0.868 0.062 154);
  --warn:       oklch(0.630 0.132 72);
  --warn-bg:    oklch(0.958 0.046 84);
  --danger:     oklch(0.548 0.170 25);
  --danger-bg:  oklch(0.954 0.036 28);
  --danger-line:oklch(0.870 0.068 28);
  /* Gris pizarra: el segundo tono, para lo informativo que no compite con el azul */
  --cool:       #10347A;   /* sin acento aparte: la marca es el azul */
  --cool-bg:    #DFF6F6;

  --gloss: inset 0 1px 0 oklch(1 0 0 / 0.7);
  --e1: 0 1px 2px oklch(0.30 0.03 258 / 0.06), 0 1px 1px oklch(0.30 0.03 258 / 0.04);
  --e2: 0 2px 4px oklch(0.30 0.03 258 / 0.06), 0 8px 18px -8px oklch(0.30 0.03 258 / 0.18);
  --e3: 0 4px 10px oklch(0.30 0.03 258 / 0.07), 0 24px 48px -16px oklch(0.28 0.04 258 / 0.26);
  --e4: 0 8px 20px oklch(0.28 0.04 258 / 0.10), 0 40px 80px -24px oklch(0.26 0.04 258 / 0.34);
  --ring: 0 0 0 3.5px oklch(0.545 0.168 258 / 0.20);

  --r-xs: 7px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --sans: -apple-system, "SF Pro Text", "SF Pro Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

  --nav-w: 244px;
  --top-h: 60px;
}

/* Turno de noche: el mismo azul sobre gris carbón, no un negro puro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --bg:        oklch(0.180 0.012 258);
    --bg-2:      oklch(0.206 0.013 258);
    --surface:   oklch(0.234 0.014 258);
    --surface-2: oklch(0.260 0.015 258);
    --surface-3: oklch(0.294 0.016 258);
    --hover:     oklch(0.302 0.018 258);

    --line:      oklch(0.332 0.016 258);
    --line-soft: oklch(0.290 0.014 258);

    --ink:       oklch(0.962 0.004 254);
    --ink-2:     oklch(0.792 0.012 256);
    --ink-3:     oklch(0.640 0.016 256);

    --accent:      oklch(0.680 0.150 258);
    --accent-hi:   oklch(0.735 0.130 258);
    --accent-ink:  oklch(0.822 0.098 258);
    --accent-bg:   oklch(0.318 0.084 260);
    --accent-line: oklch(0.412 0.106 259);

    --ok:         oklch(0.740 0.132 156);
    --ok-bg:      oklch(0.300 0.056 158);
    --ok-line:    oklch(0.392 0.070 156);
    --warn:       oklch(0.790 0.128 80);
    --warn-bg:    oklch(0.330 0.058 80);
    --danger:     oklch(0.700 0.158 28);
    --danger-bg:  oklch(0.318 0.078 28);
    --danger-line:oklch(0.418 0.098 28);
    --cool:       #4FD8D8;
    --cool-bg:    #123C3C;

    --gloss: inset 0 1px 0 oklch(1 0 0 / 0.06);
    --e1: 0 1px 2px oklch(0 0 0 / 0.34);
    --e2: 0 2px 6px oklch(0 0 0 / 0.34), 0 10px 22px -10px oklch(0 0 0 / 0.5);
    --e3: 0 6px 14px oklch(0 0 0 / 0.38), 0 28px 56px -18px oklch(0 0 0 / 0.62);
    --e4: 0 10px 24px oklch(0 0 0 / 0.44), 0 48px 96px -28px oklch(0 0 0 / 0.7);
    --ring: 0 0 0 3.5px oklch(0.680 0.150 258 / 0.28);
  }
}

/* Elección explícita del usuario: gana sobre el sistema */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --bg:        oklch(0.180 0.012 258);
  --bg-2:      oklch(0.206 0.013 258);
  --surface:   oklch(0.234 0.014 258);
  --surface-2: oklch(0.260 0.015 258);
  --surface-3: oklch(0.294 0.016 258);
  --hover:     oklch(0.302 0.018 258);
  --line:      oklch(0.332 0.016 258);
  --line-soft: oklch(0.290 0.014 258);
  --ink:       oklch(0.962 0.004 254);
  --ink-2:     oklch(0.792 0.012 256);
  --ink-3:     oklch(0.640 0.016 256);
  --accent:      #6E8FD9;
  --accent-hi:   #8AA6E4;
  --accent-ink:  #B9C9EF;
  --accent-bg:   #1D2F55;
  --accent-line: #33487A;
  --ok:  oklch(0.740 0.132 156); --ok-bg: oklch(0.300 0.056 158); --ok-line: oklch(0.392 0.070 156);
  --warn: oklch(0.790 0.128 80); --warn-bg: oklch(0.330 0.058 80);
  --danger: oklch(0.700 0.158 28); --danger-bg: oklch(0.318 0.078 28); --danger-line: oklch(0.418 0.098 28);
  --cool: #4FD8D8; --cool-bg: #123C3C;
  --gloss: inset 0 1px 0 oklch(1 0 0 / 0.06);
  --e1: 0 1px 2px oklch(0 0 0 / 0.34);
  --e2: 0 2px 6px oklch(0 0 0 / 0.34), 0 10px 22px -10px oklch(0 0 0 / 0.5);
  --e3: 0 6px 14px oklch(0 0 0 / 0.38), 0 28px 56px -18px oklch(0 0 0 / 0.62);
  --e4: 0 10px 24px oklch(0 0 0 / 0.44), 0 48px 96px -28px oklch(0 0 0 / 0.7);
  --ring: 0 0 0 3.5px oklch(0.680 0.150 258 / 0.28);
}

* { box-sizing: border-box; }

/* Un display: flex/grid gana al atributo hidden. Esto lo zanja de una vez. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.num, td.num, .metric-value, .money, .ref, .clock {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

/* ============================================================
   ARMAZÓN
   ============================================================ */

.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100dvh; }

.nav {
  position: sticky; top: 0;
  height: 100dvh;
  display: flex; flex-direction: column;
  padding: 0 12px 12px;
  background: var(--bg-2);
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brand {
  display: flex; align-items: center; gap: 11px;
  height: var(--top-h);
  padding: 0 8px;
  flex: 0 0 auto;
}
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: block;
  box-shadow: var(--e1);
}
.brand > * { min-width: 0; }
.brand-name {
  font-weight: 660; font-size: 15.5px; letter-spacing: -0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: -3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nav-group { padding: 12px 0 2px; }
.nav-group-label {
  font-size: 10px; font-weight: 620; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 10px 7px;
}

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2);
  text-align: left; font-weight: 520; letter-spacing: -0.01em;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.nav-item svg { flex: 0 0 auto; opacity: 0.85; }
.nav-item .count {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  background: var(--surface-3);
  padding: 1px 7px; border-radius: 99px;
}
@media (hover: hover) and (pointer: fine) { .nav-item:hover { background: var(--hover); color: var(--ink); } }
.nav-item:active { transform: scale(0.985); }
.nav-item[aria-current="page"] {
  background: var(--surface);
  color: var(--ink); font-weight: 600;
  box-shadow: var(--e1), var(--gloss);
}
.nav-item[aria-current="page"] svg { color: var(--accent); opacity: 1; }
.nav-item[aria-current="page"] .count { background: var(--accent-bg); color: var(--accent-ink); }

.nav-foot { margin-top: auto; padding-top: 12px; }

.sesion {
  display: flex; align-items: center; gap: 9px;
  padding: 8px; border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--e1), var(--gloss);
}
.sesion-txt { display: grid; min-width: 0; flex: 1; }
.sesion-txt > * {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sesion-nombre {
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
}

/* ---------- Barra superior ---------- */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--top-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px;
  background: color-mix(in oklch, var(--bg) 76%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.clock { font-size: 12px; color: var(--ink-3); }

.sede-picker {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface);
  font-weight: 560; font-size: 13px; letter-spacing: -0.01em;
  box-shadow: var(--e1), var(--gloss);
  transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .sede-picker:hover { border-color: var(--accent-line); } }
.sede-picker:active { transform: scale(0.97); }
.sede-picker[disabled] { pointer-events: none; }
.sede-picker .swatch {
  width: 7px; height: 7px; border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--e1), var(--gloss);
  transition: transform 150ms var(--ease-out), color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { color: var(--ink); } }
.icon-btn:active { transform: scale(0.92); }

.avatar {
  width: 32px; height: 32px;
  border: 0; border-radius: 99px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 650; letter-spacing: 0.01em;
  color: oklch(0.995 0 0);
  background: linear-gradient(155deg, oklch(0.48 0.030 256), oklch(0.34 0.028 258));
  box-shadow: var(--e1), inset 0 1px 0 oklch(1 0 0 / 0.24);
  transition: transform 150ms var(--ease-out);
}
.avatar:active { transform: scale(0.92); }

/* ---------- Lienzo y encabezado de página ---------- */

.canvas { padding: 26px 24px 72px; max-width: 1580px; width: 100%; }

.page-head { margin-bottom: 24px; }
.page-title {
  margin: 0;
  font-size: 30px; font-weight: 680; letter-spacing: -0.035em; line-height: 1.1;
}
.page-sub { margin: 5px 0 0; font-size: 14px; color: var(--ink-3); max-width: 68ch; }

.vista { animation: entra 340ms var(--ease-out) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   PRIMITIVAS
   ============================================================ */

.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }

.section-head { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 14px; }
.section-head:first-child { margin-top: 0; }
.section-head h2 { margin: 0; font-size: 17px; font-weight: 640; letter-spacing: -0.025em; }
.section-head .hint { font-size: 12.5px; color: var(--ink-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-weight: 560; letter-spacing: -0.01em;
  box-shadow: var(--e1), var(--gloss);
  transition: transform 150ms var(--ease-out), background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--surface-2); } }
.btn:active { transform: scale(0.97); }

.btn-primary {
  border-color: transparent;
  color: oklch(0.995 0 0);
  background: linear-gradient(178deg, var(--accent-hi), var(--accent));
  box-shadow: var(--e2), inset 0 1px 0 oklch(1 0 0 / 0.3);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: linear-gradient(178deg, var(--accent), var(--accent-ink)); }
}
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: var(--hover); color: var(--ink); } }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-xs); }
.btn-danger { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 12.5px; font-weight: 560; color: var(--ink-2); letter-spacing: -0.01em; }
.input, select.input, textarea.input {
  height: 40px; padding: 0 12px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--e1);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
textarea.input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.input::placeholder { color: var(--ink-3); }
.field .help { font-size: 12px; color: var(--ink-3); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  border-radius: 99px;
  font-size: 11.5px; font-weight: 570; letter-spacing: -0.005em;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  white-space: nowrap;
}
.chip-accent { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-ink); }
.chip-ok     { background: var(--ok-bg);     border-color: var(--ok-line);     color: var(--ok); }
.chip-danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.chip-warn   { background: var(--warn-bg);   border-color: var(--warn);        color: var(--warn); }
.chip-cool   { background: var(--cool-bg);   border-color: var(--cool);        color: var(--cool); }

.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-3); border-radius: 12px;
}
.seg button {
  border: 0; background: transparent;
  height: 30px; padding: 0 13px; border-radius: 9px;
  font-size: 12.5px; font-weight: 550; letter-spacing: -0.01em; color: var(--ink-2);
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.seg button:active { transform: scale(0.96); }
.seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: var(--e1), var(--gloss);
}

/* ---------- Métricas ---------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.metric {
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--e1), var(--gloss);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .metric:hover { transform: translateY(-1px); box-shadow: var(--e2), var(--gloss); }
}
.metric-label { font-size: 12.5px; font-weight: 540; color: var(--ink-3); letter-spacing: -0.01em; }
.metric-value { font-size: 30px; font-weight: 640; letter-spacing: -0.04em; line-height: 1.08; margin-top: 6px; }
.metric-foot { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.delta-up { color: var(--ok); font-weight: 600; }
.delta-down { color: var(--danger); font-weight: 600; }

/* ---------- Listas y tablas ---------- */

.table-wrap {
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--e1), var(--gloss);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--ink-3);
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 130ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  tbody tr.clickable:hover { background: var(--hover); cursor: pointer; }
}
th.right, td.right { text-align: right; }
td.num, td .chip { white-space: nowrap; }
tbody td.muted { white-space: nowrap; }

.ref { font-size: 12.5px; font-weight: 600; }

.panel {
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--e1), var(--gloss);
  overflow: hidden;
}
.panel-head { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; }
.panel-head h3 { margin: 0; font-size: 15px; font-weight: 620; letter-spacing: -0.02em; }
.panel-body { padding: 16px 18px; }

/* ---------- Gráficos ---------- */

.bars { display: grid; }
.bar-row {
  display: grid; grid-template-columns: 136px 1fr 96px;
  align-items: center; gap: 14px; padding: 9px 0;
}
.bar-track { height: 9px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-hi), var(--accent));
  transform-origin: left center;
  animation: crece 640ms var(--ease-out) both;
}
.bar-fill.is-cool { background: linear-gradient(90deg, var(--cool), var(--cool)); opacity: 0.62; }
@keyframes crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.series { display: flex; align-items: flex-end; gap: 6px; height: 148px; padding-top: 10px; }
.series-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.series-bar {
  width: 100%; border-radius: 6px 6px 3px 3px;
  background: var(--surface-3);
  transform-origin: bottom center;
  animation: creceY 560ms var(--ease-out) both;
  transition: background 150ms var(--ease-out);
}
.series-col.is-peak .series-bar { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }
@media (hover: hover) and (pointer: fine) { .series-col:hover .series-bar { background: var(--accent); } }
.series-tick { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }
@keyframes creceY { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ============================================================
   PRODUCCIÓN
   ============================================================ */

.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(262px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start;
  scroll-snap-type: x proximity;
}
.col {
  scroll-snap-align: start;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  display: flex; flex-direction: column; min-height: 190px;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; }
.col-head .stage-dot { width: 8px; height: 8px; border-radius: 99px; }
.col-head h3 { margin: 0; font-size: 13px; font-weight: 620; letter-spacing: -0.015em; }
.col-head .count {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); background: var(--surface-3); border-radius: 99px; padding: 1px 8px;
}
.col-body { padding: 0 8px 8px; display: grid; gap: 8px; }
.col.drop-active { border-color: var(--accent); background: var(--accent-bg); }

.order-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 12px;
  display: grid; gap: 8px;
  cursor: grab;
  box-shadow: var(--e1), var(--gloss);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), opacity 200ms var(--ease-out);
  animation: entra 320ms var(--ease-out) both;
}
@media (hover: hover) and (pointer: fine) {
  .order-card:hover { transform: translateY(-2px); box-shadow: var(--e2), var(--gloss); }
}
.order-card:active { cursor: grabbing; transform: scale(0.985); }
.order-card.dragging { opacity: 0.4; }
.order-card.is-late { box-shadow: var(--e1), var(--gloss), 0 0 0 1px var(--danger-line); }
.oc-top { display: flex; align-items: center; gap: 8px; }
.oc-client { font-weight: 600; letter-spacing: -0.015em; }
.oc-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); }
.oc-items { font-size: 12.5px; color: var(--ink-2); }

.due { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.due.late { color: var(--danger); }
.due.soon { color: var(--warn); }
.due.calm { color: var(--ink-3); }

.prio { width: 7px; height: 7px; border-radius: 99px; background: var(--ink-3); flex: 0 0 auto; }
.prio.express { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.prio.alta { background: var(--warn); }

/* ============================================================
   RECEPCIÓN — pensada como una caja: un toque por servicio,
   nada que buscar, el total siempre a la vista.
   ============================================================ */

.reception { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(340px, 0.9fr); gap: 26px; align-items: start; }

.pos-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.pos-buscar {
  display: flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 13px;
  flex: 0 1 230px;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); color: var(--ink-3);
  box-shadow: var(--e1), var(--gloss);
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.pos-buscar:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.pos-buscar input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  color: var(--ink); font-size: 14px;
}
.pos-buscar input::-webkit-search-cancel-button { display: none; }
.pos-tabs { flex-wrap: wrap; }

/* Fichas grandes: se aciertan de pie, sin mirar */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.tile {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  padding: 15px 16px;
  border: 0; border-radius: var(--r);
  background: var(--surface); text-align: left;
  box-shadow: var(--e1), var(--gloss);
  transition: transform 170ms var(--ease-out), box-shadow 170ms var(--ease-out), background 170ms var(--ease-out);
  animation: entra 280ms var(--ease-out) both;
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover { transform: translateY(-2px); box-shadow: var(--e2), var(--gloss); }
}
.tile:active { transform: scale(0.96); }
.tile.puesto {
  background: var(--accent-bg);
  box-shadow: var(--e1), var(--gloss), 0 0 0 1.5px var(--accent);
}
/* El objeto vive en su propio plano: la tarjeta se inclina con el puntero y
   el objeto se mueve más que el fondo. Eso es lo que da la sensación de
   profundidad, no el desenfoque. Nítido y con luz propia. */
.tile {
  --fig-hi: #4E79C6;
  --fig-md: #274F9C;
  --fig-lo: #10347A;
  perspective: 620px;
  transform-style: preserve-3d;
  will-change: transform;
}

.tile-art {
  position: absolute;
  right: -6px; bottom: -8px;
  width: 94px; height: 98px;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  transition: transform 420ms var(--ease-out);
}
.tile-glow {
  position: absolute;
  inset: 6px 0 14px 8px;
  border-radius: 99px;
  background: radial-gradient(closest-side, var(--fig-md), transparent 72%);
  opacity: 0.20;
  transform: translateZ(4px);
  transition: opacity 300ms var(--ease-out);
}
.tile-obj {
  position: relative;
  display: block;
  transform: translateZ(14px) rotate(-4deg);
  filter: drop-shadow(0 6px 10px oklch(0.30 0.06 260 / 0.28));
  transition: transform 420ms var(--ease-out);
}
.tile-foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transform: translateZ(14px) rotate(-4deg);
  filter: drop-shadow(0 6px 10px oklch(0.30 0.06 260 / 0.30));
}
/* Con foto real, el dibujo sobra */
.tile-art:has(.tile-foto) .tile-obj { display: none; }

@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-glow { opacity: 0.34; }
  .tile:hover .tile-obj, .tile:hover .tile-foto { transform: translateZ(26px) rotate(-1deg) scale(1.08); }
}
.tile.puesto .tile-glow { opacity: 0.36; }

/* Mientras el puntero está encima manda el JavaScript, sin transición que arrastre */
.tile.parallax, .tile.parallax .tile-art { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile-art, .tile-obj { transform: none !important; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tile {
    --fig-hi: oklch(0.860 0.075 250);
    --fig-md: oklch(0.680 0.140 256);
    --fig-lo: oklch(0.430 0.130 262);
  }
  :root:not([data-tema="claro"]) .tile-glow { opacity: 0.26; }
}
:root[data-tema="oscuro"] .tile {
  --fig-hi: oklch(0.860 0.075 250);
  --fig-md: oklch(0.680 0.140 256);
  --fig-lo: oklch(0.430 0.130 262);
}
:root[data-tema="oscuro"] .tile-glow { opacity: 0.26; }

.tile-nombre { position: relative; transform: translateZ(34px); max-width: 78%; font-size: 15px; font-weight: 580; letter-spacing: -0.02em; line-height: 1.25; }
.tile-pie { position: relative; transform: translateZ(34px); display: flex; align-items: baseline; gap: 7px; }
.tile-precio { font-family: var(--mono); font-size: 15px; font-weight: 640; color: var(--accent-ink); letter-spacing: -0.03em; }
.tile-unidad { font-size: 11.5px; color: var(--ink-3); }
.tile-cant {
  position: absolute; top: 10px; right: 10px;
  transform: translateZ(38px);
  min-width: 26px; height: 26px; padding: 0 7px;
  display: grid; place-items: center;
  border-radius: 99px;
  background: var(--accent); color: oklch(0.995 0 0);
  font-family: var(--mono); font-size: 12.5px; font-weight: 650;
  box-shadow: var(--e1);
}

/* La orden en curso: siempre visible, el total como protagonista */
.ticket {
  position: sticky; top: calc(var(--top-h) + 18px);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--e3), var(--gloss);
  overflow: hidden;
}

.ticket-cliente {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 14px 16px;
  border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent; text-align: left;
  transition: background 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .ticket-cliente:hover { background: var(--hover); } }
.ticket-cliente:active { background: var(--surface-3); }
.tc-txt { display: grid; flex: 1; min-width: 0; }
.tc-nombre {
  font-weight: 580; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticket-cliente:not(.con) .tc-nombre { color: var(--ink-3); font-weight: 520; }

.ticket-nota {
  margin: 0; padding: 10px 16px;
  background: var(--accent-bg); color: var(--accent-ink);
  font-size: 12.5px; border-bottom: 1px solid var(--line-soft);
}

.ticket-lines { max-height: 300px; overflow-y: auto; }
.ticket-line {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  animation: entra 220ms var(--ease-out) both;
}
.qty-ctl { display: inline-flex; align-items: center; gap: 3px; }
.qty-ctl button {
  min-width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center; font-weight: 600;
  box-shadow: var(--e1);
  transition: transform 140ms var(--ease-out), color 140ms var(--ease-out);
}
.qty-ctl button:active { transform: scale(0.88); }
.qty-ctl .q {
  font-family: var(--mono); min-width: 42px; font-size: 13.5px; font-weight: 600;
  color: var(--ink); border-color: transparent; background: var(--surface-3);
}

.ticket-totales { padding: 14px 16px 4px; display: grid; gap: 6px; }
.tt-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.tt-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; font-weight: 560; color: var(--ink-2);
  padding-top: 8px;
}
.tt-total .num { font-size: 30px; font-weight: 660; letter-spacing: -0.04em; color: var(--ink); }

.ticket-entrega { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 12px 16px 4px; }
.entrega-op {
  display: grid; gap: 2px; justify-items: center;
  padding: 9px 6px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink-2);
  transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.entrega-op:active { transform: scale(0.96); }
.entrega-op.sel { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink); }
.eo-txt { font-size: 12px; font-weight: 580; letter-spacing: -0.015em; text-align: center; }
.eo-tipo { font-size: 10.5px; color: var(--ink-3); }
.entrega-op.sel .eo-tipo { color: var(--accent-ink); opacity: 0.75; }

.ticket-foot { padding: 14px 16px 16px; display: grid; gap: 8px; }
.btn-cobrar { height: 54px; font-size: 16px; font-weight: 620; letter-spacing: -0.02em; gap: 10px; border-radius: var(--r); }
.btn-cobrar .num { font-size: 17px; font-weight: 680; }
.btn-cobrar[disabled] { opacity: 0.42; pointer-events: none; }

/* Teclado de cantidad */
.tec-pantalla {
  display: grid; gap: 2px; justify-items: center;
  padding: 18px;
  border-radius: var(--r);
  background: var(--surface-2);
}
.tec-valor { font-size: 32px; font-weight: 640; letter-spacing: -0.04em; }
.tec-total { font-size: 15px; color: var(--ink-3); }
.tec-rapidas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.tec-rapidas .btn { height: 40px; padding: 0; }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.teclado button {
  height: 56px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: 21px; font-weight: 560;
  box-shadow: var(--e1), var(--gloss);
  transition: transform 130ms var(--ease-out), background 130ms var(--ease-out);
}
.teclado button:active { transform: scale(0.94); background: var(--surface-3); }
.teclado button[disabled] { opacity: 0; pointer-events: none; }

/* Cobro */
.cobro-total {
  display: grid; gap: 2px; justify-items: center;
  padding: 20px;
  border-radius: var(--r);
  background: var(--accent-bg); color: var(--accent-ink);
}
.cobro-total .num { font-size: 38px; font-weight: 680; letter-spacing: -0.045em; }

.metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.metodo {
  height: 46px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink-2);
  font-weight: 560; letter-spacing: -0.01em;
  box-shadow: var(--e1), var(--gloss);
  transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out), background 150ms var(--ease-out), color 150ms var(--ease-out);
}
.metodo:active { transform: scale(0.96); }
.metodo.sel { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink); font-weight: 620; }

.vuelto {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding: 14px 16px;
  border-radius: var(--r);
  background: var(--ok-bg); color: var(--ok);
  font-weight: 580;
  animation: entra 220ms var(--ease-out) both;
}
.vuelto .num { font-size: 26px; font-weight: 680; letter-spacing: -0.04em; }

.empty { display: grid; place-items: center; gap: 10px; padding: 52px 24px; text-align: center; color: var(--ink-3); }
.empty-icono {
  width: 46px; height: 46px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-3);
}
.empty .empty-title { font-weight: 600; color: var(--ink); font-size: 15px; letter-spacing: -0.02em; }

/* ============================================================
   CLIENTES · SEDES · NOVEDADES
   ============================================================ */

.split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, 0.9fr); gap: 24px; align-items: start; }

.kv { display: grid; grid-template-columns: 122px 1fr; gap: 9px 14px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 540; }

.timeline { display: grid; }
.tl-item { display: grid; grid-template-columns: 16px 1fr; gap: 12px; padding: 10px 0; }
.tl-rail { display: grid; justify-items: center; }
.tl-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); margin-top: 6px; box-shadow: 0 0 0 3px var(--accent-bg); }

.sede-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 12px; }
.sede-cell {
  background: var(--surface);
  border-radius: var(--r);
  padding: 18px;
  display: grid; gap: 12px;
  box-shadow: var(--e1), var(--gloss);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sede-cell:hover { transform: translateY(-2px); box-shadow: var(--e2), var(--gloss); }
}
.sede-name { font-weight: 640; letter-spacing: -0.025em; font-size: 16px; }
.load-meter { display: grid; gap: 6px; }
.load-track { height: 7px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.load-fill { height: 100%; border-radius: 99px; animation: crece 640ms var(--ease-out) both; transform-origin: left; }

/* Novedades: cada una es un caso abierto, no una fila de tabla */
.novedades, .casos { display: grid; gap: 10px; }
.nov, .caso {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--e1), var(--gloss);
  animation: entra 300ms var(--ease-out) both;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nov:hover, .caso:hover { transform: translateY(-1px); box-shadow: var(--e2), var(--gloss); }
}
.nov.abierta, .caso.urgente { box-shadow: var(--e1), var(--gloss), 0 0 0 1px var(--danger-line); }
.nov-cab, .caso-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.nov-desc, .caso-desc { font-size: 13.5px; color: var(--ink-2); max-width: 78ch; }
.nov-pie, .caso-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; font-size: 11.5px; color: var(--ink-3); }
/* Traslado: la ruta se lee de un vistazo, sede origen y sede destino */
.ruta-sedes { display: inline-flex; align-items: center; gap: 7px; letter-spacing: -0.015em; }
.ruta-sedes svg { color: var(--accent); }

.enlace-orden {
  border: 0; background: transparent; padding: 0;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

.nov-acciones, .caso-acciones { display: flex; flex-direction: column; gap: 7px; align-items: stretch; justify-content: center; min-width: 132px; }

/* ============================================================
   BUSCADOR
   ============================================================ */

.buscador {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 11px;
  margin-left: 20px;
  flex: 0 1 330px; min-width: 0;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); color: var(--ink-3);
  box-shadow: var(--e1), var(--gloss);
  transition: flex-basis 260ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.buscador:focus-within { flex-basis: 430px; border-color: var(--accent); box-shadow: var(--ring); color: var(--accent-ink); }
.buscador input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent; color: var(--ink);
  font-size: 13.5px; letter-spacing: -0.01em;
}
.buscador input::placeholder { color: var(--ink-3); }
.buscador input::-webkit-search-cancel-button { display: none; }

.atajo {
  font-family: var(--mono); font-size: 11px; line-height: 1;
  padding: 3px 6px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-2); color: var(--ink-3);
}
.buscador:focus-within .atajo { display: none; }

.buscador-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  z-index: 40;
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--e4), var(--gloss), 0 0 0 1px var(--line-soft);
  overflow: hidden;
  transform-origin: top center;
  animation: brota 200ms var(--ease-out) both;
}
@keyframes brota {
  from { opacity: 0; transform: scale(0.97) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.res {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px;
  border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent; text-align: left;
  transition: background 130ms var(--ease-out);
}
.res:last-of-type { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .res:hover { background: var(--hover); } }
.res.activo { background: var(--accent-bg); }
.res-top { display: flex; align-items: center; gap: 8px; }
.res-cliente { font-size: 12.5px; color: var(--ink-3); }
.buscador-pie {
  padding: 9px 14px;
  background: var(--surface-2); border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 10px;
}

/* ============================================================
   ACCESO
   ============================================================ */

.acceso {
  min-height: 100dvh;
  display: grid; align-content: center; justify-items: center; gap: 24px;
  padding: 44px 16px;
  background:
    radial-gradient(120% 76% at 50% -14%, var(--accent-bg), transparent 60%),
    var(--bg);
}
.acceso-marca { display: flex; align-items: center; gap: 13px; }

.acceso-card {
  width: min(430px, 100%);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--e4), var(--gloss);
  overflow: hidden;
  animation: entra 420ms var(--ease-out) both;
}
.acceso-card { --lat: 22px; }
.acceso-head { padding: 20px var(--lat) 14px; }
.acceso-card > .field, .acceso-card > .btn, .acceso-perfil { margin-left: var(--lat); margin-right: var(--lat); }
.acceso-card > .btn {
  display: flex;
  justify-content: center;
  width: calc(100% - var(--lat) * 2);
  height: 42px;
  margin-top: 6px;
}
.acceso-card > .btn:last-child { margin-bottom: 22px; }
.acceso-perfil { display: flex; align-items: center; gap: 13px; padding-top: 20px; }

.acceso-lista { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.acceso-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px;
  border: 0; border-radius: 12px;
  background: transparent; text-align: left; color: var(--ink-2);
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .acceso-item:not([disabled]):hover { background: var(--hover); } }
.acceso-item:not([disabled]):active { transform: scale(0.985); }
.acceso-item[disabled] { opacity: 0.5; cursor: not-allowed; }
.acceso-item-txt { display: grid; gap: 1px; flex: 1; min-width: 0; }
.acceso-item-nombre { font-weight: 580; color: var(--ink); letter-spacing: -0.015em; }

.pin-input {
  font-family: var(--mono); font-size: 24px; letter-spacing: 0.42em;
  text-align: center; height: 54px; padding-left: 0.42em;
}

/* ============================================================
   MODAL · TOAST
   ============================================================ */

.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: oklch(0.22 0.03 258 / 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: aparece 200ms var(--ease-out) both;
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: fixed; z-index: 61;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(580px, calc(100vw - 28px));
  max-height: min(84dvh, 760px);
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--e4), var(--gloss);
  animation: modalEntra 260ms var(--ease-out) both;
}
@keyframes modalEntra {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal-head { padding: 20px 22px 14px; display: flex; align-items: center; gap: 10px; }
.modal-head h3 { margin: 0; font-size: 19px; font-weight: 660; letter-spacing: -0.03em; }
.modal-body { padding: 0 22px 20px; display: grid; gap: 16px; }
.modal-foot {
  position: sticky; bottom: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--line-soft);
  display: flex; gap: 9px; justify-content: flex-end;
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
}

.toaster {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: grid; gap: 9px; justify-items: end;
}
.toast {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; min-width: 268px;
  background: var(--ink); color: var(--bg);
  border-radius: 14px;
  box-shadow: var(--e4);
  font-size: 13.5px; font-weight: 520; letter-spacing: -0.01em;
  transition: transform 400ms var(--ease-out), opacity 400ms var(--ease-out);
}
@starting-style { .toast { opacity: 0; transform: translateY(16px) scale(0.96); } }
.toast.leaving { opacity: 0; transform: translateY(8px) scale(0.97); }
.toast .toast-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--ok); flex: 0 0 auto; }

.dot-live { width: 7px; height: 7px; border-radius: 99px; background: #10347A; animation: latido 2.6s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

.sk {
  background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 50%, var(--surface-3) 70%);
  background-size: 220% 100%;
  animation: brillo 1.4s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes brillo { to { background-position: -220% 0; } }

/* ============================================================
   BARRA INFERIOR (teléfono)
   ============================================================ */

.tabbar, .barra-orden { display: none; }

@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .nav { display: none; }
  .canvas { padding: 18px 16px calc(84px + env(safe-area-inset-bottom)); }
  .topbar { padding: 0 16px; }
  .page-title { font-size: 25px; }
  .reception, .split { grid-template-columns: 1fr; }
  .ticket { position: static; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .nov { grid-template-columns: 1fr; }
  .nov-acciones, .caso-acciones { flex-direction: row; }

  /* Con prendas cargadas, la orden en curso queda siempre a un toque */
  .barra-orden {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 45;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border: 0; border-radius: 14px;
    background: linear-gradient(178deg, var(--accent-hi), var(--accent));
    color: oklch(0.995 0 0);
    box-shadow: var(--e3), inset 0 1px 0 oklch(1 0 0 / 0.28);
    font-weight: 580; letter-spacing: -0.01em;
    transition: transform 180ms var(--ease-out);
  }
  .barra-orden:active { transform: scale(0.98); }
  .barra-orden .bo-total { margin-left: auto; font-family: var(--mono); font-weight: 680; font-size: 17px; }

  /* Los avisos no pueden taparle el botón de cobrar a quien está atendiendo */
  .toaster {
    left: 12px; right: 12px;
    bottom: calc(146px + env(safe-area-inset-bottom));
    justify-items: stretch;
  }
  .toast { min-width: 0; }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; justify-content: space-around;
    gap: 2px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: color-mix(in oklch, var(--bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line-soft);
  }
  .tab {
    flex: 1;
    display: grid; justify-items: center; gap: 3px;
    padding: 6px 2px 5px;
    border: 0; border-radius: 12px;
    background: transparent; color: var(--ink-3);
    font-size: 10.5px; font-weight: 550; letter-spacing: -0.01em;
    transition: color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
  }
  .tab:active { transform: scale(0.93); }
  .tab[aria-current="page"] { color: var(--accent); background: var(--accent-bg); }
  .tab .punto {
    position: absolute; margin: -3px 0 0 18px;
    width: 6px; height: 6px; border-radius: 99px; background: var(--danger);
  }
}

/* En tableta la orden pasa abajo: el catálogo necesita el ancho, y el total
   sigue accesible en la barra flotante de cobro. */
@media (max-width: 1180px) {
  .reception { grid-template-columns: 1fr; }
  .ticket { position: static; }
  .barra-orden { display: flex; bottom: calc(18px + env(safe-area-inset-bottom)); }
  .toaster { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

@media (max-width: 1120px) {
  .buscador { flex-basis: 210px; margin-left: 12px; }
  .buscador .atajo { display: none; }
}
@media (max-width: 560px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  /* Dos fichas por fila: siguen siendo grandes y se ve el doble de catálogo */
  .pos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { min-height: 92px; padding: 13px; }
  .tile-nombre { font-size: 14px; }
  .tile-precio { font-size: 14px; }
  .pos-buscar { flex: 1 1 100%; }
  .ticket-entrega { grid-template-columns: 1fr; }
  .entrega-op { flex-direction: row; grid-auto-flow: column; justify-items: start; padding: 11px 14px; }
  .teclado button { height: 62px; font-size: 23px; }

  .buscador { display: none; }
  .clock { display: none; }
  .modal { width: calc(100vw - 20px); border-radius: var(--r-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   ESTADO DE LA ORDEN
   Los pasos, el contenido y la bitácora: lo que responde
   «¿en qué va lo mío?» sin preguntarle a nadie.
   ============================================================ */

.bloque {
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--surface-2);
}
.bloque-tit {
  font-size: 11.5px; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}

/* Pasos: la orden avanza de izquierda a derecha y se toca para moverla */
.pasos { display: grid; grid-auto-flow: column; gap: 4px; }
.paso {
  display: grid; justify-items: center; gap: 7px;
  padding: 4px 2px 2px;
  border: 0; background: transparent; color: var(--ink-3);
  font-size: 10.5px; font-weight: 560; letter-spacing: -0.01em; text-align: center;
  transition: color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.paso:not([disabled]):active { transform: scale(0.94); }
.paso-punto {
  position: relative;
  width: 100%; height: 6px;
  border-radius: 99px;
  background: var(--surface-3);
  transition: background 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.paso.hecho { color: var(--ink-2); }
.paso.hecho .paso-punto { background: var(--accent-line); }
.paso.actual { color: var(--accent-ink); font-weight: 660; }
.paso.actual .paso-punto {
  background: linear-gradient(90deg, var(--accent-hi), var(--accent));
  box-shadow: 0 0 0 3px var(--accent-bg);
}
@media (hover: hover) and (pointer: fine) {
  .paso:not([disabled]):not(.actual):hover { color: var(--ink); }
  .paso:not([disabled]):not(.actual):hover .paso-punto { background: var(--ink-3); }
}
.paso[disabled] { cursor: default; }

/* Contenido: qué prendas trae la bolsa */
.contenido { display: grid; gap: 7px; }
.cont-linea { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 10px; font-size: 13.5px; }
.cont-cant {
  text-align: right; font-weight: 660; color: var(--accent-ink);
}

/* Bitácora: lo último arriba */
.bitacora { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.bit-item { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 7px 0; }
.bit-punto {
  width: 8px; height: 8px; margin-top: 5px; border-radius: 99px;
  background: var(--ink-3);
  box-shadow: 0 0 0 3px var(--surface-3);
}
.bit-punto.etapa    { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.bit-punto.alta     { background: var(--ink-2); }
.bit-punto.dinero   { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.bit-punto.entrega  { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.bit-punto.novedad,
.bit-punto.vuelta   { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.bit-punto.traslado { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.bit-txt { font-size: 13px; line-height: 1.35; }

/* Avanzar sin arrastrar, desde la propia tarjeta del tablero */
.oc-avanza {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 30px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 12px; font-weight: 560; letter-spacing: -0.01em;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out), transform 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .oc-avanza:hover { background: var(--accent); border-color: transparent; color: oklch(0.995 0 0); }
  .oc-avanza:hover svg { color: inherit; }
}
.oc-avanza:active { transform: scale(0.96); }
.oc-avanza.lista { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }

@media (max-width: 560px) {
  .pasos { grid-auto-flow: row; }
  .paso { grid-template-columns: 60px 1fr; justify-items: start; text-align: left; }
  .paso-punto { width: 100%; }
}

/* ============================================================
   PANELES POR ROL
   El admin lee un semáforo de sedes y una lista de decisiones.
   La sede lee qué atender ahora y cómo va su caja.
   ============================================================ */

.semaforo {
  display: inline-block; width: 10px; height: 10px; border-radius: 99px;
  box-shadow: 0 0 0 3px var(--surface-3);
}
.semaforo.verde { background: var(--ok);     box-shadow: 0 0 0 3px var(--ok-bg); }
.semaforo.ambar { background: var(--warn);   box-shadow: 0 0 0 3px var(--warn-bg); }
.semaforo.rojo  { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); animation: latido 1.8s ease-in-out infinite; }

/* Lista de cosas por hacer: una fila por asunto, toda la fila es botón */
.pendientes { display: grid; gap: 6px; }
.pendiente {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  width: 100%; padding: 11px 12px 11px 10px;
  border: 0; border-radius: 12px; text-align: left;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--e1), var(--gloss);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pendiente:hover { transform: translateX(2px); box-shadow: var(--e2), var(--gloss); }
}
.pendiente:active { transform: scale(0.99); }
.pendiente svg { color: var(--ink-3); }
.pend-txt { font-size: 13px; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aviso de caja sin abrir: lo primero que ve la sede si olvidó la base */
.aviso-caja {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 16px;
  border-radius: var(--r);
  background: var(--warn-bg); color: var(--ink);
  box-shadow: 0 0 0 1px var(--warn) inset;
}
.aviso-caja svg { color: var(--warn); flex: none; }
.aviso-caja > div { flex: 1; font-size: 13.5px; }

/* El admin dentro de una sede: el selector lo dice sin leer */
.sede-picker.dentro { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-ink); }
.sede-picker.dentro .swatch { background: var(--accent); box-shadow: 0 0 0 3px oklch(1 0 0 / 0.5); }

@media (max-width: 880px) {
  .pend-txt { white-space: normal; }
}

/* Alta rápida de cliente, dentro del mismo diálogo de buscar */
.alta-rapida {
  display: grid; gap: 12px;
  padding: 14px;
  border-radius: var(--r);
  background: var(--accent-bg);
  box-shadow: 0 0 0 1px var(--accent-line) inset;
  animation: entra 220ms var(--ease-out) both;
}
.alta-cab { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; color: var(--accent-ink); letter-spacing: -0.01em; }

/* ============================================================
   MOTOR DE PLANTA — el reloj de cada orden
   ============================================================ */

.reloj-etapa { display: grid; gap: 4px; }
.reloj-pista { height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.reloj-lleno { height: 100%; border-radius: 99px; background: var(--accent); transition: width 600ms var(--ease-out); }
.reloj-etapa.por_salir .reloj-lleno { background: var(--ok); }
.reloj-etapa.demorada .reloj-lleno { background: var(--danger); }
.reloj-etapa.frenada .reloj-lleno { background: var(--warn); }
.reloj-txt { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); letter-spacing: -0.01em; }
.reloj-etapa.por_salir .reloj-txt { color: var(--ok); }
.reloj-etapa.demorada .reloj-txt { color: var(--danger); font-weight: 600; }
.reloj-etapa.frenada .reloj-txt { color: var(--warn); }

.bit-punto.auto { background: var(--cool); box-shadow: 0 0 0 3px var(--cool-bg); }

.tiempo-in { width: 64px; height: 32px; padding: 0 8px; text-align: right; font-size: 12.5px; }
.tiempo-in.propio { border-color: var(--accent-line); background: var(--accent-bg); font-weight: 600; }

/* Propuesta del sistema: la tarjeta la señala y el botón la acepta */
.reloj-etapa.propuesta .reloj-lleno { background: var(--ok); }
.reloj-etapa.propuesta .reloj-txt { color: var(--ok); font-weight: 600; }
.reloj-etapa.espera .reloj-lleno { background: var(--cool); }
.reloj-etapa.espera .reloj-txt { color: var(--cool); }
.oc-avanza.propuesta {
  background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); font-weight: 620;
  animation: pulsoSuave 2.2s ease-in-out infinite;
}
@keyframes pulsoSuave { 0%,100% { box-shadow: 0 0 0 0 oklch(0.548 0.118 152 / 0.0); } 50% { box-shadow: 0 0 0 4px oklch(0.548 0.118 152 / 0.14); } }
@media (hover: hover) and (pointer: fine) { .oc-avanza.propuesta:hover { background: var(--ok); color: oklch(0.995 0 0); border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .oc-avanza.propuesta { animation: none; } }

/* ============================================================
   TELÉFONO — comportamiento de aplicación nativa
   Por debajo de 700 px el sistema deja de ser "web encogida":
   barra superior compacta con título grande de iOS, hojas que suben
   desde abajo en vez de modales centrados, tablas que se vuelven
   tarjetas, tablero con una columna por pantalla y controles de 44 px.
   ============================================================ */

@media (max-width: 700px) {
  :root { --top-h: 52px; }

  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; }

  /* --- Barra superior: solo lo esencial; el título vive en el lienzo --- */
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar .clock { display: none; }
  .sede-picker { height: 32px; padding: 0 10px; font-size: 12.5px; max-width: 46vw; }
  .sede-picker #sede-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .icon-btn, .avatar { width: 32px; height: 32px; }

  /* --- Título grande al estilo de iOS: 28 px, muy negro, pegado a la izquierda --- */
  .canvas { padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); }
  .page-head { margin-bottom: 14px; }
  .page-title { font-size: 28px; letter-spacing: -0.035em; }
  .page-sub { font-size: 13px; margin-top: 2px; }
  .section-head { margin: 26px 0 10px; }
  .section-head h2 { font-size: 15px; }

  /* --- Métricas: dos por fila, más compactas --- */
  .metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric { padding: 12px 13px; border-radius: 14px; }
  .metric-value { font-size: 22px; }
  .metric-label { font-size: 11.5px; }
  .metric-foot { font-size: 11px; }

  /* --- Controles con zona táctil de 44 px --- */
  .btn { height: 44px; border-radius: 12px; }
  .btn-sm { height: 36px; }
  .input, select.input { height: 44px; font-size: 16px; } /* 16px evita el zoom de iOS al enfocar */
  textarea.input { font-size: 16px; }
  .seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { height: 34px; white-space: nowrap; flex: none; }

  /* --- Tablas → tarjetas apiladas. Cada fila es una tarjeta, cada celda una
         línea "etiqueta · valor" con la etiqueta tomada del encabezado. --- */
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .table-scroll { overflow: visible; }
  .table-wrap tr {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--e1), var(--gloss);
    padding: 10px 14px;
    margin-bottom: 10px;
  }
  .table-wrap tr:last-child { margin-bottom: 0; }
  .table-wrap td {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: right;
  }
  .table-wrap td:last-child { border-bottom: 0; }
  .table-wrap td::before {
    content: attr(data-et);
    flex: none;
    font-size: 11.5px; color: var(--ink-3); font-weight: 560; letter-spacing: -0.005em;
    text-align: left;
  }
  .table-wrap td:not([data-et])::before { content: none; }
  .table-wrap td.right { text-align: right; }
  /* La primera celda de cada fila es el título de la tarjeta */
  .table-wrap td:first-child { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; padding-top: 2px; }
  .table-wrap td:first-child::before { display: none; }
  .table-wrap td:first-child { justify-content: flex-start; text-align: left; }
  /* Celdas con solo botones: a ancho completo */
  .table-wrap td:has(> .row), .table-wrap td:has(> .btn) { justify-content: stretch; }
  .table-wrap td > .row { width: 100%; justify-content: stretch; }
  .table-wrap td > .row .btn, .table-wrap td > .btn { flex: 1; }
  .table-wrap td .tiny.muted.num { display: block; }
  /* La etiqueta de la celda siempre en la fuente de texto, aunque la celda sea numérica */
  .table-wrap td::before { font-family: var(--sans); letter-spacing: -0.005em; font-variant-numeric: normal; }
  /* Celda con nombre + teléfono: los dos en columna, alineados a la derecha */
  .table-wrap td > div { display: block; }
  .table-wrap td > div + div { margin-top: 2px; }
  .table-wrap td:not(:first-child) { flex-wrap: wrap; }
  .table-wrap td:not(:first-child) > div:first-of-type { margin-left: auto; }
  .table-wrap td:not(:first-child) > div + div { flex-basis: 100%; text-align: right; }

  /* --- Kanban: una columna por pantalla, con snap, y se ve el borde de la siguiente --- */
  .kanban {
    grid-auto-columns: 86vw;
    gap: 10px;
    margin: 0 -16px; padding: 0 16px 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .col { scroll-snap-align: start; min-height: 56vh; }
  /* El párrafo largo sobra en el teléfono; los chips de resumen bastan */
  .kanban-ayuda { display: none; }
  /* Saltos entre columnas: una fila de puntos con nombre, que se desliza */
  .kanban-saltos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 2px -16px 10px; padding: 0 16px; }
  .kanban-saltos::-webkit-scrollbar { display: none; }
  .kanban-saltos button {
    flex: none; display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 12px; border-radius: 99px; border: 0;
    background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 560;
    box-shadow: var(--e1), var(--gloss);
  }
  .kanban-saltos button .n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
  .kanban-saltos button.activa { background: var(--accent-bg); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-line) inset; }
  .order-card { padding: 13px; }
  .oc-avanza { height: 40px; font-size: 13px; }

  /* --- Recepción: dos fichas por fila ya está; el tiquete va abajo y el botón Cobrar flota --- */
  .pos-barra { gap: 8px; }
  .pos-tabs { width: 100%; }
  .tile { min-height: 96px; border-radius: 14px; }
  .ticket { border-radius: 18px; }
  .barra-orden {
    left: 12px; right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    height: 52px; border-radius: 16px;
    font-size: 15px;
  }

  /* --- Hojas (modales) que suben desde abajo, a lo iOS --- */
  .modal {
    top: auto; bottom: 0; left: 0; right: 0;
    transform: none;
    width: 100%;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    animation: subeHoja 340ms var(--ease-drawer) both;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal::before {
    content: ""; display: block;
    width: 38px; height: 5px; margin: 8px auto 0;
    border-radius: 99px; background: var(--surface-3);
  }
  @keyframes subeHoja { from { transform: translateY(100%); } to { transform: none; } }
  .modal-head { padding: 12px 18px 10px; }
  .modal-head h3 { font-size: 18px; }
  .modal-body { padding: 0 18px 18px; gap: 14px; }
  /* Pie de la hoja: la principal a todo el ancho, las secundarias en una fila que se desliza */
  .modal-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; }
  .modal-foot .btn { flex: 1 1 auto; height: 40px; font-size: 14px; padding: 0 12px; }
  .modal-foot .btn-primary, .modal-foot .btn-danger { flex-basis: 100%; height: 48px; font-size: 15.5px; }
  .modal-foot .btn-primary { order: -1; }
  .scrim { backdrop-filter: blur(4px); }

  /* --- Teclado numérico y cobro: más grandes --- */
  .teclado button { height: 60px; font-size: 24px; border-radius: 14px; }
  .tec-valor { font-size: 34px; }
  .cobro-total .num { font-size: 40px; }
  .metodo { height: 48px; }

  /* --- Barra inferior: zona segura y 5 pestañas cómodas --- */
  .tabbar { padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); }
  .tab { padding: 7px 2px 6px; font-size: 10.5px; min-height: 48px; }

  /* --- Paneles por rol --- */
  .split { gap: 14px; }
  .pendiente { padding: 12px; }
  .pend-txt { white-space: normal; font-size: 13.5px; line-height: 1.35; }
  .sede-grid { gap: 10px; }

  /* --- Bitácora y pasos en el detalle --- */
  /* Pasos: en fila, cada uno con su barrita; la actual un poco más ancha */
  .pasos { grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 4px; }
  .paso { padding: 6px 2px 2px; font-size: 10px; }
  .paso-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* --- Buscador global no cabe en la barra: vive como botón que abre la hoja --- */
  .buscador { display: none; }
}

.solo-movil { display: none; }
@media (max-width: 700px) { .solo-movil { display: grid; } }

.kanban-saltos { display: none; }

/* Teléfono en horizontal y tablets pequeñas: tablero a dos columnas */
@media (min-width: 701px) and (max-width: 980px) {
  .kanban { grid-auto-columns: 46vw; scroll-snap-type: x proximity; }
}

/* ============================================================
   FICHAS CON FOTO REAL
   Nombre y precio a la izquierda, la foto como miniatura redondeada
   a la derecha. Se lee rápido y se reconoce más rápido.
   ============================================================ */

.tile {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
}
.tile-texto { display: grid; gap: 6px; min-width: 0; }
.tile-texto .tile-nombre, .tile-texto .tile-pie { transform: none; max-width: none; }
.tile-thumb {
  width: 72px; height: 72px;
  border-radius: 16px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 1px var(--line-soft), var(--e1);
  background: var(--surface-2);
}
.tile-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-thumb img { transform: scale(1.09); }
}
.tile.puesto .tile-thumb { box-shadow: 0 0 0 2px var(--accent), var(--e1); }
/* la silueta de reserva ocupa el mismo espacio que la miniatura */
.tile .tile-art { position: static; width: 64px; height: 70px; opacity: 0.9; filter: none; transform: none; }

@media (max-width: 560px) {
  .tile { min-height: 84px; }
  .tile-thumb { width: 60px; height: 60px; border-radius: 13px; }
}

/* ============================================================
   Empresas y licencias
   ============================================================ */

/* Cuánto de su plan lleva usado una empresa, de un vistazo */
.uso { display: grid; gap: 5px; min-width: 92px; }
.uso-cifra { display: flex; align-items: baseline; gap: 2px; font-size: 14px; letter-spacing: -0.02em; }
.uso-cifra b { font-weight: 680; }
.uso-cifra span { font-size: 12px; }
.uso-pista {
  height: 5px; border-radius: 99px; overflow: hidden;
  background: var(--line-soft);
}
.uso-pista i {
  display: block; height: 100%; border-radius: 99px;
  transition: width 420ms var(--ease-out);
}

/* Dos campos por fila en los formularios largos */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Marca del producto (pantalla de acceso) ---------- */
.producto-nombre {
  font-size: 26px; font-weight: 760; letter-spacing: -0.03em;
  color: var(--ink);
}
/* La firma del sistema dentro de la aplicación: discreta. Quien manda
   en la pantalla es la marca de la lavandería, no la nuestra. */
.nav-firma {
  padding: 10px 16px 14px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); opacity: 0.7;
}
/* Atajos de demostración: solo existen con ?demo=1 */
.demo-cuentas { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: grid; gap: 4px; }
.demo-fila {
  text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 7px 9px; border-radius: 9px;
  font-size: 11px; color: var(--ink-2);
  transition: background 160ms var(--ease-out);
}
.demo-fila:hover { background: var(--surface-2); }
.demo-fila .num { color: var(--ink-3); }

/* ============================================================
   Superadministración: la licencia, no la lavandería
   ============================================================ */

/* El recordatorio del límite, a la vista y no en la letra menuda */
.aviso-privacidad {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 17px; margin-bottom: 18px;
  border-radius: 14px;
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent-ink);
}
.aviso-privacidad b { display: block; font-size: 14px; letter-spacing: -0.01em; }
.aviso-privacidad span { display: block; font-size: 13px; margin-top: 3px; line-height: 1.5; opacity: 0.86; }

/* La decisión del cliente sobre su propia privacidad */
.aviso-acceso {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 18px;
  border-radius: 14px;
  background: var(--warn-bg, #FBF1DF);
  box-shadow: inset 0 0 0 1px rgba(196,138,34,0.34);
}
.aviso-acceso > div:first-of-type { flex: 1; min-width: 260px; }
.aviso-acceso b { display: block; font-size: 14px; }
.aviso-acceso span { display: block; font-size: 13px; margin-top: 3px; line-height: 1.5; color: var(--ink-2); }
.aviso-acceso.abierto { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-line); }

/* Su propio rastro */
.bitacora { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.bitacora li {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: baseline;
  padding: 10px 2px; font-size: 13px;
  border-top: 1px solid var(--line-soft);
}
.bitacora li:first-child { border-top: 0; }

.mini-titulo {
  margin: 20px 0 10px;
  font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 620;
}
.mini-titulo:first-child { margin-top: 0; }
.acceso-caja { padding: 14px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 10px; }
.acceso-caja p { margin: 0; }
.notas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.notas li { padding: 8px 10px; border-radius: 9px; background: var(--surface-2); }
@media (max-width: 560px) { .bitacora li { grid-template-columns: 1fr; gap: 2px; } }

/* Ajustes: rejillas y conmutadores */
.grid-tiempos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.chip-toggle {
  padding: 8px 15px; border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 13px; font-weight: 560;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: background 180ms var(--ease-out), color 180ms;
}
.chip-toggle.puesto { background: var(--accent); color: #fff; box-shadow: none; }

/* ============================================================
   Contención horizontal

   Medido en un iPhone de 375 px: tres pantallas empujaban la página
   a lo ancho y obligaban a arrastrar el dedo de lado para leer.

   · Tarifas llegaba a 1108 px. Las tablas se apilan como tarjetas en
     móvil, pero el cuerpo de un mensaje de WhatsApp —912 px en una
     sola línea— no partía, y de paso arrastraba la barra inferior.
   · Caja llegaba a 592 px: el filtro y el botón de egreso en una fila
     que no envolvía.
   · Sedes se pasaba 8 px por una etiqueta larga.

   La causa era siempre la misma: un flex cuyos hijos no pueden
   encogerse por debajo de su contenido. `min-width: 0` es lo que
   levanta ese suelo.
   ============================================================ */

@media (max-width: 880px) {
  /* Ninguna fila puede empujar la pantalla */
  .row, .row-between { flex-wrap: wrap; }
  .row > *, .row-between > * { min-width: 0; }

  /* Antes de ensanchar la página, el texto se recorta */
  .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  /* La barra inferior se ancla al viewport pase lo que pase */
  .tabbar { max-width: 100vw; }
  .tab { min-width: 0; }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 700px) {
  /* Celdas convertidas en filas de tarjeta: el texto largo parte */
  .table-wrap td { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
  .table-wrap td > * { min-width: 0; }

  /* El filtro ocupa su línea y el botón cae debajo, en vez de
     empujarse mutuamente fuera de la pantalla */
  .section-head { flex-wrap: wrap; }
}

/* Mensajes de WhatsApp: en pantalla ancha la situación va en una línea y
   el texto se limita a una medida cómoda de lectura. En móvil las dos
   cosas estorban —la tabla ya se apiló como tarjeta—, así que se
   levantan. Estaban en línea, donde no había forma de levantarlas. */
.msj-situacion { font-weight: 550; white-space: nowrap; }
.msj-texto { max-width: 60ch; }

@media (max-width: 700px) {
  .msj-situacion { white-space: normal; }
  .msj-texto { max-width: 100%; }

  /* `tbody td.muted` fuerza una sola línea, y con razón en una tabla de
     verdad: evita que una fecha o un código se partan. Pero aquí la
     tabla ya se apiló como tarjeta, y esa misma regla mantenía el texto
     de un mensaje en una línea de 912 px que empujaba toda la página.
     Los montos (`td.num`) sí siguen sin partirse. */
  .table-wrap tbody td.muted { white-space: normal; overflow-wrap: anywhere; }
}

/* ============================================================
   Zonas de toque

   Las casillas nativas miden 13×13 px. En un mostrador se marcan con
   el dedo, no con un ratón, y a ese tamaño se falla más de lo que se
   acierta. Van dentro de <label>, así que el texto ya sirve de zona
   de toque; esto agranda la casilla y le da a la fila la altura
   mínima cómoda para un pulgar.
   ============================================================ */

input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px;
  margin: 0; flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}

@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  label.row:has(> input[type="checkbox"]),
  label.row:has(> input[type="radio"]) { min-height: 44px; }
  td > input[type="checkbox"] { width: 24px; height: 24px; }
}

/* ============================================================
   Selector de archivo

   El control nativo dibuja su propio botón gris, con su tipografía y
   sus esquinas, y se veía pegado dentro de un campo que sigue otra
   línea. Es el sitio donde el cliente sube SU logo: no puede ser lo
   único del sistema que parece sin terminar.
   ============================================================ */

input[type="file"].input {
  display: flex; align-items: center;
  padding: 0 12px 0 0;
  font-size: 12.5px; color: var(--ink-3);
  cursor: pointer;
  overflow: hidden;
}

input[type="file"].input::file-selector-button {
  height: 38px;
  margin: 0 12px 0 0;
  padding: 0 14px;
  border: 0; border-right: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit; font-weight: 560; letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  input[type="file"].input::file-selector-button:hover { background: var(--hover); }
}

/* ============================================================
   La marca del cliente

   El sistema se vende con el nombre y el logo de cada lavandería.
   Aparece en tres sitios: la cabecera de cada pantalla, el pie de
   la barra y lo que se imprime. Mientras no suban logo se usan sus
   iniciales, que es mejor que un hueco o un logo ajeno.
   ============================================================ */

.marca-emp {
  flex: 0 0 auto;
  border-radius: 10px;
  object-fit: contain;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.marca-emp-txt {
  display: grid; place-items: center;
  font-weight: 660; letter-spacing: -0.02em;
  color: var(--ink-2);
}

.page-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
/* El texto puede encogerse; el logo no. Sin esto, un título largo
   empuja el logo fuera de la pantalla en móvil. */
.page-head-txt { min-width: 0; }

.nav-firma { display: grid; gap: 6px; }
.pie-marca {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; letter-spacing: -0.01em; text-transform: none;
  color: var(--ink-2); font-weight: 560;
  min-width: 0;
}
.pie-marca > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-firma { font-size: 9.5px; letter-spacing: 0.14em; }

@media (max-width: 560px) {
  .page-head { gap: 11px; }
  .marca-emp { width: 32px !important; height: 32px !important; }
}

/* ============================================================
   Detalle de la prenda

   Se marca de pie, con el cliente delante y muchas veces sin mirar
   la pantalla: opciones grandes, en una sola vista, y se quitan
   volviéndolas a tocar.
   ============================================================ */

.linea-detalle {
  margin-top: 4px; padding: 3px 8px;
  max-width: 100%;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent; color: var(--ink-3);
  font-size: 11.5px; font-weight: 540; letter-spacing: -0.01em;
  text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .linea-detalle:hover { border-color: var(--accent-line); color: var(--accent-ink); }
}
.linea-detalle:active { transform: scale(0.97); }

.chip-ops { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-op {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 550; letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out),
              color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.chip-op:active { transform: scale(0.96); }
.chip-op.sel {
  background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-ink);
  font-weight: 620;
}
.chip-rec {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--warn);
}
.chip-op.sel .chip-rec { color: inherit; opacity: 0.75; }

/* Lo que se usa una vez al mes va plegado: quien atiende una fila no
   debe tropezar a diario con la cortesía ni con las agencias. */
.plegado {
  margin-top: 16px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.plegado > summary {
  cursor: pointer;
  font-size: 13px; font-weight: 560; color: var(--ink-3);
  list-style: none;
  padding: 8px 0;
  min-height: 40px; display: flex; align-items: center; gap: 8px;
}
.plegado > summary::-webkit-details-marker { display: none; }
.plegado > summary::before {
  content: '+'; font-size: 15px; font-weight: 600;
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2);
}
.plegado[open] > summary::before { content: '−'; }
@media (hover: hover) and (pointer: fine) {
  .plegado > summary:hover { color: var(--ink); }
}