/* ==========================================================================
   SGP — Design System · Camada 22: o backoffice da plataforma (frente AD1)

   Painel da plataforma, ficha profunda do gabinete e usuários da plataforma.
   Arquivo próprio da frente: nada aqui edita 03_componentes.css nem 04_layout,
   e nada aqui vaza para fora do /admin (todo seletor é de uma classe nova).

   O PRINCÍPIO: backoffice é FERRAMENTA DE TRABALHO, não vitrine. Densidade
   alta, leitura de relance, e ESTADO VISÍVEL EM FORMA — não só em número. Por
   isso todo sinal tem cor E posição E texto: quem tem daltonia e quem imprime
   em preto e branco continuam lendo a mesma coisa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navegação de áreas (barra do topo do /admin)
   -------------------------------------------------------------------------- */
.admin-marca { text-decoration: none; color: inherit; white-space: nowrap; }
.admin-marca:hover { color: var(--cor-acao-forte); }

.admin-navegacao {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  margin-left: var(--esp-6);
  flex-wrap: wrap;
  min-width: 0;
}

.admin-navegacao__item {
  display: inline-flex;
  align-items: center;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
.admin-navegacao__item:hover {
  color: var(--cor-texto);
  background: var(--cor-fundo-sutil);
}
/* Ativo tem FUNDO e BORDA, não só cor de texto: numa barra de sete itens a
   diferença de matiz sozinha não se acha com o olho de lado. */
.admin-navegacao__item--ativo,
.admin-navegacao__item--ativo:hover {
  color: var(--cor-acao-contraste);
  background: var(--cor-acao);
  border-color: var(--cor-acao-forte);
}

/* --------------------------------------------------------------------------
   Cabeçalho: seletor de período (7 / 30 / 90 dias)
   Links, não <select>: o período vai para a URL e a tela é compartilhável.
   -------------------------------------------------------------------------- */
.seletor-de-periodo {
  display: inline-flex;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  overflow: hidden;
  background: var(--cor-fundo-elevado);
}
.seletor-de-periodo__opcao {
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
  text-decoration: none;
  border-right: 1px solid var(--cor-borda);
}
.seletor-de-periodo__opcao:last-child { border-right: 0; }
.seletor-de-periodo__opcao:hover { background: var(--cor-fundo-sutil); color: var(--cor-texto); }
.seletor-de-periodo__opcao--ativa,
.seletor-de-periodo__opcao--ativa:hover {
  background: var(--cor-acao);
  color: var(--cor-acao-contraste);
}

/* --------------------------------------------------------------------------
   Indicadores clicáveis
   Um número que não leva a lugar nenhum é enfeite (ver Admin::PanoramaDaPlataforma).
   -------------------------------------------------------------------------- */
.grade--6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.titulo-de-secao {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.indicador--clicavel {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicao-media), transform var(--transicao-media);
}
.indicador--clicavel:hover {
  border-color: var(--cor-acao);
  transform: translateY(-2px);
}
.indicador--clicavel:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }

/* A faixa colorida à esquerda é a FORMA do estado: sobrevive ao preto e branco
   e ao olho que não distingue vermelho de verde. */
.indicador--sinal-bem     { border-left: 3px solid var(--sgp-sucesso); }
.indicador--sinal-atencao { border-left: 3px solid var(--sgp-atencao); }
.indicador--sinal-risco   { border-left: 3px solid var(--sgp-perigo); }

.painel-plataforma__indicadores .indicador__valor { font-variant-numeric: tabular-nums; }

.painel-plataforma__ressalva {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: var(--esp-3) 0 0;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--sgp-atencao);
  border-radius: var(--raio-md);
  background: var(--sgp-atencao-suave);
  font-size: var(--texto-sm);
  line-height: 1.5;
}
.painel-plataforma__ressalva-icone { flex: none; color: var(--sgp-atencao); }
.painel-plataforma__ressalva-icone svg { width: 16px; height: 16px; }

.ligacao { color: var(--cor-acao-forte); font-weight: var(--peso-medio); }

/* --------------------------------------------------------------------------
   O funil
   Quatro degraus lado a lado. A barra é proporcional a QUEM ENTROU (o primeiro
   degrau), e não ao degrau anterior: proporção encadeada esconde a queda.
   -------------------------------------------------------------------------- */
.funil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: degrau;
}
.funil__degrau { min-width: 0; }
.funil__ligacao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.funil__ligacao:hover { border-color: var(--cor-acao); }
.funil__ligacao:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }

.funil__valor {
  font-size: var(--texto-3xl);
  font-weight: var(--peso-forte);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.funil__rotulo { font-weight: var(--peso-semi); font-size: var(--texto-md); }
.funil__proporcao { font-size: var(--texto-xs); color: var(--cor-texto-suave); }
.funil__detalhe { font-size: var(--texto-xs); color: var(--cor-texto-suave); line-height: 1.4; }

.funil__barra {
  display: block;
  height: 5px;
  border-radius: var(--raio-pilula);
  background: var(--cor-borda);
  overflow: hidden;
  margin: var(--esp-1) 0;
}
.funil__preenchimento { display: block; height: 100%; background: var(--cor-acao); }

/* Cada degrau tem a cor do que ele significa — e o último, o vermelho de
   quem foi embora, que é o número que precisa incomodar. */
.funil__degrau--contrataram .funil__valor { color: var(--sgp-sucesso); }
.funil__degrau--contrataram .funil__preenchimento { background: var(--sgp-sucesso); }
.funil__degrau--testando .funil__valor { color: var(--sgp-atencao); }
.funil__degrau--testando .funil__preenchimento { background: var(--sgp-atencao); }
.funil__degrau--sumiram .funil__valor { color: var(--sgp-perigo); }
.funil__degrau--sumiram .funil__preenchimento { background: var(--sgp-perigo); }

/* --------------------------------------------------------------------------
   O gráfico de séries por dia (SVG gerado no servidor)
   -------------------------------------------------------------------------- */
.grafico-do-painel { width: 100%; overflow-x: auto; }
.grafico-do-painel__desenho { display: block; width: 100%; min-width: 480px; height: auto; }

.grafico-do-painel__eixo { stroke: var(--cor-borda); stroke-width: 1; }
.grafico-do-painel__eixo--teto { stroke-dasharray: 3 4; }
.grafico-do-painel__rotulo {
  fill: var(--cor-texto-suave);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.grafico-do-painel__linha {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.grafico-do-painel__linha--acao    { stroke: var(--cor-acao); }
.grafico-do-painel__linha--atencao { stroke: var(--sgp-atencao); }
.grafico-do-painel__linha--sucesso { stroke: var(--sgp-sucesso); }
.grafico-do-painel__ponto--acao    { fill: var(--cor-acao); }
.grafico-do-painel__ponto--atencao { fill: var(--sgp-atencao); }
.grafico-do-painel__ponto--sucesso { fill: var(--sgp-sucesso); }

.legenda-do-grafico {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-5);
  margin: 0 0 var(--esp-4);
  padding: 0;
  list-style: none;
  font-size: var(--texto-sm);
}
.legenda-do-grafico__item { display: inline-flex; align-items: baseline; gap: var(--esp-2); }
.legenda-do-grafico__item strong { font-size: var(--texto-xl); font-variant-numeric: tabular-nums; }
.legenda-do-grafico__marca {
  width: 10px; height: 3px; border-radius: var(--raio-pilula);
  align-self: center;
}
.legenda-do-grafico__item--acao    .legenda-do-grafico__marca { background: var(--cor-acao); }
.legenda-do-grafico__item--atencao .legenda-do-grafico__marca { background: var(--sgp-atencao); }
.legenda-do-grafico__item--sucesso .legenda-do-grafico__marca { background: var(--sgp-sucesso); }

/* --------------------------------------------------------------------------
   Saúde do gabinete — sinal + motivo escrito
   O sinal NUNCA aparece sozinho. Ver Admin::SaudeDoGabinete.
   -------------------------------------------------------------------------- */
.placar-de-sinal {
  display: inline-flex;
  align-items: baseline;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}
.placar-de-sinal strong { font-size: var(--texto-xl); font-variant-numeric: tabular-nums; }
.placar-de-sinal--bem     { background: var(--sgp-sucesso-suave); color: var(--sgp-sucesso); }
.placar-de-sinal--atencao { background: var(--sgp-atencao-suave); color: var(--sgp-atencao); }
.placar-de-sinal--risco   { background: var(--sgp-perigo-suave);  color: var(--sgp-perigo); }

.painel-plataforma__placar { gap: var(--esp-3); }

.celula-de-motivos { max-width: 46ch; }
.motivo-de-saude {
  display: block;
  font-size: var(--texto-sm);
  line-height: 1.4;
}
.motivo-de-saude + .motivo-de-saude { margin-top: var(--esp-1); }

.sinal-de-saude { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Ficha profunda do gabinete
   -------------------------------------------------------------------------- */
.ficha-gabinete__topo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--esp-5);
}
@media (max-width: 1000px) {
  .ficha-gabinete__topo { grid-template-columns: 1fr; }
}

.faixa-de-saude {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-md);
  border: 1px solid var(--cor-borda);
  border-left-width: 4px;
  background: var(--cor-fundo-elevado);
}
.faixa-de-saude--bem     { border-left-color: var(--sgp-sucesso); }
.faixa-de-saude--atencao { border-left-color: var(--sgp-atencao); }
.faixa-de-saude--risco   { border-left-color: var(--sgp-perigo); }
.faixa-de-saude__motivos { margin: 0; padding-left: var(--esp-5); font-size: var(--texto-sm); line-height: 1.6; }

/* Lista de pares rótulo/valor com densidade de backoffice. */
.ficha-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--esp-3) var(--esp-5);
  margin: 0;
}
.ficha-dados__rotulo {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cor-texto-suave);
}
.ficha-dados__valor { margin: 0 0 var(--esp-2); font-weight: var(--peso-medio); word-break: break-word; }
.ficha-dados__valor--ausente { color: var(--cor-texto-suave); font-weight: var(--peso-normal); font-style: italic; }

/* Uso por módulo: contratado × usado, num olhar. */
.uso-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.uso-modulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  font-size: var(--texto-sm);
}
.uso-modulo__total { font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }
/* Contratado e nunca aberto: o que o comercial precisa ver de longe. */
.uso-modulo--ocioso { border-style: dashed; border-color: var(--sgp-atencao); }
.uso-modulo--ocioso .uso-modulo__total { color: var(--sgp-atencao); }
/* Não contratado é cinza e sem alarde: não é problema, é o que não foi vendido. */
.uso-modulo--nao-contratado { opacity: .55; }

/* As alavancas que antes exigiam console. */
.alavancas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-4);
}
.alavanca {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
}
.alavanca__titulo { margin: 0; font-size: var(--texto-md); font-weight: var(--peso-semi); }
.alavanca__ajuda { margin: 0; font-size: var(--texto-xs); color: var(--cor-texto-suave); line-height: 1.45; }
/* O estado de HOJE, ao lado da alavanca que o muda: sem ele o seletor de
   destino vira uma escolha às cegas (o plano em vigor saiu da lista de opções
   justamente por nunca ser um destino válido). */
.alavanca__hoje { margin: 0; font-size: var(--texto-xs); color: var(--cor-texto); }
.alavanca__forma { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.alavanca__forma .campo__controle { flex: 1 1 120px; min-width: 0; }
/* O SELETOR CARREGA O ESTADO DE HOJE no próprio rótulo da opção ("Pessoas
   (hoje: 9.123)"), e com a base de 120px do campo comum o parêntese era
   cortado no meio — o campo mostrava a pergunta e escondia a resposta. */
.alavanca__forma .campo__selecao { flex: 2 1 210px; }
.alavanca--perigo { border-color: var(--sgp-perigo); }

/* Histórico do que a plataforma fez com o gabinete. */
.trilha-do-gabinete { margin: 0; padding: 0; list-style: none; }
.trilha-do-gabinete__linha {
  display: grid;
  grid-template-columns: 96px 132px minmax(0, 1fr);
  gap: var(--esp-3);
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--cor-borda);
  font-size: var(--texto-sm);
  align-items: baseline;
}
.trilha-do-gabinete__linha:last-child { border-bottom: 0; }
.trilha-do-gabinete__quando { color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.trilha-do-gabinete__alvo { min-width: 0; word-break: break-word; }
.trilha-do-gabinete__autor { color: var(--cor-texto-suave); }
@media (max-width: 720px) {
  .trilha-do-gabinete__linha { grid-template-columns: 1fr; gap: var(--esp-1); }
}

/* --------------------------------------------------------------------------
   Usuários da plataforma
   -------------------------------------------------------------------------- */
.filtros-de-usuario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}
.filtros-de-usuario__busca { flex: 1 1 300px; min-width: 0; }
.filtros-de-usuario__busca .campo__controle { width: 100%; }
/* O SELETOR DE SITUAÇÃO NÃO OCUPA A LINHA INTEIRA. `.campo__controle` nasce com
   `width: 100%` (é o certo num formulário em coluna), e dentro de uma barra de
   filtros isso empurrava busca, seletor e botão para três linhas — 138px de
   altura para três controles que cabem em 40. Ferramenta de trabalho paga cada
   linha de altura com uma linha de tabela a menos na tela. */
.filtros-de-usuario > .campo__controle { flex: 0 1 240px; width: auto; }

/* CARTÃO CUJO VALOR É TEXTO, E NÃO NÚMERO.
   `.indicador__valor` é do design system e nasceu para número: 4xl, sem quebra,
   letra apertada. Um login ("chefe.gabinete.arquivado.prado") nesse tamanho não
   cabia no cartão e VAZAVA POR CIMA dos dois vizinhos — a ficha da credencial
   escondia "Gabinetes" e metade de "Último login" atrás de um texto que nem
   assim se lia inteiro. O componente compartilhado fica como está (ele está
   certo para o que foi feito); quem se ajusta é o caso de texto, aqui. */
.indicador__valor--texto {
  font-size: var(--texto-lg);
  line-height: 1.25;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.indicador__variacao--quebravel { overflow-wrap: anywhere; }

/* A COLUNA DE AÇÃO NÃO PODE FICAR FORA DA TELA. A tabela transbordava 28px em
   1440 e o "Abrir ficha" ia parar atrás da borda: existe rolagem horizontal,
   mas a ação principal escondida atrás de um gesto que ninguém adivinha é
   ação que não existe. O login é a única célula longa que pode quebrar sem
   perder sentido — e é ela que quebra. */
.filtros-de-usuario ~ .cartao .tabela__login { overflow-wrap: anywhere; }

.impedimentos { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--esp-2); }
.impedimento {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-left-width: 3px;
  border-radius: var(--raio-sm);
  font-size: var(--texto-sm);
  line-height: 1.5;
}
.impedimento--grave { border-left-color: var(--sgp-perigo); background: var(--sgp-perigo-suave); }
.impedimento--leve  { border-left-color: var(--sgp-atencao); background: var(--sgp-atencao-suave); }
.impedimento__saida { display: block; color: var(--cor-texto-suave); margin-top: var(--esp-1); }

.vinculos-do-usuario td { vertical-align: top; }

@media (max-width: 900px) {
  .admin-navegacao { gap: 2px; }
  .admin-navegacao__item { padding: var(--esp-1) var(--esp-2); font-size: var(--texto-xs); }
}

/* --------------------------------------------------------------------------
   O CABEÇALHO DO /admin EM TELA ESTREITA

   `.barra-topo` do chassi é uma linha de altura FIXA que não quebra. No
   gabinete ela cabe (ícone, busca, sino, avatar); no backoffice, que agora
   carrega marca + sete áreas + três ações, ela transbordava — medido: 513px de
   conteúdo dentro de uma janela de 390px, e a PÁGINA inteira passava a rolar na
   horizontal, arrastando o painel junto.

   O conserto é local ao /admin (`.aplicacao--admin`), para não mexer no chassi
   do gabinete, que esta frente não mediu: a barra ganha quebra de linha e
   altura automática, e a faixa de áreas rola sozinha em vez de empurrar a
   página.
   -------------------------------------------------------------------------- */
.aplicacao--admin .barra-topo {
  flex-wrap: wrap;
  height: auto;
  min-height: var(--alt-barra-topo);
  padding-block: var(--esp-2);
  row-gap: var(--esp-2);
}
.aplicacao--admin .barra-topo .admin-navegacao { margin-left: var(--esp-6); }

@media (max-width: 1100px) {
  .aplicacao--admin .barra-topo .admin-navegacao {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* A faixa rola por dentro; sem isto o item do fim empurra a página. */
    scrollbar-width: thin;
  }
  .aplicacao--admin .barra-topo__acoes { margin-left: auto; }
}

@media (max-width: 560px) {
  /* "Voltar ao SGP" e "Sair" cabem; a marca é que não. Ela encolhe primeiro
     porque é a única coisa da barra que também é o próprio link do painel,
     já alcançável pela primeira aba da navegação. */
  .aplicacao--admin .admin-marca {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40vw;
  }
}