/* ================== Base ================== */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  margin: 0;
  padding: 0;
}

.bloco-nome-modalidade {
  display: flex;
  flex-direction: column; 
}

.linha-unica {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px; /* espaço mínimo entre o nome e o botão */
}

p {
  text-align: left;
  margin-bottom: 20px;
  font-size: 13px;
}

/* ================== Botões ================== */
.botao {
  display: inline-block;
  width: 100px;
  height: 30px;
  padding: 6px 0;
  margin-top: 5px;
  color: #fff;
  font-family: 'Poppins', sans-serif;	
  font-size: 12px;
  font-weight: bold;	
  background-color: #f68028;  
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.botao:hover {
  background-color: darkorange;
}

.botao_alterar {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* centraliza conteúdo horizontalmente */
  gap: 8px;                 /* espaço entre imagem e texto */
  width: 130px;             /* largura fixa */
  height: 38px;             /* altura fixa */
  background-color: #f58220;
  color: #fff;
  font-family: 'Poppins', sans-serif;	
  font-size: 12px;	
  font-weight: bold;
  border: none;
  border-radius: 6px;
  padding: 0 10px;          /* padding horizontal apenas, vertical é controlado pela altura */
  cursor: pointer;
  box-sizing: border-box;   /* garante que padding não ultrapasse a largura */
}

.botao_alterar:hover {
  background-color: #e07217;
}

.botao_voltar {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* centraliza conteúdo horizontalmente */
  gap: 8px;                 /* espaço entre imagem e texto */
  width: 130px;             /* largura fixa */
  height: 35px;             /* altura fixa */
  background-color: #f58220;
  color: #fff;
  font-family: 'Poppins', sans-serif;	
  font-size: 12px;	
  font-weight: bold;
  border: none;
  border-radius: 6px;
  padding: 0 8px;          /* padding horizontal apenas, vertical é controlado pela altura */
  cursor: pointer;
  box-sizing: border-box;   /* garante que padding não ultrapasse a largura */
}

.botao_voltar:hover {
  background-color: #e07217;
}

.icone {
  width: 16px;            /* Tamanho da imagem */
  height: 16px;
}

.icone_voltar {
  width: 16px;            /* Tamanho da imagem */
}


/* ================== Card ================== */

.card-nome {
  display: block;              /* Faz o link se comportar como um bloco (igual ao div) */
  background-color: #f0f0f0;   /* Fundo cinza-claro */
  border-radius: 10px;         /* Bordas arredondadas */
  padding: 15px 20px;          /* Espaçamento interno */
  font-weight: normal;         /* Texto sem negrito */
  color: #000;                 /* Cor do texto */
  text-align: left;            /* Alinha o texto à esquerda */
  width: 100%;                 /* Ocupa toda a largura disponível */
  box-sizing: border-box;      /* Inclui o padding na largura total */
  margin-bottom: 14px;         /* Espaço entre os cards */
  text-decoration: none;       /* Remove o sublinhado do link */
}

/* Efeito visual ao passar o mouse */
.card-nome:hover {
  background-color: #e5e5e5;   /* Fica um pouco mais escuro */
  cursor: pointer;             /* Mostra a mãozinha */
}

.card-mod { /*Desativado*/
  display: block;
  background-color: #e2e2e2;     /* Cinza mais apagado */
  border-radius: 10px;
  padding: 15px 20px;
  font-weight: normal;
  color: #888;                   /* Texto mais claro */
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
  text-decoration: none;
  cursor: not-allowed;           /* Mostra que não pode clicar */
  opacity: 0.7;                  /* Deixa com aparência desativada */
  pointer-events: none;          /* Impede clique */
}

.card-mod-link {
  display: block;              /* Faz o link se comportar como um bloco (igual ao div) */
  background-color: #f0f0f0;   /* Fundo cinza-claro */
  border-radius: 10px;         /* Bordas arredondadas */
  padding: 15px 20px;          /* Espaçamento interno */
  font-weight: normal;         /* Texto sem negrito */
  color: #000;                 /* Cor do texto */
  text-align: left;            /* Alinha o texto à esquerda */
  width: 100%;                 /* Ocupa toda a largura disponível */
  box-sizing: border-box;      /* Inclui o padding na largura total */
  margin-bottom: 14px;         /* Espaço entre os cards */
  text-decoration: none;       /* Remove o sublinhado do link */
}

/* Efeito visual ao passar o mouse */
.card-mod-link:hover {
  background-color: #e5e5e5;   /* Fica um pouco mais escuro */
  cursor: pointer;             /* Mostra a mãozinha */
}


/* Ajuste para telas pequenas */
@media (max-width: 480px) {
  .card-nome {
    padding: 12px 15px;
    font-size: 14px;
  }
}

/* ================== Container ================== */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 40px;
  box-sizing: border-box; /* garante que padding não aumente a largura */
}


/* ================== Header ================== */
header {
  background: #fff;
  padding: 10px 0;
  display: flex;
  align-items: flex-start;
}

header img {
  height: 65px;
  width: auto;
}


/* ================== Links ================== */
.link {
  color: #DE6225;
  text-decoration: none;
  font-weight: bold;
}

.link:hover {
  color: #000000;
}

.link:active {
  color: #CCCCCC;
}

/* ============== Mensagens Modalidades ============== */
.mensagem_modalidade {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #f68028;
  display: block;
  margin-top: -10;             /* encosta no topo */
  margin-left: 15;
  margin-bottom: 14px;   	
  font-style: normal !important;
}


/* ================== Mensagens ================== */
.mensagem_validacao {
 font-family: 'Poppins', sans-serif;	
  font-size: 12px;
  color: red;
  width: 100%;		
  background-color: #FAE8E8 !important;
  display: flex;
  box-sizing: border-box; /*garante largura igual ao textarea */
  line-height: 1.3;
  padding: 5px 10px;
  margin-top: 5px;
  min-height: 20px;
}

.mensagem_laranja {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #f68028;
  display: block;       
  margin-bottom: 0.9em; 
}

.mensagem_vazio {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: red;
  display: block;       
  margin-bottom: 0.9em; 
}

.vazio {
  font-family: 'Poppins', sans-serif;	
  font-size: 12px;
  color: black;
  width: 100%;		
  background-color: #FAE8E8 !important;
  display: flex;
  box-sizing: border-box; /*garante largura igual ao textarea */
  padding-left: 3px;
}

/* ==================Textos/Títulos ================== */
.label_questao{
  margin-bottom: 8px;  
}

.subtitulo {
  color: #000;
  font-size: 13px;
  margin-top: 0px;
  margin-bottom: 20px;	
  text-align: left;
}

.texto_cinza_italico {
  color: #727171;
  font-size: 13px;
  text-align: left;
  font-style: italic; 
}

.texto_laranja {
  color: #f68028;
  font-size: 13px;
  text-align: left;
}

.texto_vermelho {
  color: #FF0000;
  font-size: 13px;
  text-align: left;
}

.titulo {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: left;
}

.titulo_cinza {
  color: #424742;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: left;
}

.titulo_modalidade {
  color: #424742;
  font-size: 14px;
  font-weight: normal;
  margin-top: -3px; 
  margin-bottom: 8px;
  text-align: left;
}

.titulo_nome {
  color: #000;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: left;
}