/* Planet Aduana — consulta de NCM (/ncm).
   Usa os tokens e as classes do style.css; aqui ficam só o campo de busca, os estados, a lista de
   resultados, as fontes e a explicação do código. */

.consulta-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.consulta-secao { padding-top: clamp(32px, 5vw, 56px); }

/* ---------- Campo de busca ---------- */

.consulta-busca {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--linha); border-radius: var(--raio-g); background: #fff;
  box-shadow: var(--sombra);
}
.consulta-busca__rotulo { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--marinho); }
.consulta-busca__linha { display: flex; gap: 12px; margin-top: 12px; }
.consulta-busca__campo { position: relative; flex: 1 1 auto; min-width: 0; }
.consulta-busca__campo .icone {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; color: var(--indigo); pointer-events: none;
}
.consulta-busca__campo input {
  width: 100%; height: 64px; padding: 0 16px 0 56px;
  font: inherit; font-size: 1.25rem; color: var(--texto);
  background: #fff; border: 1px solid var(--borda-entrada); border-radius: 14px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.consulta-busca__campo input::placeholder { color: var(--texto-3); opacity: 1; }
.consulta-busca__campo input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px rgb(46 49 146 / 18%); }
.consulta-busca__campo input::-webkit-search-cancel-button { cursor: pointer; }
.consulta-busca__botao { flex: none; min-height: 64px; padding-inline: 32px; font-size: 1.0625rem; }
.consulta-busca__botao .icone { display: none; }
.consulta-busca__ajuda { margin-top: 10px; font-size: .9375rem; color: var(--texto-3); }

.consulta-sem-js {
  margin-top: 20px; padding: 14px 18px; border-left: 3px solid #e6be58; border-radius: 4px 10px 10px 4px;
  background: #fdf5e1; color: #5c4300;
}
.consulta-sem-js a { color: inherit; font-weight: 600; text-underline-offset: 2px; }

/* ---------- Painel: dicas, estados e resultados ---------- */

.consulta-painel { margin-top: clamp(28px, 4vw, 40px); }
.consulta-painel [hidden] { display: none; }

.consulta-dicas {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
}
.consulta-dicas__titulo { font-size: 1.25rem; }
.consulta-dicas__lista {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin: 18px 0 0; padding: 0; list-style: none;
}
.consulta-dicas__lista li { padding-left: 16px; border-left: 3px solid var(--ciano); font-size: 1rem; color: var(--texto-2); }
.consulta-dicas__lista strong { display: block; margin-bottom: 4px; color: var(--marinho); }
.consulta-dicas__rotulo {
  margin-top: 28px;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.consulta-exemplos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.consulta-exemplos a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 18px;
  border: 1px solid var(--borda-campo); border-radius: 999px; background: #fff;
  font-size: .9375rem; font-weight: 600; color: var(--indigo); text-decoration: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.consulta-exemplos a:hover { border-color: var(--indigo); background: var(--indigo); color: #fff; }

@media (max-width: 880px) {
  .consulta-dicas__lista { grid-template-columns: 1fr; gap: 16px; }
}

/* Estados: carregando, erro e nenhum resultado */
.consulta-estado {
  display: grid; gap: 12px; justify-items: start;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
  color: var(--texto-2);
}
.consulta-estado h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.consulta-estado p { max-width: 44em; overflow-wrap: anywhere; }
.consulta-estado ul { margin: 0; padding-left: 1.2em; }
.consulta-estado li + li { margin-top: 6px; }
.consulta-estado a:not(.botao) { color: var(--indigo); font-weight: 600; text-underline-offset: 3px; }
.consulta-estado .botao { margin-top: 6px; }
.consulta-estado--vazio { border-style: dashed; border-color: var(--borda-campo); background: transparent; }
.consulta-estado--erro { border-left: 4px solid #b3261e; }
.consulta-estado--erro h2 { color: #8c1d18; }
.consulta-estado__acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.consulta-carregando { display: flex; align-items: center; gap: 14px; }
.consulta-carregando__roda {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--indigo) 18%, white); border-top-color: var(--indigo);
  animation: consulta-girar .8s linear infinite;
}
@keyframes consulta-girar { to { transform: rotate(360deg); } }

/* ---------- Resultados ---------- */

.consulta-resultados__cabeca {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px;
  margin-bottom: 16px;
}
.consulta-resultados__titulo { font-size: 1.25rem; overflow-wrap: anywhere; }
.consulta-resultados__sub { font-size: .9375rem; color: var(--texto-3); }
/* palavras que a busca deixou de lado ("café gourmet": nenhuma NCM usa "gourmet") */
.consulta-resultados__nota {
  flex-basis: 100%; margin-top: 8px; padding: 10px 14px;
  border-left: 3px solid var(--ciano); border-radius: 4px 10px 10px 4px; background: #fff;
  font-size: .9375rem; color: var(--texto-2); overflow-wrap: anywhere;
}

.consulta-lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.consulta-item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  padding: 24px 28px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.consulta-item:hover, .consulta-item:focus-within { border-color: color-mix(in srgb, var(--indigo) 28%, white); box-shadow: var(--sombra); }

.consulta-item__codigo {
  display: inline-block;
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.75rem); font-weight: 600; line-height: 1.1;
  letter-spacing: .01em; color: var(--indigo); font-variant-numeric: tabular-nums;
}
.consulta-item__codigo:focus { outline: none; }
.consulta-item__codigo:focus-visible { outline: 3px solid var(--anel-foco); outline-offset: 4px; border-radius: 4px; }
.consulta-item__descricao { margin-top: 8px; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--marinho); overflow-wrap: anywhere; }

/* Alíquotas e botões: logo abaixo da descrição no celular; coluna da direita no computador */
.consulta-item__lado { display: grid; gap: 14px; }

/* Etiquetas de II e IPI */
.consulta-etiquetas { display: flex; flex-wrap: wrap; align-content: start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.consulta-etiqueta {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px;
  border-radius: 999px; background: color-mix(in srgb, var(--indigo) 8%, white);
  font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--indigo); font-variant-numeric: tabular-nums;
}
.consulta-etiqueta__nome { font-weight: 600; color: var(--texto-2); }
.consulta-etiqueta__origem {
  padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--indigo) 22%, white);
  font-size: .8125rem; font-weight: 600; color: var(--texto-2);
}
.consulta-etiqueta--nt { background: var(--fundo-2); color: var(--texto-2); }

/* Trilha da hierarquia */
.consulta-trilha { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .875rem; line-height: 1.45; color: var(--texto-3); }
.consulta-trilha li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 10px; }
.consulta-trilha__codigo { font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.consulta-trilha__texto { overflow-wrap: anywhere; }

/* Avisos do item */
.consulta-avisos {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px;
  padding: 12px 16px; border-left: 3px solid #e6be58; border-radius: 4px 10px 10px 4px;
  background: #fdf8ea; font-size: .875rem; line-height: 1.5; color: #4d3900;
}
.consulta-avisos > .icone { width: 20px; height: 20px; margin-top: 1px; color: #9a6b00; }
.consulta-avisos ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.consulta-avisos li { overflow-wrap: anywhere; }
.consulta-avisos details { margin-top: 6px; }
.consulta-avisos summary {
  display: inline-flex; align-items: center; min-height: 32px; cursor: pointer;
  font-weight: 700; color: #6b4a00; text-decoration: underline; text-underline-offset: 3px;
}
.consulta-avisos summary:hover { color: #4d3900; }
.consulta-avisos details[open] summary { margin-bottom: 6px; }
.consulta-avisos details ul { max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }

/* Ações */
.consulta-item__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.consulta-item__acoes .botao { min-height: 44px; padding: 8px 18px; font-size: .9375rem; gap: 8px; }
.consulta-item__acoes .botao .icone { width: 18px; height: 18px; }
.consulta-copiar[data-copiado] { border-color: var(--whatsapp); color: #145c37; }

@media (min-width: 880px) {
  .consulta-item {
    grid-template-columns: minmax(0, 1fr) 15rem; grid-template-rows: auto auto 1fr;
    gap: 14px 48px; padding: 28px 32px;
  }
  /* linha vertical no meio do espaço entre o texto e a coluna das alíquotas */
  .consulta-item::before {
    content: ""; grid-column: 2; grid-row: 1 / -1; margin-left: -24px;
    border-left: 1px solid var(--linha); pointer-events: none;
  }
  .consulta-item__cab { grid-column: 1; grid-row: 1; }
  .consulta-trilha { grid-column: 1; grid-row: 2; }
  .consulta-avisos { grid-column: 1; grid-row: 3; align-self: start; }
  /* a coluna da direita ocupa todas as linhas e fica no alto: os botões vêm logo depois das alíquotas,
     mesmo quando a descrição é longa */
  .consulta-item__lado { grid-column: 2; grid-row: 1 / -1; align-self: start; }
  .consulta-etiquetas { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .consulta-etiqueta { border-radius: 10px; padding: 8px 14px; }
  .consulta-etiqueta__nome { margin-right: auto; }
  .consulta-item__acoes { flex-direction: column; }
  .consulta-item__acoes .botao { width: 100%; }
}

@media (max-width: 560px) {
  .consulta-item { padding: 20px 18px; }
  .consulta-item__acoes .botao { flex: 1 1 auto; }
  .consulta-trilha li { grid-template-columns: 4.25rem minmax(0, 1fr); gap: 8px; }
}

.consulta-mais { display: grid; justify-items: center; gap: 8px; margin-top: 24px; }
.consulta-mais__nota { font-size: .875rem; color: var(--texto-3); text-align: center; }

/* ---------- Aviso e fontes ---------- */

.consulta-rodape {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(24px, 4vw, 56px);
  align-items: start; margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--linha);
}

.consulta-aviso {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px;
  padding: 18px 20px; border-left: 3px solid var(--ciano); border-radius: 4px 10px 10px 4px;
  background: #fff; font-size: .9375rem; color: var(--texto-2);
}
.consulta-aviso .icone { color: var(--indigo); }
.consulta-aviso strong { color: var(--marinho); }

.consulta-fontes__titulo {
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.consulta-fontes__lista { display: grid; gap: 12px; margin: 14px 0 0; font-size: .9375rem; }
.consulta-fontes__lista > div { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 12px; }
.consulta-fontes__lista dt { font-weight: 700; color: var(--marinho); }
.consulta-fontes__lista dd { margin: 0; color: var(--texto-2); }
.consulta-fontes__lista a { color: var(--indigo); font-weight: 600; text-underline-offset: 3px; }
.consulta-fontes__versao { display: block; margin-top: 2px; font-size: .875rem; color: var(--texto-3); }
.consulta-fontes__versao:empty { display: none; }
.consulta-fontes__versao ul { margin: 4px 0 0; padding-left: 1.1em; }
.consulta-fontes__data { margin-top: 14px; font-size: .875rem; color: var(--texto-3); }

.consulta-regras { margin-top: 16px; border-top: 1px solid var(--linha); }
.consulta-regras summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 2px; cursor: pointer;
  font-size: .9375rem; font-weight: 600; color: var(--indigo); list-style: none;
}
.consulta-regras summary::-webkit-details-marker { display: none; }
.consulta-regras summary::before {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform .2s;
}
.consulta-regras[open] summary::before { transform: rotate(45deg); }
.consulta-regras__corpo { display: grid; gap: 10px; padding: 0 0 8px; font-size: .875rem; color: var(--texto-2); }
.consulta-regras__rotulo {
  margin-top: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
}
.consulta-origens { display: grid; gap: 6px; margin: 0; }
.consulta-origens > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 10px; }
.consulta-origens dt { font-weight: 700; color: var(--marinho); }
.consulta-origens dd { margin: 0; }

@media (min-width: 881px) {
  .consulta-aviso { position: sticky; top: calc(var(--cabecalho) + 24px); }
}
@media (max-width: 880px) {
  .consulta-rodape { grid-template-columns: 1fr; }
}

/* ---------- O que é a NCM ---------- */

.consulta-sobre { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.consulta-sobre__cabeca { position: sticky; top: calc(var(--cabecalho) + 32px); margin-bottom: 0; }
.consulta-sobre__texto > p { color: var(--texto-2); }
.consulta-sobre__texto > p + p, .consulta-sobre__texto > figure + p { margin-top: 16px; }

.consulta-anatomia {
  margin: 28px 0; padding: 22px 24px 24px;
  border-radius: var(--raio); background: var(--fundo-2);
}
.consulta-anatomia figcaption {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
}
.consulta-anatomia__partes {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.consulta-anatomia__partes li { display: grid; align-content: start; gap: 6px; }
.consulta-anatomia__digitos {
  display: grid; place-items: center; height: 56px; border-radius: 10px;
  background: var(--indigo); color: #fff;
  font-size: 1.75rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.consulta-anatomia__partes li:nth-child(1) .consulta-anatomia__digitos { background: var(--marinho); }
.consulta-anatomia__partes li:nth-child(5) .consulta-anatomia__digitos { background: var(--ciano); color: var(--marinho); }
.consulta-anatomia__nome { font-size: .9375rem; font-weight: 700; color: var(--marinho); }
.consulta-anatomia__nota { font-size: .8125rem; line-height: 1.4; color: var(--texto-3); }

@media (max-width: 880px) {
  .consulta-sobre { grid-template-columns: 1fr; }
  .consulta-sobre__cabeca { position: static; }
}
@media (max-width: 560px) {
  .consulta-anatomia { padding: 18px 16px 20px; }
  .consulta-anatomia__partes { grid-template-columns: 1fr; gap: 10px; }
  .consulta-anatomia__partes li { grid-template-columns: 56px minmax(0, 1fr); gap: 2px 14px; align-items: center; }
  .consulta-anatomia__digitos { grid-row: span 2; height: 48px; font-size: 1.5rem; }
  .consulta-anatomia__nome, .consulta-anatomia__nota { align-self: end; }
  .consulta-anatomia__nota { align-self: start; }
}

.consulta-chamada { margin-top: clamp(48px, 6vw, 72px); }
.consulta-chamada .consulta-chamada__titulo { font-size: 1.5rem; color: #fff; }

/* no celular o botão vira um quadrado com a lupa (o texto "Buscar" continua para leitores de tela) */
@media (max-width: 560px) {
  .consulta-busca__linha { gap: 8px; }
  .consulta-busca__campo input { height: 56px; padding-left: 16px; font-size: 1.125rem; }
  .consulta-busca__campo .icone { display: none; }
  .consulta-busca__botao { width: 56px; min-height: 56px; padding: 0; border-radius: 14px; }
  .consulta-busca__botao .icone { display: block; width: 24px; height: 24px; }
  .consulta-busca__botao-texto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consulta-carregando__roda { animation-duration: 2.4s; }
}