/* Componentes do design system CDL Nexus, compilados manualmente
   (equivalente a assets/app.css do layout-nexos) — este projeto usa
   Tailwind via CDN (Play CDN) e não roda pipeline de build, então
   @apply/@layer não estão disponíveis; as classes abaixo escrevem o
   CSS final que @apply geraria. */

html { -webkit-font-smoothing: antialiased; }

h1, h2, h3 { letter-spacing: -0.021em; }

table { font-variant-numeric: tabular-nums; }

input[type='checkbox'],
input[type='radio'] { accent-color: #0040A0; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background-color: #0040A0;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: background-color .15s ease;
}
.btn-primary:hover { background-color: #003585; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  background-color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: background-color .15s ease;
}
.btn-secondary:hover { background-color: #f8fafc; }

.input-base {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  background-color: #fff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-base::placeholder { color: #94a3b8; }
.input-base:focus {
  outline: none;
  border-color: #2F63C4;
  box-shadow: 0 0 0 3px rgba(47,99,196,.3);
}

.card {
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid #e2e2e2;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

/* Card-link (dashboard): feedback de clique mais claro que só a cor. */
a.card:hover {
  box-shadow: 0 8px 20px -8px rgba(0, 64, 160, .18);
  transform: translateY(-2px);
}
a.card:active { transform: translateY(0); box-shadow: 0 2px 6px -2px rgba(0, 64, 160, .2); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.badge-primary { background: #F0F5FC; color: #003585; border: 1px solid #DCE7F8; }
.badge-warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.badge-danger { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
/* Neutro: estado sem carga de alerta nem de destaque ("nunca usado", "sem
   categoria"). Sem ele, .badge sozinho não pinta fundo nem borda e o rótulo
   sai como texto solto — parecendo bug, não escolha. */
.badge-neutral { background: #F8FAFC; color: #475569; border: 1px solid #E2E8F0; }

/* —————————————————————————————————————————————————————
   Painéis flutuantes (waffle, menu de usuário): fade + leve
   escala/deslocamento em vez de aparecer/sumir abruptamente.
   Controlado por classe (não por [hidden]) para a transição rodar. */
[data-painel-flutuante] {
  transform-origin: top left;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
/* visibility:hidden (não só opacity/pointer-events) tira o painel fechado do
   tab order — sem isso quem navega por teclado tabula por itens invisíveis
   (achado da auditoria de UI/UX, 22/08/2026, item A3). O delay na transição
   de visibility é pra não cortar a animação de fechar antes dela terminar. */
[data-painel-flutuante].painel-fechado {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(.97);
  pointer-events: none;
}
[data-painel-flutuante].painel-aberto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear 0s;
}
#menu-usuario[data-painel-flutuante] { transform-origin: top right; }

/* —————————————————————————————————————————————————————
   Ícones "liquid glass" (referência: ícones 3D do Microsoft 365) —
   gradiente diagonal + brilho vítreo no canto superior + sombra colorida
   projetada. Cor/gradiente/sombra vêm inline (por módulo, via PHP);
   esta classe só desenha a camada de vidro por cima, igual em todos.
   Sem imagem: tudo gradiente + blur, então escala em qualquer tamanho. */
.icon-glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .35);
}
.icon-glass::before {
  /* Reflexo vítreo: elipse de luz no canto superior esquerdo. */
  content: '';
  position: absolute;
  top: -35%;
  left: -15%;
  width: 75%;
  height: 65%;
  background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0) 75%);
  filter: blur(2px);
  transform: rotate(-18deg);
  pointer-events: none;
}
.icon-glass::after {
  /* Faixa de vidro fina cruzando o ícone, como o corte diagonal dos ícones Office. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.14) 100%);
  pointer-events: none;
}
.icon-glass > iconify-icon {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
.icon-glass.icon-glass--sm::before { width: 80%; height: 70%; }

/* Leve "levitação" no hover do card/ícone pai — dá a sensação de vidro
   físico reagindo, não só de imagem estática. */
a.card:hover .icon-glass,
.icon-glass--interativo:hover {
  transform: translateY(-1px) scale(1.04);
}
.icon-glass { transition: transform .18s ease, box-shadow .18s ease; }

/* I6 — entrada escalonada dos cards do bento grid do Início (equivalente
   CSS puro ao staggerChildren do Framer Motion no protótipo React). Só
   os filhos diretos de .bento-stagger recebem o delay progressivo, até o
   8º card — depois disso todos entram junto pra não haver espera longa. */
@keyframes bento-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.bento-stagger > * {
  animation: bento-entrada .4s ease-out both;
}
.bento-stagger > *:nth-child(1) { animation-delay: 0ms; }
.bento-stagger > *:nth-child(2) { animation-delay: 60ms; }
.bento-stagger > *:nth-child(3) { animation-delay: 120ms; }
.bento-stagger > *:nth-child(4) { animation-delay: 180ms; }
.bento-stagger > *:nth-child(5) { animation-delay: 240ms; }
.bento-stagger > *:nth-child(6) { animation-delay: 300ms; }
.bento-stagger > *:nth-child(7) { animation-delay: 360ms; }
.bento-stagger > *:nth-child(8) { animation-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .bento-stagger > * { animation: none; }
}