/* ---------------------------------------------------------------
   voa-people.css — complemento do voa-theme.css para o Voadores.

   O voa-theme.css veio do sistema.voaesportes.com (Gosh App) e cobre
   .card, .sidebar, .stat-card etc. O People tem componentes proprios
   que aquele tema nao conhece e que trazem #fff cravado no style.css:
   card-gosh, kpi-card, energia-card, wellness-*, compact-card.
   Sem isto, o tema escuro deixa texto claro sobre fundo branco.

   Mantido separado de proposito: assim o voa-theme.css continua
   identico ao do sistema e os dois seguem faceis de manter juntos.
   Carregar SEMPRE depois do voa-theme.css.
   --------------------------------------------------------------- */

/* superficies */
.card-gosh,
.card-gosh-header,
.card-gosh-body,
.kpi-card,
.energia-card,
.compact-card,
.alongamento-toast{
  background: var(--voa-surface, #151515) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border-color: var(--voa-line, rgba(239,239,234,.12)) !important;
}

.card-gosh-header{
  background: var(--voa-surface-2, #1E1E1E) !important;
  border-bottom: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
}

.card-gosh,
.kpi-card,
.compact-card{
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
}

/* titulos dentro dos cards proprios do People */
.card-gosh-header h1, .card-gosh-header h2, .card-gosh-header h3,
.card-gosh-header h4, .card-gosh-header h5, .card-gosh-header h6,
.card-gosh-header .h5, .card-gosh-header .h6, .card-gosh-header strong{
  color: var(--voa-ink, #EFEFEA) !important;
}

/* numeros de KPI em limao, como no resto do tema */
.kpi-card .kpi-value,
.kpi-card .stat-value,
.kpi-card h2, .kpi-card h3{
  color: var(--voa-lime, #DDFB05) !important;
}

/* botoes de estado de energia */
.energia-btn{
  background: var(--voa-surface-2, #1E1E1E) !important;
  color: var(--voa-gray, #C9C9C4) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
}
.energia-btn:hover{
  background: var(--voa-surface, #151515) !important;
  border-color: var(--voa-lime, #DDFB05) !important;
  color: var(--voa-ink, #EFEFEA) !important;
}
.energia-btn.selected, .energia-btn.active{
  background: var(--voa-lime, #DDFB05) !important;
  color: #0C0C0C !important;
  border-color: var(--voa-lime, #DDFB05) !important;
}

/* wellness — botoes de acao.
   ATENCAO: a classe e .wellness-action-btn (nao .wellness-btn-action).
   Os botoes principais levam .primary e ja vem em limao pelo tema. */
/* ARMADILHA: existem DUAS classes de nome quase igual, em telas diferentes.
   .wellness-action-btn  -> tela /wellness
   .wellness-btn-action  -> widget do dashboard
   Cobrir as duas. Trocar uma pela outra deixa um botao branco na outra tela. */
.wellness-action-btn:not(.primary),
.wellness-btn-action,
.wellness-btn-add{
  background: var(--voa-surface-2, #1E1E1E) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
}
.wellness-action-btn:not(.primary):hover,
.wellness-btn-action:hover,
.wellness-btn-add:hover{
  border-color: var(--voa-lime, #DDFB05) !important;
  color: var(--voa-lime, #DDFB05) !important;
}
.wellness-action-btn.primary{
  background: var(--voa-lime, #DDFB05) !important;
  color: #0C0C0C !important;
  border: none !important;
}

/* indicadores de chat */
.chat-badge, .chat-indicator{
  background: var(--voa-lime, #DDFB05) !important;
  color: #0C0C0C !important;
}

/* tabelas do People */
.table{ --bs-table-bg: transparent !important; color: var(--voa-ink, #EFEFEA) !important; }
.table > :not(caption) > * > *{
  background-color: transparent !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border-color: var(--voa-line, rgba(239,239,234,.12)) !important;
}
.table thead th{ color: var(--voa-dim, #8A8A85) !important; }

/* campos de formulario */
.form-control, .form-select, .input-group-text{
  background: var(--voa-surface-2, #1E1E1E) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border-color: var(--voa-line, rgba(239,239,234,.12)) !important;
}
.form-control::placeholder{ color: var(--voa-dim, #8A8A85) !important; }
.form-control:focus, .form-select:focus{
  border-color: var(--voa-lime, #DDFB05) !important;
  box-shadow: 0 0 0 .2rem rgba(221,251,5,.15) !important;
}

/* modais e dropdowns */
.modal-content, .dropdown-menu, .offcanvas{
  background: var(--voa-surface, #151515) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border-color: var(--voa-line, rgba(239,239,234,.12)) !important;
}
.modal-header, .modal-footer{ border-color: var(--voa-line, rgba(239,239,234,.12)) !important; }
.dropdown-item{ color: var(--voa-gray, #C9C9C4) !important; }
.dropdown-item:hover, .dropdown-item:focus{
  background: var(--voa-surface-2, #1E1E1E) !important;
  color: var(--voa-ink, #EFEFEA) !important;
}

/* --- wellness (tela propria) --- */
.wellness-big-card,
.rank-card{
  background: var(--voa-surface, #151515) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
}
.wellness-big-card .meta-text,
.rank-card .rank-hint{ color: var(--voa-dim, #8A8A85) !important; }

/* banner do wellness: o original e um gradiente azul/verde que briga
   com o limao da marca */
.wellness-hero{
  background: linear-gradient(135deg, #0C0C0C 0%, #151515 55%, rgba(221,251,5,.22) 100%) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
  color: var(--voa-ink, #EFEFEA) !important;
}
.wellness-hero h1, .wellness-hero h2, .wellness-hero h3{ color: var(--voa-lime, #DDFB05) !important; }

.rank-tab-btn{
  background: var(--voa-surface-2, #1E1E1E) !important;
  color: var(--voa-gray, #C9C9C4) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
}
.rank-tab-btn.active{
  background: var(--voa-lime, #DDFB05) !important;
  color: #0C0C0C !important;
}

/* --- telas que trazem branco cravado no style.css do People --- */
/* presenca: cartoes de resumo por dia da semana */
.resumo-dia{
  background: var(--voa-surface, #151515) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
}
/* casa gosh: cartoes de ferramentas e acessos */
.casa-card{
  background: var(--voa-surface, #151515) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
}
/* :not(.btn) e essencial — sem isso a regra pinta de limao o texto
   de botoes que ja tem fundo limao, deixando-os invisiveis */
.casa-card a:not(.btn){ color: var(--voa-lime, #DDFB05) !important; }

/* --- chat --- */
.chat-layout,
.chat-main-header,
.chat-sidebar{
  background: var(--voa-surface, #151515) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border-color: var(--voa-line, rgba(239,239,234,.12)) !important;
}
.chat-channel{
  background: transparent !important;
  color: var(--voa-gray, #C9C9C4) !important;
}
.chat-channel:hover{
  background: var(--voa-surface-2, #1E1E1E) !important;
  color: var(--voa-ink, #EFEFEA) !important;
}
.chat-channel.active{
  background: var(--voa-lime, #DDFB05) !important;
  color: #0C0C0C !important;
}

/* --- gerencial --- */
.ger-kpi{
  background: var(--voa-surface, #151515) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
}
.ger-kpi .ger-kpi-value,
.ger-kpi h2, .ger-kpi h3{ color: var(--voa-lime, #DDFB05) !important; }

/* assinatura da frase do dia: era o rotulo "Manifesto Gosh" acima da frase,
   agora e o nome do autor, embaixo e alinhado a direita */
.frase-autor{
  margin-top: 10px !important;
  text-align: right !important;
  color: var(--voa-lime, #DDFB05) !important;
  opacity: .85;
}
.frase-autor::before{ content: "— "; }

/* --- frase do dia (bloco de destaque do dashboard) ---
   O style.css do People monta o fundo com linear-gradient(--gosh-dark -> --gosh-cream).
   O tema VOA INVERTE essas duas variaveis (dark passa a ser claro e cream escuro),
   entao o gradiente original vinha ao contrario: claro onde deveria ser escuro,
   com texto branco por cima. Aqui o bloco e redesenhado por inteiro. */
.frase-card{
  background: linear-gradient(135deg, #151515 0%, #0C0C0C 62%, rgba(221,251,5,.10) 100%) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
  border-left: 3px solid var(--voa-lime, #DDFB05) !important;
  border-radius: 12px !important;
  padding: 22px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.frase-text{
  color: var(--voa-ink, #EFEFEA) !important;
  font-size: 1.06rem !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: .002em !important;
}
.frase-autor{
  margin-top: 12px !important;
  font-size: 10.5px !important;
  letter-spacing: .15em !important;
  color: var(--voa-lime, #DDFB05) !important;
  opacity: 1 !important;
}
@media (max-width: 768px){
  .frase-card{ padding: 18px 18px !important; }
  .frase-text{ font-size: .98rem !important; }
}


/* --- tela de login ---
   login.html NAO herda o base.html: e uma pagina propria que carregava so o
   style.css (tema Gosh). Agora ela carrega o tema VOA tambem, e o que vem
   abaixo ajusta o que era especifico da marca antiga. */
.login-page{
  background: radial-gradient(1200px 600px at 50% -10%, #1A1A1A 0%, #0C0C0C 60%) !important;
  min-height: 100vh;
}
.login-card{
  background: var(--voa-surface, #151515) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
  border-top: 3px solid var(--voa-lime, #DDFB05) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
  color: var(--voa-ink, #EFEFEA) !important;
}
.login-logo-voa svg{
  height: 34px; width: auto; display: block; margin: 0 auto;
  color: var(--voa-lime, #DDFB05);
}
.login-tagline{
  color: var(--voa-dim, #8A8A85) !important;
  letter-spacing: .16em; text-transform: uppercase;
  font-size: 10px !important; margin-top: 10px;
}
.btn-google{
  background: var(--voa-surface-2, #1E1E1E) !important;
  border: 1px solid var(--voa-line-2, rgba(239,239,234,.22)) !important;
  color: var(--voa-ink, #EFEFEA) !important;
}
.btn-google:hover{
  background: #232323 !important;
  border-color: var(--voa-lime, #DDFB05) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  box-shadow: none !important;
}
.login-card small, .login-card .text-muted{ color: var(--voa-dim, #8A8A85) !important; }

/* --- organograma ---
   ATENCAO: estes componentes so existem na tela quando ha pessoas cadastradas.
   Com o banco vazio eles nao aparecem, e por isso escaparam da primeira
   varredura de contraste. */
.org-card{
  background: var(--voa-surface, #151515) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  border-color: var(--voa-line, rgba(239,239,234,.12)) !important;
}
.org-card:hover{
  background: var(--voa-surface-2, #1E1E1E) !important;
}
.org-card .org-nome, .org-card strong, .org-card b{
  color: var(--voa-ink, #EFEFEA) !important;
}
.org-card .org-cargo, .org-card small{
  color: var(--voa-dim, #8A8A85) !important;
}
.org-avatar-initial{
  background: var(--voa-surface-2, #1E1E1E) !important;
  color: var(--voa-lime, #DDFB05) !important;
  border: 1px solid var(--voa-line, rgba(239,239,234,.12)) !important;
}
.org-legend-item{ color: var(--voa-gray, #C9C9C4) !important; }

/* ---------------------------------------------------------------------------
   CAUSA-RAIZ DE LEGENDA COM CORES REPETIDAS

   O voa-theme.css define --gosh-primary e --gosh-green com o MESMO limao
   (#DDFB05). No Gosh App isso nao incomoda, mas o People usa as duas lado a
   lado como categorias diferentes: "Escritorio" x "Home Office" na presenca,
   "Diretores" x "Equipe" no organograma, presente x positivo em varias telas.
   O resultado eram legendas com tres itens e duas cores.

   Aqui o --gosh-green ganha cor propria: segue lendo como positivo, mas para
   de se confundir com o acento da marca. Resolve as 17 telas de uma vez, sem
   editar template nenhum.
   --------------------------------------------------------------------------- */
:root{
  --gosh-green: #5BD98A !important;   /* positivo / segunda categoria */
}

/* ===========================================================================
   VARREDURA 15/09/2026 — cartoes brancos que o tema nao conhecia

   Achados medindo contraste por JS nas telas reais e lendo os <style> dos
   templates. Quase todos so aparecem COM DADOS (eventos, talentos, avaliacoes,
   viagens), por isso escaparam das varreduras anteriores com o banco vazio.
   Os titulos desses cartoes usam --gosh-dark, que o tema inverte para claro:
   com o fundo #fff cravado no template, o texto sumia.
   =========================================================================== */
.form-section,          /* viagens/nova */
.detalhe-card,          /* viagens/<id> */
.dim-card,              /* avaliacao/form */
.rh-card,               /* avaliacao/rh */
.summary-stat,          /* avaliacao/rh */
.comment-card,          /* avaliacao/revisao e rh/gosher */
.evento-card,           /* eventos */
.dsf-card,              /* gerencial: desafios */
.cultura-card,          /* oh-sua-gosh */
.ia-resumo,             /* talentos/<id> */
.avaliacao-card,        /* talentos/<id> */
.talent-card,           /* talentos */
.aviso-card{            /* voadores: avisos de ferias, banco de horas etc. */
  background: var(--voa-surface, #151515) !important;
  color: var(--voa-ink, #EFEFEA) !important;
  box-shadow: 0 0 0 1px var(--voa-line, rgba(239,239,234,.12)) !important;
}
.talent-card:hover{ box-shadow: 0 0 0 1px var(--voa-line-2, rgba(239,239,234,.22)) !important; }

/* celulas vazias de nota (fundo bege claro com texto #ccc) */
.s-empty, .score-empty{
  background: var(--voa-surface-2, #1E1E1E) !important;
  color: var(--voa-dim, #8A8A85) !important;
}

/* botoes da escala de nota na avaliacao */
.escala-btn{
  background: var(--voa-surface-2, #1E1E1E) !important;
  border-color: var(--voa-line-2, rgba(239,239,234,.22)) !important;
}
.escala-btn:hover{ border-color: var(--voa-lime, #DDFB05) !important; }
.escala-btn.selected, .escala-btn:has(input:checked){
  background: rgba(221,251,5,.10) !important;
  border-color: var(--voa-lime, #DDFB05) !important;
}

/* filtros de talentos */
.filter-bar .badge-filter{
  background: var(--voa-surface-2, #1E1E1E) !important;
  border-color: var(--voa-line, rgba(239,239,234,.12)) !important;
  color: var(--voa-gray, #C9C9C4) !important;
}
/* o ativo precisa repor o limao: a regra acima (com !important) tambem o pega */
.filter-bar .badge-filter:hover,
.filter-bar .badge-filter.active{
  background: var(--voa-lime, #DDFB05) !important;
  border-color: var(--voa-lime, #DDFB05) !important;
}

/* sugestao nao lida (oh-sua-gosh) */
.sugestao-nao-lida{ background: rgba(221,251,5,.06) !important; }

/* presenca: indicadores "3/3" e aviso "Voce marcou presencial". Os tons
   #2d8c5c e #c49200 foram escolhidos para fundo claro; no preto ficam em 3,2:1.
   Mesmos verde/amarelo dos badge-soft do voa-theme.css */
.presenca-indicator.ok, .minha-presenca-alert.ok{ color: #6FD98A !important; }
.presenca-indicator.low, .minha-presenca-alert.low{ color: #F5B23D !important; }

/* presenca: dia sem agenda definida */
.minha-agenda-slot[data-val=""]{
  background: var(--voa-surface-2, #1E1E1E) !important;
  color: var(--voa-dim, #8A8A85) !important;
}

/* ---------------------------------------------------------------------------
   TEXTO BRANCO SOBRE LIMAO
   O People pinta o selecionado com --gosh-primary e texto #fff. No tema VOA o
   primary e o limao, e branco no limao nao se le (o "Flexivel" da viagem).
   --------------------------------------------------------------------------- */
.periodo-chip input[type=radio]:checked + label,
.filter-bar .badge-filter:hover,
.filter-bar .badge-filter.active,
.minha-agenda-slot[data-val="escritorio"],
.minha-agenda-slot[data-val="home"],
.msg-avatar{
  color: #0C0C0C !important;
}
/* NAO incluir .chat-msg.mine .chat-bubble aqui: o voa-theme.css ja deixa
   toda .chat-bubble escura (com !important), e texto preto nela some. */
/* o "v" do checkbox marcado vem branco do Bootstrap: some no limao */
.form-check-input:checked[type=checkbox]{
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230C0C0C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.form-check-input:checked[type=radio]{
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230C0C0C'/%3e%3c/svg%3e") !important;
}

/* selo amarelo "Pendente" (docs-pj): o tema clareia o texto do badge */
.badge.bg-warning{ color: #0C0C0C !important; }

/* rotulo de secao do chat ("Geral"): branco a 25% nao se le */
.chat-section-label{ color: var(--voa-dim, #8A8A85) !important; }

/* --- viagens/<id>: conversa --- */
.msg-bubble{ box-shadow: 0 0 0 1px var(--voa-line, rgba(239,239,234,.12)); }
.msg-bubble.admin-bubble{ background: var(--voa-surface-2, #1E1E1E) !important; }
/* avatar de admin usava --gosh-dark (claro no tema) com letra branca */
.msg-avatar.admin{
  background: var(--voa-surface-2, #1E1E1E) !important;
  color: var(--voa-lime, #DDFB05) !important;
  box-shadow: 0 0 0 1px var(--voa-line-2, rgba(239,239,234,.22));
}
/* botao Booking.com: azul-marinho #003580 some no preto (vem inline no
   viagem_detalhe e por classe no viagem_nova) */
.search-btn-booking,
a.btn[style*="#003580"]{
  color: #7FB6E8 !important;
  border-color: rgba(127,182,232,.55) !important;
  background: transparent !important;
}
.search-btn-booking:hover,
a.btn[style*="#003580"]:hover{
  background: rgba(127,182,232,.14) !important;
  color: #7FB6E8 !important;
}
/* botao Google Flights: o azul #1a73e8 fica em 3,9:1 no preto. #8AB4F8 e o
   azul que o proprio Google usa no tema escuro */
.search-btn-flights,
a.btn[style*="#1a73e8"]{
  color: #8AB4F8 !important;
  border-color: rgba(138,180,248,.55) !important;
  background: transparent !important;
}
.search-btn-flights:hover,
a.btn[style*="#1a73e8"]:hover{
  background: rgba(138,180,248,.14) !important;
  color: #8AB4F8 !important;
}