:root {
  --bg-0: #0d0f12;
  --bg-1: #14171c;
  --bg-2: #1b1f26;
  --bg-3: #232833;
  --border: #2b313c;
  --text-1: #eef1f6;
  --text-2: #a3adbd;
  --text-3: #6b7686;
  --live: #37d67a;
  --live-dim: rgba(55, 214, 122, 0.12);
  --accent: #ff8a3d;
  --radius: 12px;
  --card-h: 116px;
}

* { box-sizing: border-box; }

/* O atributo `hidden` do HTML vale `display: none`, mas vem da folha do
   navegador e PERDE para qualquer classe nossa com `display`. O `.count` e
   `inline-flex`, entao `badge.hidden = true` no JS nao escondia nada: o card de
   ausentes aparecia com um "0" quando nao havia ninguem na lista.
   Isto conserta o atributo para a pagina inteira, e nao so para o badge. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-0);
  color: var(--text-1);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* A gaveta e `position: fixed`, entao ela flutuava POR CIMA das salas -- as
   duas ultimas de cada linha sumiam atras dela. O `com-chamada` ja era ligado
   no <body> desde sempre, mas nunca teve regra nenhuma: era intencao escrita
   pela metade.
   
   Agora o corpo reserva o espaco dela. Como o `.grid` e `auto-fill`, as salas
   se reorganizam sozinhas em menos colunas -- nenhuma fica escondida.
   
   O corte e 900px, e ele e COMPLEMENTAR ao que manda a gaveta ocupar a tela
   inteira (max-width: 899px, no fim do arquivo). Os dois numeros tem que somar
   sem sobra: em qualquer largura, ou o corpo reserva espaco, ou a gaveta toma
   a tela. Na primeira versao eu cortei em 900 aqui e deixei o outro em 560, e
   nasceu uma faixa entre 561 e 899 onde a gaveta voltava a cobrir os cards.
   
   Abaixo de 900px nao ha o que dividir: 900 menos os 340 da gaveta deixaria o
   painel com 560, que e uma coluna e meia de card. Melhor a gaveta assumir a
   tela, como ja fazia no celular. */
@media (min-width: 900px) {
  /* So o CONTEUDO recua -- a barra de cima fica parada.
     
     Ela mexer junto era desconfortavel: o campo de busca e os icones pulavam
     para a esquerda a cada abertura, e a gaveta nem chega perto deles. Agora a
     gaveta comeca ABAIXO do topo (`--topo-h`), entao nao ha nada dela para
     cobrir ali, e nao ha motivo para o topo se ajustar.
     
     O rodape recua junto porque o "atualizado HH:MM" mora na ponta direita
     dele, bem atras da gaveta. Repete o padding original (6px 16px 8px) com o
     lado direito trocado -- `padding-right` sozinho nao somaria, substituiria. */
  body.com-chamada .board { padding-right: calc(14px + var(--gaveta)); }
  body.com-chamada .bottom { padding-right: calc(16px + var(--gaveta)); }
}

/* O recuo NAO e animado, e isso e o ponto.
   
   Animar o `padding-right` parecia mais suave e era o contrario: o `.grid` e
   `auto-fill`, entao ele recalcula quantas colunas cabem a CADA quadro. Em
   220ms sao ~13 recalculos, e a cada um os cards pulam de coluna e os nomes
   dentro deles saltam junto. Nao e um deslize, sao treze rearranjos seguidos --
   deu enjoo de verdade em quem usa.
   
   Agora o rearranjo acontece UMA vez:
   
     abrindo  -- na hora (0s, sem atraso). A grade ja se acomoda enquanto a
                 gaveta ainda esta entrando pela direita, entao o movimento que
                 sobra e so o dela.
     fechando -- espera a gaveta sair da frente e so ai alarga. Sem isso os
                 cards se espalhariam por baixo de um painel que ainda esta na
                 frente deles.
   
   O atraso do fechamento e 55% da saida, e nao a saida inteira: a curva e
   ease-out, entao a gaveta percorre quase todo o caminho na primeira metade do
   tempo e so rasteja no fim. Esperar os 100% fazia os cards demorarem a voltar
   ao lugar -- foi a queixa seguinte dele, depois que o enjoo passou. */
.board, .bottom { transition: padding-right 0s linear calc(var(--gaveta-saida) * .55); }
body.com-chamada .board,
body.com-chamada .bottom { transition: padding-right 0s; }

/* ---------- topo ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-0);
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand h1 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.14);
}

.auth { display: flex; align-items: center; gap: 10px; min-height: 40px; }

/* ---------- busca por pessoa (nivel gerente) ---------- */
/* Fica no centro do cabecalho. O flex:1 nos dois lados e o que a mantem
   centrada mesmo com o bloco da direita mudando de largura conforme o nome
   e os botoes de quem esta logado. */
.brand, .auth { flex: 1 1 0; }
.auth { justify-content: flex-end; }
.busca { flex: 0 1 320px; display: flex; justify-content: center; }

.busca-campo {
  width: 100%;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.busca-campo::placeholder { color: var(--text-3); }
.busca-campo:hover { background: var(--bg-2); }
.busca-campo:focus { border-color: var(--accent); background: var(--bg-2); }

/* Nome que casou com a busca, no lugar do "Em reuniao".
   
   Cor PADRAO do nome, e nao uma cor de busca: laranja aqui ja quer dizer
   "representante da sala" (ver .exp-nome.representante), e usa-la para marcar
   "casou com o que voce digitou" fazia a busca promover gente a lider. Quem
   representa a sala sai laranja porque E representante, e nao porque casou. */
.achou {
  font-size: 10.5px;
  line-height: 1.42;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.achou .achou-rep { color: var(--accent); }

.vazio-busca {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

/* Em tela estreita o campo desce para uma linha propria, senao o nome da
   marca e o bloco de login o espremem ate ficar inutilizavel. */
@media (max-width: 720px) {
  .top { flex-wrap: wrap; }
  .brand, .auth { flex: 0 0 auto; }
  .busca { order: 3; flex: 1 0 100%; }
}

/* Topo sem rolagem lateral (11/11/2026, layout-0 do 📅 da agenda): de 721 a 1040 px
   o bloco da conta rolava de lado; agora ele desce inteiro para a linha de baixo.
   No celular estreito o nome encolhe e a conta quebra dentro dela. Os icones
   (📥 📣 📅 🔔) ficam sempre lado a lado. */
.chamada-abre { display: flex; align-items: center; flex: none; }
.novidades { flex: none; }
@media (min-width: 721px) and (max-width: 1040px) {
  .top { flex-wrap: wrap; row-gap: 6px; }
  .brand, .auth { flex: 0 0 auto; }
  .auth { margin-left: auto; }
}
@media (max-width: 480px) {
  .auth { flex-wrap: wrap; gap: 4px; max-width: 100%; }
  .auth .linkbtn { padding: 4px 5px; }
  .who span { max-width: 96px; }
}

.who {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-1);
}

.who img { width: 26px; height: 26px; border-radius: 50%; display: block; }
.who span { font-size: 13px; color: var(--text-2); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.linkbtn {
  background: none;
  border: 0;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.linkbtn:hover { color: var(--text-1); background: var(--bg-2); }
/* Botão das Ferramentas do Comercial, com o ícone delas (08/10/2026). */
.linkbtn-fx { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; }
/* Catálogos The Black Tools e Ramtor (08/10/2026): logos ao lado da marca, do outro lado das Ferramentas. */
.catalogos { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.catalogo { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-1); transition: border-color .15s, background .15s; }
.catalogo:hover, .catalogo:focus-visible { border-color: var(--accent); background: var(--bg-2); outline: none; }
.catalogo img { display: block; height: 22px; width: auto; }
@media (max-width: 720px) { .catalogos { gap: 6px; margin-left: 4px; } .catalogo { padding: 4px 7px; } .catalogo img { height: 18px; } }
.linkbtn-fx svg { flex: none; width: 18px; height: 18px; display: block; }
@media (max-width: 640px) { .linkbtn-fx span { display: none; } }
/* A listinha das Ferramentas no hover do botão (10/10/2026). Cresce como o card da sala (pedido do dono): o
   botão vira um card da largura dele, que desce com as mesmas curvas e tempos do .exp, e os nomes entram
   escalonados como os da sala. O JS põe .aberto (e .acima até terminar de fechar) e mede a altura exata. */
.fxmenu { position: relative; display: inline-flex; isolation: isolate; }
.fxmenu .linkbtn-fx { position: relative; z-index: 1; }
.fxmenu.aberto .linkbtn-fx, .fxmenu.aberto .linkbtn-fx:hover { background: transparent; color: var(--text-1); }
.fxmenu-lista {
  position: absolute; z-index: 0; top: -4px; left: -6px; right: -6px;
  display: flex; flex-direction: column; gap: 2px;
  padding: calc(var(--fx-bt, 26px) + 8px) 3px 0;
  max-height: calc(var(--fx-bt, 26px) + 8px); overflow: hidden;
  background: var(--bg-2); border: 1px solid #3a4250; border-radius: var(--radius);
  opacity: 0; box-shadow: none;
  /* Saída: a mesma do card da sala; o card some só no fim, já do tamanho do botão. */
  transition: max-height 1s cubic-bezier(0.45, 0.05, 0.25, 1), padding-bottom 1s cubic-bezier(0.45, 0.05, 0.25, 1),
    opacity 0.2s ease 0.85s, box-shadow 0.3s ease 0.7s;
}
.fxmenu-lista:empty { display: none; }
.fxmenu.aberto .fxmenu-lista {
  max-height: var(--fx-h, 420px); padding-bottom: 4px; opacity: 1;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: max-height 1.15s cubic-bezier(0.45, 0.05, 0.25, 1), padding-bottom 1.15s cubic-bezier(0.45, 0.05, 0.25, 1),
    opacity 0.15s ease, box-shadow 0.3s ease;
}
/* O topo sobe enquanto o card está aberto ou fechando: senão um card de sala (z-index 60/70) passa por cima. */
.top:has(.fxmenu.aberto), .top:has(.fxmenu.acima) { z-index: 80; }
.fxmenu-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: 8px;
  color: var(--text-2); text-decoration: none; font-size: 12px; line-height: 1.25; white-space: nowrap;
  opacity: 0; transform: translateY(-6px);
  /* Só a entrada e a saída animam. O destaque do mouse é na hora: com o atraso escalonado da entrada valendo
     também para o fundo, ele chegava até 1,1 s depois do mouse (10/10/2026, "sensação de lag"). */
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.fxmenu.aberto .fxmenu-item {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.62s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fxmenu-item:hover, .fxmenu-item:focus-visible { background: var(--bg-3); color: var(--text-1); outline: none; }
/* Os ícones iguais aos do site das Ferramentas (10/10/2026, pedido do dono): quadradinho amarelo, ícone preto. */
.fxmenu-ico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #FFBE10; color: #141414; }
.fxmenu-ico svg { width: 12px; height: 12px; stroke-width: 2.5; }
.fxmenu-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Os nomes na mesma janela dos da sala (0.26s até 1.10s). Na saída, sem atraso. */
.fxmenu.aberto .fxmenu-item:nth-child(1) { transition-delay: 0.26s, 0.26s; }
.fxmenu.aberto .fxmenu-item:nth-child(2) { transition-delay: 0.35s, 0.35s; }
.fxmenu.aberto .fxmenu-item:nth-child(3) { transition-delay: 0.45s, 0.45s; }
.fxmenu.aberto .fxmenu-item:nth-child(4) { transition-delay: 0.54s, 0.54s; }
.fxmenu.aberto .fxmenu-item:nth-child(5) { transition-delay: 0.63s, 0.63s; }
.fxmenu.aberto .fxmenu-item:nth-child(6) { transition-delay: 0.73s, 0.73s; }
.fxmenu.aberto .fxmenu-item:nth-child(7) { transition-delay: 0.82s, 0.82s; }
.fxmenu.aberto .fxmenu-item:nth-child(8) { transition-delay: 0.91s, 0.91s; }
.fxmenu.aberto .fxmenu-item:nth-child(9) { transition-delay: 1.01s, 1.01s; }
.fxmenu.aberto .fxmenu-item:nth-child(n+10) { transition-delay: 1.10s, 1.10s; }
@media (prefers-reduced-motion: reduce) {
  .fxmenu-lista, .fxmenu-item { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

.hint {
  font-size: 12.5px;
  color: var(--text-3);
  max-width: 260px;
  text-align: right;
}

/* ---------- corpo ---------- */

.board { flex: 1; padding: 11px 14px 2px; }

.skeleton { color: var(--text-3); padding: 40px 0; text-align: center; }

.group { margin-bottom: 11px; }
/* A margem do ultimo setor era o suficiente para gerar scroll em telas baixas. */
.group:last-child { margin-bottom: 0; }

.group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-3);
}
.group-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Denso de proposito: as 26 salas precisam caber juntas na tela. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 7px;
}

/* ---------- bolha da sala ---------- */

/* Altura fixa: sem lista de nomes, todo card tem o mesmo conteudo (nome +
   estado + botao), entao as 26 salas cabem juntas na tela em qualquer caso. */
.room {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--card-h);
  padding: 8px 9px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.room:hover { border-color: #3a4250; transform: translateY(-1px); }

.room.busy {
  /* Duas camadas de proposito. A de baixo (--bg-0, a cor da pagina) e OPACA:
     sem ela o verde translucido do topo deixava o card de tras aparecer
     quando este cresce no hover, e a lista de nomes ficava ilegivel por cima
     do "Entrar" do vizinho. Como a cor de baixo e a mesma que ja havia atras,
     o card fechado continua identico ao que era.
     E o degrade termina em PIXEL, nao em porcentagem: com 62% da altura, um
     card expandido espalhava o verde por metade da lista de nomes. 72px e o
     que 62% davam na altura fechada (116px). */
  background:
    linear-gradient(180deg, var(--live-dim), var(--bg-1) 72px),
    var(--bg-0);
  border-color: rgba(55, 214, 122, 0.32);
}

.room-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.room-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--text-1);
  overflow-wrap: anywhere;
  /* Tres linhas, e nao duas. O card tem altura fixa de proposito (as 26 salas
     numa tela so), mas .people e `flex: 1` e estava sobrando com 15px: uma
     terceira linha de nome cabe ali sem o card crescer um pixel. Medido em
     1400x900, 1920x1080, 1366x768, 1280x700 e 900x640 -- card e slot continuam
     do mesmo tamanho em todos.
     
     Se ainda assim nao couber, `ajustarNome` no app.js diminui a letra ate
     caber. O clamp aqui e o teto, nao a solucao. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--live-dim);
  border: 1px solid rgba(55, 214, 122, 0.34);
  color: var(--live);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.count .pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* `overflow: hidden` para o card NUNCA crescer: ele e absoluto dentro do slot
   e cresceria por cima da linha de baixo. Com o nome podendo ocupar tres
   linhas, uma busca que casa dois nomes na mesma sala pediria mais altura do
   que existe -- melhor perder a segunda linha de nomes do que ver o card
   invadir o vizinho. */
.people {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin: 5px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.em-reuniao {
  font-size: 10.5px;
  line-height: 1.42;
  font-weight: 600;
  color: var(--live);
}

.person, .person-mais {
  font-size: 10.5px;
  line-height: 1.42;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--live);
  margin-right: 5px;
  vertical-align: 1.5px;
}
.person-mais { color: var(--text-3); padding-left: 9px; font-weight: 600; }

.empty { font-size: 10.5px; line-height: 1.42; color: var(--text-3); }

.locked {
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.err { font-size: 10px; color: #d98a5a; }

.enter {
  display: block;
  margin-top: auto;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.enter:hover { background: #2d3441; border-color: #47505f; }

.room.busy .enter {
  background: rgba(55, 214, 122, 0.14);
  border-color: rgba(55, 214, 122, 0.4);
  color: #b9f5d2;
}
.room.busy .enter:hover { background: rgba(55, 214, 122, 0.22); }

/* ---------- rodape ---------- */

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px 8px;
  font-size: 11px;
  color: var(--text-3);
}

.total { font-variant-numeric: tabular-nums; }
.total b { color: var(--text-2); font-weight: 600; }
/* Separador entre "N salas em reuniao" e "M pessoas": presente o bastante
   para separar, apagado o bastante para nao competir com os dois numeros. */
.total .sep { opacity: 0.45; }
.total b[title] { cursor: help; }
.meta { font-size: 11px; opacity: 0.75; }

/* ---------- tela de entrada ---------- */

.gate {
  max-width: 420px;
  margin: 8vh auto 0;
  padding: 34px 30px 30px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
}

.gate-title { margin: 0 0 10px; font-size: 19px; font-weight: 600; }
.gate-sub { margin: 0 0 22px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.gate-help { margin: 18px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.gate-esqueci { margin-top: 12px; }
.gate-email { margin: 0 0 14px; font-size: 13px; color: var(--text-2); }

/* abas entrar / criar conta */

.tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0 20px;
  padding: 4px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tab {
  flex: 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tab:hover { color: var(--text-2); }
.tab.on { background: var(--bg-3); color: var(--text-1); }

/* formularios */

.form { display: flex; flex-direction: column; gap: 13px; text-align: left; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-rot { font-size: 12.5px; color: var(--text-2); }

.form .ainput { padding: 10px 12px; font-size: 14px; }

.form-erro {
  min-height: 0;
  font-size: 12.5px;
  color: #e07a5f;
  line-height: 1.4;
}
.form-erro:empty { display: none; }

.cta.wide { width: 100%; padding: 11px 14px; font-size: 14px; }

/* ---------- estados de acesso (topo do painel de salas) ---------- */

.cta {
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--accent);
  border: 0;
  color: #1a0d04;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cta:hover { filter: brightness(1.08); }
.cta:disabled { opacity: 0.6; cursor: default; }

.badge-wait, .badge-no {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
}
.badge-wait { color: #f0b429; border-color: rgba(240, 180, 41, 0.35); background: rgba(240, 180, 41, 0.1); }
.badge-no { color: #e07a5f; border-color: rgba(224, 122, 95, 0.35); background: rgba(224, 122, 95, 0.1); }

.linkbtn.has-pending { color: var(--accent); font-weight: 700; }

/* ---------- painel de admin ---------- */

.admin {
  flex: 1;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 24px 40px;
}

.asec {
  margin-bottom: 18px;
  padding: 16px 18px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.asec.destaque { border-color: rgba(255, 138, 61, 0.45); background: linear-gradient(180deg, rgba(255, 138, 61, 0.07), var(--bg-1) 60%); }

.asec-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-2);
}

.acount {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.avazio { font-size: 13px; color: var(--text-3); }

.ulist { display: flex; flex-direction: column; gap: 8px; }

.urow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.uav { flex: 0 0 34px; }
.uav img { width: 34px; height: 34px; border-radius: 50%; display: block; }
.uav span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-2);
  font-weight: 700;
  font-size: 14px;
}

.uinfo { flex: 1; min-width: 0; }
.uname { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.uname > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag-fixo {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 138, 61, 0.14);
  border: 1px solid rgba(255, 138, 61, 0.35);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.uctrl { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.ainput.slim { padding: 6px 9px; font-size: 12.5px; min-width: 168px; }
.ainput.slim:disabled { opacity: 0.5; }
.ahelp.sep { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.umail { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udet { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.uacts { display: flex; gap: 7px; flex: 0 0 auto; }

.abtn {
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.abtn:hover { filter: brightness(1.15); }
.abtn:disabled { opacity: 0.5; cursor: default; }
.abtn.ok { background: rgba(55, 214, 122, 0.16); border-color: rgba(55, 214, 122, 0.4); color: #b9f5d2; }
.abtn.no { background: rgba(224, 122, 95, 0.14); border-color: rgba(224, 122, 95, 0.38); color: #f2b8a6; }
.abtn.ghost { background: transparent; color: var(--text-3); }

.aform { margin-top: 14px; }
.aform:first-of-type { margin-top: 0; }

.alabel {
  display: block;
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 7px;
}

.arow { display: flex; gap: 8px; }

.ainput {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-0);
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
}
.ainput:focus { outline: none; border-color: #47505f; }

.ahelp { font-size: 11.5px; color: var(--text-3); margin-top: 6px; line-height: 1.45; }

.anota {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
  padding: 0 4px;
}

/* ---------- gestao de salas ---------- */

.admin-tabs { max-width: 340px; margin: 0 0 18px; }

.slist { display: flex; flex-direction: column; gap: 7px; }

.srow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.sfields { display: flex; gap: 7px; flex: 1; min-width: 0; }
.sfields .ainput { min-width: 0; }
.sfields .ainput.wide { flex: 1.7; }

.sacts { display: flex; gap: 5px; flex: 0 0 auto; }
.abtn.mini { padding: 6px 9px; font-size: 12px; }

.asec-head .linkbtn { margin-left: auto; flex: 0 0 auto; }

.sform { display: flex; gap: 8px; flex-wrap: wrap; }
.sform .ainput { flex: 1; min-width: 140px; }
.sform .abtn { flex: 0 0 auto; }

@media (max-width: 720px) {
  .sfields { flex-wrap: wrap; }
  .sfields .ainput { flex: 1 1 100%; }
  .sacts { width: 100%; }
  .sacts .abtn { flex: 1; }
}

/* Telas altas e largas: pode respirar. */
@media (min-width: 1500px) and (min-height: 900px) {
  :root { --card-h: 132px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
  .room-name { font-size: 12.5px; }
  .person, .person-mais, .empty { font-size: 11px; }
  .enter { font-size: 11.5px; padding: 6px 8px; }
}

/* Telas baixas: aperta para as 26 salas continuarem caindo numa tela. */
@media (max-height: 800px) and (min-width: 700px) {
  :root { --card-h: 104px; }
  .board { padding: 7px 12px 2px; }
  .group { margin-bottom: 7px; }
  .group-head { margin-bottom: 4px; }
  .grid { gap: 6px; }
  .room { padding: 6px 8px; }
  .people { margin: 4px 0 4px; }
}

@media (max-height: 680px) and (min-width: 700px) {
  :root { --card-h: 92px; }
  .top { padding: 6px 14px; }
  .group { margin-bottom: 5px; }
  .bottom { padding: 4px 14px 6px; }
}

@media (max-width: 560px) {
  .admin { padding: 16px 16px 32px; }
  .urow { flex-wrap: wrap; }
  .uctrl { width: 100%; flex-direction: row; }
  .ainput.slim { min-width: 0; flex: 1; }
  .uacts { width: 100%; }
  .uacts .abtn { flex: 1; }
  .top { padding: 10px 14px; }
  .board { padding: 12px 14px 4px; }
  .bottom { padding: 10px 14px 14px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .room { min-height: 120px; padding: 10px; }
  .room-name { font-size: 12.5px; }
  .person, .person-mais, .empty { font-size: 11px; }
  .enter { font-size: 12px; padding: 7px; }
  .hint { max-width: 150px; font-size: 11.5px; }
}

/* ---------- card que cresce no hover ---------- */


/* O slot guarda a vaga na grade com altura fixa; o card mora dentro dele em
   posicao absoluta. Assim o card cresce por cima dos vizinhos sem empurrar
   ninguem — a grade das 26 salas nao se mexe. */
.slot {
  position: relative;
  height: var(--card-h);
}
.slot > .room {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  min-height: 100%;
}
/* Perto do rodape, cresce para cima ancorando pelo pe. */
.slot > .room.cresce-cima { top: auto; bottom: 0; }

.room.cresce.aberto {
  /* 70, nao 60: tem que ganhar do vizinho que AINDA esta encolhendo com a
     classe .acima. Empatados em 60, o desempate era a ordem no DOM e o card
     de baixo vencia — o de cima crescia por tras dele e so pulava para a
     frente quando o timer do vizinho zerava. */
  z-index: 70;
  border-color: rgba(55, 214, 122, 0.45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.45);
  transform: none; /* o -1px do hover normal brigaria com a ancoragem */
}
/* Sala vazia tambem abre (lista de integrantes). Borda verde ali diria "em
   reuniao", que e justamente o que ela nao esta. O fundo clareia um tom, como
   o do card de Ausentes aberto, para destacar dos vizinhos que ele cobre. */
.room.cresce.aberto:not(.busy):not(.ausentes) {
  border-color: #3a4250;
  background: var(--bg-2);
}

/* A area que abre. Animar max-height faz a altura do card acompanhar sozinha,
   porque o card e height:auto. */
.exp {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* Curva com saida longa: cresce rapido no comeco e desacelera bastante no
     fim, que e o que da a sensacao de "fluido" em vez de "estalo". */
  /* Esta transicao vale na SAIDA (estado sem hover). Mesma curva simetrica da
     entrada, so um pouco mais curta — fechar identico a abrir arrasta. */
  transition:
    max-height 1s cubic-bezier(0.45, 0.05, 0.25, 1),
    opacity 0.75s ease;
}
.room.cresce.aberto .exp {
  /* Altura EXATA do conteudo, medida no JS. Com um teto generico (240px) a
     animacao passava da altura real em ~1/5 do tempo e o resto animava um
     valor invisivel: o card parecia abrir rapido por mais lenta que fosse. */
  max-height: var(--exp-h, 240px);
  opacity: 1;
  /* Curva quase simetrica: espalha o movimento pelo tempo todo. A anterior
     (0.16,1,0.3,1) concentrava quase tudo no comeco. */
  transition:
    max-height 1.15s cubic-bezier(0.45, 0.05, 0.25, 1),
    opacity 0.9s ease 0.18s;
}

/* Com a lista aberta, "Em reuniao" vira repeticao: os nomes ja dizem isso.
   Colapsa animado — display:none cortava seco e denunciava a troca. */
.room.cresce .people {
  overflow: hidden;
  max-height: 60px;
  transition: max-height 0.85s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.6s ease 0.2s;
}
.room.cresce.aberto .people {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.95s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.5s ease;
}

.exp-dentro { padding: 4px 0 6px; }

.exp-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* A altura maxima vem do JS (10 linhas medidas no DOM). Sem ela, uma sala
     com 15 pessoas viraria uma coluna gigante por cima de meia grade. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* chegar no fim nao rola a pagina atras */
  scrollbar-width: thin;
  scrollbar-color: var(--bg-3) transparent;
}
.exp-lista::-webkit-scrollbar { width: 6px; }
.exp-lista::-webkit-scrollbar-track { background: transparent; }
.exp-lista::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
.exp-lista::-webkit-scrollbar-thumb:hover { background: var(--border); }
.exp-nome { display: flex; align-items: center; gap: 6px; }
.exp-ini {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 9px; font-weight: 700;
  color: #0e1116;
  background: linear-gradient(145deg, #55e08d, #37d67a);
}
.exp-txt {
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exp-aviso { font-size: 10.5px; line-height: 1.35; color: var(--text-2); }

/* --- carregando --- */
.exp-carga { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 6px 0 4px; }
.exp-carga-txt { font-size: 10.5px; color: var(--text-2); }

.pontos { display: flex; gap: 5px; }
.ponto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--live, #37d67a);
  animation: exp-pulo 1.05s ease-in-out infinite;
}
.ponto:nth-child(2) { animation-delay: 0.14s; }
.ponto:nth-child(3) { animation-delay: 0.28s; }
@keyframes exp-pulo {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.35; }
  35%           { transform: translateY(-4px); opacity: 1; }
}

/* "lendo" no cabecalho, no lugar da contagem de pessoas enquanto nenhum nome
   chegou. Reaproveita os pontinhos do card, menores e alinhados ao texto.
   Discreto de proposito: em operacao normal aparece por segundos. */
.total-lendo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-weight: 600;
  cursor: help;
}
.total-lendo .pontos { gap: 3px; }
.total-lendo .ponto {
  width: 4px;
  height: 4px;
  background: var(--text-3);
}

/* Enquanto busca, a borda do card varre um brilho: da pra ver que algo esta
   acontecendo mesmo sem ler o texto. */
.room.carregando { border-color: rgba(55, 214, 122, 0.5); }
.room.carregando::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(55, 214, 122, 0.22) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: exp-varre 1.25s linear infinite;
}
@keyframes exp-varre {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* No celular quem abre e o TOQUE no card (o JS poe .aberto), nao o :hover —
   que em touch gruda depois do toque e impediria o card de fechar. Tocar no
   botao Entrar continua entrando na sala; o card so abre no resto dele. */

/* Os nomes entram escalonados, um logo depois do outro: a lista "se monta"
   em vez de piscar inteira. Sem isso, a animacao do card fica boa e o
   conteudo dentro dela aparece seco, o que estraga a sensacao. */
.exp-nome, .exp-aviso {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.room.cresce.aberto .exp-nome,
.room.cresce.aberto .exp-aviso {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.62s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Sao 10 nomes na janela em vez de 8, mas a JANELA e a mesma de antes
   (0.26s ate 1.10s): o passo encolheu de 0.12s para ~0.093s. Assim a sensacao
   que o usuario aprovou nao muda de duracao por causa de dois nomes a mais. */
.room.cresce.aberto .exp-nome:nth-child(1) { transition-delay: 0.26s; }
.room.cresce.aberto .exp-nome:nth-child(2) { transition-delay: 0.35s; }
.room.cresce.aberto .exp-nome:nth-child(3) { transition-delay: 0.45s; }
.room.cresce.aberto .exp-nome:nth-child(4) { transition-delay: 0.54s; }
.room.cresce.aberto .exp-nome:nth-child(5) { transition-delay: 0.63s; }
.room.cresce.aberto .exp-nome:nth-child(6) { transition-delay: 0.73s; }
.room.cresce.aberto .exp-nome:nth-child(7) { transition-delay: 0.82s; }
.room.cresce.aberto .exp-nome:nth-child(8) { transition-delay: 0.91s; }
.room.cresce.aberto .exp-nome:nth-child(9) { transition-delay: 1.01s; }
.room.cresce.aberto .exp-nome:nth-child(10) { transition-delay: 1.10s; }
/* Do 11o em diante ja nasce fora da area visivel. Sem esta regra o atraso
   seria 0s e eles apareceriam ANTES dos primeiros, ao rolar. */
.room.cresce.aberto .exp-nome:nth-child(n+11) { transition-delay: 1.10s; }
.room.cresce.aberto .exp-aviso { transition-delay: 0.30s; }

/* Na saida ninguem espera: sem atraso, o card fecha limpo. */
.room.cresce .exp-nome,
.room.cresce .exp-aviso { transition-delay: 0s; }

/* Sombra e borda acompanham o mesmo tempo do crescimento, senao o card
   "acende" antes de crescer. */
.room.cresce {
  transition:
    border-color 0.9s ease,
    background 0.7s ease,
    box-shadow 1.0s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.15s;
}

/* Respeita quem pediu menos animacao no sistema. */
@media (prefers-reduced-motion: reduce) {
  .exp, .room.cresce, .room.cresce .people,
  .exp-nome, .exp-aviso { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* O card precisa ficar na camada de cima ATE terminar de fechar, senao o
   z-index cai no instante em que o mouse sai e os vizinhos passam por cima de
   um card que ainda esta encolhendo. Quem tira a classe e o JS, depois do
   tempo do fechamento — transicao de z-index por CSS brigaria com a lista de
   duracoes ja definida no card.

   Fica UM degrau abaixo do card sob o mouse (70): quem esta abrindo sempre
   vence quem esta fechando, sem depender da ordem no DOM. */
.room.acima { z-index: 60; }


/* ---------- painel de analytics (so master) ---------- */

/* Escondido pelo filtro da busca: classe em vez de remover do DOM, para a
   grade nao piscar a cada tecla digitada. */
.oculto { display: none !important; }

/* Link repetido e permitido; a marca so evita duplicar sem querer. */
.srow-repetida { border-left: 2px solid rgba(255, 138, 61, 0.55); padding-left: 8px; }

.dim { color: var(--text-3); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.par-datas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Salas como chips: com 26 delas, um <select multiple> viraria uma caixinha
   de rolagem impossivel de varrer com o olho. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.chip:hover { color: var(--text-2); }
.chip.on { color: #b9f5d2; background: rgba(55, 214, 122, 0.16); border-color: rgba(55, 214, 122, 0.4); }

.graf-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.graf { margin-top: 14px; }
/* O viewBox estica; a altura fixa evita o pulo de layout enquanto carrega. */
.graf-svg { width: 100%; height: 210px; display: block; overflow: visible; }
.graf-grade { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.graf-eixo { stroke: var(--border); stroke-width: 1; }
.graf-rot { fill: var(--text-3); font-size: 9px; }
.graf-barra rect {
  fill: var(--live);
  opacity: 0.55;
  transition: opacity 0.15s;
}
.graf-barra:hover rect { opacity: 1; }

.cartoes { display: flex; flex-wrap: wrap; gap: 12px; }
.cartao {
  flex: 1 1 150px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cartao-rot { font-size: 11px; color: var(--text-3); }
.cartao-val {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.cartao-det { margin-top: 2px; font-size: 11px; color: var(--text-3); }

.atab { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; }
.atab th {
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.atab th.num { text-align: right; }
.atab td { padding: 7px 8px; border-bottom: 1px solid rgba(43, 49, 60, 0.5); color: var(--text-2); }
.atab tbody tr:hover td { background: var(--bg-2); }

/* Tabela larga rola dentro dela mesma; a pagina nunca rola de lado. */
@media (max-width: 640px) {
  .atab { display: block; overflow-x: auto; white-space: nowrap; }
  .cartao-val { font-size: 20px; }
}

/* ---------- sala trancada (antessala) ---------- */
/* Mesma estrutura de duas camadas do .room.busy, so trocando o verde pelo
   laranja do tema. Precisa vir DEPOIS de .room.busy: mesma especificidade
   nao ganharia, e mais especificidade aqui evita depender da ordem por sorte. */
.room.busy.trancada {
  background:
    linear-gradient(180deg, rgba(255, 138, 61, 0.13), var(--bg-1) 72px),
    var(--bg-0);
  border-color: rgba(255, 138, 61, 0.34);
}

.room.busy.trancada .enter {
  background: rgba(255, 138, 61, 0.14);
  border-color: rgba(255, 138, 61, 0.4);
  color: #ffd6b8;
}
.room.busy.trancada .enter:hover { background: rgba(255, 138, 61, 0.22); }

.fechada {
  font-size: 10.5px;
  line-height: 1.42;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- representante da sala ---------- */
.exp-nome.representante .exp-txt {
  color: var(--accent);
  font-weight: 600;
}
.exp-nome.representante .exp-ini {
  background: rgba(255, 138, 61, 0.18);
  color: var(--accent);
}

/* ---------- integrantes da sala ---------- */
/* Nome em cima, etiqueta embaixo: o card tem ~130px uteis, e "férias até 22/09"
   ao lado do nome deixaria os dois cortados. */
.exp-col { display: flex; flex-direction: column; min-width: 0; }
.exp-rot {
  font-size: 9.5px;
  line-height: 1.2;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O que a pessoa esta fazendo agora (demandas, 14/10/2026): embaixo do nome e
   do "em Sala X", em verde como o play. */
.exp-dem {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  font-size: 9.5px;
  line-height: 1.25;
  color: var(--live);
}
.exp-dem-play { flex: none; font-size: 7px; }
.exp-dem-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-dem-t { flex: none; color: var(--text-3); }
.ch-rapida.demanda { border-color: rgba(55, 214, 122, .45); }

/* Verde na inicial = esta nesta sala. Sem verde = nao esta aqui (ou nao se sabe). */
.exp-nome.est-neutro .exp-ini,
.exp-nome.fora .exp-ini {
  background: var(--bg-3);
  color: var(--text-3);
}
/* O representante tem a inicial laranja, entao o verde de "esta aqui" vira um
   anel: sem ele, representante presente e representante sem leitura seriam
   iguais. O anel e POR DENTRO da bolinha: por fora ele passava da borda da
   lista, que corta o que sai dela (rola na vertical), e aparecia cortado do
   lado esquerdo (14/09/2026). */
.exp-nome.representante.est-aqui .exp-ini { box-shadow: inset 0 0 0 1.5px var(--live); }
/* Esta em outra sala: trabalhando, so nao aqui. Verde apagado, nome normal. */
.exp-nome.est-outra .exp-ini {
  background: var(--live-dim);
  color: var(--live);
}

/* O cinza e o sinal de quem falta. Vem depois do representante de proposito:
   representante ausente fica cinza tambem, e a inicial laranja continua dizendo
   quem ele e. */
.exp-nome.fora .exp-txt { color: var(--text-3); font-weight: 400; }
.exp-nome.representante.fora .exp-ini {
  background: rgba(255, 138, 61, 0.10);
  color: rgba(255, 138, 61, 0.7);
}

/* "visitantes" e "não identificados" dentro da lista. */
.exp-nome.exp-sec {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Procurando quem esta, com a lista de integrantes ja na tela. */
.exp-lendo { display: flex; align-items: center; gap: 6px; }
.exp-lendo .pontos { gap: 3px; }
.exp-lendo .ponto { width: 4px; height: 4px; }
.exp-aviso + .exp-lista { margin-top: 5px; }

/* ---------- card de ausentes ---------- */
/* Nao e uma sala: nao tem "Entrar". Fora isso usa a MESMA mecanica dos outros
   cards — fechado mostra so a contagem, e a lista abre no hover. A primeira
   versao despejava os nomes no corpo do card, que tem altura fixa, e com 44
   nomes o conteudo vazava por cima dos vizinhos. */
.room.ausentes {
  background: var(--bg-1);
  border-style: dashed;
}
.room.ausentes .room-name { color: var(--text-2); }

/* Aberto, a borda tracejada vira solida: pontilhado com sombra forte fica sujo. */
.room.ausentes.cresce.aberto {
  border-style: solid;
  border-color: var(--border);
  background: var(--bg-2);
}

.ausentes-num {
  font-size: 10.5px;
  line-height: 1.42;
  font-weight: 600;
  color: var(--text-3);
}

/* Numa busca por gente o resumo vira os nomes que casaram, e ai ele deixa de
   ser texto de apoio: sobe para a cor do nome e ganha o corte em duas linhas
   do `.achou` das salas. A regra precisa das duas classes — `.ausentes-num`
   vem depois de `.achou` no arquivo e venceria a cor por ordem. */
.ausentes-num.achou { color: var(--text-1); }

/* Herda .count, que e verde de sala ocupada — aqui a contagem e neutra. */
.ausentes-badge {
  background: var(--bg-3);
  border-color: var(--border);
  color: var(--text-2);
}

/* Sem gente ausente nao ha o que abrir; o cursor nao pode prometer o contrario. */
.room.ausentes:not(.cresce) { cursor: default; }

/* A inicial herda o verde de "esta na sala", que aqui diz o contrario. */
.room.ausentes .exp-ini {
  background: var(--bg-3);
  color: var(--text-3);
}

/* ---------- variante "Em almoco" ---------- */
/* Mesma casca do card de ausentes; muda so a temperatura. Ausencia e neutra —
   nao se sabe por que a pessoa sumiu. Almoco e pausa prevista, entao ganha
   ambar.
   NAO usa --accent de proposito: aquele laranja ja quer dizer "representante
   da sala", e repetir a cor faria as duas coisas parecerem a mesma. */
/* Sem cor propria: o card e igualzinho ao de ausentes, e quem separa os dois e
   o titulo. O ambar da primeira versao pintava titulo, contador e iniciais, e
   virou ruido numa coluna que ja tem verde de sala ocupada e laranja de
   representante -- tres cores disputando atencao no mesmo campo de visao.
   A classe fica, para o JS ter onde se apoiar. */

/* ---------- novidades: botao do topo ---------- */
/* Fica entre a busca e o bloco da conta. Discreto: so ganha atencao quando ha
   post nao lido, e ai o pontinho laranja faz o trabalho. */
.novidades { display: flex; align-items: center; }

.novidades-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.novidades-btn:hover {
  color: var(--text-1);
  background: var(--bg-2);
  border-color: var(--border);
}

/* O ponto so aparece com post nao lido. A borda da cor do fundo o destaca
   do icone atras dele. */
.novidades-ponto {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-0);
}

/* ---------- modal ---------- */
/* O fundo escurece e desfoca o painel: da pra ver que ele continua ali atras,
   sem competir com o texto. */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 11, 0.72);
  backdrop-filter: blur(3px);
  animation: modal-entra 0.16s ease-out;
}

.modal {
  width: min(560px, 100%);
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: modal-sobe 0.18s ease-out;
}

@keyframes modal-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-sobe {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.modal-titulo { margin: 0; font-size: 15px; font-weight: 600; }

.modal-x {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  padding: 5px 7px;
  border-radius: 7px;
  cursor: pointer;
}
.modal-x:hover { color: var(--text-1); background: var(--bg-3); }

/* O scroll fica AQUI, e nao no fundo: o cabecalho e o botao continuam
   visiveis com muitos posts acumulados. */
.modal-corpo { overflow-y: auto; padding: 4px 18px 6px; }

.post { padding: 14px 0; border-bottom: 1px solid var(--border); }
.post:last-child { border-bottom: 0; }

.post-data {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 9px;
}

.post-item { margin-bottom: 14px; }
.post-item:last-child { margin-bottom: 0; }

/* Titulo em linha propria e maior que o corpo. Com sete itens no post, o
   titulo e o que a pessoa varre para achar o que interessa a ela -- inline e
   do mesmo tamanho do texto, ele nao existia como ponto de leitura. */
.post-item-tit {
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}
.post-item-txt {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* O <b> continua estilizado: posts antigos podem trazer negrito no meio do
   texto, e sem isto ele sairia igual ao resto. */
.post-item b { color: var(--text-1); font-weight: 600; }

.modal-rodape {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px 15px;
  border-top: 1px solid var(--border);
}

.modal-ok {
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.modal-ok:hover { background: var(--border); }
.modal-ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .modal { max-height: 88vh; }
  .modal-corpo { padding: 4px 14px 6px; }
}

/* ---------------- chamada (aba lateral) ---------------- */

/* Aqui dizia que a gaveta NAO devia empurrar o board, "porque reflowaria a
   grade inteira, e a grade e a parte cara de desenhar". O raciocinio confundia
   duas coisas: o reflow do NAVEGADOR, que para ~30 cards e barato, e o rebuild
   em JS do `montarGrade()`, que e o caro -- e esse roda so quando a assinatura
   das salas muda, nao quando a largura muda. Mudar `padding-right` nao encosta
   nele.
   
   O preco de nao empurrar era alto e visivel: com a gaveta aberta, as duas
   ultimas salas de cada linha ficavam escondidas atras dela.
   
   A largura mora numa variavel porque DOIS lugares dependem dela: a propria
   gaveta e o espaco que o corpo reserva para ela. Em numeros soltos, mudar um
   e esquecer o outro faz a gaveta cobrir salas de novo. */
:root {
  --gaveta: 340px;
  /* Duracao e curva da gaveta.
     
     Sao as MESMAS do card que cresce no hover -- o movimento que ele apontou
     como agradavel. A curva (0.16, 1, 0.3, 1) sai rapido e desacelera muito no
     fim; e ela que da "fluido" em vez de "estalo". A primeira versao daqui
     usava .22s com curva quase reta, e ficou seca ao lado do resto do painel.
     
     .45s e o meio-termo: o card do hover leva 0.8-1s, mas ele e um detalhe que
     a pessoa provoca e fica olhando. A gaveta e navegacao -- passar de meio
     segundo comeca a parecer que o site travou. */
  --gaveta-t: .45s;
  /* A SAIDA e mais curta que a entrada, de proposito. Entrar com calma e
     agradavel -- a pessoa esta chegando no painel. Sair com a mesma calma vira
     espera: ela ja decidiu fechar e quer a tela de volta. */
  --gaveta-saida: .28s;
  --gaveta-c: cubic-bezier(0.16, 1, 0.3, 1);
}

/* `--topo-h` e a altura da barra de cima, medida em JS (o topo cresce quando a
   janela estreita e o conteudo quebra linha, entao um numero fixo aqui
   descolaria). Sem valor ainda, cai em 0 e a gaveta so cobre o topo por um
   quadro. */
.chamada {
  position: fixed;
  top: var(--topo-h, 0px); right: 0; bottom: 0;
  width: var(--gaveta);
  max-width: 92vw;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 40;
  box-shadow: -18px 0 40px rgba(0, 0, 0, .45);

  /* Desliza de fora da tela. Antes era `hidden`, que e display:none e nao
     anima: a gaveta piscava para dentro de uma vez.
     
     `visibility` em vez de tirar do fluxo: ela e discreta, entao troca no fim
     do fecho (delay) e no inicio da abertura (0s) -- assim nao rouba clique
     enquanto esta fora, e ainda da para ver a saida. */
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  /* O fade entra junto, como no `.exp` do card: so o deslize deixa a borda da
     gaveta "cortando" a tela de um jeito duro. */
  /* Esta transicao vale na SAIDA (estado sem `.aberta`). */
  transition: transform var(--gaveta-saida) var(--gaveta-c),
              opacity calc(var(--gaveta-saida) * .7) ease,
              visibility 0s linear var(--gaveta-saida);
}

.chamada.aberta {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform var(--gaveta-t) var(--gaveta-c),
              opacity calc(var(--gaveta-t) * .7) ease,
              visibility 0s;
}

/* Quem prefere menos movimento nao ganha animacao nenhuma -- so o resultado.
   Mexe na VARIAVEL, e nao nas duracoes: o atraso com que o conteudo alarga no
   fechamento tambem sai dela, e zerar so a duracao deixaria os dois
   descompassados. */
@media (prefers-reduced-motion: reduce) {
  :root { --gaveta-t: .01s; --gaveta-saida: .01s; }
}

.ch-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex: none;
}
.ch-cabeca h2 {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .07em;
}
.ch-fechar {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 4px;
}
.ch-fechar:hover { color: var(--text-1); }

.ch-corpo { flex: 1; overflow-y: auto; padding: 14px 16px 24px; }

.ch-vazio { color: var(--text-3); font-size: 13px; line-height: 1.6; margin: 4px 0 16px; }

/* --- um grupo, pronto para chamar --- */

.ch-grupo {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin-bottom: 12px;
}
.ch-grupo-topo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.ch-grupo-nome { font-weight: 600; flex: 1; }
.ch-grupo-n { color: var(--text-3); font-size: 12px; }
.ch-grupo-n.vazio { color: var(--accent); }
.ch-editar {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  font-size: 12px; padding: 0;
}
.ch-editar:hover { color: var(--accent); }

/* --- campos --- */

.ch-nome, .ch-input, .ch-select {
  width: 100%; box-sizing: border-box;
  background: var(--bg-3); color: var(--text-1);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 13px;
  margin-bottom: 8px;
}
.ch-nome:focus, .ch-input:focus, .ch-select:focus {
  outline: none; border-color: var(--accent);
}
.ch-select { cursor: pointer; }
/* Chamada sem o link da sala: a sala nao vai no aviso, entao o seletor apaga. */
.ch-select:disabled { opacity: .45; cursor: default; }

.ch-campo { position: relative; }

/* A lista SOBE. Descendo, ela cobria o proprio botao de enviar -- que e
   exatamente o passo seguinte de quem acabou de escolher alguem, entao a
   sugestao atrapalhava o unico motivo de ela existir.
   
   E curta de proposito: cinco linhas cabem, o resto rola. Uma lista que cresce
   ate o tamanho do resultado transforma a gaveta inteira em lista e some com o
   campo de mensagem. `overscroll-behavior` prende a rolagem aqui dentro, senao
   o fim da lista continua rolando o painel de salas atras. */
.ch-sugestoes {
  /* `fixed`, e nao `absolute`: `.ch-corpo` rola e RECORTA o que sai dele, e o
     campo da chamada rapida fica na primeira linha da gaveta -- uma lista
     absoluta subindo dali seria cortada logo na primeira sugestao. Fixa, ela
     passa por cima do cabecalho, que e o que o WhatsApp faz: enquanto voce
     escolhe, o que estava acima nao importa.
     
     As coordenadas vem do JS (`posicionar`), medidas do proprio campo. Acima do
     z-index da gaveta (40), senao ela mesma tapa a lista. */
  position: fixed; z-index: 45;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
  overflow-y: auto; overscroll-behavior: contain;
}
.ch-sugestoes::-webkit-scrollbar { width: 8px; }
.ch-sugestoes::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.ch-sugestoes::-webkit-scrollbar-track { background: transparent; }

.ch-sug {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; color: var(--text-1); cursor: pointer;
  padding: 6px 8px; font: inherit; font-size: 13px; text-align: left;
  border-radius: 8px;
}
.ch-sug:hover, .ch-sug.marcado { background: var(--bg-2); }
.ch-sug-foto {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: #fff; background: var(--bg-2);
}
.ch-sug-foto.sala { background: var(--live-dim); color: var(--live); }
.ch-sug-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ch-sug-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-sug-hit { color: var(--live); font-weight: 600; }
.ch-sug-det {
  color: var(--text-3); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-sug-nada { padding: 10px 8px; color: var(--text-3); font-size: 12px; }

/* --- autocomplete da barra de busca --- */

/* Uma coluna de nomes, e mais nada. A primeira versao (18/09/2026) copiou a
   lista de `@` da chamada inteira — foto redonda e segunda linha com onde a
   pessoa estava — e ficou pesada: ali dentro a pergunta e so "e esse mesmo o
   nome?", e o enfeite tapava a resposta.

   `fixed` porque o cabecalho e `sticky` e a lista precisa passar por cima do
   painel; as coordenadas vem do JS, medidas do proprio campo. */
.busca-sug {
  position: fixed; z-index: 45;
  min-width: 220px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  overflow-y: auto; overscroll-behavior: contain;
}
.busca-sug::-webkit-scrollbar { width: 8px; }
.busca-sug::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.busca-sug::-webkit-scrollbar-track { background: transparent; }

.busca-op {
  display: block; width: 100%;
  padding: 6px 10px;
  background: none; border: 0; border-radius: 7px;
  color: var(--text-1); font: inherit; font-size: 13px; text-align: left;
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca-op:hover, .busca-op.marcado { background: var(--bg-3); }

/* --- membros escolhidos --- */

.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ch-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 5px 3px 10px; font-size: 12px;
  max-width: 100%;
}
.ch-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A sala se distingue da pessoa pela cor: um grupo com `@CD03` se comporta
   diferente de um com as tres pessoas do CD03, e a diferenca precisa ser
   visivel sem ler. */
.ch-chip.sala { border-color: var(--accent); color: var(--accent); }
/* Alvo redondo do tamanho do texto, sem moldura: o x pertence a pilula, e nao
   e um botao colado nela. Apagado ate o mouse chegar -- ele so importa na hora
   de desistir de alguem, e aceso o tempo todo competia com o proprio nome. */
.ch-x {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 16px; height: 16px; padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: inherit; opacity: .45; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1;
  transition: opacity .12s ease, background-color .12s ease;
}
.ch-x:hover, .ch-x:focus-visible { opacity: 1; background: rgba(255, 255, 255, .12); }

/* --- botoes --- */

.ch-acoes { display: flex; gap: 8px; margin-top: 4px; }
.ch-btn {
  background: var(--bg-3); color: var(--text-1);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.ch-btn:hover:not(:disabled) { background: var(--border); }
.ch-btn:disabled { opacity: .45; cursor: default; }
.ch-btn.largo { width: 100%; text-align: center; display: block; }
.ch-btn.primario {
  background: var(--accent); border-color: var(--accent); color: #1b1206;
  font-weight: 600; text-decoration: none;
}
.ch-btn.primario:hover:not(:disabled) { filter: brightness(1.08); }
.ch-btn.perigo { color: #f87171; margin-left: auto; }

/* --- resultado e convite --- */

.ch-resultado {
  background: var(--live-dim); border: 1px solid rgba(55, 214, 122, .3);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px;
}
.ch-resultado.ruim { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .3); }
.ch-resultado p { margin: 6px 0 0; color: var(--text-2); font-size: 12px; }
.ch-resultado p.ruim { color: #f87171; }

.ch-convite {
  background: var(--bg-2); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 12px; margin-bottom: 14px;
}
.ch-convite p { margin: 6px 0 10px; color: var(--text-2); font-size: 12px; line-height: 1.5; }

.ch-icone { font-size: 14px; line-height: 1; }
.novidades-btn.ativo { color: var(--accent); }

/* Espelho do @media (min-width: 900px) la em cima: onde o corpo NAO reserva
   espaco, a gaveta toma a tela. Mexeu num, mexe no outro. */
@media (max-width: 899px) {
  .chamada { width: 100%; max-width: 100%; }
}

/* Conteudo do grupo: de QUEM ele e feito. Fica entre o nome e o seletor de
   sala de proposito — e o que separa "quem eu chamo" de "para onde chamo". */
.ch-quem { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.ch-tag {
  font-size: 11.5px; color: var(--text-3);
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 8px;
}
.ch-tag.sala { color: var(--accent); border-color: rgba(255, 138, 61, .35); }

.ch-rot {
  display: block; font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.ch-fora { color: var(--text-3); font-size: 11px; }

/* ---------------------------------------------------------------------------
   Cartao de chamada, versao compacta (03/09/2026)

   As etiquetas de quem esta no grupo (.ch-quem/.ch-tag) sairam do cartao: com
   varios grupos na tela, a lista de nomes dominava e cada cartao virava do
   tamanho de um formulario. Elas continuam no editor, e no `title` do topo.
   As regras ficam onde estao porque o EDITOR ainda usa .ch-chip.
   --------------------------------------------------------------------------- */

/* Sala e botao na mesma faixa: era a altura que sobrava depois das etiquetas. */
.ch-linha { display: flex; gap: 8px; align-items: stretch; }
.ch-linha .ch-select { flex: 1; margin-bottom: 0; }
.ch-linha .ch-btn { width: auto; white-space: nowrap; padding-left: 18px; padding-right: 18px; }

/* Campo de mensagem menor: e opcional, nao pode pesar como o resto. */
.ch-nome.curto { padding: 6px 10px; font-size: 12.5px; }

/* Chamada rapida: mesma caixa dos grupos, marcada pela borda. E a acao
   principal agora, e precisa se distinguir da lista de grupos salvos. */
.ch-rapida { border-color: rgba(255, 138, 61, .4); }

.ch-sep {
  font-size: 11px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .06em; margin: 18px 0 8px;
}

/* --- caixa de recebidas --- */

.ch-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--accent); color: #1b1206;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  line-height: 15px; text-align: center;
}
.novidades-btn { position: relative; }

/* Duas chavinhas na mesma linha: "com link" e "abrir no site". Elas decidem
   coisas diferentes (se ha botao de entrar; onde o clique cai primeiro), e
   lado a lado fica claro que dao para combinar. */
.ch-chaves { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* A mensagem que o clique da notificacao veio buscar. O anel apaga sozinho: ele
   serve para achar a linha no meio das outras, e depois disso so atrapalha. */
.ch-recado.destaque {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 138, 61, .25);
  animation: recado-achado 4s ease forwards;
}
@keyframes recado-achado {
  0%, 55% { box-shadow: 0 0 0 2px rgba(255, 138, 61, .25); border-color: var(--accent); }
  100%    { box-shadow: 0 0 0 2px rgba(255, 138, 61, 0);   border-color: var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .ch-recado.destaque { animation: none; }
}

.ch-recado {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px;
}
/* Nao lido ganha uma barra, e nao um fundo: o fundo brigaria com o cartao de
   grupo, que e a mesma caixa. */
.ch-recado.novo { border-left: 3px solid var(--accent); }
.ch-recado.resposta { opacity: .85; }

.ch-recado-topo { display: flex; align-items: baseline; gap: 8px; }
.ch-recado-quem { font-weight: 600; flex: 1; }
.ch-recado-hora { color: var(--text-3); font-size: 11.5px; }
.ch-recado-txt { margin: 4px 0 8px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.ch-recado-ok { margin: 6px 0 0; color: var(--text-3); font-size: 11.5px; }

/* Tudo · Recebidas · Enviadas (15/09/2026): tres opcoes numa pilula so. Lado a
   lado nao cabe nos 340px da gaveta. */
.ch-filtro {
  display: flex; gap: 2px; padding: 3px; margin: 0 0 12px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px;
}
.ch-filtro-op {
  flex: 1; background: none; border: 0; border-radius: 999px; padding: 5px 8px;
  color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer;
}
.ch-filtro-op:hover { color: var(--text-1); }
.ch-filtro-op.ativo { background: var(--bg-1); color: var(--text-1); }

/* Enviada: sem o fundo do cartao, para separar do que chegou sem precisar ler. */
.ch-recado.enviado { background: transparent; }
.ch-recado-seta { color: var(--text-3); font-weight: 400; }
.ch-recado-link { margin: -4px 0 6px; color: var(--text-3); font-size: 11.5px; }
/* O "2 de 3 acessaram": discreto de proposito. Com mais de uma pessoa, clicar
   abre quem ja acessou e quem nao. */
.ch-recado-sit, .ch-recado-mais summary { margin: 0; color: var(--text-3); font-size: 11.5px; }
.ch-recado-mais summary { cursor: pointer; }
.ch-recado-mais summary:hover { color: var(--text-2); }
.ch-recado-pessoa { margin: 4px 0 0 12px; color: var(--text-3); font-size: 11.5px; line-height: 1.45; }
.ch-recado-pessoa b { color: var(--text-2); font-weight: 500; }

/* As respostas prontas quebram em varias linhas: sao curtas e cabem duas por
   faixa na largura da gaveta. */
.ch-respostas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ch-respostas .ch-btn { width: auto; font-size: 12px; padding: 6px 10px; }
.ch-respostas .ch-nome { flex: 1; min-width: 120px; margin-bottom: 0; }

/* Chavinha do link: discreta de proposito. E uma excecao ocasional, nao um
   campo do formulario -- se pesar igual ao seletor de sala, vira decisao a
   cada chamada em vez de continuar sendo o padrao que quase sempre serve. */
.ch-chave {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; color: var(--text-3); font-size: 11.5px;
  cursor: pointer; user-select: none;
}
.ch-chave input { accent-color: var(--accent); margin: 0; cursor: pointer; }
.ch-chave:hover { color: var(--text-2); }

/* O campo de link fica logo abaixo da chavinha, recuado para se ler como
   detalhe dela e nao como mais um campo do formulario. */
.ch-url { margin-top: 6px; margin-left: 20px; width: calc(100% - 20px); }

/* Pedido de liberação: o botão nasce dentro do aviso de erro, e não como um
   bloco novo. É a saída daquele erro específico, não uma função do painel. */
.ch-pedir { margin-top: 10px; }
.ch-pedir .ch-btn { font-size: 12px; }

/* Aba de links do admin */
.dom-alvo { font-weight: 600; font-size: 14px; }
.dom-ex {
  word-break: break-all; opacity: .75;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
}

/* Férias e Encerrou entram na mesma família visual de Ausentes e Em almoço --
   card tracejado, contagem neutra. Com quatro deles lado a lado o título
   sozinho já não basta para bater o olho, então cada um ganha uma marca fina
   no topo. Fina de propósito: são cards de apoio, não podem competir com as
   salas, que são o assunto da tela. */
.room.ausentes.ferias { border-top: 2px solid rgba(120, 170, 255, .45); }
.room.ausentes.encerrou { border-top: 2px solid rgba(160, 160, 175, .40); }
.room.ausentes.almoco { border-top: 2px solid rgba(255, 138, 61, .40); }

/* ---------- aviso de plantao (faixa acima das salas) ----------
   Amarelo da escala de plantao, e fina: e um lembrete, nao pode empurrar as
   salas para fora da tela de quem ja tem tudo contado em pixels. Com a gaveta
   de chamada aberta ela recua junto com o board. */
.aviso-plantao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 14px 0;
  padding: 7px 8px 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 196, 0, 0.45);
  background: linear-gradient(90deg, rgba(255, 196, 0, 0.13), var(--bg-1) 75%);
  font-size: 13px;
}
.aviso-plantao-txt { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; min-width: 0; flex: 1; }
.aviso-plantao-txt b { color: #ffd54a; font-weight: 650; }
.aviso-plantao-txt span { color: var(--text-2); }
.aviso-plantao-ver {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 7px;
  background: #ffc400;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.aviso-plantao-ver:hover { filter: brightness(1.08); }
.aviso-plantao-x {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.aviso-plantao-x:hover { color: var(--text-1); background: var(--bg-3); }
@media (min-width: 900px) {
  body.com-chamada .aviso-plantao { margin-right: calc(14px + var(--gaveta)); }
}

/* O plantao no popup do sino: o link para a escala. */
.post-plantao .post-data { color: #ffd54a; }
.post-link { display: inline-block; margin-top: 6px; font-size: 12.5px; color: #ffd54a; }

/* Mudanca de sala na equipe: a mesma faixa, no laranja do painel, para nao ser
   lida como plantao. */
.aviso-plantao.aviso-equipe {
  border-color: rgba(255, 138, 61, 0.5);
  background: linear-gradient(90deg, rgba(255, 138, 61, 0.13), var(--bg-1) 75%);
}
.aviso-equipe .aviso-plantao-txt b { color: #ffb37f; }
.aviso-equipe .aviso-plantao-ver { background: var(--accent); border: 0; cursor: pointer; font-family: inherit; }
.post-equipe .post-data { color: #ffb37f; }

/* Foto do Google na bolinha (02/10/2026). O fundo da bolinha continua sendo o
   estado (verde aqui, cinza fora, laranja representante) e aparece como o anel
   em volta da foto. Quem nao esta na sala fica com a foto em preto e branco,
   como a inicial ficava cinza. */
.exp-ini.com-foto { padding: 1.5px; }
.exp-ini.com-foto img,
.ch-sug-foto.com-foto img {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
}
.exp-nome.representante .exp-ini.com-foto { background: var(--accent); }
.exp-nome.est-neutro .exp-ini.com-foto img,
.exp-nome.fora .exp-ini.com-foto img,
.room.ausentes .exp-ini.com-foto img { filter: grayscale(1); opacity: .6; }
.ch-sug-foto.com-foto { overflow: hidden; }

/* Aniversariantes do dia: a mesma faixa, em rosa, acima da do plantao. */
.aviso-plantao.aviso-aniversario {
  border-color: rgba(255, 120, 190, 0.5);
  background: linear-gradient(90deg, rgba(255, 120, 190, 0.13), var(--bg-1) 75%);
}
.aviso-aniversario .aviso-plantao-txt b { color: #ff9fd2; }
.exp-ani { font-size: 0.95em; }

/* ---------- "Onde voce esta?" (aviso-cidade.js, 02/10/2026) ---------- */
/* O desenho do prototipo aprovado, nas cores do painel. Trava o painel ate
   confirmar: nao fecha no Esc nem clicando fora. */
body.com-aviso-cidade .board,
body.com-aviso-cidade .top { pointer-events: none; user-select: none; }
.cidade-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 7, 10, 0.62);
  backdrop-filter: blur(3px);
  animation: modal-entra 0.16s ease-out;
}
.cidade-aviso {
  width: min(440px, 100%);
  padding: 22px 22px 20px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: modal-sobe 0.18s ease-out;
}
.cidade-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 11px;
  background: var(--live-dim);
  color: var(--live);
  font-size: 19px;
}
.cidade-aviso h2 { margin: 0 0 6px; font-size: 18px; }
.cidade-sub { margin: 0 0 16px; color: var(--text-2); font-size: 13.5px; }
.cidade-palpite {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14.5px;
}
.cidade-palpite b, .cidade-escolhida b { color: var(--live); }
.cidade-procurando { display: flex; align-items: center; gap: 10px; padding: 6px 0 4px; color: var(--text-2); font-size: 13.5px; }
.cidade-roda {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--bg-3);
  border-top-color: var(--live);
  animation: cidade-gira .8s linear infinite;
}
@keyframes cidade-gira { to { transform: rotate(360deg); } }
.cidade-acoes { display: flex; gap: 10px; }
.cidade-bt {
  flex: 1;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cidade-bt.sim { background: var(--live); color: #0b1a10; }
.cidade-bt.sim:hover:not(:disabled) { filter: brightness(1.06); }
.cidade-bt.sim:disabled { opacity: .45; cursor: default; filter: none; }
.cidade-bt.nao { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border); }
.cidade-bt.nao:hover { color: var(--text-1); }
.cidade-busca { position: relative; margin-bottom: 14px; }
.cidade-busca input {
  width: 100%;
  padding: 11px 12px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-1);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.cidade-busca input:focus { border-color: var(--live); }
.cidade-sugestoes {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  z-index: 2;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cidade-sug { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; }
.cidade-sug:hover, .cidade-sug.marcado { background: var(--bg-3); }
.cidade-uf { color: var(--text-3); font-size: 12px; font-weight: 700; }
.cidade-escolhida { margin: -6px 0 14px; color: var(--text-2); font-size: 13px; }
.cidade-erro { margin-top: 10px; color: #f2a58f; font-size: 12.5px; }
.cidade-obrigado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 0 14px;
  font-size: 20px;
  font-weight: 600;
}
.cidade-obrigado small { margin-top: -6px; color: var(--text-2); font-size: 13.5px; font-weight: 400; }
.cidade-check {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--live-dim);
  border: 1px solid rgba(55, 214, 122, 0.4);
  color: var(--live);
  font-size: 26px;
}
@media (prefers-reduced-motion: reduce) { .cidade-roda { animation-duration: 2.4s; } }

/* Acesso a cada ferramenta (aba Ferramentas do /admin, 07/10/2026) */
.fa-caixa { overflow: auto; max-height: calc(100vh - 280px); margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-1); }
.fa-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.fa-tabela th, .fa-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; vertical-align: middle; }
.fa-tabela th { position: sticky; top: 0; z-index: 1; background: var(--bg-2); color: var(--text-2); font-weight: 600; font-size: 12px; }
.fa-tabela th.fa-f, .fa-tabela td.fa-f { text-align: center; }
.fa-tabela td.fa-conta b { display: block; color: var(--text-1); font-weight: 600; }
.fa-tabela td.fa-conta small { display: block; color: var(--text-3); font-size: 11.5px; }
.fa-tabela tbody tr:hover td { background: var(--bg-2); }
.fa-tabela input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--live); cursor: pointer; }
.fa-tabela input[type="checkbox"]:disabled { cursor: default; opacity: .6; }
.fa-tabela td.fa-ajuste { background: rgba(255, 138, 61, .14); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .55); }
.fa-tabela td.fa-acoes { text-align: right; }
.fa-padrao { padding: 4px 10px; font-size: 12px; }
/* As duas colunas do proprio painel (ver e editar), separadas das ferramentas. */
.fa-tabela th.fa-painel { color: var(--accent); }
.fa-tabela th.fa-painel:first-of-type, .fa-tabela td.fa-painel { border-left: 1px solid var(--border); }
/* --- comunicados e mencoes por setor, cargo e @todos (08/10/2026) --- */

/* As mencoes que nao sao pessoa: sala em verde (como sempre), setor em azul,
   cargo em lilas e @todos em laranja. A cor diz o tipo sem precisar ler. */
.ch-sug-foto.setor { background: rgba(96, 165, 250, .14); color: #60a5fa; }
.ch-sug-foto.cargo { background: rgba(180, 140, 255, .14); color: #b48cff; }
.ch-sug-foto.todos { background: rgba(255, 138, 61, .14); color: var(--accent); font-size: 14px; }
.ch-chip.setor { border-color: #60a5fa; color: #60a5fa; }
.ch-chip.cargo { border-color: #b48cff; color: #b48cff; }
.ch-chip.todos { border-color: var(--accent); color: var(--accent); background: rgba(255, 138, 61, .1); }

/* A chavinha Mensagem rapida / Comunicado, no topo do bloco. */
.ch-tipo { margin-bottom: 10px; }
.ch-rapida.comunicado { border-color: rgba(255, 138, 61, .45); }

/* Para quantas pessoas vai: cada mencao filtra na hora. */
.ch-previa { margin: -2px 0 8px; color: var(--text-3); font-size: 12px; line-height: 1.45; }
.ch-previa b { color: var(--text-2); font-weight: 600; }
.ch-previa.vazio { color: #f87171; }
.ch-previa-dica { color: var(--text-3); }

.ch-texto { display: block; min-height: 96px; resize: vertical; line-height: 1.45; }

/* O comunicado e texto longo, com as quebras de linha de quem escreveu. */
.ch-comunicado-txt { margin: 4px 0 8px; color: var(--text-1); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-recado.comunicado.novo { border-left-color: var(--accent); }

/* Os comunicados no sino (09/10/2026, pedido do dono): o mesmo cartao da
   gaveta, dentro do popup. A pilula Recebidos/Enviados nao estica nos 560px
   do popup — esticada, parecia uma barra e nao uma escolha. */
.post-comunicados .ch-filtro { max-width: 260px; }
.post-comunicados .ch-vazio { margin-bottom: 0; }
.post-comunicados .ch-recado:last-child { margin-bottom: 0; }

/* Funil das tabelas (tabela-padrao.js, 08/10/2026): centrado nas colunas de
   marcar da aba Ferramentas e a direita nas de numero do Analytics. */
.fa-tabela th.fa-f .fxf-th { justify-content: center; }
.atab th.num .fxf-th { justify-content: flex-end; }
.graf-cab .fxf-chip { margin-left: auto; }
/* O botao "Filtro em..." do dia aberto do plantao, longe da borda. */
.pl-dia > .fxf-chip { margin: 10px 12px 0; }

/* ---------------------------------------------------------------------------
   Agenda de chamadas (11/11/2026, agenda-chamadas.js): o layout da agenda do
   TIMI — barra com ‹ titulo ›, Dia | Semana | Mes, as agendas e Hoje; grade de
   horas de 44px com a linha do agora; mes em 7 colunas — nas cores do painel.
   --------------------------------------------------------------------------- */
.cal-fundo {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(6, 8, 11, 0.72);
  backdrop-filter: blur(3px);
  animation: modal-entra 0.16s ease-out;
}
.cal {
  width: min(1280px, 100%); height: min(92vh, 940px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: modal-sobe 0.18s ease-out;
}

/* Barra: cada grupo muda de linha inteiro, nunca um botao sozinho. */
.cal-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); flex: none;
}
.cal-barra-grupo, .cal-nav, .cal-vistas, .cal-agendas, .cal-dir {
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0;
}
.cal-barra-grupo { gap: 10px; }
.cal-agendas { flex-wrap: wrap; }
.cal-dir { margin-left: auto; gap: 8px; }
.cal-titulo {
  font-size: 13px; font-weight: 600; color: var(--text-1);
  min-width: 150px; text-align: center; white-space: nowrap;
}
.cal-seta {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer;
}
.cal-seta:hover { background: var(--bg-2); border-color: var(--border); color: var(--text-1); }
.cal-op, .cal-agenda {
  padding: 4px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: transparent; color: var(--text-3); font: inherit; font-size: 12px;
  cursor: pointer; white-space: nowrap;
}
.cal-op:hover, .cal-agenda:hover { color: var(--text-1); }
.cal-op.ativo { background: rgba(255, 138, 61, .12); border-color: var(--accent); color: var(--accent); }
.cal-agenda { --cor: var(--accent); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.cal-agenda.ligada {
  color: var(--cor); border-color: var(--cor);
  background: color-mix(in srgb, var(--cor) 13%, transparent);
}
.cal-novo { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
.cal-dir .modal-x { font-size: 15px; }

.cal-meio { flex: 1; min-height: 0; display: flex; position: relative; }
.cal-grade { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-vazio { color: var(--text-3); font-size: 13px; padding: 20px; margin: 0; }

/* --- Semana e Dia --- */
.cal-cab {
  display: grid; flex: none; border-bottom: 1px solid var(--border);
  overflow: hidden; scrollbar-gutter: stable;
}
.cal-cab-dia {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; background: none; border: 0; cursor: pointer; font: inherit; min-width: 0;
}
.cal-cab-sem { font-size: 12px; color: var(--text-3); }
.cal-cab-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-1);
}
.cal-cab-dia:hover .cal-cab-num { background: var(--bg-3); }
.cal-cab-dia.hoje .cal-cab-num { background: var(--accent); color: #1b1206; font-weight: 700; }

.cal-rola { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.cal-rola::-webkit-scrollbar { width: 8px; }
.cal-rola::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.cal-rola::-webkit-scrollbar-track { background: transparent; }
.cal-corpo { display: grid; position: relative; }
.cal-horas { position: relative; }
.cal-hora {
  position: absolute; left: 0; right: 0; box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-3); padding: 3px 6px 0 0; text-align: right;
}
.cal-col { position: relative; border-left: 1px solid var(--border); min-width: 0; }
.cal-col.hoje { background: rgba(255, 138, 61, .025); }
.cal-slot { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--border); }
.cal-slot.livre { cursor: pointer; }
.cal-slot.livre:hover { background: var(--bg-2); }

.cal-agora {
  position: absolute; left: 46px; right: 0; height: 2px; z-index: 3; pointer-events: none;
  background: var(--accent); opacity: .85;
}
.cal-agora-ponto {
  position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 4px var(--accent);
}

.cal-bloco {
  --cor: var(--accent);
  position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 2px 6px; border: 0; border-left: 3px solid var(--cor); border-radius: 5px;
  background: color-mix(in srgb, var(--cor) 20%, var(--bg-1));
  color: var(--text-1); font: inherit; cursor: pointer;
}
.cal-bloco:hover, .cal-bloco.aberto { background: color-mix(in srgb, var(--cor) 32%, var(--bg-1)); }
.cal-bloco.aberto { box-shadow: 0 0 0 1px var(--cor); }
.cal-bloco-tit { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-bloco-tit b { font-weight: 700; }
.cal-bloco-det { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-bloco.feita, .cal-chip.feita { opacity: .55; }
.cal-bloco.perdida, .cal-bloco.falhou { box-shadow: inset 0 0 0 1px #f87171; }

/* Botao direito na chamada: Editar | Excluir (12/11/2026). */
.cal-menu {
  position: fixed; z-index: 60; min-width: 150px; padding: 4px;
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: modal-entra 0.1s ease-out;
}
.cal-menu-op {
  padding: 7px 12px; border: 0; border-radius: 6px; background: none; text-align: left;
  color: var(--text-1); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.cal-menu-op:hover, .cal-menu-op:focus-visible { background: var(--bg-1); outline: none; }
.cal-menu-op.perigo { color: #f87171; }

/* --- Mes --- */
.cal-mes-cab {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: none;
  border-bottom: 1px solid var(--border);
}
.cal-mes-cab div { text-align: center; padding: 6px 0; font-size: 12px; color: var(--text-3); letter-spacing: .1em; }
.cal-mes {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr));
}
.cal-mes-dia {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden;
  padding: 4px 5px; cursor: pointer; background: var(--bg-1);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.cal-mes-dia:hover { background: var(--bg-2); }
.cal-mes-dia.fora { background: var(--bg-0); }
.cal-mes-dia.fora .cal-mes-num { color: var(--text-3); }
.cal-mes-dia.hoje { background: rgba(255, 138, 61, .07); }
.cal-mes-num {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-2);
}
.cal-mes-dia.hoje .cal-mes-num { background: var(--accent); color: #1b1206; font-weight: 700; }
.cal-chip {
  --cor: var(--accent);
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 1px 5px; border: 0; border-left: 3px solid var(--cor); border-radius: 3px;
  background: color-mix(in srgb, var(--cor) 18%, transparent);
  color: var(--text-1); font: inherit; font-size: 11.5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-mais { font-size: 11.5px; color: var(--text-3); }

/* --- Painel do lado: ver, agendar, editar --- */
.cal-lado { display: none; }
.com-lado .cal-lado {
  display: flex; flex-direction: column; flex: none; width: 360px;
  border-left: 1px solid var(--border); background: var(--bg-1); min-height: 0;
}
.cal-lado-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--border); flex: none;
}
.cal-lado-cab h3 { margin: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-lado-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.cal-quando { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.cal-quando .ch-nome, .cal-quando .ch-select { padding-left: 8px; padding-right: 6px; color-scheme: dark; }
.cal-info { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cal-info-rot { flex: none; width: 92px; color: var(--text-3); font-size: 12px; padding-top: 1px; }
.cal-info-val { flex: 1; min-width: 0; color: var(--text-1); overflow-wrap: anywhere; }
.cal-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-situacao { margin: 12px 0; font-size: 12.5px; color: var(--text-2); }
.cal-situacao.ok { color: var(--live); }
.cal-situacao.ruim, .cal-erro { color: #f87171; }
.cal-erro { font-size: 12.5px; margin: 0 0 8px; }

/* "Em nome de Rafael Borges" (a Flavia chama por ele): no topo da gaveta e do formulario. */
.ch-em-nome {
  margin: 0 0 10px; padding: 6px 10px; border-radius: 8px;
  background: rgba(255, 138, 61, .1); border: 1px solid rgba(255, 138, 61, .3);
  color: var(--accent); font-size: 12px; font-weight: 600;
}
/* Para o dono a mesma linha e uma chave: desligada, fica neutra (chama em nome proprio). */
.ch-em-nome-chave { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.ch-em-nome-chave input { margin: 0; accent-color: var(--accent); cursor: pointer; }
.ch-em-nome-chave.desligada { background: var(--bg-2); border-color: var(--border); color: var(--text-3); font-weight: 400; }
.ch-em-nome-chave.desligada:hover { color: var(--text-2); }
/* O 📅 ao lado do Chamar e o "📅 Agenda" do topo da gaveta. */
.ch-linha .ch-agendar { padding-left: 10px; padding-right: 10px; }
.cal-lado-corpo .ch-convite-largo { margin-top: 12px; }

/* Convidados de fora (12/11/2026): nome + e-mail, lembrados e sugeridos. */
.cv { margin: 2px 0 10px; }
.cv-rot { font-size: 12px; color: var(--text-3); margin: 2px 0 6px; }
.cv-lista { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.cv-lista:empty { display: none; }
.cv-linha {
  display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2);
}
.cv-linha.editando { border-color: var(--accent); }
.cv-txt, .cv-ver-linha { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cv-txt b, .cv-ver-linha b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-txt small, .cv-ver-linha small { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-mini {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-3); cursor: pointer; font: inherit; font-size: 13px;
}
.cv-mini:hover { background: var(--bg-3); color: var(--text-1); }
.cv-campos { display: flex; gap: 6px; align-items: stretch; }
.cv-campos .ch-nome { margin-bottom: 0; min-width: 0; }
.cv-nome { flex: 2; }
.cv-email { flex: 3; }
.cv-ok { flex: none; padding: 0 13px; font-weight: 600; }
.cv-erro { margin: 4px 0 0; }
.cv-sugestoes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cv-sugestoes:empty { display: none; }
.cv-sug {
  max-width: 100%; padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--border);
  background: transparent; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-sug::before { content: '+ '; color: var(--accent); }
.cv-sug:hover { border-style: solid; border-color: var(--accent); color: var(--text-1); }
.cv-ver { display: flex; flex-direction: column; gap: 5px; }
.cv-sempre { margin-top: -4px; }
.cal-evento-ok { color: #37d67a; text-decoration: none; font-weight: 600; }
.cal-evento-ok:hover { text-decoration: underline; }
.cal-lado-corpo .ch-convite-largo + .ch-convite-largo { margin-top: 8px; }
.ch-agenda-abre {
  margin-left: auto; margin-right: 8px; padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.ch-agenda-abre:hover { color: var(--text-1); border-color: var(--accent); }

/* Estreito: a agenda toma a tela, e o painel do lado cobre a grade. */
@media (max-width: 899px) {
  .com-lado .cal-lado { position: absolute; inset: 0; width: auto; border-left: 0; z-index: 6; }
}
@media (max-width: 720px) {
  .cal-fundo { padding: 0; }
  .cal { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .cal-titulo { min-width: 0; }
}
/* Celular, como o TIMI: ‹ titulo › numa linha; Dia | Semana | Mes, Hoje e
   "+ Agendar" na de baixo. */
@media (max-width: 560px) {
  .cal-barra { padding: 8px 10px; gap: 6px 8px; }
  .cal-barra-grupo { display: contents; }
  .cal-nav { flex: 1 0 100%; justify-content: space-between; order: -1; }
  .cal-vistas .cal-op, .cal-barra > .cal-op { padding: 4px 8px; }
  .cal-novo { padding: 5px 10px; }
}