/* Tela Clientes: abas por plano animadas e tabela premium. */
@keyframes cl-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cl-brilho { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes cl-pulso { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tom) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

.cl-planos { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 16px; }
.cl-plano {
  --tom: #ff5a1f;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 6px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  animation: cl-sobe .4s cubic-bezier(.2,.8,.2,1) both;
  transition: border-color .2s, background .2s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.cl-plano:nth-child(2) { animation-delay: .04s; } .cl-plano:nth-child(3) { animation-delay: .08s; }
.cl-plano:nth-child(4) { animation-delay: .12s; } .cl-plano:nth-child(5) { animation-delay: .16s; }
.cl-plano:nth-child(6) { animation-delay: .2s; }
.cl-plano::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-120%) skewX(-20deg);
}
.cl-plano:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tom) 55%, transparent); box-shadow: 0 8px 22px -10px var(--tom); }
.cl-plano:hover::after { animation: cl-brilho .7s ease; }
.cl-plano:active { transform: translateY(0) scale(.97); }

.cl-plano-icone {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tom) 100%, #fff 35%), var(--tom) 55%, color-mix(in srgb, var(--tom) 60%, #000));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.25), 0 2px 8px -2px var(--tom);
  color: #1a1206;
  transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.cl-plano:hover .cl-plano-icone { transform: rotate(-12deg) scale(1.12); }
.cl-plano-icone svg { width: 16px; height: 16px; display: block; fill: rgba(0,0,0,.18); stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.cl-plano b {
  min-width: 24px; padding: 3px 8px; border-radius: 999px; font-size: 11px; text-align: center;
  background: rgba(255,255,255,.08); transition: background .2s, color .2s;
}
.cl-plano.nivel-bronze { --tom: #d98a4e; }
.cl-plano.nivel-prata { --tom: #c9d3e0; }
.cl-plano.nivel-ouro { --tom: #f3c64d; }
.cl-plano.nivel-diamante { --tom: #6fd3ff; }
.cl-plano[data-plano="__sem"] { --tom: #8a8f98; }

.cl-plano.ativa {
  border-color: var(--tom);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tom) 24%, transparent), color-mix(in srgb, var(--tom) 8%, transparent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tom) 14%, transparent), 0 10px 26px -12px var(--tom);
}
.cl-plano.ativa b { background: var(--tom); color: #111; }
.cl-plano.ativa .cl-plano-icone { animation: cl-pulso 2.4s ease-in-out infinite; }

/* Tabela */
.tabela-clientes { border-collapse: separate; border-spacing: 0; }
.tabela-clientes thead th { font-size: 11px; letter-spacing: .1em; opacity: .55; }
.tabela-clientes tbody tr {
  animation: cl-sobe .45s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
  transition: background .2s, transform .2s;
}
.tabela-clientes tbody tr:hover { background: linear-gradient(90deg, rgba(255,90,31,.09), transparent 75%); }
.tabela-clientes tbody td { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.05); transition: transform .2s; }
.tabela-clientes tbody tr:hover td:first-child { transform: translateX(4px); }
.tabela-clientes .moldura-plano { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.tabela-clientes tr:hover .moldura-plano { transform: scale(1.08); }
.tabela-clientes .cliente-celula .duas-linhas > span:first-child { font-weight: 700; letter-spacing: .01em; }
.tabela-clientes .micro em { opacity: .6; }
.tabela-clientes .placa-plano { transition: transform .2s, filter .2s; }
.tabela-clientes tr:hover .placa-plano { transform: translateY(-1px); filter: brightness(1.12); }
.cl-sem-dono { font-size: 12px; opacity: .45; font-style: italic; }
.tabela-clientes .botao-linha { opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; }
.tabela-clientes tr:hover .botao-linha { opacity: 1; transform: none; }

:root[data-tema="claro"] .cl-plano { background: #fff; border-color: rgba(0,0,0,.08); }
:root[data-tema="claro"] .cl-plano b { background: rgba(0,0,0,.06); }

@media (prefers-reduced-motion: reduce) {
  .cl-plano, .tabela-clientes tbody tr, .cl-plano.ativa .cl-plano-icone { animation: none; }
}
@media (max-width: 800px) {
  .cl-planos { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .tabela-clientes .botao-linha { opacity: 1; transform: none; }
}

/* Acompanhamento dos planos dentro de Clientes + botao do catalogo */
.cabeca-acoes { display: flex; align-items: center; gap: 10px; }
.cl-ver-planos { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 14px; color: inherit; filter: none; box-shadow: none;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); transition: transform .2s, border-color .2s, background .2s; }
.cl-ver-planos svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.cl-ver-planos:hover { transform: translateY(-2px); border-color: rgba(255,90,31,.5); background: rgba(255,90,31,.08); }
.cl-ver-planos:hover svg { transform: rotate(-10deg) scale(1.1); color: #ff7a3d; }
.cl-acompanhamento { margin: 0 0 16px; animation: cl-sobe .45s cubic-bezier(.2,.8,.2,1) both; }
.cl-acompanhamento .pl-clientes-sec { margin: 0; }
.pl-tela > .voltar-perfil { margin-bottom: 14px; }

/* ---- Planos a vencer (dentro de Clientes) ---- */
@keyframes pv-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pv-sino { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 89% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
@keyframes pv-pulso { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t) 50%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes pv-barra { from { transform: scaleX(0); } }
@keyframes pv-brilho { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }

.cabeca-tela .cabeca-acoes { margin-left: auto; }

.pv { position: relative; overflow: hidden; padding: 18px 18px 14px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(80% 140% at 0% 0%, rgba(248,113,113,.12), transparent 55%), linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
.pv-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pv-sino { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 13px; color: #fca5a5;
  background: linear-gradient(160deg, rgba(248,113,113,.25), rgba(248,113,113,.06)); border: 1px solid rgba(248,113,113,.35); }
.pv-sino svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 15%; animation: pv-sino 4s ease-in-out infinite; }
.pv-topo .pv-titulo { flex: 1; min-width: 0; }
.pv-topo h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.pv-topo p { margin: 2px 0 0; font-size: 12.5px; opacity: .55; }
.pv-contas { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-conta { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pv-conta i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pv-conta.pv-t-vencido { color: #f87171; background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3); }
.pv-conta.pv-t-vencido i { --t: #f87171; animation: pv-pulso 1.8s infinite; }
.pv-conta.pv-t-proximo { color: #f0b54a; background: rgba(240,181,74,.12); border: 1px solid rgba(240,181,74,.3); }

.pv-lista { display: grid; gap: 8px; }
.pv-item { --t: #f0b54a; position: relative; display: grid; grid-template-columns: 62px 44px minmax(0, 1fr) 200px auto; align-items: center; gap: 14px;
  padding: 10px 12px 10px 10px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06);
  animation: pv-entra .45s calc(.05s + var(--n, 0) * 60ms) cubic-bezier(.2,.8,.2,1) both;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s, box-shadow .25s; }
.pv-item.pv-t-vencido { --t: #f87171; }
.pv-item.pv-t-urgente { --t: #fb923c; }
.pv-item::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--t); box-shadow: 0 0 12px var(--t); }
.pv-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--t) 40%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--t) 9%, transparent), rgba(255,255,255,.02) 70%); box-shadow: 0 14px 30px -18px var(--t); }

.pv-contagem { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 52px; border-radius: 14px; color: var(--t);
  background: color-mix(in srgb, var(--t) 12%, transparent); border: 1px solid color-mix(in srgb, var(--t) 30%, transparent); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pv-item.pv-t-vencido .pv-contagem { animation: pv-pulso 2.2s infinite; }
.pv-item:hover .pv-contagem { transform: scale(1.06); }
.pv-contagem b { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.pv-contagem small { margin-top: 2px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.pv-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 0 2px color-mix(in srgb, var(--t) 45%, transparent); }
.pv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pv-quem { min-width: 0; }
.pv-quem strong { display: block; font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-plano { display: flex; align-items: center; gap: 10px; margin-top: 5px; font-size: 13px; font-weight: 700; }
.pv-plano em { font-style: normal; font-weight: 500; opacity: .5; }
.pv-prazo { display: flex; flex-direction: column; gap: 5px; }
.pv-frase { font-size: 13px; font-weight: 700; color: var(--t); }
.pv-barra { height: 5px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; }
.pv-barra span { display: block; width: var(--pct); height: 100%; border-radius: 5px; transform-origin: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--t) 55%, transparent), var(--t)); box-shadow: 0 0 8px var(--t);
  animation: pv-barra 1s calc(.3s + var(--n, 0) * 60ms) cubic-bezier(.2,.8,.2,1) both; }
.pv-prazo small { font-size: 11.5px; opacity: .5; }

.pv-zap { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px;
  font-size: 13px; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #2fd174, #16a34a); border: 1px solid #34d399; box-shadow: 0 10px 22px -12px #22c55e;
  transition: transform .2s, box-shadow .2s; }
.pv-zap svg { width: 17px; height: 17px; fill: currentColor; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.pv-zap::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-130%) skewX(-18deg); }
.pv-zap:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -12px #22c55e; }
.pv-zap:hover svg { transform: rotate(-12deg) scale(1.12); }
.pv-zap:hover::after { animation: pv-brilho .7s ease; }
.pv-sem-zap { font-size: 12px; opacity: .45; font-style: italic; padding: 0 8px; }

.pv-calmo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(165deg, rgba(74,222,128,.07), rgba(255,255,255,.01)); }
.pv-calmo-icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #4ade80; background: rgba(74,222,128,.12); }
.pv-calmo-icone svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pv-calmo strong { display: block; font-size: 14px; }
.pv-calmo small { font-size: 12.5px; opacity: .55; }

@media (prefers-reduced-motion: reduce) { .pv *, .pv-item { animation: none !important; } }
@media (max-width: 900px) {
  .pv-item { grid-template-columns: 56px 40px minmax(0, 1fr) auto; }
  .pv-prazo { grid-column: 3 / -1; }
}
@media (max-width: 560px) {
  .pv-item { grid-template-columns: 52px minmax(0, 1fr); }
  .pv-avatar { display: none; }
  .pv-prazo, .pv-zap, .pv-sem-zap { grid-column: 1 / -1; }
  .pv-zap { justify-content: center; }
}

/* ---- ajustes: alinhamento, icones e efeitos ---- */
@keyframes pv-gira { to { --pv-ang: 360deg; } }
@property --pv-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes pv-varre { 0%, 55% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(420%) skewX(-20deg); } }

.pv-item { color: var(--texto, #f3f4f6); font-weight: 500; grid-template-columns: 64px 46px minmax(0, 1fr) 210px auto; overflow: hidden; isolation: isolate; }
.pv-item::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t) 14%, transparent), transparent); animation: pv-varre 5s calc(var(--n, 0) * .4s + 1s) ease-in-out infinite; }
.pv-quem strong { color: var(--texto, #f3f4f6); font-weight: 800; }
.pv-plano { font-weight: 700; }
.pv-plano .placa-plano { flex: none; }
.pv-contagem { height: 54px; color: var(--t); font-weight: 800; }
.pv-contagem b { font-weight: 800; font-size: 22px; }
.pv-contagem small { white-space: nowrap; font-weight: 700; }
.pv-avatar { flex: none; }
.pv-frase { color: var(--t); font-weight: 700; }
.pv-prazo small { color: var(--texto, #f3f4f6); }

/* borda girando quando tem plano vencido */
.pv.pv-alerta { border-color: transparent; }
.pv.pv-alerta::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--pv-ang), rgba(248,113,113,.15), rgba(248,113,113,.9) 12%, rgba(255,255,255,.08) 25%, rgba(248,113,113,.15) 50%, rgba(251,146,60,.8) 62%, rgba(255,255,255,.08) 75%, rgba(248,113,113,.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pv-gira 6s linear infinite; }

/* WhatsApp: icone num circulo, alinhado ao texto */
.pv-zap { gap: 10px; height: 42px; padding: 0 18px 0 6px; border-radius: 999px; line-height: 1; }
.pv-zap-icone { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.pv-zap .pv-zap-icone svg { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform: none; }
.pv-zap:hover .pv-zap-icone { transform: rotate(-12deg) scale(1.1); }
.pv-zap:hover .pv-zap-icone svg { transform: none; }

/* sino e selos alinhados */
.pv-sino svg, .pv-calmo-icone svg { display: block; }
.pv-contas { align-self: center; }
.pv-conta { line-height: 1; }

/* ---- botoes do topo de Clientes ---- */
@keyframes cb-brilho { 0%, 60% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
.cabeca-acoes { gap: 10px; }
.cabeca-acoes .cl-ver-planos, .cabeca-acoes #novo { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px 0 14px;
  border-radius: 14px; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .01em; cursor: pointer; filter: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s, background .25s; }
.cabeca-acoes .cl-ver-planos { color: #f3f4f6; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px -16px #000; }
.cabeca-acoes .cl-ver-planos svg { width: 18px; height: 18px; padding: 5px; box-sizing: content-box; border-radius: 9px; color: #ff8a55; background: rgba(255,90,31,.14); }
.cabeca-acoes .cl-ver-planos:hover { transform: translateY(-2px); border-color: rgba(255,90,31,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 30px -14px rgba(255,90,31,.55); }
.cabeca-acoes .cl-ver-planos:hover svg { transform: rotate(-8deg) scale(1.08); }
.cabeca-acoes #novo { padding: 0 20px; color: #fff; border: 1px solid #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f 60%, #f04a10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 28px -12px #ff5a1f; }
.cabeca-acoes #novo::before { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; margin-left: -6px; border-radius: 7px; font-size: 17px; line-height: 1; background: rgba(255,255,255,.2); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.cabeca-acoes #novo::after, .cabeca-acoes .cl-ver-planos::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: cb-brilho 5s ease-in-out infinite; }
.cabeca-acoes .cl-ver-planos::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); animation-delay: 2.5s; }
.cabeca-acoes #novo:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 34px -12px #ff5a1f; }
.cabeca-acoes #novo:hover::before { transform: rotate(90deg); }
.cabeca-acoes button:active { transform: scale(.97); }

/* ---- Planos: cabecalho com a marca ---- */
@keyframes ph-gira { to { transform: rotate(360deg); } }
@keyframes ph-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ph-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pl-heroi { position: relative; display: flex; align-items: center; gap: 22px; margin: 4px 0 22px; padding: 22px 24px; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(70% 140% at 0% 50%, rgba(255,90,31,.16), transparent 60%), linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: 0 24px 60px -34px #000, inset 0 1px 0 rgba(255,255,255,.06); animation: ph-entra .5s cubic-bezier(.2,.8,.2,1) both; }
.pl-heroi::after { content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,90,31,.14), transparent 65%); }
.pl-heroi-marca { position: relative; isolation: isolate; display: grid; place-items: center; width: 86px; height: 86px; flex: none; border-radius: 24px;
  background: #0d1016; box-shadow: 0 16px 34px -14px rgba(255,90,31,.55), inset 0 1px 0 rgba(255,255,255,.06); animation: ph-flutua 5s ease-in-out infinite; }
.pl-heroi-marca::before { content: ''; position: absolute; inset: -1.5px; border-radius: 25px; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 55%, #ff5a1f 75%, #ffb347 85%, transparent 100%); animation: ph-gira 4s linear infinite; }
.pl-heroi-marca::after { content: ''; position: absolute; inset: 0; border-radius: 24px; z-index: -1; background: #0d1016; }
.pl-heroi-marca img { width: 54px; height: auto; display: block; filter: drop-shadow(0 0 10px rgba(255,255,255,.18)); }
.pl-heroi-texto { flex: 1; min-width: 0; }
.pl-heroi-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ff8a55; }
.pl-heroi-texto h2 { margin: 2px 0 4px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.pl-heroi-texto p { margin: 0; font-size: 13.5px; opacity: .6; }
.pl-heroi-novo { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 8px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: #fff; filter: none; border: 1px solid #ff7a3d;
  background: linear-gradient(180deg, #ff8247, #ff5a1f 60%, #f04a10); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 28px -12px #ff5a1f; transition: transform .25s, box-shadow .25s; }
.pl-heroi-novo span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.2); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.pl-heroi-novo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pl-heroi-novo:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 34px -12px #ff5a1f; }
.pl-heroi-novo:hover span { transform: rotate(90deg); }
.pl-cartao.clicavel { cursor: pointer; }
@media (max-width: 700px) {
  .pl-heroi { flex-wrap: wrap; padding: 18px; }
  .pl-heroi-marca { width: 64px; height: 64px; }
  .pl-heroi-marca img { width: 40px; }
  .pl-heroi-novo { width: 100%; justify-content: center; }
}

/* ---- logo clara no catalogo, ícone de arquivar centralizado ---- */
.pl-heroi-marca img { filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255,255,255,.25)); }
.pl-cartao .pl-mais { display: inline-grid; place-items: center; padding: 0; line-height: 0; }
.pl-cartao .pl-mais svg { display: block; margin: 0; }
.pl-cartao.destaque .pl-placa { margin-top: 0; }

/* ---- editor de plano ---- */
@keyframes pe-entra { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pe-sai { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes pe-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pe-nova { from { opacity: 0; transform: translateX(-14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pe-tira { to { opacity: 0; transform: translateX(24px) scale(.96); } }
@keyframes pe-pula { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pe-gira { to { transform: rotate(360deg); } }
@keyframes pe-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.pe-janela { --tom: #ff5a1f; width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; border-radius: 26px; overflow: hidden; color: var(--texto, #f3f4f6);
  border: 1px solid color-mix(in srgb, var(--tom) 28%, rgba(255,255,255,.08));
  background: radial-gradient(70% 50% at 0% 0%, color-mix(in srgb, var(--tom) 15%, transparent), transparent 60%), #10131a;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.95); animation: pe-entra .4s cubic-bezier(.2,.8,.2,1) both; }
.pe-janela.nivel-bronze { --tom: #e0915a; }
.pe-janela.nivel-prata { --tom: #cfd8e3; }
.pe-janela.nivel-ouro { --tom: #f3c64d; }
.pe-janela.nivel-diamante { --tom: #6fd3ff; }
.pe-janela.saindo { animation: pe-sai .17s ease-in both; }
.pe-janela::backdrop { background: rgba(5,7,10,.72); backdrop-filter: blur(6px); }
.pe-form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); margin: 0; }

.pe-topo { display: flex; align-items: center; gap: 14px; padding: 20px 24px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.pe-moeda { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; color: #1a1206;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tom), #fff 35%), var(--tom) 55%, color-mix(in srgb, var(--tom) 60%, #000));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 8px 22px -6px var(--tom); animation: pe-flutua 3s ease-in-out infinite; }
.pe-moeda svg { width: 24px; height: 24px; fill: rgba(0,0,0,.15); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pe-topo > div { flex: 1; min-width: 0; }
.pe-topo small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tom); }
.pe-topo h2 { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.pe-fechar { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer; color: inherit;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); box-shadow: none; filter: none; transition: transform .3s, background .2s; }
.pe-fechar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pe-fechar:hover { transform: rotate(90deg); background: rgba(255,255,255,.1); }

.pe-corpo { flex: 1; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; padding: 20px 24px; }
.pe-dados, .pe-entregas-lado { display: flex; flex-direction: column; gap: 12px; animation: pe-sobe .45s .08s cubic-bezier(.2,.8,.2,1) both; }
.pe-entregas-lado { animation-delay: .15s; }
.pe-linha { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.pe-campo { display: flex; flex-direction: column; gap: 6px; }
.pe-campo > span { font-size: 12px; font-weight: 700; opacity: .65; }
.pe-campo em { font-style: normal; font-weight: 500; opacity: .6; }
.pe-campo input, .pe-campo textarea, .pe-reais { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035);
  color: inherit; font: inherit; font-weight: 600; transition: border-color .2s, box-shadow .2s, background .2s; }
.pe-campo input { height: 44px; padding: 0 12px; }
.pe-campo textarea { padding: 10px 12px; resize: vertical; min-height: 76px; line-height: 1.45; font-weight: 500; font-size: 13.5px; }
.pe-reais { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; }
.pe-reais b { opacity: .5; font-size: 13px; }
.pe-reais input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; box-shadow: none; }
.pe-campo input:focus, .pe-campo textarea:focus, .pe-reais:focus-within { outline: none; border-color: var(--tom); background: color-mix(in srgb, var(--tom) 6%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tom) 15%, transparent); }
.pe-reais input:focus { box-shadow: none; background: none; border: 0; }

.pe-previa { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--tom) 30%, transparent);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tom) 20%, transparent), transparent 60%), rgba(255,255,255,.02); }
.pe-previa::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); animation: pv-brilho 4s 1s ease-in-out infinite; }
.pe-previa-preco { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.pe-previa-preco small { font-size: 14px; font-weight: 700; opacity: .6; }
.pe-previa-preco strong { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--tom); }
.pe-previa-preco span { font-size: 13px; opacity: .5; }
.pe-previa-info { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.08); font-size: 12.5px; opacity: .85; }
.pe-previa-info b { display: inline-block; font-size: 20px; font-weight: 800; }
.pulou { animation: pe-pula .35s cubic-bezier(.3,1.6,.5,1); }
.pe-aviso { margin: 0; font-size: 12px; line-height: 1.5; opacity: .5; }

.pe-entregas-topo { display: flex; align-items: baseline; justify-content: space-between; }
.pe-entregas-topo h3, .pe-adicionar-titulo { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.pe-entregas-topo span { font-size: 12px; opacity: .5; }
.pe-adicionar-titulo { margin-top: 6px; }
.pe-entregas { display: grid; gap: 7px; }
.pe-entrega { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 9%, transparent), rgba(255,255,255,.02) 60%); border: 1px solid rgba(255,255,255,.07);
  animation: pe-sobe .35s calc(.18s + var(--n, 0) * 40ms) cubic-bezier(.2,.8,.2,1) both; transition: border-color .2s, transform .2s; }
.pe-entrega:hover { border-color: color-mix(in srgb, var(--cor) 45%, transparent); }
.pe-entrega.nova { animation: pe-nova .4s cubic-bezier(.2,.8,.2,1) both; border-color: var(--cor); }
.pe-entrega.saindo { animation: pe-tira .2s ease-in both; }
.pe-entrega-icone { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; color: #111; background: var(--cor);
  box-shadow: 0 6px 14px -6px var(--cor); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pe-entrega:hover .pe-entrega-icone { transform: rotate(-8deg) scale(1.08); }
.pe-entrega-icone svg, .pe-chip-icone svg { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pe-entrega-nome { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-acumula { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; opacity: .7; cursor: pointer; user-select: none; }
.pe-acumula input { position: absolute; opacity: 0; pointer-events: none; }
.pe-chave { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(255,255,255,.12); transition: background .25s; }
.pe-chave::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pe-acumula input:checked + .pe-chave { background: var(--cor); }
.pe-acumula input:checked + .pe-chave::after { transform: translateX(12px); }
.pe-acumula:has(input:checked) { opacity: 1; }
.pe-passo { display: flex; align-items: center; flex: none; padding: 3px; border-radius: 11px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); }
.pe-passo button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 0; cursor: pointer; color: inherit;
  background: rgba(255,255,255,.06); font-size: 16px; font-weight: 700; line-height: 1; box-shadow: none; filter: none; transition: background .15s, color .15s, transform .15s; }
.pe-passo button:hover { background: var(--cor); color: #111; }
.pe-passo button:active { transform: scale(.88); }
.pe-passo input { width: 46px; height: 28px; border: 0; padding: 0; background: none; text-align: center; color: inherit; font: inherit; font-size: 15px; font-weight: 800; box-shadow: none; -moz-appearance: textfield; }
.pe-passo input::-webkit-inner-spin-button, .pe-passo input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pe-passo input:focus { outline: none; box-shadow: none; background: none; color: var(--cor); }
.pe-tirar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0; border-radius: 8px; cursor: pointer; color: inherit; opacity: .4;
  background: none; border: 0; box-shadow: none; filter: none; transition: opacity .2s, color .2s, background .2s; }
.pe-tirar svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pe-tirar:hover { opacity: 1; color: #f87171; background: rgba(239,68,68,.12); }
.pe-vazio { margin: 0; padding: 18px; text-align: center; font-size: 13px; opacity: .55; border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; }

.pe-adicionar { display: flex; flex-wrap: wrap; gap: 7px; }
.pe-chip { --cor: #ff5a1f; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 4px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: inherit; box-shadow: none; filter: none;
  border: 1px solid color-mix(in srgb, var(--cor) 30%, transparent); background: color-mix(in srgb, var(--cor) 7%, transparent);
  animation: pe-sobe .3s calc(.25s + var(--n, 0) * 30ms) both; transition: transform .2s cubic-bezier(.3,1.5,.5,1), background .2s, border-color .2s; }
.pe-chip-icone { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--cor); background: color-mix(in srgb, var(--cor) 16%, transparent); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pe-chip-icone svg { width: 14px; height: 14px; }
.pe-chip b { color: var(--cor); font-size: 15px; line-height: 1; transition: transform .3s; }
.pe-chip:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--cor) 15%, transparent); border-color: var(--cor); }
.pe-chip:hover .pe-chip-icone { transform: rotate(-10deg) scale(1.1); }
.pe-chip:hover b { transform: rotate(90deg); }
.pe-chip-outra { --cor: #ff7a3d; border-style: dashed; padding-right: 14px; }
.pe-outra { display: flex; gap: 8px; animation: pe-sobe .25s both; }
.pe-outra input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--tom); background: color-mix(in srgb, var(--tom) 6%, transparent); color: inherit; font: inherit; font-size: 13px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tom) 14%, transparent); }
.pe-outra input:focus { outline: none; }
.pe-outra button { height: 40px; padding: 0 14px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; color: #fff; border: 1px solid #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f); box-shadow: none; filter: none; }
.pe-outra .pe-outra-x { width: 40px; padding: 0; color: inherit; font-size: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); }

.pe-pe { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); }
.pe-pe button { position: relative; height: 44px; padding: 0 22px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; filter: none; transition: transform .2s, box-shadow .2s, background .2s; }
.pe-cancelar { color: inherit; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); box-shadow: none; }
.pe-cancelar:hover { background: rgba(255,255,255,.09); }
.pe-salvar { min-width: 150px; color: #fff; border: 1px solid #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f 60%, #f04a10); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px -12px #ff5a1f; }
.pe-salvar:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 32px -12px #ff5a1f; }
.pe-salvar.salvando { pointer-events: none; }
.pe-salvar.salvando span, .pe-salvar.salvo span { opacity: 0; }
.pe-salvar.salvando::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: pe-gira .7s linear infinite; }
.pe-salvar.salvo { background: linear-gradient(180deg, #34d399, #059669); border-color: #34d399; box-shadow: 0 12px 26px -12px #10b981; }
.pe-salvar.salvo::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; animation: pe-pula .4s; }

@media (max-width: 820px) {
  .pe-corpo { grid-template-columns: 1fr; }
  .pe-entrega { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .pe-janela, .pe-janela * { animation: none !important; } }

/* As janelas novas tem largura propria: a regra base de `dialog` limita a 520px. */
dialog.pe-janela { width: min(1000px, calc(100vw - 32px)); max-width: none; }
dialog.pl-gerenciar { width: min(760px, calc(100vw - 32px)); max-width: none; }
dialog.pl-troca { width: min(820px, calc(100vw - 32px)); max-width: none; }
dialog.pl-confirma { width: min(420px, calc(100vw - 32px)); max-width: none; }
.pe-previa { flex-wrap: wrap; }
.pe-previa-info { flex: 1; min-width: 160px; }
.pe-entrega-nome { min-width: 60px; }

/* ---- botoes do cartao de plano ---- */
.pl-cartao footer { gap: 8px; align-items: stretch; }
.pl-cartao footer .pl-editar { position: relative; overflow: hidden; height: 44px; gap: 9px; border-radius: 13px; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  color: #fff; border: 1px solid color-mix(in srgb, var(--nivel, #ff5a1f) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nivel, #ff5a1f) 30%, transparent), color-mix(in srgb, var(--nivel, #ff5a1f) 12%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px -16px var(--nivel, #ff5a1f);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s; }
.pl-cartao footer .pl-editar svg { width: 15px; height: 15px; margin: 0; padding: 5px; box-sizing: content-box; border-radius: 8px; background: rgba(255,255,255,.14); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pl-cartao footer .pl-editar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-130%) skewX(-18deg); }
.pl-cartao footer .pl-editar:hover { transform: translateY(-2px); border-color: var(--nivel, #ff5a1f);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nivel, #ff5a1f) 45%, transparent), color-mix(in srgb, var(--nivel, #ff5a1f) 20%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 30px -14px var(--nivel, #ff5a1f); }
.pl-cartao footer .pl-editar:hover svg { transform: rotate(-12deg) scale(1.08); }
.pl-cartao footer .pl-editar:hover::after { animation: cb-brilho .9s ease; }
.pl-cartao.destaque footer .pl-editar { color: #fff; }

.pl-cartao footer .pl-mais { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; margin: 0; line-height: 0;
  border-radius: 13px; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), color .2s, border-color .2s, background .2s; }
.pl-cartao footer .pl-mais svg { display: block; width: 18px; height: 18px; margin: 0; flex: none; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pl-cartao footer .pl-mais:hover { transform: translateY(-2px); color: #fca5a5; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); }
.pl-cartao footer .pl-mais:hover svg { transform: translateY(-1px) scale(1.08); }
.pl-cartao footer button:active { transform: scale(.97); }

/* ---- membros do grupo (ficha do WhatsApp) ---- */
@keyframes mg-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mg-brilho { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.mg { display: flex; flex-direction: column; gap: 12px; }
.mg-topo { text-align: center; padding: 6px 4px 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mg-topo strong { display: block; font-size: 16px; font-weight: 800; }
.mg-topo span { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #ff8a55; background: rgba(255,90,31,.12); }
.mg-topo p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; opacity: .6; white-space: pre-line; max-height: 90px; overflow-y: auto; text-align: left; }
.mg-busca { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); transition: border-color .2s, box-shadow .2s; }
.mg-busca svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; opacity: .5; }
.mg-busca input { flex: 1; min-width: 0; height: 100%; border: 0 !important; padding: 0; background: none !important; color: inherit; font: inherit; font-size: 13px; box-shadow: none !important; }
.mg-busca input:focus { outline: none; }
.mg-busca:focus-within { border-color: #ff5a1f; box-shadow: 0 0 0 3px rgba(255,90,31,.14); }
.mg-lista { display: grid; gap: 4px; }
.mg-membro { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; animation: mg-entra .3s calc(var(--n, 0) * 20ms) both; transition: background .2s; }
.mg-membro:hover { background: rgba(255,255,255,.04); }
.mg-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #3b4252, #1f2430); border: 1px solid rgba(255,255,255,.08); }
.mg-avatar.admin { background: linear-gradient(135deg, #ff7a3d, #c2410c); border-color: rgba(255,138,85,.5); box-shadow: 0 6px 14px -8px #ff5a1f; }
.mg-quem { flex: 1; min-width: 0; }
.mg-quem strong { display: block; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-quem strong em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 6px; margin-left: 4px; border-radius: 999px; background: rgba(74,222,128,.14); color: #4ade80; }
.mg-quem small { display: block; font-size: 11.5px; opacity: .5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-admin { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #ff8a55; background: rgba(255,90,31,.12); border: 1px solid rgba(255,90,31,.3); }
.mg-falar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0; border-radius: 10px; cursor: pointer; color: inherit; opacity: 0;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); box-shadow: none; filter: none; transition: opacity .2s, background .2s, color .2s, transform .2s; }
.mg-falar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mg-membro:hover .mg-falar { opacity: 1; }
.mg-falar:hover { color: #4ade80; background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.35); transform: translateY(-1px); }
.mg-carregando { display: grid; gap: 8px; }
.mg-esqueleto { height: 44px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.08), rgba(255,255,255,.03)); background-size: 400px 100%; animation: mg-brilho 1.2s linear infinite; }
.mg-erro { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 10px; text-align: center; }
.mg-erro small { font-size: 12.5px; opacity: .6; }
@media (hover: none) { .mg-falar { opacity: 1; } }

/* ---- membros do grupo: versao minimalista ---- */
@keyframes mg2-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes mg2-onda { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.mg2 { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px 8px; }
.mg2-topo { display: flex; align-items: center; gap: 14px; animation: mg2-entra .35s both; }
.mg2-foto { position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; overflow: hidden; color: rgba(255,255,255,.55);
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); }
.mg2-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.mg2-foto svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.mg2-titulo { min-width: 0; }
.mg2-titulo strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg2-titulo span { display: block; margin-top: 2px; font-size: 12px; opacity: .45; }

.mg2-numeros { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); animation: mg2-entra .35s .05s both; }
.mg2-numeros div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 6px; }
.mg2-numeros div + div { border-left: 1px solid rgba(255,255,255,.06); }
.mg2-numeros b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.mg2-numeros div:first-child b { color: #ff8a55; }
.mg2-numeros span { font-size: 11px; font-weight: 600; opacity: .45; text-transform: lowercase; }

.mg2-descricao { animation: mg2-entra .35s .1s both; }
.mg2-descricao p { margin: 0; font-size: 12.5px; line-height: 1.55; opacity: .6; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mg2-descricao.aberta p { display: block; max-height: 220px; overflow-y: auto; }
.mg2-descricao button { margin-top: 4px; padding: 0; border: 0; background: none; box-shadow: none; filter: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: #ff8a55; }
.mg2-descricao button:hover { text-decoration: underline; }

.mg2-controles { display: flex; gap: 8px; position: sticky; top: -16px; z-index: 2; padding: 8px 0; margin: -8px 0; background: linear-gradient(#141821 75%, transparent); }
.mg2-busca { flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); transition: border-color .2s, box-shadow .2s; }
.mg2-busca svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; opacity: .45; }
.mg2-busca input { flex: 1; min-width: 0; height: 100%; border: 0 !important; padding: 0; background: none !important; color: inherit; font: inherit; font-size: 13px; box-shadow: none !important; }
.mg2-busca input:focus { outline: none; }
.mg2-busca:focus-within { border-color: rgba(255,90,31,.6); box-shadow: 0 0 0 3px rgba(255,90,31,.12); }
.mg2-recorte { display: flex; padding: 3px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.mg2-recorte button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: inherit; opacity: .55; background: none; box-shadow: none; filter: none; transition: opacity .2s, background .2s; }
.mg2-recorte button.ativo { opacity: 1; background: rgba(255,255,255,.09); }

.mg2-lista { display: flex; flex-direction: column; }
.mg2-lista h4 { display: flex; align-items: center; gap: 8px; margin: 14px 4px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .45; }
.mg2-lista h4:first-child { margin-top: 2px; }
.mg2-lista h4 span { letter-spacing: 0; opacity: .8; }
.mg2-membro { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; animation: mg2-entra .3s calc(var(--n, 0) * 18ms) both; transition: background .2s; }
.mg2-membro + .mg2-membro { box-shadow: 0 -1px 0 rgba(255,255,255,.035); }
.mg2-membro:hover { background: rgba(255,255,255,.035); box-shadow: none; }
.mg2-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; font-size: 11.5px; font-weight: 800; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.mg2-avatar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: .6; }
.mg2-avatar.admin { color: #ffb38a; background: rgba(255,90,31,.1); border-color: rgba(255,90,31,.4); }
.mg2-quem { flex: 1; min-width: 0; }
.mg2-quem strong { display: block; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg2-quem small { display: block; margin-top: 1px; font-size: 11.5px; opacity: .42; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg2-selo { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #ff9a6b; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,90,31,.28); }
.mg2-selo.eu { color: #4ade80; border-color: rgba(74,222,128,.3); }
.mg2-falar { display: grid; place-items: center; width: 30px; height: 30px; flex: none; padding: 0; border-radius: 9px; cursor: pointer; color: inherit; opacity: 0;
  background: none; border: 1px solid rgba(255,255,255,.1); box-shadow: none; filter: none; transition: opacity .2s, color .2s, border-color .2s, background .2s; }
.mg2-falar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mg2-membro:hover .mg2-falar { opacity: .8; }
.mg2-falar:hover { opacity: 1 !important; color: #4ade80; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.08); }
.mg2-mais { align-self: center; margin-top: 10px; height: 36px; padding: 0 18px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: inherit;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); box-shadow: none; filter: none; transition: background .2s; }
.mg2-mais:hover { background: rgba(255,255,255,.08); }
.mg2-vazio { margin: 20px 0; text-align: center; font-size: 13px; opacity: .5; }
.mg2-carregando { display: grid; gap: 10px; padding-top: 6px; }
.mg2-carregando span { height: 40px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.07), rgba(255,255,255,.025)); background-size: 600px 100%; animation: mg2-onda 1.3s linear infinite; }
.mg2-carregando span:first-child { height: 56px; }
.mg2-erro { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 10px; text-align: center; }
.mg2-erro small { font-size: 12.5px; opacity: .55; }
.mg2-erro button { margin-top: 8px; height: 34px; padding: 0 16px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 700; font-size: 12.5px; color: inherit; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: none; }
@media (hover: none) { .mg2-falar { opacity: .8; } }

/* ---- membros do grupo: capa e lista refinadas ---- */
@keyframes mg3-luz { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
.mg2 { gap: 14px; }
.mg2-capa { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 18px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,90,31,.10), rgba(255,255,255,.015) 70%); animation: mg2-entra .4s both; }
.mg2-capa-fundo { position: absolute; inset: -30px; z-index: -1; background-size: cover; background-position: center; filter: blur(34px) saturate(1.4); opacity: .35; transform: scale(1.2); animation: mg3-luz 6s ease-in-out infinite; }
.mg2-capa::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,19,26,.15), rgba(16,19,26,.85)); }
.mg2-capa .mg2-foto { width: 74px; height: 74px; border-radius: 22px; background: #0f1218; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.8), 0 0 0 4px rgba(255,255,255,.04); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.mg2-capa .mg2-foto:hover { transform: scale(1.05) rotate(-2deg); }
.mg2-capa .mg2-foto img { background: #fff; }
.mg2-nome { margin-top: 12px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg2-criado { margin-top: 3px; font-size: 12px; opacity: .5; }
.mg2-capa .mg2-numeros { width: 100%; margin-top: 16px; border: 0; background: rgba(0,0,0,.25); backdrop-filter: blur(6px); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); animation: none; }
.mg2-capa .mg2-numeros div { flex-direction: row; justify-content: center; align-items: baseline; gap: 6px; padding: 11px 6px; flex-wrap: wrap; }
.mg2-capa .mg2-numeros svg { align-self: center; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.mg2-capa .mg2-numeros b { font-size: 17px; }

/* descricao: corte com degrade (o clamp nao convive com as quebras de linha) */
.mg2-descricao { position: relative; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); }
.mg2-descricao p { display: block; -webkit-line-clamp: unset; max-height: 3.1em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); transition: max-height .35s ease; }
.mg2-descricao.aberta p { max-height: 240px; overflow-y: auto; -webkit-mask-image: none; mask-image: none; }

/* busca e recorte com a mesma altura */
.mg2-controles { align-items: stretch; background: linear-gradient(#141821 80%, transparent); }
.mg2-busca { height: 40px; }
.mg2-recorte { height: 40px; box-sizing: border-box; align-items: center; }
.mg2-recorte button { height: 32px; }
.mg2-recorte button.ativo { background: rgba(255,90,31,.16); color: #ffb38a; }

/* membros: avatar colorido por numero, coroa no admin */
.mg2-membro { padding: 8px 10px; gap: 12px; }
.mg2-membro:hover { background: linear-gradient(90deg, hsla(var(--h), 70%, 60%, .07), transparent 80%); }
.mg2-avatar { position: relative; width: 38px; height: 38px; font-size: 12px; letter-spacing: .02em; color: hsl(var(--h), 80%, 82%);
  background: linear-gradient(145deg, hsla(var(--h), 70%, 55%, .32), hsla(var(--h), 70%, 40%, .14)); border: 1px solid hsla(var(--h), 70%, 65%, .3);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.mg2-membro:hover .mg2-avatar { transform: scale(1.06); }
.mg2-coroa { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  color: #1a1206; background: linear-gradient(180deg, #ffc46b, #ff8a3d); box-shadow: 0 0 0 2px #141821; }
.mg2-coroa svg { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.mg2-quem strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.mg2-selo { padding: 3px 9px; background: rgba(255,90,31,.08); }
.mg2-membro.admin .mg2-selo:not(.eu) { color: #ffb38a; }

/* ---- bolha enviada (WhatsApp do sistema): laranja profundo e volume ----
   So cor, borda e sombra: nada de overflow, posicao ou pseudo-elemento, que a
   bolha ja usa por dentro (texto, anexos e previas de documento). */
@keyframes bo-chega { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.central .bolha.minha {
  color: #fff7f2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 45%),
    linear-gradient(155deg, #f2692f 0%, #de4d18 48%, #b8380f 100%) !important;
  border: 1px solid rgba(255, 168, 120, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 30px -18px rgba(230, 80, 25, .75), 0 2px 6px -2px rgba(0, 0, 0, .35) !important;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, filter .25s;
}
.central .bolha.minha:hover { transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 18px 36px -18px rgba(230, 80, 25, .9), 0 2px 6px -2px rgba(0, 0, 0, .35) !important; }
.central .bolha-linha:last-child .bolha.minha, .central .bolha.minha.provisoria { animation: bo-chega .35s cubic-bezier(.2, .8, .2, 1) both; }
.central .bolha.minha .bolha-rodape { color: rgba(255, 240, 230, .75); }
.central .bolha.minha .bolha-autor { background: rgba(60, 14, 0, .28); border: 1px solid rgba(255, 200, 170, .18); color: #ffe6d9; letter-spacing: .03em; }
.central .bolha.minha .bolha-doc { background: rgba(40, 10, 0, .28); border-color: rgba(255, 200, 170, .16); }
.central .bolha.minha .bolha-doc-icone { background: rgba(255, 255, 255, .16); color: #fff; }
.central .bolha.minha .bolha-doc-acao { color: #fff; border-color: rgba(255, 220, 200, .28); }
.central .bolha.minha .bolha-doc-acao:hover { background: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: reduce) { .central .bolha.minha { animation: none !important; } }

/* ---- barra lateral: logo e perfil vivos ---- */
@property --lt-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes lt-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes lt-aura { 0%, 100% { filter: var(--lt-base, brightness(1)) drop-shadow(0 0 3px rgba(255, 255, 255, .15)); }
  50% { filter: var(--lt-base, brightness(1)) drop-shadow(0 0 10px rgba(255, 140, 80, .55)) drop-shadow(0 0 2px rgba(255, 255, 255, .35)); } }
@keyframes lt-orbita { from { transform: rotate(0deg) translateX(44px) rotate(0deg); } to { transform: rotate(360deg) translateX(44px) rotate(-360deg); } }
@keyframes lt-halo { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .75; transform: scale(1.05); } }
@keyframes lt-gira { to { --lt-ang: 360deg; } }
@keyframes lt-anel { 0%, 100% { box-shadow: 0 0 0 2px #0b0f15, 0 0 0 3.5px rgba(255, 106, 43, .75), 0 0 0 3.5px rgba(255, 106, 43, 0); }
  50% { box-shadow: 0 0 0 2px #0b0f15, 0 0 0 3.5px rgba(255, 140, 80, .95), 0 0 0 8px rgba(255, 106, 43, 0), 0 0 14px 2px rgba(255, 106, 43, .35); } }
@keyframes lt-giro-3d { from { transform: perspective(400px) rotateY(0); } to { transform: perspective(400px) rotateY(360deg); } }

/* logo: flutua, respira uma aura laranja e tem uma faisca em orbita */
.lateral .topo-marca { position: relative; isolation: isolate; }
.lateral .topo-marca::before { content: ''; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 90, 31, .22), transparent 65%); animation: lt-halo 5s ease-in-out infinite; }
:root[data-tema="escuro"] .lateral #marca { --lt-base: brightness(0) invert(1); }
.lateral #marca { animation: lt-flutua 6s ease-in-out infinite, lt-aura 6s ease-in-out infinite; }

/* perfil: borda com luz girando, anel do avatar pulsando */
.lateral .pessoa-cartao { position: relative; isolation: isolate; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.lateral .pessoa-cartao::before { content: ''; position: absolute; inset: -1px; border-radius: 17px; padding: 1px; pointer-events: none; z-index: -1;
  background: conic-gradient(from var(--lt-ang), transparent 0 62%, rgba(255, 106, 43, .9) 78%, rgba(255, 200, 150, .9) 84%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: lt-gira 7s linear infinite; }
.lateral .pessoa-cartao:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(255, 90, 31, .7); }
.lateral .pessoa-cartao:hover::before { animation-duration: 2.5s; }
.lateral .pessoa-cartao .avatar { animation: lt-anel 3.2s ease-in-out infinite; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.lateral .pessoa-cartao .pessoa:hover .avatar { transform: scale(1.08) rotate(-4deg); }
.lateral .pessoa-cartao .pessoa-sair svg { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.lateral .pessoa-cartao .pessoa-sair:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .lateral #marca, .lateral .topo-marca::before, .lateral .topo-marca::after, .lateral .pessoa-cartao::before, .lateral .pessoa-cartao .avatar { animation: none !important; }
}

/* ---- Agenda: seletor Agencia | Pessoal ---- */
@keyframes ag-esp-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ag-espaco { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; margin: 4px 0 10px; border-radius: 14px;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .07); }
.ag-espaco-marca { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 122, 61, .28), rgba(255, 90, 31, .14)); border: 1px solid rgba(255, 122, 61, .45);
  box-shadow: 0 8px 18px -10px rgba(255, 90, 31, .8); transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), background .4s, border-color .4s, box-shadow .4s; }
.ag-espaco.pessoal .ag-espaco-marca { transform: translateX(100%);
  background: linear-gradient(180deg, rgba(150, 110, 245, .3), rgba(120, 80, 230, .14)); border-color: rgba(170, 135, 255, .5); box-shadow: 0 8px 18px -10px rgba(140, 100, 245, .9); }
.ag-espaco button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 8px; border: 0; border-radius: 10px;
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: inherit; opacity: .55; background: none; box-shadow: none; filter: none; transition: opacity .25s, transform .2s; }
.ag-espaco button:hover { opacity: .85; }
.ag-espaco button:active { transform: scale(.96); }
.ag-espaco button.ativo { opacity: 1; }
.ag-espaco button svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ag-espaco button.ativo svg { transform: scale(1.1); }
.ag-espaco button em { min-width: 18px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-size: 10.5px; background: rgba(255, 255, 255, .1); }
.ag-espaco button em:empty { display: none; }
.ag-espaco-aviso { display: flex; align-items: center; gap: 6px; margin: -4px 4px 10px; font-size: 11.5px; color: #c4b2ff; opacity: .85; animation: ag-esp-entra .3s both; }
.ag-espaco-aviso svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* a lista troca com um fade curto, para a mudanca de agenda ser sentida */
.ag.trocando-espaco .ag-janela > :not(.ag-lado) { animation: ag-esp-entra .38s cubic-bezier(.2, .8, .2, 1) both; }
.ag-det-pessoal.ligada { color: #c4b2ff; }
.ag-det-pessoal small { display: block; font-size: 11px; opacity: .6; font-weight: 500; }
/* seletor com N abas (Agencia + uma por admin) */
.ag-espaco { grid-template-columns: repeat(var(--abas, 2), minmax(0, 1fr)); }
.ag-espaco-marca { width: calc((100% - 8px) / var(--abas, 2)); }
.ag-espaco.pessoal .ag-espaco-marca { transform: translateX(calc(100% * var(--pos, 1))); }
.ag-espaco button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Agenda: fundo do topo escolhido por cada pessoa ---- */
@keyframes agf-entra { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes agf-op { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes agf-zoom { from { background-size: auto 115%, cover; } to { background-size: auto 100%, cover; } }
.ag-meio.com-foto .ag-banner { background: linear-gradient(180deg, rgba(8, 10, 16, .1) 0%, rgba(8, 10, 16, .55) 100%), var(--ag-foto) center / cover no-repeat; }
.ag-meio.com-foto .ag-paisagem { display: none; }
.ag-meio.com-foto .ag-banner h2, .ag-meio.com-foto .ag-banner p { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.ag-meio .ag-banner { transition: background .5s ease; }

.ag-fundos { position: absolute; z-index: 80; width: 330px; padding: 14px; border-radius: 18px; color: var(--texto, #f3f4f6);
  background: #141821; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9); animation: agf-entra .22s cubic-bezier(.2, .8, .2, 1) both; }
.ag-fundos header { margin-bottom: 12px; }
.ag-fundos header strong { display: block; font-size: 14px; font-weight: 800; }
.ag-fundos header small { font-size: 11.5px; opacity: .5; }
.ag-fundos-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ag-fundo-op { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; box-shadow: none; filter: none; cursor: pointer; color: inherit; font: inherit;
  animation: agf-op .3s calc(var(--n, 0) * 25ms) cubic-bezier(.3, 1.4, .5, 1) both; }
.ag-fundo-amostra { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, rgb(var(--fb)), rgb(var(--fa)) 70%); border: 2px solid transparent; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8);
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), border-color .2s, box-shadow .2s; }
.ag-fundo-amostra.padrao { background: linear-gradient(160deg, rgb(140, 110, 245), rgb(96, 140, 250) 70%); }
.ag-fundo-amostra svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 70%; }
.ag-fundo-op small { font-size: 10.5px; font-weight: 600; opacity: .65; }
.ag-fundo-op:hover .ag-fundo-amostra { transform: translateY(-2px) scale(1.05); }
.ag-fundo-op.ativo .ag-fundo-amostra { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15), 0 8px 18px -8px rgba(0, 0, 0, .9); }
.ag-fundo-op.ativo small { opacity: 1; }
.ag-fundos-pe { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.ag-fundo-foto { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 700;
  border: 1px dashed rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .03); transition: background .2s, border-color .2s, transform .2s; }
.ag-fundo-foto svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ag-fundo-foto:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .4); transform: translateY(-1px); }
.ag-fundo-foto.ativo { border-style: solid; border-color: rgba(255, 255, 255, .5); }
.ag-fundo-limpar { height: 38px; padding: 0 14px; border-radius: 11px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: inherit;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; filter: none; }
.ag-fundo-limpar:hover { background: rgba(255, 255, 255, .1); }

/* ---- topo com foto: contraste e espacamento ---- */
.ag-meio.com-foto .ag-banner {
  background:
    linear-gradient(90deg, rgba(8, 10, 16, .78) 0%, rgba(8, 10, 16, .45) 38%, rgba(8, 10, 16, .05) 70%),
    linear-gradient(180deg, rgba(8, 10, 16, .25) 0%, rgba(8, 10, 16, 0) 35%, rgba(8, 10, 16, .65) 100%),
    var(--ag-foto) var(--ag-pos, center) / cover no-repeat;
}
.ag-meio.com-foto.foto-clara .ag-banner {
  background:
    linear-gradient(90deg, rgba(8, 10, 16, .88) 0%, rgba(8, 10, 16, .62) 40%, rgba(8, 10, 16, .18) 75%),
    linear-gradient(180deg, rgba(8, 10, 16, .35) 0%, rgba(8, 10, 16, .1) 40%, rgba(8, 10, 16, .75) 100%),
    var(--ag-foto) var(--ag-pos, center) / cover no-repeat;
}
.ag-meio.com-foto .ag-banner::after { display: none; }
/* o texto ganha uma placa de vidro: legivel em qualquer foto */
.ag-meio.com-foto .ag-banner-texto { flex: 0 1 auto; max-width: min(460px, 62%); padding: 14px 18px 14px; margin-left: -6px; border-radius: 18px;
  background: rgba(10, 12, 18, .38); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .8); }
.ag-meio.com-foto .ag-banner h2 { color: #fff; font-weight: 600; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.ag-meio.com-foto .ag-banner p, .ag-meio.com-foto .ag-banner-conta { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.ag-meio.com-foto .ag-banner-selo { background: rgba(0, 0, 0, .35) !important; border-color: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.ag-meio.com-foto .ag-banner-progresso { background: rgba(255, 255, 255, .2); }
.ag-meio.com-foto .ag-banner-acoes { align-self: flex-end; }
/* botoes do topo em vidro, em qualquer fundo */
.ag-banner .ag-banner-acoes .ag-lampada { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(10, 12, 18, .32) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important; color: #fff !important; transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s !important; }
.ag-banner .ag-banner-acoes .ag-lampada:hover { transform: translateY(-2px); background: rgba(10, 12, 18, .5) !important; }
.ag-banner { padding-top: 22px; }

/* ---- galeria de fundos refinada ---- */
.ag-fundos { width: 352px; padding: 16px; }
.ag-fundos header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.ag-fundos-grade { gap: 10px 8px; }
.ag-fundo-op { position: relative; }
.ag-fundo-ok { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #111;
  opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.ag-fundo-ok svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ag-fundo-op.ativo .ag-fundo-ok { opacity: 1; transform: none; }
.ag-fundos-foto-atual { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); animation: agf-entra .25s both; }
.ag-fundos-previa { width: 92px; height: 56px; flex: none; border-radius: 10px; background-size: cover; box-shadow: 0 0 0 2px #fff, 0 8px 18px -8px #000; transition: background-position .4s ease; }
.ag-fundos-foto-atual strong { display: block; font-size: 13px; }
.ag-fundos-foto-atual small { display: block; font-size: 11px; opacity: .5; margin-bottom: 6px; }
.ag-fundos-pos { display: flex; padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, .3); }
.ag-fundos-pos button { flex: 1; height: 26px; padding: 0 8px; border: 0; border-radius: 7px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; color: inherit; opacity: .55; background: none; box-shadow: none; filter: none; transition: opacity .2s, background .2s; }
.ag-fundos-pos button.ativo { opacity: 1; background: rgba(255, 255, 255, .12); }
.ag-fundos-pe { align-items: stretch; }
.ag-fundos-pe > * { height: 40px !important; box-sizing: border-box; margin: 0 !important; }
.ag-fundo-limpar { display: inline-flex; align-items: center; }

/* foto mais viva: veu leve (a placa de vidro ja garante o texto) */
.ag-meio.com-foto .ag-banner {
  background:
    linear-gradient(90deg, rgba(8, 10, 16, .32) 0%, rgba(8, 10, 16, .1) 40%, rgba(8, 10, 16, 0) 70%),
    linear-gradient(180deg, rgba(8, 10, 16, 0) 55%, rgba(8, 10, 16, .3) 100%),
    var(--ag-foto) var(--ag-pos, center) / cover no-repeat;
}
.ag-meio.com-foto.foto-clara .ag-banner {
  background:
    linear-gradient(90deg, rgba(8, 10, 16, .42) 0%, rgba(8, 10, 16, .16) 40%, rgba(8, 10, 16, 0) 70%),
    linear-gradient(180deg, rgba(8, 10, 16, 0) 50%, rgba(8, 10, 16, .35) 100%),
    var(--ag-foto) var(--ag-pos, center) / cover no-repeat;
}
.ag-meio.com-foto .ag-banner-texto { background: rgba(10, 12, 18, .5); }
/* os botoes voltam para a direita */
.ag-meio .ag-banner-acoes { margin-left: auto; }

/* ---- Agenda: editor de recorte da foto do topo ---- */
@keyframes agr-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes agr-sai { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes agr-dica { 0%, 100% { opacity: .9; } 50% { opacity: .5; } }
dialog.agr-janela { width: min(860px, calc(100vw - 32px)); max-width: none; padding: 0; border-radius: 24px; overflow: hidden; color: var(--texto, #f3f4f6);
  background: #10131a; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95); animation: agr-entra .35s cubic-bezier(.2, .8, .2, 1) both; }
dialog.agr-janela.saindo { animation: agr-sai .16s ease-in both; }
dialog.agr-janela::backdrop { background: rgba(5, 7, 10, .75); backdrop-filter: blur(6px); }
.agr-topo { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; }
.agr-topo > div { flex: 1; }
.agr-topo strong { display: block; font-size: 17px; font-weight: 800; }
.agr-topo small { font-size: 12.5px; opacity: .55; }
.agr-fechar { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer; color: inherit; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; filter: none; transition: transform .3s; }
.agr-fechar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.agr-fechar:hover { transform: rotate(90deg); }
.agr-palco { padding: 6px 22px 0; }
.agr-quadro { position: relative; width: 100%; overflow: hidden; border-radius: 18px; cursor: grab; touch-action: none; user-select: none;
  background: repeating-conic-gradient(#1a1e27 0 25%, #151922 0 50%) 0 0 / 22px 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 50px -24px #000; }
.agr-quadro.arrastando { cursor: grabbing; }
.agr-img { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; will-change: transform; }
/* o mesmo veu e a mesma placa do topo de verdade: a previa e fiel */
.agr-veu { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 10, 16, .32) 0%, rgba(8, 10, 16, .1) 40%, rgba(8, 10, 16, 0) 70%), linear-gradient(180deg, rgba(8, 10, 16, 0) 55%, rgba(8, 10, 16, .3) 100%); }
.agr-placa { position: absolute; left: 4%; bottom: 12%; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 14px; pointer-events: none;
  background: rgba(10, 12, 18, .5); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); }
.agr-placa span { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.agr-placa b { font-size: clamp(16px, 2.6vw, 26px); font-weight: 700; color: #fff; }
.agr-placa i { width: 90px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.agr-grade { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; }
.agr-grade i { position: absolute; background: rgba(255, 255, 255, .35); }
.agr-grade i:nth-child(1) { left: 33.33%; top: 0; bottom: 0; width: 1px; } .agr-grade i:nth-child(2) { left: 66.66%; top: 0; bottom: 0; width: 1px; }
.agr-grade i:nth-child(3) { top: 33.33%; left: 0; right: 0; height: 1px; } .agr-grade i:nth-child(4) { top: 66.66%; left: 0; right: 0; height: 1px; }
.agr-quadro.arrastando .agr-grade { opacity: 1; }
.agr-dica { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px); pointer-events: none; animation: agr-dica 2.4s ease-in-out infinite; transition: opacity .2s; }
.agr-dica svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.agr-quadro.arrastando .agr-dica { opacity: 0; }
.agr-controles { display: flex; align-items: center; gap: 12px; padding: 16px 22px 4px; }
.agr-controles > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; opacity: .6; }
.agr-controles input[type=range] { flex: 1; accent-color: #ff5a1f; height: 4px; cursor: pointer; }
.agr-centralizar { height: 34px; padding: 0 14px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: inherit;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; filter: none; }
.agr-centralizar:hover { background: rgba(255, 255, 255, .1); }
.agr-pe { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; }
.agr-pe button { height: 44px; padding: 0 22px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; filter: none; transition: transform .2s, box-shadow .2s; }
.agr-cancelar { color: inherit; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; }
.agr-salvar { color: #fff; border: 1px solid #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f 60%, #f04a10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -12px #ff5a1f; }
.agr-salvar:hover { transform: translateY(-2px); }
.ag-fundos-ajustar { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: inherit;
  background: rgba(255, 90, 31, .14); border: 1px solid rgba(255, 90, 31, .4); box-shadow: none; filter: none; transition: background .2s, transform .2s; }
.ag-fundos-ajustar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ag-fundos-ajustar:hover { background: rgba(255, 90, 31, .24); transform: translateY(-1px); }

/* ---- Inicio: filtro de dia do cartao Producao ---- */
@keyframes pd-troca { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#cartao-etapas .cabeca-bloco { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pd-dia { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); transition: border-color .25s, background .25s; }
.pd-dia.outro { border-color: rgba(255, 122, 61, .35); background: rgba(255, 90, 31, .06); }
.pd-dia button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; border: 0; border-radius: 9px; cursor: pointer; color: inherit; font: inherit;
  background: none; box-shadow: none; filter: none; transition: background .2s, color .2s, transform .15s; }
.pd-dia button:active { transform: scale(.92); }
.pd-seta { width: 28px; padding: 0; opacity: .55; }
.pd-seta:hover { opacity: 1; background: rgba(255, 255, 255, .07); }
.pd-seta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pd-rotulo { padding: 0 10px; min-width: 74px; font-size: 12.5px; font-weight: 700; text-transform: capitalize; }
.pd-rotulo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; opacity: .6; }
.pd-rotulo:hover { background: rgba(255, 255, 255, .07); }
.pd-dia.outro .pd-rotulo { color: #ffb38a; }
.pd-hoje { padding: 0 10px; font-size: 11.5px; font-weight: 800; color: #ff9a6b !important; }
.pd-hoje:hover { background: rgba(255, 90, 31, .14); }
#cartao-etapas.pd-trocou .pe-corpo, #cartao-etapas.pd-trocou .pe-grupos { animation: pd-troca .35s cubic-bezier(.2, .8, .2, 1) both; }
/* o seletor de dia fica sempre no canto direito do cabecalho, do mesmo tamanho */
#cartao-etapas .cabeca-bloco { flex-wrap: nowrap !important; align-items: flex-start; }
#cartao-etapas .cabeca-bloco .titulo-bloco { flex: 1 1 auto; min-width: 0; }
#cartao-etapas .pd-dia { flex: none; margin-left: auto; }
.pd-rotulo { width: 128px; min-width: 0; text-transform: none; white-space: nowrap; }
.pd-rotulo span { overflow: hidden; text-overflow: ellipsis; }
.pd-hoje { width: 52px; }
.pd-dia:not(.outro)::after { content: ''; width: 52px; } /* reserva o lugar do "Hoje": nada pula */

/* botao Excluir no editor do post */
.post-excluir { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700;
  color: #fca5a5; filter: none; box-shadow: none; border: 1px solid rgba(248, 113, 113, .3); background: rgba(248, 113, 113, .06); transition: background .2s, border-color .2s, transform .2s, color .2s; }
.post-excluir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.post-excluir:hover { color: #fff; background: rgba(239, 68, 68, .85); border-color: #ef4444; transform: translateY(-1px); }
.post-excluir:hover svg { transform: rotate(-10deg) scale(1.1); }
.post-excluir:active { transform: scale(.96); }

/* redesenho pelo pulso: tudo aparece ja pronto, sem animacao de entrada.
   Duracao minima (e nao "none") para nada recomecar quando a classe sai. */
body.sem-animar #conteudo *, body.sem-animar #conteudo { animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0s !important; }

/* ===== Faturas: cartoes vivos, por prioridade de vencimento ===== */
:root body .fat-card.fx {
  --fx-cor: #a1a1aa;
  position: relative; overflow: hidden; isolation: isolate;
  grid-template-columns: 42px minmax(0, 1fr) 130px 130px 104px 120px;
  padding: 14px 16px 14px 18px; border-radius: 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fx-cor) 7%, transparent), transparent 40%), color-mix(in srgb, var(--texto) 2%, var(--painel));
  border: 1px solid rgba(255, 255, 255, .06); border-left: 1px solid rgba(255, 255, 255, .06);
  animation: fx-entra .45s calc(var(--n) * 45ms) cubic-bezier(.2,.8,.2,1) both;
  transition: border-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
@keyframes fx-entra { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
/* faixa de prioridade na esquerda */
:root body .fat-card.fx::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--fx-cor); box-shadow: 0 0 12px color-mix(in srgb, var(--fx-cor) 70%, transparent);
}
/* reflexo que passa no hover */
:root body .fat-card.fx::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .05), transparent);
}
:root body .fat-card.fx:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--fx-cor) 40%, transparent); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .9); }
:root body .fat-card.fx:hover::after { animation: fx-reflexo .9s ease; }
@keyframes fx-reflexo { to { left: 120%; } }
.fat-card.fx.prazo-atraso { --fx-cor: #ef4444; }
.fat-card.fx.prazo-hoje { --fx-cor: #f59e0b; }
.fat-card.fx.prazo-perto { --fx-cor: #fbbf24; }
.fat-card.fx.prazo-longe { --fx-cor: #60a5fa; }
.fat-card.fx.fechada { --fx-cor: #22c55e; }
.fat-card.fx.fechada { opacity: .78; }
.fat-card.fx.fechada:hover { opacity: 1; }
.fat-card.fx.prazo-atraso::before, .fat-card.fx.prazo-hoje::before { animation: fx-pulso 1.8s ease-in-out infinite; }
@keyframes fx-pulso { 50% { opacity: .45; } }

.fat-card.fx .fat-avatar {
  width: 42px; height: 42px; font-size: 15px; color: #fff;
  background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .25)), var(--fx-cor);
  box-shadow: 0 8px 18px -10px var(--fx-cor);
  transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.fat-card.fx:hover .fat-avatar { transform: rotate(-6deg) scale(1.06); }
.fat-card.fx .fat-info strong { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 650; }
.fat-avulso { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: #c4b5fd; background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .25); }
.fat-card.fx .fat-vence { gap: 1px; }
.fat-card.fx .fat-vence span { font-weight: 650; font-variant-numeric: tabular-nums; }
.fat-prazo { font-style: normal; font-size: 11px; font-weight: 650; color: color-mix(in srgb, var(--fx-cor) 85%, var(--texto)); }
.fat-card.fx.prazo-atraso .fat-prazo::before { content: "atrasada "; }
.fat-card.fx .fat-valor { font-size: 16.5px; font-weight: 750; }
.fat-card.fx.prazo-atraso .fat-valor { color: #fca5a5; }

@media (max-width: 760px) {
  :root body .fat-card.fx { grid-template-columns: 42px minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) { .fat-card.fx, .fat-card.fx::before { animation: none !important; } }

/* venda: campo do nome avulso */
:root body .janela-venda .venda-avulso {
  margin-top: 8px; width: 100%; height: 42px; padding: 0 13px; border-radius: 11px; font-size: 14px; color: var(--texto);
  background: rgba(167, 139, 250, .06); border: 1px solid rgba(167, 139, 250, .35); box-shadow: none; outline: none;
  animation: qd-entra .3s both;
}
:root body .janela-venda .venda-avulso:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, .15); }
:root body .janela-venda .venda-avulso[hidden] { display: none; }