:root {
    /* Colores principales */
    --bg-main: #000;
    --bg-surface: rgba(28, 28, 30, 0.8);
    --bg-hover: rgba(44, 44, 46, 0.88);
    --outline: rgba(255, 255, 255, 0.08);
  
    --accent: #0a84ff;
    --text-main: #fff;
    --text-muted: #9d9d9d;
  
    /* Radios */
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
  }
  
  /* ---------- base ---------- */
  * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    display: flex;
    justify-content: center;
  }
  
  /* ---------- layout ---------- */
  .container {
    width: 100%;
    max-width: 680px;
    padding: calc(env(safe-area-inset-top) + 2rem) 1.25rem
      env(safe-area-inset-bottom) 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
  
  /* ---------- title ---------- */
  .app-title {
    margin: 0 auto;
    text-align: center;
    font-weight: 700;
    font-size: clamp(2rem, 2vw + 1.4rem, 2.6rem);
    letter-spacing: -0.25px;
  }
  
  /* ---------- buttons & inputs ---------- */
  #scan {
    align-self: center;
    background: #ffcd0d; /* amarillo 255,205,13 */
    color: #000;
    border: none;
    padding: 0.7rem 1.6rem;
    border-radius: var(--radius-lg);
    font-size: 1.0625rem;
    font-weight: 600;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow: 0 10px 18px rgba(255, 205, 13, 0.28);
    cursor: pointer;
    transition: background 0.22s, box-shadow 0.22s, transform 0.12s;
  }
  #scan:hover   { background: #ffd84d; }
  #scan:active  { transform: scale(0.97); box-shadow: 0 6px 14px rgba(255,205,13,.28); }
  #scan:focus-visible { outline: 2px solid #ffd84d; outline-offset: 2px; }
  
  #filter {
    width: 100%;
    max-width: 260px;
    align-self: center;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-main);
    font-size: 1rem;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
  }
  #filter::placeholder { color: var(--text-muted); }
  
  /* ---------- table ---------- */
  .table-wrapper { border-radius: var(--radius-lg); }
  
  table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--outline);
    border-radius: var(--radius-lg);     /* redondea header y footer */
    overflow: hidden;                    /* recorta esquinas */
  }
  th, td { padding: 0.8rem 1.1rem; text-align: left; }
  th {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--outline);
    cursor: pointer;
    user-select: none;
  }
  tr:not(:last-child) td { border-bottom: 1px solid var(--outline); }
  tr:hover td            { background: var(--bg-hover); }
  th.sort-asc::after  { content: " ▲"; }
  th.sort-desc::after { content: " ▼"; }
  
  /* ---------- status colouring ---------- */
  td[data-label="Status"] { font-weight: 600; }
  .status-scheduled { color: var(--text-muted); }
  .status-boarding  { color: var(--accent);     }
  .status-delayed   { color: #ff9f0a;           }
  .status-canceled  { color: #ff453a;           }
  .status-departed  { color: #30d158;           }
  .status-arrived   { color: #34c759;           }
  
  /* ---------- pager ---------- */
  .pager { display:flex; justify-content:center; align-items:center; gap:1rem; }
  .pager-btn {
    background: var(--bg-surface);
    color: var(--text-main);
    border: none;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
  }
  .pager-btn:disabled         { opacity: 0.4; cursor: default; }
  .pager-btn:not(:disabled):hover { background: var(--bg-hover); }
  
  /* ---------- responsive cards (mobile) ---------- */
  @media (max-width: 599px) {
    /* fondo negro para distinguir tarjetas */
    .table-wrapper, table { background: var(--bg-main); }
  
    thead { display: none; }
  
    tr {
      display: block;
      margin-bottom: 1rem;
      border: 1px solid var(--outline);
      border-radius: var(--radius-md);
      background: var(--bg-surface);         /* tarjeta más clara */
    }
    td {
      display: flex;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.65rem 0.9rem;
    }
    td::before {
      content: attr(data-label);
      font-weight: 600;
      color: var(--text-muted);
    }
  }
  
  @media (min-width: 600px) { table { min-width: 480px; } }
  
  /* ---------- log ---------- */
  #log {
    background: var(--bg-surface);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--outline);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: pre-wrap;
    overflow-x: auto;
  }
  
  @media (min-width: 768px) {
    .container { gap: 2rem; }
    th, td     { padding: 0.9rem 1.25rem; }
  }