/* ===========================================================================
   Azuos Brand — CertMonitor
   Fonte única da marca: repo azuos-brand (tokens/tokens.json + BRAND-GUIDELINES).
   NÃO usar hex avulso nos templates: sempre referenciar as variáveis abaixo.
   Azul #1B3A8C · Azul escuro #142B69 · Amarelo #F5C518 · Fonte Inter
   =========================================================================== */

:root {
  /* Primárias */
  --azuos-blue-900: #142B69;
  --azuos-blue-800: #1B3A8C;   /* azul oficial da marca */
  --azuos-blue-700: #22429C;
  --azuos-blue-600: #2E52B8;
  --azuos-blue-500: #4265D4;
  --azuos-blue-100: #E1E6F5;
  --azuos-yellow:   #F5C518;   /* acento — o ponto da logo */
  --azuos-yellow-400: #F7CE3C;

  /* Neutros */
  --azuos-white: #FFFFFF;
  --azuos-gray-900: #111827;
  --azuos-gray-700: #374151;
  --azuos-gray-500: #6B7280;
  --azuos-gray-300: #D1D5DB;
  --azuos-gray-100: #F3F4F6;

  /* Semânticas */
  --azuos-primary:        var(--azuos-blue-800);
  --azuos-primary-hover:  var(--azuos-blue-900);
  --azuos-accent:         var(--azuos-yellow);
  --azuos-bg:             #F0F2F5;
  --azuos-text:           var(--azuos-gray-900);
  --azuos-text-muted:     var(--azuos-gray-500);

  /* Sidebar / superfícies de marca */
  --azuos-sidebar-bg:      var(--azuos-blue-900);
  --azuos-sidebar-brand:   #0F2050;
  --azuos-sidebar-link:    #A9B4D6;
  --azuos-sidebar-hover:   var(--azuos-blue-700);

  --azuos-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --- Tipografia oficial --- */
body {
  font-family: var(--azuos-font);
}

/* --- Botões primários da marca (mapeia .btn-primary do Bootstrap) --- */
.btn-primary,
.btn-login {
  background-color: var(--azuos-primary);
  border-color: var(--azuos-primary);
  color: var(--azuos-white);
}
.btn-primary:hover, .btn-primary:focus,
.btn-login:hover, .btn-login:focus {
  background-color: var(--azuos-primary-hover);
  border-color: var(--azuos-primary-hover);
  color: var(--azuos-white);
}
.btn-outline-primary {
  color: var(--azuos-primary);
  border-color: var(--azuos-primary);
}
.btn-outline-primary:hover {
  background-color: var(--azuos-primary);
  border-color: var(--azuos-primary);
}

/* --- Botão de acento (amarelo — só sobre azul ou como CTA pontual) --- */
.btn-accent {
  background-color: var(--azuos-accent);
  border: none;
  color: var(--azuos-blue-900);
  font-weight: 600;
}
.btn-accent:hover { background-color: var(--azuos-yellow-400); color: var(--azuos-blue-900); }

/* --- Foco de formulários na cor da marca --- */
.form-control:focus,
.form-select:focus {
  border-color: var(--azuos-blue-500);
  box-shadow: 0 0 0 .2rem rgba(27, 58, 140, .25);
}

/* --- Links --- */
a.brand-link, .text-brand { color: var(--azuos-primary); }
a.brand-link:hover { color: var(--azuos-primary-hover); }

/* --- Sidebar (base.html) --- */
.sidebar { background: var(--azuos-sidebar-bg) !important; }
.sidebar-brand { background: var(--azuos-sidebar-brand) !important; }
.sidebar nav a { color: var(--azuos-sidebar-link) !important; }
.sidebar nav a:hover,
.sidebar nav a.active {
  color: #fff !important;
  background: var(--azuos-sidebar-hover) !important;
  border-left-color: var(--azuos-accent) !important;
}

/* --- Topbar / títulos --- */
.topbar h1 { color: var(--azuos-blue-900); }

/* ============================================================
   Micro-animações da marca (sutis, elegantes)
   Regra de ouro: curtas (~150-400ms), discretas, sem piscar.
   Performance: fade-in só no container .main-content (uma vez).
   NUNCA animar linhas de tabela individuais (Certificados / INPI
   têm centenas de <tr> — animar cada uma trava a tela).
   Acessibilidade: tudo é desligado em prefers-reduced-motion.
   ============================================================ */

/* 1. Fade-in suave ao carregar a página (só no container principal) */
@keyframes azuos-fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-content {
  animation: azuos-fade-in-up .4s ease-out both;
}

/* 2. Cards com leve elevação no hover.
   .stat-card sobe 2px + sombra mais forte (é pequeno, pode "pular").
   .card genérico só ganha sombra levemente (não sobe — pode ser grande
   ou conter tabela). Cards dentro de tabela ficam neutros. */
.card {
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover {
  box-shadow: 0 .35rem .85rem rgba(27, 58, 140, .10);
}
.stat-card {
  transition: box-shadow .2s ease, transform .2s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(27, 58, 140, .15);
}
/* Cards dentro de tabelas não devem reagir */
.table .card:hover,
td .card:hover {
  transform: none;
  box-shadow: none;
}

/* 3. Botões com micro-feedback de clique */
.btn {
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, box-shadow .18s ease, transform .1s ease;
}
.btn:active {
  transform: scale(.97);
}

/* 4. Linhas de tabela: suavizar o hover nativo do Bootstrap
   (apenas transição de fundo — nada de animação de entrada) */
.table-hover tbody tr {
  transition: background-color .15s ease;
}

/* 5. Badges / pills: leve transição */
.badge {
  transition: background-color .18s ease, color .18s ease;
}

/* 6. Inputs/selects no foco: suavizar a borda/sombra já definida acima
   (não duplica a regra de cor — só adiciona a transição) */
.form-control,
.form-select {
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* ------------------------------------------------------------
   ACESSIBILIDADE: desliga todas as animações/transições acima
   para quem prefere movimento reduzido. Obrigatório.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .main-content { animation: none; }
  .card,
  .card:hover,
  .stat-card,
  .stat-card:hover,
  .btn,
  .btn:active,
  .table-hover tbody tr,
  .badge,
  .form-control,
  .form-select {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}