/* Benefícios do imóvel — UM componente para as duas fichas.
 *
 * Markup: `web/imovel-ui.js::beneficiosImovel()`. Usado na ficha da rede
 * (`vitrine.js::fiCartaoDescricao`, dentro de um `.fi-cartao`) e na
 * página pública do imóvel (`imovel.js`, `/imovel/<codigo>`). Carregado por
 * `index.html` e `imovel.html`.
 *
 * Cada categoria tem um par de cor — forte (ícone, faixa, contador) e suave
 * (fundo do item) — nos dois temas. Nenhuma cor fixa fora dos dois blocos
 * abaixo (`CLAUDE.md §4`; `test_beneficios.py` confere). O tema escuro segue o
 * mecanismo do app (`:root[data-tema="escuro"]`); a /home hoje só tem o claro,
 * e se ganhar o escuro pelo mesmo atributo já sai pronta.
 *
 * Contraste (WCAG): contador e texto ≥ 4,5:1; ícones ≥ 3:1, nos dois temas.
 */
:root {
  --be-grupo: #f8fafc;          /* fundo do cartão de cada categoria */
  --be-linha: #e4e7ec;
  --be-texto: #191c1e;
  --be-texto-2: #5a6673;
  --be-destaque: #c51f2b;       /* eyebrow ("PARA VIVER BEM") */
  --be-foco: #164f99;
  --be-sobre-forte: #ffffff;    /* ícone sobre o tom forte da categoria */
  --be-item-ico: #ffffff;       /* fundo do ícone de cada item */
  --be-sombra: 0 1px 2px rgba(16, 24, 40, .05);
  --be-lazer: #0e7490;      --be-lazer-s: #e0f4f8;
  --be-conforto: #c2410c;   --be-conforto-s: #fdede3;
  --be-condominio: #4338ca; --be-condominio-s: #ebeafd;
  --be-seguranca: #047857;  --be-seguranca-s: #e4f7ef;
  --be-infra: #475467;      --be-infra-s: #eef0f3;
  --be-condicoes: #a21caf;  --be-condicoes-s: #fae8fc;
  --be-detalhes: #5a6673;   --be-detalhes-s: #f2f4f6;
}

:root[data-tema="escuro"] {
  --be-grupo: #1c232c;
  --be-linha: #2a323d;
  --be-texto: #e6edf3;
  --be-texto-2: #9aa4ae;
  --be-destaque: #f0616a;
  --be-foco: #7aa7ff;
  --be-sobre-forte: #0e1116;
  --be-item-ico: #0e1116;
  --be-sombra: 0 1px 2px rgba(0, 0, 0, .4);
  --be-lazer: #22d3ee;      --be-lazer-s: #10303a;
  --be-conforto: #fb923c;   --be-conforto-s: #3a2214;
  --be-condominio: #a5b4fc; --be-condominio-s: #232447;
  --be-seguranca: #34d399;  --be-seguranca-s: #12302a;
  --be-infra: #b4bcc8;      --be-infra-s: #252b34;
  --be-condicoes: #e879f9;  --be-condicoes-s: #35183a;
  --be-detalhes: #8b949e;   --be-detalhes-s: #262e38;
}

/* a cor de cada categoria (o id vem de `BENEFICIOS_CATEGORIAS`) */
.be-lazer { --be-cor: var(--be-lazer); --be-cor-s: var(--be-lazer-s); }
.be-conforto { --be-cor: var(--be-conforto); --be-cor-s: var(--be-conforto-s); }
.be-condominio { --be-cor: var(--be-condominio); --be-cor-s: var(--be-condominio-s); }
.be-seguranca { --be-cor: var(--be-seguranca); --be-cor-s: var(--be-seguranca-s); }
.be-infra { --be-cor: var(--be-infra); --be-cor-s: var(--be-infra-s); }
.be-condicoes { --be-cor: var(--be-condicoes); --be-cor-s: var(--be-condicoes-s); }
.be-detalhes { --be-cor: var(--be-detalhes); --be-cor-s: var(--be-detalhes-s); }

.be { color: var(--be-texto); min-width: 0; }

/* ── cabeçalho: eyebrow, título e total ─────────────────────────────────── */
.be-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.be-cab > div { min-width: 0; }
.be .be-eyebrow { margin: 0 0 4px; font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--be-destaque); }
.be .be-tit { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; color: var(--be-texto); }
.be-total { flex: none; padding: 3px 10px; border: 1px solid var(--be-linha); border-radius: 999px; background: var(--be-grupo);
  color: var(--be-texto-2); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; }

/* ── categorias: uma coluna no celular, grade no desktop ────────────────── */
.be-grupos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.be-grupo { min-width: 0; padding: 12px 10px; border: 1px solid var(--be-linha); border-top: 3px solid var(--be-cor);
  border-radius: 14px; background: var(--be-grupo); box-shadow: var(--be-sombra); }
.be .be-grupo-cab { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; line-height: 20px;
  font-weight: 700; letter-spacing: 0; color: var(--be-texto); }
.be-grupo-ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px;
  background: var(--be-cor); color: var(--be-sobre-forte); }
.be .be-grupo-ico .ico { width: 18px; height: 18px; stroke-width: 2; }
.be-grupo-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.be-grupo-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--be-cor-s); color: var(--be-cor); font-size: 12px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── itens: ladrilho com ícone na cor da categoria ──────────────────────── */
.be .be-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.be-item { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 40px; padding: 6px 8px 6px 6px;
  border-radius: 10px; background: var(--be-cor-s); color: var(--be-texto); font-size: 13px; line-height: 17px; font-weight: 600; }
.be-item-ico { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: var(--be-item-ico); color: var(--be-cor); }
.be .be-item-ico .ico { width: 16px; height: 16px; }
/* quebra entre palavras; só parte a palavra que não cabe sozinha na linha */
.be-item-txt { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

/* ── "Ver todos (N)": o excedente só aparece aberto ─────────────────────── */
.be:not(.be-aberto) .be-extra { display: none; }
.be .be-mais { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px;
  margin-top: 12px; padding: 10px 14px; border: 1px solid var(--be-linha); border-radius: 10px; background: var(--be-grupo);
  color: var(--be-texto); font-size: 14px; line-height: 20px; font-weight: 700; cursor: pointer; }
.be .be-mais:hover { background: var(--be-linha); color: var(--be-texto); }
.be .be-mais:focus-visible { outline: 2px solid var(--be-foco); outline-offset: 2px; }
.be .be-mais .ico { width: 18px; height: 18px; transition: transform .2s ease; }
.be-aberto .be-mais .ico { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .be .be-mais .ico { transition: none; } }