/* Painel de gestao -- o que existe so aqui.
   Carregado depois de estilo.css e reaproveitando os tokens dele: os valores
   padrao de estilo.css ja sao as cores da Sparks, entao o painel nao precisa de
   folha de marca. O que muda e a identidade da moldura, para nao dar para
   confundir esta aba com a tela de um cliente. */

/* =============================================================================
   MOLDURA
   ========================================================================== */

/* Uma linha de acento no topo: e o sinal mais barato de "voce esta no painel".
   `--gestao-realce` existe como token para o chip e as abas usarem o mesmo. */
:root { --gestao-realce: #A78BFA; }
[data-tema="claro"] { --gestao-realce: #6D28D9; }

.cabecalho-gestao { border-top: 3px solid var(--gestao-realce); }

.chip-gestao {
  display: inline-block; vertical-align: 1px;
  padding: 1px 7px; border-radius: 5px;
  background: var(--gestao-realce); color: #0B0518;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
}

.abas-gestao { display: flex; gap: 3px; }

.aba {
  padding: 7px 13px; border-radius: 8px;
  color: var(--texto-suave); text-decoration: none;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.aba:hover { background: var(--superficie-hover); color: var(--texto); }
.aba.ativa {
  background: var(--superficie-alt); color: var(--texto);
  border-color: var(--borda-forte);
}

/* O login da gestao nao usa o fundo animado dos clientes. */
.palco-gestao { background: radial-gradient(900px 520px at 50% -10%, #131A2E 0%, transparent 60%), var(--fundo); }
[data-tema="claro"] .palco-gestao {
  background: radial-gradient(900px 520px at 50% -10%, #E4E2F7 0%, transparent 62%),
              linear-gradient(170deg, #EDF1F6 0%, #DFE7F0 100%);
}
.palco-gestao .cartao-login { border-top: 3px solid var(--gestao-realce); }
.tela-gestao .marca-login h1 { display: flex; align-items: center; justify-content: center; gap: 9px; }

.abertura-gestao { align-items: center; }
.abertura-numeros-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .abertura-numeros-4 { grid-template-columns: 1fr 1fr; } }

/* =============================================================================
   GRAFICO DE BARRAS
   ========================================================================== */

.grafico-barras { margin: 0; }
.grafico-barras svg { display: block; width: 100%; height: 132px; }

.barra-grafico { fill: var(--acento); }
.barra-vazia { fill: var(--grade); }
.grade-grafico { stroke: var(--borda); stroke-width: 1; }
.grade-fraca { stroke: var(--grade); stroke-dasharray: 3 4; }
.rotulo-grafico { fill: var(--texto-fraco); font-size: 9px; font-family: inherit; }

.grafico-barras figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px;
  margin-top: 6px; font-size: 13.5px; font-weight: 600;
}

/* =============================================================================
   CARTOES DE CLIENTE
   ========================================================================== */

.lista-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }

.cartao-cliente {
  border: 1px solid var(--borda); border-radius: 12px;
  background: var(--superficie-alt); overflow: hidden;
  transition: border-color .16s, transform .16s var(--suave), box-shadow .16s;
}
.cartao-cliente:hover {
  border-color: var(--borda-forte); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

.cartao-cliente-corpo { display: block; padding: 16px 17px 14px; color: inherit; text-decoration: none; }

.cartao-cliente-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cartao-cliente-topo h3 { margin: 0; font-size: 15.5px; letter-spacing: -.01em; }

.etiqueta-slug {
  font-size: 11.5px; color: var(--texto-fraco);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.numeros-cliente { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 13px 0 11px; }
.numeros-cliente dt { font-size: 10.5px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
.numeros-cliente dd { margin: 3px 0 0; font-size: 20px; font-weight: 660; font-variant-numeric: tabular-nums; }

.cartao-cliente-rodape { margin: 0 0 3px; font-size: 12.5px; color: var(--texto-fraco); }
.cartao-cliente-rodape strong { color: var(--texto-suave); }
.cartao-cliente-rodape:last-child { margin-bottom: 0; }

.alerta-inline { color: var(--perigo); font-weight: 600; }
.valor-alerta { color: var(--aviso); }

/* =============================================================================
   FEED DE EVENTOS
   ========================================================================== */

.lista-eventos { list-style: none; padding: 0; margin: 0; }

.evento {
  display: grid;
  grid-template-columns: 118px minmax(90px, auto) 1fr auto;
  align-items: baseline; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--borda);
  font-size: 13px;
}
.evento:last-child { border-bottom: none; }
@media (max-width: 620px) {
  .evento { grid-template-columns: 1fr auto; }
  .evento-detalhe { grid-column: 1 / -1; }
}

.evento-tipo {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--superficie-hover); color: var(--texto-suave);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; text-align: center;
}
/* So os tipos que pedem atencao ganham cor; o resto fica neutro para o olho
   encontrar a excecao. */
.evento-simulacao { background: var(--acento-fraco); color: var(--acento-brilho); }
.evento-login_negado,
.evento-gestao_login_negado { background: rgba(248, 113, 113, .14); color: #FCA5A5; }
.evento-simulacao_recusada { background: rgba(251, 191, 36, .13); color: #FCD34D; }
.evento-prazo_alterado { background: rgba(167, 139, 250, .16); color: var(--gestao-realce); }
[data-tema="claro"] .evento-login_negado,
[data-tema="claro"] .evento-gestao_login_negado { background: #FDECEC; color: #A11C1C; }
[data-tema="claro"] .evento-simulacao_recusada { background: #FDF5E2; color: #8A5A00; }
[data-tema="claro"] .evento-prazo_alterado { background: #EDE9FE; color: #5B21B6; }

.evento-quem { color: var(--texto); font-size: 12.5px; }
.evento-quem strong { color: var(--texto-suave); font-weight: 600; }
.evento-detalhe { color: var(--texto-suave); font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.evento-quando { color: var(--texto-fraco); font-size: 12px; white-space: nowrap; text-align: right; }
.marca-importado { font-style: normal; color: var(--texto-fraco); }

/* =============================================================================
   CHIPS, FILTROS E TABELAS
   ========================================================================== */

.chip-pequeno {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--superficie-hover); color: var(--texto-suave);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.chip-azul { background: var(--acento-fraco); color: var(--acento-brilho); }
.chip-verde { background: rgba(52, 211, 153, .13); color: #6EE7B7; }
.chip-amarelo { background: rgba(251, 191, 36, .14); color: #FCD34D; }
.chip-vermelho { background: rgba(248, 113, 113, .14); color: #FCA5A5; }
[data-tema="claro"] .chip-verde { background: #E8F7EE; color: #15803D; }
[data-tema="claro"] .chip-amarelo { background: #FDF5E2; color: #8A5A00; }
[data-tema="claro"] .chip-vermelho { background: #FDECEC; color: #A11C1C; }

/* O select nao aparece em nenhuma outra tela do site, entao o estilo dele
   vive aqui e nao no estilo.css. */
select {
  padding: 9px 11px; border: 1px solid var(--borda-forte); border-radius: 8px;
  background: var(--fundo-alto); color: var(--texto);
  font: inherit; font-size: 14px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
select:hover { border-color: #2E4470; }
select:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(77, 141, 246, .18); outline: none; }

.filtros-atividade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 13px; align-items: end;
}
.filtros-atividade .campo { margin-bottom: 0; }
.acoes-filtro { display: flex; align-items: center; gap: 12px; }

.detalhe-largo { white-space: normal; max-width: 34ch; overflow-wrap: anywhere; }

/* Aplicado a um div dentro do <td>, nunca ao <td>. Ver o comentario no
   usuarios.html: celula de tabela com display:flex corta o rotulo do botao. */
.celula-prazo { display: flex; align-items: center; gap: 10px; }

.formulario-prazo { display: flex; align-items: center; gap: 7px; }

/* Nada nesta linha encolhe: o .botao tem `overflow: hidden`, entao um botao
   apertado esconde parte do proprio rotulo em vez de mostrar que faltou
   espaco -- falha silenciosa que e melhor tornar impossivel. */
.formulario-prazo > * { flex: none; }
.formulario-prazo .botao { white-space: nowrap; }

/* Largura explicita: `width: 100%` da regra global de input nao tem base
   estavel dentro de um flex, e 3 digitos (1 a 365) nao pedem mais que isso.
   O seletor precisa dos dois niveis: `input[type="number"]` do estilo.css tem
   especificidade (0,1,1) e venceria uma classe sozinha, alargando o campo e
   empurrando o "Sem prazo" para fora da area visivel da tabela. */
.formulario-prazo .campo-dias { width: 74px; margin: 0; text-align: center; }

.paginacao { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }

.cartao-estreito { max-width: 560px; }