:root {
  --cor-sidebar-fundo: #14161c;
  --cor-sidebar-texto: #b8bcc8;
  --cor-sidebar-texto-ativo: #ffffff;
  --cor-sidebar-hover: rgba(255, 255, 255, 0.06);

  --cor-acento: #6d5ef8;
  --cor-acento-hover: #5a4bde;

  --cor-fundo: #f6f7fb;
  --cor-superficie: #ffffff;
  --cor-texto: #1b1d23;
  --cor-texto-secundario: #6b7280;
  --cor-borda: #e5e7eb;

  --fonte-familia: system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: 1.75rem;
  --fonte-corpo: 1rem;
  --fonte-pequena: 0.875rem;

  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;

  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 16px;

  --sombra-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --sombra-md: 0 4px 12px rgba(16, 24, 40, 0.08);

  --cor-status-sim-fundo: #e6f4ec;
  --cor-status-sim-texto: #16794f;
  --cor-status-revisar-fundo: #fdf1dd;
  --cor-status-revisar-texto: #92620a;
  --cor-status-nao-fundo: #eef0f4;
  --cor-status-nao-texto: #6b7280;

  --cor-origem-cadastro-fundo: #efecfe;
  --cor-origem-cadastro-texto: #5a4bde;
  --cor-origem-manual-fundo: #eef0f4;
  --cor-origem-manual-texto: #4b5563;
  --cor-origem-semantica-fundo: #eaf1fd;
  --cor-origem-semantica-texto: #1d4ed8;
  --cor-origem-web-fundo: #e6f5f3;
  --cor-origem-web-texto: #0f766e;
  --cor-origem-typesense-fundo: #eaf1fd;
  --cor-origem-typesense-texto: #1d4ed8;

  --cor-perigo: #b42318;
  --cor-perigo-fundo: #fdeceb;

  /* Tarjas do bulário. Não são cores de status nem de série: são as cores da
     faixa impressa na embalagem, e é assim que um farmacêutico reconhece a
     restrição de venda. Manter literal é o que torna o ponto legível de imediato. */
  --cor-tarja-livre: #16794f;
  --cor-tarja-vermelha: #b42318;
  --cor-tarja-vermelha-retida: #8a1b12;
  --cor-tarja-preta: #1b1d23;
  --cor-tarja-indefinida: #9ca3af;
  /* Fundo do chip "controlado". Deriva da tarja preta em vez de reaproveitar um
     par de status: controle especial é um regime legal, não um estado de
     qualidade, e usar o vermelho de "revisar" o faria parecer pendência. */
  --cor-tarja-preta-fundo: #e7e8ea;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fonte-familia);
  font-size: var(--fonte-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: 2px var(--espaco-2);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.chip-sim {
  background: var(--cor-status-sim-fundo);
  color: var(--cor-status-sim-texto);
}
.chip-revisar {
  background: var(--cor-status-revisar-fundo);
  color: var(--cor-status-revisar-texto);
}
.chip-nao {
  background: var(--cor-status-nao-fundo);
  color: var(--cor-status-nao-texto);
}
.chip-controlado {
  background: var(--cor-tarja-preta-fundo);
  color: var(--cor-tarja-preta);
}
.chip-origem-cadastro {
  background: var(--cor-origem-cadastro-fundo);
  color: var(--cor-origem-cadastro-texto);
}
.chip-origem-manual {
  background: var(--cor-origem-manual-fundo);
  color: var(--cor-origem-manual-texto);
}
.chip-origem-semantica {
  background: var(--cor-origem-semantica-fundo);
  color: var(--cor-origem-semantica-texto);
}
.chip-origem-web {
  background: var(--cor-origem-web-fundo);
  color: var(--cor-origem-web-texto);
}
.chip-origem-typesense {
  background: var(--cor-origem-typesense-fundo);
  color: var(--cor-origem-typesense-texto);
}

.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-2) var(--espaco-4);
  border-radius: var(--raio-sm);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: var(--fonte-pequena);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.botao:hover {
  border-color: var(--cor-acento);
}
.botao:disabled {
  opacity: 0.55;
  cursor: default;
}

.botao-primario {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
  color: #ffffff;
}
.botao-primario:hover {
  background: var(--cor-acento-hover);
  border-color: var(--cor-acento-hover);
}

.botao-perigo {
  color: var(--cor-perigo);
  border-color: transparent;
  background: transparent;
  padding: var(--espaco-1) var(--espaco-2);
}
.botao-perigo:hover {
  background: var(--cor-perigo-fundo);
  border-color: transparent;
}

.botao-sm {
  padding: var(--espaco-1) var(--espaco-3);
  font-size: 0.78rem;
}

.campo-texto {
  width: 100%;
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-sm);
  border: 1px solid var(--cor-borda);
  font-family: var(--fonte-familia);
  font-size: var(--fonte-pequena);
  color: var(--cor-texto);
  background: var(--cor-superficie);
}
.campo-texto:focus {
  outline: none;
  border-color: var(--cor-acento);
}