/* Identidade visual CAD | Telefar — Centro Avançado de Tecnologia Digital em Cuidado Farmacêutico */

:root {
  --cad-vermelho: #b01e23;
  --cad-amarelo: #e9a21b;
  --cad-azul: #2f6fa8;
  --cad-azul-escuro: #265d8d;
  --cad-cinza: #8e8e8e;
  --cad-grafite: #4a4a4a;
  --cad-fundo: #f4f6f8;
  --cad-borda: #e7eaee;
}

body {
  background-color: var(--cad-fundo);
  color: #343a40;
}

h1, h2, h3, .h3, .h5 {
  color: var(--cad-grafite);
}

a {
  color: var(--cad-azul);
}

a:hover {
  color: var(--cad-azul-escuro);
}

/* ---- Marca ---- */
.marca-cad {
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.marca-cad .letra-c { color: var(--cad-amarelo); }
.marca-cad .letra-a { color: var(--cad-vermelho); }
.marca-cad .letra-d { color: var(--cad-azul); }
.marca-cad .separador { color: #c8c8c8; font-weight: 300; padding: 0 .12em; }
.marca-cad .telefar { color: var(--cad-cinza); }

/* ---- Navbar ---- */
.navbar-cad {
  background: #fff;
  border-bottom: 3px solid var(--cad-azul);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.navbar-cad .nav-link {
  color: var(--cad-grafite);
  font-weight: 500;
  border-radius: .4rem;
  padding-left: .8rem;
  padding-right: .8rem;
}
.navbar-cad .nav-link:hover {
  color: var(--cad-azul);
  background: #f0f4f8;
}
.navbar-cad .nav-link.active {
  color: var(--cad-azul);
  background: #e8eff6;
}
.subtitulo-sistema {
  font-size: .68rem;
  color: var(--cad-cinza);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.chip-usuario {
  font-size: .85rem;
  color: var(--cad-grafite);
}

/* ---- Botões (azul da marca no lugar do azul Bootstrap) ---- */
.btn-primary {
  --bs-btn-bg: var(--cad-azul);
  --bs-btn-border-color: var(--cad-azul);
  --bs-btn-hover-bg: var(--cad-azul-escuro);
  --bs-btn-hover-border-color: var(--cad-azul-escuro);
  --bs-btn-active-bg: var(--cad-azul-escuro);
  --bs-btn-active-border-color: var(--cad-azul-escuro);
  --bs-btn-disabled-bg: var(--cad-azul);
  --bs-btn-disabled-border-color: var(--cad-azul);
}
.btn-outline-primary {
  --bs-btn-color: var(--cad-azul);
  --bs-btn-border-color: var(--cad-azul);
  --bs-btn-hover-bg: var(--cad-azul);
  --bs-btn-hover-border-color: var(--cad-azul);
  --bs-btn-active-bg: var(--cad-azul-escuro);
  --bs-btn-active-border-color: var(--cad-azul-escuro);
}

/* ---- Badges com a paleta da marca ---- */
.badge.bg-danger { background-color: var(--cad-vermelho) !important; }
.badge.bg-warning { background-color: var(--cad-amarelo) !important; }
.badge.bg-info { background-color: var(--cad-azul) !important; color: #fff !important; }
.badge.bg-primary { background-color: var(--cad-azul) !important; }

/* ---- Cards ---- */
.card {
  border: none;
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(33, 41, 52, .08);
}
.card-header {
  background: #fff;
  font-weight: 600;
  color: var(--cad-grafite);
  border-bottom: 1px solid var(--cad-borda);
  border-radius: .75rem .75rem 0 0 !important;
}

/* Cards de indicadores do dashboard com filete da marca */
.card-metrica { border-top: 4px solid var(--cad-cinza); }
.card-metrica .display-6 { color: var(--cad-grafite); font-weight: 600; }
/* card-body em coluna para fixar a linha "Total:" no rodapé, alinhada entre os cards */
.card-metrica .card-body { display: flex; flex-direction: column; }
.card-metrica .total-rodape { margin-top: auto; }
.acento-azul { border-top-color: var(--cad-azul); }
.acento-vermelho { border-top-color: var(--cad-vermelho); }
.acento-amarelo { border-top-color: var(--cad-amarelo); }
.acento-cinza { border-top-color: var(--cad-cinza); }

/* ---- Tabelas ---- */
.table thead th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cad-cinza);
  background-color: #fafbfc;
  border-bottom: 2px solid var(--cad-borda);
}
.table-hover > tbody > tr:hover > * {
  background-color: #f2f6fa;
}

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

/* ---- Mapa do Brasil em mosaico (cartograma) ---- */
.mapa-brasil {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  max-width: 320px;
  margin: 0 auto;
}
.mapa-brasil .uf-tile {
  aspect-ratio: 1 / 1;
  border-radius: .4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.1;
  cursor: default;
  transition: transform .08s ease;
}
.mapa-brasil .uf-tile:hover {
  transform: scale(1.08);
  outline: 2px solid var(--cad-azul-escuro);
}
.mapa-brasil .uf-tile .uf-valor {
  font-weight: 400;
  font-size: .72rem;
}
.mapa-brasil .uf-vazio {
  visibility: hidden;
}
#tooltip-mapa {
  position: fixed;
  display: none;
  z-index: 1080;
  background: var(--cad-grafite);
  color: #fff;
  padding: .35rem .6rem;
  border-radius: .4rem;
  font-size: .8rem;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* ---- Questionário público (respondido pelo paciente) ---- */
.questionario-publico .opcoes-grandes {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.questionario-publico .opcoes-grandes.opcoes-numericas {
  flex-direction: row;
  flex-wrap: wrap;
}
.questionario-publico .btn-opcao {
  border: 2px solid var(--cad-borda);
  background: #fff;
  color: var(--cad-grafite);
  font-size: 1.05rem;
  padding: .8rem 1rem;
  border-radius: .6rem;
  text-align: left;
}
.questionario-publico .opcoes-numericas .btn-opcao {
  min-width: 3.2rem;
  text-align: center;
  font-weight: 600;
}
.questionario-publico .btn-check:checked + .btn-opcao {
  background: var(--cad-azul);
  border-color: var(--cad-azul);
  color: #fff;
}
.questionario-publico .btn-opcao:hover {
  border-color: var(--cad-azul);
}
@keyframes tremor-x {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.questionario-publico .tremor {
  animation: tremor-x .2s ease-in-out 2;
}

/* ---- Rodapé ---- */
.rodape-cad {
  color: var(--cad-cinza);
  font-size: .78rem;
  text-align: center;
  padding: 1.5rem 0 1rem;
}

/* Marca discreta "Desenvolvido por [logo DRAP]" — em todas as telas */
.rodape-dev {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .4rem;
  font-size: .72rem;
  opacity: .6;
}
.rodape-dev .logo-drap {
  height: 15px;
  width: auto;
}

/* ---- Fila contraída: cards clicáveis por categoria ---- */
.fila-card {
  border-width: 1px;
  border-left-width: 4px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.fila-card:hover,
.fila-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .12);
}