/* Zera Hub (kit Zera copiado do ZeraSync 2 em 14/10/2026) — identidade Zera: acabamento que dá a cara da marca (docs/DESIGN.md, "Identidade Zera").
   Ícones (duotom do estado ativo), ilustrações, carregamento assinatura, caixas de seleção, foco,
   dicas, toasts, esqueletos e microinterações. Só tokens de base.css; nada de cor solta sem motivo. */

/* ------------------------------------------------------------------ ícones: duotom do ativo */
.ic { flex: none; }
.ic .ic-f { transition: opacity var(--t-estado); fill: var(--ic-duo, currentColor); }
.ic-ativo .ic-f,
[aria-current="page"] > .ic .ic-f,
[aria-selected="true"] > .ic .ic-f,
.ativo > .ic .ic-f { opacity: var(--ic-duo-op, 0.2); }
.trilho, .nav-celular { --ic-duo: #8fb0cf; --ic-duo-op: 0.45; }

/* ------------------------------------------------------------------ ilustrações (lib/ilustracoes.js) */
.ilu {
  --ilu-cartao: var(--sup); --ilu-cartao-borda: var(--linha); --ilu-texto: var(--linha); --ilu-texto-forte: var(--linha-forte);
  --ilu-coluna: var(--afundado); --ilu-tracejado: var(--linha-forte); --ilu-texto-bolha: rgba(17, 27, 33, 0.14);
  display: block; width: 100%; max-width: 240px; margin: 0 auto; pointer-events: none; user-select: none;
}
html[data-theme="dark"] .ilu {
  --ilu-cartao: #17232c; --ilu-cartao-borda: #2a3943; --ilu-texto: #2a3943; --ilu-texto-forte: #3a4c58;
  --ilu-coluna: rgba(233, 237, 239, 0.035); --ilu-tracejado: #3a4c58; --ilu-texto-bolha: rgba(233, 237, 239, 0.22);
}
.ilu .ilu-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ilu-passos { max-width: 560px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ilu-um-passo { max-width: 160px; }
@media (max-width: 640px) { .ilu-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ilu .c-cartao { fill: var(--ilu-cartao); stroke: var(--ilu-cartao-borda); stroke-width: 1; }
.ilu .c-cartao.atras { opacity: 0.6; }
.ilu .c-cartao.escolhido { stroke: var(--zera); stroke-width: 1.6; }
.ilu .c-bolha-cli { fill: var(--bolha-cliente); }
.ilu .c-bolha-cli.borda { stroke: var(--ilu-cartao-borda); stroke-width: 1; }
.ilu .c-bolha-eq { fill: var(--bolha-equipe); }
.ilu .c-texto { fill: var(--ilu-texto); }
.ilu .c-texto.forte { fill: var(--ilu-texto-forte); }
.ilu .c-texto.apagado { opacity: 0.55; }
.ilu .c-texto-bolha { fill: var(--ilu-texto-bolha); }
.ilu .c-anel { fill: var(--ilu-cartao); }
.ilu .c-afundado { fill: var(--afundado); }
html[data-theme="dark"] .ilu .c-afundado { fill: #22313b; }
.ilu .c-ponto { fill: var(--txt-3); }
.ilu .c-coluna { fill: var(--ilu-coluna); }
.ilu .c-zera { fill: var(--zera); }
.ilu .c-zera-forte { fill: var(--zera-forte); }
.ilu .c-zera-suave { fill: var(--zera-suave); }
.ilu .c-wa { fill: var(--wa); }
.ilu .c-wa-suave { fill: var(--wa-suave); }
.ilu .c-wa-cab { fill: #008069; }
html[data-theme="dark"] .ilu .c-wa-cab { fill: #1f2c33; }
.ilu .c-ia { fill: var(--ia); }
.ilu .c-ia-suave { fill: var(--ia-suave); }
.ilu .c-nota { fill: var(--nota); }
.ilu .c-nota-bg { fill: var(--nota-bg); }
.ilu .c-nota-txt { fill: var(--nota); opacity: 0.6; }
.ilu .c-erro-bg { fill: var(--erro-bg); }
.ilu .c-branco { fill: #fff; }
.ilu .c-branco-suave { fill: rgba(255, 255, 255, 0.72); }
.ilu .c-marca { fill: #1f2a37; }
html[data-theme="dark"] .ilu .c-marca { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.ilu .c-meta { fill: #0866ff; }
.ilu .c-vidro { fill: var(--sup); opacity: 0.88; }
.ilu .c-pe { fill: var(--linha-forte); }
.ilu .c-camera { fill: #0b141a; }
.ilu .c-qr { fill: #141c25; }
.ilu .c-qr-fundo { fill: #fff; }
.ilu .c-moldura { fill: var(--zera-noite); }
html[data-theme="dark"] .ilu .c-moldura { stroke: #34434e; stroke-width: 1; }
.ilu .c-tela { fill: var(--chat-bg); }
.ilu .c-opcao { fill: var(--sup-2); stroke: var(--ilu-cartao-borda); stroke-width: 1; }
html[data-theme="dark"] .ilu .c-opcao { fill: #1c2a33; }
.ilu .c-passo { fill: var(--ilu-cartao); stroke: var(--ilu-tracejado); stroke-width: 1.6; }

.ilu .t-tracejado { fill: none; stroke: var(--ilu-tracejado); stroke-width: 1.4; stroke-dasharray: 4 3; }
.ilu .t-tracejado-zera { fill: none; stroke: var(--zera); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ilu .t-cabo { fill: none; stroke: var(--zera); stroke-width: 2.4; }
.ilu .t-faisca { fill: none; stroke: var(--erro); stroke-width: 1.6; }
.ilu .t-wa { fill: none; stroke: var(--wa); stroke-width: 2.2; }
.ilu .t-zera-fino { fill: none; stroke: var(--zera); stroke-width: 1.2; }
.ilu .t-conector { fill: none; stroke: var(--zera); stroke-width: 2; stroke-dasharray: 3 3; }
.ilu .t-trilha { fill: none; stroke: var(--ilu-tracejado); stroke-width: 2.2; }
.ilu .t-trilha-feita { fill: none; stroke: var(--wa); stroke-width: 2.2; }
.ilu .t-rota { fill: none; stroke: var(--zera); stroke-width: 1.6; stroke-dasharray: 3 4; }
.ilu .t-eixo { fill: none; stroke: var(--ilu-tracejado); stroke-width: 1.5; }

.ilu .ilu-txt { font-family: var(--fonte); font-weight: 750; }
.ilu .t-centro { text-anchor: middle; }
.ilu .t-wa-tinta { fill: var(--wa-tinta); }
.ilu .t-zera { fill: var(--zera-txt); }
.ilu .t-branco { fill: #fff; }

.ilu .k-zera { color: var(--zera); }
.ilu .k-wa { color: var(--wa-forte); }
.ilu .k-wa-tinta { color: var(--wa-tinta); }
.ilu .k-ia { color: var(--ia); }
.ilu .k-branco { color: #fff; }
.ilu .k-txt3 { color: var(--txt-3); }
.ilu .k-erro { color: var(--erro-forte); }
.ilu .k-nota { color: var(--nota-txt); }

.ilu .st-zera { stop-color: var(--zera); }
.ilu .st-wa { stop-color: var(--wa); }
.ilu .st-ia { stop-color: var(--ia); }
.ilu .st-nota { stop-color: var(--nota); }
.ilu .st-erro { stop-color: var(--erro); }
.ilu .ilu-sombra { flood-color: #1b2a3a; flood-opacity: 0.14; }
html[data-theme="dark"] .ilu .ilu-sombra { flood-color: #000; flood-opacity: 0.5; }
.ilu .apagado { opacity: 0.55; }

/* movimento: um gesto por cena; quadro parado = quadro final */
@keyframes ilu-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ilu-digita { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-1.5px); } }
@keyframes ilu-pula { 0%, 100% { transform: scale(1) rotate(0); } 12% { transform: scale(1.07) rotate(-4deg); } 24% { transform: scale(0.98) rotate(2deg); } 34% { transform: scale(1) rotate(0); } }
@keyframes ilu-confete { 0% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } 55%, 100% { transform: none; opacity: 1; } }
@keyframes ilu-chega { 0% { transform: translateY(-16px); opacity: 0; } 18%, 88% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ilu-anda { 0% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(var(--anda, 12px)); opacity: 0; } }
@keyframes ilu-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ilu-pulsa-leve { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes ilu-procura { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-7px, -2px); } 65% { transform: translate(4px, 2px); } }
@keyframes ilu-solto { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(2px, -4px) rotate(8deg); } }
@keyframes ilu-varre { from { transform: translateY(0); } to { transform: translateY(var(--varre, 60px)); } }
@keyframes ilu-vira { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }
@keyframes ilu-pisca { 0%, 100% { opacity: 0.35; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } }
@keyframes ilu-balanca { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(9deg); } 70% { transform: rotate(-7deg); } 78% { transform: rotate(4deg); } 86% { transform: rotate(-2deg); } }
@keyframes ilu-formigas { to { stroke-dashoffset: -14; } }
@keyframes ilu-opcao { 0%, 100% { opacity: 1; } 8%, 26% { opacity: 0.55; } }

.ilu .flutua { animation: ilu-flutuar 6s ease-in-out infinite; }
.ilu .flutua.d2 { animation-delay: -2.2s; }
.ilu .digita { animation: ilu-digita 1.3s ease-in-out infinite; }
.ilu .digita.p1 { animation-delay: 0.16s; } .ilu .digita.p2 { animation-delay: 0.32s; }
.ilu .pula, .ilu .pulsa, .ilu .pulsa-leve, .ilu .vira, .ilu .pisca, .ilu .balanca, .ilu .solto { transform-box: fill-box; transform-origin: center; }
/* festa com começo e fim: o selo pula duas vezes ao chegar e depois só flutua; o confete estoura uma vez
   e fica no lugar (o mesmo quadro final da cena parada). Festa em laço numa fila vazia cansa quem espera. */
.ilu .pula { animation: ilu-pula 3.6s cubic-bezier(0.16, 1, 0.3, 1) 2, ilu-flutuar 6s ease-in-out 7.2s infinite; }
.ilu .confete { animation: ilu-confete 1.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ilu .chega { animation: ilu-chega 5.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.ilu .anda { animation: ilu-anda 2.4s ease-in-out infinite; }
.ilu .anda.d2 { animation-delay: 1.2s; }
.ilu .pulsa { animation: ilu-pulsa 4s ease-in-out infinite; }
.ilu .pulsa-leve { animation: ilu-pulsa-leve 4s ease-in-out infinite; }
.ilu .procura { animation: ilu-procura 6s ease-in-out infinite; }
.ilu .solto { animation: ilu-solto 5s ease-in-out infinite; }
.ilu .varre { animation: ilu-varre 2.4s ease-in-out infinite alternate; }
.ilu .vira { animation: ilu-vira 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.ilu .pisca { animation: ilu-pisca 2.8s ease-in-out infinite; }
.ilu .pisca.d2 { animation-delay: -0.9s; } .ilu .pisca.d3 { animation-delay: -1.8s; }
.ilu .balanca { transform-origin: 50% 12%; animation: ilu-balanca 4.5s ease-in-out infinite; }
.ilu .formigas, .ilu .t-rota { animation: ilu-formigas 1.4s linear infinite; }
.ilu .chega-pessoa { animation: ilu-chega 6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.ilu .chega-pessoa.p1 { animation-delay: 0.25s; } .ilu .chega-pessoa.p2 { animation-delay: 0.5s; }
.ilu .opcao { animation: ilu-opcao 4.5s ease-in-out infinite; }
.ilu .opcao.o1 { animation-delay: 1.5s; } .ilu .opcao.o2 { animation-delay: 3s; }
.ilu-parado *, .ilu-parado *::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ilu * { animation: none !important; } }

/* estado vazio compacto (só ícone): o círculo vira o ladrilho com o corte Zera (3 de avanço por 5 de descida) */
.vazio .simbolo { border-radius: 18px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 20px, 100% 100%, 0 100%); }

/* desenho de fundo da conversa na linguagem Zera, pronto para o módulo Conversas trocar o --cv-desenho
   (ver docs/PENDENCIAS.md, Rodada 3): balão e cartão com o corte, tiques, relógio, brilho da IA,
   barra diagonal, pontos quadrados; pontas retas. A opacidade continua no --chat-desenho. */
:root {
  --zera-desenho-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M16 20H44L49 28V40H22L16 48Z M22 28H40 M22 34H34'/%3E%3Cpath d='M128 18L130.5 25.5L138 28L130.5 30.5L128 38L125.5 30.5L118 28L125.5 25.5Z'/%3E%3Cpath d='M88 60H100L106 66L100 72H88Z'/%3E%3Cpath d='M186 64H192L198 74H192Z'/%3E%3Cpath d='M64 100L69 105L80 94 M76 104L77 105L88 94'/%3E%3Cpath d='M190 112H194L196 115.5V124H190Z M186 120V122L189 126H197L200 122V120 M193 126V131'/%3E%3Ccircle cx='160' cy='150' r='11'/%3E%3Cpath d='M160 143V150H166'/%3E%3Cpath d='M56 150H76L80 157V176H56Z M61 160H72'/%3E%3Cpath d='M104 168h3v3h-3Z M110 168h3v3h-3Z M116 168h3v3h-3Z'/%3E%3Cpath d='M30 166V178 M24 172H36'/%3E%3Cpath d='M150 196L170 205L150 214L154 205Z'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
  --zera-desenho-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M16 20H44L49 28V40H22L16 48Z M22 28H40 M22 34H34'/%3E%3Cpath d='M128 18L130.5 25.5L138 28L130.5 30.5L128 38L125.5 30.5L118 28L125.5 25.5Z'/%3E%3Cpath d='M88 60H100L106 66L100 72H88Z'/%3E%3Cpath d='M186 64H192L198 74H192Z'/%3E%3Cpath d='M64 100L69 105L80 94 M76 104L77 105L88 94'/%3E%3Cpath d='M190 112H194L196 115.5V124H190Z M186 120V122L189 126H197L200 122V120 M193 126V131'/%3E%3Ccircle cx='160' cy='150' r='11'/%3E%3Cpath d='M160 143V150H166'/%3E%3Cpath d='M56 150H76L80 157V176H56Z M61 160H72'/%3E%3Cpath d='M104 168h3v3h-3Z M110 168h3v3h-3Z M116 168h3v3h-3Z'/%3E%3Cpath d='M30 166V178 M24 172H36'/%3E%3Cpath d='M150 196L170 205L150 214L154 205Z'/%3E%3C/svg%3E");
}

/* estado vazio com cena no lugar do círculo (ui.js estadoVazio({ ilustracao })) */
.vazio.com-ilustracao { gap: 8px; padding-top: 28px; }
.vazio.com-ilustracao .ilu { max-width: 232px; margin-bottom: 6px; }
.vazio.com-ilustracao h3 { font-size: 16.5px; letter-spacing: -0.01em; }
/* título e texto do estado vazio sem palavra sozinha na última linha ("...chega na rodada / 4") */
.vazio h3 { text-wrap: balance; }
.vazio p { text-wrap: pretty; }

/* ------------------------------------------------------------------ carregamento assinatura */
.carregando { --car-tam: 48px; display: inline-flex; flex-direction: column; align-items: center; gap: 14px; color: var(--zera); }
.carregando .car-simbolo { display: block; width: var(--car-tam); height: auto; overflow: visible; }
.carregando .car-traco { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linejoin: miter; stroke-miterlimit: 10; stroke-dasharray: 1; stroke-dashoffset: 1; animation: car-desenha 2.3s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.carregando .car-bloco { fill: currentColor; opacity: 0; animation: car-enche 2.3s ease-in-out infinite; }
.carregando .car-ladrilho { width: calc(var(--car-tam) * 1.5); height: calc(var(--car-tam) * 1.5); border-radius: 26%; display: grid; place-items: center; background: #1f2a37; color: #fff; box-shadow: 0 10px 30px -8px rgba(20, 28, 37, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; }
.carregando .car-ladrilho::after { content: ""; position: absolute; inset: 0; background: linear-gradient(59deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%); transform: translateX(-100%); animation: car-reflexo 2.3s ease-in-out infinite; }
.carregando .car-texto { font-size: 12.5px; font-weight: 600; color: var(--txt-3); letter-spacing: 0.01em; }
.carregando.parado .car-traco { animation: none; stroke-dashoffset: 0; }
.carregando.parado .car-bloco { animation: none; opacity: 1; }
.carregando.parado .car-ladrilho::after { animation: none; display: none; }
@keyframes car-desenha { 0% { stroke-dashoffset: 1; opacity: 1; } 48% { stroke-dashoffset: 0; opacity: 1; } 84% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes car-enche { 0%, 42% { opacity: 0; } 60%, 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes car-reflexo { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.carregando-app .carregando { animation: aparecer 300ms ease-out both; }
.tela-carregando { height: 100%; min-height: 220px; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) {
  .carregando .car-traco { animation: none; stroke-dashoffset: 0; }
  .carregando .car-bloco { animation: car-respira 2.4s ease-in-out infinite !important; opacity: 1; animation-duration: 2.4s !important; }
  .carregando .car-ladrilho::after { display: none; }
}
@keyframes car-respira { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* barra fina da troca de tela, com a ponta cortada na diagonal da marca */
.progresso-tela { position: fixed; z-index: 96; top: 0; left: var(--trilho); right: 0; height: 2px; pointer-events: none; opacity: 0; transition: opacity 200ms ease 90ms; }
.progresso-tela.ativo { opacity: 1; }
.progresso-tela.saindo { opacity: 0; transition-delay: 120ms; }
.progresso-tela i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--zera) 0%, #8fb0cf 70%, var(--wa) 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%); box-shadow: 0 0 10px var(--zera-brilho); }
@media (max-width: 767px) { .progresso-tela { left: 0; } }

/* ------------------------------------------------------------------ esqueletos com o formato do conteúdo */
/* contêiner do esqueleto de carregamento. Era ".esq", que colidia com a mensagem do cliente (.cv-msg.esq = esquerda)
   e virava a linha da mensagem em coluna: a bolha do cliente ia para o meio da conversa (14/10/2026). */
.esqueleto { --esq-base: var(--afundado); --esq-brilho: var(--sup-2); display: flex; flex-direction: column; gap: 10px; }
html[data-theme="dark"] .esqueleto { --esq-base: #17232b; --esq-brilho: #22313b; }
.esq-b, .esq-av, .skeleton {
  background: linear-gradient(59deg, var(--esq-base, var(--afundado)) 42%, var(--esq-brilho, var(--sup-2)) 50%, var(--esq-base, var(--afundado)) 58%) 0 0 / 900px 100% fixed;
  animation: esq-brilho 1.6s linear infinite;
}
html[data-theme="dark"] .skeleton { --esq-base: #17232b; --esq-brilho: #22313b; }
@keyframes esq-brilho { from { background-position: -450px 0; } to { background-position: 450px 0; } }
.esq-b { display: block; height: 10px; border-radius: 4px; }
.esq-b.fino { height: 8px; opacity: 0.8; }
.esq-b.grande { height: 22px; border-radius: 6px; }
.esq-b.pilula { height: 18px; width: 52px; border-radius: 999px; }
.esq-b.hora { width: 34px; height: 8px; margin-left: auto; align-self: flex-start; margin-top: 4px; }
.esq-av { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.esq-av.p { width: 24px; height: 24px; }
.esq-col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.esq-linha { display: flex; align-items: center; gap: 12px; padding: 6px 2px; }
.esq-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.esq-cartao { display: flex; flex-direction: column; gap: 9px; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio-c); background: var(--sup); }
.esq-cab, .esq-pe { display: flex; align-items: center; gap: 8px; }
.esq-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.esq-kpi { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--raio-c); background: var(--sup); }
.esq-tabela { gap: 0; border: 1px solid var(--linha); border-radius: var(--raio-c); overflow: hidden; background: var(--sup); }
.esq-tr { display: grid; grid-template-columns: 2fr 1.2fr 1fr 0.8fr; gap: 16px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.esq-tr:last-child { border-bottom: 0; }
.esq-tr.cab { background: var(--sup-2); }
.esq-conversa { padding: 6px 4px; }
.esq-balao { height: 34px; border-radius: 10px; max-width: 70%; }
.esq-balao.dir { align-self: flex-end; }
@media (prefers-reduced-motion: reduce) { .esq-b, .esq-av, .skeleton { animation: none; } }

/* ------------------------------------------------------------------ caixa de seleção e opção da família */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 18px; height: 18px;
  display: inline-grid; place-items: center; vertical-align: -4px; cursor: pointer;
  border: 1.5px solid var(--linha-forte); background: var(--sup); color: #fff;
  transition: background var(--t-rapido), border-color var(--t-rapido), transform var(--t-rapido), box-shadow var(--t-rapido);
}
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before {
  content: ""; width: 72%; height: 72%; background: currentColor; transform: scale(0);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5L9.5 18L20 6.5' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5L9.5 18L20 6.5' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="radio"]::before { content: ""; width: 42%; height: 42%; background: var(--zera-forte); transform: scale(0); transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--zera); }
input[type="checkbox"]:checked { background: var(--zera-forte); border-color: var(--zera-forte); }
input[type="checkbox"]:checked:not(:focus-visible) { clip-path: polygon(0 0, calc(100% - 4.5px) 0, 100% 7.5px, 100% 100%, 0 100%); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:indeterminate { background: var(--zera-forte); border-color: var(--zera-forte); }
input[type="checkbox"]:indeterminate::before { -webkit-mask: none; mask: none; width: 55%; height: 2px; transform: scale(1); }
input[type="radio"]:checked { border-color: var(--zera-forte); }
input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled) { transform: scale(0.9); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }
html[data-theme="dark"] input[type="checkbox"]:checked, html[data-theme="dark"] input[type="checkbox"]:indeterminate { background: var(--zera); border-color: var(--zera); color: #0b141a; }
html[data-theme="dark"] input[type="radio"]::before { background: var(--zera); }
html[data-theme="dark"] input[type="radio"]:checked { border-color: var(--zera); }

/* interruptor: trilho de raio 6, botão quadrado de raio 4 que estica no clique */
.interruptor .trilho-int { width: 38px; height: 22px; border-radius: 7px; }
.interruptor .trilho-int::after { top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 5px; transition: transform var(--t-estado), width var(--t-rapido); }
.interruptor input:checked + .trilho-int::after { transform: translateX(16px); }
.interruptor:active .trilho-int::after { width: 20px; }
.interruptor:active input:checked + .trilho-int::after { transform: translateX(12px); }
.interruptor input:checked + .trilho-int { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }

/* ------------------------------------------------------------------ foco, seleção, rolagem */
:focus-visible { outline: 2px solid var(--zera); outline-offset: 2px; }
.btn:focus-visible, .btn-wa:focus-visible, .btn-ia:focus-visible { box-shadow: 0 0 0 2px var(--sup), 0 0 0 4px var(--zera); }
.entrada:focus-visible, .selecao:focus-visible, .area:focus-visible { outline: none; }
::selection { background: rgba(91, 122, 153, 0.28); color: inherit; }
html[data-theme="dark"] ::selection { background: rgba(143, 176, 207, 0.32); }
*::-webkit-scrollbar-thumb:hover { background-color: var(--txt-3); }
.selecao { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath d='M5 9L12 16L19 9' fill='none' stroke='%23677585' stroke-width='2.6' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ dica (tooltip) */
body > .dica {
  background: var(--zera-noite); color: #e9edef; font-weight: 600; font-size: 12px; padding: 6px 10px; border-radius: 7px;
  letter-spacing: 0.005em; box-shadow: none; animation: dica-entra 170ms cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 8px, 100% 100%, 0 100%);
}
html[data-theme="dark"] body > .dica { background: #e9edef; color: #0b141a; }
@keyframes dica-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ toast: ícone tingido + tempo que falta */
.toast { position: relative; overflow: hidden; gap: 11px; padding: 10px 14px 12px 10px; border-left: 0 !important; box-shadow: var(--sombra-3), inset 0 0 0 1px rgba(255, 255, 255, 0.06); animation: toast-entra 340ms cubic-bezier(0.16, 1, 0.3, 1); }
.toast .toast-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(143, 176, 207, 0.16); color: #b3cbe2; }
.toast.ok .toast-ic { background: rgba(37, 211, 102, 0.16); color: #4fe08c; }
.toast.erro .toast-ic { background: rgba(229, 113, 111, 0.2); color: #f39b99; }
.toast.alerta .toast-ic { background: rgba(245, 181, 68, 0.2); color: #f5c46a; }
.toast.ia .toast-ic { background: rgba(155, 133, 255, 0.22); color: #c3b6ff; }
.toast .toast-tempo { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; transform-origin: left center; background: #8fb0cf; animation: toast-tempo linear forwards; }
.toast.ok .toast-tempo { background: var(--wa); }
.toast.erro .toast-tempo { background: #e5716f; }
.toast.alerta .toast-tempo { background: var(--nota); }
.toast.ia .toast-tempo { background: linear-gradient(90deg, #6d5dfc, #9b5cff); }
.toast.pausado .toast-tempo { animation-play-state: paused; }
@keyframes toast-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toast-entra { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ foto real com o tratamento Zera */
.foto-zera { --corte-l: 34px; --corte-a: 56px; position: relative; overflow: hidden; margin: 0; border-radius: 18px; background: #121a23; clip-path: polygon(0 0, calc(100% - var(--corte-l)) 0, 100% var(--corte-a), 100% 100%, 0 100%); }
.foto-zera img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-zera::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(200deg, rgba(91, 122, 153, 0) 35%, rgba(74, 79, 176, 0.34) 100%), linear-gradient(0deg, rgba(10, 16, 22, 0.42) 0%, transparent 46%); }

/* ------------------------------------------------------------------ microinterações */
.btn:active:not([disabled]):not(.ocupado) { transform: translateY(1px) scale(0.98); }
.botao-icone { transition: background var(--t-rapido), color var(--t-rapido), transform var(--t-rapido); }
.botao-icone:active { transform: scale(0.92); }
.aba { transition: background var(--t-rapido), color var(--t-rapido), box-shadow var(--t-rapido), transform var(--t-rapido); }
.aba:active { transform: scale(0.97); }
.chip.botao:active, .menu-item:active { transform: scale(0.985); }
.item-trilho:hover svg { transform: translateY(-1px) scale(1.04); }
.item-trilho[aria-current="page"] svg { filter: drop-shadow(0 2px 6px rgba(143, 176, 207, 0.35)); }
.menu-item svg, .btn svg { transition: transform var(--t-rapido); }
.menu-item:hover svg { transform: translateX(1px); }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .botao-icone:active, .aba:active, .chip.botao:active, .menu-item:active, input:active { transform: none !important; }
}

/* ------------------------------------------------------------------ Zera Hub (14/10/2026)
   cores de produto nas cenas novas e o gesto "acende" (ladrilho cinza que ganha cor; parado = aceso) */
.ilu .c-wa-txt { fill: var(--wa-txt); opacity: 0.75; }
.ilu .c-crm { fill: var(--crm, #14b8a6); }
.ilu .c-core { fill: var(--ia); }
@keyframes ilu-acende { 0%, 18% { opacity: 0; } 30%, 88% { opacity: 1; } 100% { opacity: 0; } }
.ilu .acende { animation: ilu-acende 6s ease-in-out infinite; }