/* Catálogo público e ficha da oferta (T017). Mobile-first: base 360 px; min-width amplia (600, 900). Sem style inline (CSP). */

/* Campo de seleção (base.css cobre só input) */
.campo select {
  width: 100%; min-height: 48px; padding: 0 var(--mm-e3);
  font: inherit; color: var(--mm-texto); background: var(--mm-superficie);
  border: 2px solid var(--mm-borda); border-radius: var(--mm-raio-md);
}

/* Chips e selos */
.chips { display: flex; flex-wrap: wrap; gap: var(--mm-e2); margin-bottom: var(--mm-e3); }
.chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--mm-e3);
  border-radius: var(--mm-raio-pill); border: 1px solid var(--mm-borda);
  font-size: var(--mm-t-sm); font-weight: 600; background: var(--mm-superficie); color: var(--mm-texto);
}
.chip.sucesso { background: var(--mm-sucesso-fundo); border-color: var(--mm-sucesso); color: var(--mm-sucesso); }
.chip.aviso { background: var(--mm-aviso-fundo); border-color: var(--mm-aviso-borda); color: var(--mm-aviso-texto); }
.chip.neutro { background: var(--mm-consulta-fundo); border-color: var(--mm-borda); color: var(--mm-texto-suave); }

.selo-consulta {
  display: inline-flex; align-items: center; gap: var(--mm-e2); min-height: 32px; padding: 0 var(--mm-e3);
  border-radius: var(--mm-raio-pill); background: var(--mm-consulta-fundo); color: var(--mm-texto);
  font-size: var(--mm-t-sm); font-weight: 600;
}
.selo-simulado {
  display: inline-block; padding: 2px var(--mm-e3); margin-bottom: var(--mm-e3);
  border-radius: var(--mm-raio-pill); background: var(--mm-aviso-fundo); color: var(--mm-aviso-texto);
  border: 1px solid var(--mm-aviso-borda); font-size: var(--mm-t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.preco { margin: 0 0 var(--mm-e3); }
.preco-valor { font-size: var(--mm-t-xl); }
.preco-unidade { font-size: var(--mm-t-sm); color: var(--mm-texto-suave); }
.meta { margin: 0 0 var(--mm-e2); color: var(--mm-texto-suave); font-size: var(--mm-t-sm); }
.total { font-weight: 600; margin: var(--mm-e4) 0 var(--mm-e3); }

/* Filtros */
.chips-tipo ul { display: flex; gap: var(--mm-e2); list-style: none; margin: 0 0 var(--mm-e4); padding: 0 0 var(--mm-e1); overflow-x: auto; }
.chips-tipo li { flex: none; }
.chip-filtro {
  display: inline-flex; align-items: center; min-height: var(--mm-alvo); padding: 0 var(--mm-e4); white-space: nowrap;
  border: 1px solid var(--mm-borda); border-radius: var(--mm-raio-pill); background: var(--mm-superficie);
  color: var(--mm-texto); text-decoration: none; font-weight: 600; font-size: var(--mm-t-sm);
}
.chip-filtro[aria-current="true"] { background: var(--mm-primaria); border-color: var(--mm-primaria); color: var(--mm-sobre-primaria); }
.filtros .busca { display: flex; align-items: flex-end; gap: var(--mm-e2); margin-bottom: var(--mm-e3); }
.filtros .busca .campo { flex: 1; margin-bottom: 0; min-width: 0; }
.mais-filtros { border: 1px solid var(--mm-borda-leve); border-radius: var(--mm-raio-md); background: var(--mm-superficie); margin-bottom: var(--mm-e4); }
.mais-filtros summary { min-height: var(--mm-alvo); padding: var(--mm-e2) var(--mm-e4); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.mais-filtros-corpo { padding: var(--mm-e2) var(--mm-e4) var(--mm-e4); }

/* Lista e cartão de oferta (T006 §4.3) */
.grade-ofertas { list-style: none; margin: 0 0 var(--mm-e4); padding: 0; display: grid; gap: var(--mm-e4); grid-template-columns: 1fr; }
.cartao-oferta {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--mm-superficie); border: 1px solid var(--mm-borda-leve);
  border-radius: var(--mm-raio-lg); box-shadow: var(--mm-sombra-1);
}
.cartao-oferta:focus-within { outline: 3px solid var(--mm-foco); outline-offset: 2px; }
.cartao-oferta a:focus-visible { outline: none; }
.foto-oferta { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--mm-borda-leve); }
.cartao-corpo { display: flex; flex-direction: column; flex: 1; padding: var(--mm-e4); }
.cartao-titulo { font-size: var(--mm-t-lg); margin-bottom: var(--mm-e2); }
.cartao-titulo a { color: var(--mm-texto); text-decoration: none; }
/* O título é o único link; o ::after estende o alvo de toque ao cartão inteiro. */
.cartao-titulo a::after { content: ""; position: absolute; inset: 0; }
.cartao-corpo .preco { margin-top: auto; padding-top: var(--mm-e2); }
.esqueleto-cartao { box-shadow: none; }

/* Paginação */
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-e3); margin: var(--mm-e5) 0; }
.paginacao .botao { min-width: 110px; }
.paginacao .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.pagina-atual { margin: 0; font-weight: 600; text-align: center; }

/* Botão fixo "Falar com assessor" (D22): acima da navegação inferior; no desktop, ao lado da lateral */
.com-barra-fixa { padding-bottom: calc(var(--mm-e6) + 56px); }
.barra-atendimento {
  position: fixed; left: 0; right: 0; z-index: 20;
  bottom: calc(var(--mm-altura-nav) + env(safe-area-inset-bottom, 0px));
  padding: var(--mm-e2) var(--mm-margem-tela);
  background: var(--mm-superficie); border-top: 1px solid var(--mm-borda-leve); box-shadow: var(--mm-sombra-2);
}
.barra-atendimento .botao { width: 100%; }

/* Diálogo do atendimento simulado */
.dialogo {
  width: calc(100% - 2 * var(--mm-margem-tela)); max-width: 440px; padding: 0;
  border: 1px solid var(--mm-borda); border-radius: var(--mm-raio-lg);
  background: var(--mm-superficie); color: var(--mm-texto); box-shadow: var(--mm-sombra-2);
}
.dialogo::backdrop { background: rgba(0, 0, 0, .55); }
.dialogo-corpo { padding: var(--mm-e5); }

/* Ficha */
.voltar { display: inline-flex; align-items: center; gap: var(--mm-e1); min-height: var(--mm-alvo); margin-bottom: var(--mm-e2); font-weight: 600; }
.foto-ficha { max-height: 260px; border-radius: var(--mm-raio-lg); margin-bottom: var(--mm-e4); }
.oferta-resumo { margin-bottom: var(--mm-e4); }
.oferta-resumo p:last-child { margin-bottom: 0; }
.ficha .animal { margin-bottom: var(--mm-e4); }
.ficha h3 { font-size: var(--mm-t-lg); margin-top: var(--mm-e5); }
.ficha h4 { font-size: var(--mm-t-md); margin: var(--mm-e4) 0 var(--mm-e1); }
.dados { margin: 0; display: grid; grid-template-columns: 1fr; }
.dados dt { font-size: var(--mm-t-sm); color: var(--mm-texto-suave); }
.dados dd { margin: 0 0 var(--mm-e3); font-weight: 600; }
.dados dd .nao-informado { font-weight: 400; }

.arvore, .arvore ul { list-style: none; margin: 0; padding-left: var(--mm-e4); }
.arvore { padding-left: 0; }
.arvore ul { border-left: 2px solid var(--mm-borda-leve); margin-left: var(--mm-e2); }
.arvore li { margin: var(--mm-e2) 0; }

.programa { margin-bottom: var(--mm-e4); }
.edicao { border: 1px solid var(--mm-borda-leve); border-radius: var(--mm-raio-md); margin-bottom: var(--mm-e3); background: var(--mm-superficie); }
.edicao summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-e2); min-height: var(--mm-alvo); padding: var(--mm-e2) var(--mm-e3); cursor: pointer; }
.edicao-corpo { padding: 0 var(--mm-e3) var(--mm-e3); }
.lista-carac { list-style: none; margin: 0; padding: 0; }
.carac { padding: var(--mm-e2) 0; border-top: 1px solid var(--mm-borda-leve); }
.carac-topo { display: flex; justify-content: space-between; gap: var(--mm-e3); align-items: baseline; }
.carac-nome { font-weight: 600; }
.carac-tipo { font-size: var(--mm-t-xs); color: var(--mm-texto-suave); font-weight: 400; }
.carac-valor { font-weight: 700; text-align: right; }
.carac-valor.nao-informado { font-weight: 400; }
.carac .legenda { margin: 0; }

@media (min-width: 600px) {
  .grade-ofertas { grid-template-columns: repeat(2, 1fr); }
  .chips-tipo ul { flex-wrap: wrap; overflow-x: visible; }
  .dados { grid-template-columns: max-content 1fr; column-gap: var(--mm-e5); }
  .dados dd { margin-bottom: var(--mm-e2); }
  .barra-atendimento { display: flex; justify-content: center; }
  .barra-atendimento .botao { width: auto; min-width: 280px; }
}

@media (min-width: 900px) {
  .grade-ofertas { grid-template-columns: repeat(3, 1fr); }
  .barra-atendimento { bottom: 0; left: var(--mm-largura-lateral); box-shadow: none; background: transparent; border-top: 0; justify-content: flex-end; pointer-events: none; }
  .barra-atendimento .botao { pointer-events: auto; box-shadow: var(--mm-sombra-2); }
  body:not(.com-nav) .barra-atendimento { left: 0; }
  .com-barra-fixa { padding-bottom: calc(var(--mm-e6) + 56px); }
}

/* Favoritos, comparação e aviso rápido (T021a) */
.botao-favorito { cursor: pointer; color: var(--mm-primaria); }
.botao-favorito .icone { width: 22px; height: 22px; }
.botao-favorito[aria-pressed="true"] .icone path { fill: currentColor; }
.cartao-oferta > .botao-favorito {
  position: absolute; top: var(--mm-e2); right: var(--mm-e2); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mm-alvo); height: var(--mm-alvo); padding: 0;
  background: var(--mm-superficie); border: 2px solid var(--mm-borda); border-radius: var(--mm-raio-pill); box-shadow: var(--mm-sombra-1);
}
.cartao-oferta > .botao-favorito:focus-visible, .marcar-comparar input:focus-visible { outline: 3px solid var(--mm-foco); outline-offset: 2px; }
.acoes-ficha { display: flex; flex-wrap: wrap; gap: var(--mm-alvo-gap); margin: 0 0 var(--mm-e4); }
.acoes-ficha .botao { gap: var(--mm-e2); }

.marcar-comparar { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--mm-e2); min-height: var(--mm-alvo); margin-top: var(--mm-e2); font-weight: 600; cursor: pointer; }
.marcar-comparar input { width: 22px; height: 22px; margin: 0; }
.barra-comparar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mm-e3); margin: 0 0 var(--mm-e4); padding: var(--mm-e3) var(--mm-e4); background: var(--mm-superficie); border: 1px solid var(--mm-borda-leve); border-radius: var(--mm-raio-md); }
.barra-comparar .legenda { margin: 0; flex: 1 1 180px; }
.cartao-indisponivel { border-style: dashed; }
.cartao-indisponivel .acoes { margin-top: var(--mm-e3); }
.lista-simples { margin: 0 0 var(--mm-e4); padding-left: var(--mm-e5); }

.aviso-rapido {
  position: fixed; left: var(--mm-margem-tela); right: var(--mm-margem-tela); z-index: 60;
  bottom: calc(var(--mm-altura-nav) + var(--mm-e6) + 56px + env(safe-area-inset-bottom, 0px));
  max-width: 420px; margin: 0 auto; padding: var(--mm-e3) var(--mm-e4);
  background: var(--mm-texto); color: var(--mm-superficie); border-radius: var(--mm-raio-md); box-shadow: var(--mm-sombra-2);
  font-weight: 600; text-align: center;
}

/* Tabela de comparação: a rolagem horizontal fica só dentro do bloco de dados */
.tabela-rolagem { overflow-x: auto; margin-bottom: var(--mm-e3); border: 1px solid var(--mm-borda-leve); border-radius: var(--mm-raio-md); background: var(--mm-superficie); }
.tabela-rolagem:focus-visible { outline: 3px solid var(--mm-foco); outline-offset: 2px; }
.tabela-comparar { width: 100%; border-collapse: collapse; font-size: var(--mm-t-sm); }
.tabela-comparar th, .tabela-comparar td { padding: var(--mm-e2) var(--mm-e3); text-align: left; vertical-align: top; border-top: 1px solid var(--mm-borda-leve); min-width: 132px; }
.tabela-comparar thead th { border-top: 0; background: var(--mm-consulta-fundo); }
.tabela-comparar tbody th { position: sticky; left: 0; z-index: 1; background: var(--mm-superficie); font-weight: 600; box-shadow: 1px 0 0 var(--mm-borda-leve); }
.tabela-comparar thead th:first-child { position: sticky; left: 0; z-index: 1; }
.tabela-comparar .tirar { display: block; margin-top: var(--mm-e1); font-size: var(--mm-t-xs); font-weight: 400; }
.valor-nao-aplicavel { color: var(--mm-texto-suave); font-style: italic; }
.valor-animal { margin-bottom: var(--mm-e1); }
.grupo-comparavel, .grupo-isolado { margin-bottom: var(--mm-e5); }
.grupo-comparavel h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-e2); font-size: var(--mm-t-lg); }