/* ==========================================================================
   Páginas de detalhe SERP v2 — sistema de design unificado
   Usado por: car_v2, imovel_v2 (INCRA), parcela_v2 (SIGEF), imovel_cib (CAFIR), embargo
   --------------------------------------------------------------------------
   Princípios (Refactoring UI):
   - Página inteira branca. Sem "cards brancos sobre fundo cinza".
   - Separação por espaço, não por bordas/sombras.
   - Hierarquia por peso/cor, não por tamanho.
   - Spacing scale consistente.
   ========================================================================== */

:root {
    --detail-color-car: #2e7d32;
    --detail-color-incra: #e65100;
    --detail-color-sigef: #1565c0;
    --detail-color-cafir: #c62828;
    --detail-color-embargo: #b71c1c;
    --detail-color-prodes: #7b1fa2;

    --detail-bg: #ffffff;
    --detail-bg-soft: #f7f8fa;
    --detail-bg-softer: #fbfbfc;
    --detail-divider: #f0f1f3;
    --detail-border: #e5e7eb;
    --detail-border-strong: #d0d7de;

    --detail-text-strong: #111827;
    --detail-text: #1f2937;
    --detail-text-muted: #6b7280;
    --detail-text-subtle: #9ca3af;

    --detail-radius: 10px;
    --detail-radius-sm: 6px;

    /* Spacing scale (Refactoring UI p. 63) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
}

/* Override do tema: nas páginas de detalhe, o body fica branco. */
body.detail-page {
    background: var(--detail-bg) !important;
}

/* --------------------------------------------------------------------------
   Source logo — placeholder visual da fonte (CAR/INCRA/SIGEF/CAFIR/IBAMA)
   -------------------------------------------------------------------------- */
.detail-source-logo {
    object-fit: contain;
    display: inline-block;
}
.detail-source-logo--sm { height: 16px; max-width: 60px; }
.detail-source-logo--md { height: 32px; max-width: 110px; }
.detail-source-logo--lg { height: 64px; max-width: 180px; }
.detail-source-logo--xl { height: 130px; max-width: 200px; }

/* Logo dessaturado quando renderizado como placeholder de imagem real */
.detail-hero__image-placeholder .detail-source-logo {
    filter: grayscale(.85) opacity(.55);
}

/* --------------------------------------------------------------------------
   Wrapper geral de detalhe — herda largura do .container Bootstrap pai
   (1320px em XXL, 1140px em XL, etc.).

   Breadcrumb e subnav (incluindo subnav__inner) ficam em largura cheia
   alinhados com o cabeçalho do site. Apenas o conteúdo abaixo do subnav
   (hero, stats, meta, sections) recebe um indent sutil pra criar a
   "coluna interna" sem afetar a navegação.
   -------------------------------------------------------------------------- */
.detail-canvas {
    width: 100%;
    --detail-indent: var(--space-2);
}
.detail-canvas > .detail-hero,
.detail-canvas > .detail-stats,
.detail-canvas > .detail-meta,
.detail-canvas > .detail-section {
    padding-left: var(--detail-indent);
    padding-right: var(--detail-indent);
}

/* --------------------------------------------------------------------------
   HERO — sem card, fundo branco da própria página, generoso de espaço.
   -------------------------------------------------------------------------- */
/* Hero unificado — layout column em todas as resoluções (mobile + desktop):
   body em cima (pill, título, status, stats, ações), imagem em banner
   embaixo. Padroniza UX entre mobile e desktop. */
.detail-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6) 0 var(--space-4);
}
.detail-hero__body { order: 1; }
.detail-hero__image-wrap {
    order: 2;
    width: 100%;
    /* Aspect 1600/1100 = bate exato com a imagem servida (mps_1600x1100),
       garante que o watermark do rodapé apareça inteiro sem crop. */
    aspect-ratio: 1600 / 1100;
    /* Desktop: limita largura pra não ficar com altura exagerada, alinhado
       à esquerda (não centralizado) pra acompanhar o body. Mobile
       (full-bleed via media query abaixo) ignora esse cap. */
    max-width: 900px;
}
/* Modifiers --lg / --xl viraram no-op com o layout unificado, mas mantemos
   pra não quebrar templates que ainda passam a class. */
.detail-hero--lg, .detail-hero--xl { /* sem efeito — layout único */ }
.detail-hero__image-button {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--detail-radius);
    background: var(--detail-bg-soft);
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
}
.detail-hero__image-button:hover {
    background: #eef0f3;
    transform: scale(1.005);
}
.detail-hero__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-5);
}
/* Loader visível enquanto a imagem está sendo gerada/baixada.
   Some via .is-image-ready (sucesso) ou .is-image-error (falha).
   Em caso de erro, o placeholder com logo dessaturado aparece no
   lugar — significa "não há imagem disponível". */
.detail-hero__image-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--detail-bg-soft);
    color: var(--detail-text-subtle);
    font-size: 1.6rem;
    transition: opacity .25s ease;
}
.detail-hero__image-button.is-image-ready .detail-hero__image-loader,
.detail-hero__image-button.is-image-error .detail-hero__image-loader {
    opacity: 0;
    pointer-events: none;
}
.detail-hero__image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .35s ease;
}
.detail-hero__image-button.is-image-ready .detail-hero__image { opacity: 1; }
/* Em caso de erro, esconde a img completamente e o placeholder volta */
.detail-hero__image-button.is-image-error .detail-hero__image {
    opacity: 0;
    visibility: hidden;
}
.detail-hero__image-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-2) var(--space-3);
    background: rgba(17, 24, 39, .72);
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .2s, transform .2s;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.detail-hero__image-button:hover .detail-hero__image-overlay,
.detail-hero__image-button:focus-visible .detail-hero__image-overlay {
    opacity: 1;
    transform: translateY(0);
}

.detail-hero__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.detail-hero__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.detail-hero__title {
    font-size: 1.65rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--detail-text-strong);
    margin: 0;
    word-break: break-word;
    letter-spacing: -.01em;
}
.detail-hero__subtitle {
    font-size: .85rem;
    color: var(--detail-text-muted);
    margin: 0;
}
.detail-hero__status {
    font-size: .85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.detail-hero__status--success { color: var(--detail-color-car); }
.detail-hero__status--info    { color: var(--detail-color-sigef); }
.detail-hero__status--warning { color: #b45309; }
.detail-hero__status--danger  { color: var(--detail-color-cafir); }
.detail-hero__status--neutral { color: var(--detail-text-muted); }
.detail-hero__status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Pill de identificação da fonte */
.detail-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--detail-bg-soft);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--detail-text-muted);
    line-height: 1.4;
    letter-spacing: .2px;
}
.detail-pill--car      { color: var(--detail-color-car);     background: rgba(46, 125, 50, .08); }
.detail-pill--incra    { color: var(--detail-color-incra);   background: rgba(230, 81, 0, .08); }
.detail-pill--sncr     { color: var(--detail-color-incra);   background: rgba(230, 81, 0, .08); }
.detail-pill--sigef    { color: var(--detail-color-sigef);   background: rgba(21, 101, 192, .08); }
.detail-pill--cib,
.detail-pill--cafir,
.detail-pill--nirf     { color: var(--detail-color-cafir);   background: rgba(198, 40, 40, .08); }
.detail-pill--embargo,
.detail-pill--embargos { color: var(--detail-color-embargo); background: rgba(183, 28, 28, .08); }
.detail-pill--ibama    { color: var(--detail-color-embargo); background: rgba(183, 28, 28, .08); }
.detail-pill--prodes   { color: var(--detail-color-prodes);  background: rgba(123, 31, 162, .08); }

/* Sub-pill: status complementar ao lado da pill principal (ex.: "Ativo",
   "Cancelado", "Desmatamento confirmado"). Estilo neutro com bolinha de cor
   semântica que comunica o estado sem competir com a pill da fonte. */
.detail-pill__sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--detail-bg-soft);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 500;
    color: var(--detail-text-muted);
    line-height: 1.4;
}
.detail-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--detail-text-subtle);
    flex-shrink: 0;
}
.detail-pill__dot--ok    { background: #16a34a; }
.detail-pill__dot--warn  { background: #d97706; }
.detail-pill__dot--alert { background: #dc2626; }

/* --------------------------------------------------------------------------
   STATS — Os 3 números mais importantes (área, módulos, condição). Estilo
   dashboard (Refactoring UI p. 31): cada um tem label pequena uppercase,
   valor grande e firme, e separador vertical sutil entre eles.
   -------------------------------------------------------------------------- */
.detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--detail-divider);
    margin: var(--space-3) 0 0;
}
.detail-stat {
    padding: 0 var(--space-5);
    border-right: 1px solid var(--detail-divider);
    min-width: 0;
}
.detail-stat:first-child { padding-left: 0; }
.detail-stat:last-child  { border-right: 0; padding-right: 0; }
.detail-stat__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--detail-text-subtle);
    font-weight: 500;
    margin: 0 0 6px;
}
.detail-stat__value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--detail-text-strong);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.detail-stat__value--md {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}
.detail-stat__unit {
    font-size: .9rem;
    color: var(--detail-text-muted);
    font-weight: 500;
    margin-left: 4px;
}
.detail-stat__hint {
    font-size: .78rem;
    color: var(--detail-text-muted);
    margin: 4px 0 0;
}

/* --------------------------------------------------------------------------
   META-INFO — informações secundárias (Número, Município, Cadastrante).
   Layout horizontal com labels minúsculas e valores discretos.
   -------------------------------------------------------------------------- */
.detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--detail-divider);
    margin: 0 0 var(--space-6);
}
.detail-meta__item {
    min-width: 0;
    padding: 0 var(--space-5);
    border-right: 1px solid var(--detail-divider);
}
.detail-meta__item:first-child { padding-left: 0; }
.detail-meta__item:last-child  { border-right: 0; padding-right: 0; }
/* Item de largura cheia no grid auto-fit — útil pra textos longos
   (descrição da localização do embargo, p.ex.) que não cabem numa coluna. */
.detail-meta__item--full { grid-column: 1 / -1; }
.detail-meta__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--detail-text-subtle);
    font-weight: 500;
    margin: 0 0 2px;
}
.detail-meta__value {
    font-size: .9rem;
    font-weight: 500;
    color: var(--detail-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}
.detail-meta__value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--detail-text-subtle);
}
.detail-meta__value a:hover { border-bottom-color: var(--detail-text); }
.detail-meta__value--mono {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: -.2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--detail-text-muted);
}

/* Copy button inline */
.detail-copy-btn {
    border: 0;
    background: transparent;
    color: var(--detail-text-subtle);
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s, color .12s;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.detail-copy-btn:hover { background: var(--detail-bg-soft); color: var(--detail-text); }
.detail-copy-btn.is-copied { color: var(--detail-color-car); }

/* --------------------------------------------------------------------------
   HEALTH SUMMARY — bloco central do hero, resposta direta à pergunta:
   "tem alguma coisa errada nesse imóvel?". Verdict explícito + 3 pills.
   -------------------------------------------------------------------------- */
.detail-health {
    /* Sem caixa cinza — fica direto na página branca, separado por spacing */
    margin: var(--space-3) 0 var(--space-2);
}
.detail-health__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-3);
}
.detail-health__verdict {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--detail-text);
    letter-spacing: 0;
}
.detail-health__verdict-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.detail-health--ok       .detail-health__verdict-dot { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .15); }
.detail-health--alert    .detail-health__verdict-dot { background: #d97706; box-shadow: 0 0 0 4px rgba(217, 119, 6, .15); }
.detail-health--critical .detail-health__verdict-dot { background: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .15); }
.detail-health__caption {
    /* removido visualmente — mantém só pra acessibilidade caso queira */
    display: none;
}
.detail-health__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, max-content);
    justify-content: start;
    gap: var(--space-2);
}
/* Pills de métrica — outline padrão (white bg, contorno escuro). Layout
   vertical (count em cima, label embaixo) e largura mínima padronizada
   pra que os 3 pills não estiquem ocupando toda a row. */
.detail-health-pill {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--detail-border-strong);
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    text-decoration: none;
    color: inherit;
}
.detail-health-pill:hover {
    background: var(--detail-bg-soft);
    border-color: var(--detail-text-strong);
    color: inherit;
}
.detail-health-pill__count {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: var(--detail-text-strong);
    letter-spacing: -.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.detail-health-pill__count::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.detail-health-pill--danger  .detail-health-pill__count::before { background: #dc2626; }
.detail-health-pill--warning .detail-health-pill__count::before { background: #d97706; }
.detail-health-pill--info    .detail-health-pill__count::before { background: #2563eb; }
.detail-health-pill--zero                                       { border-color: var(--detail-divider); }
.detail-health-pill--zero    .detail-health-pill__count          { color: var(--detail-text-subtle); }
.detail-health-pill--zero    .detail-health-pill__count::before  { background: var(--detail-text-subtle); opacity: .5; }
.detail-health-pill__label {
    font-size: .72rem;
    color: var(--detail-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   STATUS CLUSTER — substitui banners chamativos. Indicadores discretos.
   (legado — substituído por .detail-health no CAR; mantido pra outras pages)
   -------------------------------------------------------------------------- */
.detail-status-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}
.detail-status-cluster__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: transparent;
    color: var(--detail-text);
    font-size: .82rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
    border: 0;
}
.detail-status-cluster__item:hover {
    background: var(--detail-bg-soft);
    color: var(--detail-text-strong);
}
.detail-status-cluster__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.detail-status-cluster__dot--danger  { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.detail-status-cluster__dot--warning { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .12); }
.detail-status-cluster__dot--info    { background: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.detail-status-cluster__count {
    font-weight: 700;
    color: var(--detail-text-strong);
}
.detail-status-cluster__label {
    color: var(--detail-text-muted);
}

/* --------------------------------------------------------------------------
   CROSS-LINKS — vínculos do imóvel em outras fontes (INCRA, SIGEF, CAFIR).
   -------------------------------------------------------------------------- */
.detail-crosslinks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.detail-crosslinks__label {
    font-size: .8rem;
    color: var(--detail-text-muted);
    margin-right: var(--space-2);
    align-self: center;
}
.detail-crosslink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--detail-bg-soft);
    border-radius: var(--detail-radius-sm);
    font-size: .8rem;
    font-weight: 500;
    color: var(--detail-text);
    text-decoration: none;
    transition: background .15s;
}
.detail-crosslink:hover { background: #eef0f3; color: var(--detail-text-strong); }
.detail-crosslink__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.detail-crosslink__dot--incra { background: var(--detail-color-incra); }
.detail-crosslink__dot--sigef { background: var(--detail-color-sigef); }
.detail-crosslink__dot--cafir { background: var(--detail-color-cafir); }
.detail-crosslink__dot--car   { background: var(--detail-color-car); }

/* --------------------------------------------------------------------------
   SECTIONS — não são mais "cards brancos". São divisões da página por espaço.
   -------------------------------------------------------------------------- */
.detail-section {
    padding: var(--space-7) 0;
    border-top: 1px solid var(--detail-divider);
}
.detail-section--first { border-top: 0; padding-top: var(--space-5); }
.detail-section--last  { padding-bottom: var(--space-8); }
.detail-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.detail-section__title {
    font-size: .76rem;
    font-weight: 700;
    color: var(--detail-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
    letter-spacing: .8px;
}
.detail-section__title svg,
.detail-section__title i { color: var(--detail-text-subtle); font-size: .9em; }
.detail-section__h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--detail-text-strong);
    letter-spacing: -.012em;
    margin: 6px 0 0;
    line-height: 1.25;
}
.detail-section__subtitle {
    font-size: .88rem;
    color: var(--detail-text-muted);
    margin: 6px 0 0;
}
.detail-section__subtitle strong { color: var(--detail-text-strong); font-weight: 600; }
@media (min-width: 900px) {
    .detail-section__h2 { font-size: 1.55rem; }
}
.detail-section__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   SHARE — botão + popover com grid de ícones circulares
   -------------------------------------------------------------------------- */
.detail-share {
    position: relative;
    display: inline-block;
}
.detail-share__popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 280px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--detail-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.detail-share__popover[hidden] { display: none; }
.detail-share__title {
    margin: 0 0 10px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--detail-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.detail-share__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 6px;
}
.detail-share__chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: var(--detail-text);
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px;
    transition: background .12s;
    font-size: .68rem;
    font-weight: 500;
}
.detail-share__chip:hover {
    background: var(--detail-bg-soft);
    color: var(--detail-text-strong);
}
.detail-share__chip i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
}
.detail-share__chip--whatsapp i { background: #25D366; }
.detail-share__chip--telegram i { background: #229ED9; }
.detail-share__chip--facebook i { background: #1877F2; }
.detail-share__chip--twitter  i { background: #000; }
.detail-share__chip--linkedin i { background: #0A66C2; }
.detail-share__chip--email    i { background: #6b7280; }
.detail-share__chip--copy     i { background: var(--detail-text-strong); }
.detail-share__chip--print    i { background: var(--detail-text-strong); }
.detail-share__chip.is-copied i { background: var(--detail-color-car); }
.detail-share__chip.is-copied span { color: var(--detail-color-car); }

/* --------------------------------------------------------------------------
   ACTION BUTTONS — flat, fundo soft, sem borda
   -------------------------------------------------------------------------- */
.detail-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.detail-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--detail-border-strong);
    color: var(--detail-text);
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.detail-action-btn:hover {
    background: var(--detail-bg-soft);
    border-color: var(--detail-text-strong);
    color: var(--detail-text-strong);
}
.detail-action-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.detail-action-btn i { font-size: 15px; }
.detail-action-btn__label { display: none; }
.detail-action-btn.dropdown-toggle::after { display: none; }

/* Linha "Atualizado em DD/MM/YYYY" — discreta, com clock à esquerda. */
.detail-hero__updated {
    font-size: .78rem;
    font-weight: 400;
    color: var(--detail-text-subtle);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-2) 0 0;
}
.detail-hero__updated i { font-size: 12px; opacity: .8; }

/* Indicador de saúde da atualização ao lado da data — dot luminoso pequeno
   (mesma linguagem visual do verdict-dot do health summary, em miniatura)
   + texto pequeno colorido. Cor reflete idade do demonstrativo: verde
   (<30d), laranja (30-365d), vermelho (>1 ano). */
.detail-update-health {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid var(--detail-divider);
    cursor: help;
    font-weight: 500;
}
.detail-update-health__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--detail-text-subtle);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .04);
    transition: background .2s, box-shadow .2s;
}
.detail-update-health--ok       .detail-update-health__dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.detail-update-health--warning  .detail-update-health__dot { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .18); }
.detail-update-health--danger   .detail-update-health__dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }
.detail-update-health--ok       .detail-update-health__label { color: #16a34a; }
.detail-update-health--warning  .detail-update-health__label { color: #d97706; }
.detail-update-health--danger   .detail-update-health__label { color: #dc2626; }

/* Favorito — coração vazado por padrão; preenchido em vermelho quando salvo.
   Mesma lógica visual do .rc-save-btn da SERP v2. */
.detail-fav-btn.is-saved {
    color: #c62828;
    border-color: #c62828;
    background: #fff5f5;
}
.detail-fav-btn.is-saved svg {
    fill: currentColor;
}
.detail-fav-btn.is-saved:hover {
    background: #ffebee;
    border-color: #c62828;
    color: #c62828;
}

/* Monitorar ativo — preenchido azul (info). data-monitor="false" indica que
   o click DESATIVA, ou seja, estado atual = "está monitorando". */
.btnCarMonitorar[data-monitor="false"] {
    color: #2563eb;
    border-color: #2563eb;
    background: #eff6ff;
}
.btnCarMonitorar[data-monitor="false"] svg,
.btnCarMonitorar[data-monitor="false"] i { color: #2563eb; }
.btnCarMonitorar[data-monitor="false"]:hover {
    background: #dbeafe;
    border-color: #1d4ed8;
    color: #1d4ed8;
}
.btnCarMonitorar[data-monitor="false"]:hover svg,
.btnCarMonitorar[data-monitor="false"]:hover i { color: #1d4ed8; }
.detail-action-btn:disabled,
.detail-action-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
.detail-action-btn svg,
.detail-action-btn i { color: var(--detail-text-muted); }
.detail-action-btn.dropdown-toggle::after {
    margin-left: 4px;
    opacity: .6;
}

/* --------------------------------------------------------------------------
   DOCUMENTOS — items sobre fundo branco da página, com hover suave em soft
   -------------------------------------------------------------------------- */
.detail-doc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}
.detail-doc-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--detail-radius);
    background: var(--detail-bg-softer);
    transition: background .15s, transform .15s;
    cursor: pointer;
    border: 0;
}
.detail-doc-item:hover {
    background: var(--detail-bg-soft);
    transform: translateY(-1px);
}
.detail-doc-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: var(--detail-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--detail-text-muted);
}
.detail-doc-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.detail-doc-item__title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--detail-text-strong);
    margin: 0;
    line-height: 1.3;
}
.detail-doc-item__desc {
    font-size: .8rem;
    color: var(--detail-text-muted);
    margin: 0;
    line-height: 1.4;
}
.detail-doc-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 2px;
}
.detail-doc-item__price {
    font-size: .82rem;
    font-weight: 600;
    color: var(--detail-text);
}
.detail-doc-item__price--free { color: var(--detail-color-car); }
.detail-doc-item__cta {
    flex-shrink: 0;
    align-self: flex-start;
    color: var(--detail-text-subtle);
}

/* Featured doc card — destaque pro relatório principal (CTA monetização) */
.detail-doc-item--featured {
    grid-column: 1 / -1;
    background: var(--detail-bg-softer);
    border: 1px solid var(--detail-border);
    padding: var(--space-5);
}
.detail-doc-item--featured .detail-doc-item__icon {
    background: var(--detail-text-strong);
    color: #fff;
    width: 48px;
    height: 48px;
}
.detail-doc-item--featured .detail-doc-item__title {
    font-size: 1.05rem;
}
.detail-doc-item--featured .detail-doc-item__desc {
    font-size: .85rem;
}

/* Features list — checkmarks dentro de doc featured (mesmo padrão de relatorios.jinja) */
.detail-doc-item__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
    margin: 8px 0 4px;
}
@media (max-width: 600px) {
    .detail-doc-item__features { grid-template-columns: 1fr; }
}
.detail-doc-item__feature {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: .8rem;
    color: var(--detail-text);
}
.detail-doc-item__feature i {
    color: var(--detail-text-strong);
    margin-top: 3px;
    flex-shrink: 0;
    font-size: .65rem;
}

.detail-doc-item__free-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(46, 125, 50, .1);
    color: var(--detail-color-car);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: .72rem;
    font-weight: 700;
}
.detail-doc-item__newbadge {
    background: var(--detail-text-strong);
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 6px;
}

/* --------------------------------------------------------------------------
   TIMELINE — mobile-first: data acima, conteúdo full-width.
   Bolinha colorida no início indica tipo de evento.
   -------------------------------------------------------------------------- */
.detail-timeline {
    position: relative;
    padding-top: var(--space-3);
}
.detail-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 14px;
    bottom: 8px;
    width: 2px;
    background: var(--detail-divider);
}
.detail-timeline__item {
    position: relative;
    padding: 0 0 var(--space-6) var(--space-6);
}
.detail-timeline__item:last-child { padding-bottom: 0; }
.detail-timeline__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 2px solid var(--detail-text-muted);
    border-radius: 50%;
    z-index: 1;
}
.detail-timeline__item--first::before    { background: var(--detail-text-strong); border-color: var(--detail-text-strong); }
.detail-timeline__item--changed::before  { border-color: #d97706; background: #fff7ed; }
.detail-timeline__item--restriction::before { border-color: #dc2626; background: #fef2f2; }

.detail-timeline__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    color: var(--detail-text-muted);
    margin: 0 0 6px;
    flex-wrap: wrap;
}
.detail-timeline__date-chip {
    font-size: .66rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--detail-bg-soft);
    color: var(--detail-text-muted);
    letter-spacing: .3px;
    text-transform: none;
    font-weight: 600;
}
.detail-timeline__date-chip--changed     { background: #fff7ed; color: #b45309; }
.detail-timeline__date-chip--restriction { background: #fef2f2; color: #b91c1c; }

.detail-timeline__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--detail-text-strong);
    margin: 0 0 4px;
    letter-spacing: -.005em;
}
.detail-timeline__sub {
    font-size: .85rem;
    color: var(--detail-text-muted);
    margin: 0 0 10px;
}
.detail-timeline__summary {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .87rem;
    color: var(--detail-text);
}
.detail-timeline__summary li {
    padding: 2px 0;
    display: flex;
    gap: 8px;
}
.detail-timeline__summary li::before {
    content: "—";
    color: var(--detail-text-subtle);
    flex-shrink: 0;
}
.detail-timeline__changes {
    margin-top: 10px;
    border-radius: 10px;
    background: var(--detail-bg-softer);
    border: 1px solid var(--detail-divider);
    overflow: hidden;
}
.detail-timeline__change {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--detail-divider);
    font-size: .82rem;
}
.detail-timeline__change:last-child { border-bottom: 0; }
@media (min-width: 600px) {
    .detail-timeline__change {
        grid-template-columns: 140px 1fr;
        align-items: baseline;
        gap: 16px;
    }
}
.detail-timeline__change-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--detail-text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.detail-timeline__change-diff {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.detail-timeline__change-old {
    color: var(--detail-text-subtle);
    text-decoration: line-through;
    font-size: .85rem;
}
.detail-timeline__change-arrow {
    color: var(--detail-text-subtle);
    font-size: .8rem;
}
.detail-timeline__change-new {
    color: var(--detail-text-strong);
    font-weight: 600;
    font-size: .9rem;
}
.detail-timeline__change--main .detail-timeline__change-new { color: #b45309; }
.detail-timeline__collapsed-btn {
    margin-top: 12px;
    padding: 10px 14px;
    background: transparent;
    border: 1px dashed var(--detail-border);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--detail-text-muted);
    cursor: pointer;
}
.detail-timeline__collapsed-btn:hover {
    background: var(--detail-bg-soft);
    color: var(--detail-text-strong);
}
.detail-timeline__link {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--detail-text);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed var(--detail-text-subtle);
    padding-bottom: 1px;
}
.detail-timeline__link:hover {
    color: var(--detail-text-strong);
    border-bottom-color: var(--detail-text-strong);
}

/* --------------------------------------------------------------------------
   BREADCRUMB — só desktop (≥1024px). Dá contexto antes do subnav:
   Imóveis › Cadastro Ambiental Rural (CAR) › {Município–UF} › {ID truncado}
   -------------------------------------------------------------------------- */
.detail-breadcrumb {
    display: none;
    padding: 10px 0 22px;
    font-size: .82rem;
    color: var(--detail-text-muted);
}
@media (min-width: 1024px) {
    .detail-breadcrumb { display: block; }
}
.detail-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.detail-breadcrumb__list a {
    color: var(--detail-text-muted);
    text-decoration: none;
}
.detail-breadcrumb__list a:hover {
    color: var(--detail-text-strong);
    text-decoration: underline;
}
.detail-breadcrumb__sep {
    color: var(--detail-text-subtle);
    user-select: none;
}
.detail-breadcrumb__current {
    color: var(--detail-text);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .78rem;
}

/* --------------------------------------------------------------------------
   SUBNAV — sticky in-page navigation com scrollspy. Substitui tabs.
   Padrão: Stripe Dashboard / Linear / Apple product pages.
   Aparece quando passa do bloco hero+stats+meta. Linha sutil embaixo,
   itens com underline ativo. Em mobile vira faixa horizontal scrollável.
   -------------------------------------------------------------------------- */
.detail-subnav {
    position: sticky;
    /* Ancora abaixo do header compacto sticky (var setada em _header_compact.jinja).
       Fallback 0 cobre páginas com header não-sticky (landing). */
    top: var(--rr-compact-header-h, 0);
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--detail-divider);
    border-bottom: 1px solid var(--detail-divider);
    margin: var(--space-6) 0 0;
}
/* Quando o subnav é a primeira coisa da página (acima do hero), tira margin-top */
.detail-subnav--top {
    margin-top: 0;
    border-top: 0;
}
.detail-subnav__inner {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.detail-subnav__inner::-webkit-scrollbar { display: none; }
.detail-subnav__list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: max-content;
}
.detail-subnav__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--detail-text-muted);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: color .12s, border-color .12s;
    margin-bottom: -1px;
}
.detail-subnav__item:hover {
    color: var(--detail-text-strong);
}
.detail-subnav__item.is-active {
    color: var(--detail-text-strong);
    border-bottom-color: var(--detail-text-strong);
    font-weight: 600;
}
.detail-subnav__item i {
    color: var(--detail-text-subtle);
    font-size: .85em;
}
.detail-subnav__item.is-active i { color: var(--detail-text-strong); }
.detail-subnav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    background: var(--detail-bg-soft);
    color: var(--detail-text-muted);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}
/* Em desktop, o label sempre visível (inline) */
.detail-subnav__label {
    display: inline;
}
.detail-subnav__item.is-active .detail-subnav__count {
    background: var(--detail-text-strong);
    color: #fff;
}

/* Quando uma section é alvo do anchor, ajusta o offset do scroll por causa
   do sub-nav sticky no topo (~50px). */
.detail-section[id],
.detail-hero[id] {
    scroll-margin-top: 64px;
}

/* --------------------------------------------------------------------------
   TABS — underline, sem card wrapper (legado, ainda usado em outras páginas)
   -------------------------------------------------------------------------- */
.detail-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--detail-divider);
    margin-bottom: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;
}
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab {
    padding: 10px 16px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--detail-text-muted);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.detail-tab:hover { color: var(--detail-text-strong); }
.detail-tab.is-active {
    color: var(--detail-text-strong);
    border-bottom-color: var(--detail-text-strong);
    font-weight: 600;
}

/* Quando a Visão Geral inclui dados extras (.detail-overview-extra),
   a próxima section perde o border-top — ele criava uma "linha de fim"
   visualmente redundante depois da lista de titulares. Spacing
   continua via padding-top. */
.detail-overview-extra + .detail-section {
    border-top: 0;
    padding-top: var(--space-7);
}

/* --------------------------------------------------------------------------
   SUBSECTION — H3 dentro de uma section. Barra preta vertical à esquerda
   pra ancorar o olho.
   -------------------------------------------------------------------------- */
.detail-subsection {
    margin-top: var(--space-6);
}
.detail-subsection:first-child { margin-top: 0; }

.detail-subsection__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--detail-text-strong);
    margin: 0 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -.005em;
}
.detail-subsection__title::before {
    content: "";
    width: 3px;
    height: 14px;
    background: var(--detail-text-strong);
    border-radius: 2px;
    flex-shrink: 0;
}
.detail-subsection__title i {
    color: var(--detail-text-subtle);
    font-size: .9em;
}

/* --------------------------------------------------------------------------
   STATIC MAP — imagem do Google Static Maps com polígono do imóvel.
   Substituiu o Leaflet interativo no detail page (sem distrações de busca,
   pan/zoom — pra busca avançada, mandamos o usuário pra SERP v2).
   -------------------------------------------------------------------------- */
.detail-static-map {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--detail-divider);
}
.detail-static-map--clickable {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.detail-static-map--clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.detail-static-map--clickable:focus-visible {
    outline: 2px solid var(--detail-text-strong);
    outline-offset: 2px;
}
.detail-static-map img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--detail-bg-soft);
}
/* Frame com aspect-ratio fixo + skeleton shimmer enquanto carrega */
.detail-static-map__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 4;
    background: var(--detail-bg-soft);
    overflow: hidden;
}
.detail-static-map__skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--detail-text-subtle);
    font-size: .85rem;
    background: linear-gradient(110deg, #f4f5f7 30%, #ebedf1 50%, #f4f5f7 70%);
    background-size: 200% 100%;
    animation: detail-shimmer 1.6s infinite linear;
}
.detail-static-map__skeleton i { font-size: 1.4rem; opacity: .55; }
@keyframes detail-shimmer { to { background-position: -200% 0; } }
.detail-static-map__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s ease;
}
.detail-static-map__frame img.is-loaded { opacity: 1; }
.detail-static-map__frame.has-error img { display: none; }
.detail-static-map__frame.has-error .detail-static-map__skeleton {
    animation: none;
    background: var(--detail-bg-soft);
}
.detail-static-map__frame.has-error .detail-static-map__skeleton::after {
    content: '·';
    margin: 0 4px;
}
.detail-static-map__frame.has-error .detail-static-map__skeleton i {
    color: var(--detail-text-subtle);
}
.detail-static-map__caption {
    padding: var(--space-3) var(--space-4);
    background: var(--detail-bg-softer);
    font-size: .8rem;
    color: var(--detail-text-muted);
    border-top: 1px solid var(--detail-divider);
    display: flex;
    align-items: center;
    gap: 8px;
}
.detail-static-map__caption a {
    color: var(--detail-text);
    text-decoration: underline;
    text-decoration-color: var(--detail-text-subtle);
}
.detail-static-map__caption a:hover { color: var(--detail-text-strong); text-decoration-color: currentColor; }
.detail-static-map__locked {
    position: relative;
}
.detail-static-map__locked img {
    filter: blur(6px) opacity(.6);
    pointer-events: none;
}
.detail-static-map__lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-5);
    background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.85) 60%);
}

/* --------------------------------------------------------------------------
   GEOREF EMPTY STATE — quando o imóvel não tem parcelas SIGEF (sem georef).
   Caixa explicativa com CTA "Solicitar georreferenciamento".
   -------------------------------------------------------------------------- */
.detail-georef-empty {
    border: 1px dashed var(--detail-border);
    border-radius: 14px;
    padding: var(--space-7) var(--space-5);
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, var(--detail-bg-softer) 100%);
}
.detail-georef-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--detail-bg-soft);
    color: var(--detail-text-muted);
    font-size: 1.4rem;
    margin-bottom: var(--space-4);
}
.detail-georef-empty__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--detail-text-strong);
    margin: 0 0 var(--space-3);
}
.detail-georef-empty__desc {
    font-size: .9rem;
    color: var(--detail-text-muted);
    max-width: 480px;
    margin: 0 auto var(--space-3);
    line-height: 1.5;
}
.detail-georef-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    margin: var(--space-4) 0 var(--space-2);
    background: var(--detail-text-strong);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s;
}
.detail-georef-empty__cta:hover { background: #000; color: #fff; }
.detail-georef-empty__cta:disabled { opacity: .6; cursor: not-allowed; }
.detail-georef-empty__cta.is-done { background: var(--detail-color-car); }
.detail-georef-empty__sub {
    font-size: .78rem;
    color: var(--detail-text-subtle);
    margin: 0;
}

/* --------------------------------------------------------------------------
   LOCK OVERLAY — usado pra estados gated (sobreposições, histórico, etc).
   Caixa centralizada com ícone preto + verdict + sub + CTA. Mais limpo
   que o blur do fundo.
   -------------------------------------------------------------------------- */
.detail-lock-overlay {
    position: relative;
    margin-top: var(--space-4);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, var(--detail-bg-softer) 100%);
    border: 1px dashed var(--detail-border);
    padding: 36px 24px;
    text-align: center;
}
.detail-lock-overlay__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--detail-text-strong);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.detail-lock-overlay__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--detail-text-strong);
}
.detail-lock-overlay__sub {
    font-size: .85rem;
    color: var(--detail-text-muted);
    margin: 0 auto 16px;
    max-width: 420px;
}
.detail-lock-overlay__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--detail-text-strong);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: .88rem;
    border: 0;
    cursor: pointer;
}
.detail-lock-overlay__cta:hover { background: #000; color: #fff; }
.detail-lock-overlay__alt {
    display: block;
    margin-top: 8px;
    font-size: .78rem;
    color: var(--detail-text-muted);
    text-decoration: none;
}
.detail-lock-overlay__alt:hover { color: var(--detail-text-strong); }

/* --------------------------------------------------------------------------
   COBERTURA-BAR — barra horizontal honesta da partição RVN/UsoCons/Outros.
   Usa apenas valores mutuamente exclusivos. Não soma APP (que sobrepõe RVN).
   -------------------------------------------------------------------------- */
.detail-cobertura {
    background: var(--detail-bg-softer);
    border: 1px solid var(--detail-divider);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: var(--space-5);
}
.detail-cobertura__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.detail-cobertura__title {
    font-size: .92rem;
    font-weight: 700;
    margin: 0;
    color: var(--detail-text-strong);
}
.detail-cobertura__total {
    font-size: .82rem;
    color: var(--detail-text-muted);
}
.detail-cobertura__total b { color: var(--detail-text-strong); font-weight: 700; }
.detail-cobertura__bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--detail-bg-soft);
    margin-bottom: 14px;
}
.detail-cobertura__seg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: -.01em;
    min-width: 0;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
}
.detail-cobertura__seg--rvn   { background: #2e7d32; }
.detail-cobertura__seg--uso   { background: #d97706; }
.detail-cobertura__seg--other { background: #9ca3af; }
.detail-cobertura__legend {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 600px) { .detail-cobertura__legend { grid-template-columns: repeat(3, 1fr); } }
.detail-cobertura__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--detail-text);
}
.detail-cobertura__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.detail-cobertura__legend-dot--rvn   { background: #2e7d32; }
.detail-cobertura__legend-dot--uso   { background: #d97706; }
.detail-cobertura__legend-dot--other { background: #9ca3af; }
.detail-cobertura__legend-name { color: var(--detail-text); }
.detail-cobertura__legend-val  { color: var(--detail-text-subtle); margin-left: 4px; }
.detail-cobertura__legend-val b { color: var(--detail-text-strong); font-weight: 700; }
.detail-cobertura__note {
    font-size: .75rem;
    color: var(--detail-text-subtle);
    margin: 12px 0 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Sub-cards (ex: SNCR linkado em CAFIR, Parcelas em INCRA)
   -------------------------------------------------------------------------- */
.detail-subcard {
    border-radius: var(--detail-radius-sm);
    padding: var(--space-3) var(--space-4);
    background: var(--detail-bg-soft);
}
.detail-subcard__title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--detail-text-strong);
    margin: 0 0 var(--space-2);
}
/* Texto longo dentro de subcard (descrição da infração de embargo, etc.). */
.detail-subcard__paragraph {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--detail-text);
    margin: 0;
    white-space: pre-line;
}

/* Cards de sobreposição — exibem cada CAR/parcela cruzado com a entidade
   atual (embargo, etc.) com métricas de % e área, identificação visual da
   fonte (border-left colorido espelhando a paleta do mapa) e dois CTAs:
   abrir o detalhe e analisar a sobreposição. */
.detail-overlap-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.detail-overlap-card {
    background: #fff;
    border: 1px solid var(--detail-divider);
    border-left: 4px solid var(--detail-divider);
    border-radius: var(--detail-radius-sm);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.detail-overlap-card:hover {
    box-shadow: 0 2px 8px rgba(17, 24, 39, .04);
}
.detail-overlap-card--car      { border-left-color: var(--detail-color-car); }
.detail-overlap-card--incra    { border-left-color: var(--detail-color-incra); }
.detail-overlap-card--sigef    { border-left-color: var(--detail-color-sigef); }
.detail-overlap-card--cib      { border-left-color: var(--detail-color-cafir); }
.detail-overlap-card--embargos { border-left-color: var(--detail-color-embargo); }

.detail-overlap-card__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.detail-overlap-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--detail-text-strong);
    line-height: 1.35;
}
.detail-overlap-card__type {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--detail-text-subtle);
    font-weight: 500;
}

.detail-overlap-card__stats {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}
.detail-overlap-card__stats > div {
    min-width: 0;
}
.detail-overlap-card__stats dt {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--detail-text-subtle);
    font-weight: 500;
    margin: 0 0 2px;
}
.detail-overlap-card__stats dd {
    margin: 0;
    font-size: .9rem;
    font-weight: 500;
    color: var(--detail-text);
}
.detail-overlap-card__stats-strong dd strong {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--detail-text-strong);
}
.detail-overlap-card__stats-sub {
    margin-left: 6px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--detail-text-muted);
}

.detail-overlap-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-top: 1px solid var(--detail-divider);
    padding-top: var(--space-3);
}

/* Variante CTA — botão completo (ícone + label visível) com forma de
   pílula. Usado nos cards de sobreposição onde os botões circulares
   (ícone-só) ficavam ambíguos: "Analisar sobreposição" é uma feature
   complexa que precisa do label pra contexto. */
.detail-action-btn--cta {
    width: auto;
    height: auto;
    padding: 9px 16px;
    border-radius: 8px;
    gap: 8px;
}
.detail-action-btn--cta .detail-action-btn__label {
    display: inline;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Variante "primary" do action-btn — usado pra "Analisar sobreposição",
   ação mais valiosa do card. Mantém compatibilidade com o action-btn padrão. */
.detail-action-btn--primary {
    background: var(--detail-text-strong, #111827);
    color: #fff;
    border-color: var(--detail-text-strong, #111827);
}
.detail-action-btn--primary:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}
.detail-action-btn--primary svg { color: #fff; }

@media (max-width: 575.98px) {
    .detail-overlap-card__actions { flex-direction: column; }
    .detail-overlap-card__actions .detail-action-btn { justify-content: center; }
}

/* Mensagem quando todas as sobreposições caíram em "marginais" — evita
   sub-bloco vazio e dá contexto pro user que existem cruzamentos pequenos. */
.detail-overlap-empty {
    margin: 0 0 var(--space-3);
    font-size: .9rem;
    color: var(--detail-text-muted);
    font-style: italic;
}

/* Toggle pra expandir sobreposições < 1% (marginais — geralmente vértices
   laterais que não significam interseção real). Estilo discreto pra que o
   bloco principal continue dominante. */
.detail-overlap-collapse {
    margin-top: var(--space-3);
}
.detail-overlap-collapse__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--detail-divider);
    border-radius: 999px;
    color: var(--detail-text-muted);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.detail-overlap-collapse__toggle:hover {
    border-color: var(--detail-text-subtle);
    color: var(--detail-text);
}
.detail-overlap-collapse__toggle i {
    transition: transform .2s ease;
}
.detail-overlap-collapse__toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}
.detail-overlap-collapse > .detail-overlap-cards {
    margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   Mobile responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Página inteira: previne scroll horizontal acidental por filhos overflowantes */
    html, body { overflow-x: hidden; max-width: 100vw; }
    .detail-canvas {
        padding: 0 var(--space-4);
        overflow-x: hidden;
    }

    /* Hero mobile: ordem flex (body primeiro, galeria full-bleed depois das ações).
       Galeria ocupa toda a largura da viewport ignorando o padding do canvas. */
    .detail-hero {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        padding: var(--space-5) 0 var(--space-3);
    }
    .detail-hero__body {
        order: 1;
        gap: var(--space-3);
    }
    .detail-hero__image-wrap {
        order: 2;
        display: block;
        width: calc(100% + 2 * var(--space-4));
        max-width: none;
        height: auto;
        aspect-ratio: 1600 / 1100;
        margin: 0 calc(-1 * var(--space-4));
    }
    .detail-hero__image-button {
        border-radius: 0;
    }
    .detail-hero__title { font-size: 1.25rem; line-height: 1.25; }
    .detail-hero__top { gap: var(--space-2); flex-wrap: wrap; }

    .detail-stats {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-4) 0;
        margin-bottom: var(--space-5);
    }
    .detail-stat {
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--detail-divider);
        padding-bottom: var(--space-3);
    }
    .detail-stat:last-child { border-bottom: 0; padding-bottom: 0; }
    .detail-stat__value { font-size: 1.4rem; }

    .detail-meta {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-4) 0;
    }
    /* Empilhado em mobile: troca dividers verticais por horizontais */
    .detail-meta__item {
        padding: 0 0 var(--space-3);
        border-right: 0;
        border-bottom: 1px solid var(--detail-divider);
    }
    .detail-meta__item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .detail-section { padding: var(--space-5) 0; }
    .detail-section__header { gap: var(--space-2); margin-bottom: var(--space-3); }
    .detail-doc-list { grid-template-columns: 1fr; }

    .detail-section[id],
    .detail-hero[id] {
        scroll-margin-top: 16px;  /* sem sticky no topo no mobile */
    }
    .detail-section__h2 { font-size: 1.2rem; }

    /* Verdict do Health menor no mobile (não compete com o título) */
    .detail-health__verdict { font-size: .82rem; font-weight: 500; }

    /* Health summary mobile: mesma estrutura do desktop (column-reverse),
       só o tamanho do count menor pra caber em telas pequenas. */
    .detail-health__grid {
        gap: 6px;
        grid-auto-columns: minmax(110px, max-content);
    }
    .detail-health-pill { padding: 8px 10px; }
    .detail-health-pill__count { font-size: 1.15rem; }
    .detail-health-pill__label {
        font-size: .62rem;
        letter-spacing: .3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .detail-actions-row { gap: 8px; }
    .detail-action-btn {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
    }
    /* Popover do share ancorado no botão (que está mais à direita da action row).
       max-width pra caber em qualquer viewport. */
    .detail-share__popover {
        right: 0;
        left: auto;
        min-width: min(320px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
    }

    /* Cobertura bar: legend stacked clean */
    .detail-cobertura { padding: 14px; }
    .detail-cobertura__legend { gap: 6px; }
}

/* ============================================================
   BOTTOM NAV (mobile + tablet) — estilo app/tab-bar.
   Substitui o subnav sticky do topo até 1023.98px (cobre iPad
   portrait + maior parte dos tablets). Items quadrados (ícone
   em cima, label embaixo), fixed no rodapé, com safe-area iOS.
   ============================================================ */
@media (max-width: 1023.98px) {
    .detail-subnav--top {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--detail-border);
        border-bottom: 0;
        box-shadow: 0 -2px 20px rgba(0, 0, 0, .04);
    }
    .detail-subnav--top .detail-subnav__inner {
        padding: 0 4px;
        overflow-x: visible;
        max-width: 720px;
        margin: 0 auto;
    }
    .detail-subnav--top .detail-subnav__list {
        width: 100%;
        display: flex;
        justify-content: space-around;
        min-width: 0;
    }
    .detail-subnav--top .detail-subnav__list li {
        flex: 1 1 0;
        min-width: 0;
    }
    .detail-subnav--top .detail-subnav__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        padding: 12px 2px 8px;
        margin: 0;
        font-size: .62rem;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        border-bottom: 0;
        border-top: 2px solid transparent;
        margin-bottom: 0;
        white-space: normal;
        color: var(--detail-text-subtle);
        width: 100%;
        min-height: 56px;
    }
    .detail-subnav--top .detail-subnav__item i {
        font-size: 1.15rem;
        color: inherit;
        height: 18px;
        line-height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Label oculta nos items inativos (Material 3 "showSelected") — só
       o ativo mostra texto. Resolve overlap horizontal e mantém ícones
       alinhados verticalmente. */
    .detail-subnav--top .detail-subnav__label {
        display: none;
        font-size: .6rem;
        font-weight: 600;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .detail-subnav--top .detail-subnav__item.is-active .detail-subnav__label {
        display: block;
    }
    .detail-subnav--top .detail-subnav__item:hover {
        color: var(--detail-text);
    }
    .detail-subnav--top .detail-subnav__item.is-active {
        color: var(--detail-text-strong);
        border-top-color: var(--detail-text-strong);
        font-weight: 700;
    }
    .detail-subnav--top .detail-subnav__item.is-active i {
        color: var(--detail-text-strong);
    }
    /* Badge de contagem pequena no canto superior direito do ícone */
    .detail-subnav--top .detail-subnav__count {
        position: absolute;
        top: 4px;
        left: 50%;
        margin-left: 2px;
        min-width: 14px;
        height: 14px;
        padding: 0 4px;
        font-size: .58rem;
        font-weight: 700;
        background: #dc2626;
        color: #fff;
        line-height: 1;
    }
    .detail-subnav--top .detail-subnav__item.is-active .detail-subnav__count {
        background: #dc2626;
        color: #fff;
    }
    /* Em tablet, layout interno respira mais (font/padding maior) */
    @media (min-width: 768px) {
        .detail-subnav--top .detail-subnav__item {
            font-size: .72rem;
            padding: 10px 6px 8px;
            gap: 4px;
        }
        .detail-subnav--top .detail-subnav__item i {
            font-size: 1.25rem;
        }
    }
    /* Empurra o conteúdo pra cima do bottom nav (~ 60px + safe-area).
       Só aplica em páginas que tem o bottom nav. */
    body:has(.detail-subnav--top) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}