/* =====================================================================
   A2 System · Adaptación al teléfono (≈360–430 px)
   Solo se aplica en pantallas angostas. No cambia nada en computadora.
   ===================================================================== */

@media (max-width:640px){

  /* ---------- Base: nada se sale por los lados ---------- */
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  img,video,canvas{max-width:100%}

  /* ---------- Barra superior ---------- */
  .topbar{gap:8px}
  .topbar>div[style*="min-width"]{flex:1;min-width:0}
  .topbar h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
  .tb-right{gap:6px;flex:none}
  .topbar .demo{font-size:9.5px;padding:3px 7px}
  .circ{width:40px;height:40px}
  .circ.sm{width:40px;height:40px}

  /* ---------- Contenido ---------- */
  .content{gap:14px;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .panel-b{padding:14px}
  .filters{padding:12px 14px;gap:8px}
  .filters.f-compacta{padding:12px 14px}
  .filters select.input{min-width:0;flex:1 1 140px}
  .search{min-width:0;max-width:none;flex:1 1 160px}
  .toolbar{gap:8px}

  /* ---------- Pestañas ---------- */
  .tabs{gap:2px}
  .tabs button{padding:10px 12px 11px;font-size:13px;min-height:42px;gap:6px}
  .tabs .tab-mas{padding:10px 10px 11px!important}
  .tabs .tab-orden{display:none}  /* ordenar pestañas: se hace desde la computadora y se recuerda */
  .tab-menu{max-width:calc(100vw - 16px);max-height:70dvh;overflow:auto}
  .tab-menu button{min-height:44px;font-size:14.5px}

  /* ---------- Toques cómodos (mínimo ~40 px) ---------- */
  .btn{min-height:40px}
  .btn.sm{min-height:38px;padding:6px 12px;font-size:13px}
  .fb-btn{height:40px;min-width:40px}
  .x{width:40px;height:40px;flex:none}
  .seg button{min-height:38px;padding:8px 12px}
  .hoy-pill{height:38px}
  .tb-op{min-height:36px}
  .link{min-height:28px}
  /* Algunas vistas densas de escritorio achican los botones: en el teléfono no bajan de 38 px */
  .content .btn,dialog .btn{min-height:38px!important}
  .oline .x{width:38px;height:38px}
  .ol-c .input.sm{min-height:42px}
  .gu-chip{min-height:38px}
  .copia-carpeta{width:36px;height:36px}
  .fres-avion{width:38px;height:38px}
  .dz-viejo{min-height:36px}
  .input.sm,select.input.sm{min-height:40px}
  .chipb{min-height:38px}
  .fpie-pill{min-height:36px;padding:6px 12px}
  .pt-edit{min-width:32px;min-height:32px}
  .tv-seg,.seg.sm{flex-wrap:nowrap;flex:none}

  /* Segmentados y barras de filtros que no caben: se desplazan de lado */
  .seg{max-width:100%}
  .fr-seg,.seg.seg-ic{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fr-seg::-webkit-scrollbar,.seg.seg-ic::-webkit-scrollbar{display:none}
  .fr-seg button,.seg.seg-ic button{flex:none;white-space:nowrap}

  /* ---------- Formularios: una columna, letra que no hace zoom ---------- */
  .input,select.input,textarea.input,input.input{font-size:16px;min-height:44px}
  .input.sm,input.input.sm{min-height:40px;font-size:15px}
  .g2,.g3,.g4,.two,.spec,.reglas,.check-list,.dl-2,.dl-3,.dl-sn,.lt-cobro,.lt-cobro2,.lt-2col,
  .k-datos,.k-det-grid,.tr-ports.multi,.repo-causas,.gu-diaw,.gu-diaw2,.gx-cuerpo,.cr-wrap,.col-grid,
  .eq-grid,.cs-grid,.fx-cliente,.fx-pie,.no-main .pago-grid,.pago-grid,.lat-grid,.charts,.mk-extra{grid-template-columns:minmax(0,1fr)!important}
  .pf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bol-resumen,.cs-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alertas-lista.v-fichas,.repo-wrap.v-fichas .repo-lista,.lt-tarjetas,.k-precios,.tv-cards,.inf-grid,.bk-urls{grid-template-columns:minmax(0,1fr)!important}

  /* KPIs: dos por fila, compactos */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px;gap:10px}
  .kpi .ic{width:36px;height:36px}
  .kpi b{font-size:19px}
  .kpi small,.kpi em{font-size:11.5px}

  /* Barras de gráficas: el nombre arriba si no cabe */
  .barra{grid-template-columns:minmax(70px,110px) minmax(0,1fr) auto}

  /* ---------- Tablas: se desplazan dentro de su caja ---------- */
  .mt-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  table.mt td.mt-ac .btn{min-height:34px;padding:5px 10px;font-size:12.5px}
  table.mt td{padding:9px 8px}
  .tabla-wrap,.t-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ---------- Ventanas: pantalla completa con botones fijos abajo ---------- */
  html body dialog[open]:not(.pausa):not(.lightbox){
    width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;
    margin:0!important;border-radius:0!important;inset:0}
  dialog .mh{padding:calc(12px + env(safe-area-inset-top,0px)) 10px 10px 16px;gap:2px;flex-wrap:wrap;align-items:flex-start}
  dialog .mh>div:first-child{flex:1 1 0;min-width:0}
  dialog .mh h2{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
  dialog .mh .x{margin-top:0}
  dialog .mb{padding:14px 16px;gap:14px}
  dialog .mf{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:8px;flex-wrap:wrap;z-index:3;box-shadow:0 -6px 16px rgba(10,20,50,.06)}
  dialog .mf>.btn{flex:1 1 auto;min-height:46px}
  dialog .mf>.btn.quiet{flex:0 1 auto}
  /* Opciones de escritorio que no aplican en el teléfono */
  dialog .mh .btn-lat,dialog .mh .sp-btn,.mf .vv-seg,.vv-seg,.btn-compacta{display:none!important}
  /* Las vistas "compactas" de escritorio vuelven a su forma normal */
  .prog-compacta .input,.dlg-programar .input,.dlg-programar.prog-compacta .input{min-height:44px;font-size:16px;padding-top:8px;padding-bottom:8px;border-radius:10px}
  .dlg-programar.prog-compacta textarea.input{min-height:72px}
  .dlg-programar .tgr input,.dlg-programar.prog-compacta .tgr input{min-height:40px;font-size:16px}
  .dlg-programar.prog-compacta .dz-sel-g,.dz-sel-g{grid-template-columns:minmax(0,1fr)}
  .prog-top .prog-art{flex:1 1 100%}
  .dz-v,.dz-card{min-height:52px}
  .dz-vtx b,.dz-vtx small{white-space:normal}
  .dz-v{flex-wrap:wrap}
  .dz-tag{white-space:normal}
  .dz-vlist{max-height:none}

  /* Ficha: mockup y prueba de color lado a lado */
  .tficha{padding:14px;gap:14px}
  .tficha .portadas,.ficha-compacta .tficha .portadas{flex-direction:row;flex-wrap:nowrap;gap:10px;width:100%;flex:1 1 100%;position:static}
  .tficha .portadas figure{flex:1 1 0;min-width:0;margin:0}
  .tficha .portadas .thumb.big,.ficha-compacta .tficha .portadas .thumb.big,.ficha-compacta .tficha .portadas figure .thumb{width:100%;height:auto;aspect-ratio:1/1}
  .tficha>.fcuerpo{flex:1 1 100%;min-width:0}

  /* Orden: cada artículo en una sola columna */
  .item-h,.dlg-orden.vv-compacta .item-h{grid-template-columns:minmax(0,1fr)!important;padding:14px}

  /* Panel lateral (detalle) */
  dialog.drawer{width:100vw;border-radius:0}
  .dh h2{font-size:20px}
  .df .btn{flex:1 1 auto}

  /* Menú lateral: cajón con opciones grandes */
  .side{width:min(300px,86vw)}
  .snav button,.sgrupo-cab{min-height:46px}
  .sfoot button{width:40px;height:40px}
  body:has(.side.open) .hoy-pill{display:none}
  .tmini{flex-wrap:wrap;row-gap:4px}

  /* Avisos flotantes sobre la barra del sistema */
  .toasts{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}

/* Teléfonos pequeños (≈360 px) */
@media (max-width:380px){
  .topbar h1{font-size:17px}
  .topbar .demo{display:none}
  .tabs button{padding:10px 10px 11px;font-size:12.5px}
  .kpi b{font-size:17px}
  dialog .mb{padding:12px 12px}
  .content{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
}