/* Cabeçalho do TriniaVault (server/src/nav.ts): o mesmo em toda tela. */
/* As fontes da marca (server/static/fontes, licença OFL): Montserrat nos títulos, Open Sauce Sans no
   corpo. Ficam aqui porque toda tela (editor, vault e portaria) carrega este arquivo. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(fontes/montserrat-latin-500-normal.woff2?v=2b53300fb9) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(fontes/montserrat-latin-600-normal.woff2?v=d857325c36) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(fontes/montserrat-latin-700-normal.woff2?v=f9d9e65b15) format('woff2'); }
@font-face { font-family: 'Open Sauce Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fontes/open-sauce-sans-latin-400-normal.woff2?v=13b7baaff8) format('woff2'); }
@font-face { font-family: 'Open Sauce Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fontes/open-sauce-sans-latin-500-normal.woff2?v=891d5fe5d0) format('woff2'); }
@font-face { font-family: 'Open Sauce Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fontes/open-sauce-sans-latin-600-normal.woff2?v=5624656bfb) format('woff2'); }
@font-face { font-family: 'Open Sauce Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(fontes/open-sauce-sans-latin-700-normal.woff2?v=e41211e9b5) format('woff2'); }
@font-face { font-family: 'Open Sauce Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(fontes/open-sauce-sans-latin-400-italic.woff2?v=c7b17f55c4) format('woff2'); }
.product-header {
  --nh-bg: #0a0b69; --nh-fg: #ffffff; --nh-muted: #c9cbf2; --nh-line: #0a0b69; --nh-accent: #ffffff; --nh-hover: #1a1c86; --nh-mark: #f8347b;
  box-sizing: border-box; display: flex; align-items: center; gap: 12px; height: 48px; min-width: 0; margin: 0; padding: 0 16px;
  background: var(--nh-bg); color: var(--nh-fg); border-bottom: 1px solid var(--nh-line);
  font: 14px/1.4 'Open Sauce Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .product-header { --nh-bg: #07083f; --nh-line: #1c1f5c; --nh-hover: #15176a; }
}
.product-brand { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font: 700 16px/1 'Montserrat', system-ui, sans-serif; letter-spacing: 0.01em; color: var(--nh-fg); text-decoration: none; }
.product-brand img { display: block; width: 26px; height: 26px; }
.product-nav { margin-left: auto; display: flex; align-items: center; gap: 16px; min-width: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.product-nav .company { font-weight: 600; color: var(--nh-fg); }
.product-nav .who { color: var(--nh-muted); font-size: 14px; }
.product-nav a { color: var(--nh-accent); font-weight: 400; text-decoration: none; }
.product-nav a:hover { text-decoration: underline; }
.product-nav a[aria-current='page'] { color: var(--nh-fg); font-weight: 600; text-decoration: none; box-shadow: inset 0 -2px 0 var(--nh-mark); padding-bottom: 2px; }
.product-nav form { display: inline; margin: 0; }
/* Novidades do Suporte e da Plataforma (respostas e tickets que ainda não foram vistos). */
.product-nav .nav-count { display: inline-block; min-width: 18px; margin-left: 5px; padding: 1px 5px; border-radius: 9px; background: var(--nh-mark); color: #ffffff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: 1px; }
.product-nav button { font: inherit; font-size: 13px; line-height: 1.2; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; background: transparent; color: var(--nh-fg); cursor: pointer; }
.product-nav button:hover { background: var(--nh-hover); }
/* Plano da empresa (plans.ts): a faixa "Usuário Grátis", com o uso, em toda tela; não fecha. */
.plan-banner { box-sizing: border-box; margin: 0; padding: 6px 16px; background: #e9ecf2; color: #1c1f23; font: 600 13px/1.45 'Open Sauce Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: center; }
.plan-banner[data-nivel='quase'] { background: #ffe39a; }
.plan-banner[data-nivel='cheio'] { background: #f8347b; color: #ffffff; }
.plan-banner[hidden] { display: none; }
/* Aviso de atualização (portaria/maintenance.ts): a faixa logo abaixo do cabeçalho, em toda tela. */
.maintenance-banner { box-sizing: border-box; margin: 0; padding: 8px 16px; background: #ffc73b; color: #1c1f23; font: 600 14px/1.45 'Open Sauce Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: center; }
.maintenance-banner[hidden] { display: none; }
/* A cada minuto da contagem, a faixa pisca de leve (quem está concentrado percebe). */
.maintenance-banner.pulse { animation: maintenance-pulse 1.2s ease-in-out 2; }
@keyframes maintenance-pulse { 50% { background: #f8347b; color: #ffffff; } }
@media (prefers-reduced-motion: reduce) { .maintenance-banner.pulse { animation: none; outline: 3px solid #f8347b; outline-offset: -3px; } }
.maintenance-banner button { margin-left: 10px; padding: 3px 12px; border: 1px solid #1c1f23; border-radius: 6px; background: transparent; color: #1c1f23; font: inherit; cursor: pointer; }
/* Administração em duas partes (Geral e Pessoas): as abas logo abaixo do título, no vault e na portaria. */
.admin-tabs { display: flex; gap: 4px; margin: -6px 0 18px; border-bottom: 1px solid rgba(127, 127, 140, 0.35); font: 14px/1.4 'Open Sauce Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.admin-tabs a { padding: 7px 14px; color: inherit; opacity: 0.75; text-decoration: none; box-shadow: inset 0 -3px 0 transparent; }
.admin-tabs a:hover { opacity: 1; }
.admin-tabs a[aria-current='page'] { opacity: 1; font-weight: 600; box-shadow: inset 0 -3px 0 #f8347b; }
@media (max-width: 760px) {
  .product-header { gap: 8px; padding: 0 12px; }
  .product-nav { gap: 12px; }
  .product-nav .who, .product-nav .company { display: none; }
}