/* ============================================================
   mobile-fixes.css — Ajustes responsive para móvil
   ProDictionaryAI · se carga DESPUÉS del CSS de cada página,
   así que sus reglas tienen prioridad. Solo actúan en pantallas
   pequeñas (no afectan al escritorio).
   ============================================================ */

/* —— ESCRITORIO (≥1300px): centrar el panel de resultados de las herramientas
   a 900px para que los banners laterales quepan en los márgenes y NO se monten
   sobre el texto. Por debajo de 1300px no hay banners laterales, así que el
   resultado conserva su ancho natural. —— */
@media (min-width: 1300px) {
  #encyclopediaContent,
  #bibleContent,
  #keyContent {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {

  /* Red de seguridad: nada debe provocar scroll horizontal.
     'clip' en html no rompe los elementos sticky; 'hidden' en body
     es el respaldo para navegadores antiguos. */
  html { overflow-x: clip; }
  body { overflow-x: hidden; }

  /* El panel lateral del Cuaderno (solo visible al iniciar sesión) no debe
     empujar el ancho de la página en móvil cuando está cerrado. */
  #rightWorkspaceDrawer:not(.open) { max-width: 100vw !important; }

  /* —— Buscador: apilar input y botón para que NO se superpongan —— */
  .search-bar-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    position: relative !important;
  }
  .search-bar-wrap .search-input {
    width: 100% !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .search-bar-wrap .btn-search {
    position: static !important;   /* deja de estar superpuesto sobre el input */
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
    justify-content: center !important;
    white-space: nowrap;
  }

  /* —— Cabecera: que los botones de la derecha no desborden —— */
  header .header-inner {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  header .header-actions {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  /* El nombre del usuario nunca debe empujar el ancho de la página */
  #btnUserMenu span,
  #userMenuWrap span {
    max-width: 84px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  header .logo span {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}