@charset "UTF-8";
/* ==========================================================================
   Portal Bela Vista — sistema de design
   Camada sobre o Bootstrap 5.3. Retematiza as variáveis do framework e
   acrescenta os componentes próprios do produto.

   Paleta: marinho profundo + latão. Nada de azul corporativo genérico.
   Tipografia: Sora nos títulos (geometria vertical, lembra a fachada),
               Inter no corpo (legível para moradores de todas as idades).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Base
     Atenção: --bv-tinta é COR DE TEXTO e inverte no tema escuro.
     Para superfícies escuras (trilho, painel de marca, cabeçalhos) use
     --bv-escuro, que permanece escuro nos dois temas. */
  --bv-tinta:        #12212B;   /* texto principal */
  --bv-tinta-suave:  #1B3140;
  --bv-escuro:       #12212B;   /* superfície escura permanente */
  --bv-escuro-2:     #1B3140;   /* mesma superfície, estado hover */
  --bv-marinho:      #17607A;   /* primária */
  --bv-marinho-esc:  #0E4257;
  --bv-marinho-clr:  #2C87A6;
  --bv-latao:        #C08A2E;   /* acento, atenção */
  --bv-latao-clr:    #E0AE58;
  --bv-papel:        #F2F4F3;   /* fundo */
  --bv-superficie:   #FFFFFF;
  --bv-superficie-2: #F8FAFA;
  --bv-campo:        #FFFFFF;   /* fundo de input */
  --bv-sobre-marinho:#FFFFFF;   /* texto sobre a cor primária */
  --bv-linha:        #DDE4E3;
  --bv-linha-forte:  #C3CFCE;
  --bv-silencio:     #63757F;   /* texto secundário */
  --bv-silencio-2:   #8A99A1;

  /* Semânticos */
  --bv-ok:      #1F7A5C;
  --bv-ok-bg:   #E6F2ED;
  --bv-espera:  #8A6014;
  --bv-espera-bg:#FBF2E2;
  --bv-erro:    #A8402F;
  --bv-erro-bg: #F8EAE7;
  --bv-info:    #17607A;
  --bv-info-bg: #E6F0F3;

  /* Formas */
  --bv-r-sm: 6px;
  --bv-r:    10px;
  --bv-r-lg: 16px;
  --bv-r-xl: 22px;

  /* Elevação — discreta, uma só família */
  --bv-sombra-1: 0 1px 2px rgba(18,33,43,.06), 0 1px 3px rgba(18,33,43,.04);
  --bv-sombra-2: 0 2px 6px rgba(18,33,43,.07), 0 6px 18px rgba(18,33,43,.06);
  --bv-sombra-3: 0 8px 24px rgba(18,33,43,.12), 0 24px 56px rgba(18,33,43,.10);

  /* Tipografia */
  --bv-fonte:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bv-display: "Sora", var(--bv-fonte);

  /* Ritmo */
  --bv-rail: 248px;

  /* Bootstrap */
  --bs-primary: #17607A;
  --bs-primary-rgb: 23,96,122;
  --bs-body-font-family: var(--bv-fonte);
  --bs-body-color: var(--bv-tinta);
  --bs-body-bg: var(--bv-papel);
  --bs-border-color: var(--bv-linha);
  --bs-border-radius: var(--bv-r);
  --bs-border-radius-sm: var(--bv-r-sm);
  --bs-border-radius-lg: var(--bv-r-lg);
  --bs-link-color: var(--bv-marinho);
  --bs-link-hover-color: var(--bv-marinho-esc);
  --bs-emphasis-color: var(--bv-tinta);
  --bs-secondary-color: var(--bv-silencio);
}

[data-bs-theme="dark"] {
  --bv-tinta:        #E6EEF1;
  --bv-tinta-suave:  #C2D4DB;
  --bv-escuro:       #101F27;   /* continua escuro: trilho e painéis de marca */
  --bv-escuro-2:     #172C36;
  --bv-marinho:      #58ADCB;
  --bv-marinho-esc:  #7AC4DD;   /* no escuro, o hover CLAREIA */
  --bv-marinho-clr:  #9BD5E8;
  --bv-sobre-marinho:#07202A;   /* texto escuro sobre a primária clara */
  --bv-latao:        #D9A951;
  --bv-latao-clr:    #EFCA85;
  --bv-papel:        #0A1318;
  --bv-superficie:   #131F26;
  --bv-superficie-2: #1B2B34;
  --bv-campo:        #0D181E;   /* input rebaixado em relação ao cartão */
  --bv-linha:        #22343E;
  --bv-linha-forte:  #35505E;
  --bv-silencio:     #97ACB6;
  --bv-silencio-2:   #71888F;

  --bv-ok:       #55CBA1;
  --bv-ok-bg:    #10322A;
  --bv-espera:   #E3B463;
  --bv-espera-bg:#33270F;
  --bv-erro:     #E68C79;
  --bv-erro-bg:  #351F1A;
  --bv-info:     #58ADCB;
  --bv-info-bg:  #102E3A;

  --bv-sombra-1: 0 1px 2px rgba(0,0,0,.36);
  --bv-sombra-2: 0 2px 8px rgba(0,0,0,.44);
  --bv-sombra-3: 0 12px 34px rgba(0,0,0,.56);

  --bs-primary: #58ADCB;
  --bs-primary-rgb: 88,173,203;
  --bs-body-color: var(--bv-tinta);
  --bs-body-bg: var(--bv-papel);
  --bs-border-color: var(--bv-linha);
  --bs-link-color: var(--bv-marinho-clr);
  --bs-emphasis-color: var(--bv-tinta);
  --bs-secondary-color: var(--bv-silencio);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--bv-fonte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bv-tinta);
  background: var(--bv-papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .display-face {
  font-family: var(--bv-display);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--bv-tinta);
}

h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); line-height: 1.15; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; }
h3 { font-size: 1.2rem; }

p { max-width: 68ch; }

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

hr { border-color: var(--bv-linha); opacity: 1; }

::selection { background: var(--bv-marinho); color: var(--bv-sobre-marinho); }

/* Foco visível e consistente em todo lugar */
:focus-visible {
  outline: 2px solid var(--bv-marinho);
  outline-offset: 2px;
  border-radius: var(--bv-r-sm);
}

/* Barra de rolagem discreta */
* { scrollbar-width: thin; scrollbar-color: var(--bv-linha-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--bv-linha-forte); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utilitários próprios */
.txt-silencio { color: var(--bv-silencio) !important; }
.txt-tinta    { color: var(--bv-tinta) !important; }
.txt-marinho  { color: var(--bv-marinho) !important; }
.txt-latao    { color: var(--bv-latao) !important; }
.fonte-display{ font-family: var(--bv-display); }
.tabular      { font-variant-numeric: tabular-nums; }
.pular-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--bv-escuro); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--bv-r) 0;
}
.pular-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Estrutura do painel: trilho lateral + conteúdo
   -------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--bv-rail) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.rail {
  background: var(--bv-escuro);
  color: #C9D8DD;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  border-right: 1px solid rgba(255,255,255,.06);
}

.rail__marca {
  padding: 1.4rem 1.25rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rail__nome {
  font-family: var(--bv-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
  line-height: 1.25;
  display: block;
}
.rail__sub {
  font-size: .74rem;
  color: #7D939D;
  letter-spacing: .04em;
  margin-top: .15rem;
  display: block;
}

.rail__nav { padding: .85rem .7rem; overflow-y: auto; flex: 1; }
.rail__grupo {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #5E747E;
  padding: 1rem .6rem .4rem;
  font-weight: 600;
}
.rail__item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .62rem .7rem;
  border-radius: var(--bv-r);
  color: #B4C6CD;
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  transition: background .14s ease, color .14s ease;
  position: relative;
}
.rail__item i { font-size: 1.05rem; width: 1.25rem; text-align: center; flex: none; }
.rail__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail__item.ativo { background: var(--bv-marinho); color: var(--bv-sobre-marinho); }
.rail__item.ativo::before {
  content: ""; position: absolute; left: -.7rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; background: var(--bv-latao-clr); border-radius: 0 3px 3px 0;
}
.rail__contagem {
  margin-left: auto;
  background: var(--bv-latao);
  color: #14232C;
  font-size: .72rem;
  font-weight: 700;
  padding: .1rem .42rem;
  border-radius: 99px;
  min-width: 1.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rail__contagem:empty, .rail__contagem[data-zero="1"] { display: none; }

.rail__pe {
  padding: .85rem 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .78rem;
  color: #7D939D;
}
.rail__usuario {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .3rem .7rem;
}

.conteudo { min-width: 0; display: flex; flex-direction: column; }

.barra-topo {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bv-papel) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bv-linha);
  padding: .85rem clamp(1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.barra-topo h1 { font-size: 1.32rem; margin: 0; }
.barra-topo__acoes { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.pagina { padding: clamp(1.1rem, 3vw, 2rem); flex: 1; }
.pagina > * + * { margin-top: 1.5rem; }

/* Barra inferior no celular */
.tab-inferior { display: none; }

@media (max-width: 991.98px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; inset: 0 auto 0 0; width: 82vw; max-width: 300px;
    z-index: 1060; transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--bv-sombra-3);
  }
  .rail.aberto { transform: none; }
  .rail-fundo {
    position: fixed; inset: 0; background: rgba(12,22,28,.5); z-index: 1055;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .rail-fundo.ativo { opacity: 1; pointer-events: auto; }
  .pagina { padding-bottom: 5.5rem; }

  .tab-inferior {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    background: var(--bv-superficie);
    border-top: 1px solid var(--bv-linha);
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(18,33,43,.06);
  }
  .tab-inferior a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .12rem;
    padding: .4rem .2rem; color: var(--bv-silencio); text-decoration: none;
    font-size: .66rem; font-weight: 600; border-radius: var(--bv-r-sm); position: relative;
  }
  .tab-inferior a i { font-size: 1.24rem; }
  .tab-inferior a.ativo { color: var(--bv-marinho); }
  .tab-inferior a .ponto {
    position: absolute; top: .32rem; right: 50%; margin-right: -1.05rem;
    width: 7px; height: 7px; border-radius: 50%; background: var(--bv-latao);
  }
}

/* --------------------------------------------------------------------------
   4. Superfícies
   -------------------------------------------------------------------------- */
.painel {
  background: var(--bv-superficie);
  border: 1px solid var(--bv-linha);
  border-radius: var(--bv-r-lg);
  box-shadow: var(--bv-sombra-1);
}
.painel--plano { box-shadow: none; }
.painel__cabeca {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bv-linha);
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.painel__titulo {
  font-family: var(--bv-display); font-weight: 600; font-size: 1.02rem; margin: 0;
  display: flex; align-items: center; gap: .5rem;
}
.painel__titulo i { color: var(--bv-marinho); }
.painel__corpo { padding: 1.25rem; }
.painel__corpo--justo { padding: 0; }
.painel__pe {
  padding: .8rem 1.25rem; border-top: 1px solid var(--bv-linha);
  background: var(--bv-superficie-2);
  border-radius: 0 0 var(--bv-r-lg) var(--bv-r-lg);
}

/* Cartões de número — contidos, sem gradiente decorativo */
.numeros { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.numero {
  background: var(--bv-superficie);
  border: 1px solid var(--bv-linha);
  border-radius: var(--bv-r-lg);
  padding: 1.05rem 1.15rem;
  display: block; text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
  border-left: 3px solid var(--bv-linha-forte);
}
a.numero:hover { border-color: var(--bv-linha-forte); box-shadow: var(--bv-sombra-2); color: inherit; }
.numero__rotulo {
  font-size: .8rem; color: var(--bv-silencio); font-weight: 500;
  display: flex; align-items: center; gap: .4rem;
}
.numero__valor {
  font-family: var(--bv-display); font-size: 2.1rem; font-weight: 600;
  line-height: 1.05; margin-top: .35rem; font-variant-numeric: tabular-nums;
}
.numero__nota { font-size: .78rem; color: var(--bv-silencio-2); margin-top: .2rem; }
.numero--ok     { border-left-color: var(--bv-ok); }
.numero--ok     .numero__valor { color: var(--bv-ok); }
.numero--espera { border-left-color: var(--bv-espera); }
.numero--espera .numero__valor { color: var(--bv-espera); }
.numero--erro   { border-left-color: var(--bv-erro); }
.numero--erro   .numero__valor { color: var(--bv-erro); }
.numero--info   { border-left-color: var(--bv-marinho); }

/* --------------------------------------------------------------------------
   5. Selos de estado
   -------------------------------------------------------------------------- */
.selo {
  display: inline-flex; align-items: center; gap: .34rem;
  font-size: .76rem; font-weight: 600; line-height: 1;
  padding: .34rem .6rem; border-radius: 99px;
  border: 1px solid transparent; white-space: nowrap;
}
.selo i { font-size: .9em; }
.selo--aprovado  { background: var(--bv-ok-bg);     color: var(--bv-ok);     border-color: color-mix(in srgb, var(--bv-ok) 22%, transparent); }
.selo--pendente  { background: var(--bv-espera-bg); color: var(--bv-espera); border-color: color-mix(in srgb, var(--bv-espera) 26%, transparent); }
.selo--rejeitado { background: var(--bv-erro-bg);   color: var(--bv-erro);   border-color: color-mix(in srgb, var(--bv-erro) 22%, transparent); }
.selo--neutro    { background: var(--bv-superficie-2); color: var(--bv-silencio); border-color: var(--bv-linha); }
.selo--marinho   { background: var(--bv-info-bg);   color: var(--bv-info);   border-color: color-mix(in srgb, var(--bv-info) 22%, transparent); }
.selo--latao     { background: var(--bv-espera-bg); color: var(--bv-espera); border-color: color-mix(in srgb, var(--bv-latao) 30%, transparent); }

/* --------------------------------------------------------------------------
   6. Avatar
   -------------------------------------------------------------------------- */
.avatar {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bv-display); font-weight: 600; font-size: .88rem;
  color: #fff; flex: none; letter-spacing: .01em; user-select: none;
}
.avatar--sm { width: 32px; height: 32px; border-radius: 9px; font-size: .74rem; }
.avatar--lg { width: 60px; height: 60px; border-radius: 16px; font-size: 1.2rem; }

/* --------------------------------------------------------------------------
   7. Lista de moradores
   -------------------------------------------------------------------------- */
.lista { display: flex; flex-direction: column; }
.lista__item {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: .9rem;
  align-items: center;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--bv-linha);
  cursor: pointer;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; color: inherit;
  transition: background .13s ease;
}
.lista__item:last-child { border-bottom: 0; }
.lista__item:hover  { background: var(--bv-superficie-2); }
.lista__item:focus-visible { outline-offset: -2px; }
.lista__nome {
  font-weight: 600; font-size: .97rem; margin: 0 0 .12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista__meta {
  font-size: .82rem; color: var(--bv-silencio);
  display: flex; gap: .8rem; flex-wrap: wrap; align-items: center;
}
.lista__meta span { display: inline-flex; align-items: center; gap: .28rem; min-width: 0; }
.lista__meta .truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; }
.lista__direita { display: flex; align-items: center; gap: .7rem; }

@media (max-width: 575.98px) {
  .lista__item { grid-template-columns: auto minmax(0,1fr); padding: .85rem 1rem; }
  .lista__direita { grid-column: 1 / -1; justify-content: space-between; padding-left: calc(42px + .9rem); }
}

/* Unidade em destaque, como consta na porta do apartamento */
.unidade-etiq {
  font-family: var(--bv-display); font-weight: 600;
  background: var(--bv-superficie-2); border: 1px solid var(--bv-linha);
  border-radius: var(--bv-r-sm); padding: .16rem .46rem;
  font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--bv-tinta);
}

/* --------------------------------------------------------------------------
   8. Espelho do prédio — elemento de assinatura
   Reproduz a elevação real: térreo embaixo, cobertura em cima.
   -------------------------------------------------------------------------- */
.espelho {
  background: var(--bv-superficie);
  border: 1px solid var(--bv-linha);
  border-radius: var(--bv-r-lg);
  overflow: hidden;
}
.espelho__corpo {
  padding: 1rem clamp(.6rem, 2vw, 1.5rem) 0;
  display: flex; flex-direction: column-reverse; /* andar 1 embaixo */
  gap: .34rem;
}
.andar {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: .55rem;
  align-items: stretch;
}
.andar__num {
  display: flex; align-items: center; justify-content: flex-end;
  font-family: var(--bv-display); font-size: .82rem; font-weight: 600;
  color: var(--bv-silencio-2); padding-right: .3rem;
  font-variant-numeric: tabular-nums;
}
.andar__unidades { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .34rem; }

.unidade {
  border: 1px solid var(--bv-linha);
  border-radius: var(--bv-r-sm);
  background: var(--bv-superficie-2);
  padding: .5rem .35rem;
  min-height: 2.9rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; cursor: pointer; text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position: relative;
}
.unidade:hover { transform: translateY(-2px); box-shadow: var(--bv-sombra-2); color: inherit; z-index: 2; }
.unidade__id {
  font-family: var(--bv-display); font-weight: 600; font-size: .8rem;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.unidade__quem {
  font-size: .64rem; color: var(--bv-silencio); line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.unidade--aprovado  { background: var(--bv-ok-bg);     border-color: color-mix(in srgb, var(--bv-ok) 30%, transparent); }
.unidade--aprovado  .unidade__id { color: var(--bv-ok); }
.unidade--pendente  { background: var(--bv-espera-bg); border-color: color-mix(in srgb, var(--bv-espera) 36%, transparent); }
.unidade--pendente  .unidade__id { color: var(--bv-espera); }
.unidade--rejeitado { background: var(--bv-erro-bg);   border-color: color-mix(in srgb, var(--bv-erro) 30%, transparent); }
.unidade--rejeitado .unidade__id { color: var(--bv-erro); }
.unidade--vazio     { background: transparent; border-style: dashed; border-color: var(--bv-linha-forte); }
.unidade--vazio .unidade__id { color: var(--bv-silencio-2); }
.unidade--multi::after {
  content: ""; position: absolute; top: .28rem; right: .28rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--bv-marinho);
}

.espelho__legenda {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  padding: 1rem clamp(.6rem, 2vw, 1.5rem);
  border-top: 1px solid var(--bv-linha); margin-top: 1rem;
  font-size: .78rem; color: var(--bv-silencio);
}
.espelho__legenda span { display: inline-flex; align-items: center; gap: .38rem; }
.espelho__legenda i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid; display: inline-block; }

@media (max-width: 575.98px) {
  .andar { grid-template-columns: 2.3rem 1fr; gap: .35rem; }
  .unidade { min-height: 2.5rem; padding: .35rem .2rem; }
  .unidade__quem { display: none; }
}

/* --------------------------------------------------------------------------
   9. Formulários
   -------------------------------------------------------------------------- */
.form-label {
  font-size: .84rem; font-weight: 600; color: var(--bv-tinta);
  margin-bottom: .32rem;
}
.form-label .obrigatorio { color: var(--bv-erro); margin-left: .12rem; }
.form-text { font-size: .79rem; color: var(--bv-silencio); }

.form-control, .form-select {
  border-radius: var(--bv-r);
  border: 1px solid var(--bv-linha-forte);
  background: var(--bv-campo);
  color: var(--bv-tinta);
  padding: .58rem .8rem;
  font-size: .95rem;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bv-marinho);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bv-marinho) 22%, transparent);
  background: var(--bv-campo);
  color: var(--bv-tinta);
}

/* O navegador pinta o preenchimento automático de branco; devolvemos ao tema. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--bv-tinta);
  -webkit-box-shadow: 0 0 0 40px var(--bv-campo) inset;
  caret-color: var(--bv-tinta);
  transition: background-color 9999s ease-out;
}
.form-control::placeholder { color: var(--bv-silencio-2); }
.form-control:disabled, .form-control[readonly] { background: var(--bv-superficie-2); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bv-erro); }
.invalid-feedback { font-size: .79rem; color: var(--bv-erro); }
.input-group-text {
  background: var(--bv-superficie-2); border-color: var(--bv-linha-forte);
  color: var(--bv-silencio); border-radius: var(--bv-r);
}

/* Grupo de campos com título — substitui "tudo dentro de um card" */
.grupo { border-top: 1px solid var(--bv-linha); padding-top: 1.4rem; margin-top: 1.6rem; }
.grupo:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.grupo__titulo {
  font-family: var(--bv-display); font-size: 1.02rem; font-weight: 600;
  margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem;
}
.grupo__titulo i { color: var(--bv-marinho); font-size: 1.1rem; }
.grupo__ajuda { font-size: .86rem; color: var(--bv-silencio); margin: 0 0 1rem; max-width: 62ch; }

/* Escolha visual entre proprietário e inquilino */
.escolha { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.escolha input { position: absolute; opacity: 0; width: 0; height: 0; }
.escolha label {
  display: flex; align-items: flex-start; gap: .7rem;
  border: 1.5px solid var(--bv-linha-forte); border-radius: var(--bv-r);
  padding: .85rem 1rem; cursor: pointer; background: var(--bv-campo);
  transition: border-color .14s ease, background .14s ease;
}
.escolha label:hover { border-color: var(--bv-marinho-clr); }
.escolha input:checked + label {
  border-color: var(--bv-marinho); background: var(--bv-info-bg);
  box-shadow: inset 0 0 0 1px var(--bv-marinho);
}
.escolha input:focus-visible + label { outline: 2px solid var(--bv-marinho); outline-offset: 2px; }
.escolha label i { font-size: 1.3rem; color: var(--bv-marinho); line-height: 1.2; }
.escolha strong { display: block; font-size: .95rem; }
.escolha small { color: var(--bv-silencio); font-size: .8rem; line-height: 1.4; }

/* --------------------------------------------------------------------------
   10. Linhas repetíveis (familiares, veículos, pets…)
   Cartão empilhado no celular; tabela no desktop. Sem rolagem lateral.
   -------------------------------------------------------------------------- */
.repetivel { display: flex; flex-direction: column; gap: .6rem; }
.repetivel__linha {
  display: grid; gap: .6rem; align-items: end;
  padding: .85rem; border: 1px solid var(--bv-linha);
  border-radius: var(--bv-r); background: var(--bv-superficie-2);
  animation: bv-entra .18s ease;
}
@keyframes bv-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.repetivel__linha[data-colunas="3"] { grid-template-columns: 2fr 1fr 1.2fr auto; }
.repetivel__linha[data-colunas="4"] { grid-template-columns: 2fr 1fr 1fr 1fr auto; }
.repetivel__remover {
  border: 1px solid var(--bv-linha-forte); background: var(--bv-superficie);
  color: var(--bv-erro); border-radius: var(--bv-r-sm);
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  transition: background .13s ease, border-color .13s ease;
}
.repetivel__remover:hover { background: var(--bv-erro-bg); border-color: var(--bv-erro); }
.repetivel__campo > .form-label { font-size: .76rem; color: var(--bv-silencio); font-weight: 500; }

.repetivel__vazio {
  border: 1px dashed var(--bv-linha-forte); border-radius: var(--bv-r);
  padding: 1.4rem 1rem; text-align: center; color: var(--bv-silencio); font-size: .88rem;
}

@media (max-width: 767.98px) {
  .repetivel__linha[data-colunas="3"],
  .repetivel__linha[data-colunas="4"] { grid-template-columns: 1fr 1fr; }
  .repetivel__linha .repetivel__campo:first-child { grid-column: 1 / -1; }
  .repetivel__remover { grid-column: 1 / -1; width: 100%; height: 36px; }
}

/* --------------------------------------------------------------------------
   11. Etapas do formulário do morador
   -------------------------------------------------------------------------- */
.etapas {
  display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .2rem;
  scrollbar-width: none;
}
.etapas::-webkit-scrollbar { display: none; }
.etapa {
  flex: 1 1 0; min-width: 92px;
  border: 0; background: none; padding: .5rem .3rem .65rem; cursor: pointer;
  color: var(--bv-silencio); text-align: left; position: relative;
  border-top: 3px solid var(--bv-linha); border-radius: 0;
  transition: color .14s ease, border-color .14s ease;
}
.etapa__n { font-size: .7rem; font-weight: 700; letter-spacing: .05em; display: block; }
.etapa__t { font-size: .84rem; font-weight: 600; line-height: 1.25; display: block; color: inherit; }
.etapa.ativa   { color: var(--bv-marinho); border-top-color: var(--bv-marinho); }
.etapa.completa{ color: var(--bv-ok); border-top-color: var(--bv-ok); }
.etapa.completa .etapa__n::after { content: " ✓"; }

.progresso {
  height: 5px; background: var(--bv-linha); border-radius: 99px; overflow: hidden;
}
.progresso__barra {
  height: 100%; background: var(--bv-marinho); border-radius: 99px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.progresso__barra--ok { background: var(--bv-ok); }

/* Anel de completude */
.anel { --p: 0; width: 56px; height: 56px; position: relative; flex: none; }
.anel::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--bv-marinho) calc(var(--p) * 1%), var(--bv-linha) 0);
}
.anel::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bv-superficie);
}
.anel span {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font-family: var(--bv-display); font-size: .8rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   12. Botões
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--bv-r);
  font-weight: 600; font-size: .92rem;
  padding: .56rem 1.05rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .78rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: .4rem .75rem; font-size: .84rem; }

.btn-primary {
  background: var(--bv-marinho); border-color: var(--bv-marinho); color: var(--bv-sobre-marinho);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--bv-marinho-esc); border-color: var(--bv-marinho-esc);
  color: var(--bv-sobre-marinho);
}
.btn-escuro { background: var(--bv-escuro); border: 1px solid var(--bv-escuro); color: #fff; }
.btn-escuro:hover { background: var(--bv-escuro-2); border-color: var(--bv-escuro-2); color: #fff; }
.btn-contorno {
  background: var(--bv-superficie); border: 1px solid var(--bv-linha-forte); color: var(--bv-tinta);
}
.btn-contorno:hover { background: var(--bv-superficie-2); border-color: var(--bv-silencio-2); color: var(--bv-tinta); }
.btn-fantasma { background: transparent; border: 1px solid transparent; color: var(--bv-silencio); }
.btn-fantasma:hover { background: var(--bv-superficie-2); color: var(--bv-tinta); }
.btn-ok   { background: var(--bv-ok);   border-color: var(--bv-ok);   color: #fff; }
.btn-ok:hover   { filter: brightness(.92); color: #fff; }
.btn-erro { background: var(--bv-erro); border-color: var(--bv-erro); color: #fff; }
.btn-erro:hover { filter: brightness(.92); color: #fff; }
.btn-latao{ background: var(--bv-latao); border-color: var(--bv-latao); color: #14232C; }
.btn-latao:hover{ filter: brightness(.94); color: #14232C; }

.btn-icone {
  width: 38px; height: 38px; padding: 0; border-radius: var(--bv-r);
  background: transparent; border: 1px solid transparent; color: var(--bv-silencio);
}
.btn-icone:hover { background: var(--bv-superficie-2); color: var(--bv-tinta); }
.btn[disabled], .btn:disabled { opacity: .5; pointer-events: none; }

/* Estado de envio */
.btn[data-carregando="1"] { pointer-events: none; opacity: .75; }
.btn[data-carregando="1"] > :not(.girando) { opacity: .55; }
.girando {
  width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: bv-gira .7s linear infinite; display: inline-block;
}
@keyframes bv-gira { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   13. Filtros
   -------------------------------------------------------------------------- */
.filtros {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
}
.busca { position: relative; flex: 1 1 260px; min-width: 0; }
.busca i {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--bv-silencio-2); pointer-events: none;
}
.busca input { padding-left: 2.3rem; }
.busca kbd {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  font-size: .7rem; background: var(--bv-superficie-2); color: var(--bv-silencio-2);
  border: 1px solid var(--bv-linha); border-radius: 5px; padding: .1rem .35rem;
  font-family: var(--bv-fonte);
}
.busca input:focus ~ kbd { display: none; }

.segmentos {
  display: inline-flex; background: var(--bv-superficie-2);
  border: 1px solid var(--bv-linha); border-radius: var(--bv-r); padding: 3px; gap: 2px;
}
.segmentos button {
  border: 0; background: none; padding: .38rem .75rem; border-radius: calc(var(--bv-r) - 3px);
  font-size: .85rem; font-weight: 600; color: var(--bv-silencio); white-space: nowrap;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background .13s ease, color .13s ease;
}
.segmentos button:hover { color: var(--bv-tinta); }
.segmentos button.ativo { background: var(--bv-superficie); color: var(--bv-tinta); box-shadow: var(--bv-sombra-1); }
.segmentos .conta {
  font-size: .72rem; font-weight: 700; padding: .05rem .34rem; border-radius: 99px;
  background: var(--bv-linha); color: var(--bv-silencio); font-variant-numeric: tabular-nums;
}
.segmentos button.ativo .conta { background: var(--bv-marinho); color: var(--bv-sobre-marinho); }

/* --------------------------------------------------------------------------
   14. Estados vazios
   -------------------------------------------------------------------------- */
.vazio { text-align: center; padding: 3.2rem 1.5rem; }
.vazio i {
  font-size: 2rem; color: var(--bv-marinho);
  background: var(--bv-info-bg); width: 68px; height: 68px; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: .9rem;
}
.vazio h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
.vazio p { color: var(--bv-silencio); font-size: .9rem; margin: 0 auto 1.1rem; max-width: 44ch; }

/* --------------------------------------------------------------------------
   15. Tabelas
   -------------------------------------------------------------------------- */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela thead th {
  text-align: left; font-size: .74rem; font-weight: 600;
  color: var(--bv-silencio); padding: .55rem .7rem;
  border-bottom: 1px solid var(--bv-linha); white-space: nowrap;
}
.tabela tbody td { padding: .6rem .7rem; border-bottom: 1px solid var(--bv-linha); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--bv-superficie-2); }
.tabela .vazia td { color: var(--bv-silencio-2); text-align: center; padding: 1.4rem; font-style: italic; }

/* Empilha em cartão no celular usando os rótulos do cabeçalho */
@media (max-width: 640px) {
  .tabela--empilha thead { display: none; }
  .tabela--empilha tbody tr {
    display: block; border: 1px solid var(--bv-linha); border-radius: var(--bv-r);
    margin-bottom: .55rem; padding: .3rem .1rem; background: var(--bv-superficie);
  }
  .tabela--empilha tbody td {
    display: flex; justify-content: space-between; gap: 1rem; border: 0;
    padding: .34rem .8rem; text-align: right;
  }
  .tabela--empilha tbody td::before {
    content: attr(data-rotulo); font-weight: 600; color: var(--bv-silencio);
    font-size: .8rem; text-align: left; flex: none;
  }
}

/* --------------------------------------------------------------------------
   16. Modais
   -------------------------------------------------------------------------- */
.modal-content {
  border: 1px solid var(--bv-linha); border-radius: var(--bv-r-lg);
  background: var(--bv-superficie); box-shadow: var(--bv-sombra-3);
}
.modal-header {
  border-bottom: 1px solid var(--bv-linha);
  padding: 1.1rem 1.35rem; align-items: flex-start; gap: .9rem;
}
.modal-title { font-family: var(--bv-display); font-size: 1.1rem; font-weight: 600; }
.modal-body  { padding: 1.35rem; }
.modal-footer{
  border-top: 1px solid var(--bv-linha); padding: .9rem 1.35rem;
  background: var(--bv-superficie-2); border-radius: 0 0 var(--bv-r-lg) var(--bv-r-lg);
  gap: .5rem;
}
.modal-backdrop.show { opacity: .55; background: #0C161C; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Ficha dentro do modal */
.ficha__topo {
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--bv-linha);
}
.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .1rem 1.6rem; }
.dado { padding: .48rem 0; border-bottom: 1px solid var(--bv-linha); min-width: 0; }
.dado__r { font-size: .74rem; color: var(--bv-silencio); font-weight: 500; display: block; }
.dado__v { font-size: .93rem; color: var(--bv-tinta); word-break: break-word; }
.dado__v a { color: var(--bv-marinho); text-decoration: none; }
.dado__v a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   17. Avisos / alertas
   -------------------------------------------------------------------------- */
.aviso {
  display: flex; gap: .8rem; padding: .95rem 1.1rem;
  border-radius: var(--bv-r); border: 1px solid;
  border-left-width: 3px; font-size: .9rem; align-items: flex-start;
}
.aviso i { font-size: 1.1rem; flex: none; line-height: 1.35; }
.aviso strong { display: block; margin-bottom: .1rem; }
.aviso p { margin: 0; max-width: none; }
.aviso--info   { background: var(--bv-info-bg);   border-color: color-mix(in srgb, var(--bv-info) 26%, transparent);   color: var(--bv-info); }
.aviso--ok     { background: var(--bv-ok-bg);     border-color: color-mix(in srgb, var(--bv-ok) 26%, transparent);     color: var(--bv-ok); }
.aviso--espera { background: var(--bv-espera-bg); border-color: color-mix(in srgb, var(--bv-espera) 30%, transparent); color: var(--bv-espera); }
.aviso--erro   { background: var(--bv-erro-bg);   border-color: color-mix(in srgb, var(--bv-erro) 26%, transparent);   color: var(--bv-erro); }
.aviso--info p, .aviso--ok p, .aviso--espera p, .aviso--erro p { color: var(--bv-tinta); opacity: .88; }

/* Mural */
.mural { display: grid; gap: .9rem; }
.mural__item {
  border: 1px solid var(--bv-linha); border-radius: var(--bv-r-lg);
  background: var(--bv-superficie); padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--bv-linha-forte);
}
.mural__item[data-cat="manutencao"] { border-left-color: var(--bv-latao); }
.mural__item[data-cat="seguranca"]  { border-left-color: var(--bv-erro); }
.mural__item[data-cat="financeiro"] { border-left-color: var(--bv-ok); }
.mural__item[data-cat="evento"]     { border-left-color: var(--bv-marinho-clr); }
.mural__item[data-cat="geral"]      { border-left-color: var(--bv-marinho); }
.mural__cabeca { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.mural__titulo { font-family: var(--bv-display); font-size: 1rem; font-weight: 600; margin: 0; }
.mural__texto  { font-size: .92rem; color: var(--bv-tinta); margin: 0; white-space: pre-line; }
.mural__data   { font-size: .78rem; color: var(--bv-silencio-2); margin-top: .55rem; }

/* --------------------------------------------------------------------------
   18. Notificações flutuantes
   -------------------------------------------------------------------------- */
.avisos-pilha {
  position: fixed; z-index: 1090; bottom: 1rem; right: 1rem;
  display: flex; flex-direction: column; gap: .55rem; max-width: min(380px, calc(100vw - 2rem));
}
@media (max-width: 575.98px) { .avisos-pilha { bottom: auto; top: 1rem; left: 1rem; right: 1rem; max-width: none; } }
.nota {
  background: var(--bv-superficie); border: 1px solid var(--bv-linha);
  border-left: 3px solid var(--bv-marinho);
  border-radius: var(--bv-r); box-shadow: var(--bv-sombra-3);
  padding: .8rem 1rem; display: flex; gap: .7rem; align-items: flex-start;
  animation: bv-nota .22s cubic-bezier(.4,0,.2,1);
}
@keyframes bv-nota { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.nota.saindo { animation: bv-nota-sai .18s ease forwards; }
@keyframes bv-nota-sai { to { opacity: 0; transform: translateY(6px); } }
.nota i { font-size: 1.15rem; line-height: 1.3; flex: none; }
.nota__t { font-weight: 600; font-size: .9rem; }
.nota__d { font-size: .84rem; color: var(--bv-silencio); }
.nota--ok    { border-left-color: var(--bv-ok); }    .nota--ok i    { color: var(--bv-ok); }
.nota--erro  { border-left-color: var(--bv-erro); }  .nota--erro i  { color: var(--bv-erro); }
.nota--espera{ border-left-color: var(--bv-espera);} .nota--espera i{ color: var(--bv-espera); }
.nota--info  { border-left-color: var(--bv-marinho);}.nota--info i  { color: var(--bv-marinho); }
.nota button { margin-left: auto; border: 0; background: none; color: var(--bv-silencio-2); padding: 0 .1rem; }

/* --------------------------------------------------------------------------
   19. Carregamento
   -------------------------------------------------------------------------- */
.cortina {
  position: fixed; inset: 0; z-index: 1080;
  background: color-mix(in srgb, var(--bv-papel) 82%, transparent);
  backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
}
.cortina.ativa { display: flex; }
.cortina__marca {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--bv-linha); border-top-color: var(--bv-marinho);
  animation: bv-gira .8s linear infinite;
}

.esqueleto {
  background: linear-gradient(90deg, var(--bv-linha) 25%, var(--bv-superficie-2) 50%, var(--bv-linha) 75%);
  background-size: 200% 100%; animation: bv-brilho 1.3s ease-in-out infinite;
  border-radius: var(--bv-r-sm); height: 1em;
}
@keyframes bv-brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   20. Telas de entrada (login / portal)
   -------------------------------------------------------------------------- */
.entrada {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 992px) { .entrada { grid-template-columns: 1.05fr .95fr; } }

.entrada__lado {
  background: var(--bv-escuro);
  color: #DDE7EA;
  padding: clamp(2rem, 5vw, 4rem);
  display: none; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
@media (min-width: 992px) { .entrada__lado { display: flex; } }

/* Silhueta da torre — desenhada em CSS, sem imagem */
.torre {
  position: absolute; right: -3rem; bottom: -1px; width: 260px; height: 78%;
  display: flex; flex-direction: column-reverse; gap: 4px; opacity: .13; pointer-events: none;
}
.torre span { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.torre span i {
  display: block; height: 15px; background: #fff; border-radius: 2px; opacity: .55;
}
.torre span:nth-child(3n) i:nth-child(2)  { opacity: 1; }
.torre span:nth-child(4n) i:nth-child(1)  { opacity: .9; }
.torre span:nth-child(5n) i:nth-child(3)  { opacity: 1; }

.entrada__marca { position: relative; z-index: 1; }
.entrada__titulo {
  font-family: var(--bv-display); font-size: clamp(1.9rem, 1.2rem + 2vw, 2.7rem);
  font-weight: 600; color: #fff; line-height: 1.12; margin: 1.6rem 0 .8rem; max-width: 15ch;
}
.entrada__texto { color: #9FB3BC; font-size: 1.02rem; max-width: 44ch; }
.entrada__pontos { position: relative; z-index: 1; display: grid; gap: .6rem; margin-top: 2rem; }
.entrada__ponto { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: #B4C6CD; }
.entrada__ponto i { color: var(--bv-latao-clr); font-size: 1.05rem; line-height: 1.4; }

.entrada__form {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 3.5rem); background: var(--bv-papel);
}
.entrada__caixa { width: 100%; max-width: 420px; }
.entrada__caixa h1 { font-size: 1.6rem; margin-bottom: .35rem; }
.entrada__caixa .sub { color: var(--bv-silencio); margin-bottom: 1.8rem; font-size: .95rem; }

.entrada__mobile-marca {
  display: flex; align-items: center; gap: .65rem; margin-bottom: 2rem;
}
@media (min-width: 992px) { .entrada__mobile-marca { display: none; } }
.marca-selo {
  width: 40px; height: 40px; border-radius: 11px; background: var(--bv-escuro);
  color: #fff; display: grid; place-items: center; font-family: var(--bv-display);
  font-weight: 600; font-size: 1rem; flex: none;
}

/* Correções pontuais do tema escuro ---------------------------------------- */
[data-bs-theme="dark"] .entrada__lado {
  /* Sem o contraste claro/escuro do tema claro, o painel precisa de uma borda
     para continuar lendo como um plano separado do formulário. */
  border-right: 1px solid var(--bv-linha);
}
[data-bs-theme="dark"] .torre { opacity: .2; }
[data-bs-theme="dark"] .modal-backdrop.show { opacity: .7; background: #04090C; }
[data-bs-theme="dark"] .painel { background: var(--bv-superficie); }
[data-bs-theme="dark"] .btn-contorno { background: var(--bv-superficie-2); }
[data-bs-theme="dark"] .btn-contorno:hover { background: var(--bv-linha); }
[data-bs-theme="dark"] .unidade--vazio { background: rgba(255,255,255,.02); }
[data-bs-theme="dark"] .cortina__marca { border-color: var(--bv-linha); border-top-color: var(--bv-marinho); }
[data-bs-theme="dark"] .form-control::placeholder { color: var(--bv-silencio-2); }
/* No escuro os botões semânticos ficam claros: o texto precisa escurecer. */
[data-bs-theme="dark"] .btn-ok,
[data-bs-theme="dark"] .btn-ok:hover,
[data-bs-theme="dark"] .btn-erro,
[data-bs-theme="dark"] .btn-erro:hover { color: #07202A; }
[data-bs-theme="dark"] .btn-ok:hover,
[data-bs-theme="dark"] .btn-erro:hover { filter: brightness(1.08); }

/* --------------------------------------------------------------------------
   21. Consulta da portaria — otimizada para tablet
   -------------------------------------------------------------------------- */
.portaria__busca input {
  font-size: 1.25rem; padding: 1rem 1.1rem 1rem 3rem; border-radius: var(--bv-r-lg);
  border-width: 2px;
}
.portaria__busca i { left: 1.1rem; font-size: 1.2rem; }
.portaria__resultado {
  border: 1px solid var(--bv-linha); border-radius: var(--bv-r-lg);
  background: var(--bv-superficie); overflow: hidden;
}
.portaria__cabeca {
  background: var(--bv-escuro); color: #fff; padding: 1.1rem 1.35rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.portaria__cabeca .unidade-etiq {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: #fff;
  font-size: 1.1rem; padding: .3rem .7rem;
}
.portaria__bloco { padding: 1rem 1.35rem; border-top: 1px solid var(--bv-linha); }
.portaria__bloco h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--bv-silencio); margin: 0 0 .55rem; font-family: var(--bv-fonte); font-weight: 700;
}
.portaria__pessoas { display: flex; flex-wrap: wrap; gap: .5rem; }
.portaria__pessoa {
  border: 1px solid var(--bv-linha); border-radius: var(--bv-r);
  padding: .5rem .8rem; font-size: .92rem; background: var(--bv-superficie-2);
}
.portaria__pessoa b { display: block; }
.portaria__pessoa small { color: var(--bv-silencio); }
.placa {
  font-family: var(--bv-display); font-weight: 600; letter-spacing: .09em;
  background: var(--bv-escuro); color: #fff; padding: .22rem .55rem;
  border-radius: var(--bv-r-sm); font-size: .88rem; display: inline-block;
}

/* --------------------------------------------------------------------------
   22. Linha do tempo (auditoria)
   -------------------------------------------------------------------------- */
.tempo { position: relative; padding-left: 1.9rem; }
.tempo::before {
  content: ""; position: absolute; left: .62rem; top: .4rem; bottom: .4rem;
  width: 1px; background: var(--bv-linha);
}
.tempo__item { position: relative; padding: .55rem 0; }
.tempo__ponto {
  position: absolute; left: -1.9rem; top: .68rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--bv-superficie); border: 1px solid var(--bv-linha);
  display: grid; place-items: center; font-size: .62rem; color: var(--bv-silencio);
}
.tempo__item[data-tipo="aprovar"] .tempo__ponto  { border-color: var(--bv-ok);    color: var(--bv-ok); }
.tempo__item[data-tipo="rejeitar"] .tempo__ponto { border-color: var(--bv-erro);  color: var(--bv-erro); }
.tempo__item[data-tipo="login"] .tempo__ponto    { border-color: var(--bv-marinho); color: var(--bv-marinho); }
.tempo__t { font-size: .91rem; }
.tempo__m { font-size: .78rem; color: var(--bv-silencio-2); }

/* --------------------------------------------------------------------------
   23. Gráficos
   -------------------------------------------------------------------------- */
.grafico { position: relative; height: 240px; }
.grafico canvas { max-width: 100%; }

/* Barras horizontais simples, sem biblioteca */
.barras { display: grid; gap: .7rem; }
.barra__topo { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .28rem; }
.barra__trilho { height: 8px; background: var(--bv-linha); border-radius: 99px; overflow: hidden; }
.barra__preenche { height: 100%; border-radius: 99px; background: var(--bv-marinho); transition: width .5s cubic-bezier(.4,0,.2,1); }
.barra--ok     .barra__preenche { background: var(--bv-ok); }
.barra--espera .barra__preenche { background: var(--bv-espera); }
.barra--erro   .barra__preenche { background: var(--bv-erro); }

/* --------------------------------------------------------------------------
   24. Impressão
   -------------------------------------------------------------------------- */
@media print {
  .rail, .barra-topo, .tab-inferior, .filtros, .btn, .avisos-pilha, .cortina { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .painel { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}