/*
 * Trade Lua V30 — camada móvel global.
 * Carregada por último para harmonizar páginas antigas sem alterar sua lógica.
 */
:root {
  --tl-mobile-fundo-header: #050d18;
  --tl-mobile-borda: #2c4c69;
  --tl-mobile-texto: #f4f9ff;
  --tl-mobile-suave: #afc2d5;
  --tl-mobile-ciano: #65eaff;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

a,
button,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: rgba(101, 234, 255, 0.14);
}

button,
a,
summary,
label {
  touch-action: manipulation;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(101, 234, 255, 0.72);
  outline-offset: 3px;
}

@media (max-width: 960px) {
  body {
    --muted: #afc1d8;
    --admin-suave: #b1c2d7;
    --loc-suave: #b3c4d5;
    --p-suave: #afc3d5;
    min-width: 0;
  }

  .topo-painel,
  .topo-carteira,
  .arena-topo,
  .home-topo,
  .locacao-topo,
  .portal-topo {
    position: sticky !important;
    z-index: 9000 !important;
    top: 0 !important;
    min-height: calc(68px + env(safe-area-inset-top, 0px)) !important;
    height: auto !important;
    padding:
      calc(9px + env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      9px
      max(12px, env(safe-area-inset-left, 0px)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--tl-mobile-borda) !important;
    background: var(--tl-mobile-fundo-header) !important;
    color: var(--tl-mobile-texto);
    box-shadow: 0 9px 28px rgba(0, 0, 0, 0.35);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .topo-painel > a,
  .topo-carteira > a,
  .arena-topo > a,
  .home-topo > a,
  .locacao-topo > a,
  .portal-topo > a {
    min-width: 0 !important;
    max-width: calc(100% - 118px);
    overflow: hidden;
  }

  .topo-painel > a img,
  .topo-carteira > a img,
  .arena-topo > a img,
  .home-topo > a img,
  .locacao-topo > a img,
  .portal-topo > a img {
    width: auto !important;
    max-width: 132px !important;
    height: 43px !important;
    object-fit: contain;
    object-position: left center;
  }

  .marca-painel,
  .marca-painel.personalizada {
    min-width: 0 !important;
    max-width: calc(100% - 118px);
  }

  .home-logo > span,
  .portal-marca small {
    color: var(--tl-mobile-ciano) !important;
  }

  .conteudo-painel,
  .admin-conteudo,
  .arena-conteudo,
  .portal-conteudo {
    width: min(100% - 20px, 1440px) !important;
    padding-top: 18px !important;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .pagina-locacao main {
    width: min(100% - 20px, 1240px) !important;
  }

  .topo-carteira + main {
    width: min(100% - 20px, 1240px) !important;
    margin-top: 20px !important;
    margin-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .admin-hero,
  .hero-carteira,
  .arena-hero,
  .detalhe-hero,
  .portal-hero,
  .locacao-modelo,
  .contratar-locacao,
  .portal-cta-proprietario {
    border-radius: 20px !important;
  }

  .admin-hero,
  .hero-carteira,
  .arena-hero-conteudo,
  .detalhe-hero-conteudo,
  .portal-hero,
  .locacao-modelo,
  .contratar-locacao,
  .portal-cta-proprietario {
    padding: 24px !important;
  }

  :where(
    .conteudo-painel,
    .admin-conteudo,
    .arena-conteudo,
    .portal-conteudo,
    .pagina-locacao main,
    .topo-carteira + main,
    .portal-network main
  ) h1 {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 1.06 !important;
    overflow-wrap: anywhere;
  }

  :where(
    .conteudo-painel,
    .admin-conteudo,
    .arena-conteudo,
    .portal-conteudo,
    .pagina-locacao main,
    .topo-carteira + main,
    .portal-network main
  ) h2 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  :where(
    .conteudo-painel,
    .admin-conteudo,
    .arena-conteudo,
    .portal-conteudo,
    .pagina-locacao main,
    .topo-carteira + main,
    .portal-network main
  ) :where(p, li, dd, em) {
    overflow-wrap: anywhere;
  }

  :where(
    .conteudo-painel,
    .admin-conteudo,
    .arena-conteudo,
    .portal-conteudo,
    .pagina-locacao main,
    .topo-carteira + main,
    .portal-network main
  ) small {
    font-size: max(10px, 0.7em) !important;
  }

  form,
  fieldset,
  label {
    min-width: 0;
  }

  :where(form, .admin-secao, .bloco, .acao-financeira, .contratar-form, .criar-endereco-locacao, .renovar-locacao, .dominio-locacao)
    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    max-width: 100%;
    min-height: 48px;
    font-size: 16px !important;
  }

  :where(form, .admin-secao, .bloco, .portal-acoes, .hero-botoes, .detalhe-acoes, .admin-acoes)
    :where(button, a.acao, a.botao-locacao) {
    min-height: 48px;
  }

  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code,
  .pix-locacao strong,
  .chave-pix-admin,
  [data-copiar] {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .modal-chat,
  .modal-historico-operacoes {
    padding:
      calc(10px + env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      calc(10px + env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px)) !important;
  }

  .modal-chat > form,
  .modal-chat > section,
  .historico-mobile-caixa {
    width: 100% !important;
    max-width: 720px !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .admin-secao,
  .bloco,
  .acao-financeira,
  .plataforma-proprietario,
  .historico-locacao,
  .criar-endereco-locacao,
  .renovar-locacao,
  .dominio-locacao {
    min-width: 0;
    padding: 20px !important;
    border-radius: 18px !important;
  }

  .admin-secao > header,
  .bloco > header,
  .secao-titulo,
  .pedidos-admin > header,
  .portal-titulo,
  .plataforma-proprietario > header,
  .historico-locacao > header {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .admin-secao > header > b,
  .bloco > header > b,
  .pedidos-admin > header > b {
    align-self: flex-start;
    white-space: normal !important;
  }
}

@media (max-width: 760px) {
  .admin-grade-menu,
  .identidade-grade,
  .configuracao-pix-grade,
  .controle-conta-grade,
  .admin-grid,
  .detalhe-grid,
  .grade-torneios,
  .grade-vencedores,
  .grade-treinamentos,
  .grade-pedidos-admin,
  .grade-pedidos-grupos,
  .cards-transacoes,
  .pedidos-grade,
  .acoes-financeiras,
  .lista-pagamentos-locacao,
  .lista-plataformas-admin,
  .gestao-locacao-grid,
  .beneficios-locacao,
  .passos-locacao > div,
  .locacao-modelo,
  .contratar-locacao,
  .portal-grade-plataformas,
  .portal-ranking-rede,
  .identidade-form,
  .perfil-layout,
  .grade-campos-perfil,
  .campos-duplos,
  .campos-triplos,
  .form-ajuste,
  .acoes-admin-transacao,
  .detalhe-acoes {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-kpis,
  .kpis-locacao-admin,
  .kpis-admin-grupos,
  .cards-resumo,
  .saldos-grade,
  .resumo-fila,
  .resumo-historico,
  .arena-resumo {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .portal-hero-network,
  .locacao-hero,
  .hero-carteira,
  .admin-hero {
    min-height: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .portal-hero-network {
    width: min(100% - 20px, 1280px) !important;
    padding: 42px 0 !important;
  }

  .locacao-hero {
    padding: 42px 0 !important;
  }

  .locacao-preview,
  .portal-painel-hero {
    transform: none !important;
  }

  .portal-secao,
  .locacao-secao {
    width: min(100% - 20px, 1280px) !important;
    padding: 56px 0 !important;
  }

  .portal-acoes,
  .hero-botoes,
  .locacao-hero > div > div,
  .portal-cta-proprietario > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .portal-acoes a,
  .hero-botoes a,
  .locacao-hero .botao-locacao,
  .portal-cta-proprietario a {
    width: 100%;
    min-height: 52px;
  }

  .portal-rodape {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .portal-rodape nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 8px !important;
  }

  .portal-rodape nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #29435c;
    border-radius: 10px;
    background: #0a1524;
  }

  .tabela article,
  .torneios-carteira article,
  .operacoes article,
  .lista-pedidos article > header,
  .card-transacao > header,
  .solicitacao-admin > header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .tabela article > b,
  .torneios-carteira article > b,
  .operacoes article > b {
    width: 100%;
    text-align: left !important;
  }

  .abas,
  .abas-gestao,
  .admin-acoes {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .abas > *,
  .abas-gestao > *,
  .admin-acoes > * {
    flex: 0 0 auto;
  }

  .pix-locacao label > span,
  .pix-renovacao span,
  .copiar-link,
  .chave-pix-admin dd,
  .cancelar-pedido {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pix-locacao label > span button,
  .pix-renovacao span button,
  .copiar-link button {
    width: 100% !important;
    min-height: 48px;
  }

  .arena-hero-conteudo,
  .detalhe-hero-conteudo {
    width: 100% !important;
    padding: 24px !important;
  }

  .arena-resumo {
    position: static !important;
    width: auto !important;
    margin: 0 18px 20px !important;
  }

  .admin-card-torneio {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  .admin-card-metricas {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tl-renovacao-alerta + * {
    scroll-margin-bottom: 150px;
  }
}

@media (max-width: 720px) {
  .topo-comunidade {
    position: relative !important;
    z-index: 9000 !important;
    height: calc(62px + env(safe-area-inset-top, 0px)) !important;
    padding:
      env(safe-area-inset-top, 0px)
      max(10px, env(safe-area-inset-right, 0px))
      0
      max(10px, env(safe-area-inset-left, 0px)) !important;
    border-bottom-color: #38617e !important;
    background: #050d18 !important;
    backdrop-filter: none !important;
  }

  .topo-comunidade > a {
    min-width: 0 !important;
    max-width: calc(100% - 146px);
    overflow: hidden;
  }

  .topo-comunidade > a.personalizada img {
    width: auto !important;
    max-width: 105px !important;
    height: 38px !important;
  }

  .menu-comunidade {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 76px !important;
    min-width: 76px;
    height: 42px !important;
    margin-left: 6px !important;
    border-color: #52b9d5 !important;
    background: linear-gradient(145deg, #163650, #0c2032) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  }

  .menu-comunidade span {
    color: var(--tl-mobile-ciano);
    font-size: 18px;
    line-height: 1;
  }

  .menu-comunidade strong {
    color: #fff;
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .info-comunidade {
    width: 42px !important;
    height: 42px !important;
    border-color: #42647f !important;
    background: #102337 !important;
    color: #fff !important;
  }

  .topo-comunidade nav {
    z-index: 9100 !important;
    top: calc(62px + env(safe-area-inset-top, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    max-height: calc(100dvh - 74px - env(safe-area-inset-top, 0px)) !important;
    padding: 12px !important;
    border-color: #4b7897 !important;
    background: #071321 !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.78) !important;
  }

  .menu-aberto .topo-comunidade nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .topo-comunidade nav a {
    display: flex !important;
    align-items: center;
    min-height: 50px;
    padding: 10px 14px !important;
    border-color: #31516d !important;
    background: #102238 !important;
    color: #eff8ff !important;
    text-align: left !important;
    font-size: 13px !important;
  }

  .topo-comunidade nav a::after {
    content: "›";
    margin-left: auto;
    color: #7eddf2;
    font-size: 22px;
  }

  .topo-comunidade nav a.ativo,
  .topo-comunidade nav a:hover,
  .topo-comunidade nav a:focus-visible {
    border-color: var(--tl-mobile-ciano) !important;
    background: linear-gradient(135deg, #17435a, #12323d) !important;
    color: #fff !important;
  }

  .chat-app {
    height: calc(100dvh - 62px - env(safe-area-inset-top, 0px)) !important;
  }

  .canais,
  .conversa {
    top: calc(62px + env(safe-area-inset-top, 0px)) !important;
  }
}

@media (max-width: 480px) {
  .admin-kpis,
  .kpis-locacao-admin,
  .kpis-admin-grupos,
  .cards-resumo,
  .saldos-grade,
  .resumo-fila,
  .resumo-historico,
  .arena-resumo,
  .admin-card-metricas,
  .portal-metricas-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .topo-painel > a img,
  .topo-carteira > a img,
  .arena-topo > a img,
  .home-topo > a img,
  .locacao-topo > a img,
  .portal-topo > a img {
    max-width: 108px !important;
    height: 38px !important;
  }

  .home-logo strong,
  .locacao-topo > a strong,
  .portal-marca strong {
    max-width: 105px;
    overflow: hidden;
    font-size: 12px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-hero,
  .hero-carteira,
  .arena-hero-conteudo,
  .detalhe-hero-conteudo,
  .portal-hero,
  .locacao-modelo,
  .contratar-locacao,
  .portal-cta-proprietario,
  .admin-secao,
  .bloco,
  .acao-financeira {
    padding: 18px !important;
  }

  .admin-card-torneio {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-card-imagem {
    width: 100%;
    min-height: 150px;
  }

  .portal-rodape nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .ranking-linha {
    grid-template-columns: 34px 38px minmax(0, 1fr) !important;
    gap: 7px !important;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .topo-painel,
  .topo-carteira,
  .arena-topo,
  .home-topo,
  .locacao-topo,
  .portal-topo {
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-block: calc(5px + env(safe-area-inset-top, 0px)) 5px !important;
  }

  .topo-comunidade {
    height: calc(54px + env(safe-area-inset-top, 0px)) !important;
  }

  .topo-comunidade nav,
  .canais,
  .conversa {
    top: calc(54px + env(safe-area-inset-top, 0px)) !important;
  }

  .chat-app {
    height: calc(100dvh - 54px - env(safe-area-inset-top, 0px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}