/* PLC 3D: Adaptación móvil (≤860px). Solo media queries: el escritorio no cambia.
   Rail horizontal, cajón como bottom-sheet, editor con scroll, paleta táctil,
   picker centrado y visible, runbar compacta, visor 3D proporcional. */

@media (max-width: 860px){
  html, body{ overflow-x: hidden; }
  .wrap{ padding-left: 10px; padding-right: 10px; }

  /* ===== cabecera IDE ===== */
  .ide-bar{ flex-wrap: wrap; gap: 8px; }
  .ide-bar .hdr-sels{ width: 100%; display: flex; gap: 8px; }
  .ide-bar .hdr-sels .sel-mini{ flex: 1; min-width: 0; }
  .ide-bar .hdr-sels select{ width: 100%; }

  /* ===== contenedor del simulador ===== */
  .vpx{ height: auto; min-height: 0; border-radius: 14px; }
  .vpx .app{ display: flex; flex-direction: column; height: auto; }

  /* ===== rail: columna → fila horizontal scrolleable ===== */
  .vpx .rail{ flex-direction: row; align-items: center; gap: 2px; width: 100%;
    overflow-x: auto; overflow-y: hidden; padding: 8px 10px; position: relative;
    border-right: 0; border-bottom: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
  .vpx .rail::-webkit-scrollbar{ height: 0; }
  .vpx .rail-items{ display: flex; flex-direction: row; gap: 2px; }
  .vpx .rail-btn{ flex: none; padding: 6px 9px; }
  .vpx .rail-btn .rl{ font-size: 8.5px; }
  .vpx .rail-profile{ margin: 0 8px 0 0; padding: 0 10px 0 0; border-bottom: 0;
    border-right: 1px solid rgba(255,255,255,.08); border-radius: 0; }
  .vpx .rail-style, .vpx .rail-gear{ margin-top: 0; margin-left: auto; }
  .vpx .drawer-resize{ display: none; }

  /* ===== cajón (paneles) como bottom-sheet ===== */
  .vpx .drawer{ position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 80;
    max-height: 68vh; border-right: 0; border-top: 1px solid var(--line2);
    border-radius: 18px 18px 0 0; box-shadow: 0 -22px 60px rgba(0,0,0,.55);
    background: linear-gradient(180deg, rgba(13,24,40,.99), rgba(8,15,26,.99)); }
  .vpx .app.collapsed .drawer,
  .vpx .app.drawer-collapsed .drawer{ display: none; opacity: 0; pointer-events: none; }
  .vpx .drawer-body{ -webkit-overflow-scrolling: touch; }

  /* ===== zona principal / editor ===== */
  .vpx .main{ width: 100%; }
  .vpx .topbar{ padding: 10px 12px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vpx .topbar::-webkit-scrollbar{ height: 0; }
  .vpx .cat{ flex: none; font-size: 11px; padding: 7px 10px; }
  .vpx .instrbar{ padding: 10px 12px; gap: 8px; }
  .vpx .instrbar .toolbtns{ margin-left: auto; }
  .vpx .stage{ padding: 16px 10px; min-height: 290px; }
  .vpx .addrung{ margin: 8px 12px 0; padding: 15px; font-size: 13px; }
  .vpx .runbar{ margin: 10px 10px 4px; padding: 9px 10px; gap: 7px; }
  .vpx .runbar .run-act{ font-size: 11px; padding: 7px 9px; }
  .vpx .runbar .run-status{ width: 100%; order: 9; }

  /* ===== picker de direccionamiento: centrado y SIEMPRE visible ===== */
  .vpx .lad-pop{ position: fixed !important; left: 10px !important; right: 10px !important;
    top: auto !important; bottom: 12px !important; width: auto !important; max-width: none !important;
    max-height: 58vh; overflow: auto; z-index: 95; -webkit-overflow-scrolling: touch;
    box-shadow: 0 -16px 50px rgba(0,0,0,.6); }

  /* ===== diálogos import/export/convert ===== */
  .vpx .iod-card{ width: min(440px, 96%); }

  /* ===== sección del visor 3D ===== */
  .sim .selectors{ flex-direction: column; gap: 8px; }
  .sim .selectors .sel{ width: 100%; }
  .stage-wrap{ min-height: 250px; }
  .stage-actions{ flex-wrap: wrap; gap: 8px; }
  .stage-ctrl{ flex-wrap: wrap; }

  /* ===== hoja de atajos / overlays anchos ===== */
  .vpx .kbd-sheet, .vpx .xref-pop{ left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; }
}

/* pantallas muy pequeñas */
@media (max-width: 480px){
  .vpx .rail-btn .rl{ display: none; }
  .vpx .rail-btn{ padding: 6px 7px; }
  .vpx .runbar .run-primary{ width: 100%; justify-content: center; }
  .vpx .runbar .run-actions{ width: 100%; display: flex; gap: 6px; }
  .vpx .runbar .run-actions .run-act{ flex: 1; justify-content: center; }
}