/* Camada de acabamento visual, compartilhada por todas as telas.
   Carregada por ultimo (depois do <style> proprio de cada pagina), so
   adiciona sombra/profundidade e uma cor de apoio - nunca substitui
   cores ou tamanhos ja definidos por cada tela. */

:root{
  --sombra-suave: 0 1px 3px rgba(15,61,86,0.07), 0 1px 2px rgba(15,61,86,0.05);
  --sombra-media: 0 6px 18px rgba(15,61,86,0.12);
  --cor-apoio: #2DD4BF;
  --cor-apoio-fundo: rgba(45,212,191,0.10);
}

/* Profundidade suave em todo tipo de "cartao" usado pelo sistema */
.painel,
.caixa,
.card,
.card-empresa,
.stat-topo-card,
.card-prioridade-topo,
.prioridade-item,
.tarefa-item,
.resumo-card,
.agenda-item,
.google-status{
  box-shadow: var(--sombra-suave);
  transition: box-shadow .18s ease, transform .18s ease;
}

/* Cards "clicaveis" ou que representam um item de lista ganham um leve
   levantar ao passar o mouse, reforcando que sao interativos */
.card-empresa:hover,
.painel:hover{
  box-shadow: var(--sombra-media);
}

/* Botoes secundarios usam a cor de apoio (verde-azulado) em vez de
   ficar tudo no navy+dourado, so para dar variedade visual sem sair
   da identidade da marca */
.btn-secundario{
  border-color: var(--cor-apoio) !important;
  color: var(--cor-apoio) !important;
}
.btn-secundario:hover{
  background: var(--cor-apoio-fundo) !important;
}

.acao-rapida.secundaria{
  border-color: var(--cor-apoio) !important;
  color: var(--cor-apoio) !important;
}
.acao-rapida.secundaria .simbolo{
  color: var(--cor-apoio) !important;
}
.acao-rapida.secundaria:hover{
  background: var(--cor-apoio-fundo) !important;
}

/* Uma segunda cor de tag, usada em rotulos "informativos" (nao seguem
   o padrao vermelho-urgente/dourado-atencao/verde-ok) */
.tag-apoio{
  background: var(--cor-apoio-fundo);
  color: var(--cor-apoio);
}

/* Links de acao ganham uma transicao suave, fica mais "vivo" ao passar
   o mouse em vez de mudar de cor abruptamente */
.link-acao{
  transition: opacity .15s ease;
}
.link-acao:hover{
  opacity: 0.75;
}

/* Botoes primarios ganham leve efeito de profundidade tambem */
.btn{
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: box-shadow .15s ease, transform .1s ease;
}
.btn:active{
  transform: translateY(1px);
  box-shadow: none;
}

/* Animacao suave de entrada: os cards aparecem com um leve deslizar de
   baixo pra cima em vez de simplesmente "estalarem" na tela. Os itens
   dentro de uma mesma grade (empresas, estatisticas, colunas) entram
   em sequencia, um pouco atrasado um do outro, para dar uma sensacao
   de movimento organizado em vez de tudo entrando de uma vez. */
@keyframes entradaSuave{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

.painel,
.caixa,
.card,
.card-empresa,
.stat-topo-card,
.card-prioridade-topo,
.resumo-card{
  animation: entradaSuave .4s ease both;
}

/* Escalona a entrada dos itens de grid (ate o 8o item de cada grade) */
.grid-empresas > *:nth-child(1), .linha-2col > *:nth-child(1), .linha-3col > *:nth-child(1), .stats-topo-grid > *:nth-child(1), .resumo-grid > *:nth-child(1){ animation-delay: .00s; }
.grid-empresas > *:nth-child(2), .linha-2col > *:nth-child(2), .linha-3col > *:nth-child(2), .stats-topo-grid > *:nth-child(2), .resumo-grid > *:nth-child(2){ animation-delay: .05s; }
.grid-empresas > *:nth-child(3), .linha-3col > *:nth-child(3), .stats-topo-grid > *:nth-child(3), .resumo-grid > *:nth-child(3){ animation-delay: .10s; }
.grid-empresas > *:nth-child(4), .stats-topo-grid > *:nth-child(4), .resumo-grid > *:nth-child(4){ animation-delay: .15s; }
.grid-empresas > *:nth-child(5){ animation-delay: .20s; }
.grid-empresas > *:nth-child(6){ animation-delay: .25s; }

/* Quem prefere menos movimento na tela (configuracao de acessibilidade
   do sistema operacional) nao recebe a animacao */
@media (prefers-reduced-motion: reduce){
  .painel, .caixa, .card, .card-empresa, .stat-topo-card, .card-prioridade-topo, .resumo-card{
    animation: none;
  }
}