/* Zera Hub — peças de formulário e cartão (lib/formularios.js). Regras .cfg-* copiadas de
   css/configuracoes.css do ZeraSync 2 em 14/10/2026 (linhas 1-131, 196-216, 408-412, 446-453). */
/* no hub o corte vale em toda tela (lá ele morava só dentro de .cfg, .adm e .pagina-convite) */
:root { --cfg-corte: polygon(0 0, calc(100% - 8px) 0, 100% 13px, 100% 100%, 0 100%); }
/* --- configuracoes.css 1-131 */
/* ZeraSync 2 — Configurações (/configuracoes/<secao>), Equipe Zera (/admin) e a página pública do
   convite (/convite). DESIGN.md §9 e "Identidade Zera". Só tokens de base.css; o corte Zera (3 de
   avanço por 5 de descida) marca os ladrilhos de ícone e os cartões de atalho. */

.cfg, .adm, .pagina-convite { --cfg-corte: polygon(0 0, calc(100% - 8px) 0, 100% 13px, 100% 100%, 0 100%); }
.cfg [hidden], .adm [hidden], .cfg-form [hidden], .cfg-gaveta [hidden] { display: none !important; }

/* ================================================================ casca: menu + conteúdo */
.cfg { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100%; }
.cfg-menu {
  position: sticky; top: 0; align-self: start; height: calc(100vh - var(--topo)); height: calc(100dvh - var(--topo)); overflow: auto;
  background: var(--sup); border-right: 1px solid var(--linha); padding: 20px 12px 28px;
}
.cfg-menu-cab { padding: 2px 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.cfg-menu-cab h1 { font-size: 20px; }
.cfg-menu-cab p { color: var(--txt-3); font-size: 13px; }
.cfg-suporte {
  align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px;
  border-radius: 7px; background: var(--zera-suave); color: var(--zera-txt); font-size: 12px; font-weight: 650; clip-path: var(--cfg-corte);
}
/* papel Administrador: azul-aço da marca (o violeta é só da IA, DESIGN.md §1) */
.chip.cfg-chip-admin { background: var(--zera-suave); color: var(--zera-txt); border-color: transparent; }
.cfg-grupo { padding-top: 10px; }
.cfg-grupo + .cfg-grupo { margin-top: 4px; border-top: 1px solid var(--linha); }
.cfg-grupo-tit { padding: 4px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); }
.cfg-item {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px; color: var(--txt); text-decoration: none;
  transition: background var(--t-rapido), color var(--t-rapido);
}
.cfg-item:hover { background: var(--hover); text-decoration: none; }
.cfg-item-ic {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--afundado); color: var(--txt-2);
  clip-path: var(--cfg-corte); transition: background var(--t-estado), color var(--t-estado), transform var(--t-estado);
}
.cfg-item:hover .cfg-item-ic { color: var(--zera-txt); transform: translateY(-1px); }
.cfg-item-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cfg-item-txt b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-item-txt small { font-size: 11.5px; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.cfg-item-seta, .cfg-item-atalho { color: var(--txt-3); display: grid; place-items: center; transition: transform var(--t-estado), opacity var(--t-estado); }
.cfg-item-seta { opacity: 0; }
.cfg-item:hover .cfg-item-seta { opacity: 1; transform: translateX(2px); }
.cfg-item[aria-current="page"] { background: var(--zera-suave); }
.cfg-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--zera); animation: indicador-entra 260ms cubic-bezier(.16, 1, .3, 1); }
.cfg-item[aria-current="page"] .cfg-item-ic { background: var(--zera-forte); color: #fff; }
.cfg-item[aria-current="page"] .cfg-item-txt b { color: var(--zera-txt); font-weight: 700; }
/* contraste AA: sobre o fundo do item selecionado e da prévia da marca o cinza claro (--txt-3) não chega a 4,5:1 */
.cfg-item[aria-current="page"] .cfg-item-txt small, .cfg-marca-previa .fraco { color: var(--txt-2); }
.cfg-item[aria-current="page"] .cfg-item-seta { opacity: 1; color: var(--zera-txt); }

.cfg-conteudo { min-width: 0; padding: 24px 32px 56px; }
.cfg-area { max-width: 1040px; display: flex; flex-direction: column; gap: 16px; }
.cfg-voltar { display: none; margin-bottom: 10px; }

/* cabeçalho da seção */
.cfg-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cfg-cab-ic {
  position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--zera-forte) 0%, #5f6fb3 100%); clip-path: var(--cfg-corte);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.cfg-cab-ic::after { content: ""; position: absolute; inset: 0; opacity: .14; background-image: repeating-linear-gradient(59deg, #fff 0 1px, transparent 1px 7px); }
.cfg-cab-txt { flex: 1 1 320px; min-width: 0; }
.cfg-cab-txt h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.cfg-cab-txt p { color: var(--txt-2); font-size: 13.5px; margin-top: 2px; max-width: 640px; }
.cfg-cab-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cfg-corpo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cfg-bloco { display: flex; flex-direction: column; gap: 14px; }
.cfg-bloco + .cfg-bloco { margin-top: 10px; padding-top: 22px; border-top: 1px dashed var(--linha-forte); }

/* cartão de bloco */
.cfg-cartao { min-width: 0; }
.cfg-cartao-cab { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 0; }
.cfg-cartao-cab h3 { font-size: 15px; font-weight: 650; }
.cfg-cartao-cab p { color: var(--txt-3); font-size: 12.5px; margin-top: 1px; }
.cfg-cartao-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--zera-suave); color: var(--zera-txt); clip-path: var(--cfg-corte); }
.cfg-cartao-corpo { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cfg-cartao-corpo:first-child { padding-top: 18px; }
.cfg-cartao-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--linha); background: var(--sup-2); border-radius: 0 0 var(--raio-c) var(--raio-c); }
.cfg-cartao.tom-erro { border-color: color-mix(in srgb, var(--erro) 45%, var(--linha)); }
.cfg-cartao.tom-erro .cfg-cartao-ic { background: var(--erro-bg); color: var(--erro-forte); }

/* formulário */
.cfg-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cfg-grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cfg-grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cfg-form { display: flex; flex-direction: column; gap: 14px; }
.cfg-form .entrada, .cfg-cartao .entrada, .cfg-gaveta .entrada { width: 100%; }
.cfg-num { max-width: 200px; font-variant-numeric: tabular-nums; }
.cfg-texto { min-height: 72px; resize: vertical; padding-top: 9px; padding-bottom: 9px; line-height: 1.45; height: auto; }
b.rotulo, .cfg-form .rotulo { display: block; font-size: 12.5px; font-weight: 650; color: var(--txt-2); margin-top: 2px; }
.cfg-recuo { padding-left: 2px; max-width: 220px; }
.cfg-nota { font-size: 12.5px; }

.cfg-linha-int { display: flex; align-items: center; gap: 14px; padding: 12px 0 0; border-top: 1px dashed var(--linha); }
.cfg-linha-int:first-child { border-top: 0; padding-top: 0; }
.cfg-linha-int b { font-size: 14px; font-weight: 600; }
.cfg-linha-int p { color: var(--txt-3); font-size: 12.5px; margin-top: 1px; }
.cfg-linha-int .interruptor { flex: none; }

.cfg-frase { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--zera-suave); border-left: 3px solid var(--zera); color: var(--txt-2); font-size: 13.5px; line-height: 1.55; }
.cfg-frase svg { color: var(--zera-txt); flex: none; margin-top: 2px; }
.cfg-frase b { color: var(--txt); font-weight: 650; }

.cfg-aviso { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--info-bg); color: var(--info-forte); font-size: 13px; font-weight: 550; }
.cfg-aviso svg { flex: none; }
.cfg-aviso.ia { background: var(--ia-suave); color: var(--ia-forte); }

.cfg-estado { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--afundado); color: var(--txt-2); flex: none; }
.cfg-estado.tom-ok { background: var(--ok-bg); color: var(--ok-forte); }
.cfg-estado.tom-alerta { background: var(--alerta-bg); color: var(--alerta-forte); }
.cfg-estado.tom-erro { background: var(--erro-bg); color: var(--erro-forte); }
.cfg-estado.tom-ia { background: var(--ia-suave); color: var(--ia-forte); }
.cfg-falhas { display: inline-flex; align-items: center; gap: 4px; color: var(--erro-forte); font-weight: 650; font-size: 12px; }
.cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cfg-contador { font-size: 12.5px; color: var(--txt-3); white-space: nowrap; }
.cfg-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfg-barra .busca { width: min(340px, 100%); }
.cfg-abas { margin-bottom: -2px; }
.bloco { display: block; }
code.mono { overflow-wrap: anywhere; }

/* ================================================================ segredo, cena do modal */
.cfg-segredo { display: flex; flex-direction: column; gap: 6px; }
.cfg-segredo label { font-size: 12.5px; font-weight: 650; color: var(--txt-2); }
.cfg-segredo-linha { display: flex; gap: 8px; }
.cfg-segredo-valor { flex: 1; min-width: 0; background: var(--afundado); letter-spacing: .01em; }
.cfg-segredo-aviso { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--alerta-forte); font-weight: 550; }
.cfg-codigo { display: block; padding: 10px 12px; border-radius: 10px; background: var(--afundado); border: 1px solid var(--linha); overflow-wrap: anywhere; }
.cfg-modal-cena { display: grid; place-items: center; padding: 2px 0 4px; }
/* --- configuracoes.css 196-216 */
.cfg-gaveta .cfg-cartao { box-shadow: none; }
.cfg-gaveta-rodape { position: sticky; bottom: -18px; display: flex; align-items: center; gap: 8px; padding: 12px 0 4px; background: var(--sup); border-top: 1px solid var(--linha); }

/* pessoas (seletor e pilha) */
.cfg-seletor-pessoas { display: flex; flex-direction: column; gap: 10px; }
.cfg-seletor-pessoas .entrada { max-width: 260px; }
.cfg-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; padding: 2px; }
.cfg-pessoa {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--linha); background: var(--sup); cursor: pointer; min-width: 0;
  transition: border-color var(--t-rapido), background var(--t-rapido);
}
.cfg-pessoa:hover { border-color: var(--linha-forte); }
.cfg-pessoa.marcado { border-color: var(--zera); background: var(--zera-suave); }
.cfg-pessoa input { flex: none; margin: 0; }
.cfg-pessoa-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cfg-pessoa-txt b { font-size: 13.5px; font-weight: 600; }
.cfg-pessoa-txt small { font-size: 11.5px; color: var(--txt-3); }
.cfg-pilha { display: inline-flex; align-items: center; }
.cfg-pilha .avatar { box-shadow: 0 0 0 2px var(--sup); }
.cfg-mais { margin-left: -6px; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--afundado); color: var(--txt-2); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px var(--sup); }
.cfg-ninguem { font-size: 12.5px; }
/* --- configuracoes.css 408-412 */
.cfg-rolagem { overflow: auto; max-width: 100%; border-radius: var(--raio-c); }
.cfg-tabela td { font-size: 13px; }
.cfg-tabela tr:last-child td { border-bottom: 0; }
.cfg-td-acoes { text-align: right; white-space: nowrap; width: 1%; }
.cfg-td-acoes .botao-icone { display: inline-grid; }
/* --- configuracoes.css 446-453 */
.cfg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cfg-kpi { position: relative; overflow: hidden; }
.cfg-kpi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ok); opacity: .8; }
.cfg-kpi.tom-alerta::after { background: var(--alerta); }
.cfg-kpi.tom-erro::after { background: var(--erro); }
.cfg-kpi-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--ok-bg); color: var(--ok-forte); clip-path: var(--cfg-corte); margin-bottom: 2px; }
.cfg-kpi.tom-alerta .cfg-kpi-ic { background: var(--alerta-bg); color: var(--alerta-forte); }
.cfg-kpi.tom-erro .cfg-kpi-ic { background: var(--erro-bg); color: var(--erro-forte); }