/* ═══════════════════════════════════════════════════════════════
   mobile.css — Mais Valor · Otimizações Mobile
   Aplica-se apenas em telas pequenas (≤768px e ≤480px).
   Não afeta o layout desktop.
   ═══════════════════════════════════════════════════════════════ */

/* ── Previne scroll horizontal global ─────────────────────────── */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ══════════════════════════════════════════════════════════════ */
/*  BREAKPOINT PRINCIPAL: 768px                                   */
/* ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Container ───────────────────────────────────────────────── */
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── Page Hero ───────────────────────────────────────────────── */
  .page-hero {
    padding: 1.25rem 16px 1rem !important;
  }
  .page-hero h1 {
    font-size: clamp(26px, 7vw, 38px) !important;
    line-height: 1.1 !important;
  }
  .page-hero p {
    font-size: 13px !important;
  }

  /* ── Main Grid: 1 coluna no mobile ──────────────────────────── */
  .main-grid {
    display: block !important;
    grid-template-columns: unset !important;
  }

  /* ── Sidebar vira seção abaixo do conteúdo ───────────────────── */
  .sidebar {
    margin-top: 1.5rem;
  }
  .sidebar .card {
    margin-bottom: 1rem;
  }

  /* ── Mini Cards: 2 colunas ──────────────────────────────────── */
  .mini-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .mini-card {
    padding: 12px !important;
  }
  .mini-val {
    font-size: 20px !important;
  }

  /* ── Filter Bar ─────────────────────────────────────────────── */
  .filter-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .filter-input,
  .filter-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Cotações em destaque: filtro ocupa ~metade, abas cabem ao lado */
  #filter-input {
    width: 50% !important;
    flex: 1 1 50% !important;
    min-width: 0 !important;
  }
  /* A fileira filtro+abas não quebra nem corta */
  .section-header > div:has(> #filter-input) {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .section-header .tabs {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }

  /* ── Ranking Bar ────────────────────────────────────────────── */
  /* Fica dentro do .table-wrap (que rola): fixa à esquerda e usa a
     largura da tela, com rolagem própria dos botões — assim não é
     cortada pela rolagem horizontal da tabela. */
  .ranking-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    position: sticky !important;
    left: 0 !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
  }
  .ranking-btns {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .ranking-btns::-webkit-scrollbar { display: none; }
  .rank-btn {
    flex-shrink: 0;
  }

  /* ── Tabs ───────────────────────────────────────────────────── */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    display: flex;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }

  /* ── Abas do Consolidador (ferramenta): forçar largura travada na tela
     para o overflow-x:auto acima funcionar. Sem isso, a regra
     "width: fit-content" do style.css faz a barra crescer além da tela,
     e como o body tem overflow-x:hidden, as abas extras ficam escondidas
     e sem rolagem. ────────────────────────────────────────────────── */
  .app .tabs {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Cards de métrica do Consolidador: número grande não pode
     quebrar linha e deformar o card em telas pequenas ──────────── */
  .metrics {
    gap: 8px !important;
  }
  .mcard {
    padding: 12px 14px !important;
  }
  .mcard-value {
    font-size: clamp(15px, 4.5vw, 19px) !important;
    white-space: nowrap;
  }
  .tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ══ TABELAS (todas, incl. home): colunas completas + rolagem lateral ══ */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg, 12px);
  }
  .table-wrap::-webkit-scrollbar { height: 0; }
  .data-table {
    width: auto;
    min-width: 100%;
    table-layout: auto;
  }
  /* Reduz espaço vazio: numéricas usam só o necessário, sem quebrar linha */
  .data-table th,
  .data-table td {
    white-space: nowrap;
  }
  .data-table td.r,
  .data-table th.r {
    width: 1%;
  }
  /* Coluna Ativo (1ª) fica compacta para não esticar a tabela */
  .data-table .asset-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Chart Panel ────────────────────────────────────────────── */
  .chart-panel {
    padding: 14px !important;
  }
  .chart-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .chart-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .chart-ticker {
    font-size: 24px !important;
  }
  .chart-price {
    font-size: 18px !important;
  }

  /* ── Range Buttons ──────────────────────────────────────────── */
  .range-btn {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  /* ── Card ───────────────────────────────────────────────────── */
  .card {
    padding: 14px !important;
  }

  /* ── Section Header ─────────────────────────────────────────── */
  .section-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Banner ─────────────────────────────────────────────────── */
  .banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  .banner-btn {
    align-self: flex-start;
  }

  /* ── Mover Items ────────────────────────────────────────────── */
  .mover-item {
    padding: 8px 0 !important;
  }
  .mover-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Agenda de dividendos ───────────────────────────────────── */
  .agenda-item {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── ═══════════════════════════════════════════════════════════
     COMPARADOR
  ═══════════════════════════════════════════════════════════════ */
  .cmp-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .cmp-ticker-big {
    font-size: 24px !important;
  }
  .cmp-price-big {
    font-size: 16px !important;
  }
  .cmp-table td {
    font-size: 12px !important;
    padding: 8px 8px !important;
  }
  .score-bar-wrap {
    display: none; /* simplifica no mobile */
  }

  /* ── ═══════════════════════════════════════════════════════════
     STATUS PAGE
  ═══════════════════════════════════════════════════════════════ */
  .status-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .section-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Timeline da status page */
  .status-hero {
    padding: 1rem 12px !important;
  }

  /* ── ═══════════════════════════════════════════════════════════
     FERRAMENTAS
  ═══════════════════════════════════════════════════════════════ */
  .tool-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .calc-box {
    padding: 14px !important;
  }

  /* ── ═══════════════════════════════════════════════════════════
     CRIPTO DETALHE
  ═══════════════════════════════════════════════════════════════ */
  .detail-layout {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .detail-hero-inner {
    flex-wrap: wrap;
    gap: 10px;
  }
  .detail-price-block {
    width: 100%;
  }

  /* ── ═══════════════════════════════════════════════════════════
     CRIPTOS LIST
  ═══════════════════════════════════════════════════════════════ */
  .crypto-grid,
  .crypto-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* ── ═══════════════════════════════════════════════════════════
     ATIVO PAGE (detalhe do ativo)
  ═══════════════════════════════════════════════════════════════ */
  .ativo-logo-wrap {
    flex-wrap: wrap;
    gap: 10px;
  }
  .ativo-logo,
  .ativo-logo-av {
    width: 44px !important;
    height: 44px !important;
    font-size: 13px !important;
  }

  /* ── ═══════════════════════════════════════════════════════════
     WATCHLIST / ALERTAS
  ═══════════════════════════════════════════════════════════════ */
  .modal-box {
    margin: 16px !important;
    padding: 20px !important;
    width: calc(100vw - 32px) !important;
    box-sizing: border-box;
  }

  /* ── Pill badges ────────────────────────────────────────────── */
  .pill {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* ── Asset ticker/name em tabelas ───────────────────────────── */
  .asset-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Score badge ────────────────────────────────────────────── */
  .score-badge {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }
}

/* ══════════════════════════════════════════════════════════════ */
/*  BREAKPOINT PEQUENO: 480px                                     */
/* ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Mini Cards: 1 coluna só p/ telas bem pequenas ─────────── */
  .mini-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Page Hero ainda menor ──────────────────────────────────── */
  .page-hero h1 {
    font-size: clamp(22px, 8vw, 30px) !important;
  }

  /* ── Tabela de status em 1 coluna ───────────────────────────── */
  .status-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Crypto grid 1 coluna ───────────────────────────────────── */
  .crypto-grid,
  .crypto-cards {
    grid-template-columns: 1fr !important;
  }

  /* ── Comparador score ───────────────────────────────────────── */
  .cmp-select {
    padding: 12px !important;
  }

  /* ── Nav do Simulador ───────────────────────────────────────── */
  .sim-nav-subtitle {
    display: none !important;
  }
  .sim-nav-divider {
    display: none !important;
  }

  /* ── Ranking buttons ainda menores ─────────────────────────── */
  .rank-btn {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
}

/* ══════════════════════════════════════════════════════════════ */
/*  SIMULADOR: nav inline em mobile (tem classes próprias)        */
/* ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* O nav do simulador usa inline style, então targeting wrapper */
  .sim-root {
    flex-direction: column !important;
  }
  .sim-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 45vh;
    border-right: none !important;
    border-bottom: 1px solid var(--sim-border, #2a2a30) !important;
    overflow-y: auto;
  }
  .sim-main {
    overflow-x: hidden;
  }
  .metrics-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .metrics-row2 {
    grid-template-columns: 1fr 1fr !important;
  }
  .ind-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Nav header do simulador em mobile */
  .sim-nav-info {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════ */
/*  TOUCH TARGETS: mínimo 44px para botões e links interativos    */
/* ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tab,
  .rank-btn,
  .range-btn,
  .banner-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Links de navegação do nav (nav.js) */
  a[href] {
    -webkit-tap-highlight-color: rgba(212, 160, 23, 0.15);
  }

  /* Rows clicáveis da tabela */
  .data-table tr {
    min-height: 48px;
  }

  /* Inputs maiores para dedos */
  .filter-input,
  .filter-select,
  .calc-input {
    min-height: 42px;
    font-size: 16px !important; /* previne zoom automático do iOS */
  }
}

/* ══════════════════════════════════════════════════════════════ */
/*  NAV MOBILE — 3 linhas: logo / login+busca / abas             */
/* ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Container: coluna forçada */
  nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 12px !important;
    gap: 6px !important;
  }

  /* ── LINHA 1: Logo + nome (centralizado) ─────────────────────── */
  .nav-top-row {
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 9px !important;
    padding: 0 !important;
  }
  .nav-logo {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .nav-logo svg,
  .nav-logo img {
    width: 76px !important;
    height: 76px !important;
    flex-shrink: 0 !important;
  }
  .nav-logo span {
    font-size: 61px !important;
    line-height: 76px !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
  }
  #nav-hamburger {
    display: none !important;
  }

  /* nav-bottom-row vira o agrupador das linhas 2 e 3: permite quebra */
  .nav-bottom-row {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  /* ── LINHA 2: Busca + Login (mesma fileira) ──────────────────── */
  .nav-bottom-row .nav-search-wrap {
    order: 1 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    min-width: 0 !important;
    max-width: unset !important;
  }
  /* Remove o atalho "/" no mobile (vazava da caixa) */
  .nav-search-shortcut {
    display: none !important;
  }
  /* Sem o "/", o input usa a largura toda — placeholder não corta */
  .nav-search {
    width: 100% !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  /* Login movido (via nav.js) para a linha da busca */
  .nav-bottom-row #nav-auth-area {
    order: 2 !important;
    position: static !important;
    flex-shrink: 0 !important;
  }

  /* ── LINHA 3: Abas — flex-basis 100% força nova fileira ──────── */
  .nav-links {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 2px !important;
    padding: 2px 0 !important;
  }
  .nav-links::-webkit-scrollbar {
    display: none !important;
  }
  .nav-links a,
  .nav-links > span {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    font-size: 11px !important;
    padding: 6px 9px !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    height: auto !important;
  }

  /* ── Na Carteira (Consolidador), no celular: esconder as abas do site
     (Home, Ativos, Ferramentas, Watchlist, Carteira) e a barra de busca.
     O logo continua visível; o avatar de login é movido pelo nav.js pra
     dentro da linha "Sua carteira" (ver regra #carteira-switcher #nav-auth-area
     logo abaixo), em vez de ficar sozinho nesta linha. Com isso a .nav-bottom-row
     fica completamente vazia (nada dentro dela), então escondemos ela inteira
     também, senão sobra um espaço em branco entre a logo e "Sua carteira". ── */
  body.is-consolidador .nav-links,
  body.is-consolidador .nav-bottom-row .nav-search-wrap {
    display: none !important;
  }
  body.is-consolidador .nav-bottom-row {
    display: none !important;
  }

  /* Ícone de login dentro da linha "Sua carteira" (movido via JS por
     mvSyncAuthIcon, em nav.js): sem isso ficaria com position:absolute
     (regra padrão de #nav-auth-area) e pularia pro canto da tela. */
  #carteira-switcher #nav-auth-area {
    position: static !important;
    flex-shrink: 0 !important;
  }
}