/* =========================================================================
   MERCADO PRO CLUBS — responsive.css
   Breakpoints:
     Mobile pequeno : max-width: 480px
     Mobile         : max-width: 768px
     Tablet         : max-width: 1024px
========================================================================= */

/* Base fluida: impede que imagens, textos e controles forcem rolagem lateral. */
html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

main,
section,
article,
aside,
nav,
div {
  min-width: 0;
}

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

button,
input,
select,
textarea {
  max-width: 100%;
}

@media (max-width: 1024px) {
  body {
    background-attachment: scroll;
  }
}

/* =========================================================================
   HEADER GLOBAL
========================================================================= */
@media (max-width: 768px) {
  .main-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo auth"
      "nav nav";
    width: 100%;
    height: auto;
    min-height: 72px;
    margin-bottom: 18px;
    padding: 8px 12px 10px;
    gap: 7px 10px;
  }

  .main-header > .logo {
    grid-area: logo;
    width: auto;
    height: auto;
    margin: 0;
  }

  .main-header > .logo a {
    display: flex;
    align-items: center;
  }

  .main-header > .logo img.logo {
    width: 116px;
    height: 56px;
    margin: 0;
    object-fit: contain;
  }

  /* Menu vira uma faixa horizontal acessível por toque. */
  .menu-carrossel {
    grid-area: nav;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    padding: 3px 0 1px;
    scrollbar-width: none;
  }

  .menu-carrossel::-webkit-scrollbar {
    display: none;
  }

  .lista-links {
    width: max-content;
    min-width: 100%;
    justify-content: center;
    gap: 4px;
  }

  .lista-links a {
    display: block;
    margin: 0;
    padding: 7px 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  .login-header {
    grid-area: auth;
    min-width: 0;
    margin-left: 0;
    gap: 8px;
    align-items: center;
    justify-self: end;
  }

  /* Botões Entrar / Criar conta menores */
  .login,
  .cadastra-se {
    font-size: 13px;
    padding: 7px 12px;
  }

  /* Nome do usuário logado: esconde em telas pequenas */
  .hu-nome {
    display: none;
  }

  /* Dropdown do usuário: alinha à direita */
  .hu-dropdown {
    right: 0;
    left: auto;
    min-width: 160px;
  }

  /* Painel de notificações e mensagens */
  #painel-sino,
  #painel-msg {
    width: calc(100vw - 24px);
    right: 12px;
    top: 70px;
    max-height: 75vh;
  }
}

@media (max-width: 480px) {
  .main-header {
    padding-inline: 8px;
    row-gap: 6px;
  }

  .main-header > .logo img.logo {
    width: 96px;
    height: 48px;
  }

  .login,
  .cadastra-se {
    display: inline-flex;
    padding: 7px 9px;
    font-size: 11px;
  }

  .hu-foto {
    width: 34px;
    height: 34px;
  }

  .lista-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 6px;
  }

  .menu-carrossel {
    overflow-x: visible;
    padding-block: 3px;
  }

  .menu-carrossel nav {
    width: 100%;
  }

  .lista-links li {
    min-width: 0;
  }

  .lista-links a {
    width: 100%;
    padding: 7px 5px;
    overflow: hidden;
    font-size: 11px;
    text-align: center;
    text-overflow: ellipsis;
  }

  #painel-sino,
  #painel-msg {
    width: 100vw;
    right: 0;
    border-radius: 0 0 14px 14px;
  }
}

/* =========================================================================
   HERO (index.html)
========================================================================= */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 42px 16px;
  }

  .hero h1 {
    font-size: 38px;
    letter-spacing: 1px;
  }

  .hero h2 {
    font-size: 13px;
    width: auto;
    padding: 6px 18px;
  }

  .hero p {
    font-size: 15px;
  }

  .btn-neon {
    width: min(100%, 340px);
    font-size: 15px;
    padding: 12px 28px;
  }

  /* Cards de features: empilha em coluna */
  .card-grid {
    grid-template-columns: 1fr;
    padding: 0 16px 32px;
  }

  /* Seção "Sua Carreira" */
  .ia {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 20px;
    text-align: center;
  }

  .ia-lado-direito {
    justify-content: center;
  }

  .features-lista {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 28px;
  }

  .texto-brilante h2 {
    font-size: 11px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================================
   MERCADO (mercado.html)
========================================================================= */
@media (max-width: 768px) {
  .main-main {
    padding: 20px 0;
  }

  .lfg-section {
    padding: 12px 0;
    width: 100%;
  }

  .lfg-container {
    flex-direction: column;
    width: 100%;
  }

  .lfg-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 0 12px;
  }

  .lfg-header h2 {
    font-size: 1.5rem;
  }

  /* Filtros em coluna */
  .lfg-filtros {
    flex-direction: column;
    gap: 8px;
  }

  .lfg-select {
    width: 100%;
  }

  /* Formulário de publicar vaga */
  .form-linha {
    flex-direction: column;
    gap: 10px;
  }

  .lfg-criador {
    padding: 16px;
    margin: 0 0 24px 0;
  }

  /* Cards de vagas */
  .lfg-feed {
    gap: 14px;
  }

  .lfg-card {
    padding: 14px;
    overflow: hidden;
  }

  .card-topo {
    flex-wrap: wrap;
    gap: 6px;
  }

  .card-rodape {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .card-rodape > div {
    width: 100%;
    justify-content: flex-start;
  }

  /* Cronômetro não some */
  .card-topo span[id^="timer-"] {
    margin-left: 0;
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .lfg-header h2 { font-size: 1.2rem; }

  .btn-publicar {
    font-size: 14px;
    padding: 10px;
  }

  /* Badge de plataforma/posição menor */
  .badge { font-size: 0.7rem; padding: 3px 8px; }

  .card-rodape > div > a,
  .card-rodape > div > button {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    min-height: 38px;
    text-align: center;
  }
}

/* =========================================================================
   PERFIL (meu-perfil.html)
========================================================================= */
@media (max-width: 1024px) {
  /* Topo do perfil: empilha */
  .perfil-container-main {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 16px;
    margin: 16px;
    padding: 16px;
  }

  .static {
    width: 100%;
  }

  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Info bar */
  .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .detalhe {
    display: none; /* esconde separadores verticais em tablet */
  }
}

@media (max-width: 768px) {
  /* Foto de perfil menor */
  .img-icon {
    width: 160px;
    height: 160px;
    margin: 10px auto;
  }

  .btn-upload-foto {
    margin: -40px -60px 0 -30px;
  }

  /* Formulário de detalhes */
  .detalhes-jogador {
    grid-template-columns: 1fr;
    width: auto;
    margin: 12px;
    padding: 16px;
  }

  .escudo-clube {
    display: none; /* esconde escudo em mobile */
  }

  .linha-um,
  .linha-dois {
    margin: 10px 0;
    width: 100%;
  }

  /* Posições e plataformas */
  .posicoes {
    width: auto;
    margin: 12px;
    padding: 16px;
  }

  .grid-position {
    grid-template-columns: 1fr;
    border: none;
    background: transparent;
    box-shadow: none;
    gap: 8px;
  }

  .pos {
    background: radial-gradient(circle, rgba(0,0,92,0.41) 0%, rgba(4,21,46,0.82) 100%);
    border-radius: 14px;
    padding: 12px;
    border: 2px solid #5085d9;
  }

  .btn-posicao {
    padding: 10px 20px;
    font-size: 13px;
  }

  .mis-plataforma {
    padding: 10px 20px;
    font-size: 13px;
    max-width: 100%;
  }

  /* Estatísticas rápidas */
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 8px;
  }

  /* Info badges */
  .info {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .detalhe { display: none; }

  .antiga-nintendo {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .img-icon {
    width: 120px;
    height: 120px;
  }

  .perfil-nick-topo {
    font-size: 1.2rem;
  }

  .btn-salvar {
    width: 90%;
    font-size: 14px;
  }
}

/* =========================================================================
   CADASTRO / LOGIN (cadastrar-se.html)
========================================================================= */
@media (max-width: 768px) {
  .cad-main {
    padding: 16px;
  }

  .cad-lado-direito {
    padding: 24px 16px;
    width: 100%;
  }

  .cad-card {
    max-width: 100%;
  }

  .cad-tab {
    font-size: 12px;
    padding: 8px 4px;
  }

  .cad-btn-primary,
  .cad-btn-google {
    font-size: 14px;
    padding: 12px;
  }
}

/* =========================================================================
   TORNEIO (torneio.html)
========================================================================= */
@media (max-width: 768px) {
  .torneio-hero {
    grid-template-columns: 1fr;
    padding: 32px 16px;
    text-align: center;
  }

  .hero-bracket { order: -1; }
  .hero-sub { margin: 0 auto 20px; }

  .torneio-main {
    padding: 20px 12px 60px;
  }

  /* Abas */
  .tabs-wrapper {
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tab-btn {
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* Grid de torneios: 1 coluna */
  .torneio-grid {
    grid-template-columns: 1fr;
  }

  /* Filtros */
  .filters-bar {
    flex-direction: column;
  }

  .search-input,
  .filter-select {
    width: 100%;
  }

  /* Modal */
  .modal {
    padding: 20px 16px;
    max-height: 95vh;
  }

  .formato-cards {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .steps-indicator .step small {
    display: none;
  }
}

/* =========================================================================
   FOOTER
========================================================================= */
@media (max-width: 768px) {
  .main-footer {
    padding: 32px 16px 24px;
  }

  .footer-titulo {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .footer-texto {
    font-size: 11px;
    line-height: 1.7;
  }
}

/* =========================================================================
   MEU CLUBE (clubes.html)
========================================================================= */
@media (max-width: 1024px) {
  .menu {
    width: 100%;
  }

  .dashboard {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "escudo informações"
      "preview preview"
      "perfil perfil"
      "redes capitao"
      "necessidades necessidades"
      "stats stats";
    padding: 0 16px;
    gap: 16px;
  }

  .perfil-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .necessidades-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .menu {
    padding: 0 12px;
  }

  .menu-clubes {
    align-items: flex-start;
  }

  .text-menu h1 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }

  .text-menu p br {
    display: none;
  }

  .abas-clube {
    max-width: 100%;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .abas-clube::-webkit-scrollbar {
    display: none;
  }

  .aba-item {
    padding: 9px 14px;
  }

  .dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "escudo"
      "informações"
      "preview"
      "perfil"
      "redes"
      "capitao"
      "necessidades"
      "stats";
    padding: 0 12px;
    gap: 14px;
  }

  .card {
    padding: 16px 18px;
  }

  .info-content {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .select-box {
    width: 100%;
  }

  .select-box select {
    padding-right: 28px;
  }

  .perfil-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .capitao-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .necessidades-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .preview .escudo-img {
    width: 90px;
    height: 90px;
  }

  .btn-editar-perfil {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .dashboard {
    padding: 0 8px;
  }

  .menu-clubes {
    gap: 12px;
  }

  .img-menu {
    width: 52px;
    height: 52px;
  }

  .perfil-grid {
    grid-template-columns: 1fr;
  }

  .necessidades-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rede-nome {
    display: none;
  }

  .card-title {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  /* Remove animações pesadas em mobile para performance */
  .animar-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Inputs e selects: evita zoom automático no iOS */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* =========================================================================
   CABECALHO COMPACTO E MERCADO NO CELULAR
========================================================================= */
@media (max-width: 768px) {
  .main-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo auth toggle"
      "nav nav nav";
    min-height: 64px;
    margin-bottom: 12px;
    padding: 6px 10px;
    column-gap: 7px;
    row-gap: 6px;
  }

  .main-header > .logo img.logo {
    width: 96px;
    height: 48px;
  }

  .login-header {
    grid-area: auth;
    gap: 6px;
    justify-self: end;
  }

  #login-header {
    gap: 5px;
  }

  .notification-icon,
  .email-container {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .header-menu-toggle {
    grid-area: toggle;
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 1px solid rgba(18, 224, 108, 0.55);
    border-radius: 10px;
    background: rgba(18, 224, 108, 0.1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }

  .header-menu-toggle span {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #eafff2;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .main-header.menu-aberto .header-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .main-header.menu-aberto .header-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  .main-header.menu-aberto .header-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .menu-carrossel {
    grid-area: nav;
    display: none;
    width: 100%;
    padding: 6px 0 2px;
    overflow: visible;
  }

  .main-header.menu-aberto .menu-carrossel {
    display: block;
  }

  .menu-carrossel nav {
    width: 100%;
  }

  .lista-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 7px;
  }

  .lista-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 9px 6px;
    overflow: hidden;
    font-size: 13px;
    text-align: center;
    text-overflow: ellipsis;
  }

  .lfg-filtros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .lfg-filtros .lfg-select {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 0 10px;
  }

  .lfg-input,
  .form-linha .lfg-input {
    width: 100%;
    min-height: 44px;
  }

  .mercado-acesso-card {
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
  }

  .mercado-acesso-acoes {
    width: 100%;
  }

  .mercado-acesso-acoes a {
    flex: 1 1 180px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .main-header > .logo img.logo {
    width: 86px;
    height: 44px;
  }

  .login,
  .cadastra-se {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 7px 8px;
    font-size: 12px;
  }

  .header-menu-toggle {
    width: 44px;
    height: 44px;
  }

  .lfg-filtros {
    grid-template-columns: 1fr;
  }

  .mercado-acesso-acoes {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mercado-acesso-acoes a {
    width: 100%;
  }
}