/* ============================================================================
   Tema visual — Portal do Cliente Sesc AM
   Modelo de cores: www.sesc.com.br (27/09/2026)
     azul-marinho #15147F (menus/cabeçalho)  · hover #06067D  · destaque #1F1FE5
     amarelo #E5B01F (hover/ativo)           · lilás #7B7DB8 (apoio)
     fundo #F8F8FC · divisórias #E7E8ED · texto #3A3A3A · texto secundário #536171
   Fontes do site: Roboto / Inter. Aqui: Roboto quando instalada, senão a fonte
   do sistema (Segoe UI / Arial), sem download externo.

   Somente apresentação: não altera nenhuma lógica do portal.
   Carregar DEPOIS do bootstrap.min.css, resume.css/login.css e dos <style> inline.
   ========================================================================== */

:root {
  --sesc-azul:        #15147F;
  --sesc-azul-escuro: #06067D;
  --sesc-azul-vivo:   #1F1FE5;
  --sesc-amarelo:     #E5B01F;
  --sesc-lilas:       #7B7DB8;
  --sesc-fundo:       #F8F8FC;
  --sesc-borda:       #E7E8ED;
  --sesc-texto:       #3A3A3A;
  --sesc-texto-2:     #536171;
  --sesc-branco:      #FFFFFF;
  --sesc-fonte:       Roboto, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ── Base: página clara, texto escuro (como no site) ─────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Roboto, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sesc-fonte);
  color: #3A3A3A;
  color: var(--sesc-texto);
  background-color: #F8F8FC !important;
  background-color: var(--sesc-fundo) !important;
  min-height: 100vh;
  padding-bottom: 56px;               /* espaço do rodapé fixo */
}
h1, h2, h3, h4, h5, h6, .h5 {
  font-family: Roboto, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-family: var(--sesc-fonte) !important;
  font-weight: 700;
  color: #15147F;
  color: var(--sesc-azul);
}
a { color: #15147F; color: var(--sesc-azul); }
a:hover { color: #06067D; color: var(--sesc-azul-escuro); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #E5B01F;
  outline: 3px solid var(--sesc-amarelo);
  outline-offset: 2px;
}

/* Área de conteúdo (index.php): fundo claro liso, sem imagem (removida em 29/09/2026). */
body#page-top {
  background: #F8F8FC !important;
}
section.resume-section { padding-top: 2.5rem !important; }
#resultado h5 {                          /* nome e saldo */
  color: #15147F;
  color: var(--sesc-azul);
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 14px;
}

/* ── Botões ───────────────────────────────────────────────────────────── */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary, .btn-info, .btnAzul,
.btn-primary:focus, .btn-info:focus, .btnAzul:focus {
  background-color: #15147F !important;
  background-color: var(--sesc-azul) !important;
  border-color: #15147F !important;
  border-color: var(--sesc-azul) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-info:hover, .btnAzul:hover {
  background-color: #06067D !important;
  background-color: var(--sesc-azul-escuro) !important;
  border-color: #06067D !important;
  border-color: var(--sesc-azul-escuro) !important;
  color: #fff !important;
}
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus {
  background-color: #536171 !important;
  background-color: var(--sesc-texto-2) !important;
  border-color: #536171 !important;
  border-color: var(--sesc-texto-2) !important;
  color: #fff !important;
}
.btn-success, .btn-success:hover { border-radius: 10px; }
.btn-warning, .btn-amarelo {
  background-color: #E5B01F !important;
  background-color: var(--sesc-amarelo) !important;
  border-color: #E5B01F !important;
  border-color: var(--sesc-amarelo) !important;
  color: #15147F !important;
  color: var(--sesc-azul) !important;
}

/* ── Barra lateral (index.php) — azul-marinho como o menu do site ─────── */
.navbar-dark.bg-primary, #sideNav {
  background-color: #15147F !important;
  background-color: var(--sesc-azul) !important;
}
#sideNav .nav-link { color: #fff !important; border-radius: 8px; margin: 2px 8px; }
#sideNav .nav-link sub { font-size: 15px !important; line-height: 1.2; color: #fff; }
#sideNav .nav-link:hover, #sideNav .nav-link:focus {
  background: rgba(255,255,255,.10);
}
#sideNav .nav-link:hover sub, #sideNav .nav-link:focus sub {
  color: #E5B01F;
  color: var(--sesc-amarelo);
}
#sideNav .navbar-toggler { border-color: rgba(255,255,255,.5); }
#sideNav .navbar-brand img { border: 3px solid #E5B01F !important; border-color: var(--sesc-amarelo) !important; }
#sideNav .centered-text sub { color: #fff !important; }
#nomeAtual { color: #E5B01F !important; color: var(--sesc-amarelo) !important; }

/* ── Abas (dados.php) — azul sobre fundo claro, ativo em amarelo ──────── */
#navbarToggleExternalContent { border-bottom: 2px solid #E7E8ED; border-bottom-color: var(--sesc-borda); margin-bottom: 16px; }
.navbar-light .navbar-nav .nav-link {
  color: #15147F !important;
  color: var(--sesc-azul) !important;
  font-weight: 600;
  font-size: 15px;
  background: transparent !important;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  padding: 10px 14px;
  min-height: 44px;                   /* alvo de toque */
  transition: border-color .2s, background .2s, color .2s;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-item.active .nav-link {
  color: #15147F !important;
  color: var(--sesc-azul) !important;
  background: #E7E8ED !important;
  background: var(--sesc-borda) !important;
  border-bottom-color: #E5B01F;
  border-bottom-color: var(--sesc-amarelo);
}
.navbar-light .navbar-toggler { border-color: #15147F; color: #15147F; }

/* ── Cartões / tabelas ────────────────────────────────────────────────── */
.content-card {
  background: #fff;
  border: 1px solid #E7E8ED;
  border: 1px solid var(--sesc-borda);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(21,20,127,.08);
}
table.dataTable thead th {
  background: #15147F !important;
  background: var(--sesc-azul) !important;
  color: #fff !important;
  border-bottom: 3px solid #E5B01F !important;
  border-bottom: 3px solid var(--sesc-amarelo) !important;
}
table.dataTable tbody td { color: #3A3A3A; color: var(--sesc-texto); }
table.dataTable tbody tr:nth-child(even) { background-color: #F8F8FC; background-color: var(--sesc-fundo); }
table.dataTable tbody tr:hover { background-color: #E7E8ED !important; background-color: var(--sesc-borda) !important; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: #536171; color: var(--sesc-texto-2); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #E7E8ED;
  border: 1px solid var(--sesc-borda);
  border-radius: 8px;
  min-height: 36px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 36px; min-height: 36px;
  border: 1px solid #E7E8ED !important;
  border: 1px solid var(--sesc-borda) !important;
  color: #15147F !important;
  color: var(--sesc-azul) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #15147F !important;
  background: var(--sesc-azul) !important;
  color: #fff !important;
  border-color: #15147F !important;
  border-color: var(--sesc-azul) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background: #E5B01F !important;
  background: var(--sesc-amarelo) !important;
  color: #15147F !important;
  color: var(--sesc-azul) !important;
  border-color: #E5B01F !important;
  border-color: var(--sesc-amarelo) !important;
}

/* ── Formulários ──────────────────────────────────────────────────────── */
.form-control { border-color: #E7E8ED; border-color: var(--sesc-borda); }
.form-control:focus {
  border-color: #15147F;
  border-color: var(--sesc-azul);
  box-shadow: 0 0 0 .2rem rgba(21, 20, 127, .18);
}

/* ── Login / recuperar / redefinir / cadastro ─────────────────────────── */
/* Fundo: css/imagens/img/fundo_novo_2026.jpg (236 KB), reaplicado em 05/10/2026.
   A arte tem a colagem à esquerda e uma área lisa amarela à direita: no desktop o
   cartão fica sobre a área lisa; no celular fica centralizado sobre fundo translúcido.
   "!important" anula o logofundo.jpg definido em css/login.css. */
body.pagina-login {
  background-color: #F8F8FC !important;
  background-image: url("imagens/logofundo.jpg") !important;   /* arte original "Bem vindo Cliente Sesc" (07/10/2026) */
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: cover !important;
  background-attachment: fixed;
  padding-bottom: 0;
  margin: 0;
}
body.pagina-login > .container {
  max-width: none;
  width: 100%;
  min-height: calc(100vh - 44px);      /* altura visível menos o rodapé */
  display: flex;
  align-items: center;
  padding: 24px 16px 60px;
}
body.pagina-login > .container > .row {
  width: 100%;
  margin: 0;
  justify-content: center;
}
body.pagina-login .col-sm-9.col-md-7.col-lg-5 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 440px;
  padding: 0;
  margin: 0 auto !important;
}
.card-signin {
  border: 0;
  border-top: 6px solid #E5B01F;
  border-top-color: var(--sesc-amarelo);
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 34px rgba(21,20,127,.22);
  margin: 0 !important;
}
.card-signin .card-body { padding: 2rem 2rem 1.5rem; }
/* Logo padrão (Sesc Fecomércio Senac) no cartão de login: arquivo oficial, proporção
   preservada, altura bem acima do mínimo digital de 40px e margem livre em volta.
   multiply faz o fundo branco do arquivo se fundir ao cartão, sem alterar as cores. */
.login-logo {
  display: block; width: auto; height: 132px; max-width: 70%;
  margin: 0 auto 14px; mix-blend-mode: multiply;
}
@media (max-width: 767.98px) { .login-logo { height: 104px; margin-bottom: 10px; } }
@media (max-height: 640px)   { .login-logo { height: 84px; } }
.card-signin .card-title {
  color: #15147F;
  color: var(--sesc-azul);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
.card-signin .form-signin .btn { font-size: 14px; padding: .85rem 1rem; }
.card-signin hr { margin: 1rem 0; border-color: #E7E8ED; }
.form-label-group > label { color: #536171; color: var(--sesc-texto-2); }
.form-label-group input { border-radius: 10px; }

/* ── Login: cartão translúcido (21/10/2026) ───────────────────────────────
   Fundo branco semitransparente (sem blur: o logo usa multiply e precisa se fundir ao fundo); campos continuam brancos
   para o texto digitado manter contraste. Só afeta o login (classe própria). */
.card-signin.card-login-transparente {
  background: rgba(255,255,255,.66);
  box-shadow: 0 10px 34px rgba(21,20,127,.18);
}
.card-login-transparente .card-title { text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.card-login-transparente p.text-center { color: #3A4654 !important; }
.card-login-transparente .form-label-group input { background: rgba(255,255,255,.9); border: 1px solid rgba(21,20,127,.18); }
.card-login-transparente hr { border-color: rgba(21,20,127,.15); }
/* Link "Recuperar senha" abaixo do botão Cadastrar */
.link-recuperar-box { margin: 1rem 0 .25rem; }
.link-recuperar { color: #15147F; font-weight: 600; font-size: 14px; text-decoration: underline; }
.link-recuperar:hover, .link-recuperar:focus { color: #0d0c5c; }
@media (max-width: 767.98px) {
  .card-signin.card-login-transparente { background: rgba(255,255,255,.78); }
}

/* ── Aviso (popup) da página de login ─────────────────────────────────── */
.aviso-modal-fundo {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(6, 6, 125, .62);
  z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.aviso-modal {
  position: relative;
  display: flex; align-items: stretch; gap: 0;
  width: 100%; max-width: 680px;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
  border-top: 6px solid #E5B01F;
  border-top-color: var(--sesc-amarelo);
}
.aviso-imagem {
  flex: 0 0 220px;
  background: linear-gradient(180deg, #F8F8FC 0%, #E7E8ED 100%);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 8px 0;
}
.aviso-imagem img { max-height: 300px; max-width: 100%; height: auto; display: block; }
.aviso-corpo { flex: 1 1 auto; padding: 26px 28px 22px; }
.aviso-corpo h2 {
  font-size: 20px; margin: 0 0 12px; line-height: 1.25;
  color: #15147F; color: var(--sesc-azul);
}
.aviso-corpo h2 i { color: #E5B01F; color: var(--sesc-amarelo); margin-right: 4px; }
.aviso-corpo p { font-size: 15px; line-height: 1.55; color: #3A3A3A; margin: 0 0 10px; }
.aviso-corpo .aviso-importante {
  background: #FFF7DB; border-left: 4px solid #E5B01F; border-left-color: var(--sesc-amarelo);
  border-radius: 6px; padding: 8px 12px; font-size: 14px;
}
.aviso-btn { margin-top: 8px; border-radius: 10px !important; padding: .7rem 1.4rem; font-size: 14px !important; }
.aviso-fechar {
  position: absolute; top: 6px; right: 12px; z-index: 2;
  border: none; background: transparent; font-size: 30px; line-height: 1;
  color: #536171; cursor: pointer; padding: 4px 8px;
}
.aviso-fechar:hover { color: #15147F; }
@media (max-width: 767.98px) {
  .aviso-modal-fundo { padding: 12px; align-items: center; }
  .aviso-modal { flex-direction: column; max-width: 420px; max-height: calc(100vh - 24px); overflow-y: auto; }
  .aviso-imagem { flex: 0 0 auto; padding: 12px 8px 0; }
  .aviso-imagem img { max-height: 150px; }
  .aviso-corpo { padding: 18px 18px 16px; }
  .aviso-corpo h2 { font-size: 17px; }
  .aviso-corpo p { font-size: 14px; }
  .aviso-btn { width: 100%; }
}
@media (max-height: 560px) and (max-width: 767.98px) {
  .aviso-imagem { display: none; }
}

/* Desktop / notebook: cartão sobre a área lisa da arte (metade direita) */
@media (min-width: 992px) {
  body.pagina-login > .container > .row { justify-content: flex-end; }
  body.pagina-login .col-sm-9.col-md-7.col-lg-5 { margin: 0 8vw 0 0 !important; }
}
@media (min-width: 1400px) {
  body.pagina-login .col-sm-9.col-md-7.col-lg-5 { max-width: 480px; margin-right: 12vw !important; }
}
/* Tablet: centralizado, fundo enquadrando a arte */
@media (min-width: 768px) and (max-width: 991.98px) {
  body.pagina-login { background-position: 30% center !important; }
}
/* Celular: cartão ocupa a largura; sem "fixed" (iOS não suporta com cover) */
@media (max-width: 767.98px) {
  body.pagina-login { background-attachment: scroll; background-position: 42% top !important; }
  body.pagina-login > .container { padding: 16px 12px 64px; align-items: flex-start; }
  body.pagina-login .col-sm-9.col-md-7.col-lg-5 { max-width: 100%; }
  .card-signin { background: rgba(255,255,255,.97); }
  .card-signin .card-body { padding: 1.4rem 1.2rem 1.1rem; }
  .card-signin .card-title { font-size: 1.3rem; margin-bottom: 1.1rem; }
}
@media (max-height: 640px) {
  body.pagina-login > .container { align-items: flex-start; padding-top: 12px; }
}

/* ── Rodapé ───────────────────────────────────────────────────────────── */
footer {
  font-family: Roboto, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-family: var(--sesc-fonte) !important;
  background: #15147F !important;
  background: var(--sesc-azul) !important;
  color: #fff !important;
  border-top: 3px solid #E5B01F;
  border-top: 3px solid var(--sesc-amarelo);
}

/* ── WhatsApp flutuante ───────────────────────────────────────────────── */
.zap-flutuante {
  position: fixed; right: 18px; bottom: 60px;   /* acima do rodapé fixo */
  z-index: 9990;
  display: flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff !important;
  border-radius: 30px; padding: 10px 16px 10px 12px;
  font-weight: 700; font-size: 14px; text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  transition: transform .15s, box-shadow .15s, background .2s;
}
.zap-flutuante:hover, .zap-flutuante:focus { background: #1ebe5a; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.32); }
.zap-flutuante i { font-size: 28px; line-height: 1; }
.zap-flutuante span { white-space: nowrap; }
@media (max-width: 767.98px) {
  .zap-flutuante { right: 12px; bottom: 64px; padding: 12px; border-radius: 50%; }
  .zap-flutuante span { display: none; }          /* só o ícone no celular */
  .zap-flutuante i { font-size: 30px; }
}

/* ── Menu "Contatos" (três atendimentos pelo WhatsApp) ────────────────── */
.zap-contatos { position: fixed; right: 18px; bottom: 60px; z-index: 9990; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.zap-contatos .zap-flutuante { position: static; border: none; cursor: pointer; font-family: inherit; }
.zap-painel {
  width: 290px; max-width: calc(100vw - 24px);
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.28); border-top: 5px solid #25D366;
}
.zap-painel[hidden] { display: none; }
.zap-painel-titulo { padding: 10px 14px; font-weight: 700; font-size: 14px; color: #15147F; background: #F8F8FC; }
.zap-painel-titulo i { color: #25D366; margin-right: 4px; }
.zap-painel a {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-height: 52px;
  text-decoration: none !important; color: #3A3A3A !important; border-top: 1px solid #E7E8ED;
  transition: background .15s;
}
.zap-painel a:hover, .zap-painel a:focus { background: #e7f8ee; }
.zap-painel a > i { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: #25D366; color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.zap-painel a span { display: flex; flex-direction: column; line-height: 1.25; }
.zap-painel a strong { font-size: 13.5px; color: #15147F; }
.zap-painel a small { font-size: 12.5px; color: #536171; letter-spacing: .3px; }
@media (max-width: 767.98px) {
  .zap-contatos { right: 12px; bottom: 64px; }
}

/* ── Responsividade ───────────────────────────────────────────────────── */
@media (min-width: 992px) {
  #sideNav { width: 17rem; }
}
@media (max-width: 991.98px) {
  body { padding-top: 62px; }
  #sideNav { width: 100%; }
  #sideNav .navbar-nav { max-height: 60vh; overflow-y: auto; }
  #sideNav .nav-link { padding: 10px 14px; }
  section.resume-section { padding-top: 1rem !important; }
}
@media (max-width: 767.98px) {
  body { padding-bottom: 60px; }
  .resume-section { padding: .75rem !important; }
  #resultado h5 { font-size: 18px; }
  #navbarToggleExternalContent .navbar-nav { flex-direction: column; }
  #navbarToggleExternalContent .nav-link { border-bottom: 1px solid #E7E8ED; border-radius: 0; }
  input, select, textarea, .form-control { font-size: 16px !important; }
  #capture { max-width: 100%; margin: 0 auto; }
  #botaoEmail { width: 100%; margin-bottom: 8px; }
  .pag-filtros .pag-filtro { flex: 1 1 auto; justify-content: center; }
  .edu-botoes .edu-btn { flex: 1 1 100%; justify-content: center; }
  .edu-aviso { flex-direction: column; }
  .edu-aviso-icone { margin: 0 auto; }
  .edu-modal { max-width: 100%; padding: 18px 14px; }
  footer { font-size: 11px !important; padding: 6px 0 !important; }
  .card-signin .card-body { padding: 1.25rem; }
}
@media (max-width: 575.98px) {
  .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 4px 8px !important; }
  .pag-header { flex-direction: column; align-items: stretch; }
  .pag-header .btn-atualizar { width: 100%; justify-content: center; }
}
@media print {
  body { background: #fff !important; padding: 0; }
  footer, #sideNav { display: none !important; }
}