/* Yoitabi CRM — unified stylesheet. Served from /static/yoitabi.css.
   All three entry points (dashboard.py::_page, server.py::CONSULTAS_HTML,
   server.py::CHAT_HTML, index.py/biblia) load this file instead of inlining
   their own styles. Classes kept compatible with the legacy names so HTML
   doesn't need a mass rewrite. */

/* ─── Fonts ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ─── Tokens (light) ────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-surface-alt: #f8fafc;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-subtle: #64748b;

  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-on-primary: #ffffff;

  --color-success: #059669;
  --color-success-soft: #d1fae5;
  --color-success-text: #065f46;

  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-warning-text: #92400e;

  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-danger-text: #991b1b;

  --color-info: #0891b2;
  --color-info-soft: #cffafe;
  --color-info-text: #155e75;

  --color-purple: #7c3aed;
  --color-purple-soft: #ede9fe;
  --color-purple-text: #5b21b6;

  --color-vip-bg: #fef9c3;
  --color-vip-text: #854d0e;

  --font-sans: 'DM Sans', 'Calibri', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-8: 48px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  --duration-fast: 150ms;
  --duration-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ─── Tokens (dark) ─────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b1220;
    --color-surface: #111827;
    --color-surface-muted: #1f2937;
    --color-surface-alt: #0f172a;
    --color-border: #1f2937;
    --color-border-strong: #334155;

    --color-text: #e5e7eb;
    --color-text-muted: #cbd5e1;
    --color-text-subtle: #94a3b8;

    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-soft: #1e3a8a;
    --color-on-primary: #0b1220;

    --color-success: #34d399;
    --color-success-soft: #064e3b;
    --color-success-text: #a7f3d0;

    --color-warning: #fbbf24;
    --color-warning-soft: #451a03;
    --color-warning-text: #fde68a;

    --color-danger: #f87171;
    --color-danger-soft: #450a0a;
    --color-danger-text: #fecaca;

    --color-info: #22d3ee;
    --color-info-soft: #083344;
    --color-info-text: #a5f3fc;

    --color-purple: #a78bfa;
    --color-purple-soft: #2e1065;
    --color-purple-text: #ddd6fe;

    --color-vip-bg: #78350f;
    --color-vip-text: #fde68a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
}
.page--narrow { max-width: 960px; }
.page--medium { max-width: 1100px; }

h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.01em; }
h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); font-weight: 600; }
h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); font-weight: 600; }
.sub { color: var(--color-text-muted); margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }

a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--color-primary-hover); }

code, pre, .mono { font-family: var(--font-mono); }

/* ─── Focus ─────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ─── Icons (SVG inline from ui.icon()) ─────────────────────────────────── */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 14px; height: 14px; }
.icon--md { width: 16px; height: 16px; }
.icon--lg { width: 20px; height: 20px; }
.icon--xl { width: 28px; height: 28px; }
.icon-row { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ─── Brand + topnav ────────────────────────────────────────────────────── */
/* ─── Site header (logo + nav + user) ──────────────────────────────────── */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px 16px;
  border-bottom: 1px solid oklch(0.93 0.005 80);
  background: oklch(0.985 0.003 80);
  margin-bottom: var(--sp-5);
  gap: var(--sp-4);
}

/* Logo */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.site-logo__word {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: oklch(0.22 0.01 80);
  line-height: 1;
}
.site-logo__dot { color: oklch(0.55 0.13 50); }

/* Main nav (center) */
.site-nav {
  display: flex;
  gap: 2px;
  align-items: center;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 10px;
  font-size: 14px;
  font-weight: 400;
  color: oklch(0.5 0.01 80);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color .15s;
  white-space: nowrap;
}
.site-nav a:hover { color: oklch(0.22 0.01 80); }
.site-nav a.active {
  color: oklch(0.22 0.01 80);
  font-weight: 500;
  border-bottom-color: oklch(0.22 0.01 80);
}

/* User area (right) */
.site-user {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.site-user__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 6px;
  color: oklch(0.5 0.01 80);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.site-user__tool:hover { background: oklch(0.94 0.003 80); color: oklch(0.22 0.01 80); }
.site-user__tool.active { color: oklch(0.22 0.01 80); background: oklch(0.92 0.005 80); }
.site-user__sep {
  width: 1px; height: 18px;
  background: oklch(0.88 0.005 80);
  margin: 0 6px;
  flex-shrink: 0;
}
.site-user__name,
.site-user__logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.site-user__name { color: oklch(0.22 0.01 80); font-weight: 500; }
.site-user__name:hover { background: oklch(0.94 0.003 80); }
.site-user__name.active { background: oklch(0.92 0.005 80); }
.site-user__logout { color: oklch(0.5 0.04 25); }
.site-user__logout:hover { background: oklch(0.97 0.04 25); }

@media (prefers-color-scheme: dark) {
  .site-header { background: var(--color-surface); border-bottom-color: var(--color-border); }
  .site-logo__word { color: var(--color-text); }
  .site-nav a { color: var(--color-text-muted); }
  .site-nav a:hover, .site-nav a.active { color: var(--color-text); }
  .site-nav a.active { border-bottom-color: var(--color-text); }
  .site-user__name { color: var(--color-text); }
}

/* Legacy topnav — kept for pages that render outside site-header context */
.topnav .demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: help;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn:hover { background: var(--color-surface-muted); border-color: var(--color-border-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn[aria-busy="true"], .btn:disabled { opacity: 0.6; cursor: wait; }
.btn--primary {
  background: var(--color-primary); color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--success { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn--success:hover { background: var(--color-success-text); border-color: var(--color-success-text); color: #fff; }
.btn--danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger-text); border-color: var(--color-danger-text); color: #fff; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-primary-soft); }
.btn--sm { padding: 4px var(--sp-3); font-size: var(--fs-xs); }
.btn--lg { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-base); }

/* Loading spinner for aria-busy buttons */
.btn[aria-busy="true"]::before {
  content: "";
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Skeleton shimmer ──────────────────────────────────────────────────── */
.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--color-surface-muted) 0%,
    var(--color-border) 50%,
    var(--color-surface-muted) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer 1.4s ease-in-out infinite;
  height: 0.9rem;
}
.skeleton + .skeleton { margin-top: var(--sp-2); }
.skeleton--lg  { height: 1.4rem; }
.skeleton--60  { width: 60%; }
.skeleton--80  { width: 80%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─── Entry stagger ─────────────────────────────────────────────────────── */
.kpi-row .kpi {
  opacity: 0;
  transform: translateY(6px);
  animation: kpi-in var(--duration-base) var(--ease-out) forwards;
}
.kpi-row .kpi:nth-child(1) { animation-delay: 0ms; }
.kpi-row .kpi:nth-child(2) { animation-delay: 40ms; }
.kpi-row .kpi:nth-child(3) { animation-delay: 80ms; }
.kpi-row .kpi:nth-child(4) { animation-delay: 120ms; }
.kpi-row .kpi:nth-child(5) { animation-delay: 160ms; }
.kpi-row .kpi:nth-child(6) { animation-delay: 200ms; }
.kpi-row .kpi:nth-child(7) { animation-delay: 240ms; }
.kpi-row .kpi:nth-child(8) { animation-delay: 280ms; }
@keyframes kpi-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .kpi-row .kpi { opacity: 1; transform: none; animation: none; }
  .skeleton { animation: none; }
}

/* ─── Back link ─────────────────────────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-3);
}
.back-link:hover { color: var(--color-primary); }

/* ─── KPI row ───────────────────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
@media (min-width: 640px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--color-primary);
  min-width: 0;
}
.kpi .kpi__icon {
  color: var(--color-primary);
  margin-bottom: var(--sp-1);
  display: inline-flex;
}
.kpi .num {
  font-size: var(--fs-2xl); font-weight: 700;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.1;
}
.kpi .lbl {
  font-size: var(--fs-xs); color: var(--color-text-subtle);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.kpi.por_llegar  { border-left-color: var(--color-purple); }
.kpi.por_llegar  .kpi__icon { color: var(--color-purple); }
.kpi.en_vuelo    { border-left-color: var(--color-primary); }
.kpi.en_vuelo    .kpi__icon { color: var(--color-primary); }
.kpi.en_transito { border-left-color: var(--color-warning); }
.kpi.en_transito .kpi__icon { color: var(--color-warning); }
.kpi.en_destino  { border-left-color: var(--color-success); }
.kpi.en_destino  .kpi__icon { color: var(--color-success); }
.kpi.salen_hoy   { border-left-color: var(--color-danger); }
.kpi.salen_hoy   .kpi__icon { color: var(--color-danger); }
.kpi.se_han_ido  { border-left-color: var(--color-text-subtle); }
.kpi.se_han_ido  .kpi__icon { color: var(--color-text-subtle); }
.kpi.alert {
  border-left-color: var(--color-danger);
  background: var(--color-danger-soft);
}
.kpi.alert .num { color: var(--color-danger-text); }
.kpi.alert .kpi__icon { color: var(--color-danger); }
.kpi.pipeline { border-left-color: var(--color-info); }
.kpi.pipeline .num { color: var(--color-info-text); font-family: var(--font-mono); }
.kpi.pipeline .kpi__icon { color: var(--color-info); }
.kpi.revenue { border-left-color: var(--color-success); }
.kpi.revenue .num { color: var(--color-success-text); font-family: var(--font-mono); }
.kpi.revenue .kpi__icon { color: var(--color-success); }

/* ─── Filters bar ───────────────────────────────────────────────────────── */
.filters {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.filters label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); color: var(--color-text-subtle);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.filters input, .filters select {
  padding: 6px var(--sp-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-sm);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 32px;
}
.filters input:focus, .filters select:focus { border-color: var(--color-primary); }
.filters .count {
  margin-left: auto;
  color: var(--color-text-subtle);
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* ─── Tables ────────────────────────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
table.grid th, table.grid td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}
table.grid thead th {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: sticky; top: 0;
  border-bottom: 1px solid var(--color-border-strong);
}
table.grid thead th:hover { background: var(--color-border); }
table.grid tbody tr { transition: background var(--duration-fast) var(--ease-out); }
table.grid tr.row { cursor: pointer; }
table.grid tr.row:hover { background: var(--color-surface-muted); }
table.grid tr.row:focus-visible { background: var(--color-primary-soft); outline: 2px solid var(--color-primary); outline-offset: -2px; }
table.grid tr.row td { vertical-align: middle; }
table.grid tbody tr:last-child td { border-bottom: none; }

@media (max-width: 720px) {
  table.grid th, table.grid td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
}

/* ─── Badges + urgency + status chips ───────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
}
.badge.por_llegar  { background: var(--color-purple-soft); color: var(--color-purple-text); }
.badge.en_vuelo    { background: var(--color-primary-soft); color: var(--color-primary); }
.badge.en_transito { background: var(--color-warning-soft); color: var(--color-warning-text); }
.badge.en_destino  { background: var(--color-success-soft); color: var(--color-success-text); }
.badge.salen_hoy   { background: var(--color-danger-soft); color: var(--color-danger-text); }
.badge.se_han_ido  { background: var(--color-surface-muted); color: var(--color-text-subtle); }

.tier-vip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--color-vip-bg); color: var(--color-vip-text);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  margin-right: 4px;
}

.status-ok      { color: var(--color-success-text); font-weight: 600; }
.status-pending { color: var(--color-warning-text); font-weight: 600; }
.status-error   { color: var(--color-danger-text); font-weight: 600; }

.urgency {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.urgency.urgent { background: var(--color-danger-soft); color: var(--color-danger-text); }
.urgency.amber  { background: var(--color-warning-soft); color: var(--color-warning-text); }
.urgency.ok     { background: var(--color-success-soft); color: var(--color-success-text); }

.fstatus {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.fstatus.programado { background: var(--color-surface-muted); color: var(--color-text-subtle); }
.fstatus.en_vuelo   { background: var(--color-primary-soft); color: var(--color-primary); }
.fstatus.aterrizado { background: var(--color-success-soft); color: var(--color-success-text); }
.fstatus.embarcando { background: var(--color-warning-soft); color: var(--color-warning-text); }
.fstatus.despegado  { background: var(--color-surface-muted); color: var(--color-text-subtle); }

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.card h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-lg);
  color: var(--color-text);
}
.card h2 .card-action { margin-left: auto; }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
}
.meta-grid dt {
  color: var(--color-text-subtle);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 2px;
}
.meta-grid dd { margin: 0 0 var(--sp-3); font-weight: 500; color: var(--color-text); }

/* ─── City block / itinerary items ──────────────────────────────────────── */
.city-block {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0;
}
.city-block h3 {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-base);
  color: var(--color-primary);
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--color-border);
  gap: var(--sp-3);
}
.item:last-child { border-bottom: 0; }
.item .main { flex: 1; min-width: 0; }
.item .right { text-align: right; white-space: nowrap; font-size: var(--fs-xs); color: var(--color-text-subtle); }
.item .sub { color: var(--color-text-subtle); font-size: var(--fs-xs); }
.svc-link {
  color: inherit;
  border-bottom: 1px dotted var(--color-primary);
  transition: color var(--duration-fast) var(--ease-out);
}
.svc-link:hover { color: var(--color-primary); border-bottom-style: solid; }

/* ─── Service / venue page ──────────────────────────────────────────────── */
.svc-hero {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.svc-hero h1 { margin: 0; }
.svc-hero .meta { color: var(--color-text-subtle); font-size: var(--fs-sm); }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-5);
}
.stat-card {
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.stat-card .num {
  display: block; font-size: var(--fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.stat-card .lbl {
  font-size: var(--fs-xs); color: var(--color-text-subtle);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.stat-card.revenue { border-left-color: var(--color-success); }
.stat-card.revenue .num { color: var(--color-success-text); font-family: var(--font-mono); }
.stat-card.pending { border-left-color: var(--color-danger); }
.stat-card.pending .num { color: var(--color-danger-text); }

.svc-section { margin-bottom: var(--sp-5); }
.svc-section h2 {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-lg); margin: 0 0 var(--sp-3);
}
.svc-section .count {
  background: var(--color-surface-muted); color: var(--color-text-muted);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 700;
}
.svc-section.active  .count { background: var(--color-success-soft); color: var(--color-success-text); }
.svc-section.future  .count { background: var(--color-primary-soft); color: var(--color-primary); }
.svc-section.past    .count { background: var(--color-surface-muted); color: var(--color-text-subtle); }

/* ─── Chat bubbles (client detail page) ─────────────────────────────────── */
.chat { display: flex; flex-direction: column; gap: var(--sp-2); }
.bubble {
  max-width: min(560px, 85%);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.bubble .author {
  font-size: var(--fs-xs); color: var(--color-text-subtle);
  margin-bottom: 2px; font-weight: 600;
}
.bubble.agent  {
  background: var(--color-primary-soft); color: var(--color-text);
  align-self: flex-start; border-top-left-radius: 4px;
}
.bubble.client {
  background: var(--color-surface-muted);
  align-self: flex-end; border-top-right-radius: 4px;
}
.bubble.handover {
  border: 1px dashed var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}
.bubble.system {
  background: var(--color-warning-soft); color: var(--color-warning-text);
  align-self: center; max-width: 92%;
  font-style: italic; text-align: center;
  border: 1px solid var(--color-warning);
}

/* ─── Earthquake alert button + modal ───────────────────────────────────── */
.earthquake-btn {
  display: none;
  align-items: center; gap: var(--sp-2);
  background: var(--color-danger); color: #fff; border: 0;
  padding: 6px var(--sp-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.earthquake-btn.visible { display: inline-flex; }
.earthquake-btn:hover { background: var(--color-danger-text); }

.modal-bg {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 100;
  align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.modal-bg.visible {
  display: flex;
  animation: fadeIn var(--duration-base) var(--ease-out);
}
.modal {
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-lg);
  max-width: 600px; width: 100%;
  max-height: 85vh; overflow: auto;
  box-shadow: var(--shadow-lg);
  animation: popIn var(--duration-base) var(--ease-out);
}
.modal h2 { margin: 0 0 var(--sp-3); }
.modal pre {
  background: var(--color-surface-muted);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}
.modal .actions { text-align: right; margin-top: var(--sp-4); display: flex; gap: var(--sp-2); justify-content: flex-end; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Metric section (Fernando view) ────────────────────────────────────── */
.metric-section { margin-bottom: var(--sp-5); }
.metric-section h2 { display: flex; align-items: center; gap: var(--sp-2); }
.metric-count {
  display: inline-flex; align-items: center;
  background: var(--color-danger); color: #fff;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 700;
}
.metric-count.amber { background: var(--color-warning); color: var(--color-warning-text); }
.metric-count.ok    { background: var(--color-success); color: #fff; }

/* ─── Agent load bar ────────────────────────────────────────────────────── */
.load-grid td { vertical-align: middle; }
.load-row {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap;
}
.load-bar {
  position: relative;
  flex: 1 1 220px;
  max-width: 280px;
  height: 10px;
  background: #e5e7eb;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.load-bar__fill {
  height: 100%;
  transition: width var(--duration-base) var(--ease-out);
  border-radius: var(--radius-full);
}
.load-bar--red-under  .load-bar__fill { background: var(--color-danger); }
.load-bar--amber-low  .load-bar__fill { background: var(--color-warning); }
.load-bar--green      .load-bar__fill { background: var(--color-success); }
.load-bar--amber-high .load-bar__fill { background: var(--color-warning); }
.load-bar--red-over   .load-bar__fill { background: var(--color-danger); }

.load-bar__zones {
  position: absolute; inset: 0;
  pointer-events: none;
}
.zone-tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.18);
}
@media (prefers-color-scheme: dark) {
  .load-bar { background: #334155; }
  .zone-tick { background: rgba(255, 255, 255, 0.22); }
}
.load-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
  text-align: right;
}
.load-tag {
  display: inline-block;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.load-tag.red-under  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.load-tag.amber-low  { background: var(--color-warning-soft); color: var(--color-warning-text); }
.load-tag.green      { background: var(--color-success-soft); color: var(--color-success-text); }
.load-tag.amber-high { background: var(--color-warning-soft); color: var(--color-warning-text); }
.load-tag.red-over   { background: var(--color-danger-soft);  color: var(--color-danger-text); }

.metric-caption {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
  max-width: 860px;
}

/* ─── Timeline (horizontal route) ───────────────────────────────────────── */
.tl-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: stretch;
  margin: var(--sp-2) 0;
}
.tl-node {
  flex: 1 1 140px; min-width: 120px;
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.tl-node.flight { background: var(--color-warning-soft); border-color: var(--color-warning); }
.tl-node.city   { background: var(--color-primary-soft); border-color: var(--color-primary); }
.tl-node .icon-lg { width: 24px; height: 24px; display: inline-block; }
.tl-node .label   { font-weight: 600; font-size: var(--fs-sm); margin-top: var(--sp-1); color: var(--color-text); }
.tl-node .sub     { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-top: 2px; }
.tl-node .nights  { font-size: var(--fs-xs); color: var(--color-primary); font-weight: 700; margin-top: 2px; }
.tl-chev {
  align-self: center;
  color: var(--color-border-strong);
  font-size: var(--fs-xl);
  user-select: none;
}

/* ─── Calendar (day-by-day) ─────────────────────────────────────────────── */
.cal-day {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-1);
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: var(--sp-4);
}
.cal-day:last-child { border-bottom: none; }
.cal-date {
  flex: 0 0 60px; text-align: center;
  padding: var(--sp-2) 0;
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
}
.cal-date .dow {
  display: block; font-size: var(--fs-xs); color: var(--color-text-subtle);
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em;
}
.cal-date .num {
  display: block; font-size: var(--fs-xl); font-weight: 700;
  line-height: 1.1; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.cal-date .mon { display: block; font-size: var(--fs-xs); color: var(--color-text-subtle); }
.cal-day.today .cal-date { background: var(--color-warning-soft); }
.cal-day.today .cal-date .num { color: var(--color-warning-text); }
.cal-events { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.cal-events li {
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}
.cal-events .time {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  color: var(--color-text-subtle);
  min-width: 3.2rem;
  font-weight: 600;
  font-size: var(--fs-xs);
}
.cal-events a { color: var(--color-primary); }
.cal-empty {
  color: var(--color-text-subtle);
  font-style: italic;
  font-size: var(--fs-sm);
  padding: var(--sp-1) 0;
}
.cal-today-btn {
  display: inline-flex; align-items: center; gap: 4px;
  float: right;
  font-size: var(--fs-xs); font-weight: 500;
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  padding: 2px var(--sp-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-warning);
}
.cal-today-btn:hover { background: var(--color-warning); color: #fff; }

/* ─── Arrivals + live buttons ───────────────────────────────────────────── */
.arrivals-btn, .live-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  font-size: var(--fs-sm); font-weight: 500;
  background: var(--color-primary); color: var(--color-on-primary);
  border: 1px solid var(--color-primary); border-radius: var(--radius-sm);
  cursor: pointer;
  margin-right: var(--sp-2);
  transition: background var(--duration-fast) var(--ease-out);
}
.arrivals-btn:hover, .live-btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.arrivals-btn.pickup { background: var(--color-success); border-color: var(--color-success); }
.arrivals-btn.pickup:hover { background: var(--color-success-text); border-color: var(--color-success-text); }

/* ─── Agent page tags ───────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-surface-muted); color: var(--color-text-muted);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 600;
  margin-right: 4px;
}
.tag.urgent { background: var(--color-danger-soft); color: var(--color-danger-text); }
.tag.amber  { background: var(--color-warning-soft); color: var(--color-warning-text); }
.tag.ok     { background: var(--color-success-soft); color: var(--color-success-text); }

/* ─── Consultas page ────────────────────────────────────────────────────── */
textarea {
  width: 100%;
  min-height: 5rem;
  font-family: inherit;
  font-size: var(--fs-base);
  padding: var(--sp-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); outline: none; }
input[type="text"], input[type="url"], input[type="email"], input[type="number"], input[type="tel"],
select {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-sm);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 36px;
}
input:focus, select:focus { border-color: var(--color-primary); outline: none; }

.answer {
  background: var(--color-surface);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-top: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.answer p { margin: 0 0 var(--sp-3); white-space: pre-wrap; }
.answer p:last-child { margin-bottom: 0; }
.answer h3 { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-base); color: var(--color-text); }
.answer ul { margin: var(--sp-2) 0 var(--sp-3); padding-left: var(--sp-5); }
.answer li { margin: 2px 0; }
.answer strong { font-weight: 600; }
.answer em { font-style: italic; color: var(--color-text-muted); }
.answer.error { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger-text); }

.hits {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--color-surface-muted);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  margin-top: var(--sp-3);
  overflow-x: auto;
}
.hit { margin: 2px 0; color: var(--color-text-muted); }
.hit .id { color: var(--color-primary); font-weight: 600; }

details { margin-top: var(--sp-4); }
summary { cursor: pointer; color: var(--color-text-muted); font-size: var(--fs-sm); }
summary:hover { color: var(--color-primary); }

.agent-notes {
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  border-left: 4px solid var(--color-warning);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  margin: var(--sp-3) 0 var(--sp-5);
  color: var(--color-warning-text);
}
.agent-notes strong.title {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-warning-text);
}

.msg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0;
  margin: var(--sp-3) 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.msg-card .head {
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-2); flex-wrap: wrap;
}
.msg-card .head .lbl { font-weight: 700; }
.msg-card .head .when { font-weight: 400; opacity: 0.95; font-size: var(--fs-xs); }
.msg-card .head button.copy {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 2px var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.msg-card .head button.copy:hover { background: rgba(255, 255, 255, 0.3); }
.msg-card .body { padding: var(--sp-4); }
.msg-card .body p { margin: 0 0 var(--sp-3); white-space: pre-wrap; }
.msg-card .body p:last-child { margin-bottom: 0; }

/* ─── Add-place modal (consultas) ───────────────────────────────────────── */
.apm-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start; justify-content: center;
  z-index: 200;
  padding: var(--sp-5) var(--sp-4);
  overflow-y: auto;
  animation: fadeIn var(--duration-base) var(--ease-out);
}
.apm-overlay[hidden] { display: none; }
.apm-box {
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 640px;
  box-shadow: var(--shadow-lg);
  animation: popIn var(--duration-base) var(--ease-out);
}
.apm-box h2 {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  padding-bottom: 0; border-bottom: 0;
}
.apm-box label {
  display: block;
  font-size: var(--fs-xs); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600;
  margin: var(--sp-3) 0 var(--sp-1);
}
.apm-box input, .apm-box textarea, .apm-box select {
  display: block; width: 100%;
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-1);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-sm);
  background: var(--color-surface);
  color: var(--color-text);
  text-transform: none; letter-spacing: normal;
}
.apm-box textarea { min-height: 3rem; font-family: inherit; resize: vertical; }
.apm-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.apm-row > label { flex: 1; min-width: min(220px, 100%); }
@media (max-width: 520px) {
  .apm-row > label { min-width: 100%; }
}
.apm-actions {
  text-align: right;
  margin-top: var(--sp-4);
  display: flex; gap: var(--sp-2); justify-content: flex-end;
}
.apm-actions button { min-width: 120px; }
#apm-result { margin-top: var(--sp-3); font-size: var(--fs-sm); }
#apm-result.ok  { color: var(--color-success-text); }
#apm-result.err { color: var(--color-danger-text); }

.analyze-pulse {
  display: inline-block;
  width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--color-primary);
  vertical-align: middle;
  animation: apmPulse 1.2s ease-in-out infinite;
}
@keyframes apmPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* ─── Toast ─────────────────────────────────────────────────────────────── */
.toast-host {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4);
  z-index: 300; display: flex; flex-direction: column;
  gap: var(--sp-2); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toastIn var(--duration-base) var(--ease-out);
}
.toast.success { border-left-color: var(--color-success); }
.toast.error   { border-left-color: var(--color-danger); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Skeleton shimmer ──────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-muted) 0%,
                                      var(--color-border) 50%,
                                      var(--color-surface-muted) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  height: 0.9rem;
}
.skeleton.line { height: 0.9rem; margin: var(--sp-2) 0; }
.skeleton.line-short { width: 35%; }
.skeleton.line-mid   { width: 65%; }
.skeleton.line-long  { width: 90%; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Staggered entry ───────────────────────────────────────────────────── */
.enter-stagger > * {
  opacity: 0;
  transform: translateY(6px);
  animation: enterUp var(--duration-base) var(--ease-out) forwards;
}
.enter-stagger > *:nth-child(1) { animation-delay: 0ms; }
.enter-stagger > *:nth-child(2) { animation-delay: 40ms; }
.enter-stagger > *:nth-child(3) { animation-delay: 80ms; }
.enter-stagger > *:nth-child(4) { animation-delay: 120ms; }
.enter-stagger > *:nth-child(5) { animation-delay: 160ms; }
.enter-stagger > *:nth-child(6) { animation-delay: 200ms; }
.enter-stagger > *:nth-child(7) { animation-delay: 240ms; }
.enter-stagger > *:nth-child(8) { animation-delay: 280ms; }
@keyframes enterUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Chat cliente page ─────────────────────────────────────────────────── */
.chat-page {
  background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-bg) 100%);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.chat-page .page { flex: 1; display: flex; flex-direction: column; padding-bottom: 0; min-height: 0; }
.chat-wrap {
  max-width: 720px; width: 100%; margin: 0 auto;
  flex: 1; display: flex; flex-direction: column;
  padding: 0 var(--sp-4);
  min-height: 0;
}
.chat-head { padding: var(--sp-4) 0 var(--sp-3); }
.chat-head h1 { margin: 0; font-size: var(--fs-xl); }
.chat-head p { margin: var(--sp-1) 0 0; color: var(--color-text-subtle); font-size: var(--fs-sm); }
.chat-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: var(--sp-2) 0 var(--sp-4); scroll-behavior: smooth; overscroll-behavior: contain; }
.msg {
  max-width: 85%;
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-xl);
  line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
  font-size: var(--fs-sm);
}
.msg.bot {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px; margin-right: auto;
  box-shadow: var(--shadow-sm);
}
.msg.user {
  background: var(--color-primary); color: var(--color-on-primary);
  border-bottom-right-radius: 4px; margin-left: auto;
}
.msg.bot .meta {
  font-size: var(--fs-xs); color: var(--color-text-subtle);
  margin-top: var(--sp-2);
  border-top: 1px dashed var(--color-border);
  padding-top: var(--sp-2);
}
.msg.bot em { color: var(--color-text-subtle); }
.msg.bot strong { font-weight: 600; }
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-primary);
  animation: bounce 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40%           { transform: scale(1); opacity: 1; }
}
.chat-form {
  padding: var(--sp-3) 0 var(--sp-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky; bottom: 0;
}
.chat-form .row { display: flex; gap: var(--sp-2); }
.chat-form textarea {
  flex: 1; min-height: 44px; max-height: 160px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-full);
  resize: none;
}
.chat-form textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.chat-form button#send {
  padding: 0 var(--sp-5);
  background: var(--color-primary); color: var(--color-on-primary);
  border: 0; border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px;
}
.chat-form button#send:disabled { opacity: 0.5; cursor: wait; }
.quick { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) 0; }
.quick button {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  padding: 6px var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.quick button:hover { background: var(--color-primary-soft); }
.banner {
  background: var(--color-warning-soft);
  border-left: 3px solid var(--color-warning);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  margin: var(--sp-3) 0;
  color: var(--color-warning-text);
}
.banner strong { display: block; margin-bottom: 2px; }

/* ─── Biblia page (KB index) ────────────────────────────────────────────── */
.biblia-search {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.kb-entry {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.kb-entry h3 { margin: 0 0 var(--sp-2); }
.kb-entry .body { font-size: var(--fs-sm); line-height: 1.6; color: var(--color-text-muted); white-space: pre-wrap; }
.kb-entry .ph { background: var(--color-warning-soft); color: var(--color-warning-text); padding: 1px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.85em; }

/* ─── Biblia (legacy .rec / .toc / .price class-set) ─────────────────────── */
.biblia-wrap h1 { margin: var(--sp-2) 0 var(--sp-1); }
.biblia-wrap h2 {
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--sp-2);
  margin-top: var(--sp-8);
  scroll-margin-top: var(--sp-4);
  font-size: var(--fs-xl);
}
.biblia-wrap h3 {
  margin-top: var(--sp-6);
  color: var(--color-text-muted);
  scroll-margin-top: var(--sp-4);
  font-size: var(--fs-lg);
}
.rec {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-2) 0;
  box-shadow: var(--shadow-sm);
}
.rec h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); color: var(--color-text); }
.rec .meta { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-bottom: var(--sp-2); }
.rec .msg { white-space: pre-wrap; line-height: 1.55; }
.rec .notes {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--color-border-strong);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.rec a { color: var(--color-primary); word-break: break-all; }
.toc {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-6);
}
.toc ul { margin: var(--sp-2) 0; padding-left: var(--sp-5); }
.toc a { color: var(--color-primary); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.ph {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: var(--font-mono);
}
.price { color: var(--color-success-text); font-weight: 600; }

/* ─── Utilities ─────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-danger  { color: var(--color-danger-text); }
.text-warning { color: var(--color-warning-text); }
.text-success { color: var(--color-success-text); }
.text-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-right   { text-align: right; }
.text-sm      { font-size: var(--fs-sm); }
.text-xs      { font-size: var(--fs-xs); }
.flex         { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.gap-2        { gap: var(--sp-2); }
.gap-3        { gap: var(--sp-3); }
.mt-3         { margin-top: var(--sp-3); }
.mt-4         { margin-top: var(--sp-4); }
.flex-grow    { flex: 1; }
.stretch      { align-self: stretch; }
.form-inline  { display: inline-flex; gap: var(--sp-2); align-items: stretch; }

/* ─── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .enter-stagger > * { opacity: 1; transform: none; }
}

/* ─── Responsive tweaks ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page { padding: var(--sp-3) var(--sp-3) var(--sp-6); }
  .filters { padding: var(--sp-2) var(--sp-3); }
  .card { padding: var(--sp-3) var(--sp-4); }
  .topnav { padding: var(--sp-1) 0 var(--sp-3); }
  .topnav a { padding: 6px var(--sp-2); font-size: var(--fs-xs); }
  .bubble { max-width: 90%; }
  h1 { font-size: var(--fs-xl); }
}

/* ─── Docs / prose (markdown viewer) ────────────────────────────────────── */
.prose {
  max-width: 880px;
  margin: 0 auto;
  color: var(--color-text);
  line-height: 1.65;
  font-size: var(--fs-md);
}
.prose h1 { font-size: var(--fs-2xl); margin: var(--sp-6) 0 var(--sp-4); }
.prose h2 {
  font-size: var(--fs-xl);
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-border);
}
.prose h3 { font-size: var(--fs-lg); margin: var(--sp-4) 0 var(--sp-2); }
.prose h4 { font-size: var(--fs-md); margin: var(--sp-3) 0 var(--sp-2); color: var(--color-text-muted); }
.prose p { margin: 0 0 var(--sp-3); }
.prose ul, .prose ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.prose li { margin-bottom: var(--sp-1); }
.prose li > p { margin-bottom: var(--sp-1); }
.prose hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--sp-6) 0;
}
.prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose code {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--color-neutral-soft, #eef0f3);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.prose pre {
  background: var(--color-surface-alt, #0f172a);
  color: #e6edf3;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  border: 1px solid var(--color-border);
}
.prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.prose blockquote {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-left: 3px solid var(--color-primary);
  background: var(--color-neutral-soft, #f5f6f8);
  color: var(--color-text-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prose-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
}
.prose-table th, .prose-table td {
  border: 1px solid var(--color-border);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
}
.prose-table th {
  background: var(--color-neutral-soft, #f5f6f8);
  font-weight: 600;
}
.prose-table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--color-surface) 97%, var(--color-text) 3%);
}
.docs-page .page { padding-bottom: var(--sp-8); }

/* ─── Kanban board ───────────────────────────────────────────────────────── */
/* ─── Kanban control bar ────────────────────────────────────────────────── */
.k-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: oklch(0.97 0.005 80);
  border-radius: 8px;
  padding: 6px 10px;
  flex: 0 1 280px;
  min-width: 140px;
}
.k-search-wrap .icon { color: oklch(0.55 0.01 80); flex-shrink: 0; }
.k-search-wrap input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--color-text);
  width: 100%;
  min-width: 0;
}
.k-search-wrap input::placeholder { color: oklch(0.65 0.01 80); }

.k-agent-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid oklch(0.88 0.005 80);
  border-radius: 999px;
  padding: 5px 10px 5px 8px;
  background: oklch(0.985 0.003 80);
  cursor: pointer;
  position: relative;
}
.k-agent-wrap .icon { color: oklch(0.55 0.01 80); flex-shrink: 0; }
.k-agent-wrap select {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 500;
  color: oklch(0.22 0.01 80);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2px;
  max-width: 120px;
}

.k-seg {
  display: flex;
  border: 1px solid oklch(0.88 0.005 80);
  border-radius: 8px;
  overflow: hidden;
  background: oklch(0.985 0.003 80);
}
.k-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: .8rem;
  font-weight: 500;
  font-family: var(--font-sans);
  border: none;
  background: transparent;
  cursor: pointer;
  color: oklch(0.5 0.01 80);
  white-space: nowrap;
  transition: background .1s, color .1s;
}
.k-seg-btn:hover { background: oklch(0.96 0.005 80); color: oklch(0.22 0.01 80); }
.k-seg-btn.active {
  background: oklch(0.94 0.008 80);
  color: oklch(0.22 0.01 80);
  font-weight: 600;
}

.k-view-toggle {
  display: flex;
  border: 1px solid oklch(0.88 0.005 80);
  border-radius: 9px;
  padding: 3px;
  background: oklch(0.985 0.003 80);
  gap: 2px;
}
.k-view-toggle button {
  padding: 6px 14px;
  font-size: .8rem;
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  color: oklch(0.5 0.01 80);
  font-family: var(--font-sans);
  border-radius: 6px;
  transition: background .1s, color .1s;
}
.k-view-toggle button.active {
  background: oklch(0.22 0.01 80);
  color: oklch(0.985 0.003 80);
  font-weight: 600;
}

/* ─── Agent todo panel (Mis pendientes) ─────────────────────────────────── */
.agent-todo {
  margin: 0 0 18px;
  background: oklch(0.985 0.003 80);
  border: 1px solid oklch(0.93 0.005 80);
  border-radius: 14px;
  overflow: hidden;
}
.agent-todo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: oklch(0.22 0.01 80);
  text-align: left;
}
.agent-todo-header:hover { background: oklch(0.97 0.003 80); }
.agent-todo-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.22 0.01 80);
  color: oklch(0.985 0.003 80);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  padding: 1px 8px;
  min-width: 22px;
}
.agent-todo-chevron { margin-left: auto; color: oklch(0.65 0.01 80); transition: transform .2s; }
.agent-todo-chevron.open { transform: rotate(180deg); }
.agent-todo-body {
  border-top: 1px solid oklch(0.93 0.005 80);
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: oklch(0.88 0.005 80) transparent;
}
.agent-todo-list { list-style: none; margin: 0; padding: 4px 8px; }
.agent-todo-item { display: block; }
.agent-todo-link {
  display: grid;
  grid-template-columns: 58px 18px 1fr;
  gap: 12px;
  align-items: center;
  padding: 9px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .1s;
}
.agent-todo-link:hover { background: oklch(0.96 0.005 80); }
.agent-todo-date {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: oklch(0.5 0.02 80);
  text-align: right;
  white-space: nowrap;
}
.agent-todo-date.urgent { color: oklch(0.55 0.18 25); }
.agent-todo-date.warn   { color: oklch(0.62 0.13 70); }
.agent-todo-type { color: oklch(0.55 0.01 80); display: flex; align-items: center; justify-content: center; }
.agent-todo-text { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-todo-desc { font-weight: 500; }
.agent-todo-ref  { color: oklch(0.5 0.01 80); font-weight: 400; }

/* ─── Lane tone tokens (per stage, cascade to cards + headers) ──────────── */
:root {
  --urgent-red:    oklch(0.55 0.22 25);
  --urgent-bg:     oklch(0.97 0.04 25);
  --urgent-ink:    oklch(0.4 0.18 25);
  --allergy-bg:    oklch(0.96 0.07 80);
  --allergy-ink:   oklch(0.42 0.13 60);
  --allergy-bdr:   oklch(0.85 0.1 70);
}
.kanban-col[data-state="prospecto"]    { --tone-bg: oklch(0.96 0.006 250);  --tone-soft: oklch(0.985 0.004 250); --tone-bdr: oklch(0.88 0.012 250); --tone-accent: oklch(0.55 0.04 250);  --tone-ink: oklch(0.32 0.02 250);  --tone-chip: oklch(0.92 0.01 250); }
.kanban-col[data-state="pendiente_doc"]{ --tone-bg: oklch(0.955 0.045 80);  --tone-soft: oklch(0.98 0.025 80);  --tone-bdr: oklch(0.86 0.07 80);   --tone-accent: oklch(0.62 0.13 70);  --tone-ink: oklch(0.36 0.06 60);  --tone-chip: oklch(0.92 0.06 80); }
.kanban-col[data-state="listo"]        { --tone-bg: oklch(0.955 0.04 155);  --tone-soft: oklch(0.98 0.022 155); --tone-bdr: oklch(0.84 0.06 155);  --tone-accent: oklch(0.55 0.11 155); --tone-ink: oklch(0.34 0.05 155); --tone-chip: oklch(0.92 0.055 155); }
.kanban-col[data-state="en_destino"]   { --tone-bg: oklch(0.955 0.035 240); --tone-soft: oklch(0.98 0.02 240);  --tone-bdr: oklch(0.84 0.06 240);  --tone-accent: oklch(0.52 0.13 245); --tone-ink: oklch(0.34 0.06 245); --tone-chip: oklch(0.92 0.05 240); }
.kanban-col[data-state="post_viaje"]   { --tone-bg: oklch(0.955 0.035 320); --tone-soft: oklch(0.98 0.02 320);  --tone-bdr: oklch(0.84 0.05 320);  --tone-accent: oklch(0.52 0.11 325); --tone-ink: oklch(0.34 0.05 325); --tone-chip: oklch(0.92 0.045 320); }

/* ─── Kanban layout ─────────────────────────────────────────────────────── */
.kanban-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 10px 16px;
  background: oklch(0.99 0.003 80);
  border: 1px solid oklch(0.93 0.005 80);
  border-radius: 12px;
}

.k-lane-toggles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: -10px 0 14px;
  padding: 0 4px;
}
.k-lane-btn {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: all .12s;
  letter-spacing: .02em;
}
.k-lane-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.k-lane-btn--off {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
  opacity: .45;
  text-decoration: line-through;
}

.kanban-wrap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  padding-bottom: 60px;
  min-height: 60vh;
}

.kanban-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-col.drag-over { outline: 2px dashed var(--tone-accent, var(--color-primary)); outline-offset: 3px; border-radius: 12px; }

/* ─── Column header ─────────────────────────────────────────────────────── */
.kanban-col-header {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tone-soft, var(--color-surface-muted));
  border: 1px solid var(--tone-bdr, var(--color-border));
  display: flex;
  align-items: center;
  gap: 10px;
}

.col-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--tone-accent, var(--color-text-muted));
  box-shadow: 0 0 0 3px var(--tone-bg, var(--color-surface-muted));
  flex-shrink: 0;
}

.col-labels { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }

.col-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tone-ink, var(--color-text-muted));
  line-height: 1.2;
}

.col-sub {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--tone-accent, var(--color-text-subtle));
  opacity: 0.8;
  line-height: 1.2;
}

.col-count {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tone-accent, var(--color-text-muted));
  line-height: 1;
  min-width: 28px;
  text-align: right;
}

.kanban-col-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Kanban card ─────────────────────────────────────────────────────────── */
.kcard {
  background: var(--tone-soft, var(--color-surface));
  border: 1px solid var(--tone-bdr, var(--color-border));
  border-radius: 12px;
  padding: 14px 14px 12px;
  cursor: grab;
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kcard:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -8px oklch(0.5 0.05 80 / 0.25);
}
.kcard.dragging { opacity: .45; transform: scale(.97); box-shadow: none; }

/* Pending urgency variants — operational alerts */
.kcard--pending-red {
  padding: 13px 13px 11px;
  border: 2px solid #dc2626;
  box-shadow: 0 0 0 4px oklch(0.55 0.22 25 / 0.12);
}
.kcard--pending-red:hover {
  box-shadow: 0 6px 18px -8px oklch(0.55 0.22 25 / 0.35), 0 0 0 4px oklch(0.55 0.22 25 / 0.15);
}
.kcard--pending-yellow {
  padding: 13px 13px 11px;
  border: 2px solid #d97706;
  box-shadow: 0 0 0 4px oklch(0.75 0.16 85 / 0.14);
}
.kcard--pending-yellow:hover {
  box-shadow: 0 6px 18px -8px oklch(0.7 0.18 85 / 0.35), 0 0 0 4px oklch(0.75 0.16 85 / 0.18);
}
.kcard--pending-purple {
  padding: 13px 13px 11px;
  border: 2px solid #7c3aed;
  box-shadow: 0 0 0 4px oklch(0.5 0.2 300 / 0.1);
}
.kcard--pending-purple:hover {
  box-shadow: 0 6px 18px -8px oklch(0.5 0.2 300 / 0.3), 0 0 0 4px oklch(0.5 0.2 300 / 0.14);
}

/* Departure imminent — dashed border */
.kcard--departure {
  padding: 13px 13px 11px;
  border: 2px dashed #1a1a1a;
}
.kcard--departure:hover {
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.25);
}
.kcard-pending-badge {
  position: absolute;
  top: -12px;
  left: -12px;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  z-index: 2;
  line-height: 1;
  letter-spacing: -.01em;
}

.kcard-departure-badge {
  position: absolute;
  top: -1px;
  right: 10px;
  background: #1a1a1a;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px 2px 5px;
  border-radius: 0 0 6px 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.03em;
}

/* Legacy — kept for any remaining references */
.kcard--urgent {
  padding: 13px 13px 11px;
  border: 2px solid var(--urgent-red);
  box-shadow: 0 0 0 4px oklch(0.55 0.22 25 / 0.1);
}
.kcard--urgent:hover {
  box-shadow: 0 6px 18px -8px oklch(0.55 0.22 25 / 0.35), 0 0 0 4px oklch(0.55 0.22 25 / 0.12);
}

/* ─── Card top row ── */
.kcard-toprow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.kcard-id {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tone-accent, var(--color-primary));
  line-height: 1;
}

.kcard-dup {
  font-size: 9px;
  font-weight: 700;
  color: var(--urgent-red);
  letter-spacing: 0.04em;
  background: var(--urgent-bg);
  padding: 1px 4px;
  border-radius: 4px;
}

/* Chips (pill badges) */
.kcard-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
.kcard-chip--urgent {
  background: var(--urgent-red);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kcard-chip--flight {
  background: var(--tone-accent, var(--color-primary));
  color: #fff;
}
.kcard-chip--flight-urgent {
  background: var(--urgent-red);
  color: #fff;
  box-shadow: 0 0 0 3px oklch(0.55 0.22 25 / 0.15);
}
.kcard-chip--return {
  background: var(--tone-accent, var(--color-primary));
  color: #fff;
}

/* Rev badge */
.kcard-rev-btn {
  margin-left: auto;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid oklch(0.88 0.005 80);
  background: oklch(0.97 0.003 80);
  color: oklch(0.65 0.01 80);
  line-height: 1.4;
  white-space: nowrap;
}
.kcard-rev-btn--on {
  background: oklch(0.94 0.04 145);
  color: oklch(0.4 0.1 145);
  border-color: oklch(0.82 0.07 145);
}

/* ─── Allergy banner ── */
.kcard-allergy {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--allergy-bg);
  border: 1px solid var(--allergy-bdr);
  color: var(--allergy-ink);
  font-size: 11.5px;
  font-weight: 500;
}
.kcard-allergy strong {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-right: 2px;
}

/* ─── Card body fields ── */
.kcard-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: oklch(0.22 0.01 80);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kcard-meta {
  font-size: 12px;
  color: var(--tone-ink, var(--color-text-subtle));
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.kcard-dates {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--tone-ink, var(--color-text-muted));
  margin-bottom: 9px;
}
.kcard-momento {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
  font-size: 11px;
}
.kcard-momento--ok     { color: oklch(0.45 0.12 155); }
.kcard-momento--info   { color: oklch(0.45 0.12 240); }
.kcard-momento--muted  { color: oklch(0.55 0.01 80); }

/* ─── Service icons row ── */
.kcard-svc-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-top: 9px;
  border-top: 1px solid var(--tone-chip, oklch(0.93 0.005 80));
}
.kcard-svc-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tone-accent, var(--color-text-muted));
  opacity: 0.85;
}

/* ─── Hover actions ── */
.kcard-actions {
  display: none;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--tone-chip, var(--color-border));
}
.kcard:hover .kcard-actions { display: flex; }

.kcard-action-btn {
  font-size: var(--fs-xs);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.kcard-action-btn:hover:not([disabled]) {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.kcard-action-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ─── Kanban view toggle ─────────────────────────────────────────────────── */
.kanban-view-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.kanban-view-toggle button {
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
}
.kanban-view-toggle button.active {
  background: var(--color-primary);
  color: #fff;
}

/* ─── Side panel ─────────────────────────────────────────────────────────── */
.side-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.32);
  z-index: 400;
  animation: fadeIn var(--duration-base) var(--ease-out);
}
.side-panel-overlay.open { display: block; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.side-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 100vw);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  z-index: 401;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s var(--ease-out);
}
.side-panel.open { transform: translateX(0); }

.side-panel-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}

.side-panel-close {
  width: 30px; height: 30px;
  flex-shrink: 0;
  margin-left: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-text-muted);
}
.side-panel-close:hover { background: var(--color-surface-muted); }

.side-panel-body { padding: var(--sp-4) var(--sp-5); }
.side-panel-loading {
  display: flex; align-items: center; justify-content: center;
  height: 100px;
  color: var(--color-text-subtle);
  font-size: var(--fs-sm);
}

/* ─── Calendar view ─────────────────────────────────────────────────────── */
.cal-grid-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--sp-3);
}
.cal-day-header {
  background: var(--color-surface-muted);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-subtle);
  padding: var(--sp-2);
}
.cal-day-cell {
  background: var(--color-surface);
  min-height: 72px;
  padding: var(--sp-2);
  font-size: var(--fs-xs);
}
.cal-day-cell.today { background: var(--color-primary-soft); }
.cal-day-num {
  font-weight: 600;
  color: var(--color-text-subtle);
  display: block;
  margin-bottom: 3px;
}
.cal-day-cell.today .cal-day-num { color: var(--color-primary); }
.cal-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin: 1px;
  cursor: default;
}
.cal-dot.departure { background: var(--color-success); }
.cal-dot.arrival { background: var(--color-purple); }

/* ── Itinerary timeline (/viaje/...) ──────────────────────────────────────── */
.itin-page    { padding: var(--sp-5); max-width: 100%; }
.itin-header  { display: flex; flex-wrap: wrap; align-items: flex-start;
                gap: var(--sp-4); margin-bottom: var(--sp-5); }
.itin-scroll  { overflow-x: auto; padding-bottom: var(--sp-3); }
.itin-grid    { display: grid; gap: 3px; }

.itin-section-label {
  grid-column: 1 / -1;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--color-text-subtle);
  padding: .6rem 0 .2rem;
  border-top: 1px solid var(--color-border);
  margin-top: .4rem;
}

.itin-ruler-day {
  font-size: .6rem; color: var(--color-text-subtle);
  text-align: center; padding: .2rem 0;
  border-left: 1px solid var(--color-border);
  line-height: 1.25; user-select: none;
}
.itin-ruler-day.today { color: var(--color-primary); font-weight: 700; }
.itin-ruler-spacer    { border-left: 1px solid transparent; }

.itin-bar {
  border-radius: var(--radius-sm);
  padding: .28rem .45rem;
  font-size: .7rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-width: 1px; border-style: solid;
  transition: filter var(--duration-fast);
  cursor: default;
  display: flex; align-items: center; gap: .25rem;
}
.itin-bar:hover { filter: brightness(.9); }

.itin-pin {
  display: flex; flex-direction: column; align-items: center;
  font-size: .6rem; gap: 2px; cursor: default; padding-top: .1rem;
}
.itin-pin-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid currentColor;
}
.itin-pin-label {
  max-width: 54px; text-align: center; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Status × time colours */
.itin-confirmed-past   { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }
.itin-confirmed-future { background: #f0fdf4; border-color: #16a34a; color: #15803d; }
.itin-pending-future   { background: #fefce8; border-color: #ca8a04; color: #92400e; }
.itin-pending-urgent   { background: #fff1f2; border-color: #dc2626; color: #b91c1c; }
.itin-pending-past     { background: #faf5ff; border-color: #9333ea; color: #7e22ce; }
.itin-neutral          { background: var(--color-surface-muted);
                         border-color: var(--color-border); color: var(--color-text-subtle); }

/* Legend */
.itin-legend      { display: flex; flex-wrap: wrap; gap: var(--sp-4);
                    margin-top: var(--sp-5); padding-top: var(--sp-3);
                    border-top: 1px solid var(--color-border); font-size: .72rem; }
.itin-legend-item { display: flex; align-items: center; gap: .3rem; }
.itin-legend-swatch { width: 12px; height: 12px; border-radius: 3px;
                      border-width: 1px; border-style: solid; flex-shrink: 0; }

/* ── Itinerary week navigation ───────────────────────────────────────── */
.itin-week-nav {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.itin-nav-btn {
  padding: .28rem .65rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font-size: .8rem; font-family: var(--font-sans);
  text-decoration: none; color: var(--color-text); white-space: nowrap;
  background: var(--color-surface);
}
.itin-nav-btn:not(.disabled):hover { background: var(--color-surface-muted); }
.itin-nav-btn.disabled { opacity: .3; cursor: default; pointer-events: none; }
.itin-week-label {
  flex: 1; text-align: center; font-size: .82rem;
  font-weight: 600; color: var(--color-text-subtle);
}

/* ── Agent todo panel ──────────────────────────────────────────────── */
.agent-todo {
  border: 1px solid var(--color-border); border-radius: 8px;
  margin-bottom: 1rem; background: var(--color-surface);
  overflow: hidden;
}
.agent-todo-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem 1rem; cursor: pointer; font-weight: 600;
  font-size: .9rem; user-select: none;
}
.agent-todo-header:hover { background: var(--color-surface-muted); }
.agent-todo-body {
  padding: 0 .4rem .4rem; max-height: 320px; overflow-y: auto;
}
.agent-todo-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .4rem .5rem; border-radius: 5px; font-size: .84rem;
  text-decoration: none; color: inherit;
}
.agent-todo-item:hover { background: var(--color-surface-muted); }
.agent-todo-date {
  font-size: .73rem; font-weight: 700; min-width: 3.2rem;
  text-align: right; white-space: nowrap; color: var(--color-text-subtle);
}
.agent-todo-date.urgent { color: #dc2626; }
.agent-todo-date.warn   { color: #ca8a04; }

/* ─── Error page (403, 404) ─────────────────────────────────────────────── */
.error-page {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-4); text-align: center;
  min-height: 60vh;
}
.error-page .icon { width: 64px; height: 64px; opacity: 0.18; color: var(--color-text); }
.error-page__code {
  font-size: 5rem; font-weight: 800; line-height: 1; margin: 0;
  color: var(--color-text-subtle); letter-spacing: -2px;
}
.error-page__msg {
  font-size: var(--fs-lg); color: var(--color-text-muted); margin: 0;
  max-width: 28rem;
}

/* ─── Mobile layout (≤ 768px) ─────────────────────────────────────────────── */
/* Hidden on desktop — shown only in the media query below */
.m-header, .m-lane-tabs-wrap, .m-bottom-tabs,
.m-menu, .m-menu-overlay { display: none; }

@media (max-width: 768px) {

  /* ── Hide desktop chrome ── */
  .site-header    { display: none !important; }
  .kanban-toolbar { display: none !important; }
  .agent-todo     { display: none !important; }  /* shown via Pendientes tab */

  .page { padding: 0 !important; max-width: 100% !important; overflow-x: hidden; }

  /* ── Mobile sticky header ── */
  .m-header {
    display: flex !important; align-items: center;
    justify-content: space-between;
    position: sticky; top: 0; z-index: 20;
    height: 56px; padding: 0 14px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }
  .m-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    cursor: pointer; color: var(--color-text); flex-shrink: 0;
  }
  .m-icon-btn:hover, .m-icon-btn:active { background: var(--color-surface-muted); }

  /* ── Search bar (slides in below header) ── */
  .m-search-bar {
    display: none;
    position: sticky; top: 56px; z-index: 19;
    background: var(--color-surface);
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--color-border);
  }
  .m-search-bar.open { display: block; }
  .m-search-bar input {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--color-border); border-radius: 10px;
    font-family: var(--font-sans); font-size: 15px;
    background: var(--color-bg); color: var(--color-text);
    -webkit-appearance: none;
  }
  .m-search-bar input:focus { outline: none; border-color: var(--color-primary); }

  /* ── Lane pills ── */
  .m-lane-tabs-wrap {
    display: block;           /* no !important — JS needs to override this */
    position: sticky; top: 56px; z-index: 15;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }
  .m-lane-tabs-wrap.search-open { top: 105px; }
  #m-lane-tabs {
    display: flex; gap: 6px; padding: 9px 12px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #m-lane-tabs::-webkit-scrollbar { display: none; }
  .m-lane-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
    white-space: nowrap; flex-shrink: 0;
    cursor: pointer; border: 1px solid transparent;
    transition: background .15s; line-height: 1;
    font-family: var(--font-sans);
  }
  .m-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .m-pill-count {
    font-size: 11px; font-weight: 700;
    padding: 1px 5px; border-radius: 999px;
    min-width: 16px; text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* ── Kanban → single column ── */
  .kanban-wrap {
    display: block !important;
    padding: 0 0 80px !important;
    min-height: 0 !important;
  }
  .kanban-col {
    display: none !important;
    padding: 12px 14px 20px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .kanban-col.m-active { display: flex !important; }
  .kcard { cursor: pointer !important; }
  .kcard:hover { transform: none !important; box-shadow: none !important; }
  .kcard:active { transform: scale(0.98) !important; }

  /* ── Fixed bottom tab nav ── */
  .m-bottom-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: oklch(0.99 0.003 80 / 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .m-tab {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 9px 0 7px;
    font-size: 10.5px; font-weight: 500;
    color: var(--color-text-subtle);
    cursor: pointer; border-radius: 0; position: relative;
    font-family: var(--font-sans);
  }
  .m-tab.m-tab--active { color: var(--color-text); font-weight: 600; }
  .m-tab-badge {
    display: none;
    position: absolute; top: 4px; right: calc(50% - 20px);
    background: oklch(0.55 0.22 25); color: white;
    font-size: 9px; font-weight: 700;
    min-width: 15px; height: 15px;
    border-radius: 999px; padding: 0 3px;
    line-height: 15px; text-align: center;
  }

  /* ── Tab content panels ── */
  #m-pendientes-view, #m-calendar-view, #m-profile-view { display: none; }
  #m-pendientes-view.m-shown, #m-calendar-view.m-shown { display: block; }
  #m-profile-view.m-shown { display: flex; }

  #m-pendientes-view {
    padding: 12px 14px calc(80px + env(safe-area-inset-bottom, 0px));
  }
  #m-pendientes-view .agent-todo { display: block !important; border: none; margin: 0; }
  #m-pendientes-view .agent-todo-header { cursor: default !important; }
  #m-pendientes-view .agent-todo-body   { max-height: none !important; }

  #m-calendar-view {
    padding: 12px 14px calc(80px + env(safe-area-inset-bottom, 0px));
  }
  #m-profile-view {
    flex-direction: column; align-items: center; gap: 12px;
    padding: 48px 24px calc(80px + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }
  .m-profile-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--color-surface-muted);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-subtle);
  }
  .m-profile-name { font-size: 20px; font-weight: 700; margin: 8px 0 0; }
  .m-profile-role { font-size: 13px; color: var(--color-text-subtle); margin: 4px 0 0; }
  .m-profile-logout {
    margin-top: 24px; padding: 12px 24px;
    border-radius: 10px; border: 1px solid var(--color-border);
    font-size: 14px; font-weight: 500;
    color: oklch(0.5 0.04 25); text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
  }

  /* ── Side panel → bottom sheet ── */
  .side-panel {
    width: 100% !important;
    top: auto !important; right: 0 !important; left: 0 !important; bottom: 0 !important;
    height: 88svh !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(110%) !important;
    padding-top: 10px;
  }
  .side-panel::before {
    content: ''; display: block;
    width: 40px; height: 4px; border-radius: 2px;
    background: oklch(0.85 0.005 80);
    margin: 0 auto 12px;
  }
  .side-panel.open {
    transform: translateY(0) !important;
    transition: transform .28s cubic-bezier(0.2,0.8,0.2,1) !important;
  }
  .side-panel-header { padding: 12px 16px !important; }
  .side-panel-body   { padding: 12px 16px 32px !important; }

  /* ── Left drawer menu ── */
  .m-menu-overlay {
    display: block !important;
    position: fixed; inset: 0; z-index: 100;
    background: oklch(0 0 0 / 0.42);
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
  }
  .m-menu-overlay.open { opacity: 1; pointer-events: auto; }
  .m-menu {
    display: flex !important;
    flex-direction: column; gap: 2px;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 82%; max-width: 320px; z-index: 101;
    background: var(--color-surface);
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(0.2,0.8,0.2,1);
    overflow-y: auto;
  }
  .m-menu.open { transform: translateX(0); }
  .m-menu-head {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 24px;
  }
  .m-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 12px; border-radius: 10px;
    font-size: 15px; font-weight: 500;
    color: var(--color-text); text-decoration: none;
    cursor: pointer; font-family: var(--font-sans);
  }
  .m-menu-item:hover, .m-menu-item:active { background: var(--color-surface-muted); }
  .m-menu-spacer { flex: 1; min-height: 24px; }
  .m-menu-logout { color: oklch(0.5 0.04 25); }

} /* end @media (max-width: 768px) */

/* ── Suggestions FAB ─────────────────────────────────────────────────────── */
.sug-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--color-text);
  transition: box-shadow .15s, transform .12s;
}
.sug-fab:hover { box-shadow: 0 6px 24px rgba(0,0,0,.18); transform: translateY(-1px); }
@media (max-width: 768px) { .sug-fab { display: none; } }

/* ── Suggestion form ─────────────────────────────────────────────────────── */
.sug-form-wrap {
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.sug-form-wrap input[type="text"],
.sug-form-wrap textarea {
  width: 100%; box-sizing: border-box;
  padding: .5rem .75rem; border: 1px solid var(--color-border);
  border-radius: 6px; font-size: .9rem; font-family: var(--font-sans);
  background: var(--color-bg); color: var(--color-text);
}
.sug-form-wrap textarea { min-height: 80px; resize: vertical; }
.sug-form-wrap button {
  align-self: flex-end; padding: .5rem 1.2rem;
  background: var(--color-accent, #2563eb); color: #fff;
  border: none; border-radius: 6px; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.sug-form-msg { font-size: .82rem; opacity: .75; }

/* ── Suggestion item ─────────────────────────────────────────────────────── */
.sug-item {
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}
.sug-score {
  font-size: 1.25rem; font-weight: 700; text-align: center;
  line-height: 1; padding-top: 4px;
}
.sug-score.pos { color: var(--color-success, #16a34a); }
.sug-score.neg { color: var(--color-danger, #dc2626); }
.sug-content { display: flex; flex-direction: column; gap: 4px; }
.sug-title { font-weight: 600; font-size: .95rem; }
.sug-desc { font-size: .85rem; opacity: .75; }
.sug-meta { font-size: .78rem; opacity: .55; display: flex; gap: 8px; flex-wrap: wrap; }
.sug-vote-btns { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.sug-vote-btn {
  padding: 4px 8px; border-radius: 4px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: .8rem; cursor: pointer; color: var(--color-text);
  transition: background .1s;
}
.sug-vote-btn:hover:not(:disabled) { background: var(--color-surface-muted); }
.sug-vote-btn:disabled { opacity: .35; cursor: default; }
.sug-vote-btn.active-up { background: #dcfce7; border-color: #16a34a; color: #16a34a; }
.sug-vote-btn.active-down { background: #fee2e2; border-color: #dc2626; color: #dc2626; }

/* ── Status chips ────────────────────────────────────────────────────────── */
.sug-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.sug-chip--open        { background: var(--color-surface-muted); color: var(--color-text-subtle, #6b7280); }
.sug-chip--in_progress { background: #dbeafe; color: #1d4ed8; }
.sug-chip--done        { background: #dcfce7; color: #15803d; }
.sug-chip--cancelled   { background: #fee2e2; color: #b91c1c; text-decoration: line-through; }
.sug-chip--vetoed      { background: #fce7f3; color: #9d174d; text-decoration: line-through; }

/* ── Admin suggestions table ─────────────────────────────────────────────── */
.sug-score-cell { font-size: 1.1rem; font-weight: 700; text-align: center; }
.sug-score-cell.pos { color: var(--color-success, #16a34a); }
.sug-score-cell.neg { color: var(--color-danger, #dc2626); }

/* ── Ops panel ───────────────────────────────────────────────────────────── */
.ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: .5rem;
}
.ops-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; padding: 14px 16px;
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: 10px; cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.ops-btn:hover:not(:disabled) {
  border-color: var(--ops-clr);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ops-clr) 12%, transparent);
}
.ops-btn:disabled { opacity: .5; cursor: default; }
.ops-btn--running { border-color: var(--ops-clr) !important; animation: ops-pulse 1s infinite; }
.ops-btn strong { font-size: .92rem; color: var(--ops-clr); }
.ops-hint { font-size: .75rem; color: var(--color-text-muted); font-weight: 400; }
@keyframes ops-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ops-clr) 30%, transparent); }
  50%       { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ops-clr) 0%, transparent); }
}
.ops-output {
  background: #0f172a; color: #e2e8f0;
  border-radius: 8px; padding: 14px 16px;
  font-size: .82rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-all;
  max-height: 420px; overflow-y: auto;
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
}

/* ── Nav badge ───────────────────────────────────────────────────────────── */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 999px;
  background: var(--color-danger, #dc2626); color: #fff;
  font-size: .65rem; font-weight: 700; padding: 0 4px; margin-left: 4px;
}

/* ── Limpieza layout ─────────────────────────────────────────────────────── */
.limpieza-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - var(--header-h, 56px) - 32px);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.limpieza-sidebar {
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.limpieza-sidebar-header {
  padding: 14px 16px;
  font-weight: 700;
  font-size: .9rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.l-client-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .1s;
}
.l-client-item:hover, .l-client-item.active { background: var(--color-surface-muted); }
.l-client-name { font-size: .88rem; font-weight: 600; }
.l-client-state { font-size: .75rem; opacity: .65; }

/* ── Limpieza review area ────────────────────────────────────────────────── */
.limpieza-review {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  gap: 20px;
  overflow-y: auto;
}
.limpieza-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: .95rem;
  padding: 48px 24px;
}
.l-step-card {
  width: 100%;
  max-width: 520px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
}
.l-step-progress {
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.l-step-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.l-step-meta { font-size: .85rem; color: var(--color-text-muted); margin-bottom: 4px; }
.l-step-actions { display: flex; gap: 10px; margin-top: 20px; }
.l-btn-ok {
  padding: 9px 20px;
  background: var(--color-success, #16a34a);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: .9rem;
}
.l-btn-ok:hover { opacity: .9; }
.l-btn-edit {
  padding: 9px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: .9rem;
}
.l-btn-edit:hover { background: var(--color-surface-muted); }

/* ── Limpieza confirm card ───────────────────────────────────────────────── */
.l-confirm-card {
  width: 100%;
  max-width: 520px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px;
}
.l-confirm-icon { font-size: 2.5rem; margin-bottom: 12px; }
.l-confirm-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.l-confirm-subtitle { font-size: .9rem; color: var(--color-text-muted); margin-bottom: 24px; }
.l-confirm-btn {
  padding: 11px 32px;
  background: var(--color-accent, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.l-confirm-btn:hover { opacity: .9; }

/* ── Limpieza nav buttons ────────────────────────────────────────────────── */
.l-nav-btns { display: flex; gap: 12px; }
.l-btn-prev, .l-btn-next {
  padding: 7px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  cursor: pointer;
  font-size: .85rem;
}
.l-btn-prev:hover:not(:disabled), .l-btn-next:hover:not(:disabled) {
  background: var(--color-surface-muted);
}
.l-btn-prev:disabled, .l-btn-next:disabled { opacity: .3; cursor: default; }

/* ── Limpieza edit form ──────────────────────────────────────────────────── */
.l-edit-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.l-edit-form label { font-size: .82rem; font-weight: 600; color: var(--color-text-muted); }
.l-edit-form input,
.l-edit-form select,
.l-edit-form textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: .88rem;
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
}
.l-edit-form textarea { resize: vertical; min-height: 72px; }
.l-edit-actions { display: flex; gap: 8px; }
.l-btn-save {
  padding: 8px 18px;
  background: var(--color-accent, #2563eb);
  color: #fff; border: none; border-radius: 6px;
  font-weight: 600; cursor: pointer; font-size: .88rem;
}
.l-btn-cancel {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  cursor: pointer; font-size: .88rem;
}

/* ── Limpieza all-done state ─────────────────────────────────────────────── */
.l-all-done {
  text-align: center;
  padding: 64px 32px;
  color: var(--color-text-muted);
}
.l-all-done-icon { font-size: 3rem; margin-bottom: 16px; }
.l-all-done-title { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }

@media (max-width: 640px) {
  .limpieza-wrap { grid-template-columns: 1fr; height: auto; }
  .limpieza-sidebar { max-height: 40vh; }
}

/* ── Limpieza v2 (tabla + cola inferior) ─────────────────────────────────── */
.l-page {
  display: flex; flex-direction: column; gap: 0;
  height: calc(100vh - var(--header-h, 56px) - 80px);
  min-height: 400px;
}
.l-review-section {
  flex: 1; overflow-y: auto;
  border: 1px solid var(--color-border); border-radius: 12px 12px 0 0;
}
.l-queue-section {
  border: 1px solid var(--color-border); border-top: none;
  border-radius: 0 0 12px 12px; flex-shrink: 0;
}
.l-queue-header {
  padding: 8px 16px; font-size: .8rem; font-weight: 600;
  opacity: .6; border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 6px;
}
.l-queue-scroll {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 16px; scrollbar-width: thin;
}
.l-queue-item {
  flex-shrink: 0; padding: 8px 14px; cursor: pointer;
  border: 1.5px solid var(--color-border); border-radius: 8px;
  transition: border-color .12s, background .12s;
  max-width: 200px;
}
.l-queue-item:hover { background: var(--color-surface-muted); }
.l-queue-item.active {
  border-color: var(--color-accent, #2563eb);
  background: color-mix(in srgb, var(--color-accent,#2563eb) 8%, transparent);
}
.l-queue-item .l-client-ref  { font-size: .7rem; font-weight: 700; opacity: .45; letter-spacing: .03em; }
.l-queue-item .l-client-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-queue-item .l-client-state { font-size: .72rem; opacity: .6; }

/* Review table header */
.l-review-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--color-border);
  gap: 12px; flex-wrap: wrap; position: sticky; top: 0;
  background: var(--color-surface); z-index: 2;
}
.l-review-title { font-size: 1rem; font-weight: 700; }

/* Service table */
.l-svc-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.l-svc-table th {
  text-align: left; padding: 9px 12px;
  font-size: .76rem; font-weight: 600; opacity: .55;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap; background: var(--color-surface);
}
.l-svc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  vertical-align: middle;
}
.l-svc-table tr.l-row-ok td:not(:last-child) { opacity: .35; }
.l-cat-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.l-row-actions { display: flex; gap: 5px; justify-content: flex-end; }
.l-btn-check {
  width: 30px; height: 30px; border-radius: 6px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface); cursor: pointer;
  font-size: .85rem; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
}
.l-btn-check:hover { border-color: var(--color-success, #16a34a); }
.l-btn-check.checked {
  background: var(--color-success, #16a34a);
  border-color: var(--color-success, #16a34a); color: #fff;
}
.l-btn-edit-sm {
  width: 30px; height: 30px; border-radius: 6px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface); cursor: pointer;
  font-size: .82rem; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.l-btn-edit-sm:hover { background: var(--color-surface-muted); }

/* Inline edit row */
.l-edit-row td { padding: 12px 16px; background: var(--color-surface-muted); }
.l-edit-row-inner { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.l-edit-label { font-size: .74rem; font-weight: 600; opacity: .6; display: block; margin-bottom: 4px; }
.l-edit-input {
  width: 100%; padding: .38rem .6rem;
  border: 1px solid var(--color-border); border-radius: 6px;
  font-size: .87rem; background: var(--color-bg); color: var(--color-text);
  box-sizing: border-box; font-family: inherit;
}
.l-edit-input:focus { outline: 2px solid var(--color-accent, #2563eb); outline-offset: -1px; }

@media (max-width: 640px) {
  .l-page { height: auto; }
  .l-review-section { min-height: 50vh; border-radius: 12px; margin-bottom: 12px; }
  .l-queue-section { border-radius: 12px; border-top: 1px solid var(--color-border); }
  .l-svc-table th:nth-child(4),
  .l-svc-table td:nth-child(4),
  .l-svc-table th:nth-child(5),
  .l-svc-table td:nth-child(5) { display: none; }
}

/* ─── Vuelos board (/vuelos) ──────────────────────────────────────────────── */

/* === Vuelos · FIDS (Flight Info Display System) === */

.vboard-panel {
  position: relative;
  background: #0b0d10;
  color: #f5f5f4;
  margin: 28px;
  border-radius: 14px;
  padding: 28px 32px 36px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(0,0,0,.4);
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.vboard-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at top left,    rgba(255,255,255,.04) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(255,255,255,.04) 0%, transparent 55%);
  pointer-events: none;
}

/* Panel header */
.vboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-wrap: wrap;
}
.vboard-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 8px;
  opacity: .85;
}
.vboard-title-text { opacity: 1; }
.vboard-terminal-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
  border: 1px solid rgba(255,255,255,.15);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 400;
}
.vboard-head-meta {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}
.vboard-meta-col { display: flex; flex-direction: column; }
.vboard-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 5px;
}
.vboard-meta-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #f5f5f4;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vboard-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.6); }
  100% { box-shadow: 0 0 0 8px rgba(34,197,94,0);  }
}

/* Refresh button */
.vboard-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  color: #d4d4d4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.vboard-refresh-btn:hover { background: rgba(255,255,255,.10); }
.vboard-refresh-icon { display: inline-block; }
.vboard-refresh-btn.spinning .vboard-refresh-icon {
  animation: vboard-spin 0.8s linear infinite;
}
@keyframes vboard-spin { to { transform: rotate(360deg); } }

/* Tabs */
.vboard-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.vboard-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6b7280;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s;
  margin-bottom: -1px;
}
.vboard-tab:hover { color: #d4d4d4; }
.vboard-tab--active { color: #fff; border-bottom-color: #fff; }
.vboard-tab-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  color: #d4d4d4;
  letter-spacing: 0;
}
.vboard-tab--active .vboard-tab-count { background: #fff; color: #0b0d10; }

/* Board / scrollable table container */
.vboard-board {
  max-height: 620px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.vboard-board::-webkit-scrollbar { width: 6px; }
.vboard-board::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.vboard-board::-webkit-scrollbar-track { background: transparent; }

.vboard-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.vboard-table thead { position: sticky; top: 0; z-index: 1; }
.vboard-table thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(11,13,16,1);
  text-align: left;
  white-space: nowrap;
}
.vboard-table tbody td {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #f5f5f4;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vboard-table tbody tr { transition: background .15s; }
.vboard-table tbody tr:hover { background: rgba(255,255,255,.025); }
.vboard-dim { color: #4b5563 !important; }

/* Column widths */
.vboard-col-date   { width: 78px; }
.vboard-col-time   { width: 68px; }
.vboard-col-client { width: 240px; }
.vboard-col-flight { width: 90px; }
.vboard-col-route  { width: 150px; }
.vboard-col-status { width: 150px; }
.vboard-col-term   { width: 90px; }
.vboard-col-gate   { width: 80px; }
.vboard-col-seat   { width: 80px; }

/* Client cell */
.vboard-bcode {
  color: #60a5fa;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  margin-right: 4px;
}
.vboard-bcode:hover { text-decoration: underline; }
.vboard-contact-name {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 14px;
  color: #f5f5f4;
}

/* Flight / route */
.vboard-flight-no { font-weight: 600; letter-spacing: 0.06em; color: #fff; }
.vboard-route-from { color: #fff; font-weight: 500; }
.vboard-route-arrow { color: #6b7280; margin: 0 6px; }
.vboard-route-to { color: #d4d4d4; }

/* Status pill */
.vboard-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}
.vboard-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.vboard-pill--blink { animation: vboard-blink 1.4s infinite; }
@keyframes vboard-blink {
  0%, 60% { opacity: 1; }
  70%, 100% { opacity: .45; }
}

/* Split-flap animation */
.flap {
  display: inline-block;
  animation: flapIn 0.5s cubic-bezier(0.4,0,0.2,1) both;
  transform-origin: center bottom;
}
@keyframes flapIn {
  0%   { transform: rotateX(-90deg); opacity: 0; }
  60%  { transform: rotateX(15deg);  opacity: 1; }
  100% { transform: rotateX(0);      opacity: 1; }
}

/* Empty state */
.vboard-empty {
  padding: 3rem 1rem;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #4b5563;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Panel footer */
.vboard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 24px;
  padding-top: 16px;
  flex-wrap: wrap;
}
.vboard-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vboard-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4b5563;
}
.vboard-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vboard-fids-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4b5563;
}

/* ── /finanzas ───────────────────────────────────────────────────────────── */
.fin-wrap { max-width: 1200px; padding: var(--sp-5) var(--sp-4); }
.fin-wrap h1 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xl); margin: 0 0 var(--sp-2); }
.fin-wrap .page-subtitle { color: var(--color-text-subtle); font-size: var(--fs-sm); margin: 0 0 var(--sp-5); }

.fin-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.fin-kpi {
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.fin-kpi--warn { border-left-color: var(--color-warning); }
.fin-kpi__val {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: 1.2;
}
.fin-kpi__lbl {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-top: 2px;
}
.fin-kpi__lbl small { font-size: .7rem; }

.fin-section { margin-bottom: var(--sp-6); }
.fin-section__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.fin-coverage {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-text-subtle);
  background: var(--color-surface-muted);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
}
.fin-note {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  margin: var(--sp-2) 0 0;
}

/* Bar chart */
.fin-chart { display: flex; flex-direction: column; gap: 3px; }
.fin-bar-row {
  display: grid;
  grid-template-columns: 64px 1fr 60px 28px;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
}
.fin-bar-month { color: var(--color-text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-bar-track { height: 14px; background: var(--color-surface-muted); border-radius: 2px; overflow: hidden; }
.fin-bar-fill { height: 100%; border-radius: 2px; min-width: 2px; }
.fin-bar-val { text-align: right; font-family: var(--font-mono); font-size: .7rem; font-variant-numeric: tabular-nums; }
.fin-bar-trips { color: var(--color-text-subtle); font-size: .65rem; }

/* Two-column layout for agent + methods */
.fin-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
@media (max-width: 700px) { .fin-cols { grid-template-columns: 1fr; } }

/* P&L table */
.fin-pl-table .fin-folder-name { font-size: var(--fs-xs); color: var(--color-text-subtle); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-margin--ok  { color: var(--color-success-text); font-weight: 600; }
.fin-margin--warn { color: var(--color-warning-text, #b45309); font-weight: 600; }
.fin-margin--bad  { color: var(--color-danger-text); font-weight: 600; }
.num-cell { text-align: right; font-family: var(--font-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .flap { animation: none; }
  .vboard-pill--blink { animation: none; }
  .vboard-live-dot { animation: none; }
  .vboard-refresh-icon { animation: none !important; }
}