:root {
  --bg: #f4f6f9; --panel: #fff; --ink: #172033; --muted: #66728a; --line: #e2e7ef;
  --brand: #0b5fff; --brand-ink: #fff; --ok: #12813f; --ok-bg: #e4f6ea;
  --warn: #9a5b00; --warn-bg: #fff2d9; --bad: #b3261e; --bad-bg: #fde8e6; --info-bg: #e6efff;
  --radius: 12px; --shadow: 0 1px 2px rgba(20,30,60,.06), 0 4px 14px rgba(20,30,60,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1420; --panel: #171e2e; --ink: #e8edf7; --muted: #93a0ba; --line: #2a3350;
    --brand: #4d8dff; --brand-ink: #06122e; --ok: #4cc27a; --ok-bg: #12301f;
    --warn: #f0b34a; --warn-bg: #3a2a0c; --bad: #ff7b72; --bad-bg: #3b1714; --info-bg: #162a52;
    --shadow: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--brand); }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 10px; }
.muted { color: var(--muted); }
/* Sin límite: con la tabla de turnos (muchas columnas) un ancho fijo angosto obligaba a hacer
   scroll horizontal aunque la pantalla tuviera espacio de sobra. En páginas con contenido más
   angosto (formularios de Clientes, Usuarios...) no cambia nada, el contenido no se estira
   solo porque el contenedor pueda ser más ancho. */
.wrap { max-width: none; margin: 0 auto; padding: 18px 24px 60px; }

.topbar { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar .in { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 6px; min-height: 54px; flex-wrap: wrap; }
.brand { font-weight: 700; margin-right: 14px; letter-spacing: .2px; }
.topbar a.nav { text-decoration: none; color: var(--muted); padding: 8px 12px; border-radius: 8px; font-weight: 500; }
.topbar a.nav.on, .topbar a.nav:hover { background: var(--info-bg); color: var(--brand); }
.topbar .who { margin-left: auto; font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.stat b { display: block; font-size: 26px; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 13px; }

.btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 9px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; min-height: 38px; }
.btn:hover { border-color: var(--brand); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.ok { background: var(--ok); color: #fff; border-color: var(--ok); }
/* Botón "Atrás" de la app del conductor: más oscuro que el .btn normal (que queda muy
   parecido al fondo de la tarjeta) para que se distinga como acción secundaria sin verse
   apagado del todo — mismo en APK y PWA, es el mismo app.html para los dos. */
.btn.atras { background: #333c4d; color: #fff; border-color: #333c4d; }
.btn.atras:hover { background: #2a3140; border-color: #2a3140; }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 5px 10px; min-height: 32px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; }

input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; width: 100%; min-height: 40px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
label { display: block; font-weight: 600; font-size: 13px; margin: 12px 0 5px; }

.tablewrap { overflow-x: auto; }
/* min-width (no width fijo): con muchas columnas, forzar el ancho al 100% del contenedor
   aprieta cada una hasta el punto de partir el texto de los botones de acciones a la mitad
   ("Pe" / "ing"). Así, la tabla crece lo que necesite y el contenedor (arriba) la desplaza. */
table { width: 100%; min-width: max-content; border-collapse: collapse; }
/* La última columna (los botones de acción en Pendientes) queda FIJA a la derecha en vez de
   perderse al final del scroll horizontal — con tantas columnas (conductor, teléfono,
   manifiesto, precinto...) siempre hacía falta desplazarse hasta el final para verla. */
th:last-child, td:last-child { position: sticky; right: 0; background: var(--panel); box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .35); }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
tr.click { cursor: pointer; }
tr.click:hover td { background: color-mix(in srgb, var(--info-bg) 55%, transparent); }
.turno { display: inline-grid; place-items: center; min-width: 38px; height: 38px; border-radius: 10px; background: var(--info-bg); color: var(--brand); font-weight: 800; font-size: 17px; }
.turno.first { background: var(--brand); color: var(--brand-ink); }
.placa { font-weight: 800; letter-spacing: 1px; font-size: 16px; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill.esperando { background: var(--warn-bg); color: var(--warn); }
.pill.ingreso { background: var(--info-bg); color: var(--brand); }
.pill.descargado { background: var(--ok-bg); color: var(--ok); }
.pill.cancelado { background: var(--bad-bg); color: var(--bad); }
.tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; margin-left: 6px; }
.thumbs { display: flex; gap: 6px; }
.thumbs img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.empty { text-align: center; padding: 34px 10px; color: var(--muted); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button { border: 0; background: transparent; padding: 8px 14px; border-radius: 8px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.tabs button.on { background: var(--info-bg); color: var(--brand); }

.modal { position: fixed; inset: 0; background: rgba(8,12,24,.6); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal.open { display: flex; }
.modal .box { background: var(--panel); border-radius: 14px; width: min(760px, 100%); max-height: 92vh; overflow: auto; padding: 18px; }
.modal .photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal .photos img { width: 100%; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
@media (max-width: 640px) { .modal .photos { grid-template-columns: 1fr; } }

/* Tabla de turnos en celular: con 11-13 columnas no cabe de ninguna forma en una pantalla
   angosta, ni con scroll horizontal se ve bien (la columna fija de botones terminaba tapando
   el resto). En vez de eso, cada fila se pinta como una tarjeta apilada — incluido el
   encabezado de cada dato al lado (viene de "data-label" en cada <td>, puesto en pintar()). */
@media (max-width: 760px) {
  .tablewrap { overflow-x: visible; }
  table { min-width: 0; }
  thead { display: none; }
  table, tbody, tr { display: block; width: 100%; }
  tr {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    margin-bottom: 12px; padding: 4px 12px; box-shadow: none;
  }
  td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    text-align: right; border-bottom: 1px dashed var(--line);
    position: static !important; background: transparent !important; box-shadow: none !important;
  }
  td:last-child { border-bottom: none; }
  td::before {
    content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--muted); font-weight: 700; text-align: left; flex: 0 0 auto;
  }
  /* celdas sin etiqueta (los botones de acción): ocupan el ancho completo, sin el "rótulo :
     valor" de las demás — ahí no aplica */
  td[data-label=""] { display: block; padding-top: 10px; }
  td[data-label=""]::before { content: none; }
  .actions { justify-content: flex-end; }
  .thumbs img { width: 40px; height: 40px; }
}
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 60; display: none; }
.row { display: flex; gap: 12px; flex-wrap: wrap; } .row > * { flex: 1 1 200px; }
.alert { padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-weight: 600; }