/* ============================================================
   PONTE COM O BOOTSTRAP: botões/textos "primary" passam a
   usar as cores da marca no sistema todo, sem precisar mexer.
   ============================================================ */
.btn{transition-property:transform,box-shadow,background-color,border-color,color;
  transition-duration:200ms;transition-timing-function:cubic-bezier(.22,.61,.36,1);
  border-radius:var(--radius-sm);font-weight:var(--peso-forte);letter-spacing:-.005em;
  padding:.55rem 1.05rem}
.btn:active{transform:scale(.98)}
/* Botão cheio: quase sem sombra parado e, no hover, uma elevação curta
   da própria cor. Brilho largo só atrapalha. */
.btn-acento,.btn-primary{box-shadow:0 1px 2px rgba(15,23,42,.06)}
.btn-acento:hover,.btn-primary:hover{box-shadow:0 8px 20px -12px color-mix(in srgb,var(--cor-acento) 80%,transparent);
  transform:translateY(-1px)}
.btn-sm{padding:.34rem .7rem}
/* Tabela: o Bootstrap 5.3 pinta o fundo e a cor de cada célula com as
   variáveis dele (fundo do body dele, branco), que não sabem dos nossos
   temas. Sem isto, no tema escuro a célula ficava branca com texto
   claro por cima, ilegível. Transparente deixa aparecer o cartão de
   trás, e o hover da linha (herdado.css) volta a funcionar. */
.table{--bs-table-bg:transparent;--bs-table-color:var(--cor-texto);--bs-table-border-color:var(--cor-border);
  --bs-table-hover-color:var(--cor-texto);--bs-table-striped-color:var(--cor-texto);--bs-table-active-color:var(--cor-texto)}
.btn-primary{--bs-btn-color:var(--cor-primaria-texto,#fff);--bs-btn-bg:var(--cor-primaria);--bs-btn-border-color:var(--cor-primaria);
  --bs-btn-hover-color:var(--cor-primaria-texto,#fff);--bs-btn-hover-bg:var(--cor-secundaria);--bs-btn-hover-border-color:var(--cor-secundaria);
  --bs-btn-active-color:var(--cor-primaria-texto,#fff);--bs-btn-active-bg:var(--cor-secundaria);--bs-btn-active-border-color:var(--cor-secundaria);
  --bs-btn-disabled-bg:var(--cor-primaria);--bs-btn-disabled-border-color:var(--cor-primaria)}
.btn-outline-primary{--bs-btn-color:var(--cor-primaria);--bs-btn-border-color:var(--cor-primaria);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--cor-primaria);--bs-btn-hover-border-color:var(--cor-primaria);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--cor-primaria);--bs-btn-active-border-color:var(--cor-primaria)}
.btn-acento{--bs-btn-color:var(--cor-acento-texto);--bs-btn-bg:var(--cor-acento);--bs-btn-border-color:var(--cor-acento);
  --bs-btn-hover-color:var(--cor-acento-texto);--bs-btn-hover-bg:color-mix(in srgb,var(--cor-acento) 88%,#000);
  --bs-btn-hover-border-color:color-mix(in srgb,var(--cor-acento) 88%,#000);
  --bs-btn-active-color:var(--cor-acento-texto);--bs-btn-active-bg:color-mix(in srgb,var(--cor-acento) 80%,#000);
  --bs-btn-active-border-color:color-mix(in srgb,var(--cor-acento) 80%,#000);
  --bs-btn-disabled-color:var(--cor-acento-texto);--bs-btn-disabled-bg:var(--cor-acento);
  --bs-btn-disabled-border-color:var(--cor-acento)}
.text-primary{color:var(--cor-primaria)!important}
.bg-primary{background-color:var(--cor-primaria)!important}
.border-primary{border-color:var(--cor-primaria)!important}
.spinner-border.text-primary{color:var(--cor-primaria)!important}

/* ── LOGIN: vitrine da marca + acesso ─────────────────────────
   Duas metades. A esquerda é a marca da empresa em área cheia (sempre
   escura, com a primária dela): logo, frase grande com o <strong> no
   acento, destaques e um céu de prédios desenhado com as cores da
   marca. A direita é o acesso, que segue o tema claro/escuro como o
   resto do sistema. Nenhuma cor de cliente fixa aqui: tudo sai das
   variáveis que o aplicarMarca() escreve. */
#tela-login{display:flex;min-height:100vh;min-height:100dvh;background:var(--cor-bg);color:var(--cor-texto)}
/* O JS abre essa tela com style.display = '' (e não 'block'), porque o
   'block' anulava o flex. */

.login-vitrine{position:sticky;top:0;flex:1.15;overflow:hidden;height:100vh;height:100dvh;color:#fff;display:flex;flex-direction:column;
  padding:clamp(28px,4vw,56px) clamp(28px,4.5vw,72px);isolation:isolate;
  --lv-fundo:color-mix(in srgb,var(--marca-primaria) 30%,#060B1A);
  background:
    radial-gradient(1px 1px at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0) 0 0/26px 26px,
    radial-gradient(900px 600px at 0% 0%,color-mix(in srgb,var(--marca-secundaria) 34%,transparent),transparent 60%),
    linear-gradient(160deg,var(--lv-fundo) 0%,color-mix(in srgb,var(--marca-primaria) 55%,#0B1430) 100%)}
/* Foto do cliente (marca.imagem_fundo): entra por cima do degradê e
   ganha um véu, pro texto branco continuar legível em qualquer foto. */
.login-vitrine.com-foto{background-size:cover;background-position:center}
.login-vitrine.com-foto::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(6,11,26,.86) 0%,rgba(6,11,26,.55) 55%,rgba(6,11,26,.25) 100%)}
.login-vitrine.com-foto .lv-arte{display:none}

.lv-arte{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lv-arte svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;max-height:30%;display:block;opacity:.9}
/* O arco: um anel grosso no acento, saindo pela borda direita. */
.lv-arte::before{content:'';position:absolute;width:min(72vh,640px);aspect-ratio:1;border-radius:50%;
  right:calc(min(72vh,640px) * -.42);top:calc(min(72vh,640px) * -.28);
  border:clamp(18px,2.6vw,34px) solid color-mix(in srgb,var(--cor-acento) 72%,transparent);
  -webkit-mask:linear-gradient(200deg,#000 25%,transparent 80%);mask:linear-gradient(200deg,#000 25%,transparent 80%)}
.lv-predio{fill:color-mix(in srgb,var(--marca-primaria) 28%,#0A1226);stroke:rgba(255,255,255,.05)}
.lv-jan{fill:rgba(255,255,255,.08)}
.lv-jan.a{fill:var(--cor-acento);opacity:.85}
.lv-jan.b{fill:color-mix(in srgb,var(--marca-secundaria) 70%,#fff);opacity:.35}

.lv-marca{display:flex;align-items:center;gap:14px;min-width:0}
.lv-marca .marca-nome{font-family:var(--fonte-titulo);font-weight:700;font-size:1.15rem;letter-spacing:.01em;color:#fff;line-height:1.15}
.lv-marca .marca-produto{display:block;font-size:.78rem;color:rgba(255,255,255,.62)}
.login-brand-icon{width:52px;height:52px;flex-shrink:0;border-radius:16px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.login-brand-icon i{font-size:1.45rem;color:#fff}
.login-brand-icon img{max-width:100%;max-height:100%;object-fit:contain}
/* Com logo do cliente, o quadrado some e a logo aparece inteira. */
.login-brand-icon.com-logo{width:auto;max-width:220px;height:56px;background:none;border:none;border-radius:0}

.lv-texto{margin:auto 0;padding:clamp(24px,5vh,56px) 0 clamp(64px,14vh,150px);max-width:560px}
.lv-eyebrow{display:flex;align-items:center;gap:12px;font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.78)}
.lv-eyebrow::before{content:'';width:24px;height:2px;border-radius:2px;background:var(--cor-acento)}
.login-tagline{font-family:var(--fonte-titulo);font-weight:800;color:#fff;margin:18px 0 0;
  font-size:clamp(2rem,1.1rem + 2.2vw,3.15rem);line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.login-tagline strong{color:var(--cor-acento);font-weight:800}
.login-features{display:flex;flex-direction:column;gap:18px;margin-top:clamp(28px,4vh,40px)}
.login-feature{display:flex;align-items:flex-start;gap:14px}
.login-feature-icon{width:40px;height:40px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--cor-acento);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.login-feature strong{display:block;font-size:.95rem;font-weight:700;color:#fff}
.login-feature small{display:block;margin-top:2px;color:rgba(255,255,255,.66);font-size:.84rem;line-height:1.45}
.lv-rodape{font-size:.78rem;color:rgba(255,255,255,.6)}

/* ── Lado do acesso ── */
.login-acesso{position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  padding:clamp(72px,8vh,96px) clamp(20px,5vw,72px) 40px;background:var(--cor-bg)}
.la-tema{position:absolute;top:20px;right:20px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--cor-card);color:var(--cor-texto);border:1px solid var(--cor-border);cursor:pointer;transition:border-color .2s}
.la-tema:hover{border-color:var(--cor-acento)}
.la-caixa{width:100%;max-width:440px}
.la-marca-mobile{display:none}
.la-cab{margin-bottom:26px}
.la-cab .lv-eyebrow{color:var(--cor-texto-muted)}
.la-cab h2{font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(2rem,1.6rem + 1vw,2.5rem);letter-spacing:-.035em;
  color:var(--cor-texto);margin:14px 0 6px;line-height:1.1}
.la-cab p,.la-convite{color:var(--cor-texto-muted);font-size:.95rem;margin:0}
.login-acesso .form-label{font-size:.84rem;font-weight:600;color:var(--cor-texto);margin-bottom:6px}
.login-acesso .form-control,.login-acesso .form-select{min-height:52px;border-radius:14px!important;font-size:.95rem}
.login-input-icon{position:relative}
.login-input-icon>i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--cor-texto-muted);font-size:.95rem;pointer-events:none;z-index:2}
.login-input-icon input{padding-left:44px!important}
#inp-senha{padding-right:46px!important}
.login-input-icon .toggle-senha{position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--cor-texto-muted);cursor:pointer;
  font-size:.95rem;background:none;border:none;padding:10px;display:flex;align-items:center;justify-content:center;z-index:2}
.la-linha{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 24px}
.la-linha .form-check-label{font-size:.88rem;color:var(--cor-texto)}
.la-linha a,.la-nota a{font-size:.88rem;font-weight:600;color:var(--cor-acento-escuro);text-decoration:none}
.la-linha a:hover,.la-nota a:hover{text-decoration:underline}
.login-acesso .form-check-input:checked{background-color:var(--cor-acento);border-color:var(--cor-acento)}
.la-entrar{width:100%;min-height:54px;border-radius:14px!important;font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--cor-acento) 80%,transparent)}
.la-nota{text-align:center;margin:20px 0 0;font-size:.86rem;color:var(--cor-texto-muted)}
.la-admin{text-align:center;margin:36px 0 0;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--cor-border) 70%,transparent)}
.la-admin a{font-size:.76rem;color:var(--cor-texto-muted);text-decoration:none}
.la-admin a:hover{color:var(--cor-texto)}
.login-acesso .alert{border-radius:14px;font-size:.88rem}
/* Alternador síndico/morador: pílula segmentada. */
.login-acesso .perfil-toggle{border-radius:999px;padding:5px;margin-bottom:22px;background:color-mix(in srgb,var(--cor-primaria) 7%,transparent)}
.login-acesso .perfil-toggle button{border-radius:999px;padding:10px}

/* Telas médias: a vitrine estreita, a frase encolhe. */
@media(max-width:1100px){
  .login-vitrine{flex:1}
  .login-feature small{display:none}
}
/* Janela baixa (notebook pequeno): a vitrine tem a altura da tela, então
   o que não cabe sai antes de cortar a frase. */
@media(min-width:901px) and (max-height:760px){
  .login-feature small{display:none}
  .login-features{gap:12px}
}
@media(min-width:901px) and (max-height:620px){ .login-features{display:none} }
/* Celular e tablet em pé: só o acesso, com a marca em cima. */
@media(max-width:900px){
  .login-vitrine{display:none}
  .login-acesso{align-items:flex-start;padding:76px 20px 32px}
  .la-marca-mobile{display:flex;align-items:center;gap:12px;margin-bottom:34px}
  .la-marca-mobile .login-brand-icon{width:46px;height:46px;border-radius:14px;
    background:color-mix(in srgb,var(--cor-primaria) 10%,transparent);border-color:var(--cor-border)}
  .la-marca-mobile .login-brand-icon i{color:var(--cor-primaria);font-size:1.25rem}
  .la-marca-mobile .login-brand-icon.com-logo{background:none;border:none;height:44px}
  .la-marca-mobile .marca-nome{font-family:var(--fonte-titulo);font-weight:700;font-size:1.05rem;color:var(--cor-primaria)}
  .la-marca-mobile .marca-produto{display:block;font-size:.76rem;color:var(--cor-texto-muted)}
  .la-tema{top:16px;right:16px}
}
/* ── Carregando (F5 com sessão guardada) ──────────────────────
   Enquanto a sessão é conferida, nem login nem sistema: uma tela lisa
   com o indicador. A classe `com-sessao` vem do script do <head>; o tema
   ainda não foi aplicado nesse instante, então o escuro sai do
   `data-tema-inicial` (tema salvo) ou da preferência do aparelho. */
#tela-carregando{display:none;position:fixed;inset:0;z-index:3000;align-items:center;justify-content:center;
  background:var(--cor-bg);color:var(--cor-acento)}
html.com-sessao #tela-carregando{display:flex}
html.com-sessao #tela-login{display:none}
html[data-tema-inicial$="noite"] #tela-carregando,html[data-tema-inicial="tema-midnight"] #tela-carregando,
html[data-tema-inicial="tema-neon"] #tela-carregando{background:var(--cor-sidebar)}
@media (prefers-color-scheme: dark){ html.com-sessao:not([data-tema-inicial]) #tela-carregando{background:var(--cor-sidebar)} }

/* LAYOUT PRINCIPAL */
#app{display:none}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(6,14,28,.65);backdrop-filter:blur(2px);z-index:99}
#sidebar-overlay.show{display:block}
/* MENU LATERAL: fixo à esquerda no desktop, gaveta abaixo de 992px.
   Voltou a ser coluna (antes era um painel de ícones sob demanda): é
   a lateral marinho do portfólio, e mostra onde você tá sem precisar
   clicar. O fundo é --cor-sidebar, que no padrão sai da primária da
   empresa. */
#sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--cor-sidebar-w);z-index:100;
  display:flex;flex-direction:column;background:var(--cor-sidebar);color:var(--cor-sidebar-texto);
  border-right:1px solid color-mix(in srgb,var(--cor-acento) 16%,transparent);
  transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.lado-marca{position:relative;display:flex;align-items:center;gap:12px;padding:30px 24px 24px}
.lado-marca::after{content:'';position:absolute;left:24px;bottom:0;width:28px;height:1px;background:var(--cor-acento)}
.lado-logo{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:var(--cor-acento);font-size:1.05rem;border:1px solid color-mix(in srgb,var(--cor-acento) 70%,transparent)}
.lado-logo i{margin:0!important}
.lado-marca .marca-nome{font-family:var(--fonte-titulo);font-weight:700;font-size:.92rem;letter-spacing:.06em;
  line-height:1.2;color:var(--cor-sidebar-texto)}
.lado-marca .marca-produto{display:block;margin-top:3px;font-size:.7rem;color:var(--cor-sidebar-muted)}
.btn-fechar-launcher{display:none;margin-left:auto;background:none;border:none;color:var(--cor-sidebar-muted);
  font-size:1.15rem;line-height:1;cursor:pointer;padding:4px}
.menu-lateral{flex:1;overflow-y:auto;padding:14px 14px 16px;scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--cor-sidebar-texto) 14%,transparent) transparent}
.menu-lateral .nav-section{padding:22px 12px 8px;font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cor-sidebar-muted)}
.menu-lateral .nav-section:first-child{padding-top:6px}
.menu-lateral .nav-link{position:relative;display:flex;align-items:center;gap:12px;margin:1px 0;padding:9px 12px;
  border-radius:10px;cursor:pointer;font-size:.86rem;font-weight:500;letter-spacing:-.005em;
  color:color-mix(in srgb,var(--cor-sidebar-texto) 74%,transparent);transition:background .2s ease,color .2s ease}
.menu-lateral .nav-link i{width:18px;text-align:center;font-size:1rem;
  color:color-mix(in srgb,var(--cor-sidebar-texto) 50%,transparent);transition:color .2s ease}
.menu-lateral .nav-link:hover{color:var(--cor-sidebar-texto);background:color-mix(in srgb,var(--cor-sidebar-texto) 5%,transparent)}
.menu-lateral .nav-link.active{color:var(--cor-sidebar-texto);background:color-mix(in srgb,var(--cor-sidebar-texto) 8%,transparent)}
.menu-lateral .nav-link.active i{color:var(--cor-acento)}
.menu-lateral .nav-link.active::before{content:'';position:absolute;left:-14px;top:9px;bottom:9px;width:2px;
  border-radius:2px;background:var(--cor-acento)}
.lado-usuario{display:flex;align-items:center;gap:12px;padding:18px 24px 24px;cursor:pointer;
  border-top:1px solid color-mix(in srgb,var(--cor-sidebar-texto) 8%,transparent);transition:background .2s ease}
.lado-usuario:hover{background:color-mix(in srgb,var(--cor-sidebar-texto) 4%,transparent)}
.lado-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;
  justify-content:center;font-size:.76rem;font-weight:600;letter-spacing:.06em;color:var(--cor-sidebar-texto);
  border:1px solid color-mix(in srgb,var(--cor-acento) 60%,transparent)}
.lado-avatar img{width:100%;height:100%;object-fit:cover}
.lado-usuario .nome{font-size:.84rem;font-weight:600;color:var(--cor-sidebar-texto);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.lado-usuario small{display:block;font-size:.7rem;color:var(--cor-sidebar-muted)}
#conteudo{margin-left:var(--cor-sidebar-w);min-height:100vh}
@media(min-width:992px){ #btn-menu{display:none!important} }
@media(max-width:991px){
  #sidebar{transform:translateX(-100%)}
  #sidebar.open{transform:translateX(0);box-shadow:0 30px 80px rgba(0,0,0,.4)}
  .btn-fechar-launcher{display:block}
  #conteudo{margin-left:0}
}
/* Síndico que ainda não escolheu o condomínio fica sem menu (ver ajustarNavegacao). */
body.nav-travada #sidebar{display:none}
body.nav-travada #conteudo{margin-left:0}