:root {
  --azul: #0d2c54;
  --azul-osc: #081c38;
  --gold: #F5B301;
  --fondo: #f2f4f8;
  --verde: #0a7d33;
  --rojo: #b3261e;
  --rojo-claro: #fbe4e2;
  --verde-claro: #eaf6ec;
  --azul-claro: #eef2fb;
  --gris: #666;
  --borde: #d9dde5;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Segoe UI", -apple-system, Roboto, Arial, sans-serif; background: var(--fondo); margin: 0; color: #222; font-size: 16px; }
body.con-nav { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
a { color: var(--azul); }

/* barra superior */
.top { background: var(--azul); color: white; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.top .marca { display: flex; align-items: center; gap: 9px; color: white; text-decoration: none; font-weight: 700; font-size: 18px; }
.top .logo { width: 32px; height: 32px; border-radius: 8px; }
.top .top-der { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.top .quien { opacity: .9; }
.top .salir { color: var(--gold); text-decoration: none; font-weight: 600; }

/* tabs admin */
.tabs { display: flex; gap: 2px; background: white; padding: 6px 10px 0; overflow-x: auto; border-bottom: 2px solid var(--azul); white-space: nowrap; }
.tabs a { padding: 8px 12px; text-decoration: none; color: var(--azul); border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; font-size: 14px; flex: none; }
.tabs a.activo { background: var(--fondo); border-color: #ccc; font-weight: bold; }

.contenido { padding: 14px; max-width: 1100px; margin: 0 auto; }
h1 { color: var(--azul); font-size: 22px; margin: 6px 0 12px; }
h2 { color: var(--azul); font-size: 16px; margin: 18px 0 8px; }
.nota { color: var(--gris); font-size: 13px; }
.centrado { text-align: center; }

/* menu inferior (celular) */
.nav-abajo { position: fixed; left: 0; right: 0; bottom: 0; background: white; border-top: 1px solid var(--borde); display: flex; justify-content: space-around; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); z-index: 50; }
.nav-abajo a { flex: 1; text-align: center; text-decoration: none; color: var(--gris); font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nav-abajo a span { font-size: 22px; line-height: 1; }
.nav-abajo a.activo { color: var(--azul); font-weight: 700; }
.nav-abajo a.principal span { background: var(--gold); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-top: -18px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* tarjetas */
.caja { border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: white; }
.caja-verde { background: var(--verde-claro); border-color: var(--verde); }
.caja-gold { background: #fff8e6; border-color: var(--gold); }
.caja-azul { background: var(--azul-claro); border-color: var(--azul); }
.caja-roja { background: var(--rojo-claro); border-color: var(--rojo); }
.caja-gris { background: #f0f0f0; border-color: var(--gris); border-style: dashed; }
.msg { padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; font-size: 14px; }
.msg.error { background: var(--rojo-claro); color: var(--rojo); }
.msg.ok { background: var(--verde-claro); color: var(--verde); }

/* formularios */
label { display: block; font-size: 13px; color: #444; margin-bottom: 3px; }
input[type=text], input[type=tel], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #bbb; border-radius: 8px; font-size: 16px; background: white; font-family: inherit;
}
textarea { min-height: 64px; }
.campo { margin-bottom: 12px; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 140px; }
.btn { display: inline-block; padding: 12px 18px; border-radius: 8px; border: none; background: var(--azul); color: white; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; font-family: inherit; }
.btn.ancho { width: 100%; display: block; }
.btn.gold { background: var(--gold); color: #222; }
.btn.verde { background: var(--verde); }
.btn.rojo { background: var(--rojo); }
.btn.gris { background: #e3e6ec; color: #333; }
.btn.chico { padding: 7px 12px; font-size: 14px; }
.btn:disabled { opacity: .55; cursor: default; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pass-wrap { position: relative; display: block; }
.pass-wrap input { padding-right: 44px; }
.pass-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 18px; cursor: pointer; }

/* tablas (admin) */
table { border-collapse: collapse; width: 100%; background: white; margin-bottom: 10px; font-size: 13px; }
th, td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; vertical-align: top; }
th { background: var(--azul); color: white; }
td.num, th.num { text-align: right; white-space: nowrap; }
.tabla-scroll { overflow-x: auto; }

/* etiquetas de estado */
.pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #e3e6ec; color: #333; white-space: nowrap; }
.pill.solicitado { background: #fff3cd; color: #7a5a00; }
.pill.aceptado, .pill.en_camino { background: var(--azul-claro); color: var(--azul); }
.pill.cargando, .pill.en_ruta { background: #e0f0ff; color: #004a8f; }
.pill.entregado { background: var(--verde-claro); color: var(--verde); }
.pill.cancelado { background: var(--rojo-claro); color: var(--rojo); }
.pill.verde { background: var(--verde-claro); color: var(--verde); }
.pill.rojo { background: var(--rojo-claro); color: var(--rojo); }
.pill.gold { background: #fff3cd; color: #7a5a00; }

/* grandes numeros */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: white; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; }
.kpi .v { font-size: 24px; font-weight: 700; color: var(--azul); }
.kpi .t { font-size: 12px; color: var(--gris); }
.precio-grande { font-size: 34px; font-weight: 800; color: var(--azul); }

/* mapa */
#mapa { width: 100%; height: 46vh; min-height: 260px; border-radius: 10px; border: 1px solid var(--borde); z-index: 1; }
#mapa.alto { height: 56vh; }
.sugerencias { position: absolute; left: 0; right: 0; top: 100%; background: white; border: 1px solid #bbb; border-radius: 0 0 8px 8px; z-index: 1000; max-height: 220px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.sugerencias div { padding: 9px 12px; font-size: 14px; border-bottom: 1px solid #eee; cursor: pointer; }
.sugerencias div:hover { background: var(--azul-claro); }
.buscador { position: relative; }
.chip { display: inline-block; padding: 9px 14px; border: 2px solid var(--borde); border-radius: 20px; background: white; cursor: pointer; font-size: 14px; }
.chip.sel { border-color: var(--azul); background: var(--azul-claro); font-weight: 700; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.paso { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--borde); font-size: 14px; }
.paso .num { background: var(--azul); color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.paso.hecho .num { background: var(--verde); }
.paso.futuro { opacity: .5; }
.estrellas { font-size: 34px; letter-spacing: 4px; cursor: pointer; user-select: none; }
.estrellas span { color: #ccc; }
.estrellas span.on { color: var(--gold); }
.switch { display: flex; align-items: center; justify-content: space-between; background: white; border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.switch .estado { font-weight: 700; }
.lista-fletes .caja { cursor: pointer; }
.linea-dir { font-size: 14px; margin: 4px 0; }
.linea-dir b { color: var(--azul); }
.hero { background: linear-gradient(160deg, var(--azul), #1b4f8f); color: white; border-radius: 14px; padding: 22px 18px; margin-bottom: 14px; }
.hero h1 { color: white; font-size: 26px; margin: 0 0 6px; }
.hero p { margin: 0 0 14px; opacity: .95; }
.instalar { font-size: 13px; color: var(--gris); margin-top: 10px; }
@media (min-width: 700px) {
  .contenido { padding: 20px 24px; }
  #mapa { height: 420px; }
}

/* ---- v2: app piloto, documentos, fotos, barra de avance ---- */
body.piloto .top { background: #0a5c2e; }
body.piloto .top .marca small { font-size: 11px; background: var(--gold); color: #222; padding: 2px 6px; border-radius: 6px; margin-left: 4px; vertical-align: middle; }
body.piloto .nav-abajo a.activo { color: #0a5c2e; }
body.piloto .hero { background: linear-gradient(160deg, #0a5c2e, #138a47); }
.barra { background: #e3e6ec; border-radius: 8px; height: 14px; overflow: hidden; margin: 6px 0; }
.barra > div { background: var(--verde); height: 100%; border-radius: 8px; transition: width .3s; }
.galeria { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.galeria a img, .galeria img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde); }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.avatar.grande { width: 84px; height: 84px; }
.doc { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--borde); }
.doc img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borde); flex: none; }
.doc .sin { width: 64px; height: 64px; border-radius: 6px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; }
.doc .cuerpo { flex: 1; min-width: 0; }
.doc input[type=file] { font-size: 13px; max-width: 100%; }
.mapa-chico { height: 280px; }
.oculto { display: none; }
.subir { border: 2px dashed var(--borde); border-radius: 10px; padding: 12px; text-align: center; background: white; }
.subir input[type=file] { margin: 6px 0; }
.compartir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.compartir input { flex: 1; min-width: 160px; font-size: 13px; padding: 8px; }
.eta { font-size: 18px; font-weight: 700; color: var(--verde); }