/* DecoderX.com.br: tema claro do portal.
   Mesmo padrão de www.bluefix.com.br/vale-pagamento/ e da calculadora de financiamento:
   faixa azul-escura só no logo, fundo claro, cartões brancos, destaque âmbar no item ativo.

   Carregado depois de decoderx1.css e portal2.css, e escopado pelas classes do body
   (pagina-publica, pagina-inicial, pagina-painel, pagina-admin-acesso), então o
   recibo online, o validador e as demais páginas não mudam.
   Ao alterar, troque o número no nome (claro2.css...) e atualize includes/layout.php e index.php. */

:root {
    --cl-fundo: #f5f8fc;
    --cl-card: #ffffff;
    --cl-linha: #dbe5ef;
    --cl-ink: #1c2b3a;
    --cl-ink2: #4a5b6c;
    --cl-azul: #1a3a5c;
    --cl-acao: #2563a8;
    --cl-acao-esc: #1d4f89;
    --cl-suave: #eaf3fc;
    --cl-ambar: #e8a020;
    --cl-faixa: #0d1f33;
}

body.pagina-publica,
body.pagina-painel,
body.pagina-admin-acesso {
    background: var(--cl-fundo);
    color: var(--cl-ink);
}

/* ── Páginas públicas: abertura, cartões e rodapé claros ─── */
.pagina-publica .site-header { box-shadow: 0 2px 8px rgba(13, 31, 51, .18); }

.pagina-inicial .hero-section {
    background: linear-gradient(180deg, var(--cl-suave) 0%, var(--cl-fundo) 100%);
    color: var(--cl-azul);
}
.pagina-inicial .hero-section h1 { color: var(--cl-azul); }
.pagina-inicial .hero-section p { color: var(--cl-ink2); }
.pagina-inicial .home-card { box-shadow: 0 0 0 1px var(--cl-linha), 0 6px 22px rgba(26, 58, 92, .07); }
.pagina-inicial .home-texto { box-shadow: 0 0 0 1px var(--cl-linha), 0 6px 22px rgba(26, 58, 92, .07); }
.pagina-inicial .home-grupo h2 { border-bottom-color: var(--cl-linha); }
.pagina-inicial .home-resposta { background: #fff7e6; border-left-color: var(--cl-ambar); }
.pagina-inicial .home-faq details { border-bottom-color: var(--cl-linha); }
.pagina-inicial .bg-white.rounded-3 { box-shadow: 0 0 0 1px var(--cl-linha), 0 6px 22px rgba(26, 58, 92, .05) !important; }

.pagina-publica .site-footer {
    background: #fff;
    color: var(--cl-ink2);
    border-top: 1px solid var(--cl-linha);
}
.pagina-publica .site-footer a { color: var(--cl-acao-esc); }
.pagina-publica .site-footer a:hover { color: var(--cl-azul); }

/* Login e cadastro */
.pagina-publica .auth-page { background: linear-gradient(180deg, var(--cl-suave) 0%, var(--cl-fundo) 100%); }
.pagina-publica .auth-card { box-shadow: 0 0 0 1px var(--cl-linha), 0 10px 30px rgba(26, 58, 92, .1); }
.pagina-publica .auth-rodape { border-top-color: var(--cl-linha); }

/* ── Painel (cliente e administração) ───────────────────── */
.pagina-painel .sidebar {
    background: #fff;
    border-right: 1px solid var(--cl-linha);
    box-shadow: 2px 0 10px rgba(26, 58, 92, .05);
}
.pagina-painel .sidebar .brand {
    background: var(--cl-faixa);
    color: #fff;
    margin: -1.5rem -1rem 1.25rem;
    padding: 1rem 1rem .9rem;
}
.pagina-painel .sidebar .brand span { color: var(--cl-ambar); }
.pagina-painel .sidebar .brand .brand-area { color: #9db4c9; }
.pagina-painel .sidebar .nav-link {
    color: var(--cl-ink2);
    font-weight: 600;
    margin-bottom: 2px;
}
.pagina-painel .sidebar .nav-link:hover { background: var(--cl-suave); color: var(--cl-azul); }
.pagina-painel .sidebar .nav-link.active {
    background: var(--cl-ambar);
    color: var(--cl-faixa);
    font-weight: 750;
    box-shadow: 0 2px 6px rgba(232, 160, 32, .45);
}
.pagina-painel .sidebar .nav-sair { color: #b42318; }
.pagina-painel .sidebar .nav-sair:hover { background: #fff5f4; color: #8f1d12; }
.pagina-painel .sidebar .usuario { border-top-color: var(--cl-linha); color: var(--cl-ink2); }

.pagina-painel .painel-conteudo h1 { color: var(--cl-azul); }
.pagina-painel .card-painel,
.pagina-painel .stat-box {
    border: 1px solid var(--cl-linha);
    box-shadow: 0 6px 22px rgba(26, 58, 92, .06);
}
.pagina-painel .stat-box .num { color: var(--cl-azul); }
.pagina-painel .stat-box .num.text-primary { color: var(--cl-acao) !important; }
.pagina-painel .table-light {
    --bs-table-bg: #eef4fa;
    --bs-table-color: var(--cl-azul);
    --bs-table-border-color: var(--cl-linha);
}
.pagina-painel .table > :not(caption) > * > * { border-bottom-color: #e7eef6; }
.pagina-painel .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--cl-suave); }
.pagina-painel a:not(.btn):not(.nav-link):not(.brand):not(.page-link) { color: var(--cl-acao); }
.pagina-painel a:not(.btn):not(.nav-link):not(.brand):not(.page-link):hover { color: var(--cl-acao-esc); }
.pagina-painel .sidebar .brand:hover { color: #fff; }

.pagina-painel .btn-primary,
.pagina-admin-acesso .btn-primary {
    --bs-btn-bg: var(--cl-acao);
    --bs-btn-border-color: var(--cl-acao);
    --bs-btn-hover-bg: var(--cl-acao-esc);
    --bs-btn-hover-border-color: var(--cl-acao-esc);
    --bs-btn-active-bg: var(--cl-acao-esc);
    --bs-btn-active-border-color: var(--cl-acao-esc);
    --bs-btn-disabled-bg: var(--cl-acao);
    --bs-btn-disabled-border-color: var(--cl-acao);
}
.pagina-painel .btn-outline-primary {
    --bs-btn-color: var(--cl-acao);
    --bs-btn-border-color: var(--cl-acao);
    --bs-btn-hover-bg: var(--cl-acao);
    --bs-btn-hover-border-color: var(--cl-acao);
    --bs-btn-active-bg: var(--cl-acao-esc);
    --bs-btn-active-border-color: var(--cl-acao-esc);
}
.pagina-painel .form-control:focus,
.pagina-painel .form-select:focus,
.pagina-admin-acesso .form-control:focus {
    border-color: var(--cl-acao);
    box-shadow: 0 0 0 3px rgba(37, 99, 168, .18);
}
.pagina-painel .page-link { color: var(--cl-acao); }
.pagina-painel .page-item.active .page-link { background: var(--cl-acao); border-color: var(--cl-acao); color: #fff; }

/* ── Login da administração e instalador ─────────────────── */
.pagina-admin-acesso { background: linear-gradient(180deg, var(--cl-suave) 0%, var(--cl-fundo) 100%); }
.pagina-admin-acesso .admin-acesso-marca { color: var(--cl-azul); }
.pagina-admin-acesso .admin-acesso-marca span { color: var(--cl-ambar); }
.pagina-admin-acesso .card {
    border: 1px solid var(--cl-linha) !important;
    box-shadow: 0 10px 30px rgba(26, 58, 92, .1) !important;
}

/* ── Gráfico de vales por dia (admin/log-vale.php) ───────── */
.lv-grafico {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    padding-top: 6px;
    border-bottom: 1px solid var(--cl-linha);
}
.lv-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.lv-barra { display: block; width: 100%; background: var(--cl-acao); border-radius: 3px 3px 0 0; }
.lv-col:hover .lv-barra { background: var(--cl-ambar); }

/* Em telas estreitas o menu vira barra no topo: a faixa do logo some */
@media (max-width: 767.98px) {
    .pagina-painel .sidebar { border-right: 0; border-bottom: 1px solid var(--cl-linha); box-shadow: 0 2px 8px rgba(26, 58, 92, .06); }
    .pagina-painel .sidebar .brand, .pagina-painel .sidebar .brand:hover { background: none; color: var(--cl-azul); margin: 0 auto 0 0; padding: 0; }
    .pagina-painel .sidebar .brand span { color: var(--cl-ambar); }
}