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

/* ─────────── Modo PAPEL ───────────
   Switch Real | Papel en la barra superior. En papel, la barra se pinta de
   naranja: imposible confundirla con la cuenta real. Nada de esto mueve el
   layout (no agrega franjas que empujen el contenido). */
.modo-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 999px;
  background: #F1F2F4; border: 1px solid rgba(0,0,0,.06);
  margin-right: 8px; flex-shrink: 0;
}
.modo-switch button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: 600 12px/1 Inter, system-ui, sans-serif; color: #6B7280;
  padding: 6px 11px; border-radius: 999px; min-height: 28px;
  -webkit-tap-highlight-color: transparent;
}
.modo-switch button[aria-pressed="true"] { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.modo-switch.en-papel button[data-modo="papel"][aria-pressed="true"] { background: #E8830C; color: #fff; box-shadow: none; }

html.modo-papel .topnav { background: #FFF6EA !important; box-shadow: inset 0 -3px 0 #E8830C; }
html.modo-papel .nav-movil { box-shadow: inset 0 3px 0 #E8830C; }

/* Gráficas (sin barra superior): etiqueta fija que no ocupa espacio. */
.modo-papel-tag {
  position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 60; pointer-events: none;
  background: #E8830C; color: #fff; font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .08em; padding: 5px 10px; border-radius: 999px;
}

/* Mi bot en modo papel: aviso de que ahí siempre es la cuenta real. */
.aviso-bot-real {
  margin: 4px 0 16px; padding: 12px 14px; border-radius: 10px;
  background: #FFF6EA; border: 1px solid #F5C58A; color: #8A4B08;
  font-size: 13.5px; line-height: 1.5;
}

/* Botón de confirmar en papel (Negociar). */
.btn-confirmar.btn-papel { background: #E8830C !important; border-color: #E8830C !important; }

/* Escritorio: junto al logo, antes del menú centrado. */
.modo-switch.junto-logo { margin: 0 auto 0 14px; }
@media (min-width: 1025px) and (max-width: 1180px) {
  .modo-switch.junto-logo button { padding: 5px 8px; }
}
@media (max-width: 700px) {
  .modo-switch { margin-right: 4px; }
  .modo-switch button { padding: 5px 9px; font-size: 11.5px; min-height: 26px; }
  .topnav-r .chip-live { white-space: nowrap; }
}

/* Botón "Reiniciar" dentro del aviso de papel (Mi cuenta). */
.btn-reiniciar-papel {
  margin-left: auto; flex-shrink: 0; cursor: pointer;
  background: #fff; color: #B45309; border: 1px solid #F5C58A; border-radius: 8px;
  font: 600 12px/1 Inter, system-ui, sans-serif; padding: 7px 10px;
}
.btn-reiniciar-papel:hover { background: #FFF6EA; }

/* ─────────── Varias cuentas de papel ───────────
   El botón de papel muestra el nombre de la cuenta (recortado si es largo) y
   abre un menú para elegir otra o cambiarle el nombre. El menú flota: no mueve
   nada del layout. */
.modo-switch [data-modo="papel"] { display: inline-flex; align-items: center; gap: 4px; max-width: 128px; }
.modo-switch .modo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.modo-switch .modo-caret { font-size: 9px; opacity: .85; flex-shrink: 0; }
@media (max-width: 700px) { .modo-switch [data-modo="papel"] { max-width: 92px; } }

.modo-menu {
  position: absolute; z-index: 1000; min-width: 220px; max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px;
  font: 500 14px/1.3 Inter, system-ui, sans-serif; color: #111827;
}
.modo-menu-tit { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #9CA3AF; padding: 6px 10px 4px; }
.modo-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; padding: 10px; border-radius: 8px;
  font: inherit; color: inherit; min-height: 40px;
}
.modo-menu button:hover { background: #F6F7F8; }
.modo-menu button[aria-checked="true"] { background: #FFF6EA; }
.modo-check { width: 14px; color: #E8830C; font-weight: 700; flex-shrink: 0; }
.modo-menu-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modo-menu-sal { font-size: 12px; color: #9CA3AF; font-variant-numeric: tabular-nums; }
.modo-menu .modo-menu-ren { color: #B45309; font-size: 13px; border-top: 1px solid #F1F2F4; border-radius: 0 0 8px 8px; margin-top: 4px; }
/* Escritorio angosto (menú centrado muy cerca del logo): botón de papel más
   corto y sin flechita, para no rozar el menú. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .modo-switch.junto-logo [data-modo="papel"] { max-width: 64px; }
  .modo-switch.junto-logo .modo-caret { display: none; }
}
@media (min-width: 1025px) and (max-width: 1099px) {
  .modo-switch.junto-logo [data-modo="papel"] { max-width: 48px; }
}
/* "Nombre" y "Reiniciar" juntos a la derecha del aviso de papel. */
.btn-renombrar-papel + .btn-reiniciar-papel { margin-left: 8px; }

/* ─────────── Horario del símbolo (Negociar) ─────────── */
.horario-sim { margin-top: 8px; font: 500 12.5px/1.45 Inter, system-ui, sans-serif; color: #6B7280; }
.horario-sim:empty { display: none; }
.horario-sim .hs-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; }
.horario-sim .hs-tit { font-weight: 600; color: #374151; }
.horario-sim .hs-est { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.horario-sim .hs-est.abierto { background: #E8F7EE; color: #15803D; }
.horario-sim .hs-est.ext { background: #FFF1DD; color: #B45309; }
.horario-sim .hs-est.cerrado { background: #F1F2F4; color: #6B7280; }
.horario-sim ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.horario-sim li { white-space: nowrap; }
.horario-sim li.on { color: #111827; }
.horario-sim li b { font-weight: 600; }
.horario-sim .solo-lim { font-size: 10.5px; font-weight: 600; color: #B45309; text-transform: uppercase; letter-spacing: .03em; }
.horario-sim .hs-nota { margin-top: 3px; color: #B45309; }
@media (max-width: 400px) { .horario-sim li { white-space: normal; } }