/* ============================================================
   AFIADORA GLOBAL — Design System
   Sistema de gestão de rede de franquias
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('../vendor/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ---------- TOKENS ---------- */
:root {
  /* Marca — extraída da logo */
  --ag-navy-950: #0A1332;
  --ag-navy-900: #0F1D45;
  --ag-navy-800: #16265A;
  --ag-navy-700: #1D3270;
  --ag-navy-600: #26418F;
  --ag-navy-500: #3355B0;
  --ag-navy-300: #8FA3D8;
  --ag-navy-100: #E3E9F8;
  --ag-navy-50:  #F1F4FC;

  --ag-red-700: #A8161B;
  --ag-red-600: #C51A1F;
  --ag-red-500: #E02226;
  --ag-red-400: #EE4B4F;
  --ag-red-100: #FDE7E7;
  --ag-red-50:  #FEF4F4;

  /* Neutros */
  --ag-ink:      #101526;
  --ag-ink-2:    #3B4459;
  --ag-ink-3:    #6B7488;
  --ag-ink-4:    #98A0B3;
  --ag-line:     #E6E9F0;
  --ag-line-2:   #F0F2F7;
  --ag-surface:  #FFFFFF;
  --ag-canvas:   #F5F7FB;
  --ag-canvas-2: #EEF1F7;

  /* Semânticos */
  --ag-success:   #0E9F6E;
  --ag-success-bg:#E3F7EF;
  --ag-warn:      #C2790B;
  --ag-warn-bg:   #FDF3E0;
  --ag-danger:    var(--ag-red-500);
  --ag-danger-bg: var(--ag-red-100);
  --ag-info:      #2563EB;
  --ag-info-bg:   #E5EDFF;
  --ag-purple:    #7C3AED;
  --ag-purple-bg: #F1E9FE;
  --ag-teal:      #0E8B8B;
  --ag-teal-bg:   #DFF4F4;

  /* Formas */
  --ag-r-sm: 8px;
  --ag-r:    12px;
  --ag-r-md: 16px;
  --ag-r-lg: 20px;
  --ag-r-xl: 26px;

  /* Sombras — suaves, com tom azulado da marca */
  --ag-sh-xs: 0 1px 2px rgba(15,29,69,.05);
  --ag-sh-sm: 0 1px 3px rgba(15,29,69,.06), 0 1px 2px rgba(15,29,69,.04);
  --ag-sh:    0 4px 12px rgba(15,29,69,.06), 0 1px 3px rgba(15,29,69,.04);
  --ag-sh-md: 0 10px 28px rgba(15,29,69,.09), 0 2px 6px rgba(15,29,69,.04);
  --ag-sh-lg: 0 22px 55px rgba(15,29,69,.14), 0 6px 14px rgba(15,29,69,.06);

  --ag-sidebar-w: 268px;
  --ag-sidebar-w-mini: 82px;
  --ag-topbar-h: 68px;

  --ag-t: 180ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET / BASE ---------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--ag-canvas);
  color: var(--ag-ink);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin: 0;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 { font-weight: 680; letter-spacing: -0.022em; color: var(--ag-ink); margin: 0; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
h4 { font-size: .96rem; }

a { text-decoration: none; color: var(--ag-navy-600); }
a:hover { color: var(--ag-navy-700); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

::selection { background: var(--ag-navy-100); color: var(--ag-navy-800); }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CFD6E4; border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #B4BECF; background-clip: content-box; border: 3px solid transparent; }

/* ============================================================
   SHELL — Sidebar + Topbar
   ============================================================ */
.ag-shell { display: flex; min-height: 100vh; }

/* ---------- SIDEBAR ---------- */
.ag-sidebar {
  width: var(--ag-sidebar-w);
  flex: 0 0 var(--ag-sidebar-w);
  background: linear-gradient(178deg, var(--ag-navy-900) 0%, var(--ag-navy-950) 62%, #070E24 100%);
  color: #fff;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition: transform var(--ag-t), width var(--ag-t);
  box-shadow: 4px 0 24px rgba(10,19,50,.10);
}
/* brilho sutil no topo */
.ag-sidebar::before {
  content:''; position: absolute; top:-120px; left:-60px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(224,34,38,.20), transparent 66%);
  pointer-events: none;
}
.ag-sidebar::after {
  content:''; position: absolute; bottom:-140px; right:-90px; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(51,85,176,.28), transparent 68%);
  pointer-events: none;
}

.ag-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 20px 16px;
  position: relative; z-index: 2;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ag-brand-mark {
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  overflow: hidden;
}
.ag-brand-mark svg { width: 30px; height: 30px; }
.ag-brand-text { min-width: 0; }
.ag-brand-name {
  font-size: .84rem; font-weight: 800; letter-spacing: .13em;
  line-height: 1.15; color: #fff; text-transform: uppercase; white-space: nowrap;
}
.ag-brand-name b { font-weight: 800; display: block; letter-spacing: .19em; }
.ag-brand-tag {
  font-size: .63rem; color: var(--ag-navy-300); letter-spacing: .02em;
  font-style: italic; margin-top: 1px; white-space: nowrap;
}

/* seletor de unidade */
.ag-unit-switch {
  margin: 14px 14px 8px; padding: 10px 12px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--ag-r);
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; position: relative; z-index: 2;
  transition: background var(--ag-t);
}
.ag-unit-switch:hover { background: rgba(255,255,255,.09); }
/* perfil preso à própria unidade: rótulo fixo, sem menu */
.ag-unit-switch.is-locked, .ag-unit-switch.is-locked:hover { cursor: default; background: rgba(255,255,255,.055); }
.ag-unit-ico {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  background: linear-gradient(140deg, var(--ag-red-500), var(--ag-red-700));
  display: grid; place-items: center; color: #fff; font-size: .82rem;
}
.ag-unit-info { min-width: 0; flex: 1; }
.ag-unit-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ag-navy-300); font-weight: 600; }
.ag-unit-name { font-size: .8rem; font-weight: 620; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ag-nav {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 12px 20px; position: relative; z-index: 2;
}
.ag-nav::-webkit-scrollbar { width: 6px; }
.ag-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border: none; border-radius: 10px; }

.ag-nav-group {
  font-size: .61rem; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.34); font-weight: 700;
  padding: 16px 10px 6px; white-space: nowrap;
}
.ag-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8.5px 11px; border-radius: 10px;
  color: rgba(255,255,255,.72); font-size: .825rem; font-weight: 500;
  position: relative; transition: all var(--ag-t); white-space: nowrap;
}
.ag-nav-item i { font-size: 1.02rem; width: 20px; text-align: center; flex: 0 0 20px; opacity: .9; }
.ag-nav-item span { overflow: hidden; text-overflow: ellipsis; }
.ag-nav-item:hover { background: rgba(255,255,255,.075); color: #fff; }
.ag-nav-item.active {
  background: linear-gradient(94deg, rgba(224,34,38,.20), rgba(224,34,38,.05));
  color: #fff; font-weight: 620;
}
.ag-nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 21px; border-radius: 0 4px 4px 0; background: var(--ag-red-500);
  box-shadow: 0 0 12px rgba(224,34,38,.75);
}
.ag-nav-item.active i { color: #fff; opacity: 1; }
.ag-nav-badge {
  margin-left: auto; font-size: .64rem; font-weight: 700; padding: 1.5px 6.5px;
  border-radius: 20px; background: var(--ag-red-500); color: #fff; line-height: 1.5;
}
.ag-nav-badge.soft { background: rgba(255,255,255,.14); color: rgba(255,255,255,.82); }

.ag-sidebar-foot {
  padding: 12px 14px 16px; border-top: 1px solid rgba(255,255,255,.07);
  position: relative; z-index: 2;
}
.ag-user-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 9px;
  border-radius: var(--ag-r); transition: background var(--ag-t); cursor: pointer;
}
.ag-user-chip:hover { background: rgba(255,255,255,.075); }
.ag-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: linear-gradient(140deg, var(--ag-navy-500), var(--ag-navy-700));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .76rem;
  border: 1.5px solid rgba(255,255,255,.18);
}
.ag-user-name { font-size: .79rem; font-weight: 620; color: #fff; line-height: 1.25; white-space: nowrap; }
.ag-user-role { font-size: .66rem; color: var(--ag-navy-300); white-space: nowrap; }

/* ---------- MODO COMPACTO (desktop) ---------- */
body.ag-mini .ag-sidebar { width: var(--ag-sidebar-w-mini); flex-basis: var(--ag-sidebar-w-mini); }
body.ag-mini .ag-main { margin-left: var(--ag-sidebar-w-mini); }
body.ag-mini .ag-brand-text,
body.ag-mini .ag-nav-group,
body.ag-mini .ag-nav-item span,
body.ag-mini .ag-nav-badge,
body.ag-mini .ag-unit-info,
body.ag-mini .ag-user-name,
body.ag-mini .ag-user-role { display: none; }
body.ag-mini .ag-brand,
body.ag-mini .ag-unit-switch,
body.ag-mini .ag-user-chip { justify-content: center; }
body.ag-mini .ag-nav-item { justify-content: center; padding: 10px; }
body.ag-mini .ag-unit-switch { padding: 9px; margin: 14px 12px 8px; }

/* ---------- MAIN ---------- */
.ag-main {
  flex: 1; min-width: 0;
  margin-left: var(--ag-sidebar-w);
  transition: margin var(--ag-t);
  display: flex; flex-direction: column;
}

/* ---------- TOPBAR ---------- */
.ag-topbar {
  height: var(--ag-topbar-h);
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ag-line);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  position: sticky; top: 0; z-index: 1030;
}
.ag-icon-btn {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid transparent;
  background: transparent; color: var(--ag-ink-2);
  display: grid; place-items: center; font-size: 1.06rem;
  transition: all var(--ag-t); position: relative; flex: 0 0 auto;
}
.ag-icon-btn:hover { background: var(--ag-canvas-2); color: var(--ag-navy-700); }
/* Ícone só informativo (mostra o title ao passar o mouse, sem ação de clique). */
.ag-icon-btn.is-static { cursor: help; }
.ag-icon-btn.is-static:hover { background: transparent; color: var(--ag-ink-2); }
.ag-icon-btn .dot {
  position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ag-red-500); border: 1.5px solid #fff;
}

.ag-page-title { font-size: 1.02rem; font-weight: 680; letter-spacing: -.02em; line-height: 1.2; }
.ag-page-sub { font-size: .74rem; color: var(--ag-ink-3); line-height: 1.2; margin-top: 1px; }


/* ---------- CONTEÚDO ---------- */
.ag-content { padding: 22px 22px 44px; flex: 1; }
.ag-content-wide { max-width: 1560px; }

.ag-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.ag-page-head h1 { font-size: 1.42rem; letter-spacing: -.028em; }
.ag-page-head .sub { color: var(--ag-ink-3); font-size: .84rem; margin-top: 3px; }

.ag-breadcrumb { font-size: .74rem; color: var(--ag-ink-4); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.ag-breadcrumb a { color: var(--ag-ink-3); }
.ag-breadcrumb a:hover { color: var(--ag-navy-600); }

/* ============================================================
   COMPONENTES
   ============================================================ */

/* ---------- CARD ---------- */
.ag-card {
  background: var(--ag-surface);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-r-md);
  box-shadow: var(--ag-sh-sm);
  overflow: hidden;
}
.ag-card-head {
  padding: 15px 18px; border-bottom: 1px solid var(--ag-line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ag-card-head h3 { font-size: .95rem; font-weight: 660; }
.ag-card-head .sub { font-size: .74rem; color: var(--ag-ink-3); margin-top: 1px; }
.ag-card-body { padding: 18px; }
.ag-card-body.tight { padding: 0; }
.ag-card-foot {
  padding: 12px 18px; border-top: 1px solid var(--ag-line-2);
  background: #FCFDFF; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

.ag-card-hover { transition: transform var(--ag-t), box-shadow var(--ag-t), border-color var(--ag-t); }
.ag-card-hover:hover { transform: translateY(-2px); box-shadow: var(--ag-sh-md); border-color: #D8DEEB; }

/* ---------- KPI ---------- */
.ag-kpi {
  background: var(--ag-surface); border: 1px solid var(--ag-line);
  border-radius: var(--ag-r-md); padding: 17px 18px;
  box-shadow: var(--ag-sh-sm); position: relative; overflow: hidden;
  transition: transform var(--ag-t), box-shadow var(--ag-t);
  height: 100%;
}
.ag-kpi:hover { transform: translateY(-2px); box-shadow: var(--ag-sh-md); }
.ag-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.ag-kpi-label { font-size: .745rem; color: var(--ag-ink-3); font-weight: 560; letter-spacing: .002em; }
.ag-kpi-ico {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.02rem;
}
.ag-kpi-value {
  font-size: 1.72rem; font-weight: 720; letter-spacing: -.036em;
  line-height: 1.08; font-variant-numeric: tabular-nums; color: var(--ag-ink);
}
.ag-kpi-value small { font-size: .95rem; font-weight: 600; color: var(--ag-ink-3); letter-spacing: -.01em; }
.ag-kpi-foot { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: .735rem; }
.ag-kpi-foot .muted { color: var(--ag-ink-4); }

.ag-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 640; font-size: .735rem; }
.ag-trend.up { color: var(--ag-success); }
.ag-trend.down { color: var(--ag-red-500); }
.ag-trend.flat { color: var(--ag-ink-4); }

/* faixa de cor no topo do KPI */
.ag-kpi.accent::after {
  content:''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--ag-navy-600), var(--ag-navy-500));
}
.ag-kpi.accent-red::after { background: linear-gradient(90deg, var(--ag-red-500), var(--ag-red-400)); }
.ag-kpi.accent-green::after { background: linear-gradient(90deg, var(--ag-success), #34D399); }
.ag-kpi.accent-warn::after { background: linear-gradient(90deg, var(--ag-warn), #F0B849); }

/* ---------- TINTS ---------- */
.tint-navy  { background: var(--ag-navy-100); color: var(--ag-navy-700); }
.tint-red   { background: var(--ag-red-100);  color: var(--ag-red-600); }
.tint-green { background: var(--ag-success-bg); color: var(--ag-success); }
.tint-warn  { background: var(--ag-warn-bg);  color: var(--ag-warn); }
.tint-info  { background: var(--ag-info-bg);  color: var(--ag-info); }
.tint-purple{ background: var(--ag-purple-bg);color: var(--ag-purple); }
.tint-teal  { background: var(--ag-teal-bg);  color: var(--ag-teal); }
.tint-gray  { background: var(--ag-canvas-2); color: var(--ag-ink-2); }

/* ---------- BADGES / STATUS ---------- */
.ag-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: .715rem; font-weight: 620; line-height: 1.6;
  white-space: nowrap; letter-spacing: -.002em;
}
.ag-badge i { font-size: .72rem; }
.ag-badge::before {
  content: ''; width: 5.5px; height: 5.5px; border-radius: 50%; background: currentColor; flex: 0 0 5.5px;
}
.ag-badge.no-dot::before { display: none; }

.st-recebido   { background: var(--ag-info-bg);   color: #1D4ED8; }
.st-orcamento  { background: var(--ag-purple-bg); color: #6D28D9; }
.st-analise    { background: var(--ag-warn-bg);   color: #A16207; }
.st-afiacao    { background: #FFF1E3;             color: #C2410C; }
.st-teste      { background: var(--ag-teal-bg);   color: #0F766E; }
.st-pronto     { background: var(--ag-success-bg);color: #047857; }
.st-entregue   { background: var(--ag-canvas-2);  color: var(--ag-ink-2); }
.st-atrasado   { background: var(--ag-red-100);   color: var(--ag-red-600); }
.st-cancelado  { background: #F3F4F6;             color: #6B7280; }
.st-pago       { background: var(--ag-success-bg);color: #047857; }
.st-pendente   { background: var(--ag-warn-bg);   color: #A16207; }
.st-vencido    { background: var(--ag-red-100);   color: var(--ag-red-600); }
.st-ativo      { background: var(--ag-success-bg);color: #047857; }
.st-inativo    { background: #F3F4F6;             color: #6B7280; }
.st-implantacao{ background: var(--ag-info-bg);   color: #1D4ED8; }

/* ---------- TAGS ---------- */
.ag-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2.5px 8px; border-radius: 7px;
  font-size: .69rem; font-weight: 620; line-height: 1.6;
  border: 1px solid transparent; white-space: nowrap;
}
.ag-tag-teste { background: var(--ag-red-50); color: var(--ag-red-600); border-color: #F8CDCE; }
.ag-tag-vip   { background: #FFF8E1; color: #92700C; border-color: #F5E3A8; }
.ag-tag-foto  { background: var(--ag-teal-bg); color: #0F766E; border-color: #B5E3E3; }
.ag-tag-neutro{ background: var(--ag-canvas-2); color: var(--ag-ink-2); border-color: var(--ag-line); }

/* ---------- BOTÕES ---------- */
.btn { font-size: .82rem; font-weight: 600; border-radius: 10px; padding: 8px 15px; transition: all var(--ag-t); letter-spacing: -.005em; }
.btn:focus { box-shadow: none; }
.btn i { font-size: .92rem; }

.btn-ag {
  background: linear-gradient(140deg, var(--ag-navy-700), var(--ag-navy-900));
  color: #fff; border: none; box-shadow: 0 2px 8px rgba(29,50,112,.26);
}
.btn-ag:hover { color:#fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(29,50,112,.34); }
.btn-ag:active { transform: translateY(0); }

.btn-ag-red {
  background: linear-gradient(140deg, var(--ag-red-500), var(--ag-red-700));
  color: #fff; border: none; box-shadow: 0 2px 8px rgba(197,26,31,.28);
}
.btn-ag-red:hover { color:#fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(197,26,31,.36); }

.btn-ag-out {
  background: #fff; color: var(--ag-ink-2);
  border: 1px solid var(--ag-line); box-shadow: var(--ag-sh-xs);
}
.btn-ag-out:hover { background: var(--ag-canvas); border-color: #D3DAE7; color: var(--ag-navy-700); }

.btn-ag-ghost { background: transparent; color: var(--ag-ink-2); border: none; }
.btn-ag-ghost:hover { background: var(--ag-canvas-2); color: var(--ag-navy-700); }

.btn-ag-soft { background: var(--ag-navy-100); color: var(--ag-navy-700); border: none; }
.btn-ag-soft:hover { background: #D5DEF6; color: var(--ag-navy-800); }

.btn-sm { padding: 5.5px 11px; font-size: .765rem; border-radius: 9px; }
.btn-lg { padding: 11px 22px; font-size: .89rem; border-radius: 12px; }

/* ---------- TOOLBAR / FILTROS ---------- */
.ag-toolbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 16px; background: #fff;
  border: 1px solid var(--ag-line); border-radius: var(--ag-r-md);
  box-shadow: var(--ag-sh-sm); margin-bottom: 16px;
}
.ag-field { position: relative; }
.ag-field > i.pre {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--ag-ink-4); font-size: .88rem; pointer-events: none;
}
.ag-input, .ag-select {
  height: 36px; border-radius: 10px; border: 1px solid var(--ag-line);
  background: #fff; font-size: .81rem; color: var(--ag-ink);
  padding: 0 12px; outline: none; transition: all var(--ag-t); width: 100%;
}
.ag-field > i.pre ~ .ag-input { padding-left: 33px; }
.ag-input:focus, .ag-select:focus, .ag-textarea:focus {
  border-color: var(--ag-navy-500); box-shadow: 0 0 0 3.5px rgba(38,65,143,.11);
}
.ag-input::placeholder { color: var(--ag-ink-4); }
.ag-select {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%236B7488' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.ag-textarea {
  border-radius: 10px; border: 1px solid var(--ag-line); background: #fff;
  font-size: .81rem; color: var(--ag-ink); padding: 9px 12px; outline: none;
  transition: all var(--ag-t); width: 100%; resize: vertical; font-family: inherit;
}
.ag-label { font-size: .755rem; font-weight: 600; color: var(--ag-ink-2); margin-bottom: 5px; display: block; }
.ag-label .req { color: var(--ag-red-500); }
.ag-help { font-size: .705rem; color: var(--ag-ink-4); margin-top: 4px; }

/* chips de filtro */
.ag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 20px;
  border: 1px solid var(--ag-line); background: #fff;
  font-size: .775rem; font-weight: 560; color: var(--ag-ink-2);
  cursor: pointer; transition: all var(--ag-t); white-space: nowrap;
}
.ag-chip:hover { border-color: var(--ag-navy-300); color: var(--ag-navy-700); background: var(--ag-navy-50); }
.ag-chip.active { background: var(--ag-navy-700); border-color: var(--ag-navy-700); color: #fff; }
.ag-chip .cnt { font-size: .69rem; opacity: .75; font-weight: 700; }

/* segmented */
.ag-seg { display: inline-flex; padding: 3px; background: var(--ag-canvas-2); border-radius: 11px; gap: 2px; }
.ag-seg button {
  border: none; background: transparent; font-size: .775rem; font-weight: 600;
  color: var(--ag-ink-3); padding: 5.5px 13px; border-radius: 8px;
  transition: all var(--ag-t); white-space: nowrap;
}
.ag-seg button:hover { color: var(--ag-navy-700); }
.ag-seg button.active { background: #fff; color: var(--ag-navy-800); box-shadow: var(--ag-sh-xs); }

/* ---------- TABELA ---------- */
.ag-table-wrap { overflow-x: auto; }
.ag-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .815rem; }
.ag-table thead th {
  background: #FBFCFE; color: var(--ag-ink-3);
  font-size: .69rem; font-weight: 680; text-transform: uppercase; letter-spacing: .055em;
  padding: 10px 14px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--ag-line); position: sticky; top: 0; z-index: 2;
}
.ag-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--ag-line-2); vertical-align: middle; color: var(--ag-ink-2); }
.ag-table tbody tr { transition: background var(--ag-t); }
.ag-table tbody tr:hover { background: #FAFBFE; }
.ag-table tbody tr:last-child td { border-bottom: none; }
.ag-table .strong { color: var(--ag-ink); font-weight: 620; }
.ag-table .mono { font-variant-numeric: tabular-nums; }
.ag-table td.right, .ag-table th.right { text-align: right; }
.ag-table td.center, .ag-table th.center { text-align: center; }

.ag-cell-main { display: flex; align-items: center; gap: 10px; }
.ag-cell-title { font-weight: 620; color: var(--ag-ink); line-height: 1.3; }
.ag-cell-sub { font-size: .725rem; color: var(--ag-ink-4); line-height: 1.3; }

.ag-ava {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 700; font-size: .74rem;
}
.ag-ava.circle { border-radius: 50%; }

/* ---------- FOTOS DENTRO DE AVATAR / LOGO ----------
   Os containers têm tamanho fixo e são grid, onde height:100% não resolve
   e a imagem vaza. Recorte garantido com posicionamento absoluto. */
.ag-avatar, .ag-ava, .ag-ava-xl, .ag-logo-mark { position: relative; overflow: hidden; }
.ag-avatar > img, .ag-ava > img, .ag-ava-xl > img, .ag-logo-mark > img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; border-radius: inherit;
}
/* Pessoas podem ser recortadas; a marca da empresa, não. */
.ag-avatar > img, .ag-ava > img, .ag-ava-xl > img { object-fit: cover; }
.ag-logo-mark > img { object-fit: contain; padding: 4px; }
.ag-ava-sm { width: 28px; height: 28px; flex-basis: 28px; font-size: .66rem; border-radius: 8px; }

/* ---------- PAGINAÇÃO ---------- */
.ag-pager { display: flex; align-items: center; gap: 5px; }
.ag-pager button {
  min-width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--ag-line);
  background: #fff; font-size: .785rem; font-weight: 600; color: var(--ag-ink-2);
  transition: all var(--ag-t); padding: 0 8px;
}
.ag-pager button:hover:not(:disabled) { border-color: var(--ag-navy-300); color: var(--ag-navy-700); }
.ag-pager button.active { background: var(--ag-navy-700); border-color: var(--ag-navy-700); color: #fff; }
.ag-pager button:disabled { opacity: .42; }

/* ---------- KANBAN ---------- */
.ag-kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.ag-kan-col { flex: 0 0 296px; width: 296px; background: var(--ag-canvas-2); border-radius: var(--ag-r-md); padding: 11px; }
.ag-kan-head { display: flex; align-items: center; gap: 8px; padding: 3px 5px 11px; }
.ag-kan-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.ag-kan-title { font-size: .795rem; font-weight: 680; color: var(--ag-ink); }
.ag-kan-count { font-size: .69rem; font-weight: 700; color: var(--ag-ink-3); background: #fff; padding: 1px 7px; border-radius: 20px; }
.ag-kan-list { display: flex; flex-direction: column; gap: 9px; }
.ag-kan-card {
  background: #fff; border: 1px solid var(--ag-line); border-radius: var(--ag-r);
  padding: 12px; box-shadow: var(--ag-sh-xs); cursor: pointer;
  transition: all var(--ag-t); display: block;
}
.ag-kan-card:hover { transform: translateY(-2px); box-shadow: var(--ag-sh-md); border-color: #D3DAE7; }

/* ---------- TIMELINE ---------- */
.ag-timeline { position: relative; padding-left: 30px; }
.ag-timeline::before {
  content: ''; position: absolute; left: 10px; top: 6px; bottom: 6px;
  width: 2px; background: var(--ag-line); border-radius: 2px;
}
.ag-tl-item { position: relative; padding-bottom: 20px; }
.ag-tl-item:last-child { padding-bottom: 0; }
.ag-tl-dot {
  position: absolute; left: -30px; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .66rem;
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ag-line);
}
.ag-tl-dot.done { background: var(--ag-success); color: #fff; box-shadow: 0 0 0 1px var(--ag-success); }
.ag-tl-dot.now  { background: var(--ag-navy-700); color: #fff; box-shadow: 0 0 0 1px var(--ag-navy-700), 0 0 0 5px rgba(29,50,112,.13); }
.ag-tl-dot.todo { background: #fff; color: var(--ag-ink-4); }
.ag-tl-title { font-size: .83rem; font-weight: 620; color: var(--ag-ink); line-height: 1.35; }
.ag-tl-meta { font-size: .725rem; color: var(--ag-ink-4); margin-top: 1px; }
.ag-tl-body { font-size: .79rem; color: var(--ag-ink-2); margin-top: 5px; }

/* ---------- PROGRESSO ---------- */
.ag-bar { height: 7px; border-radius: 20px; background: var(--ag-canvas-2); overflow: hidden; }
.ag-bar > span { display: block; height: 100%; border-radius: 20px; transition: width .5s cubic-bezier(.22,.61,.36,1); }
.ag-bar.thin { height: 5px; }
.fill-navy  { background: linear-gradient(90deg, var(--ag-navy-600), var(--ag-navy-500)); }
.fill-red   { background: linear-gradient(90deg, var(--ag-red-600), var(--ag-red-400)); }
.fill-green { background: linear-gradient(90deg, var(--ag-success), #34D399); }
.fill-warn  { background: linear-gradient(90deg, var(--ag-warn), #F0B849); }
.fill-teal  { background: linear-gradient(90deg, var(--ag-teal), #2DD4BF); }

/* ---------- ALERTA / CALLOUT ---------- */
.ag-callout {
  display: flex; gap: 11px; padding: 12px 14px; border-radius: var(--ag-r);
  border: 1px solid transparent; font-size: .805rem; line-height: 1.5;
}
.ag-callout i { font-size: 1.05rem; flex: 0 0 auto; margin-top: 1px; }
.ag-callout .t { font-weight: 660; display: block; margin-bottom: 1px; }
.co-red   { background: var(--ag-red-50); border-color: #F8CDCE; color: var(--ag-red-700); }
.co-warn  { background: var(--ag-warn-bg); border-color: #F5DEB0; color: #8A5A08; }
.co-info  { background: var(--ag-info-bg); border-color: #C7D8FE; color: #1E40AF; }
.co-green { background: var(--ag-success-bg); border-color: #B9E9D6; color: #05674A; }
.co-navy  { background: var(--ag-navy-50); border-color: #D3DEF7; color: var(--ag-navy-800); }

/* ---------- EMPTY STATE ---------- */
.ag-empty { text-align: center; padding: 46px 20px; }
.ag-empty-ico {
  width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 14px;
  background: var(--ag-navy-50); color: var(--ag-navy-500);
  display: grid; place-items: center; font-size: 1.6rem;
}
.ag-empty h4 { font-size: .96rem; margin-bottom: 5px; }
.ag-empty p { font-size: .82rem; color: var(--ag-ink-3); max-width: 380px; margin: 0 auto 16px; }

/* ---------- MODAL ---------- */
.modal-content { border: none; border-radius: var(--ag-r-lg); box-shadow: var(--ag-sh-lg); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--ag-line-2); padding: 17px 20px; }
.modal-title { font-size: 1rem; font-weight: 680; letter-spacing: -.02em; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--ag-line-2); padding: 13px 20px; background: #FCFDFF; }
.modal-backdrop.show { opacity: .38; background: var(--ag-navy-950); }

/* ---------- DROPDOWN ---------- */
.dropdown-menu {
  border: 1px solid var(--ag-line); border-radius: var(--ag-r);
  box-shadow: var(--ag-sh-md); padding: 6px; font-size: .82rem; min-width: 195px;
}
.dropdown-item { border-radius: 8px; padding: 7.5px 11px; font-weight: 520; color: var(--ag-ink-2); display: flex; align-items: center; gap: 9px; }
.dropdown-item:hover { background: var(--ag-canvas); color: var(--ag-navy-700); }
.dropdown-item i { font-size: .95rem; width: 17px; color: var(--ag-ink-3); }
.dropdown-item:hover i { color: var(--ag-navy-600); }
.dropdown-item.danger { color: var(--ag-red-600); }
.dropdown-item.danger:hover { background: var(--ag-red-50); color: var(--ag-red-700); }
.dropdown-item.danger i { color: var(--ag-red-500); }
.dropdown-header { font-size: .655rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ag-ink-4); padding: 8px 11px 4px; }
.dropdown-divider { border-color: var(--ag-line-2); margin: 5px 0; }

/* ---------- TABS ---------- */
.ag-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ag-line); overflow-x: auto; }
.ag-tabs button, .ag-tabs a {
  border: none; background: transparent; padding: 10px 15px;
  font-size: .825rem; font-weight: 600; color: var(--ag-ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all var(--ag-t); white-space: nowrap;
}
.ag-tabs button:hover, .ag-tabs a:hover { color: var(--ag-navy-700); }
.ag-tabs button.active, .ag-tabs a.active { color: var(--ag-navy-800); border-bottom-color: var(--ag-red-500); }
.ag-tabs .cnt { font-size: .69rem; background: var(--ag-canvas-2); padding: 1px 6px; border-radius: 20px; margin-left: 5px; font-weight: 700; }

/* ---------- TOAST ---------- */
#agToastBox { position: fixed; bottom: 22px; right: 22px; z-index: 3000; display: flex; flex-direction: column; gap: 9px; }
.ag-toast {
  display: flex; align-items: flex-start; gap: 11px;
  background: #fff; border: 1px solid var(--ag-line);
  border-left: 3px solid var(--ag-success);
  border-radius: var(--ag-r); box-shadow: var(--ag-sh-lg);
  padding: 12px 15px; min-width: 290px; max-width: 380px;
  animation: agIn .32s cubic-bezier(.22,.61,.36,1);
}
.ag-toast.out { animation: agOut .26s ease forwards; }
.ag-toast i.ic { font-size: 1.1rem; color: var(--ag-success); margin-top: 1px; }
.ag-toast .tt { font-size: .825rem; font-weight: 640; color: var(--ag-ink); line-height: 1.35; }
.ag-toast .ts { font-size: .755rem; color: var(--ag-ink-3); line-height: 1.4; margin-top: 1px; }
.ag-toast.err { border-left-color: var(--ag-red-500); }
.ag-toast.err i.ic { color: var(--ag-red-500); }
.ag-toast.info { border-left-color: var(--ag-navy-600); }
.ag-toast.info i.ic { color: var(--ag-navy-600); }
.ag-toast.warn { border-left-color: var(--ag-warn); }
.ag-toast.warn i.ic { color: var(--ag-warn); }

@keyframes agIn { from { opacity: 0; transform: translateX(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes agOut { to { opacity: 0; transform: translateX(28px) scale(.97); } }

/* ---------- ENTRADA SUAVE DA PÁGINA ---------- */
@keyframes agFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.ag-content > * { animation: agFade .4s cubic-bezier(.22,.61,.36,1) backwards; }
.ag-content > *:nth-child(1) { animation-delay: .02s; }
.ag-content > *:nth-child(2) { animation-delay: .06s; }
.ag-content > *:nth-child(3) { animation-delay: .10s; }
.ag-content > *:nth-child(4) { animation-delay: .14s; }
.ag-content > *:nth-child(5) { animation-delay: .18s; }

/* ---------- GRÁFICOS (SVG próprios) ---------- */
.ag-chart { width: 100%; display: block; overflow: visible; }
.ag-chart .grid-line { stroke: var(--ag-line); stroke-width: 1; }
.ag-chart .axis-label { fill: var(--ag-ink-4); font-size: 10.5px; font-weight: 500; }
.ag-legend { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
.ag-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .755rem; color: var(--ag-ink-2); font-weight: 540; }
.ag-legend-swatch { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }

.ag-donut-center { text-align: center; }
.ag-donut-value { font-size: 1.35rem; font-weight: 720; letter-spacing: -.03em; }
.ag-donut-label { font-size: .7rem; color: var(--ag-ink-4); }

/* ---------- MISC ---------- */
.ag-divider { height: 1px; background: var(--ag-line-2); margin: 16px 0; border: none; }
.ag-dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: .815rem; }
.ag-dl dt { color: var(--ag-ink-3); font-weight: 540; white-space: nowrap; }
.ag-dl dd { margin: 0; color: var(--ag-ink); font-weight: 560; text-align: right; }

.ag-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--ag-line-2); }
.ag-stat-row:last-child { border-bottom: none; }

.text-ag-muted { color: var(--ag-ink-3) !important; }
.text-ag-faint { color: var(--ag-ink-4) !important; }
.text-ag-navy { color: var(--ag-navy-700) !important; }
.text-ag-red { color: var(--ag-red-500) !important; }
.text-ag-green { color: var(--ag-success) !important; }
.bg-ag-canvas { background: var(--ag-canvas) !important; }
.fs-xs { font-size: .715rem !important; }
.fs-sm { font-size: .795rem !important; }
.fw-6 { font-weight: 620 !important; }
.fw-7 { font-weight: 700 !important; }

.ag-scroll-x { overflow-x: auto; }
.ag-nowrap { white-space: nowrap; }

/* backdrop mobile */
.ag-backdrop {
  position: fixed; inset: 0; background: rgba(10,19,50,.42);
  z-index: 1035; opacity: 0; pointer-events: none; transition: opacity var(--ag-t);
  backdrop-filter: blur(2px);
}
body.ag-open .ag-backdrop { opacity: 1; pointer-events: auto; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1400px) {
  .ag-kpi-value { font-size: 1.55rem; }
}


@media (max-width: 991px) {
  .ag-sidebar { transform: translateX(-100%); box-shadow: 12px 0 40px rgba(10,19,50,.24); }
  body.ag-open .ag-sidebar { transform: none; }
  .ag-main { margin-left: 0 !important; }
  body.ag-mini .ag-sidebar { width: var(--ag-sidebar-w); flex-basis: var(--ag-sidebar-w); }
  body.ag-mini .ag-brand-text, body.ag-mini .ag-nav-group, body.ag-mini .ag-nav-item span,
  body.ag-mini .ag-nav-badge, body.ag-mini .ag-unit-info,
  body.ag-mini .ag-user-name, body.ag-mini .ag-user-role { display: revert; }
  body.ag-mini .ag-nav-item { justify-content: flex-start; padding: 8.5px 11px; }
  body.ag-mini .ag-brand, body.ag-mini .ag-user-chip { justify-content: flex-start; }
  body.ag-mini .ag-unit-switch { padding: 10px 12px; margin: 14px 14px 8px; }
  .ag-content { padding: 18px 16px 40px; }
}

@media (max-width: 767px) {
  body { font-size: 13.5px; }
  .ag-topbar { padding: 0 14px; gap: 8px; height: 60px; }
  .ag-page-head h1 { font-size: 1.22rem; }
  .ag-content { padding: 15px 13px 60px; }
  .ag-kpi { padding: 14px 15px; }
  .ag-kpi-value { font-size: 1.42rem; }
  .ag-card-body { padding: 15px; }
  .ag-card-head { padding: 13px 15px; }
  .ag-toolbar { padding: 11px 12px; gap: 7px; }
  .ag-kan-col { flex-basis: 258px; width: 258px; }
  #agToastBox { left: 12px; right: 12px; bottom: 12px; }
  .ag-toast { min-width: 0; max-width: none; }
  .ag-table thead th { padding: 9px 11px; }
  .ag-table tbody td { padding: 10px 11px; }
  .modal-body { padding: 16px; }
  .ag-page-head { margin-bottom: 15px; }
}

/* esconder em telas pequenas */
@media (max-width: 991px) { .hide-lg-down { display: none !important; } }
@media (max-width: 767px) { .hide-md-down { display: none !important; } }
@media (min-width: 992px) { .show-lg-down { display: none !important; } }

/* ---------- IMPRESSÃO ---------- */
@media print {
  .ag-sidebar, .ag-topbar, .ag-backdrop, #agToastBox, .no-print { display: none !important; }
  .ag-main { margin-left: 0 !important; }
  .ag-content { padding: 0 !important; }
  .ag-card { box-shadow: none; border-color: #ddd; break-inside: avoid; }
  body { background: #fff; }
}