/* Emich Trucking v6.10.1 · optimización móvil integral
   Objetivo: cero traslapes, operación legible en portrait/landscape y controles táctiles cómodos. */

@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  body,.app,.main,#view{min-width:0;max-width:100%}
  body.ui68 .main,.main{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important;padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}

  /* Encabezado: compacto, visible y sin empujar contenido fuera de pantalla */
  body.ui68 .top,.top{
    position:sticky;top:0;z-index:55;
    margin-left:calc(-1 * max(10px,env(safe-area-inset-left)))!important;
    margin-right:calc(-1 * max(10px,env(safe-area-inset-right)))!important;
    padding:11px max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left))!important;
    min-height:62px!important;
    background:rgba(247,244,245,.96)!important;
    backdrop-filter:blur(14px);
    border-bottom:1px solid #e7dde0;
    gap:10px;
  }
  body.ui68 .top h1,.top h1{font-size:21px!important;line-height:1.08!important;overflow-wrap:anywhere}
  body.ui68 .top .sub,.top .sub{display:none!important}
  .top-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .top-actions .ghost{display:none!important}
  body.ui68 .top-actions .btn.primary,.top-actions .btn.primary{display:inline-flex!important;align-items:center;justify-content:center;min-height:40px!important;padding:8px 10px!important;font-size:11px!important;white-space:nowrap}

  /* Controles táctiles y prevención del zoom automático de iOS */
  button,.btn,select{touch-action:manipulation}
  .btn{min-height:42px}
  .btn.small{min-height:38px}
  .field input,.field select,.field textarea,
  .toolbar input,.toolbar select,
  .dispatch-card select,.v69-linkrow select{font-size:16px!important}
  .field input,.field select{min-height:46px}
  .field textarea{min-height:92px}

  /* Evita que cualquier hijo flex/grid fuerce ancho extra */
  .card,.stage,.section,.section-title,.stagehead,.actions,.toolbar,
  .v5-hero,.v5-layout,.v5-row,.v5-alert,.v5-module,.v63-file,.v63-card,
  .v699-workspace,.v699-global-card,.v699-work-leg,.v69-unitcard{min-width:0}

  /* Tabs de Operación/Comercial: caben en pantalla, no requieren arrastre lateral */
  body.ui68 .v5-tabs,.v5-tabs{
    width:100%!important;max-width:100%!important;
    display:flex!important;overflow:visible!important;
    gap:4px!important;padding:4px!important;margin-bottom:12px!important;
  }
  body.ui68 .v5-tabs button,.v5-tabs button{
    flex:1 1 0!important;min-width:0!important;
    padding:9px 5px!important;font-size:11px!important;line-height:1.12!important;
    white-space:normal!important;text-align:center!important;
  }

  /* Tableros de despacho: dejan de ser cinco columnas horizontales */
  .dispatch-board,.v63-board{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;overflow:visible!important;padding-bottom:0!important;
  }
  .dispatch-col,.v63-column{min-width:0!important;min-height:0!important;padding:9px!important}
  .dispatch-head,.v63-column-head{position:sticky;top:63px;z-index:2;background:inherit;border-radius:10px}
  .dispatch-card,.v63-service-card{min-width:0}
  .dispatch-open b,.dispatch-open span,.dispatch-open small,
  .v63-service-card b,.v63-service-card span{overflow-wrap:anywhere;word-break:normal}
  .dispatch-card select{min-height:42px;padding:8px 9px!important}

  /* Estructuras generales */
  .grid,.v5-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v5-layout,.v63-workgrid,.v63-layout{grid-template-columns:1fr!important}
  .v5-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .formgrid,.formgrid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .span3{grid-column:span 2!important}
  .two{grid-template-columns:1fr!important}
  .calcgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Operación + Wialon + transfer */
  .v699-workspace-head,.v699-global-head,.v699-live-head,.v699-stagehead,.stagehead{
    align-items:stretch!important;flex-direction:column!important;gap:10px!important
  }
  .v699-stage-actions,.v698-head-actions,.v696-actions,.v694-segment-actions{
    width:100%!important;max-width:none!important;justify-content:flex-start!important
  }
  .v699-workspace-legs,.v699-workspace-legs.has-transfer{grid-template-columns:1fr!important}
  .v699-workspace-legs.has-transfer .v610-work-transfer{grid-column:auto!important}
  .v699-mini-grid,.v699-global-grid,.v699-global-grid.has-transfer,.v698-kpis,.v69-unitmetrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
  .v699-mini-grid b,.v699-global-grid b,.v698-kpis b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .v699-ref{align-items:flex-start!important;flex-direction:column!important}
  .v698-wialon-top{flex-direction:column!important}
  .v696-operation-grid{grid-template-columns:1fr!important}

  /* Monitoreo Wialon: mapa arriba y unidades abajo */
  .v69-monitor-layout{grid-template-columns:1fr!important;gap:12px!important}
  .v69-map-card{position:relative!important;top:auto!important;width:100%!important;min-width:0!important}
  .v69-map-card #v69Map{height:clamp(280px,46vh,420px)!important;min-height:280px!important;width:100%!important}
  .v69-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v69-hero{align-items:stretch!important;flex-direction:column!important;padding:18px!important}
  .v69-hero h2{font-size:22px!important}
  .v69-unithead{gap:8px}
  .v69-unitfoot{flex-wrap:wrap}
  .v69-linkrow{grid-template-columns:1fr!important}

  /* Tablas se desplazan dentro de su propio contenedor, no toda la página */
  .tablewrap{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  .tablewrap:focus-within{outline:2px solid rgba(123,15,43,.12);outline-offset:2px}

  /* Modales: casi pantalla completa, sin quedar debajo de la barra inferior */
  .modal{padding:8px!important;align-items:center!important}
  body.ui68 .modalbox,.modalbox{width:100%!important;max-width:720px!important;max-height:calc(100dvh - 18px)!important;padding:16px!important;border-radius:18px!important}

  /* Barra inferior estable con safe-area */
  body.ui68 .mobilebar,.mobilebar{
    left:max(7px,env(safe-area-inset-left))!important;
    right:max(7px,env(safe-area-inset-right))!important;
    bottom:max(7px,env(safe-area-inset-bottom))!important;
  }
  body.ui68 .mobilebar button,.mobilebar button{min-width:0!important;min-height:48px!important}
}

/* Portrait de teléfono: lectura en una sola columna, sin sacrificar comparativos de 2 métricas */
@media (max-width:620px) and (orientation:portrait){
  body.ui68 .main,.main{padding-left:max(9px,env(safe-area-inset-left))!important;padding-right:max(9px,env(safe-area-inset-right))!important}
  body.ui68 .top,.top{
    margin-left:calc(-1 * max(9px,env(safe-area-inset-left)))!important;
    margin-right:calc(-1 * max(9px,env(safe-area-inset-right)))!important;
    padding-left:max(9px,env(safe-area-inset-left))!important;
    padding-right:max(9px,env(safe-area-inset-right))!important
  }
  .dispatch-board,.v63-board{grid-template-columns:1fr!important}
  .dispatch-head,.v63-column-head{top:61px}
  .v5-module-grid{grid-template-columns:1fr!important}
  .formgrid,.formgrid.two-col{grid-template-columns:1fr!important}
  .span2,.span3{grid-column:span 1!important}
  .stage,.card{padding:13px!important;border-radius:14px!important}
  .section-title{align-items:flex-start!important;flex-direction:column!important}
  .section-title .btn{width:100%}
  .toolbar{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .toolbar>*{width:100%!important;min-width:0!important}
  .actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%}
  .actions .btn{width:100%!important;margin:0!important}
  .v699-stage-actions,.v698-head-actions,.v696-actions,.v694-segment-actions{
    display:grid!important;grid-template-columns:1fr!important
  }
  .v699-stage-actions .btn,.v698-head-actions .btn,.v696-actions .btn,.v694-segment-actions .btn{width:100%!important}
  .v698-kpis,.v699-mini-grid,.v699-global-grid,.v699-global-grid.has-transfer,.v69-unitmetrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v69-map-card #v69Map{height:340px!important;min-height:300px!important}
  .v5-row{grid-template-columns:1fr auto!important;gap:7px!important}
  .v5-alert{grid-template-columns:auto 1fr!important}
  .v5-alert>:last-child{grid-column:2}
  .toast{left:9px!important;right:9px!important;bottom:calc(82px + env(safe-area-inset-bottom))!important;text-align:center}
}

/* Teléfonos muy angostos */
@media (max-width:370px){
  body.ui68 .top h1,.top h1{font-size:19px!important}
  body.ui68 .top-actions .btn.primary,.top-actions .btn.primary{font-size:10px!important;padding:7px 8px!important}
  body.ui68 .v5-tabs button,.v5-tabs button{font-size:10px!important;padding:8px 3px!important}
  .grid,.v5-kpis{grid-template-columns:1fr!important}
  .v698-kpis,.v699-mini-grid,.v699-global-grid,.v699-global-grid.has-transfer,.v69-unitmetrics,.calcgrid{grid-template-columns:1fr!important}
  .actions{grid-template-columns:1fr!important}
}

/* Landscape de teléfono: dos columnas donde sí ayuda y altura compacta */
@media (max-width:900px) and (orientation:landscape) and (max-height:540px){
  body.ui68 .main,.main{padding-bottom:76px!important}
  body.ui68 .top,.top{min-height:52px!important;padding-top:7px!important;padding-bottom:7px!important}
  body.ui68 .top h1,.top h1{font-size:18px!important}
  body.ui68 .mobilebar,.mobilebar{left:12%!important;right:12%!important;padding:4px!important}
  body.ui68 .mobilebar button,.mobilebar button{min-height:42px!important;padding:4px 3px!important}
  body.ui68 .mobilebar button span,.mobilebar button span{font-size:14px!important}
  body.ui68 .mobilebar button small,.mobilebar button small{font-size:8px!important}
  .dispatch-board,.v63-board{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dispatch-head,.v63-column-head{top:53px}
  .formgrid,.formgrid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .span2{grid-column:span 2!important}
  .v69-map-card #v69Map{height:230px!important;min-height:220px!important}
  .modal{padding:5px!important}
  body.ui68 .modalbox,.modalbox{max-height:calc(100dvh - 10px)!important;padding:13px!important}
}

/* Pantallas táctiles: blancos mínimos cómodos */
@media (hover:none) and (pointer:coarse){
  .dispatch-open,.v63-service-card,.v5-row,.v5-alert{min-height:44px}
  .catalog-tabs button,.v63-tabs button{min-height:40px}
}