/* ============================================================
   BolsaHoy — Mobile responsive polish
   Solo móvil/tablet pequeña: todo vive dentro de media queries
   (max-width: 768px / 480px). El escritorio no se toca desde aquí.
   Cargado en todas las páginas públicas después de site-header.css.
   ============================================================ */

@media (max-width: 768px) {

  /* ── Seguridad global: nada debe desbordar en horizontal ── */
  img, video, iframe { max-width: 100%; }

  /* ── Táctil: los botones principales deben poder pulsarse con el dedo ── */
  main .btn,
  main button[type="submit"],
  .hero-actions .btn,
  form .btn {
    min-height: 44px;
  }

  /* Botones de la cabecera: un punto más grandes que los 36px de escritorio
     compacto, sin engordar la barra (la fila admite 40px de sobra). */
  .actions .account-btn,
  .actions .bh-theme-toggle,
  .actions .hamburger-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  /* ── Ticker superior: compacto pero pulsable ── */
  .market-strip .market-pill {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* ============================================================
     MERCADOS — el listado de activos (lista con logo estilo app,
     definida en mercados.html) solo necesita algo más de aire táctil
     en móvil; el diseño en sí ya es idéntico en escritorio y móvil.
     ============================================================ */
  .market-row { padding: 13px 12px; }
  .market-list .mkt-info strong { font-size: 15.5px; }

  /* ============================================================
     COMUNIDAD — la navegación lateral pasa a barra horizontal
     tipo app (chips deslizables encima del contenido, no una
     columna entera debajo de todo).
     ============================================================ */
  .comm-shell .comm-nav {
    order: -1;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .comm-shell .comm-nav::-webkit-scrollbar { display: none; }
  .comm-shell .comm-nav .comm-nav-link {
    flex: 0 0 auto;
    min-height: 42px;
    white-space: nowrap;
    border: 1px solid var(--bh-line, rgba(255,255,255,.12));
    border-radius: 999px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
  }
  /* En la barra de chips no caben la tarjeta PRO ni la de perfil; sus
     destinos (/planes y /account) ya están a un toque en el menú de la
     cabecera, así que en móvil se quitan de aquí sin perder acceso. */
  .comm-shell .comm-nav .comm-pro-card,
  .comm-shell .comm-nav .comm-profile-card {
    display: none;
  }

  /* ============================================================
     PLANES — el hero vendía a gritos (52px de título en un 375px)
     ============================================================ */
  .plans-page .hero-copy h1,
  .hero-card .hero-copy h1 {
    font-size: clamp(30px, 8.5vw, 38px) !important;
    line-height: 1.08;
  }
  .hero-card .hero-copy p { font-size: 15px; }
  /* Comparativa de planes: primera columna fija para que al deslizar
     siempre se sepa qué función se está comparando. */
  .compare-row { min-width: 560px; }
  .compare-cell:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bh-bg, #05070d);
  }
  [data-theme="light"] .compare-cell:first-child { background: #f4f7fb; }
  .compare-cell { font-size: 13px; }

  /* ============================================================
     NEWSLETTER — título del hero más contenido
     ============================================================ */
  .hero-inner h1 { font-size: clamp(30px, 9vw, 38px); }

  /* ============================================================
     FICHA DE ACTIVO / EMPRESA — el nombre gigante no cabe
     ============================================================ */
  .company-title h1 { font-size: clamp(30px, 9.5vw, 44px); }
  .metric strong { font-size: 22px; }

  /* ============================================================
     ANÁLISIS — hero con menos aire en pantallas pequeñas
     ============================================================ */
  .an-hero { padding: 40px 20px 38px; }
  .an-reports-head { gap: 14px; }

  /* ============================================================
     NOTICIA — lectura cómoda
     ============================================================ */
  .hero-inner h1 { letter-spacing: -0.6px; }
  .side-actions .btn { min-height: 46px; }
}

@media (max-width: 480px) {

  /* Comparativa de planes aún más compacta en móviles estrechos */
  .compare-row { min-width: 500px; }

  /* Cabecera de sección con menos padding para ganar pantalla */
  .an-hero h1 { font-size: clamp(26px, 8.5vw, 32px); }

  /* Las llamadas a la acción del hero ocupan todo el ancho útil.
     (Solo CTAs de hero: los botones de los composers de chat/foro
     comparten fila con su campo de texto y no deben estirarse.) */
  .hero-actions .btn { width: 100%; }
}