/* Criado, desenvolvido, testado, abandonado, rejeitado, recuperado e testado fonte vozes da minha cabeça - William Tassi Moreira */
/* ACCTNN — Componentes reutilizáveis */

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .6rem 1.15rem; border-radius: var(--raio); border: 2px solid var(--rio); background: var(--rio); color: var(--sobre-rio); font-weight: 700; font-size: var(--t-sm); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, color .15s; }
.btn:hover { color: var(--sobre-rio); transform: translateY(-1px); background: color-mix(in srgb, var(--rio) 86%, var(--tinta)); }
.btn--sol { background: var(--sol); border-color: var(--sol); color: var(--sobre-sol); }
.btn--sol:hover { background: color-mix(in srgb, var(--sol) 85%, var(--tinta)); color: var(--sobre-sol); }
.btn--vazado { background: transparent; color: var(--tinta); border-color: var(--linha); }
.btn--vazado:hover { background: var(--papel-2); color: var(--tinta); border-color: var(--tinta-2); }
.btn--pequeno { min-height: 36px; padding: .35rem .85rem; font-size: var(--t-xs); }
/* versão 46.1: botão "Denunciar" fixo no topo (açaí), no computador e no celular */
.btn--acai { background: var(--acai); border-color: var(--acai); color: #fff; }
.btn--acai:hover, .btn--acai:focus-visible { background: #3A1630; border-color: #3A1630; color: #fff; }
.btn-denuncia { display: inline-flex; align-items: center; gap: .35rem; }
.btn-denuncia svg, .topo-denuncia svg { width: 18px !important; height: 18px !important; flex: none; }
.btn-denuncia[hidden] { display: none; }
.topo-denuncia { display: none; }
@media (min-width: 1241px) and (max-width: 1420px) { .menu a { padding: .5rem .45rem; } }
@media (max-width: 600px) {
  .topo #bt-denunciar { display: none; }
  .topo-denuncia { display: flex; align-items: center; gap: .5rem; padding: .55rem var(--gutter, 16px); background: var(--acai); color: #fff; text-decoration: none; font-size: var(--t-sm); }
  .topo-denuncia span:nth-of-type(1) { flex: 1; } .topo-denuncia b { font-weight: 700; }
  .topo-denuncia[hidden] { display: none; }
}
.btn--zap { background: #1E8E4E; border-color: #1E8E4E; color: #fff; }
.btn--zap:hover { background: #17733F; color: #fff; }
.btn-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); cursor: pointer; }
.btn-icone:hover { background: var(--papel-2); }

/* Selos (situação) */
.selo { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 99px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; background: var(--papel-2); color: var(--tinta-2); white-space: nowrap; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.selo--alerta { color: var(--alerta); background: color-mix(in srgb, var(--alerta) 15%, transparent); }
.selo--erro { color: var(--erro); background: color-mix(in srgb, var(--erro) 13%, transparent); }
.selo--exclusiva { color: #fff; background: var(--acai); }   /* versão 46.2: vaga cadastrada direto na ACCTNN */
.selo--exclusiva::before { content: "★"; width: auto; height: auto; border-radius: 0; background: none; color: var(--sol); font-size: .95em; line-height: 1; }
.selo--norte { color: var(--rio); background: var(--rio-claro); }
.selo--nordeste { color: var(--sobre-sol); background: var(--sol-claro); }
:root[data-theme="dark"] .selo--nordeste { color: var(--sol); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .selo--nordeste { color: var(--sol); } }

/* Cartões */
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: var(--e-5); min-width: 0; }
.cartao--sombra { box-shadow: var(--sombra); }

/* Formulários */
.campo { display: grid; gap: .35rem; min-width: 0; align-content: start; }   /* versão 33.4: os campos não esticam (ficavam tortos ao lado do campo de cidade) */
.campo label, .rotulo { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.entrada, .campo input, .campo select, .campo textarea { width: 100%; min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); color: var(--tinta); }
.campo textarea { min-height: 110px; resize: vertical; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--rio); outline-offset: 0; border-color: var(--rio); }
.ajuda { font-size: var(--t-xs); color: var(--tinta-2); }
.grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.grade-form .inteiro { grid-column: 1 / -1; }
@media (max-width: 620px) { .grade-form { grid-template-columns: 1fr; } }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-sm); }
.check input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--rio); flex: none; }

/* Tabelas */
.tabela-rolo { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--papel); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela th { text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); padding: .75rem 1rem; border-bottom: 1px solid var(--linha); background: var(--papel-2); white-space: nowrap; }
.tabela td { padding: .7rem 1rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--rio-claro) 45%, transparent); }
.tabela .dir { text-align: right; font-variant-numeric: tabular-nums; }

/* Faixa do Encontro */
.faixa { height: 56px; background-repeat: repeat-x; background-size: auto 100%; }
.faixa--fina { height: 22px; }
.faixa--alta { height: 88px; }

/* Abas */
.abas { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--linha); }
/* versão 33.3: no computador as abas quebram a linha (sem barra de rolagem); no celular deslizam com o dedo, sem barra aparecendo */
@media (max-width: 640px) {
  .abas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
          -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .abas::-webkit-scrollbar { display: none; }
  .abas button { scroll-snap-align: start; padding: .65rem .8rem; }
}
.abas button { flex: none; border: 0; background: none; padding: .7rem 1rem; font-weight: 600; font-size: var(--t-sm); color: var(--tinta-2); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--urucum); }

/* Fichas (filtros) */
.fichas { display: flex; flex-wrap: wrap; gap: .4rem; }
.ficha { border: 1px solid var(--linha); background: var(--papel); color: var(--tinta-2); border-radius: 99px; padding: .35rem .85rem; font-size: var(--t-xs); font-weight: 600; cursor: pointer; }
.ficha[aria-pressed="true"] { background: var(--tinta); color: var(--chao); border-color: var(--tinta); }

/* Janela (aviso em construção, visualização) */
.janela-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(10,16,13,.55); display: grid; place-items: center; padding: 16px; animation: aparece .2s ease-out; }
@keyframes aparece { from { opacity: 0; } }
.janela { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--papel); color: var(--tinta); border-radius: var(--raio-g); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.janela--larga { width: min(860px, 100%); }
.janela__faixa { height: 26px; border-radius: var(--raio-g) var(--raio-g) 0 0; }
.janela__corpo { padding: var(--e-5) var(--e-6) var(--e-6); display: grid; gap: var(--e-4); }
.janela__fechar { justify-self: end; margin-bottom: -2.4rem; position: relative; z-index: 2; }  /* v13: fica por cima do título que vem depois (antes o clique não pegava) */
.janela h3 { font-size: 2rem; text-transform: uppercase; }
.construcao-icone { width: 64px; height: 64px; }
.linha-acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.numero-zap { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .8rem; border: 1px dashed var(--linha); border-radius: var(--raio); background: var(--papel-2); font-family: var(--f-mono); }

/* Aviso flutuante */
.aviso-flutuante { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; background: var(--tinta); color: var(--chao); padding: .7rem 1.1rem; border-radius: var(--raio); font-size: var(--t-sm); font-weight: 600; box-shadow: var(--sombra); max-width: calc(100% - 32px); }

/* Faixa de “dados de exemplo” */
.exemplo { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-xs); font-weight: 700; color: var(--urucum); text-transform: uppercase; letter-spacing: .1em; }

/* Marca d'água do desenvolvedor (somente áreas com login) */
.marca-dagua { position: fixed; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 0; pointer-events: none; display: grid; justify-items: end; gap: 0; opacity: .32; color: var(--tinta-2); text-align: right; }
.marca-dagua svg { width: 54px; height: auto; margin-bottom: 2px; }
.marca-dagua small { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.marca-dagua strong { font-size: .9rem; font-weight: 700; }
.marca-dagua span { font-size: .7rem; font-family: var(--f-mono); }
@media (max-width: 600px) { .marca-dagua { opacity: .22; } .marca-dagua svg { width: 38px; } }

/* O conteúdo das áreas com login fica por cima da marca d'água */
.painel__main > * { position: relative; z-index: 1; }
/* versão 33: caixinhas de marcar dentro de um campo (ex.: perfis da equipe) — sem o estilo de título do campo, em botões alinhados */
.campo label.check { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--t-sm); color: var(--tinta); }
.escolhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: .5rem; margin: .35rem 0 .6rem; }
@media (max-width: 520px) { .escolhas { grid-template-columns: 1fr 1fr; } }
.escolhas .check { align-items: center; margin: 0; padding: .5rem .7rem; min-height: 0; line-height: 1.25; border: 1px solid var(--linha); border-radius: var(--raio-g, 8px); background: var(--papel); cursor: pointer; transition: border-color .15s, background .15s; }
.escolhas .check input { margin: 0; width: 18px; height: 18px; min-height: 0; padding: 0; border: 0; box-shadow: none; outline: none; }
.escolhas .check:hover { border-color: var(--rio); }
.escolhas .check:has(input:checked) { border-color: var(--rio); background: color-mix(in srgb, var(--rio) 10%, var(--papel)); }
.escolhas .check:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--rio); }
/* versão 33.5: imagem do cartão de visita (anúncio de serviço) — deitada, como um cartão de papel (amostra 1039 × 600) */
.cartao-servico { display: block; width: 100%; aspect-ratio: 1039 / 600; object-fit: contain; background: var(--papel-2); border-radius: var(--raio-g, 8px);
  border: 1px solid var(--linha); margin-bottom: .6rem; overflow: hidden; }
.cartao-servico img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cartao-servico--previa { display: grid; place-items: center; max-width: 320px; margin: 0; color: var(--tinta-2); font-size: var(--t-xs); }
.cartao-servico--mini { width: 150px; margin: 0 0 .3rem; }
.campo-cartao__linha { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.campo-cartao__linha > div:last-child { display: grid; gap: .3rem; flex: 1; min-width: 200px; }

/* versão 42: faixa fixa "Venha trabalhar perto da sua gente" (portal e sites das associações) — assets/js/faixa-trabalho.js */
.faixa-trabalho { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--papel); border-top: 3px solid var(--sol);
  box-shadow: 0 -6px 24px rgb(0 0 0 / .12); padding: .6rem var(--gutter, 16px) calc(.6rem + env(safe-area-inset-bottom, 0px)); }
.faixa-trabalho[hidden] { display: none; }
.faixa-trabalho__env { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: .8rem; position: relative; padding-right: 2rem; }
.faixa-trabalho__icone { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--rio); color: var(--sobre-rio, #fff); }
.faixa-trabalho__icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faixa-trabalho__texto { min-width: 0; flex: 1 1 auto; display: grid; gap: .1rem; line-height: 1.25; }
.faixa-trabalho__texto b { font-size: var(--t-md, 1.05rem); }
.faixa-trabalho__texto small { color: var(--tinta-2); font-size: var(--t-sm); }
.faixa-trabalho__acoes { flex: none; display: flex; gap: .5rem; flex-wrap: wrap; }
.faixa-trabalho__fechar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta-2); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.faixa-trabalho__fechar:hover, .faixa-trabalho__fechar:focus-visible { background: var(--papel-2); color: var(--tinta); }
.faixa-trabalho__perto { max-width: 1180px; margin: .6rem auto 0; display: grid; gap: .5rem; border-top: 1px solid var(--linha); padding-top: .6rem; font-size: var(--t-sm); }
.faixa-trabalho__perto select { max-width: 320px; }
.faixa-trabalho__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.faixa-trabalho__lista span { color: var(--tinta-2); }
.faixa-trabalho__mudo { color: var(--tinta-2); margin: 0; }
body.com-faixa-trabalho { padding-bottom: var(--faixa-trabalho-h, 0px); }
body.com-faixa-trabalho .aviso-flutuante { bottom: calc(20px + var(--faixa-trabalho-h, 0px)); }
body.com-faixa-trabalho .marca-dagua { bottom: calc(14px + var(--faixa-trabalho-h, 0px)); }
@media (max-width: 720px) {
  .faixa-trabalho__env { flex-wrap: wrap; gap: .5rem .7rem; }
  .faixa-trabalho__icone { width: 34px; height: 34px; }
  .faixa-trabalho__texto { flex: 1 1 calc(100% - 80px); }
  .faixa-trabalho__texto small { display: none; }
  .faixa-trabalho__acoes { flex: 1 1 100%; }
  .faixa-trabalho__acoes .btn { flex: 1 1 0; justify-content: center; text-align: center; }
  .faixa-trabalho__fechar { top: 18px; transform: none; }
}
@media print { .faixa-trabalho { display: none !important; } body.com-faixa-trabalho { padding-bottom: 0; } }

/* versão 43: álbum de fotos (painel e site da associação) */
.fo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; margin-top: .8rem; }
.fo-item { margin: 0; padding: .5rem; display: grid; gap: .4rem; }
.fo-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--raio); background: var(--papel-2); }
.fo-item figcaption { display: grid; gap: .4rem; }
.fo-item figcaption input { width: 100%; }
.fo-prev:empty { display: none; }
.album-site { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-top: .6rem; }
.album-site button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--raio); overflow: hidden; }
.album-site img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .2s; }
.album-site button:hover img, .album-site button:focus-visible img { transform: scale(1.04); }
.foto-tela { position: fixed; inset: 0; z-index: 95; height: 100vh; height: 100dvh; background: rgb(8 12 10 / .92); display: grid; grid-template-rows: auto 1fr auto; color: #fff; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.foto-tela[hidden] { display: none; }
.foto-tela__topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: var(--t-sm); }
.foto-tela__img { min-height: 0; display: grid; place-items: center; position: relative; }
.foto-tela__img img { max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; border-radius: 4px; }
.foto-tela__img .foto-pedido { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
.foto-tela__seta { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .16); color: #fff; font-size: 1.6rem; cursor: pointer; }
.foto-tela__seta--antes { left: 0; } .foto-tela__seta--depois { right: 0; }
.foto-tela__baixo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding-top: .6rem; }
.foto-tela__baixo p { margin: 0; flex: 1 1 200px; }
.foto-tela .btn--vazado { color: #fff; border-color: rgb(255 255 255 / .6); background: transparent; }
.foto-tela__fechar { border: 0; background: rgb(255 255 255 / .16); color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; }
.foto-pedido { background: var(--papel); color: var(--tinta); border-radius: var(--raio); padding: 1rem; max-width: 520px; width: 100%; margin: 0 auto; display: grid; gap: .5rem; max-height: 100%; overflow: auto; }
body.foto-aberta { overflow: hidden; }

/* versão 45: canal de denúncia anônima */
.dn-lista { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: var(--t-sm); }
.dn-lista li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.dn-codigo { display: grid; gap: .1rem; margin: .8rem 0; padding: .8rem 1rem; border: 2px dashed var(--sol); border-radius: var(--raio); }
.dn-codigo b { font-family: var(--f-mono, monospace); font-size: 1.6rem; letter-spacing: .12em; word-break: break-all; }

/* versão 47.1: crédito da Informática Criciúma e número da versão (entrar, painel e rodapé) */
.creditos { font-size: var(--t-xs); color: var(--tinta-2); line-height: 1.6; text-align: center; }
.painel__lado .creditos { text-align: left; }
.creditos a { color: inherit; }
.creditos__versao { font-family: var(--f-mono); }

/* versão 48: medidor de espaço */
.medidor { display: grid; gap: .3rem; margin: .5rem 0; }
.medidor__barra { height: 10px; border-radius: 99px; background: var(--papel-2, #e3e8e0); overflow: hidden; }
.medidor__barra span { display: block; height: 100%; border-radius: inherit; background: var(--rio); }
.medidor__barra--fina { height: 6px; }
.medidor__texto { font-size: var(--t-xs); color: var(--tinta-2); }
.medidor--grande .medidor__barra { height: 18px; }
.medidor--grande .medidor__texto { font-size: var(--t-sm); }
.medidor--grande .medidor__texto b { font-size: 1.3em; color: var(--tinta); }
.painel__main .tabela td.num { white-space: nowrap; }   /* versão 48: tamanhos sem quebrar a linha */

/* versão 48.2: aviso curto da autonomia das entidades (cadastros, painel e páginas institucionais) */
.aviso-rede { border-left: 4px solid var(--sol); background: color-mix(in srgb, var(--sol) 8%, var(--papel)); }
.aviso-rede b { display: block; margin-bottom: .3rem; }
.aviso-rede p { font-size: var(--t-sm); }
.termo-entidade { margin-bottom: 1rem; border: 2px solid var(--sol); }

/* versão 48.8: convite do Canal da ACCTNN no WhatsApp */
.canal-convite { display: flex; gap: var(--e-4); align-items: center; flex-wrap: wrap; border: 2px solid #1F8A4C; background: color-mix(in srgb, #1F8A4C 7%, var(--papel)); margin-top: var(--e-4); }
.canal-convite > div { flex: 1 1 240px; min-width: 0; }
.canal-convite p { margin: .2rem 0 0; font-size: var(--t-sm); }
.canal-convite__icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #1F8A4C; color: #fff; flex: none; }
.btn--canal { background: #1F8A4C; border-color: #1F8A4C; color: #fff; display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; }
.btn--canal:hover, .btn--canal:focus-visible { background: #166B3A; border-color: #166B3A; color: #fff; }
.canal-convite--grande { flex-direction: column; text-align: center; padding: var(--e-5, 1.5rem); }
.canal-convite--grande > div { flex: none; }
.canal-convite--grande .btn--canal { width: 100%; justify-content: center; font-size: 1.1rem; padding: .9rem 1.2rem; animation: canal-pulsa 2.4s ease-in-out infinite; }
@keyframes canal-pulsa { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #1F8A4C 45%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .canal-convite--grande .btn--canal { animation: none; } }
/* versão 48.9: opções recolhidas no cadastro da Rede (cadastro mais curto) */
.mais-opcoes { margin: .5rem 0; }
.mais-opcoes > summary { cursor: pointer; font-weight: 700; font-size: var(--t-sm); color: var(--rio); padding: .3rem 0; }
.mais-opcoes[open] > summary { margin-bottom: .3rem; }
.mais-opcoes .check { margin-top: .35rem; }
/* versão 51: "Siga-nos no Instagram" */
.btn--insta { background: linear-gradient(45deg, #C13584, #E1306C 45%, #F77737); border-color: transparent; color: #fff; }
.btn--insta:hover, .btn--insta:focus-visible { filter: brightness(1.08); color: #fff; }
.btn--insta small { opacity: .85; font-weight: 600; }
.insta-seguir .linha-acoes { margin-top: .4rem; flex-wrap: wrap; }

/* versão 51.2: avisos de espaço (50%, 80%, 95%) */
.espaco-aviso { border-left: 4px solid var(--rio); margin-bottom: var(--e-4, 1rem); }
.espaco-aviso--sol { border-left-color: var(--sol); }
.espaco-aviso--urucum { border-left-color: var(--urucum); }

/* versão 51.4: vagas e negócios da Rede ACCTNN em açaí (as da ACIC continuam como estavam) */
.vaga--acctnn { border-top: 4px solid var(--acai); }
.selo--acai { color: #fff; background: var(--acai); }

/* versão 51.5: "Quero me associar" — a associação escolhida no topo do cadastro */
.associar-faixa { border-left: 6px solid var(--sol, #E09A12); margin-bottom: 1rem; }
.associar-faixa h3 { margin: .2rem 0 0; font-size: 1.35rem; }

/* versão 51.5: páginas da associação e do evento no portal (/associacoes/<endereço>, /eventos/<id>) */
.pagina-assoc > * + * { margin-top: 1.1rem; }
.pagina-assoc > h2 { margin-top: 2rem; }
.pagina-assoc a.cartao { text-decoration: none; color: inherit; display: block; }
.pagina-assoc a.cartao h4 { color: var(--rio, #0C6A5A); }

/* versão 51.6: Visitas ao site (painel) */
.visitas-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.visitas-numeros .cartao b { display: block; font-size: 2rem; line-height: 1.1; margin-top: .3rem; font-family: var(--f-titulo, inherit); }
.visitas-grafico { width: 100%; height: auto; display: block; margin-top: .6rem; }
.visitas-grafico rect { fill: var(--rio, #0C6A5A); }
.visitas-grafico text { font-size: 11px; fill: currentColor; opacity: .7; }
.visitas-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 1.2rem; }
.link-botao { background: none; border: 0; padding: 0; color: var(--rio, #0C6A5A); text-decoration: underline; font: inherit; cursor: pointer; }

/* versão 51.7: diretoria, mandatos e assembleias (painel) */
.mandato { margin-top: .8rem; }
.mandato--atual { border-left: 6px solid var(--rio, #0C6A5A); }
.mandato h3 { margin: .3rem 0 .1rem; font-size: 1.3rem; }
.edital-texto { width: 100%; font-family: var(--f-mono, monospace); font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }

/* versão 51.8: Indique um conterrâneo e canal da associação */
.indique { border-left: 6px solid var(--sol, #E09A12); display: grid; gap: .5rem; }
.indique .entrada { width: 100%; }
.site-canal { margin-top: 1rem; }

/* versão 52: convênios — o celular do conveniado na tela de conferir */
.conveniado { border-left: 6px solid var(--sol, #E09A12); margin-bottom: 1rem; }
.conveniado b { display: block; font-size: 1.2rem; }

/* versão 52.1: notícias */
.noticia-cartao { display: grid; gap: .3rem; text-decoration: none; color: inherit; align-content: start; }
.noticia-cartao img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--raio, 8px); }
.noticia-cartao h3, .noticia-cartao h4 { margin: .1rem 0; }
.noticia-pagina { display: block; }
.noticia-pagina p { line-height: 1.7; margin: .8rem 0; }

/* versão 52.2: relatórios — na impressão sai só o relatório */
.relatorio h4 { margin: 1.4rem 0 .5rem; font-size: 1.15rem; }
.relatorio__titulo { margin-top: 1rem; }
.visitas-numeros .cartao small { display: block; margin-top: .2rem; }
@media print {
  body.imprimindo-relatorio * { visibility: hidden; }
  body.imprimindo-relatorio #rl-conteudo, body.imprimindo-relatorio #rl-conteudo * { visibility: visible; }
  body.imprimindo-relatorio #rl-conteudo { position: absolute; left: 0; top: 0; width: 100%; }
}

/* versão 52.3: menu do topo com submenus */
.menu { align-items: center; }
.menu__grupo { position: relative; }
.menu__abre { display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; cursor: pointer; font: inherit; color: var(--tinta-2);
  font-weight: 600; font-size: var(--t-sm); padding: .5rem .7rem; border-radius: var(--raio); }
.menu__abre:hover, .menu__grupo.aberto .menu__abre { color: var(--tinta); background: var(--papel-2); }
.menu__grupo--atual .menu__abre { color: var(--tinta); box-shadow: inset 0 -3px 0 var(--sol); border-radius: 0; }
.menu__seta { transition: transform .15s; }
.menu__grupo.aberto .menu__seta { transform: rotate(180deg); }
.menu__sub { display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 240px; padding: .4rem; background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.menu__grupo.aberto .menu__sub { display: grid; }
.menu .menu__sub a { display: block; padding: .55rem .7rem; white-space: nowrap; }
.menu .menu__sub a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--sol); border-radius: 0; }
[data-ap-topo="cor"] .topo .menu__abre { color: color-mix(in srgb, var(--sobre-rio) 82%, transparent); }
[data-ap-topo="cor"] .topo .menu__sub a { color: var(--tinta-2); }
@media (min-width: 1241px) and (max-width: 1420px) { .menu__abre { padding: .5rem .45rem; } }
@media (max-width: 1240px) {
  .menu { align-items: stretch; max-height: calc(100vh - 64px); overflow-y: auto; }
  .menu__abre { width: 100%; justify-content: space-between; padding: .8rem .4rem; font-size: 1rem; }
  .menu__grupo--atual .menu__abre { box-shadow: inset 3px 0 0 var(--sol); padding-left: .8rem; }
  .menu__sub { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--linha); border-radius: 0; margin: 0 0 .4rem .6rem; padding: 0 0 0 .4rem; min-width: 0; }
  .menu .menu__sub a { white-space: normal; padding: .65rem .4rem; font-size: .95rem; }
}

/* versão 52.3: Formalize-se */
.formalize-razoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.formalize-razoes .cartao h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
.formalize-passos { counter-reset: passo; list-style: none; padding: 0; display: grid; gap: .6rem; }
.formalize-passos li { counter-increment: passo; display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; align-items: start; }
.formalize-passos li::before { content: counter(passo); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--rio, #0C6A5A); color: #fff; font-weight: 700; }
.bib__grupo-titulo { margin: 1.2rem 0 .4rem; font-size: 1.15rem; }

/* versão 52.4: aba "Acontece" e "Café com a CTN" */
.selo--sol { color: var(--tinta); background: color-mix(in srgb, var(--sol) 35%, transparent); }
.acontece-filtros { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: end; margin: var(--e-4) 0 var(--e-3); }
.acontece-filtros .campo { min-width: 220px; margin: 0; }
.acontece-perto { margin-bottom: var(--e-3); }
.acontece-bloco { margin-top: var(--e-6, 2rem); }
.acontece-bloco__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); flex-wrap: wrap; }
.acontece-bloco__cab h3 { margin: 0; }
.cafe-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-4); }
.cafe { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.cafe h4 { margin: .1rem 0; }
.cafe__midia { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--raio, 8px); background: var(--fundo-2, #0001); display: block; }
#janela .cafe__midia { aspect-ratio: auto; max-height: 70vh; object-fit: contain; }
.cafe__historia { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: var(--t-sm); }
/* agenda (veio de membro.css): Agenda cultural, Acontece e a página /eventos */
.agenda-lista { display: grid; gap: var(--e-3); }
.agenda-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.agenda-item h4 { margin: .3rem 0 .1rem; font-size: 1.05rem; }
.agenda-dia { display: grid; justify-items: center; background: var(--sol-claro); color: var(--tinta); border-radius: var(--raio); padding: .4rem 0; }
.agenda-dia b { font: 900 1.7rem/1 var(--f-titulo); }
.agenda-dia span { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
/* versão 52.6: ficha completa (Modo Deus) */
.ficha-dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: .25rem .9rem; margin: .4rem 0; font-size: var(--t-sm); }
.ficha-dl dt { color: var(--tinta-2); font-weight: 600; }
.ficha-dl dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 560px) { .ficha-dl { grid-template-columns: 1fr; } .ficha-dl dd { margin-bottom: .3rem; } }
/* versão 52.8: Área Kids */
.kids-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-4); }
.kids-mini { display: grid; gap: .3rem; padding: .5rem; background: var(--fundo, #fff); border: 2px solid var(--linha); border-radius: var(--raio, 8px); cursor: pointer; font: inherit; font-weight: 700; font-size: var(--t-sm); color: var(--tinta); }
.kids-mini[aria-selected="true"] { border-color: var(--urucum); box-shadow: 0 0 0 3px color-mix(in srgb, var(--urucum) 25%, transparent); }
.kids-mini svg { width: 100%; aspect-ratio: 1; background: #fff; border-radius: 6px; }
.kids-mesa { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--e-5); align-items: start; }
@media (max-width: 820px) { .kids-mesa { grid-template-columns: 1fr; } }
.kids-folha svg { display: block; width: 100%; max-width: 640px; aspect-ratio: 1; background: #fff; border: 2px solid var(--linha); border-radius: var(--raio, 8px); touch-action: manipulation; }
.kids-folha [data-pinta] { cursor: pointer; }
.kids-cores { display: grid; grid-template-columns: repeat(7, 1fr); gap: .45rem; margin-bottom: var(--e-3); }
.kids-cor { aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #0004; cursor: pointer; min-width: 36px; }
.kids-cor[aria-checked="true"] { box-shadow: 0 0 0 3px var(--tinta); transform: scale(1.08); }
.kids-sobre { margin-top: var(--e-3); }
.kids-sobre p { margin: .3rem 0 0; }

/* versão 53.3: Estudos e Conhecimento (#estudos) */
.estudos-filtros { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--e-3); align-items: end; }
.estudos-filtros .campo { margin: 0; }
@media (max-width: 640px) { .estudos-filtros { grid-template-columns: 1fr 1fr; } .estudos-filtros .campo:first-child { grid-column: 1 / -1; } }
.estudos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--e-3); margin-top: .6rem; }
@media (max-width: 400px) { .estudos-lista { grid-template-columns: 1fr; } }
.estudo { display: flex; gap: var(--e-3); align-items: flex-start; }
.estudo__icone { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 10px; background: var(--fundo-2, rgba(0,0,0,.04)); color: var(--urucum); }
.estudo__corpo { min-width: 0; flex: 1; }
.estudo__corpo h3 { margin: .4rem 0 .2rem; font-size: var(--t-lg, 1.15rem); overflow-wrap: anywhere; }
.estudo__corpo p { margin: .3rem 0; }
.estudo--destaque { border-color: var(--urucum); }
.barra-andamento { height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; margin-top: .6rem; }
/* versão 53.4: Histórias do Norte e Nordeste (#historias) */
.kids-historias { margin: 0 0 var(--e-4); text-decoration: none; color: inherit; }
.hist-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-4); }
.hist-mini { text-align: left; }
.hist-mini svg { aspect-ratio: 4 / 3; }
.hist-mini small { font-weight: 400; color: var(--tinta-2); font-size: var(--t-xs); }
.hist-mini[aria-current="true"] { border-color: var(--urucum); box-shadow: 0 0 0 3px color-mix(in srgb, var(--urucum) 25%, transparent); }
.hist-mesa { scroll-margin-top: 80px; }
.hist-folha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-4); align-items: start; margin-top: var(--e-3); background: #fff; color: #1E1A17; border: 2px solid var(--linha); border-radius: var(--raio, 8px); padding: var(--e-4); }
.hist-folha header { grid-column: 1 / -1; }
.hist-folha h2 { margin: .2rem 0 0; color: #1E1A17; }
.hist-desenho svg { display: block; width: 100%; aspect-ratio: 4 / 3; background: #fff; border: 2px solid #1E1A17; border-radius: 6px; touch-action: manipulation; }
.hist-folha[data-modo="colorir"] [data-pinta] { cursor: pointer; }
.hist-texto p { margin: 0 0 .7rem; font-size: 1.08rem; line-height: 1.6; }
.hist-moral { font-weight: 700; font-style: italic; }
.hist-credito { grid-column: 1 / -1; border-top: 1px solid #0002; padding-top: .6rem; font-size: var(--t-sm); color: #4a443f; }
body.tela-infantil .espaco-anuncio { display: none !important; }   /* versão 53.4: Área Kids e Histórias sem publicidade */
.hist-impressao { display: none; }
body.imprimindo-historia .hist-impressao { display: block; }
.hist-cores { margin-top: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); max-width: 640px; }
@media (max-width: 820px) { .hist-folha { grid-template-columns: 1fr; padding: var(--e-3); } }
@media print {
  body.imprimindo-historia > *:not(.hist-impressao) { display: none !important; }
  body.imprimindo-historia { background: #fff !important; }
  body.imprimindo-historia .hist-folha { display: block; border: 0; padding: 0; margin: 0; }
  body.imprimindo-historia .hist-desenho svg { max-height: 120mm; width: auto; max-width: 100%; margin: 4mm auto; border-width: 1px; }
  body.imprimindo-historia .hist-texto p { font-size: 12.5pt; margin: 0 0 2.5mm; }
}
.barra-andamento span { display: block; height: 100%; background: var(--urucum); transition: width .2s; }
@media print {
  body.imprimindo-kids * { visibility: hidden; }
  body.imprimindo-kids .kids-folha, body.imprimindo-kids .kids-folha * { visibility: visible; }
  body.imprimindo-kids .kids-folha { position: absolute; left: 0; top: 0; width: 100%; }
  body.imprimindo-kids .kids-folha svg { max-width: none; border: 0; }
}
/* versão 53: modelos de documentos no painel */
.doc-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-4); }
.doc-modelo { display: grid; gap: .25rem; text-align: left; cursor: pointer; font: inherit; color: var(--tinta); }
.doc-modelo small { color: var(--tinta-2); font-size: var(--t-xs); }
.doc-mesa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e-4); align-items: start; margin-top: var(--e-3); }
@media (max-width: 980px) { .doc-mesa { grid-template-columns: 1fr; } }
.doc-campos { display: grid; gap: .5rem; }
.doc-campos .campo { margin: 0; }
.doc-campos textarea { width: 100%; }
.doc-folha { background: #fff; color: #1E1A17; padding: 2.2rem 2rem; border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 2px 10px #0001; font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.55; position: sticky; top: 80px; max-height: 85vh; overflow: auto; }
/* versão 53.1: papel timbrado da ACCTNN (cores claras fixas, para sair igual no papel) */
.papel-acctnn { --papel: #FFFFFF; --tinta: #18211D; --tinta-2: #4D5A53; --linha: #CDD5CB; --rio: #0C6A5A; --sol: #E09A12; --urucum: #B83C29; --acai: #4A1D3D;
  --sobre-rio: #FFFFFF; --sobre-sol: #1E1608; color: #18211D; }
.doc-papel-caixa { position: relative; }
.doc-papel { width: 100%; border-collapse: collapse; position: relative; z-index: 1; }
.doc-papel td { padding: 0; vertical-align: top; }
.doc-cab { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-bottom: 8px; }
.doc-cab__selo svg { width: 64px; height: 64px; display: block; }
.doc-cab__nome { display: grid; gap: 2px; font-family: "Public Sans", Arial, sans-serif; }
.doc-cab__nome small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #B83C29; }
.doc-cab__nome b { font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; font-size: 22px; line-height: 1.05; text-transform: uppercase; color: #4A1D3D; letter-spacing: .01em; }
.doc-cab__nome span { font-size: 11px; color: #4D5A53; }
.doc-cab__contato { display: grid; gap: 2px; text-align: right; font-family: "Public Sans", Arial, sans-serif; font-size: 11px; color: #0C6A5A; font-weight: 600; }
.doc-faixa { height: 10px; background-repeat: repeat-x; background-size: auto 100%; border-radius: 2px; margin-bottom: 22px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-faixa--fina { height: 6px; margin: 18px 0 6px; }
.doc-rodape__linha { display: flex; justify-content: space-between; gap: 10px; font-family: "Public Sans", Arial, sans-serif; font-size: 10px; color: #4D5A53; }
.doc-marca-dagua { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 0; }
.doc-marca-dagua svg { width: 62%; max-width: 420px; opacity: .06; }
.doc-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-impressao { display: none; }
@media print {
  body.imprimindo-documento > *:not(.doc-impressao) { display: none !important; }
  body.imprimindo-documento .doc-impressao { display: block; }
  body.imprimindo-documento .doc-folha { position: static; max-height: none; overflow: visible; border: 0; box-shadow: none; padding: 0; font-size: 12pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* papel branco mesmo com o painel no modo escuro; o selo do fundo no meio de cada página; o rodapé vai para o pé da folha */
  html:has(body.imprimindo-documento), body.imprimindo-documento { background: #fff !important; color: #18211D !important; }
  body.imprimindo-documento .doc-impressao, body.imprimindo-documento .doc-folha { background: #fff !important; color: #18211D !important; }
  body.imprimindo-documento .doc-marca-dagua { position: fixed; inset: 0; }
  body.imprimindo-documento .doc-papel { min-height: 271mm; }
  body.imprimindo-documento .doc-papel tbody td { height: 100%; }
}
@page { size: A4; margin: 12mm 14mm; }

/* versão 54.0: menu simplificado — submenus em blocos com título (Seja Membro e Comunidade em colunas no computador) */
.menu__bloco { display: grid; align-content: start; }
.menu__titulo { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3, var(--tinta-2)); padding: .5rem .7rem .2rem; }
.menu__grupo.aberto .menu__sub--largo { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 .4rem; min-width: min(680px, 92vw); }
.menu__grupo[data-grupo="comunidade"] .menu__sub { left: auto; right: 0; }
@media (max-width: 1240px) {
  .menu__grupo.aberto .menu__sub--largo { grid-template-columns: 1fr; min-width: 0; }
  .menu__titulo { padding: .6rem .4rem .1rem; }
}
/* versão 54.0: pergunta da ligação com o Norte e o Nordeste no cadastro */
fieldset.ligacao { border: 0; padding: 0; margin: 0; display: grid; gap: .35rem; }
fieldset.ligacao legend { font-weight: 600; font-size: var(--t-sm); margin-bottom: .3rem; padding: 0; }
fieldset.ligacao .check { margin: 0; align-items: center; }
/* versão 54.2: consulta de membros — histórico com datas */
.consulta-linha { padding-left: 1.2rem; display: grid; gap: .35rem; font-size: var(--t-sm); }
.tabela--ficha th { width: 34%; text-align: left; font-weight: 600; color: var(--tinta-2); }

/* versão 55.1 (William, 08/11/2026): o que foi cadastrado à mão pela nossa gente (vagas e anúncios do balcão) fica na cor açaí;
   o que é buscado de parceiros (vagas importadas da ACIC) continua na cor de sempre. */
.cartao--nossa { background: var(--acai); border-color: var(--acai); color: #FAFBF7; }
.cartao--nossa h3, .cartao--nossa h4 { color: #fff; }
.cartao--nossa .mudo, .cartao--nossa .ajuda, .cartao--nossa p { color: #EADDE6; }
.cartao--nossa a:not(.btn) { color: var(--sol-claro); }
.cartao--nossa .selo { background: rgba(255,255,255,.14); color: #fff; }
.cartao--nossa .selo--exclusiva { background: rgba(0,0,0,.22); }
.cartao--nossa .btn { background: var(--sol); border-color: var(--sol); color: #1E1608; }
.cartao--nossa .btn--zap { background: #1E8A4C; border-color: #1E8A4C; color: #fff; }
.cartao--nossa .btn--vazado { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.cartao--nossa .mono { color: #fff; }
.selo--nossa { color: #fff; background: var(--acai); }
.legenda-vagas { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .8rem; }