/* ========================================================================
   CERTIFICADO ENERGÉTICO (A–G) — componente compartilhado por TODOS os
   layouts (corretor, imobiliária e os próximos).

   Na Espanha o certificado é obrigatório por lei pra anunciar um imóvel, e
   nenhum concorrente analisado deixa FILTRAR por ele — por isso o selo entra
   no card, na ficha e na grade de filtros, com as cores oficiais da escala
   (fixas de propósito: são um padrão legal, não a paleta do tenant, do mesmo
   jeito que o verde do WhatsApp).

   Campo: properties.energy_certificate ('A'..'G' | 'en_tramite' | 'exento'),
   com energy_consumption e energy_emissions (ver migrations 14e).
   ======================================================================== */

:root {
    --cee-a: #00804f;
    --cee-b: #3ba843;
    --cee-c: #96c11f;
    --cee-d: #f2d200;
    --cee-e: #f5ae18;
    --cee-f: #ec7a1c;
    --cee-g: #de1f26;
    --cee-ink: #1c1a17;
}

.cee-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 0;
    font-family: var(--dv2-font-body, inherit);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    flex-shrink: 0;
}
/* 'En trámite' / 'Exento' não têm cor na escala: caixa neutra com o texto */
.cee-badge.cee-text {
    width: auto;
    padding: 0 8px;
    height: 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    backdrop-filter: blur(4px);
}
.cee-badge.cee-a { background: var(--cee-a); color: #fff; }
.cee-badge.cee-b { background: var(--cee-b); color: var(--cee-ink); }
.cee-badge.cee-c { background: var(--cee-c); color: var(--cee-ink); }
.cee-badge.cee-d { background: var(--cee-d); color: var(--cee-ink); }
.cee-badge.cee-e { background: var(--cee-e); color: var(--cee-ink); }
.cee-badge.cee-f { background: var(--cee-f); color: var(--cee-ink); }
.cee-badge.cee-g { background: var(--cee-g); color: #fff; }

/* ── No card: canto superior direito da foto (a etiqueta de finalidade fica
   na esquerda), em todas as páginas de listagem e no portfólio da home ── */
.property-card .cee-badge,
.portfolio-card .cee-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* O botão de favoritos (.prop-fav-btn) também mora no canto superior
   direito da foto em imoveis.html — o selo desce pra não ficar embaixo
   dele. O seletor casa pelo irmão porque o botão vem antes no markup. */
.property-card .prop-fav-btn ~ .cee-badge,
.property-card .property-favorite-btn ~ .cee-badge {
    top: 56px;
}

/* ── Na ficha: linha dos números (quartos/banheiros/área) ── */
.pd-feature-cee {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pd-feature-cee .cee-badge {
    width: 34px;
    height: 34px;
    font-size: 17px;
}
.pd-feature-cee span {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.pd-feature-cee small {
    font-size: 0.78em;
    opacity: 0.7;
}

/* ── No filtro da categoria: 7 quadrados selecionáveis ── */
.cee-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cee-filter-option {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}
.cee-filter-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.cee-filter-option .cee-badge {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: transparent;
    color: var(--dv2-text-muted, #777);
    border: 1px solid var(--dv2-line, rgba(127, 127, 127, 0.35));
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cee-filter-option:hover .cee-badge {
    border-color: var(--dv2-text, currentColor);
}
/* Selecionado: assume a cor oficial da letra, com anel pra destacar */
.cee-filter-option input:checked + .cee-badge.cee-a { background: var(--cee-a); color: #fff; }
.cee-filter-option input:checked + .cee-badge.cee-b { background: var(--cee-b); color: var(--cee-ink); }
.cee-filter-option input:checked + .cee-badge.cee-c { background: var(--cee-c); color: var(--cee-ink); }
.cee-filter-option input:checked + .cee-badge.cee-d { background: var(--cee-d); color: var(--cee-ink); }
.cee-filter-option input:checked + .cee-badge.cee-e { background: var(--cee-e); color: var(--cee-ink); }
.cee-filter-option input:checked + .cee-badge.cee-f { background: var(--cee-f); color: var(--cee-ink); }
.cee-filter-option input:checked + .cee-badge.cee-g { background: var(--cee-g); color: #fff; }
.cee-filter-option input:checked + .cee-badge {
    border-color: var(--dv2-text, #111);
    box-shadow: 0 0 0 2px var(--dv2-text, #111) inset;
}
.cee-filter-option input:focus-visible + .cee-badge {
    outline: 2px solid var(--tenant-accent, #d4af37);
    outline-offset: 2px;
}