/* ==========================================================================
   AIRMAPA — responsive.css
   Desktop 1920 / laptop 1366 / tablet / móvil.
   ========================================================================== */

/* Laptop compacto */
@media (max-width: 1440px) {
  :root { --panel-w: 320px; --dock-w: 310px; --rail-w: 200px; }
}

/* Tablet horizontal: el dock flota sobre el mapa para no comprimirlo */
@media (max-width: 1180px) {
  :root { --rail-w: 60px; }
  .rail-item .label, .rail-item .count { display: none; }
  .rail-item { justify-content: center; padding: 0; }
  #railToggle { display: none; }
  .safety-note { display: none; }
}

/* Tablet vertical */
@media (max-width: 980px) {

  .dock {
    position: absolute; inset: 0 auto 0 0; z-index: 700;
    width: min(340px, 86vw);
    box-shadow: var(--sh-2);
    border-right: 1px solid var(--line);
  }

  .panel {
    position: absolute; inset: auto 0 0 0; z-index: 800;
    width: auto; max-height: 72dvh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: var(--sh-2);
  }
  .panel.is-open { display: flex; }
  .sheet-handle {
    display: block; width: 38px; height: 4px; border-radius: 100px;
    background: var(--line-2); margin: 8px auto 0;
  }
  .mission-bar .actions { margin-left: 0; width: 100%; }
}

/* Móvil */
@media (max-width: 720px) {
  body { font-size: 14px; }

  .header { padding: 0 10px; gap: 8px; }
  .brand img { height: 28px; }
  #searchToggle { display: inline-flex; margin-left: auto; }
  .search {
    position: absolute; left: 8px; right: 8px; top: calc(var(--header-h) + 6px);
    max-width: none; margin: 0; z-index: 950; display: none;
  }
  .app.search-open .search { display: block; }
  .search .input { box-shadow: var(--sh-2); }
  .status-chip .status-text { display: none; }
  .status-chip { padding: 0 8px; }

  .app { grid-template-rows: var(--header-h) 1fr; }

  /* El rail se convierte en cajón */
  .rail {
    position: fixed; top: var(--header-h); bottom: 0; left: 0;
    width: 232px; z-index: 1000;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--sh-2);
  }
  .app.rail-open .rail { transform: none; }
  .rail-item { justify-content: flex-start; padding: 0 10px; }
  .rail-item .label { display: inline; }
  .body { grid-template-columns: 1fr; }

  .rail-scrim {
    display: none; position: fixed; inset: var(--header-h) 0 0 0;
    background: rgba(16,20,26,.3); z-index: 990;
  }
  .app.rail-open .rail-scrim { display: block; }

  .mission-bar { margin: 8px 8px 0; padding: 8px 10px; gap: 8px; }
  .mission-bar .field-inline { display: none; min-width: 118px; }
  .mission-bar.is-expanded .field-inline { display: flex; flex: 1 1 140px; }
  .mission-bar.is-expanded .mission-summary { display: none; }
  .mission-summary { display: inline; }

  .map-tools {
    margin: 8px; gap: 6px;
    flex-wrap: nowrap; overflow-x: auto; align-self: stretch;
    max-width: none; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .map-tools::-webkit-scrollbar { display: none; }
  .tool-btn { flex: none; }

  .map-tools { margin: 8px; gap: 5px; }
  .tool-btn { height: 36px; padding: 0 12px; }

  .statusbar { font-size: 11.5px; padding: 6px 10px; }
  .coord-readout .mono { font-size: 11.5px; }

  .dock { width: 100%; inset: 0; border-right: 0; }
  .panel { max-height: 78dvh; }

  .modal { max-height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; align-self: flex-end; }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal-foot { position: sticky; bottom: 0; background: var(--surface); }

  .btn, .tool-btn, .rail-item { min-height: 40px; }
  .btn-icon { min-height: 40px; width: 40px; }
  .row-2 { grid-template-columns: 1fr; }
  .evidence-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .metrics { gap: 14px; }
}

/* En pantallas anchas la barra de misión ya muestra todos los campos */
@media (min-width: 721px) {
  #missionBarMore { display: none; }
}

/* Móvil pequeño */
@media (max-width: 380px) {
  .metric .value { font-size: 18px; }
}

/* Pantallas muy anchas: limitar el ancho del contenido de paneles */
@media (min-width: 1800px) {
  :root { --panel-w: 380px; --dock-w: 360px; }
}