*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ══════════════════════════════════════════════════════════
       Design tokens
       ══════════════════════════════════════════════════════════ */
    :root {
      color-scheme: light;
      --bg:        #eef2f7;
      --surface:   #ffffff;
      --surface-2: #f8fafc;
      --surface-3: #f1f5f9;
      --border:    #e2e8f0;
      --border-strong: #cbd5e1;

      --text:  #1e293b;
      --muted: #64748b;
      --faint: #94a3b8;

      --accent:        #2563eb;
      --accent-h:      #1d4ed8;
      --accent-soft:   #eff6ff;
      --accent-soft-2: #dbeafe;
      --accent-strong: #e0e7ff;
      --accent-text:   #1e40af;
      --ring:          rgba(37,99,235,.35);

      --amber:      #d97706;
      --amber-soft: #fef3c7;

      --danger:        #dc2626;
      --danger-soft:   #fef2f2;
      --danger-border: #fca5a5;
      --danger-btn:    #fee2e2;
      --danger-btn-h:  #fecaca;

      --success:        #166534;
      --success-soft:   #dcfce7;
      --success-border: #bbf7d0;

      --up: #1a7a3c;
      --dn: #c0392b;

      --disabled-bg:   #f1f5f9;
      --disabled-text: #94a3b8;

      --radius:    10px;
      --radius-sm: 6px;
      --radius-lg: 14px;

      --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
      --shadow:    0 2px 8px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
      --shadow-lg: 0 12px 30px rgba(15,23,42,.14);
      --scrim:     rgba(15,23,42,.5);
    }

    /* ── Tema oscuro (cromo) ─────────────────────────────────── */
    [data-theme="dark"] {
      color-scheme: dark;
      --bg:        #0b1220;
      --surface:   #131c2e;
      --surface-2: #1a2436;
      --surface-3: #202c42;
      --border:    #2a3852;
      --border-strong: #3a4a68;

      --text:  #e5edf7;
      --muted: #9fb0c7;
      --faint: #6b7c96;

      --accent:        #3b82f6;
      --accent-h:      #60a5fa;
      --accent-soft:   rgba(59,130,246,.12);
      --accent-soft-2: rgba(59,130,246,.22);
      --accent-strong: rgba(59,130,246,.28);
      --accent-text:   #93c5fd;
      --ring:          rgba(96,165,250,.45);

      --amber:      #f59e0b;
      --amber-soft: rgba(245,158,11,.15);

      --danger:        #f87171;
      --danger-soft:   rgba(248,113,113,.12);
      --danger-border: rgba(248,113,113,.40);
      --danger-btn:    rgba(248,113,113,.15);
      --danger-btn-h:  rgba(248,113,113,.25);

      --success:        #4ade80;
      --success-soft:   rgba(74,222,128,.14);
      --success-border: rgba(74,222,128,.35);

      --up: #4ade80;
      --dn: #f87171;

      --disabled-bg:   #1a2436;
      --disabled-text: #5b6b83;

      --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
      --shadow:    0 2px 10px rgba(0,0,0,.45);
      --shadow-lg: 0 14px 34px rgba(0,0,0,.55);
      --scrim:     rgba(0,0,0,.6);
    }

    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      padding: 24px;
      line-height: 1.5;
      transition: background-color .25s ease, color .25s ease;
    }

    h1 {
      font-size: 1.35rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: var(--accent);
      letter-spacing: -.02em;
    }

    /* ── Paneles / cards ─────────────────────────────────────── */
    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      margin-bottom: 16px;
      overflow: hidden;
      transition: background-color .25s ease, border-color .25s ease;
    }

    .panel-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
      font-weight: 600;
      font-size: .9rem;
      color: var(--text);
    }

    .panel-header button {
      background: none; border: none; cursor: pointer;
      font-size: .85rem; color: var(--accent); font-weight: 600; padding: 0;
    }

    .panel-body { padding: 18px 20px; }
    .panel.collapsed .panel-body { display: none; }

    .form-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 14px;
      align-items: flex-end;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1 1 150px;
    }

    .form-group label {
      font-size: .78rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    /* ── Inputs ──────────────────────────────────────────────── */
    input, select {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 10px;
      font-size: .9rem;
      color: var(--text);
      background: var(--surface);
      transition: border-color .15s, box-shadow .15s, background-color .25s;
      width: 100%;
    }

    input:hover, select:hover { border-color: var(--border-strong); }

    input:focus, select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--ring);
    }

    select:disabled, input:disabled { background: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; }

    /* ── Botones ─────────────────────────────────────────────── */
    .btn {
      padding: 9px 20px;
      border: none;
      border-radius: var(--radius-sm);
      font-size: .9rem;
      font-weight: 600;
      cursor: pointer;
      min-height: 38px;
      transition: background .15s, transform .1s, box-shadow .15s;
      white-space: nowrap;
    }
    .btn:active { transform: scale(.97); }
    .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
    .btn-primary:hover { background: var(--accent-h); }
    .btn-primary:disabled { background: var(--accent); opacity: .45; cursor: not-allowed; box-shadow: none; }
    .btn-danger  { background: var(--danger-btn); color: var(--danger); border: 1px solid var(--danger-border); }
    .btn-danger:hover { background: var(--danger-btn-h); }

    /* Boton icono (toggle de tema) */
    .icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 38px; height: 38px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--muted);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }
    .icon-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
    .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .icon-btn svg { width: 18px; height: 18px; }
    .ic-sun { display: none; }
    .ic-moon { display: block; }
    [data-theme="dark"] .ic-sun { display: block; }
    [data-theme="dark"] .ic-moon { display: none; }

    .badge-connected {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--success-soft);
      color: var(--success);
      border: 1px solid var(--success-border);
      border-radius: 20px;
      padding: 4px 12px;
      font-size: .8rem;
      font-weight: 600;
    }

    .error-msg {
      background: var(--danger-soft); color: var(--danger);
      border: 1px solid var(--danger-border); border-radius: var(--radius-sm);
      padding: 8px 12px; font-size: .85rem; margin-top: 8px;
    }

    /* ══════════════════════════════════════════════════════════
       Superficies de DATOS: se mantienen claras tambien en oscuro
       (el grafico SVG y el heatmap se pintan por JS para fondo claro)
       ══════════════════════════════════════════════════════════ */
    #chart-wrapper, #data-table-container, .tbl-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    [data-theme="dark"] #chart-wrapper,
    [data-theme="dark"] #data-table-container,
    [data-theme="dark"] .tbl-section {
      --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9;
      --border: #e2e8f0; --border-strong: #cbd5e1;
      --text: #1e293b; --muted: #64748b; --faint: #94a3b8;
      --accent-soft: #eff6ff; --accent-soft-2: #dbeafe;
      --accent-strong: #e0e7ff; --accent-text: #1e40af;
      --up: #1a7a3c; --dn: #c0392b;
      background: #ffffff; color: #1e293b;
      border-color: #e2e8f0;
    }

    #chart-wrapper { padding: 20px; overflow-x: auto; }
    #chart-container { min-height: 200px; }
    #chart-container svg { display: block; }

    .no-data {
      text-align: center; color: var(--muted);
      padding: 60px 20px; font-size: .95rem;
    }

    .chart-placeholder {
      text-align: center; color: var(--muted);
      padding: 80px 20px; font-size: .95rem;
      border: 2px dashed var(--border); border-radius: var(--radius);
    }

    .loading {
      display: flex; align-items: center; gap: 10px;
      color: var(--muted); padding: 40px 20px; justify-content: center;
    }

    .spinner {
      width: 20px; height: 20px;
      border: 3px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .hidden { display: none !important; }
    .flex-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

    /* cascade arrow separators */
    .cascade-arrow {
      font-size: 1.2rem; color: var(--faint);
      align-self: center; padding-top: 18px;
      flex: 0 0 auto;
    }

    /* Bifurcacion fecha -> (Viaje / Agrupados) */
    .cascade-fork {
      display: flex; flex-direction: column; justify-content: space-between;
      align-self: stretch; padding: 16px 2px; flex: 0 0 auto;
    }
    .cascade-fork .fork-arrow { font-size: 1.2rem; color: var(--faint); line-height: 1; }
    .viaje-stack { display: flex; flex-direction: column; gap: 10px; flex: 1 1 200px; min-width: 180px; }
    .viaje-stack .form-group { flex: 1 1 auto; }

    /* ── Datepicker ─────────────────────────────────────────── */
    .date-picker-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1 1 220px;
    }

    .date-picker-wrap label {
      font-size: .78rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .date-input-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    #inp-fecha {
      flex: 1;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 10px;
      font-size: .9rem;
      color: var(--text);
      background: var(--surface);
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
    }

    #inp-fecha:disabled {
      background: var(--disabled-bg);
      color: var(--disabled-text);
      cursor: not-allowed;
    }

    #inp-fecha:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

    /* Calendar popup */
    #cal-popup {
      position: fixed;
      z-index: 9999;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      padding: 12px;
      width: 260px;
      user-select: none;
    }

    .cal-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .cal-nav button {
      background: none;
      border: 1px solid var(--border);
      border-radius: 5px;
      width: 28px; height: 28px;
      cursor: pointer;
      font-size: .85rem;
      color: var(--text);
      display: flex; align-items: center; justify-content: center;
      transition: background .15s;
    }

    .cal-nav button:hover { background: var(--surface-3); }

    .cal-month-label {
      font-weight: 700;
      font-size: .9rem;
      color: var(--text);
    }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }

    .cal-dow {
      text-align: center;
      font-size: .72rem;
      font-weight: 700;
      color: var(--muted);
      padding: 3px 0;
    }

    .cal-day {
      text-align: center;
      padding: 5px 2px;
      border-radius: 5px;
      font-size: .82rem;
      cursor: default;
      color: var(--faint);
    }

    .cal-day.available {
      background: var(--accent-soft-2);
      color: var(--accent-text);
      font-weight: 700;
      cursor: pointer;
    }

    .cal-day.available:hover { background: var(--accent-soft-2); filter: brightness(.95); }

    .cal-day.selected {
      background: var(--accent) !important;
      color: #fff !important;
    }

    .cal-day.in-range {
      background: var(--accent-soft-2) !important;
      color: var(--accent-text) !important;
      border-radius: 0 !important;
    }

    .vm-seg { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
    .vm-btn { border:none; background:var(--surface-3); color:var(--text); padding:1px 8px; font-size:.85rem; line-height:1.5; cursor:pointer; transition: background .15s; }
    .vm-btn + .vm-btn { border-left:1px solid var(--border); }
    .vm-btn.active { background:var(--accent); color:#fff; }
    .vm-btn:not(.active):hover { background:var(--border); }

    .cal-day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
    .cal-day.empty { visibility: hidden; }

    .cal-loading {
      text-align: center;
      color: var(--muted);
      font-size: .82rem;
      padding: 16px 0;
    }

    /* ── Toggle checkbox ────────────────────────────────────── */
    .toggle-label {
      display: flex; align-items: center; gap: 8px; cursor: pointer;
    }
    .toggle-label input[type="checkbox"] { display: none; }
    .toggle-track {
      width: 38px; height: 20px; background: var(--border-strong);
      border-radius: 20px; position: relative; transition: background .2s;
    }
    .toggle-label input:checked + .toggle-track { background: var(--accent); }
    .toggle-thumb {
      position: absolute; top: 2px; left: 2px;
      width: 16px; height: 16px; background: #fff;
      border-radius: 50%; transition: left .2s;
      box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    .toggle-label input:checked + .toggle-track .toggle-thumb { left: 20px; }

    /* ── Data table ─────────────────────────────────────────── */
    #data-table-container {
      overflow-x: auto;
      padding: 4px;
    }

    .macs-table {
      border-collapse: collapse;
      font-size: .82rem;
      white-space: nowrap;
      width: 100%;
      font-variant-numeric: tabular-nums;
    }

    .macs-table th, .macs-table td {
      border: 1px solid var(--border);
      padding: 5px 9px;
      text-align: center;
    }

    .macs-table thead th {
      background: var(--surface-3);
      font-weight: 700;
      color: var(--text);
      font-size: .78rem;
      position: sticky; top: 0; z-index: 1;
    }

    .th-orig, .td-orig {
      text-align: left !important;
      background: var(--surface-2);
      font-weight: 600;
      min-width: 130px;
      max-width: 180px;
      white-space: normal;
    }

    .stop-code-th, .stop-code-td {
      font-size: .72rem; color: var(--muted); font-weight: 400;
    }

    .td-val  { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
    .td-empty { color: var(--faint); }
    .td-total { background: var(--surface-3); font-weight: 700; }
    .td-grand { background: var(--accent-strong); color: var(--accent-text); }
    .tr-total td { border-top: 2px solid var(--border-strong); }

    /* ── Tables layout ──────────────────────────────────────── */
    .tables-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 16px;
    }
    @media (max-width: 900px) { .tables-grid { grid-template-columns: 1fr; } }

    .tbl-section { overflow: hidden; }

    .tbl-title {
      padding: 10px 14px;
      font-size: .8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--muted);
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
    }

    .tbl-scroll { overflow-x: auto; }

    .th-name { display: block; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }

    .td-zero  { color: var(--faint); font-size: .75rem; }
    .td-tri   { background: var(--surface-2); }
    .td-up    { color: var(--up); font-weight: 600; }
    .td-dn    { color: var(--dn); font-weight: 600; }

    /* ── Bidirectional highlight ────────────────────────────── */
    .tbl-row-hi {
      background: var(--accent-soft) !important;
      outline: 2px solid var(--accent);
      outline-offset: -1px;
    }
    .tbl-cell-hi {
      background: var(--accent-soft-2) !important;
      outline: 2px solid var(--accent);
      outline-offset: -1px;
    }
    .tbl-clickable {
      cursor: pointer;
      transition: background .1s;
    }
    .tbl-clickable:hover { background: var(--accent-soft-2) !important; }
    tr[data-stop]:hover td, tr[data-orig]:hover td {
      background: var(--accent-soft);
    }

    /* ── Vista dropdown ─────────────────────────────────────── */
    .vista-btn {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 5px 12px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      display: flex; align-items: center; gap: 5px;
      transition: background .15s, border-color .15s;
    }
    .vista-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
    .vista-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    .vista-dropdown {
      position: fixed;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      z-index: 99999;
      min-width: 210px;
      overflow: visible;
      color: var(--text);
    }

    /* ── Sortable table headers ─────────────────────────────── */
    .th-sortable {
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }
    .th-sortable:hover { background: var(--border); }

    /* ── Scrollbars (cromo oscuro) ──────────────────────────── */
    [data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
    [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-2); }
    [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 3px solid var(--surface-2); }

    /* ── Movimiento reducido ────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    }