/* ==========================================================================
   Ochat — estilos
   Paleta do portal: grafite #161616 + laranja #ff9800, DM Sans.
   Escuro é o padrão; claro em html[data-theme="claro"] (como no portal).
   A barra de atividades fica escura nos dois temas, como o cabeçalho do portal.
   ========================================================================== */

:root {
  --fundo: #161616;
  --painel: #1b1b1b;
  --painel-2: #202020;
  --superficie: #2a2a2a;
  --superficie-2: #333;
  --linha: rgba(255, 255, 255, 0.09);
  --linha-forte: rgba(255, 255, 255, 0.16);
  --texto: #f2f2f2;
  --texto-2: #c4c4c4;
  --texto-3: #8d8d8d;
  --laranja: #ff9800;
  --laranja-forte: #ec8800;
  --laranja-claro: #ffa424;
  --destaque-rgb: 255 152 0;
  --laranja-suave: rgb(var(--destaque-rgb) / 0.12);
  --balao-meu: #3a2a12;
  --balao-meu-borda: rgb(var(--destaque-rgb) / 0.28);
  --balao-outro: #242424;
  --sombra: 0 18px 50px rgba(0, 0, 0, 0.45);
  --atividade: #121212;
  --painel-largura: 340px;
  --detalhes-largura: 340px;
  --raio: 14px;
  color-scheme: dark;
}

html[data-theme="claro"] {
  --fundo: #f0f0f0;
  --painel: #ffffff;
  --painel-2: #f7f7f7;
  --superficie: #ececec;
  --superficie-2: #e2e2e2;
  --linha: rgba(44, 44, 44, 0.1);
  --linha-forte: rgba(44, 44, 44, 0.18);
  --texto: #2c2c2c;
  --texto-2: #4f4f4f;
  --texto-3: #767676;
  --laranja-suave: rgb(var(--destaque-rgb) / 0.12);
  --balao-meu: #ffead0;
  --balao-meu-borda: rgb(var(--destaque-rgb) / 0.3);
  --balao-outro: #ffffff;
  --sombra: 0 18px 50px rgba(0, 0, 0, 0.16);
  color-scheme: light;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--laranja); }
[hidden] { display: none !important; }
i[data-lucide], svg.lucide { width: 20px; height: 20px; flex-shrink: 0; }

.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0;
  color: var(--laranja); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--laranja); }

.botao-laranja, .botao-contorno {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 12px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.botao-laranja { background: var(--laranja); color: #171717; border: 1px solid var(--laranja); }
.botao-laranja:hover { transform: translateY(-1px); background: var(--laranja-claro); box-shadow: 0 10px 22px rgb(var(--destaque-rgb) / .22); }
.botao-laranja:disabled { opacity: .5; transform: none; box-shadow: none; cursor: default; }
.botao-contorno { border: 1px solid var(--linha-forte); color: var(--texto); }
.botao-contorno:hover { border-color: var(--laranja); color: var(--laranja); }
.botao-perigo { color: #ff6b6b; }
.botao-perigo:hover { border-color: #ff6b6b; color: #ff6b6b; }
.botao-laranja svg, .botao-contorno svg { width: 18px; height: 18px; }

.icone-botao {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  color: var(--texto-2); transition: background .15s, color .15s;
}
.icone-botao:hover { background: var(--superficie); color: var(--laranja); }
.link-sutil { color: var(--texto-3); font-size: 13px; text-decoration: underline; }
.link-sutil:hover { color: var(--laranja); }

.campo { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo input, .campo textarea, .campo select, .busca input {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px;
  background: var(--painel-2); border: 1px solid var(--linha-forte); color: var(--texto);
  font-size: 15px; font-weight: 500; outline: none; transition: border-color .15s;
}
.campo textarea { min-height: 80px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .busca input:focus { border-color: var(--laranja); }
.campo small { font-weight: 500; color: var(--texto-3); }

/* ---- Avatar --------------------------------------------------------------- */
.avatar {
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cor, var(--laranja)); color: #161616;
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em; overflow: visible;
}
.avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar.grupo { border-radius: 14px; background: var(--laranja-suave); color: var(--laranja); }
.avatar.grupo svg { width: 22px; height: 22px; }
.avatar.pequeno { width: 32px; height: 32px; font-size: 12px; }
.avatar.grande { width: 96px; height: 96px; font-size: 32px; }
.avatar.grande.grupo svg { width: 44px; height: 44px; }
.avatar .online {
  position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%;
  background: #3ddc84; border: 2.5px solid var(--painel);
}

/* ==========================================================================
   LOGIN
   ========================================================================== */
.tela-login {
  min-height: 100%; display: grid; place-items: center; padding: 24px; overflow: auto;
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 26px 26px, #161616;
  color: #f2f2f2;
}
.login-cartao {
  width: min(420px, 100%); padding: 32px 28px; border-radius: 22px;
  background: #1b1b1b; border: 1px solid rgb(var(--destaque-rgb) / .25); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  text-align: center;
}
.login-icone { width: 76px; height: 76px; border-radius: 20px; margin-bottom: 16px; box-shadow: 0 0 40px rgb(var(--destaque-rgb) / .25); }
.login-cartao .eyebrow { justify-content: center; }
.login-titulo { margin: 8px 0 6px; font-size: 40px; font-weight: 800; letter-spacing: -0.04em; }
.login-texto { margin: 0 0 22px; color: #c4c4c4; line-height: 1.55; }
.login-form { display: grid; gap: 14px; text-align: left; }
.login-form .campo input { background: #232323; border-color: rgba(255, 255, 255, .14); color: #f2f2f2; }
.login-form .botao-laranja { margin-top: 4px; }
.login-form .link-sutil { justify-self: center; }
.login-erro { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 90, 90, .12); color: #ff8a8a; font-size: 14px; }
.login-erro.ok { background: rgba(61, 220, 132, .12); color: #6be3a0; }
.login-sso {
  margin: 0 0 18px; padding: 18px 16px 16px; border-radius: 18px; text-align: left;
  background: rgb(var(--destaque-rgb) / .09); border: 1.5px solid rgb(var(--destaque-rgb) / .55);
  box-shadow: 0 0 0 4px rgb(var(--destaque-rgb) / .06);
}
.login-sso-cabeca { display: flex; gap: 12px; align-items: flex-start; }
.login-sso-cabeca img { width: 44px; height: 44px; flex-shrink: 0; object-fit: cover; object-position: 0 center; border-radius: 11px; }
.login-sso h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.login-sso-cabeca p { margin: 0; color: #c4c4c4; font-size: 13.5px; line-height: 1.5; }
.login-sso-cabeca p b { color: var(--laranja); }
.login-passos { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; gap: 9px; }
.login-passos li { display: flex; gap: 10px; align-items: flex-start; color: #dadada; font-size: 13.5px; line-height: 1.45; }
.login-passos li > b {
  flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--laranja); color: #161616; font-size: 12px; font-weight: 800;
}
.login-sso-botao { width: 100%; min-height: 52px; font-size: 16px; animation: login-pulso 2.4s ease-in-out 1s 3; }
@keyframes login-pulso { 50% { box-shadow: 0 0 0 7px rgb(var(--destaque-rgb) / .22); } }
.login-sso-criar { width: 100%; margin-top: 10px; color: #f2f2f2; text-decoration: none; }
.login-alternativa { text-align: left; }
.login-alternativa summary {
  cursor: pointer; list-style: none; text-align: center; padding: 8px; border-radius: 10px;
  color: #a8a8a8; font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.login-alternativa summary::-webkit-details-marker { display: none; }
.login-alternativa summary:hover { color: #f2f2f2; }
.login-alternativa[open] summary { margin-bottom: 10px; }
.login-portal { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: #8d8d8d; font-size: 13px; }
.login-portal img { width: 28px; height: 28px; object-fit: cover; object-position: 0 center; border-radius: 7px; }
.login-portal b { color: var(--laranja); }

/* ==========================================================================
   ESTRUTURA: atividade | painel | chat | detalhes
   ========================================================================== */
.ochat {
  display: grid; height: 100%; height: 100dvh;
  grid-template-columns: 68px var(--painel-largura) minmax(0, 1fr);
  transition: grid-template-columns .22s ease;
}
.ochat.com-detalhes { grid-template-columns: 68px var(--painel-largura) minmax(0, 1fr) var(--detalhes-largura); }
.ochat.painel-fechado { grid-template-columns: 68px 0 minmax(0, 1fr); }
.ochat.painel-fechado.com-detalhes { grid-template-columns: 68px 0 minmax(0, 1fr) var(--detalhes-largura); }
.ochat.arrastando { transition: none; user-select: none; }

/* ---- Barra de atividades -------------------------------------------------- */
.atividade {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 12px 0; background: var(--atividade); border-right: 1px solid rgba(255, 255, 255, .06);
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none; z-index: 5;
}
.atividade-grupo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.atividade-logo img { display: block; width: 42px; height: 42px; border-radius: 13px; margin-bottom: 8px; transition: transform .2s; }
.atividade-logo:hover img { transform: scale(1.06); }
.atividade-sep { width: 28px; height: 1px; margin: 4px 0; background: rgba(255, 255, 255, .1); }
.atividade-botao {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  color: #9b9b9b; transition: background .15s, color .15s, border-radius .2s;
}
.atividade-botao svg { width: 22px; height: 22px; }
.atividade-botao:hover { background: #222; color: #f2f2f2; border-radius: 12px; }
.atividade-botao.ativo { background: rgb(var(--destaque-rgb) / .14); color: var(--laranja); }
.atividade-botao.ativo::before {
  content: ""; position: absolute; left: -11px; top: 10px; bottom: 10px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--laranja);
}
.selo {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--laranja); color: #161616;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--atividade);
}
.atividade-perfil { margin-top: 6px; border-radius: 50%; transition: transform .2s; }
.atividade-perfil .avatar { width: 40px; height: 40px; font-size: 13px; }
.atividade-perfil .avatar .online { border-color: var(--atividade); }
.atividade-perfil:hover { transform: scale(1.06); }
.atividade-perfil.ativo .avatar { box-shadow: 0 0 0 2px var(--atividade), 0 0 0 4px var(--laranja); }

/* Dica ao passar o mouse (como no Discord) */
@media (hover: hover) and (min-width: 769px) {
  .atividade-botao[title]:hover::after {
    content: attr(title); position: fixed; left: 76px; transform: translateY(0);
    padding: 6px 10px; border-radius: 8px; background: #000; color: #fff;
    font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; z-index: 50;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  }
}

/* ---- Painel lateral ------------------------------------------------------- */
.painel {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--painel); border-right: 1px solid var(--linha); overflow: hidden;
}
.painel-fechado .painel { border-right: 0; }
.painel-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 64px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--linha);
}
.painel-cabeca h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.painel-acoes { display: flex; gap: 2px; }
.painel-corpo { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 24px; }
.painel-alca {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 3;
}
.painel-alca:hover, .arrastando .painel-alca { background: linear-gradient(90deg, transparent 2px, var(--laranja) 2px, var(--laranja) 4px, transparent 4px); }

.busca { position: relative; display: block; margin: 2px 4px 12px; }
.busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--texto-3); }
.busca input { min-height: 40px; padding-left: 38px; font-size: 14px; background: var(--superficie); border-color: transparent; }

/* Quebram linha quando o painel é estreito (nada some pela borda nem encavala). */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 10px; }
.filtro {
  flex-shrink: 0; /* não encolhe: a fileira desliza para o lado em vez de encavalar */
  padding: 6px 12px; border-radius: 999px; background: var(--superficie); color: var(--texto-2);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.filtro.ativo { background: var(--laranja-suave); color: var(--laranja); }

.grupo-titulo {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 8px 6px; color: var(--texto-3); font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}

/* Item de conversa */
.item-conversa {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 12px;
  text-align: left; transition: background .12s;
}
.item-conversa:hover { background: var(--superficie); }
.item-conversa.ativo { background: var(--laranja-suave); }
.item-conversa-meio { flex: 1; min-width: 0; }
.item-conversa-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.item-conversa-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.item-conversa-hora { flex-shrink: 0; color: var(--texto-3); font-size: 12px; }
.item-conversa-previa {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
  color: var(--texto-3); font-size: 13.5px;
}
.item-conversa-previa .digitando-texto { color: var(--laranja); font-weight: 600; }
.item-conversa.tem-nova .item-conversa-hora { color: var(--laranja); font-weight: 700; }
.item-conversa.tem-nova .item-conversa-previa { color: var(--texto-2); }
.contador {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--laranja); color: #161616; font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center;
}

/* Cartões do portal (apps, jogos, projetos, ferramentas) */
.item-portal {
  display: flex; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--linha);
  background: var(--painel-2); margin-bottom: 8px; transition: border-color .15s, transform .15s;
}
.item-portal:hover { border-color: rgb(var(--destaque-rgb) / .45); transform: translateY(-1px); }
.item-portal-icone {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--laranja-suave); color: var(--laranja);
}
.item-portal-meio { flex: 1; min-width: 0; }
.item-portal h3 { margin: 0; font-size: 15px; font-weight: 800; }
.item-portal p { margin: 3px 0 8px; color: var(--texto-3); font-size: 13px; line-height: 1.4; }
.item-portal-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-botao {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--linha-forte); font-size: 12.5px; font-weight: 700; color: var(--texto-2); text-decoration: none;
}
.mini-botao svg { width: 14px; height: 14px; }
.mini-botao:hover { border-color: var(--laranja); color: var(--laranja); }
.mini-botao.laranja { border-color: rgb(var(--destaque-rgb) / .5); color: var(--laranja); }

.dica-painel {
  margin: 4px 4px 12px; padding: 10px 12px; border-radius: 12px; background: var(--laranja-suave);
  color: var(--texto-2); font-size: 13px; line-height: 1.45;
}
.dica-painel b { color: var(--laranja); }

.vazio-painel { padding: 30px 16px; text-align: center; color: var(--texto-3); font-size: 14px; line-height: 1.5; }
.vazio-painel svg { width: 38px; height: 38px; color: var(--laranja); margin-bottom: 8px; }

/* Faixa "recurso do plano" */
.faixa-plano {
  display: flex; gap: 10px; align-items: flex-start; margin: 4px 4px 12px; padding: 12px; border-radius: 12px;
  border: 1px dashed rgb(var(--destaque-rgb) / .5); color: var(--texto-2); font-size: 13px; line-height: 1.45;
}
.faixa-plano svg { color: var(--laranja); margin-top: 1px; }
.faixa-plano a { font-weight: 700; }

/* ---- Nuvem: grade estilo Instagram ---------------------------------------- */
.grade-midia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 12px; overflow: hidden; }
.grade-midia button { position: relative; aspect-ratio: 1; background: var(--superficie); overflow: hidden; }
.grade-midia img, .grade-midia video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.grade-midia button:hover img, .grade-midia button:hover video { transform: scale(1.05); }
.grade-midia .marca-video { position: absolute; top: 6px; right: 6px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.grade-midia .marca-video svg { width: 18px; height: 18px; }
.nuvem-uso { margin: 0 4px 12px; color: var(--texto-3); font-size: 12.5px; }
.nuvem-uso b { color: var(--texto-2); }
.barra-uso { height: 6px; margin-top: 6px; border-radius: 99px; background: var(--superficie); overflow: hidden; }
.barra-uso span { display: block; height: 100%; background: var(--laranja); }

.lista-arquivos { display: grid; gap: 6px; }
.item-arquivo {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--painel-2);
  border: 1px solid var(--linha); text-decoration: none; color: inherit; text-align: left; width: 100%;
}
.item-arquivo:hover { border-color: rgb(var(--destaque-rgb) / .45); }
.item-arquivo-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--laranja-suave); color: var(--laranja); flex-shrink: 0; }
.item-arquivo-meio { flex: 1; min-width: 0; }
.item-arquivo strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.item-arquivo small { color: var(--texto-3); font-size: 12px; }

/* ==========================================================================
   CHAT
   ========================================================================== */
.chat {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background:
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--fundo);
}
html[data-theme="claro"] .chat { background: radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px) 0 0 / 22px 22px, var(--fundo); }

.chat-vazio {
  margin: auto; max-width: 440px; padding: 24px; text-align: center; color: var(--texto-3); line-height: 1.6;
}
.chat-vazio img { width: 108px; height: 108px; border-radius: 28px; opacity: .95; }
.chat-vazio h2 { margin: 14px 0 6px; color: var(--texto); font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
.chat-vazio p { margin: 0 0 20px; font-size: 15px; }

.conversa { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }

.chat-cabeca {
  display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 10px 12px 10px 16px;
  background: var(--painel); border-bottom: 1px solid var(--linha); z-index: 2;
}
.chat-quem { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; padding: 2px; border-radius: 12px; }
.chat-quem .avatar { width: 42px; height: 42px; }
.chat-quem-texto { display: grid; min-width: 0; }
.chat-quem strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 800; }
.chat-quem small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-3); font-size: 13px; }
.chat-quem small.digitando-agora { color: var(--laranja); }
.chat-cabeca-acoes { display: flex; gap: 2px; }

.chat-busca {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 18px;
  background: var(--painel); border-bottom: 1px solid var(--linha); color: var(--texto-3);
}
.chat-busca input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; font-size: 15px; color: var(--texto); }
.chat-busca span { font-size: 13px; white-space: nowrap; }

.mensagens {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 6% 10px; scroll-behavior: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.carregar-mais { align-self: center; margin: 4px 0 12px; }

.dia {
  align-self: center; margin: 12px 0 8px;
  padding: 5px 12px; border-radius: 9px; background: var(--painel); border: 1px solid var(--linha);
  color: var(--texto-2); font-size: 12.5px; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.sistema { align-self: center; margin: 6px 0; padding: 5px 12px; border-radius: 9px; background: var(--laranja-suave); color: var(--texto-2); font-size: 12.5px; }

.msg { display: flex; gap: 8px; align-items: flex-end; max-width: min(78%, 640px); margin-top: 1px; position: relative; }
.msg.minha { align-self: flex-end; flex-direction: row-reverse; }
.msg.primeira { margin-top: 10px; }
.msg .avatar { width: 30px; height: 30px; font-size: 11px; }
.msg .espaco-avatar { width: 30px; flex-shrink: 0; }

.balao {
  position: relative; min-width: 72px; padding: 7px 10px 6px; border-radius: 14px;
  background: var(--balao-outro); border: 1px solid var(--linha);
  font-size: 15px; line-height: 1.42; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.msg.minha .balao { background: var(--balao-meu); border-color: var(--balao-meu-borda); }
.msg.primeira:not(.minha) .balao { border-top-left-radius: 4px; }
.msg.primeira.minha .balao { border-top-right-radius: 4px; }
.balao a { color: var(--laranja); }
.balao-autor { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 800; }
.balao-texto { white-space: normal; }
.balao-rodape {
  float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -3px 12px;
  color: var(--texto-3); font-size: 11px; line-height: 1; user-select: none;
}
.balao-rodape svg { width: 15px; height: 15px; }
.balao-rodape .lida { color: #4fc3f7; }
.balao.apagada { color: var(--texto-3); font-style: italic; }
.balao.apagada svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.destaque-busca { background: rgba(255, 200, 0, .45); color: inherit; border-radius: 3px; }
.msg.piscar .balao { animation: piscar 1.4s ease; }
@keyframes piscar { 0%, 60% { box-shadow: 0 0 0 3px var(--laranja); } 100% { box-shadow: none; } }

.citacao {
  display: block; width: 100%; margin: 2px 0 6px; padding: 6px 10px; border-radius: 9px; text-align: left;
  background: rgba(0, 0, 0, .18); border-left: 3px solid var(--laranja); font-size: 13px; color: var(--texto-2);
}
html[data-theme="claro"] .citacao { background: rgba(0, 0, 0, .05); }
.citacao b { display: block; color: var(--laranja); font-size: 12.5px; }
.citacao span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.balao-midia { margin: -3px -6px 4px; border-radius: 10px; overflow: hidden; background: #000; }
.balao-midia img, .balao-midia video { display: block; width: 100%; max-width: 360px; max-height: 420px; object-fit: cover; cursor: zoom-in; }
.balao-midia video { cursor: default; }
.balao audio { display: block; width: 260px; max-width: 100%; margin: 2px 0 4px; }
/* Player de áudio (js/audio-msg.js) */
.audio-msg { display: flex; align-items: center; gap: 10px; width: 270px; max-width: 100%; margin: 2px 0 2px; }
.audio-play {
  flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--laranja); color: #161616; transition: transform .15s;
}
.audio-play:hover { transform: scale(1.06); }
.audio-play svg { width: 18px; height: 18px; fill: currentColor; }
.audio-msg:not(.tocando) .audio-play svg { margin-left: 2px; }
.audio-meio { flex: 1; min-width: 0; display: grid; gap: 3px; }
.audio-onda { display: flex; align-items: center; gap: 2px; height: 28px; cursor: pointer; touch-action: manipulation; }
.audio-onda i { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; opacity: .32; transition: opacity .12s, background-color .12s; }
.audio-onda i.aceso { opacity: 1; background: var(--laranja); }
.audio-tempo { font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.audio-vel {
  flex-shrink: 0; min-width: 38px; padding: 4px 7px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: rgba(0, 0, 0, .2); color: var(--texto-2);
}
html[data-theme="claro"] .audio-vel { background: rgba(0, 0, 0, .06); }
.audio-vel.ativo, .audio-msg.tocando .audio-vel { color: var(--laranja); }
.balao .item-arquivo { color: inherit; margin: 0 -4px 4px; min-width: 220px; background: rgba(0, 0, 0, .15); }
html[data-theme="claro"] .balao .item-arquivo { background: rgba(0, 0, 0, .04); }

.card-portal {
  display: flex; gap: 12px; align-items: center; margin: 0 -4px 4px; padding: 12px; min-width: 240px;
  border-radius: 12px; background: rgba(0, 0, 0, .18); border: 1px solid rgb(var(--destaque-rgb) / .35); text-decoration: none; color: inherit;
}
html[data-theme="claro"] .card-portal { background: #fff; }
.card-portal:hover { border-color: var(--laranja); }
.card-portal-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--laranja-suave); color: var(--laranja); flex-shrink: 0; }
.card-portal-icone svg { width: 24px; height: 24px; }
.card-portal-texto { display: block; min-width: 0; color: var(--texto); }
.card-portal small { display: block; color: var(--laranja); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.card-portal strong { display: block; font-size: 15px; }
.card-portal em { display: block; font-style: normal; color: var(--texto-3); font-size: 12.5px; line-height: 1.35; }

.reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 6px 2px; }
.msg.minha + .reacoes, .reacoes.minha { align-self: flex-end; }
.reacao {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--painel); border: 1px solid var(--linha-forte); font-size: 13px;
}
.reacao.minha { border-color: var(--laranja); background: var(--laranja-suave); }
.reacao b { font-size: 11.5px; color: var(--texto-2); }

/* Ações que aparecem ao passar o mouse na mensagem */
.msg-acoes {
  position: absolute; top: -14px; display: none; gap: 2px; padding: 3px; border-radius: 10px;
  background: var(--painel); border: 1px solid var(--linha-forte); box-shadow: var(--sombra); z-index: 3;
}
.msg:not(.minha) .msg-acoes { right: -8px; transform: translateX(100%); top: 0; }
.msg.minha .msg-acoes { left: -8px; transform: translateX(-100%); top: 0; }
.msg:hover .msg-acoes, .msg.mostrar-acoes .msg-acoes { display: flex; }
.msg-acoes button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--texto-2); font-size: 16px; }
.msg-acoes button:hover { background: var(--superficie); color: var(--laranja); }
.msg-acoes svg { width: 17px; height: 17px; }

.menu-flutuante {
  position: fixed; z-index: 60; min-width: 190px; padding: 6px; border-radius: 14px;
  background: var(--painel); border: 1px solid var(--linha-forte); box-shadow: var(--sombra);
}
.menu-flutuante .linha-reacoes { display: flex; gap: 2px; padding: 4px 4px 8px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.menu-flutuante .linha-reacoes button { width: 36px; height: 36px; border-radius: 10px; font-size: 20px; transition: transform .12s; }
.menu-flutuante .linha-reacoes button:hover { background: var(--superficie); transform: scale(1.15); }
.menu-flutuante > button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px;
  font-size: 14px; font-weight: 600; text-align: left;
}
.menu-flutuante > button:hover { background: var(--superficie); color: var(--laranja); }
.menu-flutuante > button svg { width: 18px; height: 18px; }

.digitando-balao { display: inline-flex; gap: 4px; padding: 12px 14px; }
.digitando-balao span { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); animation: pulinho 1.2s infinite; }
.digitando-balao span:nth-child(2) { animation-delay: .15s; }
.digitando-balao span:nth-child(3) { animation-delay: .3s; }
@keyframes pulinho { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.descer {
  position: absolute; right: 22px; bottom: 92px; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--painel); border: 1px solid var(--linha-forte); color: var(--texto-2);
  box-shadow: var(--sombra); z-index: 4;
}
.descer:hover { color: var(--laranja); }
.descer .selo { top: -6px; right: -4px; border-color: var(--painel); }

.entrar-tema {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 14px;
  background: var(--painel); border-top: 1px solid var(--linha); color: var(--texto-2);
}
.entrar-tema p { margin: 0; }

/* ---- Compositor ----------------------------------------------------------- */
.compositor { padding: 8px 12px 12px; background: var(--painel); border-top: 1px solid var(--linha); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.compositor-linha { display: flex; align-items: flex-end; gap: 6px; }
.compositor textarea {
  flex: 1; min-height: 44px; max-height: 160px; padding: 11px 14px; border-radius: 22px; resize: none;
  background: var(--superficie); border: 1px solid transparent; outline: none; font-size: 15px; line-height: 1.4;
}
.compositor textarea:focus { border-color: rgb(var(--destaque-rgb) / .45); }
.compositor .icone-botao { width: 44px; height: 44px; border-radius: 50%; }
.enviar {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--laranja); color: #161616; transition: transform .15s, background .15s;
}
.enviar:hover { background: var(--laranja-claro); transform: scale(1.05); }
.enviar svg { width: 20px; height: 20px; }

.compositor-resposta {
  display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; padding: 8px 8px 8px 12px; border-radius: 10px;
  background: var(--superficie); border-left: 3px solid var(--laranja);
}
.compositor-resposta div { flex: 1; min-width: 0; font-size: 13px; }
.compositor-resposta b { display: block; color: var(--laranja); }
.compositor-resposta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }

.anexar { position: relative; }
.menu-anexo {
  position: absolute; bottom: 52px; left: 0; z-index: 10; min-width: 230px; padding: 6px; border-radius: 14px;
  background: var(--painel); border: 1px solid var(--linha-forte); box-shadow: var(--sombra);
}
.menu-anexo button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; text-align: left; }
.menu-anexo button:hover { background: var(--superficie); color: var(--laranja); }
.menu-anexo svg { color: var(--laranja); }
.menu-anexo button.bloqueado { opacity: .6; }
.menu-anexo button.bloqueado::after { content: "plano"; margin-left: auto; padding: 1px 7px; border-radius: 99px; border: 1px solid rgb(var(--destaque-rgb) / .5); color: var(--laranja); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

.envios { display: grid; gap: 6px; margin: 0 4px; }
.envios:not(:empty) { margin-bottom: 8px; }
.envio { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--superficie); font-size: 13px; }
.envio span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envio .barra-uso { width: 90px; margin: 0; }

.gravando { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; }
.gravando-ponto { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; animation: piscaRec 1s infinite; }
@keyframes piscaRec { 50% { opacity: .2; } }
.gravando-texto { flex: 1; color: var(--texto-3); font-size: 14px; }
#gravandoTempo { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- Detalhes ------------------------------------------------------------- */
.detalhes { display: flex; flex-direction: column; min-width: 0; background: var(--painel); border-left: 1px solid var(--linha); overflow: hidden; }
.detalhes-topo { padding: 18px 10px 10px; text-align: center; }
.detalhes-topo h3 { margin: 12px 0 2px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.detalhes-topo p { margin: 0; color: var(--texto-3); font-size: 14px; line-height: 1.45; }
.detalhes-acoes { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.abas { display: flex; gap: 4px; margin: 10px 4px; padding: 4px; border-radius: 12px; background: var(--superficie); }
.aba { flex: 1; padding: 7px 6px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--texto-2); }
.aba.ativa { background: var(--painel); color: var(--laranja); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }

.item-pessoa { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 12px; text-align: left; }
.item-pessoa:hover { background: var(--superficie); }
.item-pessoa-meio { flex: 1; min-width: 0; }
.item-pessoa strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.item-pessoa small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-3); font-size: 12.5px; }
.etiqueta { padding: 2px 8px; border-radius: 99px; background: var(--laranja-suave); color: var(--laranja); font-size: 11px; font-weight: 800; }
.item-pessoa .marcar { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linha-forte); display: grid; place-items: center; color: #161616; }
.item-pessoa.marcado .marcar { background: var(--laranja); border-color: var(--laranja); }
.item-pessoa .marcar svg { width: 14px; height: 14px; }

/* ==========================================================================
   MODAL, VISOR E AVISOS
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.modal-caixa {
  position: relative; width: min(480px, 100%); max-height: min(720px, calc(100dvh - 32px)); overflow: auto;
  padding: 22px; border-radius: 20px; background: var(--painel); border: 1px solid var(--linha-forte); box-shadow: var(--sombra);
  animation: surgir .22s cubic-bezier(.22, .75, .3, 1);
}
@keyframes surgir { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-caixa h2 { margin: 0 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.modal-caixa > p { margin: 0 0 16px; color: var(--texto-3); font-size: 14px; line-height: 1.5; }
.modal-fechar { position: absolute; top: 14px; right: 14px; }
.modal-form { display: grid; gap: 14px; }
.modal-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.escolha-tipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.escolha-tipo button {
  display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--linha-forte);
  font-size: 13px; font-weight: 700; color: var(--texto-2);
}
.escolha-tipo button svg { width: 24px; height: 24px; color: var(--laranja); }
.escolha-tipo button.ativo { border-color: var(--laranja); background: var(--laranja-suave); color: var(--texto); }
.lista-modal { max-height: 300px; overflow: auto; margin: 0 -8px; padding: 0 8px; }
.icones-escolha { display: flex; flex-wrap: wrap; gap: 6px; }
.icones-escolha button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--linha-forte); color: var(--texto-2); }
.icones-escolha button.ativo { border-color: var(--laranja); color: var(--laranja); background: var(--laranja-suave); }
.chave { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); font-size: 14px; }
.chave small { display: block; color: var(--texto-3); font-size: 12.5px; }
.chave input { width: 20px; height: 20px; accent-color: var(--laranja); }

.plano-modal { text-align: center; }
.plano-modal .plano-icone { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--laranja-suave); color: var(--laranja); margin-bottom: 12px; }
.plano-modal .plano-icone svg { width: 30px; height: 30px; }
.plano-modal ul { margin: 0 0 18px; padding: 0; list-style: none; text-align: left; display: grid; gap: 8px; }
.plano-modal li { display: flex; gap: 10px; color: var(--texto-2); font-size: 14px; }
.plano-modal li svg { color: var(--laranja); width: 18px; height: 18px; }
.plano-modal .modal-botoes { justify-content: center; }

.visor { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0, 0, 0, .92); }
.visor-conteudo { max-width: 94vw; max-height: 88vh; display: grid; place-items: center; gap: 10px; }
.visor-conteudo img, .visor-conteudo video { max-width: 94vw; max-height: 82vh; border-radius: 8px; }
.visor-legenda { color: #ddd; font-size: 14px; text-align: center; }
.visor-legenda a { margin-left: 10px; }
.visor-fechar { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }

.avisos { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.aviso {
  padding: 11px 16px; border-radius: 12px; background: #000; color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35); border: 1px solid rgb(var(--destaque-rgb) / .35); animation: surgir .2s ease;
}

.so-celular { display: none !important; }

/* Painel de Dúvidas do portal (padrao-app.js): abre ao lado da barra */
@media (min-width: 769px) {
  /* ao lado do botão "?" da barra (o seletor com body vence o estilo da pilha do portal, que ancora à direita) */
  body .om-duvidas-painel { left: 80px !important; right: auto !important; bottom: 16px !important; }
}

/* ==========================================================================
   CELULAR: barra de atividades embaixo, uma tela por vez (como no WhatsApp)
   ========================================================================== */
@media (max-width: 768px) {
  .so-celular { display: inline-grid !important; }
  .ochat, .ochat.com-detalhes, .ochat.painel-fechado, .ochat.painel-fechado.com-detalhes {
    grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto;
  }
  .atividade {
    grid-row: 2; flex-direction: row; justify-content: flex-start; gap: 0; padding: 6px 6px max(6px, env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid rgba(255, 255, 255, .06); overflow-x: auto; overflow-y: hidden;
  }
  .atividade-grupo { flex-direction: row; gap: 2px; }
  .atividade-base { margin-left: auto; }
  .atividade-logo, .atividade-sep, #botaoAjuda, #botaoTema { display: none; }
  .atividade-grupo, .atividade-grupo .atividade-botao { flex: 1; }
  .atividade-grupo:first-child { flex: 5; }
  .atividade-base { flex: 3; }
  .atividade-botao { width: auto; min-width: 40px; height: 44px; }
  .atividade-botao.ativo::before { left: 10px; right: 10px; top: auto; bottom: -6px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .atividade-perfil { margin: 0 4px 0 2px; }
  .atividade-perfil .avatar { width: 34px; height: 34px; }
  .painel, .chat, .detalhes { grid-row: 1; grid-column: 1; }
  .painel { border-right: 0; }
  .painel-alca { display: none; }
  .ochat.painel-fechado .painel { display: flex; }
  .ochat .chat { display: none; }
  .ochat.com-conversa .chat { display: flex; }
  .ochat.com-conversa .painel, .ochat.com-conversa .atividade { display: none; }
  .ochat.com-conversa { grid-template-rows: minmax(0, 1fr); }
  .detalhes { z-index: 20; }
  .mensagens { padding: 12px 10px 8px; }
  .msg { max-width: 88%; }
  .msg-acoes { display: none !important; }
  .chat-cabeca { padding-left: 4px; }
  .descer { bottom: 84px; right: 14px; }
  .modal { place-items: end center; padding: 0; }
  .modal-caixa { width: 100%; border-radius: 20px 20px 0 0; max-height: 92dvh; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .om-duvidas-painel { bottom: 76px !important; }
}

/* Coluna da mensagem: balão + reações embaixo */
.msg { align-items: flex-start; }
.msg-coluna { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.msg.minha .msg-coluna { align-items: flex-end; }
.msg-coluna .reacoes { margin: -4px 8px 4px; position: relative; z-index: 1; }
@media (max-width: 768px) { .so-desktop { display: none !important; } }

/* ==========================================================================
   LINHAS E DETALHES DO PORTAL
   Fundo quadriculado (44 px, como o .portal-shell), rótulos com traço,
   cartões com brilho da cor de destaque no canto e borda que acende,
   numeração "01, 02…" (como o .card-index do portal).
   ========================================================================== */
.chat {
  background:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--fundo);
}
html[data-theme="claro"] .chat {
  background:
    linear-gradient(rgba(44, 44, 44, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(44, 44, 44, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--fundo);
}
.tela-login {
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 44px 44px,
    #161616;
}
.painel-cabeca h2 { position: relative; padding-bottom: 6px; }
.painel-cabeca h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 2px; background: var(--laranja); }
.grupo-titulo span { display: inline-flex; align-items: center; gap: 8px; }
.grupo-titulo span::before { content: ""; width: 14px; height: 2px; background: var(--laranja); }
.titulo-icone { width: 14px !important; height: 14px !important; color: var(--laranja); }
.grupo-titulo span:has(.titulo-icone)::before { display: none; }

.item-portal, .projeto, .post, .card-portal, .enquete, .sorteio, .resultado, .modelos button, .login-cartao, .modal-caixa {
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(var(--destaque-rgb) / .08), transparent 60%),
    var(--painel-2);
}
.login-cartao { background: radial-gradient(120% 90% at 100% 0%, rgb(var(--destaque-rgb) / .1), transparent 60%), #1b1b1b; }
.modal-caixa { background: radial-gradient(120% 70% at 100% 0%, rgb(var(--destaque-rgb) / .07), transparent 55%), var(--painel); }
html[data-theme="claro"] :is(.item-portal, .projeto, .post, .enquete, .sorteio, .resultado, .modelos button) {
  border-color: rgb(var(--destaque-rgb) / .25);
  background:
    radial-gradient(110% 85% at 100% 0%, rgb(var(--destaque-rgb) / .16), rgb(var(--destaque-rgb) / .04) 45%, transparent 70%),
    linear-gradient(160deg, #ffffff 0%, #f6f6f6 55%, #ececec 100%);
}
.item-portal:hover, .projeto:hover, .post:hover, .resultado:hover { border-color: var(--laranja); }
.card-indice { display: block; color: var(--laranja); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.item-portal .card-indice { margin-bottom: 2px; }

/* Ícone do portal na barra (a engrenagem com a cruz, recorte do logo) */
/* Logo do portal em duas peças: a engrenagem gira, a cruz fica de pé. */
.logo-portal { width: 30px; height: 30px; overflow: visible; }
.logo-engrenagem { fill: #ff9800; transform-box: view-box; transform-origin: 50px 50px; transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.logo-cruz { fill: var(--atividade); }
.atividade-portal:hover .logo-engrenagem, .atividade-portal.ativo .logo-engrenagem { transform: rotate(45deg); }
/* O logo do Ochat (topo da barra) abre o tutorial guiado; o portal é o primeiro botão, logo abaixo. */
button.atividade-logo { background: none; border: 0; padding: 0; cursor: pointer; }
/* Painel do portal: "Abrir o portal" em destaque, no topo. */
.portal-topo > div { flex: 1; min-width: 0; }
.portal-topo .mini-botao { flex: none; }
.portal-topo { display: flex; align-items: center; gap: 12px; margin: 4px 4px 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--linha); background: radial-gradient(120% 90% at 100% 0%, rgb(var(--destaque-rgb) / .12), transparent 60%), var(--painel-2); }
.portal-topo img { width: 44px; height: 44px; object-fit: cover; object-position: 0 center; border-radius: 12px; }
.portal-topo strong { display: block; margin-top: 4px; font-size: 15px; }

/* ==========================================================================
   COMPONENTES NOVOS
   ========================================================================== */
.largo { width: 100%; margin-top: 10px; }
.botoes-linha { display: flex; gap: 8px; margin: 0 4px 12px; flex-wrap: wrap; }
.botoes-linha > * { flex: 1; }
.ajuda-campo { display: block; color: var(--texto-3); font-size: 12.5px; line-height: 1.45; }
.girando { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.avatar.mini { width: 20px; height: 20px; font-size: 9px; vertical-align: -5px; margin-right: 2px; }
.avatar.mini .online { display: none; }
.abas-rolam { overflow-x: auto; scrollbar-width: none; }
.abas-rolam .aba { flex: 0 0 auto; padding: 7px 12px; }
.chip-num { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--laranja-suave); color: var(--laranja); font-size: 11px; font-weight: 800; }
.chip-num.alerta { background: #ff5c5c; color: #fff; }
.chip-texto { padding: 1px 7px; border-radius: 99px; background: var(--laranja-suave); color: var(--laranja); font-size: 11px; font-weight: 700; }

/* Formulários em linha (tarefas, escala, estudo) */
.form-linha { display: grid; gap: 8px; margin: 4px 4px 12px; }
.form-linha-2 { display: flex; gap: 8px; }
.form-linha-2 > * { min-width: 0; }
.form-linha input, .form-linha select, .form-linha textarea {
  flex: 1 1 0; min-width: 0; width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px; background: var(--superficie);
  border: 1px solid transparent; outline: none; font-size: 14px; color: var(--texto);
}
.form-linha textarea { resize: vertical; }
.form-linha input:focus, .form-linha select:focus, .form-linha textarea:focus { border-color: rgb(var(--destaque-rgb) / .5); }
.form-linha .botao-laranja, .form-linha .botao-contorno { min-height: 40px; padding: 0 14px; flex: 0 0 auto; }
.form-linha input[type="date"] { flex: 0 1 140px; width: auto; }

/* Barra de ferramentas do grupo (abaixo do cabeçalho) */
.barra-ferramentas {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; overflow-x: auto; scrollbar-width: none;
  background: var(--painel); border-bottom: 1px solid var(--linha);
}
.barra-modelo { display: inline-flex; align-items: center; gap: 6px; padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--linha); color: var(--texto-3); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.barra-modelo svg { width: 15px; height: 15px; color: var(--laranja); }
.chip-ferramenta {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--linha-forte); color: var(--texto-2); font-size: 13px; font-weight: 700; transition: border-color .15s, color .15s;
}
.chip-ferramenta svg { width: 16px; height: 16px; color: var(--laranja); }
.chip-ferramenta:hover { border-color: var(--laranja); color: var(--texto); }

/* Tarefas (grupo e Crono) */
.tarefa { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: 12px; }
.tarefa:hover { background: var(--superficie); }
.caixa { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; border-radius: 7px; border: 2px solid var(--linha-forte); color: transparent; transition: background .15s, border-color .15s; }
.caixa svg { width: 14px; height: 14px; }
.caixa:hover { border-color: var(--laranja); }
.tarefa.feita .caixa { background: var(--laranja); border-color: var(--laranja); color: #161616; }
.tarefa-meio { flex: 1; min-width: 0; }
.tarefa-meio strong { display: block; font-size: 14.5px; font-weight: 700; }
.tarefa.feita .tarefa-meio strong { text-decoration: line-through; color: var(--texto-3); }
.tarefa-meio small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; color: var(--texto-3); font-size: 12.5px; }
.tarefa-projeto { display: block; color: var(--laranja); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.prazo { display: inline-flex; align-items: center; gap: 4px; }
.prazo svg { width: 13px; height: 13px; }
.prazo.atrasado { color: #ff6b6b; font-weight: 700; }
.prazo.perto { color: var(--laranja); font-weight: 700; }
.alertas { margin: 0 0 8px; padding: 4px; border-radius: 14px; border: 1px solid rgba(255, 92, 92, .35); background: rgba(255, 92, 92, .05); }

.projeto { margin: 0 0 8px; border-radius: 14px; border: 1px solid var(--linha); overflow: hidden; transition: border-color .15s; }
.projeto-cabeca { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; text-align: left; }
.projeto-meio { flex: 1; min-width: 0; display: grid; gap: 4px; }
.projeto-meio strong { font-size: 15px; }
.projeto-meio small { color: var(--texto-3); font-size: 12.5px; }
.projeto-seta { color: var(--texto-3); transition: transform .2s; }
.projeto.aberto .projeto-seta { transform: rotate(180deg); }
.projeto-corpo { padding: 0 8px 12px; border-top: 1px solid var(--linha); }
.projeto-corpo .item-portal-acoes { padding: 0 4px; }
/* Listas rápidas do Crono (painel Tarefas) */
.grupo-titulo > .mini-botao { margin-left: auto; }
.form-quadro { display: block; width: 100%; height: min(72vh, 760px); border: 0; border-radius: 14px; background: #161616; margin: 10px 0 4px; }
.card-lista { display: block; width: min(420px, 100%); padding: 0; cursor: default; text-align: left; }
.card-lista-cabeca { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linha); }
.lista-viva { padding: 4px 6px 2px; }
.lista-viva .tarefa { padding: 7px 6px; }
.lista-viva .form-linha { margin: 4px 4px 8px; }
.lista-viva .ajuda-campo { margin: 6px 8px; }
.lista-lembrete { display: flex; align-items: center; gap: 8px; color: var(--texto-3); font-size: 12.5px; }
.lista-lembrete svg { width: 14px; height: 14px; flex: 0 0 auto; }
.lista-lembrete span { flex: 0 0 auto; }
.lista-lembrete input { flex: 1; min-width: 0; }
.fase { font-weight: 700; }
.fase-doing { color: #4fc3f7; } .fase-review { color: #ffd54f; } .fase-done { color: #3ddc84; }

/* Escala */
.escala-dia { margin: 0 4px 10px; border-radius: 12px; border: 1px solid var(--linha); overflow: hidden; }
.escala-data { padding: 7px 12px; background: var(--laranja-suave); color: var(--laranja); font-size: 12.5px; text-transform: capitalize; }
.escala-item { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; font-size: 14px; border-top: 1px solid var(--linha); }
.escala-item:first-of-type { border-top: 0; }
.escala-item.minha { background: rgb(var(--destaque-rgb) / .06); }
.escala-funcao { min-width: 84px; color: var(--texto-3); font-size: 12.5px; font-weight: 700; }
.escala-pessoa { flex: 1; font-weight: 600; }
.escala-item .icone-botao { width: 30px; height: 30px; }

/* Estudo bíblico */
.estudo-texto { margin: 0 4px 10px; }
.estudo-cabeca { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.estudo-cabeca strong { font-size: 15px; }
.versos { padding: 12px 14px; border-radius: 14px; background: var(--painel-2); border: 1px solid var(--linha); line-height: 1.75; font-size: 15px; }
.verso { display: inline; padding: 1px 2px; border-radius: 4px; text-align: left; transition: background .12s; }
.verso:hover { background: var(--laranja-suave); }
.verso.marcado { background: rgb(var(--destaque-rgb) / .3); }
.verso sup, .visor-texto sup { color: var(--laranja); font-size: 10.5px; font-weight: 800; margin-right: 3px; }
.notas { display: grid; gap: 6px; margin: 0 4px 10px; }
.nota { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); font-size: 13.5px; }
.nota > div { flex: 1; }
.nota p { margin: 3px 0 0; color: var(--texto-2); line-height: 1.45; white-space: pre-wrap; }
.nota-ref { color: var(--laranja); font-size: 11.5px; font-weight: 700; }

/* Enquete, formulário e desafio */
.enquete { min-width: 260px; margin: -2px -4px 4px; padding: 12px; border-radius: 12px; border: 1px solid rgb(var(--destaque-rgb) / .35); }
.enquete-rotulo { display: flex; align-items: center; gap: 6px; color: var(--laranja); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.enquete-rotulo svg { width: 14px; height: 14px; }
.enquete-pergunta { display: block; margin: 6px 0 10px; font-size: 15.5px; }
.opcao {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 9px 12px; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--linha-forte); text-align: left; font-size: 14px; background: var(--painel);
}
.opcao:hover:not(:disabled) { border-color: var(--laranja); }
.opcao-barra { position: absolute; inset: 0 auto 0 0; background: var(--laranja-suave); transition: width .4s ease; }
.opcao > :not(.opcao-barra) { position: relative; }
.opcao-marca { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linha-forte); color: #161616; flex-shrink: 0; }
.opcao-marca svg { width: 11px; height: 11px; }
.opcao.marcada .opcao-marca { background: var(--laranja); border-color: var(--laranja); }
.opcao-texto { flex: 1; }
.opcao b { color: var(--texto-2); font-size: 12.5px; }
.opcao.certa { border-color: #3ddc84; }
.opcao.certa .opcao-barra { background: rgba(61, 220, 132, .18); }
.opcao.errada { border-color: #ff6b6b; }
.opcao.errada .opcao-barra { background: rgba(255, 107, 107, .15); }
.opcao:disabled { cursor: default; }
.enquete-pe { display: block; margin-top: 8px; color: var(--texto-3); font-size: 12px; }
.enquete-resumo { margin: 0 4px 10px; }
.enquete-resumo .enquete { margin: 0; }
.ranking-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.ranking-item strong { flex: 1; font-size: 14.5px; }
.ranking-pos { width: 30px; color: var(--texto-3); font-weight: 800; }
.ranking-pos.top { color: var(--laranja); }
.ranking-pontos { color: var(--texto-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.bloco-pergunta { display: grid; gap: 8px; margin: 0; padding: 12px; border-radius: 12px; border: 1px solid var(--linha); }
.linha-opcao { display: flex; align-items: center; gap: 8px; }
.linha-opcao input[data-campo] { flex: 1; min-height: 40px; padding: 8px 12px; border-radius: 10px; background: var(--painel-2); border: 1px solid var(--linha-forte); outline: none; color: var(--texto); }
.linha-opcao input[type="radio"] { width: 18px; height: 18px; accent-color: #3ddc84; }
.ponto-opcao { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--linha-forte); }

/* Modelos de grupo e ferramentas */
.modelos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.modelos button { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linha-forte); text-align: left; }
.modelos button svg { width: 20px; height: 20px; color: var(--laranja); }
.modelos button b { font-size: 13.5px; }
.modelos button small { color: var(--texto-3); font-size: 11.5px; line-height: 1.35; font-weight: 500; }
.modelos button.ativo { border-color: var(--laranja); box-shadow: 0 0 0 1px var(--laranja) inset; }
.escolha-ferramentas { display: flex; flex-wrap: wrap; gap: 6px; }
.escolha-ferramentas label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--linha-forte); font-size: 13px; font-weight: 700; cursor: pointer; }
.escolha-ferramentas label.ativo { border-color: var(--laranja); background: var(--laranja-suave); color: var(--texto); }
.escolha-ferramentas input { display: none; }
.escolha-ferramentas svg { width: 15px; height: 15px; color: var(--laranja); }

/* Paleta de cor de destaque */
.paleta { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 6px 8px; }
.amostra { width: 34px; height: 34px; border-radius: 50%; background: var(--amostra); box-shadow: 0 0 0 2px var(--painel), 0 0 0 3px transparent; transition: transform .15s, box-shadow .15s; }
.amostra:hover { transform: scale(1.1); }
.amostra.ativa { box-shadow: 0 0 0 3px var(--painel), 0 0 0 5px var(--amostra); }

/* Busca */
.resultado { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--linha); text-align: left; }
.resultado-meio { flex: 1; min-width: 0; }
.resultado-meio strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.resultado-meio small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--texto-3); font-size: 12.5px; line-height: 1.4; }
.visor-texto { max-height: 52vh; overflow: auto; margin: 0; padding: 14px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); font-size: 14.5px; line-height: 1.7; }
.visor-texto p { margin: 0 0 6px; }
.visor-texto.cifra, .visor-texto.letra { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.visor-texto.cifra { color: var(--laranja); }
.visor-texto.curto { max-height: 220px; margin-top: 10px; }
.visor-texto + .visor-texto { margin-top: 8px; }

/* Cards novos nas mensagens */
button.card-portal { width: 100%; text-align: left; }
.card-versiculo { margin: 6px 0 0; padding: 6px 0 0 10px; border-left: 3px solid var(--laranja); color: var(--texto-2); font-size: 13.5px; line-height: 1.55; font-style: italic; }
.card-barra { display: block; width: 100%; margin: 8px 0 4px; }
.card-prazo { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--laranja); font-size: 12px; font-weight: 700; }
.card-prazo.atrasado { color: #ff6b6b; }
.card-prazo svg { width: 13px; height: 13px; }

/* Postagens */
.novo-post { display: flex; gap: 10px; margin: 4px 4px 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--linha); background: var(--painel-2); }
.novo-post-meio { flex: 1; display: grid; gap: 8px; }
.novo-post textarea { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: var(--superficie); outline: none; resize: vertical; font-size: 14px; }
.novo-post-acoes { display: flex; justify-content: space-between; align-items: center; }
.novo-post-acoes .botao-laranja { min-height: 36px; padding: 0 14px; }
.post-previa { position: relative; }
.post-previa img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; }
.post-previa .icone-botao { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .55); color: #fff; }
.post { margin: 0 4px 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--linha); }
.post header { display: flex; align-items: center; gap: 10px; }
.post header span { flex: 1; display: grid; }
.post header small { color: var(--texto-3); font-size: 12px; }
.post p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; }
.post-foto { display: block; width: 100%; max-height: 420px; object-fit: cover; margin-top: 10px; border-radius: 12px; }
.post footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.curtir { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; color: var(--texto-2); font-weight: 700; font-size: 13px; }
.curtir:hover { background: var(--superficie); }
.curtir.ativo { color: #ff5c7a; }
.curtir.ativo svg { fill: currentColor; }

@media (max-width: 768px) {
  .modelos { grid-template-columns: 1fr 1fr; }
  .form-linha input[type="date"] { flex-basis: 128px; }
}

/* Roleta e dados (js/jogos.js) */
.sorteio { min-width: 250px; margin: -2px -4px 4px; padding: 12px; border-radius: 12px; border: 1px solid rgb(var(--destaque-rgb) / .35); text-align: center; }
.sorteio .enquete-rotulo { justify-content: center; }
.roda-caixa { position: relative; width: min(230px, 62vw); margin: 4px auto 10px; }
.roda { display: block; width: 100%; height: auto; transform: rotate(var(--giro)); }
.sorteio.vivo .roda { animation: girar-roda var(--revelar) cubic-bezier(.12, .7, .14, 1) both; }
@keyframes girar-roda { from { transform: rotate(0deg); } to { transform: rotate(var(--giro)); } }
.roda-ponteiro {
  position: absolute; z-index: 1; top: -6px; left: 50%; width: 0; height: 0; transform: translateX(-50%);
  border: 11px solid transparent; border-top: 18px solid var(--texto); border-bottom: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4));
}
.fatia { stroke: var(--painel); stroke-width: 1.2; }
.fatia.f0 { fill: rgb(var(--destaque-rgb) / .95); }
.fatia.f1 { fill: var(--superficie-2); }
.fatia.f2 { fill: rgb(var(--destaque-rgb) / .6); }
.fatia.f3 { fill: var(--superficie); }
.fatia.f4 { fill: rgb(var(--destaque-rgb) / .3); }
.fatia-texto { fill: var(--texto); font-weight: 700; dominant-baseline: middle; }
.fatia.f0 + .fatia-texto, .fatia.f2 + .fatia-texto { fill: #161616; }
.roda-miolo { fill: var(--painel); stroke: rgb(var(--destaque-rgb) / .8); stroke-width: 3; }
.sorteio-resultado { font-size: 15px; color: var(--texto-2); }
.sorteio-resultado b { color: var(--laranja); font-size: 17px; }
.sorteio.vivo .sorteio-resultado { animation: revelar .4s ease var(--revelar) both; }
@keyframes revelar { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.sorteio-ir { margin-top: 10px; }
.enquete .sorteio-ir { margin-top: 8px; }

.dados-linha { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 12px; }
.dado {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px;
  background: var(--texto); color: #161616; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 10px rgba(0, 0, 0, .3);
}
.dado.d6 { grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 7px; }
.dado.d6 i { width: 9px; height: 9px; border-radius: 50%; }
.dado.d6 i.pip { background: #161616; }
.dado.poli { background: var(--laranja); font-size: 21px; }
.dado.poli b { font-weight: 800; }
.dado.d4 { clip-path: polygon(50% 4%, 97% 92%, 3% 92%); border-radius: 0; padding-top: 14px; font-size: 17px; }
.dado.d8, .dado.d10 { clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); border-radius: 0; }
.dado.d12 { clip-path: polygon(50% 2%, 96% 36%, 79% 96%, 21% 96%, 4% 36%); border-radius: 0; padding-top: 4px; }
.dado.d20 { clip-path: polygon(50% 1%, 94% 25%, 94% 75%, 50% 99%, 6% 75%, 6% 25%); border-radius: 0; }
.sorteio.vivo .dado { animation: rolar-dado var(--revelar) cubic-bezier(.2, .8, .3, 1) both; }
@keyframes rolar-dado {
  0% { transform: translateY(-26px) rotate(-200deg) scale(.6); opacity: 0; }
  60% { transform: translateY(4px) rotate(20deg) scale(1.05); opacity: 1; }
  80% { transform: translateY(-3px) rotate(-6deg); }
  100% { transform: none; }
}

.escolha-tipo.duas { grid-template-columns: repeat(2, 1fr); }
.atalhos-sorteio { display: flex; flex-wrap: wrap; gap: 6px; }
.dica-sorteio { color: var(--laranja); font-size: 12px; }
.faces { display: flex; flex-wrap: wrap; gap: 6px; }
.faces button { min-width: 46px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linha-forte); font-size: 13px; font-weight: 700; color: var(--texto-2); }
.faces button.ativo { border-color: var(--laranja); background: var(--laranja-suave); color: var(--texto); }

@media (prefers-reduced-motion: reduce) {
  .sorteio.vivo .roda, .sorteio.vivo .dado, .sorteio.vivo .sorteio-resultado { animation-duration: 1ms; animation-delay: 0ms; }
}

/* Música: acordes, progressões e transpor (js/musica.js) */
.diagrama-violao { width: 108px; height: auto; flex-shrink: 0; }
.diagrama-violao.mini { width: 74px; }
.dv-corda, .dv-traste { stroke: var(--texto-3); stroke-width: 1; }
.dv-pestana-fixa { fill: var(--texto-2); }
.dv-dedo { fill: var(--laranja); }
.dv-solta { fill: none; stroke: var(--texto-2); stroke-width: 1.4; }
.dv-x { fill: var(--texto-2); font-size: 13px; font-weight: 700; text-anchor: middle; }
.dv-casa { fill: var(--texto-2); font-size: 9px; font-weight: 700; }
.diagrama-teclado { width: 100%; max-width: 230px; height: auto; }
.diagrama-teclado.mini { max-width: 150px; }
.tecla.branca { fill: #f4f4f4; stroke: #8d8d8d; stroke-width: .6; }
.tecla.preta { fill: #1d1d1d; }
.tecla.ligada { fill: var(--laranja); }
.tecla-baixo { fill: none; stroke: #161616; stroke-width: 1.2; }
.tecla.preta + .tecla-baixo { stroke: #f4f4f4; }

.acorde-bloco { padding: 12px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); }
.acorde-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.acorde-cab strong { font-size: 22px; color: var(--laranja); }
.acorde-cab small { flex: 1; color: var(--texto-2); font-size: 12.5px; }
.acorde-desenhos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.acorde-desenhos .diagrama-teclado { flex: 1; min-width: 160px; }
.acorde-sem { display: block; color: var(--texto-3); font-size: 12.5px; }
.card-acorde { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.card-prog { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.card-prog b, .prog-montada button, .graus button {
  padding: 4px 9px; border-radius: 8px; background: var(--laranja-suave); border: 1px solid rgb(var(--destaque-rgb) / .35);
  color: var(--texto); font-size: 13px; font-weight: 700;
}
.graus, .prog-montada { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.graus button, .prog-montada button:not(.icone-botao) { display: grid; justify-items: center; min-width: 50px; padding: 5px 9px; }
.graus button { background: var(--painel); border-color: var(--linha-forte); }
.graus button:hover { border-color: var(--laranja); }
.graus small, .prog-montada small { color: var(--texto-3); font-size: 10.5px; font-weight: 700; }
.prog-montada { min-height: 44px; padding: 8px; border-radius: 12px; border: 1px dashed var(--linha-forte); }
.prog-visor { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.prog-item { display: grid; justify-items: center; gap: 2px; padding: 8px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); }
.prog-item small { color: var(--texto-3); font-size: 11px; font-weight: 700; }
.prog-item strong { color: var(--laranja); }

.transpor { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.transpor-rotulo { color: var(--texto-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.transpor-tom { min-width: 44px; text-align: center; color: var(--laranja); font-size: 17px; }
.visor-texto.cifra.rica { color: var(--texto); }
.cifra-acorde { color: var(--laranja); font-weight: 800; cursor: pointer; }
.cifra-acorde:hover { text-decoration: underline; }
.visor-acorde { margin-bottom: 8px; }

/* Ferramenta Ensaio (js/ensaio.js) */
.ensaio-datas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 4px 10px; }
.ensaio-datas button { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--linha-forte); font-size: 12.5px; font-weight: 700; color: var(--texto-2); }
.ensaio-datas button.ativo { border-color: var(--laranja); background: var(--laranja-suave); color: var(--texto); }
.ensaio-nova-data { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px dashed var(--linha-forte); color: var(--texto-2); cursor: pointer; overflow: hidden; }
.ensaio-nova-data svg { width: 16px; height: 16px; pointer-events: none; }
.ensaio-nova-data input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ensaio-lista { display: grid; gap: 6px; margin: 0 4px 10px; }
.ensaio-musica { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); }
.ensaio-num { color: var(--texto-3); font-weight: 800; font-size: 12px; }
.ensaio-meio { flex: 1; min-width: 0; }
.ensaio-titulo { display: flex; align-items: center; gap: 6px; max-width: 100%; text-align: left; font-size: 14.5px; color: var(--texto); }
.ensaio-titulo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ensaio-titulo svg { width: 14px; height: 14px; color: var(--laranja); flex-shrink: 0; }
.ensaio-titulo:not(:disabled):hover b { text-decoration: underline; }
.ensaio-titulo:disabled { cursor: default; }
.ensaio-meio small { display: block; color: var(--texto-3); font-size: 12px; }
.ensaio-controles { display: flex; gap: 6px; margin-top: 6px; }
.ensaio-tom { display: inline-flex; align-items: center; border: 1px solid rgb(var(--destaque-rgb) / .4); border-radius: 9px; overflow: hidden; }
.ensaio-tom button { display: grid; place-items: center; width: 26px; height: 26px; color: var(--texto-2); }
.ensaio-tom button:hover { background: var(--laranja-suave); color: var(--texto); }
.ensaio-tom svg { width: 13px; height: 13px; }
.ensaio-tom b, .ensaio-tom-fixo { min-width: 34px; text-align: center; color: var(--laranja); font-size: 14px; }
.ensaio-bpm { display: inline-flex; align-items: center; gap: 4px; padding: 0 9px; height: 28px; border-radius: 9px; border: 1px solid var(--linha-forte); color: var(--texto-2); font-size: 12.5px; font-weight: 700; }
.ensaio-bpm svg { width: 13px; height: 13px; }
.ensaio-bpm.tocando { border-color: var(--laranja); color: var(--laranja); }
.ensaio-ordem { display: grid; grid-auto-flow: row; }
.ensaio-ordem .icone-botao { width: 26px; height: 22px; }
.ensaio-ordem svg { width: 15px; height: 15px; }
.ensaio-busca { margin: 0; }
.ensaio-achado { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; }
.ensaio-achado:hover { background: var(--laranja-suave); }
.ensaio-achado svg { width: 16px; height: 16px; color: var(--laranja); flex-shrink: 0; }
.ensaio-achado span { display: grid; min-width: 0; }
.ensaio-achado b { font-size: 13.5px; }
.ensaio-achado small { color: var(--texto-3); font-size: 12px; }
.metronomo { margin: 14px 4px 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--painel-2); }
.metro-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.metro-cab svg { width: 15px; height: 15px; color: var(--laranja); }
.metro-cab small { color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metro-linha { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.metro-linha input { width: 58px; padding: 6px; border-radius: 8px; border: 1px solid var(--linha-forte); background: var(--painel); color: var(--texto); font: inherit; font-weight: 800; text-align: center; }
.metro-un { color: var(--texto-3); font-size: 12px; margin-right: 2px; }
.metro-luzes { display: flex; gap: 5px; margin: 0 auto 0 6px; }
.metro-luzes i { width: 10px; height: 10px; border-radius: 50%; background: var(--superficie-2); transition: background .05s; }
.metro-luzes i.acesa { background: var(--laranja); }
.metro-luzes i[data-luz="0"].acesa { box-shadow: 0 0 0 3px rgb(var(--destaque-rgb) / .3); }
.metro-tocar { padding: 7px 12px; }
.metronomo .link-sutil { margin-top: 8px; }
.card-repertorio { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--texto-2); }
.card-repertorio li { margin: 2px 0; }
.card-repertorio li span { margin-right: 6px; }
.card-repertorio b { color: var(--laranja); font-size: 12px; }

/* Fixar, silenciar e encaminhar (js/organizar.js) */
.marca-conversa { width: 14px; height: 14px; flex-shrink: 0; color: var(--texto-3); }
.contador.mudo { background: var(--superficie-2); color: var(--texto-2); }
.menu-flutuante .menu-titulo { padding: 6px 10px 8px; color: var(--texto-3); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--linha); margin-bottom: 4px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-botao.ligado { border-color: rgb(var(--destaque-rgb) / .5); color: var(--laranja); }
.barra-fixadas { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--linha); background: var(--painel); }
.fixadas-marcas { display: grid; gap: 3px; }
.fixadas-marcas i { display: block; width: 3px; height: 9px; border-radius: 2px; background: var(--superficie-2); }
.fixadas-marcas i.atual { background: var(--laranja); }
.fixada-texto { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-align: left; font-size: 13.5px; color: var(--texto-2); }
.fixada-texto svg { width: 15px; height: 15px; color: var(--laranja); flex-shrink: 0; }
.fixada-texto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixada-texto b { color: var(--texto); }
.balao-encaminhada { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; color: var(--texto-3); font-size: 12px; font-style: italic; }
.balao-encaminhada svg { width: 13px; height: 13px; }
.previa-encaminhar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); color: var(--texto-2); font-size: 13.5px; }
.previa-encaminhar svg { width: 16px; height: 16px; color: var(--laranja); flex-shrink: 0; }
.previa-encaminhar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-encaminhar { display: grid; gap: 2px; max-height: 46vh; overflow: auto; }
.item-encaminhar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; font-weight: 600; }
.item-encaminhar:hover { background: var(--laranja-suave); }
.item-encaminhar.marcado { background: var(--laranja-suave); }
.item-encaminhar input { accent-color: var(--laranja); width: 17px; height: 17px; }

/* Avisos de mensagem nova (js/avisos.js) */
#avisosPilha { position: fixed; z-index: 90; top: 14px; right: 14px; width: min(360px, calc(100vw - 28px)); display: grid; gap: 8px; }
.aviso-cartao {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border-radius: 14px;
  background: var(--painel); border: 1px solid rgb(var(--destaque-rgb) / .45); box-shadow: var(--sombra);
  animation: aviso-entra .28s cubic-bezier(.2, .8, .3, 1) both; transition: opacity .3s, transform .3s;
}
.aviso-cartao.saindo { opacity: 0; transform: translateX(20px); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
.aviso-cartao-meio { display: grid; flex: 1; min-width: 0; text-align: left; }
.aviso-cartao-meio b { font-size: 14px; }
.aviso-cartao-meio span { color: var(--texto-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avisos-config { display: grid; gap: 10px; padding: 0 4px; }
.sons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sons button { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--linha-forte); font-size: 12.5px; font-weight: 700; color: var(--texto-2); }
.sons button svg { width: 20px; height: 20px; color: var(--laranja); }
.sons button.ativo { border-color: var(--laranja); background: var(--laranja-suave); color: var(--texto); }
.avisos-config input[type="range"] { width: 100%; accent-color: var(--laranja); }
.som-bloqueado {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 7px 12px;
  background: rgb(var(--destaque-rgb) / .14); border-bottom: 1px solid rgb(var(--destaque-rgb) / .35); color: var(--texto); font-size: 13px; font-weight: 700;
}
.som-bloqueado[hidden] { display: none; }
.som-bloqueado svg { width: 15px; height: 15px; color: var(--laranja); }

/* Convite por link (js/convite.js) */
.convite-previa { display: grid; place-items: center; margin: 4px 0 12px; padding: 10px; border-radius: 16px; background: var(--painel-2); border: 1px solid var(--linha); min-height: 120px; }
.convite-previa img { display: block; width: min(300px, 100%); aspect-ratio: 1080 / 1350; border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); }
.convite-previa img:not([src]) { display: none; }
.convite-previa p { margin: 0; color: var(--texto-3); font-size: 13px; }
.convite-link { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linha-forte); background: var(--painel); }
.convite-link svg { width: 16px; height: 16px; color: var(--laranja); flex-shrink: 0; }
.convite-link input { flex: 1; min-width: 0; border: 0; background: none; color: var(--texto-2); font: inherit; font-size: 12.5px; }
.convite-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 6px; }
.convite-acoes #conviteEnviar { grid-column: 1 / -1; }
.botao-whats { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #25d366; color: #fff; font-weight: 700; }
.botao-whats svg { width: 17px; height: 17px; }
.convite-recebido { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 6px 0 10px; }
.convite-recebido p { color: var(--texto-2); }
.convite-icone, .convite-ini {
  display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 6px; border-radius: 26px;
  background: var(--laranja-suave); border: 1px solid rgb(var(--destaque-rgb) / .5); color: var(--laranja); box-shadow: 0 0 40px rgb(var(--destaque-rgb) / .25);
}
.convite-ini { border-radius: 50%; font-size: 32px; font-weight: 800; }
.convite-icone svg { width: 46px; height: 46px; }
.convite-pilulas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.convite-pilulas span { padding: 5px 12px; border-radius: 99px; background: var(--painel-2); border: 1px solid var(--linha-forte); font-size: 12.5px; font-weight: 700; color: var(--texto-2); }
.convite-login { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; padding: 12px; border-radius: 12px; background: rgba(255, 152, 0, .12); border: 1px solid rgba(255, 152, 0, .4); text-align: left; font-size: 13.5px; color: #f2f2f2; }
.convite-login svg { width: 18px; height: 18px; color: #ff9800; flex-shrink: 0; margin-top: 1px; }

/* Estudar progressão (js/musica.js) */
.estudo { display: grid; gap: 10px; margin-top: 4px; padding: 12px; border-radius: 14px; background: var(--painel-2); border: 1px solid var(--linha); }
.estudo-acordes { display: flex; flex-wrap: wrap; gap: 6px; }
.estudo-acordes button {
  display: grid; justify-items: center; min-width: 58px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--linha-forte);
  background: var(--painel); font-weight: 800; font-size: 15px; color: var(--texto); transition: transform .12s, background .12s, border-color .12s;
}
.estudo-acordes button small { color: var(--texto-3); font-size: 10.5px; font-weight: 700; }
.estudo-acordes button.atual { background: var(--laranja); border-color: var(--laranja); color: #161616; transform: scale(1.06); }
.estudo-acordes button.atual small { color: rgba(0, 0, 0, .6); }
.estudo-luzes { display: flex; gap: 6px; }
.estudo-luzes i { width: 12px; height: 12px; border-radius: 50%; background: var(--superficie-2); }
.estudo-luzes i.forte { box-shadow: 0 0 0 2px rgb(var(--destaque-rgb) / .35); }
.estudo-luzes i.acesa { background: var(--laranja); }
.estudo-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.estudo-rot { min-width: 86px; color: var(--texto-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.estudo-bpm { min-width: 36px; text-align: center; font-size: 17px; color: var(--laranja); }
.estudo-un { color: var(--texto-3); font-size: 12px; }
.estudo-extras select { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--linha-forte); background: var(--painel); color: var(--texto); font: inherit; font-weight: 700; }
.chip-estudo { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--linha-forte); color: var(--texto-2); font-size: 13px; font-weight: 700; }
.chip-estudo svg { width: 15px; height: 15px; }
.chip-estudo.ativo { border-color: var(--laranja); background: var(--laranja-suave); color: var(--texto); }
.estudo-tocar { margin-left: auto; padding: 8px 16px; }

/* Emojis e respostas prontas (js/respostas.js) */
.seletor-emoji { width: min(340px, calc(100vw - 16px)); padding: 8px; }
.emoji-busca { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--painel-2); color: var(--texto); font: inherit; font-size: 13.5px; }
.emoji-busca:focus { outline: none; border-color: var(--laranja); }
.emoji-abas { display: flex; gap: 2px; margin: 6px 0; padding-bottom: 6px; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.menu-flutuante .emoji-abas button { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 9px; font-size: 18px; flex-shrink: 0; }
.emoji-abas button.ativo { background: var(--laranja-suave); }
.emoji-grade { display: grid; grid-template-columns: repeat(8, 1fr); align-content: start; gap: 2px; height: 236px; overflow-y: auto; }
.menu-flutuante .emoji-grade button { width: auto; height: 38px; padding: 0; justify-content: center; border-radius: 9px; font-size: 22px; transition: transform .1s; }
.menu-flutuante .emoji-grade button:hover { background: var(--laranja-suave); transform: scale(1.15); }
.emoji-vazio { grid-column: 1 / -1; margin: 14px 6px; color: var(--texto-3); font-size: 13px; text-align: center; }
.menu-flutuante .linha-reacoes .reagir-mais { display: grid; place-items: center; color: var(--texto-2); }
.menu-flutuante .linha-reacoes .reagir-mais svg { width: 20px; height: 20px; }
.caixa-respostas { width: min(340px, calc(100vw - 16px)); max-height: 60vh; overflow-y: auto; }
.resposta-item { display: flex; align-items: center; gap: 2px; }
.menu-flutuante .resposta-usar { flex: 1; min-width: 0; text-align: left; white-space: normal; line-height: 1.35; }
.resposta-item .icone-botao { flex-shrink: 0; color: var(--laranja); }

/* Tom da música (js/tom.js) */
.tom-grande { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0 10px; }
.tom-grande > div { display: grid; justify-items: center; min-width: 140px; }
.tom-grande b { font-size: 54px; line-height: 1; color: var(--laranja); }
.tom-grande small { margin-top: 4px; color: var(--texto-2); font-size: 14px; font-weight: 700; }
.tom-grande .icone-botao { width: 46px; height: 46px; border: 1px solid var(--linha-forte); border-radius: 14px; }
.tom-grande .icone-botao svg { width: 24px; height: 24px; }
.tom-modos { justify-content: center; margin-bottom: 8px; }
.tom-tons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 10px; }
.tom-tons button { padding: 6px 0; border-radius: 9px; border: 1px solid var(--linha); font-size: 13px; font-weight: 700; color: var(--texto-2); }
.tom-tons button.ativo { border-color: var(--laranja); background: var(--laranja-suave); color: var(--texto); }
.tom-escala, .tom-cadencia { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; }
.tom-escala span { min-width: 54px; color: var(--texto-3); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.tom-escala i { font-style: normal; padding: 3px 9px; border-radius: 8px; background: var(--painel-2); border: 1px solid var(--linha); font-weight: 700; font-size: 13px; }
.tom-escala i.raiz { border-color: var(--laranja); color: var(--laranja); }
.tom-cadencia i { flex: 1; text-align: center; font-style: normal; padding: 8px 0; border-radius: 10px; border: 1px solid var(--linha-forte); font-weight: 800; transition: background .15s, color .15s; }
.tom-cadencia i.atual { background: var(--laranja); border-color: var(--laranja); color: #161616; }
.tom-barra { height: 4px; margin: 4px 0 10px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.tom-barra span { display: block; width: 0; height: 100%; background: var(--laranja); }
.voz-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.voz-atual { display: grid; flex: 1; }
.voz-atual b { font-size: 30px; line-height: 1.05; color: var(--laranja); }
.voz-atual small { color: var(--texto-3); font-size: 12px; }
.graf-voz { display: block; width: 100%; height: 230px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); }
.tom-sugestoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.tom-sugestoes button { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--linha-forte); }
.tom-sugestoes button b { font-size: 22px; color: var(--laranja); }
.tom-sugestoes button small { color: var(--texto-2); font-size: 11.5px; text-align: center; }
.tom-sugestoes button.ativo { border-color: var(--laranja); background: var(--laranja-suave); }
.card-tom { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.card-tom b { font-size: 26px; color: var(--laranja); }
.card-tom small { color: var(--texto-3); font-size: 12px; }

/* Reuniões (js/reunioes.js) */
.form-linha-3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.form-linha-2 > .campo { flex: 1; }
@media (max-width: 520px) { .form-linha-3 { grid-template-columns: 1fr 1fr; } .form-linha-3 > :first-child { grid-column: 1 / -1; } .form-linha-2 { flex-direction: column; } }
.pauta-form { display: grid; grid-template-columns: 22px 1fr 84px 104px auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.pauta-form input, .pauta-form select { min-width: 0; padding: 8px; border-radius: 9px; border: 1px solid var(--linha-forte); background: var(--painel-2); color: var(--texto); font: inherit; font-size: 13.5px; }
.pauta-num { color: var(--laranja); font-weight: 800; text-align: center; }
@media (max-width: 520px) {
  .pauta-form { grid-template-columns: 22px 1fr 1fr auto; padding-bottom: 6px; border-bottom: 1px dashed var(--linha); }
  .pauta-form .pauta-num { grid-row: 1 / 3; align-self: start; padding-top: 8px; }
  .pauta-form input { grid-column: 2 / 4; grid-row: 1; }
  .pauta-form .icone-botao { grid-column: 4; grid-row: 1; }
  .pauta-form [data-c="min"] { grid-column: 2; grid-row: 2; }
  .pauta-form [data-c="resp"] { grid-column: 3 / 5; grid-row: 2; }
}
#somaPautas.passou { color: #ff6b6b; }
.reuniao-item { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linha); background: var(--painel-2); text-align: left; }
.reuniao-item:hover { border-color: rgb(var(--destaque-rgb) / .5); }
.reuniao-item.encerrada { opacity: .6; }
.reuniao-item > svg { width: 18px; height: 18px; color: var(--texto-3); }
.reuniao-data { display: grid; justify-items: center; width: 46px; padding: 6px 0; border-radius: 12px; background: var(--laranja-suave); color: var(--laranja); flex-shrink: 0; }
.reuniao-data b { font-size: 20px; line-height: 1; }
.reuniao-data small { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.reuniao-meio { display: grid; flex: 1; min-width: 0; gap: 1px; }
.reuniao-meio strong { font-size: 14.5px; }
.reuniao-meio small { color: var(--texto-3); font-size: 12px; }
.reuniao-meio em { font-style: normal; color: var(--laranja); font-size: 12px; font-weight: 700; }
.ao-vivo-chip { color: #ff5a5a !important; font-weight: 800; }
.chip-texto.ao-vivo-chip { background: rgba(255, 90, 90, .15); }
.reuniao-topo h2 { margin: 2px 0 6px; }
.reuniao-quando { display: flex; align-items: center; gap: 6px; margin: 2px 0; color: var(--texto-2); font-size: 13.5px; }
.reuniao-quando svg { width: 15px; height: 15px; color: var(--laranja); }
.reuniao-contagem { display: inline-grid; margin: 10px 0 4px; padding: 8px 14px; border-radius: 12px; background: var(--laranja-suave); border: 1px solid rgb(var(--destaque-rgb) / .35); }
.reuniao-contagem small { color: var(--texto-3); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.reuniao-contagem b { color: var(--laranja); font-size: 20px; }
.reuniao-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.reuniao-acoes > * { padding: 8px 12px; font-size: 13px; }
.presenca { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.presenca button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 12px; border: 1px solid var(--linha-forte); font-weight: 700; font-size: 13px; color: var(--texto-2); }
.presenca button svg { width: 16px; height: 16px; }
.presenca button b { padding: 0 6px; border-radius: 99px; background: var(--superficie-2); font-size: 11.5px; }
.presenca button.ativo.sim { border-color: #3ddc84; background: rgba(61, 220, 132, .12); color: var(--texto); }
.presenca button.ativo.talvez { border-color: #ffc23d; background: rgba(255, 194, 61, .12); color: var(--texto); }
.presenca button.ativo.nao { border-color: #ff6b6b; background: rgba(255, 107, 107, .12); color: var(--texto); }
.cronograma { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--linha-forte); }
.cronograma li { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: start; padding: 6px 0 6px 10px; }
.cronograma li::before { content: ""; position: absolute; left: -21px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--painel); border: 2px solid var(--laranja); }
.cronograma li.passou { opacity: .5; }
.cronograma li.passou::before { background: var(--laranja); }
.cronograma li.atual::before { background: #ff5a5a; border-color: #ff5a5a; box-shadow: 0 0 0 4px rgba(255, 90, 90, .25); }
.cronograma li > span { color: var(--texto-3); font-size: 12px; font-weight: 700; padding-top: 2px; }
.cronograma li > b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); }
.cronograma li > b svg { width: 14px; height: 14px; color: var(--laranja); }
.pauta-cab { display: grid; text-align: left; gap: 1px; }
.pauta-cab b { font-size: 14px; color: var(--texto); }
.pauta-cab small { color: var(--texto-3); font-size: 12px; }
.pauta-linha .pauta-comentarios { grid-column: 1 / -1; }
.aviso-tempo { color: #ff6b6b; font-style: normal; font-weight: 600; }
.pauta-comentarios { display: grid; gap: 6px; padding: 6px 0; }
.comentario { display: flex; gap: 8px; align-items: flex-start; }
.comentario b { font-size: 12.5px; }
.comentario p { margin: 1px 0 0; color: var(--texto-2); font-size: 13.5px; line-height: 1.4; }
.comentar { display: flex; gap: 6px; }
.comentar input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--painel-2); color: var(--texto); font: inherit; font-size: 13.5px; }
.ao-vivo { display: grid; justify-items: center; gap: 4px; margin: 12px 0; padding: 16px; border-radius: 16px; text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 90, 90, .14), transparent 70%), var(--painel-2); border: 1px solid rgba(255, 90, 90, .45); }
.ao-vivo small { color: var(--texto-3); font-size: 12px; }
.ao-vivo strong { font-size: 18px; }
.cronometro { font-size: 46px; line-height: 1.1; color: var(--laranja); font-variant-numeric: tabular-nums; }
.cronometro.estourou { color: #ff5a5a; }
.ao-vivo-barra { width: 100%; height: 6px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.ao-vivo-barra span { display: block; height: 100%; background: var(--laranja); transition: width 1s linear; }
.ao-vivo-botoes { display: flex; gap: 8px; margin-top: 6px; }
.card-reuniao { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 99px; background: var(--laranja-suave); color: var(--laranja); font-size: 12.5px; }
.card-reuniao svg { width: 14px; height: 14px; }
.aviso-cartao.lembrete { border-color: rgba(255, 90, 90, .5); }
.aviso-icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--laranja-suave); color: var(--laranja); flex-shrink: 0; }
.aviso-icone svg { width: 20px; height: 20px; }
.tom-diapasao { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 8px; color: var(--texto-2); font-size: 13.5px; }
.tom-diapasao b { color: var(--laranja); }
.tom-onda { display: flex; align-items: center; gap: 3px; height: 22px; }
.tom-onda i { width: 4px; height: 8px; border-radius: 3px; background: var(--laranja); opacity: .5; }
.tom-onda.tocando i { animation: onda-tom 1s ease-in-out infinite; opacity: 1; }
.tom-onda.tocando i:nth-child(2) { animation-delay: .15s; }
.tom-onda.tocando i:nth-child(3) { animation-delay: .3s; }
@keyframes onda-tom { 0%, 100% { height: 6px; } 50% { height: 22px; } }
.voz-medidor { display: flex; align-items: center; gap: 4px; }
.voz-medidor svg { width: 15px; height: 15px; color: var(--texto-3); }
.voz-medidor span { width: 54px; height: 6px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.voz-medidor b { display: block; width: 0; height: 100%; background: #3ddc84; transition: width .08s; }

/* Celular: presença sem quebrar e o menu "+" como grade de ícones */
@media (max-width: 520px) {
  .presenca button { gap: 4px; padding: 9px 4px; font-size: 12.5px; white-space: nowrap; }
  .presenca button b { padding: 0 5px; }
  .reuniao-acoes > * { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 768px) {
  .menu-anexo { position: fixed; left: 8px !important; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); width: auto !important; min-width: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; max-height: 70vh; overflow-y: auto; }
  .menu-anexo[hidden] { display: none; }
  .menu-anexo button { display: grid !important; justify-items: center; gap: 6px; padding: 12px 4px !important; border-radius: 14px; text-align: center; font-size: 11.5px !important; line-height: 1.25; white-space: normal; }
  .menu-anexo button svg { width: 24px !important; height: 24px !important; padding: 9px; border-radius: 14px; background: var(--laranja-suave); color: var(--laranja); box-sizing: content-box; }
}

/* Reunião em tela inteira (js/reuniao-tela.js) */
.tela-reuniao { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--fundo);
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 26px 26px; }
html[data-theme="claro"] .tela-reuniao { background-image: radial-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px); }
.tela-reuniao[hidden] { display: none; }
.tela-reuniao-cabeca { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linha); background: var(--painel); }
.tela-reuniao-titulo { flex: 1; min-width: 0; }
.tela-reuniao-titulo small { color: var(--texto-3); font-size: 12px; font-weight: 700; }
.tela-reuniao-titulo h1 { margin: 0; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tela-reuniao-acoes { display: flex; align-items: center; gap: 4px; }
.tela-reuniao-acoes .botao-laranja { padding: 8px 12px; }
.tela-reuniao-atalhos { display: none; }
.tela-reuniao-corpo { flex: 1; overflow-y: auto; display: grid; grid-template-columns: minmax(300px, 360px) 1fr minmax(260px, 320px); gap: 16px; padding: 16px; align-items: start; }
.tr-col { display: grid; gap: 12px; min-width: 0; }
.tr-cartao { padding: 14px; border-radius: 16px; background: var(--painel); border: 1px solid var(--linha); }
.tr-titulo { margin: 6px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--laranja); }
.tr-titulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tr-titulo-linha small { color: var(--texto-3); font-size: 12px; }
.presentes { display: flex; flex-wrap: wrap; gap: 4px; }
.ao-vivo-painel { display: grid; justify-items: center; gap: 6px; text-align: center; border-color: rgba(255, 90, 90, .45);
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 90, 90, .12), transparent 70%), var(--painel); }
.ao-vivo-painel strong { font-size: 17px; }
.ao-vivo-rot { color: var(--texto-3); font-size: 12px; }
.aneis { display: flex; gap: 18px; margin: 4px 0; }
.anel { position: relative; width: 112px; height: 112px; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 10; }
.anel-fundo { stroke: var(--superficie-2); }
.anel-valor { stroke: var(--laranja); stroke-linecap: round; transition: stroke-dashoffset .9s linear, stroke .3s; }
.anel.alerta .anel-valor { stroke: #ffc23d; }
.anel.estourou .anel-valor { stroke: #ff5a5a; }
.anel-meio { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anel-meio b { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.anel-meio small { color: var(--texto-3); font-size: 11px; }
.tr-col-ata { padding: 14px 16px; border-radius: 16px; background: var(--painel); border: 1px solid var(--linha); }
.ata-grupo { margin-top: 10px; padding: 10px 0 4px; border-top: 1px solid var(--linha); }
.ata-grupo.atual { border-top-color: rgba(255, 90, 90, .5); }
.ata-grupo-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ata-grupo-cab b { font-size: 14.5px; }
.ata-grupo-cab em { font-style: normal; font-size: 11px; }
.ata-bloco { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0; }
.ata-bloco textarea { flex: 1; min-width: 0; resize: none; overflow: hidden; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--texto); font: inherit; font-size: 14px; line-height: 1.5; }
.ata-bloco textarea:hover { border-color: var(--linha); }
.ata-bloco textarea:focus { outline: none; border-color: rgb(var(--destaque-rgb) / .6); background: var(--painel-2); }
.ata-bloco .icone-botao { opacity: 0; width: 28px; height: 28px; }
.ata-bloco:hover .icone-botao, .ata-bloco:focus-within .icone-botao { opacity: 1; }
.ata-topico textarea { font-size: 16px; font-weight: 800; }
.ata-ponto { width: 6px; height: 6px; margin: 14px 0 0 6px; border-radius: 50%; background: var(--laranja); flex-shrink: 0; }
.ata-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 9px; accent-color: var(--laranja); flex-shrink: 0; }
.ata-check.feito textarea { text-decoration: line-through; color: var(--texto-3); }
.ata-check select { padding: 5px 6px; margin-top: 3px; border-radius: 8px; border: 1px solid var(--linha); background: var(--painel-2); color: var(--texto-2); font: inherit; font-size: 12px; max-width: 96px; }
.ata-mais { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.ata-mais button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; border: 1px dashed var(--linha-forte); color: var(--texto-3); font-size: 12px; font-weight: 700; }
.ata-mais button:hover { color: var(--laranja); border-color: var(--laranja); }
.ata-mais svg { width: 14px; height: 14px; }
.ata-rodape { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.anexos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.anexo { display: grid; gap: 4px; padding: 6px; border-radius: 12px; border: 1px solid var(--linha); background: var(--painel); text-align: center; }
.anexo:hover { border-color: rgb(var(--destaque-rgb) / .5); }
.anexo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.anexo-icone { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: var(--laranja-suave); color: var(--laranja); }
.anexo-icone svg { width: 28px; height: 28px; }
.anexo-nome { font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexos-mais { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.anexos-mais button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--linha-forte); font-size: 12.5px; font-weight: 700; color: var(--texto-2); }
.anexos-mais svg { width: 15px; height: 15px; color: var(--laranja); }
.anexo-visor img { display: block; max-width: 100%; max-height: 62vh; margin: 0 auto; border-radius: 12px; }
.anexo-visor iframe { width: 100%; height: 62vh; border: 0; border-radius: 12px; background: #fff; }
.item-portal-anexo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 12px; text-align: left; }
.item-portal-anexo:hover:not(:disabled) { background: var(--laranja-suave); }
.item-portal-anexo span:last-child { display: grid; }
.item-portal-anexo small { color: var(--texto-3); font-size: 12px; }
.item-portal-anexo.desativado { opacity: .55; }
#tr-sec-comentarios { margin-top: 8px; }
html.com-tela-reuniao { overflow: hidden; }
@media (max-width: 1100px) { .tela-reuniao-corpo { grid-template-columns: minmax(280px, 340px) 1fr; } .tela-reuniao-corpo > .tr-col:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .tela-reuniao-corpo { display: block; padding: 10px 10px 40px; }
  .tela-reuniao-corpo > .tr-col { margin-bottom: 14px; }
  .tela-reuniao-atalhos { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid var(--linha); background: var(--painel); }
  .tela-reuniao-atalhos button { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--linha-forte); font-size: 12.5px; font-weight: 700; color: var(--texto-2); white-space: nowrap; }
  .tela-reuniao-acoes .botao-laranja span { display: none; }
  .tela-reuniao-titulo h1 { font-size: 16px; }
  .ata-bloco .icone-botao { opacity: .6; }
  .aneis { gap: 12px; }
  .anel { width: 100px; height: 100px; }
}
@media (max-width: 760px) { .tela-reuniao-titulo h1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; } }

/* Cronômetro minimizado, pílula ao vivo e registro */
.ao-vivo-painel { position: relative; }
.ao-vivo-min { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; }
.ao-vivo-painel.mini { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: left; gap: 4px 10px; padding: 10px 44px 10px 12px; }
.ao-vivo-painel.mini .ao-vivo-rot { grid-column: 2; grid-row: 1; }
.ao-vivo-painel.mini strong { grid-column: 2; grid-row: 2; font-size: 14px; }
.ao-vivo-painel.mini .aneis { grid-column: 1; grid-row: 1 / 3; gap: 6px; margin: 0; }
.ao-vivo-painel.mini .anel { width: 48px; height: 48px; }
.ao-vivo-painel.mini .anel circle { stroke-width: 12; }
.ao-vivo-painel.mini .anel-meio b { font-size: 12px; }
.ao-vivo-painel.mini .anel-meio small { display: none; }
.ao-vivo-painel.mini .cronometro { grid-column: 3; grid-row: 1 / 3; font-size: 24px; }
.ao-vivo-painel.mini > small:not(.ao-vivo-rot), .ao-vivo-painel.mini [data-crono-reuniao] { display: none; }
.ao-vivo-painel.mini .ao-vivo-botoes { grid-column: 1 / -1; margin-top: 2px; }
.ao-vivo-painel.mini .ao-vivo-botoes button { padding: 6px 10px; font-size: 12.5px; }
.pilula-ao-vivo { position: fixed; z-index: 65; right: 16px; bottom: 86px; display: flex; align-items: center; gap: 10px; max-width: min(360px, calc(100vw - 32px));
  padding: 8px 8px 8px 12px; border-radius: 999px; background: var(--painel); border: 1px solid rgba(255, 90, 90, .55); box-shadow: var(--sombra); cursor: pointer; }
.pilula-ao-vivo[hidden] { display: none; }
.pilula-ponto { width: 9px; height: 9px; border-radius: 50%; background: #ff5a5a; flex-shrink: 0; animation: pulsar-ao-vivo 1.4s ease-in-out infinite; }
@keyframes pulsar-ao-vivo { 50% { opacity: .3; } }
.pilula-texto { display: grid; min-width: 0; }
.pilula-texto b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilula-texto small { color: var(--texto-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilula-anel { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--laranja) calc(var(--pct) * 1%), var(--superficie-2) 0); }
.pilula-anel b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--painel); font-size: 10px; }
.pilula-tempo { font-variant-numeric: tabular-nums; color: var(--laranja); }
.pilula-ao-vivo.estourou .pilula-tempo { color: #ff5a5a; }
.pilula-x { width: 26px; height: 26px; border-radius: 50%; color: var(--texto-3); font-size: 18px; line-height: 1; }
@media (max-width: 768px) { .pilula-ao-vivo { right: 10px; left: 10px; bottom: calc(126px + env(safe-area-inset-bottom)); } }
.registro { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.registro li { display: grid; grid-template-columns: 74px 1fr; gap: 6px; align-items: start; }
.registro li > span { color: var(--texto-3); font-size: 11.5px; font-weight: 700; padding-top: 8px; }
.registro li > button, .registro li > div { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 10px; text-align: left; font-size: 13px; color: var(--texto-2); line-height: 1.4; }
.registro li > button:hover { background: var(--laranja-suave); color: var(--texto); }
.registro li svg { width: 15px; height: 15px; margin-top: 2px; color: var(--laranja); flex-shrink: 0; }
.registro li > button > span { flex: 1; min-width: 0; }
.registro .registro-seta { color: var(--texto-3); }
.registro li.destaque > button, .registro li.destaque > div { background: rgb(var(--destaque-rgb) / .08); color: var(--texto); font-weight: 600; }
.ata-selo { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 6px; border-radius: 7px; background: var(--laranja-suave); color: var(--laranja); flex-shrink: 0; }
.ata-selo svg { width: 14px; height: 14px; }
.ata-decisao textarea { font-weight: 700; }
.ata-bloco.piscar { animation: piscar-bloco 1.4s ease; border-radius: 10px; }
@keyframes piscar-bloco { 0%, 60% { background: rgb(var(--destaque-rgb) / .22); } 100% { background: transparent; } }

/* Rascunho à mão (js/desenho.js) */
.modal-caixa.modal-largo { width: min(920px, calc(100vw - 24px)); max-width: none; }
.editor-desenho { display: grid; gap: 10px; }
.desenho-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.desenho-topo h2 { margin: 0; }
.desenho-fundos { display: flex; gap: 6px; }
.desenho-fundos button { width: 28px; height: 28px; border-radius: 8px; background: var(--f); border: 2px solid var(--linha-forte); }
.desenho-fundos button.ativo { border-color: var(--laranja); }
.desenho-area { border-radius: 14px; overflow: hidden; border: 1px solid var(--linha-forte); touch-action: none; }
.desenho-area canvas { display: block; touch-action: none; cursor: crosshair; }
.desenho-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.desenho-grupo { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); }
.desenho-grupo button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--texto-2); }
.desenho-grupo button.ativo { background: var(--laranja-suave); color: var(--laranja); box-shadow: inset 0 0 0 1px rgb(var(--destaque-rgb) / .5); }
.desenho-grupo button svg { width: 18px; height: 18px; }
.desenho-grupo button span { border-radius: 50%; background: currentColor; }
.desenho-cores button { width: 30px; height: 30px; }
.desenho-cores button::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 1px solid rgba(128, 128, 128, .5); }
.desenho-cores button.ativo::after { box-shadow: 0 0 0 2px var(--painel), 0 0 0 4px var(--laranja); }
svg.desenho { display: block; width: 100%; height: auto; border-radius: 10px; }
.card-desenho { display: block; width: min(260px, 60vw); margin-top: 6px; }
.desenho-visor svg { border-radius: 14px; border: 1px solid var(--linha); }
@media (max-width: 600px) { .desenho-grupo button { width: 34px; height: 34px; } .desenho-barra { gap: 6px; } }

/* Páginas (js/paginas.js, js/pagina-tela.js) */
.tela-pagina-corpo { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); max-width: 1180px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.pagina-modelo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--laranja-suave); color: var(--laranja); flex-shrink: 0; }
.pagina-modelo svg { width: 20px; height: 20px; }
.pagina-titulo { width: 100%; padding: 2px 0; border: 0; border-bottom: 1px dashed transparent; background: none; color: var(--texto); font: inherit; font-size: 19px; font-weight: 800; }
.pagina-titulo:hover, .pagina-titulo:focus { outline: none; border-bottom-color: var(--linha-forte); }
.pagina-progresso { position: relative; height: 22px; margin-bottom: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.pagina-progresso span { position: absolute; inset: 0 auto 0 0; background: rgb(var(--destaque-rgb) / .35); transition: width .4s; }
.pagina-progresso small { position: relative; display: block; padding: 2px 12px; font-size: 12px; font-weight: 700; color: var(--texto); }
.pagina-blocos .ata-topico textarea { margin-top: 10px; font-size: 17px; }
.pagina-mais { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); }
.pagina-quem { margin-top: 10px; }
.pagina-desenho { align-items: flex-start; }
.pagina-desenho-ver { flex: 1; padding: 0; border-radius: 12px; border: 1px solid var(--linha); overflow: hidden; }
.pagina-desenho-ver:hover { border-color: rgb(var(--destaque-rgb) / .6); }
.pagina-ferramentas { display: grid; gap: 6px; margin: 8px 0 6px; }
.pagina-ferramentas button { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--linha-forte); font-size: 13.5px; font-weight: 700; color: var(--texto-2); text-align: left; }
.pagina-ferramentas button:hover { border-color: var(--laranja); color: var(--texto); }
.pagina-ferramentas svg { width: 17px; height: 17px; color: var(--laranja); }
.pagina-icone svg { width: 22px; height: 22px; }
.modelos-pagina { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.modelos-pagina button { display: grid; justify-items: start; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--linha-forte); text-align: left; }
.modelos-pagina button:hover { border-color: var(--laranja); background: var(--laranja-suave); }
.modelos-pagina svg { width: 22px; height: 22px; color: var(--laranja); }
.modelos-pagina b { font-size: 14px; }
.modelos-pagina small { color: var(--texto-3); font-size: 12px; line-height: 1.35; }
@media (max-width: 900px) { .tela-pagina-corpo { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pagina-titulo { font-size: 16px; } .modelos-pagina { grid-template-columns: 1fr 1fr; } .modelos-pagina small { display: none; } }
.voz-diag { margin-top: 6px; min-height: 18px; }
.voz-diag small { color: var(--texto-3); font-size: 12px; }

/* Visor de cifra (formatos do app Cifras) */
.visor-texto.cifra.rica { white-space: normal; overflow-x: auto; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13.5px; line-height: 1.5; color: var(--texto); }
.cf-letra, .cf-acordes { white-space: pre; }
.cf-acordes { color: var(--laranja); }
.cf-vazia { height: .9em; }
.cf-secao { display: inline-block; margin: 8px 0 4px; padding: 2px 10px; border-radius: 8px; background: var(--laranja-suave); color: var(--laranja); font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cf-rot { color: var(--texto-3); font-weight: 700; }
.cf-inline { display: flex; flex-wrap: wrap; align-items: flex-end; margin: 2px 0; }
.cf-par { display: inline-flex; flex-direction: column; white-space: pre; }
.cf-par > b { min-height: 1.4em; padding-right: 6px; }
.cf-sem { visibility: hidden; }

/* Criar repertório (js/ensaio.js) */
.rep-cabeca { display: flex; align-items: center; gap: 4px; margin: 4px 4px 8px; padding: 8px 10px; border-radius: 12px; background: var(--laranja-suave); }
.rep-cabeca > div { flex: 1; display: grid; }
.rep-cabeca small { color: var(--texto-3); font-size: 11.5px; font-weight: 700; }
.rep-cabeca b { font-size: 15px; }
.ensaio-datas button small { display: block; color: var(--texto-3); font-size: 10.5px; font-weight: 600; }
.rep-lista { display: grid; gap: 6px; }
.rep-item { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); }
.rep-item-meio { display: grid; flex: 1; min-width: 0; }
.rep-item-meio b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-item-meio small { color: var(--texto-3); font-size: 12px; }
.rep-item-ordem { display: flex; }
.rep-item-ordem .icone-botao { width: 28px; height: 28px; }
.rep-copiar button small { color: var(--texto-3); }

/* Agenda (js/agenda.js) */
.filtro small { margin-left: 3px; opacity: .7; }
.agenda-dia { margin-bottom: 6px; }
.agenda-item { display: flex; align-items: center; gap: 10px; margin: 2px 4px; padding: 8px 6px 8px 10px; border-radius: 12px; }
.agenda-item:hover { background: var(--superficie); }
.agenda-item.passou { opacity: .5; }
.agenda-item.falta .agenda-meio b { text-decoration: line-through; color: var(--texto-3); }
.agenda-hora { width: 40px; flex-shrink: 0; font-weight: 800; font-size: 13px; color: var(--texto); font-variant-numeric: tabular-nums; }
.agenda-origem { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; }
.agenda-origem svg { width: 16px; height: 16px; }
.agenda-laranja { background: var(--laranja-suave); color: var(--laranja); }
.agenda-azul { background: rgba(59, 130, 246, .14); color: #60a5fa; }
.agenda-verde { background: rgba(34, 197, 94, .14); color: #4ade80; }
.agenda-meio { display: grid; flex: 1; min-width: 0; text-align: left; }
.agenda-meio b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-meio small { color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-conectar { display: flex; align-items: center; gap: 10px; margin: 0 4px 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(34, 197, 94, .45); }
.agenda-conectar > svg { width: 20px; height: 20px; color: #4ade80; flex-shrink: 0; }
.agenda-conectar span { display: grid; flex: 1; }
.agenda-conectar small { color: var(--texto-3); font-size: 12px; }
.agenda-ajustes { margin: 0 4px 10px; padding: 6px 10px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); }
.agenda-ajustes summary { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--texto-2); font-size: 13px; font-weight: 700; }
.agenda-ajustes summary svg { width: 15px; height: 15px; }
.agenda-ajustes[open] { padding-bottom: 10px; }
.agenda-ajustes .campo { margin-top: 8px; }

/* Setlist (js/setlist.js) */
.setlist-acoes { gap: 2px; }
.setlist-acoes .icone-botao.ativo { background: var(--laranja-suave); color: var(--laranja); }
.setlist-tom { margin-right: 4px; font-size: 13px; color: var(--texto-2); white-space: nowrap; }
.setlist-tom b { color: var(--laranja); font-size: 16px; }
.setlist-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr; }
.setlist-lista { overflow-y: auto; padding: 10px; border-right: 1px solid var(--linha); background: var(--painel); }
.setlist-lista button { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 4px; padding: 9px 10px; border-radius: 12px; text-align: left; }
.setlist-lista button:hover { background: var(--superficie); }
.setlist-lista button.ativo { background: var(--laranja-suave); box-shadow: inset 3px 0 0 var(--laranja); }
.setlist-lista-meio { display: grid; min-width: 0; }
.setlist-lista-meio b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setlist-lista-meio small { color: var(--texto-3); font-size: 11.5px; }
.setlist-cifra { overflow: auto; padding: 16px 22px 80px; scroll-behavior: auto; }
.setlist-info { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--texto-3); font-size: 13px; }
.setlist-info svg { width: 14px; height: 14px; }
.setlist-texto { max-height: none !important; font-size: var(--fonte, 15px) !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
.setlist-rodape { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--linha); background: var(--painel); }
.setlist-rodape > button { flex-shrink: 0; }
.setlist-proxima-nome { flex: 1; text-align: center; color: var(--texto-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setlist-proxima-nome b { color: var(--texto); }
.setlist-velocidade { flex: 1; accent-color: var(--laranja); }
@media (max-width: 760px) {
  .setlist-corpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .setlist-lista { display: flex; gap: 6px; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .setlist-lista button { flex-shrink: 0; width: auto; max-width: 180px; margin: 0; padding: 6px 10px; }
  .setlist-lista-meio small { display: none; }
  .setlist-cifra { padding: 12px 12px 60px; }
  .setlist-acoes [data-acao="setlist-fonte"] { display: none; }
}
.voz-ajuda { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--laranja-suave); border: 1px solid rgb(var(--destaque-rgb) / .4); font-size: 13px; }
.voz-ajuda ol { margin: 6px 0; padding-left: 18px; color: var(--texto-2); line-height: 1.5; }
.voz-ajuda small { color: var(--texto-3); }

/* Alerta de lembrete no meio da tela (js/avisos.js) — só sai com resposta */
#alertaCentral { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .45); backdrop-filter: blur(3px); animation: alerta-fundo .25s ease both; }
.alerta-caixa { width: min(400px, 100%); display: grid; justify-items: center; gap: 8px; text-align: center; padding: 26px 22px 20px; border-radius: 22px; background: var(--painel); border: 2px solid var(--laranja); box-shadow: 0 20px 60px rgb(0 0 0 / .35); animation: alerta-entra .35s cubic-bezier(.2, .9, .3, 1.2) both; }
#alertaCentral.chamando .alerta-caixa { animation: alerta-entra .35s cubic-bezier(.2, .9, .3, 1.2) both, alerta-balanca .5s .35s ease 2; }
.alerta-icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--laranja-suave); color: var(--laranja); animation: alerta-pulsa 1.6s ease-in-out infinite; }
.alerta-icone svg { width: 32px; height: 32px; }
.alerta-caixa h2 { margin: 6px 0 0; font-size: 20px; line-height: 1.25; }
.alerta-caixa p { margin: 0; color: var(--texto-2); font-size: 15px; }
.alerta-desde, .alerta-mais { color: var(--texto-3); font-size: 12.5px; }
.alerta-botoes { display: grid; gap: 8px; width: 100%; margin-top: 10px; }
.alerta-botoes button { justify-content: center; width: 100%; }
@keyframes alerta-fundo { from { opacity: 0; } }
@keyframes alerta-entra { from { opacity: 0; transform: scale(.85) translateY(10px); } }
@keyframes alerta-balanca { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes alerta-pulsa { 50% { box-shadow: 0 0 0 12px rgb(var(--destaque-rgb) / .12); } }
@media (prefers-reduced-motion: reduce) { #alertaCentral, .alerta-caixa, .alerta-icone { animation: none !important; } }
.voz-mic { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; color: var(--texto-2); }
.voz-mic svg { width: 16px; height: 16px; flex-shrink: 0; }
.voz-mic select { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--painel); color: var(--texto); font: inherit; }
#vozDiagTexto { display: block; line-height: 1.45; }
.alerta-botoes .botao-texto { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; color: var(--texto-2); font-weight: 600; }
.alerta-botoes .botao-texto svg { width: 16px; height: 16px; }

/* Ata: comentar cada item e quem marcou (js/reuniao-tela.js) */
.ata-check-meio { flex: 1; min-width: 0; display: grid; }
.ata-check-meio textarea { width: 100%; }
.ata-quem { padding: 0 8px 4px; color: #3ddc84; font-size: 11.5px; font-weight: 700; }
.ata-bloco .ata-coment-botao { opacity: .55; display: inline-flex; align-items: center; gap: 2px; width: auto; min-width: 28px; padding: 0 4px; }
.ata-bloco .ata-coment-botao svg { width: 16px; height: 16px; }
.ata-bloco .ata-coment-botao.tem, .ata-bloco .ata-coment-botao.ativo { opacity: 1; color: var(--laranja); }
.ata-coment-botao b { font-size: 11.5px; }
@media (hover: none) { .ata-bloco .icone-botao { opacity: .7; } }
.ata-item-coments { margin: 2px 0 8px 26px; padding: 8px 10px; border-left: 2px solid rgb(var(--destaque-rgb) / .5); border-radius: 0 10px 10px 0; background: var(--painel-2); display: grid; gap: 6px; }
.ata-item-coments .comentario p { margin: 2px 0 0; font-size: 13.5px; }
.ata-item-coments .comentar { margin: 0; }
button.nota-ref { padding: 0; background: none; border: 0; cursor: pointer; text-align: left; }
button.nota-ref:hover { text-decoration: underline; }

/* Rascunho em tela cheia: ferramentas na lateral, folha cabe na altura (sem rolar para baixo) */
.modal-caixa.modal-desenho { width: calc(100vw - 24px); max-width: 1500px; height: calc(100dvh - 24px); max-height: none; display: flex; flex-direction: column; padding: 16px; overflow: hidden; }
.modal-desenho .editor-desenho { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.modal-desenho .desenho-topo { flex-wrap: wrap; padding-right: 44px; }
.desenho-folhas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.desenho-mais-folha { padding: 7px 12px; font-size: 13px; }
.desenho-mais-folha:disabled { opacity: .45; }
.desenho-corpo { flex: 1; min-height: 0; display: flex; gap: 10px; }
.modal-desenho .desenho-barra { flex-direction: column; flex-wrap: nowrap; align-items: stretch; overflow-y: auto; }
.modal-desenho .desenho-barra .desenho-grupo { flex-direction: column; }
.modal-desenho .desenho-cores { display: grid; grid-template-columns: repeat(2, 30px); }
.modal-desenho .desenho-area { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow-x: auto; overflow-y: hidden; background: var(--painel-2); }
.modal-desenho .desenho-area.larga { justify-content: flex-start; }
.modal-desenho .desenho-area canvas { flex-shrink: 0; }
.desenho-area.modo-mao canvas { cursor: grab; }
.desenho-area.modo-mao canvas:active { cursor: grabbing; }
.modal-desenho .modal-botoes { margin-top: 0; }
@media (max-width: 700px) and (orientation: portrait) {
  .modal-caixa.modal-desenho { width: 100%; height: 100dvh; border-radius: 0; padding: 12px; }
  .desenho-corpo { flex-direction: column-reverse; }
  .modal-desenho .desenho-barra { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .modal-desenho .desenho-barra .desenho-grupo { flex-direction: row; }
  .modal-desenho .desenho-cores { display: flex; }
  .desenho-mais-folha span { display: none; }
}

/* Visor de cifra, composição, Bíblia… mais largo (js/busca.js) */
.modal-caixa.modal-visor { width: min(960px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); }
.modal-visor .visor-texto { max-height: calc(100dvh - 300px); min-height: 200px; font-size: 15px; }
.modal-visor .visor-texto.cifra.rica, .modal-visor .visor-texto.cifra, .modal-visor .visor-texto.letra { font-size: 14.5px; }
@media (max-width: 700px) { .modal-caixa.modal-visor { width: 100%; max-height: 96dvh; } .modal-visor .visor-texto { max-height: calc(96dvh - 280px); } }

/* Filtros da busca e da agenda: quebram linha em vez de sumir pela borda */
.filtros.quebrar, #filtrosAgenda { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; }

/* Registro da reunião: botão de ordem */
.registro-ordem { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--linha); color: var(--texto-3); font-size: 11.5px; font-weight: 700; }
.registro-ordem svg { width: 13px; height: 13px; }
.registro-ordem:hover { color: var(--laranja); border-color: rgb(var(--destaque-rgb) / .5); }

/* Rascunho recebido: ampliar */
button.desenho-visor { position: relative; display: block; width: 100%; padding: 0; cursor: zoom-in; }
.desenho-lupa { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgb(0 0 0 / .6); color: #fff; font-size: 12.5px; font-weight: 700; }
.desenho-lupa svg { width: 14px; height: 14px; }
.desenho-cheio { z-index: 210; display: block; }
.desenho-cheio-area { position: absolute; inset: 0; display: flex; overflow: auto; padding: 8px; touch-action: none; cursor: grab; }
.desenho-cheio-area:active { cursor: grabbing; }
.desenho-cheio-area svg.desenho { margin: auto; flex-shrink: 0; max-width: none; border-radius: 8px; }
.desenho-cheio-barra { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgb(30 30 30 / .9); border: 1px solid rgb(255 255 255 / .15); color: #fff; }
.desenho-cheio-barra button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; }
.desenho-cheio-barra button:hover { background: rgb(255 255 255 / .12); }
.desenho-cheio-barra b { min-width: 48px; text-align: center; font-size: 13px; }
/* Rascunho: texto digitado */
.desenho-area { position: relative; }
.desenho-area.modo-texto canvas { cursor: text; }
.desenho-texto-campo { position: absolute; z-index: 2; min-width: 60px; margin: 0; padding: 0 2px; border: 1.5px dashed rgb(var(--destaque-rgb) / .8); border-radius: 4px; background: rgb(128 128 128 / .08); font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; line-height: 1.25; resize: none; overflow: hidden; white-space: pre; outline: none; }
/* Coluna de ferramentas do rascunho em duas colunas (cabe em telas baixas) */
.modal-desenho .desenho-barra .desenho-grupo { display: grid; grid-template-columns: repeat(2, 36px); gap: 4px; }
.modal-desenho .desenho-barra .desenho-grupo.desenho-cores { grid-template-columns: repeat(2, 36px); }
.modal-desenho .desenho-cores button { width: 36px; height: 30px; }
@media (max-width: 700px) and (orientation: portrait) { .modal-desenho .desenho-barra .desenho-grupo { display: flex; } }
/* Rascunho: texto selecionado (mover, aumentar/diminuir) */
.desenho-sel { position: absolute; z-index: 3; border: 1.5px dashed var(--laranja); border-radius: 6px; background: rgb(var(--destaque-rgb) / .06); cursor: move; touch-action: none; }
.desenho-sel-barra { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--painel); border: 1px solid var(--linha-forte); box-shadow: var(--sombra); white-space: nowrap; cursor: default; }
.desenho-sel-barra button { display: grid; place-items: center; min-width: 32px; height: 30px; padding: 0 6px; border-radius: 7px; color: var(--texto-2); font-size: 13px; font-weight: 800; }
.desenho-sel-barra button:hover { background: var(--laranja-suave); color: var(--laranja); }
.desenho-sel-barra svg { width: 15px; height: 15px; }
.desenho-sel-alca { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--laranja); border: 2px solid var(--painel); cursor: nwse-resize; }
@media (pointer: coarse) { .desenho-sel-alca { width: 26px; height: 26px; right: -13px; bottom: -13px; } }

/* Página avulsa de ferramentas (ferramenta.html) */
body.pagina-ferramenta { display: block; min-height: 100dvh; overflow: auto; background: var(--fundo) radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 26px 26px; }
.ferramenta-inicio { max-width: 760px; margin: 0 auto; padding: 40px 16px; }
.ferramenta-inicio h1 { margin: 4px 0 18px; font-size: 26px; letter-spacing: -.02em; }
.ferramenta-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ferramenta-grade button { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 18px; border-radius: 18px; background: var(--painel); border: 1px solid var(--linha-forte); color: var(--texto); transition: border-color .2s, transform .2s; }
.ferramenta-grade button:hover { border-color: rgb(var(--destaque-rgb) / .6); transform: translateY(-2px); }
.ferramenta-grade svg { width: 28px; height: 28px; color: var(--laranja); }
.ferramenta-grade b { font-size: 16px; }
.ferramenta-grade small { color: var(--texto-3); font-size: 13px; line-height: 1.45; }
/* ferramenta.html?f=diapasao: sem a troca de abas (só o diapasão) e sem o X */
body.so-diapasao .escolha-tipo.duas, body.so-diapasao .modal-fechar { display: none; }
body.so-diapasao .modal-fundo { pointer-events: none; }
body.ferramenta-fixa { background: transparent; }
body.ferramenta-fixa .modal-fechar { display: none; }
body.ferramenta-fixa .modal-fundo { background: transparent; backdrop-filter: none; pointer-events: none; }
body.ferramenta-fixa .modal-caixa { box-shadow: none; max-height: calc(100dvh - 24px); }

/* ==========================================================================
   Caixas das conversas alinhadas: cards com a mesma largura, sem moldura dupla.
   PC: mais largas · celular: compactas.
   ========================================================================== */
.msg { max-width: min(78%, 760px); }
.balao:has(> .card-portal, > .enquete, > .sorteio, > .resultado, > .card-desenho) {
  width: var(--largura-card, 460px); max-width: 100%;
  padding: 5px 5px 4px; border-radius: 16px;
}
.balao > .card-portal, .balao > .enquete, .balao > .sorteio, .balao > .resultado {
  width: 100%; min-width: 0; margin: 0 0 2px; box-sizing: border-box;
  border-color: rgb(var(--destaque-rgb) / .22); background: rgba(0, 0, 0, .14);
}
.balao:has(> .card-portal) .balao-rodape { padding-right: 6px; }
.msg-coluna:has(.balao > .card-portal, .balao > .enquete, .balao > .sorteio) { width: 100%; }
@media (min-width: 1300px) { .mensagens { --largura-card: 520px; } }

@media (max-width: 768px) {
  .msg { max-width: 92%; gap: 6px; }
  .mensagens { --largura-card: 100%; }
  .balao { font-size: 14.5px; padding: 6px 9px 5px; }
  .balao:has(> .card-portal, > .enquete, > .sorteio, > .resultado) { padding: 4px 4px 3px; }
  .card-portal { gap: 10px; padding: 10px; }
  .card-portal-icone { width: 38px; height: 38px; border-radius: 11px; }
  .card-portal-icone svg { width: 20px; height: 20px; }
  .card-portal strong { font-size: 14px; }
  .msg .avatar, .msg .espaco-avatar { width: 26px; height: 26px; }
}
@media (max-width: 768px) {
  .msg:has(.balao > .card-portal, .balao > .enquete, .balao > .sorteio, .balao > .resultado) { width: 92%; }
  .msg:has(.balao > .card-portal, .balao > .enquete, .balao > .sorteio, .balao > .resultado) .balao { width: 100%; }
}
/* Turma (modelo de grupo) */
.selo-turma { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 4px 10px; border-radius: 999px; background: var(--laranja-suave); color: var(--laranja); font-size: 12.5px; font-weight: 700; }
.selo-turma svg { width: 14px; height: 14px; }
/* Agenda: presença/falta da aula (P/F, como no painel da Gestão) */
.agenda-presenca { display: inline-flex; gap: 3px; flex-shrink: 0; }
.agenda-presenca button { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--linha); color: var(--texto-3); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.agenda-presenca button:hover { color: var(--texto); border-color: var(--linha-forte); }
.agenda-presenca button[data-status="Presente"].ativo { background: #22c55e; border-color: #22c55e; color: #fff; }
.agenda-presenca button[data-status="Falta"].ativo { background: #ef4444; border-color: #ef4444; color: #fff; }
.agenda-presenca.grande { display: flex; gap: 8px; margin: 12px 0 4px; }
.agenda-presenca.grande button { flex: 1; height: 42px; font-size: 14px; border-radius: 12px; }
.agenda-presenca.grande svg { width: 17px; height: 17px; }
.agenda-item.presente .agenda-origem { box-shadow: 0 0 0 2px #22c55e; }

/* Sequenciador de bateria (js/bateria.js) */
.modal-caixa.modal-bateria { width: min(1100px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); }
.editor-bateria { display: grid; gap: 12px; }
.bat-topo { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1.3fr; gap: 10px; align-items: end; }
.bat-topo .campo { margin: 0; }
.bat-topo select, .bat-topo input:not([type="range"]) { width: 100%; }
.bat-bpm input { width: 100%; accent-color: var(--laranja); }
.bat-bpm b { color: var(--laranja); }
.bat-partes { display: flex; flex-wrap: wrap; gap: 6px; }
.bat-partes small { opacity: .7; margin-left: 2px; }
.bat-parte-cfg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--texto-2); font-size: 13px; }
.bat-parte-cfg input { width: 140px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--linha-forte); background: var(--painel-2); color: var(--texto); font: inherit; }
.bat-parte-cfg input[type="number"] { width: 60px; }
.bat-grade-caixa { overflow-x: auto; padding-bottom: 4px; }
.bat-grade { display: grid; gap: 4px; min-width: calc(76px + var(--passos) * 26px); }
.bat-linha { display: grid; grid-template-columns: 72px 1fr; gap: 4px; align-items: center; }
.bat-peca { height: 30px; padding: 0 6px; border-radius: 8px; background: var(--superficie); color: var(--texto-2); font-size: 12px; font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; }
.bat-peca:hover { color: var(--laranja); }
.bat-passos { display: grid; grid-template-columns: repeat(var(--passos), 1fr); gap: 3px; }
.bat-passo { height: 30px; min-width: 20px; border-radius: 7px; background: rgba(255, 255, 255, .1); border: 1px solid transparent; transition: background .1s, transform .1s; }
.bat-passo.par { background: rgba(255, 255, 255, .05); }
.bat-passo.tempo { border-left-color: rgba(255, 255, 255, .25); }
.bat-passo:hover { border-color: rgb(var(--destaque-rgb) / .6); }
.bat-passo.on { background: var(--laranja); box-shadow: 0 0 10px rgb(var(--destaque-rgb) / .35); }
.bat-passo.agora { outline: 2px solid #fff; outline-offset: -2px; transform: scale(1.06); }
.bat-tocar { display: flex; flex-wrap: wrap; gap: 8px; }
.card-bateria { display: grid; gap: 6px; margin-top: 6px; }
.card-bateria b { display: inline-flex; align-items: center; gap: 5px; color: var(--laranja); font-size: 12.5px; }
.card-bateria b svg { width: 14px; height: 14px; }
svg.bateria-mini { display: block; width: min(260px, 100%); height: auto; }
html[data-theme="claro"] .bat-passo { background: rgba(0, 0, 0, .08); }
html[data-theme="claro"] .bat-passo.par { background: rgba(0, 0, 0, .04); }
@media (max-width: 768px) {
  .bat-topo { grid-template-columns: 1fr 1fr; }
  .bat-topo .campo:first-child { grid-column: 1 / -1; }
  .bat-linha { grid-template-columns: 56px 1fr; }
  .bat-grade { min-width: calc(60px + var(--passos) * 24px); }
  .bat-passo { height: 34px; }
}
@media (max-width: 768px) {
  .modal-caixa.modal-bateria { padding: 16px 12px; }
  .bat-linha { grid-template-columns: 48px 1fr; gap: 3px; }
  .bat-peca { font-size: 10.5px; padding: 0 4px; }
  .bat-passos { gap: 2px; }
  .bat-passo { min-width: 0; border-radius: 5px; }
  .bat-grade { min-width: calc(52px + var(--passos) * 17px); }
}
.grupo-titulo-acao { display: flex; align-items: center; justify-content: space-between; }
.grupo-titulo-acao .icone-botao { width: 28px; height: 28px; }
.turma-chip { color: var(--laranja); font-weight: 700; }
.dica-botao { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer; }
.dica-botao svg { width: 20px; height: 20px; color: var(--laranja); flex-shrink: 0; }
/* Bateria: transporte, cifra ligada e controles no card */
.bat-tocar { align-items: center; }
.bat-play { min-width: 128px; justify-content: center; }
.bat-modo { display: inline-flex; }
.bat-tocar [data-loop] { display: inline-flex; align-items: center; gap: 5px; }
.bat-tocar [data-loop] svg { width: 15px; height: 15px; }
.bat-cifra-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--laranja-suave); color: var(--texto-2); font-size: 13px; }
.bat-cifra-chip b { color: var(--laranja); }
.bat-cifra-chip svg { width: 15px; height: 15px; color: var(--laranja); }
.bat-cifra-chip .icone-botao { width: 26px; height: 26px; }
.bat-cifra-busca { margin: 0; }
.bat-cifra-res { display: grid; gap: 4px; margin-top: 6px; }
.bat-cifra-res button { display: grid; text-align: left; padding: 8px 10px; border-radius: 10px; background: var(--painel-2); border: 1px solid var(--linha); }
.bat-cifra-res button:hover { border-color: rgb(var(--destaque-rgb) / .6); }
.bat-cifra-res small { color: var(--texto-3); }
.bat-card-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.bat-card-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--texto-2); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.bat-card-btn svg { width: 14px; height: 14px; }
.bat-card-btn:hover { border-color: var(--laranja); color: var(--laranja); }
.bat-card-btn.principal { background: var(--laranja); border-color: var(--laranja); color: #161616; }
.bat-card-btn.ativo:not(.principal) { color: var(--laranja); border-color: rgb(var(--destaque-rgb) / .6); }
.bat-card-dica { color: var(--texto-3); font-size: 11.5px; font-weight: 500; }
.card-bateria > b { display: none; }
/* Exercício da Oficina Musical: prévia (imagem da tela do exercício) */
.card-exercicio { display: grid; gap: 6px; margin-top: 8px; }
.card-exercicio img { display: block; width: 100%; max-height: 220px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--linha); }
.card-exercicio b { display: inline-flex; align-items: center; gap: 5px; color: var(--laranja); font-size: 12.5px; }
.card-exercicio b svg { width: 14px; height: 14px; }
.exercicio-previa-grande { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--linha); margin-bottom: 8px; }
/* Seletor "Mandar no Ochat" (várias conversas) */
.lista-envio .item-conversa-meio { display: grid; min-width: 0; }
.lista-envio .item-conversa-previa { font-size: 12.5px; color: var(--texto-3); }
.lista-envio .marcar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--linha-forte); color: transparent; flex-shrink: 0; }
.lista-envio .marcar svg { width: 14px; height: 14px; }
.lista-envio .marcado { background: var(--laranja-suave); }
.lista-envio .marcado .marcar { background: var(--laranja); border-color: var(--laranja); color: #161616; }

/* Convite para ligar os avisos (topo das conversas) */
.convite-avisos {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 0 0 12px; padding: 12px;
  border-radius: 14px; background: rgb(var(--destaque-rgb) / .1); border: 1px solid rgb(var(--destaque-rgb) / .45);
  font-size: 13px; color: var(--texto-2); line-height: 1.4;
}
.convite-avisos > svg { width: 20px; height: 20px; color: var(--laranja); margin-top: 1px; }
.convite-avisos b { display: block; color: var(--texto); font-size: 14px; }
.convite-avisos > div { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.convite-avisos .botao-laranja { min-height: 36px; padding: 0 18px; }

/* Disponibilidade (enquete "quem pode servir?") */
.quem-pode { display: grid; gap: 6px; margin: 8px 0 2px; padding-top: 8px; border-top: 1px dashed var(--linha-forte); }
.quem-pode-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.quem-pode-op { font-weight: 700; color: var(--texto-2); margin-right: 2px; }
.quem-pode-pessoa { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 2px; border-radius: 999px; background: rgba(0, 0, 0, .14); }
html[data-theme="claro"] .quem-pode-pessoa { background: rgba(0, 0, 0, .05); }
.quem-pode-pessoa .mini-botao { margin-left: 2px; padding: 2px 8px; font-size: 11.5px; min-height: 0; }
.quem-pode-botao { width: 100%; margin: 4px 0 10px; }

/* Transferir grupo/tema: lista para escolher o novo dono */
.lista-escolha { display: grid; gap: 6px; max-height: 46vh; overflow: auto; }
.item-escolha { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linha); cursor: pointer; font-weight: 600; }
.item-escolha:has(input:checked) { border-color: var(--laranja); background: rgb(var(--destaque-rgb) / .1); }
.item-escolha input { accent-color: var(--laranja); width: 18px; height: 18px; }