/* ============================================================
   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) {

  /* Mobile lite: mismo layout, menos coste de GPU en Android/moviles medios. */
  html.bh-mobile-lite body::before,
  html.bh-mobile-lite #noticias::before {
    animation: none !important;
    filter: blur(28px) !important;
    opacity: .55 !important;
  }

  html.bh-mobile-lite .post-card,
  html.bh-mobile-lite .tool-card,
  html.bh-mobile-lite .mini-card,
  html.bh-mobile-lite .bh-nfeat,
  html.bh-mobile-lite .bh-nmkt-box,
  html.bh-mobile-lite .watchlist-panel,
  html.bh-mobile-lite .console-card,
  html.bh-mobile-lite .glass-card,
  html.bh-mobile-lite .premium-card,
  html.bh-mobile-lite .newsletter-panel,
  html.bh-mobile-lite .bb-chat-identity,
  html.bh-mobile-lite .bb-input-row,
  html.bh-mobile-lite .bb-bubble,
  html.bh-mobile-lite .bb-sidebar,
  html.bh-mobile-lite .bb-mobile-close,
  html.bh-mobile-lite .bb-history-toggle {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
  }

  html.bh-mobile-lite .bb-chat-identity,
  html.bh-mobile-lite .bb-input-row,
  html.bh-mobile-lite .bb-msg.bot .bb-bubble,
  html.bh-mobile-lite .bb-sidebar,
  html.bh-mobile-lite .bb-mobile-close,
  html.bh-mobile-lite .bb-history-toggle,
  html.bh-mobile-lite .mobile-nav,
  html.bh-mobile-lite .mob-nav {
    background: rgba(7, 18, 37, .96) !important;
  }

  html.bh-mobile-lite[data-theme="light"] .bb-chat-identity,
  html.bh-mobile-lite[data-theme="light"] .bb-input-row,
  html.bh-mobile-lite[data-theme="light"] .bb-msg.bot .bb-bubble,
  html.bh-mobile-lite[data-theme="light"] .bb-sidebar,
  html.bh-mobile-lite[data-theme="light"] .bb-mobile-close,
  html.bh-mobile-lite[data-theme="light"] .bb-history-toggle,
  html.bh-mobile-lite[data-theme="light"] .mobile-nav,
  html.bh-mobile-lite[data-theme="light"] .mob-nav {
    background: rgba(255, 255, 255, .96) !important;
  }

  html.bh-mobile-lite .post-card,
  html.bh-mobile-lite .post-photo-img,
  html.bh-mobile-lite .bh-hero2-video,
  html.bh-mobile-lite .btn,
  html.bh-mobile-lite button,
  html.bh-mobile-lite .bb-sidebar,
  html.bh-mobile-lite .bb-input-row,
  html.bh-mobile-lite .bb-mobile-close,
  html.bh-mobile-lite .bb-history-toggle {
    transition-duration: 80ms !important;
  }

  html.bh-mobile-lite .post-card.is-loading .post-photo::after,
  html.bh-mobile-lite .post-card.is-loading .skeleton-line::after,
  html.bh-mobile-lite .bh-hero2-cue,
  html.bh-mobile-lite .bh-hero2-pill .live-dot,
  html.bh-mobile-lite .bh-nfeat-ribbon::before,
  html.bh-mobile-lite .bh-nmkt-lbl::before,
  html.bh-mobile-lite .reel-marquee-track,
  html.bh-mobile-lite .bolsabot-mascot *,
  html.bh-mobile-lite #bbWelcomeMascot,
  html.bh-mobile-lite .bb-typing-dot,
  html.bh-mobile-lite body::before {
    animation: none !important;
  }

  html.bh-mobile-lite .ticker-track {
    animation-duration: 34s !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  html.bh-mobile-lite .post-card:hover,
  html.bh-mobile-lite .tool-card:hover,
  html.bh-mobile-lite .bh-nfeat:hover {
    transform: none !important;
  }

  /* ── Seguridad global: nada debe desbordar en horizontal ── */
  img, video, iframe, canvas, svg { max-width: 100%; }
  main, main.shell, .shell { min-width: 0; overflow-x: clip; }
  .bh-visual-layer,
  body > .bh-visual-layer {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: clip !important;
    contain: paint !important;
  }

  /* ── 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 {
    contain: layout paint;
  }

  .market-strip__inner {
    transform: translateZ(0);
  }

  .ticker-track {
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .market-strip .market-pill {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* La portada conserva el mismo contenido, pero en móvil evita repintados
     pesados mientras se hace scroll. */
  body::before,
  #noticias::before,
  .bh-hero2::before {
    animation: none !important;
  }

  .bh-hero2-video,
  .post-card,
  .tool-card,
  .mini-card,
  .premium-card,
  .newsletter-panel {
    transform: translateZ(0);
  }

  /* ============================================================
     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; }

  /* Compact market cards: long prices must not create a hidden third width. */
  .mkt-cards,
  .mkt-cards--sm { min-width: 0; }
  .market-mini-card.bh-asset-row {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 82px);
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    padding: 10px 8px;
  }
  .market-mini-card.bh-asset-row .bh-asset-logo {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .market-mini-card.bh-asset-row .bh-asset-side {
    min-width: 0;
    max-width: 82px;
    overflow: hidden;
  }
  .market-mini-card.bh-asset-row .bh-asset-side strong,
  .market-mini-card.bh-asset-row .bh-asset-side small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .market-mini-card.bh-asset-row .bh-asset-side strong { font-size: 14px; }
  .market-mini-card.bh-asset-row .bh-asset-side small { font-size: 10px; }

  /* ============================================================
     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; }

  /* Hero de la noticia: el titular iba en posición absoluta anclado abajo,
     y con titulares largos crecía hacia ARRIBA saliéndose de la tarjeta
     (quedaba oculto bajo la cabecera). En móvil el texto pasa a flujo
     normal al pie del hero, que crece con el contenido. */
  .article .hero {
    display: flex;
    align-items: flex-end;
    min-height: 0;
  }
  .article .hero-inner {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    /* El padding superior reserva una franja de imagen visible por encima
       del titular aunque el texto sea largo. */
    padding: 150px 18px 22px;
  }
  .article .hero h1 {
    font-size: clamp(22px, 6.5vw, 28px) !important;
    line-height: 1.16;
    letter-spacing: -0.4px;
  }

  /* ============================================================
     PORTADA — la noticia destacada: el enlace "Leer noticia
     completa" era una franja de 18px imposible de pulsar bien.
     ============================================================ */
  .bh-nfeat-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ============================================================
     FICHA DE ACTIVO / EMPRESA — las 3 métricas (precio, sesión,
     fuente) eran tres tarjetones apilados de 88px; en móvil pasan
     a filas compactas etiqueta-izquierda / valor-derecha.
     ============================================================ */
  .metric-strip { gap: 8px; }
  .metric-strip .metric {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    min-height: 0;
    padding: 12px 14px;
  }
  .metric-strip .metric strong {
    margin-top: 0;
    font-size: 20px !important;
    justify-self: end;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .metric-strip .metric small {
    grid-column: 1 / -1;
    text-align: right;
  }
}

@media (max-width: 560px) {

  /* ============================================================
     FICHA DE ACTIVO / EMPRESA — los "datos clave" eran 6 tarjetones
     de ~180px apilados (una pantalla y media solo de cifras). En
     móvil pasan a rejilla 2×3 compacta con el icono junto a la
     etiqueta; el rango de 52 semanas (valor largo) ocupa fila entera.
     ============================================================ */
  .asset-stats-new {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .asset-stats-new .asset-stat-new {
    min-height: 0 !important;
    padding: 12px !important;
  }
  .asset-stats-new .asset-stat-new .stat-head {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 10px;
  }
  .asset-stats-new .asset-stat-new .stat-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
    flex: 0 0 auto;
  }
  .asset-stats-new .asset-stat-new strong {
    margin-top: 8px;
    font-size: 17px;
    overflow-wrap: anywhere;
  }
  .asset-stats-new .asset-stat-new small { margin-top: 4px; }
  /* El rango 52 semanas (valor largo) siempre a fila completa; si eso
     dejara huérfana a la tarjeta anterior, esta también ocupa su fila. */
  .asset-stats-new .asset-stat-new:last-child { grid-column: 1 / -1; }
  .asset-stats-new .asset-stat-new:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
}

@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%; }

  /* Community sidebar links become one horizontal, touch-friendly row. */
  .comm-shell,
  .comm-shell > * {
    min-width: 0;
    max-width: 100%;
  }
  .comm-shell .comm-nav {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* ============================================================
     MERCADOS — en pantallas estrechas las mini-tarjetas a 2
     columnas trituraban el nombre del activo ("Bi… 65.746").
     A una columna cada activo respira como en la lista grande.
     ============================================================ */
  .mkt-cards,
  .mkt-cards--sm {
    grid-template-columns: 1fr;
  }
  .market-mini-card.bh-asset-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 11px 12px;
  }
  .market-mini-card.bh-asset-row .bh-asset-logo {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .market-mini-card.bh-asset-row .bh-asset-side {
    max-width: 150px;
  }
  .market-mini-card.bh-asset-row .bh-asset-side strong { font-size: 15px; }
  .market-mini-card.bh-asset-row .bh-asset-side small { font-size: 11px; }
}

/* ============================================================
   FASE 1 · garantías de móvil
   Estas reglas solo se activan bajo 768px para no alterar el escritorio.
   ============================================================ */
@media (max-width: 768px) {
  html,
  body {
    min-height: 100vh;
    min-height: 100dvh;
  }

  #authView {
    min-height: calc(100vh - 62px);
    min-height: calc(100dvh - 62px);
  }

  .bh-modal {
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
  }

  #bh-box {
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
  }

  /* Safari no debe ampliar la página al enfocar formularios. Los controles
     pequeños de escritorio se mantienen legibles en una pantalla táctil. */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  input[type="checkbox"],
  input[type="radio"],
  input[type="file"],
  input[type="hidden"] {
    font-size: initial !important;
  }

  button,
  a,
  .btn,
  .bh-asset-row,
  .market-row {
    -webkit-tap-highlight-color: transparent;
  }

  .bh-asset-row,
  .market-row,
  .trend-tab,
  .market-tab {
    min-height: 44px;
  }

  /* Nombres largos (Latinoamérica 40, Robinhood, etc.) nunca rompen la
     tarjeta: el valor puede seguir visible y el texto se recorta con aviso. */
  .bh-asset-copy,
  .bh-asset-copy strong,
  .bh-asset-copy small,
  .asset-name,
  .asset-label,
  .market-row .mkt-info,
  .market-row .mkt-info strong,
  .market-row .mkt-info small {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Las pestañas de mercados se mantienen en una sola fila para no cambiar
     la interacción. La sombra interior comunica que hay más opciones hacia
     la derecha, incluso cuando la barra de scroll está oculta. */
  .market-tabs {
    position: relative;
    padding-right: 30px !important;
    box-shadow: inset -28px 0 22px -22px rgba(7, 18, 37, .92);
    scroll-padding-inline: 12px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  [data-theme="light"] .market-tabs {
    box-shadow: inset -28px 0 22px -22px rgba(247, 250, 255, .96);
  }

  /* Tabla macro: en móvil cada país se lee como una tarjeta de dos columnas,
     sin obligar a desplazar una tabla de 560px. */
  .macro-table-wrap {
    overflow: visible;
    border-radius: 14px;
  }
  .macro-table,
  .macro-table tbody,
  .macro-table tr {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .macro-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .macro-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
  }
  .macro-table tr:last-child { border-bottom: 0; }
  .macro-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    white-space: normal;
    font-size: 13px;
  }
  .macro-table td:first-child {
    grid-column: 1 / -1;
    display: block;
    color: var(--ink, #f6f8fb);
    font-size: 15px;
    text-align: left;
  }
  .macro-table td:not(:first-child)::before {
    flex: 0 0 auto;
    color: var(--muted, #6b7890);
    font-family: var(--bh-font-sans, Inter, sans-serif);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .macro-table td:nth-child(2)::before { content: "Inflación"; }
  .macro-table td:nth-child(3)::before { content: "PIB"; }
  .macro-table td:nth-child(4)::before { content: "Desempleo"; }
  .macro-table td[colspan] {
    grid-column: 1 / -1;
    display: block;
    text-align: left;
  }

  /* TradingView conserva el widget real, pero se limita al ancho disponible;
     el alto móvil se lee de data-tv-mobile-height y no crea un iframe cortado. */
  .bh-tv-widget {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .bh-tv-widget .tradingview-widget-container,
  .bh-tv-widget .tradingview-widget-container__widget,
  .bh-tv-widget iframe {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .bh-tv-widget[data-tv-widget="advanced-chart"] {
    --tv-mobile-height: clamp(340px, 112vw, 480px);
  }

  /* community-mobile.css se carga después y conserva algunas reglas antiguas
     de 14px; la especificidad extra mantiene el tamaño seguro de iOS. */
  html body[data-community-focus="true"] .comm-search input,
  html body[data-community-focus="true"] .comm-search input:focus,
  html body[data-community-focus="true"] .composer-field #postBody,
  html body[data-community-focus="true"] .composer-field #postBody:focus,
  html body[data-community-focus="true"] .forum-form textarea,
  html body[data-community-focus="true"] .forum-form textarea:focus {
    font-size: 16px !important;
  }

  html body[data-community-focus="true"] .sidebar {
    max-height: calc(100vh - 148px);
    max-height: calc(100dvh - 148px);
  }

  html body[data-community-focus="true"] .chat {
    min-height: min(760px, calc(100vh - 158px));
    min-height: min(760px, calc(100dvh - 158px));
  }
}