/* ============================================================================
   Laudo de Inteligência Imobiliária — CSS próprio da página (Views/Laudo/Index).
   Carregado direto na view (Layout = null), depois do bundle ~/bundles/novoLayout,
   para poder usar as CSS variables do design system (_variables.css).
   ============================================================================ */

body.laudo-page {
    background-color: var(--color-neutral-tinted, #f3f4f6);
}

/* ---------------- Documento ---------------- */
.laudo-doc {
    max-width: 960px;
    margin: 0 auto;
    padding: 65px 16px 48px;
}

.laudo-title {
    border-left: 4px solid var(--color-secondary-pure, #163867);
    padding-left: 20px;
}

/* Numeração das seções (círculo) */
.laudo-num {
    width: 24px;
    height: 24px;
}

/* ---------------- Header / Footer ---------------- */
.laudo-logo-anunciante {
    height: 40px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}

.laudo-footer-fonte {
    max-width: 520px;
}

.laudo-footer-ref {
    letter-spacing: 0.9px;
}

/* ---------------- Resumo executivo ---------------- */
.laudo-resumo-box {
    border-radius: 8px;
    border: 1px solid var(--color-accent-pale, #B3DCFF);
    background: rgba(230, 243, 255, 0.34);
}

.laudo-resumo-icon {
    background: rgba(179, 220, 255, 0.47);
    padding: 8px;
}

    .laudo-resumo-icon i {
        font-size: 25px;
    }

/* ---------------- Indicadores de demanda ---------------- */
.laudo-indicadores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

    .laudo-indicadores .indicator {
        padding: .8rem .8rem !important;
    }

        .laudo-indicadores .indicator .headline-medium {
            font-weight: 800;
        }

/* ---------------- Galeria "Sobre o imóvel" ---------------- */
.l-galeria-principal {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.l-galeria-sec {
    width: 100%;
    height: 130px;
    object-fit: cover;
}

.l-foto-placeholder {
    background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
    border-radius: 8px;
}

/* ---------------- Boxes (análise comparativa) ---------------- */
.laudo-box {
    flex-basis: 45%;
}

.laudo-box-accent {
    background-color: var(--color-accent-tinted);
    border: 1px solid var(--color-accent-pale);
}

/* ---------------- Matriz de fatores ---------------- */
.laudo-col-fator {
    width: 25%;
}

.laudo-col-aval {
    width: 120px;
}

/* ---------------- Síntese (bullets) ---------------- */
.laudo-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-secondary-pure);
}

    .laudo-bullet.laudo-bullet-warning {
        background-color: var(--color-warning-deep);
    }

    .laudo-bullet.laudo-bullet-accent {
        background-color: var(--color-accent-deep);
    }

/* ---------------- Aviso legal ---------------- */
.laudo-aviso {
    line-height: 1.7;
}

/* ---------------- Chips / tags ---------------- */
.chip-secondary {
    background-color: var(--color-secondary-tinted);
    color: var(--color-secondary-pure);
}

.chip-grey {
    background-color: #F0F2F6;
    color: #4B5563;
}

.chip-success {
    background-color: var(--color-success-tinted);
    color: #0a7a33;
}

.chip-warning {
    background-color: var(--color-warning-tinted);
    color: var(--color-warning-deep);
}

    .chip-warning.chip-outlined {
        background-color: transparent;
        border: 1px solid var(--color-warning-pure);
        color: var(--color-warning-deep);
    }

.bg-warning {
    border: var(--border-width-hairline, 1px) solid var(--color-warning-pure, #FF8A00);
    background-color: #FFECD9 !important;
    color: var(--color-warning-deep);
}

/* Classes devolvidas pelo backend em DiferencaDaMediaTagClasse.
   Estrutura/tipografia compartilhada; cada variante só define seu trio de cores. */
.tag-laranja,
.tag-verde,
.tag-cinza {
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.tag-laranja {
    border-color: #FF8A00;
    background-color: #FFECD9;
    color: var(--color-warning-deep);
}

.tag-verde {
    border-color: #0a7a33;
    background-color: var(--color-success-tinted);
    color: #0a7a33;
}

.tag-cinza {
    border-color: #d1d5db;
    background-color: #f3f4f6;
    color: #374151;
}

/* ---------------- Botões flutuantes ---------------- */
.l-btn-flutuantes {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.analise-buttons-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0px -5px 8px rgba(0, 0, 0, 0.08);
    width: 100%;
    z-index: 10;
}
/* ---------------- Tema do popover do Driver.js ----------------
   Botões do rodapé precisam de specificity maior: o driver.css faz
   `.driver-popover-footer button { all: unset }` e vence as .btn. Reusamos as
   custom properties --_color-* definidas por .btn-accent/.btn-outlined. */
.driver-popover.laudo-popover {
    background-color: var(--color-essence-ivory, #ffffff);
    border: var(--border-width-hairline, 1px) solid var(--color-neutral-pale, #e5e5e5);
    border-radius: var(--border-radius-nano, 8px);
    box-shadow: 0 5px 32px rgb(15 23 42 / 46%);
    padding: 12px;
    max-width: 360px;
}

/* Espaçamento entre os botões de navegação (Anterior / Próximo). */
.driver-popover.laudo-popover .driver-popover-navigation-btns {
    gap: 8px;
}

/* Base (anula o all:unset do driver) — .btn + .btn-sm. */
.driver-popover.laudo-popover .driver-popover-footer button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--margin-nano, 8px);
    padding: var(--padding-quark, 4px) var(--padding-nano, 8px);
    font-family: inherit;
    font-size: var(--font-size-xxs, 14px);
    line-height: var(--line-height-xs, 16px);
    font-weight: 700;
    text-shadow: none;
    border-radius: var(--border-radius-nano, 8px);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

/* Filled — Próximo / Fechar. */
.driver-popover.laudo-popover .driver-popover-footer button.btn-accent {
    background-color: var(--_color-bg, #163867);
    color: var(--_color-text, #fff);
    border: 1px solid transparent;
}

    .driver-popover.laudo-popover .driver-popover-footer button.btn-accent:hover {
        background-color: var(--_color-bg-hover, #0d2241);
        color: var(--_color-text, #fff);
    }

/* Outlined — Anterior (vem depois do filled p/ vencer). */
.driver-popover.laudo-popover .driver-popover-footer button.btn-outlined {
    background-color: var(--color-essence-ivory, #fff);
    color: var(--_color-bg, #163867);
    border: 1px solid var(--_color-border, #163867);
}

    .driver-popover.laudo-popover .driver-popover-footer button.btn-outlined:hover {
        background-color: var(--_color-pale, #b3c3da);
        color: var(--_color-bg-active, #050b17);
        border-color: var(--_color-border-hover, #09162e);
    }

/* Botão de fechar (×) neutro. */
.driver-popover.laudo-popover .driver-popover-close-btn {
    color: var(--color-neutral-darker, #43474e);
    background-color: transparent;
    text-shadow: none;
}

.driver-popover-footer {
    padding: 10px 5px 0;
}
/* ---------------- Faixa de preview ---------------- */
.l-preview-banner {
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    color: #78350f;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15);
}

    .l-preview-banner .l-preview-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 50%;
        background-color: #f59e0b;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .l-preview-banner strong {
        color: #78350f;
        font-weight: 800;
    }

    .l-preview-banner .l-preview-tag {
        display: inline-block;
        background-color: #f59e0b;
        color: #ffffff;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 999px;
        margin-right: 8px;
        vertical-align: middle;
    }

/* ============================================================================
   Página "Análise Completa" (Views/AnaliseCompleta/Index) — compartilha este
   arquivo. Usa _NovoLayout, então sobrescreve .main-render (header fixo).
   ============================================================================ */
.main-render {
    padding-top: 73px;
}

.ac-container {
    max-width: 1230px;
}

.ac-hero-title {
    max-width: 820px;
    line-height: 1.2;
}

.ac-hero-text {
    max-width: 760px;
}

.ac-card-intro {
    padding-left: 50px !important;
}

/* Ícones-bolha da lista "o que você vai descobrir". */
.ac-feature-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
}

    .ac-feature-icon i {
        font-size: 20px;
    }

/* Coluna da imagem de prévia + selos flutuantes. */
.ac-preview-img-wrap {
    height: 988px;
}

    .ac-preview-img-wrap img {
        max-width: 100%;
    }

.ac-badge {
    position: absolute;
    max-width: 100%;
    padding: 18px 30px 18px 20px;
}

.ac-badge-top-right {
    top: -19px;
    right: -38px;
}

.ac-badge-bottom-left {
    bottom: -19px;
    left: -38px;
}

.ac-badge-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
}

    .ac-badge-icon i {
        font-size: 20px;
    }

/* ---------------- Responsivo ---------------- */
@media (max-width: 768px) {
    .laudo-indicadores {
        grid-template-columns: 1fr 1fr;
    }

    .l-btn-tour,
    .l-pdf-btn {
        font-size: 13px;
    }
    /* Análise Completa */
    .main-render {
        padding-top: 67px;
    }

    .display-large {
        font-size: 28px;
        text-align: start;
    }

    .display-medium {
        font-size: 30px;
        margin-bottom: 5px !important;
        line-height: 1.2;
    }

    .display-small {
        font-size: 22px;
        line-height: 1.4;
    }

    .body-large {
        font-size: 14px;
        line-height: 1.4;
    }

    .display-large br {
        display: none;
    }

    .ac-card-intro {
        padding-left: 24px !important;
    }

    .btn-xlg {
        padding: 10px 20px !important;
        font-size: 14px;
    }

    /* Imagem de prévia: sem altura fixa no mobile. */
    .ac-preview-img-wrap {
        height: 380px !important;
        overflow: hidden;
        padding: 0 !important;
        box-shadow: var(--shadow-level-3);
        margin: 26px 34px;
        border: 1px solid #ddd;
        border-radius: 10px;
    }

        .ac-preview-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    /* Selos flutuantes são decorativos (aria-hidden): escondidos no mobile
       para não estourar a largura com os offsets negativos. */
    .ac-badge {
        padding: 13px 18px 11px 16px;
    }
    .ac-badge-top-right {
        top: -19px;
        right: 0;
    }

    .ac-badge-bottom-left {
        bottom: -19px;
        left: 0;
    }
}

/* ---------------- Print ---------------- */
@media print {
    body {
        background-color: #ffffff;
    }

    .laudo-doc {
        padding: 0;
        max-width: none;
    }

    .l-pdf-btn,
    .l-btn-tour {
        display: none !important;
    }

    .box-shadow-3,
    .bg-shadow {
        box-shadow: none !important;
    }

    section {
        page-break-inside: avoid;
    }
}