/* /recursos/css/tema.css */
/* CSS único do sistema — mobile-first e responsivo */
/* ========================================================================== */
/* 1) BASE / LAYOUT GERAL                                                     */
/* ========================================================================== */

html,
body {
  height: 100%;
}

:root {
  /* tema claro – leves contrastes */
  --bg-claro: #f3f4f6;
  /* cinza 100 (fundo) */
  --card-borda: #e5e7eb;
  /* cinza 200 */
}

.sombra-suave {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.texto-centro {
  text-align: center;
}

/* respiro entre navbar e conteúdo */
.espaco-navbar {
  height: 110px;
}

@media (min-width: 576px) {
  .espaco-navbar {
    height: 118px;
  }
}

@media (min-width: 992px) {
  .espaco-navbar {
    height: 126px;
  }
}

/* largura do container um pouco menor */
.container-limitado {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

.cartao {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
  padding: 16px;
  margin-top: 3rem !important;
}

@media (min-width: 992px) {
  .cartao {
    padding: 20px;
  }
}

/* placeholders (modo claro) */
::placeholder {
  color: rgba(108, 117, 125, .9);
  opacity: 1;
}

/* suporte IE/Edge legado */
:-ms-input-placeholder {
  color: rgba(230, 230, 230, .78);
}

::-ms-input-placeholder {
  color: rgba(230, 230, 230, .78);
}

/* ========================================================================== */
/* 2) NAVBAR + LOGO (AMBOS OS TEMAS)                                          */
/* ========================================================================== */

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

/* Na NAV: logo branca (arquivo *light*), 50x50 */
.logo-wrap {
  display: inline-flex;
  align-items: center;
  height: 50px;
  line-height: 1;
}

.logo-brand {
  height: 50px !important;
  width: auto !important;
  display: inline-block;
}

/* Logo de acordo com o tema na página de login */

body:not(.tema-escuro) {
  .logo-light {
    display: inline-block !important;
  }

  /* usamos sempre a branca */
  .logo-dark {
    display: none !important;
  }

  /* preta desativada */
}

body.tema-escuro {
  .logo-light {
    display: none !important;
  }

  /* branca desativada */
  .logo-dark {
    display: inline-block !important;
  }

  /* usamos sempre a preta */
}

/* hambúrguer sempre branco */
.navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .45);
}

.navbar .navbar-toggler-icon {
  /* SVG branco – não depende de filtros */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  opacity: 1 !important;
  filter: none !important;
}

/* botões de topo (TEMA/SAIR) consistentes */
.navbar .btn-outline-light {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .6) !important;
  background: transparent;
}

.navbar .btn-outline-light:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}

/* dropdowns da navbar – base */
.navbar .dropdown-menu {
  min-width: 220px;
  padding: .25rem 0;
  border-radius: 10px;
  border-width: 1px;
}

.navbar .dropdown-item {
  font-weight: 500;
}

/* ========================================================================== */
/* 3) TEMA CLARO                                                               */
/* ========================================================================== */

body:not(.tema-escuro) {
  background: var(--bg-claro);
  color: #1f2937;
  /* cinza 800 */
}

/* nav azul (padrão do sistema) + textos cinza-claro/hover branco */
body:not(.tema-escuro) .navbar {
  background: #0b5ed7 !important;
}

body:not(.tema-escuro) .navbar .navbar-brand,
body:not(.tema-escuro) .navbar .nav-link,
body:not(.tema-escuro) .navbar .navbar-text,
body:not(.tema-escuro) .navbar .btn {
  color: #e5e7eb !important;
}

body:not(.tema-escuro) .navbar .nav-link:hover,
body:not(.tema-escuro) .navbar .nav-link:focus {
  color: #fff !important;
}

/* dropdown da nav no claro: cinza com fonte branca */
body:not(.tema-escuro) .navbar .dropdown-menu {
  background: #3b4452;
  border-color: #2a3240;
}

body:not(.tema-escuro) .navbar .dropdown-item {
  color: #fff;
}

body:not(.tema-escuro) .navbar .dropdown-item:hover,
body:not(.tema-escuro) .navbar .dropdown-item:focus {
  background: #2f3642;
  color: #fff;
}

/* ========================================================================== */
/* 4) TEMA ESCURO                                                              */
/* ========================================================================== */

body.tema-escuro {
  background: #0b0f15;
  /* fundo escuro neutro */
  color: #e6e6e6;
}

/* cartões, inputs e tabelas em dark */
body.tema-escuro .cartao {
  background: #111827;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}

body.tema-escuro .table {
  color: #e6e6e6;
}

body.tema-escuro .form-control {
  background: #0f131a;
  border-color: #2a3240;
  color: #e6e6e6;
}

body.tema-escuro .form-control::placeholder {
  color: #6b7280;
}

/* Botões outline no escuro */
body.tema-escuro .btn-outline-secondary {
  color: #cbd5e1;
  border-color: #64748b;
  background: transparent;
}

body.tema-escuro .btn-outline-secondary:hover,
body.tema-escuro .btn-outline-secondary.active,
body.tema-escuro .btn-outline-secondary:active {
  background: #334155;
  color: #fff;
  border-color: #334155;
}

body.tema-escuro .btn-outline-success {
  color: #34d399;
  border-color: #10b981;
}

body.tema-escuro .btn-outline-success:hover {
  background: #059669;
  color: #fff;
  border-color: #059669;
}

body.tema-escuro .btn-outline-danger {
  color: #fda4af;
  border-color: #f87171;
}

body.tema-escuro .btn-outline-danger:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}

/* ========================================================================== */
/* 5) LOGIN                                                                    */
/* ========================================================================== */

/* container do formulário */
.form-autenticacao {
  max-width: 380px;
  margin: 0 auto;
}

.btn-acesso {
  width: 100%;
  padding: 12px 16px;
  font-weight: 600;
}

.login-page .form-autenticacao {
  max-width: 340px;
  margin-top: .5rem !important;
}

.login-page .form-autenticacao.cartao {
  padding: 16px 20px;
}

@media (min-width:576px) {
  .login-page .form-autenticacao.cartao {
    padding: 18px 24px;
  }
}

/* LOGO no login – AUMENTADA para 64px */
.login-logo .logo-wrap {
  height: 64px;
}

/* era 50px */
.login-logo .logo-brand {
  height: 64px !important;
}

/* era 50px */

/* Força logo branca também no bloco de login */
.login-logo .logo-light {
  display: inline-block !important;
}

.login-logo .logo-dark {
  display: none !important;
}

/* Título + subtítulo (“Associado”/“Administração”) */
.login-titulo {
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: .15rem;
  font-weight: 700;
}

.login-subtitulo {
  font-size: .9rem;
  color: #6b7280;
  margin-bottom: .65rem;
}

body.tema-escuro .login-subtitulo {
  color: #cbd5e1;
}

/* INPUTS MAIS BAIXOS (reduzido) */
.login-page .form-autenticacao .form-control {
  padding: 8px 12px;
  /* era 10px 14px */
  line-height: 1.35;
  /* ligeiramente mais compacto */
  height: auto;
  /* deixa a altura seguir conteúdo */
  font-size: 0.96rem;
}

.login-page .form-autenticacao .form-control:focus {
  padding: 8px 12px;
}

/* Links discretos no rodapé do login */
.login-links-rodape a {
  color: #9aa3af;
  text-decoration: none;
}

.login-links-rodape a:hover {
  color: #6b7280;
  text-decoration: underline;
}

/* ========================================================================== */
/* 6) LISTA EM CARDS (MOBILE)                                                  */
/* ========================================================================== */

.lista-cards .card-registro {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .06);
}

.titulo-card {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: .25rem;
}

.linha-card {
  font-size: .92rem;
  color: #6c757d;
}

.linha-card .rotulo {
  color: #6c757d;
  font-weight: 600;
}

/* tema escuro nos cards mobile */
body.tema-escuro .lista-cards .card-registro {
  background: #171a21;
  border-color: #2a3240;
}

body.tema-escuro .linha-card,
body.tema-escuro .linha-card .rotulo {
  color: #cfd3dc;
}

/* ========================================================================== */
/* 7) UTILITÁRIOS                                                              */
/* ========================================================================== */

.truncate-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate-2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

/* Neutraliza o amarelo do autofill e mantém o mesmo fundo do input
     para tema claro e escuro */
:root {
  --input-bg-light: #fff;
  --input-bg-dark: #0b1020;
}

body:not(.tema-escuro) {
  --autofill-bg: var(--input-bg-light);
}

body.tema-escuro {
  --autofill-bg: var(--input-bg-dark);
}

/* Chrome/Edge */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
  -webkit-text-fill-color: inherit !important;
  caret-color: inherit !important;
  transition: background-color 9999s ease-in-out 0s;
  /* evita “flash” */
}

/* Safari (WebKit) extra */
input:-webkit-autofill {
  background-clip: content-box;
}

/* Garante os campos no mesmo padrão visual */
body.tema-escuro .form-control {
  background: var(--input-bg-dark);
  color: #e7edf7;
  border-color: #2a3240;
}

body:not(.tema-escuro) .form-control {
  background: var(--input-bg-light);
}

/* ===== MENU ASSOCIADO – cantos arredondados elegantes ===== */

/* Card principal (o “bloco cinza”) */
#menuAssoc .card{
  border-radius: 12px;                 /* ← raio principal */
  overflow: hidden;                    /* header não vaza o raio */
  border: 1px solid rgba(0,0,0,.08);   /* sutileza de borda */
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  background: #fff;
  margin-bottom: 16px;
}

/* Header do acordeão (faixa clicável) */
#menuAssoc .card-header{
  background: #f3f5f9;                 /* cinza frio leve */
  border: 0;
  padding: 0;                           /* o botão já tem padding */
}

/* Botão do header (ocupa toda a faixa) */
#menuAssoc .card-header .btn-link{
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none !important;
  font-weight: 700;
  color: #212529;
  padding: 14px 16px;
  /* não precisa radius aqui porque o card já tem overflow:hidden */
}
#menuAssoc .card-header .btn-link:hover { filter: brightness(.98); }

/* Corpo do acordeão */
#menuAssoc .card-body{ padding: 14px; }

/* Botões internos do menu (Meus dados, Meus empréstimos, etc.) */
#menuAssoc .btn.btn-outline-primary.btn-block.btn-lg.btn-menu{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 10px;                  /* arredonda itens internos */
  border-width: 1px;
  padding-top: .9rem;
  padding-bottom: .9rem;
  font-size: 1rem;
}
#menuAssoc .btn-menu .nav-icon{
  width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain;
}

/* Tema escuro (mantém o mesmo raio) */
body.tema-escuro #menuAssoc .card{
  background: #121a2e;
  border: 1px solid #2a3240;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
body.tema-escuro #menuAssoc .card-header{
  background: #0f1626;
  border-bottom: 1px solid #2a3240;
}
body.tema-escuro #menuAssoc .card-header .btn-link,
body.tema-escuro #menuAssoc .card-body{ color: #e7edf7; }
body.tema-escuro .nav-icon{ filter: invert(1) brightness(1.2) contrast(1.05); opacity:.95; }

/* Sombra sutil nos blocos (cards) do menu */
#menuAssoc .card{
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: box-shadow .18s ease, transform .12s ease;
}
#menuAssoc .card:hover{
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  transform: translateY(-1px);
}

/* Sombra discreta nos botões internos */
#menuAssoc .btn.btn-outline-primary.btn-block.btn-lg.btn-menu{
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: box-shadow .18s ease, transform .12s ease;
}
#menuAssoc .btn.btn-outline-primary.btn-block.btn-lg.btn-menu:hover{
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* Dark mode: mesma sutileza, só um pouco mais denso */
body.tema-escuro #menuAssoc .card{
  box-shadow: 0 2px 10px rgba(0,0,0,.30);
}
body.tema-escuro #menuAssoc .card:hover{
  box-shadow: 0 6px 20px rgba(0,0,0,.42);
}
body.tema-escuro #menuAssoc .btn.btn-outline-primary.btn-block.btn-lg.btn-menu{
  box-shadow: 0 1px 4px rgba(0,0,0,.26);
}
body.tema-escuro #menuAssoc .btn.btn-outline-primary.btn-block.btn-lg.btn-menu:hover{
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

  /* ===== Rodapé com contraste (aplica aqui também) ===== */
  footer, footer small, footer .text-muted { color:#fff !important; opacity:.95; }
  footer a{ color:#fff !important; text-decoration: underline; }
  footer a:hover{ opacity: .85; }