/* =====================================================================
   Escritório Ciranda: sistema de design próprio
   Tokens de cor, tipo, espaço, raio, sombra e movimento; tema claro e escuro.
   ===================================================================== */
:root {
  /* tipo */
  --f-base: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --t-1: 12px; --t-2: 12px; --t-3: 13px; --t-4: 14px; --t-5: 16px; --t-6: 20px; --t-7: 28px;
  /* espaço */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px;
  /* raio */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pilula: 999px;
  /* movimento */
  --m-rapido: 120ms; --m-medio: 200ms; --curva: cubic-bezier(.2, .8, .2, 1);
  /* tamanhos */
  --topo: 52px; --lateral: 340px;
  /* entalhe e barra de gestos (iPhone e iPad com viewport-fit=cover); 0 no computador */
  --seguro-baixo: env(safe-area-inset-bottom, 0px); --seguro-esq: env(safe-area-inset-left, 0px); --seguro-dir: env(safe-area-inset-right, 0px);

  /* cores (claro) */
  --c-fundo: #f5f4f0;
  --c-superficie: #ffffff;
  --c-superficie-2: #f1efe9;
  --c-superficie-3: #e8e5dd;
  --c-vidro: rgba(255, 255, 255, .9); /* .9: o texto-3, o verde e o vermelho seguem AA mesmo com o mapa preto atrás */
  --c-borda: #e2ded4;
  --c-borda-forte: #cfc9bc;
  --c-texto: #1d1a2b;
  --c-texto-2: #57526a;
  --c-texto-3: #666276; /* contraste AA (4,5) em todas as superfícies do tema claro */
  --c-marca: #5a46e0;
  --c-marca-forte: #4533c2;
  --c-marca-suave: #eeecff;
  --c-sobre-marca: #ffffff;
  --c-coral: #e8552f;
  --c-verde: #0b7359; /* idem, também como texto */
  --c-verde-suave: #e2f6ef;
  --c-amarelo: #e9a514;
  --c-vermelho: #bd3434; /* idem */
  --c-vermelho-suave: #fde8e6;
  --c-mapa: #191726;
  --c-foco: #5a46e0;
  --c-agente: #0e6577; /* agentes de IA: o mesmo azul-piscina do selo no mapa; contraste AA no suave */
  --c-agente-suave: #dff4f9;
  --c-sobre-amarelo: #2a1d00; /* texto sobre o amarelo (selo "Precisa de ação"), nos dois temas */
  --c-decisao: #a35f00;        /* agente esperando uma decisão sua: pílula do topo (AA com branco) */
  --c-decisao-suave: #fff1d6;
  --c-sobre-decisao: #ffffff;
  /* GitHub no escritório (D-027): uma cor por atividade no painel (o ícone sobre o fundo suave) */
  --c-gh-push: var(--c-verde); --c-gh-push-suave: var(--c-verde-suave);
  --c-gh-pr: var(--c-marca); --c-gh-pr-suave: var(--c-marca-suave);
  --c-gh-merge: #8a3fd1; --c-gh-merge-suave: #f3e9ff;
  --c-gh-deploy: #c4431f; --c-gh-deploy-suave: #fdebe5;
  --s-1: 0 1px 2px rgba(29, 26, 43, .06), 0 1px 1px rgba(29, 26, 43, .04);
  --s-2: 0 4px 14px rgba(29, 26, 43, .10), 0 1px 3px rgba(29, 26, 43, .06);
  --s-3: 0 16px 40px rgba(29, 26, 43, .18), 0 2px 8px rgba(29, 26, 43, .08);
  color-scheme: light;
}

:root[data-tema="escuro"] {
  --c-fundo: #121119;
  --c-superficie: #1b1a25;
  --c-superficie-2: #23212f;
  --c-superficie-3: #2d2a3c;
  --c-vidro: rgba(27, 26, 37, .86);
  --c-borda: #302d41;
  --c-borda-forte: #423e58;
  --c-texto: #f2f0fa;
  --c-texto-2: #bcb7cf;
  --c-texto-3: #9b96b0;
  --c-marca: #8f80ff;
  --c-marca-forte: #a597ff;
  --c-marca-suave: #2a2550;
  --c-sobre-marca: #14121e;
  --c-coral: #ff7a55;
  --c-verde: #2fd3a3;
  --c-verde-suave: #143a31;
  --c-amarelo: #f5c04a;
  --c-vermelho: #ff6b6b;
  --c-vermelho-suave: #3d1f22;
  --c-mapa: #0d0c14;
  --c-foco: #a597ff;
  --c-agente: #6fd6ee;
  --c-agente-suave: #123a44;
  --c-sobre-amarelo: #2a1d00;
  --c-decisao: #f5b13d;
  --c-decisao-suave: #3a2a0c;
  --c-sobre-decisao: #2a1d00;
  --c-gh-merge: #c39bff; --c-gh-merge-suave: #2f2147;
  --c-gh-deploy: #ff8a66; --c-gh-deploy-suave: #3d2219;
  --s-1: 0 1px 2px rgba(0, 0, 0, .4);
  --s-2: 0 6px 18px rgba(0, 0, 0, .45);
  --s-3: 0 18px 44px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-rapido: 0ms; --m-medio: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--f-base); font-size: var(--t-4); line-height: 1.45; color: var(--c-texto); background: var(--c-fundo);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: var(--c-marca); }
:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; border-radius: var(--r-1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
svg.ic.p { width: 16px; height: 16px; }
kbd {
  font-family: var(--f-base); font-size: var(--t-1); padding: 1px 6px; border-radius: var(--r-1); border: 1px solid var(--c-borda-forte);
  background: var(--c-superficie-2); color: var(--c-texto-2); box-shadow: inset 0 -1px 0 var(--c-borda-forte);
}

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); height: 36px; padding: 0 var(--e-4);
  border-radius: var(--r-2); border: 1px solid var(--c-borda); background: var(--c-superficie); color: var(--c-texto);
  font-weight: 600; font-size: var(--t-3); transition: background var(--m-rapido), border-color var(--m-rapido), transform var(--m-rapido);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--c-superficie-2); }
.btn:active { transform: translateY(1px); }
.btn.primario { background: var(--c-marca); border-color: var(--c-marca); color: var(--c-sobre-marca); }
.btn.primario:hover { background: var(--c-marca-forte); }
.btn.perigo { color: var(--c-vermelho); }
.btn.fantasma { border-color: transparent; background: transparent; }
.btn.fantasma:hover { background: var(--c-superficie-2); }
.btn.pequeno { height: 30px; padding: 0 var(--e-3); font-size: var(--t-2); }
.btn.icone { width: 36px; padding: 0; }
.campo {
  width: 100%; height: 38px; border: 1px solid var(--c-borda); background: var(--c-superficie); border-radius: var(--r-2);
  padding: 0 var(--e-3); transition: border-color var(--m-rapido), box-shadow var(--m-rapido);
}
textarea.campo { height: auto; padding: var(--e-3); }
.campo:focus { outline: none; border-color: var(--c-marca); box-shadow: 0 0 0 3px var(--c-marca-suave); }
.etiqueta { font-size: var(--t-2); color: var(--c-texto-2); font-weight: 600; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pilula);
  background: var(--c-superficie-2); color: var(--c-texto-2); font-size: var(--t-2); font-weight: 600; white-space: nowrap;
}
.chip.marca { background: var(--c-marca-suave); color: var(--c-marca); }
.chip.ok { background: var(--c-verde-suave); color: var(--c-verde); }
.chip.ruim { background: var(--c-vermelho-suave); color: var(--c-vermelho); }
.pequeno { font-size: var(--t-2); color: var(--c-texto-3); }

/* bolinha de status */
.bolinha { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c-texto-3); flex: none; }
.bolinha.disponivel { background: #22c27a; }
.bolinha.ocupado { background: var(--c-coral); }
.bolinha.ausente { background: var(--c-amarelo); }
.bolinha.reuniao { background: var(--c-marca); }
.bolinha.inativo { background: var(--c-texto-3); }

/* ---------------------------------------------------------------- aplicação */
body.app {
  display: grid; grid-template-columns: 1fr var(--lateral); grid-template-rows: var(--topo) 1fr; overflow: hidden;
  height: 100dvh; --topo: calc(52px + env(safe-area-inset-top, 0px));
}
body.app.sem-lateral { grid-template-columns: 1fr 0; }
body.app.sem-lateral #lateral { display: none; }

#topo {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-3);
  padding: env(safe-area-inset-top, 0px) calc(var(--e-3) + env(safe-area-inset-right, 0px)) 0 calc(var(--e-4) + env(safe-area-inset-left, 0px));
  background: var(--c-superficie); border-bottom: 1px solid var(--c-borda); z-index: 10;
}
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-5); white-space: nowrap; letter-spacing: -.01em; }
.logo { width: 28px; height: 28px; flex: none; }
.seletor-andar { display: flex; align-items: center; gap: 6px; }
.seletor-andar select { height: 32px; border-radius: var(--r-2); border: 1px solid var(--c-borda); background: var(--c-superficie-2); padding: 0 var(--e-2); font-weight: 600; font-size: var(--t-3); }
#lugar { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.gatilho-comando {
  flex: 1; max-width: 460px; margin: 0 auto; height: 34px; display: flex; align-items: center; gap: var(--e-2);
  padding: 0 var(--e-3); border-radius: var(--r-2); border: 1px solid var(--c-borda); background: var(--c-superficie-2);
  color: var(--c-texto-3); font-size: var(--t-3); text-align: left;
}
.gatilho-comando:hover { border-color: var(--c-borda-forte); }
.gatilho-comando span { flex: 1; }
.topo-dir { display: flex; align-items: center; gap: var(--e-1); }
#btn-perfil { display: flex; align-items: center; gap: var(--e-2); height: 38px; padding: 0 var(--e-2) 0 4px; border-radius: var(--r-pilula); border: 1px solid var(--c-borda); background: var(--c-superficie); }
#btn-perfil canvas { width: 30px; height: 30px; border-radius: 50%; image-rendering: pixelated; background: var(--c-marca-suave); }
#btn-perfil .txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
#btn-perfil .txt b { font-size: var(--t-3); }
#btn-perfil .txt small { font-size: var(--t-1); color: var(--c-texto-3); display: flex; align-items: center; gap: 4px; }

/* mapa */
#area { position: relative; overflow: hidden; background: var(--c-mapa); }
#mundo { width: 100%; height: 100%; display: block; image-rendering: pixelated; outline: none; touch-action: none; cursor: grab; }
#mundo.arrastando { cursor: grabbing; }
body.editando #mundo { cursor: default; }
#mundo:focus-visible { box-shadow: inset 0 0 0 3px var(--c-foco); }

.flutuante { background: var(--c-vidro); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--c-borda); box-shadow: var(--s-2); color: var(--c-texto); }

#videos {
  position: absolute; top: var(--e-3); left: 50%; transform: translateX(-50%); display: flex; gap: var(--e-2); z-index: 3;
  max-width: calc(100% - 320px); overflow-x: auto; padding: 2px; scrollbar-width: thin;
}
.video {
  position: relative; width: 176px; aspect-ratio: 16 / 10; border-radius: var(--r-3); overflow: hidden; background: #11101a;
  box-shadow: var(--s-2); outline: 3px solid transparent; outline-offset: -3px; flex: none; transition: outline-color var(--m-rapido);
}
.video.falando { outline-color: #22c27a; }
.video video { width: 100%; height: 100%; object-fit: cover; }
.video.eu video { transform: scaleX(-1); }
.video.mais { display: grid; place-items: center; width: 64px; aspect-ratio: auto; align-self: stretch; color: var(--c-sobre-marca); font-weight: 600; font-size: var(--t-3); background: var(--c-marca); }
.video .nome {
  position: absolute; left: 8px; bottom: 8px; right: 8px; font-size: var(--t-2); font-weight: 600; color: #fff;
  display: flex; gap: 4px; align-items: center; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.video .semcam { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2c2a44, #15141f); }
.video .semcam canvas { width: 42px; height: 63px; image-rendering: pixelated; }
.video .tela-tag { position: absolute; top: 8px; right: 8px; background: var(--c-marca); color: #fff; font-size: var(--t-1); font-weight: 700; border-radius: var(--r-1); padding: 3px 8px; border: 0; }

#tela-grande { position: absolute; inset: 64px var(--e-4) 96px; background: #000; border-radius: var(--r-4); z-index: 6; box-shadow: var(--s-3); display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
#tela-grande video { width: 100%; height: 100%; object-fit: contain; }
#tela-grande .legenda { color: #fff; padding: var(--e-2) var(--e-4); font-size: var(--t-3); background: #0b0b10; }
#tela-grande .btn { position: absolute; top: var(--e-3); right: var(--e-3); z-index: 2; }

#faixa-sala { position: absolute; left: calc(var(--e-3) + var(--seguro-esq)); top: var(--e-3); border-radius: var(--r-3); padding: var(--e-2) var(--e-3); font-size: var(--t-3); z-index: 3; max-width: 300px; display: flex; gap: var(--e-2); align-items: flex-start; }
#faixa-sala b { display: block; }
#faixa-sala small { color: var(--c-texto-2); }
#faixa-sala .marcador { width: 4px; align-self: stretch; border-radius: 4px; background: var(--c-verde); flex: none; }
#faixa-sala.privada .marcador { background: var(--c-marca); }
#faixa-sala.palco .marcador { background: var(--c-coral); }

#dica { position: absolute; left: 50%; bottom: calc(92px + var(--seguro-baixo)); transform: translateX(-50%); border-radius: var(--r-pilula); padding: 6px var(--e-4); font-size: var(--t-3); z-index: 3; display: flex; gap: var(--e-2); align-items: center; }

#avisos { position: absolute; right: calc(var(--e-3) + var(--seguro-dir)); top: var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); z-index: 20; width: min(360px, calc(100% - 24px)); }
.aviso {
  border-radius: var(--r-3); padding: var(--e-3) var(--e-4); font-size: var(--t-3); display: flex; flex-wrap: wrap; gap: var(--e-2);
  align-items: center; animation: entra var(--m-medio) var(--curva); background: var(--c-superficie); border: 1px solid var(--c-borda);
  box-shadow: var(--s-3); border-left: 4px solid var(--c-verde);
}
.aviso.erro { border-left-color: var(--c-vermelho); }
.aviso.acao { border-left-color: var(--c-marca); }
.aviso .txt { flex-basis: 100%; }
.aviso.saindo { opacity: 0; transform: translateX(16px); transition: all var(--m-medio); }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }
/* cutucada numa notificação só: fica até o Ok; outra cutucada da mesma pessoa chacoalha a mesma */
.aviso.cutucada { border-left-color: var(--c-coral); }
.aviso.cutucada.de-novo { animation: chacoalha 420ms var(--curva); }
@keyframes chacoalha {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

#minimapa { position: absolute; right: calc(var(--e-3) + var(--seguro-dir)); bottom: calc(84px + var(--seguro-baixo)); border-radius: var(--r-3); padding: 6px; z-index: 3; cursor: pointer; }
#mini { display: block; width: 168px; image-rendering: pixelated; border-radius: var(--r-1); }
#zoom { position: absolute; right: calc(var(--e-3) + 186px + var(--seguro-dir)); bottom: calc(84px + var(--seguro-baixo)); display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: var(--r-3); z-index: 3; }

/* doca */
#doca { position: absolute; left: 50%; bottom: var(--e-3); transform: translateX(-50%); display: flex; gap: 2px; align-items: center; border-radius: var(--r-4); padding: 6px; z-index: 4; }
.doca-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; height: 54px;
  background: transparent; border: 0; border-radius: var(--r-3); font-size: var(--t-1); font-weight: 600; color: var(--c-texto-2);
  transition: background var(--m-rapido), color var(--m-rapido);
}
.doca-btn:hover { background: var(--c-superficie-2); color: var(--c-texto); }
.doca-btn.ligado { background: var(--c-marca-suave); color: var(--c-marca); }
.doca-btn.desligado { color: var(--c-texto-3); }
.doca-btn.desligado svg { color: var(--c-vermelho); }
.doca-btn.alerta { background: var(--c-coral); color: #fff; }
.doca-btn:disabled { opacity: .45; cursor: not-allowed; }
.doca-btn kbd { position: absolute; top: 3px; right: 5px; font-size: 9px; padding: 0 4px; opacity: 0; transition: opacity var(--m-rapido); }
.doca-btn:hover kbd { opacity: 1; }
.sep { width: 1px; height: 32px; background: var(--c-borda); margin: 0 var(--e-1); }

/* lateral */
#lateral { background: var(--c-superficie); border-left: 1px solid var(--c-borda); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.abas { display: flex; gap: var(--e-1); padding: var(--e-2); border-bottom: 1px solid var(--c-borda); }
.aba {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; height: 34px;
  border-radius: var(--r-2); font-size: var(--t-3); font-weight: 600; color: var(--c-texto-2);
}
.aba:hover { background: var(--c-superficie-2); }
.aba.ativa { background: var(--c-marca-suave); color: var(--c-marca); }
.cont { background: var(--c-marca); color: var(--c-sobre-marca); border-radius: var(--r-pilula); font-size: var(--t-1); padding: 0 6px; line-height: 17px; }
.painel { display: none; flex: 1; min-height: 0; flex-direction: column; padding: var(--e-3); gap: var(--e-3); }
.painel.ativo { display: flex; }
.lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.lista .grupo { font-size: var(--t-1); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--c-texto-3); margin: var(--e-3) var(--e-1) var(--e-1); }
.pessoa { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--e-3); align-items: center; padding: 6px var(--e-2); border-radius: var(--r-2); cursor: pointer; }
.pessoa:hover, .pessoa:focus-visible { background: var(--c-superficie-2); }
.pessoa canvas { width: 36px; height: 36px; image-rendering: pixelated; background: var(--c-marca-suave); border-radius: 50%; }
.pessoa .nome { font-size: var(--t-4); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pessoa .onde { font-size: var(--t-2); color: var(--c-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* status automático: a música do Spotify e o aplicativo em uso, numa linha a mais na lista */
.pessoa .status-auto { color: var(--c-texto-2); }
.status-auto a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-borda-forte); text-underline-offset: 2px; }
.status-auto a:hover, .status-auto a:focus-visible { color: var(--c-marca); text-decoration-color: currentColor; }
.status-auto .fonte-status { color: var(--c-texto-3); }
.ic-status, .pessoa canvas.ic-status { width: 10px; height: 10px; object-fit: contain; image-rendering: pixelated; vertical-align: -1px; margin-right: var(--e-1); background: none; border-radius: 0; }
.pessoa .info { min-width: 0; }
.pessoa .mais { opacity: 0; color: var(--c-texto-3); }
.pessoa:hover .mais { opacity: 1; }

.segmentado { display: flex; background: var(--c-superficie-2); border-radius: var(--r-2); padding: 3px; gap: 2px; }
.segmentado button { flex: 1; background: none; border: 0; border-radius: 8px; height: 30px; font-size: var(--t-2); font-weight: 600; color: var(--c-texto-2); }
.segmentado button.ativo { background: var(--c-superficie); color: var(--c-texto); box-shadow: var(--s-1); }
.mensagens { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--e-2); }
.msg { font-size: var(--t-3); overflow-wrap: anywhere; display: grid; gap: 2px; }
.msg .cab { display: flex; align-items: baseline; gap: 6px; }
.msg .quem { font-weight: 700; font-size: var(--t-2); }
.msg .quando { color: var(--c-texto-3); font-size: var(--t-1); }
.msg .canal-tag { font-size: var(--t-1); text-transform: uppercase; letter-spacing: .05em; color: var(--c-texto-3); }
.msg .corpo { background: var(--c-superficie-2); border-radius: 4px var(--r-3) var(--r-3) var(--r-3); padding: 7px 11px; width: fit-content; max-width: 100%; }
.msg.minha { justify-items: end; }
.msg.minha .corpo { background: var(--c-marca); color: var(--c-sobre-marca); border-radius: var(--r-3) 4px var(--r-3) var(--r-3); }
.msg.direta .corpo { box-shadow: inset 0 0 0 1.5px var(--c-marca); }
.msg.minha.direta .corpo { box-shadow: none; }
.msg.sistema { color: var(--c-texto-3); font-size: var(--t-2); text-align: center; }
.form-chat { display: flex; gap: var(--e-2); }
.nota-privacidade { font-size: var(--t-1); color: var(--c-texto-3); margin: 0; display: flex; gap: 6px; align-items: center; }
.vazio { text-align: center; color: var(--c-texto-3); font-size: var(--t-3); padding: var(--e-5) var(--e-3); }

.evento { border: 1px solid var(--c-borda); border-radius: var(--r-3); padding: var(--e-3); margin-bottom: var(--e-2); font-size: var(--t-3); display: grid; gap: 6px; }
.evento .hora { font-weight: 700; font-size: var(--t-2); color: var(--c-texto-2); }
.evento .titulo { font-weight: 600; }
.evento.agora { border-color: var(--c-marca); box-shadow: 0 0 0 3px var(--c-marca-suave); }

/* menu e barra de comando */
.menu {
  position: fixed; background: var(--c-superficie); border-radius: var(--r-3); box-shadow: var(--s-3); padding: 6px; z-index: 30;
  min-width: 220px; display: flex; flex-direction: column; border: 1px solid var(--c-borda); animation: entra var(--m-rapido) var(--curva);
}
.menu .titulo { font-size: var(--t-2); color: var(--c-texto-3); padding: 6px 10px; font-weight: 600; }
.menu button { display: flex; align-items: center; gap: 10px; background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: var(--r-2); font-size: var(--t-3); }
.menu button:hover, .menu button:focus-visible { background: var(--c-superficie-2); outline: none; }
.menu hr { border: 0; border-top: 1px solid var(--c-borda); margin: 4px 0; }
.menu .grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.menu .grade button { justify-content: center; font-size: 22px; padding: 6px; }

/* agentes de IA dos colaboradores (agentes.py): selo "IA", cartão e item da lista */
.selo-ia {
  display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 6px; flex: none;
  border-radius: var(--r-pilula); background: var(--c-agente-suave); color: var(--c-agente); font-size: var(--t-1);
  font-weight: 800; letter-spacing: .04em;
}
.pessoa.agente canvas { background: var(--c-agente-suave); }
/* lista de agentes: o título da sessão na 1ª linha (corta com reticências), o projeto e o branch na 3ª */
.pessoa.agente .titulo-item-agente { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa.agente .projeto-item-agente { font-family: var(--f-mono); font-size: var(--t-1); }
.selo-acao {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; flex: none; border-radius: var(--r-pilula);
  background: var(--c-amarelo); color: var(--c-sobre-amarelo); font-size: var(--t-1); font-weight: 700;
}
.menu .cartao-agente { display: grid; gap: var(--e-1); padding: 2px 10px 6px; max-width: 300px; font-size: var(--t-3); }
.cartao-agente .linha-selo { display: flex; align-items: center; gap: var(--e-2); color: var(--c-texto-2); font-weight: 600; flex-wrap: wrap; }
.cartao-agente .atividade { font-weight: 600; }
.cartao-agente .titulo-agente { font-weight: 700; color: var(--c-texto); overflow-wrap: anywhere; }
.cartao-agente .passo-agente { color: var(--c-agente); font-weight: 600; overflow-wrap: anywhere; }
.cartao-agente .motivo-agente {
  padding: 2px 8px; border-radius: var(--r-pilula); background: var(--c-decisao-suave); color: var(--c-texto);
  font-weight: 600; justify-self: start;
}

/* agentes esperando uma decisão sua (dono ou equipe), em qualquer andar: pílula no topo e a lista curta */
.pilula-decisao {
  display: inline-flex; align-items: center; gap: var(--e-1); height: 30px; padding: 0 12px; border: 0;
  border-radius: var(--r-pilula); background: var(--c-decisao); color: var(--c-sobre-decisao); font-weight: 700;
  font-size: var(--t-2); cursor: pointer; animation: chama-decisao 1.8s ease-in-out infinite;
}
.pilula-decisao:hover, .pilula-decisao:focus-visible { filter: brightness(1.08); }
@keyframes chama-decisao {
  0%, 100% { box-shadow: 0 0 0 0 var(--c-decisao-suave); }
  50% { box-shadow: 0 0 0 6px var(--c-decisao-suave); }
}
.menu .lista-decisao { list-style: none; margin: 0; padding: 2px 10px 6px; display: grid; gap: var(--e-1); max-width: 320px; font-size: var(--t-3); }

/* GitHub no escritório (D-027): painel "Atividade do GitHub" e o "Meu GitHub" */
/* com a aba do GitHub são quatro abas: sem os ícones, os nomes cabem na largura do painel (e, no limite, rolam) */
.abas.quatro { overflow-x: auto; scrollbar-width: none; }
.abas.quatro .aba > svg { display: none; }
.cartao-github {
  display: grid; gap: var(--e-2); padding: var(--e-3); border: 1px dashed var(--c-borda-forte); border-radius: var(--r-3);
  font-size: var(--t-3); color: var(--c-texto-2);
}
.cartao-github p { margin: 0; }
.cartao-github .btn { justify-self: start; }
.lista-github { display: grid; align-content: start; gap: 2px; }
.atividade-gh { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--e-3); align-items: start; padding: var(--e-2); border-radius: var(--r-2); }
.atividade-gh:hover { background: var(--c-superficie-2); }
.atividade-gh .selo-gh {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-gh-push-suave); color: var(--c-gh-push);
}
.atividade-gh.pr .selo-gh { background: var(--c-gh-pr-suave); color: var(--c-gh-pr); }
.atividade-gh.merge .selo-gh { background: var(--c-gh-merge-suave); color: var(--c-gh-merge); }
.atividade-gh.deploy .selo-gh { background: var(--c-gh-deploy-suave); color: var(--c-gh-deploy); }
.atividade-gh .info { min-width: 0; display: grid; gap: 2px; }
.atividade-gh .quem { font-size: var(--t-3); overflow-wrap: anywhere; }
.atividade-gh .titulo-gh { font-size: var(--t-3); font-weight: 600; overflow-wrap: anywhere; }
.atividade-gh .onde { font-size: var(--t-2); color: var(--c-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erro-campo { margin: 0; min-height: 1.2em; color: var(--c-vermelho); font-size: var(--t-2); }
#dlg-github .acoes { margin-top: var(--e-3); }
.lista-decisao li { display: grid; }
.lista-decisao span { color: var(--c-texto-2); font-size: var(--t-2); }
.cartao-agente .projeto { color: var(--c-texto-2); font-family: var(--f-mono); font-size: var(--t-2); overflow-wrap: anywhere; }
.cartao-agente .frase { color: var(--c-texto); font-style: italic; overflow-wrap: anywhere; }
#mundo.sobre-agente { cursor: pointer; }

#paleta { padding: 0; max-width: 620px; top: 12vh; margin-top: 0; overflow: hidden; }
#paleta .busca { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-4); border-bottom: 1px solid var(--c-borda); }
#paleta input { flex: 1; border: 0; background: none; height: 54px; font-size: var(--t-5); outline: none; }
#paleta ul { list-style: none; margin: 0; padding: var(--e-2); max-height: min(420px, 60vh); overflow-y: auto; }
#paleta li { display: flex; align-items: center; gap: var(--e-3); padding: 9px var(--e-3); border-radius: var(--r-2); cursor: pointer; font-size: var(--t-4); }
#paleta li .sub { margin-left: auto; color: var(--c-texto-3); font-size: var(--t-2); display: flex; gap: 6px; align-items: center; }
#paleta li[aria-selected="true"] { background: var(--c-marca-suave); color: var(--c-marca); }
#paleta li .grupo-paleta { font-size: var(--t-1); }
#paleta .rodape { display: flex; gap: var(--e-4); padding: var(--e-2) var(--e-4); border-top: 1px solid var(--c-borda); font-size: var(--t-2); color: var(--c-texto-3); }

/* diálogos */
dialog {
  border: 1px solid var(--c-borda); border-radius: var(--r-4); padding: var(--e-5); max-width: 640px; width: calc(100% - 32px);
  box-shadow: var(--s-3); background: var(--c-superficie); color: var(--c-texto);
}
dialog[open] { animation: entra var(--m-medio) var(--curva); }
dialog::backdrop { background: rgba(14, 12, 22, .55); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 var(--e-3); font-family: var(--f-titulo); font-size: var(--t-6); letter-spacing: -.01em; }
dialog ul { padding-left: 20px; }
dialog li { margin-bottom: 8px; font-size: var(--t-4); }
.acoes { display: flex; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-5); flex-wrap: wrap; }
.cab-dialogo { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.cab-dialogo h2 { margin: 0; }
#dlg-objeto { max-width: 920px; }
/* janela "Conectar o Spotify" (status automático): o manual, o endereço de retorno e o Client ID */
.manual-spotify { padding-left: var(--e-5); margin: var(--e-4) 0; }
.manual-spotify li { font-size: var(--t-3); }
.linha-copiar { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-2); flex-wrap: wrap; }
.linha-copiar code { font-family: var(--f-mono); font-size: var(--t-2); background: var(--c-superficie-2); border: 1px solid var(--c-borda); border-radius: var(--r-1); padding: var(--e-1) var(--e-2); overflow-wrap: anywhere; }
.form-spotify { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.form-spotify .campo { flex: 1 1 260px; font-family: var(--f-mono); }
.erro-spotify { color: var(--c-vermelho); font-size: var(--t-3); min-height: 1.2em; margin: var(--e-2) 0 0; }
.manual-erros { font-size: var(--t-3); color: var(--c-texto-2); }
.manual-erros summary { cursor: pointer; }
.lgpd-itens { display: grid; gap: var(--e-3); margin: var(--e-4) 0; }
.lgpd-item { display: grid; grid-template-columns: 36px 1fr; gap: var(--e-3); align-items: start; }
.lgpd-item .bola { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-marca-suave); color: var(--c-marca); }
.lgpd-item b { display: block; }
.lgpd-item span { color: var(--c-texto-2); font-size: var(--t-3); }
.atalhos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: var(--t-3); align-items: center; }

.editor-avatar { display: grid; grid-template-columns: 160px 1fr; gap: var(--e-5); align-items: start; }
.previa { background: radial-gradient(circle at 50% 35%, var(--c-marca-suave), var(--c-superficie-2)); border-radius: var(--r-4); display: grid; place-items: center; padding: var(--e-4); }
#previa-avatar { width: 128px; height: 256px; image-rendering: pixelated; }
.giro { display: flex; gap: var(--e-1); justify-content: center; margin-top: var(--e-2); }
.opcoes-avatar { display: grid; gap: var(--e-4); max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.opcao-avatar .valores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.opcao-avatar button { border: 2px solid var(--c-borda); border-radius: var(--r-2); min-width: 32px; height: 32px; background: var(--c-superficie); font-size: var(--t-2); font-weight: 600; padding: 0 10px; }
.opcao-avatar button.cor { width: 32px; min-width: 32px; padding: 0; border-radius: 50%; }
.opcao-avatar button[aria-pressed="true"] { border-color: var(--c-marca); box-shadow: 0 0 0 3px var(--c-marca-suave); }
.opcao-avatar .numero-camisa { width: 96px; }
.opcoes-avatar .grupo-avatar { font-size: var(--t-3); font-weight: 700; color: var(--c-texto-2); margin: var(--e-2) 0 0; }
.dica-avatar { font-size: var(--t-1); color: var(--c-texto-3); margin: var(--e-1) 0 0; }

/* objetos interativos */
.quadro-area { display: grid; gap: var(--e-2); }
.quadro-area canvas { width: 100%; background: #fff; border-radius: var(--r-2); border: 1px solid var(--c-borda); touch-action: none; cursor: crosshair; }
.quadro-camadas { position: relative; }
.quadro-camadas canvas { display: block; }
.quadro-area canvas.quadro-ativo { position: absolute; inset: 0; height: 100%; background: transparent; border-color: transparent; }
.ferramentas { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.ferramentas .cor { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--c-superficie); box-shadow: 0 0 0 1px var(--c-borda-forte); }
.ferramentas .cor[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--c-marca); }
.nota-texto { width: 100%; min-height: 220px; border-radius: var(--r-2); border: 1px solid var(--c-borda); padding: var(--e-3); background: #fff7cf; color: #2b2410; resize: vertical; }
.embed { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-2); background: #000; }
.cartoes { display: grid; gap: var(--e-2); max-height: 50vh; overflow-y: auto; }
.cartao { border: 1px solid var(--c-borda); border-radius: var(--r-2); padding: var(--e-2) var(--e-3); font-size: var(--t-3); }
.form-grade { display: grid; grid-template-columns: 150px 1fr; gap: var(--e-2) var(--e-3); align-items: center; font-size: var(--t-3); }

/* câmera, microfone e som (aparelhos.js) */
.aparelhos { display: grid; gap: var(--e-3); margin-top: var(--e-3); min-width: min(420px, 100%); }
.aparelho { display: grid; gap: var(--e-1); }
.previa-cam { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-2); background: var(--c-superficie-2); transform: scaleX(-1); }
.nivel-mic { width: 100%; height: 10px; }
.aparelho-saida { display: grid; grid-template-columns: 1fr auto; gap: var(--e-2); align-items: end; }
@media (max-width: 480px) { .aparelho-saida { grid-template-columns: 1fr; } }

/* editor de mapa */
#painel-editor {
  position: absolute; left: var(--e-3); top: var(--e-3); bottom: 84px; width: 290px; border-radius: var(--r-4);
  z-index: 5; display: flex; flex-direction: column; padding: var(--e-3); gap: var(--e-3); font-size: var(--t-3);
}
#painel-editor h3 { margin: 0; font-size: var(--t-5); }
.ferramentas-editor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ferramentas-editor button { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--c-superficie-2); border: 1px solid transparent; border-radius: var(--r-2); padding: 6px 4px; font-size: var(--t-1); font-weight: 600; }
.ferramentas-editor button[aria-pressed="true"] { background: var(--c-marca-suave); border-color: var(--c-marca); color: var(--c-marca); }
.biblioteca { overflow-y: auto; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; }
.biblioteca .item { background: var(--c-superficie); border: 2px solid var(--c-borda); border-radius: var(--r-2); padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; text-align: center; line-height: 1.15; }
.biblioteca .item[aria-pressed="true"] { border-color: var(--c-marca); background: var(--c-marca-suave); }
.biblioteca .item canvas { width: 44px; height: 44px; image-rendering: pixelated; object-fit: contain; }
.pisos-editor { display: flex; flex-wrap: wrap; gap: 4px; }
.pisos-editor button { width: 34px; height: 34px; border-radius: var(--r-1); border: 2px solid var(--c-borda); padding: 0; overflow: hidden; }
.pisos-editor button canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.pisos-editor button[aria-pressed="true"] { border-color: var(--c-marca); }
.rodape-editor { display: flex; gap: 6px; flex-wrap: wrap; }
.linha-editor { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* páginas simples (entrar, administração) */
/* no-repeat: o fundo é do tamanho da tela; repetido, fazia uma emenda na altura da janela nas páginas longas */
body.simples { min-height: 100%; background: radial-gradient(1200px 600px at 10% -10%, var(--c-marca-suave), transparent) no-repeat, var(--c-fundo); }
.cartao-entrar { max-width: 440px; margin: 10vh auto var(--e-6); background: var(--c-superficie); border: 1px solid var(--c-borda); border-radius: var(--r-4); padding: var(--e-6); box-shadow: var(--s-3); }
.cartao-entrar .logo { width: 56px; height: 56px; }
.cartao-entrar h1 { font-family: var(--f-titulo); font-size: var(--t-7); letter-spacing: -.02em; margin: var(--e-4) 0 var(--e-2); line-height: 1.15; }
.cartao-entrar p { color: var(--c-texto-2); margin: 0 0 var(--e-5); }
.cartao-entrar .btn { width: 100%; height: 46px; font-size: var(--t-4); }
.dev { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px dashed var(--c-borda-forte); display: grid; gap: var(--e-2); }
.dev .btn { height: 38px; font-size: var(--t-3); justify-content: flex-start; }
.lista-dev { display: grid; gap: var(--e-2); }
.erro-login { background: var(--c-vermelho-suave); color: var(--c-vermelho); border-radius: var(--r-2); padding: var(--e-3); font-size: var(--t-3); margin-bottom: var(--e-4); }
.rodape-entrar { text-align: center; font-size: var(--t-2); color: var(--c-texto-3); }

/* administração (admin.html): topo fixo com uma aba por seção; seções em cartão; no celular as tabelas viram cartões */
.admin-topo { position: sticky; top: 0; z-index: 10; background: var(--c-superficie); border-bottom: 1px solid var(--c-borda); padding-top: env(safe-area-inset-top, 0px); }
.admin-topo-linha, .admin-nav { max-width: 1180px; margin: 0 auto; padding: 0 calc(var(--e-5) + var(--seguro-dir)) 0 calc(var(--e-5) + var(--seguro-esq)); }
.admin-topo-linha { display: flex; align-items: center; gap: var(--e-3); min-height: 60px; }
.admin-titulo { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.admin-titulo h1 { font-family: var(--f-titulo); font-size: var(--t-6); margin: 0; letter-spacing: -.01em; }
.admin-topo-linha .btn { gap: 0; } /* "Voltar" e " ao escritório" (que some no celular) sem o vão do .btn */
.admin-nav { display: flex; gap: var(--e-1); padding-bottom: var(--e-2); overflow-x: auto; scrollbar-width: none; }
.aba-admin {
  display: inline-flex; align-items: center; gap: var(--e-2); flex: none; height: 36px; padding: 0 var(--e-3); border-radius: var(--r-2);
  color: var(--c-texto-2); font-size: var(--t-3); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background var(--m-rapido), color var(--m-rapido);
}
.aba-admin:hover { background: var(--c-superficie-2); color: var(--c-texto); }
.aba-admin[aria-current="page"] { background: var(--c-marca-suave); color: var(--c-marca); }
.aba-admin .cont { background: var(--c-superficie-3); color: var(--c-texto-2); }
.aba-admin[aria-current="page"] .cont { background: var(--c-marca); color: var(--c-sobre-marca); }
.pagina-admin #avisos { position: fixed; } /* o aviso aparece onde a pessoa está, não no topo da página */

.admin { max-width: 1180px; margin: 0 auto; padding: var(--e-5) calc(var(--e-5) + var(--seguro-dir)) var(--e-6) calc(var(--e-5) + var(--seguro-esq)); display: grid; gap: var(--e-4); }
/* min-width: 0: a tabela larga rola dentro da seção em vez de alargar a página inteira (no celular ia a 906 px) */
.admin > section {
  min-width: 0; background: var(--c-superficie); border: 1px solid var(--c-borda); border-radius: var(--r-4);
  padding: var(--e-5); box-shadow: var(--s-1); scroll-margin-top: 120px;
}
.admin > section.fora-da-aba { display: none; }
.cab-secao { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-4); }
.cab-secao .btn { flex: none; }
.admin h2 { font-family: var(--f-titulo); font-size: var(--t-6); letter-spacing: -.01em; margin: 0 0 var(--e-1); }
.descricao { margin: 0; color: var(--c-texto-2); font-size: var(--t-3); max-width: 76ch; }
.titulo-form, .titulo-tabela { font-size: var(--t-4); font-weight: 700; margin: 0; }
.titulo-tabela { margin: var(--e-5) 0 var(--e-2); }
.admin code, .admin .mono { font-family: var(--f-mono); font-size: var(--t-2); }
.admin .campo::placeholder { color: var(--c-texto-3); opacity: 1; }
.admin input[type="checkbox"], .admin input[type="radio"] { accent-color: var(--c-marca); }

/* formulários */
.painel-acao { display: grid; gap: var(--e-4); background: var(--c-superficie-2); border-radius: var(--r-3); padding: var(--e-4); margin-bottom: var(--e-4); }
.painel-acao .campo { background: var(--c-superficie); }
.grade-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e-3); align-items: end; }
.grade-form .titulo-form { grid-column: 1 / -1; }
.grade-form > label, .form-cenario > label, .barra-ferramentas > label { display: grid; gap: var(--e-1); min-width: 0; }
.acoes-form { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.permissoes, .escopos { border: 0; margin: 0; padding: 0; min-width: 0; }
.permissoes { display: flex; flex-wrap: wrap; gap: 0 var(--e-4); align-items: center; }
.permissoes legend, .escopos legend { float: left; width: 100%; padding: 0; margin-bottom: var(--e-1); }
.marcar { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 32px; font-size: var(--t-3); cursor: pointer; }
.marcar input, .escopo input { width: 18px; height: 18px; margin: 0; flex: none; }
.escopos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-2); }
.escopos legend { grid-column: 1 / -1; }
.escopo {
  display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-2) var(--e-3); border: 1px solid var(--c-borda);
  border-radius: var(--r-2); background: var(--c-superficie); cursor: pointer; transition: border-color var(--m-rapido);
}
.escopo:hover { border-color: var(--c-borda-forte); }
.escopo:has(input:checked) { border-color: var(--c-marca); }
.escopo-txt { display: grid; gap: var(--e-1); min-width: 0; }
.escopo code { font-size: var(--t-3); font-weight: 600; color: var(--c-texto); }
.escopo-dica { font-size: var(--t-2); color: var(--c-texto-2); }
.nota { margin: 0; padding: var(--e-3); border-radius: var(--r-2); border-left: 3px solid var(--c-agente); background: var(--c-agente-suave); color: var(--c-texto); font-size: var(--t-3); }
.token-novo { display: grid; gap: var(--e-2); background: var(--c-marca-suave); border: 1px solid var(--c-marca); border-radius: var(--r-3); padding: var(--e-4); margin-bottom: var(--e-4); }
.token-novo .pequeno { color: var(--c-texto-2); }
.token-novo .segredo { font-size: var(--t-3); word-break: break-all; background: var(--c-superficie); color: var(--c-texto); border-radius: var(--r-2); padding: var(--e-2) var(--e-3); user-select: all; }
.acoes-token { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.admin .lote { border-top: 1px solid var(--c-borda); padding-top: var(--e-3); }
.admin .lote summary { cursor: pointer; color: var(--c-marca); font-weight: 600; }
.admin .pilha { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-3); }
.admin .pilha > label { display: flex; flex-direction: column; gap: var(--e-1); }
.admin .resultado-lote { margin: 0; font-weight: 600; }
.admin .lista-recusados { margin: var(--e-1) 0 0; padding-left: var(--e-5); color: var(--c-vermelho); font-size: var(--t-3); }
.form-cenario { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: var(--e-3) var(--e-4); align-items: start; }
.form-cenario .acoes-form { grid-column: 1 / -1; justify-content: flex-end; }
.previa-cenario:empty { display: none; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--e-2); margin-bottom: var(--e-3); }
.numero { display: grid; background: var(--c-superficie-2); border-radius: var(--r-2); padding: var(--e-3); }
.numero b { font-family: var(--f-titulo); font-size: var(--t-6); line-height: 1.2; }
.numero span { font-size: var(--t-2); color: var(--c-texto-2); }
/* regras antigas de linha (outras partes da página ainda usam .linha e label.chip) */
.admin .linha { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: end; }
.admin .linha label { display: grid; gap: var(--e-1); }
.admin .linha label.chip { display: inline-flex; }
.admin .linha .campo { width: auto; min-width: 160px; }
.admin .linha label.largo { flex: 1; min-width: 260px; }
.admin .linha label.largo .campo { width: 100%; }
.sem-borda { border: 0; padding: 0; margin: 0; }

/* barra acima da tabela: busca, filtros e o resumo */
.barra-ferramentas { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-3); margin-bottom: var(--e-3); }
.barra-ferramentas .busca { flex: 1 1 260px; max-width: 420px; }
.barra-ferramentas > label .campo { min-width: 180px; }
.resumo { margin: 0 0 0 auto; align-self: center; font-size: var(--t-3); color: var(--c-texto-2); }

/* tabelas */
.tabela-rolagem { overflow-x: auto; }
.admin table { width: 100%; border-collapse: collapse; font-size: var(--t-3); }
.admin th {
  text-align: left; font-size: var(--t-1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-texto-3);
  padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--c-borda); white-space: nowrap;
}
.admin td { padding: var(--e-3); border-bottom: 1px solid var(--c-borda); vertical-align: middle; }
.admin tbody tr:last-child td { border-bottom: 0; }
.admin tr.inativo { background: var(--c-superficie-2); }
.admin tr.inativo td { color: var(--c-texto-2); }
.admin tr.inativo .chip:not(.ok):not(.ruim) { background: var(--c-superficie-3); } /* o chip não some no fundo da linha */
.tabela-tokens td:nth-child(3), .tabela-tokens td:nth-child(4), .tabela-tokens td:nth-child(5) { white-space: nowrap; }
.admin td .campo { height: 34px; font-size: var(--t-3); }
.tabela-membros td:nth-child(2) .campo { width: 150px; }
.tabela-membros td:nth-child(3) .campo { width: 150px; padding-right: var(--e-1); }
.tabela-membros .campo-github { width: 110px; } /* D-027: usuário do GitHub; mais largo, a tabela passa da tela a 1366 px */
.celula-titulo > b, .celula-titulo > span { display: block; }
.celula-titulo .pequeno { overflow-wrap: anywhere; }
.celula-titulo > .nome-linha { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); }
.celula-acoes { text-align: right; white-space: nowrap; }
.acoes-linha { display: inline-flex; align-items: center; gap: var(--e-2); }
.permissoes-linha { display: flex; gap: 0 var(--e-3); white-space: nowrap; } /* as duas lado a lado: linha mais baixa */
.mesa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.detalhes { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); max-width: 440px; font-size: var(--t-2); color: var(--c-texto-2); }
.detalhe { overflow-wrap: anywhere; }
.detalhe-k { color: var(--c-texto-3); }
.detalhe-k::after { content: ":"; }
.tabela-auditoria time { white-space: nowrap; }
.linha-vazia td { border: 0; }
.rodape-tabela { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-3); }
.rodape-tabela:has(.pequeno:empty):has(.btn[hidden]) { display: none; }

/* confirmação (no lugar do confirm() do navegador) */
.dlg-confirmar { max-width: 460px; }
.dlg-confirmar p { margin: 0; color: var(--c-texto-2); }
.btn.perigo.cheio { background: var(--c-vermelho); border-color: var(--c-vermelho); color: var(--c-superficie); }
.btn.perigo.cheio:hover { filter: brightness(.94); }

@media (max-width: 720px) {
  .admin-topo-linha, .admin-nav { padding-left: calc(var(--e-3) + var(--seguro-esq)); padding-right: calc(var(--e-3) + var(--seguro-dir)); }
  .admin-topo-linha { min-height: 56px; }
  .admin-titulo h1 { font-size: var(--t-5); }
  .admin-titulo .pequeno, .so-largo { display: none; }
  .admin { padding: var(--e-3) calc(var(--e-3) + var(--seguro-dir)) calc(var(--e-5) + var(--seguro-baixo)) calc(var(--e-3) + var(--seguro-esq)); gap: var(--e-3); }
  .admin > section { padding: var(--e-4); border-radius: var(--r-3); }
  .cab-secao { flex-direction: column; align-items: stretch; }
  .painel-acao { padding: var(--e-3); }
  .form-cenario { grid-template-columns: minmax(0, 1fr); }
  .form-cenario .acoes-form { justify-content: stretch; }
  .acoes-form .btn { flex: 1; }
  .barra-ferramentas .busca { max-width: none; }
  .permissoes-linha { flex-wrap: wrap; white-space: normal; }
  .barra-ferramentas > label, .barra-ferramentas .acoes-form { flex: 1 1 100%; }
  .resumo { margin-left: 0; flex-basis: 100%; }
  /* tabela vira lista de cartões: cada linha um cartão, cada célula com o seu rótulo */
  .tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; }
  .tabela-cartoes tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--c-borda); }
  .tabela-cartoes tbody tr:last-child { border-bottom: 0; }
  .tabela-cartoes tr.inativo { padding: var(--e-3); border-radius: var(--r-2); }
  .tabela-cartoes td { border: 0; padding: var(--e-1) 0; }
  .tabela-cartoes td[data-rotulo] { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; justify-items: start; gap: var(--e-2); }
  .tabela-cartoes td.sem-valor { display: none; } /* no cartão, "Alvo: —" só ocupa espaço */
  .tabela-cartoes td[data-rotulo]::before { content: attr(data-rotulo); font-size: var(--t-2); font-weight: 600; color: var(--c-texto-3); }
  .tabela-cartoes .celula-titulo { padding-bottom: var(--e-2); }
  .tabela-cartoes .celula-acoes { text-align: left; padding-top: var(--e-2); }
  .tabela-cartoes .acoes-linha { display: flex; }
  .tabela-cartoes .acoes-linha .btn { flex: 1; }
  .tabela-cartoes td[data-rotulo] .campo { width: 100%; }
}
@media (pointer: coarse) {
  .pagina-admin .btn, .aba-admin, .admin .campo, .admin td .campo { min-height: 44px; }
  .marcar, .escopo { min-height: 44px; }
  .admin .lote summary { padding: var(--e-3) 0; }
}


/* ---------------------------------------------------------------- toque (celular e tablet, Android e iOS) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, select, .aba, .doca-btn, .pessoa, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#doca { bottom: calc(var(--e-3) + var(--seguro-baixo)); }
#lateral { padding: 0 var(--seguro-dir) var(--seguro-baixo) var(--seguro-esq); }
#dica .btn { margin-left: var(--e-2); }
/* mensagem nova com o painel fechado: um ponto no botão do painel */
#btn-lateral { position: relative; }
#btn-lateral.novidade::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-coral); box-shadow: 0 0 0 2px var(--c-superficie);
}
/* primeiro acesso */
#dlg-boas-vindas { max-width: min(440px, calc(100vw - 2 * var(--e-4))); }
#dlg-boas-vindas p { font-size: var(--t-4); color: var(--c-texto-2); line-height: 1.5; margin: 0 0 var(--e-4); }
.acoes-boas-vindas { display: flex; align-items: center; gap: var(--e-2); }
.acoes-boas-vindas .passo { margin-right: auto; }
/* o que mudou: aviso discreto em cima dos outros avisos, com as novidades que a pessoa não viu (novidades.js), e a
   lista inteira no diálogo. Num mapa baixo (celular com o painel aberto) o aviso encolhe e só o texto rola. */
#avisos { max-height: calc(100% - 2 * var(--e-3)); }
.novidades {
  display: flex; flex-direction: column; gap: var(--e-2); min-height: 0; max-height: min(55vh, 420px);
  border-radius: var(--r-3); padding: var(--e-3) var(--e-4); background: var(--c-superficie); color: var(--c-texto);
  border: 1px solid var(--c-borda); border-left: 4px solid var(--c-marca); box-shadow: var(--s-3);
  animation: entra var(--m-medio) var(--curva);
}
.novidades h2 { margin: 0; font-family: var(--f-titulo); font-size: var(--t-4); display: flex; align-items: center; gap: var(--e-2); }
.novidades h2 .ic { color: var(--c-marca); }
.novidades-corpo { display: grid; gap: var(--e-3); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.novidade h3 { margin: 0 0 var(--e-1); font-size: var(--t-3); }
.novidade-data { margin: 0 0 var(--e-1); font-size: var(--t-1); font-weight: 600; color: var(--c-texto-3); }
.novidade ul { margin: 0; padding-left: var(--e-4); display: grid; gap: var(--e-1); color: var(--c-texto-2); font-size: var(--t-3); line-height: 1.45; }
.novidade li { margin: 0; }
.acoes-novidades { display: flex; justify-content: flex-end; gap: var(--e-2); flex-wrap: wrap; }
#dlg-novidades { max-width: 520px; }
.novidades-lista { display: grid; gap: var(--e-4); }
.novidades-lista .novidade { padding-bottom: var(--e-4); border-bottom: 1px solid var(--c-borda); }
.novidades-lista .novidade:last-child { padding-bottom: 0; border-bottom: 0; }
.novidades-lista .novidade h3 { font-size: var(--t-5); }
.novidades-lista .novidade ul { font-size: var(--t-4); }
@media (pointer: coarse) { .acoes-novidades .btn { min-height: 44px; } }
/* fim do o que mudou */
@media (hover: none) {
  .pessoa .mais { opacity: 1; } /* sem mouse não existe "passar por cima" */
  .doca-btn kbd { display: none; }
}
@media (pointer: coarse) {
  /* menor que isso o iPhone dá zoom ao digitar (o seletor de andar tem regra própria, mais específica) */
  .campo, input, textarea, select, .seletor-andar select { font-size: var(--t-5); }
  .doca-btn, .btn.icone, .aba, .aviso button { min-height: 44px; } /* alvo de toque confortável */
  .btn.icone { min-width: 44px; }
}

@media (max-width: 960px) {
  /* minmax(0, 1fr): a coluna não cresce até a largura mínima do topo; quem encolhe é o seletor de andar */
  body.app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--topo) 1fr 46vh; }
  @supports (height: 1dvh) { body.app { grid-template-rows: var(--topo) 1fr 46dvh; } }
  /* recolhido pelo usuário ou até o app.js decidir (sem .pronto): o painel não pisca aberto ao carregar */
  body.app.sem-lateral, body.app:not(.pronto) { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--topo) 1fr; }
  body.app:not(.pronto) #lateral { display: none; }
  #lateral { border-left: 0; border-top: 1px solid var(--c-borda); }
  #lugar, .gatilho-comando span, .gatilho-comando kbd, #btn-perfil .txt { display: none; }
  .gatilho-comando { flex: 0 0 auto; }
  /* o topo nunca passa da largura da tela (senão o celular afasta a página inteira): o seletor de andar encolhe */
  .seletor-andar { min-width: 0; }
  .seletor-andar select { min-width: 0; max-width: 100%; }
  .doca-btn { width: 44px; height: 44px; }
  /* só o ícone à vista; o texto continua como nome do botão para o leitor de tela */
  .doca-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #minimapa { display: none; }
  #videos { max-width: calc(100% - 24px); }
  /* tela estreita: a doca rola em vez de cortar; o zoom vai para o canto (sem minimapa) e a dica não o cobre */
  #doca { max-width: calc(100% - 2 * var(--e-3) - var(--seguro-esq) - var(--seguro-dir)); overflow-x: auto; scrollbar-width: none; }
  #doca > * { flex: none; } /* os botões rolam em vez de encolher abaixo de 44 px */
  #zoom { right: calc(var(--e-3) + var(--seguro-dir)); }
  #dica { left: calc(var(--e-3) + var(--seguro-esq)); transform: none; max-width: calc(100% - 2 * var(--e-3) - 64px - var(--seguro-esq) - var(--seguro-dir)); }
  .abas { overflow-x: auto; scrollbar-width: none; }
  .aba { flex: 0 0 auto; }
}
/* celular: só o logo no topo (o nome não cabe junto do andar, da busca e dos botões) */
@media (max-width: 480px) {
  .marca span { display: none; }
  #topo { gap: var(--e-2); padding-left: calc(var(--e-3) + env(safe-area-inset-left, 0px)); }
}
/* celular bem estreito (320 a 360 px): o tema sai do topo e continua na busca ("Alternar tema") */
@media (max-width: 360px) {
  #btn-tema { display: none; }
}

/* rádio do andar (radio.js): a aba e o player flutuante (o embed do YouTube, visível, pelo menos 356×200) */
.chave-radio { display: flex; align-items: center; gap: var(--e-2); font-weight: 600; margin: var(--e-2) 0; }
.radio-tocando { border: 1px solid var(--c-borda); border-radius: var(--r-2); padding: var(--e-3); margin: var(--e-3) 0; background: var(--c-superficie-2); }
.radio-rotulo { font-size: var(--t-1); color: var(--c-texto-3); text-transform: uppercase; letter-spacing: .04em; }
.radio-titulo { font-weight: 600; margin: var(--e-1) 0; overflow-wrap: anywhere; }
.radio-acoes { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-2); }
.form-radio { display: flex; gap: var(--e-2); margin-bottom: var(--e-3); }
.form-radio .campo { flex: 1 1 auto; min-width: 0; }
.radio-item { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) 0; border-bottom: 1px solid var(--c-borda); }
.radio-item .info { flex: 1 1 auto; min-width: 0; }
.radio-item .nome { overflow-wrap: anywhere; }
.radio-item .onde { font-size: var(--t-2); color: var(--c-texto-3); }
.radio-numero { font-size: var(--t-2); color: var(--c-texto-3); min-width: 1.5em; text-align: right; }
.player-radio { position: absolute; left: calc(var(--e-3) + var(--seguro-esq)); top: var(--e-3); z-index: 5; padding: var(--e-2); border-radius: var(--r-3); display: flex; flex-direction: column; gap: var(--e-2); max-width: calc(100% - 2 * var(--e-3)); }
.player-radio .cab-player { display: flex; align-items: center; gap: var(--e-2); }
.player-radio .cab-player b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-3); }
.player-radio-embed { display: block; width: 356px; height: 200px; border: 0; border-radius: var(--r-2); }
@media (max-width: 420px) {
  /* celular: o player ocupa a largura (continua com pelo menos 200 px de altura, como o YouTube pede) */
  .player-radio { left: var(--e-2); right: var(--e-2); max-width: none; }
  .player-radio-embed { width: 100%; }
}