/**
 * Global GPS — densidad compacta (v1.5 · 2026-07-14)
 * Solo spacing / tipografía / anchos + popup/rail/recorrido densos.
 * v1.2: scroll horizontal en tablas anchas; capas Leaflet libres del strip KPI;
 *       list-row hover without transform/shadow (perf reinforce).
 * v1.3: Monitor zoom topright (clear of floating .rail + unit panel); recorrido
 *       KPI offsets stay scoped to body:has(#app > .ctl).
 * v1.4: Modales / overlays / device-config / sched / unit-picker densos
 *       (mismo lenguaje visual que panel/rail; sin perder campos ni flujos).
 * v1.5: Hotfix móvil dc-wide (bottom-sheet); excluir file inputs overlays;
 *       mcp inputs 16px; reportes (#bar/repbar/rcard/dash) + dispositivo #main.
 * v1.5.1: Editor combustible (.gpp-fuel-ui) — lista/tanque/calibración densos
 *       (solo UI; sin tocar algoritmo fuel).
 * v1.6: Modal premium densos — Linear/Stripe (anchos 460/760, inputs 30px, CTAs a la derecha).
 * Sin cambios de flujo ni algoritmo fuel (sí dedupe visual de “faltan” en gpp-fuel.js).
 * Cargar DESPUÉS de gpp-glass.css.
 *
 * Rollback: server/web/_backups/restore-pre-compact.sh
 */

/* ═══════════════════════════════════════════════════════════
   Tokens de densidad (solo referencia local)
   ═══════════════════════════════════════════════════════════ */
:root {
  --gpp-compact-panel-w: 288px;
  --gpp-compact-rail: 68px; /* 56 cortaba "Dispositivo"; ítems 62px */
}

/* ═══════════════════════════════════════════════════════════
   Rail (monitor / cliente)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .rail {
    width: var(--gpp-compact-rail) !important;
    padding: 8px 0 !important;
  }

  .rail a,
  .rail button {
    width: 62px !important;
    max-width: 62px !important;
    padding: 6px 2px !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
    /* Firefox: evita aplastar rótulos del rail en columna estrecha */
    overflow: hidden;
    text-overflow: clip;
    word-break: keep-all;
    hyphens: none;
  }

  .rail .i {
    font-size: 17px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  /* Contenido de páginas con rail: 12 (margen) + 68 (rail) + 12 (aire) */
  body:not(.gpp-video):has(.rail) #app {
    margin-left: 92px !important;
  }

  body:has(#maptb) #panel,
  #panel {
    left: 90px !important;
    width: var(--gpp-compact-panel-w) !important;
    top: 12px !important;
    bottom: 64px !important;
  }

  /* Dock flotante simétrico al rail: mismos 12px de margen y mismo radio */
  #maptb {
    left: 92px !important; /* 12 + rail 68 + 12 */
    right: 12px !important;
    height: 46px !important;
    bottom: 12px !important;
    border-radius: var(--radius-rail) !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding: 0 12px !important;
  }

  #legend {
    bottom: 66px !important;
  }
}

/* Fallback si body:has no aplica (Safari viejo) */
#panel {
  width: var(--gpp-compact-panel-w) !important;
}

/* ═══════════════════════════════════════════════════════════
   Monitor — panel "Mi dispositivo" (lista densa)
   ═══════════════════════════════════════════════════════════ */
#panel .phead {
  padding: 6px 7px 6px 9px !important;
  font-size: 12px !important;
  gap: 5px !important;
  min-height: 38px !important;
}

#panel .phead #live,
#panel #live {
  font-size: 0 !important;
  margin-left: 0 !important;
  gap: 0 !important;
  width: 14px !important;
}

#panel #live .d {
  width: 7px !important;
  height: 7px !important;
}

/* Pill numérico — deja espacio a T + fold a la derecha */
#panel .phead #count,
#panel #count {
  margin-left: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  border: 0 !important;
  line-height: 1.3 !important;
}

#panel .phead .ph-actions {
  margin-left: auto !important;
  gap: 3px !important;
}

#panel .phead .pmin {
  font-size: 11px !important;
  width: 26px !important;
  height: 26px !important;
  opacity: 0.92 !important;
  padding: 0 !important;
}

/* Banner sensor — 1 línea; detalle denso al expandir */
#fuelHealthBox {
  padding: 5px 8px 0 !important;
}

#fuelHealthBox .fh-compact {
  margin: 0 0 2px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

#fuelHealthBox .fh-compact > .fh-header {
  min-height: 30px !important;
  padding: 5px 8px !important;
  gap: 5px !important;
}

#fuelHealthBox .fh-compact .btn.sm {
  min-height: 26px !important;
  padding: 1px 7px !important;
  font-size: 10.5px !important;
}

#fuelHealthBox .fh-body {
  max-height: 84px !important;
  padding: 0 8px 6px !important;
}

#fuelHealthBox .fh-body ul {
  margin: 4px 0 0 !important;
  padding-left: 14px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

#fuelHealthBox .fh-body li {
  margin: 2px 0 !important;
}

#fuelHealthBox .fh-body .btn.sm {
  min-height: 24px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  margin-left: 4px !important;
}

#fuelHealthBox .fh-body > div {
  font-size: 10px !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}

#panel .ptabs {
  padding: 4px 6px 2px !important;
  gap: 3px !important;
}

#panel .ptabs span {
  padding: 5px 2px !important;
  font-size: 10.5px !important;
  border-radius: 8px !important;
}

#panel .psec-hd {
  padding: 4px 10px !important;
  font-size: 11px !important;
  min-height: 28px !important;
}

#panelsearch {
  padding: 5px 8px 0 !important;
  gap: 5px !important;
}

#panel #search,
#panelsearch #search {
  padding: 6px 9px !important;
  font-size: 12.5px !important;
  border-radius: 9px !important;
}

#panelsearch select,
#panel #sortsel {
  padding: 6px 5px !important;
  font-size: 11.5px !important;
}

#panelsearch #searchscope {
  flex: 0 0 92px !important;
  font-size: 11px !important;
}

#panel .filters,
.filters {
  padding: 5px 8px 3px !important;
  gap: 4px !important;
}

.chip {
  font-size: 10.5px !important;
  padding: 4px 8px !important;
}

#panel #sortsel,
#sortsel {
  margin: 0 8px 3px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  width: calc(100% - 16px) !important;
}

/* Filas — ganan a glass !important */
#list {
  padding: 2px 6px 8px !important;
  gap: 3px !important;
}

#list .row {
  padding: 6px 8px !important;
  gap: 7px !important;
  border-radius: 10px !important;
  transition: background 0.12s, border-color 0.12s !important;
}

#list .row:hover {
  transform: none !important;
  box-shadow: none !important;
}

#list .row .fav {
  font-size: 13px !important;
  padding: 2px !important;
}

#list .row .dots {
  font-size: 14px !important;
  padding: 2px 4px !important;
}

#list .row .nm,
.row .nm {
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#list .row .meta,
.row .meta {
  font-size: 10.5px !important;
  margin-top: 0 !important;
  line-height: 1.25 !important;
}

#list .row .spd b,
.row .spd b {
  font-size: 11.5px !important;
  display: inline !important;
}

#list .row .spd small,
.row .spd small {
  font-size: 9.5px !important;
  display: inline !important;
}

#list .row-body > .fuel,
.row-body > .fuel {
  gap: 4px !important;
  align-self: flex-start !important;
}

#list .row .fuel .fuel-ico,
.row .fuel .fuel-ico {
  width: 12px !important;
  height: 12px !important;
}

#list .row .fuel b,
.row .fuel b {
  font-size: 11.5px !important;
  display: inline !important;
}

#list .row .fuel small,
.row .fuel small {
  font-size: 9.5px !important;
  display: inline !important;
}

#list .row .tail {
  min-width: 0 !important;
  width: 100% !important;
  gap: 0 !important;
}

#list .row .seen .ago,
.row .seen .ago {
  font-size: 10px !important;
}

/* Fecha absoluta en title vía hover del ago; oculta 2ª línea para densificar */
#list .row .seen .abs {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   Rail — logo + cuenta + sombra
   ═══════════════════════════════════════════════════════════ */
.rail .logo {
  width: 26px !important;
  height: 26px !important;
  margin: 2px 0 2px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rail .logo img {
  height: 22px !important;
}

#railacct {
  font-size: 8.5px !important;
  max-width: 62px !important;
  margin: 0 auto 4px !important;
  line-height: 1.15 !important;
  opacity: 0.75;
}

@media (min-width: 768px) {
  .rail a,
  .rail button {
    padding: 5px 0 !important;
    gap: 0 !important;
  }

  .rail .i {
    font-size: 16px !important;
    margin-bottom: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Popup unidad / mapInfoCard — denso sin perder campos
   ═══════════════════════════════════════════════════════════ */
.upop .leaflet-popup-content {
  width: 300px !important;
  max-width: min(92vw, 300px) !important;
}

/* Grow with content (Ver tanques ×2) — denser tanks keep frame usable */
.up-card {
  max-height: none !important;
  overflow: visible !important;
}

.upop .up-h,
.up-h {
  padding: 8px 10px 4px !important;
}

.upop .up-h b,
.up-h b {
  font-size: 13px !important;
}

.upop .up-mdl,
.up-mdl {
  font-size: 9.5px !important;
  padding: 1px 5px !important;
}

.upop .up-body,
.up-body {
  padding: 5px 9px 4px !important;
  overflow: visible !important;
  flex: 1 1 auto !important;
}

/* Crystal Dock multi-tank: denser than base so T01+T02 fit above .up-acts */
.upop .up-fuel-tanks-body,
.up-fuel-tanks-body {
  margin-top: 3px !important;
  gap: 3px !important;
}
.upop .up-fuel-tank,
.up-fuel-tank {
  padding: 3px 5px !important;
  border-radius: 7px !important;
}
.upop .up-fuel-tank-tit,
.up-fuel-tank-tit {
  font-size: 7.5px !important;
  margin-bottom: 2px !important;
  gap: 2px 4px !important;
}
.upop .up-fuel-trio-tank,
.up-fuel-trio-tank {
  gap: 2px !important;
}
.upop .up-fuel-trio-tank .up-fuel-cell,
.up-fuel-trio-tank .up-fuel-cell {
  padding: 2px 3px !important;
  border-radius: 5px !important;
}
.upop .up-fuel-trio-tank .up-fuel-cell .k,
.up-fuel-trio-tank .up-fuel-cell .k {
  font-size: 6.5px !important;
}
.upop .up-fuel-trio-tank .up-fuel-cell .v,
.up-fuel-trio-tank .up-fuel-cell .v {
  font-size: 10.5px !important;
  margin-top: 0 !important;
}
.upop .up-fuel-trio-tank .up-fuel-cell .v small,
.up-fuel-trio-tank .up-fuel-cell .v small {
  font-size: 7.5px !important;
}
.upop .up-fuel-tank .up-fuel-crystal-bar,
.up-fuel-tank .up-fuel-crystal-bar {
  margin-top: 2px !important;
  height: 2.5px !important;
}
.upop .up-fuel-crystal:has(.up-fuel-tanks[open]) .up-fuel-crystal-more,
.up-fuel-crystal:has(.up-fuel-tanks[open]) .up-fuel-crystal-more {
  margin-top: 3px !important;
}

.upop .up-status,
.up-status {
  margin-bottom: 5px !important;
  gap: 6px !important;
}

.upop .up-chip,
.up-chip {
  font-size: 11px !important;
  padding: 2px 7px !important;
}

.upop .up-dur,
.up-dur {
  font-size: 10px !important;
}

.upop .up-driver,
.up-driver {
  margin: -2px 0 5px !important;
  padding: 3px 6px !important;
  font-size: 10.5px !important;
}

.upop .up-grid,
.up-grid {
  gap: 3px 8px !important;
  margin-bottom: 5px !important;
}

.upop .up-grid .up-stat,
.upop .up-grid > div,
.up-stat {
  padding: 4px 6px !important;
}

.upop .up-stat .up-lbl,
.up-stat .up-lbl {
  font-size: 8.5px !important;
  margin-bottom: 0 !important;
}

.upop .up-stat .up-val,
.up-stat .up-val {
  font-size: 11px !important;
  line-height: 1.25 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.upop .up-kv-cell .up-val,
.up-kv-cell .up-val,
.upop .up-kv-cell .up-val > *,
.up-kv-cell .up-val > *,
.upop .up-kv-cell .up-val .up-val-sub,
.up-kv-cell .up-val .up-val-sub {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-height: none !important;
}

.upop .up-fuel-wrap,
.up-fuel-wrap {
  margin: 4px 0 5px !important;
  border-radius: 8px !important;
}

.upop .up-fuel-hd,
.up-fuel-hd {
  padding: 5px 8px !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
}

.upop .up-fuel-body,
.up-fuel-body {
  padding: 0 7px 5px !important;
}

.upop .up-fuel-cap-summary,
.up-fuel-cap-summary {
  font-size: 9.5px !important;
  padding: 1px 0 3px !important;
  margin-bottom: 1px !important;
}

.upop .up-fuel-row,
.up-fuel-row {
  padding: 2px 0 !important;
  font-size: 10px !important;
  gap: 2px 6px !important;
}

.upop .up-fuel-bar,
.up-fuel-bar {
  height: 4px !important;
}

.upop .up-fuel-badge,
.up-fuel-badge {
  font-size: 8.5px !important;
  padding: 0 4px !important;
}

.upop .up-fuel-ts,
.upop .up-fuel-low,
.upop .up-fuel-warn,
.up-fuel-ts,
.up-fuel-low,
.up-fuel-warn {
  font-size: 9.5px !important;
  margin: 3px 0 0 !important;
}

.upop .up-fuel-auth,
.up-fuel-auth {
  margin-top: 4px !important;
  padding: 5px 7px !important;
  gap: 2px !important;
}

.upop .up-acts,
.up-acts {
  padding: 4px 6px 6px !important;
  gap: 3px !important;
}

.upop .up-acts button,
.up-acts button {
  padding: 6px 7px !important;
  font-size: 10px !important;
  min-width: 0 !important;
  border-radius: 8px !important;
}

/* Leaflet tip / wrapper — sin “halo” cuadrado raro */
.upop .leaflet-popup-content-wrapper {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   Addr / refresh / map toolbar
   ═══════════════════════════════════════════════════════════ */
#addrbar {
  padding: 7px 14px !important;
  font-size: 12.5px !important;
}

body:has(nav.sub#subnav) nav.sub button.it {
  width: 100%;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  font: inherit;
  text-align: left;
}

#pfov > div > div:first-child > button,
#uaov > div > div:first-child > button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

#refreshbar {
  padding: 4px 5px 4px 12px !important;
  font-size: 12px !important;
}

#maptb .tbtn {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
}

/* Firefox pinta scrollbar clásica ante desbordes de subpíxel en overflow-x:auto
   (Chrome usa overlay invisible). Sin barra visible; el scroll sigue si hace falta. */
#maptb {
  scrollbar-width: none;
}
#maptb::-webkit-scrollbar {
  display: none;
}

/* Buscador flexible: se encoge antes de provocar scroll en la toolbar */
.geobar {
  width: clamp(170px, 26vw, 300px) !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.geobar .gin {
  height: 28px !important;
}

/* El desplegable de resultados se ancla al alto real del input (28px + 6 de aire);
   el inline de index asume 34px y dejaba un hueco de 12px */
.geobar .gres {
  bottom: 34px !important;
}

.geobar input {
  font-size: 12px !important;
}

/* ═══════════════════════════════════════════════════════════
   Login (monitor #login + panel-admin + glass)
   ═══════════════════════════════════════════════════════════ */
#login .box {
  padding: 22px 22px 20px !important;
  width: min(92vw, 328px) !important;
  border-radius: 14px !important;
}

#login h1 {
  margin: 0 0 12px !important;
  font-size: 18px !important;
}

#login input[type="text"],
#login input[type="email"],
#login input[type="password"],
#login input {
  padding: 10px 12px !important;
  margin-bottom: 9px !important;
  /* 16px evita zoom iOS — no bajar */
  font-size: 16px !important;
}

#login button,
#login .box button[type="submit"],
body.panel-admin #login button {
  padding: 11px 12px !important;
  font-size: 14px !important;
  min-height: 42px;
}

#login .gpp-logo-login,
.gpp-logo-login {
  max-height: 36px !important;
  margin-bottom: 8px !important;
}

body.panel-admin #login .box {
  padding: 22px !important;
}

body.panel-admin #login h1 {
  font-size: 18px !important;
}

/* Portada theater (#login en index) — ops cards más densas */
#login .stage-left {
  width: min(280px, 36vw) !important;
}
#login .ops {
  width: 100% !important;
  gap: 8px !important;
}

#login .ops-card .hd {
  padding: 9px 11px 6px !important;
}

#login .hud-top {
  padding: 12px 18px !important;
}

#login .hud-brand img {
  height: 36px !important;
}

/* ═══════════════════════════════════════════════════════════
   Panel admin / gestión (panel.html)
   ═══════════════════════════════════════════════════════════ */
body.panel-admin #bar {
  height: 46px !important;
  gap: 10px !important;
  padding: 0 12px !important;
}

body.panel-admin #bar a {
  font-size: 13px !important;
  padding: 3px 6px !important;
}

body.panel-admin #gsearch {
  height: 30px !important;
}

body.panel-admin #gsearch input {
  font-size: 12.5px !important;
  padding: 0 10px !important;
}

body.panel-admin .wrap {
  min-height: calc(100vh - 46px) !important;
}

body.panel-admin #tabbar {
  padding: 4px 8px 0 !important;
}

body.panel-admin .ttab {
  padding: 6px 10px !important;
  font-size: 12px !important;
}

body.panel-admin nav {
  width: 172px !important;
  padding: 8px 0 !important;
}

body.panel-admin nav .it {
  padding: 9px 14px !important;
  font-size: 12.5px !important;
}

body.panel-admin main {
  padding: 14px !important;
}

body.panel-admin h2 {
  margin: 0 0 12px !important;
  font-size: 17px !important;
}

body.panel-admin .cards {
  gap: 10px !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
}

body.panel-admin .kpi,
body.panel-admin .stat {
  padding: 12px 13px !important;
}

body.panel-admin .stat .n {
  font-size: 28px !important;
}

body.panel-admin .kpi .n {
  font-size: 22px !important;
}

body.panel-admin .optabs span {
  padding: 7px 12px !important;
  font-size: 12.5px !important;
}

body.panel-admin .panelw {
  padding: 12px 14px !important;
  margin-top: 12px !important;
}

body.panel-admin table {
  font-size: 12.5px !important;
}

body.panel-admin th,
body.panel-admin td {
  padding: 7px 10px !important;
}

body.panel-admin th {
  font-size: 11px !important;
}

body.panel-admin .btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
}

body.panel-admin .form {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

body.panel-admin .form input,
body.panel-admin .form select,
body.panel-admin textarea {
  padding: 7px 9px !important;
  font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════
   Reportes / dispositivo / recorrido (shells compartidos)
   ═══════════════════════════════════════════════════════════ */
body:has(.ctl) .ctl,
.ctl {
  gap: 8px;
}

/* top chrome en reportes/dispositivo si usan .bar / header */
.bar,
#topbar,
.topbar {
  min-height: 0;
}

body:has(#app > .ctl) #app > .ctl {
  padding: 6px 10px !important;
  gap: 6px !important;
}

body:has(#app > .ctl) .ctl label {
  font-size: 10px !important;
  gap: 1px !important;
}

body:has(#app > .ctl) .ctl input,
body:has(#app > .ctl) .ctl select {
  padding: 5px 8px !important;
  font-size: 12.5px !important;
  min-height: 32px !important;
}

/* Recorrido — KPIs, trip historial, fuel dock, playback */
body:has(#app > .ctl) .sum {
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  gap: 5px !important;
}

body:has(#app > .ctl) .sum .b,
body:has(#app > .ctl) .sum #tsumFuelEff {
  padding: 5px 9px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
}

body:has(#app > .ctl) .kpis span,
body:has(#app > .ctl) .kpi-bar span {
  padding: 4px 8px !important;
  font-size: 10.5px !important;
}

body:has(#app > .ctl) .trip-panel {
  left: 8px !important;
  right: 8px !important;
  bottom: 70px !important;
  max-height: min(28vh, 240px) !important;
  border-radius: 12px !important;
}

body:has(#app > .ctl) .trip-tabs {
  min-height: 32px !important;
}

body:has(#app > .ctl) .trip-tabs button {
  padding: 0 10px !important;
  font-size: 11.5px !important;
  min-height: 32px !important;
}

body:has(#app > .ctl) .trip-body {
  max-height: min(22vh, 190px) !important;
}

body:has(#app > .ctl) .trip-pane {
  padding: 8px 10px !important;
}

body:has(#app > .ctl) #pbbar {
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  min-height: 40px !important;
  padding: 4px 8px !important;
  gap: 6px !important;
}

body:has(#app > .ctl) #pbbar .pb-kml,
body:has(#app > .ctl) #pbbar .pb-exp,
body:has(#app > .ctl) #pbbar .pb-sched {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
}

body:has(#app > .ctl) .pb-info {
  padding: 7px 10px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}

body:has(#app > .ctl) .pb-info .k {
  font-size: 9.5px !important;
}

body:has(#app > .ctl) .pb-info .v {
  font-size: 11px !important;
}

body:has(#app > .ctl) .pb-fuel {
  margin-top: 4px !important;
  padding-top: 4px !important;
}

body:has(#app > .ctl) .fuel-dock,
body:has(#app > .ctl) #fuelPanel {
  padding: 8px 12px 14px !important;
}

body:has(#app > .ctl) .fuel-dock-hd {
  margin-bottom: 4px !important;
}

body:has(#app > .ctl) #fuelPanel h3,
body:has(#app > .ctl) .fuel-dock-title h3 {
  font-size: 12px !important;
}

/* Reportes — shell + árbol + filtros + KPI densos */
body:has(#app .repwrap) #bar {
  height: 40px !important;
  gap: 8px !important;
  padding: 0 10px !important;
}

body:has(#app .repwrap) #bar a {
  font-size: 13px !important;
  padding: 3px 6px !important;
}

body:has(#app .repwrap) #bar button {
  padding: 4px 10px !important;
  font-size: 12px !important;
}

body:has(#app .repwrap) .reptree {
  width: 230px !important;
  font-size: 12.5px !important;
}

body:has(#app .repwrap) .reptree .rth {
  padding: 8px 10px !important;
  font-size: 12.5px !important;
}

body:has(#app .repwrap) .reptree .rcat {
  padding: 7px 10px !important;
  font-size: 12px !important;
}

body:has(#app .repwrap) .reptree .ritem {
  padding: 6px 10px 6px 22px !important;
  font-size: 12px !important;
}

body:has(#app .repwrap) .repmain {
  padding: 10px !important;
}

body:has(#app .repwrap) .repbar {
  padding: 8px 10px !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  font-size: 12.5px !important;
}

body:has(#app .repwrap) .repbar input[type="date"],
body:has(#app .repwrap) .repbar select {
  padding: 5px 8px !important;
  font-size: 12.5px !important;
  min-height: 32px !important;
}

body:has(#app .repwrap) .repcards {
  gap: 8px !important;
  margin-bottom: 8px !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
}

body:has(#app .repwrap) .rcard {
  padding: 10px 12px !important;
  min-height: 72px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

body:has(#app .repwrap) .rcard b {
  font-size: 20px !important;
  margin-top: 2px !important;
}

body:has(#app .repwrap) .rcard small {
  font-size: 11px !important;
}

body:has(#app .repwrap) .rcard.rcard-hint {
  padding: 8px 10px !important;
  min-height: 0 !important;
}

body:has(#app .repwrap) .rcard.rcard-hint b {
  font-size: 12.5px !important;
}

body:has(#app .repwrap) .repfoot {
  gap: 6px !important;
  margin-top: 8px !important;
}

body:has(#app .repwrap) .rpg {
  min-width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
}

/* Reportes — dashboard flota densificado (mismos tokens) */
body:has(#app .repwrap) .dash-chip {
  padding: 5px 10px !important;
  font-size: 12px !important;
  min-height: 30px !important;
  gap: 6px !important;
}

body:has(#app .repwrap) .dash-chip b {
  font-size: 13px !important;
}

body:has(#app .repwrap) .dash-kpis,
body:has(#app .repwrap) .dash-fuel-kpis {
  gap: 8px !important;
  margin-bottom: 8px !important;
}

body:has(#app .repwrap) .dash-kpi {
  padding: 10px 11px 9px !important;
  min-height: 74px !important;
  border-radius: 10px !important;
}

body:has(#app .repwrap) .dash-kpi .lbl {
  font-size: 11px !important;
}

body:has(#app .repwrap) .dash-kpi .val {
  font-size: 18px !important;
  margin-top: 4px !important;
}

body:has(#app .repwrap) .dash-kpi .val small {
  font-size: 11px !important;
}

body:has(#app .repwrap) .dash-kpi .sub {
  font-size: 10.5px !important;
  margin-top: 2px !important;
}

body:has(#app .repwrap) .dash-panel {
  padding: 10px 12px !important;
  min-height: 180px !important;
  border-radius: 10px !important;
}

body:has(#app .repwrap) .dash-panel h4 {
  font-size: 12.5px !important;
}

body:has(#app .repwrap) .dash-panel .hint {
  font-size: 11px !important;
  margin-bottom: 8px !important;
}

body:has(#app .repwrap) .dash-grid {
  gap: 8px !important;
  margin-bottom: 8px !important;
}

body:has(#app .repwrap) .dash-live {
  gap: 6px !important;
  margin-bottom: 8px !important;
}

body:has(#app .repwrap) .dash-table-wrap .cap {
  padding: 8px 10px !important;
}

body:has(#app .repwrap) .dash-sort button,
body:has(#app .repwrap) .dash-tabs button {
  padding: 4px 8px !important;
  font-size: 11.5px !important;
  min-height: 28px !important;
}

body:has(#app .repwrap) .dash-fuel-now {
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  border-radius: 10px !important;
}

body:has(#app .repwrap) .dash-fuel-now h4 {
  font-size: 12.5px !important;
}

body:has(#app .repwrap) .dash-tanks {
  gap: 6px 12px !important;
}

body:has(#app .repwrap) .dash-bar-row .meta,
body:has(#app .repwrap) .dash-tank .st,
body:has(#app .repwrap) .dash-net {
  font-size: 10.5px !important;
}

/* Dispositivo — subnav + main alineado a panel-admin */
body:has(nav.sub#subnav) nav.sub {
  width: 210px !important;
  padding: 8px 0 !important;
}

body:has(nav.sub#subnav) nav.sub .h {
  padding: 4px 12px 8px !important;
  font-size: 13.5px !important;
}

body:has(nav.sub#subnav) nav.sub .it,
body:has(nav.sub#subnav) nav.sub a {
  padding: 8px 12px !important;
  font-size: 12.5px !important;
}

body:has(nav.sub#subnav) #main {
  padding: 14px 16px !important;
}

body:has(nav.sub#subnav) #main h2 {
  margin: 0 0 10px !important;
  font-size: 17px !important;
}

body:has(nav.sub#subnav) #main .form {
  gap: 8px !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}

body:has(nav.sub#subnav) #main .form input,
body:has(nav.sub#subnav) #main .form select {
  padding: 7px 9px !important;
  font-size: 13px !important;
}

body:has(nav.sub#subnav) #main .btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
}

body:has(nav.sub#subnav) #main table {
  font-size: 12.5px !important;
}

body:has(nav.sub#subnav) #main th,
body:has(nav.sub#subnav) #main td {
  padding: 7px 10px !important;
}

body:has(nav.sub#subnav) #main th {
  font-size: 11px !important;
}

/* Tablas genéricas portal */
main table th,
main table td,
.wrap table th,
.wrap table td {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* ═══════════════════════════════════════════════════════════
   Tablas anchas — scroll horizontal (page chrome no se ensancha)
   Parent (.repmain / #main) keep overflow-x:hidden; only the wrap scrolls.
   ═══════════════════════════════════════════════════════════ */
.tbl-scroll,
#repbox {
  display: block;
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Dashboard card: page CSS uses overflow:hidden (radius); allow x-scroll here */
.dash-table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#repbox > table,
.tbl-scroll > table,
.dash-table-wrap > table,
.repmain #repbox table {
  width: max-content;
  min-width: 100%;
  max-width: none;
}

body:has(#app .repwrap) #repbox {
  overflow-x: auto !important;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   Monitor — capas (ciclo) arriba + zoom debajo (topright)
   Scoped with #maptb so recorrido KPI offsets below are untouched.
   ═══════════════════════════════════════════════════════════ */
body:has(#maptb) .leaflet-top.leaflet-right {
  top: 10px !important;
  right: 12px !important;
  z-index: 450;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

body:has(#maptb) .leaflet-control-zoom,
body:has(#maptb) .leaflet-control-layers,
body:has(#maptb) .gpp-layer-cycle {
  margin: 0 !important;
}

/* Botón capas: un clic cicla el basemap (sin menú Calles/Satélite/…) */
.gpp-layer-cycle {
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15, 26, 61, 0.16) !important;
}

.gpp-layer-cycle a.gpp-layer-cycle-btn {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: #1F4E78 !important;
  border: 0 !important;
  border-radius: 10px !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.gpp-layer-cycle a.gpp-layer-cycle-btn:hover {
  background: #f2f6fb !important;
  color: #1a56db !important;
}

.gpp-layer-cycle a.gpp-layer-cycle-btn:active {
  transform: scale(0.96);
}

body:has(#maptb) .leaflet-control-zoom {
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15, 26, 61, 0.16) !important;
}

body:has(#maptb) .leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  color: #1F4E78 !important;
}

/* ═══════════════════════════════════════════════════════════
   Recorrido — capas / zoom libres del strip KPI (.sum)
   .sum is a sibling ABOVE .map-wrap in z-index; offset controls below KPIs.
   ═══════════════════════════════════════════════════════════ */
body:has(#app > .ctl) .leaflet-top.leaflet-right {
  top: 56px !important;
  right: 10px !important;
  z-index: 450;
}

body:has(#app > .ctl) .leaflet-top.leaflet-left {
  top: 56px !important;
  left: 10px !important;
  z-index: 450;
}

body:has(#app > .ctl) .leaflet-control-layers,
body:has(#app > .ctl) .leaflet-control-zoom {
  margin-top: 0 !important;
}

body:has(#app > .ctl) .leaflet-control-layers {
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(15, 26, 61, 0.18) !important;
  overflow: hidden;
}

body:has(#app > .ctl) .leaflet-control-layers-expanded {
  padding: 8px 10px !important;
  background: rgba(242, 245, 249, 0.98) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-width: 118px;
}

/* Leave a gap so KPI pills never paint over the layer icon */
body:has(#app > .ctl) .sum {
  right: 52px !important;
}

/* Map clicks pass through control chrome; controls stay clickable */
body:has(#app > .ctl) .map-wrap .leaflet-control-container {
  pointer-events: none;
}
body:has(#app > .ctl) .map-wrap .leaflet-control {
  pointer-events: auto;
}

@media (max-width: 767px) {
  body:has(#app > .ctl) .leaflet-top.leaflet-right,
  body:has(#app > .ctl) .leaflet-top.leaflet-left {
    top: 88px !important; /* KPIs wrap to 2 rows */
  }
  body:has(#app > .ctl) .sum {
    right: 48px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Legales / share — tipografía un poco más densa
   ═══════════════════════════════════════════════════════════ */
body.legal main,
.legal-wrap,
.share-box {
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════
   Modales premium densos — Linear/Stripe (v1.6)
   Simple ≤460 · Device-config ≤720 · inputs 30px · CTAs derecha
   ═══════════════════════════════════════════════════════════ */
#ov,
.ov,
#schedov.ov {
  padding: 8px !important;
}

/* Simple dialogs: calm compact width */
#modal:not(.dc-wide):not(.gpp-modal-wide):not(:has(.dc-shell)):not(:has(.gpp-modal-shell)),
.modal:not(.dc-wide):not(.gpp-modal-wide):not(:has(.dc-shell)):not(:has(.gpp-modal-shell)),
.gpp-modal:not(.dc-wide):not(.gpp-modal-wide):not(.sched-modal) {
  width: min(92vw, 460px) !important;
  min-width: 0 !important;
  max-width: 460px !important;
}

/* Wide / device editor — not full screen */
#modal.dc-wide,
#modal.gpp-modal-wide,
.modal.dc-wide,
.gpp-modal-wide,
#ov.dc-wide #modal,
#schedov .gpp-modal,
.sched-modal.gpp-modal {
  width: min(94vw, 720px) !important;
  min-width: min(92vw, 480px) !important;
  max-width: 720px !important;
}

#modal:not(:has(.gpp-modal-shell)):not(:has(.dc-shell)),
.modal:not(:has(.gpp-modal-shell)):not(:has(.dc-shell)) {
  padding: 10px 12px !important;
}

#modal:not(:has(.gpp-modal-shell)) h3,
.modal:not(:has(.gpp-modal-shell)) h3 {
  font-size: 14px !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}

#modal,
.modal,
.gpp-modal {
  border-radius: 12px !important;
  max-height: 88vh !important;
}

.gpp-modal-header {
  padding: 8px 12px 6px !important;
  gap: 6px !important;
}

.gpp-modal-header h3 {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

.gpp-modal-sub,
.gpp-modal-header .mono {
  font-size: 10.5px !important;
  margin-top: 1px !important;
  line-height: 1.25 !important;
}

.gpp-modal-body {
  padding: 8px 12px !important;
}

.gpp-modal-footer {
  padding: 6px 12px 8px !important;
  gap: 6px !important;
  justify-content: flex-end !important;
}

.gpp-modal-footer .btn,
.gpp-modal-footer button.btn {
  min-height: 30px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.gpp-modal-close {
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
}

.gpp-tabs,
.gpp-modal-tabs {
  padding: 0 4px !important;
}

.gpp-tabs .etab,
.gpp-modal-tabs .etab,
.etab {
  padding: 5px 8px !important;
  font-size: 11.5px !important;
  min-height: 30px !important;
  font-weight: 500 !important;
}

.gpp-modal label,
#modal label,
#ov label,
.modal label,
#schedov label {
  font-size: 11px !important;
  font-weight: 500 !important;
  margin: 4px 0 2px !important;
  line-height: 1.2 !important;
  color: var(--text2, #5B6478) !important;
}

#modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
#modal select,
#modal textarea,
#ov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
#ov select,
#ov textarea,
.gpp-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.gpp-modal select,
.gpp-modal textarea,
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.modal select,
.modal textarea,
#schedov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
#schedov select,
#schedov textarea {
  padding: 4px 8px !important;
  font-size: 12.5px !important;
  min-height: 30px !important;
  border-radius: 6px !important;
  line-height: 1.25 !important;
}

#modal textarea,
#ov textarea,
.gpp-modal textarea,
.modal textarea,
#schedov textarea {
  min-height: 52px !important;
}

.gpp-form-grid {
  gap: 0 8px !important;
}

.gpp-action-card {
  padding: 8px 10px !important;
  margin-bottom: 6px !important;
  border-radius: 8px !important;
}

.gpp-action-card-title {
  font-size: 10.5px !important;
  margin-bottom: 4px !important;
}

.gpp-action-row {
  gap: 6px !important;
  margin-bottom: 4px !important;
}

.gpp-action-row > .btn,
.gpp-action-row > button.btn,
.gpp-quick-actions .btn,
#ov .btn,
#modal .btn,
.gpp-modal .btn,
#schedov .btn {
  min-height: 30px !important;
  font-size: 12px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

#ov .btn.sm,
#modal .btn.sm,
.gpp-modal .btn.sm {
  min-height: 26px !important;
  font-size: 11.5px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* CTA rows: prefer right-aligned compact (not full-width slabs) */
#modal .gpp-fuel-ui > .btn[style*="width:100%"],
#modal .gpp-fuel-ui > div > .btn[style*="width:100%"],
.dc-body > .btn[style*="width:100%"] {
  width: auto !important;
  min-width: 132px !important;
  margin-left: auto !important;
  display: block !important;
}

.gpp-fuel-ui > div:last-child:has(> .btn) {
  justify-content: flex-end !important;
}

.gpp-fuel-ui > .btn[style*="width:100%"] {
  width: auto !important;
  min-width: 148px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Editor combustible (lista / editar tanque / asistente) — UI only */
.gpp-fuel-ui h3 {
  font-size: 15px !important;
  margin: 0 0 4px !important;
}

.gpp-fuel-ui .gpp-fuel-gauge {
  margin: 4px 0 !important;
}

.gpp-fuel-ui .gpp-fuel-gauge-hd {
  font-size: 12px !important;
  margin-bottom: 2px !important;
}

.gpp-fuel-ui .gpp-fuel-gauge-bar {
  height: 6px !important;
  border-radius: 4px !important;
}

.gpp-fuel-ui .gpp-fuel-tankcard .btn.sm {
  min-height: 28px !important;
  padding: 3px 9px !important;
  font-size: 11.5px !important;
}

.gpp-fuel-ui .gpp-fuel-cal-row {
  max-width: 320px;
}

.gpp-fuel-ui .gpp-fuel-cal-inp {
  flex: 0 1 110px !important;
  width: 110px !important;
  max-width: 42% !important;
  min-height: 30px !important;
  padding: 4px 8px !important;
  font-size: 12.5px !important;
}

.gpp-fuel-ui .gpp-fuel-cal-row .btn.sm {
  min-height: 28px !important;
  min-width: 28px !important;
  padding: 2px 6px !important;
}

.gpp-fuel-ui #f_csv {
  min-height: 44px !important;
  height: 44px !important;
}

.gpp-fuel-ui .btn:not(.sm) {
  min-height: 34px !important;
  font-size: 12.5px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Device config shell (CONFIGURACIÓN DEL DISPOSITIVO) */
#ov.dc-wide {
  padding: 8px !important;
  align-items: center !important;
}

#ov.dc-wide #modal,
#ov.dc-wide .modal {
  max-height: 88vh !important;
  height: auto !important;
  align-self: center !important;
}

.dc-hd {
  padding: 8px 12px 6px !important;
  gap: 6px !important;
}

.dc-kicker {
  font-size: 9.5px !important;
  letter-spacing: 0.05em !important;
}

.dc-hd h3,
#dc_title {
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

.dc-hd .mono,
#dc_sub {
  font-size: 10px !important;
  margin-top: 1px !important;
}

.dc-hd .btn {
  min-height: 28px !important;
  min-width: 28px !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
}

.dc-tabs {
  padding: 0 4px !important;
}

.dc-tab {
  padding: 5px 8px !important;
  font-size: 11.5px !important;
  min-height: 30px !important;
  font-weight: 500 !important;
}

.dc-body {
  padding: 8px 12px 10px !important;
}

.dc-grid {
  gap: 0 8px !important;
}

.dc-card {
  padding: 6px 8px !important;
  margin: 4px 0 !important;
  border-radius: 7px !important;
}

.dc-card[style] {
  margin-top: 6px !important;
}

.dc-card p {
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
}

.dc-icons {
  gap: 4px !important;
  margin: 2px 0 4px !important;
}

/* Icon tiles keep SVG footprint; slightly denser */
.dc-ico {
  width: 40px !important;
  height: 34px !important;
  font-size: 15px !important;
  border-radius: 8px !important;
  line-height: 0 !important;
  padding: 0 !important;
}
.dc-ico .gpp-veh-svg { display: block; pointer-events: none; }
.dc-ico .dc-ico-img { width: 28px !important; height: 28px !important; }

.dc-subtabs {
  gap: 4px !important;
  margin-bottom: 6px !important;
}

.dc-stab {
  padding: 3px 8px !important;
  font-size: 11px !important;
  min-height: 26px !important;
  border-radius: 999px !important;
}

.dc-algrid {
  gap: 5px !important;
}

.dc-al,
.dc-radio {
  gap: 6px !important;
  padding: 5px 7px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
}

.dc-al input,
.dc-radio input {
  width: 15px !important;
  height: 15px !important;
  min-height: 0 !important;
  margin-top: 1px !important;
}

.dc-body > .btn[style*="width:100%"],
.dc-body > button.btn[style*="width:100%"] {
  width: auto !important;
  min-width: 140px !important;
  margin: 8px 0 0 auto !important;
  display: block !important;
}

/* Reportes programados */
.sched-modal.gpp-modal,
#schedov .gpp-modal {
  width: min(96vw, 520px) !important;
  max-width: 520px !important;
}

.sched-tabs {
  padding: 0 8px !important;
}

.sched-section {
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  border-radius: 8px !important;
}

.sched-section-title {
  font-size: 12px !important;
  margin: 0 0 2px !important;
}

.sched-section-hint,
.sched-inline-hint {
  font-size: 11px !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}

.sched-inline-hint {
  margin: 4px 0 0 !important;
}

.sched-preview {
  margin-top: 8px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
}

.sched-fmt-pick {
  gap: 8px !important;
}

.sched-fmt-btn {
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  gap: 6px !important;
  border-radius: 8px !important;
}

/* Unit picker dropdown */
.gpp-upick-btn {
  min-height: 34px !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
}

.gpp-upick-search {
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

.gpp-upick-opt {
  min-height: 32px !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
}

.gpp-upick-tool {
  min-height: 28px !important;
  padding: 3px 8px !important;
  font-size: 11.5px !important;
}

/* Monitor overlays con padding inline (share / geo / poi / cmd / ios) */
#shareov > div,
#gfov > div,
#poiov > div,
#cmdov > div,
#iosPwaModal > div {
  padding: 10px 12px !important;
  border-radius: 12px !important;
  width: min(94vw, 420px) !important;
}

#cmdov > div {
  width: min(94vw, 400px) !important;
}

#shareov h3,
#gfov h3,
#poiov h3,
#cmdov h3,
#iosPwaModal h3 {
  font-size: 15px !important;
}

#gfov label,
#poiov label,
#shareov label,
#cmdov label {
  font-size: 11.5px !important;
}

#gfov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
#gfov select,
#poiov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
#shareov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
#shareov select,
#shareov textarea,
#cmdov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
#cmdov select,
#cmdov textarea {
  padding: 6px 10px !important;
  font-size: 13px !important;
  min-height: 34px !important;
  border-radius: 7px !important;
  margin-top: 2px !important;
  margin-bottom: 8px !important;
}

#gfov button,
#poiov button,
#shareov button,
#cmdov button {
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}

#gfunits {
  max-height: 120px !important;
  padding: 4px 8px !important;
  margin-bottom: 10px !important;
}

#pfov > div > div:first-child,
#cfgov > div > div:first-child,
#uaov > div > div:first-child {
  padding: 8px 12px !important;
  font-size: 13px !important;
}

#pfov .pftab,
#cfgov .cfgtab {
  padding: 7px 10px !important;
  font-size: 12px !important;
  min-height: 34px !important;
}

#pfbody,
#cfgbody,
#uabody {
  padding: 10px 12px !important;
}

#pfbody input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
#pfbody select,
#pfbody textarea,
#cfgbody input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
#cfgbody select,
#cfgbody textarea {
  padding: 6px 10px !important;
  font-size: 13px !important;
  min-height: 34px !important;
}

#cmdov > div > div:first-child {
  margin-bottom: 8px !important;
  gap: 12px !important;
}

#cmdtb0,
#cmdtb1,
#cmdtb2 {
  font-size: 12.5px !important;
  padding: 0 0 6px !important;
}

/* Auth — cambio obligatorío de contraseña */
#gpp-mcp-ov {
  padding: 12px !important;
}

#gpp-mcp-ov > div {
  padding: 16px 16px 14px !important;
  border-radius: 10px !important;
}

#gpp-mcp-ov h2 {
  font-size: 16px !important;
  margin: 0 0 6px !important;
}

#gpp-mcp-ov p {
  font-size: 12.5px !important;
  margin: 0 0 12px !important;
}

#gpp-mcp-ov input {
  padding: 7px 10px !important;
  font-size: 16px !important; /* no bajar: evita zoom iOS en ≥768 */
  min-height: 36px !important;
  margin-bottom: 8px !important;
}

#gpp-mcp-ov button {
  min-height: 34px !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
}

/* Context menu + bottom drops */
#uctx {
  font-size: 12px !important;
  border-radius: 8px !important;
}

#aldrop,
#gfdrop,
#poidrop {
  font-size: 12.5px !important;
}

/* ═══════════════════════════════════════════════════════════
   Móvil — no romper touch ni zoom iOS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body.panel-admin nav .it {
    padding: 10px 4px !important;
  }

  #login input[type="text"],
  #login input[type="email"],
  #login input[type="password"],
  #login input {
    font-size: 16px !important;
  }

  #panel {
    width: min(288px, calc(100vw - 72px)) !important;
  }

  /* Device-config: restaurar bottom-sheet (gpp-ui flex-end) */
  #ov.dc-wide {
    align-items: flex-end !important;
  }

  #ov.dc-wide #modal,
  #ov.dc-wide .modal {
    align-self: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    height: auto !important;
  }

  /* Inputs en modales: 16px evita zoom iOS; touch un poco más alto */
  #modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #modal select,
  #ov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #ov select,
  .gpp-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .gpp-modal select,
  .modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .modal select,
  #schedov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #schedov select,
  #gfov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #gfov select,
  #poiov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #shareov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #shareov select,
  #cmdov input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #cmdov select,
  #pfbody input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #pfbody select,
  #cfgbody input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #cfgbody select,
  #gpp-mcp-ov input {
    font-size: 16px !important;
    min-height: 40px !important;
  }

  .gpp-modal-footer .btn,
  .dc-tab,
  .etab,
  #gfov button,
  #poiov button,
  #shareov button,
  #cmdov button,
  #gpp-mcp-ov button {
    min-height: 40px !important;
  }

  .gpp-modal-header,
  .gpp-modal-body,
  .gpp-modal-footer,
  .dc-hd,
  .dc-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body:has(nav.sub#subnav) #main {
    padding: 12px !important;
  }

  body:has(nav.sub#subnav) #main .form input,
  body:has(nav.sub#subnav) #main .form select {
    font-size: 16px !important;
  }

  body:has(#app .repwrap) .reptree {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v1.7: Overlays artesanales al sistema denso.
   #cmdov #shareov #gfov #poiov #pfov #cfgov ya comparten el skin de
   color en gpp-glass.css; aquí reciben los mismos tokens de densidad
   que los modales premium (v1.6). Solo desktop: en móvil conservan
   sus tap-targets de 44px y los inputs de 16px (anti-zoom iOS).
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
  #cmdov > div,
  #shareov > div,
  #gfov > div,
  #poiov > div {
    width: min(92vw, 460px) !important;
    max-height: 88vh !important;
    padding: 12px 14px !important;
  }

  #pfov > div,
  #cfgov > div {
    max-height: 88vh !important;
  }

  #cmdov h3,
  #shareov h3,
  #gfov h3,
  #poiov h3 {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  #cmdov [id^="cmdtb"] {
    font-size: 13px !important;
    padding-bottom: 6px !important;
  }

  #cmdov input:not([type="checkbox"]):not([type="radio"]),
  #cmdov select,
  #cmdov textarea,
  #shareov input:not([type="checkbox"]):not([type="radio"]),
  #shareov select,
  #shareov textarea,
  #gfov input:not([type="checkbox"]):not([type="radio"]),
  #gfov select,
  #poiov input:not([type="checkbox"]):not([type="radio"]),
  #pfbody input:not([type="checkbox"]):not([type="radio"]),
  #pfbody select,
  #cfgbody input:not([type="checkbox"]):not([type="radio"]),
  #cfgbody select {
    padding: 4px 8px !important;
    font-size: 12.5px !important;
    min-height: 30px !important;
    border-radius: 6px !important;
    line-height: 1.25 !important;
  }

  #cmdov button,
  #shareov button,
  #gfov button,
  #poiov button,
  #pfbody button,
  #cfgbody button {
    min-height: 32px !important;
    font-size: 12.5px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    border-radius: 8px !important;
  }

  #shareov label {
    min-height: 32px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v1.8: responsive polish — visual only, no handlers or data flow.
   Scoped per page so Monitor and Recorrido keep independent geometry.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body.page-monitor #panel {
    height: clamp(244px, 40dvh, 360px) !important;
    max-height: calc(100dvh - 232px);
  }

  body.page-monitor #panelsearch #searchscope,
  body.page-monitor #panelsearch #search,
  body.page-monitor #sortsel {
    min-height: 44px !important;
  }

  body.page-monitor .filters .chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 12px !important;
  }

  body.page-monitor .row .fav,
  body.page-monitor .row .dots,
  body.page-monitor .phead .pmin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  body.page-monitor #maptb .tbtn {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.page-monitor #al-toast-stack {
    top: auto;
    bottom: calc(112px + env(safe-area-inset-bottom));
    left: 8px;
    right: 8px;
    width: auto;
    max-height: min(34dvh, 240px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    scrollbar-width: thin;
  }

  body.page-monitor .al-toast-body {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    padding: 9px 9px 8px 12px;
  }

  body.page-monitor .al-toast .al-x,
  body.page-monitor .al-toast .al-map {
    min-height: 44px;
  }

  body.page-recorrido {
    overflow-x: clip;
  }

  body.page-recorrido #app,
  body.page-recorrido #bar,
  body.page-recorrido .ctl,
  body.page-recorrido .pane,
  body.page-recorrido .map-stage {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.page-recorrido #bar {
    height: auto;
    min-height: 44px;
    padding: 4px 8px;
    gap: 6px;
  }

  body.page-recorrido #bar .gpp-logo-on-brand {
    flex: 0 1 116px;
    min-width: 82px;
    max-width: 116px;
  }

  body.page-recorrido #bar .devtag {
    max-width: min(42vw, 170px);
    min-width: 0;
    overflow: hidden;
  }

  body.page-recorrido #bar .devtag span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.page-recorrido .ctl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 8px !important;
    padding: 8px !important;
  }

  body.page-recorrido .ctl > label,
  body.page-recorrido .ctl > button,
  body.page-recorrido .ctl > div {
    min-width: 0;
    width: 100%;
  }

  body.page-recorrido .ctl > label:first-child,
  body.page-recorrido .ctl > div {
    grid-column: 1 / -1;
  }

  body.page-recorrido .ctl input,
  body.page-recorrido .ctl select,
  body.page-recorrido .ctl .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  body.page-recorrido .ctl > div {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px !important;
  }

  body.page-recorrido .sum {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  body.page-recorrido .sum .b {
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }

  body.page-recorrido .leaflet-top.leaflet-right,
  body.page-recorrido .leaflet-top.leaflet-left {
    top: 54px !important;
  }

  body.page-recorrido .rail > a,
  body.page-recorrido .rail > button {
    min-height: 48px;
  }
}

@media (max-width: 479px) {
  body.page-recorrido #bar > a:not(.gpp-logo-on-brand) {
    display: none;
  }

  body.page-recorrido #bar b {
    font-size: 12.5px;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  body.page-recorrido .map-stage {
    height: calc(100dvh - 120px) !important;
    min-height: 240px !important;
    max-height: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v1.9: Lote A accesible — reflow, touch targets and safe areas.
   HTML/CSS only; no data flow or handler changes.
   ═══════════════════════════════════════════════════════════ */
#panel .ptabs button,
#panel .filters button,
body:has(#app .repwrap) button.rcat,
body:has(#app .repwrap) button.ritem {
  font: inherit;
}

#panel .ptabs button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
}

#panel .ptabs button.on {
  color: var(--primary);
}

#panel button.psec-hd,
#legend button.lh {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}

#addrbar {
  border: 0;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 767px) {
  body:has(.rail) #app {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  body.page-monitor #panel {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: 360px;
    height: clamp(320px, 58dvh, 440px) !important;
    max-height: calc(100dvh - 72px - env(safe-area-inset-bottom));
  }

  body.page-monitor #map {
    bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  body.page-monitor #maptb {
    bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
  }

  body.page-monitor #legend {
    bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
  }

  body.page-monitor #panelPeek {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
  }

  body.page-monitor #panel button.psec-hd {
    min-height: 44px !important;
  }

  body.page-monitor .geobar .gin,
  body.page-monitor .geobar input,
  body.page-monitor .geobar .gbtn {
    min-height: 44px !important;
  }

  body.page-monitor .geobar .gin {
    height: 44px !important;
  }

  body.page-monitor .geobar .gbtn {
    min-width: 44px !important;
  }

  body:has(#app .repwrap) .repbar input,
  body:has(#app .repwrap) .repbar select,
  body:has(#app .repwrap) .repbar button,
  body:has(#app .repwrap) .rpg,
  body:has(#app .repwrap) .dash-sort button,
  body:has(#app .repwrap) .reptree .rcat,
  body:has(#app .repwrap) .reptree .ritem {
    min-height: 44px !important;
  }

  body:has(#app .repwrap) .repbar input,
  body:has(#app .repwrap) .repbar select {
    font-size: 16px !important;
  }

  body:has(nav.sub#subnav) nav.sub {
    width: 100% !important;
    padding: 0 !important;
  }

  body:has(nav.sub#subnav) nav.sub .it,
  body:has(nav.sub#subnav) nav.sub a,
  body:has(nav.sub#subnav) #main .btn,
  body:has(nav.sub#subnav) #main .btn.sm {
    min-height: 44px !important;
  }

  body:has(nav.sub#subnav) nav.sub button.it {
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  body:has(nav.sub#subnav) #main .btn.sm {
    min-width: 44px !important;
  }

  body.page-recorrido .trip-tabs button,
  body.page-recorrido #pbbar button,
  body.page-recorrido #pbbar select {
    min-height: 44px !important;
  }

  body.page-recorrido:has(#app > .ctl) .ctl input,
  body.page-recorrido:has(#app > .ctl) .ctl select,
  body.page-recorrido:has(#app > .ctl) .ctl .btn {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  body.page-recorrido #bar .gpp-logo-on-brand,
  body.page-share #top .gpp-logo-on-brand {
    min-height: 44px !important;
  }

  body.page-share #top .gpp-logo-on-brand {
    min-width: 44px !important;
  }

  body.page-share {
    --share-top-h: calc(42px + env(safe-area-inset-top));
  }

  body.page-share #top {
    padding-top: env(safe-area-inset-top);
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  body.page-monitor #panel {
    height: calc(100dvh - 72px - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body.page-monitor #list {
    flex: 0 0 128px;
    min-height: 128px !important;
    overflow-y: auto !important;
  }
}