@import "tailwindcss";

/* ════════════════════════════════════════════════════════════════════════════
   HoraNexa — Design System v11
   UX Agent Audit: Consolidação completa de todos os estilos
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  body {
    background-color: #020617;
    color: #f1f5f9;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   OVERLAY DE AUTENTICAÇÃO
   ════════════════════════════════════════════════════════════════════════════ */
.hn-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #020617;
  background-image:
    radial-gradient(ellipse at 15% 15%, rgba(99,102,241,.14) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 85%, rgba(16,185,129,.08) 0%, transparent 45%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

/* Container do modal */
.hn-auth-container {
  width: 100%;
  max-width: 980px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1.5rem;
  box-shadow:
    0 32px 64px -16px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hnModalIn .35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hnModalIn {
  from { opacity: 0; transform: scale(.97) translateY(16px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

@media (min-width: 768px) {
  .hn-auth-container { flex-direction: row; min-height: 600px; }
}

/* ── Painel esquerdo (branding) ────────────────────────────────────────── */
.hn-auth-info-panel {
  flex: 1.15;
  background: linear-gradient(150deg, #1e1b4b 0%, #0f172a 65%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
@media (min-width: 768px) {
  .hn-auth-info-panel {
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,.06);
    padding: 3rem 2.5rem;
  }
}

/* Badge "Meta Líquida" */
.hn-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.3);
  color: #a5b4fc;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 1.5rem;
}
.hn-auth-badge-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #34d399;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* Logo / brand */
.hn-auth-brand { display: flex; align-items: center; gap: .875rem; margin-bottom: .75rem; }
.hn-auth-brand-icon {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  border-radius: .875rem;
  background: linear-gradient(135deg, #4f46e5, #10b981);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(99,102,241,.35);
}
.hn-auth-brand-icon svg { width: 1.5rem; height: 1.5rem; color: #fff; }
.hn-auth-brand-name { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.2; }
.hn-auth-brand-name span { color: #818cf8; }
.hn-auth-brand-sub { font-size: .7rem; color: #64748b; margin-top: .125rem; }

/* Descrição */
.hn-auth-desc { font-size: .75rem; color: #94a3b8; line-height: 1.7; margin: 1.25rem 0; }
.hn-auth-desc strong { color: #e2e8f0; }

/* Features list */
.hn-auth-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.hn-auth-features li {
  display: flex; align-items: flex-start; gap: .75rem;
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: .75rem;
  padding: .75rem;
}
.hn-auth-feature-icon {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
}
.hn-auth-feature-icon svg { width: 1rem; height: 1rem; }
.hn-auth-features strong { display: block; font-size: .75rem; font-weight: 600; color: #f1f5f9; margin-bottom: .125rem; }
.hn-auth-features span   { font-size: .7rem; color: #64748b; line-height: 1.5; }

.hn-auth-footer { font-size: .675rem; color: #334155; }

/* ── Painel direito (formulários) ─────────────────────────────────────── */
.hn-auth-form-panel {
  flex: 1;
  background: #0f172a;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
@media (min-width: 768px) {
  .hn-auth-form-panel { padding: 2.5rem 2.5rem; }
}

/* Tabs */
.hn-auth-tabs {
  display: flex;
  gap: .25rem;
  background: rgba(15,23,42,.9);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .875rem;
  padding: .25rem;
  margin-bottom: 1.75rem;
}
.hn-tab {
  flex: 1;
  padding: .5rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  border-radius: .625rem;
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: all .2s ease;
}
.hn-tab:hover { color: #94a3b8; }
.hn-tab-active {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
}

/* Form header */
.hn-form-header { margin-bottom: 1.25rem; }
.hn-form-header h2 { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: -.015em; }
.hn-form-header p  { font-size: .75rem; color: #64748b; margin-top: .25rem; }

/* Campos */
.hn-field       { display: flex; flex-direction: column; margin-bottom: 1rem; }
.hn-field-row   { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-bottom: 1rem; }
.hn-label {
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #64748b; margin-bottom: .375rem;
}
.hn-input {
  width: 100%;
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: .75rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  color: #f1f5f9;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none;
}
.hn-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
  background: #080d18;
}
.hn-input::placeholder { color: #334155; }
.hn-select { cursor: pointer; }

/* Input com botão de olho */
.hn-input-wrap { position: relative; }
.hn-input-wrap .hn-input { padding-right: 2.75rem; }
.hn-eye-btn {
  position: absolute;
  right: .75rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: #334155; cursor: pointer;
  padding: .25rem; border-radius: .375rem;
  opacity: .5; transition: opacity .15s, color .15s;
  display: flex; align-items: center;
}
.hn-eye-btn:hover { opacity: 1; color: #94a3b8; }
.hn-eye-btn svg { width: 1rem; height: 1rem; }

/* Erros */
.hn-error {
  font-size: .75rem;
  color: #f87171;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: .625rem;
  padding: .625rem .875rem;
  text-align: center;
  margin-bottom: .875rem;
}

/* Botão submit */
.hn-submit {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #10b981 100%);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  padding: .875rem 1.25rem;
  border-radius: .75rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 28px -6px rgba(99,102,241,.42);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: all .2s ease;
  margin-top: .5rem;
}
.hn-submit:hover  { transform: translateY(-1px); box-shadow: 0 16px 32px -6px rgba(99,102,241,.55); }
.hn-submit:active { transform: translateY(0); }
.hn-submit svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.hn-terms { font-size: .7rem; color: #334155; text-align: center; margin-top: .75rem; }

/* ════════════════════════════════════════════════════════════════════════════
   TOP BAR DE USUÁRIO (injetada no header React)
   ════════════════════════════════════════════════════════════════════════════ */
.hn-topbar-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: .75rem;
  border-left: 1px solid rgba(255,255,255,.08);
}
.hn-topbar-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.hn-topbar-company {
  font-size: .75rem;
  font-weight: 600;
  color: #e2e8f0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hn-topbar-role {
  font-size: .65rem;
  color: #818cf8;
  font-weight: 500;
}

/* Botões ícone genéricos (Zerar / Sair) */
.hn-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: .5rem;
  border: 1px solid;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.hn-btn-icon svg { width: .875rem; height: .875rem; flex-shrink: 0; }
.hn-btn-icon span { display: none; }
@media (min-width: 640px) { .hn-btn-icon span { display: inline; } }

/* Variante âmbar (Zerar) */
.hn-btn-amber {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.3);
  color: #fbbf24;
}
.hn-btn-amber:hover { background: rgba(245,158,11,.2); border-color: #f59e0b; color: #fff; }

/* Variante vermelho (Sair) */
.hn-btn-red {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
  color: #f87171;
}
.hn-btn-red:hover { background: rgba(239,68,68,.2); border-color: #ef4444; color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   PAINEL SUPER ADMIN
   ════════════════════════════════════════════════════════════════════════════ */
.hna-root {
  min-height: 100vh;
  background: #020617;
  background-image:
    radial-gradient(ellipse at 5% 10%, rgba(99,102,241,.07) 0%, transparent 40%),
    radial-gradient(ellipse at 95% 90%, rgba(245,158,11,.05) 0%, transparent 40%);
  display: flex;
  flex-direction: column;
}

.hna-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(15,23,42,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: .875rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.hna-header-brand { display: flex; align-items: center; gap: .75rem; }
.hna-logo-icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, #4f46e5, #10b981);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(99,102,241,.3);
  flex-shrink: 0;
}
.hna-logo-icon svg { width: 1.25rem; height: 1.25rem; color: #fff; }
.hna-logo-name { font-size: 1.125rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.2; }
.hna-logo-name span { color: #818cf8; }
.hna-logo-sub  { font-size: .65rem; color: #475569; }

.hna-header-right { display: flex; align-items: center; gap: .75rem; }
.hna-admin-user { display: none; flex-direction: column; align-items: flex-end; }
@media (min-width: 640px) { .hna-admin-user { display: flex; } }
.hna-admin-name { font-size: .75rem; font-weight: 600; color: #e2e8f0; }
.hna-admin-role {
  font-size: .65rem; color: #fbbf24; font-weight: 500;
  display: flex; align-items: center; gap: .25rem;
}

.hna-dot        { display: inline-block; width: .375rem; height: .375rem; border-radius: 50%; }
.hna-dot-amber  { background: #fbbf24; }
.hna-dot-green  { background: #34d399; animation: pulse 2s infinite; }
.hna-dot-gray   { background: #475569; }

/* Main */
.hna-main {
  flex: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
@media (max-width: 640px) { .hna-main { padding: 1.25rem 1rem 2.5rem; } }

/* Page header */
.hna-page-header { margin-bottom: 1.75rem; }
.hna-restricted-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .875rem;
  border-radius: .5rem;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.25);
  color: #fbbf24;
  font-size: .7rem; font-weight: 600;
  margin-bottom: .875rem;
}
.hna-restricted-badge svg { width: 1rem; height: 1rem; }
.hna-page-title   { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.hna-page-subtitle { font-size: .8125rem; color: #64748b; margin-top: .375rem; }

/* KPI Grid */
.hna-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .hna-kpi-grid { grid-template-columns: repeat(4, 1fr); } }

.hna-kpi {
  background: rgba(15,23,42,.85);
  border: 1px solid color-mix(in srgb, var(--kc) 25%, transparent);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s;
}
.hna-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.4); }

.hna-kpi-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .875rem;
}
.hna-kpi-label {
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #64748b;
}
.hna-kpi-icon {
  width: 2rem; height: 2rem; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hna-kpi-icon svg { width: 1rem; height: 1rem; }
.hna-kpi-value { font-size: 2rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: #fff; }
.hna-kpi-sub   { font-size: .7rem; color: #475569; margin-top: .375rem; }
.hna-kpi-flags { display: flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 700; font-family: monospace; color: #fff; margin: .375rem 0 .125rem; }
.hna-kpi-flags .sep { color: #334155; }

/* Tabela de empresas */
.hna-table-card {
  background: rgba(15,23,42,.75);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.hna-table-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap; gap: .75rem;
}
.hna-table-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9375rem; font-weight: 700; color: #f1f5f9;
}
.hna-table-title svg { width: 1.25rem; height: 1.25rem; color: #818cf8; flex-shrink: 0; }
.hna-table-title span { font-size: .875rem; color: #475569; font-weight: 400; }

.hna-refresh-btn {
  display: flex; align-items: center; gap: .375rem;
  padding: .375rem .875rem;
  font-size: .75rem; font-weight: 600;
  color: #818cf8;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: .625rem;
  cursor: pointer;
  transition: all .2s;
}
.hna-refresh-btn:hover { background: rgba(99,102,241,.15); border-color: #6366f1; }
.hna-refresh-btn svg   { width: .875rem; height: .875rem; }

.hna-table-scroll { overflow-x: auto; }
.hna-table-card table {
  width: 100%; border-collapse: collapse; min-width: 680px;
  font-size: .8125rem;
}
.hna-table-card thead th {
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #475569;
  padding: .75rem .875rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
}
.hna-table-card tbody tr { transition: background .15s; }
.hna-table-card tbody tr:hover { background: rgba(255,255,255,.03); }
.hna-table-card tbody td {
  padding: .875rem .875rem;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.hna-co-name  { font-weight: 600; color: #f1f5f9; }
.hna-co-nif   { font-size: .7rem; color: #475569; font-family: monospace; margin-top: .125rem; }
.hna-co-email { font-size: .7rem; color: #475569; margin-top: .125rem; }
.hna-date     { color: #64748b; font-size: .75rem; }

.hna-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .625rem;
  border-radius: 999px;
  font-size: .7rem; font-weight: 600;
  border: 1px solid;
}
.hna-badge-indigo { background: rgba(99,102,241,.1);  border-color: rgba(99,102,241,.25); color: #818cf8; }
.hna-badge-green  { background: rgba(52,211,153,.1);  border-color: rgba(52,211,153,.25); color: #34d399; }
.hna-badge-gray   { background: rgba(71,85,105,.2);   border-color: rgba(71,85,105,.4);  color: #64748b; }

/* Empty state */
.hna-empty {
  text-align: center; padding: 3.5rem 1rem;
}
.hna-empty svg { width: 3rem; height: 3rem; color: #1e293b; margin: 0 auto .875rem; display: block; }
.hna-empty p   { font-size: .875rem; color: #475569; }
.hna-empty small { font-size: .75rem; color: #334155; display: block; margin-top: .25rem; }

/* Nota de segurança */
.hna-security-note {
  display: flex; align-items: flex-start; gap: .875rem;
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(245,158,11,.15);
  border-radius: .875rem;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
}
.hna-security-note svg   { width: 1.25rem; height: 1.25rem; color: #fbbf24; flex-shrink: 0; margin-top: .125rem; }
.hna-security-note strong { display: block; font-size: .8125rem; font-weight: 600; color: #fbbf24; margin-bottom: .25rem; }
.hna-security-note p     { font-size: .75rem; color: #64748b; line-height: 1.6; margin: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   OCR — Banner financeiro
   ════════════════════════════════════════════════════════════════════════════ */
.hn-financial-card {
  background: linear-gradient(135deg, rgba(30,27,75,.75), rgba(15,23,42,.95));
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}

/* ════════════════════════════════════════════════════════════════════════════
   MODAL DE CONFIRMAÇÃO COM SENHA (ZERAR DADOS)
   ════════════════════════════════════════════════════════════════════════════ */
.hn-zerar-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: hnFadeIn .2s ease-out;
}
.hn-zerar-overlay.hn-closing {
  animation: hnFadeOut .18s ease-in forwards;
}

@keyframes hnFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hnFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.hn-zerar-card {
  background: #0f172a;
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 35px rgba(239, 68, 68, 0.15);
  border-radius: 1.25rem;
  max-width: 440px;
  width: 100%;
  padding: 2rem 1.75rem;
  text-align: center;
  position: relative;
  animation: hnScaleIn .2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hnScaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.hn-zerar-icon-wrap {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.hn-zerar-icon-wrap svg {
  width: 1.75rem;
  height: 1.75rem;
}

.hn-zerar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.hn-zerar-desc {
  font-size: 0.8125rem;
  color: #94a3b8;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.hn-zerar-desc strong {
  color: #f87171;
}
.hn-zerar-desc code {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #38bdf8;
}

.hn-zerar-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hn-zerar-input-group {
  position: relative;
}
.hn-zerar-input-group input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(15, 23, 42, 0.9);
  border: 2px solid rgba(239, 68, 68, 0.35);
  border-radius: 0.75rem;
  color: #fff;
  font-size: 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.3em;
  text-align: center;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.hn-zerar-input-group input:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}
.hn-zerar-input-group input::placeholder {
  letter-spacing: normal;
  font-size: 0.875rem;
  color: #475569;
}

.hn-input-shake {
  animation: hnShake 0.35s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes hnShake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(3px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
  40%, 60% { transform: translate3d(5px, 0, 0); }
}

.hn-zerar-error {
  font-size: 0.75rem;
  font-weight: 600;
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.hn-zerar-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.hn-zerar-btn-cancel {
  flex: 1;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hn-zerar-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.hn-zerar-btn-confirm {
  flex: 1.2;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border: 1px solid #ef4444;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.75rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
  transition: all 0.2s ease;
}
.hn-zerar-btn-confirm:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6);
  transform: translateY(-1px);
}
.hn-zerar-btn-confirm:active {
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════════════
   PADRONIZAÇÃO VISUAL, CORES E ÍCONES DAS ABAS LATERAIS
   ════════════════════════════════════════════════════════════════════════════ */
.hn-nav-item {
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
  margin-bottom: 2px;
}

/* Ícone da aba com container estilizado */
.hn-nav-item div.flex.items-center.gap-3 svg {
  transition: all 0.2s ease;
  padding: 5px;
  border-radius: 8px;
  width: 30px !important;
  height: 30px !important;
  box-sizing: content-box;
}

/* Indicador de borda lateral ativa */
.hn-nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transform: scaleY(0.4);
  transition: all 0.2s ease;
}
.hn-nav-item.hn-nav-active::before {
  opacity: 1;
  transform: scaleY(1);
}

/* 1. Dashboard: Violeta / Índigo */
.hn-nav-item[data-tab="dashboard"] div.flex.items-center.gap-3 svg {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.25);
}
.hn-nav-item[data-tab="dashboard"]:hover {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.2);
}
.hn-nav-item[data-tab="dashboard"].hn-nav-active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(79, 70, 229, 0.9)) !important;
  box-shadow: 0 6px 16px -2px rgba(99, 102, 241, 0.45);
  border-color: rgba(165, 180, 252, 0.4);
}
.hn-nav-item[data-tab="dashboard"].hn-nav-active::before {
  background: #a5b4fc;
}
.hn-nav-item[data-tab="dashboard"].hn-nav-active div.flex.items-center.gap-3 svg {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* 2. Inbox (Entrada): Azul Sky / Ciano */
.hn-nav-item[data-tab="inbox"] div.flex.items-center.gap-3 svg {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.hn-nav-item[data-tab="inbox"]:hover {
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.2);
}
.hn-nav-item[data-tab="inbox"].hn-nav-active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.95), rgba(14, 116, 144, 0.9)) !important;
  box-shadow: 0 6px 16px -2px rgba(56, 189, 248, 0.4);
  border-color: rgba(125, 211, 252, 0.4);
}
.hn-nav-item[data-tab="inbox"].hn-nav-active::before {
  background: #7dd3fc;
}
.hn-nav-item[data-tab="inbox"].hn-nav-active div.flex.items-center.gap-3 svg {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* 3. OCR (Conferência OCR): Âmbar / Laranja */
.hn-nav-item[data-tab="ocr"] div.flex.items-center.gap-3 svg {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.hn-nav-item[data-tab="ocr"]:hover {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.2);
}
.hn-nav-item[data-tab="ocr"].hn-nav-active {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.95), rgba(180, 83, 9, 0.9)) !important;
  box-shadow: 0 6px 16px -2px rgba(245, 158, 11, 0.4);
  border-color: rgba(253, 230, 138, 0.4);
}
.hn-nav-item[data-tab="ocr"].hn-nav-active::before {
  background: #fde68a;
}
.hn-nav-item[data-tab="ocr"].hn-nav-active div.flex.items-center.gap-3 svg {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* 4. Payroll (Fechamento & Folha): Esmeralda / Verde */
.hn-nav-item[data-tab="payroll"] div.flex.items-center.gap-3 svg {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.hn-nav-item[data-tab="payroll"]:hover {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.2);
}
.hn-nav-item[data-tab="payroll"].hn-nav-active {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.95), rgba(4, 120, 87, 0.9)) !important;
  box-shadow: 0 6px 16px -2px rgba(16, 185, 129, 0.4);
  border-color: rgba(110, 231, 183, 0.4);
}
.hn-nav-item[data-tab="payroll"].hn-nav-active::before {
  background: #6ee7b7;
}
.hn-nav-item[data-tab="payroll"].hn-nav-active div.flex.items-center.gap-3 svg {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* 5. Reports (Relatórios Oficiais): Roxo / Púrpura */
.hn-nav-item[data-tab="reports"] div.flex.items-center.gap-3 svg {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.hn-nav-item[data-tab="reports"]:hover {
  background: rgba(168, 85, 247, 0.08) !important;
  border-color: rgba(168, 85, 247, 0.2);
}
.hn-nav-item[data-tab="reports"].hn-nav-active {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.95), rgba(126, 34, 206, 0.9)) !important;
  box-shadow: 0 6px 16px -2px rgba(168, 85, 247, 0.4);
  border-color: rgba(216, 180, 254, 0.4);
}
.hn-nav-item[data-tab="reports"].hn-nav-active::before {
  background: #d8b4fe;
}
.hn-nav-item[data-tab="reports"].hn-nav-active div.flex.items-center.gap-3 svg {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* 6. Admin (Administração & Parâmetros): Slate / Teal */
.hn-nav-item[data-tab="admin"] div.flex.items-center.gap-3 svg {
  background: rgba(20, 184, 166, 0.12);
  color: #2dd4bf !important;
  border: 1px solid rgba(20, 184, 166, 0.25);
}
.hn-nav-item[data-tab="admin"]:hover {
  background: rgba(20, 184, 166, 0.08) !important;
  border-color: rgba(20, 184, 166, 0.2);
}
.hn-nav-item[data-tab="admin"].hn-nav-active {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.95), rgba(15, 118, 110, 0.9)) !important;
  box-shadow: 0 6px 16px -2px rgba(20, 184, 166, 0.4);
  border-color: rgba(153, 246, 228, 0.4);
}
.hn-nav-item[data-tab="admin"].hn-nav-active::before {
  background: #99f6e4;
}
.hn-nav-item[data-tab="admin"].hn-nav-active div.flex.items-center.gap-3 svg {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* 7. Audit (Trilha de Auditoria): Rosa / Rose */
.hn-nav-item[data-tab="audit"] div.flex.items-center.gap-3 svg {
  background: rgba(244, 63, 94, 0.12);
  color: #fb7185 !important;
  border: 1px solid rgba(244, 63, 94, 0.25);
}
.hn-nav-item[data-tab="audit"]:hover {
  background: rgba(244, 63, 94, 0.08) !important;
  border-color: rgba(244, 63, 94, 0.2);
}
.hn-nav-item[data-tab="audit"].hn-nav-active {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.95), rgba(190, 18, 60, 0.9)) !important;
  box-shadow: 0 6px 16px -2px rgba(244, 63, 94, 0.4);
  border-color: rgba(254, 205, 211, 0.4);
}
.hn-nav-item[data-tab="audit"].hn-nav-active::before {
  background: #fecdd3;
}
.hn-nav-item[data-tab="audit"].hn-nav-active div.flex.items-center.gap-3 svg {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* ════════════════════════════════════════════════════════════════════════════
   INBOX SUMMARY KPIS — LAYOUT INTEGRADO E CONSISTENTE
   ════════════════════════════════════════════════════════════════════════════ */
.hn-inbox-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
  width: 100%;
}

@media (min-width: 640px) {
  .hn-inbox-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.hn-inbox-kpi-card {
  position: relative;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.125rem 1.25rem;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hn-inbox-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-accent, #6366f1);
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.5), 0 0 15px -3px var(--card-accent, rgba(99, 102, 241, 0.2));
}

.hn-inbox-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--card-accent, #6366f1);
  opacity: 0.8;
}

.hn-inbox-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.hn-inbox-kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.hn-inbox-kpi-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--card-accent, #6366f1);
  box-shadow: 0 0 8px var(--card-accent, #6366f1);
}

.hn-inbox-kpi-val {
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.2;
  font-family: 'JetBrains Mono', monospace;
  color: var(--card-accent, #fff);
  letter-spacing: -0.02em;
}

.hn-inbox-kpi-sub {
  font-size: 0.7rem;
  font-weight: 500;
  color: #64748b;
  margin-top: 0.35rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   PERFORMANCE ACCELERATION & ZERO-LAG TAB SWITCHING
   ════════════════════════════════════════════════════════════════════════════ */
main {
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout style;
}

.hn-nav-item {
  transform: translateZ(0);
  will-change: background-color, transform, border-color;
  touch-action: manipulation;
}

/* Reduzir reflows com hardware acceleration em painéis pesados */
.glass-panel, .hn-financial-card, .hn-inbox-kpi-card {
  transform: translateZ(0);
  backface-visibility: hidden;
}