/* SINAPSE · Reunião do CONDPCI — camada da apresentação (cadastro, travas, comentário). Paleta SINAPSE. */
:root { --ap-navy: #1E2761; --ap-teal: #0E7468; --ap-teal2: #11897A; --ap-aco: #34508A; --ap-gelo: #E9EEF8; --ap-texto: #15324F;
  --ap-neutro: #46586E; --ap-fundo: #FFFFFF; --ap-linha: #D5DCE8; --ap-alerta: #9A3412; --ap-alerta-fundo: #FFF4E5; }
:root[data-tema="escuro"] { --ap-fundo: #1C1F23; --ap-texto: #E8EBEE; --ap-neutro: #B4BAC1; --ap-linha: #3A3F46; --ap-gelo: #23272C;
  --ap-alerta: #FDBA74; --ap-alerta-fundo: #2B2118; }

/* Início: módulo travado */
.portais > li.apres-travado .portal { position: relative; cursor: not-allowed; }
.portais > li.apres-travado .portal > *:not(.apres-trava) { opacity: .38; filter: grayscale(.8); }
.apres-trava { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(233, 238, 248, .35); border-radius: inherit; color: var(--ap-navy); text-align: center; pointer-events: none; }
:root[data-tema="escuro"] .apres-trava { background: rgba(20, 22, 24, .45); color: #E8EBEE; }
.apres-trava svg { width: 34px; height: 34px; fill: currentColor; }
.apres-trava b { font: 700 14px/1.2 Montserrat, Raleway, system-ui, sans-serif; background: var(--ap-fundo); padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }

/* cabeçalho */
.apres-comentar, .apres-pedido { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; margin-right: 8px;
  border-radius: 999px; border: 1px solid var(--ap-teal); background: var(--ap-teal); color: #fff; font: 700 14px Montserrat, Raleway, system-ui, sans-serif; cursor: pointer; }
.apres-comentar svg { width: 20px; height: 20px; fill: currentColor; }
.apres-pedido { background: transparent; color: var(--ap-teal); }
:root[data-tema="escuro"] .apres-pedido { color: #2BB3AE; border-color: #2BB3AE; }
.apres-pedido[disabled] { opacity: .7; cursor: default; }
.apres-pedido[hidden] { display: none; }
.apres-uf { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ap-navy);
  color: #fff; font: 700 14px Montserrat, system-ui, sans-serif; }
.perfil__selo img { max-height: 44px; width: auto; height: auto; object-fit: contain; }
.perfil.apres-anonimo { visibility: hidden; }
@media (max-width: 760px) {
  .apres-comentar span { display: none; }
  .apres-comentar { padding: 0 12px; margin-right: 4px; }
  .apres-pedido { font-size: 12px; padding: 0 10px; margin-right: 4px; }
}
.apres-ficticio #faixa-ficticio { display: block; background: var(--ap-alerta-fundo); color: var(--ap-alerta); font-weight: 700; }

/* avisos */
.apres-avisos { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9998; display: flex; flex-direction: column; gap: 8px;
  width: min(92vw, 520px); pointer-events: none; }
.apres-aviso { background: var(--ap-navy); color: #fff; padding: 12px 16px; border-radius: 12px; font: 600 15px/1.35 Raleway, system-ui, sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: opacity .4s, transform .4s; }
.apres-aviso--novo { background: var(--ap-teal); }
.apres-aviso.sai { opacity: 0; transform: translateY(8px); }

/* janelas */
.apres-fundo { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 20, 35, .55); display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 24px 16px; }
.apres-modal { position: relative; width: min(100%, 520px); background: var(--ap-fundo); color: var(--ap-texto); border-radius: 16px; padding: 24px 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3); font: 400 15px/1.45 Raleway, system-ui, sans-serif; margin: auto 0; }
.apres-modal h2 { margin: 0 0 4px; font: 700 22px/1.2 Montserrat, system-ui, sans-serif; color: var(--ap-texto); }
.apres-sub { margin: 0 0 16px; color: var(--ap-neutro); }
.apres-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ap-neutro); font-size: 28px; cursor: pointer; }
.apres-form { display: flex; flex-direction: column; gap: 12px; }
.apres-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.apres-form input, .apres-form select, .apres-form textarea { font: 400 16px Raleway, system-ui, sans-serif; min-height: 44px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--ap-linha); background: var(--ap-fundo); color: var(--ap-texto); width: 100%; box-sizing: border-box; }
.apres-form textarea { min-height: 120px; resize: vertical; }
.apres-form .apres-aceite { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13px; color: var(--ap-neutro); }
.apres-form .apres-aceite input { width: 22px; min-height: 22px; height: 22px; flex: none; margin-top: 2px; }
.apres-erro { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--ap-alerta-fundo); color: var(--ap-alerta); font-weight: 600; }
.apres-botao { min-height: 48px; border: 0; border-radius: 999px; background: var(--ap-navy); color: #fff; font: 700 16px Montserrat, system-ui, sans-serif; cursor: pointer; padding: 0 20px; }
:root[data-tema="escuro"] .apres-botao { background: #2BB3AE; color: #101214; }
.apres-botao--claro { background: transparent; color: var(--ap-navy); border: 2px solid var(--ap-navy); }
:root[data-tema="escuro"] .apres-botao--claro { background: transparent; color: #2BB3AE; border-color: #2BB3AE; }
.apres-botao[disabled] { opacity: .6; }
.apres-visitante { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ap-linha); display: flex; flex-direction: column; gap: 10px; }
.apres-visitante p { margin: 0; font-size: 14px; }

/* acesso encerrado */
.apres-encerrado { position: fixed; inset: 0; z-index: 10000; background: var(--ap-gelo); display: flex; align-items: center; justify-content: center; padding: 24px; }
.apres-encerrado > div { max-width: 520px; text-align: center; color: var(--ap-texto); font: 600 18px/1.5 Raleway, system-ui, sans-serif; }
.apres-encerrado img { width: min(320px, 80vw); height: auto; margin-bottom: 20px; }