/* Pilotos · Pagos — móvil primero (misma base visual de App Conjuntos). */

:root {
  --pi-primary: #087CFF;
  --pi-oscuro: #1F3864;
  --pi-fondo: #f4f6f9;
  --pi-borde: #e4e7eb;
  --pi-bottomnav-alto: 64px;
}

body { background: var(--pi-fondo); font-size: 16px; -webkit-tap-highlight-color: transparent; }

/* Inputs a 16px: evita el zoom automático de iOS */
.form-control, .form-select { font-size: 16px; min-height: 46px; }
.btn { min-height: 44px; }
.btn-lg { min-height: 52px; }
.btn-sm { min-height: 34px; }

.btn-primary {
  --bs-btn-bg: var(--pi-primary); --bs-btn-border-color: var(--pi-primary);
  --bs-btn-hover-bg: #0663cc; --bs-btn-hover-border-color: #0663cc;
  --bs-btn-active-bg: #0552aa; --bs-btn-active-border-color: #0552aa;
}
a { color: var(--pi-primary); }

.pi-topbar { background: var(--pi-oscuro); }
.pi-topbar .navbar-brand { font-weight: 700; }
.pi-topbar .nav-link.active { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }

.pi-main { padding-top: 16px; padding-bottom: 24px; }
.pi-con-menu .pi-main { padding-bottom: calc(var(--pi-bottomnav-alto) + 32px + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { .pi-con-menu .pi-main { padding-bottom: 32px; } }

/* Navegación inferior (zona del pulgar) */
.pi-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; background: #fff; border-top: 1px solid var(--pi-borde); padding-bottom: env(safe-area-inset-bottom);
}
.pi-bottomnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: var(--pi-bottomnav-alto); color: #616e7c; text-decoration: none; font-size: 12px;
}
.pi-bottomnav a i { font-size: 22px; line-height: 1.1; }
.pi-bottomnav a.active { color: var(--pi-primary); font-weight: 600; }

.pi-mas { height: auto !important; border-radius: 16px 16px 0 0; }
.pi-mas-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 4px; font-size: 17px;
  color: #1f2933; text-decoration: none; border-bottom: 1px solid var(--pi-borde);
}
.pi-mas-item i { font-size: 22px; color: var(--pi-primary); }

/* Títulos de página estilo informe */
.pi-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.pi-titulo h1 { font-size: 1.35rem; font-weight: 700; color: var(--pi-oscuro); margin: 0; }
.pi-filtro { min-width: 240px; }

/* Tarjetas */
.pi-card { background: #fff; border: 1px solid var(--pi-borde); border-radius: 14px; padding: 16px; }
.pi-card + .pi-card { margin-top: 12px; }
.pi-card h2 { font-size: 1rem; font-weight: 700; color: var(--pi-oscuro); text-transform: uppercase; margin-bottom: 12px; }

/* Indicadores */
.pi-kpi { background: #fff; border: 1px solid var(--pi-borde); border-radius: 14px; padding: 14px; height: 100%; display: block; color: inherit; text-decoration: none; }
.pi-kpi .pi-kpi-num { font-size: clamp(19px, 5.5vw, 26px); font-weight: 700; line-height: 1.1; color: var(--pi-oscuro); white-space: nowrap; }
.pi-kpi .pi-kpi-txt { font-size: 13px; color: #616e7c; margin-top: 4px; }
.pi-kpi.alerta { border-color: #ffc107; background: #fffbea; }
.pi-kpi.peligro { border-color: #f1aeb5; background: #fff5f5; }
.pi-kpi.bien { border-color: #a3cfbb; background: #f3fbf6; }

/* Tarjeta grande del conductor («Te debemos») */
.pi-saldo { background: linear-gradient(135deg, var(--pi-oscuro), var(--pi-primary)); color: #fff; border-radius: 18px; padding: 20px; }
.pi-saldo .pi-saldo-num { font-size: 34px; font-weight: 800; line-height: 1.1; }
.pi-saldo .pi-saldo-txt { opacity: .9; }

/* Servicio del conductor (tarjeta con aceptar / rechazar) */
.pi-serv { background: #fff; border: 1px solid var(--pi-borde); border-left: 6px solid #ffc107; border-radius: 12px; padding: 12px 14px; }
.pi-serv + .pi-serv { margin-top: 10px; }
.pi-serv.aceptado { border-left-color: #198754; }
.pi-serv.rechazado { border-left-color: #dc3545; }
.pi-serv .pi-serv-total { font-size: 20px; font-weight: 700; color: var(--pi-oscuro); white-space: nowrap; }
/* Pagos · pago de varios */
.pi-lote { border: 2px solid #198754; }
.pi-lote-marca { width: 1.4em; height: 1.4em; vertical-align: -.3em; }
/* Pestañas del conductor: siempre en una sola fila, aun en celulares de 360 px */
.pi-pestanas .nav-item { flex: 1 1 0; min-width: 0; }
.pi-pestanas .nav-link { display: flex; flex-direction: column; align-items: center; padding: .4rem .25rem; line-height: 1.15; background: #fff; border: 1px solid var(--pi-borde); margin: 0 3px; }
.pi-pestanas .nav-link.active { border-color: transparent; }
.pi-pestanas .pi-pest-n { font-size: 1.25rem; font-weight: 700; }
.pi-pestanas .pi-pest-t { font-size: .8rem; white-space: nowrap; }
/* Desprendible en celular: encabezado apilado y lista en vez de tabla */
.pi-desp .num { white-space: nowrap; }
.pi-desp-lista { margin-bottom: 12px; }
.pi-desp-item { border-bottom: 1px solid var(--pi-borde); padding: 8px 0; font-size: 14px; }
.pi-desp-item .pi-serv-meta { font-size: 12px; color: #616e7c; }
@media (max-width: 575.98px) {
  .pi-desp { padding: 14px; }
  .pi-desp .pi-desp-enc { flex-direction: column; }
  .pi-desp .pi-desp-enc .text-end { text-align: left !important; }
}
.pi-serv .pi-serv-meta { font-size: 13px; color: #616e7c; }

/* Tablas estilo Excel (encabezado gris, TOTAL en negrita) */
.pi-tabla { background: #fff; font-size: 14px; }
.pi-tabla thead th { background: #D9D9D9; color: #000; font-weight: 700; white-space: nowrap; }
.pi-tabla tfoot td, .pi-tabla tr.pi-total td { font-weight: 700; background: #f2f2f2; }
.pi-tabla td.num, .pi-tabla th.num { text-align: right; white-space: nowrap; }

/* Controles del cuadre */
.pi-control { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--pi-borde); }
.pi-control:last-child { border-bottom: 0; }
.pi-control .pi-check { font-size: 28px; line-height: 1; }
.pi-control.ok .pi-check { color: #00B050; }
.pi-control.mal .pi-check { color: #FF0000; }
.pi-franja { border-radius: 14px; padding: 14px 16px; font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.pi-franja.ok { background: #00B050; color: #fff; }
.pi-franja.mal { background: #FF0000; color: #fff; }

/* Gráficas */
.pi-graf { position: relative; height: 280px; }
.pi-graf-titulo { text-align: center; font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-weight: 700; color: #1F3864; text-transform: uppercase; margin-bottom: 2px; }
.pi-graf-sub { text-align: center; font-size: 13px; color: #616e7c; margin-bottom: 8px; }

/* Historial (trazabilidad) */
.pi-historial { list-style: none; padding-left: 0; margin: 0; }
.pi-historial li { padding: 8px 0 8px 18px; border-left: 2px solid var(--pi-borde); position: relative; font-size: 14px; }
.pi-historial li::before { content: ''; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--pi-primary); }

/* Acceso */
.pi-acceso { max-width: 420px; margin: 0 auto; padding-top: 8vh; }
.pi-acceso .pi-logo-img { width: 100%; max-width: 320px; height: auto; margin-bottom: 8px; mix-blend-mode: multiply; } /* el blanco del logo se funde con el fondo */
/* Logo del cliente: fondo blanco propio ⇒ en la barra oscura va en una pastilla blanca */
.pi-topbar .pi-marca { background: #fff; border-radius: 8px; padding: 3px 8px; line-height: 0; }
.pi-topbar .pi-marca img { height: 26px; width: auto; }
.pi-desp .pi-desp-logo { height: 46px; width: auto; display: block; margin-bottom: 6px; }
.pi-acceso .pi-logo {
  width: 68px; height: 68px; border-radius: 18px; background: var(--pi-oscuro); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 12px;
}
.pi-vacio { text-align: center; padding: 48px 16px; color: #52606d; }
.pi-vacio i { font-size: 48px; color: var(--pi-primary); display: block; margin-bottom: 12px; }

/* Desprendible (se imprime / guarda como PDF desde el navegador) */
.pi-desp { background: #fff; max-width: 900px; margin: 0 auto; padding: 24px; border: 1px solid var(--pi-borde); border-radius: 12px; position: relative; }
.pi-desp .pi-desp-enc { display: flex; justify-content: space-between; gap: 12px; border-bottom: 3px solid var(--pi-primary); padding-bottom: 10px; margin-bottom: 12px; }
.pi-desp h1 { font-size: 18px; font-weight: 800; color: var(--pi-oscuro); margin: 0; }
.pi-desp .pi-sello { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-size: 72px; font-weight: 900; opacity: .12; pointer-events: none; }
.pi-desp table { font-size: 12px; }
@media print {
  @page { size: letter; margin: 12mm; }
  body { background: #fff; }
  .pi-topbar, .pi-bottomnav, .no-print, .alert { display: none !important; }
  .pi-main { padding: 0 !important; max-width: none; }
  .pi-desp { border: 0; padding: 0; }
}

/* Despacho (prototipo): mapa y listas */
.pi-mapa-caja { overflow: hidden; }
.pi-mapa { height: 55vh; min-height: 320px; }
@media (min-width: 992px) { .pi-mapa-caja { position: sticky; top: 76px; } .pi-mapa { height: calc(100vh - 230px); } }
.pi-mapa-ley { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; border-top: 1px solid var(--pi-borde); }
.pi-pin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 3px; }
.pi-pin-pend { background: #C78F17; } .pi-pin-curso { background: #2E75B6; } .pi-pin-libre { background: #0F6E56; }
.pi-pin-ocup { background: #1F3864; } .pi-pin-zona { background: #7B4FA0; opacity: .5; }
.pi-marca-mapa { background: none; border: 0; }
.pi-mm { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff;
  font: 700 12px/1 system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pi-mm.orden { border-radius: 6px; width: 22px; height: 22px; }
.pi-sugerido { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px dashed var(--pi-borde); font-size: 14px; }
.pi-orden-mini { background: #f4f7fb; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.pi-pareja .pi-serv-meta, .pi-orden-mini .pi-serv-meta, .pi-sugerido .pi-serv-meta { font-size: 12.5px; color: #616e7c; }

/* Mi turno (conductor) */
.pi-turno-orden { border-left: 6px solid #2E75B6; }
.pi-turno-orden .pi-ruta { font-size: 15px; }
.pi-turno-orden .pi-ruta i { color: #616e7c; }
.pi-btn-xl { padding: 14px; font-size: 1.1rem; font-weight: 600; }

/* Cargar expediente en pasos: ① datos del servicio ② quién lo hizo ③ resumen */
.pi-paso h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.pi-paso h2 small { font-size: .78rem; font-weight: 400; color: #616e7c; text-transform: none; }
.pi-paso-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--pi-primary); color: #fff; font-size: .95rem; }
.pi-sub { font-weight: 700; color: var(--pi-oscuro); margin: 4px 0 6px; }
.pi-switch { font-size: 1.05rem; }
.pi-switch .form-check-input { width: 2.6em; height: 1.35em; cursor: pointer; }
.pi-resumen { border: 2px solid var(--pi-primary); }
.pi-switch .form-check-label { padding-left: 6px; }
@media (max-width: 575.98px) {   /* valor · bono · se le paga caben en 360 px */
  .pi-linea .pi-valor, .pi-linea .pi-bono, .pi-linea .pi-total { font-size: .95rem; padding-left: .45rem; padding-right: .3rem; }
}

/* Despacho y Mi turno: confirmación, pasar, fotos, WhatsApp (22-oct) */
.pi-kpi.mal { border-color: #f1aeb5; background: #fdf2f3; }
.pi-confirma { font-size: 13px; font-weight: 600; margin-top: 4px; }
.pi-confirma.espera { color: #8a6100; }
.pi-confirma.mal { color: #b02a37; }
.pi-confirma.bien { color: #0f6e56; }
.pi-devuelta { border-left: 5px solid #dc3545; }
.pi-caja { background: #fff; border: 1px solid var(--pi-borde); border-radius: 10px; padding: 10px; }
.pi-opcion { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--pi-borde); font-size: 1rem; cursor: pointer; }
.pi-opcion input { width: 1.25em; height: 1.25em; }
.pi-pregunta { font-weight: 700; color: var(--pi-oscuro); }
.pi-wa { --bs-btn-color: #fff; --bs-btn-bg: #1f9e58; --bs-btn-border-color: #1f9e58; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #178249; --bs-btn-hover-border-color: #178249; }
.pi-wa-sin { font-weight: 400; opacity: .85; font-size: .85em; }
.pi-fotos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pi-fotos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--pi-borde); }
.pi-foto-btn { margin: 0; }
.pi-foto-t { position: relative; display: inline-block; }
.pi-foto-t span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; text-align: center; border-radius: 0 0 8px 8px; padding: 1px 0; }
.pi-guiadas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pi-guiada { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; border: 2px dashed var(--pi-borde); border-radius: 12px; padding: 8px; text-align: center; font-weight: 600; cursor: pointer; background: #fff; }
.pi-guiada i { font-size: 1.6rem; }
.pi-guiada.lista { border-style: solid; border-color: #0f6e56; color: #0f6e56; }
.pi-guiada img { width: 100%; max-height: 90px; object-fit: cover; border-radius: 8px; }
.pi-hist-orden summary { cursor: pointer; }
.pi-de-despacho { border-left: 5px solid var(--pi-primary); }

/* Tarifas */
.pi-tarifa { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--pi-borde); }
.pi-tarifa:last-child { border-bottom: 0; }
.pi-tarifa-nom { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }
.pi-tarifa-val { width: 118px; flex: none; text-align: right; }
.pi-tarifa.inactiva .pi-tarifa-nom { color: #9aa5b1; text-decoration: line-through; }
.pi-barra-guardar { position: sticky; bottom: calc(var(--pi-bottomnav-alto) + 8px + env(safe-area-inset-bottom)); margin-top: 12px; z-index: 5; }
@media (min-width: 992px) { .pi-barra-guardar { bottom: 12px; } }
.pi-guiada-espera { cursor: default; color: #8a8f98; background: #f6f7f9; }
.pi-sugerencias { position: absolute; top: 100%; left: 0; right: 0; z-index: 1060; max-height: 280px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.pi-sugerencias .list-group-item { padding: 10px 12px; font-size: .95rem; }
.pi-sel-servicio { max-width: 45%; }

/* «Entendí» de las direcciones (Cargar expediente) */
.pi-dir { margin-top: 6px; }
.pi-dir-entendi { color: var(--bs-body-color); }
.pi-dir-avisos .mal { color: #B42318; font-weight: 600; }
.pi-dir-avisos .ojo { color: #8A5A00; }
.pi-dir-mapa { height: 180px; border-radius: 8px; border: 1px solid var(--pi-borde); margin-top: 6px; }
.pi-dir-pin { margin-top: 2px; }