/* ── RESPONSIVE PATCH ────────────────────────────────────────────────────── */

@media (max-width: 700px) {

  /* Layout admin en columna */
  #page-admin { flex-direction: column !important; }

  /* Sidebar oculto */
  #page-admin > aside { display: none !important; }

  /* Main con padding reducido y espacio para bottom nav */
  #page-admin > main { padding: 16px 12px 80px !important; }

  /* Topbar móvil */
  #mobile-topbar { display: flex !important; }

  /* Bottom nav visible */
  #bottom-nav { display: flex !important; }

  /* Tablas → ocultas, tarjetas visibles */
  .rc-table { display: none !important; }
  .rc-cards { display: block !important; }

  /* Formulario en 1 columna */
  .form-row { grid-template-columns: 1fr !important; }

  /* Grid de 2 columnas → 1 columna */
  .two-col { grid-template-columns: 1fr !important; }
  .detail-grid { grid-template-columns: 1fr !important; }

  /* Botones táctiles */
  .btn-sm { padding: 9px 14px !important; font-size: 13px !important; }

  /* Card header en móvil */
  .card-header { flex-wrap: wrap; gap: 8px; }

  /* Heading principal */
  .page-title { font-size: 17px !important; }
}

@media (min-width: 701px) {
  #mobile-topbar { display: none !important; }
  #bottom-nav { display: none !important; }
  .rc-cards { display: none !important; }
}

/* Topbar móvil */
#mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 0.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Bottom nav móvil */
#bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-top: 0.5px solid var(--border);
  z-index: 100;
  justify-content: space-around;
  padding: 6px 0 10px;
}

.bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--radius);
  font-size: 10px;
  color: var(--text3);
  cursor: pointer;
  border: none;
  background: transparent;
  flex: 1;
  transition: color 0.15s;
}
.bn-item.active { color: var(--teal); }
.bn-icon { font-size: 18px; line-height: 1.2; }

/* Tarjetas para móvil en lugar de tablas */
.rc-cards { display: none; }

.res-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.res-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.res-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.res-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
}
.res-card-actions .btn { flex: 1; justify-content: center; }

.room-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.room-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
  margin-top: 10px;
}
.room-card-actions .btn { flex: 1; justify-content: center; }

.log-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 8px;
  font-size: 13px;
}
.log-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

/* ── Grids de dos columnas en rooms, floors y users ── */
@media (max-width: 700px) {
  #view-rooms > div[style*="grid"],
  #view-floors > div[style*="grid"],
  #view-users > div[style*="grid"],
  #admin-main > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }

  #view-rooms table,
  #view-floors table,
  #view-users table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  #admin-main {
    padding: 16px 12px 80px !important;
  }

  #sidebar {
    display: none !important;
  }
}