/* =====================================================================
   AJUSTES PARA CELULAR Y TABLET (todas las pantallas)
   - Sin franjas con desplazamiento horizontal: pestanas, menus y filtros pasan a varias lineas.
   - Tablas anchas como tarjetas (responsive.js agrega .rsp-tarjetas y data-label a cada celda).
   ===================================================================== */
@media (max-width: 900px) {
  /* Pestanas y barras de enlaces: varias lineas */
  .bl-admin-tabs, .bl-tabs-wrap, .bl-perfil-tabs, .ui-tabs, div:has(> a.bl-tab-link), div:has(> .bl-admin-tab) {
    flex-wrap: wrap !important; overflow-x: visible !important; row-gap: 4px;
  }
  .ui-tabs .ui-tab, .bl-admin-tabs > *, .bl-perfil-tabs > *, .bl-tabs-wrap > * { white-space: normal; max-width: 100%; min-width: 0; text-align: left; }

  /* Tablas como tarjetas */
  table.rsp-tarjetas, table.rsp-tarjetas > tbody, table.rsp-tarjetas > tbody > tr, table.rsp-tarjetas > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; }
  table.rsp-tarjetas { min-width: 0 !important; border: 0 !important; background: none !important; }
  table.rsp-tarjetas > thead { display: none; }
  table.rsp-tarjetas > tbody > tr { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 6px 12px; margin-bottom: 8px; }
  table.rsp-tarjetas > tbody > tr > td { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr); gap: 8px; align-items: start; border: 0 !important;
    padding: 5px 0 !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; min-height: 0; }
  table.rsp-tarjetas > tbody > tr > td::before { content: attr(data-label); font-weight: 700; color: #64748b; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; padding-top: 2px; }
  table.rsp-tarjetas > tbody > tr > td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  table.rsp-tarjetas > tbody > tr > td[data-label=""]::before { display: none; }
  table.rsp-tarjetas > tbody > tr > td[colspan] { grid-template-columns: minmax(0, 1fr); text-align: center !important; }
  table.rsp-tarjetas > tbody > tr > td[colspan]::before { display: none; }
  table.rsp-tarjetas .bl-acciones-tabla, table.rsp-tarjetas td .ui-acciones { justify-content: flex-start; flex-wrap: wrap; }
  .bl-table-responsive:has(> table.rsp-tarjetas), .ui-tabla-wrap:has(> table.rsp-tarjetas), div:has(> table.rsp-tarjetas) { overflow-x: visible !important; }

  /* Bandeja: el menu de carpetas en una rejilla (sin franja desplazable) */
  .bj-nav { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow: visible !important; }
  .bj-nav-item { white-space: normal !important; }
  .bj-nav-ayuda { display: none; }

  /* Mi unidad: espacios en rejilla */
  .dv-lateral { flex-direction: column !important; align-items: stretch !important; overflow: visible !important; }
  .dv-espacios { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .dv-espacios a { padding: 7px 10px; }
  .dv-vista { max-width: 100%; min-width: 0; }

  /* Filtros de la cartelera */
  .ct-chips { flex-wrap: wrap; overflow-x: visible; }
}
@media (max-width: 520px) {
  table.rsp-tarjetas > tbody > tr > td { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bj-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}