/* ═══════════════════════════════════════════════════════════════════
   GainTech — Design System v2
   Carregado APÓS main.css — substitui, aprimora e não rompe nada.

   Pilares:
   ① Syne (headings) + DM Sans (body) + DM Mono (números)
   ② Teal #00e5c0 como acento primário — identidade GainTech
   ③ Animações de entrada staggered + hover com profundidade
   ④ Sidebar refinada: left-bar ativo, ícones, hover glow
   ⑤ Header com backdrop-blur (glass)
   ⑥ Login com grid background + entrada animada
   ⑦ Dark mode mais profundo e premium
   ⑧ Hamburger → X animado
   ⑨ Mobile: touch targets, overlay blur, sidebar slide

   Versão: 20260414-v2
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Fontes ─────────────────────────────────────────────────── */
/* Fontes carregadas via <link> no base.html — sem @import duplicado */

/* ── 2. Variáveis globais — light mode ────────────────────────── */
:root {
  /* Tipografia nova */
  --fonte:         'DM Sans', system-ui, sans-serif;
  --fonte-heading: 'Syne', system-ui, sans-serif;
  --fonte-mono:    'DM Mono', 'Courier New', monospace;

  /* Acento primário: teal GainTech */
  --cor-acento:        #00e5c0;
  --cor-acento-hover:  #00cca8;
  --cor-acento-deep:   #008a74;
  --cor-acento-glow:   rgba(0, 229, 192, 0.22);
  --cor-acento-glow-sm:rgba(0, 229, 192, 0.12);

  /* Substitui azul por teal em light mode */
  --cor-primaria:       #009d83;
  --cor-primaria-hover: #00856e;
  --cor-primaria-light: #e4fdf8;
  --grad-primario:      linear-gradient(135deg, #009d83 0%, #0891b2 100%);
  --sombra-cor:         0 4px 14px rgba(0, 157, 131, 0.35);

  /* Animação */
  --dur-entrada:    450ms;
  --ease-spring:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-smooth:cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Design Tokens — Fase 6 ───────────────────────────────── */

  /* Escala tipográfica semântica */
  --text-2xs: 0.625rem;   /* 10px — rótulos compactos */
  --text-xs:  0.6875rem;  /* 11px — badges, labels sidebar */
  --text-sm:  0.8125rem;  /* 13px — textos secundários */
  --text-base:0.875rem;   /* 14px — corpo padrão */
  --text-md:  1rem;       /* 16px — conteúdo principal */
  --text-lg:  1.125rem;   /* 18px — subtítulos */
  --text-xl:  1.25rem;    /* 20px — destaque */
  --text-2xl: 1.5rem;     /* 24px — h2 */
  --text-3xl: 1.875rem;   /* 30px — h1 */

  /* Escala de line-height semântica */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  /* Escala de border-radius semântica */
  --radius-xs:   0.25rem;   /* 4px   — focus rings, scrollbar */
  --radius-sm:   0.375rem;  /* 6px   — badges pequenos */
  --radius-md:   0.5rem;    /* 8px   — inputs, botões menores */
  --radius-lg:   0.75rem;   /* 12px  — cards internos */
  --radius-xl:   0.875rem;  /* 14px  — cards kanban */
  --radius-2xl:  1rem;      /* 16px  — colunas, painéis */
  --radius-3xl:  1.25rem;   /* 20px  — modais */
  --radius-full: 999px;     /* círculos e pills */

  /* Status semântico — light mode */
  --cor-erro:          #dc2626;
  --cor-erro-bg:       #fef2f2;
  --cor-erro-borda:    #fca5a5;
  --cor-sucesso:       #059669;
  --cor-sucesso-bg:    #ecfdf5;
  --cor-sucesso-borda: #6ee7b7;
  --cor-aviso:         #d97706;
  --cor-aviso-bg:      #fffbeb;
  --cor-aviso-borda:   #fcd34d;
  --cor-info:          #2563eb;
  --cor-info-bg:       #eff6ff;
  --cor-info-borda:    #93c5fd;
}

/* ── 3. Variáveis — dark mode ─────────────────────────────────── */
[data-theme="dark"] {
  /* Acento teal mais brilhante no escuro */
  --cor-primaria:       #00e5c0;
  --cor-primaria-hover: #00cca8;
  --cor-primaria-light: rgba(0, 229, 192, 0.10);
  --grad-primario:      linear-gradient(135deg, #00b89a 0%, #0891b2 100%);
  --sombra-cor:         0 4px 14px rgba(0, 229, 192, 0.28);

  /* Fundos mais profundos — sai do slate, entra no charcoal naval */
  --cor-fundo:             #060d18;
  --cor-superfice:         #0c1828;
  --cor-superfice-elevada: #111d30;   /* cards sobre cards, modais, hover */
  --cor-superfice-alta:    #162035;   /* tooltips, dropdowns */
  --cor-borda:             rgba(255, 255, 255, 0.07);

  /* Sidebar premium */
  --grad-sidebar:  linear-gradient(180deg, #050c17 0%, #081422 50%, #0a1c2e 100%);

  /* Sombras mais dramáticas */
  --sombra:        0 1px 4px rgba(0,0,0,.50), 0 4px 16px rgba(0,0,0,.35);
  --sombra-media:  0 4px 20px rgba(0,0,0,.55), 0 1px 6px rgba(0,0,0,.35);
  --sombra-elevada:0 16px 40px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.45);

  /* Status semântico — dark mode (luminosidade ajustada para contraste WCAG AA) */
  --cor-erro:          #f87171;
  --cor-erro-bg:       rgba(239, 68, 68, 0.12);
  --cor-erro-borda:    rgba(239, 68, 68, 0.30);
  --cor-sucesso:       #34d399;
  --cor-sucesso-bg:    rgba(16, 185, 129, 0.12);
  --cor-sucesso-borda: rgba(16, 185, 129, 0.30);
  --cor-aviso:         #fbbf24;
  --cor-aviso-bg:      rgba(245, 158, 11, 0.12);
  --cor-aviso-borda:   rgba(245, 158, 11, 0.30);
  --cor-info:          #60a5fa;
  --cor-info-bg:       rgba(37, 99, 235, 0.12);
  --cor-info-borda:    rgba(37, 99, 235, 0.30);
}

/* ── 4. Tipografia base ───────────────────────────────────────── */
body {
  font-family: var(--fonte);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-heading);
  letter-spacing: -0.02em;
}

h1 { font-size: 1.875rem; font-weight: 800; }
h2 { font-size: 1.5rem;   font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 700; }
h4 { font-size: 1rem;     font-weight: 600; }

/* Fluid type para título de página */
h1 { font-size: clamp(1.25rem, 4vw, 1.875rem); }

/* Dados numéricos: relógio, cronômetro, estatísticas */
.relogio-ponto,
.ponto-cronometro-hero {
  font-family: var(--fonte);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
}

/* Tabular nums em valores de KPI e stats — sem dança ao atualizar */
.gf-stat-value,
.card-valor,
[id^="kpi-"] p:nth-child(2),
.ponto-cronometro-valor {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Labels uppercase: mais espaço, mais precisão */
.gf-stat-label,
.badge,
.sidebar-secao {
  letter-spacing: 0.07em;
}

/* ── 5. Links e foco global ───────────────────────────────────── */
a { color: var(--cor-primaria); }
[data-theme="dark"] a { color: var(--cor-acento); }

input:focus, select:focus, textarea:focus {
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-glow-sm);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-glow-sm);
}

.btn:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 3px;
}

/* ── 6. Botões — teal gradiente ───────────────────────────────── */
.btn-primario {
  background: var(--grad-primario);
  box-shadow: var(--sombra-cor);
  letter-spacing: 0;
  font-weight: 600;
  transition: box-shadow 200ms ease, opacity 180ms ease, transform 130ms ease;
}
.btn-primario:hover {
  box-shadow: 0 6px 22px rgba(0, 185, 154, 0.45);
  opacity: .94;
}
.btn-primario:active {
  transform: scale(.97);
  box-shadow: 0 2px 8px rgba(0, 185, 154, 0.30);
}

/* Ripple visual no click */
.btn-primario::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255, 0.15);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.btn-primario { position: relative; overflow: hidden; }
.btn-primario:active::after { opacity: 1; }

/* ── 7. Sidebar — redesign completo ─────────────────────────── */
.sidebar {
  background: var(--grad-sidebar);
  box-shadow: 2px 0 32px rgba(0, 0, 0, 0.50);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

/* Logo da sidebar */
.sidebar-marca {
  padding: 1.375rem 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Nav links */
.sidebar-nav { padding: .75rem .625rem; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .875rem;
  color: rgba(148, 163, 184, 0.80);
  font-size: .875rem;
  font-weight: 400;
  border-radius: .5rem;
  margin-bottom: .1rem;
  position: relative;
  border-left: 2px solid transparent;
  transition: background 200ms ease, color 180ms ease, border-color 200ms ease;
}

.sidebar-nav a:hover {
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
  text-decoration: none;
}

/* Estado ativo — acento teal */
.sidebar-nav a.ativo {
  background: rgba(0, 229, 192, 0.09);
  color: #ffffff;
  font-weight: 600;
  border-left-color: var(--cor-acento);
  padding-left: calc(.875rem - 2px);
  box-shadow: none;
  text-decoration: none;
}

/* Indicador ativo — bolinha teal substituindo checkmark */
.sidebar-nav a.ativo::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--cor-acento);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 8px var(--cor-acento);
  font-size: 0;
  border: none;
  padding: 0;
}

/* Remove o ::before ghost em links não ativos */
.sidebar-nav a:not(.ativo)::before {
  display: none;
}

/* Section headers da sidebar */
.sidebar-secao {
  padding: 1rem 1rem .3rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.40);
  font-family: var(--fonte-mono);
}

.sidebar-secao.sidebar-toggle {
  color: rgba(148, 163, 184, 0.45);
  transition: color .15s;
}
.sidebar-secao.sidebar-toggle:hover { color: rgba(148, 163, 184, 0.70); }

/* Rodapé da sidebar */
.sidebar-rodape {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .78rem;
  color: rgba(100, 116, 139, 0.70);
  font-weight: 400;
  font-family: var(--fonte-mono);
  letter-spacing: .02em;
}

/* ── 8. Header com glass morphism ─────────────────────────────── */
.header-app {
  background: var(--cor-superfice);
  border-bottom: 1px solid var(--cor-borda);
  transition: background 250ms ease, box-shadow 250ms ease;
}

[data-theme="dark"] .header-app {
  background: rgba(6, 13, 24, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.055);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 24px rgba(0,0,0,.30);
}

.header-app strong {
  font-family: var(--fonte-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

/* Botão dark toggle refinado */
.btn-dark-toggle {
  width: 32px; height: 32px;
  border-radius: .5rem;
  font-size: .875rem;
  transition: background 180ms ease, transform 150ms ease;
}
.btn-dark-toggle:hover { transform: rotate(12deg); }

/* ── 9. Animações de entrada na página ───────────────────────── */
@keyframes gt-page-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pagina > * {
  animation: gt-page-in var(--dur-entrada) var(--ease-spring) both;
}
.pagina > *:nth-child(1)  { animation-delay:   0ms; }
.pagina > *:nth-child(2)  { animation-delay:  55ms; }
.pagina > *:nth-child(3)  { animation-delay: 110ms; }
.pagina > *:nth-child(4)  { animation-delay: 165ms; }
.pagina > *:nth-child(5)  { animation-delay: 220ms; }
.pagina > *:nth-child(6)  { animation-delay: 275ms; }
.pagina > *:nth-child(7)  { animation-delay: 330ms; }
.pagina > *:nth-child(n+8){ animation-delay: 385ms; }

/* ── 10. Cards — hover com profundidade ──────────────────────── */
.card {
  transition: transform 280ms var(--ease-spring),
              box-shadow 280ms var(--ease-spring),
              border-color 280ms ease;
  will-change: transform;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

[data-theme="dark"] .card {
  background: var(--cor-superfice);
  border-color: rgba(255,255,255,.065);
}

[data-theme="dark"] .card:hover {
  border-color: rgba(0, 229, 192, 0.14);
  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(0,229,192,.08);
}

/* Cards de stats: topo colorido substituído por borda teal à esquerda em dark */
[data-theme="dark"] .grid-cards .card {
  border-top: none;
  border-left: 3px solid;
  border-left-color: var(--cor-primaria);
  padding-left: calc(1.625rem - 3px);
}
[data-theme="dark"] .grid-cards .card:nth-child(1) { border-left-color: var(--cor-acento); }
[data-theme="dark"] .grid-cards .card:nth-child(2) { border-left-color: #818cf8; }
[data-theme="dark"] .grid-cards .card:nth-child(3) { border-left-color: #22d3ee; }
[data-theme="dark"] .grid-cards .card:nth-child(4) { border-left-color: #fbbf24; }
[data-theme="dark"] .grid-cards .card:nth-child(5) { border-left-color: #f87171; }

/* Título do card */
.card-titulo {
  font-family: var(--fonte-heading);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  border-bottom-width: 1px;
}

[data-theme="dark"] .card-titulo {
  border-bottom-color: rgba(255,255,255,.06);
}

/* ── 11. Tabela refinada ─────────────────────────────────────── */
thead th {
  font-family: var(--fonte-mono);
  font-size: .7rem;
  letter-spacing: .08em;
}

[data-theme="dark"] thead th {
  background: rgba(255,255,255,.025);
  color: rgba(148, 163, 184, 0.70);
  border-bottom-color: rgba(255,255,255,.07);
}

[data-theme="dark"] tbody tr:nth-child(even) {
  background: rgba(255,255,255,.015);
}

[data-theme="dark"] tbody tr:hover {
  background: rgba(0, 229, 192, 0.05);
}

[data-theme="dark"] tbody tr {
  border-bottom-color: rgba(255,255,255,.04);
}

/* ── 12. Ponto — relógio e cronômetro monoespaçados ──────────── */
.relogio-ponto {
  font-size: 3.25rem;
  letter-spacing: .04em;
}
.ponto-cronometro-hero {
  font-size: 3.75rem;
  letter-spacing: .04em;
  line-height: 1;
}

/* Status labels com fonte técnica */
.ponto-status-label,
.ponto-meta-label {
  font-family: var(--fonte-mono);
  font-size: .68rem;
  letter-spacing: .10em;
}

.ponto-meta-valor {
  font-family: var(--fonte);
  font-variant-numeric: tabular-nums;
}

/* Botões de ponto: sombra colorida com teal para retorno */
.btn-ponto-retorno {
  background: var(--grad-primario);
  box-shadow: 0 4px 14px rgba(0,185,154,.35);
}

/* ── 13. Headings via tokens — line-height e escala semântica ── */
body { line-height: var(--lh-base); }

h1 { font-size: clamp(1.25rem, 4vw, var(--text-3xl)); line-height: var(--lh-tight); }
h2 { font-size: var(--text-2xl); line-height: var(--lh-snug);  }
h3 { font-size: var(--text-lg);  line-height: var(--lh-snug);  }
h4 { font-size: var(--text-md);  line-height: var(--lh-base);  }

/* ── 13b. Badges via tokens de status — light + dark automático ─ */
/* Override de main.css: tokens trocam automaticamente no dark mode */
.badge-vermelho {
  background: var(--cor-erro-bg);
  color: var(--cor-erro);
  border: 1px solid var(--cor-erro-borda);
}
.badge-laranja {
  background: var(--cor-aviso-bg);
  color: var(--cor-aviso);
  border: 1px solid var(--cor-aviso-borda);
}
.badge-amarelo {
  background: var(--cor-aviso-bg);
  color: var(--cor-aviso);
  border: 1px solid var(--cor-aviso-borda);
}
.badge-verde {
  background: var(--cor-sucesso-bg);
  color: var(--cor-sucesso);
  border: 1px solid var(--cor-sucesso-borda);
}
.badge-azul {
  background: var(--cor-info-bg);
  color: var(--cor-info);
  border: 1px solid var(--cor-info-borda);
}
.badge-cinza {
  background: var(--cor-fundo, #f1f5f9);
  color: var(--cor-texto-suave);
  border: 1px solid var(--cor-borda);
}
/* Dark mode: tokens já trocam via [data-theme="dark"] — sem overrides manuais */

/* ── 14. Sidebar overlay com blur ────────────────────────────── */
.sidebar-overlay {
  opacity: 0;
  transition: opacity 280ms ease;
  display: block !important;
  pointer-events: none;
}
.sidebar-overlay.visivel {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.55);
}

/* ── 15. Hamburger animado ───────────────────────────────────── */
.btn-menu-mobile {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: .5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cor-texto);
  flex-shrink: 0;
  transition: background 150ms ease;
}
.btn-menu-mobile:hover { background: var(--cor-fundo); }

.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 300ms var(--ease-spring),
              opacity 200ms ease,
              width 200ms ease;
  transform-origin: center;
}

.btn-menu-mobile.menu-aberto .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.btn-menu-mobile.menu-aberto .hamburger-line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.btn-menu-mobile.menu-aberto .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── 16. Login — redesign premium ────────────────────────────── */
.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% -5%,  rgba(0,229,192,.10), transparent 60%),
    radial-gradient(ellipse 50% 50% at -5%  100%, rgba(14,116,144,.12), transparent 55%),
    radial-gradient(ellipse 40% 60% at 105%  50%, rgba(99,102,241,.08), transparent 55%),
    linear-gradient(160deg, #04080f 0%, #07111f 45%, #060d1a 100%);
}

/* Grade técnica sutil no fundo */
.pagina-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,192,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,192,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  animation: gt-grid-drift 20s linear infinite;
}

@keyframes gt-grid-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(48px, 48px); }
}

/* Partícula decorativa teal */
.pagina-login::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,192,.07) 0%, transparent 70%);
  animation: gt-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gt-pulse {
  0%, 100% { transform: scale(1);    opacity: .7; }
  50%       { transform: scale(1.15); opacity: 1; }
}

/* Card de login */
.card-login {
  background: rgba(10, 18, 32, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0,229,192,.10);
  border-radius: 1.5rem;
  box-shadow:
    0 40px 80px rgba(0,0,0,.65),
    0 8px 32px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(0,229,192,.08) inset;
  padding: 2.5rem 2.25rem;
  width: 100%;
  max-width: 380px;
  position: relative;
  z-index: 10;
  animation: gt-login-in 600ms var(--ease-spring) both;
}

@keyframes gt-login-in {
  from {
    opacity: 0;
    transform: translateY(32px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Linha teal decorativa no topo do card */
.card-login::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cor-acento), transparent);
  border-radius: 999px;
}

/* Logo no card */
.card-login .marca {
  margin-bottom: 2rem;
}

.card-login .marca h1 {
  font-family: var(--fonte-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--cor-acento);
  letter-spacing: -0.02em;
}

/* Campos do login com estilo dark */
.pagina-login input:focus,
.pagina-login select:focus {
  border-color: rgba(0,229,192,.55);
  box-shadow: 0 0 0 3px rgba(0,229,192,.10);
}

/* Botão de submit do login */
.btn-login-submit {
  background: linear-gradient(135deg, #00b89a 0%, #0891b2 100%);
  box-shadow: 0 4px 20px rgba(0,185,154,.40);
  font-family: var(--fonte-heading);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: .9375rem;
  transition: box-shadow 200ms ease, transform 130ms ease, opacity 180ms ease;
}
.btn-login-submit:hover {
  box-shadow: 0 6px 28px rgba(0,185,154,.55);
  opacity: .96;
}
.btn-login-submit:active {
  transform: scale(.98);
}

/* "Esqueci minha senha" */
.pagina-login a {
  color: rgba(0,229,192,.75);
  transition: color 150ms ease;
}
.pagina-login a:hover { color: var(--cor-acento); text-decoration: none; }

/* ── 17. Alerta de timeout com design novo ───────────────────── */
#timeout-aviso {
  background: rgba(6, 13, 24, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,229,192,.20) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,.40) !important;
}

/* ── 18. Modal de migração de senha ──────────────────────────── */
[data-theme="dark"] .security-upgrade-modal {
  background:
    radial-gradient(circle at top, rgba(0, 229, 192, .12), transparent 34%),
    rgba(2, 6, 18, .80);
}

[data-theme="dark"] .security-upgrade-modal__card {
  border-color: rgba(0, 229, 192, .20);
  background: var(--cor-superfice);
}

[data-theme="dark"] .security-upgrade-modal__icon {
  background: linear-gradient(135deg, rgba(0,229,192,.15), rgba(8,145,178,.14));
  color: var(--cor-acento);
}

[data-theme="dark"] .security-upgrade-modal__eyebrow { color: var(--cor-acento); }

/* ── 19. Responsividade — mobile aprimorado ──────────────────── */
@media (max-width: 768px) {
  .btn-menu-mobile { display: flex; }

  /* Sidebar desliza com ease spring */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 320ms var(--ease-spring);
  }
  .sidebar.aberta {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,.60);
  }

  /* Touch targets maiores */
  .sidebar-nav a {
    padding: .75rem .875rem;
    min-height: 44px;
  }

  /* Cards sem hover lift no touch (evita double-tap issues) */
  .card:hover { transform: none; }

  /* Header — nome do usuário compacto */
  .header-app {
    padding: 0 1rem;
    gap: .5rem;
  }

  .header-usuario {
    gap: .5rem;
  }

  /* Garantir que grid de stats seja 2 cols no mobile */
  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .card-login {
    padding: 2rem 1.375rem;
    border-radius: 1.25rem;
  }
}

/* ── 20. Ícones SVG na sidebar via CSS mask-image ──────────────
   Cada rota recebe um ícone Lucide codificado como data URI.
   O ícone herda a cor atual do link (currentColor via mask).
   ─────────────────────────────────────────────────────────── */

/* Base para todos os ícones */
.sidebar-nav a .nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 200ms ease;
}
.sidebar-nav a:hover   .nav-ico { opacity: 0.85; }
.sidebar-nav a.ativo   .nav-ico { opacity: 1; }
.sidebar-nav a.ativo   .nav-ico svg { stroke: var(--cor-acento); }

.nav-ico svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 200ms ease;
  display: block;
}

/* ── 21. Picker shell no dark mode ──────────────────────────── */
[data-theme="dark"] .picker-shell {
  background: var(--cor-superfice);
  border-color: var(--cor-borda);
}
[data-theme="dark"] .picker-shell:focus-within {
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-glow-sm);
}

/* ── 22. Nota informativa com teal ──────────────────────────── */
[data-theme="dark"] .nota-info-verde {
  background: rgba(0,229,192,.07);
  border-left-color: var(--cor-acento);
  color: #5eead4;
}

/* ── 23. Ponto: cores de status atualizadas ─────────────────── */
[data-theme="dark"] .btn-ponto-retorno {
  background: linear-gradient(135deg, #00b89a 0%, #0891b2 100%);
  box-shadow: 0 4px 16px rgba(0,185,154,.30);
}

/* ── 24. Autocomplete refinado ──────────────────────────────── */
.autocomplete-lista {
  border-radius: 1rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.12);
  border-color: var(--cor-borda);
  overflow: hidden;
}

[data-theme="dark"] .autocomplete-lista {
  background: #0e1d30;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.60), 0 0 0 1px rgba(0,229,192,.06);
}

[data-theme="dark"] .autocomplete-item:hover,
[data-theme="dark"] .autocomplete-item--foco {
  background: rgba(0,229,192,.08);
}

/* ── 25. Transição de página (clique em link) ───────────────── */
.sidebar-nav a {
  /* Já tem transition, garantir que inclua color */
  transition:
    background 200ms ease,
    color 180ms ease,
    border-color 200ms ease,
    transform 150ms ease;
}
.sidebar-nav a:active { transform: scale(.98); }

/* ── 26. Scrollbar global refinada (dark mode) ──────────────── */
[data-theme="dark"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.10) transparent;
}
[data-theme="dark"] *::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme="dark"] *::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10);
  border-radius: 3px;
}
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* ── 27. Teclado PIN com teal ───────────────────────────────── */
[data-theme="dark"] .pin-dot--ativo {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
  box-shadow: 0 0 8px var(--cor-acento-glow);
}

.tecla-entrar {
  background: linear-gradient(135deg, #00b89a 0%, #0891b2 100%);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,185,154,.35);
}
.tecla-entrar:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(0,185,154,.50);
  opacity: .94;
}

/* ── 28. Alerta com visual refinado ─────────────────────────── */
.alerta {
  border-radius: .875rem;
  border-left-width: 3px;
}

/* ── 29. Checklist/Subatividades (GainFLOW) ─────────────────── */
[data-theme="dark"] .ponto-projeto-opcao {
  background: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .ponto-projeto-opcao:hover {
  background: rgba(0,229,192,.06);
  border-color: rgba(0,229,192,.15);
}

/* ── 31. Kanban semântico — reset de button para elementos interativos ── */
/* Reset CIRÚRGICO: remove apenas o que o browser injeta nos <button>,
   preserva os estilos visuais das classes .gf-stat / .gf-secondary-row / .gf-spill */
button.gf-stat,
button.gf-secondary-row,
button.gf-spill {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;  /* será sobrescrito pelas classes específicas abaixo */
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
}

button.gf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* restaura estilos visuais do .gf-stat que seriam perdidos */
  background: var(--cor-superfice);
  border: 1px solid var(--cor-borda);
  border-top: 3px solid var(--cor-borda);
  border-radius: .9rem;
  box-shadow: var(--sombra);
  padding: .9rem 1rem;
  width: 100%;
}
button.gf-stat:focus-visible {
  outline: 2px solid var(--cor-acento, #00e5c0);
  outline-offset: 3px;
}
/* Restaura as cores de borda por variante */
button.gf-stat.gf-stat--andamento { border-top-color: #d97706; }
button.gf-stat.gf-stat--revisao   { border-top-color: #7c3aed; }
button.gf-stat.gf-stat--concluida { border-top-color: #16a34a; }
button.gf-stat.gf-stat--atrasada  { border-top-color: #dc2626; }

/* Mobile: força wrap a 3 por linha (≤540px) e 2 por linha (≤360px) */
@media (max-width: 540px) {
  .gf-stats {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: .45rem;
  }
  .gf-stat-label { font-size: .62rem; }
  .gf-stat-value { font-size: 1.35rem; }
}

button.gf-secondary-row {
  display: grid;
  align-items: center;
  width: 100%;
  text-align: left;
}
button.gf-secondary-row:focus-visible {
  outline: 2px solid var(--cor-acento, #00e5c0);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

button.gf-spill {
  display: inline-flex;
  align-items: center;
}
button.gf-spill:focus-visible {
  outline: 2px solid var(--cor-acento, #00e5c0);
  outline-offset: 2px;
  border-radius: 999px;
}

/* ── 32. Kanban — interação touch (pointer: coarse) ─────────── */
/* Hint label oculto por padrão — visível só em touch via media query abaixo */
.gf-status-pills-label-touch { display: none; }

/* Cards draggable: position relative para ::after */
.gf-card { position: relative; }


/* Cards: toque em vez de arrastar no mobile */
@media (pointer: coarse) {
  .gf-card {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  /* Indicador visual sutil que o card é tocável */
  .gf-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: background .15s;
    pointer-events: none;
  }
  .gf-card:active::after {
    background: rgba(0, 229, 192, .08);
  }

  /* Status pills no detalhe: maiores e mais fáceis de tocar */
  #det-status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .35rem;
  }
  #det-status-pills .gf-spill {
    padding: .6rem 1rem !important;
    font-size: .85rem !important;
    min-height: 2.75rem;
    justify-content: center;
    flex: 1 1 auto;
  }

  /* Label do campo status: complemento visual em touch */
  .gf-status-pills-label-touch {
    display: block;
    font-size: .72rem;
    color: var(--cor-texto-suave);
    margin-top: .2rem;
    font-style: italic;
  }

  /* Ocultar dica de drag no board */
  .gf-col-header::after {
    display: none;
  }

  /* Stats do kanban: área de toque maior */
  button.gf-stat {
    padding: .75rem 1rem;
    min-height: 3.5rem;
  }

  /* Secondary rows: área maior */
  button.gf-secondary-row {
    padding: .85rem .9rem;
    min-height: 3.25rem;
  }
}

/* ── 33. Mobile admin: relatorio gerencial KPIs em telas pequenas ── */
@media (max-width: 480px) {
  #kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  }
  #kpi-grid .card {
    padding: .85rem .75rem;
  }
  #kpi-grid p[style*="2.2rem"] {
    font-size: 1.75rem !important;
  }
  /* Atalhos de período: pills lado a lado sem overflow */
  .relatorio-gerencial-atalhos {
    flex-wrap: wrap;
    gap: .35rem;
  }
  /* Botões de ação: empilham em coluna */
  .relatorio-gerencial-acoes {
    flex-direction: column;
    width: 100%;
  }
  .relatorio-gerencial-acoes .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ── 34. Noise texture — profundidade orgânica em ambos os modos ─ */
/* Light mode: textura de papel muito sutil (1.2% opacidade) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .012;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}
/* Dark mode: opacidade 3x maior para contrastar com fundo profundo */
[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ── 35. Segunda superfície — dark cards sobre cards ────────── */
[data-theme="dark"] .card .card,
[data-theme="dark"] .gf-section-card,
[data-theme="dark"] .gf-modal {
  background: var(--cor-superfice-elevada);
}
[data-theme="dark"] .gf-modal-overlay .gf-modal {
  border-color: rgba(255,255,255,.09);
}

/* ── 36. Modal — base + animação de entrada e saída ──────────── */

/* Estilos base (repetidos em kanban.html como fallback — aqui é a fonte canonical) */
.gf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(4px);
}
.gf-modal-overlay.aberto { display: flex; }
.gf-modal {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--cor-superfice);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-xl, 1rem);
  box-shadow: var(--sombra-elevada);
  display: flex;
  flex-direction: column;
}
.gf-modal-header {
  padding: 1.05rem 1.3rem .9rem;
  border-bottom: 1px solid var(--cor-borda);
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
  flex-shrink: 0;
}
.gf-modal-header h2,
.gf-modal-header h3 {
  font-family: var(--fonte-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.gf-modal-close {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: var(--radius-sm, 4px);
  transition: color 120ms, background 120ms;
}
.gf-modal-close:hover {
  color: var(--cor-texto);
  background: var(--cor-fundo);
}
.gf-modal-body {
  padding: 1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  flex: 1;
}
.gf-modal-footer {
  padding: .9rem 1.3rem 1.15rem;
  border-top: 1px solid var(--cor-borda);
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  flex-shrink: 0;
}

@keyframes gt-modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes gt-modal-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
}
@keyframes gt-backdrop-in {
  from { background: rgba(0,0,0,0); }
  to   { background: rgba(0,0,0,.58); }
}
@keyframes gt-backdrop-out {
  from { background: rgba(0,0,0,.58); }
  to   { background: rgba(0,0,0,0); }
}

.gf-modal-overlay.aberto {
  animation: gt-backdrop-in 200ms ease both;
}
.gf-modal-overlay.aberto .gf-modal {
  animation: gt-modal-in 260ms var(--ease-spring) both;
}
.gf-modal-overlay.fechando {
  animation: gt-backdrop-out 150ms ease both;
  pointer-events: none;
}
.gf-modal-overlay.fechando .gf-modal {
  animation: gt-modal-out 150ms ease-in both;
}

/* ── 37. Sidebar overlay — fade suave ───────────────────────── */
.sidebar-overlay {
  transition: opacity 200ms ease !important;
  opacity: 0;
}
.sidebar-overlay.visivel {
  opacity: 1;
}

/* ── 38. Kanban — flash na coluna ao soltar card ────────────── */
@keyframes gf-col-accept {
  0%   { box-shadow: inset 0 0 0 2px var(--cor-acento), 0 0 16px var(--cor-acento-glow); }
  60%  { box-shadow: inset 0 0 0 2px var(--cor-acento), 0 0 24px var(--cor-acento-glow); }
  100% { box-shadow: none; }
}
.gf-col-body.drop-aceito {
  animation: gf-col-accept 600ms var(--ease-spring) both;
}

/* ── 39. Botão secundário — :active feedback ─────────────────── */
.btn-secundario {
  transition: background 150ms ease, color 150ms ease,
              border-color 150ms ease, transform 120ms ease,
              box-shadow 150ms ease;
}
.btn-secundario:active {
  transform: scale(0.96);
  opacity: .85;
}

/* ── 40. GainFLOW tabs — underline deslizante ───────────────── */
.gf-tab {
  position: relative;
  transition: background 180ms ease, color 180ms ease,
              border-color 180ms ease, transform 120ms ease;
}
.gf-tab:active { transform: scale(0.97); }
.gf-tab.ativo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}

/* ── 41. Cards do kanban — glow hover refinado ───────────────── */
[data-theme="dark"] .gf-card:hover {
  box-shadow:
    0 0 0 1px rgba(0, 229, 192, 0.22),
    0 8px 24px rgba(0, 229, 192, 0.07),
    0 2px 8px rgba(0, 0, 0, .4);
  border-color: rgba(0, 229, 192, 0.18);
  transform: translateY(-2px);
}

/* ── 42. Skip link — acessibilidade via teclado ─────────────── */
.gt-skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: .6rem 1.25rem;
  background: var(--cor-acento);
  color: #0a1a14;
  font-weight: 700;
  font-size: .9rem;
  border-radius: .5rem;
  text-decoration: none;
  transition: top 150ms ease;
}
.gt-skip-link:focus {
  top: 1rem;
}

/* ── 43. Header mobile — ocultar ícones sociais em < 480px ──── */
@media (max-width: 480px) {
  .header-social-icons {
    display: none;
  }
  .header-app strong {
    font-size: .875rem;
  }
}

/* ── 44. Kanban tabs mobile — fade nas bordas (scroll hint) ─── */
.gf-tabs {
  position: relative;
}
@media (max-width: 600px) {
  .gf-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: .25rem;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .gf-tabs::-webkit-scrollbar { display: none; }
  .gf-tab { flex-shrink: 0; }
}

/* ── 45. Componentes unificados — .gt-form-grid ─────────────── */
.gt-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.gt-form-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.gt-form-grid .span-full {
  grid-column: 1 / -1;
}

/* ── 46. Componentes unificados — .gt-empty-state ───────────── */
.gt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  gap: .75rem;
}
.gt-empty-state-icon {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--cor-texto-suave);
  opacity: .35;
}
.gt-empty-state-title {
  font-family: var(--fonte-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cor-texto);
}
.gt-empty-state-desc {
  font-size: .875rem;
  color: var(--cor-texto-suave);
  max-width: 30ch;
  line-height: 1.6;
}

/* ── 47. Toast — slide-in animado + aria-live ───────────────── */
@keyframes gt-toast-in {
  from { transform: translateX(120%) scale(.92); opacity: 0; }
  to   { transform: translateX(0)    scale(1);   opacity: 1; }
}
@keyframes gt-toast-out {
  from { transform: translateX(0)    scale(1);   opacity: 1; }
  to   { transform: translateX(120%) scale(.92); opacity: 0; }
}
.gf-toast.visivel {
  animation: gt-toast-in 320ms var(--ease-spring) both !important;
}

/* ── 48. Tabela de pontualidade → cards no mobile ───────────── */
@media (max-width: 540px) {
  #tabela-pont thead { display: none; }
  #tabela-pont tbody tr {
    display: block;
    background: var(--cor-superfice);
    border-radius: .75rem;
    border: 1px solid var(--cor-borda);
    padding: .85rem 1rem;
    margin-bottom: .6rem;
    box-shadow: var(--sombra);
  }
  #tabela-pont tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem 0;
    font-size: .85rem;
    border: none;
    gap: .5rem;
  }
  #tabela-pont tbody td:empty { display: none; }
  #tabela-pont tbody td::before {
    content: attr(data-label);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cor-texto-suave);
    font-weight: 700;
    flex-shrink: 0;
  }
}

/* ── 49. Announcer acessível — aria-live global ──────────────── */
#gt-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  pointer-events: none;
}

/* ── 50. Focus trap — anel de foco visível dentro de modais ──── */
.gf-modal-overlay.aberto :focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   COMPONENTES COMPARTILHADOS — migração de legado para design-v2
   Usados por dashboard, ponto, ponto_pj, banco_horas, ajuste_detalhe
   ══════════════════════════════════════════════════════════════════ */

/* ── 59. Page header — título + subtítulo ────────────────────── */
.gt-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.gt-page-header h2 { margin: 0; }
.gt-page-subtitle {
  margin-top: .25rem;
  font-size: var(--text-sm);
  color: var(--cor-texto-suave);
}
.gt-back-bar { margin-bottom: 1rem; }

/* ── 60. KPI grid + KPI card ─────────────────────────────────── */
.gt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.gt-kpi-grid--3 { grid-template-columns: repeat(3, 1fr); }

.gt-kpi-card {
  background: var(--cor-superfice);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-2xl);
  box-shadow: var(--sombra);
  padding: 1.25rem 1rem;
  text-align: center;
}
.gt-kpi-card--clickable { cursor: pointer; transition: border-color 150ms ease; }
.gt-kpi-card--clickable:hover { border-color: var(--cor-acento); }
.gt-kpi-card--sucesso   { border-top: 3px solid var(--cor-sucesso); }
.gt-kpi-card--erro      { border-top: 3px solid var(--cor-erro); }
.gt-kpi-card--aviso     { border-top: 3px solid var(--cor-aviso); }
.gt-kpi-card--acento    { border-top: 3px solid var(--cor-acento); }
.gt-kpi-card--info      { border-top: 3px solid var(--cor-info); }

.gt-kpi-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cor-texto-suave);
  margin: 0 0 .5rem;
}
.gt-kpi-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 .4rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.gt-kpi-value--sucesso  { color: var(--cor-sucesso); }
.gt-kpi-value--erro     { color: var(--cor-erro); }
.gt-kpi-value--aviso    { color: var(--cor-aviso); }
.gt-kpi-value--acento   { color: var(--cor-acento); }
.gt-kpi-value--primario { color: var(--cor-primaria); }
.gt-kpi-value--info     { color: var(--cor-info); }
.gt-kpi-value--suave    { color: var(--cor-texto-suave); }
.gt-kpi-desc {
  font-size: var(--text-xs);
  color: var(--cor-texto-suave);
  margin: 0;
}

/* ── 61. Totalizadores inline (dentro de card) ───────────────── */
.gt-totais-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.gt-total-valor {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.gt-total-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-top: .25rem;
}

/* ── 62. Info card (nota CLT, alertas contextuais) ───────────── */
.gt-info-card {
  font-size: var(--text-base);
  padding: 1rem 1.25rem;
  background: var(--cor-sucesso-bg);
  border-left: 4px solid var(--cor-sucesso);
  border-radius: var(--radius-lg);
  margin-top: 1rem;
}
.gt-info-card p { margin: 0; color: var(--cor-sucesso); }
.gt-info-card--aviso { background: var(--cor-aviso-bg); border-left-color: var(--cor-aviso); }
.gt-info-card--aviso p { color: var(--cor-aviso); }
.gt-info-card--info { background: var(--cor-info-bg); border-left-color: var(--cor-info); }
.gt-info-card--info p { color: var(--cor-info); }

/* ── 63. Detail table (ajuste_detalhe) ──────────────────────── */
.gt-detail-table {
  width: 100%;
  font-size: var(--text-base);
  border-collapse: collapse;
}
.gt-detail-table td {
  padding: .5rem .25rem;
  vertical-align: top;
  border-bottom: 1px solid var(--cor-borda);
}
.gt-detail-table tr:last-child td { border-bottom: none; }
.gt-detail-table .gt-dt-label {
  color: var(--cor-texto-suave);
  font-weight: 500;
  width: 40%;
}
.gt-valor-destaque { font-weight: 600; color: var(--cor-primaria); }

/* ── 64. Avatar inline ───────────────────────────────────────── */
.gt-avatar {
  width: 2rem; height: 2rem;
  border-radius: var(--radius-full);
  object-fit: cover; flex-shrink: 0;
}
.gt-avatar-initial {
  width: 2rem; height: 2rem;
  border-radius: var(--radius-full);
  background: var(--grad-primario);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── 65. Chart legend ────────────────────────────────────────── */
.gt-chart-legend {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.gt-legend-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-sm);
  color: var(--cor-texto-suave);
}
.gt-legend-dot {
  width: 12px; height: 12px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

/* ── 66. Radio group e checkbox list ─────────────────────────── */
.gt-radio-group { display: flex; gap: 1.5rem; margin-top: .5rem; flex-wrap: wrap; }
.gt-radio-label {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; font-size: var(--text-base);
}
.gt-checkbox-list {
  display: flex; flex-direction: column;
  gap: .5rem; margin-top: .4rem;
  max-height: 260px; overflow-y: auto;
  padding-right: .25rem;
}
.gt-checkbox-label {
  display: flex; align-items: center; gap: .6rem;
  cursor: pointer;
  padding: .4rem .6rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color 150ms ease, background 150ms ease;
}
.gt-checkbox-label:hover {
  border-color: var(--cor-acento);
  background: var(--cor-acento-glow-sm);
}
.gt-checkbox-label input[type=checkbox] {
  width: 1rem; height: 1rem;
  accent-color: var(--cor-acento);
  cursor: pointer; flex-shrink: 0;
}

/* ── 67. Atalhos de período (relatorio) ──────────────────────── */
.gt-periodo-btn {
  font-size: var(--text-xs);
  padding: .25rem .65rem;
}

/* ── 68. Required asterisk ───────────────────────────────────── */
.gt-required { color: var(--cor-erro); }
.gt-opcional { color: var(--cor-texto-suave); font-weight: 400; }

/* ── 69. Painel horas (ponto.html) ───────────────────────────── */
.gt-painel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.gt-semana-tag {
  font-size: var(--text-xs);
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  padding: .2rem .65rem;
  border-radius: var(--radius-full);
}
.gt-loading-msg,
.gt-error-msg {
  text-align: center;
  padding: 2rem 0;
  color: var(--cor-texto-suave);
  font-size: var(--text-sm);
}

/* ── 56. Card entrance — animação por card dentro da coluna ──── */
@keyframes gf-card-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
/* Aplicado via JS com animation-delay por (colIdx * base + cardIdx * offset) */
.gf-card.gt-animar {
  animation: gf-card-enter 220ms var(--ease-spring) both;
}

/* ── 57. Tablet breakpoints — zona 600-768px ─────────────────── */
@media (min-width: 601px) and (max-width: 768px) {
  .pagina {
    padding: 1.25rem 1rem;
  }
  .gf-filtros {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .gf-filtros .gf-search-wrap {
    flex: 1 1 200px;
  }
  .gf-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
  }
  .gf-campo-row {
    grid-template-columns: 1fr 1fr;
  }
  .gf-board {
    gap: .55rem;
  }
  .gf-col {
    min-width: 190px;
    flex: 1 1 190px;
  }
  .card-grid,
  .gt-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* ── 58. Border-radius via tokens — seletores críticos ──────── */
/* Migração seletiva das entidades mais visíveis */
.gf-modal       { border-radius: var(--radius-3xl); }
.gf-col-header  { border-radius: var(--radius-2xl); }
.gf-col-body    { border-radius: var(--radius-xl);  }
.gf-col-empty-msg { border-radius: var(--radius-lg); }
.gt-skeleton-col  { border-radius: var(--radius-2xl); }
.gt-skeleton-card { border-radius: var(--radius-xl);  }
.gt-skeleton      { border-radius: var(--radius-md);  }
.gt-skip-link     { border-radius: var(--radius-md);  }
.gt-empty-state   { border-radius: var(--radius-2xl); }

/* ── 53. Skeleton fade-out suave ─────────────────────────────── */
#gt-kanban-skeleton {
  transition: opacity 180ms ease;
}
#gt-kanban-skeleton.gt-saindo {
  opacity: 0;
  pointer-events: none;
}

/* ── 54. Column stagger — entrada escalonada das colunas ─────── */
@keyframes gf-col-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* A classe é aplicada via JS com animation-delay por índice */
.gf-col.gt-animar {
  animation: gf-col-enter 280ms var(--ease-spring) both;
}

/* ── 55. Tokens de status em uso — substituições centralizadas ── */
/* Alerta WIP usa token de aviso */
.gf-wip-alerta {
  background: var(--cor-aviso-bg);
  border: 1px solid var(--cor-aviso-borda);
  color: var(--cor-aviso);
}

/* ── 51. will-change — hint de composição para animações ────── */
.gf-modal-overlay { will-change: opacity; }
.gf-modal          { will-change: transform, opacity; }
.gf-card           { will-change: transform; }
.sidebar           { will-change: transform; }
.sidebar-overlay   { will-change: opacity; }
#gf-toast          { will-change: transform, opacity; }

/* ── 52. Skeleton loader — kanban ────────────────────────────── */
@keyframes gt-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.gt-skeleton {
  display: inline-block;
  border-radius: .5rem;
  background: linear-gradient(
    90deg,
    var(--cor-superfice)     0%,
    var(--cor-superfice-elevada, #1a2640) 50%,
    var(--cor-superfice)     100%
  );
  background-size: 600px 100%;
  animation: gt-shimmer 1.4s ease-in-out infinite;
}
.gt-skeleton-col {
  flex: 0 0 280px;
  min-width: 260px;
  border-radius: 1rem;
  background: var(--cor-superfice);
  border: 1px solid var(--cor-borda);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.gt-skeleton-col-title {
  height: 1.1rem;
  width: 55%;
}
.gt-skeleton-card {
  height: 84px;
  width: 100%;
  border-radius: .75rem;
}
.gt-skeleton-card:nth-child(2) { width: 88%; }
.gt-skeleton-card:nth-child(3) { width: 76%; opacity: .7; }
#gt-kanban-skeleton {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  padding: .5rem 0 1rem;
}
#gt-kanban-skeleton.gt-oculto { display: none; }
.gf-board.gt-oculto           { display: none; }

/* ── 30. Prefers-reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pagina > * {
    animation: none !important;
  }
  .pagina-login::before {
    animation: none !important;
  }
  .pagina-login::after {
    animation: none !important;
  }
  .sidebar-overlay {
    transition: opacity 1ms !important;
  }
  .card {
    transition: none !important;
  }
}