/* =====================================================================
   LocaMais — camada de vidro (glassmorphism leve)

   Ideia: o fundo é uma "paisagem" de luz (mar azul-petróleo + luz âmbar
   de fim de tarde) e as telas ficam por cima como vidro fosco.

   Regras para não pesar:
   - o desfoque (blur) só é usado onde ALGO passa por baixo do vidro:
     barra do topo, menu lateral no celular, menus suspensos, diálogos e
     barras fixas. Os cartões ficam sobre o fundo liso, então ali basta a
     transparência + o brilho na borda (mais leve para o celular);
   - texto sempre sobre vidro bem claro (ou bem escuro no tema escuro),
     para continuar fácil de ler;
   - quem pede menos transparência no sistema (acessibilidade) recebe
     superfícies sólidas.

   Os seletores começam com :root para valer mais que o estilo próprio
   de cada página (que é carregado depois deste arquivo).
   ===================================================================== */

:root {
    --fundo-base: #E4EBF2;
    --cor-solida: #FFFFFF;                          /* listas de opções dos <select> */

    --cor-superficie: rgba(255, 255, 255, 0.60);     /* campos, botões e cartões */
    --cor-fundo: rgba(31, 59, 87, 0.055);           /* "poços" dentro do vidro */
    --cor-borda: rgba(31, 59, 87, 0.13);
    /* texto suave e dourado um tom mais escuros: sobre o vidro (que deixa passar a luz
       âmbar do fundo) mantêm contraste acima de 4,5:1 */
    --cor-texto-suave: #52616F;
    --cor-destaque-texto: #84590F;

    --vidro-fundo: linear-gradient(150deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.40) 100%);
    --vidro-forte: rgba(248, 250, 252, 0.84);       /* onde há conteúdo passando por baixo */
    --vidro-borda: rgba(255, 255, 255, 0.85);
    --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    --vidro-sombra: 0 1px 2px rgba(20, 40, 60, 0.04), 0 12px 32px -12px rgba(20, 45, 70, 0.22);
    --vidro-desfoque: blur(18px) saturate(160%);
    --sombra-suave: var(--vidro-sombra);
}

:root[data-tema="escuro"] {
    --fundo-base: #0B131B;
    --cor-solida: #1B2530;

    --cor-superficie: rgba(31, 44, 58, 0.58);
    --cor-fundo: rgba(255, 255, 255, 0.045);
    --cor-borda: rgba(255, 255, 255, 0.09);

    --vidro-fundo: linear-gradient(150deg, rgba(38, 53, 69, 0.66) 0%, rgba(20, 30, 41, 0.52) 100%);
    --vidro-forte: rgba(17, 26, 35, 0.86);
    --vidro-borda: rgba(255, 255, 255, 0.10);
    --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --vidro-sombra: 0 14px 34px -14px rgba(0, 0, 0, 0.65);
    --sombra-suave: var(--vidro-sombra);
}

/* ---------------------------------------------------------------- o fundo */
:root body { background: var(--fundo-base); }
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(38vmax 30vmax at 88% 6%,  rgba(233, 194, 122, 0.62), transparent 70%),   /* luz âmbar */
        radial-gradient(42vmax 34vmax at 4% 30%,  rgba(79, 125, 163, 0.44), transparent 70%),    /* mar */
        radial-gradient(34vmax 26vmax at 62% 104%, rgba(75, 160, 138, 0.26), transparent 70%),   /* verde-água */
        radial-gradient(30vmax 24vmax at 18% 98%, rgba(168, 90, 42, 0.18), transparent 70%),     /* cobre */
        linear-gradient(170deg, #EEF2F6 0%, #E3EAF1 55%, #DCE5EE 100%);
}
:root[data-tema="escuro"] body::before {
    background:
        radial-gradient(38vmax 30vmax at 88% 4%,  rgba(227, 181, 91, 0.15), transparent 70%),
        radial-gradient(44vmax 36vmax at 2% 32%,  rgba(47, 88, 120, 0.48), transparent 70%),
        radial-gradient(34vmax 26vmax at 64% 104%, rgba(31, 116, 102, 0.24), transparent 70%),
        radial-gradient(30vmax 24vmax at 16% 100%, rgba(168, 90, 42, 0.16), transparent 70%),
        linear-gradient(170deg, #0E1720 0%, #0B131B 60%, #0A1118 100%);
}

/* ---------------------------------------------------------------- cartões e blocos (vidro leve, sem desfoque) */
:root .cartao, :root .painel, :root .painel-pagamentos, :root .indice-card,
:root .form-novo-compromisso, :root .linha-compromisso,
:root .caixa-rapida, :root .cartao-anotacao,
:root .resumo-item, :root .box-aviso, :root .estado-vazio, :root .fila-fim,
:root .bloco, :root .bloco-f, :root .rev,
:root .ct-num, :root .ct-cartao,
:root .cartao-fin, :root .card-grafico, :root .card-acao,
:root .cartao-garantia, :root .card-imovel,
:root .cartao-c, :root .cartao-eq, :root .contador-vagas,
:root .mt-num, :root .mt-card, :root .cfg-bloco {
    background: var(--vidro-fundo);
    border-color: var(--vidro-borda);
    box-shadow: var(--vidro-brilho), var(--vidro-sombra);
}
:root .ct-cartao.encerrado { background: var(--cor-superficie); }
:root .painel-cabecalho { border-bottom-color: var(--cor-borda); }

/* tabelas soltas na página também viram vidro (:where = vale menos que o estilo da página,
   então tabelas dentro de blocos continuam como cada página definiu) */
:where(:root) table { background: var(--vidro-fundo); border-color: var(--vidro-borda); }
:root th { background: rgba(31, 59, 87, 0.05); }
:root tr:hover td { background: rgba(255, 255, 255, 0.45); }
:root[data-tema="escuro"] th { background: rgba(0, 0, 0, 0.18); }
:root[data-tema="escuro"] tr:hover td { background: rgba(255, 255, 255, 0.04); }

/* ---------------------------------------------------------------- vidro fosco de verdade (com desfoque) */
:root .topbar, :root .painel-notificacoes, :root .menu-fonte, :root dialog,
:root .barra-receber, :root .atalhos {
    -webkit-backdrop-filter: var(--vidro-desfoque);
    backdrop-filter: var(--vidro-desfoque);
}

/* barra do topo: fica parada no alto e o conteúdo passa por baixo do vidro */
:root .topbar {
    position: sticky; top: 0; z-index: 15;
    background: color-mix(in srgb, var(--vidro-forte) 78%, transparent);
    border-bottom: 1px solid var(--vidro-borda);
}
:root .topbar::after { opacity: 0.75; height: 2px; }

/* menus suspensos e diálogos */
:root .painel-notificacoes, :root .menu-fonte, :root dialog {
    background: var(--vidro-forte);
    border: 1px solid var(--vidro-borda);
    box-shadow: var(--vidro-brilho), 0 18px 44px -12px rgba(15, 30, 45, 0.35);
}
:root .link-central { box-shadow: none; }

/* barras fixas (rodapé dos formulários, receber pagamentos, atalhos da ficha) */
/* rodapé dos formulários (Novo aluguel, cadastro de inquilino): sem faixa por trás,
   só os botões flutuando — cada um com o próprio vidro, para não pesar o canto da tela */
:root .barra-acoes, :root .barra-nav {
    background: none; border: none; box-shadow: none;
    padding: 12px 0 14px; pointer-events: none;
}
:root .barra-acoes > *, :root .barra-nav > *, :root .barra-nav .dir > * { pointer-events: auto; }
:root .barra-nav .dir { pointer-events: none; }
:root .btn-voltar, :root .btn-cancelar, :root .barra-acoes .cancelar {
    background: color-mix(in srgb, var(--vidro-forte) 88%, transparent);
    border: 1px solid var(--vidro-borda);
    box-shadow: var(--vidro-brilho), 0 4px 14px -6px rgba(15, 30, 45, 0.25);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
:root .btn-avancar, :root .barra-acoes .salvar { box-shadow: 0 4px 14px -4px rgba(31, 59, 87, 0.35); }
:root[data-tema="escuro"] .btn-avancar, :root[data-tema="escuro"] .barra-acoes .salvar { box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5); }

/* botão "Novo aluguel" e "Registrar aluguel": dourado mais claro, sem sombra pesada */
:root .btn-novo-aluguel, :root .btn-registrar {
    background: linear-gradient(135deg, #F7E6C1 0%, #ECCB86 100%);
    color: #4A3209;
    border: 1px solid rgba(201, 150, 62, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px -3px rgba(168, 90, 42, 0.25);
}
:root .btn-novo-aluguel:hover, :root .btn-registrar:hover {
    filter: none; background: linear-gradient(135deg, #F9EBCD 0%, #F0D293 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 16px -4px rgba(168, 90, 42, 0.30);
}
:root[data-tema="escuro"] .btn-novo-aluguel, :root[data-tema="escuro"] .btn-registrar {
    background: linear-gradient(135deg, rgba(236, 203, 134, 0.95) 0%, rgba(214, 170, 92, 0.95) 100%);
    color: #22170A; border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
}
/* etapa atual do Novo aluguel: o mesmo dourado claro, sem brilho forte */
:root .passo.atual button { background: linear-gradient(135deg, #F7E6C1 0%, #E6BE72 100%); color: #4A3209; box-shadow: 0 3px 10px -3px rgba(168, 90, 42, 0.35); }
:root .passos .trilha { opacity: 0.7; }
:root .barra-receber { background: var(--vidro-forte); }
:root .atalhos {
    top: var(--topbar-altura);
    background: var(--vidro-forte);
    border: 1px solid var(--vidro-borda); border-top: none;
    margin: 0 0 6px; padding: 8px 10px; border-radius: 0 0 14px 14px;
    box-shadow: 0 10px 24px -14px rgba(15, 30, 45, 0.35);
}

/* ---------------------------------------------------------------- menu lateral: vidro escuro */
:root .sidebar {
    background: linear-gradient(185deg, rgba(14, 28, 42, 0.90) 0%, rgba(22, 40, 58, 0.84) 55%, rgba(29, 54, 80, 0.78) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}
:root[data-tema="escuro"] .sidebar {
    background: linear-gradient(185deg, rgba(8, 15, 22, 0.86) 0%, rgba(12, 24, 36, 0.80) 60%, rgba(18, 36, 54, 0.74) 100%);
}
@media (min-width: 769px) {
    /* no computador o menu fica parado enquanto a página rola */
    :root .sidebar { position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow-y: auto; scrollbar-width: none; }
}
@media (max-width: 768px) {
    /* gaveta do celular: vidro mais fechado, porque abre por cima do conteúdo */
    :root .sidebar {
        background: linear-gradient(185deg, rgba(14, 28, 42, 0.95) 0%, rgba(22, 40, 58, 0.93) 100%);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    }
    :root .fundo-gaveta { background: rgba(14, 24, 36, 0.35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
    :root { --vidro-desfoque: blur(12px) saturate(150%); }     /* mais leve no celular */
}

/* ---------------------------------------------------------------- telas de acesso (login, primeiro acesso...) */
:root .acesso-form-lado { background: transparent; }
:root .acesso-cartao {
    padding: 32px 30px; border-radius: 20px;
    background: var(--vidro-fundo); border: 1px solid var(--vidro-borda);
    box-shadow: var(--vidro-brilho), var(--vidro-sombra);
}
@media (max-width: 520px) { :root .acesso-cartao { padding: 24px 18px; } }

/* ---------------------------------------------------------------- detalhes */
:root select option { background: var(--cor-solida); color: var(--cor-texto); }   /* lista nativa sempre legível */
:root .botao-icone:hover { background: rgba(31, 59, 87, 0.07); }
:root[data-tema="escuro"] .botao-icone:hover { background: rgba(255, 255, 255, 0.07); }

/* faixas escuras de destaque (boas-vindas, topo das fichas) ganham a borda de luz do vidro */
:root .boas-vindas, :root .ficha-topo, :root .ct-topo {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 16px 36px -14px rgba(20, 40, 60, 0.45);
}

/* ---------------------------------------------------------------- acessibilidade e navegadores antigos */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --cor-superficie: #FFFFFF; --cor-fundo: #EEF1F5; --cor-borda: #DEE4EA;
        --vidro-fundo: #FFFFFF; --vidro-forte: #FFFFFF; --vidro-borda: #DEE4EA; --vidro-desfoque: none;
    }
    :root[data-tema="escuro"] {
        --cor-superficie: #1B2530; --cor-fundo: #10181F; --cor-borda: #2B3947;
        --vidro-fundo: #1B2530; --vidro-forte: #1B2530; --vidro-borda: #2B3947;
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --vidro-forte: #F8FAFC; }
    :root[data-tema="escuro"] { --vidro-forte: #141E28; }
}

/* o tema escuro antigo tirava a sombra destes; no vidro, a borda de luz volta */
:root[data-tema="escuro"] .cartao, :root[data-tema="escuro"] .painel { box-shadow: var(--vidro-brilho), var(--vidro-sombra); }