/* =============================================================================
   Cosmos Juris — identidade visual
   Navy #17263F (primária) · Laranja #F2711C (destaque)
   ============================================================================= */

:root {
  --navy: #17263F;
  --navy-700: #22344F;
  --navy-100: rgba(23, 38, 63, .08);

  --laranja: #F2711C;
  --laranja-600: #DB5F0E;
  --laranja-100: #FDEEE1;

  --fundo: #F6F7F9;
  --superficie: #FFFFFF;
  --borda: #E4E7EC;
  --texto: #17263F;
  --suave: #667085;

  --verde: #0E7C52;
  --verde-bg: #E7F5EE;
  --vermelho: #B42318;
  --vermelho-bg: #FDECEA;
  --azul: #175CD3;
  --azul-bg: #EFF4FF;
  --roxo: #6941C6;
  --roxo-bg: #F4F0FF;

  --raio-sm: 8px;
  --raio: 10px;
  --raio-lg: 14px;

  --sombra-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra: 0 4px 16px rgba(16, 24, 40, .06);

  --container: 1080px;
  --anel: 0 0 0 3px rgba(242, 113, 28, .35);
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; min-height: 100vh; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.015em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
svg { display: block; width: 100%; height: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- Acessibilidade ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--superficie); color: var(--navy); font-weight: 600;
  padding: 10px 16px; border-radius: var(--raio); box-shadow: var(--sombra);
  text-decoration: none; transition: top .15s ease;
}
.pular:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; border-radius: 4px; }

/* =============================================================================
   Topo
   ============================================================================= */
.topo { background: var(--navy); color: #fff; }
.topo__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 62px;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 650; font-size: 1.0625rem; letter-spacing: -.01em;
}
.marca__simbolo { width: 22px; height: 22px; fill: var(--laranja); flex: none; }
.topo :focus-visible { outline-color: #fff; }

.modo {
  font-size: .75rem; font-weight: 600; padding: 4px 11px;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.modo--stub { background: rgba(242, 113, 28, .16); color: #FFD5B4; border-color: rgba(242, 113, 28, .45); }
.modo--live { background: rgba(14, 124, 82, .18); color: #A6E9C8; border-color: rgba(14, 124, 82, .5); }

.principal { flex: 1; padding-block: 28px 56px; }
.secao + .secao { margin-top: 18px; }

/* =============================================================================
   Abas de módulo
   ============================================================================= */
.abas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.aba {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; cursor: pointer;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px 14px;
  box-shadow: var(--sombra-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.aba:hover { border-color: #CDD3DD; }
.aba--ativa {
  border-color: var(--laranja);
  box-shadow: 0 0 0 1px var(--laranja) inset, var(--sombra-sm);
  background: #FFFDFB;
}
.aba__label { font-weight: 650; color: var(--navy); }
.aba--ativa .aba__label { color: var(--laranja-600); }
.aba__resumo { font-size: .75rem; color: var(--suave); line-height: 1.4; }

/* =============================================================================
   Board de consulta
   ============================================================================= */
.board {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.board::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: 4px; background: var(--laranja);
}
.board__cabecalho { margin-bottom: 18px; }
.board__titulo { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.board__subtitulo { margin-top: 4px; color: var(--suave); font-size: .9375rem; }

.busca { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.busca__tipo { flex: none; }

.busca__campo {
  flex: 1 1 320px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  padding: 0 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.busca__campo:focus-within { border-color: var(--laranja); box-shadow: var(--anel); }
.busca__icone { width: 20px; height: 20px; color: var(--suave); flex: none; }
.busca__input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 13px 0; font-size: 1rem; outline: none;
}
.busca__input::placeholder { color: #98A2B3; }
.busca__acao { flex: none; }

/* ---------- Controles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--raio);
  padding: 12px 24px; font-size: .9375rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.btn--primaria { background: var(--laranja); color: #fff; }
.btn--primaria:hover { background: var(--laranja-600); }
.btn--primaria:active { transform: translateY(1px); }

.link {
  background: none; border: 0; padding: 4px 2px;
  color: var(--laranja); font-size: .8125rem; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  border-radius: 4px;
}
.link:hover { color: var(--laranja-600); }

.select { position: relative; display: flex; }
.select select {
  appearance: none; -webkit-appearance: none;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 10px 34px 10px 12px;
  font-size: .9375rem; cursor: pointer; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select--acoplado select { padding-block: 13px; border-width: 1.5px; }
.select select:hover { border-color: #CDD3DD; }
.select select:focus-visible { outline: none; border-color: var(--laranja); box-shadow: var(--anel); }
.select__seta {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--suave); pointer-events: none;
}

.input {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 10px 12px; font-size: .9375rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover { border-color: #CDD3DD; }
.input:focus-visible { outline: none; border-color: var(--laranja); box-shadow: var(--anel); }

.checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; cursor: pointer; user-select: none;
}
.checkbox input { width: 17px; height: 17px; accent-color: var(--laranja); cursor: pointer; }

/* ---------- Filtros dinâmicos ---------- */
.filtros { border: 0; padding: 0; margin: 22px 0 0; }
.filtros__legenda {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--suave);
  padding: 0 0 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--borda); width: 100%;
}
.filtros__grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 16px; align-items: end;
}
.campo-form { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo-form--inline { justify-content: flex-end; padding-bottom: 8px; }
.campo-form--acao { justify-content: flex-end; }
.campo-form--acao .btn { width: 100%; }
.campo-form__label { font-size: .8125rem; font-weight: 600; color: var(--navy-700); }
.obrigatorio { color: var(--laranja); margin-left: 2px; font-weight: 700; }
.ajuda { font-size: .75rem; color: var(--suave); }

.board__nota { margin-top: 16px; font-size: .75rem; color: var(--suave); }

.aviso {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 11px 14px;
  background: var(--vermelho-bg);
  border: 1px solid #F5C9C3;
  border-radius: var(--raio);
  color: #7A271A; font-size: .875rem;
}
.aviso__icone { width: 18px; height: 18px; flex: none; }

/* =============================================================================
   Buscas recentes
   ============================================================================= */
.recentes { margin-top: 20px; }
.recentes[hidden] { display: none; }
.recentes__cabecalho {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.recentes__rotulo {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--suave);
}
.recentes__lista { display: flex; flex-wrap: wrap; gap: 8px; }

.chip-recente {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 6px 14px 6px 11px;
  font-size: .875rem; color: var(--navy-700);
  cursor: pointer; box-shadow: var(--sombra-sm);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip-recente:hover { border-color: var(--laranja); color: var(--laranja-600); background: #FFFDFB; }
.chip-recente svg { width: 14px; height: 14px; flex: none; color: var(--suave); }
.chip-recente:hover svg { color: var(--laranja); }
.chip-recente__modulo {
  font-weight: 650; font-size: .75rem; color: var(--navy);
  background: var(--navy-100); border-radius: 999px; padding: 1px 8px; flex: none;
}
.chip-recente:hover .chip-recente__modulo { color: var(--laranja-600); }
.chip-recente__termo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =============================================================================
   Resultados
   ============================================================================= */
.resultados { margin-top: 26px; }
.resultados__cabecalho {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 14px; font-size: .9375rem; color: var(--suave);
}
.resultados__contagem { color: var(--navy); font-weight: 700; }
.resultados__lista { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Cartão ---------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  padding: 20px 22px;
}
.cartao__topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.cartao__identificacao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cartao__titulo {
  font-size: 1.0625rem; font-weight: 700; color: var(--navy);
  flex-basis: 100%; margin-top: 2px;
}
.cartao__codigo { font-size: .8125rem; color: var(--suave); }
.cartao__descricao { margin-top: 10px; color: #475467; font-size: .9375rem; }

.destaque {
  display: flex; flex-direction: column; align-items: flex-end;
  background: var(--laranja-100);
  border: 1px solid #F8D8BC;
  border-radius: var(--raio);
  padding: 7px 14px; flex: none;
}
.destaque__label {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #8A3E06;
}
.destaque__valor { font-size: 1.375rem; font-weight: 700; color: var(--laranja-600); line-height: 1.2; }

.badge {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 3px 10px; font-size: .75rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.badge--modulo { background: var(--navy); color: #fff; }
.badge--uf { background: var(--navy-100); color: var(--navy); border-color: rgba(23, 38, 63, .12); }
.badge--categoria { background: var(--roxo-bg); color: var(--roxo); border-color: #D9CCF5; }
.badge--federal { background: var(--azul-bg); color: var(--azul); border-color: #C7D7FE; }
.badge--estadual { background: var(--verde-bg); color: var(--verde); border-color: #BFE3D2; }
.badge--municipal { background: var(--laranja-100); color: #8A3E06; border-color: #F8D8BC; }
.badge--neutra { background: #F2F4F7; color: var(--suave); border-color: var(--borda); }

.campos {
  margin: 14px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 18px;
}
.campo { min-width: 0; }
.campo__label {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--suave);
}
.campo__valor { margin: 2px 0 0; font-size: .875rem; color: #344054; }

.cartao__bloco {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--borda);
}
.cartao__bloco-titulo {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--navy-700);
}
.cartao__bloco .campos { margin-top: 10px; }

/* ---------- Cartão expansível (Benefício Fiscal) ---------- */
.expansivel { margin-top: 16px; border-top: 1px dashed var(--borda); padding-top: 12px; }
.expansivel__gatilho {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 600; color: var(--laranja-600);
  border-radius: var(--raio-sm); padding: 4px 2px;
}
.expansivel__gatilho::-webkit-details-marker { display: none; }
.expansivel__gatilho::before {
  content: "▸"; display: inline-block; transition: transform .15s ease; color: var(--laranja);
}
.expansivel[open] .expansivel__gatilho::before { transform: rotate(90deg); }
.expansivel__contagem {
  background: var(--laranja-100); color: #8A3E06;
  border-radius: 999px; padding: 0 8px; font-size: .75rem;
}
.expansivel__corpo { margin-top: 10px; }

.aninhado + .aninhado { margin-top: 14px; }
.aninhado__titulo {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--suave);
  display: flex; align-items: center; gap: 8px;
}
.aninhado__contagem {
  background: #F2F4F7; border-radius: 999px; padding: 0 7px;
  font-size: .6875rem; color: var(--suave);
}
.aninhado__lista { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.aninhado__lista li {
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-sm); padding: 8px 11px;
  font-size: .875rem; color: #344054;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.aninhado__par b { color: var(--navy-700); font-weight: 600; }

/* ---------- Cartão da Agenda ---------- */
.cartao--agenda { display: flex; gap: 18px; align-items: flex-start; }
.cartao--agenda__conteudo { flex: 1; min-width: 0; }
.dia {
  flex: none; width: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--navy); color: #fff;
  border-radius: var(--raio); padding: 9px 0;
}
.dia__numero { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.dia__rotulo { font-size: .625rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }

mark {
  background: rgba(242, 113, 28, .22);
  color: #A24608; border-radius: 3px; padding: 0 1px; font-weight: 600;
}

/* ---------- Esqueletos ---------- */
.esqueleto {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); padding: 20px 22px;
  box-shadow: var(--sombra-sm);
}
.esqueleto + .esqueleto { margin-top: 14px; }
.esqueleto__linha-topo { display: flex; gap: 8px; }
.sk {
  background: linear-gradient(90deg, #EEF0F4 25%, #F6F7F9 37%, #EEF0F4 63%);
  background-size: 400% 100%;
  animation: sk 1.4s ease infinite;
  border-radius: 6px; height: 12px;
}
.sk--badge { width: 84px; height: 20px; border-radius: 999px; }
.sk--badge-sm { width: 62px; height: 20px; border-radius: 999px; }
.sk--titulo { width: 44%; height: 18px; margin-top: 14px; }
.sk--linha { margin-top: 10px; }
.sk--linha-2 { width: 88%; }
.sk--meta { width: 30%; margin-top: 16px; height: 10px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Estados ---------- */
.estado {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-sm);
  padding: 44px 28px; text-align: center;
}
.estado__icone {
  width: 46px; height: 46px; margin: 0 auto 14px;
  border-radius: 50%; display: grid; place-items: center;
  background: #F2F4F7; color: var(--suave); padding: 11px;
}
.estado--inicial .estado__icone { background: var(--laranja-100); color: var(--laranja-600); }
.estado--erro .estado__icone { background: var(--vermelho-bg); color: var(--vermelho); }
.estado__titulo { font-size: 1.0625rem; font-weight: 650; color: var(--navy); }
.estado__codigo {
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  background: var(--vermelho-bg); color: var(--vermelho);
  border: 1px solid #F5C9C3; border-radius: 999px; padding: 2px 8px;
  margin-left: 6px; vertical-align: middle;
}
.estado__texto {
  margin-top: 6px; color: var(--suave); font-size: .9375rem;
  max-width: 52ch; margin-inline: auto;
}
.estado__detalhe {
  margin-top: 10px; font-size: .8125rem; color: var(--suave);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-sm); padding: 8px 12px;
  max-width: 60ch; margin-inline: auto; overflow-x: auto;
}
.estado__lista {
  margin: 14px auto 0; padding: 0; list-style: none;
  display: inline-flex; flex-direction: column; gap: 5px;
  text-align: left; color: var(--suave); font-size: .875rem;
}
.estado__lista li::before { content: "•"; color: var(--laranja); font-weight: 700; margin-right: 8px; }
.estado__acoes { margin-top: 20px; }

/* =============================================================================
   Rodapé
   ============================================================================= */
.rodape {
  border-top: 1px solid var(--borda); background: var(--superficie);
  padding-block: 18px; color: var(--suave); font-size: .8125rem; text-align: center;
}

/* =============================================================================
   Responsivo
   ============================================================================= */
@media (max-width: 720px) {
  .principal { padding-block: 20px 36px; }
  .board { padding: 20px 16px 18px; border-radius: 12px; }
  .board__titulo { font-size: 1.25rem; }

  .abas { grid-template-columns: 1fr 1fr; }
  .aba__resumo { display: none; }

  .busca { flex-direction: column; }
  .busca__tipo, .busca__campo, .busca__acao { width: 100%; }
  .busca__acao { padding-block: 13px; }

  .filtros__grade { grid-template-columns: 1fr; }

  .cartao__topo { flex-direction: column; }
  .destaque { align-items: flex-start; align-self: stretch; }
  .campos { grid-template-columns: 1fr 1fr; }
  .cartao--agenda { gap: 12px; }
}

@media (max-width: 420px) {
  .abas { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
}

/* ---------- Lista de tributação (PIS/COFINS) ---------- */
.trib__lista { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.trib {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 11px 13px;
}
.trib__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trib__valor {
  font-size: 1.125rem; font-weight: 700; color: var(--laranja-600);
  background: var(--laranja-100); border: 1px solid #F8D8BC;
  border-radius: var(--raio-sm); padding: 1px 10px;
}
.trib .campos { margin-top: 10px; }