/* ─── FileBrowser — Mobile overrides ─────────────────────────── */
@media (max-width: 768px) {

  /* Quitar body padding-bottom que FileBrowser pone en 736px
     (choca con el bottom-nav de Pop) */
  body { padding-bottom: 0 !important; }

  /* Ocultar sidebar — el botón hamburger (#more) la abre en overlay */
  nav {
    display: none !important;
  }
  nav.active, nav.show {
    display: block !important;
  }

  /* Main ocupa todo el ancho */
  main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 .25em !important;
  }

  /* Header más compacto */
  header {
    padding: .4em .75em !important;
    height: 3.25em !important;
    gap: .25em !important;
  }

  /* Botones del header — touch target mínimo 44px */
  header .action,
  header button,
  header i.material-icons {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4em !important;
  }

  /* Breadcrumbs — pega debajo del header */
  .breadcrumbs {
    top: 3.25em !important;
    padding: 0 .5em !important;
    font-size: .85em !important;
  }

  /* Lista de archivos — filas más altas para dedos */
  #listing.list .item {
    height: 3em !important;
    padding: 0 .5em !important;
  }
  #listing.list .item .name {
    font-size: 15px !important;
    width: 70% !important;
  }
  #listing.list .item .size {
    display: none !important;
  }

  /* Grid — 2 columnas en móvil */
  #listing.mosaic .item,
  #listing.grid .item {
    width: calc(50% - .5em) !important;
    min-width: unset !important;
  }

  /* Iconos de carpetas/archivos más grandes */
  #listing .item i.material-icons {
    font-size: 1.6em !important;
  }

  /* Barra de progreso subida */
  #upload-progress {
    bottom: 4em !important;
  }

  /* Ocultar columna "Modified" en móvil pequeño */
  #listing.list .item .modified {
    display: none !important;
  }
}

/* Pantallas muy pequeñas */
@media (max-width: 400px) {
  #listing.mosaic .item,
  #listing.grid .item {
    width: 100% !important;
  }
  header title, header .title {
    font-size: .9em !important;
  }
}