/* RH Platform — identidade corporativo-contábil
   Design system: tokens em CSS custom properties, mobile-first (360 -> 1280+).
   Tema claro em :root; tema escuro em html[data-theme="dark"]
   (definido via JS em public/assets/js/app.js, com fallback de preferência do SO). */

:root {
  color-scheme: light;

  /* Marca / destaque exatos da identidade visual (RH Platform) */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-active: #1e40af;
  --primary-ink: #ffffff;
  --primary-soft: #eff6ff;
  --primary-soft-ink: #1e40af;

  /* Feedback semântico */
  --danger: #ef4444;
  --danger-soft: #fef2f2;
  --danger-ink: #b91c1c;
  --danger-border: #fecaca;
  --ok: #10b981;
  --ok-soft: #ecfdf5;
  --ok-ink: #047857;
  --ok-border: #a7f3d0;
  --warn: #f59e0b;
  --warn-soft: #fffbeb;
  --warn-ink: #b45309;
  --warn-border: #fde68a;
  --purple: #8b5cf6;
  --purple-soft: #f5f3ff;

  /* Superfícies */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;
  --surface-hover: #f8fafc;

  /* Texto */
  --text: #0f172a;
  --muted: #64748b;

  /* Bordas */
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Navegação (sidebar navy da imagem) */
  --sidebar-bg: #0f1e37;
  --sidebar-ink: #ffffff;
  --sidebar-text: #94a3b8;
  --sidebar-muted: #64748b;
  --sidebar-active-bg: #2563eb;
  --sidebar-active-ink: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* Estados */
  --focus: #2563eb;
  --focus-ring: rgba(37, 99, 235, 0.35);

  /* Elevação e sombras muito discretas */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.08);

  /* Tabelas */
  --table-head: #f8fafc;
  --row-hover: #f1f5f9;
  --row-zebra: #f8fafd;

  /* Tipografia / forma */
  --radius: 14px;
  --radius-sm: 8px;
  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-active: #2563eb;
  --primary-ink: #0f172a;
  --primary-soft: #1e293b;
  --primary-soft-ink: #93c5fd;

  --danger: #f87171;
  --danger-soft: #451a03;
  --danger-ink: #fca5a5;
  --danger-border: #7f1d1d;
  --ok: #34d399;
  --ok-soft: #064e3b;
  --ok-ink: #6ee7b7;
  --ok-border: #065f46;
  --warn: #fbbf24;
  --warn-soft: #451a03;
  --warn-ink: #fde047;
  --warn-border: #78350f;
  --purple: #a78bfa;
  --purple-soft: #2e1065;

  --bg: #090d16;
  --surface: #0f172a;
  --surface-alt: #1e293b;
  --surface-hover: #162235;

  --text: #f8fafc;
  --muted: #94a3b8;

  --border: #1e293b;
  --border-strong: #334155;

  --sidebar-bg: #070d19;
  --sidebar-ink: #ffffff;
  --sidebar-text: #94a3b8;
  --sidebar-muted: #64748b;
  --sidebar-active-bg: #2563eb;
  --sidebar-active-ink: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.06);

  --focus: #3b82f6;
  --focus-ring: rgba(59, 130, 246, 0.4);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

  --table-head: #162235;
  --row-hover: #162235;
  --row-zebra: #0d1524;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 1rem;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

img, svg { max-width: 100%; }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content {
  padding: 1rem 1rem 2.5rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Sidebar ---------- */
.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(8, 13, 24, 0.55);
}
.mobile-backdrop.is-visible { display: block; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(84vw, 300px);
  z-index: 40;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.9rem 1rem;
  gap: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
}
.sidebar.open { transform: translateX(0); }

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sidebar-ink);
  text-decoration: none;
  min-height: 40px;
}

.logo-dot {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  background-color: var(--primary);
  background-image: linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff);
  background-size: 4px 8px, 4px 11px, 4px 15px;
  background-position: 4px center, 9px center, 14px center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  display: inline-block;
}

.sidebar-close { flex: 0 0 auto; }

.nav { display: flex; flex-direction: column; gap: 1.1rem; }

.nav-section { display: flex; flex-direction: column; gap: 0.2rem; }

.nav-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 0 0.75rem 0.25rem;
}

.nav-link {
  color: var(--sidebar-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 42px;
  border: 1px solid transparent;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sidebar-ink);
}
.nav-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-ink);
}
.nav-link .badge { margin-left: auto; }

.sidebar-user {
  margin-top: auto;
  border-top: 1px solid var(--sidebar-border);
  padding-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sidebar-user-badge {
  display: none;
}
.sidebar-user-name { font-weight: 700; color: var(--sidebar-ink); font-size: 0.95rem; }
.sidebar-user-role { color: var(--sidebar-muted); font-size: 0.82rem; margin-bottom: 0.25rem; }

.sidebar .btn-ghost,
.sidebar .btn {
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--sidebar-ink);
  background: transparent;
  width: 100%;
  justify-content: center;
}
.sidebar .btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: var(--shadow-sm);
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
}
.topbar-brand .logo-dot { width: 20px; height: 20px; border-radius: 5px; background-size: 3.5px 7px, 3.5px 10px, 3.5px 13px; background-position: 3.5px center, 8.5px center, 13px center; }

.topbar-titles { flex: 1; min-width: 0; }
.topbar-titles .topbar-title { margin: 0; }

.topbar-title { font-size: 1.05rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.theme-ic { width: 18px; height: 18px; flex: 0 0 auto; }
html[data-theme="light"] .theme-ic-moon { display: block; }
html[data-theme="light"] .theme-ic-sun { display: none; }
html[data-theme="dark"] .theme-ic-sun { display: block; }
html[data-theme="dark"] .theme-ic-moon { display: none; }

/* ---------- Cabeçalhos de página ---------- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
}
.page-title {
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
}

/* ---------- Grids ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-top: 0.75rem; }
.grid-3 .btn { justify-self: start; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem;
  box-shadow: var(--shadow-sm);
}
.card-title { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.card-narrow { max-width: 560px; }
.card-unread {
  border-left: 3px solid var(--primary);
  background: var(--surface-alt);
}

.stat { display: flex; flex-direction: column; gap: 0.35rem; }
.stat-label { color: var(--muted); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value { font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); }

/* ---------- KV (descrições) ---------- */
.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; font-weight: 700; word-break: break-word; color: var(--text); }

/* ---------- Formulários ---------- */
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.field span { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.field .muted { font-weight: 400; }

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime-local"],
select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
  width: 100%;
  min-height: 42px;
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
select:hover { border-color: var(--border-strong); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
select:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
  width: 1.1rem;
  height: 1.1rem;
}

label { cursor: pointer; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.1rem;
  min-height: 42px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font);
  background: var(--primary);
  color: var(--primary-ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--primary-hover); }
.btn:active { background: var(--primary-active); }

.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary {
  background: var(--primary-soft);
  color: var(--primary-soft-ink);
  border-color: var(--primary-soft-ink);
}
.btn-secondary:hover { background: var(--primary); color: var(--primary-ink); }

.btn-danger { background: var(--danger); color: #ffffff; }
.btn-danger:hover { background: var(--danger-ink); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover {
  background: var(--surface-hover);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-block { width: 100%; }

.btn-sm {
  padding: 0.35rem 0.7rem;
  min-height: 34px;
  font-size: 0.85rem;
}

.icon-btn {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }

/* ---------- Tabelas ---------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.table th, .table td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 0.93rem;
}
.table th {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--table-head);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table tbody tr:hover { background: var(--row-hover); }
.table tbody tr:nth-child(even) { background-color: var(--row-zebra); }
.table tbody tr:nth-child(even):hover { background-color: var(--row-hover); }

/* ---------- Ferramentas / filtros ---------- */
.toolbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar input[type="text"] { flex: 1; min-width: 180px; }

.row-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; align-items: center; }
.row-form input, .row-form select { flex: 1 1 160px; width: auto; }
.row-form .btn { flex: 0 0 auto; }

.actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }

/* ---------- Paginação ---------- */
.pagination { display: flex; gap: 0.4rem; margin-top: 1rem; flex-wrap: wrap; }
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--surface);
}
.page-link:hover { border-color: var(--primary); color: var(--primary); }
.page-link.is-current {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge-danger { background: var(--danger-soft); color: var(--danger-ink); }
.badge-count { background: var(--primary); color: var(--primary-ink); }

/* ---------- Alertas / toasts ---------- */
.alert {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-weight: 600;
  word-break: break-word;
  border: 1px solid;
}
.alert-error { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-border); }
.alert-success { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok-border); }

.toast {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-weight: 600;
  border: 1px solid;
}
.toast-error { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-border); }
.feedback-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; }
.feedback-modal[hidden] { display: none; }
.feedback-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(5, 12, 24, .68); backdrop-filter: blur(4px); cursor: default; }
.feedback-dialog { position: relative; width: min(100%, 460px); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 70px rgba(2, 8, 23, .3); animation: feedback-in .18s ease-out; }
.feedback-head { display: flex; align-items: center; gap: .8rem; padding: 1.15rem 1.2rem; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.feedback-head h2 { margin: 0; font-size: 1.05rem; }
.feedback-head p { margin: .1rem 0 0; color: var(--muted); font-size: .78rem; }
.feedback-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; color: #fff; }
.feedback-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.feedback-error .feedback-icon { background: var(--danger); }
.feedback-success .feedback-icon { background: var(--ok); }
.feedback-close { margin-left: auto; align-self: flex-start; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.feedback-close:hover { background: var(--border); color: var(--text); }
.feedback-body { padding: 1.35rem 1.25rem; color: var(--text); font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.feedback-footer { display: flex; justify-content: flex-end; padding: .85rem 1.25rem; background: var(--surface-alt); border-top: 1px solid var(--border); }
.btn-success { background: var(--ok); color: #fff; }
@keyframes feedback-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Links / texto ---------- */
.link { color: var(--primary); text-decoration: none; font-weight: 700; }
.link:hover { text-decoration: underline; }

.muted { color: var(--muted); font-size: 0.9rem; }

code {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.85em;
}

/* ---------- Notificações ---------- */
.notif-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.notif-title { margin: 0; font-weight: 800; color: var(--text); }
.notif-body { margin: 0 0 0.5rem; word-break: break-word; }

/* ---------- Gráficos (SVG servidor) ---------- */
.chart { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.chart-track { fill: none; stroke: var(--border-strong); }
.chart-seg { fill: none; stroke-linecap: round; }
.chart-bg { fill: var(--surface-alt); }
.chart-axis { stroke: var(--border); stroke-width: 1; }
.chart-axis-label { fill: var(--muted); font-size: 11px; }
.chart-line { stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { opacity: 0.10; }
.chart-value { fill: var(--text); font-size: 15px; font-weight: 800; font-family: var(--mono); }
.chart-title { fill: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }

.chart-wide { width: 100%; overflow-x: auto; }
.chart-wide svg { min-width: 540px; }

.chart-wrap { display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.chart-main { flex: 0 0 auto; width: 176px; max-width: 100%; }

.chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1 1 200px;
  min-width: 200px;
}
.chart-legend li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; min-width: 0; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.legend-label { flex: 1; color: var(--text); word-break: break-word; min-width: 0; }
.legend-pct { color: var(--muted); font-size: 0.78rem; font-weight: 700; min-width: 44px; text-align: right; }
.legend-value { color: var(--text); font-family: var(--mono); font-weight: 700; min-width: 84px; text-align: right; }
.legend-inline { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.7rem; font-size: 0.85rem; }
.legend-inline .legend-label { flex: 0 0 auto; color: var(--text); }

.cell-num { text-align: right; white-space: nowrap; font-family: var(--mono); font-weight: 700; }
.cell-bar { width: 130px; }
.bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: 999px; }
.bar-fill-receive { background: #059669; }
.bar-fill-pay { background: #d97706; }

/* ---------- Autenticação ---------- */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 1rem;
  background:
    radial-gradient(1100px 480px at 50% -10%, rgba(29, 78, 216, 0.16), transparent 60%),
    var(--bg);
}
.auth-wrap { width: 100%; max-width: 400px; }
.auth-brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; margin-bottom: 1rem; font-size: 1.12rem; color: var(--text); }
.auth-card { padding: 1.6rem; }
.auth-subtitle { margin-top: 0.35rem; margin-bottom: 1.25rem; }

/* ---------- Mobile: proteção contra scroll horizontal ---------- */
@media (max-width: 767px) {
  .card { overflow-x: auto; }
  .chart-wrap { flex-direction: column; align-items: stretch; }
  .chart-main { margin: 0 auto; }
  .chart-legend { flex: none; min-width: 0; }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .content { padding: 1.5rem 1.5rem 3rem; }
  .kv { grid-template-columns: minmax(0, 180px) 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: none;
    flex-shrink: 0;
    width: 240px;
    box-shadow: none;
  }
  .sidebar-close { display: none; }
  .icon-btn { display: none; }
  .topbar-brand { display: none; }
  .mobile-backdrop { display: none !important; }
  .sidebar-user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--sidebar-active-bg);
    color: var(--sidebar-ink);
    font-weight: 800;
    font-size: 0.95rem;
    flex: 0 0 auto;
  }
  .sidebar-user { flex-direction: row; align-items: center; gap: 0.7rem; }
  .sidebar-user div:nth-child(2) { min-width: 0; flex: 1; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .content { padding: 2rem 2rem 3.5rem; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topbar { padding: 0.8rem 2rem; }
  .sidebar { width: 260px; }
}

/* ---------- Impressão / recibos ---------- */
@page { margin: 2cm; }

@media print {
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  .sidebar,
  .topbar,
  .toolbar,
  .actions-row,
  .pagination,
  .theme-toggle,
  .icon-btn,
  .mobile-backdrop,
  .toast,
  .toast-error,
  .alert,
  .alert-error,
  .alert-success {
    display: none !important;
  }
  .no-print { display: none !important; }
  .payroll-help, .payroll-view-help, .import-progress-modal { display:none !important; }
  .payroll-company-sheet { box-shadow:none; border:0; padding:0; margin:0 0 1.2rem; break-inside:auto; }
  .payroll-company-sheet .table-wrap { overflow:visible; }
  .payroll-company-sheet .table { min-width:0; width:100%; font-size:9px; color:#000; }
  .payroll-company-sheet .table th, .payroll-company-sheet .table td { padding:5px 4px; border-color:#999; }
  .payroll-company-sheet .table thead { display:table-header-group; }
  .payroll-company-sheet .table tfoot { display:table-footer-group; }
  .payroll-company-sheet .table tr { break-inside:avoid; }

  .app { display: block; }
  .main { display: block; }
  .content { max-width: none; padding: 0; margin: 0; }
  body { background: #ffffff; color: #000000; font-size: 12px; }

  .recibo {
    max-width: 760px;
    margin: 0 auto;
    page-break-inside: avoid;
    color: #000000;
  }
  .recibo-head { text-align: center; margin-bottom: 1.5rem; }
  .recibo-title {
    margin: 0 0 0.3rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #000000;
  }
  .recibo-tenant { font-weight: 600; color: #111111; }
  .recibo-period { color: #444444; font-size: 0.85rem; }
  .recibo-body { margin-bottom: 1.5rem; }
  .recibo-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    color: #000000;
  }
  .recibo-table th,
  .recibo-table td {
    border: 1px solid #000000;
    padding: 0.35rem 0.5rem;
    text-align: left;
    font-size: 0.8rem;
  }
  .recibo-table th { background: #f0f4f8; font-weight: 700; }
  .recibo-table td.recibo-total,
  .recibo-table .recibo-total { text-align: right; font-weight: 700; }
  .recibo-table tr:last-child td { border-bottom-width: 1px; }
  .recibo-footer {
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid #000000;
    font-size: 0.75rem;
    color: #333333;
  }

  a { color: #000000; text-decoration: none; }
  th, td { color: #000000; }
  .content { background: transparent; }
}

/* ---------- RH Platform 2026: shell e componentes fluidos ---------- */
:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --content-max: 1680px;
}

body { min-width: 0; overflow-x: hidden; }
.content { max-width: var(--content-max); padding: clamp(1rem, 2vw, 2rem); }
.topbar { min-height: 64px; padding: .65rem clamp(1rem, 2vw, 2rem); }
.sidebar { padding: 1rem .8rem; }
.nav { gap: .8rem; }
.nav-link { font-size: .875rem; font-weight: 500; min-height: 40px; }
.card { min-width: 0; padding: clamp(1rem, 1.35vw, 1.35rem); }
.card:hover { border-color: var(--border-strong); }
.page-head { margin-bottom: 1.25rem; }
.page-title { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.table-wrap, .card > .table { width: 100%; }
.table { margin-bottom: 0; }
textarea { width: 100%; min-height: 120px; resize: vertical; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem; background: var(--surface); color: var(--text); font: inherit; }

.global-search { flex: 1; max-width: 560px; position: relative; }
.global-search svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--muted); }
.global-search input { padding-left: 2.45rem; padding-right: 4.5rem; background: var(--surface-alt); border-color: transparent; min-height: 42px; }
.global-search kbd { position: absolute; right: 9px; top: 50%; translate: 0 -50%; padding: 2px 6px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; font: 600 .7rem var(--font); }
.topbar-user { display: flex; align-items: center; gap: .65rem; padding-left: .8rem; border-left: 1px solid var(--border); }
.user-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #6366f1); color: #fff; font-weight: 800; }
.user-copy { line-height: 1.25; }
.user-copy strong, .user-copy span { display: block; }
.user-copy strong { font-size: .84rem; }
.user-copy span { color: var(--muted); font-size: .72rem; }

.dashboard-hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.dashboard-hero p { margin: .25rem 0 0; }
.date-chip { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-radius: 12px; background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface)); }
.date-chip svg { color: var(--primary); flex: 0 0 auto; }
.date-chip strong, .date-chip span { display: block; }
.date-chip strong { font-size: .8rem; }
.date-chip span { color: var(--muted); font-size: .72rem; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.3vw, 1.15rem); margin-bottom: 1.15rem; }
.kpi-card { display: flex; align-items: center; gap: 1rem; min-height: 112px; }
.kpi-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px; color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, currentColor 18%, transparent); }
.kpi-blue { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.kpi-green { background: linear-gradient(135deg, #4ade80, #10b981); }
.kpi-orange { background: linear-gradient(135deg, #fb923c, #f97316); }
.kpi-purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.kpi-copy { min-width: 0; }
.kpi-label { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; }
.kpi-value { display: block; margin-top: .15rem; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-meta { display: block; margin-top: .3rem; color: var(--muted); font-size: .72rem; font-weight: 600; }

.dashboard-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, .75fr); gap: 1rem; align-items: start; }
.dashboard-main, .dashboard-side { display: grid; gap: 1rem; min-width: 0; }
.dashboard-charts { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 1rem; }
.dashboard-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.card-heading { display: flex; align-items: center; gap: .55rem; }
.card-heading svg { color: var(--primary); }
.card-head h3 { margin: 0; font-size: 1rem; }
.card-head p { margin: .15rem 0 0; color: var(--muted); font-size: .76rem; }
.chart-frame { min-height: 210px; display: grid; align-items: end; }
.chart-frame .chart-wide { overflow: hidden; }
.chart-frame .chart-wide svg { min-width: 100%; width: 100%; }
.empty-state { display: grid; place-items: center; min-height: 170px; padding: 1.25rem; text-align: center; color: var(--muted); background: var(--surface-alt); border: 1px dashed var(--border-strong); border-radius: 12px; }
.company-bars { display: grid; gap: .8rem; }
.company-bar-head { display: flex; justify-content: space-between; gap: .75rem; font-size: .78rem; }
.company-bar-track { height: 9px; margin-top: .35rem; overflow: hidden; background: var(--surface-alt); border-radius: 999px; }
.company-bar-fill { height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); border-radius: inherit; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.quick-link { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 84px; gap: .35rem; padding: .65rem .4rem; color: var(--text); text-align: center; text-decoration: none; font-size: .72rem; font-weight: 700; background: var(--surface-alt); border: 1px solid transparent; border-radius: 11px; }
.quick-link:hover { border-color: var(--primary); color: var(--primary); }
.quick-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.quick-icon { width: 34px; height: 34px; font-size: 0; background: #eaf2ff; }
.quick-icon::before { content: ''; width: 18px; height: 18px; background: center / contain no-repeat; }
.quick-link:nth-child(1) .quick-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.quick-link:nth-child(2) .quick-icon { background: #e8faf4; }
.quick-link:nth-child(2) .quick-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.3'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.quick-link:nth-child(3) .quick-icon { background: #fff1ea; }
.quick-link:nth-child(3) .quick-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2.2'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.quick-link:nth-child(4) .quick-icon { background: #f3edff; }
.quick-link:nth-child(4) .quick-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.2'%3E%3Cpath d='M6 3h12v18H6zM9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
.quick-link:nth-child(5) .quick-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2'%3E%3Cpath d='m22 2-7 20-4-9-9-4zM22 2 11 13'/%3E%3C/svg%3E"); }
.quick-link:nth-child(6) .quick-icon { background: #edf2f7; }
.quick-link:nth-child(6) .quick-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b708b' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1-2.9 2.9-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21h-4v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1-2.9-2.9.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3v-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1 2.9-2.9.1.1A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.5V3h4v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1 2.9 2.9-.1.1a1.7 1.7 0 0 0-.3 1.8 1.7 1.7 0 0 0 1.5 1h.1v4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }

.users-layout { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(0, 1.55fr); gap: 1rem; align-items: start; }
.users-layout .card { overflow: hidden; }
.users-form-card { position: sticky; top: 84px; }
.users-list-card { min-width: 0; }
.section-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.users-table { table-layout: auto; min-width: 660px; }
.users-table th:last-child, .users-table td:last-child { width: 100px; text-align: right; }
.users-table td { vertical-align: middle; }
.user-cell { display: flex; align-items: center; gap: .65rem; min-width: 130px; }
.mini-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: .78rem; font-weight: 800; }
.email-cell { display: block; min-width: 190px; overflow-wrap: anywhere; }
.license-panel { background: rgba(255,255,255,.045); border: 1px solid var(--sidebar-border); border-radius: 12px; padding: .85rem; }
.license-panel strong, .license-panel span { display: block; }
.license-panel strong { color: #fff; font-size: .83rem; }
.license-panel span { margin-top: .12rem; color: var(--sidebar-text); font-size: .7rem; }
.license-track { height: 5px; margin-top: .65rem; background: rgba(255,255,255,.13); border-radius: 999px; overflow: hidden; }
.license-track i { display: block; height: 100%; width: 78%; background: #34d399; border-radius: inherit; }

.auth-body { padding: 0; }
.auth-wrap { display: grid; grid-template-columns: minmax(320px, 1.05fr) minmax(360px, .95fr); width: min(100% - 2rem, 1040px); max-width: 1040px; min-height: 620px; margin: 1rem auto; overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-lg); }
.auth-promo { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5vw, 4rem); color: #fff; background: linear-gradient(145deg, #0f1e37, #173b77 62%, #2563eb); overflow: hidden; }
.auth-promo::after { content: ''; position: absolute; width: 360px; height: 360px; right: -150px; bottom: -160px; border: 70px solid rgba(255,255,255,.08); border-radius: 50%; }
.auth-promo h1 { position: relative; margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; z-index: 1; }
.auth-promo p { position: relative; max-width: 390px; color: #cbd5e1; z-index: 1; }
.auth-form-pane { display: grid; align-content: center; padding: clamp(1.5rem, 5vw, 4rem); }
.auth-form-pane .auth-card { padding: 0; border: 0; box-shadow: none; }
.auth-brand { margin: 0; color: inherit; }

@media (min-width: 768px) and (max-width: 1100px) {
  .sidebar { width: 224px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-charts { grid-template-columns: 1fr; }
  .users-layout { grid-template-columns: 1fr; }
  .users-form-card { position: static; }
}

@media (min-width: 1200px) {
  .sidebar { width: 244px; }
}

@media (max-width: 767px) {
  .topbar { min-height: 58px; }
  .global-search { display: none; }
  .topbar-actions { gap: .25rem !important; }
  .topbar-actions > a[title="Mensagens"], .topbar-actions > a[title="Ajuda"], .user-copy { display: none !important; }
  .topbar-user { padding-left: .45rem; }
  .dashboard-hero { align-items: flex-start; flex-direction: column; }
  .date-chip { width: 100%; }
  .kpi-grid, .dashboard-layout, .dashboard-charts, .dashboard-modules, .dashboard-side { grid-template-columns: 1fr; }
  .kpi-card { min-height: 96px; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { overflow-x: visible; }
  .table-wrap { overflow: visible; }
  .table.responsive-table thead { display: none; }
  .table.responsive-table, .table.responsive-table tbody, .table.responsive-table tr, .table.responsive-table td { display: block; width: 100%; }
  .table.responsive-table tr { padding: .75rem 0; border-bottom: 1px solid var(--border); }
  .table.responsive-table td { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: .75rem; padding: .3rem 0; border: 0; }
  .table.responsive-table td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
  .auth-wrap { grid-template-columns: 1fr; width: 100%; min-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .auth-promo { display: none; }
  .users-layout { grid-template-columns: 1fr; }
  .users-form-card { position: static; }
  .users-layout .card { overflow: visible; }
  .users-table { min-width: 0; }
  .users-table .email-cell { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.settings-tabs { display: flex; gap: .5rem; margin: 0 0 1rem; padding: .35rem; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.settings-tabs a { padding: .65rem .9rem; border-radius: 9px; color: var(--muted); font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.settings-tabs a:hover { color: var(--primary); background: var(--primary-soft); }
.settings-section { margin-bottom: 1rem; scroll-margin-top: 82px; }
.settings-section > .card-head h2 { margin: 0; font-size: 1.1rem; }
.settings-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.switch-row { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin-bottom: 1rem; font-weight: 700; }
.settings-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; margin: .75rem 0 1.25rem; }
.settings-checks label { display: flex; align-items: center; gap: .55rem; padding: .7rem; background: var(--surface-alt); border-radius: 9px; }
.plans-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.limit-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; }
.alert-info { background: var(--primary-soft); color: var(--primary-soft-ink); border-color: var(--primary); }
.account-password-link { display:inline-flex; align-items:center; gap:.35rem; color:var(--muted); text-decoration:none; padding:.45rem .55rem; border-radius:9px; font-size:.78rem; font-weight:700; }
.account-password-link:hover { background:var(--surface-alt); color:var(--primary); }
.password-page { max-width:1050px; margin:0 auto; }
.password-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:1.25rem; align-items:start; }
.password-card,.password-security-note { padding:1.5rem; }
.account-summary { display:flex; align-items:center; gap:.8rem; padding-bottom:1.25rem; margin-bottom:1.25rem; border-bottom:1px solid var(--border); }
.account-summary small { display:block; color:var(--muted); margin-top:.2rem; }
.account-avatar { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,#2563eb,#60a5fa); color:#fff; font-size:1.1rem; font-weight:800; }
.password-form,.password-help { display:grid; gap:1rem; }
.password-help { gap:.35rem; padding:1rem; border-radius:12px; background:var(--surface-alt); color:var(--muted); font-size:.86rem; }
.password-help strong { color:var(--text); }
.password-help span:before { content:'✓'; color:var(--success); font-weight:800; margin-right:.5rem; }
.password-security-note h2 { font-size:1.05rem; margin:.8rem 0; }
.password-security-note p { color:var(--muted); line-height:1.6; }
.security-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--primary-soft); color:var(--success); font-weight:900; }
@media(max-width:760px) { .password-layout{grid-template-columns:1fr}.account-password-link span{display:none}.password-security-note{order:-1}.password-card,.password-security-note{padding:1rem} }

/* Importação assistida de dados do RH */
.import-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:1rem;margin-bottom:1rem}.import-card{padding:1.4rem}.import-card h3,.import-preview h3{display:inline-block;margin:.1rem 0 .6rem;font-size:1.08rem}.import-step{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:.5rem;border-radius:9px;background:var(--primary-soft);color:var(--primary);font-weight:800}.upload-zone{display:grid;place-items:center;gap:.3rem;margin:1.15rem 0;padding:1.4rem;border:2px dashed var(--border);border-radius:14px;background:var(--surface-alt);text-align:center;cursor:pointer}.upload-zone:hover{border-color:var(--primary);background:var(--primary-soft)}.upload-zone input{width:min(100%,420px);margin-top:.65rem}.upload-zone span{color:var(--muted);font-size:.78rem}.upload-zone .upload-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;font-size:1.5rem}.import-guide ul{display:grid;gap:.65rem;margin:.8rem 0 1rem;padding-left:1.2rem;line-height:1.45}.notice{margin-top:1rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:10px;line-height:1.45}.notice-info{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 35%,var(--border))}.notice-warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4)}.import-preview{padding:1.4rem}.import-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin:1rem 0}.import-stats>div{display:grid;gap:.15rem;padding:1rem;border-radius:12px;background:var(--surface-alt)}.import-stats strong{font-size:1.4rem;color:var(--primary)}.import-stats span{color:var(--muted);font-size:.78rem}.import-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1rem}.import-actions form{margin:0}@media(max-width:850px){.import-grid{grid-template-columns:1fr}.import-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.import-progress-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:1rem;background:rgba(2,8,23,.76);backdrop-filter:blur(5px)}.import-progress-modal[hidden]{display:none}.import-progress-dialog{width:min(560px,100%);padding:2rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 28px 70px rgba(0,0,0,.35);text-align:center}.import-progress-dialog h2{margin:.8rem 0 .35rem}.progress-spinner{width:52px;height:52px;margin:auto;border:5px solid var(--primary-soft);border-top-color:var(--primary);border-radius:50%;animation:import-spin .85s linear infinite}.progress-track{height:12px;margin:1.25rem 0 .55rem;overflow:hidden;border-radius:999px;background:var(--surface-alt);border:1px solid var(--border)}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#22c55e);transition:width .28s ease}.import-progress-dialog>[data-import-percent]{display:block;font-size:1.55rem;color:var(--primary)}@keyframes import-spin{to{transform:rotate(360deg)}}
.import-progress-dialog [hidden]{display:none!important}.import-progress-dialog.is-complete .progress-spinner{animation:none;border-color:#22c55e;position:relative}.import-progress-dialog.is-complete .progress-spinner:after{content:'✓';display:grid;place-items:center;height:100%;color:#22c55e;font-size:1.5rem;font-weight:900}

/* Gestão de pessoas: visão integrada */
.section-links{display:flex;gap:.35rem;margin:0 0 1rem;padding:.35rem;overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.rh-people-nav{position:sticky;top:64px;z-index:20;max-width:100%;box-shadow:var(--shadow-sm);scrollbar-width:thin;scroll-padding-inline:.35rem}
.rh-people-nav a{flex-shrink:0}
.vacation-planning{margin-bottom:1rem;padding:clamp(1rem,2vw,1.5rem)}
.planning-filters{display:flex;align-items:end;flex-wrap:wrap;gap:.75rem;padding:1rem;margin:.5rem 0 1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-alt)}
.planning-filters label{display:grid;gap:.35rem;margin:0;font-size:.8rem;color:var(--muted)}
.planning-filters label:first-of-type{width:110px}.planning-filters label:nth-of-type(2){flex:1;max-width:380px;min-width:190px}.planning-filters .btn{min-height:44px}
.planning-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.planning-metric{display:grid;gap:.3rem;padding:1rem;border:1px solid var(--border);border-radius:12px;border-top:3px solid var(--primary);background:var(--surface)}
.planning-metric span{font-size:.8rem;color:var(--muted)}.planning-metric strong{font-size:1.8rem;line-height:1.2;font-variant-numeric:tabular-nums}.planning-metric small{font-size:.72rem;color:var(--muted)}
.planning-metric.tone-orange{border-top-color:var(--warn)}.planning-metric.tone-purple{border-top-color:var(--purple)}.planning-metric.tone-green{border-top-color:var(--ok)}
.planning-chart-panel{padding:1rem;border:1px solid var(--border);border-radius:14px;background:var(--surface-alt);margin-bottom:1.5rem}
.planning-block-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.planning-block-head h3{margin:0;font-size:1rem}.planning-block-head p{margin:.25rem 0 0;font-size:.8rem;color:var(--muted)}
.planning-legend{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--muted);white-space:nowrap}.planning-legend i{width:9px;height:9px;border-radius:3px;background:var(--primary)}
.planning-no-data{display:grid;gap:.3rem;padding:.8rem 1rem;border:1px dashed var(--border-strong);border-radius:10px;margin-bottom:1rem}.planning-no-data strong{font-size:.85rem}.planning-no-data span{font-size:.78rem;color:var(--muted)}
.planning-chart-scroll{overflow-x:auto;max-width:100%}.planning-chart{display:flex;gap:.6rem;min-width:540px;padding-top:1rem}.planning-axis{height:144px;display:flex;flex-direction:column;justify-content:space-between;min-width:28px;color:var(--muted);font-size:.7rem;text-align:right;padding-bottom:2px}
.planning-bars{flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.5rem;background:repeating-linear-gradient(to top,transparent 0,transparent 47px,var(--border) 47px,var(--border) 48px);background-size:100% 144px;background-repeat:no-repeat}
.planning-month{text-align:center;min-width:0}.planning-bar-track{height:144px;display:flex;align-items:end;justify-content:center;border-bottom:1px solid var(--border-strong)}.planning-bar{position:relative;width:60%;max-width:46px;min-width:12px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#60a5fa,#2563eb)}.planning-bar span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:4px;font-size:.75rem;font-weight:700;color:var(--text)}.planning-bar.is-zero{background:none}.planning-bar.is-zero span{color:var(--muted)}.planning-month small{display:block;padding-top:.55rem;color:var(--muted);font-size:.73rem}
.planning-footnote{font-size:.75rem;color:var(--muted);margin:.9rem 0 0;line-height:1.5}
.planning-table-scroll{max-height:480px;overflow:auto;border:1px solid var(--border);border-radius:12px}.planning-table{margin:0;min-width:740px}.planning-table th{position:sticky;top:0;z-index:1;background:var(--surface-alt);white-space:normal;font-size:.72rem}.planning-table th small{display:block;font-size:.65rem;font-weight:400;text-transform:none;margin-top:.2rem;color:var(--muted)}.planning-table td:not(:first-child),.planning-table th:not(:first-child){text-align:center}.planning-table td:first-child{min-width:210px;font-size:.82rem}.planning-table td{padding:.7rem .85rem}
.planning-count{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:28px;border-radius:8px;background:var(--surface-alt);font-weight:700;font-size:.8rem;font-variant-numeric:tabular-nums}.planning-count.count-review{background:var(--warn-soft);color:var(--warn-ink)}.planning-count.count-due{background:var(--primary-soft);color:var(--primary-soft-ink)}.planning-count.count-scheduled{background:var(--purple-soft);color:var(--text)}.planning-count.count-used{background:var(--ok-soft);color:var(--ok-ink)}.planning-count.is-zero{background:transparent;color:var(--muted);font-weight:400}
.planning-team-track{height:3px;max-width:150px;background:var(--border);border-radius:3px;margin-top:.4rem}.planning-team-track i{display:block;height:100%;background:var(--primary);border-radius:inherit}
.vacation-planning>details{margin-top:1rem;padding:1rem;border:1px solid var(--border);border-radius:12px}.vacation-planning>details>summary{font-weight:700;cursor:pointer;font-size:.9rem}
@media(max-width:767px){.planning-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.planning-block-head{align-items:start;flex-direction:column;gap:.5rem}.planning-filters .btn{flex:1}.planning-table-scroll{max-height:380px}}
.rh-people-nav a:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
@media(max-width:767px){.rh-people-nav{top:58px}}
@media print{.rh-people-nav{position:static;box-shadow:none}}
.attendance-filter-card{padding:1rem;margin-bottom:1rem}.attendance-filter{display:grid;gap:1rem}.attendance-filter-main{display:grid;grid-template-columns:minmax(230px,2fr) repeat(3,minmax(150px,1fr));gap:.75rem;align-items:end}.attendance-filter .field{margin:0}.attendance-filter .field span{font-size:.75rem;color:var(--muted)}.attendance-filter input,.attendance-filter select{min-height:44px}.attendance-filter-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.85rem;border-top:1px solid var(--border)}.attendance-presets,.attendance-filter-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}.attendance-presets>span{margin-right:.25rem;color:var(--muted);font-size:.75rem;font-weight:700}.attendance-filter-actions{margin-left:auto}
.attendance-employee{padding:0;overflow:hidden;margin-bottom:.75rem}.attendance-employee>summary{display:grid;grid-template-columns:42px minmax(0,1fr) auto 24px;align-items:center;gap:.75rem;padding:1rem 1.1rem;cursor:pointer;list-style:none;background:var(--surface)}.attendance-employee>summary::-webkit-details-marker{display:none}.attendance-employee[open]>summary{border-bottom:1px solid var(--border);background:var(--surface-alt)}.attendance-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:#fff;background:linear-gradient(145deg,var(--primary),#60a5fa);font-weight:800}.attendance-employee-name{display:grid;gap:.15rem}.attendance-employee-name small,.attendance-total small{color:var(--muted);font-size:.72rem}.attendance-total{display:grid;text-align:right}.attendance-total strong{font-size:1.05rem;color:var(--ok)}.attendance-chevron{font-size:1.3rem;color:var(--muted);transition:transform .2s}.attendance-employee[open] .attendance-chevron{transform:rotate(180deg)}
.attendance-day-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 1.1rem .5rem;padding:.7rem .85rem;border-radius:10px;background:var(--surface-alt)}.attendance-day-head>div{display:flex;align-items:baseline;gap:.55rem}.attendance-day-head span{color:var(--muted);font-size:.78rem}.attendance-employee .table-wrap{margin:0 1.1rem 1rem}.attendance-employee .table{margin:0}.attendance-general-total{border-left:4px solid var(--primary)}
@media(max-width:900px){.attendance-filter-main{grid-template-columns:repeat(2,minmax(0,1fr))}}
.attendance-employee .table-wrap{overflow-x:auto}.attendance-employee .table{min-width:650px}
@media(max-width:600px){.attendance-filter-main{grid-template-columns:1fr}.attendance-filter-footer{align-items:stretch;flex-direction:column}.attendance-filter-actions{width:100%;margin:0}.attendance-filter-actions .btn{flex:1}.attendance-presets>span{width:100%}.attendance-employee>summary{grid-template-columns:40px minmax(0,1fr) 20px}.attendance-total{grid-column:2;text-align:left}.attendance-chevron{grid-column:3;grid-row:1/3}.attendance-day-head{align-items:flex-start;flex-direction:column}.attendance-employee .table-wrap{margin:.5rem}}
.section-links a{padding:.65rem .85rem;border-radius:9px;color:var(--muted);font-size:.86rem;font-weight:700;text-decoration:none;white-space:nowrap}.section-links a:hover,.section-links a.is-current{color:var(--primary);background:var(--primary-soft)}
.rh-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:1rem}.rh-summary-card{position:relative;display:grid;gap:.2rem;min-height:118px;padding:1rem 1.1rem;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}.rh-summary-card:before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--primary)}.rh-summary-card span{color:var(--muted);font-size:.8rem;font-weight:700}.rh-summary-card strong{font-size:1.7rem;line-height:1.1}.rh-summary-card small{color:var(--muted)}.rh-summary-card.tone-green:before{background:#10b981}.rh-summary-card.tone-orange:before{background:#f59e0b}.rh-summary-card.tone-purple:before{background:#8b5cf6}.rh-summary-card.tone-red:before{background:#ef4444}
.filter-panel{padding:.75rem;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.table-subtitle,.employee-name-link small,.vacation-person small,.vacation-period small,.vacation-status small{display:block;margin-top:.2rem;color:var(--muted);font-size:.76rem}.employee-name-link{display:flex;align-items:center;gap:.65rem;color:var(--text);text-decoration:none}.employee-name-link:hover strong,.vacation-person a:hover{color:var(--primary)}.mini-avatar,.employee-avatar{display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:linear-gradient(135deg,var(--primary),#60a5fa);color:#fff;font-weight:800}.mini-avatar{width:34px;height:34px}.employee-avatar{width:58px;height:58px;font-size:1.35rem}.employee-overview{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:1rem;align-items:center;margin-bottom:1rem;padding:1rem 1.15rem;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.employee-overview span,.rh-detail-metrics span{display:block;margin-bottom:.25rem;color:var(--muted);font-size:.76rem}.employee-overview strong,.rh-detail-metrics strong{font-size:.9rem}.rh-detail-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem}.rh-detail-metrics>div{padding:.85rem;border-radius:10px;background:var(--surface-alt)}
.vacation-list{display:grid;gap:.75rem}.vacation-card{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(260px,1fr) minmax(210px,.8fr) minmax(150px,.65fr);gap:1rem;align-items:center;padding:1rem;border:1px solid var(--border);border-left:4px solid #10b981;border-radius:14px;background:var(--surface)}.vacation-card.is-overdue{border-left-color:#ef4444}.vacation-card.is-attention{border-left-color:#f59e0b}.vacation-person{display:flex;align-items:center;gap:.7rem}.vacation-person a{color:var(--text);font-weight:800;text-decoration:none}.vacation-days{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;text-align:center}.vacation-days>div{padding:.55rem;border-radius:9px;background:var(--surface-alt)}.vacation-days span{display:block;color:var(--muted);font-size:.7rem}.vacation-days strong{font-size:1.15rem}.rh-progress{height:8px;margin:.5rem 0 0;overflow:hidden;border-radius:999px;background:var(--surface-alt)}.rh-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#22c55e)}.rh-legal-note{margin-top:1rem}
@media(max-width:1050px){.rh-summary-grid{grid-template-columns:repeat(2,1fr)}.vacation-card{grid-template-columns:1fr 1fr}.rh-detail-metrics{grid-template-columns:repeat(3,1fr)}.employee-overview{grid-template-columns:auto repeat(2,1fr)}}
@media(max-width:650px){.rh-summary-grid{grid-template-columns:1fr 1fr}.rh-summary-card{min-height:105px}.vacation-card{grid-template-columns:1fr}.rh-detail-metrics{grid-template-columns:1fr 1fr}.employee-overview{grid-template-columns:auto 1fr}.employee-overview>div:not(.employee-avatar){grid-column:1/-1}.filter-panel>*{flex:1 1 100%}}
.vacation-form{display:grid;gap:1rem}.vacation-form .card{margin:0}.form-grid-2,.form-grid-3{display:grid;gap:1rem}.form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.form-span-2{grid-column:1/-1}.form-submit-bar{position:sticky;bottom:1rem;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid var(--border-strong);border-radius:14px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:var(--shadow-lg);backdrop-filter:blur(8px)}.form-submit-bar span{color:var(--muted);font-size:.82rem}.vacation-evidence{display:grid;gap:.15rem;margin-top:.45rem;color:var(--muted)}.compliance-checks{display:grid;gap:.3rem}.compliance-checks .badge{width:max-content}
@media(max-width:700px){.form-grid-2,.form-grid-3{grid-template-columns:1fr}.form-span-2{grid-column:auto}.form-submit-bar{align-items:stretch;flex-direction:column}.form-submit-bar .btn{width:100%}}
.hr-financial-panel{margin-bottom:1rem}.hr-financial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.hr-financial-grid>a{display:grid;gap:.25rem;min-width:0;padding:1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-alt);color:var(--text);text-decoration:none;transition:.15s ease}.hr-financial-grid>a:hover{border-color:var(--primary);transform:translateY(-1px)}.hr-financial-grid span{color:var(--muted);font-size:.78rem;font-weight:700}.hr-financial-grid strong{font-size:clamp(1.15rem,2vw,1.55rem);font-variant-numeric:tabular-nums}.hr-financial-grid small{color:var(--muted);line-height:1.4}@media(max-width:900px){.hr-financial-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.hr-financial-grid{grid-template-columns:1fr}}