/*
 * PACTO IMMIGRATION PLATFORM — Design System v3.1 (Premium Redesign 2026)
 * Tokens · Layout · Components · Microinteractions
 * Identidade: azul navy protagonista com degradês, dourado discreto em
 * detalhes/badges/highlights, base preto/charcoal/branco/cinzas.
 * ─────────────────────────────────────────────
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  /* Brand accent — azul navy é o protagonista (fundo/gradientes/CTAs/estado ativo) */
  --pacto-navy-deep: #06162D;
  --pacto-navy-1:   #071C3A;
  --pacto-navy:     #0B2A52;
  --pacto-navy-h:   #123D73;
  --pacto-navy-2:   #1A5798;
  --pacto-navy-3:   #2C67AF;
  --pacto-navy-lt:  #EEF3F9;
  --pacto-navy-mid: rgba(11,42,82,.10);
  --accent:        var(--pacto-navy);
  --accent-glow:   rgba(26,87,152,.45);
  --accent-ring:   rgba(11,42,82,.14);
  --accent-grad:   linear-gradient(135deg, var(--pacto-navy) 0%, var(--pacto-navy-2) 100%);

  /* Gradientes premium — sofisticados, profundos, corporativos (não achatados) */
  --grad-sidebar:  linear-gradient(180deg, #06162D 0%, #071C3A 35%, #0B2A52 100%);
  --grad-radial-hl: radial-gradient(circle at top left, rgba(44,103,175,.22), transparent 40%);
  --grad-special:  linear-gradient(135deg, #071C3A 0%, #0B2A52 55%, #164D89 100%);
  --grad-cta:      linear-gradient(135deg, #0B2A52, #18599B);

  /* Dourado — usado SOMENTE em detalhes: badges, indicadores, highlights, acentos pequenos */
  --pacto-gold:       #D6A842;
  --pacto-gold-light: #E3BB58;
  --pacto-gold-h:     #B98F31;
  --pacto-gold-tx:    #8A6A22;
  --pacto-gold-lt:    #FBF6EC;
  --pacto-gold-mid:   rgba(214,168,66,.18);

  /* Erro/perigo — semântica própria, independente do accent de marca */
  --error:      #DC2626;
  --error-h:    #B91C1C;
  --error-lt:   #FEF2F2;
  --error-mid:  rgba(220,38,38,.12);
  /* aliases legados (mantidos por compatibilidade — mesmo valor de --error) */
  --vox-red:      var(--error);
  --vox-red-h:    var(--error-h);
  --vox-red-lt:   var(--error-lt);
  --vox-red-mid:  var(--error-mid);

  /* Neutrals — light ground (base: preto/charcoal, branco, cinzas) */
  --bg:          #F8F8F6;
  --bg-2:        #EFF1F3;
  --surface:     #FFFFFF;
  --surface-2:   #FAFBFC;
  --border:      #E7E9EC;
  --border-2:    #D8DBE0;

  /* Text */
  --tx-1:  #14161A;
  --tx-2:  #62676F;
  --tx-3:  #9BA0A8;

  /* Sidebar (navy profundo — não preto puro — mais premium e alinhado à marca) */
  --sb-bg:      #071C3A;
  --sb-bg-2:    #06162D;
  --sb-border:  rgba(255,255,255,.08);
  --sb-tx:      rgba(255,255,255,.58);
  --sb-tx-h:    rgba(255,255,255,.92);
  --sb-tx-a:    #FFFFFF;
  --sb-icon:    rgba(255,255,255,.40);
  --sb-icon-a:  #FFFFFF;
  --sb-hover:   rgba(255,255,255,.06);
  --sb-active:  linear-gradient(180deg, rgba(44,103,175,.36), rgba(44,103,175,.09));
  --sb-group:   rgba(255,255,255,.38);
  --sb-w:       236px;
  --sb-w-collapsed: 72px;

  /* Header */
  --hdr-h:     60px;
  --hdr-bg:    #FFFFFF;
  --hdr-bdr:   #E7E9EC;

  /* Status */
  --green:     #16A34A;
  --green-bg:  #F0FDF4;
  --amber:     #D97706;
  --amber-bg:  #FFFBEB;
  --blue:      #2563EB;
  --blue-bg:   #EFF6FF;

  /* Spacing scale (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* Typography scale */
  --fs-display: clamp(26px,3vw,34px);
  --fs-h1: 24px;
  --fs-h2: 18px;
  --fs-h3: 15px;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-label: 11px;
  --fs-caption: 10.5px;

  /* Radii — 10–16px range preferred */
  --r-sm: 6px;
  --r:    10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-f:  9999px;

  /* Elevation — extremely subtle, low-contrast */
  --sh-xs: 0 1px 2px rgba(10,20,35,.04);
  --sh-sm: 0 1px 3px rgba(10,20,35,.06), 0 1px 2px rgba(10,20,35,.04);
  --sh:    0 4px 14px rgba(10,20,35,.07), 0 1px 3px rgba(10,20,35,.05);
  --sh-md: 0 10px 28px rgba(10,20,35,.10), 0 2px 6px rgba(10,20,35,.05);
  --sh-lg: 0 24px 48px rgba(10,20,35,.16), 0 6px 16px rgba(10,20,35,.07);

  /* Motion — 150–250ms, natural easing */
  --ease:      cubic-bezier(.4,0,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  120ms;
  --dur:       180ms;
  --dur-slow:  260ms;
}

/* Dark mode overrides */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:       #0A0A0B;
    --bg-2:     #131416;
    --surface:  #18191C;
    --surface-2:#1E1F23;
    --border:   #26282C;
    --border-2: #33353A;
    --tx-1:     #F3F4F6;
    --tx-2:     #9CA3AF;
    --tx-3:     #6B7280;
    --hdr-bg:   #111214;
    --hdr-bdr:  #232427;
  }
}
:root[data-theme="dark"] {
  --bg:#0A0A0B;--bg-2:#131416;--surface:#18191C;--surface-2:#1E1F23;
  --border:#26282C;--border-2:#33353A;--tx-1:#F3F4F6;--tx-2:#9CA3AF;--tx-3:#6B7280;
  --hdr-bg:#111214;--hdr-bdr:#232427;
}
:root[data-theme="light"] {
  --bg:#F7F8F9;--bg-2:#EFF1F3;--surface:#FFF;--surface-2:#FAFBFC;
  --border:#E7E9EC;--border-2:#D8DBE0;--tx-1:#14161A;--tx-2:#62676F;--tx-3:#9BA0A8;
  --hdr-bg:#FFF;--hdr-bdr:#E7E9EC;
}

/* ═══════════════════════════════════════════
   RESET + BASE
═══════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { font-size:16px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--tx-1);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: inherit; }
button { font-family: inherit; }
::selection { background: var(--accent-ring); color: var(--tx-1); }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Typography utility scale */
.tx-display { font-size:var(--fs-display); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.tx-h1 { font-size:var(--fs-h1); font-weight:800; letter-spacing:-.015em; line-height:1.2; }
.tx-h2 { font-size:var(--fs-h2); font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.tx-h3 { font-size:var(--fs-h3); font-weight:700; line-height:1.35; }
.tx-body { font-size:var(--fs-body); font-weight:400; line-height:1.55; }
.tx-small { font-size:var(--fs-small); color:var(--tx-2); }
.tx-label { font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2); }
.tx-caption { font-size:var(--fs-caption); color:var(--tx-3); }
.tx-muted { color:var(--tx-3); }

/* ═══════════════════════════════════════════
   APP SHELL LAYOUT
═══════════════════════════════════════════ */
.vox-app {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ── */
.vox-sidebar {
  width: var(--sb-w);
  background: var(--grad-sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  flex-shrink: 0;
  border-right: 1px solid var(--sb-border);
  transition: width var(--dur-slow) var(--ease-out);
}
.vox-sidebar::before {
  content:'';
  position:absolute; inset:0;
  background: var(--grad-radial-hl);
  pointer-events:none;
  z-index:0;
}
.vox-sidebar::-webkit-scrollbar { display:none; }
.vox-sidebar.collapsed { width: var(--sb-w-collapsed); }

.sb-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 20px 19px;
  text-decoration: none;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
  position: relative;
  transition: padding var(--dur-slow) var(--ease-out);
}
.sb-logo::after {
  content:'';
  position:absolute; left:0; right:0; top:0; height:64px;
  background: radial-gradient(60% 100% at 18% 0%, rgba(44,103,175,.30) 0%, transparent 70%);
  pointer-events:none;
}
.vox-sidebar.collapsed .sb-logo { padding: 22px 0 19px; justify-content: center; }
.sb-logo-mark {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--pacto-navy-2) 0%, var(--pacto-navy) 60%, var(--pacto-navy-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.sb-logo-mark span {
  font-family:'Inter',Arial,sans-serif;
  font-weight:800;
  font-size:13px;
  letter-spacing:.02em;
  color: var(--pacto-gold-light);
  line-height:1;
}
.sb-logo-img { height:30px; width:auto; display:block; filter:drop-shadow(0 1px 8px rgba(0,0,0,.4)); position:relative; z-index:1; }
.sb-logo-word-img { height:38px; width:auto; display:block; filter:drop-shadow(0 1px 8px rgba(0,0,0,.35)); position:relative; z-index:1; }
.vox-sidebar.collapsed .sb-logo-word-img { display:none !important; }
.sb-logo-word {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em;
  color: #fff;
  line-height:1.15;
  position:relative; z-index:1;
}
.sb-logo-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pacto-gold-light);
  line-height:1;
  margin-top:4px;
  position:relative; z-index:1;
  opacity:.92;
}
.vox-sidebar.collapsed .sb-logo-word,
.vox-sidebar.collapsed .sb-logo-sub,
.vox-sidebar.collapsed .sb-group-label,
.vox-sidebar.collapsed .sb-item span,
.vox-sidebar.collapsed .sb-badge,
.vox-sidebar.collapsed .sb-user-info,
.vox-sidebar.collapsed .sb-collapse-label { display:none !important; }

.sb-nav { flex:1; padding: 12px 0 12px; position:relative; z-index:1; }

.sb-group { padding-top:22px; }
.sb-group:first-child { padding-top:12px; }
.sb-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sb-group);
  padding: 0 20px;
  margin-bottom: 6px;
  display: block;
}
.vox-sidebar.collapsed .sb-group-label { display:none; }
.vox-sidebar.collapsed .sb-group:not(:first-child) {
  border-top: 1px solid var(--sb-border);
  padding-top: 14px;
  margin-top: 8px;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px;
  margin: 2px 10px;
  border-radius: var(--r);
  color: var(--sb-tx);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  width: calc(100% - 20px);
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
  border-left: 2px solid transparent;
}
.vox-sidebar.collapsed .sb-item { justify-content:center; padding:11px; margin:2px 12px; width:calc(100% - 24px); }
.sb-item:hover { background: var(--sb-hover); color: var(--sb-tx-h); }
.sb-item:active { transform: scale(.985); }
.sb-item.active {
  background: var(--sb-active);
  color: var(--sb-tx-a);
  border-left-color: var(--pacto-gold);
  box-shadow: inset 0 0 0 1px rgba(44,103,175,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.sb-item.active::before {
  content:'';
  position:absolute; left:-2px; top:8px; bottom:8px; width:2px;
  background: linear-gradient(180deg, var(--pacto-gold-light), var(--pacto-gold));
  box-shadow: 0 0 10px 1.5px rgba(214,168,66,.55);
  border-radius: var(--r-f);
}
.sb-item.active::after {
  content:'';
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%;
  background: var(--pacto-gold-light);
  box-shadow: 0 0 6px 1.5px rgba(227,187,88,.65);
}
.vox-sidebar.collapsed .sb-item.active::after { display:none; }
.sb-item.active .sb-icon,
.sb-item.active svg { color: var(--sb-tx-a) !important; opacity:1; }
.sb-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--sb-icon);
  transition: color var(--dur), opacity var(--dur), transform var(--dur-fast);
}
.sb-item:hover .sb-icon { color: rgba(255,255,255,.92); opacity:1; transform: scale(1.08); }
.sb-item span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sb-badge {
  margin-left: auto;
  background: linear-gradient(135deg, var(--pacto-gold-light), var(--pacto-gold));
  color: #1B2C46;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-f);
  min-width: 18px;
  text-align: center;
  box-shadow: 0 0 8px rgba(214,168,66,.35);
}

/* ═══════════════════════════════════════════
   RICH TOOLTIP — JS-driven floating element (#vox-tip)
   Shown only in collapsed sidebar mode, via mouseenter/mouseleave.
   Populated with a bold title + short description line.
═══════════════════════════════════════════ */
#vox-tip {
  position: fixed;
  z-index: 900;
  background: linear-gradient(155deg, #0F2C50 0%, #0A2244 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  padding: 10px 14px;
  box-shadow: 0 14px 32px rgba(6,15,30,.45), 0 2px 8px rgba(6,15,30,.3);
  max-width: 230px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(-6px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
#vox-tip.show { opacity: 1; transform: translateY(-50%) translateX(0); }
#vox-tip::before {
  content:'';
  position:absolute; left:-5px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:9px; height:9px;
  background:#0A2244;
  border-left:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
#vox-tip .vox-tip-title {
  font-size: 12.5px; font-weight: 700; color:#fff;
  letter-spacing:-.005em; line-height:1.3;
}
#vox-tip .vox-tip-desc {
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,.62);
  line-height:1.4; margin-top:3px;
}

.sb-footer {
  border-top: 1px solid var(--sb-border);
  padding: 10px 0;
  flex-shrink: 0;
  position: relative; z-index:1;
}
.sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  margin: 0 10px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background var(--dur);
  text-decoration: none;
}
.vox-sidebar.collapsed .sb-user { justify-content:center; padding:9px; margin:0 12px; }
.sb-user:hover { background: var(--sb-hover); }
.sb-avatar {
  width: 30px; height: 30px;
  border-radius: var(--r-f);
  background: linear-gradient(135deg, var(--pacto-navy-2), var(--pacto-navy));
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing:-.3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}
.sb-user-info { flex:1; min-width:0; }
.sb-user-name { font-size:12.5px; font-weight:600; color:var(--sb-tx-h); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user-role { font-size:10.5px; color:var(--sb-group); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Collapse toggle — visually prominent, deliberate control (never auto) */
.sb-collapse-btn {
  display:flex; align-items:center; gap:10px;
  width:calc(100% - 20px); margin:4px 10px 6px;
  padding:8.5px 15px;
  border-radius:var(--r);
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  cursor:pointer;
  color: rgba(255,255,255,.68);
  font-size:12px; font-weight:600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sb-collapse-btn:hover {
  background: rgba(214,168,66,.10);
  border-color: rgba(214,168,66,.30);
  color: var(--pacto-gold-light);
}
.sb-collapse-btn svg { width:15px; height:15px; flex-shrink:0; transition: transform var(--dur-slow) var(--ease-out); }
.vox-sidebar.collapsed .sb-collapse-btn { justify-content:center; padding:8.5px; margin:4px 12px 6px; }
.vox-sidebar.collapsed .sb-collapse-btn svg { transform: rotate(180deg); }

/* ── Content area ── */
.vox-content {
  margin-left: var(--sb-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--dur-slow) var(--ease-out);
}
body.sb-collapsed .vox-content { margin-left: var(--sb-w-collapsed); }

/* ── Header ── */
.vox-header {
  height: var(--hdr-h);
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-bdr);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}
.hdr-menu-btn {
  display: none;
  width: 36px; height:36px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: none;
  color: var(--tx-2);
  cursor: pointer;
  align-items:center; justify-content:center;
  flex-shrink:0;
  transition: background var(--dur), border-color var(--dur);
}
.hdr-menu-btn:hover { background:var(--bg-2); }

/* Command bar search */
.hdr-search { flex:1; max-width: 420px; position: relative; }
.hdr-search input {
  width:100%; height:37px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0 64px 0 36px;
  font-size: 13.5px; font-family: inherit;
  color: var(--tx-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}
.hdr-search input::placeholder { color: var(--tx-3); }
.hdr-search input:hover { border-color: var(--border-2); }
.hdr-search input:focus {
  outline:none; background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-ring);
}
.hdr-search-ico {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color: var(--tx-3); pointer-events:none;
  width:15px; height:15px;
}
.hdr-search-kbd {
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:2px;
  font-size:11px; font-weight:600; color:var(--tx-3);
  background:var(--surface); border:1px solid var(--border);
  padding:2.5px 6px; border-radius:5px; pointer-events:none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height:1;
  box-shadow: var(--sh-xs);
}
.hdr-spacer { flex:1; }
.hdr-actions { display:flex; align-items:center; gap:6px; }
.hdr-icon {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background:none;
  color: var(--tx-2);
  cursor:pointer;
  transition: background var(--dur) var(--ease), color var(--dur), border-color var(--dur), transform var(--dur-fast);
  text-decoration:none;
  flex-shrink:0;
  position:relative;
}
.hdr-icon:hover { background:var(--bg-2); color:var(--tx-1); border-color:var(--border-2); transform:translateY(-1px); }
.hdr-icon:active { transform:translateY(0); }
.hdr-notif-dot {
  position:absolute; top:7px; right:7px;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--pacto-gold);
  border: 1.5px solid var(--hdr-bg);
  box-shadow: 0 0 6px rgba(201,163,92,.5);
}
.hdr-divider { width:1px; height:22px; background:var(--border); margin:0 4px; }
.hdr-user {
  display:flex; align-items:center; gap:8px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor:pointer;
  transition: background var(--dur), border-color var(--dur);
  text-decoration:none;
  background:none;
}
.hdr-user:hover { background:var(--bg-2); border-color:var(--border); }
.hdr-avatar {
  width:30px; height:30px;
  border-radius:var(--r-f);
  background:linear-gradient(135deg, var(--pacto-navy-2), var(--pacto-navy));
  color:#fff;
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hdr-user-info { display:flex; flex-direction:column; }
.hdr-user-name { font-size:12.5px; font-weight:600; color:var(--tx-1); line-height:1.25; }
.hdr-user-role { font-size:10.5px; color:var(--tx-3); line-height:1.25; }

/* Sidebar overlay (mobile) */
.sb-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(4,10,20,.6);
  backdrop-filter:blur(3px);
  z-index:199;
}

/* ═══════════════════════════════════════════
   PAGE CONTENT
═══════════════════════════════════════════ */
.vox-page { padding:32px; flex:1; max-width:1440px; width:100%; margin:0 auto; }
@media(max-width:640px){ .vox-page { padding:20px 16px; } }

.page-hero {
  background: var(--grad-special);
  border-radius: var(--r-xl);
  padding: 38px 42px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--sh-lg);
}
.page-hero::after {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 88% -15%, rgba(44,103,175,.35) 0%, transparent 52%),
    radial-gradient(ellipse at 6% 118%, rgba(214,168,66,.08) 0%, transparent 48%),
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.04) 0%, transparent 30%);
  pointer-events:none;
}
.page-hero::before {
  content:'';
  position:absolute; inset:0;
  opacity:.04; mix-blend-mode:overlay; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-eyebrow {
  font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
  position:relative; z-index:1;
}
.hero-title {
  font-size:var(--fs-display); font-weight:800;
  color:#FFF;
  letter-spacing:-.02em;
  line-height:1.16;
  margin-bottom:10px;
  position:relative; z-index:1;
}
.hero-title span {
  background: linear-gradient(135deg, var(--pacto-gold-light) 0%, var(--pacto-gold) 100%);
  -webkit-background-clip: text; background-clip:text; color:transparent;
  position:relative;
}
.hero-tagline {
  font-size:15.5px; font-weight:500;
  color:rgba(255,255,255,.55);
  margin-bottom:10px;
  position:relative; z-index:1;
}
.hero-desc {
  font-size:13px;
  color:rgba(255,255,255,.36);
  max-width:520px;
  line-height:1.65;
  position:relative; z-index:1;
}
.hero-user {
  margin-top:24px;
  font-size:13px;
  color:rgba(255,255,255,.44);
  position:relative; z-index:1;
}
.hero-user strong { color:rgba(255,255,255,.88); font-weight:600; }

.hero-watermark {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  height: clamp(56px, 8vw, 116px);
  width: auto;
  opacity: .07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 900px) { .hero-watermark { display:none; } }

/* Metrics row — premium metric cards, subtle per-card identity within one system */
.metrics-row {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
  margin-bottom:28px;
}
.metric-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:20px 22px;
  box-shadow:var(--sh-xs);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur), transform var(--dur) var(--ease);
  position:relative;
  overflow:hidden;
}
.metric-card::before {
  content:'';
  position:absolute; left:0; top:0; right:0; height:2.5px;
  background: var(--metric-accent, var(--accent-grad));
  opacity:0; transition: opacity var(--dur) var(--ease);
}
.metric-card:hover { box-shadow:var(--sh-md); border-color:var(--border-2); transform:translateY(-2px); }
.metric-card:hover::before { opacity:1; }
.metric-icon-wrap {
  width:34px; height:34px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background: var(--metric-icon-bg, var(--pacto-navy-lt));
  color: var(--metric-icon-fg, var(--pacto-navy));
  margin-bottom:14px;
}
.metric-icon-wrap svg { width:16px; height:16px; }
.metric-card.v-navy   { --metric-accent: linear-gradient(90deg, var(--pacto-navy-2), var(--pacto-navy)); --metric-icon-bg: var(--pacto-navy-lt); --metric-icon-fg: var(--pacto-navy); }
.metric-card.v-deep   { --metric-accent: linear-gradient(90deg, var(--pacto-navy), var(--pacto-navy-deep)); --metric-icon-bg: #EDF1F6; --metric-icon-fg: var(--pacto-navy-deep); }
.metric-card.v-gold   { --metric-accent: linear-gradient(90deg, var(--pacto-gold-light), var(--pacto-gold)); --metric-icon-bg: var(--pacto-gold-lt); --metric-icon-fg: var(--pacto-gold-tx); }
.metric-card.v-blue   { --metric-accent: linear-gradient(90deg, var(--pacto-navy-3), var(--pacto-navy-2)); --metric-icon-bg: #EAF1FA; --metric-icon-fg: var(--pacto-navy-2); }
.metric-label {
  font-size:10.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--tx-3);
  margin-bottom:8px;
  display:flex; align-items:center; gap:6px;
}
.metric-label svg { width:13px; height:13px; opacity:.55; }
.metric-value {
  font-size:33px; font-weight:800;
  color:var(--tx-1);
  letter-spacing:-.03em;
  line-height:1;
  margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.metric-sub {
  font-size:11.5px; color:var(--tx-2);
  display:flex; align-items:center; gap:5px;
}
.metric-sub strong { color:var(--green); font-weight:600; }
.metric-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.metric-dot-red { background:var(--accent); }
.metric-dot-green { background:var(--green); }

/* Quick actions — toolbar with primary/secondary hierarchy */
.quick-actions {
  display:flex; flex-wrap:wrap; gap:9px;
  margin-bottom:28px;
}
.q-action {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 17px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-f);
  font-size:13px; font-weight:500;
  color:var(--tx-1);
  text-decoration:none; cursor:pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur), color var(--dur), box-shadow var(--dur) var(--ease), transform var(--dur-fast);
  box-shadow:var(--sh-xs);
  white-space:nowrap;
}
.q-action svg { width:13px; height:13px; color:var(--tx-2); flex-shrink:0; transition:color var(--dur); }
.q-action:hover { border-color:var(--border-2); box-shadow:var(--sh-sm); transform:translateY(-1px); }
.q-action:active { transform:translateY(0); }
.q-action.primary,
.q-action:hover.primary { background:var(--grad-cta); border-color:var(--pacto-navy); color:#fff; box-shadow:0 6px 18px rgba(11,42,82,.32); }
.q-action.primary svg { color:#fff; }
.q-action.primary:hover { filter:brightness(1.08); box-shadow:0 8px 22px rgba(11,42,82,.4); transform:translateY(-1.5px); }

/* Section */
.section { margin-bottom:36px; }
.section-hdr {
  display:flex; align-items:baseline; gap:12px;
  margin-bottom:16px;
}
.section-ttl { font-size:var(--fs-h3); font-weight:700; color:var(--tx-1); }
.section-desc { font-size:12px; color:var(--tx-3); }
.section-cnt { font-size:12px; color:var(--tx-3); font-weight:500; }
.section-line { flex:1; height:1px; background:var(--border); }

/* Module grid */
.mod-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;
}
.mod-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:20px;
  display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow:var(--sh-xs);
  position:relative; overflow:hidden;
  cursor:pointer;
}
.mod-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:2.5px; background:transparent;
  transition:background var(--dur);
}
.mod-card:hover { border-color:rgba(26,87,152,.32); box-shadow:var(--sh-md); transform:translateY(-2px); }
.mod-card:hover::before { background:var(--accent-grad); }
.mod-icon {
  width:38px; height:38px;
  border-radius:10px;
  background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--tx-2);
  flex-shrink:0;
  transition:background var(--dur), color var(--dur), transform var(--dur) var(--ease);
}
.mod-icon svg { width:18px; height:18px; }
.mod-card:hover .mod-icon { background:var(--pacto-navy-mid); color:var(--accent); transform:scale(1.06); }
.mod-name { font-size:14.5px; font-weight:700; color:var(--tx-1); line-height:1.2; }
.mod-desc { font-size:12.5px; color:var(--tx-2); line-height:1.55; flex:1; }
.mod-foot {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:6px;
}
.mod-cta {
  font-size:12px; font-weight:600;
  color:var(--tx-3);
  display:flex; align-items:center; gap:4px;
  transition:color var(--dur);
}
.mod-cta svg { width:12px; height:12px; transition:transform var(--dur) var(--ease); }
.mod-card:hover .mod-cta { color:var(--accent); }
.mod-card:hover .mod-cta svg { transform:translateX(3px); }
.mod-badge {
  font-size:10.5px; font-weight:700;
  padding:2px 8px;
  border-radius:var(--r-f);
}
.mod-badge-new { background:var(--pacto-gold-mid); color:var(--pacto-gold-tx); }
.mod-badge-ai  {
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(37,99,235,.12));
  color:#4F46E5;
  display:inline-flex; align-items:center; gap:3px;
  box-shadow: inset 0 0 0 1px rgba(79,70,229,.14);
}
.mod-badge-ai::before { content:'✦'; font-size:9px; }
.mod-badge-beta{ background:rgba(217,119,6,.1); color:var(--amber); }
.mod-badge-offline { background:var(--bg-2); color:var(--tx-3); }

/* Offline / phase-2 cards */
.mod-card.offline { opacity:.7; cursor:default; pointer-events:none; }
.mod-card.offline:hover { border-color:var(--border); box-shadow:var(--sh-xs); transform:none; }
.mod-card.offline:hover::before { background:transparent; }
.mod-offline-status { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--tx-3); margin-top:2px; }
.mod-offline-dot { width:6px; height:6px; border-radius:50%; background:var(--tx-3); flex-shrink:0; }

/* Two-column bottom */
.home-bottom {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:4px;
}
@media(max-width:800px){ .home-bottom { grid-template-columns:1fr; } }

/* Activity */
.activity-card, .continue-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--sh-xs);
}
.activity-card-hdr, .continue-card-hdr {
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  font-size:13px; font-weight:700; color:var(--tx-1);
}
.activity-list { list-style:none; }
.activity-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 18px;
  border-bottom:1px solid var(--border);
  transition:background var(--dur);
}
.activity-item:last-child { border-bottom:none; }
.activity-item:hover { background:var(--bg); }
.act-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; opacity:.7; }
.act-body { flex:1; min-width:0; }
.act-name { font-size:13px; font-weight:600; color:var(--tx-1); }
.act-detail { font-size:12px; color:var(--tx-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-time { font-size:11px; color:var(--tx-3); flex-shrink:0; }

.continue-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
  text-decoration:none; color:inherit;
  transition:background var(--dur);
}
.continue-item:last-child { border-bottom:none; }
.continue-item:hover { background:var(--bg); }
.cont-icon {
  width:34px; height:34px; border-radius:var(--r);
  background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--tx-2); flex-shrink:0;
  transition:background var(--dur), color var(--dur);
}
.cont-icon svg { width:15px; height:15px; }
.continue-item:hover .cont-icon { background:var(--pacto-navy-mid); color:var(--accent); }
.cont-body { flex:1; min-width:0; }
.cont-name { font-size:13px; font-weight:600; color:var(--tx-1); }
.cont-sub { font-size:11.5px; color:var(--tx-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cont-arrow { color:var(--tx-3); flex-shrink:0; transition:color var(--dur),transform var(--dur); }
.continue-item:hover .cont-arrow { color:var(--accent); transform:translateX(2px); }

/* ═══════════════════════════════════════════
   UNIVERSAL COMPONENTS
═══════════════════════════════════════════ */

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px;
  border-radius:var(--r);
  font-size:13.5px; font-weight:600; font-family:inherit;
  border:1px solid transparent;
  cursor:pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur), color var(--dur), box-shadow var(--dur) var(--ease), transform var(--dur-fast);
  text-decoration:none; white-space:nowrap; line-height:1;
}
.btn svg { width:14px; height:14px; flex-shrink:0; }
.btn-primary { background:var(--accent-grad); color:#fff; border-color:var(--pacto-navy); box-shadow:0 1px 2px rgba(11,43,78,.2); }
.btn-primary:hover { background:linear-gradient(135deg, var(--pacto-navy-h), var(--pacto-navy-2)); border-color:var(--pacto-navy-h); box-shadow:0 4px 12px var(--accent-ring); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }
.btn-secondary { background:var(--surface); color:var(--tx-1); border-color:var(--border); }
.btn-secondary:hover { background:var(--bg-2); border-color:var(--border-2); }
.btn-ghost { background:none; color:var(--tx-2); border-color:transparent; }
.btn-ghost:hover { background:var(--bg-2); color:var(--tx-1); }
.btn-sm { padding:6.5px 12px; font-size:12px; }
.btn-lg { padding:11px 22px; font-size:15px; }
.btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn:focus-visible { outline-offset:2px; }

/* Inputs */
.form-group { margin-bottom:14px; }
.form-label {
  display:block; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--tx-2); margin-bottom:6px;
}
.form-input, .form-select, .form-textarea {
  width:100%; padding:9px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  color:var(--tx-1); font-size:14px; font-family:inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance:none;
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color:var(--border-2); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3.5px var(--accent-ring);
}
.form-textarea { resize:vertical; min-height:100px; line-height:1.5; }

/* Badges */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700;
  padding:2.5px 8px; border-radius:var(--r-f);
}
.badge-red   { background:var(--error-mid); color:var(--error); }
.badge-green { background:var(--green-bg); color:var(--green); }
.badge-amber { background:var(--amber-bg); color:var(--amber); }
.badge-gray  { background:var(--bg-2); color:var(--tx-2); }
.badge-blue  { background:var(--blue-bg); color:var(--blue); }
.badge-gold  { background:var(--pacto-gold-mid); color:var(--pacto-gold-tx); }
.badge-ai {
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(37,99,235,.12));
  color:#4F46E5;
  box-shadow: inset 0 0 0 1px rgba(79,70,229,.14);
}

/* Tabs */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.tab {
  padding:9px 16px; font-size:13px; font-weight:600; color:var(--tx-2);
  border:none; background:none; cursor:pointer; position:relative;
  transition:color var(--dur);
}
.tab:hover { color:var(--tx-1); }
.tab.active { color:var(--tx-1); }
.tab.active::after {
  content:''; position:absolute; left:8px; right:8px; bottom:-1px; height:2px;
  background:var(--accent); border-radius:var(--r-f);
}

/* Table */
.table-wrap { overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
thead { background:var(--surface-2); }
thead th {
  padding:11px 16px; text-align:left;
  font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--tx-3);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody tr { border-bottom:1px solid var(--border); transition:background var(--dur); }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--bg); }
tbody td { padding:11px 16px; color:var(--tx-1); }

/* Alert */
.alert {
  padding:11px 14px;
  border-radius:var(--r);
  font-size:13.5px;
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.alert-error   { background:var(--error-lt); color:var(--error); border:1px solid rgba(220,38,38,.2); }
.alert-success { background:var(--green-bg); color:var(--green); border:1px solid rgba(22,163,74,.2); }
.alert-warning { background:var(--amber-bg); color:var(--amber); border:1px solid rgba(217,119,6,.2); }
.alert-info    { background:var(--blue-bg); color:var(--blue); border:1px solid rgba(37,99,235,.2); }

/* Tooltip (generic, data-tip) — auxiliary icon-only actions use this everywhere,
   sidebar expanded or not (menu, search, notificações, avatar, collapse) */
[data-tip] { position:relative; }
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  background:#10233F; color:#fff; font-size:11.5px; font-weight:500;
  padding:5px 10px; border-radius:var(--r-sm); white-space:nowrap;
  box-shadow: var(--sh-md); pointer-events:none; z-index:500;
  animation: tipInUp var(--dur-fast) var(--ease-out);
}
@keyframes tipInUp { from{ opacity:0; transform:translateX(-50%) translateY(3px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }

/* Toast */
#vox-toasts {
  position:fixed; bottom:20px; right:20px;
  z-index:9999; display:flex; flex-direction:column; gap:8px;
  max-width:370px; width:calc(100% - 40px);
}
.vox-toast {
  display:flex; align-items:center; gap:10px;
  padding:12px 15px;
  background:#0F213B;
  color:rgba(255,255,255,.92);
  border-radius:var(--r-md);
  font-size:13.5px; font-weight:500;
  box-shadow:var(--sh-lg);
  border:1px solid rgba(255,255,255,.09);
  animation:toastIn var(--dur-slow) var(--ease-out);
}
.vox-toast .t-icon { flex-shrink:0; width:16px; height:16px; }
.vox-toast.success .t-icon { color:#4ADE80; }
.vox-toast.error   .t-icon { color:#F87171; }
.vox-toast.info    .t-icon { color:#60A5FA; }
@keyframes toastIn { from { opacity:0; transform:translateY(8px) scale(.97); } }

/* Empty state */
.empty-state { text-align:center; padding:50px 20px; color:var(--tx-3); }
.empty-state svg { width:44px; height:44px; margin:0 auto 14px; opacity:.32; display:block; }
.empty-state h3 { font-size:14.5px; font-weight:600; color:var(--tx-2); margin-bottom:5px; }
.empty-state p  { font-size:13px; }

/* Skeleton */
.sk { background:linear-gradient(90deg,var(--border) 25%,var(--bg-2) 50%,var(--border) 75%); background-size:200% 100%; animation:sk-wave 1.4s infinite; border-radius:var(--r); }
@keyframes sk-wave { to { background-position:-200% 0; } }

/* Modal */
.vox-modal-overlay {
  position:fixed; inset:0; background:rgba(4,10,20,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:1000;
  animation: fadeIn var(--dur) var(--ease);
}
.vox-modal {
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  border:1px solid var(--border); max-width:480px; width:calc(100% - 40px);
  animation: modalIn var(--dur-slow) var(--ease-out);
}
@keyframes fadeIn { from{opacity:0;} }
@keyframes modalIn { from{opacity:0; transform:translateY(8px) scale(.98);} }

/* ═══════════════════════════════════════════
   INNER PAGE PATTERN
═══════════════════════════════════════════ */
.page-header { margin-bottom:24px; }
.page-eyebrow {
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:5px;
}
.page-title { font-size:var(--fs-h1); font-weight:800; letter-spacing:-.015em; color:var(--tx-1); }
.page-sub { font-size:13px; color:var(--tx-2); margin-top:3px; }
.page-hdr-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* Card/panel */
.vox-panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-xs);
  transition: box-shadow var(--dur), border-color var(--dur);
}
.panel-hdr {
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  font-size:13px; font-weight:700; color:var(--tx-1);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.panel-body { padding:20px; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(min-width:1920px) {
  .vox-page { max-width:1600px; }
}
@media(max-width:1366px) {
  .vox-page { padding:28px; }
}
@media(max-width:1024px) {
  .metrics-row { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px) {
  .vox-sidebar { transform:translateX(-100%); transition:transform var(--dur-slow) var(--ease-out); width:var(--sb-w) !important; }
  .vox-sidebar.open { transform:translateX(0); box-shadow:var(--sh-lg); }
  .vox-sidebar.collapsed:not(.open) { transform:translateX(-100%); }
  .vox-content, body.sb-collapsed .vox-content { margin-left:0; }
  .sb-overlay.open { display:block; }
  .hdr-menu-btn { display:flex; }
  .hdr-user-info { display:none; }
  .sb-collapse-btn { display:none; }
}
@media(max-width:640px) {
  .hdr-search { display:none; }
  .metrics-row { grid-template-columns:repeat(2,1fr); }
  .mod-grid { grid-template-columns:1fr; }
  .vox-page { padding:20px 16px; }
}

/* ── Page Footer ─────────────────────────────────────────────────── */
.vox-home-footer {
  text-align: center;
  padding: 40px 24px 32px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--tx-3);
  border-top: 1px solid var(--border);
  margin-top: 60px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.vox-home-footer a { color: var(--tx-2); text-decoration: none; transition:color var(--dur); }
.vox-home-footer a:hover { color: var(--tx-1); text-decoration: underline; }
.vox-home-footer-copy { margin-top: 4px; font-size: 11px; opacity: .7; }


/* ══════════════════════════════════════════════════════════════════
   Operation Command Center — Prioridades / Resumo / Agenda / Visão da
   Operação / Atividade Recente (Home). Reuses existing tokens only —
   navy/gold/off-white/grays, existing radius/shadow/spacing scale.
   ══════════════════════════════════════════════════════════════════ */

.priority-list { display:flex; flex-direction:column; gap:10px; }
.priority-item {
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:14px 16px; box-shadow:var(--sh-xs);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur), transform var(--dur) var(--ease);
}
.priority-item:hover { box-shadow:var(--sh-sm); border-color:var(--border-2); transform:translateY(-1px); }
.priority-sev { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.priority-item.sev-critico .priority-sev { background:var(--error); box-shadow:0 0 0 4px var(--error-mid); }
.priority-item.sev-urgente .priority-sev { background:var(--amber); box-shadow:0 0 0 4px var(--amber-bg); }
.priority-item.sev-hoje .priority-sev { background:var(--blue); box-shadow:0 0 0 4px var(--blue-bg); }
.priority-item.sev-atencao .priority-sev { background:var(--pacto-gold); box-shadow:0 0 0 4px var(--pacto-gold-mid); }
.priority-item.sev-acompanhamento .priority-sev { background:var(--tx-3); box-shadow:0 0 0 4px var(--bg-2); }
.priority-badge {
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-f); flex-shrink:0; white-space:nowrap;
}
.priority-item.sev-critico .priority-badge { color:var(--error); background:var(--error-lt); }
.priority-item.sev-urgente .priority-badge { color:var(--amber); background:var(--amber-bg); }
.priority-item.sev-hoje .priority-badge { color:var(--blue); background:var(--blue-bg); }
.priority-item.sev-atencao .priority-badge { color:var(--pacto-gold-tx); background:var(--pacto-gold-lt); }
.priority-item.sev-acompanhamento .priority-badge { color:var(--tx-2); background:var(--bg-2); }
.priority-body { flex:1; min-width:0; }
.priority-title { font-size:13.5px; font-weight:600; color:var(--tx-1); margin-bottom:2px; }
.priority-subtitle { font-size:12px; color:var(--tx-2); }
.priority-meta { font-size:11.5px; color:var(--tx-3); margin-top:2px; }
.priority-cta {
  flex-shrink:0; font-size:12px; font-weight:600; color:var(--pacto-navy);
  text-decoration:none; padding:7px 13px; border-radius:var(--r-f);
  border:1px solid var(--border); white-space:nowrap;
  transition: background var(--dur), border-color var(--dur);
}
.priority-cta:hover { background:var(--pacto-navy-lt); border-color:var(--pacto-navy-2); }

.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px; padding:30px 20px; width:100%; box-sizing:border-box;
  background:var(--surface); border:1px dashed var(--border-2); border-radius:var(--r-md);
  color:var(--tx-3); font-size:12.5px;
}
.empty-state svg { width:24px; height:24px; color:var(--tx-3); opacity:.7; }
.empty-state.ok { color:var(--green); font-size:13px; }
.empty-state.ok svg { color:var(--green); }

.today-grid { display:grid; grid-template-columns:1.1fr 1.4fr; gap:16px; }
@media (max-width: 860px) { .today-grid { grid-template-columns:1fr; } }
.today-panel {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--sh-xs);
}
.today-panel-ttl { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tx-3); margin-bottom:14px; }
.stat-pills { display:flex; flex-wrap:wrap; gap:10px; }
.stat-pill { display:flex; align-items:baseline; gap:6px; background:var(--bg-2); border-radius:var(--r-f); padding:8px 14px; }
.stat-pill-value { font-size:18px; font-weight:800; color:var(--tx-1); font-variant-numeric:tabular-nums; }
.stat-pill-label { font-size:11.5px; color:var(--tx-2); }

.agenda-list { display:flex; flex-direction:column; gap:2px; }
.agenda-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.agenda-item:last-child { border-bottom:none; }
.agenda-time { font-size:12.5px; font-weight:700; color:var(--pacto-navy); width:48px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.agenda-name { font-size:13px; font-weight:600; color:var(--tx-1); }
.agenda-label { font-size:11.5px; color:var(--tx-3); }

.op-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:16px; }
@media (max-width: 860px) { .op-grid { grid-template-columns:1fr; } }
.chart-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--sh-xs);
}
.chart-card-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; }
.chart-card-ttl { font-size:13px; font-weight:700; color:var(--tx-1); }
.chart-card-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--r-f); white-space:nowrap; }
.chart-card-badge.up { color:var(--green); background:var(--green-bg); }
.chart-card-badge.down { color:var(--error); background:var(--error-lt); }
.chart-card-canvas-wrap { position:relative; height:180px; }

.op-metrics-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
@media (max-width: 860px) { .op-metrics-strip { grid-template-columns:1fr; } }
.op-metric-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--sh-xs);
}
.op-metric-ttl { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tx-3); margin-bottom:10px; }
.op-metric-row { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.op-metric-num { font-size:22px; font-weight:800; color:var(--tx-1); font-variant-numeric:tabular-nums; }
.op-metric-sub { font-size:11.5px; color:var(--tx-2); }
.op-metric-unavailable { font-size:12px; color:var(--tx-3); line-height:1.5; }

.progress-ring-wrap { display:flex; align-items:center; gap:16px; }
.progress-ring-num { font-size:24px; font-weight:800; color:var(--pacto-navy); flex-shrink:0; }
.progress-track { flex:1; height:8px; border-radius:var(--r-f); background:var(--bg-2); overflow:hidden; }
.progress-fill { height:100%; border-radius:var(--r-f); background:var(--grad-cta); transition:width .5s var(--ease-out); }
.progress-label { font-size:12px; color:var(--tx-2); margin-top:6px; }

.insight-bottleneck-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 860px) { .insight-bottleneck-grid { grid-template-columns:1fr; } }
.insight-card, .bottleneck-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--sh-xs);
}
.insight-card-ttl, .bottleneck-card-ttl {
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tx-3);
  margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.insight-card-ttl svg, .bottleneck-card-ttl svg { width:13px; height:13px; color:var(--pacto-gold); }
.insight-text { font-size:13.5px; color:var(--tx-1); line-height:1.5; }
.bottleneck-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx-1); padding:6px 0; }
.bottleneck-item:not(:last-child) { border-bottom:1px solid var(--border); }
.bottleneck-dot { width:6px; height:6px; border-radius:50%; background:var(--amber); flex-shrink:0; }

.activity-list { display:flex; flex-direction:column; gap:2px; }
.activity-item { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.activity-item:last-child { border-bottom:none; }
.activity-time { font-size:11.5px; color:var(--tx-3); width:48px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.activity-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
.activity-label { font-size:13px; color:var(--tx-1); flex:1; }
.activity-detail { font-size:11.5px; color:var(--tx-3); }