/* ===== Nave Trading OS — Responsive breakpoints: ≤1024px, ≤768px, ≤480px ===== */
/* Extracted from style.css — 2026-06-19 */

/* ══════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile
   ══════════════════════════════════════════════ */


/* ── Tablet Landscape (≤1024px) ── */
@media (max-width: 1024px) {
    .journal-layout { grid-template-columns: 1fr; }
    .journal-form { position: static; }
    .trade-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-3col { grid-template-columns: 1fr 1fr; }
    .risk-grid { grid-template-columns: repeat(3, 1fr); }
    .sharpe-grid { grid-template-columns: repeat(2, 1fr); }
    .mc-stats-row { grid-template-columns: repeat(2, 1fr); }
    .ls-matrix-table { font-size: 0.65rem; }
    .main-content { padding: 1.5rem; }

    /* Auth — tablet landscape */
    .auth-left { flex: 0 0 42%; padding: 2rem; }
    .auth-right { flex: 0 0 58%; padding: 2rem; }
    .auth-diamond { font-size: 4rem; }
    .auth-title { font-size: 2.2rem; }
    .auth-box { padding: 2rem; max-width: 380px; }
}

/* ── Tablet Portrait & Mobile (≤768px) ── */
@media (max-width: 768px) {
    /* Topbar mobile — show hamburger, hide nav by default */
    .topbar-hamburger { display: flex; }
    .topbar-market { padding: 0.25rem 0.5rem; gap: 0.35rem; }
    .market-bar-wrap { display: none; }
    .market-session { font-size: 0.65rem; }
    .topbar-nav {
        display: none;
        position: fixed;
        top: 64px;
        left: 0.5rem; right: 0.5rem;
        z-index: 499;
    }
    .topbar.open .topbar-nav { display: flex; }
    .topbar-nav .nav-pill {
        width: 100%;
        flex-direction: column;
        background: var(--gray-50);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        padding: 0.5rem;
        gap: 4px;
        box-shadow: var(--shadow-lg);
    }
    .topbar-nav .nav-item { width: 100%; justify-content: flex-start; padding: 0.6rem 0.85rem; border-radius: 10px; }
    .topbar-user { margin-left: auto; }
    .topbar-user-info { display: none; }  /* hide name/role text on mobile */

    /* Main content */
    .main-content { padding: 0.75rem; height: calc(100vh - 64px); }
    .main-content.chart-active { padding: 0; height: calc(100vh - 64px); }

    /* Stats & grids */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-sm); }
    .stat-card { padding: 0.8rem; }
    .stat-value { font-size: 1.2rem; }
    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-3col { grid-template-columns: 1fr; }
    .risk-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
    .sharpe-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
    .dash-hr-row { grid-template-columns: 1fr; }
    .mc-stats-row { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
    .mc-stat-card { padding: 0.5rem; }
    .mc-stat-value { font-size: 0.95rem; }

    /* Sessions */
    .session-grid { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
    .session-card { padding: 0.6rem; }
    .session-card .session-pnl { font-size: 0.9rem; }

    /* Inicio */
    .in-wrap { padding: 0.5rem; gap: 0.5rem; }
    .in-top { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .in-metricas { gap: 1rem; }
    .in-m-val { font-size: 0.95rem; }
    .in-curva { height: 140px; }
    .in-data-row { grid-template-columns: 1fr; gap: 0.5rem; }

    /* Charts toolbar */
    .charts-toolbar {
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.4rem 0.6rem;
        min-height: auto;
    }
    .charts-toolbar-left {
        flex-wrap: wrap;
        gap: 0.35rem;
        flex: 1;
        min-width: 0;
    }
    .charts-toolbar-left select {
        font-size: 0.72rem;
        padding: 0.3rem 0.4rem;
        max-width: 80px;
    }
    .charts-toolbar-right {
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    .tf-btn { padding: 0.25rem 0.5rem; font-size: 0.68rem; }
    .chart-settings-popup {
        right: 2px;
        top: 38px;
        min-width: 260px;
        max-width: calc(100vw - 16px);
        font-size: 0.75rem;
    }
    .chart-settings-popup h4 { font-size: 0.8rem; }
    .kbd-row { font-size: 0.7rem; }
    .kbd-row label { min-width: 70px; }
    .kbd-row input { width: 60px; font-size: 0.7rem; }

    /* Chart panels — stack vertically */
    .charts-panels {
        flex-direction: column;
        gap: 3px;
    }
    .chart-panel-wrap {
        flex: 1 1 auto;
        min-height: 300px;
    }
    .chart-panel-wrap:last-child {
        min-height: 250px;
    }

    /* Trading panel — bottom sheet on mobile */
    .trading-panel {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 45vh;
        border-radius: 16px 16px 0 0;
        z-index: 300;
    }
    .trading-panel.collapsed { width: auto; left: auto; }
    .trading-panel-header { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
    .tp-section { padding: 0.4rem 0.6rem; }
    .tp-btn { padding: 0.4rem; font-size: 0.8rem; }
    .tp-input { padding: 0.3rem 0.4rem; font-size: 0.72rem; }
    .tp-section-title { font-size: 0.68rem; }

    /* Positions dropdown */
    .positions-dropdown {
        width: calc(100vw - 16px);
        max-width: 360px;
        right: -4px;
        max-height: 55vh;
    }

    /* Tools bubble — top-left on mobile to avoid trading panel overlap */
    .chart-tools-bubble {
        top: 6px;
        right: auto;
        left: 6px;
    }
    .tool-btn { width: 28px; height: 28px; font-size: 0.85rem; }

    /* Admin */
    .admin-tabs {
        flex-wrap: wrap;
        gap: 2px;
    }
    .admin-tab {
        flex: 0 0 auto;
        padding: 0.4rem 0.6rem;
        font-size: 0.72rem;
    }
    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-table { font-size: 0.7rem; }
    .admin-table th, .admin-table td { padding: 0.35rem 0.4rem; }
    .admin-filter-row { gap: 0.35rem; }
    .admin-filter-row select { font-size: 0.72rem; padding: 0.3rem 0.5rem; }
    .admin-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
    #admin-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .status-summary-card { padding: 0.6rem 0.8rem; min-width: auto; }

    /* Journal */
    .journal-toolbar { flex-direction: column; align-items: stretch; }
    .journal-toolbar .btn-group { justify-content: flex-end; }
    .trade-cards-grid { grid-template-columns: 1fr; }
    .trade-card { flex-direction: column; }
    .trade-card-image { width: 100%; aspect-ratio: 16/9; min-height: auto; }
    .trade-card-image img { position: relative; }
    .trade-card-details { grid-template-columns: repeat(2, 1fr); gap: 0.3rem; }
    .journal-filters { gap: 0.3rem; }
    .journal-filters input { width: 70px; }
    .journal-mini-stats { gap: 0.6rem; font-size: 0.7rem; flex-wrap: wrap; }

    /* Calendar */
    .calendar-grid .cal-day { font-size: 0.65rem; }
    .calendar-nav .cal-month-label { font-size: 0.85rem; }
    .calendar-nav button { padding: 0.2rem 0.5rem; font-size: 0.75rem; }

    /* Day-of-week bars */
    .dow-bars { height: 80px; gap: 0.3rem; }
    .dow-bar { max-width: 28px; }
    .dow-label { font-size: 0.6rem; }

    /* Pair performance */
    .pair-row .pair-name { width: 55px; font-size: 0.7rem; }
    .pair-row .pair-pnl { width: 60px; font-size: 0.7rem; }
    .pair-row .pair-trades-count { width: 28px; font-size: 0.65rem; }

    /* Weekly P&L */
    .weekly-pnl-bars { height: 65px; gap: 0.2rem; }
    .wp-bar { max-width: 20px; }

    /* Hourly heatmap */
    .hh-bars { height: 50px; }
    .hh-label { font-size: 0.42rem; }
    .hh-bar-wrap { height: 38px; }

    /* Monte Carlo */
    .mc-hist-row { height: 60px; gap: 0.3rem; }
    .mc-hist-bar { width: 12px; }

    /* Donut */
    .donut-wrap { gap: var(--gap-md); flex-wrap: wrap; }
    .donut-chart { width: 90px; height: 90px; }
    .donut-inner .donut-value { font-size: 1.1rem; }

    /* Auth */
    .auth-container { flex-direction: column; }
    .auth-left { flex: 0 0 auto; padding: 2.5rem 2rem; min-height: auto; }
    .auth-left::before, .auth-left::after { display: none; }
    .auth-diamond { font-size: 3rem; }
    .auth-title { font-size: 2rem; }
    .auth-tagline { font-size: 0.9rem; }
    .auth-status { margin-top: 1.2rem; }
    .auth-right { flex: 0 0 auto; padding: 0 2rem 2.5rem; }
    .auth-box { padding: 1.5rem; max-width: 100%; }
    .journal-form .form-row { grid-template-columns: 1fr; }

    /* Global */
    .page-header h2 { font-size: 1.2rem; }
    .page-header p { font-size: 0.8rem; }
    .btn { font-size: 0.8rem; padding: 0.55rem; }

    /* Toast */
    .toast { font-size: 0.78rem; padding: 0.7rem 0.9rem; }

    /* Sharpe / risk cards */
    .sharpe-card { padding: 0.5rem; }
    .sharpe-value { font-size: 1rem; }
    .risk-card { padding: 0.6rem; }
    .risk-card .risk-value { font-size: 1rem; }

}

/* ── Small Phones (≤480px) ── */
@media (max-width: 480px) {
    .topbar { padding: 0 0.5rem; gap: 0.3rem; }
    .topbar-logo-text { display: none; }
    .topbar-logo { padding: 0.4rem 0.5rem; }
    .topbar-market { padding: 0.2rem 0.4rem; gap: 0.25rem; }
    .market-info { gap: 0; }
    .market-label { font-size: 0.52rem; }
    .market-session { font-size: 0.6rem; }
    .nav-item { padding: 0.4rem 0.55rem; font-size: 0.75rem; }
    .nav-label { display: none; }
    #admin-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .main-content { padding: 0.5rem; height: calc(100vh - 64px); }
    .main-content.chart-active { padding: 0; height: calc(100vh - 64px); }

    /* Stats 1-column on very small */
    .stats-grid { grid-template-columns: 1fr; }
    .in-greet { font-size: 1rem; }
    .risk-grid { grid-template-columns: 1fr 1fr; }
    .sharpe-grid { grid-template-columns: 1fr; }

    /* Charts */
    .charts-toolbar { padding: 0.3rem 0.4rem; gap: 0.25rem; }
    .charts-toolbar-left { gap: 0.2rem; }
    .charts-toolbar-left h2 { display: none; }
    .charts-toolbar-left select { font-size: 0.68rem; padding: 0.25rem 0.3rem; max-width: 65px; }
    .tf-btn { padding: 0.2rem 0.4rem; font-size: 0.62rem; }
    .chart-settings-popup { min-width: 220px; right: 2px; left: 2px; width: auto; max-width: none; }
    .chart-panel-wrap { min-height: 220px; }
    .chart-panel-wrap:last-child { min-height: 180px; }

    /* Trading panel */
    .trading-panel { max-height: 40vh; }
    .tp-btn { padding: 0.35rem; font-size: 0.75rem; }

    /* Tools */
    .tool-btn { width: 26px; height: 26px; font-size: 0.75rem; }
    .chart-tools-bubble { min-width: auto; }
    .tools-bubble-header { font-size: 0.68rem; padding: 0.35rem 0.5rem; }

    /* Admin */
    .admin-tab { font-size: 0.68rem; padding: 0.3rem 0.45rem; }
    .admin-stats-grid { grid-template-columns: 1fr; }

    /* Journal */
    .trade-card-details { grid-template-columns: 1fr 1fr; font-size: 0.7rem; }
    .trade-card-pair { font-size: 0.85rem; }

    /* Session grid */
    .session-grid { grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
    .session-card { padding: 0.45rem; }

    /* Inicio */
    .in-curva { height: 120px; }
    .in-m-val { font-size: 0.85rem; }

    /* Calendar */
    .calendar-grid .cal-day { font-size: 0.58rem; }

    /* Donut */
    .donut-wrap { flex-direction: column; align-items: center; }

    /* Auth */
    .auth-box { padding: 1.2rem; }
    .auth-left { padding: 1.5rem 1rem; }
    .auth-diamond { font-size: 2.5rem; }
    .auth-title { font-size: 1.6rem; }
    .auth-tagline { font-size: 0.8rem; }

    .btn { font-size: 0.75rem; padding: 0.45rem; }

    /* Live indicator */
    .live-indicator { font-size: 0.6rem; padding: 0.2rem 0.4rem; }

    /* Indicators popup */
    .indicators-popup { min-width: 160px; left: auto; right: 0; }
    .indicator-option { font-size: 0.72rem; padding: 0.35rem 0.5rem; }
}

@media (max-width: 900px) {
    .inicio-layout {
        grid-template-columns: 1fr;
        padding: 0.5rem;
    }
    .inicio-equity-row {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 500px) {
    .inicio-hero h1 {
        font-size: 1.2rem;
    }
    .inicio-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .expl-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .fab-container {
        top: 55%;
        bottom: auto;
        left: 0.5rem;
        transform: translateY(-50%);
        gap: var(--gap-sm);
    }
    .fab-main {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .fab-dots {
        width: 20px;
        height: 20px;
        gap: 4px;
    }
    .fab-dot {
        width: 4px;
        height: 4px;
    }
    .fab-item {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    .fab-item-icon {
        font-size: 1rem;
    }
    .fab-menu {
        gap: var(--gap-sm);
    }
    .fab-item-label {
        left: -4.5rem;
        font-size: 0.55rem;
    }
}

@media (max-width: 768px) {
    .cm-shell {
        width: calc(100vw - 1.25rem);
        border-radius: 20px;
        padding: 1.4rem 0.9rem 1.1rem;
    }
    .cm-header-total { font-size: 2rem; }
    .cm-vault-side { padding: 1.1rem 0.4rem 0.85rem; }
    .cm-vault-amount { font-size: 1.25rem; }
    .cm-vault-icon { font-size: 1.2rem; }
    .cm-vault-label { font-size: 0.6rem; }
    .cm-vault-divider { width: 28px; }
    .cm-divider-pill { width: 24px; height: 24px; border-radius: 7px; }
    .cm-divider-arrow { font-size: 0.7rem; }