/* ═══════════════════════════════════════════════════════════
   WOLVES HUB — visual novo (11/2026)
   ───────────────────────────────────────────────────────────
   Camada por cima do styles.css e do desempenho.css. Não apaga
   nada do que existe: troca os tokens do tema escuro e acerta a
   forma dos componentes. Tirar este arquivo do index.html devolve
   o visual antigo inteiro.

   A direção, aprovada pelo JP no canvas: fundo quase preto, painéis
   com borda fina, azul da empresa como neon só nos acentos (traço
   do item ativo, linha no topo do painel, luz que segue o mouse),
   e movimento na entrada das telas. Sem mancha de cor parada no
   fundo e sem borda girando.
   ═══════════════════════════════════════════════════════════ */

/* ── forma: vale nos dois temas ───────────────────────────── */
:root {
  --r-xs: 6px; --r-sm: 8px; --r-md: 14px; --r-lg: 14px; --r-xl: 18px;
  --t-entra: 500ms cubic-bezier(.2,.7,.2,1);
  --neon: #3D78FF;
  --neon-claro: #5B8DFF;
}

/* ── tema escuro: os tokens ───────────────────────────────── */
[data-tema="escuro"] {
  --fundo:        #07090D;
  --fundo-alt:    #090C11;
  --superficie:   #0C1017;
  --superficie-2: #121823;
  --superficie-3: #182030;
  --borda:        rgba(255,255,255,.10);
  --borda-suave:  rgba(255,255,255,.07);

  --texto:      #E6EAF0;
  --texto-dim:  #C3CBD6;
  --texto-mudo: #8F9BAB;   /* 6.6:1 sobre o painel */

  --primaria:       #3D78FF;
  --primaria-forte: #5B8DFF;
  --primaria-fraca: rgba(61,120,255,.16);
  --acento:         #5B8DFF;
  --acento-fraco:   rgba(61,120,255,.13);
  --alerta:         #F4718A;
  --alerta-fraco:   rgba(240,80,110,.13);
  --ok:             #3CCB8E;
  --ok-fraco:       rgba(60,203,142,.13);
  --atencao:        #E5A93B;
  --atencao-fraco:  rgba(229,169,59,.13);
  --atencao-marca:  #E5A93B;

  --sobre-primaria: #FFFFFF;
  --sombra-1: 0 1px 2px rgba(0,0,0,.5);
  --sombra-2: 0 14px 34px -18px rgba(0,0,0,.9);
  --sombra-3: 0 28px 70px -24px rgba(0,0,0,.95);

  --grade:     rgba(255,255,255,.06);
  --serie-1:   #3D78FF;
  --serie-ref: #8892A0;

  /* Progresso do ciclo: o restante é a linha neon; a projeção, o azul claro tracejado */
  --ciclo-restante:      #3D78FF;
  --ciclo-diretriz:      #8892A0;
  --ciclo-projecao:      #8FB4FF;
  --ciclo-escopo:        #E5A93B;
  --ciclo-escopo-fundo:  rgba(229,169,59,.12);
  --ciclo-ok:            #3CCB8E;
  --ciclo-ok-fundo:      rgba(60,203,142,.07);
  --ciclo-ok-borda:      rgba(60,203,142,.30);
  --ciclo-ok-texto:      #7BE0B4;
  --ciclo-restante-num:  #F0C36B;
  --ciclo-projecao-num:  #8FB4FF;
  --ciclo-alerta:        #F7A0B1;
  --ciclo-alerta-linha:  #F0506E;
  --ciclo-alerta-fundo:  rgba(240,80,110,.08);
  --ciclo-alerta-borda:  rgba(240,80,110,.35);
  --ciclo-alerta-texto:  #F7A0B1;
  --ciclo-risco-fundo:   rgba(240,80,110,.12);
  --ciclo-risco-texto:   #F7A0B1;
  --ciclo-atencao-fundo: rgba(229,169,59,.12);
  --ciclo-atencao-borda: #E5A93B;
  --ciclo-atencao-texto: #F0C36B;
  --ciclo-neutro:        #8F9BAB;
  --ciclo-barra:         #3D78FF;

  /* Meta do time: célula tingida em vez de bloco chapado */
  --meta-bateu:         rgba(60,203,142,.16);
  --meta-bateu-txt:     #7BE0B4;
  --meta-meio:          rgba(229,169,59,.15);
  --meta-meio-txt:      #F0C36B;
  --meta-baixo:         rgba(240,80,110,.15);
  --meta-baixo-txt:     #F7A0B1;
  --meta-zero:          rgba(255,255,255,.04);
  --meta-zero-txt:      #9BA6B5;
  --meta-hoje-fundo:    rgba(61,120,255,.08);
  --meta-hoje-borda:    #5B8DFF;
  --meta-hoje-txt:      #A9C5FF;
  --meta-ok-borda:      rgba(60,203,142,.40);
  --meta-ok-txt:        #7BE0B4;
  --meta-atencao-borda: rgba(229,169,59,.55);
  --meta-atencao-txt:   #F0C36B;
  --meta-critico-borda: rgba(240,80,110,.60);
  --meta-critico-txt:   #F7A0B1;
  --meta-concluido:     #5B8DFF;

  --ord-1: #2B62D8; --ord-2: #3D78FF; --ord-3: #7FA6FF; --ord-4: #B9D0FF;
  --trilho: rgba(255,255,255,.08);
  --vidro:  rgba(7,9,13,.80);

  scrollbar-color: rgba(255,255,255,.16) transparent;
}

/* sem mancha de cor parada no fundo */
[data-tema="escuro"] body { background-image: none; }
[data-tema="escuro"] ::selection { background: rgba(61,120,255,.45); color: #FFFFFF; }
:focus-visible { outline-color: var(--neon-claro); }

/* ── tipografia: peso 600, sem o 800/900 ──────────────────── */
h1, h2, h3, .titulo, .marca__texto strong, .num { font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 1.25rem + 1vw, 1.95rem); font-weight: 600; line-height: 1.15; }
h2 { font-weight: 600; }
h3 { font-weight: 600; }
.sobretitulo { font-family: var(--fonte-texto); font-weight: 500; letter-spacing: .08em; color: var(--texto-mudo); }
.ficha__titulo, .ciclo__h, .pessoal__nome { font-weight: 600; }
.kpi__val, .pz-kpi__num, .destaque__num, .meta-hoje__num .kpi__val {
  font-family: var(--fonte-titulo); font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ── lateral ──────────────────────────────────────────────── */
[data-tema="escuro"] .lateral { background: #090C11; border-right-color: rgba(255,255,255,.06); }
[data-tema="escuro"] .marca__logo {
  color: #FFFFFF; border: 0; border-radius: 9px;
  background: linear-gradient(160deg, #3D78FF, #054ADA);
  box-shadow: 0 0 18px -2px rgba(61,120,255,.7), inset 0 1px 0 rgba(255,255,255,.3);
}
.nav { gap: 1px; }
.nav__grupo { font-size: .69rem; font-weight: 500; letter-spacing: .1em; padding: 18px 12px 6px; }
.nav__item { border-radius: 8px; }
.nav__item .msi { opacity: .8; transition: opacity var(--t-rapida), color var(--t-rapida); }
.nav__item:hover .msi { opacity: 1; }
.nav__item[aria-current="page"] {
  color: var(--texto); font-weight: 500;
  background: rgba(255,255,255,.06);
  border-right: 0; border-radius: 8px;
}
[data-tema="claro"] .nav__item[aria-current="page"] { background: var(--primaria-fraca); }
.nav__item[aria-current="page"] .msi { color: var(--neon-claro); opacity: 1; }
/* o traço neon do item ativo: nasce ao entrar na tela */
.nav__item[aria-current="page"]::before {
  content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: var(--neon); box-shadow: 0 0 12px 1px rgba(61,120,255,.9);
  animation: tema-nasce .5s cubic-bezier(.2,.7,.2,1) .1s both;
}
@keyframes tema-nasce { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.eu { border-radius: 8px; }

/* ── topo ─────────────────────────────────────────────────── */
[data-tema="escuro"] .topo { border-bottom-color: rgba(255,255,255,.06); }
.busca { border-radius: 8px; }
[data-tema="escuro"] .busca { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.09); }
[data-tema="escuro"] .busca:focus-within { border-color: var(--neon-claro); box-shadow: none; background: rgba(61,120,255,.06); }
.icone-btn { border-radius: 8px; }

/* ── painéis ──────────────────────────────────────────────── *
   Uma receita só pra tudo o que é caixa: borda fina, um fio de luz
   por dentro no topo e sombra funda. A luz azul que segue o mouse
   vem de --mx/--my, que o tema.js escreve no painel sob o cursor. */
[data-tema="escuro"] .ficha,
[data-tema="escuro"] .cartao,
[data-tema="escuro"] .kpi,
[data-tema="escuro"] .ciclo__cartao,
[data-tema="escuro"] .pz-kpi,
[data-tema="escuro"] .pz-matriz,
[data-tema="escuro"] .pessoa-tv2,
[data-tema="escuro"] .modal {
  border-color: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 48px -32px rgba(0,0,0,.9);
}
.ficha, .cartao, .kpi, .ciclo__cartao, .pz-kpi, .pz-matriz, .pessoa-tv2 { border-radius: 14px; }
[data-tema="escuro"] .ficha:hover,
[data-tema="escuro"] .cartao:hover,
[data-tema="escuro"] .kpi:hover,
[data-tema="escuro"] .ciclo__cartao:hover,
[data-tema="escuro"] .pz-kpi:hover,
[data-tema="escuro"] .pz-matriz:hover,
[data-tema="escuro"] .pessoa-tv2:hover {
  background-image: radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(61,120,255,.09), transparent 62%);
}
/* o fio no topo: branco e discreto em todo painel, azul neon no primeiro de cada coluna */
.ficha::before { inset: -1px 24px auto 24px; border-radius: 0; }
[data-tema="escuro"] .tela .ficha:first-of-type::before,
[data-tema="escuro"] .tela > .cartao:first-of-type::before {
  background: linear-gradient(90deg, transparent, rgba(91,141,255,.75), transparent);
  animation: tema-acende 1.2s ease .2s both;
}
@keyframes tema-acende { from { opacity: 0; } to { opacity: 1; } }
/* aviso no painel: a borda inteira tinge, em vez da barra grossa à esquerda */
.ficha--atencao { border-left-width: 1px; border-color: color-mix(in srgb, var(--alerta) 42%, transparent) !important; }
.ficha--info    { border-left-width: 1px; border-color: color-mix(in srgb, var(--neon-claro) 38%, transparent) !important; }
.cartao--interativo:hover { border-color: color-mix(in srgb, var(--neon-claro) 45%, transparent); }
[data-tema="escuro"] .destaque {
  border-radius: 12px; border-color: rgba(91,141,255,.28); background: rgba(61,120,255,.07);
  box-shadow: 0 0 24px -12px rgba(61,120,255,.9);
}

/* ── botões, campos, abas ─────────────────────────────────── */
.btn { border-radius: 8px; padding: 9px 16px; font-weight: 500; }
[data-tema="escuro"] .btn--primario {
  background: #2B63F0; color: #FFFFFF; border-color: #4B80FF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
[data-tema="escuro"] .btn--primario:hover {
  background: #3D78FF; border-color: #6C98FF;
  box-shadow: 0 0 22px -4px rgba(61,120,255,.9), inset 0 1px 0 rgba(255,255,255,.22);
}
[data-tema="escuro"] .btn--fantasma,
[data-tema="escuro"] .btn--contorno {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: var(--texto);
}
[data-tema="escuro"] .btn--fantasma:hover,
[data-tema="escuro"] .btn--contorno:hover {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #FFFFFF;
}
.entrada, textarea.entrada, select.entrada, .inline-acao .entrada { border-radius: 8px; }
.inline-acao .btn, .btn--grande { border-radius: 8px; }
[data-tema="escuro"] .entrada {
  background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.09); color-scheme: dark;
  transition: border-color .18s ease, background .18s ease;
}
[data-tema="escuro"] .entrada:hover { border-color: rgba(255,255,255,.16); }
[data-tema="escuro"] .entrada:focus { border-color: var(--neon-claro); background: rgba(61,120,255,.06); box-shadow: none; }

.abas { border-radius: 11px; padding: 4px; gap: 4px; }
.aba { border-radius: 8px; padding: 8px 14px; }
[data-tema="escuro"] .abas { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
[data-tema="escuro"] .aba:hover { background: rgba(255,255,255,.05); color: #FFFFFF; }
[data-tema="escuro"] .aba[aria-selected="true"],
[data-tema="escuro"] .pz-vista[aria-pressed="true"] {
  color: #FFFFFF; background: rgba(61,120,255,.18); font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(91,141,255,.55), 0 0 18px -6px rgba(61,120,255,.95);
}
.pz-vista { border-radius: 8px; }

/* avatar neutro: quem carrega a cor é o estado, não a foto */
[data-tema="escuro"] .avatar {
  background: rgba(255,255,255,.07); color: #C3CBD6;
  border: 1px solid rgba(255,255,255,.10); font-weight: 600;
}

/* ── linhas: o filete neon no hover ───────────────────────── */
.ficha__item, .perfis__linha, .pnl__linha, .mtz__linha, .plc__item, .oco__item, .cls__item, .cnc__linha, .aco__serie, .foc__pessoa, .ent__pessoa { position: relative; }
.ficha__item::after, .pnl__linha::after, .mtz__linha::after, .plc__item::after, .oco__item::after, .cls__item::after, .cnc__linha::after, .aco__serie::after {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: var(--neon); box-shadow: 0 0 12px 1px rgba(61,120,255,.9);
  transform: scaleY(0); transition: transform .24s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.ficha__item:hover::after, .pnl__linha:hover::after, .mtz__linha:hover::after, .plc__item:hover::after, .oco__item:hover::after, .cls__item:hover::after, .cnc__linha:hover::after, .aco__serie:hover::after { transform: scaleY(1); }
.tabela-ficha tbody tr:hover td:first-child,
table.dados tbody tr:hover td:first-child,
.mt2 tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--neon); }

/* ── entrada em cascata ───────────────────────────────────── *
   `backwards`, e não `both`: depois que a animação acaba o elemento
   volta pro próprio estilo, senão o hover que mexe em transform
   deixava de funcionar. */
@keyframes tema-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tela .ficha, .tela .cartao, .tela .kpi, .tela .pz-kpi, .tela .ciclo__cartao, .tela .pessoa-tv2 {
  animation: tema-entra var(--t-entra) backwards;
}
.tela .ficha__item, .tela .tabela-ficha tbody tr, .tela table.dados tbody tr, .tela .mt2 tbody tr,
.tela .perfis__linha, .tela .pnl__linha, .tela .mtz__linha, .tela .plc__item, .tela .oco__item, .tela .cls__item, .tela .cnc__linha, .tela .aco__serie {
  animation: tema-entra var(--t-entra) backwards;
}
.tela :is(.ficha, .cartao, .kpi, .pz-kpi, .ciclo__cartao, .pessoa-tv2, .ficha__item, tr, .perfis__linha, .pnl__linha, .mtz__linha, .plc__item, .oco__item, .cls__item, .cnc__linha, .aco__serie):nth-child(1) { animation-delay: .06s; }
.tela :is(.ficha, .cartao, .kpi, .pz-kpi, .ciclo__cartao, .pessoa-tv2, .ficha__item, tr, .perfis__linha, .pnl__linha, .mtz__linha, .plc__item, .oco__item, .cls__item, .cnc__linha, .aco__serie):nth-child(2) { animation-delay: .11s; }
.tela :is(.ficha, .cartao, .kpi, .pz-kpi, .ciclo__cartao, .pessoa-tv2, .ficha__item, tr, .perfis__linha, .pnl__linha, .mtz__linha, .plc__item, .oco__item, .cls__item, .cnc__linha, .aco__serie):nth-child(3) { animation-delay: .16s; }
.tela :is(.ficha, .cartao, .kpi, .pz-kpi, .ciclo__cartao, .pessoa-tv2, .ficha__item, tr, .perfis__linha, .pnl__linha, .mtz__linha, .plc__item, .oco__item, .cls__item, .cnc__linha, .aco__serie):nth-child(4) { animation-delay: .21s; }
.tela :is(.ficha, .cartao, .kpi, .pz-kpi, .ciclo__cartao, .pessoa-tv2, .ficha__item, tr, .perfis__linha, .pnl__linha, .mtz__linha, .plc__item, .oco__item, .cls__item, .cnc__linha, .aco__serie):nth-child(5) { animation-delay: .26s; }
.tela :is(.ficha, .cartao, .kpi, .pz-kpi, .ciclo__cartao, .pessoa-tv2, .ficha__item, tr, .perfis__linha, .pnl__linha, .mtz__linha, .plc__item, .oco__item, .cls__item, .cnc__linha, .aco__serie):nth-child(6) { animation-delay: .31s; }
.tela :is(.ficha, .cartao, .kpi, .pz-kpi, .ciclo__cartao, .pessoa-tv2, .ficha__item, tr, .perfis__linha, .pnl__linha, .mtz__linha, .plc__item, .oco__item, .cls__item, .cnc__linha, .aco__serie):nth-child(7) { animation-delay: .36s; }
.tela :is(.ficha, .cartao, .kpi, .pz-kpi, .ciclo__cartao, .pessoa-tv2, .ficha__item, tr, .perfis__linha, .pnl__linha, .mtz__linha, .plc__item, .oco__item, .cls__item, .cnc__linha, .aco__serie):nth-child(n+8) { animation-delay: .41s; }

/* o que abre e fecha: com movimento, sem script */
html { interpolate-size: allow-keywords; }
details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .34s cubic-bezier(.2,.7,.2,1), content-visibility .34s allow-discrete;
}
details[open]::details-content { block-size: auto; }

/* barras que enchem ao entrar */
@keyframes tema-cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tela .kpi__barra > span, .tela .ritmo__fill, .tela .meta-hoje__trilho > span, .tela .ent__barra > span, .tela .pz-fill {
  transform-origin: left; animation: tema-cresce .9s cubic-bezier(.2,.7,.2,1) .25s both;
}

@media (prefers-reduced-motion: reduce) {
  .tela *, .nav__item[aria-current="page"]::before { animation: none !important; transition: none !important; }
}

/* ═══ igual ao canvas: o que vale em todas as telas ═══════════ */
/* título de painel: Exo 2 600 de 16px, sem ícone na frente (o "!" de atenção fica) */
.ficha__titulo > .ico, .ficha__titulo > .msi, .cartao__titulo > .ico, .cartao__titulo > .msi { display: none; }
.ficha__titulo, .cartao__titulo h3, .ciclo__cartao-topo h3, .secao__topo h2 {
  font-family: var(--fonte-titulo); font-size: 1rem; font-weight: 600; letter-spacing: 0;
}
.secao__topo { align-items: baseline; margin-bottom: var(--e3); }
.secao__topo .subtitulo { font-size: .78rem; color: var(--texto-mudo); max-width: 62ch; }
.secao { margin-top: 24px; }
.cabecalho-tela { margin-bottom: 24px; gap: 6px; }
.cabecalho-tela .subtitulo, .cab-dia__sub { font-size: .875rem; color: var(--texto-mudo); max-width: 70ch; }
.cartao { padding: 18px 20px 20px; }

/* ═══ Indicadores ═════════════════════════════════════════════ */
/* abas e a linha de leitura do ClickUp na mesma faixa */
.ind-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; }
.ind-topo .abas { margin-bottom: 0; }
.ind-topo .frescor { margin: 0; gap: 10px 14px; font-size: 12.5px; flex: 0 1 auto; justify-content: flex-end; }
.frescor__ponto { position: relative; box-shadow: none; }
.frescor__ponto::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ciclo-ok);
  animation: tema-pulso 2s ease-out infinite;
}
@keyframes tema-pulso { from { opacity: .8; transform: scale(.5); } to { opacity: 0; transform: scale(1.7); } }
.frescor__btn { border-radius: 8px; }
[data-tema="escuro"] .frescor__btn { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--texto); }
[data-tema="escuro"] .frescor__btn:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.frescor__btn .ico { display: none; }

/* recorte Geral · HID · ELE: fichas soltas que acendem */
.abas--mini { background: none !important; border: 0; padding: 0; gap: 6px; }
.abas--mini .aba { border-radius: 999px; padding: 7px 14px; border: 1px solid var(--borda-suave); background: rgba(255,255,255,.03); }
[data-tema="escuro"] .abas--mini .aba[aria-selected="true"] {
  border-color: var(--neon-claro); background: rgba(61,120,255,.16);
  box-shadow: 0 0 16px -4px rgba(61,120,255,.9);
}
.ciclo, .ciclo__corpo, .ciclo__lateral, .ciclo__principal { gap: 24px; }
.ciclo__sobre { letter-spacing: .08em; font-weight: 500; }
.ciclo__h { font-size: 1.5rem; }

/* os quatro números num painel só, com divisória */
.kpis, .pz-kpis {
  position: relative; gap: 0; overflow: hidden; border-radius: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background-color: var(--superficie); border: 1px solid var(--borda-suave);
}
[data-tema="escuro"] .kpis, [data-tema="escuro"] .pz-kpis {
  border-color: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 48px -32px rgba(0,0,0,.9);
}
[data-tema="escuro"] .kpis:hover, [data-tema="escuro"] .pz-kpis:hover {
  background-image: radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(61,120,255,.09), transparent 62%);
}
[data-tema="escuro"] .kpis::before, [data-tema="escuro"] .pz-kpis::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(91,141,255,.75), transparent);
  animation: tema-acende 1.2s ease .2s both;
}
.kpis .kpi, .pz-kpis .pz-kpi,
[data-tema="escuro"] .kpis .kpi, [data-tema="escuro"] .pz-kpis .pz-kpi {
  border: 0; border-right: 1px solid var(--borda-suave); border-radius: 0; box-shadow: none;
  background-color: transparent; background-image: none; padding: 20px 24px; gap: 10px;
}
.kpis .kpi:last-child, .pz-kpis .pz-kpi:last-child { border-right: 0; }
[data-tema="escuro"] .kpis .kpi--frente { background-color: rgba(60,203,142,.05); }
[data-tema="escuro"] .kpis .kpi--atras { background-color: rgba(240,80,110,.05); }
.kpi__rot, .pz-kpi__rot { font-weight: 500; }
.kpi__val, .pz-kpi__num { font-size: 36px; line-height: 1; }
.kpi__barra { height: 4px; }
[data-tema="escuro"] .kpi__barra > span { box-shadow: 0 0 10px var(--ciclo-ok); }

/* burndown: a linha se desenha da esquerda pra direita, depois a projeção, depois os rótulos */
@keyframes tema-revela { from { clip-path: inset(-30px 100% -30px -30px); } to { clip-path: inset(-30px -30px -30px -30px); } }
@keyframes tema-ergue { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bd__restante { stroke-width: 2.6; stroke-linecap: round; animation: tema-revela 1.3s cubic-bezier(.3,.7,.2,1) .25s backwards; }
[data-tema="escuro"] .bd__restante { filter: drop-shadow(0 0 7px rgba(61,120,255,.85)); }
.bd__projecao { stroke-dasharray: 7 5; animation: tema-revela 1.1s ease-out 1.2s backwards; }
.bd__diretriz { animation: tema-acende .6s ease .1s backwards; }
.bd__ponta, .bd__valor, .bd__vs, .bd__vs-txt, .bd__projecao-txt, .bd__salto, .bd__salto-caixa, .bd__salto-txt, .bd__inicio, .bd__zero-caixa, .bd__zero-txt {
  animation: tema-acende .5s ease 1.3s backwards;
}
[data-tema="escuro"] .bd__ponta { fill: #07090D; stroke: #7FA6FF; stroke-width: 2.6; }
.gfx__linha { animation: tema-revela 1.4s cubic-bezier(.3,.7,.2,1) .25s backwards; }
[data-tema="escuro"] .gfx__linha { filter: drop-shadow(0 0 5px rgba(61,120,255,.8)); }
.gfx__area { animation: tema-acende .9s ease .7s backwards; }
.gfx__ponta, .gfx__rotulo { animation: tema-acende .4s ease 1.5s backwards; }

/* colunas que sobem: concluído por dia e pontos por dia útil */
.bdd__barra, .bdu__barra {
  transform-box: fill-box; transform-origin: bottom;
  animation: tema-ergue .7s cubic-bezier(.2,.7,.2,1) .2s backwards;
}
[data-tema="escuro"] .bdd__barra--ok { filter: drop-shadow(0 0 6px rgba(60,203,142,.45)); }
.bdd__valor, .bdu__valor { animation: tema-acende .4s ease .8s backwards; }

/* ritmo, destaques e atalhos */
.ritmo__trilho { height: 8px; border-radius: 8px; overflow: hidden; }
[data-tema="escuro"] .ritmo__trilho { background: rgba(255,255,255,.07); }
.ritmo__fill { border-radius: 8px; }
[data-tema="escuro"] .ritmo__fill--necessario { background: #E5A93B; box-shadow: 0 0 12px #E5A93B; }
[data-tema="escuro"] .ritmo__fill--media { background: #3D78FF; }
[data-tema="escuro"] .ritmo__fill--ultimos { background: #8FB4FF; }
[data-tema="escuro"] .ritmo__ruim { color: #F0C36B; }
[data-tema="escuro"] .ritmo__bom { color: #7BE0B4; }
[data-tema="escuro"] .ritmo__rot--forte { color: #FFFFFF; }
[data-tema="escuro"] .destaques__ponto--escopo, [data-tema="escuro"] .destaques__ponto--atencao { box-shadow: 0 0 10px #E5A93B; }
[data-tema="escuro"] .destaques__ponto--bom { box-shadow: 0 0 10px #3CCB8E; }
[data-tema="escuro"] .destaques__ponto--ruim { box-shadow: 0 0 10px #F0506E; }
.tela .destaques li { animation: tema-entra var(--t-entra) backwards; }
.tela .destaques li:nth-child(2) { animation-delay: .1s; } .tela .destaques li:nth-child(3) { animation-delay: .2s; }
.ciclo__link { border-radius: 10px; transition: border-color .2s ease, color .2s ease, background .2s ease; }
[data-tema="escuro"] .ciclo__link { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.02); color: var(--texto-dim); }
[data-tema="escuro"] .ciclo__link:hover { border-color: rgba(91,141,255,.55); color: #FFFFFF; background: rgba(61,120,255,.08); }
.ciclo__link > span { display: inline-block; transition: transform .2s ease; }
.ciclo__link:hover > span { transform: translateX(4px); }

/* barras horizontais (velocity, horas por pessoa): finas, com linha entre elas */
.barras { gap: 0; }
.barra { padding: 11px 0; border-top: 1px solid var(--borda-suave); grid-template-columns: minmax(96px, 26%) 1fr auto; gap: 16px; }
.barra__trilho { height: 10px; border-radius: 8px; overflow: visible; }
[data-tema="escuro"] .barra__trilho { background: rgba(255,255,255,.07); }
.barra__fill { border-radius: 8px; transform-origin: left; animation: tema-cresce .9s cubic-bezier(.2,.7,.2,1) .25s both; }
.barra__fill[style*="opacity"] {
  opacity: 1 !important;
  background: repeating-linear-gradient(135deg, #3D78FF, #3D78FF 5px, rgba(61,120,255,.55) 5px, rgba(61,120,255,.55) 10px) !important;
}
.barra__meta { top: -3px; bottom: -3px; background: var(--atencao); }
.legenda__chave--meta { background: var(--atencao); }
.tela .barra { animation: tema-entra var(--t-entra) backwards; }
.tela .barra:nth-child(2) { animation-delay: .05s; } .tela .barra:nth-child(3) { animation-delay: .1s; } .tela .barra:nth-child(4) { animation-delay: .15s; }
.tela .barra:nth-child(5) { animation-delay: .2s; } .tela .barra:nth-child(6) { animation-delay: .25s; } .tela .barra:nth-child(n+7) { animation-delay: .3s; }

/* meta do time: célula tingida com borda */
[data-tema="escuro"] .mt2__c--bateu { border: 1px solid rgba(60,203,142,.35); }
[data-tema="escuro"] .mt2__c--meio { border: 1px solid rgba(229,169,59,.35); }
[data-tema="escuro"] .mt2__c--baixo { border: 1px solid rgba(240,80,110,.38); }
[data-tema="escuro"] .mt2__c--zero { border: 1px solid rgba(255,255,255,.10); }
.mt2__c { border-radius: 7px; transition: transform .18s ease, box-shadow .18s ease; }
.mt2__c:hover { transform: translateY(-2px); box-shadow: 0 0 16px -4px rgba(61,120,255,.85); }

/* foco imediato: linhas com fio, em vez de cartão com barra lateral */
.foco-lista { gap: 0; }
.foco-item, .tv2 .foco-item {
  background: none; border: 0; border-top: 1px solid var(--borda-suave); border-radius: 0; padding: 12px 0;
}
.foco-item:first-child { border-top: 0; }
/* a coluna de hoje da meta do time: tingida, sem moldura */
[data-tema="escuro"] .mt2__hoje { border-color: transparent; background: rgba(61,120,255,.08); border-radius: 7px; }

/* ═══ Projetos: a paleta do canvas nas células da matriz ══════ */
[data-tema="escuro"] {
  --pz-vencida-fundo: rgba(240,80,110,.12); --pz-vencida-borda: rgba(240,80,110,.40); --pz-vencida-txt: #F7A0B1; --pz-vencida-barra: #F0506E;
  --pz-alerta-fundo: rgba(229,169,59,.12);  --pz-alerta-borda: rgba(229,169,59,.38);  --pz-alerta-txt: #F0C36B;  --pz-alerta-barra: #E5A93B;
  --pz-sem-fundo: transparent;              --pz-sem-borda: rgba(255,255,255,.20);    --pz-sem-txt: #9BA6B5;     --pz-sem-barra: #56606E;
  --pz-andando-fundo: rgba(61,120,255,.12); --pz-andando-borda: rgba(91,141,255,.38); --pz-andando-txt: #A9C5FF; --pz-andando-barra: #3D78FF;
  --pz-feita-fundo: rgba(60,203,142,.12);   --pz-feita-borda: rgba(60,203,142,.38);   --pz-feita-txt: #7BE0B4;   --pz-feita-barra: #3CCB8E;
  --pz-contrato-fundo: rgba(150,110,255,.10); --pz-contrato-borda: rgba(150,110,255,.38); --pz-contrato-txt: #D9C7FF; --pz-contrato-sub: #B7A6E8; --pz-contrato-cab: #C9B6F2;
  --pz-entrega-fundo: rgba(229,169,59,.10); --pz-entrega-borda: rgba(229,169,59,.35); --pz-entrega-rot: #F0C36B; --pz-entrega-num: #F0C36B;
  --pz-vazia-borda: rgba(255,255,255,.05);  --pz-vazia-txt: #6B7684;
  --pz-cd-vencida: #F7A0B1; --pz-cd-alerta: #F0C36B; --pz-nota: #F0C36B;
  --pz-st-concluido: #5B8DFF; --pz-st-no-prazo: #3CCB8E; --pz-st-alerta: #E5A93B; --pz-st-atrasado: #F0506E; --pz-st-sem-dados: #56606E;
}
.pz { gap: 24px; }
.pz-cel { border-radius: 8px; transition: transform .18s ease, box-shadow .18s ease; }
.pz-cel:not(.pz-cel--vazia):hover { transform: translateY(-2px); box-shadow: 0 0 16px -4px rgba(61,120,255,.85); }
.tela .pz-cel__trilho > span { transform-origin: left; animation: tema-cresce .9s cubic-bezier(.2,.7,.2,1) .3s both; }
.pz-contrato { border-radius: 8px; }
.tela .pz-linha { animation: tema-entra var(--t-entra) backwards; }
.tela .pz-atencao__item { animation: tema-entra var(--t-entra) backwards; }

/* ═══ ao vivo: verde e pulsando ═══════════════════════════════ */
.vivo-ponto { position: relative; background: var(--ok); box-shadow: none; }
.vivo-ponto::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ok);
  animation: tema-pulso 2s ease-out infinite;
}
[data-tema="escuro"] .tabela-ficha--vivo { background: rgba(60,203,142,.06); }
[data-tema="escuro"] .tabela-ficha--vivo .selo-st--fazendo { background: transparent; border-color: transparent; color: #7BE0B4; padding-left: 0; }
[data-tema="escuro"] .ficha__valor { color: var(--texto-dim); }

/* ═══ linhas das telas de desempenho: respiro pra o filete neon ═══
   Essas linhas nasceram coladas na borda do painel (padding 0 dos lados);
   com o filete do hover em cima, a primeira letra do nome ficava debaixo
   dele. O cabeçalho ganha o mesmo recuo pra coluna continuar alinhada. */
.perfis__cab, .perfis__linha, .mtz__cab, .mtz__linha, .mtz__semlinha, .foc__cab, .foc__pessoa,
.pnl__cab, .pnl__linha, .ent__pessoa, .cls__item, .oco__item, .cnc__linha, .aco__serie {
  padding-left: 16px; padding-right: 16px;
}
.mtz__semlinha { position: relative; }
.perfis__linha::after, .foc__pessoa::after, .ent__pessoa::after, .mtz__semlinha::after {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: var(--neon); box-shadow: 0 0 12px 1px rgba(61,120,255,.9);
  transform: scaleY(0); transition: transform .24s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.perfis__linha:hover::after, .foc__pessoa:hover::after, .ent__pessoa:hover::after, .mtz__semlinha:hover::after { transform: scaleY(1); }
.perfis__linha, .mtz__linha, .mtz__semlinha, .foc__pessoa, .pnl__linha, .ent__pessoa, .cls__item, .oco__item, .cnc__linha { transition: background .18s ease; }
[data-tema="escuro"] :is(.perfis__linha, .mtz__linha, .mtz__semlinha, .foc__pessoa, .pnl__linha, .ent__pessoa, .cls__item, .oco__item, .cnc__linha):hover { background: rgba(255,255,255,.035); }
/* matriz: a coluna do nível comporta "Sênior, apto a Líder Técnico" sem passar por cima do grau */
.mtz { min-width: 1240px; }
.mtz__cab, .mtz__linha { grid-template-columns: minmax(150px, 1.2fr) minmax(200px, .9fr) repeat(8, 78px) 80px; }

/* ═══ peças do canvas usadas nas telas de desempenho (prefixo cv-) ═══
   São as mesmas do canvas aprovado: painel com título e nota, cabeçalho
   de colunas, linha com filete, linha que abre (dobra), ponto de faixa,
   trilho, ficha, avatar e a faixa de números. */
.cv-tela { display: flex; flex-direction: column; gap: 24px; }
.cv-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.cv-cab h1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -.01em; }
.cv-cab p { margin-top: 6px; font-size: .875rem; color: var(--texto-mudo); max-width: 70ch; }
.cv-cab__lado { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; font-size: 13px; color: var(--texto-mudo); }
.cv-cab__lado strong { color: var(--texto); font-weight: 500; }
.cv-ticks { display: flex; gap: 4px; }
.cv-ticks i { width: 16px; height: 4px; border-radius: 2px; background: var(--trilho); }
.cv-ticks i.on { background: var(--neon); box-shadow: 0 0 10px rgba(61,120,255,.85); }

.cv-painel {
  position: relative; border-radius: 14px; background-color: var(--superficie);
  border: 1px solid var(--borda-suave); min-width: 0;
  animation: tema-entra var(--t-entra) backwards;
}
[data-tema="escuro"] .cv-painel { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 48px -32px rgba(0,0,0,.9); }
[data-tema="escuro"] .cv-painel:hover { background-image: radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(61,120,255,.09), transparent 62%); }
.cv-tela > .cv-painel:nth-child(2) { animation-delay: .06s; } .cv-tela > .cv-painel:nth-child(3) { animation-delay: .12s; }
.cv-tela > .cv-painel:nth-child(4) { animation-delay: .18s; } .cv-tela > .cv-painel:nth-child(n+5) { animation-delay: .24s; }
.cv-painel--fio::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,141,255,.75), transparent);
  animation: tema-acende 1.2s ease .2s both;
}
.cv-painel--alerta { border-color: color-mix(in srgb, var(--alerta) 40%, transparent); }
.cv-painel--aviso { border-color: color-mix(in srgb, var(--neon-claro) 38%, transparent); }
.cv-painel__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 18px 20px 14px; }
.cv-painel__topo h2 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem; letter-spacing: 0; }
.cv-painel__topo > span { font-size: 12.5px; color: var(--texto-mudo); }
.cv-texto { padding: 0 20px 14px; font-size: 12.5px; line-height: 1.55; color: var(--texto-mudo); }
.cv-texto strong { color: var(--texto-dim); font-weight: 500; }
.cv-rodape { padding: 14px 20px 18px; border-top: 1px solid var(--borda-suave); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: 12.5px; color: var(--texto-mudo); }
.cv-miolo { padding: 0 20px 20px; }
.cv-rolagem { overflow-x: auto; }
.cv-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; align-items: start; }
.cv-pilha { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.cv-cabec { display: grid; gap: 16px; align-items: end; padding: 12px 20px; font-size: 12px; font-weight: 500; color: var(--texto-mudo); }
.cv-linha {
  position: relative; width: 100%; box-sizing: border-box; display: grid; gap: 16px; align-items: center;
  padding: 13px 20px; border: 0; border-top: 1px solid var(--borda-suave); background: transparent;
  color: var(--texto); font: inherit; text-align: left; transition: background .18s ease;
}
button.cv-linha, summary.cv-linha { cursor: pointer; }
.cv-linha:hover, .cv-linha[aria-expanded="true"] { background: rgba(255,255,255,.035); }
[data-tema="claro"] .cv-linha:hover, [data-tema="claro"] .cv-linha[aria-expanded="true"] { background: var(--superficie-2); }
.cv-linha::after {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: var(--neon); box-shadow: 0 0 12px 1px rgba(61,120,255,.9);
  transform: scaleY(0); transition: transform .24s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.cv-linha:hover::after, .cv-linha[aria-expanded="true"]::after { transform: scaleY(1); }
.cv-linha > * { transition: transform .24s cubic-bezier(.2,.7,.2,1); min-width: 0; }
.cv-linha:hover > *:first-child { transform: translateX(4px); }
.cv-linha:focus-visible { outline: 2px solid var(--neon-claro); outline-offset: -2px; }
.cv-item, .cv-painel > .cv-linha, .cv-rolagem .cv-linha { animation: tema-entra var(--t-entra) backwards; }
.cv-item > .cv-linha { animation: none; }
:is(.cv-item, .cv-linha):nth-child(2) { animation-delay: .06s; } :is(.cv-item, .cv-linha):nth-child(3) { animation-delay: .10s; }
:is(.cv-item, .cv-linha):nth-child(4) { animation-delay: .14s; } :is(.cv-item, .cv-linha):nth-child(5) { animation-delay: .18s; }
:is(.cv-item, .cv-linha):nth-child(6) { animation-delay: .22s; } :is(.cv-item, .cv-linha):nth-child(7) { animation-delay: .26s; }
:is(.cv-item, .cv-linha):nth-child(8) { animation-delay: .30s; } :is(.cv-item, .cv-linha):nth-child(n+9) { animation-delay: .34s; }
.cv-seta { color: var(--texto-mudo); transition: transform .28s cubic-bezier(.2,.7,.2,1); justify-self: end; }
.cv-linha[aria-expanded="true"] .cv-seta { transform: rotate(180deg); }
.cv-dobra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2,.7,.2,1); }
.cv-dobra[data-aberta="sim"] { grid-template-rows: 1fr; }
.cv-dobra > div { overflow: hidden; min-height: 0; }
.cv-dobra__c { padding: 6px 20px 22px 20px; display: flex; flex-direction: column; gap: 16px; font-size: 13px; line-height: 1.5; color: var(--texto-mudo); }

.cv-quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cv-avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); color: var(--texto-dim);
  font-size: 11px; font-weight: 600;
}
[data-tema="claro"] .cv-avatar { background: var(--superficie-3); border-color: var(--borda); }
.cv-quem__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cv-quem__nome { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-quem__txt small { font-size: 12.5px; color: var(--texto-mudo); white-space: normal; }
.cv-ponto { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.cv-p-verde { background: #3CCB8E; } .cv-p-amarelo { background: #E5A93B; } .cv-p-vermelho { background: #F0506E; }
.cv-p-azul { background: #3D78FF; } .cv-p-cinza { background: #56606E; }
.cv-rot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-dim); }
.cv-trilho { display: block; height: 3px; border-radius: 3px; background: var(--trilho); overflow: hidden; flex: 1; }
.cv-trilho > i { display: block; height: 100%; border-radius: 3px; transform-origin: left; animation: tema-cresce .9s cubic-bezier(.2,.7,.2,1) .25s both; }
.cv-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cv-t-verde { color: var(--texto-mudo); } .cv-t-amarelo { color: #E5A93B; } .cv-t-vermelho { color: #F4718A; } .cv-t-sem-dado { color: var(--texto-mudo); }
.cv-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--borda); background: rgba(255,255,255,.03); font-size: 12.5px; color: var(--texto-dim); white-space: nowrap;
}
.cv-chip--vermelho { border-color: rgba(240,80,110,.45); color: #F4718A; }
.cv-chip--amarelo { border-color: rgba(229,169,59,.45); color: #F0C36B; }
.cv-chip--verde { border-color: rgba(60,203,142,.45); color: #7BE0B4; }
.cv-chip--azul { border-color: rgba(91,141,255,.5); color: #A9C5FF; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }
.cv-chips > * { animation: tema-entra var(--t-entra) backwards; }
.cv-chips > *:nth-child(2) { animation-delay: .04s; } .cv-chips > *:nth-child(3) { animation-delay: .08s; } .cv-chips > *:nth-child(4) { animation-delay: .12s; }
.cv-chips > *:nth-child(5) { animation-delay: .16s; } .cv-chips > *:nth-child(6) { animation-delay: .20s; } .cv-chips > *:nth-child(n+7) { animation-delay: .24s; }

.cv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); overflow: hidden; }
.cv-stat { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--borda-suave); animation: tema-entra .55s cubic-bezier(.2,.7,.2,1) backwards; }
.cv-stat:last-child { border-right: 0; }
.cv-stat:nth-child(2) { animation-delay: .08s; } .cv-stat:nth-child(3) { animation-delay: .16s; } .cv-stat:nth-child(4) { animation-delay: .24s; }
.cv-stat strong { font-family: var(--fonte-titulo); font-weight: 600; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }
.cv-stat .cv-rot { color: var(--texto-mudo); }

/* o que abre dentro da linha do painel geral: os cinco eixos lado a lado */
.cv-eixos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-left: 40px; }
.cv-eixo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cv-eixo__rot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--texto-mudo); }
.cv-eixo > strong { font-family: var(--fonte-titulo); font-weight: 600; font-size: 22px; line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; }
.cv-eixo ul { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--borda-suave); }
.cv-eixo li { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.cv-eixo li > span:first-child { display: flex; justify-content: space-between; gap: 8px; color: var(--texto-dim); }
.cv-eixo li small { color: var(--texto-mudo); font-size: 11.5px; line-height: 1.4; }
.cv-lista { display: flex; flex-direction: column; gap: 8px; padding-left: 40px; }
.cv-lista h3 { font-family: var(--fonte-texto); font-size: 12px; font-weight: 500; color: var(--texto-mudo); letter-spacing: 0; }
.cv-lista a { color: var(--texto-dim); text-decoration: underline; text-decoration-color: var(--borda); text-underline-offset: 3px; }
.cv-lista a:hover { color: var(--neon-claro); }
@media (max-width: 900px) { .cv-eixos { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; } .cv-lista { padding-left: 0; } }
.cv-eixo .cv-trilho { flex: none; width: 100%; }
/* foco: os blocos que abrem debaixo da pessoa, e quem não é medido */
.cv-bloco { border-top: 1px solid var(--borda-suave); padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.cv-bloco__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 14px; }
.cv-bloco__topo > strong { font-weight: 600; color: var(--texto); }
.cv-bloco__num { font-family: var(--fonte-titulo); font-size: 20px; font-variant-numeric: tabular-nums; }
.cv-bloco__topo small { font-size: 12.5px; color: var(--texto-mudo); }
.cv-bloco ul { display: flex; flex-direction: column; gap: 8px; }
.cv-bloco li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--texto-dim); animation: tema-entra var(--t-entra) backwards; }
.cv-bloco li > .cv-num:first-child { color: var(--texto); min-width: 44px; }
.cv-bloco li.cv-vazio { font-size: 13px; color: var(--texto-mudo); }
/* Foco · páginas abertas no bloco (Wolves Sentinela) */
.cv-paginas { border-top: 1px dashed var(--borda-suave); padding-top: 10px; }
.cv-paginas > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--texto); width: fit-content; }
.cv-paginas > summary::-webkit-details-marker { display: none; }
.cv-paginas__seta { color: var(--texto-mudo); transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.cv-paginas[open] .cv-paginas__seta { transform: rotate(90deg); }
.cv-paginas > ul { margin-top: 12px; max-height: 420px; overflow: auto; padding-right: 6px; gap: 6px; }
.cv-paginas li { display: grid; grid-template-columns: 44px 150px minmax(0, 1fr) 64px; align-items: center; gap: 12px; flex-wrap: nowrap; }
.cv-paginas li[data-cat="fora"] .cv-paginas__url strong { color: #F4718A; }
.cv-paginas__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-mudo); text-decoration: none; font-size: 13px; }
.cv-paginas__url strong { font-weight: 500; color: var(--texto); margin-right: 1px; }
.cv-paginas__url:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.cv-paginas__min { text-align: right; color: var(--texto-dim); }
@media (max-width: 720px) { .cv-paginas li { grid-template-columns: 44px minmax(0, 1fr) 56px; } .cv-paginas__cat { display: none; } }
.cv-naomedidos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px 20px; padding: 0 20px 20px; }
.cv-naomedidos > span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; animation: tema-entra var(--t-entra) backwards; }
.cv-naomedidos small { font-size: 12px; color: var(--texto-mudo); }
.cv-linha:disabled { cursor: default; }
/* campos lado a lado dentro de um painel ou de uma dobra */
.cv-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 6px; }
.cv-campos .entrada { flex: 1 1 150px; min-width: 0; width: auto; }
.cv-campos.cv-miolo { padding-top: 0; }
.cv-rotulo { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--texto-mudo); min-width: 0; flex: 1 1 180px; }
/* acompanhamento: aviso de calibração, os três degraus e a série de notas */
.cv-aviso { padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cv-aviso > i { box-shadow: 0 0 10px rgba(61,120,255,.9); }
.cv-aviso > p { flex: 1 1 320px; font-size: 13.5px; color: var(--texto-dim); }
.cv-aviso > p strong { color: var(--texto); font-weight: 600; }
.cv-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.cv-passos > div { padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--borda-suave); animation: tema-entra var(--t-entra) backwards; }
.cv-passos > div:last-child { border-right: 0; }
.cv-passos > div:nth-child(2) { animation-delay: .08s; } .cv-passos > div:nth-child(3) { animation-delay: .16s; }
.cv-passos span { font-family: var(--fonte-titulo); font-weight: 600; font-size: 22px; color: var(--neon-claro); }
.cv-passos strong { font-size: 14.5px; font-weight: 600; }
.cv-passos small { font-size: 12.5px; line-height: 1.5; color: var(--texto-mudo); }
.cv-serie { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-nota {
  min-width: 44px; text-align: center; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.04); border: 1px solid var(--borda-suave); color: var(--texto-dim);
}
.cv-nota--aberta { border-style: dashed; }
.cv-nota[data-faixa="amarelo"] { color: #E5A93B; border-color: rgba(229,169,59,.4); }
.cv-nota[data-faixa="vermelho"] { color: #F4718A; border-color: rgba(240,80,110,.45); }
.cv-dobra__c .aco__form { display: grid; gap: 12px; }
/* matriz: o grau como célula colorida, do 0 (apagado) ao 4 (aceso) */
.cv-grau {
  display: grid; place-items: center; width: 100%; height: 34px; border-radius: 8px; font-size: 14px; font-weight: 600;
  color: #7D8898; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease, background .3s ease, color .3s ease;
}
.cv-grau[data-g="1"] { color: #C3CBD6; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
.cv-grau[data-g="2"] { color: #A9C5FF; background: rgba(61,120,255,.10); border-color: rgba(91,141,255,.30); }
.cv-grau[data-g="3"] { color: #DCE7FF; background: rgba(61,120,255,.20); border-color: rgba(91,141,255,.50); }
.cv-grau[data-g="4"] { color: #FFFFFF; background: rgba(61,120,255,.36); border-color: #5B8DFF; box-shadow: 0 0 14px -2px rgba(61,120,255,.75); }
[data-tema="claro"] .cv-grau { color: var(--texto-mudo); background: var(--superficie-2); border-color: var(--borda); }
[data-tema="claro"] .cv-grau[data-g="2"], [data-tema="claro"] .cv-grau[data-g="3"] { color: var(--primaria); background: var(--primaria-fraca); }
[data-tema="claro"] .cv-grau[data-g="4"] { color: #FFFFFF; background: var(--primaria); }
.cv-linha:hover .cv-grau:hover, .cv-legenda-graus .cv-grau:hover { transform: translateY(-2px) scale(1.06); border-color: #5B8DFF; box-shadow: 0 0 18px -3px rgba(61,120,255,.9); }
.cv-legenda-graus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px 20px; padding: 0 20px 16px; }
.cv-legenda-graus > div { display: flex; align-items: flex-start; gap: 12px; animation: tema-entra var(--t-entra) backwards; }
.cv-legenda-graus > div > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.cv-legenda-graus strong { font-size: 13.5px; font-weight: 500; }
.cv-legenda-graus small { font-size: 12.5px; color: var(--texto-mudo); line-height: 1.45; }
.cv-rotulo .entrada { flex: none; width: 100%; }
/* perfis: a chave do foco e os campos justos da linha */
.cv-chave { position: relative; display: inline-flex; width: 36px; height: 20px; cursor: pointer; }
.cv-chave input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cv-chave span { flex: 1; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .22s ease, box-shadow .22s ease; }
[data-tema="claro"] .cv-chave span { background: var(--borda); }
.cv-chave span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.cv-chave input:checked + span { background: #2F6BFF; box-shadow: 0 0 14px -2px rgba(61,120,255,.95); }
.cv-chave input:checked + span::after { transform: translateX(16px); }
.cv-chave input:disabled + span { opacity: .35; }
.cv-chave input:disabled { cursor: not-allowed; }
.cv-chave input:focus-visible + span { outline: 2px solid var(--neon-claro); outline-offset: 2px; }
.cv-perfis .entrada { width: 100%; min-width: 0; padding: 8px 8px; font-size: .86rem; }
.cv-perfis .cv-linha:hover > *:first-child { transform: none; }
.cv-chip--tira { padding-right: 4px; }
.cv-chip--tira button { width: 20px; height: 20px; border-radius: 50%; color: var(--texto-mudo); font-size: 14px; line-height: 1; transition: background .18s ease, color .18s ease; }
.cv-chip--tira button:hover { background: rgba(240,80,110,.18); color: #F4718A; }
.cv-pesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px 24px; padding: 0 20px 20px; }
.cv-pesos > div { display: flex; flex-direction: column; gap: 4px; animation: tema-entra var(--t-entra) backwards; }
.cv-pesos > div:nth-child(2) { animation-delay: .06s; } .cv-pesos > div:nth-child(3) { animation-delay: .12s; } .cv-pesos > div:nth-child(4) { animation-delay: .18s; }
.cv-pesos strong { font-size: 13.5px; font-weight: 500; }
.cv-pesos small { font-size: 12.5px; line-height: 1.5; color: var(--texto-mudo); }
.cv-linha > .entrada { width: 100%; min-width: 0; }
.cv-linha:has(> .entrada):hover > *:first-child, .cv-linha:has(> .btn):hover > *:first-child { transform: none; }
.cv-perfis .cv-rot { white-space: normal; line-height: 1.35; font-size: 12.5px; }

/* ═══ entrada, convite e troca de senha (login próprio) ═══════ */
.portao { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.portao__caixa {
  width: min(420px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 32px 30px 28px;
  border-radius: 16px; background: var(--superficie); border: 1px solid var(--borda-suave); position: relative;
  animation: tema-entra .6s cubic-bezier(.2,.7,.2,1) backwards;
}
[data-tema="escuro"] .portao__caixa { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 40px 80px -40px rgba(0,0,0,.95); }
[data-tema="escuro"] .portao__caixa::before {
  content: ""; position: absolute; left: 32px; right: 32px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,141,255,.8), transparent); animation: tema-acende 1.2s ease .3s both;
}
.portao__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.portao h1 { font-size: 1.6rem; margin: 0; }
.portao__frase { font-size: .9rem; color: var(--texto-mudo); max-width: none; margin: 0; }
.portao__frase strong { color: var(--texto); font-weight: 500; }
.portao__form, .conta-senha { display: flex; flex-direction: column; gap: 14px; }
.portao__form label, .conta-senha label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--texto-mudo); }
.portao__form .entrada, .conta-senha .entrada { width: 100%; min-height: 44px; }
.portao__form .btn { min-height: 46px; margin-top: 4px; font-size: .95rem; }
.portao__dica { font-size: 12.5px; color: var(--texto-mudo); margin: -4px 0 0; }
.portao__erro { font-size: 13px; color: #F4718A; margin: 0; }
.portao__nota { font-size: 12.5px; color: var(--texto-mudo); margin: 0; text-align: left; }
.portao__nota a { color: var(--texto-dim); text-decoration: underline; text-underline-offset: 3px; }
.portao .faixa { margin: 0; }
.conta-senha { padding: 16px 10px 6px; border-top: 1px solid var(--borda-suave); margin-top: 8px; }
.conta-senha h3 { font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 600; margin: 0; }
.conta-senha__acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* Configurações · ciência do módulo de foco */
.ciencia__texto { padding: 4px 10px 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.6; color: var(--texto-dim); }
.ciencia__texto ul { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; list-style: disc; }
.ciencia__texto strong { color: var(--texto); font-weight: 600; }
.ciencia__rascunho { font-size: 12px; color: #E5A93B; }
.ciencia__li { display: flex; align-items: center; gap: 10px; padding: 14px 10px 4px; font-size: 13.5px; color: var(--texto); cursor: pointer; }
.ciencia__li input { width: 16px; height: 16px; accent-color: #3D78FF; }
.ciencia .conta-senha__acoes { padding: 10px 10px 4px; }

/* Acompanhamento · roteiro do 1:1 e modelo do plano (item 19) */
.roteiro { border: 1px solid var(--borda-suave); border-radius: 14px; background: rgba(255,255,255,.02); padding: 14px 16px; }
.roteiro > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--texto); }
.roteiro > summary::-webkit-details-marker { display: none; }
.roteiro[open] > summary .cv-paginas__seta { transform: rotate(90deg); }
.roteiro__imprimir { margin-left: auto; }
.roteiro__impresso { display: none; }
.roteiro__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px 32px; margin-top: 16px; }
.roteiro__grade > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.roteiro h4 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-mudo); margin-top: 6px; }
.roteiro__nota { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; }
.roteiro__nota > strong { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; color: var(--texto); }
.roteiro__nota small { font-size: 12.5px; color: var(--texto-mudo); }
.roteiro__eixos { display: flex; flex-direction: column; gap: 8px; }
.roteiro__eixos li { display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px; align-items: center; gap: 12px; font-size: 13px; color: var(--texto-dim); }
.roteiro__eixos small { color: var(--texto-mudo); font-size: 11.5px; }
.roteiro__eixos strong { text-align: right; color: var(--texto); font-weight: 600; }
.roteiro__hist { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.roteiro__hist small { font-size: 12px; color: var(--texto-mudo); margin-right: 4px; }
.roteiro__fatos { display: flex; flex-direction: column; gap: 6px; padding-left: 0; }
.roteiro__fatos li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.5; color: var(--texto-dim); }
.roteiro__fatos li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #56606E; }
.roteiro__fatos li[data-tipo="eixo"]::before, .roteiro__fatos li[data-tipo="ocorrencia"]::before { background: #F0506E; box-shadow: 0 0 8px rgba(240,80,110,.6); }
.roteiro__fatos li[data-tipo="foco"]::before { background: #E5A93B; }
.roteiro__antes { border-left: 2px solid var(--borda); padding: 2px 0 2px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--texto-dim); }
.roteiro__antes strong { font-weight: 600; color: var(--texto); font-size: 13px; }
.roteiro__passos { counter-reset: passo; display: flex; flex-direction: column; gap: 12px; padding-left: 0; }
.roteiro__passos > li { counter-increment: passo; position: relative; padding-left: 36px; font-size: 13px; line-height: 1.55; color: var(--texto-dim); }
.roteiro__passos > li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #A9C5FF; border: 1px solid rgba(91,141,255,.5); background: rgba(61,120,255,.08); }
.roteiro__passos strong { display: block; color: var(--texto); font-weight: 600; font-size: 13.5px; }
.roteiro__passos ul { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.roteiro__passos ul li { font-style: italic; color: var(--texto-mudo); }
.roteiro__sug { border: 1px dashed rgba(91,141,255,.35); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.roteiro__sug h4 { margin-top: 0; }
.roteiro__sug ul { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; list-style: disc; font-size: 13px; color: var(--texto-dim); }
.roteiro__vazio { font-size: 13px; color: var(--texto-mudo); }
@media (max-width: 900px) { .roteiro__grade { grid-template-columns: 1fr; } }
@media print {
  body[data-imprimir="roteiro"] * { visibility: hidden !important; }
  body[data-imprimir="roteiro"] .roteiro--alvo, body[data-imprimir="roteiro"] .roteiro--alvo * { visibility: visible !important; }
  body[data-imprimir="roteiro"] .roteiro--alvo { position: absolute; left: 0; top: 0; width: 100%; border: 0; background: #fff; color: #111; padding: 0; }
  body[data-imprimir="roteiro"] .roteiro--alvo > summary, body[data-imprimir="roteiro"] .roteiro--alvo button { display: none !important; }
  body[data-imprimir="roteiro"] .roteiro--alvo .roteiro__impresso { display: flex; flex-direction: column; gap: 2px; font-size: 15px; margin-bottom: 8px; }
  body[data-imprimir="roteiro"] .roteiro--alvo * { color: #111 !important; box-shadow: none !important; animation: none !important; }
  body[data-imprimir="roteiro"] .roteiro--alvo .roteiro__grade { grid-template-columns: 1fr 1.15fr; }
}

/* Meu dia · presença em um clique (como no canvas) */
.estou { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.estou__rot { font-size: 13px; color: var(--texto-mudo); margin-right: 2px; }
.estou__chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--borda); background: rgba(255,255,255,.03);
  font: inherit; font-size: 13px; color: var(--texto-dim); white-space: nowrap; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
.estou__chip:hover { border-color: rgba(91,141,255,.5); color: #fff; }
.estou__chip[aria-checked="true"] { border-color: #5B8DFF; color: #fff; background: rgba(61,120,255,.16); box-shadow: 0 0 16px -4px rgba(61,120,255,.9); }
.estou__chip:focus-visible { outline: 2px solid #5B8DFF; outline-offset: 2px; }

/* Entrada · colar o convite (o link não abre no navegador com a trava do programa) */
.portao__convite { margin-top: 4px; }
.portao__convite > summary { cursor: pointer; font-size: 13px; color: #A9C5FF; width: fit-content; }
.portao__convite > summary:hover { color: #fff; }
.portao__convite[open] > summary { margin-bottom: 12px; }