/* Notia Ventas · ajustes móviles */
@media (max-width: 700px){
  html,body{overflow-x:hidden}

  .topbar{
    height:64px;
    min-height:64px;
    padding:0 10px;
    gap:8px;
    overflow:hidden;
  }
  .brand{gap:7px;min-width:0;flex:0 0 auto}
  .brand-mark{width:32px;height:32px;border-radius:10px;font-size:18px;flex:0 0 auto}
  .brand div{gap:4px;min-width:0}
  .brand strong{font-size:20px;line-height:1}
  .brand small{font-size:10px;letter-spacing:.08em;white-space:nowrap}

  .top-actions{margin-left:auto;gap:6px;min-width:0;flex:0 1 auto}
  .top-user,.mode-badge,#signOutBtn,#importSeedBtn{display:none!important}
  .top-actions #addProspectBtn{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:8px 10px;
    font-size:11px;
    white-space:nowrap;
  }
  #generateRouteBtn{
    min-height:40px;
    padding:8px 11px;
    font-size:11px;
    white-space:nowrap;
  }

  .metrics{
    display:flex;
    height:auto;
    min-height:74px;
    gap:0;
    padding:8px 0;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .metrics::-webkit-scrollbar{display:none}
  .metrics div{
    flex:0 0 118px;
    min-width:118px;
    padding:5px 14px;
    scroll-snap-align:start;
  }
  .metrics small{font-size:10px;white-space:nowrap}
  .metrics strong{font-size:22px}

  .map-toolbar{
    top:8px;
    left:8px;
    right:8px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr) 44px;
    gap:8px;
    align-items:center;
    transition:opacity .16s ease,transform .16s ease;
  }
  .searchbox{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    flex:none;
  }
  .map-toolbar select{
    width:100%;
    min-width:0;
    max-width:none;
    padding:0 8px;
    font-size:13px;
  }
  .icon-btn{width:44px;min-width:44px;padding:0}

  /* Al abrir una ficha, priorizamos la ficha y retiramos los filtros del mapa. */
  .map-pane.mobile-popup-open .map-toolbar{
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
  }

  .leaflet-popup{max-width:calc(100vw - 22px)!important}
  .leaflet-popup-content-wrapper{max-width:calc(100vw - 22px);border-radius:16px}
  .leaflet-popup-content{
    width:min(320px,calc(100vw - 54px))!important;
    max-width:none!important;
    margin:14px 16px;
  }
  .leaflet-popup-close-button{
    width:32px!important;
    height:32px!important;
    font-size:22px!important;
    line-height:30px!important;
  }
  .popup h3{font-size:16px;line-height:1.2;padding-right:20px}
  .popup p{white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.38}
  .popup .pp-actions{display:grid;grid-template-columns:1fr auto;gap:8px}
  .popup .pp-actions button,.popup .pp-actions a{min-height:38px;display:flex;align-items:center;justify-content:center}

  .route-panel{min-width:0;width:100%}
  .panel-tabs{position:sticky;top:0;z-index:5;background:#fff}
  .route-head{padding-left:14px;padding-right:14px}
  .route-list,.queue-list{padding-left:10px;padding-right:10px}

  .modal{width:calc(100% - 20px);max-height:calc(100dvh - 24px);overflow:auto}
  .modal-wide{width:calc(100% - 20px)}
  .modal form{padding:16px}
  .modal-head h2{font-size:21px}
  .modal-actions{position:sticky;bottom:0;background:#fff;padding-top:10px}
}

@media (max-width: 390px){
  .brand small{display:none}
  .brand strong{font-size:19px}
  .top-actions #addProspectBtn{padding:8px 8px;font-size:10px}
  #generateRouteBtn{padding:8px 9px;font-size:10px}
  .metrics div{flex-basis:112px;min-width:112px}
}

/* La acción de Google Maps solo existe cuando hay una ruta utilizable. */
.route-footer:has(#openGoogleRouteBtn:disabled){display:none}