/* ============================================================
   base.css — reset, lâmina, menu lateral, barra de topo, corpo
   Sistema da Técnica — TI24h · site funcional, etapa 1.
   Valores EXTRAÍDOS do mock aprovado
   03-Planejamento/plataforma/mock/MOCK-PLATAFORMA-COMPLETO-66-TELAS-v.A.html
   (escala compacta v.A). Não engordar: qualquer número aqui que
   mude deixa de ser o aprovado.
   ============================================================ */

/* ============================================================ base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--fundo-moldura);overflow:hidden;
  font-family:Pop,system-ui,sans-serif;
  font-size:13px;line-height:1.5;letter-spacing:-.01em;color:var(--txt-padrao);
  -webkit-font-smoothing:antialiased}
/* o mock tinha 34px de padding no topo, reservados para a barra preta de
   prova. O site não tem essa barra: o padding sai, e nada mais muda. */
svg.i{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
b,strong{font-weight:600}
i,em{font-style:normal}
/* ======================= lamina */
/* a aplicacao ocupa exatamente a altura da janela. */
.tela{display:none}
.tela.ver{display:block;height:100%}
.quadro{margin:0;height:100%;min-height:300px;
  background:var(--fundo-main);border-radius:0;
  display:flex;overflow:hidden;box-shadow:none;
  position:relative}
/* site publicado: sem moldura — a aplicação ocupa a janela inteira */
/* ======================= menu lateral */
.lateral{width:228px;flex:0 0 228px;display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--borda-sutil);background:var(--fundo-menu)}
.marca{height:52px;display:flex;align-items:center;gap:8px;padding:0 12px 0 14px;flex:0 0 auto}
.marca .sinal{width:20px;height:20px;border-radius:5px;background:var(--marca-fundo);
  color:var(--marca-texto);font-size:9px;font-weight:600;display:grid;place-items:center;
  letter-spacing:.02em}
.marca .nome{font-size:12.5px;font-weight:600;letter-spacing:.07em;color:var(--txt-forte)}
.marca .recolher{margin-left:auto;color:var(--txt-apoio);display:flex}
/* SO a lista de itens rola; o rodape nunca sai da tela */
.nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:6px;
  scrollbar-width:thin}
.secao{font-size:9.5px;font-weight:500;letter-spacing:.03em;color:var(--txt-apoio);
  padding:0 14px;margin:14px 0 7px}
.item{display:flex;align-items:center;gap:10px;height:30px;margin:1px 20px 1px 10px;
  padding:0 8px;border-radius:var(--r-item);font-size:12.5px;color:var(--txt-padrao);
  position:relative}
.item .i{color:var(--txt-apoio)}
.item .rot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.ativo{background:var(--ativo-fundo);color:var(--txt-forte);font-weight:500}
.item.ativo .i{color:var(--txt-forte)}
.item.ativo{padding-left:12px}
.item.ativo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:var(--r-item) 0 0 var(--r-item);background:var(--ativo-marca)}
.item .cont{margin-left:auto;background:var(--est-neutro-bg);color:var(--est-neutro-tx);
  font-size:10px;font-weight:600;line-height:1;padding:3px 5px;border-radius:5px}
.sub{position:relative;margin:2px 0 4px 27px}
.sub::before{content:"";position:absolute;left:0;top:-2px;bottom:15px;
  border-left:1px dashed var(--borda-forte)}
.subitem{display:flex;align-items:center;gap:8px;height:30px;padding-left:15px;font-size:12px;
  color:var(--txt-apoio);position:relative}
.subitem::before{content:"";position:absolute;left:0;top:50%;width:10px;
  border-top:1px dashed var(--borda-forte)}
.subitem .i{width:13px;height:13px}
.subitem.ativo{color:var(--txt-forte);font-weight:500}
/* rodape do menu: fixo no pe, fundo opaco, a lista passa por tras */
.rodape-menu{flex:0 0 auto;background:var(--fundo-rodape-menu);
  border-top:1px solid var(--borda-sutil)}
.usuario{margin:10px;padding:7px 8px;border:1px solid var(--borda-padrao);
  border-radius:var(--r-painel);display:flex;align-items:center;gap:8px;
  background:transparent}
.usuario .foto{width:27px;height:27px;border-radius:50%;background:var(--txt-forte);color:var(--sobre-acento);
  font-size:9.5px;font-weight:600;display:grid;place-items:center;flex:0 0 auto}
.usuario .quem{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.usuario .quem b{font-size:12px;font-weight:600;color:var(--txt-forte)}
.usuario .quem i{font-size:10px;color:var(--txt-apoio)}
.usuario .i{margin-left:auto;color:var(--txt-fraco);width:14px;height:14px}
/* ======================= topo */
.conteudo{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;position:relative;background:var(--fundo-main)}
/* barra de topo fixa: nao rola com o conteudo */
.topo{height:52px;flex:0 0 auto;display:flex;align-items:center;gap:9px;
  padding:0 16px 0 20px;border-bottom:1px solid var(--borda-sutil);
  background:var(--fundo-topbar)}
.trilha{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt-apoio)}
.trilha .sep{width:13px;height:13px;color:var(--txt-fraco)}
.trilha .atual{color:var(--txt-forte);font-weight:500}
.busca{margin-left:auto;width:262px;height:29px;border:1px solid var(--borda-controle);
  border-radius:7px;display:flex;align-items:center;gap:8px;padding:0 10px;
  color:var(--txt-fraco);font-size:12.5px;background:var(--fundo-campo)}
.busca .i{width:14px;height:14px}
.redondo{width:27px;height:27px;border-radius:50%;border:1px solid var(--borda-controle);
  display:grid;place-items:center;color:var(--txt-apoio);flex:0 0 auto;
  background:var(--fundo-card)}
.redondo .i{width:14px;height:14px}
.redondo .ponto{width:8px;height:8px;border-radius:50%;background:var(--acao);display:block}
/* .avatar: retirado no passo 2 — quem esta logado aparece
   so no cartao do rodape do menu (decisao de 05/10/2026). */
/* ======================= corpo */
/* o conteudo principal rola por conta propria */
.corpo{flex:1 1 auto;min-height:0;padding:20px 20px 20px;display:flex;
  flex-direction:column;overflow-y:auto;overflow-x:hidden;
  background:var(--fundo-main);scrollbar-width:thin}
.cabpag{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px;flex:0 0 auto}
.cabpag h1{font-size:25px;font-weight:600;letter-spacing:-.04em;line-height:1.2;
  color:var(--txt-forte)}
.cabpag .subt{font-size:12.5px;color:var(--txt-apoio);margin-top:1px}
.acoes{margin-left:auto;display:flex;align-items:center;gap:7px;padding-top:5px}
.bt{height:28px;border:1px solid var(--borda-controle);border-radius:7px;
  background:var(--fundo-botao-contorno);
  display:inline-flex;align-items:center;gap:6px;padding:0 10px;font-size:12px;
  color:var(--txt-padrao);white-space:nowrap}
.bt .i{width:14px;height:14px;color:var(--txt-apoio)}
.bt.quad{width:28px;padding:0;justify-content:center}
.bt.cheio{height:29px;padding:0 11px;background:var(--acao);border-color:var(--acao-escuro);
  color:var(--sobre-acento);font-weight:500;font-size:12.5px}
.bt.cheio .i{color:var(--sobre-acento)}
/* ============================================================
   PASSO 2 — pecas que a base nao tinha. Mesmo acabamento:
   mesmos raios, mesmas bordas, mesmos tons, nenhuma cor crua.
   ============================================================ */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
/* --- menu: area recolhivel com sub-itens --- */
.item,.subitem,.gb,.bt,.aba{cursor:pointer}
.item .seta{margin-left:auto;width:14px;height:14px;color:var(--txt-fraco)}
.item.aberta .seta{color:var(--txt-apoio)}
.subitem .cont{margin-left:auto;background:var(--est-neutro-bg);color:var(--est-neutro-tx);
  font-size:10px;font-weight:600;line-height:1;padding:3px 5px;border-radius:5px}
.subitem{overflow:hidden}
.subitem .rot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.subitem.ativo{color:var(--txt-forte);font-weight:500}
.subitem.ativo::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:var(--r-item) 0 0 var(--r-item);background:var(--ativo-marca)}
.sub .subitem.ativo{background:var(--ativo-fundo);border-radius:var(--r-item);
  margin-left:12px;padding-left:13px}
.sub .subitem.ativo::before{display:none}
.nav{padding-bottom:10px}
/* --- cartao de quem esta logado: uma linha cada, sem quebrar o pe do menu --- */
.usuario .quem{flex:1 1 auto;min-width:0}
.usuario .quem b,.usuario .quem i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etq{white-space:nowrap}
/* ============================================================
   v3 — so os pedidos explicitos. Nada aqui muda escala do v.A.
   ============================================================ */
/* [PEDIDO] logo: o mesmo bloco de 20 px do v.A, agora no azul da marca,
   com o desenho branco dentro e o texto TI24H ao lado */
.marca .sinal{width:20px;height:20px;border-radius:5px;background:var(--marca-fundo);
  display:grid;place-items:center;flex:0 0 auto;font-size:0}
.marca .sinal .i{width:13px;height:13px;stroke-width:2;color:var(--marca-texto)}
/* [PEDIDO] marca de acesso: T = so a tecnica, A = so o administrativo.
   Neutra de proposito: nao e estado, nem acao, nem lugar. A letra nunca
   anda sozinha — title e aria-label dizem por extenso. */
.acesso{display:inline-grid;place-items:center;flex:0 0 auto;width:18px;height:18px;
  border-radius:var(--r-icone);background:var(--est-neutro-bg);
  border:1px solid var(--borda-padrao);color:var(--est-neutro-tx);
  font-family:Pop,system-ui,sans-serif;font-size:11px;font-weight:600;line-height:1;
  letter-spacing:0;text-transform:none}
.item .acesso,.subitem .acesso{margin-left:auto}
.item .cont+.acesso,.subitem .cont+.acesso{margin-left:5px}
.cabpag h1 .acesso{width:20px;height:20px;font-size:12px;vertical-align:middle;
  margin-left:8px;position:relative;top:-3px}
.lateral.recolhido .acesso{display:none}
body.cel .acesso{width:19px;height:19px;font-size:12px}
/* [PEDIDO] preferencia do menu, no pe, discreta */
.pref{display:flex;align-items:center;gap:7px;margin:0 10px 10px;
  font-size:10.5px;color:var(--txt-apoio);line-height:1.3}
.pref .chave{width:26px;height:15px;border-radius:var(--r-pilula);
  background:var(--fundo-card);border:1px solid var(--borda-controle);
  position:relative;flex:0 0 auto}
.pref .chave::after{content:"";position:absolute;left:1px;top:1px;width:11px;height:11px;
  border-radius:50%;background:var(--borda-controle)}
body.recolhe .pref .chave{background:var(--acao);border-color:var(--acao)}
body.recolhe .pref .chave::after{left:12px;background:var(--sobre-acento)}
.pref .rot{flex:1;min-width:0}
/* etiqueta de recorte: pilula discreta, nunca cor de estado */
.etq{background:var(--est-neutro-bg);border-color:var(--borda-padrao);
  color:var(--est-neutro-tx)}
/* link e atalho no azul de acao */
.kpi .baixo .atalho,.kpi .baixo .atalho .i{color:var(--acao-texto)}
/* foco visivel */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--foco);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}
}
/* --- barra de topo sem avatar: o nome de quem esta logado fica no rodape do
       menu, e repetir no topo era redundancia da referencia (decisao de 05/10/2026).
       O grupo da direita ganha espacamento proprio para nao sobrar vazio. --- */
.topo .dirtopo{display:flex;align-items:center;gap:7px;margin-left:12px}
.topo .busca{margin-left:auto}
/* ============================================================
   GAVETA DO MENU — peças sempre presentes; a consulta de mídia
   abaixo é que as liga. No mock isto era a classe body.cel, de um
   botão de prova; aqui é responsividade de verdade.
   ============================================================ */
.abrirgaveta{display:none;width:34px;height:34px;border:1px solid var(--borda-controle);
  border-radius:var(--r-ctrl);place-items:center;color:var(--txt-apoio);
  background:var(--fundo-card);margin-right:2px;flex:0 0 auto}
.abrirgaveta .i{width:16px;height:16px}
.fundogaveta{display:none;position:absolute;inset:0;background:var(--veu);z-index:7}
.fechargaveta{display:none}

/* ============================================================
   PONTOS DE QUEBRA — três, e só três:
     1180 px  mesa estreita: 3 cartões por linha, menu mais magro
      860 px  tablet em pé e celular: gaveta, 2 cartões, modal cheio
      560 px  celular estreito: 1 cartão por linha
   Nenhum número de escala muda: só o arranjo.
   ============================================================ */
@media (max-width:1180px){
  .lateral{width:204px;flex:0 0 204px}
  .kpis{grid-template-columns:repeat(3,1fr);gap:14px}
  .duplo,.la-duplo,.la-duplo.esq{grid-template-columns:1fr;height:auto}
  .busca{width:188px}
}
@media (max-width:860px){
  /* a lâmina some como lâmina: no celular a aplicação ocupa a tela */
  body{overflow:auto}
  .quadro{margin:0;height:100%;max-width:none;border-radius:0;box-shadow:none}
  .abrirgaveta{display:grid}
  /* menu em gaveta, sobre o conteúdo, com véu */
  .lateral{position:absolute;left:0;top:0;bottom:0;z-index:8;width:min(300px,86vw);
    flex:0 0 auto;transform:translateX(-101%);transition:transform .18s;
    box-shadow:0 0 24px #00000026}
  .gaveta-aberta .lateral{transform:none}
  .gaveta-aberta .fundogaveta{display:block}
  .fechargaveta{display:grid;margin-left:auto}
  /* alvo de toque: 44 px é o piso do Estilos v.A §1.2 para mesa/toque */
  .item,.subitem{height:44px}
  .bt,.gb,.redondo,.abrirgaveta,.seletor{min-height:44px}
  .bt.quad{width:44px}
  .seletor select{min-height:44px;align-self:stretch}
  /* o X que fecha a gaveta também é alvo de dedo */
  .marca{height:56px}
  .recolher.fechargaveta{display:grid;place-items:center;width:44px;height:44px;
    border:1px solid var(--borda-controle);border-radius:var(--r-ctrl);
    background:var(--fundo-card)}
  .redondo{width:36px;height:36px}
  .topo{padding:0 12px;gap:7px;height:56px;flex:0 0 auto}
  .trilha{min-width:0;flex:1 1 auto}
  .trilha span:not(.atual){display:none}
  .trilha .sep{display:none}
  .trilha .atual{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .busca{display:none}
  .dirtopo{margin-left:auto}
  .corpo{padding:14px 14px 18px}
  .cabpag{flex-direction:column;gap:9px}
  .cabpag h1{font-size:21px}
  .acoes{margin-left:0;padding-top:0;flex-wrap:wrap}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi .cima{padding:13px 12px 12px}
  .kpi .val{font-size:21px}
  .duplo{grid-template-columns:1fr;height:auto}
  .grade22{grid-template-columns:1fr;grid-template-rows:none;padding-bottom:16px}
  .grade22 .painel{min-height:300px}
  .painel.crescer{min-height:0}
  .painel>.cab{height:auto;min-height:44px;flex-wrap:wrap;padding:8px 12px;row-gap:6px}
  .painel>.cab .dir{margin-left:0;flex-wrap:wrap;row-gap:6px}
  /* tabela: a de dados vira lista de cartões (ver .tab.vira-cartao em
     componentes.css); a que não vira rola DENTRO do próprio quadro,
     nunca estourando a página de lado */
  .tabwrap{overflow-x:auto;overflow-y:hidden;padding:0;-webkit-overflow-scrolling:touch}
  .tab{table-layout:auto;min-width:760px}
  .tab col{width:auto!important}
  .grupobt{flex-wrap:wrap}
  .grupobt .gb{white-space:nowrap}
  .notap{padding:10px 12px}
  .barraflutua{position:static;transform:none;min-width:0;flex-wrap:wrap;
    row-gap:10px;margin-top:14px}
  .bf-dir{margin-left:0}
  .canvas{min-height:360px;overflow:auto}
  .palco{left:0;transform:none}
  .rosca{width:160px;height:160px}
}
@media (max-width:560px){
  /* os cartões ficam em DUAS colunas também no celular estreito —
     é o que o mock aprovado faz (body.cel .kpis). Uma coluna só
     deixava o cartão alto e vazio. */
  .cabpag h1{font-size:20px}
  .acoes .bt{flex:1 1 auto;justify-content:center}
}