/* NODO Reparto — piel propia sobre metro-base / metro-tiles / metro-componentes */
html, body { background: var(--m-bg); }
.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; padding: 0 16px 96px; }
.cab { padding: 20px 0 8px; }
.cab .m-micro { display: block; margin-bottom: 2px; }
.cab h1 { font-size: var(--m-fs-title); font-weight: 300; text-transform: lowercase; letter-spacing: -.5px; margin: 0; }
.cab h1::after { content: ''; display: block; width: 48px; height: 4px; background: var(--m-accent); margin-top: 6px; }
.oculto { display: none !important; }
.sec { font-size: 22px; font-weight: 300; text-transform: lowercase; margin: 24px 0 8px; }
.sec::before { content: ''; display: inline-block; width: 6px; height: 22px; background: var(--m-accent); margin-right: 10px; vertical-align: -3px; }
.campo { margin: 12px 0; }
.campo label { display: block; font-size: var(--m-fs-micro); color: var(--m-muted); text-transform: lowercase; margin-bottom: 4px; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: 300 var(--m-fs-body) var(--m-font); background: transparent; color: var(--m-ink); border: 2px solid var(--m-line); border-radius: 0; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; border-color: var(--m-accent); background: var(--m-surface); }
.campo select option { background: var(--m-surface); color: var(--m-ink); }
.m-btn { text-transform: lowercase; }

/* Botón grande de turno */
.turno { display: block; width: 100%; min-height: 120px; margin: 16px 0 0; border: 0; padding: 16px; text-align: left; color: var(--m-accent-ink); background: var(--m-accent); font: 300 32px/1.1 var(--m-font); text-transform: lowercase; position: relative; transition: transform var(--m-dur) var(--m-ease); }
.turno:active { transform: scale(.97); }
.turno small { display: block; font-size: var(--m-fs-micro); opacity: .85; margin-top: 8px; font-weight: 400; }
.turno.activo { background: var(--m-ok); color: #fff; }
.turno .pulso { position: absolute; right: 16px; top: 16px; width: 14px; height: 14px; background: #fff; border-radius: 50%; animation: pulso 1.6s infinite; display: none; }
.turno.activo .pulso { display: block; }
@keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
.estado-gps { font-size: var(--m-fs-micro); color: var(--m-muted); margin: 8px 0 0; min-height: 18px; }
.estado-gps.mal { color: var(--m-danger); }

/* Pedidos */
.ped { background: var(--m-surface); padding: 14px 16px; margin-bottom: 8px; border-left: 6px solid var(--m-accent); }
.ped.ok { border-left-color: var(--m-ok); opacity: .7; }
.ped__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ped__cli { font-size: 20px; font-weight: 300; }
.ped__monto { font-size: 18px; white-space: nowrap; }
.ped__dir, .ped__nota { color: var(--m-muted); font-size: 14px; margin-top: 2px; }
.ped__acts { display: flex; gap: 8px; margin-top: 12px; }
.ped__acts .m-btn { flex: 1; min-height: 48px; padding: 8px; }
.vacio { color: var(--m-muted); padding: 24px 0; text-align: center; }
.link { color: var(--m-muted); background: none; border: 0; font: inherit; text-decoration: underline; padding: 12px 0; }

/* Admin */
.admin { max-width: 960px; }
#mapa { height: 55dvh; min-height: 320px; border: 2px solid var(--m-line); margin-top: 12px; background: var(--m-surface); z-index: 0; }
.rep { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--m-line); }
.rep__pt { width: 14px; height: 14px; flex: none; background: var(--m-muted); }
.rep__pt.vivo { background: var(--m-ok); } .rep__pt.viejo { background: var(--m-warn); }
.rep__info { flex: 1; min-width: 0; }
.rep__n { font-size: 18px; font-weight: 300; }
.rep__s { font-size: var(--m-fs-micro); color: var(--m-muted); }
.rep button { min-height: 44px; }
.pin { width: 30px; height: 30px; background: var(--m-accent); color: #fff; font: 600 14px/30px var(--m-font); text-align: center; border: 2px solid #fff; transform: translate(-2px,-2px); }
.pin.viejo { background: #888; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.chip { border: 2px solid var(--m-line); background: transparent; color: var(--m-ink); padding: 6px 12px; min-height: 40px; font: 300 14px var(--m-font); border-radius: 0; }
.chip.sel { background: var(--m-accent); border-color: var(--m-accent); color: var(--m-accent-ink); }

a.m-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--m-ink); }
a.m-btn:active { background: var(--m-accent); color: var(--m-accent-ink); }

/* ===== Panel: mapa de seguimiento ===== */
.admin { max-width: 1100px; }
.mapa-wrap { position: relative; margin: 0 -16px; }
#mapa { height: calc(100dvh - 210px); min-height: 380px; border: 0; margin: 0; }
.trail { fill: none !important; }
.leaflet-container { font-family: var(--m-font); }
.leaflet-marker-icon.mov { transition: transform 1.2s linear; }

/* Pin del repartidor: bloque cuadrado con inicial + etiqueta con nombre y "hace X" */
.pinrep { position: absolute; transform: translate(-19px, -19px); display: flex; align-items: center; gap: 0; white-space: nowrap; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.pinrep b { border-radius: 50%; width: 38px; height: 38px; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; flex: none; }
.pinrep span { border-radius: 0 19px 19px 0; background: #fff; color: #1e1e1e; font: 600 12px/38px var(--m-font); padding: 0 10px; height: 38px; margin-left: -3px; border: 3px solid #fff; border-left: 0; }
.pinrep.viejo b { opacity: .85; }
.pinrep.viejo span { color: #666; font-weight: 400; }
.flecha { width: 16px; height: 16px; }
.flecha::before { content: ''; display: block; width: 0; height: 0; margin: 0 auto; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 14px solid #fff; filter: drop-shadow(0 0 2px var(--c)); }
.inicio { position: absolute; transform: translate(-6px, -34px); background: #2a8a3a; color: #fff; font: 600 11px/22px var(--m-font); padding: 0 8px; white-space: nowrap; }
.inicio.fin { background: #c4262e; }
.punto { position: absolute; transform: translate(-8px, -8px); width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 5px solid var(--c, #1e1e1e); box-sizing: border-box; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.punto.fin { --c: #c4262e; }
.dest { position: absolute; transform: translate(-15px, -15px); display: flex; align-items: center; white-space: nowrap; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.dest b { width: 30px; height: 30px; background: var(--m-accent); color: #fff; font: 700 15px/30px var(--m-font); text-align: center; border: 2px solid #fff; flex: none; }
.dest span { background: #fff; color: #1e1e1e; font: 12px/30px var(--m-font); padding: 0 8px; height: 30px; }
.dest.ok b { background: #2a8a3a; }
.dest.ok span { opacity: .75; }

/* Hoja inferior (celular) / columna lateral (PC) */
#hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; background: var(--m-bg); border-top: 4px solid var(--m-accent);
  max-height: 44dvh; overflow-y: auto; padding: 0 16px 16px; transition: max-height var(--m-dur) var(--m-ease); }
#hoja.min { max-height: 52px; overflow: hidden; }
.asa { display: block; width: 100%; height: 28px; border: 0; background: none; position: sticky; top: 0; z-index: 2; cursor: pointer; }
.asa::before { content: ''; display: block; width: 44px; height: 4px; background: var(--m-muted); margin: 12px auto 0; opacity: .6; }
.hoja-t { font-size: 20px; font-weight: 300; text-transform: lowercase; margin: 4px 0 8px; }
.hoja-t small { font-size: var(--m-fs-micro); color: var(--m-muted); margin-left: 8px; }
.hoja-info { margin: 0 0 8px; font-size: 13px; }
.tarj, .ped2 { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--m-line); color: var(--m-ink); text-align: left; font: inherit; cursor: pointer; min-height: 56px; }
.tarj:active, .ped2:active { background: var(--m-surface); }
.av { width: 40px; height: 40px; flex: none; color: #fff; font: 600 18px/40px var(--m-font); text-align: center; }
.tarj__i { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tarj__n { font-size: 17px; font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarj__s { font-size: 12px; color: var(--m-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarj__c { font-size: 12px; color: var(--m-muted); white-space: nowrap; }
.tarj__c b { font-size: 18px; font-weight: 300; color: var(--m-ink); }
.hoja-cab { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.atras { width: 44px; height: 44px; border: 2px solid var(--m-ink); background: none; color: var(--m-ink); font-size: 22px; flex: none; }
.dia { display: flex; align-items: center; justify-content: space-between; border: 2px solid var(--m-line); margin: 4px 0 8px; }
.dia button { width: 52px; height: 44px; border: 0; background: none; color: var(--m-ink); font-size: 24px; }
.dia button:disabled { opacity: .25; }
.dia span { font-size: 16px; text-transform: lowercase; }
.num { width: 30px; height: 30px; flex: none; background: var(--m-accent); color: #fff; font: 700 15px/30px var(--m-font); text-align: center; }
.ped2.ok .num { background: var(--m-ok); }
.ped2.ok { opacity: .75; }
@media (min-width: 900px) {
  .mapa-wrap { display: grid; grid-template-columns: 1fr 380px; margin: 0; }
  #mapa { height: calc(100dvh - 200px); }
  #hoja { position: static; max-height: calc(100dvh - 200px); border-top: 0; border-left: 4px solid var(--m-accent); }
  #hoja.min { max-height: calc(100dvh - 200px); overflow-y: auto; }
  .asa { display: none; }
}

.tarj__s .mal { color: #ff6b6b; font-weight: 600; white-space: normal; }

.orden { display: inline-block; min-width: 26px; height: 26px; margin-right: 8px; background: var(--m-accent); color: var(--m-accent-ink); font: 700 14px/26px var(--m-font); text-align: center; vertical-align: 2px; }
.ped__eta { color: var(--m-ok); font-size: 13px; margin-top: 4px; }

.alerta { background: #c4262e; color: #fff; padding: 10px 12px; margin: 0 0 8px; font-size: 14px; }

#mapa-plan { height: 46dvh; min-height: 300px; border: 2px solid var(--m-line); margin-top: 12px; }
.plan-ruta { border-left: 6px solid var(--m-accent); background: var(--m-surface); padding: 8px 12px 4px; margin-top: 12px; }
.plan-par { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--m-line); }
.chips .chip { margin: 0 6px 6px 0; }

/* ===== Seguimiento del cliente ===== */
.seg-estado { background: var(--m-accent); color: var(--m-accent-ink); padding: 18px 16px; margin-top: 8px; }
.seg-estado #seg-t { font-size: 32px; font-weight: 300; text-transform: lowercase; line-height: 1.1; }
.seg-estado small { display: block; margin-top: 6px; font-size: 14px; opacity: .92; }
.seg-estado.seg-ok { background: var(--m-ok); color: #fff; }
.seg-estado.seg-espera { background: var(--m-surface-2); color: var(--m-ink); }
.seg-datos { margin: 8px 0; }
.seg-datos > div { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--m-line); font-size: 14px; color: var(--m-muted); }
.seg-datos b { font-size: 22px; font-weight: 300; color: var(--m-ink); }
#seg-mapa { height: 48dvh; min-height: 300px; border: 2px solid var(--m-line); margin: 12px 0; }
.seg-prueba figure { margin: 0 0 12px; }
.seg-prueba img { width: 100%; max-height: 360px; object-fit: contain; background: var(--m-surface); display: block; }
.seg-prueba img.firma { background: #fff; max-height: 160px; }
.seg-prueba figcaption { font-size: 12px; color: var(--m-muted); margin-top: 4px; }
.seg-pie { margin: 16px 0; font-size: 12px; }

/* ===== Prueba de entrega (app del repartidor) ===== */
#prueba { position: fixed; inset: 0; z-index: 2000; background: var(--m-bg); overflow-y: auto; padding: 0 16px 32px; }
#prueba .cuerpo { max-width: 560px; margin: 0 auto; }
#pr-prev { width: 100%; max-height: 260px; object-fit: contain; background: var(--m-surface); display: none; margin: 8px 0; }
#pr-firma { width: 100%; height: 170px; background: #fff; border: 2px solid var(--m-line); touch-action: none; display: block; }
.pr-acts { display: flex; gap: 8px; margin-top: 12px; }
.pr-acts .m-btn { flex: 1; }
.link-prueba { font-size: 13px; color: var(--m-muted); }

.visor { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.82); overflow-y: auto; display: flex; justify-content: center; padding: 16px; }
.visor__c { background: var(--m-bg); padding: 12px 16px 16px; width: 100%; max-width: 560px; height: fit-content; border-top: 4px solid var(--m-accent); }
.visor img { width: 100%; max-height: 70dvh; object-fit: contain; background: var(--m-surface); display: block; margin: 8px 0; }
.visor img.firma { background: #fff; max-height: 180px; }

/* ===== Radio PTT (radio-rep.js / radio-admin.js) ===== */
.ri { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 899px) { body.con-radio #hoja { bottom: 112px; } }
.r-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; background: var(--m-bg); border-top: 1px solid var(--m-line); padding-bottom: env(safe-area-inset-bottom); }
.r-dock > * { max-width: 560px; margin: 0 auto; }
body.con-radio .app { padding-bottom: 176px; }
.r-aire { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--m-surface); font-size: 14px; transition: background var(--m-dur) var(--m-ease); }
.r-aire .r-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--m-ok); flex: none; }
.r-aire.off .r-pt { background: var(--m-muted); }
.r-aire.off { color: var(--m-muted); }
.r-ola { display: none; gap: 3px; align-items: center; height: 20px; }
.r-ola i { width: 3px; height: 6px; background: currentColor; animation: r-barra .8s ease-in-out infinite; }
.r-ola i:nth-child(2) { animation-delay: .1s } .r-ola i:nth-child(3) { animation-delay: .2s } .r-ola i:nth-child(4) { animation-delay: .3s } .r-ola i:nth-child(5) { animation-delay: .4s }
@keyframes r-barra { 0%,100% { height: 4px; } 50% { height: 20px; } }
.r-aire.rx { background: var(--m-ok); color: #fff; } .r-aire.tx { background: var(--m-danger); color: #fff; }
.r-aire.rx .r-ola, .r-aire.tx .r-ola { display: inline-flex; }
.r-aire.rx .r-pt, .r-aire.tx .r-pt { background: #fff; }
.r-aire.ocup { background: var(--m-surface); color: var(--m-warn); }
.r-fila { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.r-rapidos { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.r-rapidos .chip { min-height: 44px; padding: 4px 8px; }
.r-ptt { width: 112px; height: 112px; flex: none; border-radius: 50%; border: 0; background: var(--m-accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform var(--m-dur) var(--m-ease), background var(--m-dur) var(--m-ease); }
.r-ptt .ri { width: 36px; height: 36px; }
.r-ptt small { font: 600 12px var(--m-font); text-transform: uppercase; letter-spacing: 1px; }
.r-ptt.tx { background: var(--m-danger); transform: scale(1.06); }
.r-ptt.tx::before, .r-ptt.tx::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--m-danger); animation: r-onda 1.1s var(--m-ease) infinite; pointer-events: none; }
.r-ptt.tx::after { animation-delay: .5s; }
.r-ptt.rx { background: var(--m-ok); }
.r-ptt.niega { animation: r-niega .3s; }
@keyframes r-onda { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes r-niega { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* Panel */
.r-dock--admin > * { max-width: 1100px; }
body.con-radio .app.admin { padding-bottom: 112px; }
body.con-radio #mapa { height: calc(100dvh - 300px); }
.r-etq { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border: 1px solid currentColor; flex: none; }
.r-reloj { font-variant-numeric: tabular-nums; }
.r-a { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--m-muted); text-transform: uppercase; letter-spacing: 1px; }
.r-a select { min-height: 40px; padding: 0 8px; background: var(--m-surface); color: var(--m-ink); border: 2px solid var(--m-line); font: 300 15px var(--m-font); border-radius: 0; text-transform: none; letter-spacing: 0; }
.r-tecla { flex: 1; text-align: right; font-size: 12px; color: var(--m-muted); }
.r-tecla kbd { font: 600 12px var(--m-font); border: 1px solid var(--m-line); padding: 2px 8px; color: var(--m-ink); }
.r-ptt--ancho { width: auto; min-width: 280px; height: 56px; border-radius: 0; flex-direction: row; gap: 12px; font: 600 15px var(--m-font); text-transform: uppercase; letter-spacing: 1px; }
.r-ptt--ancho .ri { width: 24px; height: 24px; }
.r-ptt--ancho.tx { transform: none; } .r-ptt--ancho.tx::before, .r-ptt--ancho.tx::after { display: none; }
.r-ev { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--m-line); }
.r-ico { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--m-surface); }
.r-ev.msg .r-ico { color: var(--m-accent); }
.r-cuerpo { flex: 1; min-width: 0; font-size: 15px; }
.r-cuerpo small { display: block; font-size: 12px; color: var(--m-muted); }
.r-cuerpo a { color: var(--m-muted); }
.r-oir { min-height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.r-oir .ri { width: 14px; height: 14px; }
.r-ev.nuevo { animation: r-entra .4s var(--m-ease); }
@keyframes r-entra { from { opacity: 0; transform: translateX(16px); } }
@media (max-width: 640px) { .r-tecla { display: none; } .r-ptt--ancho { min-width: 0; flex: 1; } }.r-aire.mi-turno { background: var(--m-accent); color: var(--m-accent-ink); }
.r-ptt.mi-turno { animation: r-llama 0.9s ease-in-out infinite; }
@keyframes r-llama { 50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(238,124,0,.25); } }
/* ===== App del repartidor: estilo Bolt (mapa a pantalla completa + hoja inferior redondeada) ===== */
#v-main { position: fixed; inset: 0; max-width: 560px; margin: 0 auto; overflow: hidden; --r: 16px; --sombra: 0 4px 16px rgba(0,0,0,.28); }
#v-main, #v-main button { font-family: var(--m-font); }
#mapa-rep { position: absolute; inset: 0; z-index: 0; background: var(--m-surface); }
#mapa-rep .leaflet-tile-pane { filter: saturate(.9); }

/* Estado arriba: píldora flotante */
.rt { position: absolute; top: 0; left: 0; right: 0; z-index: 500; padding: calc(env(safe-area-inset-top) + 16px) 16px 0; pointer-events: none; }
.rt-pill { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; background: var(--m-bg); border-radius: 28px; box-shadow: var(--sombra); }
.rt-pt { width: 12px; height: 12px; border-radius: 50%; background: var(--m-muted); flex: none; }
body.en-turno .rt-pt { background: var(--m-ok); box-shadow: 0 0 0 4px rgba(63,174,86,.25); animation: pulso 1.6s infinite; }
.rt-i { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rt-i b { font-size: 16px; font-weight: 600; }
#v-main .estado-gps { margin: 0; min-height: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fondo de pantalla: botones flotantes + hoja */
.rb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; flex-direction: column; pointer-events: none; max-height: 100%; }
.rb > * { pointer-events: auto; }
.rb-flot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 16px 16px; pointer-events: none; }
.rb-flot > * { pointer-events: auto; }
.rm-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--m-bg); color: var(--m-ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); flex: none; }
.rm-btn:active { transform: scale(.94); }

/* Turno (solo con ubicación): píldora dentro de la barra de estado, naranja para iniciar, gris para terminar */
.rt-turno { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--m-accent); color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(232,113,10,.4); transition: transform var(--m-dur) var(--m-ease); }
.rt-turno:active { transform: scale(.96); }
.rt-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.rt-turno.activo { background: var(--m-surface-2); color: var(--m-ink); box-shadow: none; }
.rt-turno.activo .rt-dot { background: var(--m-danger); border-radius: 2px; }
body.sin-ubi.radio-ok .rt-pt { background: var(--m-ok); box-shadow: 0 0 0 4px rgba(63,174,86,.25); }

/* Vistas: radio (inicio) / mapa o tareas */
.vr { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 88px); bottom: 0; z-index: 450; display: flex; flex-direction: column; padding: 8px 16px 0; overflow-y: auto; }
#v-main[data-vista="radio"]::before { content: ''; position: absolute; inset: 0; z-index: 440; background: var(--m-bg); pointer-events: none; }
#v-main[data-vista="radio"] .rb, #v-main[data-vista="mapa"] .vr { display: none; }
body.sin-ubi #mapa-rep, body.sin-ubi #btn-centrar { display: none; }
.vr-radio { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.vr .hr-pie { padding: 8px 0; }
body:has(#tabs:not(.oculto)) .vr { bottom: calc(64px + env(safe-area-inset-bottom)); }
body:has(#tabs:not(.oculto)) .rb { bottom: calc(64px + env(safe-area-inset-bottom)); }
.tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 600; display: flex; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--m-bg); border-top: 1px solid var(--m-line); }
.tabs button { flex: 1; border: 0; background: none; color: var(--m-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; }
.tabs button[aria-selected="true"] { color: var(--m-accent); }
.tabs .ri { width: 24px; height: 24px; }
/* Tareas sin mapa: la hoja ocupa toda la vista como lista */
body.sin-ubi .rb { top: calc(env(safe-area-inset-top) + 88px); }
body.sin-ubi .rb-flot { display: none; }
body.sin-ubi .rb-hoja { flex: 1; border-radius: 0; box-shadow: none; }
body.sin-ubi #hoja-rep { flex: 1; overflow-y: auto; }
body.sin-ubi #pendientes { flex-direction: column; overflow: visible; scroll-snap-type: none; }
body.sin-ubi #pendientes > * { flex-basis: auto !important; }
body.sin-ubi #hr-mas { display: block; }
body.sin-ubi .hr-asa { pointer-events: none; } body.sin-ubi .hr-asa .ri, body.sin-ubi .hr-tira { display: none; }
body.sin-tareas #hoja-rep { display: none; }

/* Hoja inferior */
.rb-hoja { background: var(--m-bg); border-radius: 24px 24px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.35); padding-bottom: env(safe-area-inset-bottom); min-height: 0; display: flex; flex-direction: column; }
#hoja-rep { min-height: 0; display: flex; flex-direction: column; }
.hr-asa { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 12px 16px 0; border: 0; background: none; color: var(--m-muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.hr-tira { position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--m-line); }
.hr-asa .ri { transition: transform var(--m-dur) var(--m-ease); }
#hoja-rep.abierta .hr-asa .ri { transform: rotate(180deg); }
#pendientes { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 8px; scrollbar-width: none; }
#pendientes::-webkit-scrollbar { display: none; }
#pendientes > * { flex: 0 0 100%; scroll-snap-align: center; }
#pendientes > .ped:only-child { flex-basis: 100%; }
#pendientes:has(> .ped + .ped) > * { flex-basis: calc(100% - 32px); }
#hr-mas { display: none; padding: 0 16px; }
#hoja-rep.abierta { max-height: 70dvh; overflow-y: auto; }
#hoja-rep.abierta #pendientes { flex-direction: column; overflow: visible; scroll-snap-type: none; }
#hoja-rep.abierta #pendientes > * { flex-basis: auto; }
#hoja-rep.abierta #hr-mas { display: block; }
.hr-sec { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--m-muted); margin: 16px 0 8px; }
.hr-pie { text-align: center; padding: 8px 0 16px; }
#v-main .vacio { padding: 16px 0; }

/* Tarjeta de pedido */
#v-main .ped { background: var(--m-surface); border: 0; border-radius: var(--r); padding: 16px; margin: 0 0 8px; }
#v-main .ped.ok { opacity: .65; }
#v-main .ped__top { align-items: center; }
#v-main .ped__cli { font-size: 18px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-main .ped__monto { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
#v-main .ped__dir { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; }
#v-main .ped__dir span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ped__km { font-weight: 600; color: var(--m-ink); white-space: nowrap; }
#v-main .orden { width: 28px; height: 28px; min-width: 0; border-radius: 50%; line-height: 28px; vertical-align: 1px; }
#v-main .ped__acts { margin-top: 12px; }
#v-main .ped__acts .m-btn { min-height: 48px; border-radius: 24px; border: 0; background: var(--m-surface-2); color: var(--m-ink); font-size: 15px; font-weight: 600; text-transform: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
#v-main .ped__acts .m-btn.primary { background: var(--m-ok); color: #fff; flex: 1.4; }
#v-main .ped__acts .ped__ico { flex: none; width: 48px; padding: 0; }
#v-main .ped__acts .ri { width: 18px; height: 18px; }

/* Mapa: destinos y mi posición */
#mapa-rep .dest b { border-radius: 50%; }
#mapa-rep .dest span { border-radius: 0 15px 15px 0; margin-left: -4px; padding-left: 10px; font-weight: 600; }
.yo { position: absolute; transform: translate(-12px, -12px); width: 24px; height: 24px; }
.yo i { position: absolute; inset: 0; border-radius: 50%; background: var(--m-accent); border: 4px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.yo::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; background: rgba(232,113,10,.25); animation: r-onda 2s var(--m-ease) infinite; }

/* Radio dentro de la hoja */
.r-dock--app { position: static; border-top: 1px solid var(--m-line); background: none; padding-bottom: 0; }
.r-dock--app .r-aire { margin: 8px 16px 0; height: 40px; border-radius: 20px; }
.r-dock--app .r-fila { padding: 8px 16px 12px; }
.r-dock--app .r-rapidos .chip { border-radius: 22px; border: 0; background: var(--m-surface); font-size: 14px; font-weight: 600; }
.r-dock--app .r-rapidos .chip.sel { background: var(--m-accent); color: #fff; }
.r-dock--app .r-ptt { width: 96px; height: 96px; }
.r-dock--app .r-ptt .ri { width: 32px; height: 32px; }
@media (max-height: 700px) { .r-dock--app .r-ptt { width: 80px; height: 80px; } .r-dock--app .r-rapidos .chip { min-height: 36px; } }

/* Radio grande (vista radio de NodCom): estado arriba, botón gigante al centro, rápidos abajo */
.r-ayuda { display: none; }
.r-dock--grande { border-top: 0; }
.r-dock--grande .r-aire { margin: 0; height: 48px; border-radius: 24px; padding: 0 20px; font-size: 15px; }
.r-dock--grande .r-fila { flex-direction: column; gap: 24px; padding: 32px 0 0; }
.r-dock--grande .r-ptt { order: -1; width: 200px; height: 200px; box-shadow: 0 12px 40px rgba(232,113,10,.45); }
.r-dock--grande .r-ptt .ri { width: 56px; height: 56px; }
.r-dock--grande .r-ptt small { font-size: 14px; letter-spacing: 2px; }
.r-dock--grande .r-ptt.tx::before, .r-dock--grande .r-ptt.tx::after { inset: -16px; }
.r-dock--grande .r-rapidos { width: 100%; flex: none; }
.r-dock--grande .r-rapidos .chip { min-height: 48px; }
.r-dock--grande .r-ayuda { display: block; order: 0; text-align: center; font-size: 12px; color: var(--m-muted); margin-top: -8px; }
@media (max-height: 740px) { .r-dock--grande .r-ptt { width: 160px; height: 160px; } .r-dock--grande .r-fila { padding-top: 16px; gap: 16px; } }
.r-dock--grande .r-rapidos { order: 1; }

/* Panel: interruptores de módulos (pestaña empresa) */
.cf-sw { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--m-line); cursor: pointer; }
.cf-sw input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--m-accent); flex: none; }
.cf-sw b { display: block; font-weight: 600; }
.cf-sw small { display: block; color: var(--m-muted); font-size: 13px; }

/* Vincular celular (NodCom) */
#v-login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
#v-login:not(.oculto) { display: flex; }
.vl { width: 100%; max-width: 400px; text-align: center; padding: 32px 0; }
.vl-logo { width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 50%; background: var(--m-accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(232,113,10,.4); }
.vl-logo .ri { width: 44px; height: 44px; }
.vl-t { font-size: 32px; font-weight: 600; margin: 0; letter-spacing: -.5px; }
.vl-s { color: var(--m-muted); margin: 4px 0 32px; }
.vl-card { background: var(--m-surface); border-radius: 24px; padding: 24px; text-align: left; }
.vl-card label { display: block; font-size: 13px; font-weight: 600; color: var(--m-muted); margin-bottom: 8px; }
.vl-card input { width: 100%; height: 64px; border: 2px solid var(--m-line); border-radius: 16px; background: var(--m-bg); color: var(--m-ink); font: 600 32px var(--m-font); letter-spacing: 12px; text-align: center; }
.vl-card input:focus { outline: 0; border-color: var(--m-accent); }
.vl-card small { display: block; color: var(--m-muted); font-size: 12px; margin: 8px 0 16px; }
.vl-btn { width: 100%; height: 56px; border: 0; border-radius: 28px; background: var(--m-accent); color: #fff; font: 600 17px var(--m-font); box-shadow: 0 6px 20px rgba(232,113,10,.4); }
.vl-btn:active { transform: scale(.98); }

/* ===== Panel de la oficina NodCom (estilo despacho: barra + en el aire + mapa con columna + PTT abajo) ===== */
@media (min-width: 900px) {
  .app.admin:has(#a-main:not(.oculto)) { max-width: none; padding: 0; }
  #a-main.ad { position: fixed; inset: 0; display: flex; flex-direction: column; }
  body.con-radio #a-main.ad { bottom: 72px; }
  .ad-top { display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 24px; border-bottom: 1px solid var(--m-line); flex: none; }
  .ad-top .cab { padding: 0; flex: none; }
  .ad-top .cab h1 { font-size: 22px; font-weight: 600; text-transform: none; letter-spacing: 0; }
  .ad-top .cab h1::after { display: none; }
  .ad-top .cab h1::first-letter { text-transform: uppercase; }
  #piv.m-pivot { flex: 1; margin: 0; display: flex; gap: 4px; overflow-x: auto; }
  #piv.m-pivot button { font-size: 15px; font-weight: 600; height: 36px; padding: 0 14px; border-radius: 18px; color: var(--m-muted); }
  #piv.m-pivot button[aria-selected="true"] { background: var(--m-surface-2); color: var(--m-ink); }
  .ad-kpis { display: flex; gap: 24px; flex: none; }
  .ad-kpis div { text-align: right; }
  .ad-kpis b { display: block; font-size: 22px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
  .ad-kpis small { font-size: 11px; color: var(--m-muted); }
  .ad-kpis .ok b { color: var(--m-ok); } .ad-kpis .mal b { color: var(--m-danger); }
  .ad-salir { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--m-muted); display: flex; align-items: center; justify-content: center; flex: none; }
  .ad-salir:hover { background: var(--m-surface); color: var(--m-ink); }
  #ad-aire .r-aire { height: 44px; padding: 0 24px; gap: 16px; font-size: 14px; border-bottom: 1px solid var(--m-line); }
  .ad-cuerpo { flex: 1; min-height: 0; overflow-y: auto; }
  .ad-cuerpo > [data-panel]:not([data-panel="mapa"]) { max-width: 960px; margin: 0 auto; padding: 8px 24px 32px; }
  .ad-cuerpo > [data-panel="mapa"]:not(.oculto) { height: 100%; display: grid; grid-template-columns: 1fr 380px; margin: 0; }
  body.con-radio .ad #mapa, .ad #mapa { height: 100%; min-height: 0; }
  .ad-lado { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 40%); min-height: 0; border-left: 1px solid var(--m-line); }
  .ad #hoja, .ad #hoja.min { max-height: none; height: 100%; overflow-y: auto; border: 0; padding: 0 16px 8px; }
  .ad-feed { border-top: 1px solid var(--m-line); overflow-y: auto; padding: 0 16px 8px; min-height: 0; }
  .ad-sec { position: sticky; top: 0; background: var(--m-bg); display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--m-muted); z-index: 1; }
  .ad-sec small { text-transform: none; letter-spacing: 0; font-weight: 400; }
  .ad .hoja-t { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--m-muted); margin: 12px 0 4px; }
  .ad .tarj { border-radius: 12px; padding: 8px; border-bottom: 0; min-height: 56px; }
  .ad .tarj:hover { background: var(--m-surface); }
  .ad .av { border-radius: 50%; width: 36px; height: 36px; line-height: 36px; font-size: 15px; }
  .ad .tarj__n { font-size: 15px; font-weight: 600; }
  .ad .alerta { display: flex; gap: 8px; align-items: center; border-radius: 12px; margin: 12px 0 4px; font-size: 13px; }
  .ad .alerta .ri { width: 16px; height: 16px; }
  .ad .r-ev { padding: 8px 0; border-bottom: 0; }
  .ad .r-ico { border-radius: 50%; }
  .ad .r-cuerpo { font-size: 13px; }
  .ad .r-oir { border-radius: 16px; min-height: 32px; }
  /* Sin módulo de ubicación: no hay mapa, la columna ocupa todo */
  body.ad-sin-ubi .ad-cuerpo > [data-panel="mapa"]:not(.oculto) { grid-template-columns: 1fr; max-width: 960px; margin: 0 auto; }
  body.ad-sin-ubi .ad #mapa { display: none; }
  body.ad-sin-ubi .ad-lado { border-left: 0; grid-template-rows: auto 1fr; }
  /* Barra de hablar abajo */
  .r-dock--admin { height: 72px; display: flex; align-items: center; background: var(--m-surface); border-top: 1px solid var(--m-line); }
  .r-dock--admin .r-fila { width: 100%; max-width: none; padding: 0 24px; }
  .r-dock--admin .r-ptt--ancho { border-radius: 28px; min-width: 320px; }
  .r-dock--admin .r-a select { border-radius: 20px; padding: 0 16px; }
}
@media (min-width: 900px) {
  .ad .campo input, .ad .campo select, .ad .campo textarea { border-radius: 12px; min-height: 44px; border-width: 1px; background: var(--m-surface); }
  .ad .m-btn { border-radius: 22px; }
  .ad .sec { font-size: 18px; font-weight: 600; text-transform: none; }
  .ad .sec::first-letter { text-transform: uppercase; }
  .ad .sec::before { display: none; }
  .ad .ped { border-radius: 16px; border-left: 0; }
}

/* Botón de tema y ajustes para fondo claro */
.tema-link { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--m-surface); color: var(--m-ink); border-radius: 20px; height: 40px; padding: 0 16px; font: 600 13px var(--m-font); margin-bottom: 4px; }
.tema-link .ri { width: 18px; height: 18px; }
[data-theme="light"] #v-main { --sombra: 0 4px 16px rgba(0,0,0,.14); }
[data-theme="light"] .rb-hoja { box-shadow: 0 -4px 24px rgba(0,0,0,.12); }
[data-theme="light"] .r-dock--grande .r-ptt { box-shadow: 0 12px 32px rgba(232,113,10,.35); }
[data-theme="light"] .r-dock--admin { background: #fff; }
[data-theme="light"] .ad-sec { background: var(--m-bg); }
[data-theme="light"] .vl-card { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
[data-theme="light"] .nd-grilla th { background: #c85000; }

/* ===== Navegación dentro de la app ===== */
body.navegando .rt, body.navegando #hoja-rep, body.navegando #tabs { display: none !important; }
body.navegando .rb, body.navegando .vr { bottom: 0 !important; }
.nv-ins { position: absolute; top: calc(env(safe-area-inset-top) + 16px); left: 16px; right: 16px; z-index: 520; display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 16px; border-radius: 24px; background: #1f6f3a; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.nv.llego .nv-ins { background: var(--m-accent); }
.nv-fl { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; }
.nv-fl .ri { width: 48px; height: 48px; stroke-width: 2.5; }
.nv-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nv-tx b { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nv-tx span { font-size: 17px; font-weight: 600; line-height: 1.25; }
.nv-pie { padding: 16px 16px 8px; }
.nv-res { display: flex; align-items: baseline; gap: 12px; }
.nv-res b { font-size: 26px; font-weight: 700; color: var(--m-ok); }
.nv-res span { color: var(--m-muted); font-size: 14px; }
.nv-cli { margin: 4px 0 12px; font-size: 14px; display: flex; gap: 8px; min-width: 0; }
.nv-cli b { font-weight: 600; white-space: nowrap; }
.nv-cli span { color: var(--m-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-acts { display: flex; gap: 8px; }
.nv-b { flex: 1; height: 48px; border: 0; border-radius: 24px; background: var(--m-surface-2); color: var(--m-ink); font: 600 15px var(--m-font); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.nv-b.nv-ico { flex: none; width: 48px; }
.nv-b.nv-ok { flex: 1.5; background: var(--m-ok); color: #fff; }
.nv-dest { position: absolute; transform: translate(-14px, -14px); width: 28px; height: 28px; border-radius: 50%; background: var(--m-danger); border: 4px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }

/* Mapa girado (navegación): el punto del repartidor pasa a ser una flecha hacia adelante */
#mapa-rep.rot { transition: transform .6s ease-out; transform-origin: 50% 50%; }
#mapa-rep.rot .yo i { border-radius: 0; background: none; border: 0; box-shadow: none; }
#mapa-rep.rot .yo i::before { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -60%) rotate(var(--rumbo, 0deg)); border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 28px solid var(--m-accent); filter: drop-shadow(0 0 0 #fff) drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
#mapa-rep.rot .yo::before { inset: -10px; }
.nv-b.nv-ico.activo { background: var(--m-accent); color: #fff; }