.linha_baterias {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}

.linha_bateria_final {
display: flex;
justify-content: center;
margin-top: 30px;
}


.titulo_categoria {
  display: flex;
  justify-content: center;     /* Centraliza horizontalmente */
  align-items: center;         /* Centraliza verticalmente */
  background: transparent;
  border-radius: 5px;
  margin: 10px auto;           /* Centraliza horizontalmente com margem */
  color: black;
  text-align: center;
  padding: 0.3em 1em;          /* Espaçamento interno proporcional */
  font-family: 'Geologica', sans-serif;
  font-weight:600;
  font-size: 25px !important;              /* Tamanho da fonte relativo (escala com zoom) */
  font-weight: lighter;
  width: fit-content;          /* Largura ajustada ao conteúdo */
  max-width: 90vw;             /* Limita a largura em telas pequenas */
  box-sizing: border-box;
}

.campo_nome_input {
    padding: 5px 10px;
    min-height: 35px;
    width: 140px;
    font-size: 16px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 500;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    outline: none;
    background-color: transparent;
    line-height: 17px;
    background-color: transparent;
    
    /* Alinhamento natural */
    display: block; /* ou remove completamente a linha do display */
    text-align: left;
}


/* Responsivo para tablets */
@media (max-width: 768px) {
  .campo_nome_input {
    max-width: 100px;
    font-size: 13px;
  }
}

/* Responsivo para celulares */
@media (max-width: 480px) {
  .campo_nome_input {
    max-width: 80px;
    font-size: 12px;
    padding: 4px 6px;
  }

 .bateria_header {
    display: inline-flex !important;
    flex-direction: row;
    justify-content: space-between; /* alinha os elementos nas extremidades */
    align-items: center !important;             /* centraliza verticalmente */
    width: 100%;
    padding: 5px 10px !important;
    box-sizing: border-box;
    background-color: transparent;
    height: 25px !important;
}
}


@media (max-width: 600px) {
  .titulo_categoria {
    font-size: 0.9em;
    padding: 0.2em 0.8em;
  }
}

.campo_colocacao_chaveamento {
  /* Tamanho proporcional à tela */
  width: clamp(40px, 4vw, 60px);
  height: clamp(40px, 4vw, 60px);

  /* Aparência */
  text-align: center;
  color: black;
  background-color: transparent;
  border-radius: 0;
  margin: 0;
  padding: 0;

  /* Texto */
  font-weight: 900;
  font-size: clamp(20px, 1.2vw, 30px);
  line-height: 1;

  /* Centralização */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Posição */
  position: absolute; /* sobrepõe a lycra */
  top: 0;
  left: 0;
  z-index: 5;
}

/* 👇 Ajuste fino para celulares (menos de 600px) */
@media (max-width: 600px) {
  .campo_colocacao_chaveamento {
    width: clamp(35px, 12vw, 45px);
    height: clamp(35px, 12vw, 45px);
    font-size: clamp(20px, 4vw, 35px);
  }
}

/* 👇 Ajuste para tablets (601–1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  .campo_colocacao_chaveamento {
    width: clamp(45px, 6vw, 65px);
    height: clamp(45px, 6vw, 65px);
    font-size: clamp(26px, 4vw, 40px);
  }
}


.bateria_oculta .competidor_fundo {
            display: none;
        }

.botao_baterias_ocultas{
background-color: black;
color: white;
font-family: 'Geologica', sans-serif;
font-weight:400;
font-size: 12px !important;         
width: 180px;
height:40px ;
border-radius: 4px;
border:0px;
}


button {
            margin-left: 5px;
            cursor: pointer;
        }


.btn_toggle, .btn_mais, .btn_menos { 
    margin-left: 5px; 
    cursor: pointer; }

.bateria_header {
    display: inline-flex !important;
    flex-direction: row;
    justify-content: space-between; /* alinha os elementos nas extremidades */
    align-items: center !important;             /* centraliza verticalmente */
    width: 100%;
    padding: 5px 10px !important;
    box-sizing: border-box;
    background-color: transparent;
    height: 25px !important;
}

.bateria_titulo {
    font-weight: bold;
    font-size: 16px;
    color: black !important;
}

.btn_ocultar {
    background-color: transparent;
    font-family: 'Geologica', sans-serif;
    color: black;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    /*padding: 2px 8px;*/
    height: 25px;
}

.btn_ocultar:hover {
    background-color: rgb(71, 71, 71);
}

/* Garante que as containers fiquem iguais e bem alinhadas */
.cria_chaveamento_container {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  box-sizing: border-box;
  padding: 2vw;
  margin: 0px 0px 0px 0px !important;
  background-color: transparent;
  display: flex !important;
  flex-direction: column;
  
}
.cria_chaveamento_select {
  width: 75%;
  float: left;
  margin-right: 5%;
  justify-content: center;
}

.cria_chaveamento_select_button {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}



#botao_submit {
  background-color: rgb(1, 3, 94) !important;
  color: white !important;
  border: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  width: 100% !important;
  text-align: center;
  align-items: center;
  border-width: 0px !important;
}

#botao_submit_chaveamento {
  background-color: black;
  font-family: 'Geologica', sans-serif;
  color: white;
  font-size: 16px;
  font-weight:500;
  border-radius: 5px;
  cursor: pointer;
  width: 200px;
  height: 60px;
  align-items: center;     /* vertical */
  justify-content: center; /* horizontal */
  text-align: center;
  border: none;
  margin: 10px 10px 10px 10px;
}

#botao_submit_chaveamento:hover {
  background-color: rgb(122, 120, 87);
}

.botao_gerar_fase {
  background-color: rgb(110, 110, 110);
  font-family: 'Geologica', sans-serif;
  color: white;
  font-size: 16px;
  font-weight:500;
  border-radius: 5px;
  cursor: pointer;
  width: 200px;
  height: 60px;
  align-items: center;     /* vertical */
  justify-content: center; /* horizontal */
  text-align: center;
  border: none;
  margin: 10px 10px 10px 10px;
}

.botao_gerar_fase:hover {
  background-color: black;
}

#botao_submit:hover {
  background-color: #023164 !important;
  color: white !important;
  font-weight: bold;
  text-align: center;
 align-items: center;
 border-width: 0px !important;
}


.container_chaveamento_categoria {
  width: 100%;
  max-width:fit-content;
  height: 100%;
  margin-bottom: 1vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: white !important;
}

.container_seletor_links {
  width: 100%;
  background-color: transparent;
  display: flex;
  flex-wrap: wrap;          /* permite quebrar linha */
  justify-content: center;  /* opcional: centraliza os itens */
  box-sizing: border-box;   /* garante que padding/borda não ultrapassem */
  padding: 0px;            /* opcional para espaçamento interno */
}


.categoria_links {
  background-color: transparent;
  color: black;
  font-family: 'Geologica', sans-serif;
  font-weight:300;
  font-size: 15px;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: lighter;
  padding: 0px;
  margin: 5px;
  border-radius: 5px;
  min-width: 120px;
  text-align: center;
}

/* importa/declara a fonte */
@font-face {
    font-family: 'Geologica';
    src: url('../webfonts/Geologica-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* sobrescreve o estilo do h2 */
h2 {
    font-family: 'Geologica', sans-serif;
    font-weight:400;
    font-size: 25px;
    color: white;
    letter-spacing: 1px;
}

.placar_blusa_chaveamento {
  border-radius: 10px;
  width: clamp(40px, 6vw, 55px);  /* largura ajusta conforme tela */
  height: clamp(38px, 5.5vw, 50px); /* altura proporcional */
  text-align: center;
  display: flex;                  /* garante centralização interna */
  justify-content: center;
  align-items: center;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 2vw, 22px); /* texto também responsivo */
  background-color: #eeeeee;
  margin-left: 0.4vw;
  box-sizing: border-box;
}

/* ====== Celulares (até ~480px) ====== */
@media (max-width: 480px) {
  .placar_blusa_chaveamento {
    width: 38px;
    height: 36px;
    font-size: 1.5em;
    border-radius: 6px;
    margin-left: 3px;
  }
}

/* ====== Celulares em modo paisagem ====== */
@media (max-width: 768px) and (orientation: landscape) {
  .placar_blusa_chaveamento {
    width: 42px;
    height: 38px;
    font-size: 1.6em;
  }
}

/* ====== Tablets em modo retrato ====== */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  .placar_blusa_chaveamento {
    width: 50px;
    height: 45px;
    font-size: 1.8em;
  }
}

/* ====== Tablets em modo paisagem ====== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .placar_blusa_chaveamento {
    width: 55px;
    height: 50px;
    font-size: 2em;
  }
}

/* ====== Telas grandes (desktop padrão) ====== */
@media (min-width: 1025px) {
  .placar_blusa_chaveamento {
    width: 55px;
    height: 50px;
    font-size: 22px;
  }
}