/* Portal de comercios — layout propio. Los componentes comunes estan en shared/pidomi-brand.css */

/* ---- Login ---- */
.login-wrap {
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 18px calc(40px + env(safe-area-inset-bottom));
}
.login-card {
  width: min(100%, 420px);
  margin-top: 6vh;
}
.login-head { text-align: center; margin-bottom: 22px; }
.login-head h1 { margin: 0 0 6px; font-size: 22px; }
.login-head p { margin: 0; color: var(--pidomi-muted); font-size: 14px; }
.login-forgot { text-align: center; margin: 16px 2px 0; font-size: 13px; color: var(--pidomi-muted); }
.form-error {
  color: var(--bad);
  font-size: 14px;
  text-align: center;
  margin: 0 0 12px;
  min-height: 1em;
}

/* ---- App shell ---- */
.app-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px calc(80px + env(safe-area-inset-bottom)); /* deja espacio para la tabbar */
}
.view-title { margin: 4px 2px 14px; font-size: 20px; font-weight: 800; }

/* ---- Fila de pedido (lista) ---- */
.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.order-row .o-main { min-width: 0; }
.order-row .o-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--pidomi-muted); }
.order-row .o-customer { font-weight: 700; font-size: 15px; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-row .o-sub { font-size: 12px; color: var(--pidomi-muted); }
.order-row .o-addr { font-size: 12px; color: var(--pidomi-muted); margin: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Aviso "el aliado sigue vivo": tomamos el pedido con un rider propio, pero el 3PL ya tenía mensajero
   asignado y rechazó nuestra cancelación → sólo un humano puede pararlo desde su chat. Franja propia a
   lo ancho de la tarjeta, NO la columna de estado: no describe la entrega (esa va con nuestro rider),
   es una TAREA pendiente — y compartiendo sitio con el badge de estado se leería como que el pedido
   está mal. Sólo aparece si el cancel FALLÓ; el confirmado por la API del aliado no pinta nada. */
.o-carrier-warn { margin-top: 8px; padding: 6px 10px; border-radius: 8px;
  background: #fdecea; color: #c0392b; border: 1px solid #f5c6c2;
  font-size: 12px; font-weight: 700; line-height: 1.5;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* "Cancelar de todos modos": la decisión es del comercio (el aliado ya asignó mensajero y rechazó
   nuestra cancelación). Botón grande y con su propio fondo — el portal lo usa gente que no es de
   ordenadores y esto se pulsa con prisa, de pie y con el pedido en la mano. */
.o-carrier-warn .carrier-force { flex: 0 0 auto; padding: 8px 12px; border-radius: 8px;
  background: #fff; color: #c0392b; border: 1px solid #e2a49e; font-size: 13px; font-weight: 800;
  min-height: 40px; }
/* insignia de canal de origen (web / bots): pedidos externos, para reconocerlos de un vistazo */
.chan-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.6; vertical-align: middle;
  background: #fff2df; color: var(--pidomi-orange, #FF9F1C); border: 1px solid #ffe0b8; white-space: nowrap; }
.kv .v .chan-chip { margin-left: 0; }
.order-row .o-right { text-align: right; flex: 0 0 auto; }
.order-row .o-amount { font-weight: 800; font-size: 15px; margin-top: 6px; }
.order-row .o-fee { font-size: 12px; color: var(--pidomi-muted); margin-top: 2px; white-space: nowrap; }

/* ---- Detalle ---- */
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--pidomi-line); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--pidomi-muted); flex: 0 0 auto; }
.kv .v { text-align: right; font-weight: 600; }
.detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.detail-head .badge { font-size: 13px; }

/* ---- Billetera ---- */
.balance-card { background: var(--pidomi-dark); color: #fff; }
.balance-card .b-label { font-size: 13px; color: var(--pidomi-orange-soft); }
.balance-card .b-value { font-size: 34px; font-weight: 800; margin: 6px 0 2px; }
.balance-card .b-sub { font-size: 12px; color: rgba(255,255,255,.7); }
.txn-row .t-desc { font-weight: 600; font-size: 14px; }
.txn-row .t-time { font-size: 12px; color: var(--pidomi-muted); }
.txn-row .t-amt { font-weight: 800; font-size: 15px; text-align: right; flex: 0 0 auto; }
.txn-row .t-amt.credit { color: var(--ok); }
.txn-row .t-amt.debit { color: var(--bad); }
.txn-row .t-amt.neutral { color: var(--pidomi-muted); }

/* Liquidación por pedido: el resumen usa .list-row SIN .txn-row, así que hasta ahora sus
   importes salían todos del mismo color aunque el código pidiera credit/debit. Verde = me
   entró, rojo = me salió, gris = se movió dentro de casa (el pago a mi propio repartidor,
   que no es un cobro de la plataforma). */
#d-settlement .list-row .t-amt { font-weight: 700; text-align: right; flex: 0 0 auto; }
#d-settlement .list-row .t-amt.credit { color: var(--ok); }
#d-settlement .list-row .t-amt.debit { color: var(--bad); }
#d-settlement .list-row .t-amt.neutral { color: var(--pidomi-muted); }

/* ---- Nuevo pedido: control segmentado + checkbox ---- */
.seg-label { display: block; font-size: 13px; color: var(--pidomi-muted); margin-bottom: 6px; }
.segmented {
  display: flex;
  gap: 6px;
  background: var(--pidomi-cream);
  border: 1px solid var(--pidomi-line);
  border-radius: 12px;
  padding: 4px;
}
.segmented .seg {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--pidomi-muted);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 6px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}
.segmented .seg.active { background: var(--pidomi-dark); color: #fff; }
.check-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; accent-color: var(--pidomi-orange); }

/* ---- Confirmar cobro ---- */
.cp-head { font-weight: 800; font-size: 16px; }

/* ---- Invitar repartidor (descarga App) ---- */
.invite-row { display: flex; gap: 8px; align-items: stretch; }
.invite-row input {
  flex: 1; min-width: 0; padding: 11px 12px;
  border: 1px solid var(--pidomi-line); border-radius: 10px;
  font-size: 12px; background: #fff; color: var(--pidomi-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.invite-row button { flex: 0 0 auto; padding: 0 16px; }

/* ---- Flota / repartidores ---- */
.drivers-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 2px 14px; }
.fleet-map {
  height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  background: #e7ddd4;
  z-index: 0; /* contiene los panes de Leaflet bajo la tabbar/topbar */
}
.fleet-map.fleet-map-off {
  display: flex; align-items: center; justify-content: center;
  height: 90px; color: var(--pidomi-muted); font-size: 13px; text-align: center; padding: 0 16px;
}
.fleet-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--pidomi-muted);
  margin: 0 2px 14px;
}
.fleet-legend span { display: inline-flex; align-items: center; gap: 5px; }
.fleet-updated { margin-left: auto; }

/* punto de estado (leyenda + lista) */
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.dot.idle { background: var(--ok); }
.dot.busy { background: var(--pidomi-orange); }
.dot.paused { background: #2f6fed; } /* "en tarea": azul, claramente distinto del naranja "ocupado" */
.dot.offline { background: #b9c4c7; }
/* Sin app: no está "apagado", es que no hay teléfono detrás. Se distingue del gris de offline
   porque la acción es otra — a éste hay que llamarlo por voz. */
.dot.noapp { background: #8a5cf0; }

/* marcador del mapa (divIcon) */
.fleet-mk {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  background: #fff;
  border-radius: 50%;
  border: 3px solid #b9c4c7;
  box-shadow: 0 2px 6px rgba(14,58,71,.35);
}
.fleet-mk.idle { border-color: var(--ok); }
.fleet-mk.busy { border-color: var(--pidomi-orange); }
.fleet-mk.paused { border-color: #2f6fed; }
.fleet-mk.offline { opacity: .65; }
.fleet-mk.sel { transform: scale(1.18); border-width: 4px; z-index: 1000; }

/* fila de repartidor */
.driver-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.driver-row.sel { outline: 2px solid var(--pidomi-orange); }
.driver-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.driver-main .dot { margin-top: 6px; }
.driver-id { min-width: 0; }
.driver-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.driver-sub { font-size: 12px; color: var(--pidomi-muted); margin-top: 2px; }
.driver-job { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--pidomi-orange); text-decoration: none; }
.driver-job.muted { color: var(--pidomi-muted); font-weight: 600; }
.driver-right { flex: 0 0 auto; text-align: right; }
.status-text { font-size: 12px; font-weight: 700; }
.status-text.idle { color: var(--ok); }
.status-text.busy { color: var(--pidomi-orange); }
.status-text.paused { color: #2f6fed; }
.status-text.offline { color: var(--pidomi-muted); }
.status-text.noapp { color: #8a5cf0; font-weight: 700; }
/* pedido colgado: sigue "en entrega" pero lleva horas sin cerrarse (y bloquea al repartidor) → rojo */
.status-text.busy.stuck { color: var(--bad); }

/* fila de repartidor en 2 LÍNEAS: (1) estado+nombre+etiqueta · (2) acciones */
.driver-row2 { display: block; padding: 14px 16px; }
.driver-row2.sel { outline: 2px solid var(--pidomi-orange); }
.dr-line1 { display: flex; align-items: center; gap: 10px; }
.dr-line1 .dot { margin-top: 0; flex: 0 0 auto; }
/* identidad en UNA sola línea: nombre · vehículo · placa (elipsis si no cabe) */
.dr-ident { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dr-ident .driver-name { font-weight: 700; font-size: 14px; }
.dr-ident .driver-sub { font-size: 12px; color: var(--pidomi-muted); margin: 0; }
.dr-line1 .status-text { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.dr-line2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f2; }
.pool-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: #777; cursor: pointer; }
.pool-toggle input { width: auto; margin: 0; }

/* control "en tarea" (pausa de asignación) por rider */
.pause-box { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.pause-btn { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid #cfd8dc; background: #fff; color: #556; width: auto; }
.pause-btn.resume { border-color: #2f6fed; color: #2f6fed; background: #eef4ff; }
.pause-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pause-chips[hidden] { display: none; } /* el atributo hidden DEBE ganar a display:inline-flex (si no, los chips salen siempre) */
.pause-chip { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid #2f6fed; background: #eef4ff; color: #2f6fed; width: auto; }
.pause-chip:hover { background: #2f6fed; color: #fff; }
.pause-chip.perm { border-color: #c62828; background: #fdeaea; color: #c62828; } /* permanente = rojo, acción fuerte */
.pause-chip.perm:hover { background: #c62828; color: #fff; }

/* ---- Recoger / escáner QR ---- */
.scan-idle { text-align: center; }
.scan-bigico { font-size: 46px; margin-bottom: 6px; }
.scan-cam {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 60vh;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.scan-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 62%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}
.scan-cam-hint {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.scan-done { text-align: center; color: var(--ok); font-weight: 700; margin: 6px 0; }

/* ---- Foto de la mercancía (prueba de recogida) ---- */
.photo-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 132px;
  padding: 16px;
  margin-bottom: 12px;
  border: 2px dashed var(--pidomi-line);
  border-radius: 14px;
  background: var(--pidomi-cream);
  color: var(--pidomi-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.photo-pick:active { transform: scale(0.99); }
.photo-pick input[type="file"] { display: none; }
.photo-pick-ico { font-size: 38px; line-height: 1; }
.photo-pick-thumb { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; }
/* imagen de prueba (resultado / detalle / [cliente]) */
.proof-img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
}

/* ---- enlace de acento (registro / login toggle) ---- */
.link-accent { color: var(--pidomi-orange); font-weight: 700; text-decoration: none; }

/* ===== Ajustes (#settings) + componente geo (geo.js) ===== */
/* Barra superior con menu hamburguesa: conmuta las 5 secciones tematicas (Mi tienda / Billetera /
   Equipo / Marketing / Cuenta). Pensado para movil y usuarios no tecnicos: un toque abre la lista. */
.set-topbar { position: relative; margin: 2px 2px 16px; }
.set-burger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--pidomi-line, #e7ded3); border-radius: 14px;
  background: #fff; cursor: pointer; text-align: left;
}
.set-burger-ico { font-size: 20px; line-height: 1; }
.set-burger-label { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 800; color: var(--pidomi-text); }
.set-burger-caret { flex: 0 0 auto; color: var(--pidomi-muted, #6b7785); font-size: 12px; }
.set-cc { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--pidomi-muted, #6b7785); white-space: nowrap; letter-spacing: .02em; }
.set-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: #fff; border: 1px solid var(--pidomi-line, #e7ded3); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(14, 58, 71, 0.16); overflow: hidden; padding: 4px;
}
.set-menu-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 13px 12px; border-radius: 10px; font-size: 16px; font-weight: 600;
  color: var(--pidomi-text); cursor: pointer;
}
.set-menu-item:hover { background: var(--pidomi-cream, #f7f1e8); }
.set-menu-item.active { background: var(--pidomi-dark); color: #fff; }
.set-section { margin-bottom: 16px; }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.set-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, #e7ded3); border-radius: 12px; background: #fff; }
.set-row-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.set-row-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.set-row-main strong { font-size: 14px; }
.set-row-main .muted { font-size: 12px; }
.muted { color: var(--pidomi-muted, #8a8f98); }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn-ghost.danger { color: #c0392b; }

/* geo.js: input de direccion + mini-mapa */
.geo-input { width: 100%; box-sizing: border-box; }
.geo-map { width: 100%; height: 0; margin-top: 8px; border-radius: 12px; overflow: hidden; transition: height .15s ease; background: #eef1f0; }
.geo-map.ready { height: 180px; }

/* ===== Detalle: ETA en vivo + fotos (recogida/entrega) ===== */
.eta-card { background: linear-gradient(180deg,#fff,#f6fbff); border-color: #cfe6f5; }
.eta-big { font-size: 16px; font-weight: 800; color: var(--pidomi-tinta, #0E3A47); }
.proofs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.proofs-grid figure { margin: 0; }
.proof-fig img { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; display: block; }
.proof-fig figcaption { margin-top: 6px; font-size: 12px; color: var(--pidomi-muted, #8a8f98); text-align: center; }
@media (max-width: 360px) { .proofs-grid { grid-template-columns: 1fr; } }

/* ===== Historial de direcciones por teléfono (#new) ===== */
.addr-chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.addr-chips:empty { display: none; }
.addr-chips-label { font-size: 12px; color: var(--pidomi-muted, #8a8f98); }
.addr-chip { text-align: left; padding: 8px 10px; border: 1px solid var(--line, #e7ded3); border-radius: 10px; background: #fff; font-size: 13px; cursor: pointer; width: 100%; }
.addr-chip:hover { border-color: var(--pidomi-orange, #FF9F1C); background: #fff7ee; }

/* ===== Flota: marcador = CAJA CON PLACA (no emoji) + popup ===== */
.fleet-plate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 24px; padding: 0 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .5px; white-space: nowrap;
  background: #fff; color: var(--pidomi-tinta, #0E3A47);
  border: 2px solid #b9c4c7; border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.fleet-plate.idle { border-color: var(--ok, #2e9e5b); }
.fleet-plate.busy { border-color: var(--pidomi-orange, #FF9F1C); background: #fff7ee; }
.fleet-plate.paused { border-color: #2f6fed; background: #eef4ff; }
.fleet-plate.offline { opacity: .6; }
.fleet-plate.sel { transform: scale(1.15); border-width: 3px; z-index: 1000; }
.dpop-name { font-weight: 800; font-size: 14px; }
.dpop-sub { font-size: 12px; margin-top: 2px; }
.dpop-job { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--pidomi-orange, #FF9F1C); text-decoration: none; }

/* ===== Caja / conciliación COD (dentro de #orders, chip "Caja") ===== */
.cod-sum { text-align: center; background: linear-gradient(180deg,#fff,#fff7ee); border-color: #f3d9b0; }
.cod-sum-big { font-size: 26px; font-weight: 800; color: var(--pidomi-tinta, #0E3A47); }
.cod-rider-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cod-rider-total { font-size: 18px; font-weight: 800; color: var(--pidomi-orange, #FF9F1C); }
.cod-orders { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.cod-order { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line,#e7ded3); border-radius: 8px; }
.cod-order a { flex: 1 1 auto; text-decoration: none; color: var(--pidomi-tinta,#0E3A47); font-weight: 700; }
.cod-order span { font-weight: 700; }
.cod-settle-all { width: 100%; margin-top: 4px; }

/* ===== Productos (商品 / tienda) ===== */
.prod-avail { font-size: 12px; color: var(--pidomi-muted,#8a8f98); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }

/* ---- tarjetas de rol (agregar empleado) ---- */
.role-cards { display: grid; gap: 8px; margin-top: 6px; }
.role-card {
  text-align: left; border: 1.5px solid var(--pidomi-line, #d8dee3); background: #fff;
  border-radius: 12px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.role-card strong { font-size: 15px; color: var(--pidomi-dark, #0E3A47); }
.role-card span { font-size: 12px; color: var(--pidomi-muted, #6b7785); }
.role-card.sel { border-color: var(--pidomi-orange, #FF7A33); background: #fff6ef; box-shadow: 0 0 0 2px rgba(255,122,51,.15); }

/* ---- inventario / entrada de mercancía ---- */
.inv-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--pidomi-line, #e3e8ec); flex-wrap: wrap; }
.inv-row .inv-main { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; }
.inv-row .inv-main strong { color: var(--pidomi-dark, #0E3A47); }
.inv-stk { display: flex; align-items: center; gap: 6px; }
.stk-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--pidomi-line, #d8dee3); background: #fff; font-size: 20px; font-weight: 700; cursor: pointer; color: var(--pidomi-dark, #0E3A47); }
.stk-num { width: 62px; text-align: center; padding: 9px 4px; border-radius: 10px; border: 1px solid var(--pidomi-line, #d8dee3); font-size: 17px; font-weight: 700; }
.inv-pol { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pidomi-muted, #6b7785); flex: 1 1 100%; }
.inv-pol select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--pidomi-line, #d8dee3); }
.pur-bar { position: sticky; bottom: 0; padding: 10px 0 calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #fff 70%, transparent); }

/* ---- editor de permisos (capa avanzada) ---- */
.perm-group { margin: 12px 0 4px; }
.perm-group-h { font-size: 12px; font-weight: 700; color: var(--pidomi-muted, #6b7785); text-transform: uppercase; letter-spacing: .03em; padding: 6px 0 2px; border-bottom: 1px solid var(--pidomi-line, #e3e8ec); }
.perm-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 15px; color: var(--pidomi-dark, #0E3A47); cursor: pointer; }
.perm-row input { width: 20px; height: 20px; }
.perm-hr { color: #c0392b; font-size: 12px; }

/* ---- selector de canal (promociones) ---- */
.seg-types { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.seg-type { flex: 1 1 auto; padding: 11px 10px; border-radius: 10px; cursor: pointer; border: 1px solid var(--pidomi-line, #d8dee3); background: #fff; color: var(--pidomi-dark, #0E3A47); font-size: 14px; font-weight: 600; }
.seg-type.active { background: var(--pidomi-orange, #FF7A33); color: #fff; border-color: var(--pidomi-orange, #FF7A33); }
.seg-type.disabled, .seg-type:disabled { opacity: .5; cursor: not-allowed; }

/* ---- POS (开单) — responsive: rejilla + panel de pedido ---- */
.pos-wrap { display: flex; gap: 14px; align-items: flex-start; }
.pos-main { flex: 1 1 auto; min-width: 0; }
.pos-search { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--pidomi-line, #d8dee3); font-size: 15px; margin-bottom: 10px; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.pos-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 78px; padding: 10px; border-radius: 12px; border: 1px solid var(--pidomi-line, #d8dee3); background: #fff; cursor: pointer; text-align: left; }
.pos-tile:active { background: #fff6ef; }
.pos-tile .pt-name { font-size: 13px; font-weight: 600; color: var(--pidomi-dark, #0E3A47); line-height: 1.2; }
.pos-tile .pt-price { font-size: 13px; font-weight: 700; color: var(--pidomi-orange, #FF7A33); }
.pos-cart { flex: 0 0 330px; position: sticky; top: 12px; background: #fff; border: 1px solid var(--pidomi-line, #e3e8ec); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); }
.pos-cart-h { margin: 0 0 8px; font-size: 16px; color: var(--pidomi-dark, #0E3A47); }
.pos-lines { max-height: 46vh; overflow: auto; }
.pos-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--pidomi-line, #eef1f3); }
.pos-line .pl-main { display: flex; flex-direction: column; min-width: 0; }
.pos-line .qty { display: flex; align-items: center; gap: 6px; }
.pos-line .qty button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--pidomi-line, #d8dee3); background: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.pos-total { margin: 10px 0; }
@media (max-width: 820px) {
  .pos-wrap { flex-direction: column; }
  .pos-cart { width: 100%; flex-basis: auto; position: sticky; bottom: 0; top: auto; z-index: 5; }
  .pos-lines { max-height: 30vh; }
}

/* ============================ selector multi-tienda (topbar) ============================
   La TIENDA es protagonista: atenuamos la marca "Pidomi" (mark pequeña, sin wordmark) y el
   nombre de la tienda es el elemento grande y clicable. El botón abre el menú de tiendas del
   dueño (cambiar / crear). Solo overrides del portal de comercios — no toca shared/. */
.topbar-left { position: relative; }              /* ancla del menú desplegable */
.brand-mark { height: 20px; opacity: 0.8; }        /* Pidomi atenuado */

.org-switch {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, 0.12); border: 0; border-radius: 999px;
  padding: 6px 12px; cursor: pointer; min-width: 0; max-width: 60vw;
}
.org-switch:active { background: rgba(255, 255, 255, 0.20); }
.org-switch .org-name {           /* gana en especificidad al .org-name de shared */
  font-size: 16px; font-weight: 800; color: #fff; max-width: 46vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-caret { color: rgba(255, 255, 255, 0.85); font-size: 11px; flex: 0 0 auto; }
.org-caret.hidden { display: none; }

.org-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  background: #fff; color: #1a1a1a; border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  padding: 6px; min-width: 220px; max-width: 84vw;
}
.org-menu.hidden { display: none; }
.org-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 8px; font-size: 15px; color: inherit;
}
.org-menu-item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-menu-item:hover { background: #f2f4f5; }
.org-menu-item.current { font-weight: 700; }
.org-menu-item .tick { color: var(--pidomi-orange); margin-left: auto; flex: 0 0 auto; }
.org-menu-sep { height: 1px; background: #eceef0; margin: 4px 2px; }
.org-menu-add { color: var(--pidomi-orange); font-weight: 700; }

/* checkbox de aceptación de términos (registro) */
.field-check { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; font-size: 13px; line-height: 1.4; }
.field-check input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; }

/* edición del logo del comercio (ajustes → tu tienda online) */
.logo-edit { display: flex; align-items: center; gap: 12px; }
.store-logo-preview { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; border: 1px solid #dfe4ea; background: #fff; }

/* ==== recorrido / reproducción de trayectoria (histórico de posiciones) ==== */
.hist-map { height: 360px; }
.hist-map.hidden { display: none; }
.hist-filters .field { margin-bottom: 10px; }
.hist-times { display: flex; gap: 10px; }
.hist-times .field { flex: 1; margin-bottom: 6px; }
.hist-controls { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; }
.hist-play { flex: 0 0 auto; width: 46px; height: 46px; min-width: 46px; border-radius: 50%; font-size: 18px; padding: 0; line-height: 1; }
.hist-scrub { flex: 1; min-width: 0; accent-color: var(--pidomi-orange); }
.hist-meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hist-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; min-width: 46px; text-align: right; }
.hist-speed { padding: 5px 6px; border-radius: 8px; border: 1px solid #dfe4ea; background: #fff; font-size: 13px; }
.hist-note { margin: 0 2px 12px; }
.hist-mover { font-size: 26px; line-height: 30px; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.hist-endpt, .hist-stop { font-size: 22px; line-height: 30px; text-align: center; }
.driver-hist { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--pidomi-orange); text-decoration: none; }

/* chips "días con recorrido" (punto verde) bajo el selector de fecha del recorrido */
.hist-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.hist-days:empty { margin: 0; }
.hist-days-label { width: 100%; font-size: 12px; color: var(--pidomi-muted, #7a8a8f); margin-bottom: 2px; }
.hist-day-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid #dfe4ea; background: #fff; font-size: 13px; font-weight: 600; color: var(--pidomi-ink, #0E3A47); cursor: pointer; }
.hist-day-chip.sel { border-color: var(--pidomi-orange); background: #fff7ee; }
.hist-day-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #2e9e5b); flex: 0 0 auto; }

/* Banner de avisos apagados (2026-07-18): una suscripción push caducada dejaba al comercio sin
   alertas y sin forma de enterarse. Va arriba del todo, sticky, imposible de no ver. */
.push-banner {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: #fff4e5; color: #7a4b00;
  border-bottom: 1px solid #f0c88a;
  font-size: 14px; font-weight: 600;
}
.push-banner span { flex: 1 1 auto; min-width: 0; }

/* Detalle desplegable de recordatorios de uso de la app (informe de repartidores) */
.re-hints-box { margin-top: 8px; border-top: 1px solid var(--pidomi-line); padding-top: 8px; }
.re-hint-row { padding: 8px 0; border-bottom: 1px dashed var(--pidomi-line); font-size: 13px; }
.re-hint-row:last-child { border-bottom: 0; }
.re-hint-top { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }