/* ==========================================================================
   Pesquisa de Opinião Pública · ICPI — folha de estilo

   Linguagem visual: sistema "Organic" (Claude Design, projeto "Dashboard
   moderna em tons pastel", variante 1a). Pastéis verde e azul, superfícies
   claras, cantos generosos e sombra mínima.

   As variáveis antigas (--verde, --areia, --tinta…) continuam existindo e
   apontam para os tokens novos: 30 páginas as usam, e trocar os nomes
   quebraria tudo sem ganho nenhum.
   ========================================================================== */

/* Fontes do sistema Organic. Falham para system-ui sem internet — a coleta
   em campo continua legível, só com outra tipografia. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  /* --- Tokens Organic --- */
  --color-bg:#f2f6f4;
  --color-surface:#e4ece7;
  --color-text:#1d2422;
  --color-accent:#6fb38b;
  --color-accent-2:#6a9fd0;
  --color-divider:rgba(29,36,34,.16);

  --neutral-100:#f8faf8; --neutral-200:#eef2ef; --neutral-300:#dde3df;
  --neutral-400:#c3ccc7; --neutral-500:#a3aeaa; --neutral-600:#84908c;
  --neutral-700:#656f6c; --neutral-800:#47504d; --neutral-900:#2d3432;

  --acc-100:#eef8f1; --acc-200:#d9f0e0; --acc-300:#b9e3c7; --acc-400:#92cea8;
  --acc-500:#6fb38b; --acc-600:#559372; --acc-700:#3f7359; --acc-800:#2b5340; --acc-900:#1c3729;

  --acc2-100:#eef4fb; --acc2-200:#d8e8f7; --acc2-300:#b6d5ef; --acc2-400:#8dbbe2;
  --acc2-500:#6a9fd0; --acc2-600:#5182b3; --acc2-700:#3c6491; --acc2-800:#2a4769; --acc2-900:#1c2f47;

  /* Terceira família: o âmbar do logo do ICPI, na mesma escala de
     luminosidade das outras duas — sem ela, o laranja destoaria. */
  --acc3-100:#fdf4e9; --acc3-200:#f9e5cf; --acc3-300:#f0cfa8; --acc3-400:#e3b077;
  --acc3-500:#d19351; --acc3-600:#af763b; --acc3-700:#8b5b2d; --acc3-800:#664220; --acc3-900:#442c15;

  --font-titulo:"Libre Franklin",system-ui,sans-serif;
  --font-corpo:"IBM Plex Sans",system-ui,sans-serif;

  /* --- Nomes antigos, remapeados para os tokens acima --- */
  --verde-700:var(--acc-800); --verde-600:var(--acc-600); --verde-500:var(--acc-500);
  --verde-100:var(--acc-200); --verde-50:var(--acc-100);
  --verde:var(--acc-800); --verde-2:var(--acc-600);

  --areia:var(--color-bg); --branco:var(--neutral-100); --superficie-2:var(--neutral-200);
  --tinta:var(--color-text); --txt-2:var(--neutral-700); --cinza:var(--neutral-600);
  --linha:var(--color-divider); --linha-forte:var(--neutral-400);

  /* Semânticas em pastel, para conviver com o resto da paleta */
  --amarelo:var(--acc3-600);  --amarelo-bg:var(--acc3-100);
  --azul:var(--acc2-600); --azul-bg:var(--acc2-100);
  --vermelho:#b5615b; --vermelho-bg:#f6e6e4;
  --roxo:#8b7fb8;     --roxo-bg:#efecf7;

  --sombra-1:0 1px 2px rgba(45,52,50,.14);
  --sombra:0 3px 10px rgba(45,52,50,.16);
  --sombra-3:0 12px 32px rgba(45,52,50,.22);

  --raio:28px; --raio-sm:16px;

  --e1:4.4px; --e2:8.8px; --e3:13.2px; --e4:17.6px; --e5:26.4px; --e6:35.2px; --e7:52px;

  /* A lateral deixou de ser escura: no design ela é uma superfície clara */
  --noite:var(--color-surface); --noite-2:var(--acc-200); --noite-txt:var(--neutral-600);
  --lateral:248px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-corpo);
  background:var(--areia); color:var(--tinta); line-height:1.55;
  -webkit-text-size-adjust:100%;
}
body.travado{overflow:hidden}
a{color:var(--verde-2);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Escala tipográfica declarada, em vez de tamanhos avulsos ---- */
h1,h2,h3,h4,.card-titulo{font-family:var(--font-titulo);font-weight:700;letter-spacing:-.02em;line-height:1.12}
h1{font-size:1.55rem;line-height:1.25}
h2{font-size:1.12rem}
h3{font-size:.95rem}
/* Números de indicador e de tabela alinham na vertical */
.num,.ind-valor,.stat b{font-variant-numeric:tabular-nums}

/* ==========================================================================
   Estrutura: lateral fixa escura + topo claro + conteúdo
   ========================================================================== */
.app{display:flex;min-height:100vh}

.side{
  width:var(--lateral);flex:none;background:var(--acc-800);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.side-marca{
  display:flex;align-items:center;justify-content:center;
  padding:1.1rem .9rem;margin:.7rem .7rem 0;background:#fff;
  border-radius:var(--raio-sm);
}
.side-marca img{display:block;width:100%;max-width:170px;height:auto}
.side-marca:hover{text-decoration:none}

.side-nav{flex:1;overflow-y:auto;padding:1rem .6rem 1.4rem}

/* ---- Categorias recolhíveis ---- */
.side-grupo{margin-top:.55rem}
.side-secao{
  display:flex;align-items:center;gap:11px;width:100%;
  color:#9dc4ae;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;padding:.5rem var(--e3);margin-bottom:2px;
  background:transparent;border:0;font-family:inherit;cursor:pointer;
  border-radius:999px;transition:color .14s,background .14s;
}
/* O rótulo empurra a seta para a ponta */
.side-secao .side-rot{flex:1;text-align:left}
.side-secao:hover{color:#fff;background:rgba(255,255,255,.12)}
/* A categoria da página atual fica destacada mesmo recolhida: é a única
   pista de onde o usuário está, já que o item marcado está escondido. */
.side-grupo.tem-atual > .side-secao{color:#fff}
/* Marca da categoria atual: ponto colado ao rótulo, não ao ícone */
.side-grupo.tem-atual > .side-secao .side-rot{position:relative;padding-left:.75rem}
.side-grupo.tem-atual > .side-secao .side-rot::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--acc-400);
}
.side-grupo.tem-atual > .side-secao .side-ico{color:var(--acc-400)}
.side-seta{display:flex;opacity:.7;transition:transform .18s}
.side-seta svg{width:14px;height:14px}
.side-grupo.aberto .side-seta{transform:rotate(180deg)}
/* Recolhido de verdade: sai do fluxo e não recebe foco por tabulação. */
.side-itens{display:none}
/* Aberta, a lista de itens recua e ganha um verde um pouco mais claro: sem
   isso, categoria e item ficavam no mesmo plano e a hierarquia sumia. */
.side-grupo.aberto .side-itens{
  display:block;margin:2px 0 .5rem 14px;padding:5px 5px 5px 8px;
  background:rgba(255,255,255,.07);border-radius:18px;
  border-left:2px solid rgba(255,255,255,.16);
}
.side-itens .side-link{font-size:.84rem}
/* Item do menu em pílula, como no design */
/* Item em pílula. Sobre o verde da lateral, o ativo precisa de um tom bem
   mais escuro — o acc-200 do design se dissolveria no próprio fundo. */
.side-link{
  display:flex;align-items:center;gap:11px;padding:10px var(--e3);margin-bottom:2px;
  border-radius:999px;color:#dbe9e0;font-size:.86rem;font-weight:400;
  transition:background .14s,color .14s;
}
.side-link:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.side-link.atual{background:#fff;color:var(--acc-800);font-weight:600}
.side-ico{display:flex;flex:none;opacity:.9}
.side-link.atual .side-ico{opacity:1}
.side-rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.side-rodape{
  padding:.9rem 1.1rem 1.1rem;border-top:1px solid rgba(255,255,255,.15);
  color:#9dc4ae;font-size:.74rem;line-height:1.35;
}
.side-rodape span{display:block;color:#fff;font-weight:700;font-size:.8rem;
  font-family:var(--font-titulo)}

.side-fundo{position:fixed;inset:0;background:rgba(45,52,50,.5);z-index:38}

/* ---- Coluna de conteúdo ---- */
.conteudo{flex:1;min-width:0;display:flex;flex-direction:column}
.avulso{min-height:100vh}

.topo{
  display:flex;align-items:center;gap:1rem;padding:.85rem var(--e5);
  background:var(--color-bg);border-bottom:1px solid var(--color-divider);
  position:sticky;top:0;z-index:20;
}
.topo-menu{
  display:none;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--color-divider);background:var(--neutral-100);
  border-radius:999px;cursor:pointer;color:var(--tinta);flex:none;
}
.topo-menu:hover{background:var(--acc-100)}
.topo-titulo{flex:1;min-width:0}
.topo-titulo h1{margin:0;font-size:1.18rem;line-height:1.25;font-weight:700}
.topo-sub{display:block;color:var(--cinza);font-size:.8rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.topo-dir{display:flex;align-items:center;gap:.75rem;flex:none}
.topo-papel{
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;
  background:var(--acc2-100);color:var(--acc2-800);border-radius:999px;
  font-size:.72rem;font-weight:600;
}
.topo-user{display:flex;align-items:center;gap:.5rem;min-width:0}
.topo-nome{font-size:.88rem;font-weight:600;max-width:170px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo-sair{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:999px;color:var(--neutral-700);border:1px solid var(--color-divider);
}
.topo-sair:hover{background:var(--vermelho);border-color:var(--vermelho);color:#fff;text-decoration:none}

@media (max-width:1000px){
  .side{
    position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.3);
  }
  .side.aberta{transform:none}
  .topo-menu{display:inline-flex}
  .topo-papel,.topo-nome{display:none}
}
@media (max-width:560px){
  .topo{padding:.7rem .9rem;gap:.6rem}
  .topo-titulo h1{font-size:1.02rem}
  .topo-sub{display:none}
}

/* ---- Planos (autocadastro e tela de assinatura) ---- */
.planos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin-bottom:1rem}
.plano-card{position:relative;display:block;cursor:pointer}
.plano-card input{position:absolute;opacity:0;inset:0;cursor:pointer}
.plano-corpo{
  display:block;border:2px solid var(--linha);border-radius:var(--raio);
  padding:1rem;background:#fdfdfb;height:100%;
}
.plano-card input:checked + .plano-corpo{border-color:var(--verde);background:#f2f8f5}
.plano-card input:focus-visible + .plano-corpo{outline:2px solid var(--verde-2)}
.plano-corpo strong{display:block;color:var(--verde);font-size:1.05rem}
.plano-preco{display:block;font-weight:700;margin:.2rem 0 .5rem}
.plano-lim{display:block;color:var(--cinza);font-size:.85rem;line-height:1.5}

/* Barra de uso do plano */
.uso-item{margin-bottom:.9rem}
.uso-item .rot{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:.25rem}
.uso-barra{height:8px;background:#e9e7de;border-radius:999px;overflow:hidden}
.uso-barra span{display:block;height:100%;background:var(--verde-2)}
.uso-barra.cheio span{background:var(--vermelho)}

/* ---- Layout ---- */
/* O conteúdo respira dentro da coluna: largura generosa, não mais a caixa
   estreita de antes, que fazia sentido quando a navegação era horizontal. */
.container{max-width:1280px;margin:0 auto;width:100%;padding:1.5rem 1.6rem 3rem}
.foot{
  max-width:1280px;margin:0 auto;width:100%;padding:0 1.6rem 2rem;color:var(--cinza);
  font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}
.avulso .container{max-width:520px;padding-top:3rem}
@media (max-width:560px){
  .container{padding:1rem .9rem 2.5rem}
  .foot{padding:0 .9rem 1.5rem}
}

/* ---- Home ---- */
.hero{
  background:var(--acc-200);color:var(--acc-900);
  border-radius:var(--raio);padding:var(--e6) var(--e5);margin-bottom:var(--e4);
}
.hero h1{margin:.2rem 0 .4rem;font-size:1.8rem;line-height:1.2}
.hero p{margin:0;opacity:.88;max-width:56ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  column-gap:var(--e4);row-gap:var(--e5)}
.card{
  background:var(--acc-200);border:0;border-radius:var(--raio);
  padding:var(--e5);box-shadow:none;display:block;color:inherit;
  transition:transform .15s,box-shadow .15s;
}
.card:nth-child(3n+2){background:var(--acc2-200)}
.card:nth-child(3n+3){background:var(--acc3-200)}
.card:hover{text-decoration:none;transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(16,24,40,.08),0 16px 32px rgba(16,24,40,.09)}
.card .ico{font-size:1.8rem}
.card h3{margin:.5rem 0 .3rem;color:var(--verde)}
.card p{margin:0;color:var(--cinza);font-size:.9rem}

/* Cartões de indicador. O ícone em quadrado colorido é opcional: onde a
   página não o emite, o cartão continua correto, só sem ícone. */
/* Linha com folga maior que a coluna: cartões de fileiras diferentes
   encostando parecem um bloco só. */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  column-gap:var(--e4);row-gap:var(--e5);margin:var(--e5) 0}
/* Indicador no padrão do design: rótulo pequeno em maiúsculas, número
   grande logo abaixo e a variação no pé. Cada caixa num tom pastel,
   alternando verde e azul. */
.stat{
  position:relative;
  background:var(--acc-200);border:0;border-radius:22px;
  padding:var(--e4) var(--e5) var(--e4);box-shadow:none;
  transition:transform .16s,box-shadow .16s;
  display:flex;flex-direction:column;gap:2px;
}
.stat:nth-child(6n+2){background:var(--acc2-200)}
.stat:nth-child(6n+3){background:var(--acc3-200)}
.stat:nth-child(6n+4){background:var(--acc-100)}
.stat:nth-child(6n+5){background:var(--acc2-100)}
.stat:nth-child(6n+6){background:var(--acc3-100)}
/* Rótulo acima do número: é ele que diz o que se está lendo */
.stat > span{order:-1;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc-800);
  padding-right:42px;line-height:1.35;min-height:2.2em}
.stat:nth-child(6n+2) > span,.stat:nth-child(6n+5) > span{color:var(--acc2-800)}
.stat:nth-child(6n+3) > span,.stat:nth-child(6n+6) > span{color:var(--acc3-800)}
.stat b{font-size:2.4rem;letter-spacing:-.03em}
/* A variação fica no fluxo, sob o número e alinhada à esquerda — como no
   design. Ancorada à direita, ela disputava o canto com o ícone. */
.stat .delta{align-self:flex-start;margin-top:.15rem;background:transparent;
  padding:0;font-size:.8rem;font-weight:600;color:var(--acc-700)}
.stat:nth-child(6n+2) .delta,.stat:nth-child(6n+5) .delta{color:var(--acc2-700)}
.stat:nth-child(6n+3) .delta,.stat:nth-child(6n+6) .delta{color:var(--acc3-700)}
.stat:hover{box-shadow:var(--sombra-1);transform:translateY(-2px)}
.stat-topo{position:absolute;top:var(--e4);right:var(--e4);margin:0;
  display:flex;align-items:center;gap:.4rem}
.stat-ico{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.6);color:var(--acc-800);opacity:.85}
.stat:nth-child(6n+2) .stat-ico,.stat:nth-child(6n+5) .stat-ico{color:var(--acc2-800)}
.stat:nth-child(6n+3) .stat-ico,.stat:nth-child(6n+6) .stat-ico{color:var(--acc3-800)}
.stat-ico.amarelo{background:var(--amarelo-bg);color:#8a6100}
.stat-ico.azul{background:var(--azul-bg);color:var(--azul)}
.stat-ico.roxo{background:var(--roxo-bg);color:var(--roxo)}
.stat-ico.vermelho{background:var(--vermelho-bg);color:var(--vermelho)}
.stat b{display:block;font-family:var(--font-titulo);font-size:2.1rem;
  color:var(--color-text);line-height:1.05;font-weight:700;letter-spacing:-.02em}
/* Selo de variação ao lado do ícone */
.delta{display:inline-flex;align-items:center;gap:.2rem;font-size:.76rem;font-weight:700;
  padding:.16rem .5rem;border-radius:999px;background:var(--superficie-2);color:var(--cinza)}
.delta.sobe{background:var(--verde-50);color:var(--verde-600)}
.delta.desce{background:var(--vermelho-bg);color:var(--vermelho)}
.delta.atencao{background:var(--amarelo-bg);color:#8a6100}

/* ---- Login ---- */
.login-box{max-width:380px;margin:2.5rem auto;background:#fff;border:1px solid var(--linha);
  border-radius:var(--raio);padding:1.8rem;box-shadow:var(--sombra)}
.login-logo{display:block;width:100%;max-width:260px;height:auto;margin:0 auto 1.3rem}
.login-box h1{margin:.1rem 0 .2rem;color:var(--verde);font-size:1.5rem}
.login-box .sub{margin:0 0 1.2rem;color:var(--cinza);font-size:.9rem}
.login-box label{display:block;font-weight:600;margin-bottom:.9rem;font-size:.92rem}
.login-box input{width:100%;margin-top:.35rem;padding:.7rem .8rem;border:1px solid var(--linha);
  border-radius:10px;font:inherit;background:#fdfdfb}
.login-box input:focus{outline:2px solid var(--verde-2);border-color:transparent}

/* ---- Formulário ---- */
.bloco{
  background:var(--neutral-100);border:1px solid var(--color-divider);
  border-radius:var(--raio);padding:var(--e5) var(--e5) .4rem;margin-bottom:var(--e4);
  box-shadow:none;
}
.bloco > h2{
  display:flex;align-items:center;gap:.6rem;margin:.1rem 0 1rem;
  color:var(--verde);font-size:1.15rem;
}
.bloco > h2 .num{
  background:var(--verde);color:#fff;width:1.7rem;height:1.7rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;flex:0 0 auto;
}
.campo{margin-bottom:1.1rem}
.campo > label{display:block;font-weight:600;margin-bottom:.4rem}
.campo .dica{display:block;font-weight:400;color:var(--cinza);font-size:.82rem;margin-top:-.2rem;margin-bottom:.4rem}
input[type=text],textarea,input[type=search]{
  width:100%;padding:.6rem 14px;border:1px solid var(--color-divider);border-radius:999px;
  font:inherit;background:var(--color-surface);
}
textarea{min-height:90px;resize:vertical;border-radius:var(--raio-sm)}
.campo-select{width:100%;padding:.6rem 14px;border:1px solid var(--color-divider);
  border-radius:999px;font:inherit;background:var(--color-surface);max-width:420px}
.campo-select:focus{outline:2px solid var(--verde-2);border-color:transparent}
input[type=text]:focus,textarea:focus{outline:2px solid var(--verde-2);border-color:transparent}
.opcoes{display:flex;flex-wrap:wrap;gap:.5rem}
.opcao{
  position:relative;
}
.opcao input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opcao span{
  display:inline-block;padding:.5rem .9rem;border:1px solid var(--linha);border-radius:999px;
  background:#fdfdfb;cursor:pointer;font-size:.92rem;user-select:none;
}
.opcao input:checked + span{background:var(--verde);color:#fff;border-color:var(--verde)}
.opcao input:focus-visible + span{outline:2px solid var(--verde-2)}

.acoes{
  position:sticky;bottom:0;background:linear-gradient(transparent,var(--areia) 30%);
  padding:1rem 0;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
}
/* Hierarquia de botões: sólido = ação principal da tela; contorno =
   alternativa; discreto = ação lateral. Antes tudo tinha o mesmo peso e o
   olho não achava a ação principal. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border:1px solid transparent;border-radius:var(--raio-sm);
  padding:var(--e2) calc(var(--e3) * 1.2);font-family:var(--font-titulo);
  font-size:14px;font-weight:700;border-radius:999px;
  cursor:pointer;background:var(--acc-500);color:var(--color-bg);box-shadow:none;
  transition:background .14s,box-shadow .14s,border-color .14s;line-height:1.2;
  text-decoration:none;
}
.btn:hover{background:var(--acc-600);text-decoration:none}
.btn:active{background:var(--acc-700)}
.btn.sec{background:transparent;color:var(--color-text);border-color:var(--color-divider)}
.btn.sec:hover{background:rgba(29,36,34,.07)}
.btn.discreto{background:transparent;color:var(--acc-600);box-shadow:none}
.btn.discreto:hover{background:var(--acc-100)}
.btn:focus-visible{outline:2px solid var(--acc-500);outline-offset:2px}
.btn.block{width:100%;text-align:center}
.btn.pequeno{padding:.38rem .75rem;font-size:.82rem}
.identificador{display:flex;gap:.6rem;align-items:center;margin-bottom:1.1rem;flex-wrap:wrap}
.identificador input{max-width:280px}
.geo-status{font-size:.82rem;padding:.35rem .7rem;border-radius:999px;white-space:nowrap}
.geo-buscando{background:#fff7e0;color:#6b5300;border:1px solid #f2d98a}
.geo-ok{background:#e6f6ee;color:#12603f;border:1px solid #9fd9bb}
.geo-erro{background:#fdecea;color:#8a1c14;border:1px solid #f1b0a8}

.aviso{background:#fff7e0;border:1px solid #f2d98a;color:#6b5300;padding:.8rem 1rem;
  border-radius:10px;margin-bottom:1rem;font-size:.9rem}
.sucesso{background:#e6f6ee;border:1px solid #9fd9bb;color:#12603f;padding:1rem 1.2rem;
  border-radius:12px;margin-bottom:1.2rem}
.sucesso b{font-size:1.05rem}

/* ---- Painel de resultados ---- */
.painel-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--e4);
  flex-wrap:wrap;margin-bottom:var(--e5)}
.painel-topo h1{margin:0;color:var(--tinta);font-size:1.55rem}
.filtro{display:flex;gap:.5rem;flex-wrap:wrap}
.res-bloco{margin-bottom:var(--e6)}
.res-bloco > h2{color:var(--tinta);font-size:1.12rem;border-bottom:1px solid var(--linha);
  padding-bottom:.55rem;margin-bottom:var(--e4)}
/* Gráficos lado a lado: três por linha no desktop, dois no tablet e um no
   celular — colunas fixas para as fileiras ficarem sempre alinhadas. */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--e4);row-gap:var(--e5);align-items:start}
@media (max-width:1000px){ .res-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .res-grid{grid-template-columns:1fr} }
/* Respostas abertas ocupam a linha inteira — texto corrido não ganha nada
   espremido em meia largura. */
.res-grid .res-q.largo{grid-column:1/-1}
.res-q{background:var(--neutral-100);border:1px solid var(--color-divider);
  border-radius:var(--raio);padding:var(--e4) var(--e5);margin-bottom:var(--e3);
  box-shadow:none}
/* Nos gráficos o fundo alterna em tons bem lavados: dá variação sem tirar
   legibilidade das fatias, que já são coloridas. */
.res-grid .res-q:nth-child(3n+1){background:var(--acc-100);border-color:transparent}
.res-grid .res-q:nth-child(3n+2){background:var(--acc2-100);border-color:transparent}
.res-grid .res-q:nth-child(3n+3){background:var(--acc3-100);border-color:transparent}
.res-grid .res-q{margin-bottom:0}
.res-q h3{margin:.1rem 0 .8rem;font-size:1rem}
.res-q .semdados{color:var(--cinza);font-style:italic;font-size:.9rem}
.grafico{position:relative;width:100%;max-width:540px;margin:.3rem auto .2rem}

/* ---- Monitoramento ---- */
.mapa{height:440px;border-radius:var(--raio);border:1px solid var(--linha);box-shadow:var(--sombra);margin-bottom:1.2rem;z-index:0}
.live-dot{color:#2e9e5b;font-weight:700;font-size:.85rem;animation:pisca 1.6s infinite}
@keyframes pisca{50%{opacity:.35}}
.tabela-wrap{overflow-x:auto;background:var(--neutral-100);
  border:1px solid var(--color-divider);border-radius:var(--raio);box-shadow:none}
.monitor-tabela{width:100%;border-collapse:collapse;font-size:.9rem}
.monitor-tabela th,.monitor-tabela td{padding:.8rem 1.1rem;text-align:left;border-bottom:1px solid var(--linha)}
.monitor-tabela th{background:transparent;color:var(--neutral-700);font-size:11px;
  font-weight:500;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
/* Hover na linha inteira: ajuda a percorrer tabela larga sem perder a linha */
.monitor-tabela tbody tr{transition:background .12s}
.monitor-tabela tbody tr:hover{background:rgba(29,36,34,.04)}
.monitor-tabela tbody tr:last-child td{border-bottom:0}
.monitor-tabela td.num{text-align:right;font-variant-numeric:tabular-nums}
.monitor-tabela td.coord{font-family:ui-monospace,Consolas,monospace;font-size:.82rem;color:var(--cinza)}
.badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700}
.badge.on{background:#e6f6ee;color:#12603f}
.badge.off{background:#eef0ec;color:#6b7770}
.monitor-tabela code{background:#f0efe8;padding:.1rem .35rem;border-radius:5px;font-size:.85rem}
.form-inline{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end}
.form-inline .campo{margin-bottom:.4rem;flex:1;min-width:160px}
.form-inline .campo label{font-size:.85rem}
.form-inline select{width:100%;padding:.7rem .8rem;border:1px solid var(--linha);border-radius:10px;font:inherit;background:#fdfdfb}
.acoes-cel{display:flex;gap:.35rem;flex-wrap:nowrap;align-items:center;justify-content:flex-end}
.acao-form{display:flex;gap:.3rem;align-items:center;margin:0}

/* ---- Ícones e linhas de tabela ---------------------------------------- */
.ico-svg{display:block;flex:0 0 auto}

/* Botão só de ícone: quadrado, com dica no hover (title) */
.btn-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid var(--linha);border-radius:10px;
  background:#fff;color:var(--cinza);cursor:pointer;transition:.15s;
}
.btn-ico:hover{background:var(--verde);border-color:var(--verde);color:#fff}
.btn-ico.perigo:hover{background:var(--vermelho);border-color:var(--vermelho)}
.btn-ico.ativo{color:var(--verde-2);border-color:#cfe4d9;background:#f2f8f5}

/* Avatar com iniciais, na coluna do nome */
.pessoa{display:flex;align-items:center;gap:.6rem;min-width:0}
.avatar{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--acc-400);color:var(--acc-900);
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;
}
.pessoa-nome{font-weight:600;line-height:1.2}
.pessoa-sub{color:var(--cinza);font-size:.78rem}

/* Perfil como etiqueta com ícone */
.papel{
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  padding:.25rem .6rem;border-radius:999px;font-size:.78rem;font-weight:600;
  background:#eef0ec;color:var(--cinza);
}
.papel.admin{background:#efe7fb;color:#5b3ea8}
.papel.cliente{background:#e7effb;color:#1f4e9c}
.papel.coordenador{background:#fdf1d8;color:#8a6100}
.papel.entrevistador{background:#e6f6ee;color:#12603f}

/* Situação: bolinha + texto, mais discreto que a pílula cheia */
.situacao{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--cinza)}
.situacao::before{content:"";width:8px;height:8px;border-radius:50%;background:#c3c8c2}
.situacao.on{color:#12603f}
.situacao.on::before{background:#2e9e5b}

/* Campo de senha que só aparece ao clicar na chave */
.senha-inline{display:none;align-items:center;gap:.3rem}
.senha-inline.aberto{display:flex}

.monitor-tabela td{vertical-align:middle}
.monitor-tabela td.acoes-cel{white-space:nowrap}
/* Ação dentro de tabela: discreta por padrão, para não competir com o
   conteúdo. Ganha contorno no hover. */
.mini{border:1px solid transparent;border-radius:8px;padding:.35rem .65rem;font:inherit;
  font-size:.82rem;font-weight:600;cursor:pointer;background:transparent;
  color:var(--verde-600);text-decoration:none;display:inline-flex;align-items:center;
  gap:.3rem;transition:.14s}
.mini:hover{background:var(--verde-50);border-color:var(--verde-100);text-decoration:none}
.mini.danger{color:var(--vermelho)}
.mini.danger:hover{background:var(--vermelho-bg);border-color:#f3c4bf}
.mini-input{padding:.4rem .6rem;border:1px solid var(--linha);border-radius:8px;font:inherit;font-size:.82rem;max-width:130px}
.filtro select,.filtro input[type=date]{padding:.5rem 14px;border-radius:999px;
  border:1px solid var(--color-divider);font:inherit;background:var(--color-surface)}
.pt-cor{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:.45rem;vertical-align:middle}
.legenda-mapa{background:rgba(255,255,255,.94);padding:.6rem .8rem;border-radius:10px;
  box-shadow:0 1px 6px rgba(0,0,0,.2);font-size:.8rem;line-height:1.6;max-height:180px;overflow:auto}
.legenda-mapa .pt{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.4rem;vertical-align:middle}
.barra{margin:.35rem 0}
.barra .rot{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:.15rem}
.barra .rot .val{color:var(--cinza)}
.barra .track{background:#eef0ec;border-radius:999px;height:12px;overflow:hidden}
.barra .fill{height:100%;border-radius:999px;background:var(--verde-2);
  min-width:2px;transition:width .5s ease}
.barra.rank .fill{background:var(--azul)}
.lista-abertas{margin:0;padding:0;list-style:none}
.lista-abertas li{border-bottom:1px dashed var(--linha);padding:.45rem 0;font-size:.92rem}
.lista-abertas li:last-child{border:0}
.lista-abertas .meta{color:var(--cinza);font-size:.78rem}
.mais{color:var(--cinza);font-size:.82rem;margin-top:.4rem}

/* ---- Gravação da entrevista (coleta.asp) ---- */
/* Enquanto a entrevista não começa, o questionário fica visível mas inerte:
   deixa o entrevistador ver o que vem pela frente sem responder antes da hora. */
form.bloqueado{opacity:.45;pointer-events:none;filter:grayscale(.4)}
.gravando{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--vermelho)}
.ponto-rec{width:11px;height:11px;border-radius:50%;background:var(--vermelho);
  animation:pulso-rec 1.2s ease-in-out infinite}
@keyframes pulso-rec{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.75)}}
@media (prefers-reduced-motion:reduce){.ponto-rec{animation:none}}

/* ---- Gravações na auditoria ---- */
.grav-lista{margin:0;padding:0;list-style:none}
.grav-item{border:1px solid var(--linha);border-radius:12px;padding:.75rem .9rem;margin-bottom:.7rem;background:#fff}
.grav-topo{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;justify-content:space-between}
.grav-quem{font-weight:700}
.grav-meta{color:var(--cinza);font-size:.8rem}
.grav-item audio{width:100%;margin-top:.55rem}
.grav-texto{margin-top:.55rem;font-size:.88rem;line-height:1.55;background:#f7f9f7;
  border-radius:10px;padding:.6rem .7rem;white-space:pre-wrap;max-height:11rem;overflow:auto}
.grav-sem{color:var(--cinza);font-size:.84rem;margin-top:.5rem}
.grav-fonte{font-size:.72rem;color:var(--cinza);text-transform:uppercase;letter-spacing:.04em}
.opcao-mini{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--cinza);cursor:pointer}
.opcao-mini input{margin:0;width:16px;height:16px;accent-color:var(--verde-2);cursor:pointer}

/* ---- Filtro por tipo de alerta (auditoria.asp) ---- */
.filtro-tipos{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .7rem;border-radius:999px;
  border:1px solid var(--linha);background:#fff;color:var(--cinza);font-size:.82rem;
  text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--verde-2);color:var(--verde-2)}
.chip.atual{background:var(--verde-2);border-color:var(--verde-2);color:#fff}
.chip-n{background:#eef0ec;color:var(--cinza);border-radius:999px;padding:0 .4rem;
  font-size:.72rem;font-weight:700;min-width:1.2rem;text-align:center}
.chip.atual .chip-n{background:rgba(255,255,255,.35);color:var(--acc-900)}
.chip-tipo{display:inline-block;background:#eef0ec;border-radius:6px;padding:.05rem .4rem;
  margin-right:.35rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}

/* ---- Consentimento da gravação (coleta.asp) ---- */
.consent-caixa{
  border:1px solid var(--verde-2);border-left-width:4px;border-radius:12px;
  background:#f2f8f5;padding:.85rem 1rem;margin:.2rem 0 .9rem;
}
.consent-rot{
  display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--verde-2);margin-bottom:.35rem;
}
.consent-texto{margin:0;font-size:1rem;line-height:1.6}
.consent-botoes{display:flex;flex-wrap:wrap;gap:.6rem}
.sem-gravacao{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--cinza)}
.consent-nao{color:var(--cinza);font-size:.8rem;font-weight:700}
.grav-consent-resumo{margin:0 0 .9rem;font-size:.88rem;color:var(--cinza)}
.grav-consent-resumo b{color:var(--tinta)}
.grav-consent-resumo .grav-fonte{display:block;margin-top:.2rem}

/* ---- Estados que faltavam ------------------------------------------------
   Tela vazia com ícone, explicação e a ação que resolve; e esqueleto de
   carregamento para as telas que demoram (Análise, Auditoria). */
.vazio{text-align:center;padding:var(--e7) var(--e5);background:#fff;
  border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra-1)}
.vazio-ico{width:56px;height:56px;border-radius:16px;background:var(--verde-50);
  color:var(--verde-600);display:grid;place-items:center;margin:0 auto var(--e4)}
.vazio h3{margin:0 0 .3rem;font-size:1.02rem}
.vazio p{color:var(--txt-2);font-size:.9rem;max-width:38ch;margin:0 auto var(--e4)}

.esqueleto{background:linear-gradient(90deg,#eef1f5 25%,#e2e7ee 37%,#eef1f5 63%);
  background-size:400% 100%;animation:brilho 1.4s ease infinite;border-radius:6px}
@keyframes brilho{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.esqueleto{animation:none}}

/* ---- Selos de situação (padroniza badge/situação nas tabelas) ---- */
.selo{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;
  border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap}
.selo::before{content:"●";font-size:.7em;line-height:1}
.selo.ok{background:var(--verde-50);color:var(--verde-600)}
.selo.medio{background:var(--amarelo-bg);color:#8a6100}
.selo.risco{background:var(--vermelho-bg);color:var(--vermelho)}
.selo.info{background:var(--azul-bg);color:var(--azul)}
.selo.neutro{background:var(--superficie-2);color:var(--cinza)}

/* Topo com leve transparência: o conteúdo passa por baixo sem sumir a barra */
.topo{background:color-mix(in srgb,var(--color-bg) 86%,transparent);backdrop-filter:blur(10px)}

/* ---- Início ---------------------------------------------------------------
   A faixa de abertura substitui o painel de apresentação: em vez de repetir
   o nome do produto, diz qual pesquisa está aberta e em que pé ela está. */
.abertura{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e5);flex-wrap:wrap;
  background:var(--acc-200);color:var(--acc-900);
  border-radius:var(--raio);padding:var(--e5) var(--e6);margin-bottom:var(--e5);
  box-shadow:none;
}
.abertura-ola{display:block;color:var(--acc-700);font-size:.85rem;margin-bottom:.15rem}
.abertura h1{margin:0;font-size:1.7rem;line-height:1.12;color:var(--acc-900)}
.abertura p{margin:.5rem 0 0;color:var(--acc-800);font-size:.88rem;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.abertura code{background:rgba(255,255,255,.55);padding:.12rem .5rem;border-radius:999px;
  font-size:.8rem;color:var(--acc-900)}
.abertura-acoes{display:flex;gap:.6rem;flex-wrap:wrap}
.abertura .btn.sec{background:rgba(255,255,255,.6);color:var(--acc-900);border-color:transparent}
.abertura .btn.sec:hover{background:#fff}

.inicio-grade{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--e5);align-items:start}
@media (max-width:860px){.inicio-grade{grid-template-columns:1fr}}

/* Atalhos: alvo grande, sem parágrafo de propaganda */
.atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--e3)}
.atalho{
  display:flex;align-items:center;gap:.65rem;padding:.7rem .8rem;border:1px solid var(--linha);
  border-radius:var(--raio-sm);color:var(--tinta);font-size:.9rem;font-weight:600;
  background:#fff;transition:.15s;
}
.atalho:hover{border-color:var(--acc-300);background:var(--acc-100);
  color:var(--acc-800);text-decoration:none;transform:translateY(-1px)}
.atalho-ico{width:34px;height:34px;border-radius:999px;flex:none;display:grid;place-items:center;
  background:var(--acc-200);color:var(--acc-800)}
.atalho:nth-child(3n+2) .atalho-ico{background:var(--acc2-200);color:var(--acc2-800)}
.atalho:nth-child(3n+3) .atalho-ico{background:var(--acc3-200);color:var(--acc3-800)}
.atalho-ico.azul{background:var(--azul-bg);color:var(--azul)}
.atalho-ico.roxo{background:var(--roxo-bg);color:var(--roxo)}
.atalho-ico.amarelo{background:var(--amarelo-bg);color:#8a6100}
.atalho-ico.vermelho{background:var(--vermelho-bg);color:var(--vermelho)}

/* Últimas entrevistas */
.linha-tempo{list-style:none;margin:0;padding:0}
.linha-tempo li{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;
  border-bottom:1px solid var(--linha)}
.linha-tempo li:last-child{border-bottom:0}
.linha-tempo .avatar{width:32px;height:32px;font-size:.72rem}
.linha-tempo-txt b{display:block;font-size:.9rem;font-weight:600;line-height:1.25}
.linha-tempo-txt small{color:var(--cinza);font-size:.78rem}

/* ---- Barra de relatório ---- */
.relatorio-acoes{display:flex;gap:.45rem;flex-wrap:wrap}

/* ==========================================================================
   Impressão / PDF
   O navegador é quem gera o PDF ("Salvar como PDF" no diálogo de impressão),
   então o trabalho aqui é entregar a página já pronta para o papel: sem
   navegação, sem filtros, sem botões, e sem quebrar cartão no meio.
   ========================================================================== */
.so-impressao{display:none}

@media print{
  /* A4 retrato com margem de 15mm: sobram ~180mm de largura útil, que é o
     que o conteúdo abaixo é obrigado a respeitar. */
  @page{size:A4 portrait;margin:15mm}

  html,body{background:#fff;width:auto;margin:0}
  body{font-size:10pt;line-height:1.4}

  /* Fora do papel: navegação e controles */
  .side,.side-fundo,.topo,.foot,.relatorio-acoes,.filtro,
  .btn,.mini,.btn-ico,.chip,.filtro-tipos,.side-encolher{display:none !important}

  /* A coluna de conteúdo ocupa a folha inteira. O max-width de 1280px do
     desktop estouraria a página e o navegador cortaria a direita. */
  .app{display:block}
  .conteudo{display:block}
  .container{max-width:100% !important;width:100% !important;padding:0;margin:0}
  /* Nada pode ser mais largo que a folha */
  *{max-width:100%}
  /* Exceto o interior do mapa: o Leaflet posiciona ladrilhos em pixels e os
     recorta no próprio contêiner. Limitar a largura deles deforma o mapa. */
  .leaflet-container *{max-width:none}

  .so-impressao{display:block}
  .impressao-cab{display:flex;align-items:center;gap:10px;
    border-bottom:2px solid #2b5340;padding-bottom:8px;margin-bottom:14px}
  .impressao-cab img{height:30px;width:auto}
  .impressao-cab strong{display:block;font-size:12pt;color:#2b5340}
  .impressao-cab span{display:block;font-size:8pt;color:#555}

  /* ---- Grades: menos colunas no papel ----
     Três gráficos lado a lado ficam com ~55mm cada e ilegíveis. */
  .res-grid{grid-template-columns:repeat(2,1fr) !important;
    column-gap:8mm !important;row-gap:8mm !important}
  .stat-row{grid-template-columns:repeat(2,1fr) !important;
    column-gap:6mm !important;row-gap:6mm !important}
  .inicio-grade,.cards,.atalhos{grid-template-columns:1fr !important;gap:6mm !important}

  /* Cartão não pode partir entre páginas */
  .res-q,.bloco,.stat,.grav-item,.tabela-wrap,.vazio,.abertura{
    break-inside:avoid;page-break-inside:avoid;
    box-shadow:none;border:1px solid #d5dae1;
  }
  .res-bloco > h2,.painel-topo{break-after:avoid;page-break-after:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  h1{font-size:15pt}
  h2{font-size:12pt}
  h3{font-size:10.5pt}
  .stat b{font-size:20pt}

  /* Cores de fundo saem por padrão na impressão: força os selos e barras */
  .selo,.stat,.stat-ico,.papel,.delta,.uso-barra span,.barra-fita,
  .res-grid .res-q,.abertura,.hero,.atalho-ico{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  /* ---- Gráficos ----
     O Chart.js escreve width/height em atributos no <canvas>; sem forçar
     aqui, ele imprime no tamanho da tela e vaza a margem da folha. */
  .grafico{max-width:100% !important;height:auto !important}
  canvas{max-width:100% !important;width:100% !important;height:auto !important}

  /* ---- Tabelas ----
     table-layout fixo distribui as colunas dentro da largura da folha em vez
     de estourar; a quebra de palavra evita coluna espremida com texto cortado. */
  .tabela-wrap{overflow:visible !important;border-radius:0}
  .monitor-tabela{table-layout:fixed;width:100%}
  .monitor-tabela th{background:#eef1f5 !important;color:#333 !important}
  .monitor-tabela th,.monitor-tabela td{padding:.3rem .4rem;font-size:8.5pt;
    word-wrap:break-word;overflow-wrap:break-word}
  /* Repete o cabeçalho quando a tabela atravessa páginas */
  .monitor-tabela thead{display:table-header-group}
  .monitor-tabela tr{break-inside:avoid;page-break-inside:avoid}

  /* Mapa impresso: altura fixa de tela vira uma faixa proporcional */
  .mapa{height:90mm !important}

  /* Endereço dos links não interessa no relatório */
  a{color:inherit;text-decoration:none}
}

/* ---- Cabeçalho de painel no padrão do design -----------------------------
   Antetítulo curto em maiúsculas, título grande, ações em pílula à direita. */
.painel-topo h1{font-family:var(--font-titulo);font-size:2rem;letter-spacing:-.03em}
.painel-topo > div > p{color:var(--neutral-700);font-size:.86rem}
.painel-topo .filtro select{background:#fff;border-color:transparent;box-shadow:var(--sombra-1)}
.relatorio-acoes .btn.sec{background:#fff;border-color:transparent;box-shadow:var(--sombra-1)}

/* Antetítulo (kicker) — usar como <span class="kicker"> acima do <h1> */
.kicker{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acc-700);margin-bottom:.2rem}

/* Cartão de gráfico: título dentro do próprio bloco colorido, como no mock */
.res-grid .res-q h3{font-family:var(--font-titulo);font-size:1rem;margin-bottom:.6rem}

/* Faixa de abertura do Início: menos peso, mais respiro */
.abertura{background:var(--acc-200)}

/* ---- Recolher a lateral (desktop) ---------------------------------------
   Encolhe para uma faixa de ícones em vez de sumir: a navegação continua a
   um clique, o que não aconteceria se ela virasse gaveta também no desktop. */
.side-encolher{
  display:flex;align-items:center;gap:11px;width:calc(100% - 1.2rem);
  margin:0 .6rem .8rem;padding:9px var(--e3);border:0;border-radius:999px;
  background:rgba(255,255,255,.1);color:#dbe9e0;font:inherit;font-size:.82rem;
  cursor:pointer;transition:background .14s;
}
.side-encolher:hover{background:rgba(255,255,255,.2);color:#fff}
.side-encolher svg{flex:none;transition:transform .2s}

body.menu-encolhido{--lateral:76px}
body.menu-encolhido .side-rot,
body.menu-encolhido .side-seta,
body.menu-encolhido .side-rodape{display:none}
body.menu-encolhido .side-marca{padding:.6rem .4rem;margin:.7rem .5rem 0}
body.menu-encolhido .side-marca img{max-width:44px}
body.menu-encolhido .side-nav{padding:.8rem .5rem}
body.menu-encolhido .side-link{justify-content:center;padding:11px 0}
body.menu-encolhido .side-secao{justify-content:center;padding:.5rem 0}
/* Recolhido, a categoria fica só com o ícone — que agora existe e basta */
body.menu-encolhido .side-secao .side-ico{opacity:.8}
body.menu-encolhido .side-grupo.aberto .side-itens{
  margin:0;padding:0;background:transparent;border-left:0;
}
body.menu-encolhido .side-encolher{justify-content:center;padding:9px 0}
body.menu-encolhido .side-encolher svg{transform:rotate(180deg)}
/* No celular a lateral é gaveta: recolher não faz sentido lá */
@media (max-width:1000px){
  .side-encolher{display:none}
  body.menu-encolhido{--lateral:252px}
  body.menu-encolhido .side-rot,
  body.menu-encolhido .side-seta,
  body.menu-encolhido .side-rodape{display:block}
  body.menu-encolhido .side-link{justify-content:flex-start;padding:10px var(--e3)}
  body.menu-encolhido .side-secao{justify-content:flex-start;padding:.5rem var(--e3)}
  body.menu-encolhido .side-marca img{max-width:170px}
  /* Na gaveta do celular o recuo dos sub-itens volta a valer */
  body.menu-encolhido .side-grupo.aberto .side-itens{
    margin:2px 0 .5rem 14px;padding:5px 5px 5px 8px;
    background:rgba(255,255,255,.07);border-radius:18px;
    border-left:2px solid rgba(255,255,255,.16);
  }
}

/* ---- Escalação de pesquisadores (pesquisa_equipe.asp) ---- */
.escala-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:.6rem;margin-bottom:1rem}
.escala-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;
  border:1px solid var(--color-divider);border-radius:var(--raio-sm);
  background:var(--neutral-100);cursor:pointer;transition:.14s}
.escala-item:hover{border-color:var(--acc-300);background:var(--acc-100)}
.escala-item:has(input:checked){border-color:var(--acc-500);background:var(--acc-100)}
.escala-item input{width:18px;height:18px;flex:none;accent-color:var(--acc-600);cursor:pointer}
.escala-item .avatar{width:30px;height:30px;font-size:.7rem}
.escala-txt{min-width:0}
.escala-txt b{display:block;font-size:.9rem;line-height:1.2}
.escala-txt small{color:var(--cinza);font-size:.76rem}
.escala-item.inativo{opacity:.55}