/* Bloquear el zoom por pellizco (más confiable que user-scalable=no, que iOS
   a veces ignora). Permite scroll normal pero no pinch-zoom. */
html { touch-action: pan-x pan-y; }
/* Safe-area (notch del iPhone): en modo app, el contenido no debe meterse bajo
   la barra de estado ni el indicador de inicio. */
@media (max-width: 820px) {
  .topnav, .head, header.topnav {
    padding-top: calc(16px + env(safe-area-inset-top, 8px)) !important;
  }
  body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}

/* ─────────── Navegación móvil (barra inferior, estilo uCharts) ───────────
   En celular/tablet, el menú principal se convierte en una barra fija abajo
   con íconos + texto, cómoda para el dedo. Solo aparece en pantallas chicas;
   en escritorio se mantiene el menú de arriba. */

/* Barra inferior — oculta por defecto (solo se muestra en móvil) */
.nav-movil { display: none; }

@media (max-width: 640px) {
  /* La barra inferior aparece SOLO en celulares (en tablet se usa el menú de
     arriba, como uCharts). */
  .nav-movil {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    background: #fff;
    border-top: 1px solid var(--line, #EAEAEA);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: stretch;
    box-shadow: 0 -2px 12px rgba(0,0,0,.04);
  }
  .nav-movil a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-3, #787774);
    text-decoration: none;
    border-radius: 10px;
    min-height: 48px;
    transition: color .15s, background .15s;
  }
  .nav-movil a svg { width: 22px; height: 22px; }
  .nav-movil a[aria-current] {
    color: var(--blue, #2563EB);
    font-weight: 600;
  }
  .nav-movil a:active { background: var(--bg-soft, #F6F7F8); }

  /* Reservar espacio para que la barra fija no tape el contenido.
     Se aplica al body; las .page que ya tenían padding abajo se normalizan aquí
     para que el espacio sea uno solo (el de la barra), sin duplicar. */
  body { padding-bottom: 72px; }
  .page { padding-bottom: 12px !important; }

}

/* Subtabs con scroll horizontal en celular y tablet (no se amontonan). */
@media (max-width: 820px) {
  .subtabs {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    white-space: nowrap;
  }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs a { flex-shrink: 0; }
}

/* En modo app instalada (standalone), un poco más de aire arriba para que el
   header no quede pegado a la barra de estado del celular. */
@media (display-mode: standalone) {
  .topnav, .head, header.topnav {
    padding-top: calc(20px + env(safe-area-inset-top, 10px)) !important;
  }
}

/* Pantallas angostas (S23 Ultra ~360px): la barra inferior compacta sus 5
   items para que ninguno se corte. */
@media (max-width: 400px) {
  .nav-movil a { font-size: 9.5px; gap: 2px; padding: 6px 1px; }
  .nav-movil a svg { width: 20px; height: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE UNIVERSAL — se ve bien en cualquier celular y tablet.
   Reglas base que aplican a TODAS las páginas (movil.css se carga en todas).
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Nada se sale nunca horizontalmente, en ningún tamaño. */
html, body { max-width: 100%; overflow-x: hidden; }
* { min-width: 0; }
img, svg, table, pre { max-width: 100%; }

/* 2) Tablets y pantallas medianas (hasta 1024px): el menú de arriba se oculta
      y aparece la barra inferior (ya definida arriba a 820px). Las rejillas de
      2+ columnas se mantienen pero con menos separación. */
@media (max-width: 1024px) {
  .cards, .cat-grid { gap: 12px; }
}

/* 3) Celulares (hasta 640px): una sola columna en las rejillas, tipografías
      cómodas, contenedores al 100% del ancho. */
@media (max-width: 640px) {
  .cards, .cat-grid, .stats { grid-template-columns: 1fr !important; }
  .tabla-wrap, .pos-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 4) Celulares angostos (hasta 380px): S23 Ultra y compactos. Todo se
      compacta un punto más para que quepa sin cortarse. */
@media (max-width: 380px) {
  h1 { font-size: 20px !important; }
  .nav-movil a { font-size: 9px; }
  .nav-movil a svg { width: 19px; height: 19px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HORIZONTAL (landscape) — el celular volteado. Ancho grande pero altura
   pequeña. Aseguramos que TODO quepa sin scroll horizontal, en cualquier
   dispositivo, y que la barra inferior no coma tanto espacio vertical.
   ═══════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
  /* En horizontal ocultamos la barra inferior (come altura) y usamos el menú
     de arriba, que a lo ancho cabe bien. */
  .nav-movil { display: none !important; }
  .menu { display: flex !important; }
  body { padding-bottom: 0; }
  .page { padding-bottom: 12px !important; }
  /* Encabezados y títulos más compactos para aprovechar la poca altura */
  h1 { font-size: 19px !important; }
  .topnav, .head, header.topnav { padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 8px !important; }
}

/* Refuerzo GLOBAL definitivo: en cualquier orientación y dispositivo, nada
   puede provocar scroll horizontal. */
html, body { overflow-x: hidden !important; max-width: 100vw; }
.page, main, section, .summary, .stats, .cards { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   ESCALA COMPACTA en celulares angostos (S23 ~360px): todo un punto más
   chico, con más aire, para que no se sienta amontonado (como uCharts).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  h1 { font-size: 21px !important; }
  .sec-k, .chart-k { font-size: 11px !important; }
  /* Tarjetas con padding un poco menor */
  .pcard, .hs-card, .chart-card, .metric-card, .stat { padding: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   HUB de secciones (móvil): íconos + texto, estilo uCharts. Reemplaza los
   subtabs de texto. Solo en celular; en escritorio quedan los subtabs.
   ═══════════════════════════════════════════════════════════════════ */
.subtabs.hub .hub-oculto { display: none; }   /* Calculadora fuera del hub móvil */

@media (max-width: 640px) {
  .subtabs.hub {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    gap: 3px;
    background: var(--bg-soft, #F6F7F8);
    border-radius: 14px;
    padding: 6px 5px;
    margin-bottom: 22px;
    overflow: visible;
  }
  .subtabs.hub a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 2px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ink-3, #64748B);
  }
  .subtabs.hub a svg { width: 19px; height: 19px; }
  .subtabs.hub a[aria-current] {
    background: #fff;
    color: var(--green, #16A34A);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }
  .subtabs.hub a[aria-current] svg { color: var(--green, #16A34A); }
}


/* Botón "Revisar orden": en celular, ancho completo para que el texto
   —incluido "Mercado cerrado"— quepa siempre en una sola línea. */
@media (max-width: 640px) {
  .btn-revisar {
    width: 100%;
    margin-left: 0;
    padding: 0 16px;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   TABLET HORIZONTAL (701-1024px, landscape): header en dos filas ordenadas.
   Fila 1: logo (izq) + En vivo/cuadritos/campana (der).
   Fila 2: el menú de secciones (Gráficos/Opciones/…) centrado.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 701px) and (max-width: 1024px) and (orientation: landscape) {
  .topnav {
    flex-wrap: wrap !important;
    row-gap: 10px;
    padding: 12px 20px !important;
    align-items: center;
  }
  .logo { order: 1; }
  .topnav-r { order: 2; margin-left: auto; }
  /* El menú baja a su propia fila, ocupando todo el ancho y centrado */
  .menu {
    order: 3;
    position: static !important;
    transform: none !important;
    flex-basis: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
  }
  .menu a { padding: 8px 14px; font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════
   TABLET VERTICAL (641-1024px, portrait): el menú principal
   (Gráficos/Opciones/Mi cuenta/…) baja a la barra INFERIOR, como en celular.
   Así el header de arriba queda limpio (solo logo + En vivo + campana).
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  /* Ocultar el menú de arriba */
  .menu { display: none !important; }
  /* Mostrar la barra inferior (misma que en celular) */
  .nav-movil {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    background: #fff;
    border-top: 1px solid var(--line, #EAEAEA);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: stretch;
    box-shadow: 0 -2px 12px rgba(0,0,0,.04);
  }
  .nav-movil a {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px; padding: 6px 2px;
    font-size: 12px; font-weight: 500;
    color: var(--ink-3, #787774);
    text-decoration: none; border-radius: 10px; min-height: 50px;
  }
  .nav-movil a svg { width: 24px; height: 24px; }
  .nav-movil a[aria-current] { color: var(--blue, #2563EB); font-weight: 600; }
  /* Reservar espacio para que la barra no tape el contenido */
  body { padding-bottom: 78px; }
}


/* ═══════════════════════════════════════════════════════════════════
   TABLET VERTICAL (portrait): centrar el hub de secciones y quitar
   Calculadora (ya está en el panel lateral). Solo en vertical; en
   horizontal se deja completo.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  /* El recuadro gris del hub mide lo que su contenido (fit-content) y se centra
     con margin auto —así no se pasa a los lados—. */
  .subtabs {
    display: flex !important;
    width: fit-content !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center;
  }
  /* Ocultar el enlace de Calculadora (está en el panel de cuadritos) */
  .subtabs a[href="calculadora"],
  .subtabs a[href="calculadora.html"] {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   GRÁFICAS: pantalla completa. El body NO lleva padding-bottom (que le robaba
   altura a la gráfica y dejaba el hueco abajo). La barra inferior flota encima.
   ═══════════════════════════════════════════════════════════════════ */
html[data-seccion="grafica"] body,
html[data-seccion="grafica"] { padding-bottom: 0 !important; }