/* =====================================================================
   Gestão do Desbagunça — Biblioteca de componentes (Tarefa 1.5 do painel-ux-2)
   ---------------------------------------------------------------------
   Os componentes de js/componentes/ e a página /componentes (js/telas/componentes.js). Visual do protótipo aprovado
   (docs/prototipo/painel-ux-2/index.html), só com tokens de css/tokens.css. Classes com prefixo c- (não colidem com as
   telas atuais). Carregado depois de materiais.css.

   Regras de todos os componentes:
   • alvo de toque de 44px (--toque-min), inclusive nos links de linha;
   • foco: o anel único global (:focus-visible em gestao.css); nada aqui o remove;
   • :active em todo controle: opacidade menor (vale na versão calma) e, no movimento completo, um leve encolher;
   • só transform e opacity animam; na versão calma (prefers-reduced-motion ou data-movimento="calmo") as durações
     dos tokens são 0 e os brilhos e giros contínuos somem;
   • o estado nunca é só cor: sempre há texto (e, quando cabe, ícone).
   ===================================================================== */

/* ---------------- :active em todo controle (A25) ----------------
   Opacidade (aparece também na versão calma, que não tem movimento) + encolher só no movimento completo. */
:is(a[href], button, [role="tab"], [role="menuitem"], summary):active:not(:disabled) { opacity: .82; }

/* ---------------- Botões ---------------- */
.c-botao {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque-min); min-width: var(--toque-min); padding: var(--e-2-5) var(--e-4); border: 0; border-radius: var(--peca-btn);
  font: inherit; font-size: var(--fs-base); font-weight: var(--peso-forte); line-height: 1.2; text-decoration: none; text-align: center;
  color: var(--tinta); background: var(--sup); cursor: pointer; user-select: none; touch-action: manipulation;
  transition: transform var(--dur-instante) var(--curva-saida), opacity var(--dur-instante) var(--curva-saida);
}
.c-botao:active:not(:disabled) { transform: scale(.97); }
.c-botao:disabled { opacity: .55; cursor: not-allowed; }
.c-botao--pequeno { padding: var(--e-1-5) var(--e-3); font-size: var(--fs-sm); }
.c-botao--verde { color: var(--sobre-verde); background: var(--verde-forte); box-shadow: var(--relevo-bloco), var(--sombra-1); }
.c-botao--abob { color: var(--sobre-abob); background: var(--abob); box-shadow: var(--relevo-bloco), var(--sombra-1); }
.c-botao--verm { color: var(--sobre-verm); background: var(--verm); box-shadow: var(--relevo-bloco), var(--sombra-1); }
.c-botao--opcao { color: var(--tinta); background: var(--sup); box-shadow: inset 0 0 0 1.5px var(--abob-borda), var(--sombra-1); }
.c-botao--calmo { color: var(--tinta); background: var(--sup); box-shadow: inset 0 0 0 1.5px var(--linha-forte); }
.c-botao--opcao::after, .c-botao--calmo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-curta) var(--curva-saida); }
.c-botao--opcao::after { box-shadow: inset 0 0 0 1.5px var(--abob), var(--sombra-2); }
.c-botao--calmo::after { box-shadow: inset 0 0 0 1.5px var(--suave); }
.c-botao--texto { color: var(--tinta); background: none; text-decoration: underline; text-underline-offset: 3px; border-radius: var(--raio); padding-inline: var(--e-2); }
@media (hover: hover) and (pointer: fine) {
  .c-botao--opcao:hover:not(:disabled)::after, .c-botao--calmo:hover:not(:disabled)::after { opacity: 1; }
  .c-botao--texto:hover:not(:disabled) { color: var(--primaria-texto); }
}
.c-botao .icone { width: var(--e-5); height: var(--e-5); }
.c-botao-icone {
  display: inline-grid; place-items: center; flex: none; width: var(--toque-min); height: var(--toque-min); padding: 0; border: 0;
  border-radius: var(--peca-p); color: var(--tinta); background: none; cursor: pointer;
  transition: transform var(--dur-instante) var(--curva-saida), opacity var(--dur-instante) var(--curva-saida);
}
.c-botao-icone:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .c-botao-icone:hover { background: var(--sup-3); } }
/* Carregando: o giro é só transform; na versão calma fica parado e o texto diz o que acontece */
.c-gira { width: var(--e-4); height: var(--e-4); border-radius: var(--raio-pilula); border: 2px solid currentcolor; border-right-color: transparent; animation: c-gira calc(var(--dur-cena) * .8) linear infinite; }
@keyframes c-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .c-gira { animation: none; opacity: .6; } .c-botao:active:not(:disabled), .c-botao-icone:active { transform: none; } }
[data-movimento="calmo"] .c-gira { animation: none; opacity: .6; }
[data-movimento="calmo"] .c-botao:active:not(:disabled), [data-movimento="calmo"] .c-botao-icone:active { transform: none; }

/* ---------------- Pular para o conteúdo ---------------- */
.c-pular {
  position: fixed; left: max(var(--e-4), env(safe-area-inset-left, 0px)); top: calc(var(--e-2) + env(safe-area-inset-top, 0px)); z-index: var(--z-modal);
  display: inline-flex; align-items: center; min-height: var(--toque-min); padding: var(--e-3) var(--e-4); border-radius: var(--raio);
  font-weight: var(--peso-forte); color: var(--fundo); background: var(--tinta); text-decoration: none; transform: translateY(-200%);
}
.c-pular:focus { transform: none; }
.c-pular--visivel { position: static; transform: none; }

/* ---------------- Selo de estado (só o excepcional) ---------------- */
.c-selo {
  display: inline-flex; align-items: center; gap: var(--e-1); padding: calc(var(--e-1) / 2) var(--e-2-5); border-radius: var(--peca-p);
  font-size: var(--fs-xs); font-weight: var(--peso-forte); line-height: 1.4; white-space: nowrap;
}
.c-selo .icone { width: var(--e-3-5); height: var(--e-3-5); }
.c-selo[data-estado="espera"] { color: var(--abob-tinta); background: var(--abob-suave); }
.c-selo[data-estado="travado"] { color: var(--verm-tinta); background: var(--verm-suave); }
.c-selo[data-estado="parado"] { color: var(--suave); background: var(--sup-3); box-shadow: inset 0 0 0 1px var(--linha-forte); }

/* ---------------- Contador ---------------- */
.c-contagem {
  display: inline-block; min-width: var(--e-5); padding: 0 var(--e-1-5); border-radius: var(--raio-bloco); text-align: center;
  font-size: var(--fs-xs); font-weight: var(--peso-forte); line-height: 1.5; font-variant-numeric: tabular-nums;
}
.c-contagem[data-tom="chama"] { color: var(--sobre-abob); background: var(--abob); }
.c-contagem[data-tom="calmo"] { color: var(--verde-forte); background: var(--verde-suave); }

/* ---------------- Ações em linha ---------------- */
.c-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.c-botao[hidden] { display: none; }

/* ---------------- Peça de ação (precisa de você) ---------------- */
.c-peca {
  position: relative; isolation: isolate; display: grid; gap: var(--e-3); align-content: start; min-width: 0; padding: var(--e-4);
  color: var(--tinta); background: var(--abob-suave); border-radius: var(--peca); box-shadow: var(--relevo), var(--sombra-1);
}
/* A cor do estado entra por uma camada que esmaece (só opacity anima; trocar background-color repintaria a peça) */
.c-peca::before { content: ""; position: absolute; inset: 0; z-index: var(--z-fundo); border-radius: inherit; background: var(--verde-suave); opacity: 0; pointer-events: none; transition: opacity var(--dur-longa) var(--curva-saida); }
.c-peca[data-estado="travado"]::before { background: var(--verm-suave); opacity: 1; }
.c-peca[data-estado="feita"]::before { opacity: 1; }
.c-peca .encaixe { top: var(--e-4); right: var(--e-4); }
.c-peca-de { display: flex; align-items: center; gap: var(--e-2); min-width: 0; padding-right: var(--e-12); font-size: var(--fs-sm); font-weight: var(--peso-forte); color: var(--abob-tinta); }
.c-peca-de a { display: inline-flex; align-items: center; min-height: var(--toque-min); min-width: var(--toque-min); color: inherit; border-radius: var(--raio); }
.c-peca-de span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-peca-de time { margin-left: auto; flex: none; font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; }
.c-peca-tipo { font-size: var(--fs-xs); font-weight: var(--peso-forte); letter-spacing: .02em; color: var(--abob-tinta); }
.c-peca-titulo { margin: 0; font-family: var(--fonte-titulo); font-size: var(--fs-lg); font-weight: var(--peso-forte); line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.c-peca-contexto { font-size: var(--fs-sm); color: var(--suave); }
.c-peca[data-estado="travado"] :is(.c-peca-de, .c-peca-tipo) { color: var(--verm-tinta); }
.c-peca[data-estado="feita"] :is(.c-peca-de, .c-peca-tipo) { color: var(--verde-forte); }
.c-peca > .c-selo { justify-self: start; }
.c-peca-pede { display: grid; gap: var(--e-2); }
.c-peca-pede[hidden], .c-peca-ok[hidden] { display: none; }
.c-peca-ok { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; font-weight: var(--peso-forte); animation: c-entra var(--dur-longa) var(--curva-saida) both; }
.c-peca-ok .icone { color: var(--verde-forte); }
.c-peca-ok:focus-visible { outline-offset: var(--foco-recuo); }
@keyframes c-entra { from { opacity: 0; transform: translateY(var(--e-1)); } to { opacity: 1; transform: none; } }

/* ---------------- Gavetas (uma por tarefa, agrupadas por fase) ---------------- */
.c-gavetas { display: flex; gap: var(--e-2); }
.c-fase { --n: 3; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 2px; flex: var(--n, 3); }
.c-gaveta { position: relative; display: block; height: var(--e-2); border-radius: 2px; background: var(--vazio); overflow: hidden; }
.c-gaveta-nivel { position: absolute; inset: 0; display: block; transform-origin: left center; transform: scaleX(1); background: var(--verde); }
.c-gaveta[data-estado="pendente"] .c-gaveta-nivel { transform: scaleX(0); }
.c-gaveta[data-estado="espera"] .c-gaveta-nivel { background: var(--abob); }
.c-gaveta[data-estado="travada"] .c-gaveta-nivel { background: var(--verm); }
.c-gaveta[data-estado="andando"] .c-gaveta-nivel { background: repeating-linear-gradient(135deg, var(--verde) 0 3px, var(--vazio) 3px 6px); }
.c-gaveta[data-estado="bloqueada"] .c-gaveta-nivel { background: repeating-linear-gradient(135deg, var(--verm) 0 3px, var(--verm-suave) 3px 6px); }
.c-gavetas--grande .c-gaveta { height: var(--e-5); border-radius: var(--raio-xs); }

/* ---------------- Bloco de plano ---------------- */
.c-bloco-plano {
  display: grid; gap: var(--e-3); align-content: start; min-width: 0; padding: var(--e-4); color: inherit; text-decoration: none;
  background: var(--sup); border-radius: var(--e-2) calc(var(--e-6) + 2px); box-shadow: var(--relevo), var(--sombra-1);
  transition: transform var(--dur-media) var(--curva-saida), opacity var(--dur-instante) var(--curva-saida);
}
@media (hover: hover) and (pointer: fine) { .c-bloco-plano:hover { transform: translateY(-2px); } } /* a sombra maior vem da camada de .cartao--clicavel */
.c-bloco-plano:active { transform: scale(.99); }
.c-bloco-plano-cab { display: grid; grid-template-columns: var(--e-10) minmax(0, 1fr); gap: 2px var(--e-3); align-items: center; }
.c-bloco-plano-av { grid-row: span 2; display: grid; place-items: center; width: var(--e-10); height: var(--e-10); border-radius: var(--peca-p); color: var(--verde-forte); background: var(--verde-suave); }
.c-bloco-plano-titulo { margin: 0; font-size: var(--fs-base); font-weight: var(--peso-forte); line-height: 1.25; overflow-wrap: anywhere; }
.c-bloco-plano-estado { font-size: var(--fs-sm); font-weight: var(--peso-forte); color: var(--verde-forte); }
.c-bloco-plano-legenda { font-size: var(--fs-sm); color: var(--suave); }
.c-bloco-plano[data-estado="espera"] .c-bloco-plano-estado { color: var(--abob-tinta); }
.c-bloco-plano[data-estado="espera"] .c-bloco-plano-av { color: var(--sobre-abob); background: var(--abob); }
.c-bloco-plano[data-estado="travado"] .c-bloco-plano-estado { color: var(--verm-tinta); }
.c-bloco-plano[data-estado="travado"] .c-bloco-plano-av { color: var(--verm-tinta); background: var(--verm-suave); }
.c-bloco-plano[data-estado="parado"] .c-bloco-plano-estado { color: var(--parado); }
.c-bloco-plano[data-estado="parado"] .c-bloco-plano-av { color: var(--suave); background: var(--vazio); }

/* ---------------- Cartão de agente ---------------- */
.c-agente {
  display: grid; grid-template-columns: var(--e-10) minmax(0, 1fr); gap: var(--e-1) var(--e-3); align-items: start; min-width: 0; padding: var(--e-4);
  background: var(--sup); border-radius: var(--raio-xl) var(--raio-xs); box-shadow: var(--relevo), var(--sombra-1);
}
.c-agente-av { grid-row: span 2; display: grid; place-items: center; width: var(--e-10); height: var(--e-10); border-radius: var(--peca-p); font-weight: var(--peso-forte); color: var(--verde-forte); background: var(--verde-suave); }
.c-agente[data-estado="espera"] .c-agente-av { color: var(--sobre-abob); background: var(--abob); }
.c-agente[data-estado="travado"] .c-agente-av { color: var(--sobre-verm); background: var(--verm); }
.c-agente[data-estado="parado"] .c-agente-av { color: var(--tinta); background: var(--vazio); }
.c-agente-txt { display: grid; gap: 2px; min-width: 0; }
.c-agente-txt strong { font-weight: var(--peso-forte); overflow-wrap: anywhere; }
.c-agente-estado { font-size: var(--fs-sm); font-weight: var(--peso-forte); color: var(--verde-forte); }
.c-agente[data-estado="espera"] .c-agente-estado { color: var(--abob-tinta); }
.c-agente[data-estado="travado"] .c-agente-estado { color: var(--verm-tinta); }
.c-agente[data-estado="parado"] .c-agente-estado { color: var(--parado); }
.c-agente-tarefa { font-size: var(--fs-sm); color: var(--suave); overflow-wrap: anywhere; }
.c-agente-linha, .c-agente-acoes { grid-column: 2; min-width: 0; }
.c-agente-link { display: inline-flex; align-items: center; min-height: var(--toque-min); min-width: var(--toque-min); font-size: var(--fs-sm); color: var(--tinta); text-underline-offset: 3px; }

/* ---------------- Abas ---------------- */
.c-abas { display: grid; gap: var(--e-2); min-width: 0; }
.c-abas-lista { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.c-aba {
  display: inline-flex; align-items: center; gap: var(--e-1-5); min-height: var(--toque-min); min-width: var(--toque-min); padding: 0 var(--e-3); border: 0;
  border-radius: var(--raio) var(--e-1); font: inherit; font-weight: var(--peso-forte); color: var(--suave); background: none; cursor: pointer;
  position: relative; isolation: isolate; transition: opacity var(--dur-instante) var(--curva-saida);
}
.c-aba::before, .c-menu-item::before { content: ""; position: absolute; inset: 0; z-index: var(--z-fundo); border-radius: inherit; background: var(--sup-3); opacity: 0; pointer-events: none; transition: opacity var(--dur-curta) var(--curva-saida); }
.c-aba[aria-selected="true"] { color: var(--tinta); background: var(--verde-suave); }
@media (hover: hover) and (pointer: fine) { .c-aba:hover { color: var(--tinta); } .c-aba:not([aria-selected="true"]):hover::before { opacity: 1; } }
.c-painel { padding-top: var(--e-2); min-width: 0; }
.c-painel[hidden] { display: none; }

/* ---------------- Diálogo de confirmação e folha ---------------- */
.c-dialogo {
  width: min(28rem, calc(100vw - var(--e-8))); max-width: none; max-height: calc(100dvh - var(--e-8)); padding: var(--e-6); overflow: auto; overscroll-behavior: contain;
  color: var(--tinta); background: var(--vidro-fundo-forte); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda); border-radius: var(--peca); box-shadow: var(--relevo), var(--sombra-4);
}
/* O vidro só é translúcido e desfocado com o diálogo parado: enquanto sobe ou sai (animação de transform) o desfoque seria refeito
   a cada quadro, então ele entra em vidro sólido (--vidro-solido, quase igual ao --vidro-fundo-forte de .9 de opacidade). A sombra grande
   (--sombra-4, até 96px de raio) também só vem com ele parado: sobre o véu ela quase não aparece e, em movimento, aumenta a camada que
   o navegador compõe a cada quadro (4.1: abrir a folha em 1366px foi de 56,8 a 58,4-59,2 fps). */
.c-dialogo.c-entrando, .c-dialogo.c-saindo { background: var(--vidro-solido); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--relevo); }
.c-dialogo::backdrop { background: var(--veu); }
.c-dialogo[open] { animation: c-dlg-entra var(--dur-media) var(--curva-saida); }
.c-dialogo.c-saindo { animation: c-dlg-sai var(--dur-curta) var(--curva-saida) forwards; }
@keyframes c-dlg-entra { from { opacity: 0; transform: translateY(var(--e-2)) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes c-dlg-sai { to { opacity: 0; transform: translateY(var(--e-1)) scale(.98); } }
.c-dialogo-titulo { margin: 0 0 var(--e-2); padding-right: var(--e-10); font-family: var(--fonte-titulo); font-size: var(--fs-lg); font-weight: var(--peso-forte); line-height: 1.2; letter-spacing: -.02em; }
.c-dialogo p { margin: 0 0 var(--e-2); color: var(--suave); }
.c-dialogo p.c-dialogo-detalhe { color: var(--tinta); font-weight: var(--peso-forte); overflow-wrap: anywhere; }
.c-dialogo p.c-dialogo-dono { display: inline-block; padding: calc(var(--e-1) / 2) var(--e-2-5); border-radius: var(--peca-p); font-size: var(--fs-xs); font-weight: var(--peso-forte); color: var(--abob-tinta); background: var(--abob-suave); }
.c-dialogo .c-acoes { justify-content: flex-end; margin-top: var(--e-5); }
.c-dialogo-erro p { color: var(--verm-tinta); font-weight: var(--peso-forte); }
.c-dialogo-fechar { position: absolute; top: var(--e-2-5); right: var(--e-2-5); }
/* Folha: no celular sobe de baixo, colada nas bordas; no computador é um diálogo centrado */
@media (max-width: 959.98px) {
  .c-folha {
    width: 100%; max-width: 100%; max-height: 86dvh; margin: auto 0 0; border-radius: var(--e-6) var(--e-6) 0 0;
    padding: var(--e-2) max(var(--e-4), env(safe-area-inset-right, 0px)) calc(var(--e-6) + env(safe-area-inset-bottom, 0px)) max(var(--e-4), env(safe-area-inset-left, 0px));
  }
  .c-folha::before { content: ""; display: block; width: var(--e-10); height: var(--e-1); margin: var(--e-1) auto var(--e-3); border-radius: 2px; background: var(--linha-forte); }
  .c-folha[open] { animation: c-folha-sobe var(--dur-longa) var(--curva-gaveta); }
  .c-folha.c-saindo { animation: c-folha-desce var(--dur-media) var(--curva-saida) forwards; }
}
@keyframes c-folha-sobe { from { transform: translateY(100%); } to { transform: none; } }
@keyframes c-folha-desce { to { transform: translateY(100%); } }
.c-folha-corpo { display: grid; gap: var(--e-3); }

/* ---------------- Avisos (com Desfazer) ---------------- */
.c-avisos {
  position: fixed; left: 50%; bottom: calc(var(--menu-inferior-h) + var(--e-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast);
  display: grid; gap: var(--e-2); width: max-content; max-width: calc(100vw - var(--e-8)); transform: translateX(-50%); pointer-events: none;
}
@media (min-width: 960px) { .c-avisos { bottom: var(--e-8); } }
.c-aviso {
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-1) var(--e-2) var(--e-1) var(--e-4); border-radius: var(--e-3-5) var(--e-1);
  font-size: var(--fs-sm); font-weight: var(--peso-forte); color: var(--fundo); background: var(--tinta); box-shadow: var(--sombra-3); pointer-events: auto;
  animation: c-aviso-entra var(--dur-longa) var(--curva-saida) both;
}
.c-aviso-texto { padding-block: var(--e-2); overflow-wrap: anywhere; }
.c-aviso .c-botao--texto { color: inherit; }
.c-aviso--sai { pointer-events: none; animation: c-aviso-sai var(--dur-media) var(--curva-saida) forwards; }
@keyframes c-aviso-entra { from { opacity: 0; transform: translateY(var(--e-3)) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes c-aviso-sai { to { opacity: 0; transform: translateY(var(--e-1-5)); } }

/* ---------------- Vazio, erro e carregando ---------------- */
.c-vazio, .c-erro {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); align-items: start; padding: var(--e-4);
  border-radius: var(--peca); box-shadow: var(--relevo), var(--sombra-1);
}
.c-vazio { background: var(--sup); }
.c-erro { background: var(--verm-suave); }
.c-vazio > .icone, .c-erro > .icone { width: var(--e-12); height: var(--e-12); }
.c-vazio > .icone { color: var(--discreto); }
.c-erro > .icone { color: var(--verm-tinta); }
.c-vazio h3, .c-erro h3, .c-vazio h2, .c-erro h2 { margin: 0; font-size: var(--fs-md); font-weight: var(--peso-forte); line-height: 1.25; }
.c-erro h3, .c-erro h2 { color: var(--verm-tinta); }
.c-vazio p, .c-erro p { margin: var(--e-1) 0 0; color: var(--suave); }
.c-vazio .c-acoes, .c-erro .c-acoes { margin-top: var(--e-3); }
.c-carregando { display: grid; gap: var(--e-3); min-width: 0; padding: var(--e-4); background: var(--sup); border-radius: var(--peca); box-shadow: var(--relevo), var(--sombra-1); }
.c-carregando-linha { display: grid; grid-template-columns: var(--e-10) minmax(0, 1fr); gap: var(--e-3); align-items: center; }
.c-carregando-textos { display: grid; gap: var(--e-2); }
.c-esqueleto { position: relative; display: block; overflow: hidden; background: var(--esq); border-radius: var(--raio) var(--e-1); }
.c-esqueleto::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--brilho), transparent); animation: c-brilho calc(var(--dur-cena) * 1.5) var(--curva-entrada) infinite; }
@keyframes c-brilho { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .c-esqueleto::after { animation: none; } }
[data-movimento="calmo"] .c-esqueleto::after { animation: none; }
.c-esqueleto--av { width: var(--e-10); height: var(--e-10); border-radius: var(--peca-p); }
.c-esqueleto--linha { width: 100%; height: var(--e-4); }
.c-esqueleto--curta { width: 60%; height: var(--e-3); }
.c-esqueleto--titulo { width: 50%; height: var(--e-6); }
.c-esqueleto--corpo { width: 100%; height: var(--e-16); }

/* ---------------- Indicador Ao vivo ---------------- */
.c-ao-vivo { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--e-6); font-size: var(--fs-sm); color: var(--suave); font-variant-numeric: tabular-nums; }
.c-ao-vivo-ponto { display: inline-block; width: var(--e-2); height: var(--e-2); border-radius: var(--raio-pilula); background: var(--verde); }
.c-ao-vivo[data-estado="reconectando"] { font-weight: var(--peso-forte); color: var(--abob-tinta); }
.c-ao-vivo[data-estado="reconectando"] .c-ao-vivo-ponto { background: var(--abob); }

/* ---------------- Menu do trilho e menu inferior ---------------- */
.c-menu-item {
  position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: var(--toque-min); min-width: var(--toque-min); padding: 0 var(--e-3);
  border-radius: var(--raio) var(--e-1); font-weight: var(--peso-forte); color: var(--suave); text-decoration: none;
  isolation: isolate; transition: opacity var(--dur-instante) var(--curva-saida);
}
.c-menu-item::before { background: var(--brilho); }
@media (hover: hover) and (pointer: fine) { .c-menu-item:hover { color: var(--tinta); } .c-menu-item:not([aria-current="page"]):hover::before { opacity: 1; } }
.c-menu-item[aria-current="page"] { color: var(--tinta); background: var(--sup); box-shadow: var(--relevo), var(--sombra-1); }
.c-menu-item[aria-current="page"] .icone { color: var(--verde-forte); }
.c-menu-item .c-contagem { margin-left: auto; }
.c-trilho {
  display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; padding: var(--e-4) var(--e-3);
  background: var(--vidro-fundo); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda); border-radius: var(--peca-m); box-shadow: var(--relevo), var(--sombra-2);
}
.c-trilho-itens { display: grid; gap: 2px; }
.c-trilho-rodape { display: grid; gap: 2px; margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--linha); }
.c-menu-inferior {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: var(--e-1-5) var(--e-2) calc(var(--e-1-5) + env(safe-area-inset-bottom, 0px));
  background: var(--vidro-fundo-forte); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  border-top: 1px solid var(--vidro-borda); box-shadow: var(--sombra-abas);
}
.c-menu-inferior--fixo { position: fixed; inset: auto 0 0 0; z-index: var(--z-nav); }
@media (min-width: 960px) { .c-menu-inferior--fixo { display: none; } }
.c-menu-inferior .c-menu-item {
  flex-direction: column; justify-content: center; gap: 2px; min-height: calc(var(--e-12) + var(--e-1)); padding: 0; text-align: center;
  font-size: var(--fs-2xs); border-radius: var(--peca-p);
}
.c-menu-inferior .c-menu-item .icone { width: var(--e-6); height: var(--e-6); }
.c-menu-inferior .c-contagem { position: absolute; top: var(--e-0-5); left: calc(50% + var(--e-1-5)); margin: 0; }

/* ---------------- Página /componentes ---------------- */
.c-pagina { display: grid; gap: var(--e-8); padding-bottom: var(--e-8); min-width: 0; }
.c-secao { display: grid; gap: var(--e-3); min-width: 0; }
.c-secao > h2 { margin: 0; font-family: var(--fonte-titulo); font-size: var(--fs-lg); font-weight: var(--peso-forte); letter-spacing: -.02em; }
.c-secao-nota { font-size: var(--fs-sm); color: var(--suave); max-width: 70ch; }
.c-demo { display: grid; gap: var(--e-3); min-width: 0; }
.c-grade { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.c-demo-estreito { max-width: 17rem; }
.c-demo-estado { margin: 0; min-height: var(--e-6); font-size: var(--fs-sm); color: var(--suave); }
.c-cartao { display: grid; gap: var(--e-2); align-content: start; min-width: 0; padding: var(--e-4); background: var(--sup); border-radius: var(--raio-xl) var(--raio-xs); box-shadow: var(--relevo), var(--sombra-1); }
.c-cartao-titulo { margin: 0; font-size: var(--fs-base); font-weight: var(--peso-forte); }

/* ---------------- Conversa com o agente (Task 2.5) ----------------
   Bolhas: o agente à esquerda, a equipe à direita (--bolha-eu). O que pede você é laranja (pergunta, aprovação) e o
   que vai para a versão oficial é azul; o que já existia antes da conversa (mensagem anterior, anotação) tem borda
   tracejada. Computador: o registro rola sozinho. Celular (< 960px): quem rola é a página e o campo fica preso
   embaixo, acima do menu (A15: sem rolagem dentro de rolagem). */
.c-conversa { display: grid; gap: var(--e-3); min-width: 0; }
.c-conversa-log { min-width: 0; padding: var(--e-3); border-radius: var(--raio-lg); background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linha); }
.c-conversa-log:focus-visible { outline: var(--foco-largura) solid var(--foco-cor); outline-offset: var(--foco-recuo); }
.c-conversa-lista { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.c-conversa-dia { align-self: center; }
.c-conversa-dia span {
  display: inline-block; padding: var(--e-0-5) var(--e-2-5); border-radius: var(--peca-p); font-size: var(--fs-xs); font-weight: var(--peso-forte);
  color: var(--suave); background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linha); font-variant-numeric: tabular-nums;
}
.c-conversa-vazio { align-self: center; padding: var(--e-4); font-size: var(--fs-sm); color: var(--suave); text-align: center; }
.c-conversa-limite { margin: 0; }
.c-conversa-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); margin: 0; font-size: var(--fs-sm); }
.c-conversa-filtro strong { padding: var(--e-0-5) var(--e-2-5); border-radius: var(--peca-p); font-weight: var(--peso-forte); color: var(--abob-tinta); background: var(--abob-suave); }
.c-conversa-filtro a { display: inline-flex; align-items: center; min-height: var(--toque-min); font-weight: var(--peso-forte); color: var(--primaria-texto); text-underline-offset: 3px; }

.c-msg {
  position: relative; display: grid; gap: var(--e-1); max-width: min(38rem, 88%); min-width: 0; align-self: flex-start;
  padding: var(--e-2-5) var(--e-3-5); border-radius: var(--peca-m); background: var(--sup); box-shadow: var(--relevo), var(--sombra-1);
  overflow-wrap: anywhere; scroll-margin-block: var(--e-4);
}
.c-msg[data-lado="equipe"] { align-self: flex-end; background: var(--bolha-eu); box-shadow: var(--sombra-1); }
.c-msg[data-tipo="pergunta"], .c-msg[data-tipo="aprovacao"] { max-width: min(38rem, 96%); border-radius: var(--peca); background: var(--abob-suave); }
.c-msg[data-tipo="merge_main"] { max-width: min(38rem, 96%); border-radius: var(--peca); background: var(--info-suave); }
.c-msg[data-autor="sessao"][data-tipo="sistema"] { align-self: center; max-width: 44ch; padding-block: var(--e-1); background: none; box-shadow: none; text-align: center; color: var(--suave); }
.c-msg[data-autor="sessao"][data-tipo="sistema"] .c-msg-cab { justify-content: center; }
.c-msg--anterior, .c-msg--anotacao { background: var(--sup-2); box-shadow: none; border: 2px dashed var(--linha-forte); }
.c-msg--anotacao { border-color: var(--abob-borda); }
.c-msg-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); margin: 0; min-width: 0; font-size: var(--fs-xs); color: var(--suave); }
.c-msg-cab time { font-variant-numeric: tabular-nums; }
.c-msg-selo { font-weight: var(--peso-forte); color: var(--tinta); }
.c-msg-selo[data-tom="chama"] { color: var(--abob-tinta); }
.c-msg-selo[data-tom="info"] { color: var(--info-texto); }
.c-msg[data-esperando] { padding-inline-end: calc(var(--e-8) + var(--e-4)); }
.c-msg[data-esperando] .encaixe { top: var(--e-3); right: var(--e-3); }
.c-msg[data-esperando] .c-msg-responder { margin-inline-end: calc(-1 * (var(--e-8) + var(--e-1))); }
.c-msg-tarefa {
  display: inline-flex; align-items: center; min-height: var(--e-6); padding: 0 var(--e-2); border-radius: var(--peca-p);
  font-weight: var(--peso-forte); color: var(--suave); text-decoration: none; box-shadow: inset 0 0 0 1px var(--linha-forte);
}
/* A etiqueta é um link: a área de toque cresce para 44px na vertical sem mudar o desenho (a linha não engorda) */
.c-msg-tarefa { position: relative; }
.c-msg-tarefa::after { content: ""; position: absolute; inset: calc((100% - var(--toque-min)) / 2) 0; }
@media (hover: hover) and (pointer: fine) { .c-msg-tarefa:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; } }
.c-msg-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
.c-msg[data-tipo="pergunta"] > .c-msg-texto { font-family: var(--fonte-titulo); font-size: var(--fs-md); font-weight: var(--peso-forte); line-height: 1.3; }
.c-msg > .c-botao--texto { justify-self: start; margin-inline-start: calc(-1 * var(--e-2)); }
.c-msg .msg-decisao-bloco, .c-msg-responder { margin-top: var(--e-1); }
.c-msg-responder { display: grid; gap: var(--e-2); min-width: 0; }
/* "Só o dono aprova" (Task 3.1): no lugar dos botões de decisão, para quem não é o dono; recebe o foco pelo link profundo.
   O ícone tem a altura de uma linha (1lh): fica centrado na primeira linha do texto, que pode quebrar no celular */
.c-msg-so-dono { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; min-width: 0; font-size: var(--fs-sm); color: var(--suave); }
.c-msg-so-dono svg { flex: none; width: 1.15em; height: 1lh; color: var(--abob-tinta); }
.c-msg-so-dono span { min-width: 0; overflow-wrap: anywhere; }
.c-msg-opcoes { display: flex; flex-wrap: wrap; gap: var(--e-2); min-width: 0; }
.c-msg-opcoes .c-botao { max-width: 100%; }
.c-msg-opcoes .c-botao span { overflow-wrap: anywhere; }
.c-msg-form { display: grid; gap: var(--e-2); min-width: 0; }
.c-msg-form label { font-size: var(--fs-sm); font-weight: var(--peso-forte); color: var(--tinta); }
.c-msg-form textarea, .c-conversa-linha textarea {
  width: 100%; min-width: 0; min-height: var(--controle-lg); padding: var(--e-2) var(--e-3); resize: vertical;
  font: inherit; font-size: var(--fs-campo-toque); color: var(--tinta); background: var(--sup); border: 1px solid var(--linha-forte);
  border-radius: var(--peca-m); box-shadow: var(--sombra-campo);
}
.c-msg-form .c-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Faixa do item aberto pelo aviso do Telegram (Task 2.6, js/item.js): logo abaixo do pedido, larga como o registro.
   Calma enquanto o pedido espera; verde depois de responder ("Respondido", com "Ficar aqui"). */
.c-item-faixa { align-self: stretch; min-width: 0; scroll-margin-block: var(--e-4); }
.c-item-faixa:focus-visible { outline: var(--foco-largura) solid var(--foco-cor); outline-offset: var(--foco-recuo); border-radius: var(--peca-m); }
.c-item-faixa-corpo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); min-width: 0; min-height: var(--toque-min);
  padding: var(--e-1) var(--e-3); border-radius: var(--peca-m); font-size: var(--fs-sm); color: var(--suave);
  box-shadow: inset 0 0 0 1px var(--linha);
}
.c-item-faixa-texto { margin: 0; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.c-item-faixa[data-estado="respondido"] .c-item-faixa-corpo, .c-item-faixa[data-estado="ficou"] .c-item-faixa-corpo {
  font-weight: var(--peso-forte); color: var(--primaria-texto); background: var(--primaria-suave); box-shadow: none;
}
.c-item-faixa[data-estado="ja"] .c-item-faixa-corpo, .c-item-faixa[data-estado="nada"] .c-item-faixa-corpo,
.c-item-faixa[data-estado="sumiu"] .c-item-faixa-corpo { color: var(--tinta); background: var(--sup); }
.c-item-faixa .c-botao--texto { margin-inline-start: auto; }
@media (max-width: 59.999rem) {
  .c-item-faixa { scroll-margin-bottom: calc(var(--painel-barra) + var(--e-16) * 2); }
}

.c-conversa-escrever {
  display: grid; gap: var(--e-1); padding: var(--e-2) var(--e-3) var(--e-2-5); border-radius: var(--raio-lg);
  background: var(--vidro-fundo-forte); box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-1);
}
.c-conversa-quem { margin: 0; font-size: var(--fs-xs); color: var(--suave); }
.c-conversa-linha { display: flex; align-items: flex-end; gap: var(--e-2); min-width: 0; }
.c-conversa-linha textarea { flex: 1; max-height: 40dvh; }
.c-conversa-enviar { flex: none; width: var(--e-12); height: var(--e-12); padding: 0; }
.c-conversa-contador { margin: 0; font-size: var(--fs-xs); color: var(--suave); text-align: end; font-variant-numeric: tabular-nums; }
.c-conversa-contador[hidden] { display: none; }
.c-conversa-aviso:empty { display: none; }
@media (max-width: 59.999rem) {
  /* Celular: a página rola, o campo fica preso acima do menu inferior enquanto a conversa está na tela */
  .c-conversa-log { padding: var(--e-2); }
  .c-conversa-escrever {
    position: sticky; z-index: var(--z-fixo); bottom: calc(var(--painel-barra) + 1px + env(safe-area-inset-bottom, 0px));
    margin-inline: calc(-1 * var(--e-1)); box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-2);
  }
  .c-msg { scroll-margin-bottom: calc(var(--painel-barra) + var(--e-16) * 2); }
}
@media (min-width: 60rem) {
  .c-conversa-log { max-height: min(60dvh, 34rem); overflow-y: auto; overscroll-behavior: contain; }
}
@supports (backdrop-filter: blur(1px)) {
  @media (prefers-reduced-transparency: no-preference) {
    .c-conversa-escrever { background: var(--vidro-fundo-forte); backdrop-filter: var(--vidro-desfoque); }
  }
}