/*
 * Reuniões & Acompanhamento — complemento visual da área (TAR-2026-10-06-001).
 *
 * Só acrescenta o que as folhas do Portal não tinham: o cartão do dia, os
 * blocos da pauta, a presença e o resumo. Cores, fontes, raios e espaçamentos
 * vêm das variáveis da folha aprovada (styles.css), que não é alterada — nos
 * três temas e na escala P, M e G. Nenhuma cor é inventada aqui.
 *
 * Nasceu do protótipo aceito em 06/10/2026:
 * docs/designs/prototipos/reunioes-acompanhamento-v1/reunioes.css.
 */

/* Cor de cada coisa. Sempre acompanhada de ícone e nome: nunca só a cor. A paleta (`data-cor`) mora na seção 24.1 de
   `superadmin.css`, num lugar só para o SGI inteiro (`TAR-2026-10-15-004`). */

.reunioes-grade { display: grid; gap: 1rem; margin-bottom: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.reunioes-grade > *, .reunioes-pilha > * { min-width: 0; }
.reunioes-pilha { display: grid; gap: 1rem; align-content: start; }
.reunioes-duas { display: grid; gap: 1rem; grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .reunioes-duas { grid-template-columns: minmax(0, 1fr); } }

.rotulo { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }

/* Etiqueta com bolinha de cor: o texto fica em tinta de texto, a cor na bolinha. */
.chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--cor-suave, var(--filled-bg)); color: var(--text); font-size: var(--text-xs); line-height: var(--leading-xs); white-space: nowrap; }
.chip::before { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cor, var(--text-muted)); content: ""; }

/* Cartão do dia. */
.hoje { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; margin-bottom: 1rem; padding: 1.25rem 1.5rem; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--border)); border-left: 0.375rem solid var(--color-accent); border-radius: var(--radius-xl); background: linear-gradient(100deg, var(--accent-soft), var(--surface) 62%); box-shadow: var(--shadow-soft); }
.hoje h2 { margin: 0.25rem 0; font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: 600; }
.hoje__hora { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0 0 0.5rem; color: var(--text-muted); }
.hoje__hora strong { color: var(--text); font-size: 2.25rem; line-height: 1; font-weight: 600; }
@media (max-width: 760px) { .hoje { grid-template-columns: 1fr; } }

/* Faixa de dados da reunião. */
.faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-soft); overflow: hidden; }
.faixa--aovivo { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: linear-gradient(100deg, var(--success-soft), var(--surface) 55%); }
.faixa__celula { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-right: 1px solid var(--border-subtle); }
.faixa__celula:last-child { border-right: 0; }
.faixa__celula strong { display: block; font-size: var(--text-lg); line-height: 1.2; font-weight: 600; }
.faixa__icone { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--cor-suave); color: var(--cor); }

/* Participantes, com check-in e check-out. */
.presentes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.presente { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem 0.375rem 0.375rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface); font-size: var(--text-xs); }
.presente[data-estado="dentro"] { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); background: var(--success-soft); }
.presente[data-estado="saiu"] { background: var(--filled-bg); }
.presente[data-estado="fora"] { border-style: dashed; }
.presente form { display: inline-flex; }

/* Bloco da pauta: quadro bem definido, com a cor do bloco na borda e no topo. */
.bloco { margin-bottom: 1rem; border: 1px solid var(--border); border-left: 0.3125rem solid var(--cor); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-soft); overflow: hidden; }
.bloco__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--cor-suave); }
.bloco__icone { display: grid; place-items: center; flex: 0 0 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--surface); color: var(--cor); box-shadow: var(--shadow-xs); }
.bloco__topo h2 { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); font-weight: 600; }
.bloco__topo p { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.bloco__conta { margin-left: auto; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--surface); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.bloco__corpo { display: grid; padding: 0.25rem 1rem 0.75rem; }
.bloco__vazio { padding: 0.875rem 0 0.25rem; margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

.item { display: grid; gap: 0.375rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-subtle); }
.item:last-child { border-bottom: 0; }
.item__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; }
.item__titulo { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; }
.item[data-situacao="tratado"] .item__titulo, .item[data-situacao="descartado"] .item__titulo { color: var(--text-muted); text-decoration: line-through; }
.item__porque { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.item__porque .icon { width: 0.875rem; height: 0.875rem; color: var(--cor); }
.item__texto { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.item__destino { padding: 0.75rem; border: 1px solid var(--border-subtle); border-left: 0.25rem solid var(--cor); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--cor-suave) 45%, var(--surface)); }
.item details > summary { color: var(--color-accent-content); font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.item details[open] > summary { margin-bottom: 0.75rem; }
.item__fim { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

/* Área de gerar ou complementar a pauta. */
.escrever { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--border)); border-left: 0.3125rem solid var(--color-accent); margin-bottom: 1rem; }
.escrever__linha { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(10rem, 1fr) auto; gap: 0.75rem; align-items: end; }
@media (max-width: 700px) { .escrever__linha { grid-template-columns: minmax(0, 1fr); } }
.escrever details > summary { color: var(--color-accent-content); font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.escrever details > * + * { margin-top: 0.75rem; }

.lista-simples { display: grid; margin: 0; padding: 0; list-style: none; }
.lista-simples > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); line-height: var(--leading-sm); }
.lista-simples > li:last-child { border-bottom: 0; }
.lista-simples .fim { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

/* Resumo da reunião encerrada. */
.secao-resumo { border-top: 0.25rem solid var(--cor); }
.secao-resumo .panel__head h2 { display: flex; align-items: center; gap: 0.5rem; }
.secao-resumo .panel__head .icon { color: var(--cor); }

/* Configurações: a lista de reuniões e os dias da semana. */
.modelo-cartao { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--border); border-left: 0.3125rem solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-soft); color: var(--text); text-decoration: none; }
.modelo-cartao > span { display: grid; gap: 0.125rem; min-width: 0; }
.modelo-cartao .icon { color: var(--text-muted); }
/* Ao passar o ponteiro e no selecionado, o sombreado da receita comum fica mais forte; o selecionado ganha o contorno na cor. */
.modelo-cartao:hover { --mistura: 20%; }
.modelo-cartao[aria-current="true"] { --mistura: 24%; border-color: var(--cor-fosca); }
.modelo-cartao[aria-current="true"] .icon { color: var(--color-accent-content); }
.modelo-cartao:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.dias-da-semana { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; border: 0; }
.dias-da-semana legend { margin-bottom: 0.375rem; padding: 0; }
.dia { position: relative; display: inline-flex; }
.dia input { position: absolute; width: 1px; height: 1px; border: 0; clip-path: inset(50%); overflow: hidden; }
.dia span { display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 0.875rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: var(--text-sm); cursor: pointer; }
.dia input:checked + span { border-color: transparent; background: var(--color-accent); color: var(--color-accent-foreground); font-weight: 600; }
.dia input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/*
 * Quadros com definição — pedido do proprietário em 06/10/2026 ("tá meio sem
 * vida, sem definições"). Os números usam o cartão do Painel do Planejamento
 * e Metas, na cor de cada coisa; as contagens viram barras de uma cor só, com
 * o valor escrito ao lado; e as listas de reuniões ganham a data em destaque.
 * O texto fica sempre em tinta de texto: a cor mora no ícone, na barra e na
 * faixa lateral.
 */
.indicadores-reuniao { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; }
.indicador[data-cor] { --indicador-cor: var(--cor); --indicador-suave: var(--cor-suave); }

.quadros { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.quadros > * { min-width: 0; }
.quadro { display: grid; gap: 0.75rem; align-content: start; padding: 1rem; border: 1px solid var(--border); border-left: 0.25rem solid var(--cor, var(--border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--cor-suave, var(--filled-bg)) 35%, var(--surface)); }
.quadro__titulo { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--text-base); font-weight: 600; line-height: 1.3; }
.quadro__titulo .icon { color: var(--cor); }
.quadro__vazio { margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }

/* Barras deitadas: uma cor só, ponta arredondada, valor ao lado. */
.barras { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.barras__linha { display: grid; grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) 2rem; gap: 0.625rem; align-items: center; font-size: var(--text-sm); line-height: var(--leading-sm); }
.barras__trilho { height: 0.875rem; border-left: 1px solid var(--border); }
.barras__barra { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--cor, var(--info)); transition: filter var(--transition); }
.barras__linha:hover .barras__barra { filter: brightness(1.12); }
.barras__valor { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 520px) { .barras__linha { grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) 2rem; } }

/* Quadro vazio: diz o que vai aparecer ali, em vez de uma linha solta. */
.vazio { display: flex; align-items: center; gap: 0.875rem; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--filled-bg); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.vazio p { margin: 0; }
.vazio strong { color: var(--text); font-weight: 600; }
.vazio__icone { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--cor-suave, var(--surface)); color: var(--cor, var(--text-muted)); }

/* Lista de reuniões: a data em destaque, o nome, a hora e o que saiu dela. */
.agenda { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.agenda__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-subtle); border-left: 0.25rem solid var(--cor, var(--border)); border-radius: var(--radius-md); background: var(--surface); transition: background var(--transition), border-color var(--transition); }
.agenda__linha:hover { border-color: var(--cor, var(--border)); background: color-mix(in srgb, var(--cor-suave, var(--filled-bg)) 45%, var(--surface)); }
.agenda__data { display: grid; place-items: center; flex: 0 0 3rem; width: 3rem; padding: 0.3125rem 0; border-radius: var(--radius-md); background: var(--cor-suave, var(--filled-bg)); line-height: 1.1; text-align: center; }
.agenda__data span { color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.agenda__data strong { color: var(--text); font-size: var(--text-lg); font-weight: 600; }
.agenda__texto { display: grid; gap: 0.125rem; flex: 1 1 7rem; min-width: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.agenda__texto > strong, .agenda__texto > a { font-weight: 600; overflow-wrap: anywhere; }
.agenda__fim { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-left: auto; }
.agenda__hora { color: var(--text); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Mais dois quadros no mesmo padrão: Ações e decisões, Resumo e Histórico. */
.indicadores-reuniao--folga { margin-bottom: 1.25rem; }
.indicadores-reuniao--seis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.agenda__data--prazo { flex-basis: 3.75rem; width: 3.75rem; }
.agenda__data--prazo strong { font-size: var(--text-base); }
/* Decisão compartilhada de reunião que a conta não vê: o bloco fica, sem a data. */
.agenda__data--icone { min-height: 2.75rem; color: var(--cor, var(--text-muted)); }
/* O trecho que casou com a busca, dentro da linha da reunião. */
.achado { display: block; padding: 0.25rem 0.5rem; border-left: 0.1875rem solid var(--cor, var(--border)); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--cor-suave, var(--filled-bg)); color: var(--text); font-size: var(--text-xs); line-height: var(--leading-xs); overflow-wrap: anywhere; }

/* Configurações: o roteiro, um passo por linha, com a ordem, o ícone e a cor que o bloco tem na reunião. */
.roteiro { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.roteiro__passo { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border: 1px solid var(--border-subtle); border-left: 0.1875rem solid var(--cor); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--cor-suave) 45%, var(--surface)); }
.roteiro__ordem { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid color-mix(in srgb, var(--cor) 45%, var(--border)); border-radius: 50%; color: var(--cor); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.roteiro__icone { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--cor-suave); color: var(--cor); }
.roteiro__icone .icon { width: 1.375rem; height: 1.375rem; }
.roteiro__texto strong { display: block; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; }
.roteiro__texto .rotulo { display: block; }
/* Configurações: uma regra por quadro. As linhas de cada quadro são as da grade de fora — as caixas ficam alinhadas. */
.regras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 1rem; }
.regra { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0.5rem; margin-bottom: 1rem; padding: 0.875rem 1rem 1rem; border: 1px solid var(--border-subtle); border-top: 0.1875rem solid var(--cor); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--cor-suave) 35%, var(--surface)); }
.regra > .field { display: contents; }
.regra > .field > .field__label { align-self: end; }
.regra__topo { display: flex; align-items: center; gap: 0.5rem; color: var(--cor); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.regra__icone { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-md); background: var(--cor-suave); }
.regra__icone .icon { width: 1.125rem; height: 1.125rem; }
/* Botão secundário com a cor do que ele faz, em tom baixo. */
.button--sobrio { border-color: color-mix(in srgb, var(--cor) 45%, var(--border)); background: var(--cor-suave); color: var(--text); }
.button--sobrio .icon { color: var(--cor); }
.button--sobrio:hover { border-color: var(--cor); background: color-mix(in srgb, var(--cor-suave) 70%, var(--surface-hover)); }
/* O mesmo botão, mais discreto: a cor fica só na borda e no ícone, e o fundo só aparece ao passar o mouse. */
.button--contorno { border-color: color-mix(in srgb, var(--cor) 26%, var(--border)); background: transparent; color: var(--text-muted); }
.button--contorno .icon { color: color-mix(in srgb, var(--cor) 70%, var(--text-muted)); }
.button--contorno:hover { border-color: color-mix(in srgb, var(--cor) 50%, var(--border)); background: color-mix(in srgb, var(--cor-suave) 55%, transparent); color: var(--text); }

/* ==========================================================================
   Reunião ao vivo (TAR-2026-10-07-002)

   A moldura da reunião em andamento: topo parado, a tela de verdade no centro,
   a pauta e os registros ao lado. Desenho aceito no protótipo
   `docs/designs/prototipos/reuniao-ao-vivo-v1/`. Nenhuma cor nova: tudo sai
   das variáveis do Portal, nos três temas.
   ========================================================================== */

/* A página aberta dentro da moldura: o menu e a barra do Portal já estão na moldura. */
html[data-moldura="dentro"] .prototype-banner,
html[data-moldura="dentro"] .skip-link,
html[data-moldura="dentro"] .sidebar,
html[data-moldura="dentro"] .nav-scrim,
html[data-moldura="dentro"] .topbar { display: none; }
html[data-moldura="dentro"] .app-shell { display: block; min-height: 0; }
html[data-moldura="dentro"] main { padding: 1rem; }
/* Rolagem por dentro da reunião: barra na cor do tema, que acende sob o mouse — na largura normal, para o mouse pegar. */
html[data-moldura="dentro"] { scrollbar-width: auto; scrollbar-color: color-mix(in srgb, var(--text-muted) 22%, transparent) transparent; }
html[data-moldura="dentro"]:hover { scrollbar-color: color-mix(in srgb, var(--text-muted) 65%, transparent) transparent; }
/* Onde a reunião está: o ponto fica destacado por alguns segundos, com o nome de quem conduz. */
html[data-moldura="dentro"] .mv-foco { position: relative; border-radius: var(--radius-lg); outline: 2px solid var(--color-accent); outline-offset: 0.25rem; box-shadow: 0 0 0 0.5rem var(--accent-soft); scroll-margin: 5rem; }
html[data-moldura="dentro"] .mv-foco[data-mv-foco]::before { content: attr(data-mv-foco); position: absolute; z-index: 2; top: -0.875rem; right: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-foreground); font-size: var(--text-2xs); font-weight: 600; line-height: var(--leading-xs); }

.pulso { display: inline-block; flex: 0 0 auto; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0.25rem var(--success-soft); }
.nota { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0; padding: 0.75rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.nota .icon { flex: 0 0 auto; margin-top: 0.125rem; color: var(--cor, var(--text-muted)); }
.pauta-grupo { margin: 0; padding: 0; list-style: none; }
.pauta-grupo + .pauta-grupo { margin-top: 0.5rem; }
.pauta-grupo__titulo { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.25rem; color: var(--text-muted); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pauta-grupo__titulo .icon { width: 0.875rem; height: 0.875rem; color: var(--cor); }
.pauta-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem 0.5rem; width: 100%; padding: 0.5rem 0.625rem; border: 1px solid transparent; border-left: 0.1875rem solid var(--cor); border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); text-align: left; cursor: pointer; }
.pauta-item:hover { background: var(--surface-hover); }
.pauta-item[aria-current="true"] { border-color: var(--cor); background: var(--cor-suave); font-weight: 600; }
.pauta-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.pauta-item small { grid-column: 2; color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.pauta-item__marca { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--border); border-radius: 50%; color: var(--surface); }
.pauta-item__marca .icon { width: 0.75rem; height: 0.75rem; }
.pauta-item[data-estado="tratado"] .pauta-item__marca { border-color: transparent; background: var(--success); }
.pauta-item[data-estado="pendente"] .pauta-item__marca { border-color: transparent; background: var(--warning); }
.pauta-item[data-estado="tratado"] > span:nth-child(2) { color: var(--text-muted); text-decoration: line-through; }
.botao-grande { display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; min-height: 3rem; border: 0; border-radius: var(--radius-xl); background: var(--color-accent); color: var(--color-accent-foreground); font: inherit; font-size: var(--text-base); font-weight: 600; cursor: pointer; }
.botao-grande:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

body.mv-pagina { margin: 0; background: var(--bg); }
.mv { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.mv [hidden] { display: none !important; }
.mv-marca { flex: 0 0 auto; padding: 0; color: inherit; text-decoration: none; }
.mv-topo .mv-marca { align-self: center; padding-right: 1rem; border-right: 1px solid var(--border-subtle); }
.mv-topo .mv-marca .brand__descriptor { display: none; }

/* Topo parado: a reunião, quem está, quem conduz e o seguir. */
.mv-topo { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.625rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--success) 35%, var(--border)); background: linear-gradient(100deg, var(--success-soft), var(--surface) 42%); }
.mv-topo__reuniao { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.mv-topo__reuniao .eyebrow { display: block; }
.mv-topo__reuniao strong { display: block; font-size: var(--text-base); line-height: 1.25; font-weight: 600; }
.mv-topo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
.mv-topo__seguir { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mv-topo__acoes form { display: contents; }
.relogio { font-variant-numeric: tabular-nums; font-weight: 600; }

.mv-gente { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.mv-pessoa { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem 0.1875rem 0.1875rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface); font-size: var(--text-xs); line-height: var(--leading-xs); }
.mv-pessoa .avatar { width: 1.5rem; height: 1.5rem; font-size: var(--text-2xs); }
.mv-pessoa__nome { font-weight: 600; }
.mv-pessoa[data-conduz="true"] { border-color: var(--color-accent); }
.mv-pessoa__conduz { padding: 0 0.375rem; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-foreground); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.mv-pessoa__estado { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text-muted); }
.mv-pessoa__estado .icon { width: 0.875rem; height: 0.875rem; }
.mv-pessoa[data-estado="conectada"] .mv-pessoa__estado { color: var(--success); }
.mv-pessoa[data-estado="nao_entrou"], .mv-pessoa[data-estado="saiu"] { border-style: dashed; opacity: 0.75; }
.mv-pessoa[data-estado="sem_conexao"] { border-color: var(--danger); background: var(--danger-soft); }
.mv-pessoa[data-estado="sem_conexao"] .mv-pessoa__estado { color: var(--danger); font-weight: 600; }
@media (max-width: 1280px) { .mv-pessoa__estado { display: none; } }

/* O áudio (TAR-2026-10-08-006), no desenho do protótipo aceito: cada pessoa aparece como sem áudio, muda, no áudio ou falando. */
.mv-pessoa[data-audio] .mv-pessoa__estado { color: var(--text-muted); font-weight: 400; }
.mv-pessoa[data-audio="sem"] { border-style: dashed; }
.mv-pessoa[data-audio="conectado"] .mv-pessoa__estado .icon { color: var(--success); }
.mv-pessoa[data-audio="falando"] { border-color: var(--success); box-shadow: 0 0 0 0.1875rem var(--success-soft); animation: mv-falando 1.6s ease-in-out infinite; }
.mv-pessoa[data-audio="falando"] .mv-pessoa__estado { color: var(--success); font-weight: 600; }
@keyframes mv-falando { 50% { box-shadow: 0 0 0 0.375rem var(--success-soft); } }
.mv-topo__audio { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mv-topo__audio:empty { display: none; }
.mv-audio__estado { color: var(--text-muted); font-size: var(--text-xs); }
/* O quadro do áudio existe para o som, e não para a vista: fica na tela — o navegador trata quadro fora dela como parado —, transparente e fora do alcance do toque. */
.mv-audio-quadro { position: fixed; left: 0; bottom: 0; width: 20rem; height: 15rem; border: 0; opacity: 0; pointer-events: none; }
/* Em tela média o estado de áudio fica só no ícone, e "Sair do áudio" também. */
@media (max-width: 1280px) {
  .mv-pessoa[data-audio] .mv-pessoa__estado { display: inline-flex; }
  .mv-pessoa[data-audio] .mv-pessoa__estado > span, .mv-audio[data-audio="sair"] > span { display: none; }
}

.mv-seguir { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 22rem; padding: 0.25rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); font-size: var(--text-xs); line-height: 1.25; }
.mv-seguir strong { display: block; font-weight: 600; }
.mv-seguir small { display: block; overflow: hidden; color: var(--text-muted); font-size: var(--text-2xs); text-overflow: ellipsis; white-space: nowrap; }
.mv-seguir > span { min-width: 0; }
.mv-seguir[data-modo="seguindo"], .mv-seguir[data-modo="conduz"] { border-color: var(--color-accent); background: var(--accent-soft); }
.mv-seguir[data-modo="seguindo"] .icon, .mv-seguir[data-modo="conduz"] .icon { color: var(--color-accent-content); }
.mv-seguir[data-modo="solto"] { border-style: dashed; }
.mv-seguir[data-modo="fora"] { border-color: var(--danger); background: var(--danger-soft); }
.mv-seguir[data-modo="fora"] .icon { color: var(--danger); }

.mv-aviso { display: flex; flex: 0 0 auto; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border-subtle); background: var(--info-soft); font-size: var(--text-sm); line-height: var(--leading-sm); }
.mv-aviso .icon { flex: 0 0 auto; color: var(--info); }
.mv-aviso > span { flex: 1 1 auto; min-width: 0; }
.mv-aviso--salto { background: var(--accent-soft); }
.mv-aviso--salto .icon { color: var(--color-accent-content); }

/* Corpo: a tela de verdade no centro, a pauta e os registros ao lado. O centro rola por dentro dele. */
.mv-corpo { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) auto clamp(18rem, var(--mv-painel, 22rem), 60vw); min-height: 0; }
.mv-centro { min-width: 0; min-height: 0; padding: 0; overflow: hidden; }
.mv-centro iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
.mv-painel { display: grid; align-content: start; gap: 1rem; padding: 1rem; overflow: auto; border-left: 1px solid var(--border); background: var(--bg); scrollbar-width: auto; scrollbar-color: color-mix(in srgb, var(--text-muted) 22%, transparent) transparent; scrollbar-gutter: stable; }
.mv-painel:hover, .mv-painel:focus-within { scrollbar-color: color-mix(in srgb, var(--text-muted) 65%, transparent) transparent; }
.mv-painel #mv-painel-conteudo { display: grid; gap: 1rem; }
.mv-painel .panel { gap: 0.75rem; padding: 1rem; }
.mv-painel__fechar, .mv-barra { display: none; }
/* A divisa: arrastar alarga ou estreita o painel. Fica sobre a margem de dentro do painel, sem cobrir a rolagem do centro. */
.mv-divisa { position: relative; z-index: 2; width: 0.75rem; margin-right: -0.75rem; cursor: col-resize; touch-action: none; }
.mv-divisa::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0.1875rem; background: transparent; transition: background 120ms ease; }
.mv-divisa::after { content: ""; position: absolute; top: 50%; left: 0.25rem; width: 0.25rem; height: 2.5rem; border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 45%, transparent); transform: translateY(-50%); transition: background 120ms ease; }
.mv-divisa:hover::before, .mv-divisa:hover::after, .mv-divisa:focus-visible::before, .mv-divisa:focus-visible::after, .mv--esticando .mv-divisa::before, .mv--esticando .mv-divisa::after { background: var(--color-accent); }
.mv-divisa:focus-visible { outline: none; }
/* Enquanto arrasta: o centro não rouba o mouse e nada é selecionado. */
.mv--esticando { cursor: col-resize; user-select: none; }
.mv--esticando .mv-centro iframe { pointer-events: none; }
.mv-agora { color: var(--success); font-weight: 600; }
.mv-registros > li > .icon { color: var(--cor); }
.mv-abrir { display: grid; gap: 0.375rem; }
.mv-registrar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.mv-registrar button { display: flex; align-items: center; gap: 0.5rem; min-height: var(--control-h); padding: 0 0.625rem; border: 1px solid var(--border); border-left: 0.1875rem solid var(--cor); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 500; text-align: left; cursor: pointer; }
.mv-registrar button .icon { flex: 0 0 auto; color: var(--cor); }
.mv-registrar button:hover { background: var(--cor-suave); }
.mv-registrar button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.formulario { display: grid; gap: 0.75rem; padding: 1rem; border: 1px solid var(--border-subtle); border-left: 0.25rem solid var(--cor); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--cor-suave) 45%, var(--surface)); }
.formulario .nota { margin: 0; }
#mv-formulario:empty { display: none; }
.mv-vinculo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.mv-vinculo .chip { white-space: normal; }

.mv-veu { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 1rem; background: var(--scrim); }
.mv-dialogo { align-items: center; width: min(100%, 26rem); text-align: center; }
.mv-dialogo h2 { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.mv-dialogo p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.mv-dialogo .cluster { justify-content: center; }

/* A entrada: quem ainda não fez check-in numa reunião em andamento. */
.mv-entrada { display: grid; place-items: center; align-content: center; gap: 1rem; width: auto; min-height: 100vh; padding: 1.5rem; }
.mv-entrada .mv-marca { width: min(100%, 50rem); }
.mv-entrada .mv-marca .brand__descriptor { display: none; }
.mv-entrada .ent { align-items: stretch; gap: 0; width: min(100%, 50rem); padding: 0; overflow: hidden; text-align: left; }
.ent-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.5rem; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(100deg, var(--cor-suave), var(--surface) 75%); }
.ent-data { display: grid; justify-items: center; flex: 0 0 4.5rem; gap: 0.125rem; padding: 0.625rem 0.25rem; border: 1px solid color-mix(in srgb, var(--cor) 45%, var(--border)); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-soft); line-height: 1.1; }
.ent-data span { color: var(--text-muted); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ent-data span:first-child { color: var(--cor); }
.ent-data strong { font-size: 1.875rem; font-weight: 600; }
.ent-titulo { display: grid; flex: 1 1 16rem; gap: 0.5rem; min-width: 0; }
.ent-titulo h1 { margin: 0; font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: 600; }
.ent-estado { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border: 1px solid color-mix(in srgb, var(--cor) 45%, var(--border)); border-radius: 999px; background: var(--surface); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.ent-acao { display: grid; gap: 0.75rem; padding: 1.5rem 1.5rem 0; }
.ent-nota { margin: 0; text-align: center; }
.ent-corpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; padding: 1.5rem; }
.ent-quadro { display: grid; align-content: start; gap: 0.25rem; padding: 1rem 1.125rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface); }
.ent-quadro h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-base); line-height: var(--leading-base); font-weight: 600; }
.ent-quadro h2 > span:nth-of-type(1) { flex: 1 1 auto; }
.ent-quadro h2 .icon { width: 1.25rem; height: 1.25rem; color: var(--text-muted); }
.ent-quadro h2 .rotulo { font-weight: 400; }
.ent-gente, .ent-pauta { display: grid; margin: 0; padding: 0; list-style: none; }
.ent-gente li { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border-subtle); }
.ent-gente li:last-child, .ent-pauta li:last-child { border-bottom: 0; }
.ent-gente li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.ent-gente strong { display: block; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; }
.ent-gente .rotulo { display: block; }
.ent-gente li[data-estado="fora"] .avatar { opacity: 0.55; }
.ent-pauta li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 3.5rem 1.25rem; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); line-height: var(--leading-sm); }
.ent-pauta .bloco__icone { width: 2rem; height: 2rem; background: var(--cor-suave); box-shadow: none; }
.ent-pauta b { font-weight: 600; text-align: right; }
.ent-barra { display: block; height: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--filled-bg); }
.ent-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--cor); }
.ent-rodape { padding: 0 1.5rem 1.5rem; text-align: center; }

/* Celular e tela estreita: uma coluna; a pauta e os registros sobem de baixo. */
@media (max-width: 860px) {
  .mv-corpo { grid-template-columns: minmax(0, 1fr); }
  .mv-divisa { display: none; }
  .mv-topo { gap: 0.5rem; padding: 0.5rem 0.75rem; }
  .mv-topo__reuniao { flex: 1 1 10rem; order: 1; }
  .mv-topo__reuniao .eyebrow { display: none; }
  .mv-topo .mv-marca { order: 2; margin-left: auto; padding-right: 0; border-right: 0; }
  .mv-gente { order: 3; width: 100%; }
  .mv-topo__acoes { order: 4; width: 100%; margin-left: 0; }
  .mv-so-largo { display: none; }
  .mv-pessoa { padding-right: 0.375rem; }
  .mv-pessoa__nome { display: none; }
  .mv-pessoa[data-voce="true"] .mv-pessoa__nome, .mv-pessoa[data-conduz="true"] .mv-pessoa__nome { display: inline; }
  .mv-topo__seguir, .mv-seguir { flex: 1 1 10rem; }
  /* Os botões do áudio ficam só no ícone; o nome continua para o leitor de tela. */
  .mv-topo__audio { flex: 0 0 auto; flex-wrap: nowrap; }
  .mv-audio { flex: 0 0 auto; width: auto; min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
  .mv-audio > span, .mv-audio[data-audio="sair"] > span { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Conduzir é de tela grande: no celular a pessoa acompanha. */
  .mv [data-mv="assumir"] { display: none; }
  .mv-painel { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; max-height: 84vh; max-height: 84dvh; border-top: 1px solid var(--border); border-left: 0; border-radius: 1rem 1rem 0 0; box-shadow: var(--shadow-soft); transform: translateY(105%); transition: transform 200ms ease; visibility: hidden; }
  .mv--painel .mv-painel { transform: none; visibility: visible; }
  .mv-painel__fechar { display: inline-flex; justify-self: end; }
  .mv-barra { display: flex; flex: 0 0 auto; gap: 0.5rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); background: var(--surface); }
  .mv-barra .button { flex: 1 1 0; min-height: 2.75rem; }
  .mv-entrada { padding: 0.75rem; place-items: start center; }
  .ent-topo, .ent-corpo { padding: 1rem; }
  .ent-acao { padding: 1rem 1rem 0; }
  .ent-rodape { padding: 0 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-painel, .mv-divisa::before, .mv-divisa::after { transition: none; }
  .mv-pessoa[data-audio="falando"] { animation: none; }
}

/*
 * Celular — Reuniões & Acompanhamento (padrão de tela do SGI, § 3;
 * `TAR-2026-10-09-004`). Um quadro grande só, o da próxima reunião; as demais
 * em linhas. "Próximas" e "Últimas" têm o mesmo desenho de linha — data, nome
 * e, embaixo, as etiquetas, com a hora como etiqueta — e a cor do bloco é que
 * as diferencia. Só no celular: no computador a tela fica como é.
 */
.hoje__nota { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
@media (max-width: 40rem) {
  .agenda--reunioes .agenda__linha { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; }
  .agenda--reunioes .agenda__fim { grid-row: 2; grid-column: 2 / -1; justify-content: flex-end; margin-left: 0; }
  /* A lixeira fica no alto da linha, à direita; as etiquetas descem. */
  .agenda--reunioes .linha-excluir { grid-row: 1; grid-column: 3; }
}

/*
 * A lixeira de cada reunião, no celular e no computador (padrão de tela do
 * SGI, § 2; "no computador tb entra é claro"). No quadro grande ela fica ao
 * lado do botão de abrir; na linha, no fim dela. O gesto e as cores são do
 * padrão, em `superadmin.css`, seção 21.
 */
.hoje__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hoje__acoes > .button { flex: 1 1 auto; width: auto; }