/* ==========================================================================
   Área Restrita de Sócios — JVM Tecnologia
   Protótipo visual (MVP de Interface) — CSS global
   Paleta oficial definida em CLAUDE.md / PROJECT_RULES.md
   ========================================================================== */

:root {
  /* Paleta padrão JVM */
  --jvm-primary: #283C74;
  --jvm-primary-dark: #1B2A54;
  --jvm-secondary: #00B5D8;
  --jvm-secondary-dark: #0092AE;
  --jvm-bg: #F5F7FA;
  --jvm-text: #2D3748;

  /* Tokens "ativos" — valor padrão (paleta JVM) usado quando o tenant não
     tem cor cadastrada em sind_configuracoes. Etapa 5.1: sobrescritos por
     tenant via `style="--primary:...; ..."` inline no <html>
     (Views/layouts/master.php e layouts/auth.php), com a cor REAL vinda
     do banco (App\Services\ConfigService::resolveVisual()) — não mais
     pelos blocos [data-tenant="..."] hardcoded que existiam aqui. */
  --primary: var(--jvm-primary);
  --primary-dark: var(--jvm-primary-dark);
  --secondary: var(--jvm-secondary);
  --secondary-dark: var(--jvm-secondary-dark);

  --text-muted-2: #718096;
  --border-color: #E2E8F0;
  --surface: #FFFFFF;
  --success: #2F9E64;
  --warning: #DD9A1F;
  --danger: #E5484D;
  --info: #3B82F6;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(24, 39, 75, 0.06), 0 1px 3px rgba(24, 39, 75, 0.08);
  --shadow-md: 0 8px 24px rgba(24, 39, 75, 0.10);
  --shadow-lg: 0 20px 48px rgba(24, 39, 75, 0.18);

  --sidebar-w: 264px;
  --sidebar-w-collapsed: 84px;
  --topbar-h: 72px;
}

/* --------------------------------------------------------------------------
   Etapa 5.1 (Configuração Visual/Branding Multi-Tenant): os blocos
   html[data-tenant="apurn"]/html[data-tenant="sintern"] que existiam aqui
   foram REMOVIDOS — eram cores fixas do MVP visual (Fase de aprovação de
   layout, antes da integração com o banco), cobriam só 2 dos 5 tenants
   reais, e não correspondiam à cor real cadastrada em
   `sind_configuracoes` (a APURN, por exemplo, não tem nenhuma linha em
   `sind_configuracoes` hoje — usava um verde/dourado inventado que nunca
   existiu no banco; a SINTE-RN tem só `cor_tema=#FFA500` cadastrado, sem
   cor secundária, e o bloco aqui usava um roxo/laranja que também não
   vinha do banco). A cor de cada tenant agora vem 100% de
   `sind_configuracoes` via App\Services\ConfigService, injetada inline no
   <html> por Views/layouts/master.php e layouts/auth.php — ver
   claude/etapa-5.1-configuracao-visual.md.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--jvm-bg);
  color: var(--jvm-text);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* Foco visível e consistente para navegação por teclado (acessibilidade) */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.text-primary-jvm { color: var(--primary) !important; }
.text-secondary-jvm { color: var(--secondary) !important; }

/* Divisores reutilizáveis (evitam style="border-top/bottom:..." inline) */
.divider-top { border-top: 1px solid var(--border-color); }
.divider-bottom { border-bottom: 1px solid var(--border-color); }

/* Tamanhos de ícone padronizados (evitam style="font-size:..." inline) */
.icon-lg { font-size: 2.4rem; }
.icon-xl { font-size: 3rem; }

/* Largura padrão para dropdowns com descrição (seletor de entidade) */
.dropdown-menu-wide { min-width: 260px; }

.btn-jvm-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn-jvm-primary:hover,
.btn-jvm-primary:focus {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}
.btn-jvm-primary:active { transform: translateY(1px); }
.btn-jvm-primary:disabled { opacity: .65; }

.btn-jvm-accent {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  /* Correção de divergência — painel: .btn-login{padding:12px 24px;
     font-size:1rem}. Sem isto o botão herdava só o padding padrão do
     Bootstrap (.btn + .py-2 do markup ≈ 8px 12px), visivelmente menor que
     a referência. */
  padding: 12px 24px;
  font-size: 1rem;
}
.btn-jvm-accent:hover, .btn-jvm-accent:focus {
  background-color: var(--secondary-dark);
  border-color: var(--secondary-dark);
  color: #fff;
}

.btn-outline-jvm {
  border: 1px solid var(--border-color);
  color: var(--jvm-text);
  background: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.btn-outline-jvm:hover { border-color: var(--primary); color: var(--primary); background: #F8FAFF; }

.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  padding: .65rem .9rem;
  font-size: .95rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--secondary);
  /*
   * Etapa de Adaptação Visual — auditoria das telas internas: este anel de
   * foco usava rgba(0,181,216,...) fixo (a cor secundária PADRÃO da JVM),
   * então em qualquer tenant com cor secundária própria (ex.: SINTE-RN,
   * #FFA500) o campo ficava com foco ciano mesmo a entidade sendo laranja
   * — a única inconsistência de cor por tenant encontrada nesta auditoria.
   * color-mix() gera a mesma sombra translúcida a partir de
   * var(--secondary) (Etapa 5.1), sem precisar de uma variante "--rgb" nova.
   */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 15%, transparent);
}
.form-label {
  font-weight: 600;
  font-size: .85rem;
  color: var(--jvm-text);
  margin-bottom: .4rem;
}
.form-control[readonly], .form-control:disabled {
  background-color: #F1F4F8;
  color: var(--text-muted-2);
}

.form-control.is-dirty {
  border-color: var(--secondary);
  background-color: #F0FBFD;
}

.card-jvm {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: .5rem 1rem;
  z-index: 2000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   TELAS PÚBLICAS — Login / Recuperação de senha
   ========================================================================== */
.auth-page {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /*
   * Correção de divergência visual (comparação direta com jvm-painel-
   * cliente-master/public/assets/css/pages/login.css, arquivo que a
   * auditoria anterior não tinha localizado — só existia CSS de login.css
   * "por página", fora de main.css). Estrutura de 4 camadas idêntica ao
   * painel (spotlight que segue o mouse + 2 brilhos estáticos + gradiente
   * diagonal de base), com as MESMAS posições/tamanhos/paradas de cor do
   * original — só a cor em si é tenant-driven (var(--secondary)/
   * var(--primary)/var(--primary-dark) via color-mix(), Etapa 5.1) em vez
   * dos hex fixos do painel (#06B6D4/#333F69/#1a1f3a), porque o Portal é
   * multi-tenant e o painel não. --mouse-x/--mouse-y só existem depois do
   * primeiro mousemove — o fallback "50% 50%" evita salto visual antes
   * disso e é o resultado final em telas de toque (sem mouse).
   */
  background:
    radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), color-mix(in srgb, var(--secondary) 18%, transparent), transparent 80%),
    radial-gradient(600px circle at 65% 0px, color-mix(in srgb, var(--secondary) 9%, transparent), transparent),
    radial-gradient(250px circle at 30% 75%, color-mix(in srgb, var(--secondary) 9%, transparent), transparent),
    linear-gradient(148deg, var(--primary) 39%, var(--primary-dark) 131%);
  position: relative;
  overflow: hidden;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Correção de divergência — painel: .login-container{max-width:960px}
     + .login-card{border-radius:16px;border:1px solid #E2E2E2;box-shadow:
     0 10px 30px rgba(0,0,0,.08)}. Antes usávamos os tokens genéricos
     --radius-lg(22px)/--shadow-lg (usados também em outros cards da área
     logada) — aqui passam a ser valores literais, iguais ao painel, sem
     mexer nos tokens compartilhados por outras telas. */
  max-width: 960px;
  min-height: 560px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  /*
   * CAUSA RAIZ do carrossel "sumindo" (confirmado ao vivo em produção,
   * socios.jvmtecnologia.com.br/adurn/login, via inspeção de
   * getBoundingClientRect): com `display:flex` aqui, `.auth-card__aside`
   * chegava a ~81000px de largura computada, o Swiper media esse
   * container já "explodido" e travava o valor errado via inline style em
   * cada slide (ex. width:26973px) — o slide ativo ficava transladado
   * para muito além da tela, por isso a coluna aparecia vazia.
   *
   * Causa: `.login-swiper{width:100%}` dentro de `.auth-card__aside`
   * (item flex, cross-axis=width com align-items:center → sizing por
   * conteúdo) cria uma dependência circular de largura percentual típica
   * de flexbox — mesmo com `min-width:0` no item direto, o Swiper (com
   * `loop:true`, que duplica slides internamente) conseguia realimentar
   * essa ambiguidade a cada ciclo de autoplay/update, fazendo a largura
   * CRESCER a cada re-medição (confirmado: 26973px → 80919px → 242757px
   * em ciclos sucessivos de teste ao vivo).
   *
   * Troquei `display:flex` por `display:grid` com colunas em % fixo: uma
   * grid track dimensionada em % não tem esse piso de "min-content do
   * conteúdo" que o flexbox aplica a flex-basis — o Swiper passa a medir
   * sempre o mesmo valor estável. Testado ao vivo (min-width:0 sozinho
   * NÃO foi suficiente — voltava a explodir no ciclo seguinte de
   * autoplay; grid + min-width:0 + max-width:100% + overflow:hidden como
   * cinto-e-suspensórios se manteve estável por vários ciclos de autoplay
   * seguidos). Cada coluna continua sendo, por dentro, um flex column
   * (para centralizar o próprio conteúdo verticalmente) — só o SPLIT das
   * duas colunas deixou de ser flex.
   */
  display: grid;
  grid-template-columns: 55% 45%;
  overflow: hidden;
}

.auth-card__form {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-card__aside {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  /* Correção de divergência — painel: .login-slider-wrapper{background:
     #F8FAFC; border-left:1px solid #E2E2E2; padding:48px 32px}. Era um
     gradiente azul inventado (#EFF7FA→#E7F3FA) que não existe no painel;
     um cinza-claro neutro (não é cor de marca do tenant, é o mesmo tipo
     de token neutro que --surface/--border-color já são) reproduz a
     referência com fidelidade. */
  background: #F8FAFC;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: 1px solid var(--border-color);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--primary);
  letter-spacing: -.02em;
}
.auth-brand .dot { color: var(--secondary); }

.auth-brand-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.02em;
}

/* Etapa "Integração definitiva Painel SaaS → Área do Sócio → Portal":
   logo real do tenant (quando configurado em sind_loja_de_aplicativos_valores,
   id_aplicativo=1) substitui o badge .auth-brand-badge acima — ver
   auth/login.php e App\Services\ConfigService. Altura pareada com a do
   badge (42px) para não alterar o ritmo vertical do cabeçalho do card;
   largura limitada para não deixar um logo muito "largo" espremer o
   seletor de entidade ao lado. */
.auth-brand-logo {
  max-height: 42px;
  max-width: 180px;
  object-fit: contain;
}

.auth-aside-icon {
  /* Correção de divergência — painel: .slide-icon-wrapper{width:140px;
     height:140px;background:rgba(6,182,212,.1);margin-bottom:28px;
     font-size:4rem}. Estava a 92px/2.4rem, bem menor que a referência —
     alinhado ao tamanho real do painel (afeta também a tela "Esqueci
     minha senha", que reusa este componente no modo estático — mesmo
     tratamento visual, sem perda de funcionalidade). */
  width: 140px;
  height: 140px;
  border-radius: 50%;
  /* Etapa de Adaptação Visual — auditoria de cores por tenant (ver
     .form-control:focus acima): era rgba(0,181,216,...) fixo; agora usa a
     cor secundária real do tenant, na mesma opacidade do painel (10%). */
  background: color-mix(in srgb, var(--secondary) 10%, transparent);
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  margin-bottom: 28px;
}

/* Etapa 6.4 "Branding Completo": slide com a Imagem Representativa real do
   tenant (sind_loja_de_aplicativos_valores, id_variavel=5), quando
   configurada — ver Components/auth_aside.php e auth/login.php. Substitui
   .auth-aside-icon acima no slide institucional do tenant; mesmo peso
   visual (altura 140px, mesma margem inferior) para não alterar o ritmo do
   carrossel entre slides. object-fit:contain porque não há garantia de
   proporção do arquivo enviado pelo backoffice (evita esticar/cortar de
   forma imprevisível, mesmo raciocínio de .auth-brand-logo/.sidebar__brand-
   logo). */
.auth-aside-slide-imagem {
  width: 100%;
  max-width: 280px;
  height: 140px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-aside-imagem {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Selo de ícone padrão (icon-badge) — usado em cards de KPI, títulos de
   card, documentos e atalhos. Combine com uma classe de tom (.tone-*) e,
   quando necessário, .icon-badge--sm ou .icon-badge--circle.
   -------------------------------------------------------------------------- */
.icon-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.icon-badge--sm { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }
.icon-badge--circle { border-radius: 50%; }

/* Etapa de Adaptação Visual — auditoria de cores por tenant: .tone-primary/
   .tone-secondary são usados em ícones de KPI, documentos, declarações e
   atalhos por toda a área logada — eram rgba(...) fixos na paleta padrão
   JVM, ignorando a cor real de cada tenant (mesmo achado do form-control
   acima, só que com alcance bem maior). */
.tone-primary { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.tone-secondary { background: color-mix(in srgb, var(--secondary) 14%, transparent); color: var(--secondary-dark); }
.tone-success { background: #E4F6EC; color: var(--success); }
.tone-warning { background: #FDF1DC; color: var(--warning); }
.tone-danger { background: #FBE4E4; color: var(--danger); }

.auth-aside-dots { display: flex; gap: .4rem; margin-top: 1.6rem; }
.auth-aside-dots span { width: 8px; height: 8px; border-radius: 50%; background: #C9DCE6; display: block; }
.auth-aside-dots span.active { width: 22px; border-radius: 5px; background: var(--secondary); }

/* --------------------------------------------------------------------------
   Carrossel institucional do login (modo "slides" de Components/
   auth_aside.php) — Etapa de Adaptação Visual, referência: painel JVM.
   Reaproveita .auth-aside-icon/.text-primary-jvm/.text-muted-2 já
   existentes para o conteúdo de cada slide (mesma aparência da mensagem
   estática de antes, só que girando). A paginação reescreve as classes
   padrão do Swiper em vez de depender de --swiper-pagination-color, para
   herdar var(--secondary) do tenant igual ao resto do arquivo.
   -------------------------------------------------------------------------- */
.auth-card__aside .login-swiper {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 40px;
}
.auth-card__aside .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Correção de divergência — painel: .slide-title{font-size:1.25rem;
   font-weight:700;margin-bottom:12px} / .slide-text{font-size:.9rem;
   max-width:320px;line-height:1.6;margin:0 auto 20px}. Regras com
   especificidade dedicada (em vez de trocar as classes utilitárias do
   Bootstrap usadas na marcação, .h5/.fw-800/.small/.text-muted-2, que
   também aparecem em outras telas) — só o carrossel do login herda estes
   valores exatos, sem risco de regressão em outro lugar do Portal. */
.auth-card__aside .swiper-slide h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.auth-card__aside .swiper-slide p {
  font-size: .9rem;
  max-width: 320px;
  line-height: 1.6;
  margin: 0 auto 20px;
}
.auth-card__aside .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #CBD5E1;
  opacity: 1;
  transition: all .3s ease;
}
.auth-card__aside .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: 12px;
  background: var(--secondary);
}

.auth-benefit {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  text-align: left;
  font-size: .88rem;
  color: var(--text-muted-2);
  margin-bottom: .55rem;
}
.auth-benefit i { color: var(--secondary); margin-top: .15rem; }

/* Correção de divergência — painel: .login-title{font-size:1.75rem;
   font-weight:700;margin-bottom:6px} / .login-subtitle{font-size:.95rem;
   margin-bottom:32px} / .form-control-lg{padding:12px 16px}. Igual ao
   carrossel acima, regras com especificidade dedicada só para o cabeçalho
   e os campos do formulário de login/recuperação de senha — não mexe nas
   classes utilitárias (.h3/.fw-800/.form-control) usadas em outras telas. */
.auth-card__form h1.h3 {
  font-weight: 700;
  margin-bottom: 6px;
}
.auth-card__form p.text-muted-2.mb-4 {
  font-size: .95rem;
  margin-bottom: 32px;
}
.auth-card__form .form-control,
.auth-card__form .form-select {
  padding: 12px 16px;
  border-radius: 8px;
}

.input-group-jvm { position: relative; }
.input-group-jvm .btn-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted-2);
  padding: .4rem .6rem;
}
.input-group-jvm .form-control { padding-right: 2.6rem; }

.tenant-switch-link {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted-2);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.tenant-switch-link:hover { color: var(--primary); }

@media (max-width: 767.98px) {
  /* Com .auth-card__aside{display:none}, a grid track de 45% some, mas a
     de 55% continua reservada para .auth-card__form — sem essa troca para
     1 coluna, sobraria uma faixa em branco à direita do formulário no
     mobile. (Antes, com display:flex, isso não acontecia porque um item
     flex escondido não deixa "buraco" — comportamento que muda ao trocar
     para grid, corrigido aqui.) */
  .auth-card { grid-template-columns: 1fr; min-height: auto; }
  .auth-card__aside { display: none; }
  .auth-card__form { padding: 2.25rem 1.6rem; }
}

/* ==========================================================================
   SHELL INTERNO — Sidebar + Topbar
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(190deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  transition: transform .25s ease, width .2s ease;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1.35rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  min-height: var(--topbar-h);
}
/* Mesma lógica de .auth-brand-logo (login) aplicada à marca do menu
   lateral — ver Components/sidebar.php. Fundo do sidebar é escuro
   (--primary), então um logo sem fundo próprio pode ficar pouco legível;
   isso é uma limitação conhecida do PNG enviado pelo tenant, não algo
   que o CSS resolve sozinho. */
.sidebar__brand-logo {
  max-height: 32px;
  max-width: 150px;
  object-fit: contain;
}
.sidebar__brand small {
  display: block;
  font-weight: 500;
  font-size: .68rem;
  color: rgba(255,255,255,.65);
  letter-spacing: .04em;
}

.sidebar__nav { flex: 1; overflow-y: auto; padding: 1rem .75rem; }
.sidebar__nav .nav-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.45);
  padding: .5rem .85rem .4rem;
}
.sidebar__nav .nav-link {
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .68rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .2rem;
  transition: background-color .15s ease, color .15s ease;
}
.sidebar__nav .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar__nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar__nav .nav-link.active {
  background: #fff;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.sidebar__nav .nav-link.active i { color: var(--secondary-dark); }
.sidebar__nav .nav-divider { border-top: 1px solid rgba(255,255,255,.12); margin: .75rem .35rem; }

.sidebar__footer { padding: .9rem .75rem 1.1rem; }
.sidebar__footer .nav-link { color: rgba(255,255,255,.78); }
.sidebar__footer .nav-link:hover { background: rgba(229,72,77,.18); color: #fff; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 1035;
}

.main-area {
  flex: 1 1 auto;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.topbar__menu-btn {
  display: none;
  border: 1px solid var(--border-color);
  background: #fff;
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--jvm-text);
}

.topbar__title { font-weight: 700; font-size: 1.05rem; color: var(--jvm-text); }
.topbar__title small { display: block; font-weight: 500; font-size: .78rem; color: var(--text-muted-2); }

.entity-switcher .btn {
  border: 1px solid var(--border-color);
  background: #F8FAFC;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .95rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.entity-switcher .btn:hover { border-color: var(--secondary); background: #fff; }
.entity-switcher .badge-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--primary); display: inline-block;
}

.avatar-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
  flex-shrink: 0;
}
.avatar-circle.lg { width: 84px; height: 84px; font-size: 1.6rem; border: 4px solid #fff; box-shadow: var(--shadow-sm); }

/* Linha de identidade sobreposta ao .profile-cover */
.profile-identity { margin-top: -48px; }

.notif-btn {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--jvm-text);
}
.notif-btn .dot {
  position: absolute; top: 9px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 2px solid #fff;
}

.page-content { padding: 1.75rem; flex: 1; }
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: .2rem; }
.page-header .breadcrumb { font-size: .82rem; margin-bottom: 0; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-backdrop.is-open { display: block; }
  .main-area { margin-left: 0; }
  .topbar__menu-btn { display: inline-flex; }
}

/* ==========================================================================
   Componentes reutilizáveis
   ========================================================================== */

/* Badges de status de filiação */
.badge-status { font-weight: 700; font-size: .74rem; padding: .42em .75em; border-radius: 999px; letter-spacing: .01em; }
.badge-status.status-ativo { background: #E4F6EC; color: var(--success); }
.badge-status.status-inadimplente { background: #FDF1DC; color: var(--warning); }
.badge-status.status-suspenso { background: #FBE4E4; color: var(--danger); }
.badge-status.status-cancelado { background: #EDF0F4; color: var(--text-muted-2); }
/* Etapa 4 (Minha Filiação): 5º estado, além dos 4 pedidos no CLAUDE.md —
   sócio sem contrato lançado (achado da auditoria, Fase 3/8: é o caso da
   maioria dos sócios em tenants como a APURN). Tom neutro/informativo
   (não é um erro nem uma pendência do sócio). */
.badge-status.status-naofiliado { background: #E8F1FE; color: var(--info); }

/* Cabeçalho padrão de card (selo de ícone + título), reaproveitado em
   todas as telas internas via Components/card_title.php */
.card-title { display: flex; align-items: center; gap: .7rem; }
.card-title__text { font-weight: 800; margin-bottom: 0; }
.card-title__text small { display: block; font-weight: 500; font-size: .78rem; color: var(--text-muted-2); }

/* Banner de boas-vindas do Dashboard */
.hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 55%, var(--secondary-dark) 130%);
  color: #fff;
  padding: 2rem 2.25rem;
  box-shadow: var(--shadow-md);
}
.hero-banner::after {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  top: -140px; right: -80px;
}
.hero-banner__eyebrow { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.75); letter-spacing: .02em; }
.hero-banner__name { font-size: 1.6rem; font-weight: 800; margin-bottom: .1rem; }
.hero-banner .chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 600; font-size: .82rem;
  padding: .4em .9em; border-radius: 999px;
}
.hero-banner .badge-status { background: rgba(255,255,255,.92); }

/* Linha de indicadores (KPIs) */
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  transition: box-shadow .15s ease, transform .15s ease;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-card__value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.kpi-card__label { font-size: .78rem; color: var(--text-muted-2); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-top: .2rem; }

/* Faixa de destaque (cover) atrás do avatar — tela de Perfil (card com p-4 = 1.5rem) */
.profile-cover {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  height: 88px;
  background: linear-gradient(120deg, var(--primary) 0%, var(--secondary-dark) 100%);
  margin: -1.5rem -1.5rem 0;
}

/* Mini-lista (ex.: últimas mensalidades em Minha Filiação) */
.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 0; font-size: .88rem;
}
.mini-list li + li { border-top: 1px solid var(--border-color); }
.mini-list .mes { color: var(--jvm-text); font-weight: 600; }
.mini-list .valor { color: var(--text-muted-2); }

/* Cards de atalho do dashboard */
.shortcut-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  height: 100%;
  display: block;
  color: var(--jvm-text);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.shortcut-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--secondary) 40%, transparent); color: var(--jvm-text); }
.shortcut-card__icon { margin-bottom: 1rem; }
.shortcut-card__title { font-weight: 700; margin-bottom: .3rem; }
.shortcut-card__desc { font-size: .85rem; color: var(--text-muted-2); margin-bottom: .9rem; }
.shortcut-card__cta { font-size: .82rem; font-weight: 700; color: var(--secondary-dark); display: inline-flex; align-items: center; gap: .3rem; }

/* Tabela de documentos */
.doc-row { transition: background-color .1s ease; }
.doc-row:hover { background-color: #F8FAFC; }
.doc-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.doc-row__actions { flex-wrap: wrap; }
@media (max-width: 575.98px) {
  .doc-row__actions { width: 100%; }
  .doc-row__actions .btn { flex: 1 1 auto; }
}

/* Declarações */
.declaracao-card { text-align: center; padding: 1.75rem 1.4rem; }
.declaracao-card .icon-wrap {
  width: 64px; height: 64px; border-radius: 50%;
  background: color-mix(in srgb, var(--secondary) 12%, transparent); color: var(--secondary-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 1rem;
}
.history-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem 0;
}
.history-item + .history-item { border-top: 1px solid var(--border-color); }

/* Checklist de requisitos de senha */
.pwd-requirements { list-style: none; padding: 0; margin: .75rem 0 0; }
.pwd-requirements li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--text-muted-2);
  padding: .2rem 0;
}
.pwd-requirements li i { font-size: 1rem; color: #CBD5E1; }
.pwd-requirements li.ok { color: var(--success); }
.pwd-requirements li.ok i { color: var(--success); }
.pwd-requirements li.ok i::before { content: "\f26a"; } /* bi-check-circle-fill fallback via JS class swap */

/* Timeline simples (filiação) */
.timeline { position: relative; padding-left: 1.6rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--border-color); }
.timeline-item { position: relative; padding-bottom: 1.25rem; }
.timeline-item::before {
  content: ""; position: absolute; left: -1.6rem; top: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--secondary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--secondary);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .date { font-size: .76rem; color: var(--text-muted-2); font-weight: 600; }

/* Toast container helper */
.toast-stack { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 2000; }

/* Skeleton / loading dots */
.dot-flashing { display: inline-flex; gap: 4px; }
.dot-flashing span {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: dotFlash 1s infinite ease-in-out;
}
.dot-flashing span:nth-child(2) { animation-delay: .15s; }
.dot-flashing span:nth-child(3) { animation-delay: .3s; }
@keyframes dotFlash { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Rodapé da área logada */
.app-footer {
  text-align: center;
  color: var(--text-muted-2);
  font-size: .8rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border-color);
  margin-top: 1rem;
}

/* Utilities */
.fw-800 { font-weight: 800; }
.text-muted-2 { color: var(--text-muted-2); }
.locked-field { position: relative; }
.locked-field .lock-icon { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); color: #A0AEC0; }

@media (max-width: 575.98px) {
  .page-content { padding: 1.1rem; }
  .hero-banner { padding: 1.5rem 1.35rem; border-radius: var(--radius-md); }
  .hero-banner__name { font-size: 1.3rem; }
  .kpi-card { padding: 1rem 1.1rem; }
  .kpi-card__value { font-size: 1.25rem; }
  /* Correção de divergência — painel: @media(max-width:575.98px)
     .login-form-wrapper{padding:32px 24px}. */
  .auth-card__form { padding: 32px 24px; }
}