:root {
  --azul-marinho: #1B2A4A;
  --azul-medio: #2F4874;
  --cinza-fundo: #F5F6F8;
  --cinza-borda: #DDE1E7;
  --texto-principal: #1C1F26;
  --texto-secundario: #5B6472;
  --verde-ok: #1F7A4D;
  --amarelo-alerta: #A8710A;
  --vermelho-alerta: #B3261E;
  --branco: #FFFFFF;
  --raio: 6px;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--cinza-fundo);
  color: var(--texto-principal);
}

/* ---------- Tela de login ---------- */
.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartao-login {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 2.5rem;
  width: 100%;
  max-width: 360px;
}

.cartao-login h1 {
  font-size: 1.25rem;
  margin: 0 0 .25rem;
  color: var(--azul-marinho);
}

.cartao-login p.subtitulo {
  margin: 0 0 1.5rem;
  color: var(--texto-secundario);
  font-size: .9rem;
}

label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .35rem;
  color: var(--texto-secundario);
}

input {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  font-size: .95rem;
  margin-bottom: 1rem;
}

input:focus {
  outline: 2px solid var(--azul-medio);
  outline-offset: 1px;
}

select {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  font-size: .95rem;
  margin-bottom: 1rem;
  font-family: var(--fonte);
  background: var(--branco);
  color: var(--texto-principal);
}

select:focus {
  outline: 2px solid var(--azul-medio);
  outline-offset: 1px;
}

.linha-filtro {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}

.linha-filtro label {
  margin-bottom: 0;
  white-space: nowrap;
}

.linha-filtro select {
  width: auto;
  margin-bottom: 0;
}

button {
  cursor: pointer;
  border: none;
  border-radius: var(--raio);
  font-size: .95rem;
  font-weight: 600;
  padding: .65rem 1rem;
}

.botao-primario {
  background: var(--azul-marinho);
  color: var(--branco);
  width: 100%;
}

.botao-primario:hover { background: var(--azul-medio); }

.mensagem-erro {
  background: #FCEEED;
  color: var(--vermelho-alerta);
  border: 1px solid #F3C6C2;
  border-radius: var(--raio);
  padding: .6rem .75rem;
  font-size: .85rem;
  margin-bottom: 1rem;
  display: none;
}

/* ---------- Cabeçalho interno ---------- */
.cabecalho {
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cabecalho .marca {
  font-weight: 700;
  color: var(--azul-marinho);
}

.cabecalho-esquerda {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navegacao {
  display: flex;
  gap: 1.25rem;
}

.navegacao a {
  color: var(--texto-secundario);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  padding-bottom: .3rem;
  border-bottom: 2px solid transparent;
}

.navegacao a:hover { color: var(--azul-marinho); }

.navegacao a.ativo {
  color: var(--azul-marinho);
  border-bottom-color: var(--azul-marinho);
}

.botao-secundario {
  background: transparent;
  color: var(--texto-secundario);
  border: 1px solid var(--cinza-borda);
}

.botao-secundario:hover { background: var(--cinza-fundo); }
.botao-secundario:disabled { opacity: .5; cursor: not-allowed; }
.botao-secundario:disabled:hover { background: transparent; }

/* ---------- Conteúdo ---------- */
.conteudo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}

.conteudo h2 {
  font-size: 1.1rem;
  color: var(--azul-marinho);
  margin-bottom: 1rem;
}

/* ---------- Tabela de licitações ---------- */
.tabela-rolavel {
  overflow-x: auto;
  border-radius: var(--raio);
}

.tabela-licitacoes {
  width: 100%;
  border-collapse: collapse;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
}

.link-pncp {
  color: var(--azul-medio);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

.link-pncp:hover { text-decoration: underline; }

.tabela-licitacoes th {
  text-align: left;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--texto-secundario);
  padding: .75rem 1rem;
  background: var(--cinza-fundo);
  border-bottom: 1px solid var(--cinza-borda);
}

.tabela-licitacoes td {
  padding: .75rem 1rem;
  font-size: .9rem;
  border-bottom: 1px solid var(--cinza-borda);
}

.tabela-licitacoes tr:last-child td { border-bottom: none; }

.link-editar {
  color: var(--azul-medio);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
}

.link-editar:hover { text-decoration: underline; }

.etiqueta,
.etiqueta-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
}

.etiqueta::before,
.etiqueta-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.etiqueta.aguardando_proposta { color: var(--texto-secundario); }
.etiqueta.aguardando_disputa { color: var(--azul-medio); }
.etiqueta.suspensa { color: #B85C00; }
.etiqueta.habilitacao { color: var(--amarelo-alerta); }
.etiqueta.fase_recursal { color: #6B3FA0; }
.etiqueta.sem_exito { color: var(--vermelho-alerta); }
.etiqueta.homologacao { color: var(--verde-ok); }
.etiqueta.desistiu { color: #4B5563; }

.etiqueta-status.pendente { color: var(--texto-secundario); }
.etiqueta-status.parcial { color: var(--azul-medio); }
.etiqueta-status.pago { color: var(--verde-ok); }
.etiqueta-status.selecionada { color: var(--azul-medio); }
.etiqueta-status.sem_interesse { color: var(--vermelho-alerta); }
.etiqueta-status.promovida { color: var(--verde-ok); }

td:has(.celula-acoes) {
  vertical-align: middle;
}

.celula-acoes {
  white-space: nowrap;
  display: flex;
  gap: .5rem;
  align-items: center;
}

.botao-acao-pequena {
  background: transparent;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  min-height: 2rem;
  padding: .45rem .75rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--texto-secundario);
}

/* Ação primária: preenchida, para não competir visualmente com a secundária */
.botao-acao-pequena.selecionar {
  background: var(--azul-marinho);
  border-color: var(--azul-marinho);
  color: var(--branco);
}

.botao-acao-pequena.selecionar:hover { background: var(--azul-medio); border-color: var(--azul-medio); }

/* Ação secundária/neutra: cinza discreto, só fica vermelha ao focar/passar o mouse —
   evita alarmar para ações que não são exclusão (ex.: "sem interesse") */
.botao-acao-pequena.descartar,
.botao-acao-pequena.recusar {
  border-color: var(--cinza-borda);
  color: var(--texto-secundario);
}

.botao-acao-pequena.descartar:hover,
.botao-acao-pequena.descartar:focus-visible,
.botao-acao-pequena.recusar:hover,
.botao-acao-pequena.recusar:focus-visible {
  border-color: var(--vermelho-alerta);
  color: var(--vermelho-alerta);
  background: #FCEEED;
}

/* Botões só-ícone (editar/excluir em tabelas): alvo de toque maior que o texto que
   substituem, com "excluir" neutro por padrão e vermelho só ao focar/passar o mouse */
.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  color: var(--azul-medio);
}

.botao-icone:hover,
.botao-icone:focus-visible { background: #E8EDF6; }

.botao-icone.perigo { color: #8A94A3; }

.botao-icone.perigo:hover,
.botao-icone.perigo:focus-visible {
  color: var(--vermelho-alerta);
  background: #FCEEED;
}

.botao-icone svg { width: 16px; height: 16px; }

.tabela-oportunidades td,
.tabela-oportunidades th {
  vertical-align: middle;
  padding: .6rem .65rem;
  font-size: .82rem;
}

/* Objeto: pode crescer até um limite e quebrar linha dentro dele */
.tabela-oportunidades td:nth-child(3),
.tabela-oportunidades th:nth-child(3) {
  max-width: 320px;
  white-space: normal;
}

/* UF, Valor estimado e Abertura: nunca quebram linha */
.tabela-oportunidades td:nth-child(4),
.tabela-oportunidades td:nth-child(5),
.tabela-oportunidades td:nth-child(6),
.tabela-oportunidades th:nth-child(4),
.tabela-oportunidades th:nth-child(5),
.tabela-oportunidades th:nth-child(6) {
  white-space: nowrap;
}

.tabela-oportunidades .celula-acoes {
  flex-wrap: wrap;
  row-gap: .35rem;
  column-gap: .4rem;
}

.texto-truncado {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  line-height: 1.35;
}

.texto-truncado:hover {
  color: var(--azul-medio);
}

.texto-truncado.expandido {
  -webkit-line-clamp: unset;
  display: block;
}

.tabela-oportunidades .botao-acao-pequena {
  font-size: .72rem;
  padding: .28rem .5rem;
}

.tabela-oportunidades .link-editar,
.tabela-oportunidades .link-pncp {
  font-size: .78rem;
}

.senha-texto {
  font-family: monospace;
  font-size: .85rem;
}

.botao-mostrar-senha {
  background: transparent;
  border: none;
  color: var(--azul-medio);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-left: .5rem;
  text-decoration: underline;
}

.estado-vazio {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--texto-secundario);
}

/* ---------- Esqueleto de carregamento (substitui "Carregando...") ---------- */
@keyframes pulsoEsqueleto {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.esqueleto-tabela {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 1.25rem;
}

.linha-esqueleto {
  display: flex;
  gap: .75rem;
  margin-bottom: .75rem;
}

.linha-esqueleto:last-child { margin-bottom: 0; }

.bloco-esqueleto {
  height: .85rem;
  border-radius: 4px;
  background: var(--cinza-borda);
  animation: pulsoEsqueleto 1.4s ease-in-out infinite;
}

/* ---------- Texto truncado: affordance visível de "ver mais" ---------- */
.envoltorio-truncado { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }

.botao-ver-mais {
  background: none;
  border: none;
  padding: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--azul-medio);
  cursor: pointer;
  white-space: nowrap;
}

.botao-ver-mais:hover { text-decoration: underline; }

/* ---------- Formulário de nova licitação ---------- */
.conteudo-estreita {
  max-width: 640px;
}

.conteudo-estreita a {
  color: var(--texto-secundario);
  font-size: .85rem;
  text-decoration: none;
}

.conteudo-estreita a:hover { color: var(--azul-medio); }

.cartao-formulario {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  font-size: .95rem;
  margin-bottom: 1rem;
  font-family: var(--fonte);
  resize: vertical;
}

.linha-busca {
  display: flex;
  gap: .5rem;
}

.linha-busca input { margin-bottom: 0; }

.linha-busca button { white-space: nowrap; }

.grade-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.botao-nova {
  background: var(--azul-marinho);
  color: var(--branco);
  border: none;
  border-radius: var(--raio);
  padding: .55rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.botao-nova:hover { background: var(--azul-medio); }

.cabecalho-conteudo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* ---------- Responsivo (telas estreitas) ---------- */
@media (max-width: 720px) {
  .cabecalho {
    flex-wrap: wrap;
    gap: .75rem;
    padding: .85rem 1rem;
  }

  .cabecalho-esquerda {
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    width: 100%;
  }

  .navegacao {
    flex-wrap: wrap;
    gap: .5rem 1rem;
    width: 100%;
  }

  .conteudo { padding: 1rem; }

  .cabecalho-conteudo {
    flex-wrap: wrap;
    gap: .6rem;
  }

  .linha-filtro {
    flex-wrap: wrap;
    row-gap: .5rem;
  }

  .linha-filtro select { width: 100%; }

  .tabela-licitacoes th,
  .tabela-licitacoes td {
    padding: .6rem .7rem;
    font-size: .82rem;
  }
}