/*
 * BuyLowTraders Dashboard — Mobile Responsive
 * Aplica SOLO a smartphones (≤600px).
 * Corrige: tabs muy anchos, wrapper overflow, cards del dashboard,
 * tabcontent padding, y cualquier elemento que desborde la pantalla.
 */

/* =============================================================
   SMARTPHONES ≤ 600px
   ============================================================= */
@media screen and (max-width: 600px) {

    /* ── Wrapper principal — ancho viewport + alineación JS ─────
       Esta regla NO intenta centrar el wrapper con CSS (técnicas como
       `left:50% + transform:translateX(-50%)` fallan cuando algún
       ancestor tiene transform/filter/perspective, caso común en
       themes y page builders).

       CSS aporta solamente:
       - width: 100vw → wrapper mide exactamente el viewport
       - padding horizontal → respiro del contenido con los bordes
       - resets visuales

       La alineación horizontal real la hace el JS en alerts.js
       (función `alignHubToViewport`), que mide con getBoundingClientRect
       y aplica un margin-left en píxeles para fijar el wrapper en
       viewport x=0. Pixel-perfect, inmune a cualquier ancestor. */

    .blt-alerts-wrapper {
        /* NO setear width/max-width acá — el JS en alerts.js lo hace con
           document.documentElement.clientWidth (excluye scrollbar del cálculo).
           Si acá ponemos `width: 100vw !important`, el !important del CSS gana
           sobre el width inline del JS → el wrapper mide viewport completo
           (incluyendo área de scrollbar) y crea el gap visual del lado derecho. */
        padding-top: 10px !important;
        padding-right: 16px !important;   /* NECESARIO: alerts.css mq 480/375 pone padding: 10px/8px via shorthand */
        padding-bottom: 60px !important;
        padding-left: 16 !important;    /* NECESARIO: mismo motivo */
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin-top: 0 !important;
        /* width/margin-left/margin-right se setean por JS en runtime */
    }

    /* Defensa contra hijos que intenten "escapar" el padding del wrapper
       usando width:100vw, margin negativo, o 100% con box-sizing mal
       configurado. Los hijos directos se ciñen al content-box del wrapper. */
    .blt-alerts-wrapper > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Matar el borde blanco entre la barra de admin de WP y el hub ──
       La causa típica: el theme pone padding/margin arriba del body con
       fondo blanco. En lugar de tocar el theme, pintamos html + body con
       el mismo color de fondo del wrapper para que cualquier gap sea
       invisible. Solo aplica en páginas que contienen el hub (gracias a
       :has()), sin afectar el resto del sitio. */
    html:has(#blt-results-root),
    body:has(#blt-results-root) {
        background-color: #0d1117 !important;
    }

    /* ── Root del Live Signal Hub ──────────────────────────────
       margin-top: 0 blindado contra alerts.css:3211 que pone `margin-top:14px`
       al root en @media 600 — si no lo override, queda gap arriba del hub. */
    #blt-results-root {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Tabs: una fila de 2 tabs, sin overflow ──────────────── */

    .alertas-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2px !important;
        padding: 6px 6px 0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Cada tab ocupa exactamente el 50% menos el gap */
    .blt-tablink {
        flex: 1 1 calc(50% - 2px) !important;
        min-width: 0 !important;             /* CRÍTICO: permite que el flex shrinkee */
        max-width: calc(50% - 2px) !important;
        padding: 10px 6px !important;
        font-size: 11px !important;
        min-height: 40px !important;
        white-space: normal !important;       /* permite que el texto del tab haga wrap */
        word-break: break-word !important;
        text-align: center !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
    }

    /* ── Tab content ─────────────────────────────────────────── */

    .blt-tabcontent {
        padding: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ── Portfolio bar (stats en el dashboard) ───────────────── */

    .blt-portfolio-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    /* ── Filter bar ──────────────────────────────────────────── */

    .blt-filter-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        overflow-x: hidden !important;
    }

    .blt-filter-search {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .blt-filter-select {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        max-width: calc(50% - 4px) !important;
        font-size: 12px !important;
    }

    /* ── Formulario de crear/editar alerta ───────────────────── */

    .blt-form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .blt-contract-toggle {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .blt-contract-btn {
        flex: 1 !important;
        text-align: center !important;
        font-size: 12px !important;
        padding: 8px 6px !important;
    }

    /* ── Tablas — scroll horizontal sin romper el layout ─────── */

    .alertas-table-wrapper,
    .alertas-table-results-wrapper,
    .blt-rv-pending-table-wrap,
    .blt-fmp-chain-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Alertas grid (cards de cada alerta) ─────────────────── */

    .blt-alerts-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ── Modal ───────────────────────────────────────────────── */

    .blt-detail-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
        justify-content: flex-end !important;
    }

    .blt-detail-modal-box {
        max-height: 90dvh !important;
        max-height: 90vh !important;
        border-radius: 12px 12px 0 0 !important;
        align-self: flex-end !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Toast ───────────────────────────────────────────────── */

    #blt-toast-container {
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
    }

    .blt-toast {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ── Section header ──────────────────────────────────────── */

    .blt-section-header h2 {
        font-size: 1.1rem !important;
        word-break: break-word !important;
    }

    /* ── Results panel: cards de señales cerradas ────────────── */

    .blt-rv-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .blt-rv-header-right {
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .blt-rv-stat-pill {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        text-align: center !important;
        font-size: 11px !important;
    }
}

/* =============================================================
   MUY PEQUEÑO — iPhone SE (≤375px)
   ============================================================= */
@media screen and (max-width: 375px) {

    .blt-tablink {
        font-size: 10px !important;
        padding: 8px 4px !important;
    }

    .blt-tabcontent {
        padding: 10px !important;
    }

    .blt-portfolio-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    .blt-filter-select {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}