/* RESET */
body {
  font-family: Arial, sans-serif;
  background: #f4f6f9;
  margin: 0;
  padding: 0;
}

/* CONTAINER */
.container {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

/* CARD */
.card {
  position: relative;
  background: white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* TÍTULOS */
h1 {
  text-align: center;
  margin-bottom: 10px;
}

h2 {
  text-align: center;
  margin-bottom: 15px;
}

/* LOGIN */
#loginTela {
  max-width: 350px;
  margin: 90px auto;
  text-align: center;
}

#loginTela input {
  width: 100%;
  max-width: 260px;
  margin: 10px auto;
  display: block;
}

#loginTela button {
  width: 200px;
  margin: 15px auto;
  display: block;
}

/* INPUTS */
.container input,
.container select {
  width: 100%;
  padding: 10px;
  margin-top: 0;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 14px;
  box-sizing: border-box;
}

/* 🔥 REMOVE DIFERENÇA DO NUMBER */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* BOTÃO */
button {
  padding: 10px 18px;
  margin-top: 15px;
  background: #2e86de;
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
  display: block;

  transition: background 0.3s ease; /* animação suave */
}

button:hover {
  background: #1b4f72;
}

@media (max-width: 768px) {
  button {
    width: 100%;
    font-size: 16px;
    padding: 12px;
  }
}

.btn-container {
  margin-top: 10px;
}

/* MENSAGENS */
.mensagem {
  margin-top: 10px;
  padding: 10px;
  border-radius: 0;
  text-align: center;
  font-size: 14px;
}

.mensagem.erro {
  background: #fdecea;
  color: #c0392b;
}

.mensagem.sucesso {
  background: #eafaf1;
  color: #27ae60;
}

/* CAMPOS */
.campo {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

/* LABEL */
.campo label {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
}

/* LINHA (GRID FLEX) */
.linha {
  display: flex;
  gap: 10px;
}

.linha .campo {
  flex: 1 1 0; /* isso resolve de vez */
}

.linha input {
  width: 100%;
}

@media (max-width: 768px) {
  input,
  select {
    font-size: 16px;
  }
}

input[type="number"] {
  appearance: textfield;
}

/* SELECT */
.container select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml;utf8,<svg fill='%232e86de' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  cursor: pointer;
}

.container select:hover {
  border-color: #2e86de;
}

.container select:focus {
  outline: none;
  border-color: #2e86de;
  box-shadow: 0 0 0 2px rgba(46, 134, 222, 0.2);
}

/* TIPO SIMULAÇÃO */
.tipo-simulacao {
  margin-top: 15px;
}

.tipo-simulacao span {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.opcoes {
  display: flex;
  gap: 10px;
}

.opcao {
  cursor: pointer;
}

.opcao input {
  display: none;
}

.opcao span {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 0;
  background: #f4f6f9;
  transition: 0.2s;
}

/* SELECIONADO */
.opcao input:checked + span {
  background: #2e86de;
  color: white;
  border-color: #2e86de;
}

/* TABELA RESULTADOS */
.tabela-resultados {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 14px;
}

.tabela-resultados th,
.tabela-resultados td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.tabela-resultados th {
  background-color: #2e86de;
  color: white;
  font-weight: 600;
}

.tabela-resultados tr:nth-child(even) {
  background-color: #f9f9f9;
}

.tabela-resultados tr:hover {
  background-color: #eef5ff;
}

/* RESPONSIVO */
@media (max-width: 800px) {
  .linha {
    flex-direction: column;
  }
}

/* linha selecionada */
.tabela-resultados tr.selecionada {
  background-color: #d6eaff !important;
  font-weight: 600;
}

.input-bloqueado {
  background-color: #eee;
  color: #555;
  cursor: not-allowed;
  border: 1px solid #ccc;
}

.step {
  display: none;
}

.step.active {
  display: block;
}

.btn-tabela {
  padding: 6px 10px;
  background: #2e86de;
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;

  width: auto; /* 👈 ESSENCIAL */
  display: inline-block; /* 👈 ESSENCIAL */
  margin: 0; /* 👈 remove centralização */
}

.input-pequeno {
  width: 120px;
}
.input-pequeno label {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
}

.input-sm {
  width: 120px;
}
.input-sm label {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
}

.input-md {
  width: 200px;
}
.input-md label {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
}

.input-lg {
  width: 300px;
}
.input-lg label {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
}

/* Overlay de carregamento */
#loadingOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Spinner */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-top: 5px solid #333;
  border-radius: 50%;
  animation: girar 1s linear infinite;
}

/* Animação */
@keyframes girar {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn-acao {
  background-color: #3498db;
  color: white;

  border: none;
  border-radius: 0;

  padding: 5px 10px;
  font-size: 12px;

  cursor: pointer;
  width: auto;

  text-decoration: none;
  display: inline-flex; /* chave aqui */
  align-items: center; /* centraliza vertical */
  justify-content: center;

  height: 26px; /* força altura igual */
  box-sizing: border-box; /* evita diferença de cálculo */

}

.btn-acao:hover {
  background-color: #2980b9;
  text-decoration: none; /* garante sem sublinhado no hover */
}

.top-actions {
  position: absolute;
  top: 15px;
  right: 15px;

  display: flex; /* 🔥 coloca lado a lado */
  flex-direction: row; /* garante horizontal */
  gap: 6px;
}

@media (max-width: 768px) {
  .top-actions {
    top: 0px; /* sobe um pouco */
  }
}


.tabela-consultas {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 13px;
  font-family: Arial, sans-serif;
}

.tabela-consultas th {
  background-color: #3498db;
  color: white;
  font-weight: normal;
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.tabela-consultas td {
  padding: 10px;
  border: 1px solid #ddd;
}

.tabela-consultas tr:nth-child(even) {
  background-color: #fafafa; /* listrado leve */
}

.tabela-consultas tr:hover {
  background-color: #f1f1f1; /* hover */
}