/* =============================================================================
   AlugaDesk — o nosso CSS sobre o LuxEstate
   =============================================================================
   Carrega DEPOIS do `luxestate/css/main.css` e tem só o que o template não traz:
   os blocos que existem porque o produto existe (cartão de imóvel da vitrine,
   ficha da cobrança, portal do inquilino, tabela de planos).

   ⚠️ **Ajuste de cor da marca é a variável `--accent-color` do `main.css`**, não
   uma regra nova aqui. O template a usa em botão, link, ícone e destaque; sobre-
   escrever cada um deles daria uma marca que muda pela metade no dia em que
   alguém trocar o azul.

   ⚠️ **Nada de `!important` neste arquivo.** Ele já carrega depois do template,
   então a cascata resolve. Um `!important` aqui é a forma mais rápida de tornar
   a próxima atualização do LuxEstate impossível de aplicar.

   Ordem das seções: primeiro o que é comum a todas as telas, depois o que é de
   uma tela só.
   ========================================================================== */

/* ----- Comum ------------------------------------------------------------- */

/* O template não estiliza o `<main>` das páginas sem hero; sem isto o conteúdo
   encosta na barra fixa do topo. */
.pagina-precos .main,
.pagina-cadastro .main,
.pagina-entrar .main,
.pagina-suporte .main {
    padding-top: 40px;
}

/* Caixa de conteúdo — o equivalente ao "card" do painel, para o site público. */
.caixa {
    background: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    border-radius: 12px;
    padding: 28px;
}

/* Estado vazio. Aparece mais do que se imagina: imobiliária nova não tem imóvel
   publicado, e a vitrine dela é a primeira coisa que o dono abre. Uma lista
   vazia sem explicação parece defeito do sistema. */
.vazio {
    text-align: center;
    padding: 48px 24px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.vazio i {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
    color: color-mix(in srgb, var(--accent-color), transparent 55%);
}

/* Preço riscado — usado no card do isento, que vê o valor de tabela e o que de
   fato paga. */
.preco-antigo {
    text-decoration: line-through;
    opacity: .6;
    font-weight: 400;
    margin-right: 6px;
}

/* O template só estiliza alguns tipos de input; alinha os que faltam para os
   formulários não saírem com duas alturas diferentes na mesma linha. */
.caixa input[type="date"],
.caixa input[type="number"],
.caixa select,
.caixa textarea {
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    border-radius: 6px;
    padding: 10px 12px;
    width: 100%;
    font-family: var(--default-font);
}

/* ----- Cartão de imóvel (a vitrine) -------------------------------------- */

.imovel-card {
    background: var(--surface-color);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 18px color-mix(in srgb, var(--heading-color), transparent 94%);
    transition: transform .2s ease, box-shadow .2s ease;
}

.imovel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--heading-color), transparent 88%);
}

/* Proporção fixa na foto: os imóveis vêm com fotos de tamanhos diferentes, e
   sem isto cada card do grid tem uma altura, o que desalinha a linha inteira. */
.imovel-card .foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: color-mix(in srgb, var(--default-color), transparent 92%);
    overflow: hidden;
}

.imovel-card .foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Selo de situação sobre a foto. `reservado` existe para o imóvel que já tem
   proposta mas ainda não tem contrato — mostrá-lo como disponível gera visita
   para quem vai ouvir "esse já saiu". */
.imovel-card .selo {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--accent-color);
    color: var(--contrast-color);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 4px 10px;
    border-radius: 4px;
}

.imovel-card .selo.reservado { background: #b8860b; }
.imovel-card .selo.alugado   { background: #6b7280; }

.imovel-card .corpo {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.imovel-card .codigo {
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.imovel-card h3 {
    font-size: 18px;
    margin: 4px 0 6px;
}

.imovel-card .endereco {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 25%);
    margin-bottom: 14px;
}

/* Os atributos (quartos, banheiros, vagas, área) numa linha só, com ícone. */
.imovel-card .atributos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 14px;
    padding-top: 14px;
    margin-top: auto;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.imovel-card .atributos span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.imovel-card .atributos i {
    color: var(--accent-color);
}

/* O valor. O condomínio vem embaixo e menor porque a decisão de quem procura é
   pelo total, mas o número que ele compara entre anúncios é o aluguel. */
.imovel-card .valor {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--heading-color);
    margin-top: 14px;
}

.imovel-card .valor small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: color-mix(in srgb, var(--default-color), transparent 35%);
}

/* ----- Filtro da vitrine ------------------------------------------------- */

.filtro-imoveis {
    background: var(--surface-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 18px color-mix(in srgb, var(--heading-color), transparent 94%);
}

.filtro-imoveis label {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 4px;
    display: block;
}

/* ----- Portal do inquilino ----------------------------------------------- */

/* A situação da cobrança é a informação que a pessoa abre o link para ver, então
   ela é uma etiqueta com cor e não uma palavra no meio da linha. */
.situacao {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.situacao.pendente  { background: #fff4d6; color: #8a6100; }
.situacao.vencida   { background: #fde2e1; color: #a02420; }
.situacao.paga      { background: #dff3e6; color: #1a6d41; }
.situacao.cancelada { background: #eceff2; color: #5b6470; }
.situacao.estornada { background: #ece4f7; color: #5b3b8c; }

/* O copia-e-cola do PIX. `word-break` porque o payload é uma linha de ~300
   caracteres sem espaço: sem isto ele estoura a caixa no celular. */
.pix-copia {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-all;
    background: color-mix(in srgb, var(--default-color), transparent 95%);
    border-radius: 8px;
    padding: 12px;
    max-height: 120px;
    overflow-y: auto;
}

/* ----- Impressão --------------------------------------------------------- */

/* O inquilino imprime o boleto e o recibo; o proprietário imprime o extrato do
   repasse para o contador. Menu, rodapé e botões não fazem sentido no papel — e
   ocupam a primeira página inteira se ninguém os esconder. */
@media print {
    #header,
    #footer,
    .scroll-top,
    .nao-imprimir {
        display: none;
    }

    body {
        background: #fff;
    }

    .caixa {
        border: none;
        padding: 0;
    }

    a[href]::after {
        content: "";
    }
}