/* Mingotti Advogados — folha de estilo única, sem dependências externas. */

:root {
  color-scheme: dark;
  --papel: #0a1120;
  --superficie: #111b2e;
  --superficie-2: #16223a;
  --campo: #0d1627;
  --tinta: #e8eef8;
  --tinta-suave: #93a4be;
  --tinta-fraca: #62728c;
  --linha: #22314d;
  --linha-forte: #2f4366;
  --noite: #0c1526;
  --noite-2: #16223a;
  --noite-texto: #b9c6da;
  --bronze: #e0b46a;
  --bronze-claro: rgba(224, 180, 106, .14);
  --verde: #3fdc9b;
  --verde-claro: rgba(63, 220, 155, .14);
  --ambar: #f6b94e;
  --ambar-claro: rgba(246, 185, 78, .14);
  --vermelho: #ff7b7b;
  --vermelho-claro: rgba(255, 107, 107, .14);
  --azul: #6db3ff;
  --azul-claro: rgba(90, 169, 255, .14);
  --serifa: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(90, 169, 255, .12), transparent 60%),
    radial-gradient(700px 420px at -10% 20%, rgba(63, 220, 155, .06), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 100% 36px,
    var(--papel);
  background-attachment: fixed;
  color: var(--tinta);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serifa); font-weight: 600; margin: 0; letter-spacing: -.01em; color: #fff; }
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 18px; }
h3 { font-size: 15px; font-family: var(--sans); }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--tinta-suave); }
.pequeno { font-size: 13px; }
[hidden] { display: none !important; }

/* ---------- botões e campos ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--linha-forte);
  background: var(--superficie); cursor: pointer; font-weight: 550; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.botao:hover { background: var(--superficie-2); border-color: #44598a; }
.botao:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, tr:focus-visible {
  outline: 2px solid var(--bronze); outline-offset: 2px;
}
.botao.primario { background: var(--bronze); border-color: var(--bronze); color: #1a1305; font-weight: 650; }
.botao.primario:hover { background: #ecc684; border-color: #ecc684; }
.botao.discreto { border-color: transparent; background: transparent; color: var(--tinta-suave); padding: 6px 10px; }
.botao.discreto:hover { background: var(--superficie-2); color: #fff; }
.botao.perigo { color: var(--vermelho); }
.botao[disabled] { opacity: .55; cursor: default; }

.campo { display: grid; gap: 6px; }
.campo > span { font-size: 13px; font-weight: 550; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea, .seletor {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--campo); color: var(--tinta);
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo.marcar { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.campo.marcar input { width: 18px; height: 18px; }
.campo.marcar > span { font-size: 15px; color: var(--tinta); font-weight: 400; }
.grade-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grade-campos .largo { grid-column: 1 / -1; }
.aviso { padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.aviso.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.aviso.info { background: var(--azul-claro); color: var(--azul); }
.aviso.ok { background: var(--verde-claro); color: var(--verde); }

/* ---------- telas de acesso ---------- */
.acesso {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.acesso-marca {
  background: var(--noite); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  background-image: radial-gradient(1200px 600px at -10% 110%, #24384a 0%, transparent 60%);
}
.acesso-marca h1 { font-size: 40px; max-width: 12em; }
.acesso-marca p { color: var(--noite-texto); max-width: 30em; margin-top: 16px; font-size: 16px; }
.selo { font-family: var(--serifa); font-size: 20px; letter-spacing: .01em; display: flex; align-items: center; gap: 12px; }
.selo::before { content: ""; width: 26px; height: 26px; border: 2px solid var(--bronze); border-radius: 6px; transform: rotate(45deg) scale(.8); }
.acesso-form { display: grid; place-items: center; padding: 32px; }
.acesso-form form, .acesso-form .caixa { width: min(380px, 100%); display: grid; gap: 18px; }
.acesso-form h2 { font-size: 24px; }
.qr { display: grid; justify-items: center; gap: 10px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.qr img { background: #fff; border-radius: 8px; padding: 6px; }
.qr img { width: 180px; height: 180px; }
.qr code { font-size: 13px; word-break: break-all; text-align: center; }

/* ---------- estrutura ---------- */
.moldura { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  background: rgba(12, 21, 38, .85); border-right: 1px solid var(--linha); backdrop-filter: blur(6px); color: var(--noite-texto); padding: 24px 14px; display: flex; flex-direction: column; gap: 28px;
  position: sticky; top: 0; height: 100vh;
}
.lateral .selo { color: #fff; padding: 0 10px; font-size: 18px; }
.lateral nav { display: grid; gap: 2px; }
.lateral .rotulo-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-fraca); padding: 14px 10px 6px; }
.lateral a {
  display: block; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--noite-texto);
}
.lateral a:hover { background: var(--noite-2); color: #fff; }
.lateral a[aria-current="page"] { background: var(--noite-2); color: #fff; box-shadow: inset 3px 0 0 var(--bronze); }
.lateral .pe { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--linha); display: grid; gap: 8px; }
.lateral .pe strong { color: #fff; font-weight: 550; display: block; }
.lateral .pe .botao { background: transparent; color: var(--noite-texto); border-color: var(--linha-forte); }
.lateral .pe .botao:hover { background: var(--noite-2); color: #fff; }

.conteudo { padding: 32px 40px 64px; max-width: 1280px; width: 100%; }
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.cabecalho .acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seletor { width: auto; min-width: 220px; padding: 9px 12px; }
.sobrelinha { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--bronze); font-weight: 600; margin-bottom: 6px; }

/* ---------- cartões e indicadores ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao > header { padding: 16px 20px; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cartao > .corpo { padding: 20px; }
.grade { display: grid; gap: 20px; }
.grade.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.secao { margin-top: 24px; }

.kpi { padding: 20px; display: grid; gap: 6px; }
.kpi .rotulo { font-size: 13px; color: var(--tinta-suave); }
.kpi .valor { color: #fff; font-family: var(--serifa); font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .valor.medio { font-size: 24px; }
.kpi .nota { font-size: 13px; color: var(--tinta-fraca); }
.kpi.favoravel .valor { color: var(--verde); }
.kpi.desfavoravel .valor { color: var(--vermelho); }

.modulo .corpo { display: grid; gap: 14px; }
.pares { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; }
.pares dt { color: var(--tinta-suave); }
.pares dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 550; text-align: right; }
.barras { display: grid; gap: 8px; }
.barra { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 10px; align-items: center; font-size: 13px; }
.barra .trilho { height: 6px; background: var(--superficie-2); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.barra .trilho i { display: block; height: 100%; background: var(--bronze); border-radius: 3px; }
.barra b { text-align: right; font-variant-numeric: tabular-nums; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--linha); }
.lista li:last-child { border-bottom: 0; }
.lista time { color: var(--tinta-suave); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 2px; }
.lista .ref { font-size: 13px; color: var(--tinta-suave); }
.vazio { padding: 36px 20px; text-align: center; color: var(--tinta-suave); display: grid; gap: 6px; justify-items: center; }
.vazio strong { color: #fff; font-family: var(--serifa); font-size: 17px; font-weight: 600; }

.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--superficie-2); color: var(--tinta-suave); white-space: nowrap; }
.etiqueta.verde { background: var(--verde-claro); color: var(--verde); }
.etiqueta.ambar { background: var(--ambar-claro); color: var(--ambar); }
.etiqueta.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.etiqueta.azul { background: var(--azul-claro); color: var(--azul); }

/* ---------- tabelas ---------- */
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); font-weight: 600; padding: 12px 20px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
td { padding: 14px 20px; border-bottom: 1px solid var(--linha); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover { background: var(--superficie-2); }
td.direita, th.direita { text-align: right; }
td.inteiro { white-space: nowrap; }
.busca { padding: 9px 12px; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--campo); color: var(--tinta); min-width: 240px; }

/* ---------- diálogos ---------- */
dialog { border: 0; padding: 0; border-radius: 14px; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); color: var(--tinta); background: var(--superficie); border: 1px solid var(--linha); width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog::backdrop { background: rgba(4, 8, 16, .7); backdrop-filter: blur(3px); }
dialog.gaveta { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; border-radius: 0; width: min(520px, 100vw); }
dialog[open] { display: flex; flex-direction: column; }
dialog > form, dialog > .painel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
dialog header { padding: 20px 24px; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
dialog .corpo { padding: 24px; overflow-y: auto; display: grid; gap: 16px; align-content: start; flex: 1 1 auto; min-height: 0; }
dialog footer:empty { display: none; }
dialog footer { padding: 16px 24px; border-top: 1px solid var(--linha); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.ficha { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.ficha dt { color: var(--tinta-suave); font-size: 13px; padding-top: 2px; }
.ficha dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.senha-unica { font: 600 18px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 14px; background: var(--bronze-claro); border-radius: 8px; text-align: center; user-select: all; }

/* cartões de aprovação */
.fila { display: grid; gap: 20px; margin-top: 20px; }
.aprovacao > .corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; }
.aprovacao h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); margin-bottom: 10px; }
.aprovacao .teor { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; color: var(--tinta); background: var(--campo); border: 1px solid var(--linha); border-radius: 10px; padding: 12px 14px; max-height: 60vh; overflow-y: auto; }
.aprovacao .teor.recolhido { max-height: 190px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.aprovacao .origem { display: grid; gap: 10px; align-content: start; justify-items: start; }
.aprovacao .origem .teor, .aprovacao .origem .aviso { justify-self: stretch; }
.aviso.conferir { background: var(--ambar-claro); color: #ffdca0; }
.aprovacao > footer { padding: 14px 20px; border-top: 1px solid var(--linha); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 980px) { .aprovacao > .corpo { grid-template-columns: 1fr; } }

/* ---------- painel do cliente: sala de controle ---------- */
.quadro-cliente, dialog.k {
  --k-fundo: #0a1120; --k-painel: #111b2e; --k-painel-2: #16223a; --k-linha: #22314d;
  --k-texto: #e8eef8; --k-suave: #93a4be; --k-fraco: #62728c; --k-marca: #e0b46a;
  --cor: #7c8aa0; --cor-rgb: 124, 138, 160;
  color: var(--k-texto);
}
.quadro-cliente [data-coluna="precisa_de_voce"], dialog.k [data-coluna="precisa_de_voce"] { --cor: #ff6b6b; --cor-rgb: 255, 107, 107; }
.quadro-cliente [data-coluna="em_atuacao"], dialog.k [data-coluna="em_atuacao"] { --cor: #5aa9ff; --cor-rgb: 90, 169, 255; }
.quadro-cliente [data-coluna="aguardando"], dialog.k [data-coluna="aguardando"] { --cor: #f6b94e; --cor-rgb: 246, 185, 78; }
.quadro-cliente [data-coluna="em_dia"], dialog.k [data-coluna="em_dia"] { --cor: #3fdc9b; --cor-rgb: 63, 220, 155; }
.quadro-cliente [data-coluna="concluido"], dialog.k [data-coluna="concluido"] { --cor: #7c8aa0; --cor-rgb: 124, 138, 160; }

.quadro-cliente {
  min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(90, 169, 255, .14), transparent 60%),
    radial-gradient(700px 420px at -10% 20%, rgba(63, 220, 155, .08), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 100% 36px,
    var(--k-fundo);
}
.quadro-cliente.previa { min-height: 0; border-radius: 16px; overflow: hidden; }
.quadro-cliente .sobrelinha { color: var(--k-marca); }
.quadro-cliente h1, .quadro-cliente h2 { color: #fff; }

.painel-topo { padding: 14px 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--k-linha); backdrop-filter: blur(6px); }
.painel-topo .selo { font-size: 17px; color: #fff; margin-right: auto; }
.painel-topo .selo::before { border-color: var(--k-marca); }
.painel-topo .botao { color: var(--k-suave); }
.painel-topo .botao:hover { background: var(--k-painel-2); color: #fff; }
.vivo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--k-suave); }
.vivo b { color: #3fdc9b; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.vivo i, .calmo > i { width: 8px; height: 8px; border-radius: 50%; background: #3fdc9b; box-shadow: 0 0 0 0 rgba(63, 220, 155, .6); animation: respiro 2.4s ease-out infinite; flex: none; }

.painel-capa { padding: 26px 20px 8px; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.painel-capa h1 { font-size: 28px; }
.painel-capa .frase { color: var(--k-suave); margin-top: 6px; font-size: 16px; }
.pulso { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.anel { position: relative; width: 150px; aspect-ratio: 1; }
.anel svg { width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(90, 169, 255, .25)); }
.anel circle { fill: none; stroke-width: 9; }
.anel .trilho { stroke: var(--k-painel-2); }
.anel .arco { stroke: var(--cor); stroke-linecap: round; transition: stroke-dasharray 1.1s cubic-bezier(.2, .8, .2, 1); }
.anel-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anel-centro strong { font-family: var(--serifa); font-size: 44px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.anel-centro span { font-size: 11px; color: var(--k-suave); max-width: 8em; line-height: 1.25; margin-top: 4px; }
.legenda { display: grid; gap: 4px; }
.legenda button { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: transparent; border: 0; color: var(--k-texto); padding: 6px 8px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; }
.legenda button:hover { background: var(--k-painel-2); }
.legenda i, .coluna > header > i, .painel-abas i, dialog .onde > i { width: 9px; height: 9px; border-radius: 50%; background: var(--cor); box-shadow: 0 0 10px rgba(var(--cor-rgb), .8); flex: none; display: inline-block; }
.legenda b { font-variant-numeric: tabular-nums; color: var(--cor); font-size: 15px; }

.agora h2 { font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #ffb3b3; }
.agora h2 b { background: rgba(255, 107, 107, .18); color: #ff8e8e; border-radius: 999px; padding: 1px 9px; font-size: 12px; }
.faixa { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 20px 16px; margin: -14px -20px 0; scroll-padding-left: 20px; scrollbar-width: none; }
.faixa::-webkit-scrollbar { display: none; }
.faixa .cartao-k { flex: 0 0 min(300px, 82%); scroll-snap-align: start; }
.calmo { display: flex; gap: 14px; align-items: center; background: rgba(63, 220, 155, .08); border: 1px solid rgba(63, 220, 155, .25); border-radius: 14px; padding: 16px 18px; }
.calmo > i { width: 12px; height: 12px; }
.calmo strong { display: block; color: #fff; }
.calmo span { font-size: 13.5px; color: var(--k-suave); }

.farol { width: 10px; height: 10px; border-radius: 50%; background: #ff6b6b; flex: none; display: inline-block; animation: pulso 1.6s ease-out infinite; }
[data-urgencia="2"] .farol { background: #f6b94e; animation-name: pulso-ambar; animation-duration: 2.4s; }

.filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 14px 20px 6px; }
.filtros::-webkit-scrollbar { display: none; }
.quadro-cliente .filtro { border: 1px solid var(--k-linha); background: var(--k-painel); color: var(--k-suave); border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; font-size: 14px; transition: background .15s, color .15s; }
.quadro-cliente .filtro[aria-pressed="true"] { background: var(--k-marca); border-color: var(--k-marca); color: #1a1305; font-weight: 600; }

.painel-abas { display: none; }
.quadro { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 10px 20px 24px; align-items: start; flex: 1; }
.previa .quadro { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.coluna { background: linear-gradient(rgba(var(--cor-rgb), .07), transparent 140px), var(--k-painel); border: 1px solid var(--k-linha); border-top: 2px solid var(--cor); border-radius: 14px; padding: 14px 12px 12px; min-width: 0; }
.coluna.destaque { animation: destaque 1.1s ease-out; }
.coluna > header { display: flex; align-items: center; gap: 8px; }
.coluna h2 { font-family: var(--sans); font-size: 14.5px; font-weight: 650; flex: 1; letter-spacing: 0; }
.coluna > header b { background: rgba(var(--cor-rgb), .16); color: var(--cor); border-radius: 999px; min-width: 26px; padding: 1px 8px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.coluna .descricao { font-size: 12.5px; color: var(--k-fraco); margin: 4px 0 12px; line-height: 1.4; }
.pilha { display: grid; gap: 10px; }
.coluna-vazia { border: 1px dashed var(--k-linha); border-radius: 10px; padding: 18px 12px; text-align: center; color: var(--k-fraco); font-size: 13px; }

.cartao-k {
  display: grid; gap: 5px; align-content: start; text-align: left; width: 100%; color: var(--k-texto);
  background: var(--k-painel-2); border: 1px solid var(--k-linha); border-left: 3px solid var(--cor);
  border-radius: 12px; padding: 12px 14px; cursor: pointer;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s, border-color .16s;
  animation: entrar .45s cubic-bezier(.2, .8, .2, 1) backwards;
}
.cartao-k:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .35), 0 0 0 1px rgba(var(--cor-rgb), .5); }
.cartao-k:active { transform: scale(.97); }
.cartao-k:focus-visible { outline: 2px solid var(--k-marca); outline-offset: 2px; }
.cartao-k[data-urgencia="3"] { animation: entrar .45s cubic-bezier(.2, .8, .2, 1) backwards, halo 1.8s ease-out infinite; border-color: rgba(255, 107, 107, .55); }
.cartao-k[data-urgencia="2"] { animation: entrar .45s cubic-bezier(.2, .8, .2, 1) backwards, halo-suave 3s ease-out infinite; }
.cartao-k .topo { display: flex; align-items: center; gap: 8px; }
.cartao-k .tipo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--k-marca); font-weight: 650; margin-right: auto; }
.cartao-k .novidade { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #9fd0ff; border: 1px solid rgba(90, 169, 255, .5); border-radius: 999px; padding: 0 7px; }
.cartao-k strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; color: #fff; }
.cartao-k .sub { font-size: 12.5px; color: var(--k-suave); overflow-wrap: anywhere; }
.cartao-k .resumo { font-size: 13px; color: var(--k-suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-k .alerta { font-size: 12.5px; font-weight: 600; color: #ffc9c9; background: rgba(255, 107, 107, .14); border-radius: 6px; padding: 4px 8px; margin-top: 2px; }
.cartao-k .etiqueta { justify-self: start; margin-top: 4px; background: rgba(var(--cor-rgb), .16); color: var(--cor); }
.cartao-k.foco { background: linear-gradient(135deg, rgba(var(--cor-rgb), .16), transparent 70%), var(--k-painel-2); padding: 14px 16px; }

.cartao-k .rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.cartao-k .rodape .etiqueta { margin-top: 0; }
.cartao-k .valor { font-size: 13px; font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
/* "espiada": resumo que se abre ao passar o mouse (em telas de toque, o toque abre a folha completa) */
.cartao-k .espiada { display: grid; gap: 5px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .28s ease, opacity .2s ease, margin .2s ease, padding .2s ease; border-top: 0 solid var(--k-linha); }
.cartao-k .espiada > span { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: 12.5px; color: var(--k-texto); line-height: 1.35; }
.cartao-k .espiada em { font-style: normal; color: var(--k-fraco); }
.cartao-k .espiada .dica { display: block; color: var(--k-marca); font-size: 11.5px; margin-top: 2px; }
@media (hover: hover) {
  .cartao-k:hover .espiada, .cartao-k:focus-visible .espiada { max-height: 260px; opacity: 1; margin-top: 8px; padding-top: 10px; border-top-width: 1px; }
}

.exposicao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.exposicao:empty { display: none; }
.quanto { background: var(--k-painel); border: 1px solid var(--k-linha); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; }
.quanto span { font-size: 12.5px; color: var(--k-suave); }
.quanto strong { font-family: var(--serifa); font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.15; }
.quanto small { font-size: 12px; color: var(--k-fraco); }
.quanto.favor { border-left: 3px solid #3fdc9b; }
.quanto.contra { border-left: 3px solid #ff6b6b; }
.exposicao p { grid-column: 1 / -1; font-size: 12px; color: var(--k-fraco); }

.fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fato { background: var(--k-painel-2); border: 1px solid var(--k-linha); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; align-content: start; }
.fato span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--k-suave); }
.fato strong { font-size: 15px; color: #fff; overflow-wrap: anywhere; font-weight: 600; }
.fato small { font-size: 12px; color: var(--k-fraco); line-height: 1.35; }
dialog .texto.destaque { font-size: 16px; line-height: 1.55; }
dialog .proximo { background: rgba(224, 180, 106, .1); border: 1px solid rgba(224, 180, 106, .3); border-radius: 10px; padding: 12px 14px; }
dialog .proximo h3 { color: var(--k-marca); }
dialog .explicacao { font-size: 13.5px; color: var(--k-suave); margin-top: 10px; line-height: 1.5; }
@media (max-width: 520px) { .fatos { grid-template-columns: 1fr; } }

/* imagem da marca: sempre sobre fundo branco, como no certificado */
.logo { background: #fff; border-radius: 9px; padding: 8px 12px; display: grid; place-items: center; height: 96px; margin: 2px 0 4px; }
.logo img { max-width: 100%; max-height: 80px; object-fit: contain; display: block; }
.logo.grande { height: 190px; padding: 16px; }
.logo.grande img { max-height: 158px; }
dialog.k .logo.grande { border: 0; }
.trilha { display: grid; gap: 5px; margin-top: 6px; }
.trilha .pontos { display: flex; gap: 4px; }
.trilha .pontos i { height: 4px; flex: 1; border-radius: 2px; background: var(--k-linha); }
.trilha .pontos i.feita { background: rgba(var(--cor-rgb), .55); }
.trilha .pontos i.atual { background: var(--cor); box-shadow: 0 0 8px rgba(var(--cor-rgb), .9); animation: cintilar 2s ease-in-out infinite; }
.trilha span { font-size: 12px; color: var(--k-suave); }
.trilha em { font-style: normal; color: var(--k-fraco); }
.painel-pe { padding: 0 20px 28px; color: var(--k-fraco); font-size: 13px; }

/* folha de detalhes do cartão */
dialog.k { background: var(--k-painel); border: 1px solid var(--k-linha); }
dialog.k::backdrop { background: rgba(4, 8, 16, .7); backdrop-filter: blur(3px); }
dialog.k[open] { animation: subir .28s cubic-bezier(.2, .8, .2, 1); }
dialog.k header, dialog.k footer { border-color: var(--k-linha); }
dialog.k h2 { color: #fff; }
dialog.k .sobrelinha { color: var(--k-marca); }
dialog.k .suave, dialog.k .ficha dt { color: var(--k-suave); }
dialog.k .botao.discreto { color: var(--k-suave); }
dialog.k .botao.discreto:hover { background: var(--k-painel-2); color: #fff; }
dialog .onde { display: flex; gap: 10px; align-items: flex-start; background: rgba(var(--cor-rgb), .12); border: 1px solid rgba(var(--cor-rgb), .3); border-radius: 10px; padding: 12px 14px; }
dialog .onde > i { margin-top: 6px; }
dialog .onde strong { display: block; color: var(--cor); }
dialog .onde span { font-size: 13px; color: var(--k-suave); }
dialog section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--k-suave); margin-bottom: 8px; }
dialog .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
dialog.k .aviso.alerta { background: rgba(255, 107, 107, .14); color: #ffc9c9; }
.trilha-completa { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.trilha-completa li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: center; padding: 6px 0; color: var(--k-fraco); position: relative; }
.trilha-completa li i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--k-linha); background: var(--k-painel); z-index: 1; }
.trilha-completa li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 50%; height: 100%; width: 2px; background: var(--k-linha); transform: translateX(-50%); }
.trilha-completa li.feita { color: var(--k-suave); }
.trilha-completa li.feita i { background: #3fdc9b; border-color: #3fdc9b; }
.trilha-completa li.feita::after { background: #3fdc9b; }
.trilha-completa li.atual { color: #fff; font-weight: 600; }
.trilha-completa li.atual i { background: var(--k-marca); border-color: var(--k-marca); box-shadow: 0 0 0 0 rgba(224, 180, 106, .6); animation: respiro-marca 2s ease-out infinite; }

.aviso.alerta { background: var(--vermelho-claro); color: #ffc9c9; font-weight: 600; }
.linha-link { display: flex; gap: 8px; }
.linha-link input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.acesso-simples { min-height: 100vh; display: grid; place-content: center; gap: 14px; padding: 32px; text-align: center; justify-items: center; }
.acesso-simples p { color: var(--tinta-suave); max-width: 28em; }
.acesso-simples .selo { color: #fff; }

@keyframes respiro { 0% { box-shadow: 0 0 0 0 rgba(63, 220, 155, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(63, 220, 155, 0); } }
@keyframes respiro-marca { 0% { box-shadow: 0 0 0 0 rgba(224, 180, 106, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(224, 180, 106, 0); } }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, .75); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); } }
@keyframes pulso-ambar { 0% { box-shadow: 0 0 0 0 rgba(246, 185, 78, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(246, 185, 78, 0); } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, .55), 0 0 22px rgba(255, 107, 107, .28); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 107, 107, 0), 0 0 22px rgba(255, 107, 107, .12); } }
@keyframes halo-suave { 0% { box-shadow: 0 0 0 0 rgba(var(--cor-rgb), .4); } 70%, 100% { box-shadow: 0 0 0 9px rgba(var(--cor-rgb), 0); } }
@keyframes cintilar { 50% { opacity: .55; } }
@keyframes entrar { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes subir { from { opacity: 0; transform: translateY(28px); } }
@keyframes destaque { 0% { box-shadow: 0 0 0 0 rgba(var(--cor-rgb), .7); } 100% { box-shadow: 0 0 0 16px rgba(var(--cor-rgb), 0); } }
@media (prefers-reduced-motion: reduce) {
  .quadro-cliente *, dialog.k, dialog.k * { animation: none !important; transition: none !important; }
}

/* Tela larga (computador, TV): identidade, anel e atenção lado a lado. */
@media (min-width: 1000px) {
  .painel-capa { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) minmax(0, 1.25fr); align-items: center; padding: 30px 28px 10px; gap: 32px; }
  .painel-capa h1 { font-size: 36px; }
  .faixa { margin: -14px 0 0; padding: 14px 4px 16px; scroll-padding-left: 4px; }
  .filtros, .quadro, .painel-topo, .painel-pe { padding-left: 28px; padding-right: 28px; }
  .previa .painel-capa { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  .previa .agora { grid-column: 1 / -1; }
  .exposicao { grid-column: 1; grid-row: 2; align-self: start; }
  .painel-capa .identidade { align-self: end; }
  .painel-capa .pulso, .painel-capa .agora { grid-row: 1 / span 2; }
  .previa .exposicao { grid-row: auto; }
  .previa .painel-capa .pulso { grid-row: auto; }
}
@media (max-width: 1250px) and (min-width: 761px) {
  .quadro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Celular: uma coluna por vez, deslizando para o lado; as abas mostram onde se está. */
@media (max-width: 760px) {
  .vivo span { display: none; }
  .pulso { grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
  .anel { width: 132px; }
  .anel-centro strong { font-size: 38px; }
  .legenda button { font-size: 13.5px; padding: 5px 6px; gap: 8px; }
  .painel-abas {
    display: flex; gap: 8px; overflow-x: auto; padding: 10px 20px; position: sticky; top: 0; z-index: 2;
    background: rgba(10, 17, 32, .92); backdrop-filter: blur(8px); scrollbar-width: none; border-bottom: 1px solid var(--k-linha);
  }
  .painel-abas::-webkit-scrollbar { display: none; }
  .painel-abas button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid rgba(var(--cor-rgb), .35); background: rgba(var(--cor-rgb), .1); color: var(--k-texto); border-radius: 999px; padding: 7px 12px; font-size: 13.5px; cursor: pointer; }
  .painel-abas b { font-variant-numeric: tabular-nums; color: var(--cor); }
  .quadro {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 14px 20px 24px;
    scroll-padding-left: 20px; scrollbar-width: none; align-items: flex-start;
  }
  .quadro::-webkit-scrollbar { display: none; }
  .coluna { flex: 0 0 86%; scroll-snap-align: start; }
  dialog.folha { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 88vh; border-radius: 18px 18px 0 0; }
}

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
  .grade.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade.tres { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .acesso { grid-template-columns: 1fr; }
  .acesso-marca { padding: 28px 24px; gap: 24px; }
  .acesso-marca h1 { font-size: 28px; }
  .moldura { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; padding: 14px; gap: 12px; }
  .lateral nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .lateral .rotulo-grupo { display: none; }
  .lateral .pe { margin-top: 0; grid-template-columns: 1fr auto; align-items: center; }
  .conteudo { padding: 20px 16px 48px; }
  .grade.duas, .grade.kpis { grid-template-columns: 1fr; }
  .grade-campos { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr; gap: 2px 0; }
  .ficha dd { margin-bottom: 10px; }
  .lista li { grid-template-columns: 1fr; gap: 2px; }
}