/* Layout e componentes. Cores vêm de theme.css (variáveis) e das áreas (--c). */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo); color: var(--texto); font-family: var(--fonte);
  font-size: 16px; line-height: 1.4; -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  /* brilhos sutis em azul, ciano e violeta (identidade PULSI) */
  background-image:
    radial-gradient(900px 500px at 15% -10%, rgba(34, 211, 238, .10), transparent 60%),
    radial-gradient(800px 520px at 100% 0%, rgba(139, 92, 246, .14), transparent 60%),
    radial-gradient(700px 600px at 50% 120%, rgba(59, 130, 246, .10), transparent 60%);
  background-attachment: fixed;
}

/* ---------- marca PULSI ---------- */
.marca-pulsi { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.marca-pulsi-linha { display: flex; align-items: center; gap: 10px; }
.marca-pulsi-onda { width: 56px; height: 30px; flex: none; filter: drop-shadow(0 0 10px rgba(59, 130, 246, .55)); }
.marca-pulsi-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-pulsi-nome { font-size: 26px; font-weight: 800; letter-spacing: .06em; color: #fff; }
.marca-pulsi-i { background: linear-gradient(180deg, #A78BFA, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-pulsi-local { font-size: 8.5px; font-weight: 700; letter-spacing: .32em; color: #CBD5E1; margin-top: 4px; }
.marca-pulsi-assinatura { font-size: 10.5px; font-weight: 600; letter-spacing: .55em; color: #7C8BAA; padding-left: .55em; }
.marca-pulsi.grande .marca-pulsi-onda { width: 96px; height: 52px; }
.marca-pulsi.grande .marca-pulsi-nome { font-size: 52px; letter-spacing: .07em; }
.marca-pulsi.grande .marca-pulsi-local { font-size: 12px; letter-spacing: .42em; margin-top: 8px; }
.marca-pulsi.grande .marca-pulsi-linha { gap: 14px; }
@media (max-width: 400px) {
  .marca-pulsi.grande .marca-pulsi-onda { width: 70px; height: 38px; }
  .marca-pulsi.grande .marca-pulsi-nome { font-size: 40px; }
  .marca-pulsi.grande .marca-pulsi-local { font-size: 10px; letter-spacing: .34em; }
  .marca-pulsi-assinatura { font-size: 9.5px; letter-spacing: .45em; }
}

/* ---------- tela de entrada (identificação) ---------- */
.entrada { max-width: 560px; margin: 0 auto; }
.entrada-hero { position: relative; overflow: hidden; margin: -18px -16px 18px; padding: 44px 16px 30px; text-align: center;
  border-bottom: 1px solid rgba(59, 130, 246, .18);
  background:
    radial-gradient(420px 220px at 50% 30%, rgba(59, 130, 246, .22), transparent 70%),
    linear-gradient(180deg, #0A1230, #070B18); }
.entrada-ondas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.entrada-ondas path { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 6 10; animation: fluir 9s linear infinite; }
@keyframes fluir { to { stroke-dashoffset: -320; } }
@media (prefers-reduced-motion: reduce) { .entrada-ondas path { animation: none; } }
.entrada-hero .marca-pulsi { position: relative; }
.entrada-saudacao { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.entrada-saudacao h1 { margin: 0; font-size: 28px; line-height: 1.15; }
.entrada-saudacao h1 .nome-destaque { background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.entrada-saudacao p { margin: 6px 0 0; font-size: 17px; font-weight: 600; }
.entrada-saudacao small { display: block; margin-top: 2px; color: #60A5FA; font-size: 14px; }
.selo-sessao { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px;
  background: rgba(59, 130, 246, .10); border: 1px solid rgba(59, 130, 246, .35); }
.selo-sessao svg { width: 26px; height: 26px; color: #60A5FA; }
.selo-sessao small { display: block; font-size: 11.5px; color: var(--texto-suave); }
.selo-sessao b { display: block; font-size: 17px; color: #60A5FA; }
@media (max-width: 420px) { .entrada-saudacao { flex-direction: column; } .entrada-saudacao h1 { font-size: 25px; } }
.aviso-expirado { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(139, 92, 246, .10)); border: 1px solid rgba(245, 158, 11, .45); }
.aviso-expirado svg { flex: none; width: 26px; height: 26px; color: #FBBF24; }
.aviso-expirado b { display: block; color: #FDE68A; }
.aviso-expirado p { margin: 2px 0 0; font-size: 14px; color: #E2E8F0; }
.status-servidor { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); padding: 6px 12px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borda); }
.status-servidor .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--st-enviada); }
.status-servidor.online .ponto { background: var(--ok); box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); }
.status-servidor.offline .ponto { background: var(--erro); }
.status-servidor.verificando .ponto { background: var(--aviso); animation: pisca 1s infinite; }
.entrada-rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.entrada-rodape a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); text-decoration: none; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); }
.entrada-rodape a:hover { color: var(--texto); }
.entrada-rodape svg { width: 16px; height: 16px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--marca); }
.oculto { display: none !important; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: rgba(11, 17, 32, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--texto); min-width: 0; }
.marca img { width: 44px; height: 28px; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-texto strong { font-size: 24px; font-weight: 800; letter-spacing: .02em; }
.marca-texto small { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; color: var(--texto-suave); margin-top: 3px; }
.topo .espaco { flex: 1; }
.conexao-ind {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave);
  padding: 6px 10px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borda);
  white-space: nowrap; text-decoration: none;
}
.conexao-ind .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--st-enviada); }
.conexao-ind.conectado .ponto { background: var(--ok); box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.conexao-ind.reconectando .ponto, .conexao-ind.conectando .ponto { background: var(--aviso); animation: pisca 1s infinite; }
.conexao-ind.indisponivel .ponto { background: var(--erro); }
.conexao-ind.indisponivel { color: #FCA5A5; border-color: rgba(239, 68, 68, .5); }
@keyframes pisca { 50% { opacity: .3; } }
.usuario-chip { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.2; text-decoration: none; color: var(--texto); padding: 4px 6px 4px 4px; border-radius: 999px; }
.usuario-chip:hover { background: var(--superficie); }
.usuario-chip > svg { width: 16px; height: 16px; color: var(--texto-suave); transform: rotate(90deg); }
.usuario-texto { display: flex; flex-direction: column; }
.usuario-texto b { font-size: 13px; }
.usuario-texto span { color: var(--texto-suave); }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--superficie-2); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.avatar.pequeno { width: 34px; height: 34px; background: color-mix(in srgb, var(--marca) 30%, var(--superficie)); }
.avatar svg { width: 18px; height: 18px; }
.btn-icone {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--raio-p); border: 1px solid var(--borda);
  background: var(--superficie); text-decoration: none; color: var(--texto); flex: none;
}
.btn-icone:hover { background: var(--superficie-2); }
.btn-icone svg { width: 22px; height: 22px; }
.badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--urgente); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) {
  .usuario-texto span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .usuario-texto b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conexao-ind .txt { display: none; }
  .conexao-ind { padding: 8px; }
  .topo { gap: 6px; padding: 8px 12px; }
  .topo .btn-icone { width: 38px; height: 38px; }
}
@media (max-width: 430px) { .usuario-texto { display: none; } .marca-texto { display: none; } .usuario-chip > svg { display: none; } }

/* ---------- área principal ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 18px 16px 80px; }
.titulo-tela { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.titulo-tela h1 { font-family: var(--fonte-titulo); font-size: 24px; margin: 0; }
.titulo-tela p { margin: 2px 0 0; color: var(--texto-suave); font-size: 14px; }
.voltar { flex: none; }
h2.secao { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin: 26px 0 10px; }

/* ---------- grade de áreas (botões grandes) ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.grade.grande { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 560px) { .grade, .grade.grande { grid-template-columns: 1fr 1fr; gap: 12px; } }
.tile {
  --c: var(--marca);
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr;
  align-items: end; gap: 12px 6px;
  min-height: 140px; padding: 14px; border: 0; border-radius: var(--raio); text-align: left; color: #fff;
  background: var(--c);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 70%, #0B1020));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c) 25%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .08s ease, filter .15s; text-decoration: none;
}
.grade.grande .tile { min-height: 178px; }
.tile:hover { filter: brightness(1.07); }
.tile:active { transform: scale(.97); }
.tile .ico { grid-column: 1; grid-row: 1; align-self: start; width: 50px; height: 50px; border-radius: 14px; background: rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; }
.tile .ico svg { width: 28px; height: 28px; }
/* área com cor de destaque (ex.: Central da Criança: turquesa + amarelo, cores oficiais) */
.tile.com-destaque .ico { background: var(--d); color: #0B3550; }
.tile.com-destaque .tile-fundo { color: var(--d); opacity: .28; }
.tile-fundo { position: absolute; right: -14px; top: -8px; width: 110px; height: 110px; opacity: .14; pointer-events: none; }
.tile-fundo svg { width: 100%; height: 100%; }
.tile-texto { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; }
.tile .nome { font-size: 18px; font-weight: 700; line-height: 1.15; }
.grade.grande .tile .nome { font-size: 20px; }
.tile .sub { font-size: 13px; opacity: .88; font-weight: 500; line-height: 1.3; }
.tile-seta { grid-column: 2; grid-row: 2; align-self: center; display: flex; opacity: .9; }
.tile-seta svg { width: 22px; height: 22px; }
.tile .contador { position: absolute; top: 12px; right: 12px; }
.tile.desabilitado { opacity: .35; pointer-events: none; }
@media (max-width: 380px) { .tile .nome { font-size: 16px; } .tile .sub { font-size: 12px; } }

/* barra Conectado / Desconectado */
.rodape-conexao { margin-top: 18px; }
.barra-conexao { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--raio-p);
  border: 1px solid var(--borda); background: var(--superficie); text-align: left; }
.barra-conexao:hover { background: var(--superficie-2); }
.barra-conexao .ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--st-enviada); flex: none; }
.barra-conexao.conectado .ponto { background: var(--ok); box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.barra-conexao.reconectando .ponto, .barra-conexao.conectando .ponto { background: var(--aviso); animation: pisca 1s infinite; }
.barra-conexao.indisponivel .ponto { background: var(--erro); }
.barra-ico svg { width: 22px; height: 22px; display: block; }
.barra-texto { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.barra-texto b { font-size: 14px; }
.barra-conexao.conectado .barra-texto b { color: #4ADE80; }
.barra-conexao.indisponivel .barra-texto b { color: #FCA5A5; }
.barra-texto small { color: var(--texto-suave); font-size: 12.5px; }
.barra-acao { font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.barra-conexao > span:last-child svg { width: 18px; height: 18px; display: block; color: var(--texto-suave); }

/* cartões informativos (Equipe Audiovisual, Dica) */
.cartao-info { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 16px; border-radius: var(--raio-p); background: var(--superficie); border: 1px solid var(--borda); }
.cartao-info p { margin: 4px 0 0; color: var(--texto-suave); font-size: 14px; }
.cartao-info-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--marca) 20%, transparent); color: var(--marca); }
.cartao-info-ico.dica { background: rgba(245, 158, 11, .15); color: #F59E0B; }
.cartao-info-ico svg { width: 22px; height: 22px; }

/* ---------- relatórios do culto ---------- */
a.cartao-info.atalho { text-decoration: none; color: var(--texto); align-items: center; }
a.cartao-info.atalho > svg { width: 20px; height: 20px; color: var(--texto-suave); }
.cresce { flex: 1; min-width: 0; }
.opcoes-campo { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opcao.ativo-op { background: var(--marca-forte); border-color: var(--marca-forte); color: #fff; }
.formulario-relatorio textarea { min-height: 76px; font-size: 16px; }
.formulario-relatorio input[type=number] { font-size: 20px; font-weight: 700; }
.contagens { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.contagem { display: grid; grid-template-columns: 110px 110px 1fr auto; gap: 8px; align-items: center; }
@media (max-width: 520px) { .contagem { grid-template-columns: 1fr 1fr auto; } .contagem input[type=text] { grid-column: 1 / 3; grid-row: 2; } }
.relatorio-situacao .ajuda { margin: 6px 0 0; }
.gravacao-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.gravacao-envio { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--raio-p); background: var(--fundo); border: 1px solid var(--borda); word-break: break-all; }
.abas { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.abas button { flex: none; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); font-weight: 600; font-size: 14px; color: var(--texto-suave); }
.abas button.ativa { background: var(--marca-forte); border-color: var(--marca-forte); color: #fff; }
.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.destaque { --c: var(--marca); display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--raio-p); background: var(--superficie); border: 1px solid var(--borda); border-left: 5px solid var(--c); }
.destaque small { display: block; color: var(--texto-suave); font-size: 12.5px; }
.destaque b { display: block; font-size: 20px; margin: 2px 0; }
.rel-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--c) 25%, transparent); color: var(--c); display: inline-flex; align-items: center; justify-content: center; }
.destaque .rel-ico { background: color-mix(in srgb, var(--c) 25%, transparent); }
.rel-ico svg { width: 22px; height: 22px; }
.grade-relatorios { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.grade-relatorios .cartao { margin: 0; }
.rel-area { --c: var(--marca); border-left: 5px solid var(--c); }
.rel-area.pendente { border-color: rgba(245, 158, 11, .55); border-left-color: #F59E0B; background: linear-gradient(180deg, rgba(245, 158, 11, .06), var(--superficie)); }
.rel-area dl, .rel-campos { margin: 10px 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.rel-area dt, .rel-campos dt { font-size: 12px; color: var(--texto-suave); margin-top: 6px; }
.rel-area dd, .rel-campos dd { margin: 0; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.vazio-campo { color: #FCD34D !important; font-style: italic; }
.pendencias { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.rel-linha { display: block; text-decoration: none; color: var(--texto); }
details.cartao summary { cursor: pointer; font-weight: 600; }
.versao { padding-top: 10px; border-top: 1px solid var(--borda); margin-top: 10px; }

/* folha de opções */
.folha-fundo { position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; }
.folha { width: min(520px, 100%); background: var(--superficie); border: 1px solid var(--borda); border-radius: 22px 22px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); animation: sobe .18s ease; }
@media (min-width: 700px) { .folha-fundo { align-items: center; } .folha { border-radius: 22px; } }
.folha-alca { width: 44px; height: 5px; border-radius: 3px; background: var(--borda); margin: 0 auto 12px; }
.folha h2 { margin: 0 0 6px; font-size: 19px; }
.folha-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.folha-acoes .btn { justify-content: flex-start; }

/* ---------- conversa (estilo WhatsApp) ---------- */
main:has(.tela-conversa) { padding: 0; max-width: 900px; }
.tela-conversa { display: flex; flex-direction: column; height: calc(100dvh - 61px - var(--altura-faixas, 0px)); }
.conversa-topo { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--borda); background: var(--fundo); }
.conversa-ico { --c: var(--marca); width: 46px; height: 46px; border-radius: 14px; background: var(--c); display: flex; align-items: center; justify-content: center; flex: none; }
.conversa-ico svg { width: 26px; height: 26px; }
.conversa-titulo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.conversa-titulo b { font-size: 19px; }
.conversa-titulo span { font-size: 13px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa { flex: 1; overflow-y: auto; padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.conversa-vazia { margin: auto; text-align: center; color: var(--texto-suave); max-width: 320px; }
.conversa-vazia svg { width: 48px; height: 48px; opacity: .5; }
.conversa-vazia p { color: var(--texto); font-weight: 600; margin: 8px 0 4px; }
.separador-data { display: flex; justify-content: center; }
.separador-data span { font-size: 12.5px; color: var(--texto-suave); background: var(--superficie); border: 1px solid var(--borda); padding: 5px 12px; border-radius: 999px; }
.linha-bolha { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; }
.linha-bolha.minha { justify-content: flex-end; }
.bolha { position: relative; max-width: min(82%, 560px); padding: 10px 14px 8px; border-radius: 18px 18px 18px 6px; background: var(--bolha-outros); border: 1px solid var(--borda); cursor: pointer; }
.bolha.minha { border-radius: 18px 18px 6px 18px; background: var(--bolha-minha); border-color: color-mix(in srgb, var(--bolha-minha-borda) 55%, transparent); }
.bolha.urgente { background: linear-gradient(160deg, #991B1B, #7F1D1D); border-color: #EF4444; box-shadow: 0 0 0 1px rgba(239, 68, 68, .35), 0 8px 24px rgba(220, 38, 38, .25); }
.bolha.nova:not(.minha) { box-shadow: 0 0 0 2px var(--marca); }
.bolha-urgente { display: flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: .06em; color: #FECACA; font-size: 14px; margin-bottom: 4px; }
.bolha-urgente svg { width: 18px; height: 18px; }
.bolha-urgente .bolha-hora { margin-left: auto; color: #FECACA; }
.bolha-cab { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.bolha-cab b { font-size: 13.5px; }
.bolha-area { color: var(--texto-suave); font-size: 12px; }
.bolha.minha .bolha-area, .bolha.urgente .bolha-area { color: rgba(255, 255, 255, .7); }
.bolha-hora { margin-left: auto; font-size: 12px; color: var(--texto-suave); padding-left: 10px; }
.bolha-texto { font-size: 16px; margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.bolha-texto a { color: #7DD3FC; word-break: break-all; }
.bolha-nota { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--texto-suave); margin-top: 6px; }
.bolha-nota svg { width: 14px; height: 14px; }
.bolha-rodape { display: flex; justify-content: flex-end; margin-top: 6px; font-size: 12px; color: var(--texto-suave); }
.bolha-rodape span { display: inline-flex; align-items: center; gap: 4px; }
.bolha-rodape svg { width: 15px; height: 15px; }
.bolha-rodape.status-recebida, .bolha-rodape.status-andamento { color: #93C5FD; }
.bolha-rodape.status-concluida { color: #6EE7B7; }
.bolha .player, .bolha .foto-caixa, .bolha .documento { margin: 8px 0 2px; background: rgba(0, 0, 0, .18); }
.bolha .acoes-msg .btn { min-height: 38px; font-size: 14px; }
@media (max-width: 520px) { .bolha { max-width: 86%; } .linha-bolha .avatar { width: 30px; height: 30px; font-size: 11px; } }

/* caixa de mensagem fixa no rodapé da conversa */
.compositor { border-top: 1px solid var(--borda); background: var(--fundo); padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.compositor-opcoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.compositor-opcoes .rotulo { color: var(--texto-suave); }
.compositor-opcoes .chip-area { font-size: 12.5px; }
.compositor-opcoes .btn-chip { padding: 4px 10px; font-size: 12.5px; }
.remetente { margin-left: auto; color: var(--texto-suave); font-size: 12px; }
.chip-opcao { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); font-size: 13px; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
.chip-opcao svg { width: 15px; height: 15px; }
.chip-opcao input { display: none; }
.chip-opcao.ativo { background: var(--urgente); border-color: var(--urgente); color: #fff; }
.chip-opcao:has(input:checked) { background: color-mix(in srgb, #10B981 30%, transparent); border-color: #10B981; color: #fff; }
.compositor .escolha-destinos { margin-top: 0; max-height: 210px; overflow-y: auto; }
.compositor-linha { display: flex; align-items: flex-end; gap: 8px; }
.botao-mais, .botao-enviar { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; }
.botao-mais { background: var(--superficie); border: 1px solid var(--borda); color: var(--texto); }
.botao-mais svg, .botao-enviar svg { width: 24px; height: 24px; }
.botao-enviar { background: var(--marca-forte); color: #fff; box-shadow: 0 6px 18px rgba(37, 99, 235, .4); }
.botao-enviar.urgente { background: var(--urgente); box-shadow: 0 6px 18px rgba(220, 38, 38, .4); }
.botao-enviar:disabled { opacity: .6; }
.campo-mensagem { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 4px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 24px; padding: 4px 6px 4px 16px; }
.campo-mensagem:focus-within { border-color: var(--marca); }
.campo-mensagem textarea { flex: 1; width: 100%; min-width: 0; min-height: 38px; max-height: 140px; border: 0; background: transparent; padding: 9px 0; resize: none; font-size: 16px; box-shadow: none !important; }
.contador-texto { font-size: 11px; color: var(--texto-suave); align-self: center; }
.botao-mic { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--texto-suave); display: flex; align-items: center; justify-content: center; }
.botao-mic:hover { color: var(--texto); background: var(--superficie-2); }
.botao-mic svg { width: 22px; height: 22px; }
.compositor .painel-mic { margin: 0; }

/* ---------- cartões e formulários ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.cartao + .cartao { margin-top: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label, .rotulo { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--raio-p); border: 1px solid var(--borda);
  background: var(--fundo); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(56, 189, 248, .2); }
textarea { min-height: 120px; resize: vertical; font-size: 17px; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.linha > .cresce { flex: 1; min-width: 120px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 10px 18px; border-radius: var(--raio-p); border: 1px solid var(--borda);
  background: var(--superficie-2); font-weight: 600; text-decoration: none; color: var(--texto);
}
.btn svg { width: 20px; height: 20px; }
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primario { background: var(--marca-forte); border-color: transparent; color: #fff; }
.btn.perigo { background: var(--urgente); border-color: transparent; color: #fff; }
.btn.sucesso { background: #15803D; border-color: transparent; color: #fff; }
.btn.grande { min-height: 56px; font-size: 18px; padding: 12px 24px; }
.btn.pequeno { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn.bloco { width: 100%; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.acoes .btn { flex: 1; min-width: 140px; }
.ajuda { font-size: 13px; color: var(--texto-suave); margin: 4px 0 0; }
.alerta-caixa { padding: 12px 14px; border-radius: var(--raio-p); font-size: 14px; margin: 10px 0; border: 1px solid; }
.alerta-caixa.erro { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .45); color: #FECACA; }
.alerta-caixa.ok { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .45); color: #BBF7D0; }
.alerta-caixa.info { background: rgba(56, 189, 248, .1); border-color: rgba(56, 189, 248, .35); color: #BAE6FD; }

/* seletor de prioridade */
.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmentado button { min-height: 50px; border-radius: var(--raio-p); border: 2px solid var(--borda); background: var(--fundo); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.segmentado button svg { width: 20px; height: 20px; }
.segmentado button.ativo { border-color: var(--marca); background: rgba(56, 189, 248, .12); }
.segmentado button.ativo.urg { border-color: var(--urgente); background: rgba(220, 38, 38, .18); color: #FECACA; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--raio-p); background: var(--fundo); border: 1px solid var(--borda); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--marca-forte); }

/* cabeçalho da composição: origem -> destino */
.rota { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.chip-area { --c: var(--marca); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip-area .bola { width: 22px; height: 22px; border-radius: 50%; background: var(--c); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.chip-area .bola svg { width: 14px; height: 14px; }
.rota .seta { color: var(--texto-suave); display: inline-flex; }
.rota .seta svg { width: 18px; height: 18px; }
.chip-area.grande { font-size: 15px; padding: 7px 14px 7px 8px; }
.chip-area.grande .bola { width: 28px; height: 28px; }
.chip-area.grande .bola svg { width: 17px; height: 17px; }

/* ---------- mensagens ---------- */
.lista-msgs { display: flex; flex-direction: column; gap: 10px; }
.msg {
  --c: var(--marca);
  position: relative; background: var(--superficie); border: 1px solid var(--borda); border-left: 5px solid var(--c);
  border-radius: var(--raio-p); padding: 12px 14px;
}
.msg.nova { box-shadow: 0 0 0 1px var(--marca) inset; }
.msg.urgente { background: linear-gradient(90deg, rgba(220, 38, 38, .14), var(--superficie) 60%); border-color: rgba(220, 38, 38, .55); border-left-color: var(--c); }
.msg .cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.msg .cab .espaco { flex: 1; }
.msg .meta { font-size: 12.5px; color: var(--texto-suave); margin-top: 6px; }
.msg .conteudo { font-size: 17px; margin: 8px 0 4px; white-space: pre-wrap; word-break: break-word; }
.msg .acoes-msg { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.msg .acoes-msg .btn { min-height: 42px; }
.msg.clicavel { cursor: pointer; }
.selo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.selo svg { width: 13px; height: 13px; }
.selo.urg { background: var(--urgente); color: #fff; }
.selo.novo { background: var(--marca-forte); color: #fff; }
.selo.publico { background: rgba(22, 163, 74, .2); color: #86EFAC; border: 1px solid rgba(22, 163, 74, .5); }
.status { --s: var(--st-enviada); background: color-mix(in srgb, var(--s) 22%, transparent); color: color-mix(in srgb, var(--s) 70%, #fff); border: 1px solid color-mix(in srgb, var(--s) 55%, transparent); }
.status.enviada { --s: var(--st-enviada); }
.status.entregue { --s: var(--st-entregue); }
.status.recebida { --s: var(--st-recebida); }
.status.andamento { --s: var(--st-andamento); }
.status.concluida { --s: var(--st-concluida); }
.status.falha, .status.enviando { --s: var(--st-falha); }
.status.enviando { --s: var(--st-enviada); }
.vazio { text-align: center; color: var(--texto-suave); padding: 28px 12px; border: 1px dashed var(--borda); border-radius: var(--raio); }

/* linha do tempo */
.linha-tempo { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--borda); }
.linha-tempo li { display: flex; gap: 10px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--borda); }
.linha-tempo .hora { color: var(--texto-suave); min-width: 64px; font-variant-numeric: tabular-nums; }

/* filtros do painel */
.filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.filtros select { padding: 10px 12px; }
.alternar { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }

/* ---------- player de áudio ---------- */
.player { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 8px 12px 8px 8px; border-radius: 999px; background: var(--fundo); border: 1px solid var(--borda); max-width: 420px; }
.player-botao { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--marca-forte); color: #fff; display: flex; align-items: center; justify-content: center; }
.player-botao svg { width: 18px; height: 18px; }
.player-onda { flex: 1; height: 32px; display: flex; align-items: center; gap: 2px; cursor: pointer; min-width: 120px; }
.player-onda span { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--texto-suave) 55%, transparent); }
.player-onda span.tocado { background: var(--marca); }
.player-tempo { font-size: 13px; color: var(--texto-suave); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* ---------- fotos ---------- */
.foto-caixa { display: block; margin: 10px 0 4px; padding: 0; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--fundo); overflow: hidden; max-width: 420px; cursor: zoom-in; }
.foto-msg { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #000; }
.foto-previa { width: 100%; max-height: 360px; object-fit: contain; border-radius: var(--raio-p); background: #000; }
.visualizador { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; cursor: zoom-out; }
.visualizador img { max-width: 100%; max-height: calc(100% - 110px); object-fit: contain; }
.visualizador-legenda { color: #fff; font-size: clamp(22px, 4vw, 48px); font-weight: 800; text-align: center; }
.visualizador-rodape { color: #94A3B8; font-size: 14px; }

.documento { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--fundo); max-width: 480px; }
.documento-ext { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #B91C1C; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.documento-nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .conteudo a { color: var(--marca); word-break: break-all; }

/* ---------- caixa de mensagem ---------- */
.destinatarios { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-remover { border: 0; background: transparent; color: inherit; padding: 0 0 0 4px; display: inline-flex; opacity: .8; }
.chip-remover svg { width: 14px; height: 14px; }
.btn-chip { border: 1px dashed var(--borda); background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; color: var(--texto-suave); }
.btn-chip svg { width: 14px; height: 14px; }
.escolha-destinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.escolha-destinos button { --c: var(--marca); display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: var(--raio-p); border: 2px solid var(--borda); background: var(--fundo); font-size: 14px; font-weight: 600; text-align: left; }
.escolha-destinos button .bola { width: 24px; height: 24px; border-radius: 50%; background: var(--c); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.escolha-destinos button .bola svg { width: 14px; height: 14px; }
.escolha-destinos button.ativo { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.compositor { display: flex; flex-direction: column; gap: 10px; }
.ferramentas { display: flex; gap: 8px; flex-wrap: wrap; }
.ferramentas .btn { flex: 1; min-width: 150px; }
.painel-mic { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--fundo); }
.painel-mic.gravando { border-color: rgba(239, 68, 68, .6); background: rgba(239, 68, 68, .08); }
.painel-mic .estado-mic { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.ponto-gravando { width: 12px; height: 12px; border-radius: 50%; background: var(--erro); animation: pisca 1s infinite; }
.painel-mic audio { width: 100%; }

/* ---------- avisos flutuantes ---------- */
#avisos { position: fixed; z-index: 60; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(520px, calc(100% - 32px)); }
.aviso { background: var(--superficie-2); border: 1px solid var(--borda); border-left: 5px solid var(--marca); border-radius: var(--raio-p); padding: 12px 14px; box-shadow: var(--sombra); font-size: 15px; animation: sobe .2s ease; cursor: pointer; }
.aviso.erro { border-left-color: var(--erro); }
.aviso.ok { border-left-color: var(--ok); }
@keyframes sobe { from { transform: translateY(10px); opacity: 0; } }

/* alerta urgente em tela cheia */
#urgente { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(60, 0, 0, .78); backdrop-filter: blur(3px); }
.urgente-caixa { width: min(560px, 100%); background: var(--superficie); border: 2px solid var(--urgente); border-radius: 22px; padding: 22px; box-shadow: 0 0 0 6px rgba(220, 38, 38, .25), var(--sombra); animation: pulsa 1.4s infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 14px rgba(220, 38, 38, .08), var(--sombra); } }
.urgente-caixa .faixa { display: flex; align-items: center; gap: 10px; color: #FCA5A5; font-weight: 800; letter-spacing: .08em; font-size: 15px; }
.urgente-caixa .faixa svg { width: 26px; height: 26px; }
.urgente-caixa .texto { font-size: 22px; font-weight: 600; margin: 14px 0; white-space: pre-wrap; word-break: break-word; }

/* login */
.tela-login { max-width: 420px; margin: 6vh auto 0; }
.tela-login .logo-grande { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; text-align: center; }
.tela-login .logo-grande img { width: 84px; height: 84px; }
.tela-login .logo-grande h1 { margin: 0; font-size: 24px; font-family: var(--fonte-titulo); }
.tela-login .logo-grande p { margin: 0; color: var(--texto-suave); font-size: 14px; }

.passos { padding-left: 22px; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }

/* lista de áreas para escolher onde servir */
.lista-areas { display: flex; flex-direction: column; gap: 8px; }
.item-area { --c: var(--marca); width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-height: 64px;
  border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie); text-align: left; }
.item-area:hover { background: var(--superficie-2); }
.item-area.atual { border-color: var(--c); }
.item-area.sub { margin-left: 26px; width: calc(100% - 26px); min-height: 56px; border-left: 3px solid var(--c); }
.item-area-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; }
.item-area.sub .item-area-ico { width: 34px; height: 34px; }
.item-area-ico svg { width: 22px; height: 22px; }
.item-area-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-area-texto b { font-size: 16.5px; }
.item-area-texto small { font-size: 13px; color: var(--texto-suave); }
.item-area-seta { display: flex; color: var(--texto-suave); transition: transform .15s; }
.item-area-seta svg { width: 20px; height: 20px; }
.item-area-seta.aberta { transform: rotate(90deg); }

/* nomes salvos no aparelho */
.lista-pessoas { display: flex; flex-direction: column; gap: 10px; }
.pessoa { display: flex; align-items: center; gap: 8px; }
.pessoa-botao { flex: 1; display: flex; align-items: center; gap: 14px; padding: 14px; min-height: 72px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); text-align: left; }
.pessoa-botao:hover { background: var(--superficie-2); }
.pessoa-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--marca), #6366F1); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pessoa-nome { display: flex; flex-direction: column; font-size: 18px; font-weight: 700; }
.pessoa-nome small { font-size: 13px; font-weight: 500; color: var(--texto-suave); }
.pessoa.bloqueada .pessoa-avatar { background: var(--st-enviada); }
.pessoa.bloqueada small { color: #FCD34D; }
a.usuario-chip { text-decoration: none; color: var(--texto); }

/* tabela admin */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela th { color: var(--texto-suave); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.rolagem-x { overflow-x: auto; }
.destinos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.destinos-grade label { display: flex; gap: 8px; align-items: center; font-size: 14px; padding: 6px 8px; border-radius: 8px; background: var(--fundo); }
.online-lista { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- campos adicionais ---------- */
input[type=email], input[type=tel], input[type=search], input[type=url] {
  width: 100%; padding: 12px 14px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--fundo); outline: none;
}
input[type=color] { width: 64px; height: 46px; padding: 4px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--fundo); }
.senha-linha { flex-wrap: nowrap; }
.senha-linha .btn { flex: none; min-height: 46px; }
.codigo { font-family: ui-monospace, Consolas, monospace; font-size: 17px; letter-spacing: .06em; background: var(--fundo); padding: 2px 8px; border-radius: 6px; user-select: all; }
.destinos-grade.desabilitado { opacity: .4; pointer-events: none; }

/* ---------- faixas (modo de teste / presença) ---------- */
#faixas { display: flex; flex-direction: column; gap: 8px; max-width: 980px; margin: 0 auto; padding: 0 16px; }
#faixas:empty { display: none; }
#faixas .faixa { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--raio-p); font-size: 14px; margin-top: 10px; }
#faixas .faixa svg { width: 20px; height: 20px; flex: none; }
#faixas .faixa.teste { background: rgba(245, 158, 11, .16); border: 1px solid rgba(245, 158, 11, .6); color: #FDE68A; }
#faixas .faixa.fora { background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .55); color: #FECACA; }
#faixas .faixa .btn { flex: none; }
.faixa-teste-caixa { padding: 12px 14px; margin: 12px 0; border-radius: var(--raio-p); background: rgba(245, 158, 11, .12); border: 1px dashed rgba(245, 158, 11, .7); color: #FDE68A; }
.faixa-teste-caixa p { margin: 4px 0 10px; }
.segmentado.tres { grid-template-columns: repeat(3, 1fr); }
.segmentado.tres button { font-size: 14px; padding: 6px; }

/* ---------- painel administrativo ---------- */
.abas-admin { margin-bottom: 16px; padding-bottom: 4px; scrollbar-width: thin; }
.abas-admin button { display: inline-flex; align-items: center; gap: 6px; }
.abas-admin button svg { width: 16px; height: 16px; }
.painel-admin .destaques { margin-bottom: 14px; }
a.destaque { text-decoration: none; color: var(--texto); }
.grade-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.grade-admin .cartao + .cartao { margin-top: 0; }
.barras { display: flex; flex-direction: column; gap: 8px; }
.barra-linha { display: grid; grid-template-columns: minmax(90px, 40%) 1fr 32px; gap: 8px; align-items: center; font-size: 14px; }
.barra-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilho { height: 10px; border-radius: 999px; background: var(--fundo); overflow: hidden; }
.barra-valor { display: block; height: 100%; border-radius: 999px; background: var(--gradiente-marca); }
.barra-linha b { text-align: right; }
.lista-simples { display: flex; flex-direction: column; gap: 6px; }
.item-simples { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--raio-p); border: 1px solid var(--borda);
  background: var(--fundo); color: var(--texto); text-decoration: none; text-align: left; font: inherit; }
button.item-simples:hover, a.item-simples:hover { background: var(--superficie-2); }
.item-simples.coluna { flex-direction: column; align-items: stretch; gap: 4px; }
.item-simples.inativo { opacity: .55; }
.item-simples .item-area-ico { width: 34px; height: 34px; }
.coluna-selos { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.filtros-admin { display: grid; grid-template-columns: 2fr repeat(3, 1fr) auto; gap: 8px; margin-bottom: 14px; align-items: center; }
@media (max-width: 760px) { .filtros-admin { grid-template-columns: 1fr 1fr; } .filtros-admin input[type=search] { grid-column: 1 / -1; } .filtros-admin .btn { grid-column: 1 / -1; } }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 12px; }
.dep-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.dep-linha { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; background: var(--fundo); border: 1px solid var(--borda); }
.dep-linha label { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.dep-linha input[type=text] { padding: 8px 10px; font-size: 14px; }
.mapa { height: 340px; border-radius: var(--raio-p); overflow: hidden; border: 1px solid var(--borda); background: var(--fundo); margin-bottom: 8px; }
@media (max-width: 520px) { .mapa { height: 280px; } }
.leaflet-container { font-family: var(--fonte); }
.detalhes { margin-top: 12px; font-size: 14px; }
.detalhes summary { cursor: pointer; color: var(--texto-suave); font-weight: 600; }
.detalhes ul { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.detalhes-json { display: block; white-space: pre-wrap; word-break: break-word; font-size: 12px; color: var(--texto-suave); background: var(--superficie); padding: 6px 8px; border-radius: 8px; }

/* ---------- conta, comunicados e textos ---------- */
.dado-linha { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 15px; }
.dado-linha span:last-child { text-align: right; word-break: break-word; }
.cartao-linha { padding: 10px 12px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--fundo); }
.comunicado { padding: 14px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); border-left: 5px solid var(--marca); }
.comunicado.novo { border-left-color: var(--ciano); }
.comunicado.urgente { border-left-color: var(--urgente); }
.comunicado-texto { white-space: pre-wrap; word-break: break-word; font-size: 16px; margin: 8px 0; }
.texto-legal .cartao p, .texto-legal li { line-height: 1.55; font-size: 15px; }
.texto-legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.formulario-conta .destinos-grade label { font-size: 14px; }
.painel-admin .destaques { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.painel-admin .destaque { padding: 12px; }
.painel-admin .destaque b { font-size: 22px; }
@media (max-width: 520px) { #faixas .faixa { font-size: 13px; padding: 8px 10px; margin-top: 8px; } }
.destaque-comunicado { border-color: var(--ciano); box-shadow: 0 0 0 1px rgba(34, 211, 238, .35); }
.cartao-info .btn { margin-top: 8px; }
.google-caixa { display: flex; justify-content: center; min-height: 44px; margin: 4px 0 2px; }
.separador-ou { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--texto-suave); font-size: 13px; }
.separador-ou::before, .separador-ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
input[readonly] { opacity: .75; }