/* ============================================================
   PORTAL DE MARKETING LET'S POKE — folha de estilo única
   Estética: superfícies de vidro, transições suaves, muito ar.
   ============================================================ */

:root{
  /* --- paleta da marca --- */
  --neutro:      #e3e0e7;
  --teal:        #00aaa1;
  --laranja:     #ED7B05;
  --pessego:     #fac89b;
  --azul:        #3283b3;
  --ambar:       #eaae2e;

  /* --- séries de gráfico (validadas para daltonismo e contraste) --- */
  --s1:#00918A; --s2:#C25F00; --s3:#1D72AD; --s4:#A87A0E; --s5:#AC3F72;

  /* --- status (sempre com ícone + rótulo, nunca só cor) --- */
  --bom:      #1F7A4D;
  --atencao:  #B06E00;
  --serio:    #C2410C;
  --critico:  #A61B1B;

  /* --- tinta --- */
  --tinta:     #1d2733;
  --tinta-2:   #55636f;
  --tinta-3:   #8593a1;

  /* --- superfícies --- */
  --fundo:     #f7f6f9;
  --vidro:     rgba(255,255,255,.72);
  --vidro-alt: rgba(255,255,255,.55);
  --borda:     rgba(29,39,51,.09);
  --borda-luz: rgba(255,255,255,.85);

  --r-g: 22px;  --r-m: 15px;  --r-p: 10px;
  --sombra-p: 0 1px 2px rgba(29,39,51,.05), 0 4px 14px rgba(29,39,51,.045);
  --sombra-m: 0 2px 6px rgba(29,39,51,.06), 0 14px 38px rgba(29,39,51,.08);
  --sombra-g: 0 24px 70px rgba(29,39,51,.14);

  --mola: cubic-bezier(.22,.61,.36,1);
  --lateral: 252px;
  --lateral-min: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Evita animação no primeiro desenho (menu abre já na largura certa) */
body.pre-carga *,body.pre-carga *::before,body.pre-carga *::after{
  transition:none !important; animation:none !important;
}

/* Tamanho padrão dos ícones. Os gráficos (.gr) ficam de fora. */
svg:not(.gr){ width:16px; height:16px; flex:0 0 auto; }

html,body{ height:100%; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.55; color:var(--tinta);
  background:var(--fundo);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Malha de fundo suave, fixa */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46rem 34rem at 12% 4%,  rgba(0,170,161,.13), transparent 62%),
    radial-gradient(40rem 30rem at 92% 8%,  rgba(250,200,155,.30), transparent 60%),
    radial-gradient(44rem 36rem at 78% 92%, rgba(50,131,179,.12), transparent 62%),
    radial-gradient(38rem 30rem at 6% 88%,  rgba(227,224,231,.75), transparent 64%);
  filter:saturate(115%);
}

a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:640; letter-spacing:-.018em; }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
      background:rgba(29,39,51,.06); padding:1px 6px; border-radius:6px; }

/* ============ VIDRO ============ */
.glass{
  background:var(--vidro);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--borda-luz);
  box-shadow:var(--sombra-p);
  border-radius:var(--r-g);
}

/* ============ ESTRUTURA ============ */
.app{ display:flex; min-height:100vh; }

/* ---- Menu lateral ---- */
/* Menu lateral na cor da ÁREA aberta, definida em --area pelo layout.
   A cor para na borda do menu: a área de conteúdo continua neutra
   porque os gráficos dependem de fundo claro para as cores das séries
   funcionarem — e porque cinco fundos diferentes fariam o mesmo
   gráfico parecer cinco gráficos.

   --area-tinta é a cor do TEXTO por cima, e vem medida por contraste
   em includes/areas.php: branco sobre o amarelo do RH dá 1,98:1, que
   é ilegível. Onde o branco não passa, a tinta é escura. */
.lateral{
  width:var(--lateral); flex:0 0 var(--lateral);
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  padding:18px 12px 14px;
  background:linear-gradient(165deg,var(--area,#ED7B05),var(--area-2,#d46e04));
  border-right:1px solid var(--area-linha,rgba(255,255,255,.16));
  box-shadow:2px 0 22px rgba(29,39,51,.16);
  transition:width .34s var(--mola), flex-basis .34s var(--mola), padding .34s var(--mola);
  z-index:40; overflow:hidden;
}
body.menu-fechado .lateral{ width:var(--lateral-min); flex-basis:var(--lateral-min); padding-left:10px; padding-right:10px; }

/* Bloco da marca em claro sobre o laranja: invertido em relação ao
   resto do menu, é o que faz o logo e o nome do portal se destacarem
   em vez de se dissolverem no fundo. */
.lat-topo{
  display:flex; align-items:center; gap:11px;
  padding:12px 12px; margin:-6px -4px 14px; border-radius:16px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 6px 20px rgba(120,52,0,.18);
  transition:padding .34s var(--mola), margin .34s var(--mola);
}
.lat-topo .marca-selo{
  background:linear-gradient(135deg,var(--area-pura,#ED7B05),var(--area-2,#d46e04));
  box-shadow:0 4px 12px rgba(29,39,51,.22);
  border:none;
}
/* O bloco do topo virou link para a Home. Precisa parecer clicável sem
   virar mais um botão colorido disputando atenção com o menu. */
.lat-topo{ text-decoration:none; }
.lat-topo > svg{ width:15px; height:15px; margin-left:auto; color:var(--tinta-3); flex:none;
  transition:transform .22s var(--mola), color .2s ease; }
.lat-topo:hover > svg{ color:var(--area-forte,var(--laranja)); transform:translateX(2px); }
body.menu-fechado .lat-topo > svg{ display:none; }
.lat-topo .marca-img{ background:transparent; border-color:transparent; box-shadow:none; }
.lat-topo .marca-txt strong{ color:var(--tinta); }
.lat-topo .marca-txt span{ color:var(--tinta-3); }
body.menu-fechado .lat-topo{ padding:10px 8px; margin:-6px -2px 14px; justify-content:center; gap:0; }
.marca-selo{
  width:36px; height:36px; flex:0 0 36px; border-radius:11px;
  background:linear-gradient(135deg,var(--teal),var(--azul));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; letter-spacing:-.03em;
  box-shadow:0 4px 14px rgba(0,170,161,.35);
}
.marca-txt{ display:flex; flex-direction:column; line-height:1.2; white-space:nowrap;
  transition:opacity .22s ease, transform .28s var(--mola); }
.marca-txt strong{ font-size:14.5px; font-weight:680; letter-spacing:-.02em; }
.marca-txt span{ font-size:10.5px; color:var(--tinta-3); text-transform:uppercase; letter-spacing:.09em; font-weight:600; }
/* O texto oculto não pode ocupar largura e empurrar o logo para fora. */
body.menu-fechado .lat-topo .marca-txt{ display:none; }

.lat-nav{ flex:1; overflow-y:auto; overflow-x:hidden; margin:0 -4px; padding:0 4px; }
.lat-nav::-webkit-scrollbar{ width:6px; }
.lat-nav::-webkit-scrollbar-thumb{ background:var(--area-tinta-3,rgba(255,255,255,.3)); border-radius:8px; }
body.menu-fechado .lat-nav{ scrollbar-gutter:stable both-edges; }

.lat-grupo{ font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--area-tinta-3,rgba(255,255,255,.62)); padding:16px 12px 7px; white-space:nowrap;
  transition:opacity .2s ease; }
body.menu-fechado .lat-grupo{ opacity:0; height:22px; padding:8px 0 0; }

.lat-item{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; margin:2px 0; border-radius:12px;
  color:var(--area-tinta-2,rgba(255,255,255,.88)); font-weight:520; font-size:13.4px; white-space:nowrap;
  position:relative; transition:background .2s ease, color .2s ease, transform .2s var(--mola);
}
.lat-item svg{ width:19px; height:19px; flex:0 0 19px; stroke-width:1.7; }
.lat-item span{ transition:opacity .2s ease; }
body.menu-fechado .lat-item{ justify-content:center; padding:10px 0; gap:0; }
/* Preserva os nomes para leitores de tela, sem coluna nem espaço no flex. */
body.menu-fechado .lat-item > span,
body.menu-fechado .lat-user-txt{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.lat-item:hover{ background:var(--area-hover,rgba(255,255,255,.15)); color:var(--area-tinta,#fff); }
.lat-item.ativo{
  background:var(--area-ativo,rgba(255,255,255,.95));
  color:var(--area-forte,#8a4700); font-weight:660;
  box-shadow:0 3px 12px rgba(29,39,51,.14);
}
.lat-item.ativo::before{
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--area-tinta,#fff);
}
body.menu-fechado .lat-item.ativo::before{ left:-10px; }

/* dica flutuante quando o menu está fechado */
body.menu-fechado .lat-item::after{
  content:attr(data-nome); position:absolute; left:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(-6px);
  background:rgba(29,39,51,.94); color:#fff; font-size:12px; font-weight:560;
  padding:6px 11px; border-radius:9px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .18s ease, transform .18s var(--mola); z-index:60;
  box-shadow:var(--sombra-m);
}
body.menu-fechado .lat-item:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }

.lat-rodape{ border-top:1px solid var(--area-linha,rgba(255,255,255,.22)); padding-top:12px; margin-top:8px; }
.lat-user{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:12px; white-space:nowrap; }
.lat-user:hover{ background:var(--area-hover,rgba(255,255,255,.13)); }
/* Sobre o laranja, o avatar de iniciais precisa de fundo claro para não
   virar uma mancha da mesma cor. Quem tem foto continua com a foto. */
.lateral .avatar{ background:var(--area-hover,rgba(255,255,255,.22)); border:1px solid var(--area-linha,rgba(255,255,255,.38));
  color:var(--area-tinta,#fff); }
.lateral .lat-sair{ color:var(--area-tinta-2,rgba(255,255,255,.86)); }
.lateral .lat-sair:hover{ color:var(--area-tinta,#fff); }
/* A Administração Geral não é uma das cinco áreas: fica discreta, com
   uma linha acima separando-a do menu da área. */
.lat-geral{ opacity:.9; }
.lat-geral:hover{ opacity:1; }
.avatar{ width:32px; height:32px; flex:0 0 32px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--laranja),var(--ambar)); }
.lat-user-txt{ display:flex; flex-direction:column; line-height:1.25; overflow:hidden; transition:opacity .2s ease; }
.lat-user-txt strong{ font-size:12.8px; font-weight:620; color:var(--area-tinta,#fff); }
.lat-user-txt span{ font-size:10.5px; color:var(--area-tinta-3,rgba(255,255,255,.72)); }
body.menu-fechado .lat-user{ justify-content:center; gap:0; padding:8px 0; }

/* ---- Área principal ---- */
.principal{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topo{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px;
  padding:14px 30px;
  background:rgba(247,246,249,.78);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--borda);
}
.btn-menu{
  width:38px; height:38px; flex:0 0 38px; border:1px solid var(--borda); border-radius:11px;
  background:rgba(255,255,255,.7); display:grid; place-items:center; cursor:pointer;
  transition:background .2s ease, transform .2s var(--mola), box-shadow .2s ease;
}
.btn-menu:hover{ background:#fff; box-shadow:var(--sombra-p); }
.btn-menu:active{ transform:scale(.94); }
.btn-menu i{ display:block; width:16px; height:1.8px; background:var(--tinta); border-radius:2px;
  position:relative; transition:transform .3s var(--mola), opacity .2s ease; }
.btn-menu i::before,.btn-menu i::after{ content:""; position:absolute; left:0; width:16px; height:1.8px;
  background:var(--tinta); border-radius:2px; transition:transform .3s var(--mola); }
.btn-menu i::before{ top:-5px; } .btn-menu i::after{ top:5px; }
body.menu-fechado .btn-menu i{ transform:rotate(180deg); }

.topo-tit{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.topo-tit .migalha{ font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--laranja); }
.topo-tit h1{ font-size:20px; letter-spacing:-.028em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topo-dir{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.conteudo{ padding:24px 30px 56px; max-width:1560px; width:100%; }
@media (max-width:900px){ .conteudo,.topo{ padding-left:16px; padding-right:16px; } }

/* ============ BOTÕES ============ */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:8px 15px; border-radius:11px; border:1px solid var(--borda);
  background:rgba(255,255,255,.78); font-size:13px; font-weight:580; cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease, transform .16s var(--mola), border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{ background:#fff; box-shadow:var(--sombra-p); }
.btn:active{ transform:scale(.97); }
.btn svg{ width:15px; height:15px; stroke-width:1.9; }
.btn-primario{ background:linear-gradient(135deg,var(--teal),#008b83); color:#fff; border-color:transparent;
  box-shadow:0 3px 12px rgba(0,170,161,.3); }
.btn-primario:hover{ background:linear-gradient(135deg,#00b5ab,#00968e); box-shadow:0 6px 20px rgba(0,170,161,.4); }
.btn-laranja{ background:linear-gradient(135deg,var(--laranja),#d46e04); color:#fff; border-color:transparent;
  box-shadow:0 3px 12px rgba(237,123,5,.3); }
.btn-p{ padding:5px 11px; font-size:12px; border-radius:9px; }
.btn-fantasma{ background:transparent; border-color:transparent; color:var(--tinta-2); }
.btn-fantasma:hover{ background:rgba(29,39,51,.06); box-shadow:none; }

/* Excluir é discreto até o mouse chegar perto: vermelho o tempo todo numa
   lista de 14 cards vira ruído, e ruído deixa de ser aviso. */
.btn-perigo{ background:transparent; border-color:transparent; color:#8f2020; }
.btn-perigo:hover{ background:rgba(166,27,27,.1); border-color:rgba(166,27,27,.22);
  color:#7a1b1b; box-shadow:none; }

/* ============ FILTROS ============ */
.filtros{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:12px 16px; margin-bottom:20px;
}
.filtro{ display:flex; align-items:center; gap:7px; }
.filtro label{ font-size:11px; font-weight:680; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-3); }
select,input[type=text],input[type=date],input[type=email],input[type=password],input[type=number],textarea{
  padding:7px 11px; border:1px solid var(--borda); border-radius:10px;
  background:rgba(255,255,255,.85); font-size:13px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
select:focus,input:focus,textarea:focus{ border-color:var(--teal); box-shadow:0 0 0 3.5px rgba(0,170,161,.16); background:#fff; }
textarea{ resize:vertical; min-height:80px; line-height:1.6; width:100%; }

/* ============ CARTÕES DE INDICADOR ============ */
.grade{ display:grid; gap:16px; }
.g-6{ grid-template-columns:repeat(6,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-2-1{ grid-template-columns:2fr 1fr; }
.g-1-2{ grid-template-columns:1fr 2fr; }
@media (max-width:1400px){ .g-6{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1100px){ .g-4{ grid-template-columns:repeat(2,1fr); } .g-2-1,.g-1-2{ grid-template-columns:1fr; } }
@media (max-width:780px){ .g-6,.g-4,.g-3,.g-2{ grid-template-columns:1fr; } }

.kpi{ padding:16px 18px 15px; position:relative; overflow:hidden;
  transition:transform .28s var(--mola), box-shadow .28s ease; }
.kpi:hover{ transform:translateY(-3px); box-shadow:var(--sombra-m); }
.kpi::after{ content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--teal),var(--azul)); opacity:.55; }
.kpi.k-laranja::after{ background:linear-gradient(90deg,var(--laranja),var(--ambar)); }
.kpi.k-azul::after{ background:linear-gradient(90deg,var(--azul),var(--teal)); }
.kpi.k-ambar::after{ background:linear-gradient(90deg,var(--ambar),var(--pessego)); }

.kpi-topo{ display:flex; align-items:center; gap:6px; margin-bottom:9px; }
.kpi-rot{ font-size:10.5px; font-weight:720; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3); }
.kpi-val{ font-size:29px; font-weight:680; letter-spacing:-.035em; line-height:1.06; font-variant-numeric:tabular-nums; }
.kpi-val small{ font-size:15px; font-weight:600; color:var(--tinta-3); margin-left:2px; letter-spacing:-.01em; }
.kpi-pe{ display:flex; align-items:center; gap:8px; margin-top:9px; flex-wrap:wrap; }
.kpi-nota{ font-size:11.5px; color:var(--tinta-3); }

.delta{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:680;
  padding:2.5px 8px; border-radius:20px; font-variant-numeric:tabular-nums; }
.delta.sobe{ color:#12654a; background:rgba(31,122,77,.13); }
.delta.desce{ color:#8f2020; background:rgba(166,27,27,.11); }
.delta.igual{ color:var(--tinta-3); background:rgba(29,39,51,.07); }
.delta svg{ width:11px; height:11px; stroke-width:2.6; }

/* ============ PAINÉIS ============ */
.painel{ padding:18px 20px 20px; }
.painel-topo{ display:flex; align-items:flex-start; gap:12px; margin-bottom:4px; flex-wrap:wrap; }
.painel-tit{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.painel-tit h3{ font-size:15.5px; letter-spacing:-.02em; display:flex; align-items:center; gap:6px; }
.painel-tit p{ margin:0; font-size:12.2px; color:var(--tinta-3); line-height:1.5; }
.painel-acoes{ margin-left:auto; display:flex; align-items:center; gap:8px; }

/* ---- Alternador Painel / Planilha ---- */
.alterna{ display:inline-flex; padding:3px; background:rgba(29,39,51,.07); border-radius:11px; gap:2px; }
.alterna button{ border:0; background:transparent; padding:5px 12px; border-radius:8px; cursor:pointer;
  font-size:12px; font-weight:620; color:var(--tinta-2); display:inline-flex; align-items:center; gap:5px;
  transition:background .22s var(--mola), color .2s ease, box-shadow .22s ease; }
.alterna button svg{ width:13px; height:13px; stroke-width:2; }
.alterna button.on{ background:#fff; color:var(--tinta); box-shadow:0 1px 4px rgba(29,39,51,.14); }

.vista{ display:none; }
.vista.on{ display:block; animation:surge .34s var(--mola); }
@keyframes surge{ from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none; } }

/* ============ LEGENDAS DIDÁTICAS ============ */
.dica{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; background:rgba(50,131,179,.16); color:#1b5f84;
  font-size:9.5px; font-weight:800; cursor:help; flex:0 0 15px; vertical-align:middle;
  transition:background .2s ease, transform .2s var(--mola); }
.dica:hover{ background:rgba(50,131,179,.3); transform:scale(1.14); }
.dica-bolha{
  position:fixed; transform:translateY(5px);
  width:262px; padding:10px 13px; border-radius:12px;
  background:rgba(29,39,51,.96); color:#fff; font-size:12px; font-weight:450; line-height:1.55;
  letter-spacing:0; text-transform:none; text-align:left;
  opacity:0; visibility:hidden; pointer-events:none; z-index:70;
  transition:opacity .2s ease, transform .24s var(--mola), visibility .2s;
  box-shadow:var(--sombra-g);
}
.dica-bolha b{ color:var(--pessego); font-weight:700; }
.dica-bolha::after{ content:""; position:absolute; top:100%; left:var(--seta,50%); transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(29,39,51,.96); }
.dica-bolha.on{ opacity:1; visibility:visible; transform:translateY(0); }
/* seta desenhada por JS conforme o balão fique acima ou abaixo do "i" */
.dica-bolha::after{ display:none; }
.dica-bolha.acima::after{ display:block; top:100%; border-top-color:rgba(29,39,51,.96); }
.dica-bolha.abaixo::after{ display:block; top:auto; bottom:100%;
  border-top-color:transparent; border-bottom-color:rgba(29,39,51,.96); }

/* faixa explicativa dentro de um painel */
.nota-lida{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:14px; padding:11px 14px; border-radius:13px;
  background:linear-gradient(135deg, rgba(250,200,155,.26), rgba(234,174,46,.14));
  border:1px solid rgba(237,123,5,.18); font-size:12.4px; line-height:1.6; color:#6a4718;
}
.nota-lida svg{ width:15px; height:15px; flex:0 0 15px; margin-top:2px; stroke-width:2; color:var(--laranja); }
.nota-lida b{ color:#4d3210; }

/* ============ TABELAS (vista planilha) ============ */
.tabela-wrap{ overflow-x:auto; margin:0 -20px; padding:0 20px; }
table.tab{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.8px; }
table.tab th{
  text-align:left; font-size:10.5px; font-weight:740; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-3); padding:9px 12px; border-bottom:1.5px solid var(--borda);
  position:sticky; top:0; background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); white-space:nowrap; z-index:2;
}
table.tab th.num,table.tab td.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.tab td{ padding:9px 12px; border-bottom:1px solid rgba(29,39,51,.055); vertical-align:middle; }
table.tab tbody tr{ transition:background .16s ease; }
table.tab tbody tr:hover{ background:rgba(0,170,161,.055); }
table.tab tbody tr:last-child td{ border-bottom:0; }
table.tab td.forte{ font-weight:640; }
table.tab .melhor{ background:rgba(31,122,77,.10); border-radius:7px; }
table.tab .pior{ background:rgba(166,27,27,.09); border-radius:7px; }
.tab-vazia{ padding:36px 12px; text-align:center; color:var(--tinta-3); font-size:13px; }

/* ============ ETIQUETAS ============ */
.tag{ display:inline-flex; align-items:center; gap:4px; padding:2.5px 9px; border-radius:20px;
  font-size:11px; font-weight:660; letter-spacing:.01em; white-space:nowrap; }
.tag svg{ width:11px; height:11px; stroke-width:2.4; }
.t-bom{ background:rgba(31,122,77,.13); color:#12654a; }
.t-atencao{ background:rgba(176,110,0,.15); color:#8a5600; }
.t-serio{ background:rgba(194,65,12,.14); color:#9c340a; }
.t-critico{ background:rgba(166,27,27,.13); color:#8f2020; }
.t-neutro{ background:rgba(29,39,51,.07); color:var(--tinta-2); }
.t-teal{ background:rgba(0,145,138,.14); color:#00655f; }
.t-azul{ background:rgba(29,114,173,.14); color:#155a8a; }
.t-laranja{ background:rgba(194,95,0,.14); color:#9a4b00; }
.t-roxo{ background:rgba(172,63,114,.13); color:#8a3059; }

.pilula-auto{ background:rgba(0,145,138,.12); color:#00655f; }
.pilula-manual{ background:rgba(194,95,0,.13); color:#9a4b00; }

/* ============ BARRAS E MEDIDORES ============ */
.barra{ height:7px; border-radius:6px; background:rgba(29,39,51,.09); overflow:hidden; }
.barra i{ display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--teal),var(--azul));
  transition:width .8s var(--mola); }
.barra.b-laranja i{ background:linear-gradient(90deg,var(--laranja),var(--ambar)); }
.barra.b-bom i{ background:linear-gradient(90deg,#1F7A4D,#38a06c); }
.barra.b-critico i{ background:linear-gradient(90deg,#A61B1B,#d24b4b); }

/* ============ LISTAS ============ */
.lista{ display:flex; flex-direction:column; }
.lista-item{ display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid rgba(29,39,51,.055); transition:background .16s ease; }
.lista-item:last-child{ border-bottom:0; }
.lista-item:hover{ background:rgba(0,170,161,.045); }
.li-txt{ min-width:0; flex:1; }
.li-txt strong{ display:block; font-size:13.2px; font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.li-txt span{ font-size:11.6px; color:var(--tinta-3); }
.li-num{ font-size:14px; font-weight:660; font-variant-numeric:tabular-nums; white-space:nowrap; }
.li-selo{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#fff; }
.li-selo svg{ width:15px; height:15px; stroke-width:2.2; }

/* semáforo */
.sinal{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.sinal.verde{ background:var(--bom); box-shadow:0 0 0 3px rgba(31,122,77,.16); }
.sinal.amarelo{ background:var(--atencao); box-shadow:0 0 0 3px rgba(176,110,0,.16); }
.sinal.vermelho{ background:var(--critico); box-shadow:0 0 0 3px rgba(166,27,27,.15); }

/* ============ GRÁFICOS ============ */
.gr{ width:100%; display:block; overflow:visible; }
.gr .eixo{ stroke:rgba(29,39,51,.13); stroke-width:1; }
.gr .grade-l{ stroke:rgba(29,39,51,.07); stroke-width:1; }
.gr .rot{ font-size:10.5px; fill:var(--tinta-3); font-weight:560; }
.gr .rot-v{ font-size:11px; fill:var(--tinta-2); font-weight:660; }
.gr .linha{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gr .ponto{ stroke:#fff; stroke-width:2; }
.gr .col{ transition:opacity .2s ease; }
.gr .col:hover{ opacity:.78; }

.legenda{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; }
.leg{ display:inline-flex; align-items:center; gap:6px; font-size:11.8px; color:var(--tinta-2); font-weight:540; }
.leg i{ width:10px; height:10px; border-radius:3px; flex:0 0 10px; }
.leg.linha-leg i{ height:3px; border-radius:2px; width:14px; }

.gr-dica{
  position:fixed; z-index:90; pointer-events:none; opacity:0;
  background:rgba(29,39,51,.96); color:#fff; padding:9px 12px; border-radius:11px;
  font-size:12px; line-height:1.5; box-shadow:var(--sombra-g); transition:opacity .14s ease;
  min-width:130px;
}
.gr-dica b{ display:block; font-size:11px; color:var(--pessego); font-weight:700;
  margin-bottom:4px; letter-spacing:.03em; text-transform:uppercase; }
.gr-dica .ld{ display:flex; align-items:center; gap:7px; justify-content:space-between; margin-top:2px; }
.gr-dica .ld i{ width:8px; height:8px; border-radius:2px; flex:0 0 8px; }
.gr-dica .ld u{ text-decoration:none; opacity:.82; margin-right:auto; }
.gr-dica .ld b{ display:inline; color:#fff; margin:0; font-size:12px; text-transform:none;
  letter-spacing:0; font-variant-numeric:tabular-nums; }

.esparso{ display:block; }

/* ============ ABAS ============ */
.abas{ display:flex; gap:3px; padding:4px; background:rgba(29,39,51,.055); border-radius:13px;
  margin-bottom:18px; overflow-x:auto; }
.aba{ padding:7px 14px; border-radius:10px; font-size:12.8px; font-weight:600; color:var(--tinta-2);
  cursor:pointer; white-space:nowrap; border:0; background:transparent;
  transition:background .22s var(--mola), color .2s ease, box-shadow .22s ease; }
.aba.on{ background:#fff; color:var(--tinta); box-shadow:0 1px 5px rgba(29,39,51,.13); }
.aba:disabled{ opacity:.42; cursor:not-allowed; }

/* ============ QUADRO KANBAN ============ */
.kanban{ display:grid; grid-template-columns:repeat(5,minmax(230px,1fr)); gap:14px; overflow-x:auto; padding-bottom:8px; }
@media (max-width:1300px){ .kanban{ grid-template-columns:repeat(5,265px); } }
.col-k{ display:flex; flex-direction:column; gap:10px; }
.col-k-topo{ display:flex; align-items:center; gap:8px; padding:0 4px 4px; }
.col-k-topo strong{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-2); }
.col-k-topo em{ font-style:normal; font-size:11px; font-weight:700; color:var(--tinta-3);
  background:rgba(29,39,51,.07); padding:1px 7px; border-radius:20px; }
.card-k{ padding:13px 14px; border-radius:15px; background:rgba(255,255,255,.78);
  border:1px solid var(--borda-luz); box-shadow:var(--sombra-p); display:block;
  transition:transform .26s var(--mola), box-shadow .26s ease; }
.card-k:hover{ transform:translateY(-3px); box-shadow:var(--sombra-m); }
.card-k h4{ font-size:13.4px; line-height:1.35; margin-bottom:7px; letter-spacing:-.015em; }
.card-k .meta-k{ display:flex; align-items:center; gap:7px; font-size:11.2px; color:var(--tinta-3); margin-top:7px; }
.card-k .meta-k svg{ width:13px; height:13px; flex:0 0 13px; stroke-width:2; }

/* ============ FICHA / FORMULÁRIO ============ */
.campo{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.campo label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-3);
  display:flex; align-items:center; gap:5px; }
.campo .valor{ font-size:14px; font-weight:540; }
.campo .valor.vazio{ color:var(--tinta-3); font-style:italic; font-weight:420; }

.etapa{ display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid rgba(29,39,51,.055); }
.etapa:last-child{ border-bottom:0; }
.tick{ width:19px; height:19px; flex:0 0 19px; border-radius:6px; border:1.8px solid rgba(29,39,51,.22);
  display:grid; place-items:center; margin-top:1px; cursor:pointer;
  transition:background .22s var(--mola), border-color .22s ease, transform .2s var(--mola); }
.tick svg{ width:11px; height:11px; stroke:#fff; stroke-width:3.2; opacity:0; transition:opacity .18s ease; }
.tick:hover{ transform:scale(1.1); border-color:var(--teal); }
.etapa.feita .tick{ background:var(--bom); border-color:var(--bom); }
.etapa.feita .tick svg{ opacity:1; }
.etapa.feita .et-txt strong{ text-decoration:line-through; color:var(--tinta-3); font-weight:500; }
.etapa.andando .tick{ border-color:var(--laranja); border-style:dashed; }
.et-txt{ flex:1; min-width:0; }
.et-txt strong{ display:block; font-size:13.2px; font-weight:560; }
.et-txt span{ font-size:11.4px; color:var(--tinta-3); }

/* ============ AVISOS ============ */
.aviso{ padding:11px 15px; border-radius:13px; font-size:13px; margin-bottom:16px; line-height:1.55;
  display:flex; gap:9px; align-items:flex-start; }
.aviso svg{ width:16px; height:16px; flex:0 0 16px; margin-top:2px; stroke-width:2; }
.aviso-erro{ background:rgba(166,27,27,.09); color:#8f2020; border:1px solid rgba(166,27,27,.18); }
.aviso-ok{ background:rgba(31,122,77,.1); color:#12654a; border:1px solid rgba(31,122,77,.2); }
.aviso-info{ background:rgba(50,131,179,.1); color:#155a8a; border:1px solid rgba(50,131,179,.2); }
.aviso-atencao{ background:rgba(234,174,46,.14); color:#7a5900; border:1px solid rgba(234,174,46,.34); }

.faixa-demo{
  display:flex; align-items:center; gap:9px; padding:9px 16px; margin-bottom:18px;
  border-radius:13px; font-size:12.4px; line-height:1.5;
  background:linear-gradient(135deg, rgba(0,170,161,.11), rgba(50,131,179,.09));
  border:1px solid rgba(0,170,161,.2); color:#0a5f5a;
}
.faixa-demo svg{ width:15px; height:15px; flex:0 0 15px; stroke-width:2; }
.faixa-demo b{ font-weight:700; }

/* ============ VAZIO ============ */
.vazio{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:46px 20px; text-align:center; }
.vazio-ico{ width:52px; height:52px; border-radius:16px; background:rgba(29,39,51,.05);
  display:grid; place-items:center; color:var(--tinta-3); }
.vazio-ico svg{ width:24px; height:24px; stroke-width:1.6; }
.vazio strong{ font-size:15px; font-weight:620; }
.vazio p{ margin:0; font-size:13px; color:var(--tinta-3); max-width:400px; line-height:1.6; }

/* ============ LOGIN ============ */
.tela-login,.tela-instalador{ display:grid; place-items:center; min-height:100vh; padding:24px; }
.login-card{ width:100%; max-width:412px; padding:34px 34px 30px; }
.login-marca{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.login-marca strong{ display:block; font-size:16.5px; letter-spacing:-.02em; }
.login-marca span{ font-size:10.5px; color:var(--tinta-3); text-transform:uppercase; letter-spacing:.1em; font-weight:640; }
.login-card h2{ font-size:22px; letter-spacing:-.03em; margin-bottom:5px; }
.login-card .sub{ font-size:13px; color:var(--tinta-3); margin:0 0 22px; line-height:1.55; }
.login-card .campo input{ width:100%; padding:11px 13px; font-size:14px; }
.login-card .btn{ width:100%; padding:11px; font-size:14px; margin-top:6px; }
.login-pe{ margin-top:22px; padding-top:18px; border-top:1px solid var(--borda);
  font-size:11.8px; color:var(--tinta-3); line-height:1.65; }

/* ============ INSTALADOR ============ */
.inst-wrap{ width:100%; max-width:620px; }
.inst-card{ padding:32px 34px; }
.inst-marca{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.inst-marca strong{ display:block; font-size:16px; }
.inst-marca span{ font-size:11px; color:var(--tinta-3); }
.inst-passos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.inst-passos li{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--borda); opacity:.5; }
.inst-passos li:last-child{ border-bottom:0; }
.inst-passos li.atual,.inst-passos li.feito{ opacity:1; }
.p-num{ width:28px; height:28px; flex:0 0 28px; border-radius:9px; display:grid; place-items:center;
  font-size:12.5px; font-weight:750; background:rgba(29,39,51,.07); color:var(--tinta-2); }
.inst-passos li.feito .p-num{ background:rgba(31,122,77,.15); color:#12654a; }
.inst-passos li.atual .p-num{ background:linear-gradient(135deg,var(--teal),var(--azul)); color:#fff; }
.p-txt{ flex:1; }
.p-txt strong{ display:block; font-size:14px; margin-bottom:2px; }
.p-txt span{ display:block; font-size:12.5px; color:var(--tinta-3); line-height:1.55; margin-bottom:10px; }
.inst-form{ display:flex; flex-direction:column; gap:8px; max-width:320px; }
.inst-nota{ margin-top:20px; padding:13px 15px; border-radius:13px; font-size:12.2px; line-height:1.7;
  background:rgba(50,131,179,.09); border:1px solid rgba(50,131,179,.18); color:#155a8a; }

/* ============ DIVERSOS ============ */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.mt{ margin-top:16px; } .mt-g{ margin-top:24px; } .mb{ margin-bottom:16px; }
.flex{ display:flex; align-items:center; gap:9px; } .flex-fim{ margin-left:auto; }
.txt-p{ font-size:12px; color:var(--tinta-3); } .txt-c{ text-align:center; }
.nowrap{ white-space:nowrap; }
.num{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media print{
  .lateral,.topo,.painel-acoes,.filtros{ display:none !important; }
  body::before{ display:none; }
  .glass{ box-shadow:none; border:1px solid #ddd; background:#fff; }
  .vista{ display:block !important; }
}

/* ============ TELAS PÚBLICAS: LOGIN, CADASTRO, SENHA ============ */
.login-card{ max-width:430px; }
.marca-img{ object-fit:contain; background:transparent; border-radius:11px; }
.campo-senha .senha-caixa{ position:relative; display:block; }
.campo-senha .senha-caixa input{ width:100%; padding-right:42px; }
.olho{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; padding:6px; cursor:pointer; color:var(--tinta-3);
  display:flex; align-items:center; border-radius:8px;
}
.olho:hover{ color:var(--teal); background:rgba(0,170,161,.08); }
.olho svg{ width:17px; height:17px; }
.olho.on{ color:var(--teal); }

.marcador{
  display:flex; align-items:center; gap:9px; margin:4px 0 6px;
  font-size:13.5px; color:var(--tinta-2); cursor:pointer; user-select:none;
}
.marcador input{ width:auto; margin:0; }

.login-links{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:16px; font-size:13px;
}
.login-links a{ color:var(--teal); text-decoration:none; font-weight:600; }
.login-links a:hover{ text-decoration:underline; }

.bloco-oculto{ display:none; margin-top:18px; padding-top:16px; border-top:1px solid var(--borda); }
.bloco-oculto.aberto{ display:block; }
.bloco-oculto .btn{ margin-top:8px; }

/* Avatar redondo: a imagem é sempre cortada em círculo pelo navegador,
   então uma foto retangular enviada por engano não quebra o layout. */
.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; overflow:hidden; object-fit:cover; flex:none;
  background:linear-gradient(135deg,var(--laranja),#d46e04); color:#fff;
  font-weight:700; letter-spacing:-.01em;
}

/* ============ CALENDÁRIO DE PERÍODO ============ */
.periodo-caixa{ display:flex; align-items:stretch; gap:6px; }
.btn-cal{
  display:flex; align-items:center; justify-content:center; padding:0 10px;
  border:1px solid var(--borda); border-radius:10px; background:rgba(255,255,255,.7);
  color:var(--tinta-2); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-cal:hover{ background:#fff; color:var(--teal); border-color:rgba(0,170,161,.4); }
.btn-cal.on{ background:rgba(0,170,161,.12); color:#0a5f5a; border-color:rgba(0,170,161,.45); }

.periodo-cal{
  position:fixed; z-index:90; width:302px; padding:14px;
  max-width:calc(100vw - 20px); max-height:calc(100vh - 20px); overflow-y:auto;
  border-radius:16px; background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--borda-luz); box-shadow:var(--sombra-g);
  display:none;
}
.periodo-cal.on{ display:block; animation:surge .22s var(--mola); }
.periodo-cal-topo{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.periodo-cal-topo strong{ flex:1; text-align:center; font-size:13.5px; letter-spacing:-.01em; }
.periodo-cal-nav{
  width:28px; height:28px; border:1px solid var(--borda); border-radius:9px;
  background:#fff; cursor:pointer; color:var(--tinta-2); font-size:15px; line-height:1;
}
.periodo-cal-nav:hover{ color:var(--teal); border-color:rgba(0,170,161,.4); }
.periodo-cal-grade{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.periodo-cal-sem{ font-size:10px; font-weight:700; color:var(--tinta-3); text-align:center; padding:4px 0; text-transform:uppercase; }
.periodo-cal-dia{
  display:flex; align-items:center; justify-content:center; min-width:0; height:34px;
  border:0; background:none; padding:0; font-size:12.5px; border-radius:9px;
  cursor:pointer; color:var(--tinta); transition:background .15s ease, color .15s ease;
}
.periodo-cal-dia:hover:not(:disabled):not(.ponta){ background:rgba(0,170,161,.14); }
.periodo-cal-dia:disabled{ color:var(--tinta-3); opacity:.35; cursor:default; }
.periodo-cal-dia.fora{ color:var(--tinta-3); opacity:.45; }
.periodo-cal-dia.faixa{ background:rgba(0,170,161,.13); border-radius:0; }
.periodo-cal-dia.ponta{ background:var(--teal); color:#fff; font-weight:700; }
.periodo-cal-dia.ponta.ini{ border-radius:9px 0 0 9px; }
.periodo-cal-dia.ponta.fim{ border-radius:0 9px 9px 0; }
.periodo-cal-dia.ponta.ini.fim{ border-radius:9px; }
.periodo-cal-dia.hoje{ box-shadow:inset 0 0 0 1px rgba(0,170,161,.55); }
.periodo-cal button:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
.periodo-cal-pe{ margin-top:10px; padding-top:10px; border-top:1px solid var(--borda);
  display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.periodo-cal-dica{ font-size:11.5px; color:var(--tinta-3); line-height:1.45; margin-top:8px; }

/* opção em cartão (escolha do modo de login) */
.opcao{
  display:flex; gap:10px; align-items:flex-start; padding:13px 15px; border-radius:14px;
  border:1px solid var(--borda); background:rgba(255,255,255,.6); cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.opcao:hover{ border-color:rgba(0,170,161,.4); background:#fff; }
.opcao.on{ border-color:rgba(0,170,161,.55); background:rgba(0,170,161,.07); }
.opcao input{ width:auto; margin-top:3px; }
.opcao strong{ display:block; font-size:13.5px; margin-bottom:2px; }
.opcao .txt-p{ text-transform:none; letter-spacing:0; line-height:1.5; }

/* Rodapé legal da tela de login. Discreto de propósito: existe para o
   revisor da plataforma encontrar, não para competir com o botão de
   entrar. */
.login-legal{display:flex;gap:8px;justify-content:center;align-items:center;
  margin-top:18px;font-size:12px;color:var(--tinta-3)}
.login-legal a{color:var(--tinta-3);text-decoration:none}
.login-legal a:hover{color:var(--laranja);text-decoration:underline}

/* ============================================================
   QUADRO DE TAREFAS
   Quatro colunas que viram rolagem horizontal quando não cabem.
   No celular vira uma coluna só, empilhada: arrastar em tela
   pequena não funciona bem, e lá o que importa é ler a lista.
   ============================================================ */
.quadro{display:grid;grid-template-columns:repeat(4,minmax(250px,1fr));gap:14px;
  margin-top:16px;align-items:start;overflow-x:auto;padding-bottom:6px}
.q-col{background:rgba(255,255,255,.55);border:1px solid var(--borda-luz);
  border-radius:16px;padding:10px;min-width:250px}
.q-cab{display:flex;align-items:center;gap:8px;padding:6px 8px 10px;
  border-bottom:1px solid var(--borda-luz);margin-bottom:9px}
.q-cab strong{font-size:12.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--tinta-2)}
.q-cab::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tinta-3)}
.q-cab.q-azul::before{background:var(--azul)}
.q-cab.q-ambar::before{background:var(--ambar)}
.q-cab.q-teal::before{background:var(--teal)}
.q-cont{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--tinta-3);
  background:rgba(29,39,51,.06);border-radius:9px;padding:1px 8px}
.q-lista{display:flex;flex-direction:column;gap:9px;min-height:70px}
.q-lista.alvo{outline:2px dashed var(--teal);outline-offset:3px;border-radius:12px}

.q-cartao{background:#fff;border:1px solid var(--borda-luz);border-radius:13px;
  padding:11px 12px;box-shadow:0 1px 2px rgba(29,39,51,.05);border-left:3px solid var(--tinta-3)}
.q-cartao.p-alta{border-left-color:var(--critico)}
.q-cartao.p-media{border-left-color:var(--ambar)}
.q-cartao.p-baixa{border-left-color:var(--tinta-3)}
.q-cartao.atrasado{background:rgba(166,27,27,.035)}
.q-cartao[draggable=true]{cursor:grab}
.q-cartao.arrastando{opacity:.45;cursor:grabbing}
.q-topo{display:flex;gap:7px;align-items:flex-start}
.q-pega{color:var(--tinta-3);flex:0 0 auto;margin-top:1px}
.q-pega svg{width:15px;height:15px}
.q-titulo{font-size:13.5px;font-weight:640;line-height:1.35;color:var(--tinta);text-decoration:none}
.q-titulo:hover{color:var(--laranja)}
.q-camp{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:11px;
  color:var(--azul);text-decoration:none;background:rgba(50,131,179,.09);
  border-radius:8px;padding:2px 7px}
.q-camp svg{width:12px;height:12px}
.q-det{margin:7px 0 0;font-size:11.5px;line-height:1.45;color:var(--tinta-2)}
.q-pe{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:8px;
  border-top:1px solid rgba(29,39,51,.06);flex-wrap:wrap}
.q-quem{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tinta-2)}
.q-sem{color:var(--tinta-3);font-style:italic}
.q-prazo{margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:11px;color:var(--tinta-3)}
.q-prazo svg{width:12px;height:12px}
.q-prazo.venceu{color:var(--critico);font-weight:700}
.q-vazio{text-align:center;font-size:11.5px;color:var(--tinta-3);padding:14px 0;font-style:italic}

@media (max-width:900px){
  .quadro{grid-template-columns:1fr}
  .q-pega{display:none}
}

/* Divisórias das seções da ficha do concorrente. Uma ficha de 40
   campos sem respiro vira um paredão; a faixa dá o mesmo alívio que
   uma folha de bloco separada em blocos. */
.conc-secao{display:flex;align-items:center;gap:10px;margin:22px 0 10px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--laranja)}
.conc-secao::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(237,123,5,.35),transparent)}
.conc-secao:first-child{margin-top:8px}

/* ============================================================
   CALENDÁRIO, EVENTOS, RISCO DE PRAZO
   ============================================================ */

/* --- calendário --- */
.cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.cal-ds{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);text-align:center;padding:4px 0}
.cal-dia{min-height:104px;border:1px solid var(--borda-luz);border-radius:12px;
  padding:6px;background:rgba(255,255,255,.6);display:flex;flex-direction:column;gap:4px}
.cal-dia.fds{background:rgba(29,39,51,.028)}
.cal-dia.vazio-dia{background:transparent;border-color:transparent}
.cal-dia.hoje{border-color:var(--laranja);box-shadow:0 0 0 2px rgba(237,123,5,.16)}
.cal-num{font-size:12px;font-weight:700;color:var(--tinta-2);line-height:1}
.cal-dia.hoje .cal-num{color:var(--laranja)}
.cal-item{display:flex;align-items:center;gap:4px;font-size:10.5px;line-height:1.25;
  padding:3px 5px;border-radius:7px;text-decoration:none;overflow:hidden}
.cal-item svg{width:11px;height:11px;flex:0 0 11px}
.cal-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev{background:rgba(237,123,5,.14);color:#8a4700}
.cal-tf{background:rgba(50,131,179,.13);color:#134a6b}
.cal-tf.venceu{background:rgba(166,27,27,.14);color:var(--critico);font-weight:640}
.cal-tf.feita{opacity:.5;text-decoration:line-through}

.cal-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:640;
  padding:4px 11px;border-radius:20px;text-decoration:none;
  background:rgba(29,39,51,.06);color:var(--tinta-3);opacity:.55}
.cal-chip.on{opacity:1}
.cal-chip.cal-ev.on{background:rgba(237,123,5,.16);color:#8a4700}
.cal-chip.cal-cp.on{background:rgba(0,145,138,.15);color:#0a5f5a}
.cal-chip.cal-tf.on{background:rgba(50,131,179,.15);color:#134a6b}
.cal-chip.cal-tf.venceu.on{background:rgba(166,27,27,.15);color:var(--critico)}
.cal-legenda{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--borda-luz)}

.cal-faixa{display:block;background:linear-gradient(90deg,var(--teal),var(--azul));
  color:#fff;border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:640;
  text-decoration:none;min-width:80px;box-sizing:border-box}
.cal-faixa span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.cal-faixa-pe{font-size:10.5px;color:var(--tinta-3);margin:3px 0 10px}

/* --- próximos eventos --- */
.prox-linha{display:flex;gap:11px;overflow-x:auto;padding:12px 2px 4px}
.prox-card{display:flex;gap:11px;align-items:flex-start;min-width:280px;
  background:#fff;border:1px solid var(--borda-luz);border-radius:14px;
  padding:12px 13px;text-decoration:none;color:inherit}
.prox-card:hover{box-shadow:var(--sombra-p)}
.prox-data{flex:0 0 44px;text-align:center;background:rgba(237,123,5,.12);
  border-radius:10px;padding:6px 0}
.prox-data strong{display:block;font-size:19px;line-height:1;color:#8a4700}
.prox-data span{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:#8a4700}
.prox-txt{flex:1;min-width:0}
.prox-txt strong{display:block;font-size:13px;line-height:1.3}
.prox-txt span{font-size:11px;color:var(--tinta-3)}
.prox-barra{height:4px;border-radius:3px;background:rgba(29,39,51,.08);margin:7px 0 3px;overflow:hidden}
.prox-barra i{display:block;height:100%;background:var(--teal);border-radius:3px}
.prox-pct{font-size:10.5px;color:var(--tinta-3)}

/* --- risco de prazo nas tarefas --- */
.q-cartao.atrasada{border-left-color:var(--critico);background:rgba(166,27,27,.035)}
.q-cartao.perto{border-left-color:var(--ambar)}
.q-risco{display:flex;align-items:flex-start;gap:5px;margin-top:8px;padding:5px 7px;
  border-radius:8px;font-size:10.5px;line-height:1.35}
.q-risco svg{width:12px;height:12px;flex:0 0 12px;margin-top:1px}
.q-risco.atrasada{background:rgba(166,27,27,.1);color:var(--critico)}
.q-risco.perto{background:rgba(234,174,46,.16);color:#8a5b00}
.q-camp.q-ev{background:rgba(237,123,5,.12);color:#8a4700}

.risco-lista{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.risco-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.risco-sel{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:7px;
  background:rgba(166,27,27,.14);color:var(--critico)}
.risco-sel.perto{background:rgba(234,174,46,.2);color:#8a5b00}
.risco-quem{font-size:11px;color:var(--tinta-3)}
.risco-imp{font-size:11px;color:var(--tinta-2)}
.risco-imp em{font-style:normal;color:var(--tinta-3)}

/* selo de pendência na aba */
.aba-selo{display:inline-flex;align-items:center;justify-content:center;min-width:17px;
  height:17px;padding:0 5px;margin-left:5px;border-radius:9px;font-size:10.5px;
  font-weight:800;background:var(--laranja);color:#fff}

/* ============================================================
   MINIATURA DA PUBLICAÇÃO — Biblioteca de Conteúdo
   Quadrada e cortada no centro: post de Instagram vem em três
   proporções diferentes (1:1, 4:5, 9:16) e uma grade com alturas
   diferentes fica torta. Cortar preserva o assunto, que costuma
   estar no meio.
   ============================================================ */
.post-card{padding:14px 15px;border-radius:16px;background:rgba(255,255,255,.62);
  border:1px solid var(--borda-luz)}
.post-thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;
  border-radius:12px;overflow:hidden;margin:-2px 0 11px;
  background:rgba(29,39,51,.05);text-decoration:none}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s var(--mola)}
.post-thumb:hover img{transform:scale(1.045)}
.post-thumb.sem-img{display:flex;align-items:center;justify-content:center}
.post-thumb.sem-img::after{content:"sem imagem";font-size:11px;color:var(--tinta-3)}
.post-abrir{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(29,39,51,.62);color:#fff;opacity:0;transition:opacity .2s ease}
.post-abrir svg{width:13px;height:13px}
.post-thumb:hover .post-abrir{opacity:1}
.post-legenda{color:inherit;text-decoration:none}
.post-legenda:hover{color:var(--laranja)}

/* ============================================================
   ERRO DO PERFIL E DIAGNÓSTICO DE PERMISSÕES
   ------------------------------------------------------------
   O erro fica recolhido porque no card ele é um sintoma; quem
   vai agir abre. E o diagnóstico nasce dentro do card, e não
   numa tela separada, para a pessoa não perder de vista de
   qual perfil está falando — são cinco @ parecidos na lista.
   ============================================================ */
.erro-perfil{font-size:11.5px;color:#8f2020}
.erro-perfil summary{cursor:pointer;list-style:none;display:flex;gap:6px;
  align-items:flex-start;line-height:1.45}
.erro-perfil summary::-webkit-details-marker{display:none}
.erro-perfil summary svg{width:13px;height:13px;flex:none;margin-top:1px}
.erro-perfil summary:hover{text-decoration:underline}
.erro-txt{margin-top:7px;padding:9px 11px;border-radius:10px;line-height:1.55;
  background:rgba(166,27,27,.06);border:1px solid rgba(166,27,27,.16);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  word-break:break-word;color:#7d1d1d}

.diag-perfil{margin-top:12px;padding:13px 14px;border-radius:13px;
  background:rgba(29,39,51,.035);border:1px solid var(--borda-luz)}
.diag-topo{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:9px;font-size:12.5px}
.diag-topo strong{display:flex;align-items:center;gap:6px}
.diag-topo svg{width:14px;height:14px}
.diag-topo a{text-decoration:none}
.diag-topo a:hover{color:var(--laranja)}
.diag-linha{display:flex;gap:9px;align-items:flex-start;padding:7px 0;
  border-top:1px solid rgba(29,39,51,.06)}
.diag-linha:first-of-type{border-top:0}
.diag-linha > div{min-width:0}
.diag-linha strong{display:block;font-size:12.5px;letter-spacing:-.01em}
.diag-linha span{display:block;font-size:11.5px;line-height:1.5;
  color:var(--tinta-3);margin-top:2px;word-break:break-word}

/* ============================================================
   HOME DO PORTAL
   ------------------------------------------------------------
   Os cartões usam a cor da área como faixa e como fundo do
   ícone, e não como fundo do cartão inteiro: cinco cartões
   chapados lado a lado brigam entre si e nenhum se destaca.
   A cor identifica; o branco deixa ler.
   ============================================================ */
.home-abre{ margin:6px 0 22px; }
.home-abre h2{ font-size:26px; font-weight:680; letter-spacing:-.03em; color:var(--tinta); }
.home-abre p{ color:var(--tinta-3); font-size:14px; margin-top:3px; }

.home-grade{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); }

.home-cartao{
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  padding:22px 20px 18px; border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.72); border:1px solid var(--borda-luz);
  box-shadow:var(--sombra-p); text-decoration:none;
  transition:transform .26s var(--mola), box-shadow .26s ease;
}
a.home-cartao:hover{ transform:translateY(-3px); box-shadow:var(--sombra-m); }
.home-faixa{ position:absolute; inset:0 0 auto 0; height:4px; }
.home-ico{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:13px; }
.home-ico svg{ width:22px; height:22px; stroke-width:1.7; }
.home-nome{ font-size:17px; font-weight:670; letter-spacing:-.02em; color:var(--tinta); }
.home-desc{ font-size:12.6px; line-height:1.5; color:var(--tinta-3); margin-top:5px; min-height:38px; }
/* Três números por cartão e quatro cartões por linha ficam apertados
   quando um rótulo é longo. A escolha aqui é DEIXAR QUEBRAR a linha em
   vez de cortar com reticências: cartão um pouco mais alto é feio por
   dois segundos, rótulo cortado ("DOCUMENT…") é ilegível para sempre.
   Como os cartões da mesma linha já esticam juntos, a grade não perde
   o alinhamento. */
/* Grade de três colunas iguais, e não flex: com flex, o cartão de
   Marketing quebrava "0 tarefas" para a segunda linha enquanto o de
   Franquias mantinha os três lado a lado, e a fileira ficava
   desalinhada sem motivo. Rótulo longo quebra em duas linhas dentro da
   própria coluna — cartão um pouco mais alto é melhor que rótulo
   cortado com reticências, que é ilegível para sempre. */
.home-nums{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 12px;
  margin-top:14px; padding-top:12px; width:100%; border-top:1px solid rgba(29,39,51,.07); }
/* Respiro à direita de cada coluna: sem ele, dois rótulos longos vizinhos
   encostam e leem-se como uma palavra só ("DOCUMENTOSCHAMADOS"). */
.home-nums > span{ padding-right:8px; }
.home-nums > span:last-child{ padding-right:0; }
.home-nums b{ display:block; font-size:15px; font-weight:680; color:var(--tinta); letter-spacing:-.02em; }
.home-nums i{ display:block; font-style:normal; font-size:10.5px; color:var(--tinta-3);
  text-transform:uppercase; letter-spacing:.05em; margin-top:1px; line-height:1.35; }

/* Área ainda não construída. Fica visível de propósito: saber que
   ela vem, e quando, vale mais do que a lista parecer completa. */
.home-cartao-espera{ opacity:.62; box-shadow:none; background:rgba(255,255,255,.5); }
.home-espera{ display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:rgba(29,39,51,.06); color:var(--tinta-3); }
.home-espera svg{ width:13px; height:13px; }

/* Pendências de todas as áreas, antes dos cartões. */
.home-pend{ padding:15px 18px; border-radius:16px; margin-bottom:20px;
  background:rgba(237,123,5,.06); border:1px solid rgba(237,123,5,.2); }
.home-pend-tit{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tinta); }
.home-pend-tit svg{ width:16px; height:16px; color:var(--laranja); }
.home-pend-lista{ display:flex; flex-direction:column; gap:2px; margin-top:9px; }
.home-pend-item{ display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:10px;
  text-decoration:none; transition:background .18s ease; }
.home-pend-item:hover{ background:rgba(255,255,255,.72); }
.home-pend-cor{ width:7px; height:7px; border-radius:50%; flex:none; }
.home-pend-txt{ font-size:13px; color:var(--tinta-2); flex:1; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.home-pend-nota{ font-size:11px; font-weight:600; color:var(--tinta-3); flex:none; }

.home-geral{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px;
  padding-top:18px; border-top:1px solid var(--borda-luz); }

/* A Home não tem menu lateral: é a tela de escolher a área. */
body[data-area=""] .lateral{ display:none; }

/* Telas sem menu lateral (Home, Minha conta vinda da Home). */
.principal-solta{ max-width:1180px; margin:0 auto; width:100%; }
.topo-marca{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.topo-marca span{ font-size:15px; font-weight:670; letter-spacing:-.02em; color:var(--tinta); }
.topo-marca .marca-selo{ background:linear-gradient(135deg,var(--laranja),#d46e04);
  box-shadow:0 3px 10px rgba(237,123,5,.3); }

/* ---- matriz de permissões por área ---- */
.perm-area{ border:1px solid var(--borda-luz); border-radius:13px; margin-bottom:8px;
  background:rgba(255,255,255,.6); overflow:hidden; }
.perm-cab{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px;
  background:none; border:0; cursor:pointer; text-align:left; font:inherit; color:var(--tinta); }
.perm-cab:hover{ background:rgba(29,39,51,.03); }
.perm-cab strong{ font-size:13.5px; font-weight:640; }
.perm-cor{ width:9px; height:9px; border-radius:50%; flex:none; }
.perm-resumo{ margin-left:auto; font-size:11.5px; color:var(--tinta-3); }
.perm-cab svg{ width:15px; height:15px; color:var(--tinta-3); flex:none;
  transition:transform .22s var(--mola); }
.perm-corpo.aberto + .perm-cab svg,
.perm-area:has(.perm-corpo.aberto) .perm-cab svg{ transform:rotate(45deg); }
.perm-corpo{ padding:0 14px 14px; }

/* ---- cartões de configuração de área ---- */
.cartao-area{ border:1px solid var(--borda-luz); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.7); box-shadow:var(--sombra-p); }
.ca-topo{ display:flex; align-items:center; gap:10px; padding:12px 16px; }
.ca-topo > span{ display:flex; align-items:center; gap:9px; font-size:15px; }
.ca-topo svg{ width:17px; height:17px; flex:none; }
.ca-topo strong{ font-weight:660; letter-spacing:-.02em; }
/* A etiqueta de situação fica sobre a cor da área: fundo claro fixo para
   ela ser legível em cima de qualquer uma das cinco. */
.ca-topo .tag{ margin-left:auto; background:rgba(255,255,255,.92); color:var(--tinta-2);
  border-color:transparent; }
.ca-corpo{ padding:14px 16px 16px; }
.ca-corpo p{ font-size:13px; color:var(--tinta-3); line-height:1.55; margin-bottom:12px; }
.ca-dados{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-bottom:13px;
  padding-bottom:12px; border-bottom:1px solid rgba(29,39,51,.07); }
.ca-dados span{ display:flex; flex-direction:column; font-size:10.5px; color:var(--tinta-3);
  text-transform:uppercase; letter-spacing:.07em; }
.ca-dados b{ font-size:13px; font-weight:640; color:var(--tinta); text-transform:none;
  letter-spacing:-.01em; margin-bottom:2px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.ca-form{ padding:16px; border-top:1px solid var(--borda-luz); background:rgba(29,39,51,.03); }

/* ---- sessões agrupadas por pessoa ---- */
.sess-bloco{ margin-bottom:16px; }
.sess-cab{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;
  padding-bottom:7px; border-bottom:1px solid var(--borda-luz); }
.sess-cab strong{ font-size:13.5px; font-weight:640; }

/* Faixas de cor de KPI usadas pelas áreas de resultado. Existiam três;
   as duas de saldo (bom/ruim) faltavam, e um EBITDA negativo com a
   mesma faixa de um positivo esconde a única coisa que importa ali. */
.kpi.k-teal::after{ background:linear-gradient(90deg,var(--teal),var(--azul)); }
.kpi.k-verde::after{ background:linear-gradient(90deg,var(--bom),#3fa06e); }
.kpi.k-vermelho::after{ background:linear-gradient(90deg,var(--critico),var(--serio)); }
.kpi.k-roxo::after{ background:linear-gradient(90deg,#5B3FA8,#8b6fd6); }

/* ============================================================
   DEMONSTRATIVO (área DREs)
   ------------------------------------------------------------
   O DRE é uma tabela que se lê de cima para baixo procurando os
   subtotais. Por isso eles são a única coisa realçada: conta
   individual em negrito faria a linha que importa desaparecer no
   meio de trinta linhas igualmente pesadas.
   ============================================================ */
.dre-tab td{ font-variant-numeric:tabular-nums; }
.dre-cod{ display:inline-block; min-width:26px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; color:var(--tinta-3); }
tr.dre-conta td:first-child{ padding-left:20px; }
tr.dre-grupo td{ font-weight:640; color:var(--tinta); background:rgba(29,39,51,.035);
  border-top:1px solid rgba(29,39,51,.08); }
tr.dre-subtotal td{ font-weight:700; color:var(--tinta); background:rgba(0,36,71,.06);
  border-top:1px solid rgba(0,36,71,.18); border-bottom:1px solid rgba(0,36,71,.18); }

/* Célula fora da faixa da rede, no comparativo. Cor + fundo, nunca só
   cor: quem não distingue verde de vermelho continua vendo o destaque. */
.cel-ruim{ background:rgba(166,27,27,.07); color:#8f2020; font-weight:620; }
.cel-bom{ background:rgba(31,122,77,.07); color:#1a6b45; font-weight:620; }

/* ---- lançamento por grupo ---- */
.lanc-grupo{ border:1px solid var(--borda-luz); border-radius:13px; margin-bottom:10px; overflow:hidden;
  background:rgba(255,255,255,.6); }
.lanc-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 14px; background:rgba(29,39,51,.04); font-size:13px; }
.lanc-linhas{ padding:6px 0; }
.lanc-item{ display:flex; align-items:center; gap:10px; padding:5px 14px; }
.lanc-item:hover{ background:rgba(29,39,51,.02); }
.lanc-cod{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  color:var(--tinta-3); min-width:30px; }
.lanc-nome{ flex:1; font-size:13px; color:var(--tinta-2); }
.lanc-item input{ width:130px; text-align:right; }

/* ---- ficha (topo de página de detalhe) ---- */
.ficha-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ficha-topo h2{ font-size:23px; font-weight:680; letter-spacing:-.03em; color:var(--tinta); margin-top:3px; }

/* Posição no ranking. Número grande à esquerda porque a pergunta que
   se faz nesta tela é "quem está em cima", não "qual a nota". */
.rank-pos{ display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:9px;
  background:rgba(29,39,51,.06); font-size:12px; font-weight:700; color:var(--tinta-2); }
.lista-item:nth-child(1) .rank-pos{ background:rgba(234,174,46,.22); color:#8a6410; }
.lista-item:nth-child(2) .rank-pos{ background:rgba(29,39,51,.10); }
.lista-item:nth-child(3) .rank-pos{ background:rgba(194,95,0,.15); color:#8a4700; }

/* Cartão do funil de expansão. O do quadro de tarefas já existia, mas
   ali cada linha é um parágrafo; aqui são três dados curtos que
   precisam de linha própria, senão nome, região e capital viram uma
   frase só e o cartão deixa de ser escaneável. */
.q-cartao strong{ display:block; font-size:13.2px; font-weight:640; color:var(--tinta);
  letter-spacing:-.01em; margin-bottom:3px; }
.q-meta{ display:block; font-size:11.5px; line-height:1.45; color:var(--tinta-3); }
.q-cartao{ text-decoration:none; }

/* ============================================================
   ORGANOGRAMA (área RH)
   ------------------------------------------------------------
   Árvore com recuo e guia vertical em vez de caixas ligadas por
   linhas. Uma loja tem 15 a 25 pessoas em três níveis: o desenho
   clássico de caixinhas ficaria mais largo que a tela e obrigaria
   a rolar na horizontal — que é o gesto que faz alguém desistir
   de ler no celular.
   ============================================================ */
.org{ list-style:none; margin:0; padding:0; }
.org .org{ margin-left:17px; padding-left:15px; border-left:1px solid var(--borda-luz); }
.org-no{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.org-ini{ display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:10px;
  background:var(--area-2); color:var(--area-tinta); font-size:11px; font-weight:700; }
.org-txt{ flex:1; min-width:0; }
.org-txt strong{ display:block; font-size:13.2px; font-weight:620; color:var(--tinta); letter-spacing:-.01em; }
.org-txt span{ display:block; font-size:11.5px; color:var(--tinta-3); }

/* Grade de conformidade documento × pessoa. Cada célula é um estado,
   não um valor: por isso ponto colorido e não número. */
.doc-grade{ border-collapse:separate; border-spacing:0; font-size:12px; }
.doc-grade th{ font-weight:600; font-size:11px; color:var(--tinta-3); text-align:center;
  padding:6px 4px; vertical-align:bottom; }
.doc-grade th:first-child{ text-align:left; }
.doc-grade td{ padding:5px 4px; text-align:center; border-top:1px solid var(--borda-luz); }
.doc-grade td:first-child{ text-align:left; white-space:nowrap; }
.pt{ display:inline-block; width:11px; height:11px; border-radius:50%; }
.pt-ok{ background:var(--bom); }
.pt-vence{ background:var(--atencao); }
.pt-falta{ background:rgba(29,39,51,.15); }
.pt-vencido{ background:var(--critico); }

/* ============================================================
   TELAS DA REDE (visão cruzada)
   ------------------------------------------------------------
   Sem menu lateral, porque não são de área nenhuma. A faixa de
   abas substitui o menu: são cinco telas, e cinco cabem numa
   linha — a partir de sete a faixa começaria a rolar e viraria
   um menu pior que o lateral.
   ============================================================ */
.rede-topo{ margin-bottom:14px; }
.rede-tit h1{ font-size:25px; font-weight:690; letter-spacing:-.035em; color:var(--tinta); margin:2px 0 0; }
.rede-tit p{ margin:6px 0 0; max-width:76ch; line-height:1.55; }
.rede-faixa{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:20px; padding:4px;
  background:rgba(29,39,51,.045); border-radius:14px; }
.rede-aba{ display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:11px;
  font-size:12.5px; font-weight:560; color:var(--tinta-2); text-decoration:none;
  transition:background .18s, color .18s; }
.rede-aba svg{ width:15px; height:15px; stroke-width:1.9; }
.rede-aba:hover{ background:rgba(255,255,255,.7); color:var(--tinta); }
.rede-aba.on{ background:#fff; color:var(--tinta); font-weight:640; box-shadow:var(--sombra-p); }

/* Pastilha da área de origem. Nas telas cruzadas, saber DE ONDE veio
   o dado vale tanto quanto o dado: é o que diz a quem perguntar. */
.rede-selo{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  padding:2px 8px; border-radius:20px; white-space:nowrap; }
.rede-selo i{ width:7px; height:7px; border-radius:50%; flex:none; }

/* Cartão de dimensão da nota composta. */
.dim-grade{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.dim{ border:1px solid var(--borda-luz); border-radius:13px; padding:12px 14px;
  background:rgba(255,255,255,.6); }
.dim strong{ display:block; font-size:20px; font-weight:690; letter-spacing:-.03em; color:var(--tinta); }
.dim span{ display:block; font-size:11.5px; color:var(--tinta-3); margin-top:2px; }
.dim-nome{ font-size:11px; font-weight:640; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta-3); margin-bottom:5px; }
.dim-sem{ opacity:.55; }

/* Dia do calendário único. */
.cal-dia{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--borda-luz); }
.cal-dia:last-child{ border-bottom:0; }
.cal-data{ flex:none; width:56px; text-align:center; }
.cal-data b{ display:block; font-size:19px; font-weight:700; letter-spacing:-.03em; color:var(--tinta); }
.cal-data i{ display:block; font-size:10.5px; font-style:normal; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tinta-3); }
.cal-itens{ flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }
.cal-item{ display:flex; align-items:center; gap:9px; text-decoration:none; padding:5px 9px;
  border-radius:10px; background:rgba(255,255,255,.55); border:1px solid var(--borda-luz); }
.cal-item:hover{ background:#fff; box-shadow:var(--sombra-p); }
.cal-item span{ font-size:12.5px; color:var(--tinta-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.cal-cor{ width:4px; align-self:stretch; border-radius:3px; flex:none; }
/* Dia com choque de agenda: duas coisas grandes no mesmo dia. */
.cal-dia.choque .cal-data b{ color:#8f2020; }
.cal-dia.choque{ background:rgba(166,27,27,.045); border-radius:12px; padding-left:8px; }

/* Bloco das telas de cruzamento, na Home. Fica DEPOIS dos cartões das
   áreas: quem chega na Home quer entrar numa área — a visão cruzada é
   uma segunda pergunta, e segunda pergunta não disputa o primeiro
   lugar da tela. */
.home-rede{ margin-top:26px; padding:18px 20px; border-radius:18px;
  border:1px solid var(--borda-luz); background:rgba(255,255,255,.55); }
.home-rede-tit strong{ display:block; font-size:14px; font-weight:660; letter-spacing:-.01em;
  color:var(--tinta); margin-bottom:3px; }
.home-rede-tit .txt-p{ display:block; max-width:70ch; line-height:1.5; }
.home-rede-lista{ display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.home-rede-item{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px;
  background:#fff; border:1px solid var(--borda-luz); text-decoration:none;
  font-size:12.5px; font-weight:570; color:var(--tinta-2); transition:box-shadow .18s, transform .18s; }
.home-rede-item:hover{ box-shadow:var(--sombra-p); transform:translateY(-1px); color:var(--tinta); }
.home-rede-item svg{ width:15px; height:15px; stroke-width:1.9; color:var(--tinta-3); }

/* ============================================================
   VENDAS / ALOHA
   ------------------------------------------------------------
   O painel do Aloha é longo por natureza: são quatro assuntos
   distintos numa tela só. As faixas numeradas existem para que
   quem rola a página saiba em qual dos quatro está, sem ter que
   ler o gráfico para descobrir.
   ============================================================ */
.al-secao{ display:flex; align-items:center; gap:10px; margin:30px 0 14px;
  font-size:15px; font-weight:680; color:var(--tinta); letter-spacing:-.2px; }
.al-secao::after{ content:""; flex:1; height:1px; background:var(--borda); }
.al-num{ display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:23px; border-radius:8px; flex:0 0 23px;
  background:#0F5FA8; color:#fff; font-size:12px; font-weight:700; }
.al-secao.al-vol  .al-num{ background:#00918A; }
.al-secao.al-inv  .al-num{ background:#C25F00; }
.al-secao.al-can  .al-num{ background:#AC3F72; }

/* Bolinha de cor do canal, usada nas tabelas de participação. */
.vnd-canal{ display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:6px; vertical-align:middle; }

/* Linha de comparação do dia: valor, vs D-7, vs média das 5 semanas. */
.al-comp{ display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--borda); font-size:13px; }
.al-comp:last-child{ border-bottom:none; }
.al-comp-rot{ min-width:88px; font-weight:620; color:var(--tinta); }
.al-comp-val{ font-variant-numeric:tabular-nums; font-weight:680; font-size:15px; }
.al-comp-vs{ margin-left:auto; display:flex; gap:16px; text-align:right; }
.al-comp-vs > div{ font-size:11.5px; color:var(--tinta-3); line-height:1.5; }
.al-comp-vs b{ display:block; font-size:13px; }

/* Linha somada no fim de uma tabela de lojas. */
.tab tr.al-soma td{ background:rgba(15,95,168,.07); font-weight:700; }