/* cards-confederando.css
   Card do colaborador (/lista/colaboradores e busca) — alternativa "Cantos".
   Fonte do design: "Crachá Colaborador - Sistema" (Nova Intranet DS), traduzido
   para os TOKENS DO BLOG: azul #0C4D8A | amarelo #FECC00 | #C7D9EC (texto sec.)
   | #093A6B (azul escuro) | fonte Lato.

   ATENÇÃO: este é o artefato PRÉ-COMPILADO de
   resources/src/sass/paginas/_cards-confederando.sass — o build de front não foi
   rodado nesta entrega. Ao rodar o build (geral.css já importa o partial), este
   arquivo pode ser removido e o <link> em components/head.blade.php também.
   Mantenha .css e .sass em sincronia até lá. */

/* ---- Grid responsivo (sobrescreve o flex antigo de _colaboradores.sass) ---- */
#colaboradores .box-colaboradores .galeria .box-galeria {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;
  margin-top: 40px;
  width: 100%;
}
@media (max-width: 1199px) {
  #colaboradores .box-colaboradores .galeria .box-galeria { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  #colaboradores .box-colaboradores .galeria .box-galeria { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  #colaboradores .box-colaboradores .galeria .box-galeria { grid-template-columns: 1fr; }
}

/* ---- Cartão ---- */
.cracha-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 360px;
  background: #0C4D8A;
  border-radius: 24px 24px 16px 16px;
  overflow: hidden;
  font-family: 'Lato', sans-serif;
  box-shadow: 0 6px 18px rgba(9, 58, 107, 0.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cracha-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(9, 58, 107, 0.30);
}

.cracha-card__link {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  padding: 16px 0 30px;
  text-decoration: none;
  color: inherit;
}
.cracha-card__link:hover { text-decoration: none; }

/* ---- Selos do topo (aniversário / sede) ---- */
.cracha-badge {
  position: absolute;
  top: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  max-width: 46%;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 11.5px;
  font-size: 0.71875rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.cracha-badge svg { flex: none; width: 13px; height: 13px; stroke: #FECC00; }
.cracha-badge span { overflow: hidden; text-overflow: ellipsis; }
.cracha-badge--aniv {
  left: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.cracha-badge--sede {
  right: 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* ---- Foto: círculo branco perfeito (sem aro amarelo) ----
   Wrapper QUADRADO em px fixos (largura == altura) garante círculo perfeito em
   qualquer card, independente da proporção da imagem. NÃO usar aspect-ratio/%:
   se não for respeitado, o container fica oval com border-radius:50%. */
.cracha-foto-wrap {
  position: relative;
  width: 126px;
  height: 126px;
  margin: 8px auto 14px;
}
/* Na grade de colaboradores há selos (data/sede) no topo: afasta a foto p/ ela
   não ficar colada nos selos (o alinhamento flex-start aproximou a foto do topo).
   Vale p/ /lista/colaboradores (#box-galeria) e p/ a busca (#colaborador),
   ambos containers .box-galeria — padroniza o card nas duas telas. */
.box-galeria .cracha-foto-wrap {
  margin-top: 46px;
}
.cracha-foto {
  position: relative;
  z-index: 1;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 18px rgba(9, 58, 107, 0.30);
}
.cracha-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* ---- Nome e setor ---- */
.cracha-nome {
  margin: 0;
  padding: 0 14px;
  text-align: center;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cracha-setor {
  margin: 0;
  padding: 6px 18px 0;
  text-align: center;
  color: #C7D9EC;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Rodapé: divisor amarelo + cápsula do ramal ---- */
.cracha-rodape {
  margin-top: auto;
}
/* Mensagem de "sem resultados" centralizada no grid (substitui o alerta flutuante) */
.sem-resultados-ramais {
  grid-column: 1 / -1;
  width: 100%;
  margin: 24px 0;
  text-align: center;
  color: #0C4D8A;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
.cracha-divisor {
  width: calc(100% - 56px);
  height: 1.5px;
  margin: 0 auto 14px;
  background: #FECC00;
}
.cracha-ramal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  min-width: 130px;
  max-width: calc(100% - 32px);
  height: 38px;
  margin: 0 auto;
  padding: 0 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 19px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
  font-size: 0.875rem;
  letter-spacing: .3px;
  white-space: nowrap;
}
.cracha-ramal svg { flex: none; width: 18px; height: 18px; stroke: #FECC00; }

/* ---- Faixa multicolorida na base ---- */
.cracha-faixa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  height: 18px;
}
.cracha-faixa span { flex: 1; }
.cracha-faixa span:nth-child(1) { background: #00913e; }
.cracha-faixa span:nth-child(2) { background: #009a3e; }
.cracha-faixa span:nth-child(3) { background: #62b22e; }
.cracha-faixa span:nth-child(4) { background: #e8441e; }
.cracha-faixa span:nth-child(5) { background: #ec6718; }
.cracha-faixa span:nth-child(6) { background: #e8a00a; }
.cracha-faixa span:nth-child(7) { background: #124590; }
.cracha-faixa span:nth-child(8) { background: #006fb8; }

/* ===========================================================================
   HOME (/): reusa o mesmo card (.cracha-*) nos blocos Aniversariantes e Novos.
   Painel claro + cabeçalho azul + acento amarelo (no lugar dos fundos
   amarelo-ocre/cinza antigos). Só apresentação. =========================== */

/* tag "NOVO" (card de novos colaboradores) */
.cracha-tag-novo {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: #FECC00;
  color: #0C4D8A;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 10px;
}

.bloco-confederando { padding: 10px 0 50px; }

/* dois painéis lado a lado (58% / 42%); empilham < 900px; 1 card < 600px (design) */
.engloba-conteudo-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
  margin-top: 30px;
}
.engloba-conteudo-2 .painel-confederando {
  border-radius: 12px;
  padding: 24px;
  margin: 0; /* zera margin-top:30px legado de .box-aniversariantes (geral.css) p/ alinhar os topos */
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* painel primário (aniversariantes): superfície branca, mais ênfase */
.engloba-conteudo-2 .box-aniversariantes {
  background: #fff;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(12, 77, 138, 0.10);
  flex: 0 0 calc(50% - 10px);
  max-width: calc(50% - 10px);
  min-width: 0;
}
/* painel secundário (novos colaboradores): mesmo tamanho do primário, com de-ênfase visual */
.engloba-conteudo-2 .box-novos-colaboradores {
  background: #f6f8fb;
  border: 1px solid #e4e9f0;
  box-shadow: 0 2px 8px rgba(12, 77, 138, 0.05);
  flex: 0 0 calc(50% - 10px);
  max-width: calc(50% - 10px);
  min-width: 0;
}
/* painel único (o outro bloco não existe) ocupa a largura planejada inteira */
.engloba-conteudo-2 .painel-confederando--full {
  flex-basis: 100%;
  max-width: 100%;
}
@media (max-width: 899px) {
  .engloba-conteudo-2 .box-aniversariantes,
  .engloba-conteudo-2 .box-novos-colaboradores {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@media (max-width: 599px) {
  .engloba-conteudo-2 .painel-confederando { padding: 18px 16px; }
}

/* cabeçalho do painel: borda topo cinza + base amarela; min-height alinha os topos */
.painel-confederando__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 2px solid #d6dde6;
  border-bottom: 2px solid #FECC00;
  padding: 9px 2px;
  margin-bottom: 22px;
  min-height: 54px;
}
.painel-confederando__title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.painel-confederando__title svg { flex: none; width: 20px; height: 20px; }
.painel-confederando__title h2 {
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: 16px;
  font-size: 1rem;
  letter-spacing: .5px;
  color: #0C4D8A;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Nome do mês em destaque (amarelo da marca) no título dos aniversariantes */
.painel-confederando__title h2 .mes-destaque {
  color: #FECC00;
}
.painel-confederando__count {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 12px;
  font-size: 0.75rem;
  color: #0C4D8A;
  background: rgba(12, 77, 138, 0.08);
  padding: 6px 13px;
  border-radius: 13px;
  white-space: nowrap;
  flex: none;
}
/* corpo do painel: ocupa a altura restante (carrossel + controles) */
.painel-confederando__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Padronização dos botões "Ver todos"/"Ver mais": amarelo #FECC00 + texto azul
   bold (mesmo estilo do "Ver todos" do humor). Override do .btn-ver-todos
   compilado em geral.css (build de front não rodado). Fonte: _padroes.sass. */
.btn-ver-todos {
  background: #FECC00;
  color: #0C4D8A;
  font-weight: 700;
}
.btn-ver-todos:hover {
  background: #e9bd00;
  color: #0C4D8A;
  text-decoration: none;
}

/* Cantinho do humor: cartões claros + botão Mostrar na paleta */
.box-piadas .box .piada {
  background: #f6f8fa;
  border: 1px solid #eef1f4;
  border-radius: 8px;
  padding: 13px 14px;
  margin-bottom: 12px;
}
.box-piadas .box .piada h1 {
  color: #3b4453;
  font-weight: 700;
  font-size: 13.5px;
  font-size: 0.84375rem;
  margin-bottom: 10px;
}
.box-piadas .box .piada .resposta .btn-mostrar { background: #0C4D8A; }
.box-piadas .box .piada .resposta .btn-mostrar:hover { background: #093A6B; }

/* ---- Controles do carrossel: ‹ • • • › numa única linha (design) ---- */
.confederando-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.confederando-controls.is-hidden { display: none; }
.cc-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0C4D8A;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  padding: 0 0 3px;
  flex: none;
  transition: background .2s ease;
}
.cc-arrow:hover { background: #093A6B; }
.cc-dots { display: flex; align-items: center; gap: 7px; }
.cc-dots .owl-dot { background: transparent; border: none; padding: 0; cursor: pointer; }
.cc-dots .owl-dot span {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0;
  background: rgba(12, 77, 138, 0.25);
  border-radius: 4px;
  transition: all .3s ease;
}
.cc-dots .owl-dot.active span { width: 22px; background: #FECC00; }
@media (max-width: 599px) {
  .cc-arrow { width: 44px; height: 44px; }
  .cc-dots .owl-dot span { width: 20px; height: 20px; border-radius: 12px; }
  .cc-dots .owl-dot.active span { width: 32px; }
}

/* Home: card COMPACTO (design "thin" ~156px) — ESCOPADO a .carousel-confederando.
   NÃO afeta o card da /lista/colaboradores nem a busca.
   ALTURA FIXA (pior caso: nome 2 linhas + setor 2 linhas = 272px, border-box) p/
   TODOS os cards ficarem do mesmo tamanho nos dois carrosseis -> paineis alinhados.
   Nomes/setores curtos: a folga vai pro gap do rodape (margin-top:auto). */
.carousel-confederando .cracha-card { min-height: 272px; }
.carousel-confederando .cracha-card__link {
  justify-content: flex-start;
  padding: 16px 0 20px;
}
.carousel-confederando .cracha-foto-wrap {
  width: 86px;
  height: 86px;
  margin: 2px auto 12px;
}
.carousel-confederando .cracha-foto { width: 86px; height: 86px; }
/* Espaçamento nome/setor natural (tight); divisor/cápsula continuam alinhados pelo
   rodapé (margin-top:auto). A uniformidade de altura vem do min-height do card. */
.carousel-confederando .cracha-nome { font-size: 16px; }
.carousel-confederando .cracha-setor { font-size: 12.5px; padding: 6px 16px 0; }
.carousel-confederando .cracha-divisor { width: calc(100% - 48px); margin: 0 auto 12px; }
.carousel-confederando .cracha-ramal {
  height: 34px;
  min-width: 120px;
  max-width: calc(100% - 28px);
  padding: 0 16px;
  border-radius: 17px;
  font-size: 13px;
}
.carousel-confederando .cracha-ramal svg { width: 16px; height: 16px; }
.carousel-confederando .cracha-faixa { height: 14px; }
/* rodapé ancorado na base -> alinhado em toda a linha do carrossel */
.carousel-confederando .cracha-rodape { margin-top: auto; padding-top: 12px; }
/* alturas iguais entre os cards visíveis do owl */
.carousel-confederando .owl-stage { display: flex; }
.carousel-confederando .owl-item { display: flex; }
.carousel-confederando .owl-item > .cracha-card { width: 100%; height: auto; }

/* ===========================================================================
   Aba AMBIENTES (/lista/colaboradores): card de ambiente (SEM foto) reusando o
   card azul. Sem marca d'água; círculo branco com ícone de telefone azul + arco
   amarelo à esquerda (mesmo tratamento dos cards de colaborador). ============ */
#ambientes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;
  margin: 0;
}
@media (max-width: 1199px) { #ambientes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { #ambientes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { #ambientes { grid-template-columns: 1fr; } }
/* círculo branco com ícone (no lugar da foto) */
.cracha-foto--icone {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cracha-foto--icone svg {
  width: 52px;
  height: 52px;
  stroke: #0C4D8A;
}