:root {
  --fundo: #f6f7f9;
  --texto: #1d2330;
  --suave: #545d6e;
  --borda: #c9ced8;
  --primaria: #1f5fbf;
  --primaria-escura: #174a96;
  --foco: #ffbf47;
  --ok: #17663a;
  --ok-fundo: #e5f4ea;
  --alerta: #8a5a00;
  --alerta-fundo: #fff4d6;
  --perigo: #a8231d;
  --perigo-fundo: #fde8e7;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.5;
}

* { box-sizing: border-box; }
body { margin: 0; }
.container { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }

.pular { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 10; }
.pular:focus { left: 1rem; }

.topo { background: var(--primaria); color: #fff; padding: 1.75rem 0 1.5rem; margin-bottom: 1.5rem; }
.topo h1 { margin: 0; font-size: 2rem; }
.subtitulo { margin: .25rem 0 0; }

.cartao { background: #fff; border: 1px solid var(--borda); border-radius: .5rem; padding: 1.25rem; }

.campo { margin-bottom: 1rem; }
label { display: block; font-weight: 600; margin-bottom: .25rem; }
.opcional { font-weight: 400; color: var(--suave); }
.ajuda { margin: .25rem 0 0; color: var(--suave); font-size: .9rem; }

input[type="text"] {
  width: 100%; font: inherit; padding: .6rem .75rem;
  border: 2px solid var(--borda); border-radius: .375rem; background: #fff; color: var(--texto);
}
input[type="text"]:focus { border-color: var(--primaria); }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.combo { position: relative; }
.combo [role="listbox"] {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 2px);
  margin: 0; padding: .25rem 0; list-style: none; max-height: 18rem; overflow-y: auto;
  background: #fff; border: 1px solid var(--borda); border-radius: .375rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.combo [role="option"] { padding: .5rem .75rem; cursor: pointer; }
.combo [role="option"][aria-selected="true"], .combo [role="option"]:hover { background: #e8effa; }
.combo .opcao-detalhe { display: block; font-size: .85rem; color: var(--suave); }
.combo .vazio { padding: .5rem .75rem; color: var(--suave); }

.selecionado { background: #eef2f8; border-radius: .375rem; padding: .5rem .75rem; margin: 0 0 1rem; }
.erro-form { color: var(--perigo); font-weight: 600; margin: 0 0 1rem; }

button {
  font: inherit; font-weight: 600; padding: .65rem 1.5rem; border: 0; border-radius: .375rem;
  background: var(--primaria); color: #fff; cursor: pointer;
}
button:hover { background: var(--primaria-escura); }
button:disabled { opacity: .6; cursor: progress; }

.resultado { margin: 1.5rem 0; }
.res {
  border-radius: .5rem; padding: 1.25rem; border: 2px solid;
}
.res h2 { margin: 0 0 .25rem; font-size: 1.4rem; display: flex; align-items: center; gap: .5rem; }
.res .icone { font-size: 1.6rem; line-height: 1; }
.res-NAO_CONTEM { background: var(--ok-fundo); border-color: var(--ok); }
.res-NAO_CONTEM h2 { color: var(--ok); }
.res-CONTEM { background: var(--perigo-fundo); border-color: var(--perigo); }
.res-CONTEM h2 { color: var(--perigo); }
.res-INCONCLUSIVO { background: var(--alerta-fundo); border-color: var(--alerta); }
.res-INCONCLUSIVO h2 { color: var(--alerta); }
.res-PENDENTE { background: #fff; border-color: var(--borda); }
.res-ERRO { background: #fff; border-color: var(--borda); }

.res .produto { margin: 0 0 .75rem; color: var(--suave); }
.res ul { margin: .25rem 0 .75rem; padding-left: 1.25rem; }
.res details { margin-top: .75rem; }
.res summary { cursor: pointer; font-weight: 600; }
.res blockquote { margin: .5rem 0; padding: .5rem .75rem; background: rgba(255, 255, 255, .7); border-left: 4px solid var(--borda); font-size: .9rem; overflow-wrap: anywhere; }
.res .meta { font-size: .85rem; color: var(--suave); margin-top: .75rem; }
.res .recomendacao { font-weight: 600; }

.carregando { display: flex; align-items: center; gap: .75rem; padding: 1rem; background: #fff; border: 1px solid var(--borda); border-radius: .5rem; }
.spinner { width: 1.5rem; height: 1.5rem; border: 3px solid var(--borda); border-top-color: var(--primaria); border-radius: 50%; animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.aviso { background: #fff; border: 1px solid var(--borda); border-left: 4px solid var(--alerta); border-radius: .5rem; padding: 1rem 1.25rem; margin-bottom: 2rem; }
.aviso h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.aviso p { margin: .5rem 0; }

.rodape { color: var(--suave); font-size: .9rem; padding: 1rem 0 2rem; }
a { color: var(--primaria-escura); }