/* ════════════════════════════════════════════════════════════════
   RESPONSIVE SCOPED · 2026-06-02
   Reglas SEGURAS: solo selectores específicos, sin contenedores raíz.
   NO toca: body, html, .content, .panel, [id^=panel-], .projects-grid
   No usa container-type. No usa clamp() en padding/margin/width.
   ════════════════════════════════════════════════════════════════ */

/* ── Topbar: items se acomodan según ancho ─────────────────────── */
@media (max-width: 1280px) {
  .topbar { gap: 8px; }
  .topbar .topbar-actions,
  #topbar-actions { gap: 6px; }
}
@media (max-width: 1024px) {
  .topbar .lang-switch span { display: none; } /* solo iconos en tablet */
  .topbar .font-scaler { display: none; }       /* font-scaler oculto en tablet portrait */
}
@media (max-width: 768px) {
  .topbar #user-email { display: none; }        /* esconder email largo */
  .topbar .org-badge { font-size: 10px; }
}

/* ── Sidebar items: tooltips on hover en sidebar colapsada ──── */
@media (min-width: 769px) {
  /* en desktop, sidebar siempre visible — sin overrides */
}
@media (max-width: 768px) {
  /* en mobile, sidebar es drawer; ningún cambio aquí */
}

/* ── Modales: max-height para evitar cortar contenido ──────── */
.modal-bg .modal {
  max-height: 92vh !important;
}
@media (max-width: 640px) {
  .modal-bg .modal {
    max-width: 96vw !important;
    border-radius: 12px !important;
  }
}

/* ── Toast/tooltips: clamp de ancho ──────────────────────────── */
#toast,
.toast-stack {
  max-width: min(440px, calc(100vw - 32px)) !important;
}

/* ── Tooltips nativos title="" no se pueden estilizar.
      Para nuestros tooltips custom de hover (data-tooltip),
      asegurar que no sobrepasen viewport ──────────────────── */
[data-tooltip]:hover::after {
  max-width: min(280px, calc(100vw - 40px));
  z-index: 9990;
  pointer-events: none;
  white-space: normal;
  word-wrap: break-word;
}

/* ── Botones flotantes (aic-floating-btn, qa-fab): no se solapen
      en pantallas muy pequeñas ─────────────────────────────── */
@media (max-width: 380px) {
  #aic-floating-btn,
  #qa-fab {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── Bottom-nav mobile: nunca se corta ────────────────────── */
@media (max-width: 768px) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
  }
}

/* ── Tablas anchas: scroll horizontal en lugar de desbordar ── */
@media (max-width: 1024px) {
  .table-scroll-wrap,
  table.responsive-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}