/* Pillan360 · refuerzo responsive compartido local/servidor. */
html { min-width: 0; }
body { min-width: 0; }
#main-header > div { min-width: 0; }
#main-header > div > div:first-child { min-width: 0; flex: 1 1 auto; }
#main-header h1, #main-header p { overflow-wrap: anywhere; }
main, aside, section, .glass-panel { min-width: 0; }
table { max-width: 100%; }
iframe, canvas, img, svg { max-width: 100%; }

@media (max-width: 767px) {
  #main-header { position: sticky; }
  #main-header > div {
    height: auto;
    min-height: 4rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
    gap: .5rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #main-header > div > div:first-child { flex: 1 1 calc(100% - 7rem); gap: .5rem; }
  #main-header > div > div:first-child > div:first-child { padding: .4rem; flex: 0 0 auto; }
  #main-header h1 { font-size: .92rem; line-height: 1.12; }
  #main-header h1 span { display: inline; font-size: .72rem; }
  #main-header p { font-size: .52rem; line-height: 1.25; letter-spacing: .055em; margin-top: .15rem; }
  #main-header > div > div:last-child { gap: .25rem; flex: 0 0 auto; }
  #main-header > div > div:last-child button { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; }
  #connection-status { padding: .45rem .55rem; }
  #status-text { display: none; }
  body > .flex-grow.container { padding: .85rem .65rem 1.25rem; gap: 1rem; }
  nav[role="tablist"] { margin-bottom: 1rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
  nav[role="tablist"] .tab-btn { flex: 0 0 auto; min-height: 2.5rem; padding-inline: .7rem; scroll-snap-align: start; }
  nav[role="tablist"] .tab-btn i { margin-right: .3rem; }
  .glass-panel { border-radius: .75rem; }
  .glass-panel.p-6 { padding: 1rem; }
  .glass-panel.p-5 { padding: .9rem; }
  .glass-panel.p-4 { padding: .8rem; }
  .map-monitor-toolbar { max-height: min(58vh, 27rem); overflow-y: auto; overscroll-behavior: contain; }
  .map-monitor-toolbar-row { align-items: stretch; }
  .map-monitor-btn { min-height: 2.25rem; }
  .map-monitor-layer-controls { max-height: 12rem; overflow-y: auto; overscroll-behavior: contain; }
  #map-monitor-canvas, #nasa-monitor-map, #osm-monitor-map, #tactical-map { min-height: 460px !important; }
  .leaflet-control-layers { max-width: calc(100vw - 2.2rem); max-height: 55vh; overflow: auto; }
  .pillan-toast-stack { left: .5rem; right: .5rem; width: auto; }
  .pillan-toast { width: 100%; max-width: none; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 420px) {
  #main-header > div > div:first-child { flex-basis: 100%; }
  #main-header > div > div:last-child { margin-left: auto; margin-top: -.15rem; }
  #main-header p { max-width: 19rem; }
  .map-monitor-btn span { max-width: 5.8rem; }
  .osm-control-group { width: 100%; }
  .osm-control-group > button, .osm-control-group > label { flex: 1 1 auto; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body > .flex-grow.container { max-width: 100%; padding-inline: 1rem; }
  body > .flex-grow.container > aside { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; }
  body > .flex-grow.container > aside > * { margin-top: 0 !important; }
  body > .flex-grow.container > aside > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .map-monitor-toolbar { max-width: calc(100% - 1.25rem); }
}

@media (pointer: coarse) {
  button, [role="button"], select, input[type="button"], input[type="submit"] { min-height: 2.5rem; }
  .map-monitor-drag-handle, .pillan-frequency-icon-btn, .pillan-frequency-page-btn { min-width: 2.5rem; min-height: 2.5rem; }
}