/* =========================================================================
   Design system — Cadastro Imobiliário Municipal
   Paleta profissional (índigo/azul institucional), tipografia Inter,
   componentes Bootstrap 5 reestilizados. Mobile-first (seção 10.1).
   ========================================================================= */

:root {
    --ci-primary: #3450a3;
    --ci-primary-dark: #253a7a;
    --ci-primary-light: #eef1fb;
    --ci-accent: #1aa88f;
    --ci-ink: #1c2333;
    --ci-ink-soft: #4b5468;
    --ci-border: #e2e5ee;
    --ci-bg: #f4f6fb;
    --ci-surface: #ffffff;
    --ci-danger: #d64550;
    --ci-warning: #b8860b;
    --ci-radius: 0.7rem;
    --ci-radius-sm: 0.5rem;
    --ci-shadow: 0 1px 2px rgba(20, 30, 60, .04), 0 6px 20px rgba(20, 30, 60, .06);
    --ci-shadow-lg: 0 10px 30px rgba(20, 30, 60, .12);

    --bs-primary: var(--ci-primary);
    --bs-primary-rgb: 52, 80, 163;
    --bs-link-color: var(--ci-primary);
    --bs-link-hover-color: var(--ci-primary-dark);
    --bs-body-color: var(--ci-ink);
    --bs-body-bg: var(--ci-bg);
    --bs-border-radius: var(--ci-radius-sm);
}

html, body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px; /* fonte de entrada mínima de 16px (seção 10.1) */
    background: var(--ci-bg);
    color: var(--ci-ink);
    -webkit-font-smoothing: antialiased;
}

body.sem-navbar {
    background: linear-gradient(150deg, #1d2b63 0%, #3450a3 48%, #1aa88f 100%);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ci-ink);
}

a { text-decoration: none; }

.btn, .form-control, .form-select {
    min-height: 44px; /* alvo de toque mínimo 44x44px (seção 10.1) */
    border-radius: var(--ci-radius-sm);
}

.form-control, .form-select {
    border-color: var(--ci-border);
    background-color: var(--ci-surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 0.2rem rgba(52, 80, 163, .15);
}
.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--ci-ink-soft);
    margin-bottom: .35rem;
}
.form-label .obrigatorio { color: var(--ci-danger); font-weight: 700; }
.legenda-obrigatorio { font-size: 0.85rem; color: var(--ci-ink-soft); }
.form-text { color: var(--ci-ink-soft); }

/* ---------- Botões ---------- */
.btn { font-weight: 600; padding: .5rem 1.1rem; transition: transform .05s ease, box-shadow .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--ci-primary);
    border-color: var(--ci-primary);
    box-shadow: 0 2px 8px rgba(52, 80, 163, .25);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--ci-primary-dark);
    border-color: var(--ci-primary-dark);
}
.btn-outline-secondary { border-color: var(--ci-border); color: var(--ci-ink-soft); }
.btn-outline-secondary:hover { background: var(--ci-bg); color: var(--ci-ink); border-color: var(--ci-border); }
.btn-outline-primary { color: var(--ci-primary); border-color: var(--ci-primary); }
.btn-outline-primary:hover { background: var(--ci-primary); border-color: var(--ci-primary); }
.btn-outline-danger { color: var(--ci-danger); border-color: var(--ci-danger); }

/* ---------- Navbar ---------- */
.app-navbar {
    background: linear-gradient(100deg, var(--ci-primary-dark), var(--ci-primary));
    box-shadow: 0 2px 12px rgba(20, 30, 60, .18);
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.app-brand { display: flex; align-items: center; gap: .65rem; color: #fff; }
.app-brand-icon {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.15);
    border-radius: 10px;
    font-size: 1.25rem;
}
.app-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.app-brand-text strong { font-size: 1.05rem; }
.app-brand-text small { font-size: .7rem; color: rgba(255,255,255,.75); font-weight: 500; }

.app-navbar .nav-link {
    color: rgba(255,255,255,.85);
    font-weight: 600;
    font-size: .92rem;
    padding: .55rem .85rem;
    border-radius: var(--ci-radius-sm);
}
.app-navbar .nav-link:hover, .app-navbar .nav-link.active { background: rgba(255,255,255,.14); color: #fff; }
.app-navbar .dropdown-menu { border: none; border-radius: var(--ci-radius); }
.app-navbar .dropdown-item { display: flex; align-items: center; gap: .55rem; padding: .5rem .9rem; font-weight: 500; }
.app-navbar .dropdown-item:hover { background: var(--ci-primary-light); color: var(--ci-primary-dark); }

.app-user-chip {
    display: flex; align-items: center; gap: .5rem;
    color: #fff; font-size: .82rem;
    background: rgba(255,255,255,.1);
    padding: .35rem .7rem;
    border-radius: 999px;
}
.app-user-chip i { font-size: 1.1rem; }
.app-user-chip small { display: block; color: rgba(255,255,255,.7); font-weight: 400; font-size: .7rem; }
.app-btn-sair { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.app-btn-sair:hover { background: rgba(255,255,255,.22); color: #fff; }

.app-offline-banner {
    background: #fff4e5; color: var(--ci-warning);
    text-align: center; padding: .55rem 1rem;
    font-weight: 600; font-size: .9rem;
    border-bottom: 1px solid #f3d9a3;
}
.app-offline-banner.d-none { display: none; }

.app-alert-success {
    background: #e7f7f1; color: #147a63;
    border: 1px solid #bfe8da; border-radius: var(--ci-radius);
    font-weight: 500;
}

.app-main { max-width: 1320px; margin: 0 auto; }

/* ---------- Cabeçalho de página ---------- */
h1.h4 {
    font-size: 1.4rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--ci-border);
    margin-bottom: 1.25rem !important;
}

/* ---------- Cartões (listagens mobile) ---------- */
.cartao-registro {
    background: var(--ci-surface);
    border: 1px solid var(--ci-border);
    border-left: 4px solid var(--ci-primary);
    border-radius: var(--ci-radius);
    box-shadow: var(--ci-shadow);
    transition: box-shadow .15s ease;
}
.cartao-registro:hover { box-shadow: var(--ci-shadow-lg); }
.card { border: 1px solid var(--ci-border); border-radius: var(--ci-radius); }

/* ---------- Tabelas (desktop) ---------- */
.table { background: var(--ci-surface); border-radius: var(--ci-radius); overflow: hidden; box-shadow: var(--ci-shadow); }
.table thead th {
    background: var(--ci-primary-light);
    color: var(--ci-primary-dark);
    font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .03em;
    border-bottom: none;
    padding: .85rem 1rem;
}
.table tbody td { padding: .8rem 1rem; vertical-align: middle; border-color: var(--ci-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(52, 80, 163, .025); }
.table tbody tr:hover { background-color: var(--ci-primary-light); }

/* ---------- Badges / situação ---------- */
.badge { font-weight: 600; padding: .4em .7em; border-radius: 999px; }

/* ---------- Paginação ---------- */
.pagination .page-link { color: var(--ci-primary); border-color: var(--ci-border); font-weight: 600; }
.pagination .page-item.active .page-link { background: var(--ci-primary); border-color: var(--ci-primary); }

/* ---------- Formulário: seções/etapas ---------- */
.etapa-imovel {
    background: var(--ci-surface);
    border: 1px solid var(--ci-border);
    border-radius: var(--ci-radius);
    padding: 1.25rem 1.25rem .75rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--ci-shadow);
}
.etapa-imovel h2 {
    font-size: 1rem;
    color: var(--ci-primary-dark);
    border-bottom: 1px solid var(--ci-border);
    padding-bottom: .6rem;
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: .5rem;
}

/* ---------- Seletor pesquisável ---------- */
.lista-pesquisa {
    max-height: 260px;
    overflow-y: auto;
    box-shadow: var(--ci-shadow-lg);
    border-radius: var(--ci-radius-sm);
    border: 1px solid var(--ci-border);
    margin-top: 2px;
    background: var(--ci-surface);
    z-index: 1055; /* acima de linhas/colunas seguintes do formulário (evita sobreposição visual) */
}

/* Eleva o campo com a lista aberta acima dos demais campos do formulário,
   para a lista de sugestões nunca ficar visualmente "atrás" dos campos
   das linhas/colunas seguintes (ex.: Rua sobrepondo Bairro). */
[data-seletor-pesquisa] {
    position: relative;
}
[data-seletor-pesquisa]:has(.lista-pesquisa:not(.d-none)) {
    z-index: 1055;
}

/* ---------- Layouts responsivos de listagem ---------- */
@media (min-width: 768px) {
    .tabela-desktop { display: table; }
    .cartoes-mobile { display: none; }
}
@media (max-width: 767.98px) {
    .tabela-desktop { display: none; }
    .cartoes-mobile { display: block; }
}

/* ---------- Tela de login ---------- */
.app-login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.app-login-card {
    width: 100%;
    max-width: 400px;
    background: var(--ci-surface);
    border-radius: 1.1rem;
    box-shadow: 0 25px 60px rgba(10, 15, 40, .35);
    padding: 2.25rem 2rem;
}
.app-login-logo {
    display: grid; place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto 1rem;
    background: var(--ci-primary-light);
    color: var(--ci-primary);
    border-radius: 14px;
    font-size: 1.6rem;
}
.app-login-title { text-align: center; font-size: 1.3rem; margin-bottom: .15rem; }
.app-login-subtitle { text-align: center; color: var(--ci-ink-soft); font-size: .88rem; margin-bottom: 1.5rem; }