/* ===== Operación → Logística → Monitoreo GPS ===== */
/* Pantalla completa: mapa como elemento principal. iPhone: panel inferior deslizable. Computadora: panel lateral. */
body[data-screen="monitor"]{overflow:hidden}
.mon{position:fixed;left:0;right:0;top:0;bottom:calc(var(--tab-h) + var(--sab));display:flex;flex-direction:column;background:var(--canvas);padding-left:var(--sal);padding-right:var(--sar)}
html.kb-open .mon{bottom:0}
.mon-top{flex:none;position:relative;z-index:4;padding:calc(var(--sat) + 2px) 12px 8px;background:var(--surface);border-bottom:1px solid var(--line)}
.mon-bar{display:flex;align-items:center;gap:4px;min-height:44px}
.mon-bar .nav-back{margin-left:-8px;flex:none}
.mon-tt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.mon-title{margin:0;font-size:var(--fs-title3);line-height:1.2;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-upd{display:flex;align-items:center;gap:4px;min-width:0;font-size:var(--fs-footnote);line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.mon-upd:empty{display:none}
.mon-upd>span{overflow:hidden;text-overflow:ellipsis}
.mon-upd .ic{flex:none;width:14px;height:14px}
.mon-ref .ic{width:21px;height:21px}
.mon-ref.spin .ic{animation:monSpin .8s linear infinite}
@keyframes monSpin{to{transform:rotate(360deg)}}

/* Indicadores: Logística | GPS */
.mon-kpis{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:2px -12px 0;padding:0 12px 2px;-webkit-overflow-scrolling:touch}
.mon-kpis::-webkit-scrollbar{display:none}
.mon-kg{flex:none;display:flex;flex-direction:column;gap:3px}
.mon-kh{font-size:var(--fs-caption);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-left:2px}
.mon-kt{display:flex;gap:6px}
.mon-k{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:80px;min-height:50px;padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);text-align:left}
.mon-k b{font-size:var(--fs-title3);line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums}
.mon-k span{font-size:var(--fs-caption);line-height:1.2;color:var(--ink-2);white-space:nowrap}
.mon-k.on{border-color:transparent;background:var(--blue-t);box-shadow:inset 0 0 0 2px var(--tint)}
.mon-k.k-operating b{color:var(--tint)}
.mon-k.k-moving b{color:var(--ok)}
.mon-k.k-nosignal b{color:var(--warn)}
.mon-k:active{transform:scale(.98)}

/* Mapa */
.mon-main{position:relative;flex:1;min-height:0;overflow:hidden;overflow:clip}
.mon-mapbox{position:absolute;inset:0}
.mon .mon-map{position:absolute;inset:0;background:var(--fill)}
.mon-mapmsg{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px 24px calc(var(--sheet-vis,176px) + 24px);text-align:center;background:color-mix(in srgb,var(--surface) 94%,transparent);color:var(--ink-2)}
.mon-mapmsg[hidden]{display:none}
.mon-mapmsg .ic{width:30px;height:30px;color:var(--muted)}
.mon-mapmsg small{max-width:340px;font-size:var(--fs-footnote);color:var(--muted)}
.mon[data-layout="mobile"] .mon-map .maplibregl-ctrl-bottom-right,.mon[data-layout="mobile"] .mon-map .maplibregl-ctrl-bottom-left{bottom:var(--sheet-vis,176px);transition:bottom .3s var(--ease)}

/* Panel de unidades (iPhone: hoja inferior; tres alturas) */
.mon-panel{position:absolute;left:0;right:0;bottom:0;z-index:3;height:100%;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r) var(--r) 0 0;
  box-shadow:var(--shadow-up);transform:translateY(calc(100% - var(--sheet-h,176px)));transition:transform .3s var(--ease);will-change:transform}
.mon-grab{flex:none;display:flex;justify-content:center;touch-action:none}
.mon-grab-b{display:grid;place-items:center;width:84px;height:24px;padding:0;border:0;background:none}
.mon-grab-b i{display:block;width:40px;height:5px;border-radius:var(--r-2xs);background:var(--line-2)}
.mon-pv{flex:1;min-height:0;display:flex;flex-direction:column}
.mon-pv[hidden]{display:none}
.mon-phead{flex:none;padding:0 12px;touch-action:pan-x}
.mon-search{margin:2px 0 8px}
.mon-filters{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px 6px}
.mon-filters::-webkit-scrollbar{display:none}
.mon-filters .chip{flex:none;min-height:44px;padding:0 12px;font-size:var(--fs-subhead);white-space:nowrap}
.mon-filters .chip .ic{width:15px;height:15px}
.mon-sel{-webkit-appearance:none;appearance:none;padding-right:12px;cursor:pointer}
.mon-sel.on{background:var(--blue-t);border-color:transparent;color:var(--tint);font-weight:600}
.mon-sep{flex:none;align-self:stretch;width:1px;margin:6px 2px;background:var(--line-2)}
.mon-count{margin:2px 2px 6px;font-size:var(--fs-footnote);color:var(--muted)}
.mon-count .lg-linkbtn{min-height:0;font-size:var(--fs-footnote)}
.mon-list,.mon-detail{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 12px 20px}
.mon-empty p{display:flex;align-items:center;justify-content:center;gap:8px}
.mon-nog{margin:4px 2px 0;text-align:center}

/* Fila de unidad */
.mon-row{display:flex;flex-direction:column;gap:5px;width:100%;margin:0 0 8px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--lg-dot);border-radius:var(--r);background:var(--surface);color:var(--ink);text-align:left;font:inherit;box-shadow:var(--shadow-1)}
.mon-row:active{background:var(--fill)}
.mon-row.is-sel{border-color:var(--tint);border-left-color:var(--lg-dot);box-shadow:0 0 0 2px color-mix(in srgb,var(--tint) 30%,transparent)}
.mon-r1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mon-r1 .unit-badge{height:28px;min-width:44px;font-size:var(--fs-subhead);border-radius:var(--r-xs)}
.unit-badge.dev{background:var(--fill);color:var(--ink-2);font-size:var(--fs-caption)}
.mon-r2,.mon-r4{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;min-width:0;font-size:var(--fs-footnote);color:var(--ink-2)}
.mon-r2 .lg-tt{font-size:var(--fs-footnote)}
.mon-r3{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;font-size:var(--fs-subhead);font-weight:600}
.mon-r3 .arr{color:var(--muted);font-weight:500}
.mon-r4{font-size:var(--fs-footnote);color:var(--muted)}
.mon-row .dot,.mon-r4 .dot{color:var(--muted)}
.mon-lnk{display:inline-flex;align-items:center;gap:3px;color:var(--ok);font-weight:700}
.mon-lnk .ic{width:14px;height:14px}

/* Movimiento reportado por GPS (separado del estado de Logística) */
.mon-gps{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 9px 3px 7px;border-radius:var(--r-pill);background:var(--fill);color:var(--ink-2);font-size:var(--fs-footnote);font-weight:700;white-space:nowrap}
.mon-gps>span{overflow:hidden;text-overflow:ellipsis}
.mon-gps .ic{flex:none;width:13px;height:13px}
.mon-gps.m-moving{background:var(--ok-t);color:var(--ok)}
.mon-gps.m-moving .ic{fill:currentColor}
.mon-gps.m-nosignal{background:var(--warn-t);color:var(--warn)}
.mon-gps.big{font-size:var(--fs-subhead);padding:5px 12px 5px 9px}
.mon-gps.big .ic{width:15px;height:15px}

/* Detalle */
.mon-dhead{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 -12px 6px;padding:0 4px;background:var(--surface)}
.mon-dcard{display:flex;flex-direction:column;gap:9px;margin:0 0 16px;padding:12px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.mon-dc1{display:flex;align-items:center;gap:12px}
.mon-dc1>div{min-width:0}
.mon-dc1 b{display:block;font-size:var(--fs-body)}
.mon-dc1 small{color:var(--muted);font-size:var(--fs-footnote)}
.mon-dst{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mon-lbl{min-width:72px;font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mon-warn{display:flex;gap:8px;margin:0;padding:8px 10px;border-radius:var(--r-sm);background:var(--warn-t);color:var(--warn);font-size:var(--fs-footnote);line-height:1.35}
.mon-warn .ic{flex:none;width:18px;height:18px}
.mon-detail .grp{margin:0 0 14px}
.mon-gb{padding:8px 14px 2px}
.mon-gb .lg-opr{padding:6px 0 10px;border:0;box-shadow:none;background:none;border-bottom:1px solid var(--line);border-radius:0}
.mon-detail .sumlist{margin:0 0 4px}
.mon-detail .sumlist>div{grid-template-columns:minmax(100px,38%) 1fr;padding:8px 0}
.mon-detail .sumlist dt,.mon-detail .sumlist dd{font-size:var(--fs-subhead)}
.mon-detail .sumlist dd{margin:0;min-width:0;overflow-wrap:anywhere}
.mon-detail .sumlist dd small{display:block;margin-top:1px;color:var(--muted);font-size:var(--fs-footnote)}
.mon-src{font-size:var(--fs-caption);color:var(--muted)}
.mon-acts2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mon-acts2>*{min-height:46px;padding:0 10px;font-size:var(--fs-subhead);text-align:center}
.mon-acts2>:last-child:nth-child(odd){grid-column:1/-1}
.mon-acts2 .ic{width:19px;height:19px}
.mon-trk .mon-acts2{margin:0 0 6px}
.mon-trk-st{display:flex;align-items:flex-start;gap:8px;margin:4px 0 10px;font-size:var(--fs-subhead);color:var(--ink-2)}
.mon-trk-st .ic{flex:none;width:19px;height:19px}
.mon-trk-st.on{color:var(--ok);font-weight:600}
.mon-trk .grp-note{margin:4px 0 10px}
[data-share].busy{opacity:.6;pointer-events:none}

/* Tarjeta del marcador (computadora) */
.mon-pop{display:flex;flex-direction:column;gap:6px;min-width:230px;font-size:var(--fs-footnote)}
.mon-pop-h{display:flex;align-items:center;gap:8px;padding-right:24px}
.mon-pop-h .unit-badge{height:28px;min-width:44px;font-size:var(--fs-subhead);border-radius:var(--r-xs)}
.mon-pop p{display:flex;align-items:flex-start;gap:6px;margin:0;color:var(--ink-2)}
.mon-pop p .ic{flex:none;width:15px;height:15px;margin-top:1px;color:var(--muted)}
.mon-pop-age{font-size:var(--fs-footnote)}
.mon-pop-acts{display:flex;gap:6px;margin-top:4px}
.mon-pop-acts>*{min-height:44px;font-size:var(--fs-subhead)}

/* Hoja para compartir el rastreo */
.trk-url{padding:12px;border-radius:var(--r-sm);background:var(--fill);font-size:var(--fs-subhead);line-height:1.4;word-break:break-all;-webkit-user-select:all;user-select:all}
.trk-short-err{display:flex;align-items:flex-start;gap:8px;text-align:left}
.trk-short-err .ic{flex:none;width:18px;height:18px;margin-top:1px}
.trk-what{list-style:none;display:flex;flex-direction:column;gap:8px;margin:12px 0 4px;padding:0}
.trk-what li{display:flex;gap:8px;font-size:var(--fs-subhead);line-height:1.4;color:var(--ink-2)}
.trk-what .ic{flex:none;width:18px;height:18px;color:var(--muted)}

/* Accesos: Logística → Monitoreo GPS e Inicio → «Ver mapa de unidades» */
.mon-entry{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;margin:0 0 10px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-1)}
.mon-entry:active{background:var(--fill);transform:scale(.99)}
.mon-entry .mod-ic{width:44px;height:44px}
.mon-entry-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mon-entry-tx b{font-size:var(--fs-body);font-weight:700}
.mon-entry-tx small{font-size:var(--fs-subhead);color:var(--ink-2)}
.mon-entry-n{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:4px;font-size:var(--fs-footnote);color:var(--muted)}
.mon-entry-n b{font-size:var(--fs-footnote);color:var(--ink-2)}
.lg-maplink{display:inline-flex;align-items:center;gap:5px;margin-left:auto;min-height:44px;font-size:var(--fs-subhead);font-weight:600;color:var(--tint);text-decoration:none;white-space:nowrap}
.lg-maplink .ic{width:17px;height:17px}

/* Computadora: mapa amplio + panel lateral */
@media (min-width:900px){
  .mon-top{padding:calc(var(--sat) + 8px) 20px 12px}
  .mon-tt{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:14px}
  .mon-title{font-size:var(--fs-title2)}
  .mon-kpis{overflow:visible;flex-wrap:wrap;gap:18px;margin:6px 0 0;padding:0}
  .mon-k{min-width:138px;min-height:62px;padding:8px 14px}
  .mon-k b{font-size:var(--fs-title2)}
  .mon-k span{font-size:var(--fs-footnote)}
  .mon-main{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:minmax(0,1fr)}
  .mon-mapbox{position:relative;inset:auto}
  .mon-mapmsg{padding-bottom:24px}
  .mon-panel{position:relative;height:auto;min-height:0;transform:none;transition:none;border-radius:0;box-shadow:none;border-left:1px solid var(--line);will-change:auto}
  .mon-grab{display:none}
  .mon-phead{padding:12px 14px 0}
  .mon-filters{flex-wrap:wrap;overflow:visible;margin:0;padding:0 0 8px}
  .mon-list,.mon-detail{padding:0 14px 20px}
  .mon-dhead{margin:0 -14px 6px;padding:6px 6px 0}
}
@media (min-width:1300px){.mon-main{grid-template-columns:minmax(0,1fr) 440px}}
@media (prefers-reduced-motion:reduce){.mon-panel{transition:none}}
.lg-live-map{justify-content:flex-end;margin-top:8px}
