/* ============================================================
   ABEn-DF · painel administrativo
   ============================================================ */
:root{
  --azul:#2c296c; --azul-esc:#211e50; --amarelo:#f7c413;
  --tinta:#1f2333; --cinza:#5b6072; --cinza-cl:#f6f5f8;
  --borda:#e5e5ed; --branco:#fff; --verde:#1f9d55; --raio:10px;
}
*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}
/* mesma fonte do site; os arquivos sao carregados por estilo.css, que o painel
   tambem inclui. Se o painel for usado sozinho, cai na fonte do sistema. */
body{margin:0;font-family:"Source Sans 3","Segoe UI",system-ui,Arial,sans-serif;color:var(--tinta);background:var(--cinza-cl)}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
table{border-collapse:collapse;width:100%}

/* ---- login ---- */
body.login{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,var(--azul),#5a588c)}
.login__caixa{background:#fff;border-radius:14px;padding:2.5rem;width:min(360px,92vw);
  box-shadow:0 12px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:.9rem}
.login__logo{align-self:center}
.login__caixa h1{margin:0 0 .5rem;font-size:1.3rem;text-align:center;color:var(--azul)}
.login__caixa label{display:flex;flex-direction:column;font-size:.85rem;color:var(--cinza);gap:.3rem}
.login__caixa input{padding:.6rem;border:1px solid var(--borda);border-radius:8px;font-size:1rem}
.login__caixa button{margin-top:.5rem;background:var(--azul);color:#fff;border:0;padding:.7rem;
  border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer}
.login__caixa button:hover{background:var(--azul-esc)}
.login__erro{background:#fde8e8;color:#a12626;padding:.6rem .8rem;border-radius:8px;font-size:.9rem;margin:0}

/* ---- campos ----
   Base para TODO campo de texto do painel. Antes cada contexto listava os tipos
   que conhecia (`.filtros input[type=text]`, por exemplo), entao o
   `type="search"` do filtro de Convenios, Escolas e Hospitais caia no desenho
   padrao do navegador: retangulo de canto reto e borda fina, do lado de um
   botao arredondado. A regra por exclusao evita que o proximo tipo nasca torto.
   O contorno de foco continua sendo o :focus-visible amarelo la de cima: aqui
   so muda a borda, nunca `outline`, senao a navegacao por teclado se perde. */
.painel input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=hidden]),
.painel select,
.painel textarea{
  padding:.5rem .65rem;border:1px solid var(--borda);border-radius:8px;
  font:inherit;font-size:.92rem;color:var(--tinta);background:#fff;
  transition:border-color .13s ease,box-shadow .13s ease;
}
.painel input:not([type=checkbox]):not([type=radio]):not([type=file]):hover,
.painel select:hover,
.painel textarea:hover{ border-color:#cfcee0; }
.painel input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
.painel select:focus,
.painel textarea:focus{ border-color:var(--azul); box-shadow:0 0 0 3px rgba(34,32,117,.10); }
.painel input::placeholder,.painel textarea::placeholder{ color:#a7abbb; }
/* o "x" nativo do campo de busca some no Chrome; o botao Limpar ja faz isso */
.painel input[type=search]::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* ---- shell ---- */
body.painel{display:flex;min-height:100vh}
/* A barra e alta: sao 19 itens. Antes ela empurrava a ALTURA DO DOCUMENTO, e
   os ultimos itens ("Hospitais", "Sair") ficavam abaixo do corte da tela mesmo
   numa pagina curta. Para alcanca-los era preciso rolar a pagina inteira, e ao
   clicar a proxima abria no topo: era o "pulo" que parecia bug de scroll.
   Agora ela e sticky, tem a altura da tela e rola por dentro, entao a altura da
   pagina passa a ser so a do conteudo. */
.barra{width:238px;background:var(--azul);color:#d3d3e4;display:flex;flex-direction:column;flex-shrink:0;
  position:sticky;top:0;height:100vh;height:100svh;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#ffffff30 transparent}
.barra::-webkit-scrollbar{width:8px}
.barra::-webkit-scrollbar-thumb{background:#ffffff2b;border-radius:4px}
.barra::-webkit-scrollbar-thumb:hover{background:#ffffff45}
.barra::-webkit-scrollbar-track{background:transparent}

/* marca e rodape ficam presos nas pontas enquanto o miolo rola */
.barra__marca{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-bottom:1px solid #ffffff1a;
  color:#fff;position:sticky;top:0;background:var(--azul);z-index:2}
.barra__marca img{width:40px;height:auto}
.barra__marca span{display:flex;flex-direction:column;font-weight:700;line-height:1.15}
.barra__marca small{font-weight:400;font-size:.7rem;color:var(--amarelo)}
.barra__nav{display:flex;flex-direction:column;padding:.5rem 0 .6rem;flex:1}

/* a borda transparente ja nasce em todos: sem ela o item ativo ganhava 3px e o
   texto pulava para a direita ao mudar de tela */
.barra__nav a{display:flex;align-items:center;gap:.62rem;color:#c6c5db;
  padding:.44rem 1.1rem;font-size:.9rem;line-height:1.25;
  border-left:3px solid transparent;transition:background .12s ease,color .12s ease}
.barra__nav a svg{width:18px;height:18px;flex:none;opacity:.66;transition:opacity .12s ease,color .12s ease}
.barra__nav a:hover{background:#ffffff12;text-decoration:none;color:#fff}
.barra__nav a:hover svg{opacity:1}
.barra__nav a.ativo{background:#ffffff1f;color:#fff;border-left-color:var(--amarelo);font-weight:600}
.barra__nav a.ativo svg{opacity:1;color:var(--amarelo)}
/* "Revisao de dados" e filho de "Associados": recuado e um ponto menor */
.barra__nav a.barra__sub{padding-left:2.3rem;font-size:.845rem;color:#adacc6}
.barra__nav a.barra__sub svg{width:15px;height:15px}
/* rotulo de grupo do menu ("Cadastros auxiliares"). Nao tinha regra nenhuma:
   nascia colado na borda esquerda, no mesmo tamanho dos links, parecendo um
   link quebrado. Alinha com os links e se distingue deles por tamanho e cor. */
.barra__grupo{display:block;margin:.55rem 0 0;padding:.6rem 1.1rem .35rem calc(1.1rem + 3px);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#ffffff7a;
  border-top:1px solid #ffffff14}
.barra__rodape{position:sticky;bottom:0;background:var(--azul);z-index:2;
  padding:.8rem 1.1rem;border-top:1px solid #ffffff1a;font-size:.85rem;
  display:flex;flex-direction:column;gap:.55rem}
.barra__quem{display:flex;align-items:center;gap:.6rem;min-width:0}
.barra__inicial{width:30px;height:30px;flex:none;border-radius:50%;background:var(--amarelo);
  color:var(--azul);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.barra__nome{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.barra__nome strong{color:#fff;font-size:.86rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra__nome small{color:#ffffff85;font-size:.72rem}
.barra__sair{display:flex;align-items:center;gap:.5rem;color:#d3d3e4;font-size:.85rem;
  padding:.4rem .5rem;border-radius:7px;background:#ffffff10}
.barra__sair svg{width:16px;height:16px}
.barra__sair:hover{background:#ffffff20;color:#fff;text-decoration:none}
.conteudo{flex:1;min-width:0;padding:2rem;max-width:1180px}

/* ---- topo ---- */
.topo{margin-bottom:1.5rem}
.topo--linha{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topo h1{margin:.2rem 0;font-size:1.6rem;color:var(--azul)}
.topo p{margin:0;color:var(--cinza)}
/* Voltar. Era so um texto de .85rem solto no topo, sem area de clique: fino,
   pequeno e facil de errar no toque. Vira um controle de verdade, com altura
   confortavel e fundo no hover, sem deixar de ser secundario ao titulo. */
.voltar{
  display:inline-flex;align-items:center;gap:.35rem;
  min-height:32px;padding:.3rem .7rem .3rem .55rem;margin-bottom:.15rem;
  border:1px solid var(--borda);border-radius:999px;background:#fff;
  font-size:.85rem;font-weight:600;color:var(--cinza);
  transition:background .13s ease,color .13s ease,border-color .13s ease;
}
.voltar:hover{background:var(--cinza-cl);color:var(--azul);border-color:#cfcee0;text-decoration:none}
.voltar:active{background:#eceaf5}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:2rem}
.card{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:1.2rem;
  display:flex;flex-direction:column;gap:.2rem;box-shadow:0 2px 8px rgba(38,40,110,.05)}
.card__num{font-size:2rem;font-weight:800;color:var(--azul);line-height:1}
.card__rot{font-size:.85rem;color:var(--cinza)}
.card--verde{border-left:4px solid var(--verde)} .card--verde .card__num{color:var(--verde)}
.card--cinza{border-left:4px solid var(--cinza)}
.card--amarelo{border-left:4px solid var(--amarelo)}
a.card:hover{text-decoration:none;box-shadow:0 4px 14px rgba(38,40,110,.12)}

/* ---- blocos / tabelas ---- */
.bloco{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:1.3rem;margin-bottom:1.5rem;overflow-x:auto}
.bloco h2{margin:0 0 1rem;font-size:1.1rem;color:var(--azul)}
/* Duas colunas, mas nao meio a meio: a direita carrega uma tabela de 7 colunas
   (anuidades) e a esquerda so pares rotulo/valor. Com 1fr 1fr a tabela nao
   cabia e a ultima coluna, a dos botoes, ficava cortada na borda do cartao.
   O minmax(0,...) e obrigatorio: sem ele o item de grade nao encolhe, ele
   transborda. */
.grade2{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:1.5rem;align-items:start}
@media (max-width:1080px){ .grade2{grid-template-columns:minmax(0,1fr)} }
.tabela th,.tabela td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--borda);font-size:.92rem}
.tabela th{color:var(--cinza);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}
.tabela .num{text-align:right}
.tabela--compacta th,.tabela--compacta td{padding:.4rem .45rem;font-size:.86rem;vertical-align:middle}
/* ano, valor e data nao quebram em duas linhas: "R$ 198,00" partido em "R$" e
   "198,00" parecia defeito. So a categoria pode quebrar. */
.tabela--compacta th,.tabela--compacta td{white-space:nowrap}
.tabela--compacta td:nth-child(2){white-space:normal}
.vazio{color:var(--cinza);text-align:center;padding:1.5rem}
/* .vazio serve a DUAS coisas diferentes: o <td colspan> de uma tabela que nao
   tem nenhuma linha, que pede padding folgado e texto ao centro, e um <span>
   dentro de uma celula normal, que so avisa que AQUELE campo esta vazio. No
   span o padding de 1,5rem espremia a coluna e quebrava "sem data" em duas
   linhas. Aqui o span volta a se comportar como texto de celula. */
span.vazio{padding:0;text-align:inherit;white-space:nowrap}

/* ---- tags ---- */
.tag{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700}
.tag--verde{background:#e3f5ea;color:var(--verde)}
.tag--amarelo{background:#fff8cb;color:#827100}
.tag--cinza{background:#ededf4;color:var(--cinza)}

/* ---- filtros / form ---- */
.filtros{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem;align-items:center}
.filtros input[type=text]{min-width:220px}
.filtros input[type=search]{min-width:220px}
/* rotulo "Buscar" ao lado do campo, nao empilhado em cima dele */
.filtros label{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--cinza)}
.check{display:flex;align-items:center;gap:.3rem;font-size:.9rem;color:var(--cinza)}
/* ---- botoes ----
   Os formularios do painel usam <button> sem classe nenhuma (sao 21 telas), e
   so `.filtros button` e `.botao` tinham regra. Resultado: o "Salvar" saia com
   o botao cinza padrao do navegador ao lado de um "Cancelar" estilizado, ou
   seja, a acao PRINCIPAL parecia a menos importante das duas.
   Aqui o <button> de formulario entra na mesma familia, e o secundario perde
   peso de proposito para nao competir com ela. */
.filtros button,
.lista-busca button,
.form button[type=submit],
.form__acoes button,
.upload-box button,
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:38px;padding:.5rem 1.15rem;
  background:var(--azul);color:#fff;border:1px solid transparent;border-radius:9px;
  font:inherit;font-size:.9rem;font-weight:700;line-height:1;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 2px rgba(31,35,51,.08);
  transition:background .13s ease,box-shadow .13s ease,transform .13s ease,border-color .13s ease;
}
.filtros button:hover,
.lista-busca button:hover,
.form button[type=submit]:hover,
.form__acoes button:hover,
.upload-box button:hover,
.botao:hover{
  background:var(--azul-esc);text-decoration:none;
  box-shadow:0 3px 10px rgba(34,32,117,.22);transform:translateY(-1px);
}
.filtros button:active,
.lista-busca button:active,
.form button[type=submit]:active,
.form__acoes button:active,
.upload-box button:active,
.botao:active{ transform:translateY(0);box-shadow:0 1px 2px rgba(31,35,51,.12) }

/* Secundario: fundo branco e texto NEUTRO. Antes era azul, mesma cor do
   principal, e os dois disputavam o olho. */
.botao--claro{
  background:#fff;color:var(--cinza);border-color:var(--borda);
  box-shadow:none;font-weight:600;
}
.botao--claro:hover{
  background:var(--cinza-cl);color:var(--tinta);border-color:#cfcee0;
  box-shadow:none;transform:none;
}
.botao--claro:active{ background:#eceaf5 }

/* Sem permissao de alterar, a tela ja avisa; se algum botao chegar desligado,
   ele precisa PARECER desligado. */
.filtros button:disabled,
.form button[type=submit]:disabled,
.botao[aria-disabled=true]{
  background:#c9c8dd;color:#fff;cursor:not-allowed;box-shadow:none;transform:none;
}
/* `.link` e usado tanto em <a> quanto em <button>. Só o `--perigo` zerava a
   moldura, entao um <button class="link"> saia como botao cinza do navegador
   ao lado de um irmao que era link: na tabela de anuidades, "pendente" virava
   caixinha e "cancelar" ficava texto. Aqui os dois viram texto. */
/* alvo de clique maior nas acoes da tabela: .85rem de texto puro dava uma
   faixa de ~14px de altura para acertar */
.link{font-size:.85rem}
.tabela td .link{display:inline-block;padding:.25rem .1rem}
button.link{
  background:none;border:0;padding:0;margin:0;font:inherit;font-size:.85rem;
  color:var(--azul);cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
button.link:hover{ color:var(--azul-esc); }
.link--perigo,button.link--perigo{color:#a12626}
.link--perigo:hover,button.link--perigo:hover{color:#7a1c1c}
/* as acoes da linha ficam lado a lado, com respiro entre elas */
.acoes-insc{ display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }

/* biblioteca de mídia / galeria */
.upload-box{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;background:var(--branco);border:1px dashed var(--borda);border-radius:var(--raio);padding:1.1rem;margin-bottom:1.5rem}
.upload-box input[type=file]{font-size:.9rem}
.upload-box input[type=text]{flex:1;min-width:180px;padding:.5rem;border:1px solid var(--borda);border-radius:8px}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.galeria__item{margin:0;background:var(--branco);border:1px solid var(--borda);border-radius:10px;overflow:hidden}
.galeria__item img{width:100%;height:120px;object-fit:cover;display:block;background:var(--cinza-claro)}
.galeria__item figcaption{padding:.5rem .6rem;font-size:.75rem;color:var(--cinza);display:flex;justify-content:space-between;align-items:center;gap:.4rem}

.form{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:1.5rem;max-width:640px;display:flex;flex-direction:column;gap:1rem}
.form label{display:flex;flex-direction:column;font-size:.85rem;color:var(--cinza);gap:.3rem}
.form input,.form select,.form textarea{padding:.55rem;border:1px solid var(--borda);border-radius:8px;font-size:.95rem;font-family:inherit}
.form__linha{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* `.form label` empilha rotulo e campo em coluna, o que e certo para um campo
   de texto e errado para uma caixa de marcar: a caixinha ia parar EM CIMA do
   texto, centralizada. Aqui a caixa volta a ficar ao lado do rotulo. */
.form label.check{flex-direction:row;align-items:center;gap:.5rem;
  align-self:flex-start;color:var(--tinta);font-size:.9rem;cursor:pointer}
.form label.check input{width:auto;margin:0;accent-color:var(--azul)}
/* linha de acoes: separada do ultimo campo por uma divisoria, para o Salvar
   nao parecer parte do formulario e sim o fecho dele */
.form__acoes{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  margin-top:.4rem;padding-top:1.1rem;border-top:1px solid var(--borda)}

.dados{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:0}
.dados dt{color:var(--cinza);font-size:.85rem}
.dados dd{margin:0;font-size:.92rem}
.alerta{background:#fff8cb;color:#827100;border:1px solid #ffed7b;border-radius:8px;padding:.8rem 1rem;margin-bottom:1.5rem}

.paginacao{display:flex;gap:.35rem;flex-wrap:wrap}
.paginacao a{padding:.4rem .7rem;border:1px solid var(--borda);border-radius:6px;background:#fff;font-size:.9rem}
.paginacao a.atual{background:var(--azul);color:#fff;border-color:var(--azul)}

@media(max-width:820px){
  body.painel{flex-direction:column}
  .barra{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center}
  .barra__nav{flex-direction:row;flex:1 1 100%;padding:.3rem}
  .grade2{grid-template-columns:1fr}
  .form__linha{grid-template-columns:1fr}
}

/* foto do associado na tela de edicao */
.form__foto{display:flex;gap:1.2rem;align-items:flex-start;margin:.4rem 0 1rem}
.form__foto-atual{flex:0 0 110px}
.form__foto-atual img{width:110px;height:110px;object-fit:cover;border-radius:8px;display:block;border:1px solid var(--borda)}
.form__foto-vazia{display:grid;place-items:center;width:110px;height:110px;border-radius:8px;
  border:1px dashed var(--borda);background:var(--cinza-cl);color:var(--cinza);font-size:.8rem}
.form__foto-campos{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6rem}
.form__foto-campos small{display:block;font-weight:400;color:var(--cinza);font-size:.78rem}
.topo__comfoto{display:flex;gap:.9rem;align-items:center}
.ficha__foto{width:64px;height:64px;object-fit:cover;border-radius:50%;border:2px solid var(--borda);display:block}
.ficha__foto--mini{width:36px;height:36px;border-width:1px}
.lista-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem}
.lista-links a{display:block;padding:.7rem .9rem;border:1px solid var(--borda);border-radius:8px;background:var(--branco)}
.lista-links a:hover{border-color:var(--azul)}
.tabela-rolavel{overflow-x:auto}
.acoes{display:flex;gap:.5rem;flex-wrap:wrap}
.programa{white-space:pre-wrap;font-family:inherit;font-size:.92rem;line-height:1.5;
  background:var(--cinza-cl);border:1px solid var(--borda);border-radius:8px;padding:.9rem 1rem;margin:.6rem 0 0}

/* faixa de "modo leitura": aparece quando o perfil ve a area mas nao
   altera. Amarela e nao vermelha de proposito: nao houve erro, e o estado
   normal daquele perfil, e vermelho ali treina a pessoa a ignorar vermelho.
   A borda usa o amarelo ESCURECIDO (#896d0b): o #f7c413 da marca sobre o
   creme da 1.16:1, ou seja, nao se ve. */
.aviso--leitura{
  max-width:820px; margin:0 0 1rem; padding:.7rem .9rem;
  background:#fdf3d0; border:1px solid #896d0b; border-left:4px solid #896d0b;
  border-radius:var(--raio); color:#594707; font-size:.92rem;
}

/* explicacao dos papeis, ao lado da escolha do papel */
.papeis{
  max-width:820px; margin:.2rem 0 1rem; padding:.8rem 1rem;
  background:var(--cinza-cl); border:1px solid var(--borda); border-radius:var(--raio);
}
.papeis p{ margin:0 0 .45rem; font-size:.9rem; color:var(--cinza); line-height:1.45; }
.papeis p:last-child{ margin-bottom:0; }
.papeis strong{ color:var(--tinta); }
.papeis__nota{ padding-top:.5rem; border-top:1px solid var(--borda); }

/* lancamento de anuidade: dobrado por padrao para nao competir com a
   listagem, que e o que a secretaria abre para consultar na maior parte */
.lancar{ margin-top:1rem; border-top:1px solid var(--borda); padding-top:.8rem; }
.lancar summary{
  cursor:pointer; font-weight:600; color:var(--azul); font-size:.95rem;
  padding:.35rem 0; list-style-position:inside;
}
.lancar summary:hover{ text-decoration:underline; }
/*
 * Formulario em linha (lancar anuidade). Mora dentro de .bloco, entao zera o
 * cartao de .form: cartao dentro de cartao vira moldura dupla.
 *
 * O DEFEITO QUE ESTAVA AQUI: .form define `flex-direction:column` e esta regra
 * nunca sobrescrevia. Com coluna, o `align-items:end` deixa de alinhar a base
 * dos campos e passa a EMPURRAR TUDO PARA A DIREITA, um por linha. O
 * formulario aparecia como uma escada encostada na borda, com rotulo e campo
 * de larguras diferentes cada um.
 *
 * Agora e grade: as colunas se ajustam a largura disponivel, os campos ocupam
 * a coluna inteira e as bases alinham de verdade.
 */
.form--linha{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.9rem 1rem; align-items:end;
  margin-top:.9rem; max-width:none;
  background:none; border:0; padding:0; border-radius:0;
}
.form--linha label{
  display:flex; flex-direction:column; gap:.3rem; min-width:0;
  font-size:.8rem; font-weight:600; color:var(--cinza);
  text-transform:uppercase; letter-spacing:.04em;
}
.form--linha label small{
  font-weight:400; font-size:.72rem; color:#8a8fa3;
  text-transform:none; letter-spacing:0; margin-top:-.1rem;
}
.form--linha input, .form--linha select{
  width:100%; min-width:0; padding:.5rem .6rem;
  border:1px solid var(--borda); border-radius:8px; font-size:.95rem;
  font-family:inherit; background:#fff;
}
.form--linha input:focus, .form--linha select:focus{ border-color:var(--azul); }
/* a linha de acao ocupa a largura toda e fecha o bloco a direita */
.form--linha .form__acoes{
  grid-column:1/-1; margin:0; padding-top:.9rem; justify-content:flex-end;
}

/* ============================================================
   Dashboard
   ============================================================ */

/* Numeros do topo. Os que exigem acao sao <a> e ganham seta e realce no hover;
   os que so informam sao <div> e ficam quietos. A diferenca e proposital: no
   painel antigo tudo tinha a mesma cara e nada indicava por onde comecar. */
.painel-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-bottom:1.5rem}
.pnum{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  padding:1.1rem 1.2rem;display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"ico v" "ico r";column-gap:.85rem;row-gap:.15rem;align-content:center}
.pnum__ico{grid-area:ico;align-self:center;width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;background:#ecebf7;color:var(--azul)}
.pnum__ico svg{width:21px;height:21px}
.pnum__v{grid-area:v;font-size:1.85rem;font-weight:800;color:var(--azul);line-height:1;
  font-variant-numeric:tabular-nums}
.pnum__r{grid-area:r;font-size:.82rem;color:var(--cinza);display:flex;flex-direction:column;line-height:1.3}
.pnum__r small{font-size:.74rem;color:#8a8fa3}
.pnum--verde .pnum__ico{background:#e4f4ea;color:var(--verde)} .pnum--verde .pnum__v{color:var(--verde)}
.pnum--amarelo .pnum__ico{background:#fff5cc;color:#8a6d00}   .pnum--amarelo .pnum__v{color:#8a6d00}
.pnum--azul .pnum__ico{background:#e2ecfb;color:#12539e}      .pnum--azul .pnum__v{color:#12539e}
a.pnum{color:inherit;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
a.pnum:hover{text-decoration:none;border-color:#c9c7e4;box-shadow:0 4px 14px rgba(34,32,117,.1);transform:translateY(-1px)}
a.pnum:hover .pnum__r small{color:var(--azul)}

/* Proporcao da base. 69 "em dia" em 2.526 nao se percebe em numero solto. */
.fatia{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--cinza-cl);
  border:1px solid var(--borda)}
.fatia__p{display:block;height:100%;min-width:2px}
.fatia__p--ativos{background:var(--verde)}
.fatia__p--inativos{background:#b9bdcc}
.fatia__p--outros{background:var(--amarelo)}
.legenda{display:flex;flex-wrap:wrap;gap:1.2rem;list-style:none;margin:.8rem 0 0;padding:0;
  font-size:.85rem;color:var(--cinza)}
.legenda li{display:flex;align-items:center;gap:.4rem}
.legenda b{color:var(--tinta);font-variant-numeric:tabular-nums}
.legenda__c{width:11px;height:11px;border-radius:3px;flex:none}
.legenda__c--ativos{background:var(--verde)}
.legenda__c--inativos{background:#b9bdcc}
.legenda__c--outros{background:var(--amarelo)}

.painel-2col{display:grid;grid-template-columns:1.15fr 1fr;gap:1.5rem;align-items:start}
@media (max-width:960px){.painel-2col{grid-template-columns:1fr}}

/* barra por categoria: regua e a MAIOR categoria, nao o total (ver comentario
   na view). Fica sob o nome, sem roubar coluna da tabela. */
.tabela--barras td:first-child{padding-bottom:.45rem}
.cat{display:block}
/* SEM trilha de fundo: com trilha, a categoria de 1 registro virava uma linha
   cinza inteira atravessando a celula e parecia risco perdido no layout. So a
   parte preenchida aparece, com um minimo para o valor 1 nao sumir. */
.cat__barra{display:block;height:5px;margin-top:.34rem;max-width:260px}
.cat__barra i{display:block;height:100%;min-width:4px;background:var(--azul);opacity:.42;border-radius:3px}

/* lista de conteudo publicado */
.mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mini__i + .mini__i{border-top:1px solid var(--borda)}
.mini__i a{display:flex;align-items:center;gap:.75rem;padding:.62rem .2rem;color:var(--tinta)}
.mini__i a:hover{text-decoration:none;color:var(--azul)}
.mini__ico{width:32px;height:32px;flex:none;border-radius:9px;background:var(--cinza-cl);
  color:var(--azul);display:flex;align-items:center;justify-content:center}
.mini__ico svg{width:17px;height:17px}
.mini__t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.9rem;line-height:1.25}
.mini__t small{color:var(--cinza);font-size:.75rem}
.mini__v{font-size:1.15rem;font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums}
.mini__i--zero .mini__v{color:#a7abbb}
.mini__i--zero .mini__ico{color:#a7abbb}
.mini__nota{margin:.9rem 0 0;font-size:.76rem;color:#8a8fa3}

/* campo de foto de pessoa (diretoria e presidentes) */
/* nota explicativa no cabecalho de uma tela do painel */
/* previa da assinatura: fundo XADREZ, e nao branco. Sobre branco um PNG
   com fundo branco chapado parece transparente, que e exatamente o erro
   que a tela precisa denunciar. */
.campo-assinatura__previa{width:150px;height:auto;flex:none;border:1px solid var(--borda);border-radius:10px;padding:4px;
  background-color:#fff;
  background-image:linear-gradient(45deg,#e4e6ee 25%,transparent 25%),linear-gradient(-45deg,#e4e6ee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e4e6ee 75%),linear-gradient(-45deg,transparent 75%,#e4e6ee 75%);
  background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}
/* ---- editor visual de conteudo (assets/js/editor.js) ---- */
/* O papel imita o site: mesma familia e o mesmo respiro entre paragrafos. Se
   editar parecer diferente de publicar, a pessoa formata olhando uma coisa e
   recebe outra. */
.ed{border:1px solid var(--borda);border-radius:10px;overflow:hidden;background:#fff}
.ed__barra{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;padding:.45rem .55rem;
  background:var(--cinza-cl);border-bottom:1px solid var(--borda)}
.ed__b{font:inherit;font-size:.82rem;line-height:1;padding:.42rem .6rem;border:1px solid transparent;
  border-radius:7px;background:none;color:var(--cinza);cursor:pointer}
.ed__b:hover{background:#fff;border-color:var(--borda);color:var(--azul)}
.ed__b[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.ed__b--negrito{font-weight:800;min-width:2rem}
.ed__b--italico{font-style:italic;min-width:2rem}
.ed__b--codigo{margin-left:auto;font-family:ui-monospace,Consolas,monospace}
.ed__sep{width:1px;height:1.1rem;background:var(--borda);margin:0 .2rem}
.ed__papel{min-height:16rem;max-height:34rem;overflow-y:auto;padding:1rem 1.1rem;outline:none;
  font-size:.95rem;line-height:1.6;color:var(--tinta)}
.ed__papel:focus{box-shadow:inset 0 0 0 2px rgba(35,30,100,.12)}
.ed__papel > :first-child{margin-top:0}
.ed__papel h2{font-size:1.25rem;color:var(--azul);margin:1.3rem 0 .5rem}
.ed__papel h3{font-size:1.05rem;color:var(--azul);margin:1.1rem 0 .4rem}
.ed__papel p{margin:0 0 .8rem}
.ed__papel ul,.ed__papel ol{margin:0 0 .8rem;padding-left:1.4rem}
.ed__papel a{color:var(--azul);text-decoration:underline}
.ed__papel img{max-width:100%;height:auto;border-radius:8px}
.ed__papel figure{margin:1rem 0}
.ed__papel blockquote{margin:1rem 0;padding-left:.9rem;border-left:3px solid var(--borda);color:var(--cinza)}
/* o textarea continua existindo: e ele que o formulario envia, e e o que
   aparece quando a pessoa clica em "</>" */
.ed__fonte{border:0;border-radius:0;min-height:20rem;font-family:ui-monospace,Consolas,monospace;
  font-size:.85rem;line-height:1.5;padding:1rem 1.1rem}
.ed__fonte:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(35,30,100,.12)}

.tag--amarela{background:#fff3c4;color:#7a5c00}
.tag--vermelha{background:#fdecec;color:#8e2020}
/* Abas de filtro do painel. NAO reaproveitar o `.anos` do site: aquela classe
   vive em estilo.css, que o painel nao carrega, e o resultado e uma fileira de
   texto solto sem nenhum aviso de erro. */
.filtro-abas{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.2rem}
.filtro-abas a{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;
  border:1px solid var(--borda);border-radius:999px;background:#fff;color:var(--azul);
  font-size:.85rem;font-weight:600}
.filtro-abas a:hover{border-color:var(--azul);text-decoration:none}
.filtro-abas a[aria-current="page"]{background:var(--azul);border-color:var(--azul);color:#fff}
.filtro-abas__n{background:var(--cinza-cl);color:var(--cinza);border-radius:999px;
  padding:0 .4rem;font-size:.74rem;font-weight:700;min-width:1.5em;text-align:center}
.filtro-abas a[aria-current="page"] .filtro-abas__n{background:rgba(255,255,255,.22);color:#fff}

/* aviso, e nao erro: a situacao pede acao, nao conserto */
.alerta--aviso{background:#fff8cb;border-color:#ffed7b;color:#7a5c00}
.nao-conferido{color:#8a6d00;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.link--forte{font-weight:700;color:var(--azul)}

/* ---- fila de pagamentos avisados ---- */
/* Cartao e nao linha de tabela: cada aviso tem valor declarado, valor esperado,
   comprovante e dois formularios de decisao. Espremer isso numa linha faria a
   secretaria decidir sem ver o que esta decidindo. */
.aviso-pg{border:1px solid var(--borda);border-radius:12px;padding:1.1rem 1.2rem;margin:0 0 1rem;background:#fff}
.aviso-pg__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.aviso-pg__topo h2{margin:0;font-size:1.05rem}
.aviso-pg__meta{margin:.2rem 0 0;font-size:.85rem;color:var(--cinza)}
.aviso-pg__dados{display:grid;gap:.7rem 1.4rem;margin:1rem 0 0;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.aviso-pg__dados dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza)}
.aviso-pg__dados dd{margin:.1rem 0 0;font-weight:600;color:var(--tinta)}
/* a divergencia de valor precisa SALTAR: e o motivo numero um de recusa */
.aviso-pg__diverge dd{color:#8e2020}
.aviso-pg__diverge dd small{display:block;font-weight:400;font-size:.75rem}
.aviso-pg__obs{margin:.9rem 0 0;font-size:.88rem;color:var(--cinza);line-height:1.5}
.aviso-pg__acoes{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:flex-end;
  margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--borda)}
.aviso-pg__acoes form{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
.aviso-pg__acoes label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza);
  display:flex;flex-direction:column;gap:.2rem}
.aviso-pg__acoes input{width:9rem}

.topo__nota{margin:.4rem 0 0;font-size:.8rem;color:#8a8fa3;line-height:1.45;max-width:62ch}
.form__foto-nota{margin:.5rem 0 0;font-size:.75rem;color:#8a8fa3;line-height:1.45}

/* O campo de foto mudou-se para assets/css/foco.css junto do enquadramento:
   os dois andam sempre juntos, e agora o portal usa os dois. */

/* recado de uma tela para a proxima ("Notícia salva.") */
.recado{display:flex;align-items:center;gap:.55rem;margin:0 0 1.2rem;
  padding:.7rem .95rem;border-radius:9px;font-size:.9rem;font-weight:600}
.recado::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.recado--ok{background:#e6f5ec;color:#14683a;border:1px solid #bfe3cd}
.recado--ok::before{background:var(--verde)}
.recado--erro{background:#fdecec;color:#8a1f1f;border:1px solid #f3b9b9}
.recado--erro::before{background:#a12626}

/* barra de busca das listas */
.lista-busca{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0 0 1.2rem}
.lista-busca input[type=search]{flex:0 1 280px;min-width:180px;padding:.5rem .7rem;
  border:1px solid var(--borda);border-radius:8px;font-size:.9rem;font-family:inherit}
.lista-busca__conta{margin-left:auto;font-size:.85rem;color:var(--cinza);
  font-variant-numeric:tabular-nums}
.lista-busca__conta strong{color:var(--tinta)}

/* paginacao */
.paginas{display:flex;gap:.7rem;align-items:center;justify-content:center;margin:1.4rem 0 0}
.paginas__conta{font-size:.85rem;color:var(--cinza);font-variant-numeric:tabular-nums}

/* contagem e link "ver no site" no cabecalho da lista */
.topo__conta{margin:.35rem 0 0;font-size:.85rem;color:var(--cinza);font-variant-numeric:tabular-nums}
.topo__conta strong{color:var(--tinta)}
.topo__ver{margin:.3rem 0 0;font-size:.85rem}

/* acoes da linha lado a lado, nao empilhadas */
.tabela td > a.link + form,
.tabela td > form + a.link{margin-left:.7rem}
.tabela td:last-child{white-space:nowrap}
.tabela td:last-child form{display:inline}

/* composicao da diretoria de uma gestao (tela do presidente) */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cargos{border:1px solid var(--borda);border-radius:var(--raio);padding:1.1rem 1.2rem 1.2rem;margin:0}
.cargos legend{padding:0 .4rem;font-size:.9rem;font-weight:700;color:var(--azul)}
.cargos__ajuda{margin:0 0 .9rem;font-size:.8rem;color:var(--cinza);line-height:1.45}
.cargos__cab,.cargos__linha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:.6rem}
.cargos__cab{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--cinza);margin-bottom:.35rem}
.cargos__linha{margin-bottom:.5rem}
.cargos__linha input{padding:.45rem .55rem;border:1px solid var(--borda);border-radius:8px;
  font-size:.9rem;font-family:inherit;width:100%;min-width:0}
.cargos__linha input:placeholder-shown{background:#fbfbfe}
.cargos__conta{margin:.7rem 0 0;font-size:.78rem;color:#8a8fa3}
@media (max-width:620px){ .cargos__cab{display:none} .cargos__linha{grid-template-columns:1fr} }
.campo-foto__aviso{color:#8a6d00;background:#fff8cb;border:1px solid #ffed7b;
  border-radius:7px;padding:.4rem .55rem;line-height:1.4}

/* link externo do curso */
.linkext{border:1px solid var(--borda);border-radius:var(--raio);padding:1rem 1.2rem 1.1rem;margin:0}
.linkext legend{padding:0 .4rem;font-size:.9rem;font-weight:700;color:var(--azul)}
.linkext legend small{font-weight:400;color:var(--cinza)}
.linkext__ajuda{margin:0 0 .85rem;font-size:.8rem;color:var(--cinza);line-height:1.45}
.linkext .check{margin-top:.7rem}
.linkext__aviso{margin:.7rem 0 0;padding:.55rem .75rem;border-radius:8px;
  background:#fff8cb;border:1px solid #ffed7b;color:#827100;font-size:.82rem;line-height:1.45}

/* O enquadramento da foto mudou-se para assets/css/foco.css: agora o
   portal do associado usa o mesmo controle, e o portal nao pode carregar
   o painel.css inteiro sem herdar o resto do painel junto. */

/* ---------- acesso ao portal (link de primeiro acesso) ---------- */
/* O bloco existe porque, sem SMTP, este link é a ÚNICA porta de entrada do
   portal: a secretaria gera aqui e envia por WhatsApp. Ele aparece UMA vez, e
   por isso precisa saltar aos olhos na hora em que aparece. */
.acesso-portal{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--borda)}
.acesso-portal h3{margin:0 0 .5rem;font-size:.92rem;color:var(--azul)}
.acesso-portal__estado{margin:.15rem 0 .7rem;font-size:.85rem;color:var(--cinza);line-height:1.5}
.acesso-portal__nota{margin:.5rem 0 0;font-size:.78rem;color:var(--cinza);line-height:1.5}
.acesso-portal__pronto{margin:0 0 .35rem;font-size:.83rem;font-weight:700;color:var(--azul)}
/* o campo é readonly e seleciona tudo ao receber o foco: copiar é a única coisa
   que se faz com ele, e um clique já deixa pronto para o Ctrl+C */
.acesso-portal__link{width:100%;padding:.55rem .65rem;border:1px solid var(--borda);
  border-radius:8px;background:#fff;font-family:var(--mono,ui-monospace,monospace);
  font-size:.78rem;color:#333}
.acesso-portal__link:focus{outline:2px solid var(--azul);outline-offset:1px}
/* na fila, o bloco vira caixa destacada: ali ele é a resposta da ação, não um
   detalhe da ficha */
.acesso-portal--destaque{margin:0 0 1.2rem;padding:1rem 1.2rem;border:1px solid var(--azul);
  border-top:1px solid var(--azul);border-radius:var(--raio);background:#f4f7fd}

/* contador de pendências no submenu da barra */
.barra__nav a.barra__sub .barra__n{margin-left:auto;padding:.05rem .42rem;border-radius:999px;
  background:var(--amarelo,#f2c200);color:#3a2f00;font-size:.7rem;font-style:normal;font-weight:700}

/* ---------- edição em lote de associados ---------- */
/* Fica fechado por padrão: é uma operação que alcança milhares de cadastros e
   não deve estar a um clique de distância de quem só veio consultar. */
.lote-abre{margin:0 0 1.2rem;border:1px solid var(--borda);border-radius:var(--raio);background:#fff}
.lote-abre>summary{cursor:pointer;padding:.7rem 1rem;font-weight:600;color:var(--azul);
  display:flex;align-items:center;gap:.6rem;list-style:none}
.lote-abre>summary::-webkit-details-marker{display:none}
.lote-abre>summary::before{content:"";width:0;height:0;border:5px solid transparent;
  border-left-color:currentColor;transition:transform .15s ease}
.lote-abre[open]>summary::before{transform:rotate(90deg)}
.lote-abre>summary span{margin-left:auto;font-weight:400;font-size:.82rem;color:var(--cinza)}
.lote-abre form,.lote-abre__trava{padding:0 1rem 1rem}
.lote-abre__trava{margin:0;font-size:.86rem;line-height:1.55;color:var(--cinza)}
.lote-abre__ajuda{margin:0 0 .8rem;font-size:.82rem;color:var(--cinza);line-height:1.5}
.lote-abre__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem}
.lote-abre__acoes{margin-top:.9rem}

/* tela de confirmação: o freio antes de gravar */
.lote{max-width:720px}
.lote__n{margin:0 0 .3rem;font-size:1.35rem;color:var(--azul)}
.lote__n strong{font-size:1.9rem}
.lote__recorte{margin:0 0 1.4rem;font-size:.88rem;color:var(--cinza)}
.lote h2{margin:1.4rem 0 .6rem;font-size:.95rem;color:var(--azul)}
.lote__mudancas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem;margin:0}
.lote__mudancas div{padding:.6rem .8rem;border:1px solid var(--borda);border-radius:8px;background:#fff}
.lote__mudancas dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cinza)}
.lote__mudancas dd{margin:.15rem 0 0;font-weight:700;color:var(--azul)}
.lote__amostra{margin:0;padding:0;list-style:none;border:1px solid var(--borda);border-radius:8px;background:#fff}
.lote__amostra li{padding:.5rem .8rem;border-bottom:1px solid var(--borda);
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.lote__amostra li:last-child{border-bottom:0}
.lote__amostra small{margin-left:auto;font-size:.78rem;color:var(--cinza)}
.lote__resto{margin:.5rem 0 0;font-size:.83rem;color:var(--cinza)}
/* o campo de validade só aparece quando ativa, e é obrigatório: ativo sem data
   sai da régua de cobrança e nunca mais é reconferido */
.lote__ativo-ate{margin:1.3rem 0 0;padding:.9rem 1rem;border:1px solid var(--amarelo);
  border-radius:8px;background:#fffdf0}
.lote__ativo-ate p{margin:.45rem 0 0;font-size:.8rem;color:#6a5600;line-height:1.5}
.lote__acoes{margin-top:1.4rem;display:flex;align-items:center;gap:1rem}

/* ---------- link da bio ---------- */
/* linha desligada: o botão continua cadastrado, só não aparece no celular */
.tabela tr.linha--off{ opacity:.55 }
.col-icone{ width:44px; color:var(--azul) }
.sem-icone{ color:var(--cinza) }
.url-curta{ font-size:.8rem; color:var(--cinza); word-break:break-all }

/* espelho do botão: mostra o resultado no fundo da própria página /links, e não
   no fundo branco do painel. Um botão claro sobre branco não diz nada sobre
   como ele fica sobre azul. */
.bio-espelho{ background:#2c296c; border-radius:12px; padding:1rem }
.bio-espelho__bt{
  display:flex; align-items:center; gap:.8rem;
  padding:1rem 1.15rem; border-radius:14px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
  color:#fff; font-size:1.2rem; font-weight:600; line-height:1.25;
}
.bio-espelho__bt svg{ flex:none; opacity:.9 }
.bio-espelho__bt small{ display:block; font-weight:400; font-size:.96rem; color:#c1c0dc; margin-top:.12rem }
.bio-espelho__bt--forte{ background:#f7c413; border-color:#f7c413; color:#211e50 }
.bio-espelho__bt--forte small{ color:#6a5600 }

/* Coluna de ações dentro de TABELA.
   O `.acoes` genérico é flex sem `align-items`, o que vale `stretch`: o link e
   os botões, que vêm dentro de <form>, param em alturas diferentes e a linha
   sai torta. Aqui a regra é escopada em `td` para não mexer nas três telas que
   usam `.acoes` como <div>. */
.tabela td.acoes{ align-items:center }
.tabela td.acoes form{ margin:0; display:inline-flex; align-items:center }

/* ---------------------------------------------------------------------------
   Janela de escolher imagem do editor (botão "Imagem").

   Entrou em 09/10/2026, com o pedido da diretoria de anexar imagem no texto das
   páginas. Fica aqui, no CSS do painel, e não no do site: ninguém de fora vê
   esta janela.

   `position:fixed` com `inset:0` se ancora na janela do navegador, e nenhum pai
   do <body> tem transform, então não vira caixinha presa no topo. O fundo
   escuro é clicável para fechar, e o `body.selimg-aberta` trava a rolagem de
   trás, senão a página corre atrás da janela no celular.
--------------------------------------------------------------------------- */
.selimg{ position:fixed; inset:0; z-index:200; background:rgba(14,15,45,.55);
         display:flex; align-items:flex-start; justify-content:center; padding:4vh 1rem; overflow:auto }
.selimg[hidden]{ display:none }
body.selimg-aberta{ overflow:hidden }
.selimg__caixa{ background:#fff; border-radius:14px; width:min(680px,100%); padding:1.1rem 1.2rem 1.2rem;
                box-shadow:0 24px 60px -24px rgba(14,15,45,.5) }
.selimg__topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem }
.selimg__topo strong{ color:var(--azul); font-size:1.05rem }
.selimg__x{ background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--cinza); padding:0 .3rem }
.selimg__envio{ background:var(--cinza-claro); border-radius:10px; padding:.7rem .8rem }
.selimg__arquivo{ display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; color:var(--cinza) }
.selimg__ajuda{ margin:.4rem 0 0; font-size:.78rem; color:var(--cinza) }
.selimg__erro{ margin:.7rem 0 0; padding:.55rem .7rem; border-radius:8px; font-size:.85rem;
               background:#fdecec; border:1px solid #f3bdbd; color:#8e2020 }
.selimg__titulo{ margin:1rem 0 .5rem; font-size:.85rem; color:var(--cinza);
                 display:flex; gap:.6rem; align-items:center; justify-content:space-between; flex-wrap:wrap }
.selimg__busca{ flex:0 1 220px; padding:.4rem .6rem; border:1px solid var(--borda); border-radius:8px; font:inherit; font-size:.85rem }
.selimg__grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:.5rem;
                max-height:34vh; overflow:auto; padding:.15rem }
.selimg__item{ padding:0; border:2px solid transparent; border-radius:8px; background:var(--cinza-claro);
               cursor:pointer; line-height:0; overflow:hidden }
.selimg__item img{ width:100%; height:78px; object-fit:cover; display:block }
.selimg__item[aria-selected="true"]{ border-color:var(--azul); box-shadow:0 0 0 3px rgba(44,41,108,.18) }
.selimg__vazio{ grid-column:1/-1; margin:0; padding:.8rem; color:var(--cinza); font-size:.85rem; text-align:center }
.selimg__campos{ margin-top:.9rem; display:grid; gap:.6rem }
.selimg__campos label{ display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--cinza) }
.selimg__campos input{ padding:.5rem .6rem; border:1px solid var(--borda); border-radius:8px; font:inherit }
.selimg__acoes{ display:flex; gap:.6rem; margin-top:1rem }
.selimg__ok{ font:inherit; padding:.6rem 1.1rem; border:0; border-radius:8px; background:var(--azul); color:#fff; cursor:pointer }
.selimg__ok[disabled]{ opacity:.5; cursor:not-allowed }
.selimg__cancelar{ font:inherit; padding:.6rem 1.1rem; border:1px solid var(--borda); border-radius:8px;
                   background:#fff; color:var(--tinta); cursor:pointer }

/* Tela "Fotos da home": a linha tem miniatura alta, dois campos de texto e
   quatro ações. Sem isto, tudo encosta no topo da linha e os campos saem
   estreitos demais para ler a legenda inteira. */
.tabela--fotos td{ vertical-align:middle }
.tabela--fotos .form-linha{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:0 }
.tabela--fotos .form-linha input{ flex:1 1 220px; min-width:0; padding:.45rem .6rem;
                                  border:1px solid var(--borda); border-radius:8px; font:inherit; font-size:.9rem }
/* a celula NAO vira flex: td com display:flex perde a altura da linha e as
   acoes encostam no topo. O flex fica num invólucro dentro dela. */
.tabela--fotos td.acoes{ display:table-cell; vertical-align:middle }
.tabela--fotos .acoes-fotos{ display:flex; flex-wrap:wrap; gap:.35rem .7rem; align-items:center }
.tabela--fotos .acoes-fotos form{ margin:0; display:inline-flex }

/* ---------------------------------------------------------------------------
   Pagamento pelo site, no painel (14/10/2026).

   Duas telas mostram o mesmo pagamento: a lista de inscritos do curso e
   "Pagamentos pelo site". As classes são as mesmas nas duas, para um
   "Estornado" não ter uma cara em cada lugar.
--------------------------------------------------------------------------- */
/* aguardando pagamento: laranja, e não o amarelo de "inscrito", que é uma
   situação que já vale. As duas lado a lado precisam parecer diferentes. */
.tag--aguardando{background:#ffedd9;color:#8a4500}
/* TESTE: contorno tracejado, para dizer "isto não é dinheiro" sem competir com
   o vermelho do estorno */
.tag--teste{background:#fff;color:#5b6072;border:1px dashed #9a9fb2;letter-spacing:.06em}

/* caixa do topo: dinheiro a devolver ou a conferir, com o nome de quem é */
.alerta--perigo{background:#fdecec;border-color:#f3b9b9;color:#7a1c1c}
.alerta__lista{margin:.45rem 0 0;padding-left:1.1rem;line-height:1.5}

/* legenda acima da tabela, só com o que aparece nela */
.legenda-pag{list-style:none;margin:0 0 1rem;padding:.7rem .9rem;display:grid;gap:.3rem;
  border:1px solid var(--borda);border-radius:var(--raio);background:#fff;
  font-size:.84rem;color:var(--cinza);line-height:1.5}
.legenda-pag strong{color:var(--tinta)}

/* célula de pagamento: situação em cima, detalhe e observação embaixo */
.tabela--inscritos td{vertical-align:top}
.tabela td.pag{min-width:13rem}
.pag__linha{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.pag__det{display:block;margin-top:.2rem;font-size:.78rem;color:var(--cinza);line-height:1.35;white-space:normal}
/* a observação é o que pede gente olhando: destacada sempre, e vermelha quando
   é dinheiro a devolver, pago a menor ou estorno */
.pag__obs{display:block;margin-top:.35rem;padding:.3rem .5rem;border-left:3px solid var(--amarelo);
  border-radius:0 6px 6px 0;background:#fffbea;color:#5c4a00;font-size:.78rem;line-height:1.4;white-space:normal}
.pag__obs--urgente{border-left-color:#a12626;background:#fdecec;color:#7a1c1c;font-weight:600}
/* "sem informação": um traço e a palavra, em cinza. Não é alerta: as 675
   inscrições do sistema antigo são assim, e nenhuma está devendo nada */
.pag__sem{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--cinza);cursor:help}
.pag__traco{display:inline-block;width:.9rem;height:2px;border-radius:1px;background:#a7abbb}

.tabela tr.linha--atencao td{background:#fff7f7}

/* marcar como pago: fechado por padrão, porque é dizer que entrou dinheiro */
.pago-manual{margin-top:.5rem}
.pago-manual>summary{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;list-style:none;
  font-size:.8rem;font-weight:600;color:var(--azul)}
.pago-manual>summary::-webkit-details-marker{display:none}
.pago-manual>summary::before{content:"";border:4px solid transparent;border-left-color:currentColor;
  transition:transform .15s ease}
.pago-manual[open]>summary::before{transform:rotate(90deg) translateX(2px)}
.pago-manual form{display:grid;gap:.5rem;max-width:18rem;margin-top:.5rem;padding:.7rem;
  border:1px solid var(--borda);border-radius:8px;background:var(--cinza-cl)}
.pago-manual label{display:flex;flex-direction:column;gap:.2rem;font-size:.75rem;color:var(--cinza)}
.pago-manual select,.pago-manual input{width:100%}
.pago-manual__nota{margin:0;font-size:.72rem;line-height:1.4;color:var(--cinza)}
.pago-manual .botao{justify-self:start;padding:.45rem .9rem;font-size:.82rem}

/* excluir de curso que o servidor vai recusar (tem inscrição): fica, em cinza,
   para a pessoa clicar e ler o que fazer */
button.link--inativo{color:#6b7084}
button.link--inativo:hover{color:var(--tinta)}

/* tela "Pagamentos pelo site" */
.tabela--pagon td{vertical-align:top}
.tabela--pagon td small{display:block;margin-top:.15rem;font-size:.76rem;color:var(--cinza)}
/* a regra geral deixa a última coluna sem quebra (é onde moram os botões);
   aqui a última é a observação, que precisa quebrar */
.tabela--pagon td:last-child,.diario-avisos .tabela td:last-child{white-space:normal}
.pagon__quando,.pagon__valor{white-space:nowrap}
.pagon__valor{font-variant-numeric:tabular-nums}
.pagon__obs{min-width:12rem}
.pagon__sumiu{color:#8e2020}
.diario-avisos{margin-top:1.8rem}