/* Mobile layout: keep the current section visible, give the header a clear hierarchy,
   and stack dense dashboard blocks so they can be scanned without horizontal hunting. */
@media (max-width: 639px) {
  html, body, #root { min-width: 0; width: 100%; overflow-x: hidden; }

  #root header {
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .625rem .75rem !important;
  }

  #root header > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: .5rem;
  }

  /* On a phone the current section name must remain visible. */
  #root header > div:first-child > div.hidden {
    display: block !important;
    min-width: 0;
    flex: 1 1 calc(100% - 3rem);
  }
  #root header > div:first-child > div.hidden h1 { font-size: .9rem; line-height: 1.2; }
  #root header > div:first-child > div.hidden p { display: none; }

  /* Keep the active organization below the section title instead of squeezing it beside the icons. */
  #root header > div:first-child > div.relative {
    width: 100%;
    flex: 1 1 100%;
  }
  #root header > div:first-child > div.relative > button {
    width: 100%;
    justify-content: space-between;
  }

  #root header > div:nth-child(2) {
    width: 100%;
    justify-content: stretch;
    gap: .5rem;
  }
  /* These two actions remain available from the navigation drawer and do not compete with the main CTA. */
  #root header > div:nth-child(2) > button[title="Sincronizar Firestore"],
  #root header > div:nth-child(2) > button[title="Reportar problema o enviar sugerencia"] { display: none; }
  #root header > div:nth-child(2) > div.relative { display: block; }
  #root header > div:nth-child(2) > button:last-child { flex: 1; justify-content: center; }

  #root main { padding: .75rem !important; }
  #root aside { width: min(20rem, calc(100vw - 1rem)) !important; }

  /* Cards and forms read top-to-bottom on a phone; action grids stay two-up until the very narrow breakpoint. */
  #root .grid-cols-2, #root .grid-cols-3 { grid-template-columns: minmax(0, 1fr); }
  #root .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #root .overflow-x-auto { scrollbar-width: thin; }
}

@media (max-width: 399px) {
  #root .grid-cols-4 { grid-template-columns: minmax(0, 1fr); }
}