/* ══════════════════════════════════════════════════════════════
* TEMPLO COVA DOS OSSOS — Componentes reutilizáveis
* Carregue DEPOIS de design-tokens.css e DEPOIS dos estilos da página.
* Tudo aqui é OPT-IN (use a classe quando quiser) — exceto regras
* marcadas como GLOBAL, que são gentis e melhoram acessibilidade
* sem quebrar nada.
* ══════════════════════════════════════════════════════════════ */
/* ─── GLOBAL: piso mínimo de fonte legível em mobile ─────────────
Não força tamanho fixo — apenas garante 14px de piso no
onde a maioria do texto herda dele. Componentes que definem
font-size próprio continuam intactos. */
@media (max-width: 768px) {
body { font-size: max(14px, 1rem); }
}
/* ─── GLOBAL: garante que botões e links de toque sejam grandes
o suficiente no mobile (alvo mínimo 44px do WCAG/Apple HIG).
Aplica APENAS quando o elemento já não tem min-height definido. */
@media (max-width: 768px) {
button:not(.no-min):not([class*="pdfjs"]):not(.bv-btn),
.btn,
a.btn-link {
min-height: 44px;
}
}
/* ══════════════════════════════════════════════════════════════
* SISTEMA DE BOTÕES (.btn-*)
* ══════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
font-family: var(--font-corpo);
font-size: var(--fs-sm);
font-weight: 600;
line-height: 1.2;
letter-spacing: .02em;
padding: 10px 18px;
min-height: 40px;
border: 1px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: all var(--t-padrao) var(--easing);
text-decoration: none;
white-space: nowrap;
user-select: none;
-webkit-tap-highlight-color: rgba(201,162,39,.25);
}
.btn:disabled, .btn.is-disabled { opacity: .42; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
.btn-primary {
background: linear-gradient(135deg, #3a0808, var(--vermelho));
color: var(--ouro-claro);
border-color: rgba(139,26,26,.6);
box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
border-color: rgba(201,162,39,.45);
box-shadow: var(--shadow), 0 0 22px rgba(139,26,26,.45);
transform: translateY(-1px);
}
.btn-secondary {
background: transparent;
color: var(--ouro);
border-color: rgba(201,162,39,.4);
}
.btn-secondary:hover:not(:disabled) {
background: rgba(201,162,39,.08);
color: var(--ouro-claro);
border-color: var(--ouro);
}
.btn-danger {
background: rgba(139,26,26,.85);
color: #fff;
border-color: rgba(192,57,43,.5);
}
.btn-danger:hover:not(:disabled) {
background: var(--vermelho);
box-shadow: 0 0 18px rgba(192,57,43,.4);
}
.btn-ghost {
background: transparent;
color: var(--texto-fraco);
border-color: rgba(196,180,154,.18);
}
.btn-ghost:hover:not(:disabled) {
color: var(--texto);
border-color: rgba(201,162,39,.3);
background: rgba(201,162,39,.04);
}
.btn-sm { padding: 6px 12px; min-height: 32px; font-size: var(--fs-xs); }
.btn-lg { padding: 14px 24px; min-height: 48px; font-size: var(--fs-base); }
.btn-block { display: flex; width: 100%; }
/* ══════════════════════════════════════════════════════════════
* SKELETON LOADER (substitui "Carregando...")
* Uso:
*
*
*
* ══════════════════════════════════════════════════════════════ */
.skeleton {
background: linear-gradient(90deg,
rgba(201,162,39,.04) 0%,
rgba(201,162,39,.12) 50%,
rgba(201,162,39,.04) 100%);
background-size: 200% 100%;
animation: skel 1.4s ease-in-out infinite;
border-radius: var(--radius-sm);
position: relative;
overflow: hidden;
}
.skeleton-line { height: 14px; margin: var(--sp-2) 0; width: 100%; }
.skeleton-w-30 { width: 30%; }
.skeleton-w-60 { width: 60%; }
.skeleton-w-80 { width: 80%; }
.skeleton-card { height: 120px; margin: var(--sp-3) 0; }
.skeleton-avatar{ width: 48px; height: 48px; border-radius: 50%; }
@keyframes skel {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ══════════════════════════════════════════════════════════════
* MODAL CUSTOMIZADO (substitui confirm()/alert() nativos)
* Use via window.appConfirm({...}) — vide app-ui.js
* ══════════════════════════════════════════════════════════════ */
.app-modal-bg {
position: fixed; inset: 0;
background: rgba(5,3,2,.88); backdrop-filter: blur(6px);
z-index: var(--z-modal);
display: none;
align-items: center; justify-content: center;
padding: var(--sp-4);
animation: fadeIn var(--t-padrao) var(--easing);
}
.app-modal-bg.is-open { display: flex; }
.app-modal {
background: linear-gradient(135deg, #0d0a08, var(--preto-suave));
border: 1px solid rgba(201,162,39,.18);
border-top: 2px solid var(--vermelho);
border-radius: var(--radius);
width: 100%;
max-width: 420px;
max-height: 90vh;
overflow: auto;
padding: var(--sp-5) var(--sp-5) var(--sp-4);
box-shadow: var(--shadow-lg);
animation: popIn var(--t-padrao) var(--easing);
}
.app-modal-titulo {
font-family: var(--font-display);
font-size: var(--fs-md);
color: var(--ouro);
letter-spacing: .04em;
margin-bottom: var(--sp-3);
}
.app-modal-mensagem {
font-family: var(--font-corpo);
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--texto);
margin-bottom: var(--sp-5);
white-space: pre-line;
}
.app-modal-btns {
display: flex; gap: var(--sp-3);
justify-content: flex-end;
flex-wrap: wrap;
}
.app-modal-btns .btn { min-width: 110px; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
/* ══════════════════════════════════════════════════════════════
* TOAST (feedback rápido — use via window.appToast)
* ══════════════════════════════════════════════════════════════ */
.app-toast-rack {
position: fixed;
bottom: var(--sp-5);
left: 50%;
transform: translateX(-50%);
z-index: var(--z-toast);
display: flex; flex-direction: column; gap: var(--sp-2);
pointer-events: none;
max-width: 90vw;
}
.app-toast {
background: rgba(14,10,8,.96);
border: 1px solid rgba(201,162,39,.25);
border-left: 3px solid var(--ouro);
color: var(--texto);
font-family: var(--font-corpo);
font-size: var(--fs-sm);
padding: var(--sp-3) var(--sp-5);
border-radius: var(--radius);
box-shadow: var(--shadow);
pointer-events: auto;
animation: toastIn .35s var(--easing);
display: flex; align-items: center; gap: var(--sp-3);
letter-spacing: .02em;
min-width: 240px;
}
.app-toast.is-ok { border-left-color: var(--ok); }
.app-toast.is-erro { border-left-color: var(--vermelho-vivo); color:#ffd5d5; }
.app-toast.is-aviso { border-left-color: var(--aviso); }
.app-toast.is-fade { animation: toastOut .3s var(--easing) forwards; }
.app-toast-icon { font-size: 1.1rem; flex-shrink: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) } }
/* ══════════════════════════════════════════════════════════════
* HAMBURGER MOBILE (.app-nav-toggle + .app-nav-drawer)
* Componente para navegação móvel das páginas de membro.
* ══════════════════════════════════════════════════════════════ */
.app-nav-toggle {
display: none;
background: transparent;
border: 1px solid rgba(201,162,39,.3);
color: var(--ouro);
font-size: 1.25rem;
width: 40px; height: 40px;
border-radius: var(--radius);
cursor: pointer;
align-items: center; justify-content: center;
}
.app-nav-toggle:active { background: rgba(201,162,39,.1); }
.app-nav-drawer-bg {
display: none;
position: fixed; inset: 0;
background: rgba(5,3,2,.7);
backdrop-filter: blur(4px);
z-index: 198;
animation: fadeIn var(--t-padrao) var(--easing);
}
.app-nav-drawer-bg.is-open { display: block; }
.app-nav-drawer {
display: none;
position: fixed; top: 0; right: 0; bottom: 0;
width: min(78vw, 320px);
background: linear-gradient(180deg, #0d0a08, #110e0c);
border-left: 1px solid rgba(201,162,39,.2);
z-index: 199;
padding: var(--sp-6) var(--sp-4) var(--sp-4);
overflow-y: auto;
box-shadow: -8px 0 30px rgba(0,0,0,.6);
animation: drawerIn var(--t-padrao) var(--easing);
}
.app-nav-drawer.is-open { display: block; }
.app-nav-drawer a {
display: block;
padding: var(--sp-3) var(--sp-2);
color: var(--texto-fraco);
text-decoration: none;
font-family: var(--font-titulo);
font-size: var(--fs-sm);
letter-spacing: .12em;
text-transform: uppercase;
border-bottom: 1px solid rgba(201,162,39,.06);
transition: color var(--t-rapido), padding-left var(--t-rapido);
}
.app-nav-drawer a:hover,
.app-nav-drawer a.ativo {
color: var(--ouro);
padding-left: var(--sp-3);
}
.app-nav-drawer-close {
position: absolute; top: var(--sp-3); right: var(--sp-3);
background: transparent; border: none;
color: var(--texto-fraco); font-size: 1.4rem; cursor: pointer;
width: 32px; height: 32px;
}
@keyframes drawerIn { from { transform: translateX(100%) } to { transform: none } }
@media (max-width: 768px) {
.app-nav-toggle { display: inline-flex; }
}
/* ══════════════════════════════════════════════════════════════
* BANNER PERSISTENTE (substitui overlays bloqueantes)
* Útil pra inadimplência, manutenção, avisos
* ══════════════════════════════════════════════════════════════ */
.app-banner {
position: sticky;
top: 0;
z-index: 250;
padding: var(--sp-3) var(--sp-4);
font-family: var(--font-corpo);
font-size: var(--fs-sm);
text-align: center;
letter-spacing: .02em;
border-bottom: 1px solid;
display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
}
.app-banner.is-aviso { background: rgba(232,184,74,.12); color: var(--aviso); border-color: rgba(232,184,74,.35); }
.app-banner.is-erro { background: rgba(192,57,43,.15); color:#ffb0b0; border-color: rgba(192,57,43,.35); }
.app-banner.is-info { background: rgba(122,174,255,.10); color: var(--info); border-color: rgba(122,174,255,.3); }
/* ══════════════════════════════════════════════════════════════
* ANIMAÇÃO DE CONFIRMAÇÃO ✓ (após "Entendido" do recado etc)
* Use via window.appCheckmark(elemento)
* ══════════════════════════════════════════════════════════════ */
.app-check-flash {
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
z-index: var(--z-toast);
pointer-events: none;
animation: checkFlash 1s var(--easing) forwards;
}
.app-check-flash::after {
content: '✓';
font-size: clamp(4rem, 18vw, 8rem);
color: var(--ok);
text-shadow: 0 0 60px rgba(109,191,109,.7);
font-weight: 700;
font-family: var(--font-display);
}
@keyframes checkFlash {
0% { opacity: 0; transform: scale(.5); }
30% { opacity: 1; transform: scale(1.05); }
60% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1); }
}
/* ══════════════════════════════════════════════════════════════
* CENTRAL DE NOTIFICAÇÕES (Bell + Modal Inbox)
* Uso por página: HTML do bell no navbar + modal no body + JS pra popular.
* ══════════════════════════════════════════════════════════════ */
/* Bell (sino) — botão sempre visível no navbar */
.app-bell{
position:relative;
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;
background:transparent;border:1px solid rgba(201,162,39,.22);
color:var(--ouro);font-size:1.05rem;cursor:pointer;
border-radius:var(--radius);transition:all .2s var(--easing);
-webkit-tap-highlight-color:rgba(201,162,39,.25);
}
.app-bell:hover{background:rgba(201,162,39,.08);border-color:var(--ouro)}
.app-bell:active{transform:scale(.95)}
/* Badge contador no canto do sino (vermelho com num) */
.app-bell-count{
position:absolute;top:-5px;right:-5px;
background:var(--vermelho-vivo);color:#fff;
font-family:var(--font-corpo);font-size:.62rem;font-weight:700;
min-width:18px;height:18px;padding:0 5px;
border-radius:9px;display:none;
align-items:center;justify-content:center;
box-shadow:0 0 8px rgba(192,57,43,.5);
border:1px solid rgba(255,255,255,.15);
letter-spacing:0;
}
.app-bell-count.is-visible{display:inline-flex}
.app-bell-count.is-pulso{animation:bellPulso 1.4s ease-in-out infinite}
@keyframes bellPulso {
0%, 100% { box-shadow: 0 0 8px rgba(192,57,43,.5); }
50% { box-shadow: 0 0 18px rgba(192,57,43,.85); transform: scale(1.08); }
}
/* Modal Central de Notificações */
/* !important defensivo: garante que o modal NUNCA apareça por padrão,
mesmo se o CSS de outra página redefinir .app-notif-modal-bg ou
se o browser cachear versão antiga do components.css. */
.app-notif-modal-bg{
display:none !important;position:fixed;inset:0;
background:rgba(5,3,2,.88);backdrop-filter:blur(6px);
z-index:var(--z-modal);
align-items:flex-start;justify-content:center;
padding:1.5rem .8rem;overflow-y:auto;
}
.app-notif-modal-bg.is-open{display:flex !important;animation:fadeIn .25s var(--easing)}
.app-notif-modal{
background:linear-gradient(135deg,#0d0a08,var(--preto-suave));
border:1px solid rgba(201,162,39,.18);border-top:3px solid var(--ouro);
width:100%;max-width:520px;max-height:90vh;
display:flex;flex-direction:column;border-radius:var(--radius);
box-shadow:var(--shadow-lg);margin:auto;
animation:popIn .25s var(--easing);
}
.app-notif-head{
padding:1rem 1.3rem;border-bottom:1px solid rgba(201,162,39,.1);
display:flex;justify-content:space-between;align-items:center;gap:.8rem;
flex-shrink:0;background:#0d0a08;
}
.app-notif-titulo{
font-family:var(--font-display);font-size:1rem;color:var(--ouro);
letter-spacing:.04em;display:flex;align-items:center;gap:.5rem;
}
.app-notif-acoes{display:flex;gap:.5rem;align-items:center}
.app-notif-marcar-todas{
background:transparent;border:1px solid rgba(201,162,39,.25);
color:var(--texto-fraco);font-family:var(--font-corpo);
font-size:.74rem;padding:.4rem .7rem;cursor:pointer;border-radius:3px;
transition:all .2s;letter-spacing:.02em;
}
.app-notif-som{
background:transparent;border:1px solid rgba(201,162,39,.18);
color:var(--ouro);font-size:1rem;cursor:pointer;border-radius:3px;
width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
transition:all .2s;line-height:1;padding:0;
}
.app-notif-som:hover{background:rgba(201,162,39,.08);border-color:var(--ouro)}
.app-notif-marcar-todas:hover{color:var(--ouro);border-color:var(--ouro)}
.app-notif-marcar-todas:disabled{opacity:.4;cursor:not-allowed}
.app-notif-fechar{
background:transparent;border:none;color:var(--texto-fraco);
font-size:1.4rem;cursor:pointer;padding:.2rem .5rem;
line-height:1;border-radius:3px;
}
.app-notif-fechar:hover{color:var(--texto)}
.app-notif-body{
padding:1rem 1.3rem 1.3rem;flex:1;
overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.app-notif-vazio{
text-align:center;padding:3rem 1.5rem;
font-family:var(--font-titulo);font-size:.86rem;
color:var(--texto-fraco);opacity:.55;letter-spacing:.05em;
}
.app-notif-vazio-icon{font-size:2.5rem;margin-bottom:.7rem;opacity:.4}
/* Card de notificação */
.app-notif-card{
background:rgba(17,14,12,.7);border:1px solid rgba(201,162,39,.1);
border-left:3px solid rgba(201,162,39,.25);
padding:.95rem 1.1rem;border-radius:3px;margin-bottom:.7rem;
transition:all .2s;animation:popIn .3s var(--easing);
}
.app-notif-card.is-nova{
background:linear-gradient(135deg,rgba(201,162,39,.06),rgba(17,14,12,.85));
border-left-color:var(--ouro);
box-shadow:0 0 18px rgba(201,162,39,.06);
}
.app-notif-card.is-tipo-aprovado{border-left-color:var(--ok)}
.app-notif-card.is-tipo-aprovado.is-nova{
background:linear-gradient(135deg,rgba(74,222,128,.07),rgba(17,14,12,.85));
border-left-color:var(--ok);
}
.app-notif-card.is-tipo-recusado{border-left-color:var(--vermelho-vivo)}
.app-notif-card.is-tipo-recusado.is-nova{
background:linear-gradient(135deg,rgba(192,57,43,.08),rgba(17,14,12,.85));
border-left-color:var(--vermelho-vivo);
}
.app-notif-card.is-lida{opacity:.62}
.app-notif-card-head{
display:flex;justify-content:space-between;align-items:flex-start;
gap:.6rem;margin-bottom:.4rem;
}
.app-notif-card-titulo{
font-family:var(--font-titulo);font-size:.92rem;color:var(--osso);
letter-spacing:.02em;display:flex;align-items:center;gap:.5rem;font-weight:600;
}
.app-notif-card-tipo-icon{font-size:1.05rem;flex-shrink:0}
.app-notif-card-data{
font-family:var(--font-corpo);font-size:.7rem;
color:var(--texto-fraco);opacity:.7;white-space:nowrap;flex-shrink:0;
}
.app-notif-card-msg{
font-family:var(--font-corpo);font-size:.86rem;line-height:1.55;
color:var(--texto-fraco);margin-bottom:.7rem;
}
.app-notif-card-rodape{
display:flex;gap:.5rem;align-items:center;
flex-wrap:wrap;margin-top:.6rem;
}
.app-notif-card-acao{
background:linear-gradient(135deg,rgba(45,106,45,.35),rgba(20,80,40,.2));
border:1px solid rgba(74,222,128,.4);
color:#9ef58a;font-family:var(--font-titulo);
font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
padding:.45rem .85rem;cursor:pointer;border-radius:3px;
text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;
transition:all .2s;
}
.app-notif-card-acao:hover{
background:linear-gradient(135deg,rgba(45,106,45,.55),rgba(20,80,40,.35));
box-shadow:0 0 12px rgba(74,222,128,.25);
}
.app-notif-card-acao.is-recusado{
background:linear-gradient(135deg,rgba(139,26,26,.4),rgba(80,20,20,.25));
border-color:rgba(232,122,122,.45);color:#ffd0d0;
}
.app-notif-card-acao.is-recusado:hover{
background:linear-gradient(135deg,rgba(139,26,26,.6),rgba(80,20,20,.4));
box-shadow:0 0 12px rgba(192,57,43,.3);
}
.app-notif-card-marcar{
background:transparent;border:1px solid rgba(201,162,39,.18);
color:var(--texto-fraco);font-family:var(--font-corpo);
font-size:.7rem;padding:.4rem .7rem;cursor:pointer;border-radius:3px;
transition:all .2s;margin-left:auto;
}
.app-notif-card-marcar:hover{color:var(--ouro);border-color:var(--ouro)}
.app-notif-card-marcar:disabled{opacity:.3;cursor:not-allowed}
@media(max-width:480px){
.app-notif-modal{max-height:95vh}
.app-notif-card-head{flex-direction:column;gap:.2rem}
.app-notif-card-rodape{flex-direction:column;align-items:stretch}
.app-notif-card-marcar{margin-left:0}
}
/* ══════════════════════════════════════════════════════════════
* UTILIDADES
* ══════════════════════════════════════════════════════════════ */
.app-hidden { display: none !important; }
.app-mt-1 { margin-top: var(--sp-1); } .app-mt-2 { margin-top: var(--sp-2); }
.app-mt-3 { margin-top: var(--sp-3); } .app-mt-4 { margin-top: var(--sp-4); }
.app-mt-5 { margin-top: var(--sp-5); }
/* Esconde elementos visualmente mas mantém pra leitor de tela */
.app-sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}