/* CLINOTAMEETING1 — 21/10/2026: cores do Clinota (petróleo #0f4c5c e água #2bb3a3) no lugar das do Chateau. */
:root {
  --fundo: #1b1c1f;
  --fundo-2: #26272b;
  --fundo-3: #33353a;
  --texto: #ececee;
  --suave: #a5a7ad;
  --destaque: #2bb3a3;
  --verde: #2e9d5b;
  --vermelho: #e5484d;
  --raio: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
[hidden] { display: none !important; }
.tela { height: 100%; }

/* ---------- entrada ---------- */
.topo { display: flex; align-items: center; gap: 10px; padding: 16px 24px; font-size: 20px; font-weight: 600; }
.topo img { width: 34px; height: 34px; }
.entrada-corpo { display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 24px; min-height: calc(100% - 70px); }
.previa { position: relative; width: min(640px, 92vw); aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--raio); overflow: hidden; }
.previa video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.sem-video { position: absolute; inset: 0; display: grid; place-items: center; color: var(--suave); background: #202124; }
.previa-botoes { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; gap: 14px; justify-content: center; }
.painel-entrada { width: min(380px, 92vw); display: flex; flex-direction: column; gap: 14px; }
.painel-entrada h1 { font-size: 26px; font-weight: 500; margin: 0 0 6px; }
.painel-entrada label { display: flex; flex-direction: column; gap: 4px; color: var(--suave); font-size: 13px; }
.painel-entrada input, .painel-entrada select { background: var(--fundo-2); border: 1px solid var(--fundo-3);
  border-radius: 10px; padding: 10px 12px; color: var(--texto); font-size: 15px; }
/* EVENTOS1: minmax(0, 1fr) (e nao 1fr) e min-width: 0: o select de microfone com nome enorme esticava a coluna e a pagina
   ganhava barra de rolagem horizontal. Agora o nome longo fica cortado dentro da caixa. */
.dispositivos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.dispositivos label { min-width: 0; }
.painel-entrada select { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.painel-entrada input { min-width: 0; max-width: 100%; }
#btn-nova { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* "Nova reunião — <titulo>" */
.linha { display: flex; gap: 8px; }
.linha input { flex: 1; min-width: 0; }
.ou { text-align: center; color: var(--suave); font-size: 13px; }
.primario { background: var(--destaque); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; }
.primario:hover { filter: brightness(1.1); }
.secundario { background: var(--fundo-3); padding: 10px 16px; border-radius: 10px; }
.secundario:hover { background: #3f4147; }
.mensagem { color: #ffb4b4; min-height: 20px; margin: 0; }

/* ---------- botoes redondos ---------- */
.redondo { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fundo-3); transition: background .15s; position: relative; }
.redondo:hover { background: #45474d; }
.redondo svg { width: 22px; height: 22px; fill: currentColor; }
.redondo.desligado { background: var(--vermelho); }
.redondo.ativo { background: var(--destaque); }
.redondo.sair { background: var(--vermelho); width: 64px; border-radius: 24px; }
.redondo .contador { position: absolute; top: -2px; right: -2px; background: var(--destaque); color: #fff;
  border-radius: 10px; font-size: 11px; padding: 0 5px; min-width: 18px; }

/* ---------- sala ---------- */
#sala { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr auto; }
.barra-topo { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 10px 18px; }
.info-sala { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.info-sala button { background: var(--fundo-3); padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 400; }
#relogio { margin-left: auto; color: var(--suave); font-variant-numeric: tabular-nums; }
.selo-gravando { background: rgba(229, 72, 77, .18); color: #ff8f93; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.aviso { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); background: #5a4a12; color: #ffe08a;
  padding: 8px 16px; border-radius: 10px; z-index: 5; }
.palco { grid-column: 1; min-height: 0; min-width: 0; padding: 6px 12px; display: flex; gap: 10px; }
.palco.tam-p { --faixa: 96px; }
.palco.tam-m { --faixa: 140px; }
.palco.tam-g { --faixa: 200px; }
.grade { flex: 1; display: grid; gap: 10px; min-height: 0; min-width: 0; align-content: center;
  grid-template-columns: repeat(var(--colunas, 1), 1fr); grid-auto-rows: var(--altura, 1fr); }
/* Automatico com apresentacao (ou alguem fixado): principal em cima, faixa de pessoas embaixo */
.palco.modo-cima { flex-direction: column; }
.palco.modo-cima .grade { flex: 0 0 var(--faixa); display: flex; overflow-x: auto; overflow-y: hidden; }
.palco.modo-cima .quadro { flex: 0 0 calc(var(--faixa) * 16 / 9); }
/* centraliza a faixa com margens automaticas: com muita gente ela rola sem esconder o comeco */
.palco.modo-cima .grade::before, .palco.modo-lateral .grade::before { content: ""; margin: auto 0 auto auto; }
.palco.modo-cima .grade::after, .palco.modo-lateral .grade::after { content: ""; margin: auto auto auto 0; }
/* Barra lateral: principal a esquerda, pessoas empilhadas a direita */
.palco.modo-lateral .grade { flex: 0 0 calc(var(--faixa) * 16 / 9); display: flex; flex-direction: column; overflow-y: auto; }
.palco.modo-lateral .grade::before { margin: auto 0 0; }
.palco.modo-lateral .grade::after { margin: 0 0 auto; }
.palco.modo-lateral .quadro { flex: 0 0 var(--faixa); }
/* Destaque: so o principal */
.palco.modo-destaque .grade { display: none; }

#principal { flex: 1; min-height: 0; min-width: 0; background: #000; border-radius: var(--raio); overflow: hidden;
  position: relative; display: grid; place-items: center; }
#principal video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#principal.pessoa { background: #202124; }
#principal.local video { transform: scaleX(-1); }
.principal-avatar span { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center;
  font-size: 56px; font-weight: 600; color: #fff; }
/* quem apresenta: aviso e botoes por cima da previa da propria apresentacao */
#principal.apresentando video { top: 52px; height: calc(100% - 52px); }  /* a barra fica acima, sem cobrir o slide */
.apresentando-barra { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center;
  gap: 8px; background: var(--fundo-2); padding: 4px 4px 4px 14px; border-radius: 12px; max-width: calc(100% - 24px); white-space: nowrap; }
.apresentando-barra span { font-size: 14px; font-weight: 600; }
.apresentando-barra button { padding: 6px 12px; border-radius: 8px; font-size: 13px; }
.parar-apresentacao { background: var(--vermelho); color: #fff; font-weight: 600; }
.legenda-principal { position: absolute; left: 12px; bottom: 10px; background: rgba(0,0,0,.6); padding: 3px 10px; border-radius: 8px; font-size: 13px; }
#principal .desafixar { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 6px;
  background: #f5a524; color: #1b1b1b; padding: 6px 12px; border-radius: 18px; font-size: 13px; font-weight: 600; }
#principal .desafixar svg { width: 16px; height: 16px; fill: currentColor; }

.quadro { position: relative; background: #202124; border-radius: var(--raio); overflow: hidden; min-height: 0;
  outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .15s; container-type: size; }
.quadro.falando { outline-color: var(--destaque); }
.quadro.fixado { outline-color: #f5a524; }
.quadro video { width: 100%; height: 100%; object-fit: cover; }
.quadro.local video { transform: scaleX(-1); }
.quadro.tela { background: #000; }
.quadro.tela video { object-fit: contain; }
.quadro .avatar { position: absolute; inset: 0; display: grid; place-items: center; }
.quadro .avatar span { height: min(84px, 48cqh); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font-size: min(32px, 18cqh); font-weight: 600; color: #fff; }
.quadro .fixar { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.6); display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.quadro .fixar svg { width: 16px; height: 16px; fill: #fff; }
.quadro:hover .fixar, .quadro.fixado .fixar { opacity: 1; }
.quadro.fixado .fixar { background: #f5a524; }
@container (max-height: 110px) { .quadro .nome { font-size: 11px; bottom: 4px; left: 4px; padding: 1px 6px; } .quadro .fixar { top: 4px; right: 4px; width: 24px; height: 24px; } }
.quadro .nome { position: absolute; left: 10px; bottom: 8px; background: rgba(0,0,0,.55); padding: 2px 10px;
  border-radius: 8px; font-size: 13px; display: flex; gap: 6px; align-items: center; max-width: calc(100% - 20px); }
.quadro .nome svg { width: 14px; height: 14px; fill: #ff8f93; flex: none; }
.quadro .nome b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- lateral ---------- */
#lateral { grid-row: 2 / 4; grid-column: 2; width: 340px; background: var(--fundo-2); margin: 6px 12px 12px 0;
  border-radius: var(--raio); display: flex; flex-direction: column; min-height: 0; }
.lateral-topo { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.lateral-topo h2 { margin: 0; font-size: 17px; font-weight: 600; }
.lateral-topo button { background: none; font-size: 18px; color: var(--suave); }
#chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#mensagens { flex: 1; overflow-y: auto; padding: 0 16px; }
.msg { margin: 10px 0; }
.msg .autor { font-size: 13px; font-weight: 600; } .msg .hora { color: var(--suave); font-size: 12px; margin-left: 6px; }
.msg .corpo { white-space: pre-wrap; word-wrap: break-word; }
#form-chat { display: flex; gap: 8px; padding: 12px; }
#form-chat input { flex: 1; background: var(--fundo-3); border: 0; border-radius: 20px; padding: 9px 14px; }
#form-chat button { background: var(--destaque); color: #fff; border-radius: 20px; padding: 0 14px; }
#lista-pessoas { padding: 0 16px; overflow-y: auto; }
.pessoa { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--fundo-3); }
.pessoa .bolinha { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; flex: none; }
.pessoa .papel { color: var(--suave); font-size: 12px; }
.pessoa svg { margin-left: auto; width: 18px; height: 18px; fill: var(--suave); }

/* ---------- controles ---------- */
.controles { grid-column: 1; display: flex; justify-content: center; gap: 12px; padding: 10px 0 16px; }
.controles .gravar.ativo { background: var(--vermelho); }
.menu-gravar { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); background: var(--fundo-2);
  border: 1px solid var(--fundo-3); border-radius: var(--raio); padding: 8px; width: 330px; z-index: 9;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.menu-titulo { color: var(--suave); font-size: 13px; padding: 4px 10px 6px; }
.menu-gravar button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  background: none; padding: 10px; border-radius: 10px; text-align: left; }
.menu-gravar button:hover { background: var(--fundo-3); }
.menu-gravar button span { color: var(--suave); font-size: 13px; }
.menu-gravar button.escolhido { background: rgba(79, 140, 255, .16); }
.menu-gravar button.escolhido b::after { content: "  ✓"; color: var(--destaque); }
.tamanhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 2px 6px 6px; }
.tamanhos button { background: var(--fundo-3); border-radius: 8px; padding: 8px 0; text-align: center; align-items: center; }
.tamanhos button.escolhido { background: var(--destaque); color: #fff; }
.menu-dica { color: var(--suave); font-size: 12px; padding: 6px 10px 4px; border-top: 1px solid var(--fundo-3); margin-top: 4px; }
.ativar-som { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--destaque);
  color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 600; z-index: 9; }

/* ---------- saiu / toast ---------- */
#saiu { display: grid; place-items: center; }
.saiu-caixa { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.saiu-caixa h1 { font-weight: 500; margin: 0; }
.saiu-caixa p { color: var(--suave); margin: 0 0 8px; }
.toast { position: fixed; left: 24px; bottom: 24px; background: #3c4043; padding: 12px 18px; border-radius: 10px;
  max-width: 420px; z-index: 10; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
/* GRAVACAOSEGURA1 — pedido do Carlos em 2026-10-17: aviso fixo enquanto a gravacao termina de subir ("Salvando a gravacao...
   faltam N pedacos"). Fica no canto e o toast sobe para ficar acima dele (o toast e um so e qualquer "fulano entrou"
   passaria por cima). Na reuniao ele sobe acima da barra de botoes (senao o microfone ficaria embaixo do aviso, que
   pode durar minutos sem internet). Amarelo na borda quando esta sem conexao (e preciso nao fechar a aba).
   --base-status-gravacao: distancia do aviso ao fundo; --altura-status-gravacao: altura real dele (medida no app.js). */
body { --base-status-gravacao: 24px; }
body:has(#sala:not([hidden])) { --base-status-gravacao: 96px; }
.status-gravacao { position: fixed; left: 24px; bottom: var(--base-status-gravacao); max-width: 420px; z-index: 9; padding: 10px 16px;
  background: #3c4043; color: #ececee; font-size: 14px; line-height: 1.4; border-radius: 10px;
  border-left: 4px solid var(--destaque); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.status-gravacao.sem-conexao { border-left-color: #ffc400; }
body:has(.status-gravacao:not([hidden])) .toast { bottom: calc(var(--base-status-gravacao) + var(--altura-status-gravacao, 56px) + 12px); }

/* ---------- efeitos de fundo ---------- */
.menu-efeitos { width: 344px; }
.efeitos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 4px 4px; }
.menu-gravar .efeitos button, .enviar-fundo { display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 4px; border-radius: 10px; text-align: center; cursor: pointer; }
.enviar-fundo:hover { background: var(--fundo-3); }
.efeitos span { font-size: 12px; color: var(--suave); }
.efeitos button.escolhido span { color: var(--texto); }
.miniatura { position: relative; display: grid; place-items: end center; aspect-ratio: 16 / 9; border-radius: 8px;
  overflow: hidden; background: #3a3d44 center / cover no-repeat; outline: 2px solid transparent; outline-offset: -2px; }
.efeitos button.escolhido .miniatura { outline-color: var(--destaque); }
.miniatura svg { position: relative; width: 58%; height: 80%; fill: rgba(255,255,255,.92); filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.miniatura.sem-efeito, .miniatura.mais { place-items: center; }
.miniatura.sem-efeito svg, .miniatura.mais svg { width: 40%; height: 60%; fill: var(--suave); filter: none; }
/* desfoque: uma "estante" atras da silhueta, borrada mais ou menos */
.miniatura.borrada::before { content: ""; position: absolute; inset: -6px; filter: blur(4px);
  background: repeating-linear-gradient(90deg, #5d6472 0 9px, #c8a96e 9px 13px, #3f6d8f 13px 22px, #8b5e57 22px 26px); }
.miniatura.borrada.leve::before { filter: blur(1.5px); }
.menu-efeitos.carregando .efeitos { opacity: .55; pointer-events: none; }
.menu-efeitos.carregando .menu-titulo::after { content: " — aplicando..."; }

/* ---------- janela flutuante (Picture-in-Picture) ---------- */
body.flutuante { display: flex; flex-direction: column; overflow: hidden; }
.f-grade { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: grid; gap: 8px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.f-grade .quadro { aspect-ratio: 16 / 9; }
.f-controles { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px 8px 10px; }
.f-controles .redondo { width: 40px; height: 40px; }
.f-controles .redondo svg { width: 20px; height: 20px; }
.f-parar { background: var(--vermelho); color: #fff; font-weight: 600; font-size: 13px; padding: 10px 14px; border-radius: 20px; }

/* ---------- VPSCRAFT1: sala de espera, aviso com botao, pagina simples ---------- */
.nota-entrada { margin: 0; color: var(--suave); }
.bloco-espera { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 12px;
  background: var(--fundo-2); border: 1px solid var(--fundo-3); border-radius: var(--raio); text-align: center; }
.texto-espera { margin: 0; color: var(--texto); }
.girando { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--fundo-3);
  border-top-color: var(--destaque); animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 3s; } }
.pedidos-entrada { position: absolute; top: 60px; right: 16px; z-index: 9; width: min(360px, calc(100vw - 32px));
  background: var(--fundo-2); border: 1px solid var(--fundo-3); border-radius: var(--raio); padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 8px; }
.pedidos-titulo { font-weight: 600; font-size: 14px; }
.pedido { display: flex; align-items: center; gap: 10px; }
.pedido .bolinha { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; color: #fff; flex: none; }
.pedido .quem { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pedido button { padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; }
.pedido .aceitar { background: var(--destaque); color: #fff; }
.pedido .recusar { background: var(--fundo-3); }
.pedido button:disabled { opacity: .5; cursor: default; }
.toast-acao { display: block; margin-top: 8px; background: var(--destaque); color: #fff; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; }
.recomendado { font-style: normal; font-weight: 500; font-size: 11px; color: var(--verde); border: 1px solid var(--verde);
  border-radius: 6px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
body.pagina-simples { display: grid; place-items: center; padding: 24px; }

/* ---------- VPSCRAFT1: reunioes gravadas (/reunioes) ---------- */
body.pagina-reunioes { height: auto; min-height: 100%; }
.reunioes { max-width: 860px; margin: 0 auto; padding: 8px 24px 40px; }
.reunioes-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.reunioes-cabeca h1 { font-size: 24px; font-weight: 500; margin: 0; }
.reunioes a.primario, .reunioes a.secundario { text-decoration: none; display: inline-block; }
.reunioes a.secundario { color: var(--texto); }   /* link no fundo escuro: sem o azul padrao */
.lista-reunioes { display: flex; flex-direction: column; gap: 12px; }
.cartao-reuniao { background: var(--fundo-2); border: 1px solid var(--fundo-3); border-radius: var(--raio); padding: 14px 16px; }
.cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cartao-topo h2 { font-size: 17px; font-weight: 600; margin: 0; }
.cartao-meta { color: var(--suave); font-size: 13px; margin-top: 4px; }
.cartao-detalhe { color: #ffb4b4; font-size: 13px; margin-top: 6px; }
.cartao-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cartao-acoes a { padding: 8px 14px; font-size: 14px; }
.selo { flex: none; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--fundo-3); }
.selo.pronta { background: rgba(46, 157, 91, .2); color: #7fdba3; }
.selo.andamento { background: rgba(79, 140, 255, .18); color: #9dbcff; }
.selo.erro { background: rgba(229, 72, 77, .2); color: #ffb4b4; }
.selo.aviso { background: rgba(255, 196, 0, .15); color: #ffe08a;
  position: static; transform: none; z-index: auto; }   /* EVENTOS1: sem isto herdava o .aviso do banner de conexao (position: absolute) e o selo "So a transcricao" fugia do lugar */

/* ---------- EVENTOS1: barra de eventos na tela inicial (so o anfitriao, na VPS) ----------
   Computador: coluna a esquerda, colada no alto ao rolar. Celular (< 900 px): vai para cima da tela, fechada. */
#entrada.com-eventos { --larg-eventos: clamp(280px, 26vw, 360px); display: grid; height: auto; min-height: 100%;
  grid-template-columns: calc(var(--larg-eventos) + 16px) minmax(0, 1fr); grid-template-rows: auto 1fr; }
#entrada.com-eventos > .topo { grid-column: 1 / -1; }
#entrada.com-eventos > .entrada-corpo { grid-column: 2; grid-row: 2; min-height: 0; gap: 32px; }
#entrada.com-eventos .previa { flex: 1 1 380px; width: auto; max-width: 640px; min-width: 0; }
#entrada.com-eventos .painel-entrada { flex: 0 1 380px; min-width: 0; }
#eventos { grid-column: 1; grid-row: 2; position: sticky; top: 0; align-self: start; height: calc(100vh - 82px);
  margin: 0 0 16px 16px; background: var(--fundo-2); border-radius: var(--raio); overflow-y: auto; color-scheme: dark; }
.eventos-alternar { display: none; }
.eventos-conteudo { padding: 14px 10px 16px; }
.eventos-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 10px; }
.eventos-cabeca h2 { margin: 0; font-size: 17px; font-weight: 600; }
#btn-novo-evento { padding: 7px 12px; font-size: 13.5px; background: rgba(79, 140, 255, .18); color: #b4cbff; }
#btn-novo-evento:hover { background: rgba(79, 140, 255, .28); }
.eventos-estado { margin: 4px 6px 8px; color: var(--suave); font-size: 13.5px; }
.eventos-estado.erro { color: #ffb4b4; }
.ev-lista, .ev-reunioes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-cab { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 9px 10px; border-radius: 10px;
  background: none; text-align: left; color: var(--texto); }
.ev-cab:hover { background: var(--fundo-3); }
.ev.sel > .ev-cab { background: rgba(79, 140, 255, .16); box-shadow: inset 3px 0 0 var(--destaque); }
.ev-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-titulo { font-weight: 600; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ev.sel .ev-titulo { -webkit-line-clamp: 4; }
.ev-meta { color: var(--suave); font-size: 12.5px; }
.ev-seta { flex: none; margin-top: 2px; color: var(--suave); font-size: 14px; transform: rotate(-90deg); transition: transform .15s; }
.ev.sel > .ev-cab .ev-seta, .ev.avulsas.aberto > .ev-cab .ev-seta { transform: none; }
.ev.avulsas { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--fundo-3); border-radius: 0; }
.ev-corpo { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px 10px; padding-left: 8px; border-left: 2px solid var(--fundo-3); }
.ev-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev-confirma-texto { font-size: 13px; color: var(--texto); margin-right: 2px; }
/* APAGARREUNIAO1: o "Apagar" da reuniao fica na ponta direita, longe do "Entrar"; a confirmacao entra no lugar dos botoes */
.reuniao-acoes > .perigo { margin-left: auto; }
.reuniao-confirma { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 8px;
  background: rgba(229, 72, 77, .1); border: 1px solid rgba(229, 72, 77, .35); }
.reuniao-confirma-texto { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto); }
.reuniao-confirma-nota { margin: 0; font-size: 12.5px; color: var(--suave); line-height: 1.35; }
.ev-vazio { margin: 0; color: var(--suave); font-size: 12.5px; }
.mini { display: inline-block; padding: 5px 10px; border-radius: 8px; background: var(--fundo-3); color: var(--texto);
  font-size: 12.5px; line-height: 1.3; text-decoration: none; }
.mini:hover { background: #3f4147; }
.mini.destaque { background: rgba(79, 140, 255, .2); color: #b4cbff; }
.mini.destaque:hover { background: rgba(79, 140, 255, .3); }
.mini.perigo { color: #ffb4b4; }
.mini:disabled { opacity: .5; cursor: default; }
.ev-reunioes { gap: 8px; }
.reuniao { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--fundo); border: 1px solid var(--fundo-3); border-radius: 10px; }
.reuniao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reuniao-quando { min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover { flex: 0 1 128px; min-width: 0; padding: 3px 6px; font-size: 12px; color: var(--suave); background: var(--fundo-2);
  border: 1px solid var(--fundo-3); border-radius: 8px; text-overflow: ellipsis; }
.reuniao-sem { margin: 0; color: var(--suave); font-size: 12.5px; font-style: italic; }
.grav { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.grav + .grav { padding-top: 7px; border-top: 1px dashed var(--fundo-3); }
.grav-titulo { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grav-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.grav-meta { color: var(--suave); font-size: 12.5px; }
.grav-detalhe { color: #ffb4b4; font-size: 12px; overflow-wrap: anywhere; }
/* QUALIDADEAUDIO1 — pedido do Carlos em 2026-10-17: o que o servidor achou de errado no audio (avisos_audio) */
.grav-aviso-audio { color: #ffe08a; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.grav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-form { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 10px; background: var(--fundo);
  border: 1px solid var(--fundo-3); border-radius: 10px; }
.ev-form label { display: flex; flex-direction: column; gap: 3px; color: var(--suave); font-size: 12.5px; }
.ev-form input { width: 100%; min-width: 0; padding: 8px 10px; font-size: 14px; color: var(--texto); background: var(--fundo-2);
  border: 1px solid var(--fundo-3); border-radius: 8px; }
.ev-form-botoes { display: flex; gap: 8px; }
.ev-form-botoes button { padding: 8px 14px; font-size: 14px; }
.ev-form-botoes button:disabled { opacity: .55; cursor: default; }
.ev-form-erro { font-size: 13px; }
.ev-form-erro:empty { display: none; }

@media (max-width: 899px) {
  #entrada.com-eventos { display: block; }
  #entrada.com-eventos > .entrada-corpo { gap: 24px; }
  #entrada.com-eventos .previa { flex: none; width: min(640px, 92vw); }
  #entrada.com-eventos .painel-entrada { flex: none; }
  #eventos { position: static; height: auto; width: min(640px, 92vw); margin: 0 auto 4px; overflow: visible; }
  .eventos-alternar { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    padding: 13px 16px; background: none; border-radius: var(--raio); text-align: left; font-weight: 600; }
  .eventos-seta { color: var(--suave); transition: transform .15s; }
  #eventos.aberto .eventos-seta { transform: rotate(180deg); }
  .eventos-conteudo { display: none; max-height: 68vh; overflow-y: auto; padding: 0 10px 14px; }
  #eventos.aberto .eventos-conteudo { display: block; }
  .eventos-cabeca h2 { display: none; }
  .eventos-cabeca { justify-content: flex-end; }
}

@media (max-width: 760px) {
  #sala { grid-template-columns: 1fr; }
  #lateral { position: fixed; inset: 0; width: auto; margin: 0; border-radius: 0; z-index: 8; }
  .palco.modo-lateral { flex-direction: column; }
  .palco.modo-lateral .grade { flex: 0 0 var(--faixa); flex-direction: row; overflow-x: auto; }
  .palco.modo-lateral .grade::before { margin: auto 0 auto auto; }
  .palco.modo-lateral .grade::after { margin: auto auto auto 0; }
  .palco.modo-lateral .quadro { flex: 0 0 calc(var(--faixa) * 16 / 9); }
  /* celular: botoes menores e, se nao couberem, quebram em duas linhas (em vez de encolher a pagina inteira) */
  .controles { gap: 6px; flex-wrap: wrap; padding: 8px 8px 12px; }
  .redondo { width: 40px; height: 40px; } .redondo.sair { width: 52px; }
  .apresentando-barra span { display: none; }  /* no celular ficam so os botoes */
  .pedidos-entrada { top: 52px; right: 8px; left: 8px; width: auto; }
  .toast { left: 8px; right: 8px; bottom: 120px; max-width: none; }
  body, body:has(#sala:not([hidden])) { --base-status-gravacao: 120px; }   /* GRAVACAOSEGURA1: acima dos botoes (em duas linhas), como o toast */
  .status-gravacao { left: 8px; right: 8px; max-width: none; }
  .reunioes { padding: 4px 12px 32px; }
  .reunioes-cabeca h1 { font-size: 20px; }
}

/* ---------- MODOCLARO1: tela inicial em modo claro, com as cores do painel da Amelie ----------
   Carlos, 17/10/2026: "a Amelie estamos com modo claro". Vale para a #entrada inteira (barra de eventos, painel de
   entrada e sala de espera do convidado). A previa da camera e a sala da reuniao (#sala) continuam escuras (video).
   Fonte Inter hospedada aqui mesmo (web/vendor/inter-5.3.0, licenca OFL), como no painel, sem depender de outro site. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/vendor/inter-5.3.0/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/vendor/inter-5.3.0/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/vendor/inter-5.3.0/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/vendor/inter-5.3.0/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
html, body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
html:has(#entrada:not([hidden])), html:has(#entrada:not([hidden])) body { background: #fcfcfc; }

#entrada {
  --fundo: #fcfcfc; --fundo-2: #ffffff; --fundo-3: #e6e6e6; --linha-forte: #dadada; --hover: #f5f5f5;
  --texto: #242b3b; --texto-2: #4a5163; --suave: #6e7482;
  --marca: #0f4c5c; --marca-texto: #0f4c5c; --marca-suave: #eaf7f5; --marca-linha: #a7ddd6; --sobre-marca: #ffffff;
  --destaque: #0f4c5c; --vermelho-texto: #b42318;
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  background: var(--fundo); color: var(--texto); color-scheme: light;
}
/* a previa da camera continua com as cores escuras (os botoes redondos ficam em cima do video) */
#entrada .previa { --fundo-3: #33353a; --texto: #ececee; --suave: #c4c7cc; --destaque: #2bb3a3; color: #ececee;
  box-shadow: var(--sombra); }
#entrada .primario { background: var(--marca); color: var(--sobre-marca); }
#entrada .primario:hover { filter: brightness(.95); }
#entrada .secundario { background: var(--fundo-2); color: var(--texto); border: 1px solid var(--linha-forte); }
#entrada .secundario:hover { background: var(--hover); }
#entrada .painel-entrada input, #entrada .painel-entrada select { background: var(--fundo-2); border-color: var(--linha-forte); }
#entrada input::placeholder { color: #9aa0ab; }
#entrada input:focus-visible, #entrada select:focus-visible, #entrada button:focus-visible, #entrada a:focus-visible {
  outline: 2px solid var(--marca); outline-offset: 1px; }
#entrada .mensagem, #entrada .eventos-estado.erro, #entrada .grav-detalhe { color: var(--vermelho-texto); }

/* barra de eventos */
#entrada #eventos { background: var(--fundo-2); border: 1px solid var(--fundo-3); box-shadow: var(--sombra); color-scheme: light; }
#entrada #btn-novo-evento { background: var(--marca-suave); color: var(--marca-texto); border: 1px solid var(--marca-linha); }
#entrada #btn-novo-evento:hover { background: #e8f2c8; }
#entrada .ev-cab:hover { background: var(--hover); }
#entrada .ev.sel > .ev-cab { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
#entrada .ev-corpo { border-left-color: var(--fundo-3); }
#entrada .reuniao { background: var(--fundo); }
#entrada .mini { background: #f4f5f6; color: var(--texto); border: 1px solid var(--fundo-3); }
#entrada .mini:hover { background: #eceef0; }
#entrada .mini.destaque { background: var(--marca-suave); color: var(--marca-texto); border-color: var(--marca-linha); }
#entrada .mini.destaque:hover { background: #e8f2c8; }
#entrada .mini.perigo { color: var(--vermelho-texto); }
#entrada .mover { color: var(--texto-2); border-color: var(--linha-forte); }
#entrada .selo.pronta { background: var(--marca-suave); color: var(--marca-texto); }
#entrada .selo.andamento { background: #eaf1fe; color: #2557b8; }
#entrada .selo.erro { background: #fdecec; color: var(--vermelho-texto); }
#entrada .selo.aviso { background: #fff3d6; color: #8a5200; }
#entrada .grav-aviso-audio { color: #8a5200; }

/* ---------- MOLDURA1: a area da camera e do "Pronto para começar?" num cartao com a linha fina cinza ----------
   Carlos, 17/10/2026: "a moldura é na parte externa, uma linha fina cinza que já estamos usando" (a mesma da barra
   de Eventos). So no computador; no celular a tela continua corrida. */
@media (min-width: 900px) {
  #entrada > .entrada-corpo { background: var(--fundo-2); border: 1px solid var(--fundo-3); border-radius: var(--raio);
    box-shadow: var(--sombra); margin: 0 16px 16px; min-height: calc(100vh - 82px); }
  #entrada.com-eventos > .entrada-corpo { margin: 0 16px 16px 16px; align-self: start; min-height: calc(100vh - 82px); }
}

/* ---------- CARTOESEVENTOS1: cada evento num cartao, como as conversas do painel da Amelie ----------
   Carlos, 17/10/2026: "use essa mesma divisão entre conversas para os eventos também, a borda, deixando um ambiente
   mais organizado". Mesmos valores do .conversation do painel: fundo branco, borda #e6e6e6, raio 10px; passar o mouse
   = #f5f5f5; escolhido = verde suave com a borda verde (sem a faixa lateral). Avulsas vira um cartao igual. */
#entrada .ev-lista { gap: 6px; }
#entrada .ev { background: var(--fundo-2); border: 1px solid var(--fundo-3); border-radius: 10px; overflow: hidden; }
#entrada .ev-cab { border-radius: 0; padding: 11px 10px; }
#entrada .ev-cab:hover { background: var(--hover); }
#entrada .ev.sel { background: var(--marca-suave); border-color: var(--marca-linha); }
#entrada .ev.sel > .ev-cab { background: transparent; box-shadow: none; }
#entrada .ev.sel > .ev-cab:hover { background: rgba(146, 185, 0, .08); }
#entrada .ev-corpo { margin: 0; padding: 0 10px 10px; border-left: 0; }
#entrada .ev.sel .reuniao { background: var(--fundo-2); }
#entrada .ev.avulsas { margin-top: 10px; padding-top: 0; border-top: 1px solid var(--fundo-3); border-radius: 10px; }
#entrada .ev.avulsas.aberto { background: var(--fundo); }

/* ---------- MESMAABA1: a barra dos sistemas do painel da Amelie, na tela inicial do anfitriao ----------
   Mesmos valores da .sys-rail do painel: 76 px fixa a esquerda, fundo branco com a linha fina; botoes de 60 px com
   icone e nome; o do sistema atual (Reuniões) em verde suave com a faixa verde. No celular vira uma faixa no alto. */
#entrada .sys-rail { position: fixed; left: 0; top: 0; bottom: 0; width: 76px; z-index: 15; background: var(--fundo-2);
  border-right: 1px solid var(--fundo-3); display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 0; zoom: var(--barra-escala, 1); }
#entrada .sys-rail[hidden] { display: none; }
#entrada .sys-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--marca); color: var(--sobre-marca);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
#entrada .sys-btn { width: 60px; height: 60px; border-radius: 10px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; color: var(--texto-2); text-decoration: none; font-size: 11px; font-weight: 600; }
#entrada .sys-btn svg { width: 22px; height: 22px; fill: currentColor; }
#entrada .sys-btn:hover { background: var(--hover); color: var(--texto); }
#entrada .sys-btn.on { background: var(--marca-suave); color: var(--marca-texto); box-shadow: inset 3px 0 0 var(--marca); }
#entrada.com-rail { padding-left: calc(76px * var(--barra-escala, 1)); }
/* BARRAIGUAL1: --barra-escala vem do app.js (zoom do painel / zoom daqui), para a barra ficar do tamanho da do painel */
@media (max-width: 899px) {
  #entrada .sys-rail { position: static; width: auto; flex-direction: row; justify-content: center; gap: 6px;
    padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--fundo-3); }
  #entrada .sys-mark { display: none; }
  #entrada .sys-btn { width: 72px; height: 50px; font-size: 10.5px; }
  #entrada .sys-btn.on { box-shadow: inset 0 -3px 0 var(--marca); }
  #entrada.com-rail { padding-left: 0; }
}

/* ---------- CONVITES1 — pedido do Carlos em 2026-10-17: contatos do evento, reuniao agendada e convite pelo WhatsApp da Amelie ----------
   Mesmo visual dos cartoes de CARTOESEVENTOS1: caixa branca com a linha fina cinza, raio 10px, botoes .mini e selos .selo.
   Tudo cabe na coluna estreita da barra (e nos 390 px do celular): textos longos quebram em vez de empurrar a largura. */
.reuniao-topo { flex-wrap: wrap; }
.reuniao-topo .mover { margin-left: auto; }
#entrada .reuniao.agendada { border-color: var(--marca-linha); }
#entrada .reuniao.agendada .reuniao-quando { color: var(--marca-texto); }
.reuniao-meta { margin: 0; color: var(--suave); font-size: 12.5px; }
.reuniao-acoes { margin-top: 2px; }

/* agendar: data e hora lado a lado */
.ev-corpo > .ag-form, .ct-painel .ev-form { margin: 0; }
.ag-campos { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }

/* contatos */
.ct-secao { display: flex; flex-direction: column; padding: 10px; background: var(--fundo); border: 1px solid var(--fundo-3);
  border-radius: 10px; min-width: 0; }
#entrada .ev.sel .ct-secao { background: var(--fundo-2); }
.ct-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0;
  background: none; color: var(--texto); text-align: left; }
.ct-titulo { font-size: 13px; font-weight: 700; }
.ct-cab .ev-seta { margin-top: 0; }
.ct-cab[aria-expanded="true"] .ev-seta { transform: none; }
.ct-corpo { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ct-adicionar { display: flex; flex-wrap: wrap; gap: 6px; }
#entrada .ct-adicionar .mini[aria-pressed="true"] { background: var(--marca-suave); color: var(--marca-texto); border-color: var(--marca-linha); }
.ct-painel:empty, .ct-lista:empty { display: none; }
.ct-lista, .ct-res-lista, .ct-num-lista, .cv-lista { list-style: none; margin: 0; padding: 0; }
.ct, .ct-res, .ct-num, .cv-item { padding: 8px 0; border-top: 1px solid var(--fundo-3); }
.ct:first-child, .ct-res:first-child, .ct-num:first-child, .cv-item:first-child { border-top: 0; }
.ct { display: flex; align-items: center; gap: 8px; }
.ct-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-nome { font-weight: 600; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.ct-nome.sem { font-weight: 500; font-style: italic; color: var(--suave); }
.ct-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ct-fone { color: var(--suave); font-size: 12.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#entrada .ct-selo { padding: 1px 8px; font-size: 11px; color: var(--texto-2); }
.ct-x { flex: none; width: 32px; height: 32px; border-radius: 8px; background: none; color: var(--suave); font-size: 14px; line-height: 1; }
.ct-x:hover { background: #fdecec; color: var(--vermelho-texto); }
.ct-x:disabled { opacity: .5; cursor: default; }

/* digitar / buscar na Amelie / numeros da conversa / convidar: caixa igual a do formulario de evento */
.ct-dica { margin: 0; color: var(--suave); font-size: 12.5px; }
.ct-estado { margin: 0; color: var(--suave); font-size: 12.5px; }
.ct-estado:empty, .ct-ok:empty { display: none; }
#entrada .ct-estado.erro { color: var(--vermelho-texto); }
.ct-ok { margin: 0; color: var(--marca-texto); font-size: 12.5px; font-weight: 600; }
.ct-erro { margin: 4px 0 0; color: var(--vermelho-texto); font-size: 12.5px; overflow-wrap: anywhere; }
.ct-busca-form { display: block; }
.ct-res-lista.carregando { opacity: .55; }
.ct-res-topo { display: flex; align-items: center; gap: 8px; }
.ct-res-topo .mini { flex: none; }
.ev-form input.ct-nome-campo { margin-top: 6px; }
.ev-form input[type="checkbox"], .cv-painel input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 2px 0 0;
  flex: none; accent-color: var(--marca-texto); }
.ct-conv-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ct-conv-rotulo { width: 100%; color: var(--suave); font-size: 12px; }
.ct-conv-txt { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ct-nobr { white-space: nowrap; }
/* (".ev-form label" e mais forte que so ".ct-num-rotulo": sem o primeiro seletor a caixa de marcar ficaria em cima do texto, em coluna) */
.ct-num-rotulo, .cv-rotulo, .ev-form .ct-num-rotulo { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; cursor: pointer;
  color: var(--texto); font-size: 13px; }
.ct-trecho { color: var(--suave); font-size: 12px; font-style: italic; overflow-wrap: anywhere; }
.ct-num > .selo { display: inline-block; margin: 4px 0 0 24px; }
.ct-acoes-fixas { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 6px; margin-top: 2px; padding-top: 8px;
  background: var(--fundo); border-top: 1px solid var(--fundo-3); }
.ct-acoes-fixas .primario { width: 100%; padding: 9px 14px; font-size: 14px; }
.ct-acoes-fixas .primario:disabled { opacity: .55; cursor: default; }
.ct-form .ev-form-botoes button:disabled, .cv-painel .ev-form-botoes button:disabled { opacity: .55; cursor: default; }
.cv-painel { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; padding: 10px; background: var(--fundo);
  border: 1px solid var(--fundo-3); border-radius: 10px; min-width: 0; }
.cv-titulo { margin: 0; font-size: 13px; font-weight: 700; }
.cv-dica { margin: 0; color: var(--suave); font-size: 12.5px; }
.cv-painel > .mini { align-self: flex-start; }
.cv-status { margin: 3px 0 0 24px; font-size: 12px; overflow-wrap: anywhere; }
#entrada .cv-status.ok { color: var(--marca-texto); }
#entrada .cv-status.erro { color: var(--vermelho-texto); }

/* tela do convidado: a data da reuniao agendada, logo abaixo do titulo */
#entrada .quando-convite { margin: -4px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--marca-suave);
  border: 1px solid var(--marca-linha); color: var(--marca-texto); font-size: 14px; font-weight: 600; text-wrap: balance; }
/* APAGARREUNIAO1: reuniao cancelada: o aviso em vermelho e, para o convidado, sem camera, nome nem "Participar" */
#entrada .quando-convite.cancelada { background: #fdecec; border-color: #f5c2c0; color: var(--vermelho-texto); }
#entrada.cancelada .previa, #entrada.cancelada .painel-entrada > label, #entrada.cancelada .dispositivos { display: none; }
#entrada .reuniao-confirma { background: #fdf3f2; border-color: #f5c2c0; }

/* ---------- AVISOREUNIAO1 — pedido do Carlos em 2026-10-17: remarcar a reuniao e avisar os convidados pelo WhatsApp ----------
   O formulario "Remarcar" entra no lugar dos botoes do cartao da reuniao (a mesma caixa dos outros formularios, com data e
   hora lado a lado); a caixinha "Avisar os N convidados pelo WhatsApp" e a mesma nele e na confirmacao do "Apagar". Cabe
   nos 390 px do celular: os campos encolhem (minmax(0, ...)) e o texto da caixinha e do erro quebra a linha em vez de
   empurrar a largura. As cores do modo claro vem das variaveis de #entrada (--vermelho-texto no erro, --marca-texto na caixa). */
.reuniao > .remarcar-form { margin: 0; min-width: 0; }
.remarcar-titulo { margin: 0; font-size: 13px; font-weight: 700; }
.remarcar-form input:disabled { opacity: .6; }
/* (".ev-form .av-caixa" e mais forte que ".ev-form label": sem ele a caixa de marcar ficaria em cima do texto, em coluna) */
.av-caixa, .ev-form .av-caixa { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; min-width: 0; padding: 4px 0;
  cursor: pointer; color: var(--texto); font-size: 13px; line-height: 1.35; }   /* o respiro de 4 px deixa o alvo de toque com ~25 px de altura */
.av-caixa span { min-width: 0; overflow-wrap: anywhere; }
.av-caixa input[type="checkbox"] { flex: none; width: 16px; height: 16px; min-width: 16px; margin: 1px 0 0; padding: 0;
  accent-color: var(--marca-texto); }
.av-caixa:has(input:disabled) { cursor: default; opacity: .6; }
.remarcar-form .ev-form-erro, .reuniao-confirma .ev-form-erro { margin: 0; overflow-wrap: anywhere; }
#entrada .remarcar-form .ev-form-erro, #entrada .reuniao-confirma .ev-form-erro { color: var(--vermelho-texto); }

/* o aviso (toast) fica por baixo da barra dos sistemas (76 px, z-index 15) e o comeco do texto some: empurra para a direita dela */
@media (min-width: 900px) {
  body:has(#entrada.com-rail:not([hidden])) .toast { left: calc(76px * var(--barra-escala, 1) + 16px); }
  body:has(#entrada.com-rail:not([hidden])) .status-gravacao { left: calc(76px * var(--barra-escala, 1) + 16px); }   /* GRAVACAOSEGURA1 */
}

@media (max-width: 899px) {
  /* 16 px nos campos: abaixo disso o iPhone da zoom na pagina ao tocar neles */
  .ag-form input, .ct-form input, .ct-busca input, .ct-nome-campo { font-size: 16px; }
  #entrada .quando-convite { font-size: 13px; }
}