/* Fluxo de Loja v6.10.19 — ajuste exclusivo de espaçamento vertical do card Período no celular */
.mobile-network-only{display:none!important}
.desktop-network-only{display:inline}

@media (max-width:767px){
  body.network-mobile-page{background:#f4f5f7}
  body.network-mobile-page .mobile-network-only{display:block!important}
  body.network-mobile-page .desktop-network-only{display:none!important}

  /* Topo compacto no padrão do protótipo, sem afetar outras telas mobile. */
  body.network-mobile-page .topbar{
    height:76px;
    padding:0 14px;
    background:linear-gradient(135deg,#9f1c2d 0%,#b7283d 100%);
    border-bottom:0;
    box-shadow:0 5px 16px rgba(111,18,32,.18);
    color:#fff;
  }
  body.network-mobile-page #mobile-menu,
  body.network-mobile-page #refresh-btn{
    color:#fff;
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.16);
  }
  body.network-mobile-page .top-title{flex:1;min-width:0;margin-left:8px}
  body.network-mobile-page #top-eyebrow{display:none}
  body.network-mobile-page #top-title{font-size:0;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.network-mobile-page #top-title::after{content:attr(data-mobile-title);font-size:19px;line-height:1.1;color:#fff;font-weight:900;letter-spacing:-.02em}
  body.network-mobile-page .top-actions{gap:8px}
  body.network-mobile-page .top-actions .avatar{display:none}
  body.network-mobile-page .main-content{
    padding:92px 12px calc(96px + env(safe-area-inset-bottom));
    background:#f4f5f7;
  }

  /* Loja em linha própria logo abaixo do topo. */
  body.network-mobile-page .network-mobile-store{
    display:block!important;
    margin:0 0 18px;
    padding:0;
  }
  body.network-mobile-page .network-mobile-store .field{
    gap:6px;
    padding:12px 14px;
    background:#fff;
    border:1px solid #e2e5ea;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(31,41,55,.055);
  }
  body.network-mobile-page .network-mobile-store select{
    width:100%;
    min-width:0;
    height:46px;
    border:0;
    padding:0 34px 0 0;
    outline:0;
    background:#fff;
    color:var(--ink);
  }

  /* Resumo consolidado mais limpo. */
  body.network-mobile-page .network-summary-title{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:10px;
    margin:0 2px 16px;
  }
  body.network-mobile-page .network-summary-title>div{min-width:0}
  body.network-mobile-page .network-summary-title h2{margin-bottom:4px}
  body.network-mobile-page .network-summary-title p{margin-top:0}
  /* No celular, o período já está evidente no card de filtros; remove o texto redundante abaixo do título. */
  body.network-mobile-page .network-summary-title>div>p:not(.eyebrow){display:none!important}
  body.network-mobile-page #print-network{
    width:44px;
    height:44px;
    min-width:44px;
    padding:0;
    border-radius:14px;
    display:grid;
    place-items:center;
    box-shadow:0 5px 16px rgba(31,41,55,.06);
  }
  body.network-mobile-page .network-print-label{display:none}
  body.network-mobile-page .network-print-icon{display:block;line-height:1}

  /* Card de período compacto e com leitura sequencial. */
  body.network-mobile-page .network-mobile-filter{
    margin:0 0 18px;
    padding:12px 16px;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(31,41,55,.055);
  }
  body.network-mobile-page .network-filter-title{display:block!important;margin:0 0 8px}
  body.network-mobile-page .network-filter-title h3{margin:0}
  body.network-mobile-page .network-mobile-filter .network-filter{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:8px!important;
    row-gap:6px!important;
  }
  body.network-mobile-page .network-mobile-filter .field{min-width:0}
  body.network-mobile-page .network-mobile-filter .field input{
    width:100%;
    min-width:0;
    padding-left:10px;
    padding-right:8px;
  }
  body.network-mobile-page .network-mobile-filter .filter-actions{
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:8px!important;
    row-gap:6px!important;
    margin-top:8px;
  }
  body.network-mobile-page .network-mobile-filter .filter-actions>*{width:100%;min-width:0}
  body.network-mobile-page #apply-network{grid-column:1/-1;min-height:44px}

  /* Evita repetir um segundo cabeçalho antes do primeiro gráfico. */
  body.network-mobile-page .network-graph-section-title{display:none!important}
  body.network-mobile-page .network-graphs{
    grid-template-columns:1fr!important;
    gap:14px!important;
    margin-top:0!important;
  }
  body.network-mobile-page .network-graphs .chart-card{min-height:0;overflow:hidden}

  /* Primeiro gráfico com hierarquia visual do protótipo. */
  body.network-mobile-page .network-primary-chart{
    padding:0!important;
    border-color:#d7cef4;
    background:#ede9fb;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(91,67,145,.07);
  }
  body.network-mobile-page .network-primary-chart>.card-head{
    margin:0;
    padding:14px 14px 10px;
    background:linear-gradient(135deg,#eee9ff,#e6def8);
  }
  body.network-mobile-page .network-primary-chart>.card-head .eyebrow{margin-bottom:4px}
  body.network-mobile-page .network-primary-chart .network-chart-body{
    margin:0 8px 8px;
    padding:10px 8px 8px;
    background:#fff;
    border:1px solid rgba(126,105,180,.16);
    border-radius:14px;
    overflow:hidden;
  }
  body.network-mobile-page .network-primary-chart .vbar-chart{
    min-height:220px;
    padding-left:0;
    padding-right:0;
  }
  body.network-mobile-page .network-primary-chart>.panel-maximize-btn{top:12px;right:12px}

  /* Demais blocos seguem o fluxo vertical normal e não encostam na navegação inferior. */
  body.network-mobile-page .network-secondary-chart{margin-top:0}
  body.network-mobile-page .dashboard-kpis{margin-top:14px!important}
  body.network-mobile-page .bottom-nav{padding-bottom:max(env(safe-area-inset-bottom),4px)}
}

@media (max-width:350px){
  body.network-mobile-page .network-mobile-filter{padding:10px 14px}
  body.network-mobile-page .network-mobile-filter .network-filter{grid-template-columns:1fr!important}
}

/* v6.10.20 — Rede no celular: manter somente o seletor de loja específico da tela. */
@media (max-width:767px){
  body.network-mobile-page #store-picker-wrap{
    display:none!important;
  }
}
\n\n/* v6.10.25 — Rede: ações no topo e gráfico horizontal exclusivamente no celular */
.mobile-network-chart{display:none}
@media (max-width:767px){
  body.network-mobile-page #print-network{display:none!important}
  body.network-mobile-page #mobile-top-print{
    color:#fff!important;
    background:rgba(255,255,255,.12)!important;
    border-color:rgba(255,255,255,.16)!important;
  }
  body.network-mobile-page .desktop-network-chart{display:none!important}
  body.network-mobile-page .mobile-network-chart{display:block!important}
  body.network-mobile-page .network-primary-chart .network-chart-body{overflow:visible!important}
  body.network-mobile-page .network-primary-chart .hbar-list{
    display:grid!important;
    gap:10px!important;
    min-height:0!important;
    max-height:none!important;
    padding:2px 0!important;
  }
  body.network-mobile-page .network-primary-chart .hbar-item{min-width:0!important}
}


/* v6.10.27 — atalhos de período da Rede agrupados no celular */
@media (max-width:767px){
  body.network-mobile-page .network-mobile-filter .filter-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%!important;
  }
  body.network-mobile-page .network-period-presets{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
  }
  body.network-mobile-page .network-period-presets .mini-btn{width:100%!important;min-width:0!important;padding-left:4px!important;padding-right:4px!important}
  body.network-mobile-page .network-period-presets .mobile-period-only{display:inline-flex!important}
  body.network-mobile-page .network-period-presets .desktop-period-30{display:none!important}
  body.network-mobile-page #apply-network{grid-column:auto!important;width:100%!important;min-height:44px}
}