/* ============================================================
   Banco Data BR - estilos gerais
   ============================================================ */

:root {
    --azul-escuro: #0b1f3a;
    --azul: #0f3d75;
    --azul-claro: #2f80c9;
    --destaque: #17b897;
    --fundo: #f4f7fb;
    --texto: #16233c;
    --texto-suave: #5b6b85;
    --borda: #e2e8f0;
    --branco: #ffffff;
    --vermelho: #d64545;
    --raio: 10px;
    --sombra: 0 2px 10px rgba(15, 61, 117, 0.08);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

a { color: var(--azul-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Cabeçalho ---------- */
.topo {
    background: linear-gradient(135deg, var(--azul-escuro), var(--azul));
    color: var(--branco);
    padding: 16px 0;
}
.topo .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.marca {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--branco);
}
.marca span.sufixo { color: var(--destaque); }
.marca:hover { text-decoration: none; }

nav.menu ul {
    list-style: none;
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
nav.menu a {
    color: #dbe7f7;
    font-weight: 500;
    font-size: 0.95rem;
}
nav.menu a:hover, nav.menu a.ativo {
    color: var(--branco);
    text-decoration: none;
    border-bottom: 2px solid var(--destaque);
}

/* ---------- Hero / topo da home ---------- */
.hero {
    background: linear-gradient(135deg, var(--azul-escuro), var(--azul) 60%, #144e8f);
    color: var(--branco);
    padding: 56px 0 70px;
}
.hero h1 {
    font-size: 2.1rem;
    margin: 0 0 10px;
    max-width: 720px;
}
.hero p.subtitulo {
    color: #cfe0f5;
    max-width: 640px;
    font-size: 1.05rem;
    margin-bottom: 28px;
}

.form-busca {
    display: flex;
    max-width: 560px;
    background: var(--branco);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.form-busca input[type="text"] {
    flex: 1;
    border: none;
    padding: 14px 16px;
    font-size: 1rem;
    outline: none;
}
.form-busca button {
    border: none;
    background: var(--destaque);
    color: #06281f;
    font-weight: 700;
    padding: 0 22px;
    cursor: pointer;
    font-size: 0.98rem;
}
.form-busca button:hover { background: #14a488; }

/* ---------- Cartões de estatísticas ---------- */
.faixa-stats {
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    text-align: center;
    padding: 26px 0;
}
.stats-grid .item {
    padding: 10px;
    border-right: 1px solid var(--borda);
}
.stats-grid .item:last-child { border-right: none; }
.stats-grid .numero {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--azul);
    display: block;
}
.stats-grid .rotulo {
    color: var(--texto-suave);
    font-size: 0.85rem;
}

/* ---------- Seções gerais ---------- */
section.bloco { padding: 46px 0; }
section.bloco.alt { background: var(--branco); }
h2.titulo-secao {
    font-size: 1.4rem;
    margin: 0 0 22px;
    color: var(--azul-escuro);
}
p.descricao-secao {
    color: var(--texto-suave);
    max-width: 720px;
    margin-top: -14px;
    margin-bottom: 24px;
}

/* ---------- Cartões (instituições, ranking) ---------- */
.grade-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}
.cartao {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 18px;
    box-shadow: var(--sombra);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cartao:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 61, 117, 0.15);
}
.cartao h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
}
.cartao .tag {
    display: inline-block;
    background: #eaf3fb;
    color: var(--azul);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 8px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.cartao .valor-destaque {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--destaque);
    margin-top: 8px;
}

/* ---------- Tabelas ---------- */
table.tabela-dados {
    width: 100%;
    border-collapse: collapse;
    background: var(--branco);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
}
table.tabela-dados th, table.tabela-dados td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    font-size: 0.93rem;
}
table.tabela-dados th {
    background: #eef4fb;
    color: var(--azul-escuro);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
table.tabela-dados tr:last-child td { border-bottom: none; }
table.tabela-dados td.numero { text-align: right; font-variant-numeric: tabular-nums; }
table.tabela-dados tr:hover { background: #f8fbff; }
.posicao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #eaf3fb;
    color: var(--azul);
    font-weight: 700;
    font-size: 0.8rem;
}

/* ---------- Formulários / filtros ---------- */
.barra-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
    background: var(--branco);
    padding: 16px;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
}
.barra-filtros select, .barra-filtros input[type="text"] {
    padding: 9px 10px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    font-size: 0.92rem;
    min-width: 180px;
}
.barra-filtros button {
    background: var(--azul);
    color: var(--branco);
    border: none;
    border-radius: 6px;
    padding: 9px 18px;
    font-weight: 600;
    cursor: pointer;
}
.barra-filtros button:hover { background: var(--azul-escuro); }

/* ---------- Avisos ---------- */
.aviso {
    padding: 14px 16px;
    border-radius: var(--raio);
    margin-bottom: 20px;
    font-size: 0.93rem;
}
.aviso.info { background: #eaf3fb; color: var(--azul-escuro); border: 1px solid #cfe0f5; }
.aviso.alerta { background: #fdecec; color: #7a2020; border: 1px solid #f6c8c8; }
.aviso.sucesso { background: #e9f9f3; color: #0d4a37; border: 1px solid #bfead9; }

/* ---------- Rodapé ---------- */
footer.rodape {
    background: var(--azul-escuro);
    color: #b9cbe4;
    padding: 34px 0 24px;
    margin-top: 50px;
    font-size: 0.88rem;
}
footer.rodape a { color: #dbe7f7; }
footer.rodape .colunas {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
    margin-bottom: 20px;
}
footer.rodape h4 {
    color: var(--branco);
    font-size: 0.9rem;
    margin-bottom: 10px;
}
footer.rodape ul { list-style: none; padding: 0; margin: 0; }
footer.rodape li { margin-bottom: 6px; }
.linha-fina {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 16px;
    color: #8fa5c4;
    font-size: 0.8rem;
}

/* ---------- Diversos ---------- */
.migalhas { font-size: 0.85rem; color: var(--texto-suave); margin-bottom: 18px; }
.migalhas a { color: var(--texto-suave); text-decoration: underline; }
.grafico-caixa {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 18px;
    box-shadow: var(--sombra);
    margin-bottom: 24px;
}
.paginacao { display:flex; gap:8px; margin-top: 20px; flex-wrap: wrap; }
.paginacao a, .paginacao span {
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--borda);
    background: var(--branco);
    font-size: 0.85rem;
    color: var(--texto);
}
.paginacao a:hover { background: #eaf3fb; text-decoration: none; }
.paginacao .atual { background: var(--azul); color: var(--branco); border-color: var(--azul); }

@media (max-width: 640px) {
    .hero h1 { font-size: 1.6rem; }
    .stats-grid .item { border-right: none; border-bottom: 1px solid var(--borda); }
    nav.menu ul { gap: 14px; }
}