/* 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://i.imgur.com/4cyOZ6R.png);
  background-repeat: repeat;
  background-position: center;
  background-size: cover;
}

/* 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);
}

/* ===================================================================
   Cards de requerimento — estética do System antigo (linha do tempo,
   borda e icone na cor do status). Montados por assets/requerimento-card.js.
   Fonte da assinatura: troque --req-fonte-assinatura (e o @import no topo).
   =================================================================== */
:root {
  --req-fonte-assinatura: 'Caveat', cursive;   /* PROVISORIA: aguardando escolha (referencias/teste-assinaturas.html) */
  --req-cinza: #9aa1ab;
  --req-verde: #2fb35a;
  --req-vermelho: #e04b4b;
  --req-cinza-escuro: #4b5259;
}
.req-timeline { position: relative; }
.req-timeline::before {
  content: ''; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: #d7dbe0;
}
.req-item { --cor: var(--req-cinza); position: relative; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.req-item.req-aprovado { --cor: var(--req-verde); }
.req-item.req-reprovado { --cor: var(--req-vermelho); }
.req-item.req-cancelado { --cor: var(--req-cinza-escuro); }
.req-icone {
  position: relative; z-index: 1; flex-shrink: 0; width: 44px; height: 44px; margin-top: 2px; border-radius: 9999px;
  border: 2px solid var(--cor); background: #fff; color: var(--cor);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.req-card {
  flex: 1; min-width: 0; background: #fff; border-radius: 18px; border-left: 4px solid var(--cor);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05); overflow: hidden; color: #212529;
}
.req-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 20px; border-bottom: 1px solid #eceef1; }
.req-cab h3 { font-size: 16px; font-weight: 700; margin: 0; }
.req-cab .req-data { margin-left: auto; font-size: 14px; color: #6c757d; }
.req-selo { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1; padding: 6px 11px; border-radius: 9999px; }
.req-selo-pendente { background: #e9ecef; color: #495057; }
.req-selo-aprovado { background: #dcf5e3; color: #1e9e4a; }
.req-selo-reprovado { background: #fde1e1; color: #c62828; }
.req-selo-cancelado { background: #d6d9dd; color: #343a40; }
.req-corpo { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; padding: 20px; }
.req-autor { text-align: center; }
.req-avatar {
  width: 78px; height: 78px; margin: 0 auto 10px; border-radius: 9999px; background: #eef0f3; border: 1px solid #e2e4e9;
  overflow: hidden; display: flex; align-items: flex-start; justify-content: center;
}
.req-avatar img { width: 120px; max-width: none; height: auto; margin-top: -34px; }
.req-avatar span { margin-top: 26px; font-weight: 700; color: #6c757d; }
.req-autor .req-nick { font-weight: 600; font-size: 16px; word-break: break-word; }
.req-autor .req-rotulo { font-size: 12px; color: #6c757d; margin-top: 8px; }
.req-autor .req-patente { font-size: 13px; font-weight: 600; line-height: 1.35; }
.req-texto { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.req-texto .req-escreveu { color: #6c757d; margin-bottom: 4px; }
.req-texto .req-escreveu b { color: #212529; }
.req-texto .req-campo { margin: 6px 0; white-space: pre-line; }
.req-texto .req-campo b { font-weight: 700; }
.req-texto .req-campo a { color: inherit; text-decoration: none; }
.req-texto .req-campo a:hover { text-decoration: underline; }
.req-texto .req-resumo { font-weight: 700; margin: 8px 0; }
.req-texto .req-concordo { color: #1e9e4a; margin: 12px 0 10px; display: flex; gap: 8px; align-items: center; }
.req-texto .req-assinatura-rotulo { font-size: 12px; color: #6c757d; margin-top: 12px; }
.req-assinatura { font-family: var(--req-fonte-assinatura); font-size: 22px; line-height: 1.3; color: #212529; }
.req-rodape { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 20px; border-top: 1px solid #eceef1; }
.req-rodape .req-rotulo { font-size: 12px; color: #6c757d; margin-bottom: 4px; }
.req-rodape .req-vazio { font-style: italic; color: #8a929b; font-size: 17px; }
.req-rodape .req-responsavel { font-family: var(--req-fonte-assinatura); font-size: 19px; }
.req-rodape .req-justificativa { font-size: 13px; color: #495057; margin-top: 6px; grid-column: 1 / -1; }
.req-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid #eceef1; }
.req-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 10px; border: 0; cursor: pointer; }
.req-btn:disabled { opacity: .6; cursor: default; }
.req-btn-aprovar { background: #dcf5e3; color: #1e9e4a; }
.req-btn-reprovar { background: #fde1e1; color: #d32f2f; }
.req-btn-cancelar { background: #e4e6e9; color: #343a40; }
.req-btn-aprovar:hover { background: #c9efd5; }
.req-btn-reprovar:hover { background: #fbcfcf; }
.req-btn-cancelar:hover { background: #d6d9dd; }
.req-justificar { width: 100%; display: none; gap: 8px; flex-wrap: wrap; }
.req-justificar.aberto { display: flex; }
.req-justificar textarea {
  flex: 1 1 260px; min-height: 42px; font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid #d7dbe0; border-radius: 10px; background: #f8f9fa;
}
/* celular: colunas viram pilha */
@media (max-width: 640px) {
  .req-timeline::before { left: 15px; }
  .req-item { gap: 8px; }
  .req-icone { width: 32px; height: 32px; font-size: 13px; }
  .req-cab { padding: 10px 14px; }
  .req-cab .req-data { margin-left: 0; width: 100%; font-size: 13px; }
  .req-corpo { grid-template-columns: 1fr; gap: 12px; padding: 16px 14px; }
  .req-texto { font-size: 15px; }
  .req-rodape { grid-template-columns: 1fr; padding: 12px 14px; }
  .req-acoes { padding: 10px 14px; }
}

/* ===================================================================
   Perfil do militar (/perfil/{nick}/{aba}) — estética do System antigo.
   =================================================================== */
.perfil-topo { position: relative; margin-bottom: 56px; }
.perfil-banner-topo { height: 132px; border-radius: 18px; background-color: #7a0f1c; }
.perfil-avatar-redondo {
  position: absolute; left: 16px; bottom: -48px; width: 92px; height: 92px; border-radius: 9999px; background: #fff;
  border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); overflow: hidden; display: flex; justify-content: center; align-items: flex-start;
}
.perfil-avatar-redondo img { width: 140px; max-width: none; margin-top: -38px; }
.perfil-avatar-redondo span { margin-top: 30px; font-weight: 700; color: #6c757d; }
.perfil-grade { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.perfil-card {
  background: #fff; border-radius: 18px; padding: 20px 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05);
}
.perfil-corpo-inteiro { display: flex; justify-content: center; min-height: 150px; margin-bottom: 8px; }
.perfil-corpo-inteiro img { height: 190px; width: auto; }
.perfil-nick { text-align: center; font-weight: 700; font-size: 18px; margin-bottom: 12px; word-break: break-word; }
.perfil-copiar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f1f3f5; border: 1px solid #e2e4e9;
  border-radius: 10px; padding: 8px 10px; font-size: 12px; margin-bottom: 14px;
}
.perfil-copiar span { overflow-wrap: anywhere; }
.perfil-copiar button { color: #6c757d; flex-shrink: 0; }
.perfil-copiar button:hover { color: #212529; }
.perfil-info { font-size: 14px; }
.perfil-info div { display: flex; gap: 4px; margin: 3px 0; }
.perfil-info dt { font-weight: 700; }
.perfil-rotulo { font-size: 12px; color: #6c757d; margin: 12px 0 6px; }
.perfil-grupos { display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-grupo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; background: #eef0f3; border-radius: 9999px; padding: 3px 9px; }
.perfil-grupo img { width: 16px; height: 16px; object-fit: contain; }
.perfil-config { display: block; text-align: center; margin-top: 14px; font-size: 12px; font-weight: 600; color: #046b2f; }
.perfil-abas { display: flex; gap: 20px; border-bottom: 1px solid #dfe2e6; margin-bottom: 14px; overflow-x: auto; }
.perfil-abas a { padding: 6px 0 8px; font-size: 14px; font-weight: 600; color: #6c757d; border-bottom: 2px solid transparent; white-space: nowrap; }
.perfil-abas a.ativa { color: #212529; border-bottom-color: #046b2f; }
.perfil-aula {
  display: flex; align-items: flex-start; gap: 12px; background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .04);
}
.perfil-aula-icone {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e2e4e9; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #6c757d; overflow: hidden;
}
.perfil-aula-icone img { max-width: 26px; max-height: 26px; }
.perfil-aula-nome { font-weight: 700; font-size: 14px; }
.perfil-aula-instrutor { font-size: 12px; color: #6c757d; }
.perfil-aula-obs { font-size: 12px; color: #495057; margin-top: 2px; overflow-wrap: anywhere; }
.perfil-aula-obs a { color: inherit; }
.perfil-aula-data { font-size: 12px; color: #6c757d; white-space: nowrap; }
.perfil-ev-corpo { padding: 12px 20px 14px; font-size: 14px; }
.perfil-ev-destaque { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.perfil-ev-destaque i { font-size: 11px; color: #6c757d; margin: 0 4px; }
.perfil-ev-quem { color: #6c757d; font-size: 13px; }
.perfil-ev-quem a { color: #212529; font-weight: 600; }
.perfil-ev-motivo { font-size: 13px; margin-top: 6px; white-space: pre-line; }
@media (max-width: 767px) {
  .perfil-grade { grid-template-columns: 1fr; }
  .perfil-banner-topo { height: 100px; }
}

/* Formulário de requerimento: painel do alvo à esquerda (System antigo) */
.req-form-grade {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); background: #fff; border-radius: 18px; overflow: visible;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05);
}
.req-form-grade > form { padding: 20px; }
.req-painel-alvo { border-right: 1px solid #eceef1; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 220px; }
.req-painel-vazio { color: #6c757d; font-size: 14px; max-width: 200px; }
.req-painel-avatar { height: 150px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 8px; }
.req-painel-avatar img { height: 150px; width: auto; }
.req-painel-nick { font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.req-painel-info { font-size: 13px; text-align: left; }
.req-painel-info div { display: flex; gap: 4px; }
.req-painel-info dt { font-weight: 700; }
.req-painel-aviso { font-size: 12px; color: #b45309; }
.req-painel-missao { font-size: 12px; color: #6c757d; margin-top: 6px; font-style: italic; }
@media (max-width: 767px) {
  .req-form-grade { grid-template-columns: 1fr; }
  .req-painel-alvo { border-right: 0; border-bottom: 1px solid #eceef1; min-height: 0; }
}
.perfil-contagens { border-top: 1px solid #eceef1; margin-top: 10px; padding-top: 10px; }

/* ===================================================================
   Listagens (modelo do System antigo): bloco por patente com barra lateral colorida.
   =================================================================== */
.lst-bloco {
  background: #fff; border-radius: 18px; border-left: 5px solid var(--cor, #9ca3af); overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05);
}
.lst-cab { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #f4f5f7; }
.lst-cab h2 { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: #212529; margin: 0; }
.lst-icone { width: 32px; height: 32px; border-radius: 8px; background: #e8eaed; display: flex; align-items: center; justify-content: center; color: #212529; font-size: 13px; flex-shrink: 0; }
.lst-cont { margin-left: auto; font-size: 14px; color: #6c757d; }
.lst-linha { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid #eceef1; transition: background .15s; }
.lst-linha:hover { background: #f8f9fa; }
.lst-av { width: 42px; height: 42px; border-radius: 9999px; background: #eef0f3; border: 1px solid #e2e4e9; overflow: hidden; flex-shrink: 0; display: flex; justify-content: center; align-items: flex-start; }
.lst-av img { width: 70px; max-width: none; margin-top: -12px; }
.lst-av span { margin-top: 12px; font-size: 12px; font-weight: 700; color: #6c757d; }
.lst-texto { font-size: 16px; color: #212529; line-height: 1.4; overflow-wrap: anywhere; }
.lst-grupos { display: block; font-size: 13px; font-style: italic; color: #6c757d; margin-top: 1px; }
.lst-selo { font-size: 11px; font-weight: 600; background: #fef3c7; color: #92400e; border-radius: 9999px; padding: 1px 8px; margin-left: 4px; }
.lst-vazio { padding: 12px 18px; border-top: 1px solid #eceef1; font-size: 13px; color: #8a929b; }
.lst-posicao { width: 32px; height: 32px; border-radius: 8px; background: #f4f5f7; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.lst-pontos { margin-left: auto; font-size: 13px; font-weight: 700; color: #046b2f; }
.lst-pontos-neg { color: #b91c1c; }
.pontos-pos { color: #046b2f; font-weight: 700; }
.pontos-neg { color: #b91c1c; font-weight: 700; }
@media (max-width: 640px) {
  .lst-cab, .lst-linha { padding: 10px 14px; }
  .lst-texto { font-size: 15px; }
}

/* ===================================================================
   Documentos (System antigo): categorias com capa e titulo, linhas com revisao/selo/olho.
   =================================================================== */
.doc-cat { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05); }
.doc-capa {
  position: relative; height: 120px; display: flex; align-items: flex-end; padding: 0 22px 18px;
  background: #1e1b4b; background-size: cover; background-position: center;
  background-image: linear-gradient(90deg, #1e1b4b, #312e81);
}
.doc-capa h2 { font-family: 'industry', 'Oswald', sans-serif; font-weight: 700; font-size: 26px; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); margin: 0; }
.doc-editar-cat { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 9999px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 12px; }
.doc-linha { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-top: 1px solid #eceef1; }
.doc-linha:first-of-type { border-top: 0; }
.doc-linha:hover { background: #f8f9fa; }
.doc-info { flex: 1; min-width: 0; }
.doc-titulo { font-weight: 600; font-size: 16px; color: #212529; }
.doc-rev { font-size: 14px; color: #6c757d; }
.doc-oculto .doc-titulo, .doc-oculto .doc-rev { color: #9aa1ab; }
.doc-selo { font-size: 13px; font-weight: 600; border-radius: 9999px; padding: 4px 12px; white-space: nowrap; }
.doc-selo-vigente { background: #dcf5e3; color: #1e9e4a; }
.doc-selo-revogado { background: #fde1e1; color: #c62828; }
.doc-selo-oculto { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #6c757d; background: #eef0f3; border-radius: 6px; padding: 2px 8px; vertical-align: middle; }
.doc-olho { width: 36px; height: 36px; border-radius: 9999px; color: #495057; font-size: 17px; flex-shrink: 0; }
.doc-olho:hover { background: #eef0f3; }
.doc-vazio { padding: 16px 22px; font-size: 14px; color: #8a929b; }
@media (max-width: 640px) {
  .doc-capa { height: 96px; padding: 0 16px 14px; }
  .doc-capa h2 { font-size: 21px; }
  .doc-linha { padding: 12px 16px; gap: 10px; }
}

/* ===================================================================
   Grupos (System antigo): banner, logo sobreposto, abas com rolagem, metas.
   =================================================================== */
.grp-voltar { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 9999px; padding: 6px 14px; font-size: 14px; color: #495057; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); margin-bottom: 14px; }
.grp-banner { position: relative; height: 150px; border-radius: 18px; background: linear-gradient(110deg, #c00000 0%, #7a0b10 45%, #111318 100%); background-size: cover; background-position: center; margin-bottom: 56px; }
.grp-logo { position: absolute; left: 24px; bottom: -44px; width: 96px; height: 96px; border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #6c757d; font-size: 28px; }
.grp-logo img { max-width: 84px; max-height: 84px; }
.grp-cab { background: #fff; border-radius: 18px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05); }
.grp-cab h2 { font-family: 'industry', 'Oswald', sans-serif; font-size: 22px; font-weight: 700; margin: 0; }
.grp-cab p { font-size: 13px; color: #6c757d; }
.grp-abas { display: flex; gap: 22px; overflow-x: auto; background: #fff; border-radius: 18px; padding: 12px 20px 0; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05); }
.grp-abas a { padding-bottom: 10px; font-size: 14px; font-weight: 600; color: #6c757d; border-bottom: 2px solid transparent; white-space: nowrap; }
.grp-abas a.ativa { color: #212529; border-bottom-color: #046b2f; }
.grp-metas { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05); }
.grp-meta-linha { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid #eceef1; }
.grp-meta-linha:first-child { border-top: 0; }
.grp-meta-info { flex: 1; min-width: 0; }
.grp-meta-nome { display: block; font-size: 15px; overflow-wrap: break-word; }
.grp-meta-barra { display: block; height: 4px; border-radius: 9999px; background: #eceef1; margin-top: 8px; max-width: 420px; overflow: hidden; }
.grp-meta-barra span { display: block; height: 100%; background: #046b2f; border-radius: 9999px; }
.grp-meta-num { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 16px; flex-shrink: 0; }
.grp-meta-selo { font-size: 11px; font-weight: 600; border-radius: 9999px; padding: 2px 9px; white-space: nowrap; }
.grp-meta-ok { background: #dcf5e3; color: #1e9e4a; }
.grp-meta-nao { background: #fde1e1; color: #c62828; }
.grp-meta-isento { background: #e9ecef; color: #495057; }
/* Metas: navegação de semanas */
.grp-sem-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.grp-sem-periodo { font-weight: 700; font-size: 15px; text-align: center; flex: 1; }
.grp-sem-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; color: #212529; flex-shrink: 0; }
.grp-sem-btn:disabled { opacity: .4; cursor: not-allowed; }
.grp-pag { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 4px; font-size: 13px; color: #6c757d; }
/* Registros: log de aulas */
.grp-aula { background: #fff; border-radius: 16px; border-left: 4px solid #1e7a3c; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05); overflow: hidden; }
.grp-aula header { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #eceef1; }
.grp-aula h3 { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; margin: 0; }
.grp-aula-selo { font-size: 12px; font-weight: 600; border-radius: 9999px; padding: 2px 10px; white-space: nowrap; background: #dcf5e3; color: #1e9e4a; }
.grp-aula-lixeira { color: #6c757d; padding: 2px 4px; }
.grp-aula-lixeira:hover { color: #c62828; }
.grp-aula-corpo { padding: 12px 18px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.grp-aula-corpo p { margin: 0; overflow-wrap: anywhere; }
.grp-aula-linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grp-aula-pessoa { display: inline-flex; align-items: center; gap: 8px; }
.grp-aula-pessoa:hover span { color: #046b2f; }
.grp-aula .lst-av { width: 26px; height: 26px; }
.grp-aula-reprovada { border-left-color: #c62828; }
.grp-aula-reprovada .grp-aula-selo { background: #fde1e1; color: #c62828; }
.grp-aula-cancelada { border-left-color: #adb5bd; opacity: .8; }
.grp-aula-cancelada .grp-aula-selo { background: #e9ecef; color: #495057; }
/* Hierarquia do grupo: tabela no computador, cartões no celular */
.grp-hier-cab, .grp-hier-linha { display: grid; grid-template-columns: minmax(12rem, 1fr) 6.5rem 5.5rem 4.5rem 5.5rem 5rem; gap: 8px; align-items: center; }
.grp-hier-cab { font-size: 12px; color: #6c757d; font-weight: 600; padding: 0 0 6px; }
.grp-hier-linha { padding: 6px 0; border-top: 1px solid #eceef1; }
.grp-hier-campo > span { display: none; }
.grp-hier-check { display: flex; justify-content: center; }
.grp-hier-check > span { display: none; }
.grp-hier-linha.travado input { background: #f3f4f6; color: #6c757d; }
.grp-hier-acao { text-align: right; }
@media (max-width: 640px) {
  .grp-hier-cab { display: none; }
  .grp-hier-linha { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px; margin-bottom: 10px; border: 1px solid #e3e6ea; border-radius: 12px; }
  .grp-hier-linha.travado { background: #f8f9fa; }
  .grp-hier-nome { grid-column: 1 / -1; }
  .grp-hier-campo > span { display: block; font-size: 12px; font-weight: 600; color: #6c757d; margin-bottom: 2px; }
  .grp-hier-check { justify-content: flex-start; align-items: center; gap: 6px; font-size: 14px; }
  .grp-hier-check > span { display: inline; }
  .grp-hier-acao { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .grp-banner { height: 110px; }
  .grp-logo { width: 80px; height: 80px; bottom: -36px; }
  .grp-meta-linha { padding: 10px 14px; gap: 10px; }
  .grp-meta-num { max-width: 38%; }
  .grp-meta-selo { white-space: normal; text-align: right; font-size: 10px; }
}

/* ===================================================================
   Editor rico (postagem padrao do System antigo) + conteudo HTML exibido.
   =================================================================== */
.ed { border: 1px solid #e2e4e9; border-radius: 12px; background: #fff; overflow: visible; }
.ed.ed-cheia { position: fixed; inset: 12px; z-index: 70; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.ed.ed-cheia .ed-area, .ed.ed-cheia .ed-codigo, .ed.ed-cheia .ed-previa { flex: 1; max-height: none; }
.ed-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 8px 10px; background: #eef0f3; border-bottom: 1px solid #e2e4e9; border-radius: 12px 12px 0 0; }
.ed-btn { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 14px; color: #212529; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ed-btn:hover, .ed-btn.ativo { background: #dfe3e8; }
.ed-btn-texto { font-weight: 500; }
.ed-seta { font-size: 9px; color: #6c757d; }
.ed-sep { width: 1px; height: 22px; background: #cfd4da; margin: 0 4px; }
.ed-quebra { flex-basis: 100%; height: 0; }
.ed-menu { position: relative; }
.ed-lista { display: none; position: absolute; top: 36px; left: 0; z-index: 20; min-width: 170px; background: #fff; border: 1px solid #e2e4e9; border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); padding: 4px; }
.ed-lista.aberta { display: block; }
.ed-lista button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.ed-lista button:hover { background: #eef0f3; }
.ed-amostra { width: 14px; height: 14px; border-radius: 4px; border: 1px solid #cfd4da; display: inline-block; }
.ed-modos { display: inline-flex; border: 1px solid #cfd4da; border-radius: 8px; overflow: hidden; background: #fff; }
.ed-modos button { padding: 5px 10px; font-size: 13px; font-weight: 600; color: #495057; display: inline-flex; align-items: center; gap: 6px; }
.ed-modos button.ativo { background: #046b2f; color: #fff; }
.ed-area, .ed-codigo, .ed-previa { min-height: 200px; max-height: 60vh; overflow: auto; padding: 14px 16px; font-size: 15px; }
.ed-area:focus { outline: none; }
.ed-codigo { width: 100%; font-family: 'Courier New', monospace; font-size: 13px; border: 0; resize: vertical; background: #1f2328; color: #e6edf3; }
.ed-previa { border-top: 2px dashed #cfd4da; background: #fcfcfd; }
.ed-rodape { text-align: right; font-size: 12px; color: #6c757d; padding: 6px 12px; background: #eef0f3; border-top: 1px solid #e2e4e9; border-radius: 0 0 12px 12px; }
/* conteudo rico exibido (mensagem do grupo, previa) */
.conteudo-rico { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.ed-area h1, .ed-previa h1, .conteudo-rico h1 { font-size: 26px; font-weight: 700; margin: 10px 0; }
.ed-area h2, .ed-previa h2, .conteudo-rico h2 { font-size: 21px; font-weight: 700; margin: 10px 0; }
.ed-area h3, .ed-previa h3, .conteudo-rico h3 { font-size: 18px; font-weight: 700; margin: 8px 0; }
.ed-area h4, .ed-previa h4, .conteudo-rico h4 { font-size: 16px; font-weight: 700; margin: 8px 0; }
.ed-area ul, .ed-previa ul, .conteudo-rico ul { list-style: disc; padding-left: 24px; }
.ed-area ol, .ed-previa ol, .conteudo-rico ol { list-style: decimal; padding-left: 24px; }
.ed-area a, .ed-previa a, .conteudo-rico a { color: #046b2f; text-decoration: underline; }
.ed-area img, .ed-previa img, .conteudo-rico img { max-width: 100%; height: auto; border-radius: 8px; }
.ed-area hr, .ed-previa hr, .conteudo-rico hr { border: 0; border-top: 1px solid #dfe2e6; margin: 12px 0; }
.ed-area table td, .ed-area table th, .conteudo-rico table td, .conteudo-rico table th { border: 1px solid #cfd4da; padding: 6px 8px; }
.ed-area code, .ed-previa code, .conteudo-rico code { font-family: 'Courier New', monospace; background: #eef0f3; border-radius: 4px; padding: 1px 5px; }
.ed-area p, .conteudo-rico p { margin: 4px 0; }

/* ===================================================================
   Lista de grupos (modelo "Grupos e Companhias da CIA")
   =================================================================== */
.gl-bloco { background: #fff; border: 1px solid #e2e4e9; border-radius: 22px; padding: 22px 24px; }
.gl-bloco h2 { font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: #212529; font-weight: 500; margin: 0 0 14px; }
.gl-item { display: flex; align-items: center; gap: 16px; border: 1px solid #e2e4e9; border-left: 4px solid var(--cor, #9ca3af); border-radius: 14px; padding: 14px 18px; margin-top: 10px; background: #fff; transition: box-shadow .15s; }
.gl-item:first-of-type { margin-top: 0; }
.gl-item:hover { box-shadow: 0 2px 10px rgba(16, 24, 40, .08); }
.gl-logo { width: 46px; height: 46px; border: 1px solid #e2e4e9; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; color: #9ca3af; }
.gl-logo img { max-width: 38px; max-height: 38px; }
.gl-nome { font-weight: 600; font-size: 16px; color: #212529; }
.gl-qtd { font-size: 14px; color: #495057; }
.gl-seta { margin-left: auto; font-size: 20px; color: #212529; }
@media (max-width: 640px) {
  .gl-bloco { padding: 16px; border-radius: 18px; }
  .gl-item { padding: 12px 14px; gap: 12px; }
}

/* ---------- Honrarias (perfil e página Honrarias) ---------- */
.perfil-medalhas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.perfil-medalha { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 6px 10px; background: #fff7e0; color: #8a5a00; border: 1px solid #f3d27a; }
.perfil-medalha small { font-weight: 500; opacity: .8; margin-left: auto; }
.perfil-medalha.honraria-honra_permanente { background: #fdf0d5; color: #7a4b00; border-color: #e5b44a; }
.perfil-aula-icone.honraria-honra_temporaria i { color: #c88a00; }
.perfil-aula-icone.honraria-honra_permanente i { color: #a16207; }
.honraria-portadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.honraria-portador { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.honraria-portador:hover { border-color: #046b2f; }

/* ---------- Requisitos para a próxima patente (perfil) ---------- */
.perfil-requisitos { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; }
.perfil-requisitos p { display: flex; align-items: center; gap: 6px; border-radius: 8px; padding: 4px 8px; }
.perfil-requisitos small { opacity: .75; margin-left: auto; }
.perfil-requisitos .req-ok { background: #e8f3ec; color: #046b2f; font-weight: 600; }
.perfil-requisitos .req-falta { background: #fdecec; color: #b91c1c; font-weight: 600; }
.perfil-requisitos .req-obs { background: #eef0f3; color: #495057; }
.perfil-requisitos .req-a-definir { background: #eef0f3; color: #6c757d; font-style: italic; }
.perfil-requisitos .req-ok-geral { color: #046b2f; font-weight: 700; padding-left: 2px; }