/* FMV Logística - estilos responsive compartidos para hosting */
/* FMV Logistica - capa responsive general */
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,picture{max-width:100%;height:auto}
iframe{max-width:100%}
input,select,textarea,button{max-width:100%;min-width:0;font:inherit}
main,section,article,aside,header,footer,nav,div,form{min-width:0}
.tableWrap,.table-wrap,.portal-table-wrap{width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
table{max-width:none}
.card,.panel,.clienteCard,.portal-stat,.portal-help-card{max-width:100%}

@media(max-width:900px){
  button,.btn,.primary,.secondary,.danger,.portal-btn{min-height:44px;white-space:normal}
  .row,.form-row,.portal-contact-form{min-width:0}
  .tableWrap:before,.table-wrap:before,.portal-table-wrap:before{white-space:normal}
}

/* Portada: navegación sin recortes en teléfonos angostos. */
@media(max-width:480px){
  .topbar .nav{grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"brand brand" "menu auth"!important;gap:8px 10px!important;padding:8px 12px 10px!important}
  .topbar .menuWrap{grid-area:menu!important;justify-self:start!important}
  .topbar .brand{grid-area:brand!important;justify-self:center!important}
  .topbar .authActions{grid-area:auth!important;justify-self:end!important;width:auto!important;max-width:100%!important;gap:6px!important}
  .topbar .authBtn{min-height:38px!important;padding:0 9px!important;font-size:11px!important}
  .topbar .logoBox img{height:50px!important;max-width:150px!important}
  .topbar .menuPanel{left:12px!important;right:auto!important;top:138px!important;width:calc(100% - 24px)!important;max-width:none!important}
  .topbar .menuItem,.topbar .menuLink{width:100%!important;max-width:100%!important}
  .hero .heroInner{padding-top:142px!important;min-height:auto!important}
  .hero .heroCopy{padding:18px 14px!important;border-radius:22px!important}
  .hero h1{font-size:clamp(32px,11vw,44px)!important}
  .hero p{font-size:15px!important;line-height:1.5!important}
  .section{padding-left:12px!important;padding-right:12px!important}
  .footerInner{flex-direction:column!important;text-align:center!important}
  .loginCard{width:min(100%,520px)!important;max-height:calc(100dvh - 24px)!important;overflow-y:auto!important;padding:18px 14px!important}
}

/* Formularios públicos. */
@media(max-width:560px){
  .wrap{padding-left:12px!important;padding-right:12px!important}
  .top{gap:10px!important}
  .topActions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .topBtn{width:100%!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .panel{padding:16px!important;border-radius:20px!important}
  .panel h2{font-size:24px!important}
  .form,.grid,.actions{grid-template-columns:1fr!important}
  .field.full{grid-column:auto!important}
}

/* Panel administrativo. */
@media(max-width:900px){
  body .app{width:100%;max-width:100%;border-radius:18px}
  body main{padding:10px!important;gap:12px!important;grid-template-columns:minmax(0,1fr)!important}
  body main>section,body main>.card,.flotaColumna{width:100%;max-width:100%;grid-column:auto!important}
  .card{padding:14px!important;border-radius:18px!important}
  .tramoBox{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;width:100%!important}
  .tramoBox button{width:100%!important}
  .clienteGrid,.flotaGrid{grid-template-columns:minmax(0,1fr)!important}
  .usuariosSeparados{grid-template-columns:minmax(0,1fr)!important}
  .adminColumna,.flotaCard{position:static!important}
  .clienteHead{flex-wrap:wrap}
  .clienteMeta{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .clienteMetric{padding:8px 4px!important}
  .clienteMetric strong{font-size:18px!important}
  .clientePedidoTop,.topList{align-items:stretch!important}
  .topList input{width:100%!important;max-width:none!important}
  header{padding:16px!important}
  header .brand{min-width:0}
  header .logo{width:104px!important;height:60px!important;padding:6px 8px!important}
  header h1{font-size:22px!important}
}
@media(max-width:420px){
  .clienteMeta{grid-template-columns:1fr!important}
  .buttons{display:grid!important;grid-template-columns:1fr!important}
  .buttons button{width:100%!important}
}

/* Generador de etiquetas y portal cliente. */
@media(max-width:640px){
  .topbar{width:100%;max-width:100%}
  .top-actions{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  .top-actions>*{width:100%;justify-content:center;text-align:center}
  .app{width:100%;max-width:100%;margin-left:auto!important;margin-right:auto!important}
  .mode-grid,.form-row,.bultos-row,.actions-grid,.portal-grid,.portal-help,.portal-detail,.portal-contact-form{grid-template-columns:minmax(0,1fr)!important}
  .preview-card,.panel,.client-portal{max-width:100%;overflow:hidden}
  .label-stage{width:100%;max-width:100%;overflow:hidden!important}
  .portal-tabs{display:flex;max-width:100%;overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}
  .portal-tab{flex:0 0 auto!important;white-space:nowrap}
  .portal-actions{display:grid!important;grid-template-columns:1fr!important}
  .portal-actions>*{width:100%}
}
@media(max-width:380px){.ship-label{transform:scale(.46)!important;transform-origin:top center!important}.label-stage{height:445px!important}}
@media(max-width:330px){.ship-label{transform:scale(.41)!important}.label-stage{height:400px!important}}

/* Seguimiento. */
@media(max-width:480px){
  .heroBanner{height:220px!important}
  .searchBlock{margin-top:-20px!important;padding:0 10px 14px!important}
  .searchCard{grid-template-columns:minmax(0,1fr) 56px!important}
  .searchCard input{width:100%!important;min-width:0!important}
  .searchCard button{width:56px!important;min-width:0!important}
  .heroCard{grid-template-columns:52px minmax(0,1fr)!important;margin-left:10px!important;margin-right:10px!important;padding:12px!important}
  .trackingNumber{font-size:22px!important;overflow-wrap:anywhere}
  .services{grid-template-columns:1fr!important;margin-left:10px!important;margin-right:10px!important}
  .service{border-left:0!important;border-top:1px solid rgba(255,255,255,.14)!important}
  .timelineItem{grid-template-columns:34px minmax(0,1fr)!important;column-gap:8px!important}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}