/* Identidade visual do CIASystem, baseada no login histórico do fórum. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Caveat:wght@600&display=swap');

@font-face {
  font-family: industry;
  src: url(https://use.typekit.net/af/c6e293/00000000000000003b9adf5b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3) format("woff2"),
       url(https://use.typekit.net/af/c6e293/00000000000000003b9adf5b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3) format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: industry;
  src: url(https://use.typekit.net/af/d6b712/00000000000000003b9adf58/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff2"),
       url(https://use.typekit.net/af/d6b712/00000000000000003b9adf58/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: industry;
  src: url(https://use.typekit.net/af/6dc482/00000000000000003b9adf53/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"),
       url(https://use.typekit.net/af/6dc482/00000000000000003b9adf53/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: industry;
  src: url(https://use.typekit.net/af/685a23/00000000000000003b9adf56/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff2"),
       url(https://use.typekit.net/af/685a23/00000000000000003b9adf56/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

/* .font-sans (Poppins) é o padrão do corpo do texto — menus, botões,
   parágrafos. .font-display (industry, com fallback Oswald) é só pra
   títulos grandes e a marca "CIASystem" — nunca pro texto corrido. */
.font-industry {
  font-family: 'industry', 'Oswald', sans-serif;
}

/* Estilo "assinatura" nos cards de requerimento — imita a
   caligrafia usada no sistema de referência. */
.assinatura {
  font-family: 'Caveat', cursive;
}

/* Fundo animado full-bleed, só usado na tela de login. */
.cia-bg {
  background-image: url(https://2img.net/i.imgur.com/Hd7TdDr.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.cia-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  animation: cia-bg-cycle 60s infinite;
  pointer-events: none;
}
@keyframes cia-bg-cycle {
  0%   { background-color: #0f1923e6; }
  20%  { background-color: #ffd60059; }
  40%  { background-color: #e95f325e; }
  80%  { background-color: #0f192387; }
  100% { background-color: #0f1923e6; }
}

/* Fundo estilo piso do Habbo — ladrilho repetindo, tamanho exato da
   imagem (65x64) pra não distorcer o efeito de losango. */
.habbo-floor-bg {
  background-image: url(https://imgur.com/4fBBJMW.png);
  background-repeat: repeat;
  background-size: 65px 64px;
  opacity: 0.5;
}

/* Banner de perfil — mesma imagem do login, sem animação, contido
   dentro de um card em vez de cobrir a tela inteira. */
.perfil-banner {
  background-image: url(https://2img.net/i.imgur.com/Hd7TdDr.png);
  background-repeat: repeat;
  background-position: center;
}

/* Moldura de "card de membro" — plaquinha ilustrada com o avatar em
   pose de corpo inteiro por cima. Usada no card de "Novos membros" da
   página inicial.
   OBS: `overflow: hidden` fica no wrapper interno (`.card-membro-clip`,
   aplicado via classe Tailwind no HTML), não aqui — `overflow: hidden`
   nesse mesmo elemento cortaria o `box-shadow` junto (ele deixa de ser
   uma sombra "por fora" e vira sombra "por dentro" do card). */
.card-membro-fundo {
  position: relative;
  height: 283px;
  width: 180px;
  background-image: url(https://imgur.com/mBFCSBg.png);
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #e2e4e9;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Sidebar responsiva (assets/layout.js monta o menu; ele já esconde o
   <aside id="layout-sidebar"> abaixo de md e mostra o menu mobile no
   lugar). O que falta é o <main> de cada página: todas elas trazem uma
   margem esquerda fixa hard-coded (`ml-60`, `ml-[35rem]`...) pra abrir
   espaço pro menu fixo — em telas pequenas isso sobra como um vão vazio
   à esquerda, então zeramos essas classes específicas abaixo de md em
   vez de editar o <main> de cada uma das ~40 páginas uma por uma. */
@media (max-width: 767px) {
  .ml-60,
  .ml-\[35rem\] {
    margin-left: 0 !important;
  }
}

/* Barra de rolagem fina pro menu (fundo escuro #343a40) — a barra
   padrão do navegador é larga e clara, destoando bastante do rail
   cinza escuro. Firefox usa scrollbar-width/-color; Chrome/Safari/Edge
   usam os pseudo-elementos ::-webkit-scrollbar-*. */
#layout-sidebar,
#menu-mobile-painel {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
#layout-sidebar::-webkit-scrollbar,
#menu-mobile-painel::-webkit-scrollbar {
  width: 6px;
}
#layout-sidebar::-webkit-scrollbar-track,
#menu-mobile-painel::-webkit-scrollbar-track {
  background: transparent;
}
#layout-sidebar::-webkit-scrollbar-thumb,
#menu-mobile-painel::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
#layout-sidebar::-webkit-scrollbar-thumb:hover,
#menu-mobile-painel::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}