/* PWA del chofer — móvil primero, sin dependencias externas (modo avión). */
:root {
  /* Paleta de la línea gráfica EKLAR (app.eklar.mx). Los verdes/rojos de
     acción siguen sólidos y fuertes: se usan bajo el sol. */
  --azul: #8a6d2f;      /* latón hondo (color principal) */
  --acento: #c0a05c;    /* latón */
  --fondo: #f5f2ec;     /* crema */
  --texto: #282828;     /* carbón */
  --gris: #6b6560;      /* piedra */
  --borde: #e7e1d6;     /* arena */
  --suave: #f3ede0;     /* latón tenue (fondos de botón secundario) */
  --ok: #15803d;
  --warn: #b45309;
  --mal: #b91c1c;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, "Segoe UI", sans-serif; background: var(--fondo); color: var(--texto); font-size: 16px; }

.top { background: #282828; color: #fff; position: sticky; top: 0; z-index: 5; }
.top-inner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.brand { font-weight: 700; flex: 1; }
.red { font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.red.online { background: #2c9a5e; }
.red.offline { background: #8e3b31; }
.sync-badge { background: var(--acento); color: #1c1b19; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 3px 9px; }

.pantalla { padding: 12px; max-width: 560px; margin: 0 auto; }
.card { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 14px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(16,32,54,.1); }
.muted { color: var(--gris); font-size: 14px; }
.chico { font-size: 13px; }

/* Login */
.login { margin-top: 15vh; }
.login h1 { font-size: 22px; text-align: center; margin: 0; color: var(--azul); }
.login h1 span { color: var(--acento); }
.login p { text-align: center; margin-top: 2px; }

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
input, select { width: 100%; padding: 12px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; }

.btn { display: inline-block; border: none; cursor: pointer; font: inherit; font-weight: 600;
  padding: 11px 14px; border-radius: 10px; background: var(--suave); color: #725722; }
.btn.principal { background: #282828; color: #fff; width: 100%; margin-top: 16px; }
.btn.chico { padding: 9px 11px; font-size: 14px; }
/* Acciones de parada: GRANDES (≥48px) y con color SÓLIDO, legibles bajo el
   sol y con guantes. Positivas arriba, negativas abajo y separadas. */
.btn.accion { min-height: 50px; font-size: 16px; }
.btn.ok { background: var(--ok); color: #fff; }
.btn.warn { background: #fdf3e3; color: var(--warn); min-height: 44px; }
.btn.mal { background: var(--mal); color: #fff; min-height: 44px; }
.btn.cobro { background: var(--acento); color: #1c1b19; }
.btn.liga { background: none; color: var(--gris); width: 100%; }
.btn.accion.liga { background: var(--suave); color: #725722; width: auto; }
.btn.wa { background: #1e7d46; color: #fff; width: 100%; margin-top: 10px;
  text-align: center; text-decoration: none; }
.btn:disabled { opacity: .5; }

.alerta { background: #fbeae8; color: var(--mal); padding: 10px; border-radius: 10px; margin-top: 10px; font-size: 14px; }

/* Ruta */
.cabecera-ruta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.resumen { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.parada-cab { display: flex; gap: 10px; align-items: flex-start; }
/* La dirección es dato PRIMARIO del chofer: grande, oscura y abre el mapa. */
.direccion { display: block; font-size: 16px; color: var(--azul); font-weight: 500;
  text-decoration: underline; margin-top: 2px; }
/* Siguiente parada: la primera no terminada, resaltada para seguir el orden. */
.parada.siguiente { border: 3px solid var(--azul); }
.parada.siguiente::before { content: "SIGUIENTE PARADA"; display: inline-block;
  background: var(--azul); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 6px; padding: 2px 8px; margin-bottom: 6px; }
.orden { background: var(--azul); color: #fff; font-weight: 700; border-radius: 999px;
  min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.parada-datos { flex: 1; min-width: 0; }
.telefono { display: inline-block; margin-top: 2px; }

.chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.chip.Pendiente { background: #edf1f5; color: var(--gris); }
.chip.EnRuta { background: #f3ede0; color: var(--azul); }
.chip.Entregada { background: #e6f4ec; color: var(--ok); }
.chip.Parcial { background: #fdf3df; color: var(--warn); }
.chip.Rechazada, .chip.Reprogramada { background: #fbeae8; color: var(--mal); }

.productos { margin: 10px 0 0; padding: 0 0 0 4px; list-style: none; }
.productos li { font-size: 14px; padding: 3px 0; border-bottom: 1px dashed var(--borde); }
.productos li:last-child { border-bottom: none; }
.productos .cant { font-weight: 700; }
.productos .clave { color: var(--gris); font-size: 12px; }

.obs { font-size: 13px; color: #8a5a00; background: #fdf6e3; border-radius: 6px;
  padding: 4px 8px; margin-top: 6px; }

.monto-linea { margin-top: 8px; font-size: 17px; font-weight: 600; }
.acciones { margin-top: 10px; }
.fila-pos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
/* Fila negativa separada de las positivas: el dedazo cuesta una entrega. */
.fila-neg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--borde); }

/* Firma */
#firma { width: 100%; height: 160px; border: 1px dashed var(--borde); border-radius: 10px;
  background: #fff; touch-action: none; display: block; }

/* Toast de confirmación: grande y con botón de acción (DESHACER) */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #24303e; color: #fff; padding: 14px 18px; border-radius: 12px;
  font-size: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.3); z-index: 50;
  max-width: 92vw; text-align: center; display: flex; gap: 12px; align-items: center; }
.toast[hidden] { display: none; }
.toast-btn { border: none; background: var(--acento); color: #3a2800; font-weight: 700;
  font-size: 15px; border-radius: 8px; padding: 10px 14px; cursor: pointer; flex: none; }

/* Registros rechazados por el servidor: banner persistente, nunca silencio */
.rechazados { background: #b3261e; color: #fff; padding: 10px 14px; font-size: 14px;
  display: flex; gap: 10px; align-items: center; }
.rechazados span { flex: 1; }
.rechazados .btn { background: #fff; color: #b3261e; }

/* Parada terminada: quedan cobro y liga del cliente */
.parada.hecha { opacity: .8; }
.parada.hecha .fila-neg,
.parada.hecha [data-accion="Llegada"],
.parada.hecha [data-accion="Entregada"] { display: none; }
.parada.hecha .fila-pos { grid-template-columns: 1fr 1fr; }
.chip-cobro { display: inline-block; background: #e6f4ec; color: var(--ok);
  font-size: 13px; font-weight: 700; border-radius: 999px; padding: 3px 10px; margin-top: 6px; }

/* Diálogo */
dialog { border: none; border-radius: 14px; padding: 0; width: min(92vw, 420px); }
dialog::backdrop { background: rgba(16,32,54,.5); }
dialog .card { margin: 0; border: none; }
dialog h2 { margin: 0 0 4px; font-size: 18px; }
.dlg-botones { display: flex; gap: 8px; margin-top: 16px; }
.dlg-botones .btn { flex: 1; }
.dlg-botones .principal { margin-top: 0; }

/* ---------------- checklist de carga ---------------- */
.carga-parada { border-top: 1px solid #e3e8ee; padding: 8px 0; }
.carga-parada:first-child { border-top: none; }
.carga-titulo { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.carga-item { display: flex; gap: 10px; align-items: center; padding: 7px 4px;
  font-size: 15px; border-radius: 8px; }
.carga-item input { width: 22px; height: 22px; flex: none; }
.carga-item.hecho span { text-decoration: line-through; color: #7a8694; }
.carga-pie { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-top: 10px; }
#btn-regreso { width: 100%; margin-top: 10px; }

/* ---------------- fotos de evidencia múltiples ---------------- */
.fotos-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.foto-mini { position: relative; }
.foto-mini img { width: 74px; height: 74px; object-fit: cover; border-radius: 8px;
  border: 1px solid #d5dce4; }
.foto-mini button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: #b3261e; color: #fff; font-size: 12px; }

/* ---------------- QR del recibo / liga del cliente ---------------- */
.qr-caja { text-align: center; padding: 10px 0; }
.qr-caja img { width: min(64vw, 260px); height: auto; image-rendering: pixelated;
  border: 1px solid var(--borde); border-radius: 10px; padding: 8px; background: #fff; }
.qr-url { word-break: break-all; margin-top: 6px; font-size: 11px; }

/* Mostrar/ocultar contraseña */
.campo-ojo { position: relative; }
.campo-ojo input { padding-right: 46px; }
.campo-ojo button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; font-size: 18px; cursor: pointer; }

/* Total cobrado hoy (el chofer trae ese dinero encima) */
.cobrado-hoy { color: var(--ok); font-weight: 700; margin-top: 2px; }