/* app.css — Painel Gestão Fresh Food */

:root {
  --verde:      #1a7a4a;
  --verde-dark: #145c37;
  --verde-light:#e8f5ee;
  --verde-mid:  #2ea866;
  --amarelo:    #f5c842;
  --vermelho:   #c0392b;
  --vermelho-light: #fdecea;
  --cinza-bg:   #f4f6f8;
  --cinza-borda:#dde1e7;
  --cinza-texto:#6b7280;
  --texto:      #1a1f2e;
  --branco:     #ffffff;
  --card-shadow: 0 1px 4px rgba(0,0,0,.08);
  --radius:     10px;
  --sidebar-w:  220px;
  --font:       'Segoe UI', system-ui, sans-serif;

  /* ── Fresh Food Design System — aliases canônicos ──────────
     Equivalência 1:1 com as variáveis acima. Novos módulos
     podem usar --ff-* OU os nomes legados; ambos funcionam. */
  --ff-green:       var(--verde);
  --ff-green-dark:  var(--verde-dark);
  --ff-green-mid:   var(--verde-mid);
  --ff-green-light: var(--verde-light);
  --ff-yellow:      var(--amarelo);
  --ff-red:         var(--vermelho);
  --ff-red-light:   var(--vermelho-light);
  --ff-bg:          var(--cinza-bg);
  --ff-border:      var(--cinza-borda);
  --ff-text-muted:  var(--cinza-texto);
  --ff-text:        var(--texto);
  --ff-white:       var(--branco);
  --ff-radius-md:   var(--radius);
  --ff-shadow-card: var(--card-shadow);
  --ff-sidebar-w:   var(--sidebar-w);
  --ff-font:        var(--font);

  /* ── DS: cores de marca (logo) ─────────────────────────── */
  --ff-brand-green-dark: #1a6b3e;
  --ff-brand-green:      #2f9e54;
  --ff-amber-bar:        #f5a623;

  /* ── DS: chips / badges ────────────────────────────────── */
  --ff-warn-bg:  #fff3cd;  --ff-warn-fg:  #856404;
  --ff-amber-bg: #fff3e0;  --ff-amber-fg: #b45309;
  --ff-blue-bg:  #e8f0ff;  --ff-blue-fg:  #2563eb;  --ff-blue-bar: #4a90d9;

  /* ── DS: aliases semânticos ─────────────────────────────── */
  --ff-primary:         var(--ff-green);
  --ff-primary-hover:   var(--ff-green-dark);
  --ff-surface:         var(--ff-white);
  --ff-surface-sunken:  var(--ff-bg);
  --ff-surface-tinted:  var(--ff-green-light);
  --ff-text-on-primary: var(--ff-white);
  --ff-link:            var(--ff-green);
  --ff-focus-ring:      var(--ff-green);
  --ff-danger:          var(--ff-red);
  --ff-accent:          var(--ff-yellow);

  /* ── DS: tipografia ─────────────────────────────────────── */
  --ff-font-mono:       ui-monospace, Menlo, Consolas, monospace;
  --ff-text-2xs:  10px;
  --ff-text-xs:   11px;
  --ff-text-sm:   12px;
  --ff-text-md:   13px;
  --ff-text-base: 14px;
  --ff-text-lg:   15px;
  --ff-text-xl:   17px;
  --ff-text-2xl:  22px;
  --ff-text-3xl:  24px;
  --ff-text-4xl:  26px;
  --ff-weight-light:    300;
  --ff-weight-normal:   400;
  --ff-weight-medium:   500;
  --ff-weight-semibold: 600;
  --ff-weight-bold:     700;
  --ff-weight-extra:    800;
  --ff-leading-tight:   1.25;
  --ff-leading-normal:  1.5;
  --ff-tracking-label:  .5px;

  /* ── DS: espaçamento ────────────────────────────────────── */
  --ff-space-1:   4px;
  --ff-space-2:   6px;
  --ff-space-3:   8px;
  --ff-space-4:  10px;
  --ff-space-5:  12px;
  --ff-space-6:  16px;
  --ff-space-7:  20px;
  --ff-space-8:  24px;
  --ff-space-9:  28px;
  --ff-space-10: 32px;
  --ff-space-12: 48px;

  /* ── DS: raios extras ───────────────────────────────────── */
  --ff-radius-sm:    6px;
  --ff-radius:       8px;
  --ff-radius-lg:    12px;
  --ff-radius-xl:    16px;
  --ff-radius-pill:  20px;
  --ff-radius-round: 50%;

  /* ── DS: sombras extras ─────────────────────────────────── */
  --ff-shadow-hover: 0 6px 20px rgba(0,0,0,.12);
  --ff-shadow-modal: 0 8px 32px rgba(0,0,0,.2);
  --ff-shadow-panel: -4px 0 18px rgba(0,0,0,.14);

  /* ── DS: bordas ─────────────────────────────────────────── */
  --ff-border-width:       1px;
  --ff-border-width-input: 1.5px;
  --ff-border-accent:      3px;
  --ff-border-metric:      4px;

  /* ── DS: layout ─────────────────────────────────────────── */
  --ff-content-pad: 28px;
  --ff-portal-max:  1100px;

  /* ── DS: motion ─────────────────────────────────────────── */
  --ff-transition-fast: .12s;
  --ff-transition:      .15s;
  --ff-transition-slow: .25s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--cinza-bg);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
}

/* Evita scroll horizontal acidental no mobile (qualquer elemento largo).
   `clip` em vez de `hidden`: corta o overflow horizontal SEM criar um container de
   rolagem — assim `position: sticky` (barra de filtros) continua colando no topo. */
html, body { max-width: 100%; overflow-x: clip; }

/* ── UTILITÁRIOS ─────────────────────────────────────────── */
.hidden { display: none !important; }

.app-version {
  position: fixed;
  bottom: 8px;
  right: 12px;
  z-index: 50;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-version .ver { font-size: 11px; color: var(--cinza-texto); opacity: .7; }
.beta-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #744210;
  background: var(--amarelo);
  padding: 1px 7px;
  border-radius: 20px;
}
.mt     { margin-top: 16px; }

.vagas-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.vagas-toolbar-label { font-size: 12px; font-weight: 600; color: var(--cinza-texto); }

.btn-icon-del {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--vermelho);
  font-size: 14px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
}
.btn-icon-del:hover { background: var(--vermelho-light); }

/* ── LOGIN ───────────────────────────────────────────────── */
#view-login,
#view-definir-senha {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% -10%, #2a9c68 0%, transparent 55%),
              linear-gradient(150deg, var(--verde-dark) 0%, var(--verde) 60%, #0f4a2c 100%);
}
/* Círculos entrelaçados decorativos (motivo do GFF) */
#view-login::before, #view-login::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  border: 44px solid rgba(255,255,255,.05);
}
#view-login::before { width: 360px; height: 360px; top: -110px; left: -120px; }
#view-login::after  { width: 300px; height: 300px; bottom: -110px; right: -110px; border-color: rgba(143,227,180,.10); }

.login-wrap {
  position: relative; z-index: 1;
  background: var(--branco);
  border-radius: 20px;
  padding: 40px 36px 34px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

.login-logo {
  text-align: center;
  margin-bottom: 18px;
}
.login-head { text-align: center; margin-bottom: 26px; }
.login-title { font-size: 21px; font-weight: 700; color: var(--texto); letter-spacing: -.3px; }
.login-sub-txt { font-size: 14px; color: var(--cinza-texto); margin-top: 4px; }
.input-ic { position: relative; }
.input-ic svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #9aa3af; pointer-events: none; }
.login-form .input-ic input { padding-left: 40px; }
.login-form .btn-primary.btn-full { background: linear-gradient(135deg, var(--verde) 0%, var(--verde-dark) 100%); box-shadow: 0 6px 18px rgba(20,92,55,.28); padding: 12px; font-weight: 600; border: none; }
.login-form .btn-primary.btn-full:hover { filter: brightness(1.06); }
@media (max-width: 480px) { .login-wrap { padding: 32px 22px 26px; } }

.logo-fresh {
  font-size: 28px;
  font-weight: 800;
  color: var(--verde);
  letter-spacing: -1px;
}

.logo-food {
  font-size: 28px;
  font-weight: 300;
  color: var(--texto);
  letter-spacing: -1px;
}

.logo-sub {
  display: block;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cinza-texto);
  margin-top: 4px;
}

/* ── LOGO oficial (imagem) ───────────────────────────────── */
.logo-img        { display: block; width: auto; height: 34px; }
.logo-img-login  { height: 56px; margin: 0 auto; }  /* login centralizado */
.logo-img-sm     { height: 26px; }                   /* topbar mobile */
.portal-brand    { display: flex; align-items: center; }
.portal-brand .logo-img { height: 30px; }
.nav-logo .logo-img     { height: 30px; }

/* ── Logo horizontal — Fresh Food Design System ────────── */
.brand-logo              { display: block; width: auto; }
.brand-logo--login       { height: 52px; margin: 0 auto; }
.brand-logo--topbar      { height: 36px; }
.brand-logo--sidebar     { height: 30px; max-width: 100%; }
.brand-logo--mobile      { height: 26px; }

.login-form .field {
  margin-bottom: 16px;
}

.login-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cinza-texto);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}

.login-form input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}

.login-form input:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(26,122,74,.13);
}

.form-erro {
  background: var(--vermelho-light);
  color: var(--vermelho);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}

.form-info {
  background: var(--verde-light);
  color: var(--verde-dark);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ── BOTÕES ──────────────────────────────────────────────── */
.btn-primary {
  background: var(--verde);
  color: var(--branco);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
}

.btn-primary:hover { background: var(--verde-dark); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: 6px 14px; font-size: 13px; }

.btn-secondary {
  background: var(--branco);
  color: var(--texto);
  border: 1.5px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s;
}

.btn-secondary:hover { border-color: var(--verde); }

.btn-link {
  background: none;
  border: none;
  color: var(--cinza-texto);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
}

.btn-back {
  background: none;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--cinza-texto);
}

.btn-back:hover { border-color: var(--verde); color: var(--verde); }

/* ── SHELL / SIDEBAR ─────────────────────────────────────── */
#shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--verde-dark);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
}

.nav-logo {
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
}

.nav-logo .logo-fresh { font-size: 20px; }
.nav-logo .logo-food  { font-size: 20px; }

.nav-links {
  list-style: none;
  padding: 12px 0;
  flex: 1;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: 14px;
  transition: all .15s;
  border-left: 3px solid transparent;
}

.nav-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.nav-link:hover {
  color: var(--branco);
  background: rgba(255,255,255,.08);
  border-left-color: var(--amarelo);
}
.nav-link.active,
.nav-link.is-active {
  color: var(--branco);
  background: rgba(255,255,255,.16);
  border-left-color: var(--amarelo);
  border-left-width: 4px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* Rede de segurança: 1ª letra maiúscula em botões (some com labels que começam
   minúsculos). Não afeta botões que começam com ícone/emoji. */
.btn-primary::first-letter, .btn-secondary::first-letter, .btn-danger::first-letter,
.btn-sm::first-letter, .btn-mini::first-letter, .btn-link::first-letter { text-transform: uppercase; }
/* Logo do topo clicável → home */
.portal-brand.is-home { cursor: pointer; }

/* Sidebar verde reaproveitada nas soluções (Benefícios etc.): itens são <button>.
   Fica FIXA na lateral (herda position:fixed de .sidebar); + estreita p/ sobrar
   espaço ao conteúdo. */
.sidebar.sol-sidebar { width: 196px; }
.sol-sidebar .nav-link { width: 100%; background: none; border: none; border-left: 3px solid transparent; cursor: pointer; font: inherit; font-size: 14px; text-align: left; }
.sol-sidebar .nav-link.is-active { background: rgba(255,255,255,.18); border-left: 4px solid var(--amarelo); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sol-sidebar .nav-group { padding: 14px 16px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.5); }
.sol-sidebar .nav-group--muted { margin-top: 6px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.sol-sidebar .nav-link.is-disabled { opacity: .45; cursor: default; }
.sol-sidebar .nav-link.is-disabled:hover { background: none; }
.sol-sidebar .nav-link .ind-soon { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,.16); vertical-align: middle; }
.sol-sidebar .nav-portal { cursor: pointer; }
.main-content.sol-main { margin-left: 196px; min-height: 100vh; padding: 26px 22px 40px; }
@media (max-width: 820px) {
  /* transform:none/box-shadow/z-index resetam o drawer de .sidebar (@768px) — sem
     isso a sol-sidebar herda translateX(-100%) e some da tela no celular, deixando
     as soluções (Premiações etc.) sem navegação (David, 04/08/2026). */
  .sidebar.sol-sidebar { position: static; width: 100%; height: auto; transform: none; box-shadow: none; z-index: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center; padding: 4px 10px; gap: 2px; }
  .sol-sidebar .nav-logo { padding: 6px 8px; border-bottom: none; }
  .sol-sidebar .brand-logo--sidebar { height: 20px; }
  .sol-sidebar .nav-portal { margin-left: auto; padding: 6px 10px; font-size: 13px; }
  .sol-sidebar .nav-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; }
  .sol-sidebar .nav-link { width: auto; border-left: none !important; padding: 7px 12px; font-size: 13px; border-radius: 8px; }
  .sol-sidebar .nav-link.is-active { background: rgba(255,255,255,.16); }
  .sol-sidebar .nav-group { flex-basis: 100%; padding: 6px 8px 0; }
  .sol-sidebar .nav-group--muted { margin-top: 0; padding-top: 8px; }
  .sol-sidebar .nav-footer { flex-basis: 100%; padding: 4px 8px 6px; margin-top: 0; font-size: 12px; }
  .main-content.sol-main { margin-left: 0; padding: 16px 14px 40px; min-height: 0; }
}

/* ── Responsivo geral do conteúdo das soluções no celular ─────────── */
@media (max-width: 640px) {
  .main-content.sol-main { padding: 14px 12px 40px; }
  .portal-title { font-size: 19px; }
  .portal-subtitle { margin-bottom: 16px; font-size: 13px; }
  .aval-head { gap: 10px; }
  .aval-head-actions { width: 100%; gap: 8px; }
  .aval-head-actions > * { flex: 1 1 auto; }
  .aval-head-actions select, .aval-head-actions .aval-input, .aval-input { width: 100%; min-width: 0; }
  .med-kpis, .med-faixas-painel { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .med-kpi { padding: 12px; }
  .med-kpi-val, .med-faixa-qtd, .vlk-rn { font-size: 19px; }
  .med-kpi-lbl { font-size: 11px; }
  .vlk-resumo { gap: 8px; }
  .vlk-rt { min-width: 0; flex: 1 1 42%; padding: 10px 12px; }
  .vlk-toggle { width: 100%; }
  .vlk-toggle-btn { flex: 1; font-size: 13px; padding: 8px 10px; text-align: center; }
  .vlk-limpar { width: 100%; }
  .vlk-tab { font-size: 12px; }
  .vlk-tab th, .vlk-tab td { padding: 8px 8px; }
}

.nav-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.6);
}

.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 28px;
  min-height: 100vh;
}

/* ── PAGE HEADER ─────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--texto);
  flex: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.input-busca, .input-date {
  padding: 8px 14px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: var(--branco);
  transition: border-color .15s;
}

.input-busca { width: 200px; }
.input-busca:focus, .input-date:focus { border-color: var(--verde); }

.select-sm {
  padding: 8px 12px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 8px;
  font-size: 13px;
  background: var(--branco);
  outline: none;
  cursor: pointer;
}

/* ── FILTRO DE PERÍODO (datas agrupadas) ─────────────────── */
.filtro-periodo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--branco);
  border: 1.5px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 3px 10px;
}
.filtro-periodo:focus-within { border-color: var(--verde); }
.filtro-periodo .input-date {
  border: none;
  padding: 5px 2px;
  border-radius: 0;
}
.filtro-periodo .input-date:focus { border: none; }
.filtro-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--cinza-texto);
}
.filtro-sep { font-size: 12px; color: var(--cinza-texto); }

/* Campo de data que abre o calendário ao clicar (sem digitação manual) */
.input-date-pick { cursor: pointer; }
.input-date-pick::-webkit-calendar-picker-indicator { cursor: pointer; }

/* ── CARDS ───────────────────────────────────────────────── */
.card {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--card-shadow);
}

.card h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 16px;
}

.card-desc {
  font-size: 13px;
  color: var(--cinza-texto);
  margin-bottom: 16px;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.card-head-row h2 { margin-bottom: 0; }

/* ── RESUMO CARDS (métricas) ─────────────────────────────── */
.resumo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.metrica {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--card-shadow);
  border-left: 4px solid var(--verde);
}

.metrica-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--cinza-texto);
  margin-bottom: 6px;
}

.metrica-valor {
  font-size: 26px;
  font-weight: 800;
  color: var(--texto);
  line-height: 1;
}

.metrica-sub {
  font-size: 11px;
  color: var(--cinza-texto);
  margin-top: 4px;
}

.metrica.alerta { border-left-color: var(--vermelho); }
.metrica.aviso  { border-left-color: var(--amarelo); }

/* ── LISTA DE LOJAS (linha horizontal) ───────────────────── */
/* Grid de colunas compartilhado entre o cabeçalho e cada linha.
   [Nome+Cidade] [Gerente] [Coordenador] [Atendente] [Vagas] [Fat/Colab] [Fat 30d] */
.lojas-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--branco);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow-x: auto;   /* nunca corta colunas: rola na horizontal em telas estreitas */
}

.loja-row-grid {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) 76px 96px 128px 108px 112px 116px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  min-width: 876px;   /* soma das colunas: abaixo disso a tabela rola em vez de cortar */
}

.lojas-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--verde-dark);
  color: rgba(255,255,255,.92);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;   /* cabeçalhos sempre numa linha só */
}
.lojas-head .col-num { text-align: center; }

.loja-row {
  cursor: pointer;
  border-bottom: 1px solid var(--cinza-borda);
  transition: background .12s;
  border-left: 3px solid transparent;
}
.loja-row:last-child { border-bottom: none; }
.loja-row:hover { background: var(--verde-light); }
.loja-row.vagas-abertas { border-left-color: var(--vermelho); }

.loja-row .col-nome { line-height: 1.25; }
.loja-row-nome {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto);
}
.loja-row-cidade {
  font-size: 11px;
  color: var(--cinza-texto);
}

.col-num {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto);
}
.col-num .ri-real  { color: var(--texto); }
.col-num .ri-sep   { color: var(--cinza-texto); font-weight: 400; margin: 0 1px; }
.col-num .ri-ideal { color: var(--cinza-texto); font-weight: 600; }
.col-num.deficit .ri-real { color: var(--vermelho); }

/* Rótulo de coluna inline — só aparece no layout mobile colapsado */
.col-cap { display: none; }

/* Badge de vagas na lista */
.vagas-badge {
  display: inline-block;
  background: var(--vermelho);
  color: var(--branco);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  min-width: 28px;
  text-align: center;
}
.vagas-zero { color: var(--cinza-texto); font-weight: 600; }

.col-fat { font-size: 13px; font-weight: 700; color: var(--texto); }
.col-fat.sub { font-weight: 600; color: var(--cinza-texto); }

.excedente-badge {
  display: inline-block;
  background: #fff3e0;
  color: #b45309;
  border: 1px solid #f0c27a;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  margin-left: 6px;
}

/* ── RANKING FATURAMENTO ─────────────────────────────────── */
.rank-table td { vertical-align: middle; }
.rank-sub { font-size: 11px; color: var(--cinza-texto); }
.rank-bar {
  position: relative;
  background: var(--cinza-bg);
  border-radius: 4px;
  height: 22px;
  min-width: 110px;
  overflow: hidden;
}
.rank-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; opacity: .45; }
.rank-bar span { position: relative; z-index: 1; font-size: 12px; font-weight: 600; padding: 0 6px; line-height: 22px; white-space: nowrap; }
.bar-dia   { background: var(--verde-mid); }
.bar-noite { background: #f5a623; }
.bar-tot   { background: #4a90d9; }

.q-val { font-weight: 700; }
.q-sep { color: var(--cinza-texto); font-weight: 400; }
.q-diff {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
}
.q-falta { background: var(--vermelho-light); color: var(--vermelho); }
.q-sobra { background: #fff3e0;               color: #b45309; }
.q-ok    { background: var(--verde-light);    color: var(--verde-dark); }

.rank-total td {
  background: var(--verde-light);
  font-weight: 700;
  border-top: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ── TABELAS ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

/* Cabeçalho de turno com totais embutidos (Real/Ideal/Vaga) */
.row-turno-head td {
  background: var(--cinza-bg);
  font-weight: 700;
  border-top: 1px solid var(--cinza-borda);
}
.row-turno-head .td-turno {
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 12px;
}
.row-total-geral td {
  background: var(--verde-light);
  color: var(--verde-dark);
  font-weight: 800;
  border-top: 2px solid var(--verde);
}
.row-turno-head td:hover, .row-total-geral td:hover { background: inherit; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--cinza-texto);
  border-bottom: 2px solid var(--cinza-borda);
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cinza-borda);
  color: var(--texto);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--cinza-bg); }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.badge-trabalhando  { background: var(--verde-light);   color: var(--verde-dark); }
.badge-ferias       { background: #e8f0ff;               color: #2563eb; }
.badge-doenca       { background: #fff8e1;               color: #b45309; }
.badge-doencaLonga  { background: var(--vermelho-light); color: var(--vermelho); }
.badge-admin        { background: var(--verde-light);     color: var(--verde-dark); }
.badge-viewer       { background: var(--cinza-bg);        color: var(--cinza-texto); border: 1px solid var(--cinza-borda); }

.senha-temp-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cinza-bg);
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.senha-temp-box code {
  flex: 1;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--verde-dark);
}

.turno-auto { font-size: 10px; color: var(--cinza-texto); font-style: italic; }
.turno-sel { padding: 2px 6px; min-width: 78px; }
.esc-input { padding: 2px 6px; width: 110px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 13px; }
.esc-input:focus { border-color: var(--verde); outline: none; }
.row-naoconta { opacity: .55; }

/* ── DETALHE LOJA ────────────────────────────────────────── */
.loja-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .loja-grid { grid-template-columns: 1fr; }
}

.chart-wrap {
  position: relative;
  height: 260px;
}

/* ── MAPA DE CALOR (canvas puro) ─────────────────────────── */
.heatmap-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.heatmap-wrap canvas { display: block; max-width: 100%; }
.heatmap-vazio {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.92); color: var(--cinza-texto, #6b7280);
  font-size: 13px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--cinza-borda, #e2e6ea); white-space: nowrap; pointer-events: none;
}

.heatmap-tooltip {
  position: absolute;
  z-index: 300;
  background: rgba(26,31,46,.95);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.heatmap-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--cinza-texto);
}
.heatmap-legenda .leg-item { display: inline-flex; align-items: center; gap: 6px; }
.heatmap-legenda .leg-box {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--branco);
}
.heatmap-legenda .leg-sobrecarga { border: 2px solid var(--vermelho); }
.heatmap-legenda .leg-ociosidade { border: 2px solid #4a90d9; }
.heatmap-legenda .leg-boneco {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px var(--cinza-borda);
}
.heatmap-legenda .leg-titulo { font-weight: 600; color: var(--cinza-texto); }

.demanda-info {
  margin-top: 10px;
  font-size: 13px;
  color: var(--cinza-texto);
}
.demanda-info strong { color: var(--texto); }
.demanda-obs { font-size: 12px; font-style: italic; }

/* ── AVISO DE FLAGS ──────────────────────────────────────── */
.flags-aviso {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ── SYNC ────────────────────────────────────────────────── */
.sync-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#sync-status-box {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

#sync-ultimo {
  flex: 1;
  font-size: 13px;
  color: var(--cinza-texto);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--cinza-borda);
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

#sync-progress {
  text-align: center;
  color: var(--cinza-texto);
  font-size: 13px;
}

.sync-row {
  display: grid;
  grid-template-columns: 140px 100px 80px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cinza-borda);
  font-size: 13px;
  align-items: center;
}

.sync-row:last-child { border-bottom: none; }

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.status-sucesso { background: var(--verde-light); color: var(--verde-dark); }
.status-erro    { background: var(--vermelho-light); color: var(--vermelho); }
.status-em_andamento { background: #fff8e1; color: #b45309; }

.btn-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ── ADMIN ───────────────────────────────────────────────── */
.flag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--cinza-borda);
}

.flag-row:last-child { border-bottom: none; }

.flag-info { flex: 1; }
.flag-label { font-size: 14px; font-weight: 500; }
.flag-desc  { font-size: 12px; color: var(--cinza-texto); }

/* Toggle switch */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle input { display: none; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--cinza-borda);
  border-radius: 24px;
  cursor: pointer;
  transition: background .2s;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  background: var(--branco);
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.toggle input:checked + .toggle-slider { background: var(--verde); }
.toggle input:checked + .toggle-slider::after { transform: translateX(20px); }

.turno-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cinza-borda);
}

.turno-row:last-child { border-bottom: none; }

.turno-nome { font-size: 14px; font-weight: 600; width: 100px; }
.admin-subhead { font-size: 15px; font-weight: 700; margin: 22px 0 4px; }
.turno-grupo {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--verde-dark); margin: 12px 0 2px;
}

.hora-input {
  width: 70px;
  padding: 6px 10px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

/* ── MODAL ───────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;            /* nunca encosta nas bordas da tela */
}

.modal-box {
  background: var(--branco);
  border-radius: 12px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;         /* cabe na viewport */
  overflow-y: auto;         /* rola por dentro quando passa */
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}

.modal-box h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 20px;
}

.modal-box .field {
  margin-bottom: 14px;
}

.modal-box label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cinza-texto);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}

.modal-box input,
.modal-box select,
.modal-box textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 7px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  resize: vertical;
}

.modal-box input:focus,
.modal-box select:focus,
.modal-box textarea:focus { border-color: var(--verde); }

.vaga-obs { min-width: 150px; }


/* Dropdown de dias da semana (5x2/6x1) na lista nominal */
.dias-dd { position: relative; display: inline-block; }
.dias-dd-btn {
  font-size: 12px; font-family: var(--ff-font); white-space: nowrap;
  padding: 3px 8px; border-radius: var(--ff-radius);
  border: 1.5px solid var(--ff-border); background: var(--ff-white);
  color: var(--ff-text); cursor: pointer;
}
.dias-dd-btn:hover { border-color: var(--ff-green); }
.dias-dd-panel {
  position: absolute; z-index: 200; top: calc(100% + 4px); left: 0;
  background: var(--ff-white); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-md); box-shadow: var(--ff-shadow-modal);
  padding: 6px; min-width: 130px;
}
.dias-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; cursor: pointer; font-size: 13px; border-radius: 4px;
  user-select: none;
}
.dias-dd-item:hover { background: var(--ff-green-light); }
.dias-dd-item input { accent-color: var(--ff-green); cursor: pointer; margin: 0; }
.dias-dd-item:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.dias-dd-item input:disabled { cursor: not-allowed; }

/* Modal de configurações de horário da loja */
.modal-box-lg { max-width: 560px; padding: 22px 22px 0; }
.modal-box-lg h3 { margin-bottom: 6px; }
.modal-box-lg > .card-desc { margin-bottom: 14px; }
.hf-group { border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 8px 12px 2px; margin-bottom: 10px; }
.hf-group legend { font-size: 11px; font-weight: 700; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: .5px; padding: 0 6px; }
.hf-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hf-row .field { flex: 1; min-width: 90px; margin-bottom: 8px; }
/* Linha "rótulo | Início | Fim" para cada turno/escala */
.hf-jrow { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 7px; }
.hf-jlabel { flex: 1; min-width: 110px; font-size: 13px; font-weight: 600; padding-bottom: 8px; }
.hf-jfield { display: flex; flex-direction: column; }
.hf-jfield label { font-size: 10px; margin-bottom: 2px; }
.hf-jfield select { min-width: 74px; padding: 6px 8px; }
@media (max-width: 560px) {
  .hf-jrow { flex-wrap: wrap; }
  .hf-jlabel { flex-basis: 100%; padding-bottom: 0; }
}
.hf-preview { background: var(--cinza-bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.hf-preview-titulo { font-size: 11px; font-weight: 700; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
#hf-preview-body { max-height: 168px; overflow-y: auto; }
.rtable-mini th, .rtable-mini td { padding: 3px 8px; font-size: 12px; }
.rtable-mini thead th { position: sticky; top: 0; background: var(--cinza-bg); }
/* Barra de ações fixa no rodapé do modal de config */
.modal-box-lg .modal-actions {
  position: sticky; bottom: 0; background: var(--branco);
  padding: 12px 0; margin-top: 4px; border-top: 1px solid var(--cinza-borda);
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ── ESTADO VAZIO ────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--cinza-texto);
}

.empty-state p { font-size: 14px; margin-top: 8px; }

/* ── ELEMENTOS MOBILE (ocultos no desktop) ───────────────── */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }
.col-quadro-mobile { display: none; }

.hamburger {
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--branco);
  border-radius: 2px;
}

.mobile-brand .logo-fresh,
.mobile-brand .logo-food { font-size: 18px; }

/* ── RESPONSIVIDADE: TABLET (≤ 768px) ────────────────────── */
@media (max-width: 768px) {
  /* Barra superior fixa com hamburguer */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    padding: 0 12px;
    background: var(--verde-dark);
    z-index: 150;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
  }

  /* Sidebar vira drawer deslizante (oculta por padrão) */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 160;
    box-shadow: 2px 0 16px rgba(0,0,0,.3);
  }
  #shell.sidebar-open .sidebar { transform: translateX(0); }

  /* Backdrop por trás do drawer aberto */
  #shell.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 140;
  }

  /* Conteúdo ocupa toda a largura, abaixo da topbar */
  .main-content {
    margin-left: 0;
    padding: 64px 14px 24px;
  }

  /* Filtros do header em 100% da largura, empilhados */
  .header-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .header-actions .input-busca,
  .header-actions .select-sm { width: 100%; }
  .page-header h1 { flex: 1 1 100%; }
  /* Grupo de período ocupa a largura toda; datas dividem a linha */
  .filtro-periodo { width: 100%; flex-wrap: wrap; }
  .filtro-periodo .input-date { flex: 1 1 38%; min-width: 120px; }
  /* Seletor de mês do detalhe da loja (fora de .header-actions) */
  .page-header > .select-sm { width: 100%; }

  /* Detalhe da loja: cards empilham */
  .loja-grid { grid-template-columns: 1fr; }

  /* ── Lista do dashboard vira CARDS com tiles 2×2 ──
     Cada loja é um card: nome no topo (linha inteira) + 4 indicadores
     (Quadro, Vagas, Fat/Colab, Fat 30d) em mini-tiles de 2 colunas. */
  .lojas-head { display: none; }

  .lojas-grid {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    gap: 10px;
  }

  .loja-row {
    background: var(--branco);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    border-bottom: none;
    border-left: 4px solid transparent;
  }
  .loja-row.vagas-abertas { border-left-color: var(--vermelho); }

  .loja-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px;
  }

  .col-nome { grid-column: 1 / -1; margin-bottom: 2px; min-width: 0; }
  .loja-row-nome   { font-size: 15px; }
  .loja-row-cidade { font-size: 12px; }

  .loja-row .col-cargo { display: none; }

  /* Mini-tiles: rótulo em cima, valor embaixo */
  .loja-row .col-quadro-mobile,
  .loja-row-grid > .col-num:not(.col-cargo),
  .loja-row-grid > .col-fat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    background: var(--cinza-bg);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .col-fat.sub { color: var(--cinza-texto); }

  .col-cap {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--cinza-texto);
  }

  .loja-row .vagas-badge { font-size: 15px; padding: 1px 10px; }
  .loja-row .vagas-zero  { font-size: 15px; }

  /* ── Tabelas densas viram cards empilhados (1 card por linha) ──
     Cada <td data-label="..."> mostra o rótulo à esquerda e o valor à direita.
     Evita o "encolhe e corta" das tabelas largas no celular. */
  .table-wrap { overflow-x: visible; }

  table.rtable,
  table.rtable tbody,
  table.rtable tr,
  table.rtable td { display: block; width: 100%; }

  table.rtable thead { display: none; }

  table.rtable tr {
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 4px 12px;
    margin-bottom: 10px;
    box-shadow: var(--card-shadow);
  }
  table.rtable tr:hover td { background: transparent; }

  table.rtable td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cinza-borda);
    text-align: right;
  }
  table.rtable tr td:last-child { border-bottom: none; }

  table.rtable td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--cinza-texto);
    text-align: left;
  }
  table.rtable td[data-label=""]::before,
  table.rtable td:not([data-label])::before { content: none; }

  /* Selects (turno/escala) preenchem o lado direito */
  table.rtable td .select-sm { width: auto; min-width: 130px; max-width: 60%; }

  /* Linha de seção (turno) — faixa de destaque, sem rótulo */
  table.rtable td.row-section {
    background: var(--verde-light);
    color: var(--verde-dark);
    justify-content: flex-start;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 2px -12px 6px;
    padding: 8px 12px;
    border-bottom: none;
    border-radius: 0;
  }
  table.rtable td.row-section::before { content: none; }

  /* Coluna "#" do ranking é dispensável no card mobile */
  table.rtable td.col-rank { display: none; }

  /* Total da rede no ranking: sem sticky no mobile, destaque verde */
  table.rtable .rank-total td { position: static; background: var(--verde-light); }

  /* Barras do ranking ocupam o lado direito sem largura fixa */
  table.rtable .rank-bar { min-width: 130px; max-width: 60%; }

  /* Gráficos um pouco menores */
  .chart-wrap { height: 240px; }
}

/* ── RESPONSIVIDADE: MOBILE PEQUENO (≤ 480px) ────────────── */
@media (max-width: 480px) {
  .main-content { padding: 60px 10px 20px; }
  .card { padding: 14px; }
  .page-header h1 { font-size: 19px; }
  .resumo-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .metrica { padding: 12px 14px; }
  .metrica-valor { font-size: 22px; }
  .chart-wrap { height: 220px; }
}

/* ── PORTAL (home de soluções) ───────────────────────────── */
#view-portal {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cinza-bg);
}
.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding-top respeita o notch/barra de status do iPhone (safe-area) */
  padding: calc(16px + env(safe-area-inset-top, 0px)) 28px 16px;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
}
.portal-brand .logo-fresh,
.portal-brand .logo-food { font-size: 22px; }
.portal-brand .logo-sub { display: inline; margin-left: 8px; }
.portal-back {
  text-decoration: none;
  color: var(--cinza-texto);
  font-size: 22px;
  line-height: 1;
  margin-right: 4px;
}
.portal-back:hover { color: var(--texto); }
.portal-user {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--cinza-texto);
}
.portal-main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 28px;
}
.portal-title { font-size: 24px; font-weight: 700; }
.portal-subtitle { color: var(--cinza-texto); margin-bottom: 28px; }
.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.portal-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 24px;
  cursor: pointer;
  font-family: var(--font);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.portal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  border-color: var(--verde-mid);
}
.portal-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--verde-light);
}
.portal-card-icon svg {
  width: 24px; height: 24px;
  stroke: var(--verde); fill: none; stroke-width: 2;
}
.portal-card-emoji { font-size: 30px; line-height: 1; }
/* Aplicação embutida (card do Diego rodando dentro do portal) */
#view-app-externo:not(.hidden) { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--branco, #fff); z-index: 60; }
.appx-bar { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--cinza-borda, #e5e7eb); background: var(--cinza-bg, #f7f8f9); flex: none; }
.appx-titulo { font-weight: 700; font-size: 15px; color: var(--texto); flex: 1; }
.appx-frame { flex: 1; width: 100%; border: 0; }
.portal-card--ext .portal-card-icon { color: var(--verde, #1a7a4a); }
.portal-ext-tag { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1d6a8a; background: #e3f2f7; border-radius: 6px; padding: 1px 6px; }
.portal-card-titulo { font-size: 16px; font-weight: 700; color: var(--texto); }
.portal-card-desc { font-size: 13px; color: var(--cinza-texto); line-height: 1.5; }

/* Link "Portal" na sidebar do quadro */
.nav-portal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: color .15s, background .15s;
}
.nav-portal svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
.nav-portal:hover { color: var(--branco); background: rgba(255,255,255,.08); }

@media (max-width: 480px) {
  .portal-main { padding: 28px 16px; }
  .portal-topbar { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px; }
}
/* Header global no celular: não deixa o nome/perfil/Sair estourarem pra fora */
@media (max-width: 560px) {
  .portal-topbar { padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; gap: 8px; flex-wrap: nowrap; }
  .portal-brand { min-width: 0; }
  .brand-logo--topbar { height: 26px; }
  .portal-topbar .logo-sub { display: none; }              /* esconde "Portal/Admin/..." */
  .portal-user { gap: 10px; font-size: 12px; min-width: 0; flex-shrink: 0; }
  .portal-user span[id$="user-nome"] { display: none; }    /* esconde o nome (aparece no perfil) */
  .portal-user .btn-link { padding: 4px 3px; white-space: nowrap; }
}

/* ── Changelog (sino + painel lateral) ──────────────────── */
.btn-changelog {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 8px;
}
.changelog-badge {
  position: absolute;
  top: 0; right: 0;
  background: var(--vermelho);
  color: #fff;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-sizing: border-box;
}
.changelog-panel {
  position: fixed;
  top: 0; right: 0;
  width: 380px;
  max-width: 100vw;
  height: 100vh;
  background: var(--branco);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.changelog-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cinza-borda);
  font-weight: 600;
  color: var(--texto);
}
.changelog-panel-header button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--cinza-texto);
  line-height: 1;
}
.changelog-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.changelog-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cinza-borda);
}
.changelog-item:last-child { border-bottom: none; }
.changelog-item-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.changelog-version { font-weight: 600; font-size: 0.85rem; color: var(--cinza-texto); }
.changelog-date { font-size: 0.8rem; color: var(--cinza-texto); }
.changelog-prefix {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}
.changelog-prefix-user { background: #c6f6d5; color: #276749; }
.changelog-prefix-fix  { background: #fefcbf; color: #744210; }
.changelog-prefix-tech { background: #e2e8f0; color: #4a5568; }
.changelog-message { font-size: 0.9rem; line-height: 1.5; color: var(--texto); }
.changelog-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 999;
}
.changelog-loading { color: var(--cinza-texto); font-size: 0.9rem; }

/* ─────────────────────────────────────────────────────────
   Módulo Colaboradores (solução /colaboradores)
   ───────────────────────────────────────────────────────── */

/* Botão de ação destrutiva (desligamento) */
.btn-danger {
  background: var(--vermelho);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s;
}
.btn-danger:hover { filter: brightness(.93); }

/* Barra de filtros */
.filtros-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.filtros-bar .input-busca { width: 280px; max-width: 100%; }

/* Resumo (contadores por status) */
.colab-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--cinza-borda);
  color: var(--cinza-texto);
}
.colab-stat { display: inline-flex; align-items: center; gap: 6px; }
.colab-stat strong { color: var(--texto); font-size: 16px; }
.colab-vazio { color: var(--cinza-texto); padding: 18px 4px; text-align: center; }

/* Tabela de colaboradores */
.colab-table { width: 100%; border-collapse: collapse; }
.colab-table th, .colab-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cinza-borda);
}
.colab-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--cinza-texto);
}
.colab-table tbody tr { cursor: pointer; transition: background .12s; }
.colab-table tbody tr:hover { background: var(--verde-light); }
.tag-vaga {
  font-size: 11px;
  background: var(--amarelo);
  color: #5c4a00;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.tag-cedido { font-size: 11px; background: #fdebd0; color: #9a5b00; padding: 1px 6px; border-radius: 10px; font-weight: 600; cursor: help; white-space: nowrap; }
.tag-sumiu { font-size: 11px; background: var(--ff-red-light, #fdecea); color: var(--ff-red, #c0392b); padding: 1px 7px; border-radius: 10px; font-weight: 700; cursor: help; white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; }
.tag-aviso { font-size: 11px; background: #fff3e0; color: #b45309; padding: 1px 7px; border-radius: 10px; font-weight: 600; cursor: help; white-space: nowrap; }
.tag-aviso-vencido { font-size: 11px; background: #fdecea; color: #c0392b; padding: 1px 7px; border-radius: 10px; font-weight: 700; cursor: help; white-space: nowrap; border: 1px solid #f5c6cb; }
.tag-transf { font-size: 11px; background: #e6f1fb; color: #185fa5; padding: 1px 7px; border-radius: 10px; font-weight: 600; cursor: help; white-space: nowrap; }
.ficha-aviso { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px; background: #fff8ec; border: 1px solid #f4d9a8; border-left: 3px solid #e08a00; border-radius: 8px; font-size: 14px; color: var(--ff-text, #333); }
.ficha-aviso.is-transf { background: #eef5fc; border-color: #b5d4f4; border-left-color: #185fa5; }
/* Ação discreta de marcar transferência p/ quem NÃO está em aviso — não é alerta,
   então sem fundo/borda: só uma linha secundária com o botão em texto. */
.ficha-transf-acao { margin: 0 0 16px; font-size: 13px; color: var(--ff-muted, #6b7280); }
.ficha-transf-acao button { background: none; border: none; padding: 0; font-size: 13px; font-family: inherit; color: #185fa5; text-decoration: underline; cursor: pointer; }
.ficha-transf-acao button:hover { color: #0f4275; }
/* Aviso do Domínio removido na ficha (mig 051): nota discreta com o desfazer. */
.ficha-aviso-removido { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -8px 0 16px; padding: 10px 14px; background: #f3f4f2; border: 1px dashed #c9cfc9; border-radius: 8px; font-size: 13px; color: var(--ff-muted, #6b7280); }
.ficha-aviso-removido b { color: var(--ff-text, #333); }
.transf-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -8px 0 16px; padding: 10px 16px; background: #f4f9ff; border: 1px solid #cfe2f7; border-radius: 8px; }
.transf-form select, .transf-form input[type=date] { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; }
/* Painel "Em transferência" no topo da lista de colaboradores */
.transf-panel { margin: 14px 0 0; padding: 12px 16px; background: #eef5fc; border: 1px solid #b5d4f4; border-left: 3px solid #185fa5; border-radius: 8px; }
.transf-panel-head { font-size: 13px; font-weight: 700; color: #185fa5; margin-bottom: 8px; letter-spacing: .02em; }
.transf-count { display: inline-block; background: #185fa5; color: #fff; border-radius: 10px; padding: 0 8px; font-size: 12px; margin-left: 4px; }
.transf-alerta { color: #b42318; font-weight: 700; }
.transf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid #dce9f7; }
.transf-row.is-atrasada { background: #fff4f2; margin: 0 -16px; padding: 8px 16px; border-top-color: #f4c7c0; }
.transf-info b { font-size: 14px; color: var(--ff-text, #333); }
.transf-meta { display: block; font-size: 12px; color: #667085; margin-top: 2px; }
.transf-acao { display: flex; gap: 8px; align-items: center; }
.transf-acao select { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; max-width: 220px; }
.transf-badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.transf-badge.aviso { background: #fff8ec; color: #b06a00; }
.transf-badge.trans { background: #e6f1fb; color: #185fa5; }
.transf-badge.atrasada { background: #fde7e3; color: #b42318; }
.benef-aviso-alerta { margin: 4px 0 14px; padding: 12px 16px; background: #fff8ec; border: 1px solid #f4d9a8; border-left: 3px solid #e08a00; border-radius: 8px; }
.benef-aviso-cab { font-size: 14px; color: var(--ff-text, #333); }
.benef-aviso-lista { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--ff-text-muted, #6b7280); columns: 2; }
.benef-aviso-lista li { margin: 2px 0; break-inside: avoid; }
@media (max-width: 640px) { .benef-aviso-lista { columns: 1; } }
.tag-ferias { font-size: 11px; background: var(--ff-blue-bg, #e8f0ff); color: var(--ff-blue-fg, #2563eb); padding: 1px 7px; border-radius: 10px; font-weight: 600; cursor: help; white-space: nowrap; }
.tag-ferias.on { background: var(--ff-amber-bg, #fff3e0); color: var(--ff-amber-fg, #b45309); }
.sumiu-chk { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 11px; color: var(--ff-text-muted, #6b7280); cursor: pointer; white-space: nowrap; user-select: none; }
.sumiu-chk input { accent-color: var(--ff-red, #c0392b); cursor: pointer; margin: 0; }
.sumiu-chk.on { color: var(--ff-red, #c0392b); font-weight: 700; }
/* Salário oculto na ficha (clica p/ revelar) */
.salario-mask { cursor: pointer; user-select: none; }
.salario-mask .salario-link { font-style: normal; color: var(--ff-green, #1a7a4a); font-size: 11px; font-weight: 600; }
.salario-mask.revelado { cursor: default; }
/* Badge de situação no histórico de movimentações */
.mov-sit { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--ff-bg, #f4f6f8); color: var(--ff-text-muted, #6b7280); }
.mov-sit.mov-ok  { background: var(--ff-green-light, #e8f5ee); color: var(--ff-green-dark, #145c37); }
.mov-sit.mov-sai { background: var(--ff-red-light, #fdecea); color: var(--ff-red, #c0392b); }
.mov-sit.mov-fer { background: var(--ff-blue-bg, #e8f0ff); color: var(--ff-blue-fg, #2563eb); }

/* ── Gestão de Benefícios ───────────────────────────────── */
.benef-panel { margin-top: 4px; }
.benef-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--ff-radius-pill, 20px); }
.benef-badge.benef-va { background: var(--ff-green-light, #e8f5ee); color: var(--ff-green-dark, #145c37); }
.benef-badge.benef-vt { background: var(--ff-blue-bg, #e8f0ff); color: var(--ff-blue-fg, #2563eb); }
.benef-valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }
.benef-valor.conf-pend { text-align: right; }
.benef-warn { color: var(--ff-red, #c0392b); font-size: 11px; font-weight: 600; }
.benef-calc-bar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 4px 0 14px; }
.benef-calc-bar label { font-size: 12px; color: var(--ff-text-muted, #6b7280); display: flex; flex-direction: column; gap: 4px; }
.benef-resumo { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.benef-kpi { background: var(--ff-bg, #f4f6f8); border: 1px solid var(--ff-border, #dde1e7); border-radius: var(--ff-radius, 8px); padding: 10px 16px; min-width: 120px; }
.benef-kpi-lbl { display: block; font-size: 11px; color: var(--ff-text-muted, #6b7280); text-transform: uppercase; letter-spacing: .5px; }
.benef-kpi-val { display: block; font-size: 20px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.benef-tipo { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.benef-tipo-fixo { background: var(--ff-green-light, #e8f5ee); color: var(--ff-green-dark, #145c37); }
.benef-tipo-dia { background: var(--ff-warn-bg, #fff3cd); color: var(--ff-warn-fg, #856404); }
.benef-obs { font-size: 10px; font-weight: 600; color: var(--ff-text-muted, #6b7280); background: var(--ff-bg, #f4f6f8); padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.benef-falta { font-size: 10px; font-weight: 600; color: var(--ff-red, #c0392b); background: #fdecea; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.benef-semat { font-size: 10px; font-weight: 700; color: #b45309; background: #fdf3e3; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.benef-verdoc { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--ff-green, #1a7a4a); text-decoration: none; white-space: nowrap; }
.benef-verdoc:hover { text-decoration: underline; }
.benef-row-carencia td { opacity: .6; }
.benef-row-click { cursor: pointer; transition: background .12s; }
.benef-row-click:hover td { background: var(--ff-bg, #f4f6f8); }
.benef-row-click:hover .lnk-nome { color: var(--ff-green-dark, #14613a); }
.benef-row-pend td { background: #fdecea; }
.benef-row-proj td { background: #eaf1fd; font-style: italic; }
.benef-row-click:hover td { background: var(--ff-green-light, #e8f5ee); }
.bdet-cab { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ff-border, #dde1e7); color: var(--ff-text-muted, #6b7280); }
.bdet-bloco { margin-bottom: 16px; }
.bdet-bloco h4 { font-size: 14px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.bdet-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.bdet-tab td { padding: 6px 8px; border-bottom: 1px solid var(--ff-border, #dde1e7); vertical-align: top; }
.bdet-tab td:first-child { color: var(--ff-text-muted, #6b7280); white-space: nowrap; width: 38%; }
.bdet-tab tr.bdet-total td { font-weight: 700; border-bottom: none; color: var(--ff-text, #1a1f2e); }
.bdet-seg { width: 100%; border-collapse: collapse; }
.bdet-seg td { padding: 3px 8px 3px 0; border: none; font-size: 12.5px; }
.bdet-seg td:first-child { color: var(--ff-text); width: auto; white-space: nowrap; }
.benef-flash-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px; margin: 4px 0 12px; background: var(--ff-bg, #f4f6f8); border: 1px solid var(--ff-border, #dde1e7); border-radius: var(--ff-radius, 8px); font-size: 13px; }
.benef-flash-bar label { display: flex; align-items: center; gap: 4px; color: var(--ff-text-muted, #6b7280); }
.benef-flash-sep { flex-basis: 100%; height: 0; }

/* Barra de ações + menus recolhidos (Cálculo & Fechamento) */
.benef-acoes-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; }
.benef-menu { position: relative; }
.benef-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.benef-menu > summary::-webkit-details-marker { display: none; }
.benef-menu-body { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--ff-white, #fff); border: 1px solid var(--ff-border, #dde1e7); border-radius: var(--ff-radius, 8px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.benef-menu-right .benef-menu-body { left: auto; right: 0; }
.benef-menu-wide { min-width: 320px; }
.benef-menu-wide label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ff-text-muted, #6b7280); }
.benef-menu-sep { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ff-text-muted, #6b7280); border-top: 1px solid var(--ff-border, #dde1e7); padding-top: 8px; margin-top: 2px; }
.benef-menu-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
/* Grupos de checkbox (Dia / Área / Benefício) como chips */
.benef-fopt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.benef-fopt-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ff-text-muted, #6b7280); min-width: 64px; }
.benef-chipck { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 11px; border: 1px solid var(--ff-border, #dde1e7); border-radius: 20px; cursor: pointer; user-select: none; }
.benef-chipck input { accent-color: var(--ff-green, #1a7a4a); margin: 0; width: 15px; height: 15px; }
.benef-chipck:has(input:checked) { background: var(--ff-green-light, #e8f5ee); border-color: var(--ff-green, #1a7a4a); color: var(--ff-green-dark, #14663d); font-weight: 600; }
/* Seleção de lojas dentro do menu: ocupa a largura toda + texto legível */
.benef-menu-wide .ms-host { min-width: 0; width: 100%; display: block; }
.benef-menu-wide .ms-btn { width: 100%; }
.ms-item span { color: var(--ff-text, #1a1f2e); }

/* Cedidos — confirmação de lotação */
.ced-status { line-height: 1.35; }
.ced-ok { color: var(--ff-green-dark, #14663d); font-weight: 600; }
.ced-sub { display: block; font-size: 11px; color: var(--ff-text-muted, #6b7280); }
.ced-pend { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 20px; background: #fff3e0; color: #b45309; }
.ced-semloja { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 20px; background: #fdecec; color: #d64545; }
.ced-row-pend { background: #fffdf7; }
.benef-adm-cadastro { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ff-border, #dde1e7); font-size: 13px; }
.benef-adm-cadastro label { display: flex; align-items: center; gap: 4px; color: var(--ff-text-muted, #6b7280); }
.benef-adm-cad-lbl { font-weight: 600; color: var(--ff-text, #333); }
.benef-adm-total { font-size: 13px; color: var(--ff-text); }
.adm-optout { opacity: .5; }
.ap-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.est-prazo { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; background: var(--verde-light, #e7f3ec); color: var(--verde-dark, #1a7a4a); }
.est-prazo-aten { background: #fff3e0; color: #b45309; }
.est-prazo-urg  { background: #fde9e9; color: #c0392b; }
.est-prazo-hoje { background: #d64545; color: #fff; }
.est-sub { font-size: 11px; color: var(--ff-text-muted, #6b7280); font-weight: 400; }
.est-ref { color: var(--ff-text-muted, #6b7280); }
.est-nada { color: #c7cbd1; }
.est-provavel { display: inline-block; font-size: 12px; font-weight: 700; color: #b45309; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; padding: 2px 8px; cursor: help; }
.est-conf { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #9a3412; background: #ffedd5; border: 1px solid #fdba74; border-radius: 8px; padding: 2px 8px; cursor: help; }
.est-aviso { display: inline-block; font-size: 10.5px; font-weight: 700; color: #1d4ed8; background: #e0e7ff; border: 1px solid #a5b4fc; border-radius: 8px; padding: 1px 7px; cursor: help; white-space: nowrap; }
.est-row-ref { background: #fafafa; }
.est-row-ref td:first-child { color: var(--ff-text-muted, #6b7280); }
.est-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; user-select: none; }
.est-chk input { accent-color: var(--ff-green, #1a7a4a); width: 16px; height: 16px; cursor: pointer; }
.est-flag-cell { white-space: nowrap; }
.est-chk-saldo { display: flex; margin-top: 6px; font-size: 12px; color: #92400e; }
.est-chk-saldo input { accent-color: #d1971f; }
.est-row-saldo td { background: #fdf6e7; }
.est-sel-col { width: 34px; text-align: center; padding-left: 6px; padding-right: 6px; }
.est-sel-col input { cursor: pointer; }
.est-row-done { background: #f3faf5; }
.est-row-done td { color: var(--ff-text-muted, #6b7280); }

/* Checklist Domínio (aba admin em Colaboradores) */
.cd-panel { max-width: 760px; margin-top: 8px; }
.cd-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--verde, #1a7a4a); font-weight: 600; margin: 0 0 6px; }
.cd-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.cd-sub { color: var(--ff-text-muted, #6b7280); margin: 8px 0 0; max-width: 62ch; font-size: 14px; }
.cd-bar-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.cd-track { flex: 1; height: 8px; border-radius: 99px; background: var(--ff-border, #e2e9e3); overflow: hidden; }
.cd-fill { height: 100%; width: 0; background: var(--verde, #1a7a4a); border-radius: 99px; transition: width .35s ease; }
.cd-count { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: var(--verde-dark, #145c37); white-space: nowrap; }
.cd-flow { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 4px; padding: 12px 16px; background: var(--ff-bg, #f4f6f8); border: 1px solid var(--ff-border, #e2e9e3); border-radius: 10px; font-size: 13px; color: var(--ff-text-muted, #6b7280); }
.cd-step { display: inline-flex; align-items: center; gap: 7px; }
.cd-flow b { color: var(--ff-text, #182420); font-weight: 600; }
.cd-n { display: inline-flex; width: 19px; height: 19px; align-items: center; justify-content: center; border-radius: 50%; background: var(--verde, #1a7a4a); color: #fff; font-size: 11px; font-weight: 700; }
.cd-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cd-item { display: flex; gap: 14px; align-items: flex-start; background: var(--ff-white, #fff); border: 1px solid var(--ff-border, #e2e9e3); border-radius: 12px; padding: 15px 18px; cursor: pointer; transition: background .2s, border-color .2s; }
.cd-item:has(input:checked) { background: var(--verde-light, #eaf5ee); border-color: #c3e3cf; }
.cd-item > input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: none; margin: 1px 0 0; border: 2px solid #c2cfc6; border-radius: 7px; background: #fff; cursor: pointer; position: relative; }
.cd-item > input:checked { background: var(--verde, #1a7a4a); border-color: var(--verde, #1a7a4a); }
.cd-item > input:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); }
.cd-name { font-size: 15.5px; font-weight: 600; margin: 0; }
.cd-rep { font-size: 12px; color: var(--ff-text-muted, #6b7280); margin: 2px 0 0; }
.cd-rep code { background: #eef3ef; padding: 1px 6px; border-radius: 5px; font-size: 11.5px; color: var(--verde-dark, #145c37); }
.cd-meta { font-size: 13px; color: var(--ff-text-muted, #6b7280); margin: 8px 0 0; }
.cd-meta b { color: var(--ff-text, #182420); font-weight: 600; }
.cd-tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 99px; vertical-align: middle; margin-left: 6px; }
.cd-ok { background: #e7f2ec; color: var(--verde-dark, #145c37); }
.cd-prep { background: #eef1f4; color: #5b6570; }
.cd-todo { background: #fbf1de; color: #b9791b; }
.cd-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.cd-note { font-size: 13px; color: var(--ff-text-muted, #6b7280); margin: 0; }
.est-flag { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 20px; background: #eef1f4; color: #6b7280; vertical-align: middle; }
.adm-optout .benef-valor { text-decoration: line-through; }
/* Preview de pagamento Flash (conferência antes de baixar) */
.prev-cards { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.prev-card { flex: 1; min-width: 140px; background: var(--ff-white); border: 1px solid var(--ff-border); border-left: 3px solid var(--ff-border); border-radius: var(--ff-radius); padding: 10px 14px; }
.prev-card--vt  { border-left-color: var(--ff-blue-fg); }
.prev-card--va  { border-left-color: var(--ff-green); }
.prev-card--tot { border-left-color: var(--ff-text); background: var(--ff-bg); }
.prev-card-lbl { display: block; font-size: 10.5px; color: var(--ff-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.prev-card-val { display: block; font-size: 19px; font-weight: 700; margin-top: 3px; color: var(--ff-text); font-variant-numeric: tabular-nums; }
.prev-alertas { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.prev-alerta { font-size: 12px; border-radius: 8px; padding: 7px 12px; }
.prev-alerta.crit { background: var(--ff-red-light); color: var(--ff-red); border: 1px solid var(--ff-red); }
.prev-alerta.warn { background: var(--ff-warn-bg); color: var(--ff-warn-fg); border: 1px solid var(--ff-warn-fg); }
.prev-alerta summary { cursor: pointer; list-style: none; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.prev-alerta summary::-webkit-details-marker { display: none; }
.prev-alerta summary::before { content: '▸'; font-size: 9px; opacity: .7; }
.prev-alerta[open] summary::before { content: '▾'; }
.prev-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; max-height: 110px; overflow: auto; }
.prev-chip { background: var(--ff-white); border: 1px solid var(--ff-border); border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 500; color: var(--ff-text); }
.prev-alerta-msg { font-size: 12px; font-weight: 600; color: var(--ff-red); }
.prev-adm { font-size: 9px; font-weight: 700; background: var(--ff-blue-bg); color: var(--ff-blue-fg); padding: 1px 5px; border-radius: 8px; vertical-align: middle; }
/* Conferência: diferença + drill-down */
.conf-falta { color: var(--ff-red); font-weight: 700; }
.conf-ok { color: var(--ff-green); font-weight: 700; }
.benef-clic { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.benef-clic:hover { background: var(--ff-green-light); }
/* Comparativo */
.cmp-h { margin: 14px 0 6px; font-size: 14px; }
.cmp-cont { font-size: 11px; font-weight: 700; color: var(--ff-text-muted); background: var(--ff-bg); border: 1px solid var(--ff-border); border-radius: 999px; padding: 1px 8px; }
/* Regras segmentadas por benefício (VA/VT) + alvo legível */
.reg-secao { margin-bottom: 18px; }
.reg-secao-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; }
.reg-cont { font-size: 11px; font-weight: 700; color: var(--ff-text-muted); background: var(--ff-bg); border: 1px solid var(--ff-border); border-radius: 999px; padding: 1px 8px; }
.reg-pessoa { display: flex; flex-direction: column; line-height: 1.25; }
.reg-sub { font-size: 11px; color: var(--ff-text-muted); }
.reg-aplica-todos { color: var(--ff-text-muted); font-style: italic; }
.reg-nivel { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ff-bg); border: 1px solid var(--ff-border); color: var(--ff-text-muted); white-space: nowrap; }
.reg-nivel-global { background: var(--ff-green-light); color: var(--ff-green-dark); border-color: var(--ff-green-mid); }
.reg-nivel-colaborador { background: var(--ff-blue-bg); color: var(--ff-blue-fg); border-color: var(--ff-blue-fg); }
/* Bloco do gerente atual no modal de nomear gerente */
.lj-ger-atual { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ff-bg); border: 1px solid var(--ff-border); border-radius: var(--ff-radius); padding: 8px 12px; margin: 0 0 12px; font-size: 13px; }
.lj-ger-remover { color: var(--ff-red); white-space: nowrap; }
.benef-chk { font-size: 12px; }
.benef-chk input { accent-color: var(--ff-green); }
.conf-tab th, .conf-tab td { white-space: nowrap; }
.conf-tab td:first-child { position: sticky; left: 0; background: var(--ff-white, #fff); }
td.conf-pend, .conf-pend { background: var(--ff-warn-bg, #fff3cd); color: var(--ff-warn-fg, #856404); font-weight: 600; }

/* ── MultiSelect (dropdown de seleção múltipla) ─────────── */
.ms-host { position: relative; display: inline-block; min-width: 200px; }
.ms-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 12px; border: 1.5px solid var(--ff-border, #dde1e7); border-radius: var(--ff-radius, 8px);
  background: var(--ff-white, #fff); color: var(--ff-text, #1a1f2e); font-size: 13px; cursor: pointer; font-family: inherit; }
.ms-btn:hover { border-color: var(--ff-green, #1a7a4a); }
.ms-btn-label { color: var(--ff-text-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-btn-label.on { color: var(--ff-text, #1a1f2e); font-weight: 600; }
.ms-caret { flex-shrink: 0; color: var(--ff-text-muted, #6b7280); }
.ms-panel { position: absolute; z-index: 300; top: calc(100% + 6px); left: 0; min-width: 280px; max-width: 420px; width: max-content;
  background: var(--ff-white, #fff); border: 1px solid var(--ff-border, #dde1e7); border-radius: var(--ff-radius-lg, 12px);
  box-shadow: var(--ff-shadow-modal, 0 8px 32px rgba(0,0,0,.16)); padding: 8px; }
.ms-search input { width: 100%; padding: 8px 10px; border: 1.5px solid var(--ff-border, #dde1e7); border-radius: var(--ff-radius, 8px); font-size: 13px; outline: none; box-sizing: border-box; }
.ms-search input:focus { border-color: var(--ff-green, #1a7a4a); }
.ms-actions { display: flex; gap: 14px; padding: 8px 4px 6px; }
.ms-actions button { background: none; border: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--ff-green, #1a7a4a); cursor: pointer; }
.ms-actions button:hover { text-decoration: underline; }
.ms-list { max-height: 260px; overflow-y: auto; }
.ms-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; user-select: none; }
.ms-item:hover { background: var(--ff-green-light, #e8f5ee); }
.ms-item input { accent-color: var(--ff-green, #1a7a4a); width: 16px; height: 16px; cursor: pointer; margin: 0; flex-shrink: 0; }
.ms-item span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-vazio { padding: 14px 8px; text-align: center; color: var(--ff-text-muted, #6b7280); font-size: 13px; }
/* Perfil somente leitura (Sócio): esconde todo controle de escrita marcado .so-edicao */
body.somente-leitura .so-edicao { display: none !important; }
/* Controles travados (selects/inputs do Quadro) viram texto estático, sem cara de "desabilitado" */
.ro-lock { pointer-events: none; cursor: default !important; opacity: 1 !important;
  background: transparent !important; border-color: transparent !important;
  color: var(--ff-text) !important; -webkit-text-fill-color: var(--ff-text) !important;
  -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-left: 2px; }
select.ro-lock { background-image: none !important; }
.ro-aviso { display: none; }
body.somente-leitura .ro-aviso { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  color: var(--ff-text-muted); background: var(--ff-bg); border: 1px solid var(--ff-border); border-radius: 999px; padding: 3px 10px; }
/* Cards-filtro do painel de pendências */
.pend-card { cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s, background .12s; }
.pend-card:hover { border-color: var(--ff-green-mid); }
.pend-card.active { border-color: var(--ff-green); box-shadow: inset 0 0 0 1px var(--ff-green), var(--ff-shadow-card); background: var(--ff-green-light); }
/* Linhas clicáveis do painel de pendências (sem cara de link azul) */
.pend-row { cursor: pointer; transition: background .12s; }
.pend-row:hover { background: var(--ff-green-light, #e8f5ee); }
.lnk-nome { font-weight: 600; color: var(--ff-text, #1f2937); }
.pend-row:hover .lnk-nome { color: var(--ff-green-dark, #14613a); }
/* Colunas extras da lista de colaboradores */
.colab-table .col-cpf { font-variant-numeric: tabular-nums; color: var(--cinza-texto); white-space: nowrap; }
.colab-table .col-data { white-space: nowrap; color: var(--cinza-texto); }
.colab-desl { color: var(--vermelho); font-size: 12px; }
.seg-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.seg-oper { background: #e6f0fb; color: #1d4e89; }
.seg-corp { background: #efe7fb; color: #5b2a86; }

/* Badges de status */
.badge-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 12px;
  line-height: 1.5;
}
.badge-ativo     { background: var(--verde-light); color: var(--verde-dark); }
.badge-ferias    { background: #e6f0fb; color: #1d4e89; }
.badge-afastado  { background: #fdf3e0; color: #92600a; }
.badge-desligado { background: var(--vermelho-light); color: var(--vermelho); }

/* Painel lateral da ficha */
.ficha-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 60;
}
.ficha-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 92vw;
  background: var(--branco);
  box-shadow: -4px 0 18px rgba(0,0,0,.14);
  z-index: 61;
  display: flex;
  flex-direction: column;
}
.ficha-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cinza-borda);
  font-weight: 700; font-size: 16px;
}
.ficha-panel-header button {
  background: none; border: none; font-size: 18px;
  cursor: pointer; color: var(--cinza-texto);
}
.ficha-body { padding: 18px 20px; overflow-y: auto; flex: 1; }

.ficha-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ficha-secao { margin-bottom: 22px; }
.ficha-secao h3 {
  font-size: 14px; margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--cinza-borda);
}
/* Nome de registro sob o título, quando a pessoa tem nome social declarado.
   Discreto de propósito: o nome de tratamento é o que encabeça. */
.ficha-nome-registro { margin: -6px 0 12px; font-size: 12px; color: var(--cinza-txt, #6b7280); }

.ficha-secao h3 .badge-status { float: right; }
.ficha-fonte { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-texto); background: var(--cinza-bg, #f1f3f0); border: 1px solid var(--cinza-borda); border-radius: 999px; padding: 1px 8px; margin-left: 8px; vertical-align: middle; }
.ficha-cru { display: block; font-size: 10.5px; color: var(--cinza-texto); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* Tópicos expansíveis/recolhíveis da ficha — a barra inteira do título é clicável */
.ficha-secao--acc { margin-bottom: 0; border-bottom: 1px solid var(--cinza-borda, #e6e8eb); padding-bottom: 4px; }
.ficha-secao--acc:last-child { border-bottom: none; }
.ficha-secao--acc > h3 {
  cursor: pointer; user-select: none; position: relative;
  margin: 0 -12px 10px; padding: 12px 38px 12px 12px;
  border-bottom: none; border-radius: 8px; transition: background .12s;
}
.ficha-secao--acc > h3:hover { background: var(--cinza-bg, #f3f4f6); }
.ficha-secao--acc.is-collapsed > h3 { margin-bottom: 0; }
.ficha-secao--acc > h3::after {
  content: '▾'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--cinza-texto); transition: transform .15s;
}
.ficha-secao--acc.is-collapsed > h3::after { transform: translateY(-50%) rotate(-90deg); }
.ficha-secao--acc > h3 .badge-status { float: none; margin-left: 8px; }
.ficha-secao--acc.is-collapsed > :not(h3) { display: none; }
/* Ordenação genérica de tabelas (.sortable) */
table.sortable > thead th { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable > thead th[data-nosort] { cursor: default; }
table.sortable > thead th:hover:not([data-nosort]) { color: var(--verde, #1a7a4a); }
table.sortable > thead th[data-sort]::after { content: ' ▲'; font-size: 9px; opacity: .8; }
table.sortable > thead th[data-sort="desc"]::after { content: ' ▼'; }
.ficha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.ficha-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ficha-item-full { grid-column: 1 / -1; }
.ficha-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-texto); font-weight: 600; }
.ficha-valor { font-size: 14px; font-weight: 500; color: var(--texto, #16211b); word-break: break-word; line-height: 1.35; }
.ficha-valor.vt-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ficha-hint { font-size: 11px; color: var(--cinza-texto); }
.input-inline { padding: 4px 8px; border: 1px solid var(--cinza-borda, #d0d0d0); border-radius: 6px; font-size: 14px; }

/* Timeline (histórico / transferências) */
.ficha-timeline-item {
  border-left: 2px solid var(--cinza-borda);
  padding: 0 0 12px 12px;
  margin-left: 4px;
}
.ficha-timeline-item .tl-top { display: flex; justify-content: space-between; gap: 8px; }
.ficha-timeline-item .tl-data { font-size: 12px; color: var(--cinza-texto); white-space: nowrap; }
.ficha-timeline-item .tl-mudanca { font-size: 13px; color: var(--texto); margin-top: 2px; }
.ficha-timeline-item .tl-motivo { font-size: 12px; color: var(--cinza-texto); margin-top: 2px; }
.ficha-timeline-item .tl-carencia { font-size: 12px; color: var(--verde-dark); margin-top: 2px; }

/* Formulário na ficha */
.form-secao {
  font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--cinza-texto); margin: 16px 0 8px;
}
.form-secao:first-child { margin-top: 0; }
.field-ajuda { display: block; font-size: 11px; color: var(--cinza-texto); margin-top: 3px; }
.field-check label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.field-check input { width: auto; }

@media (max-width: 560px) {
  .ficha-grid { grid-template-columns: 1fr; }
  .filtros-bar .input-busca, .filtros-bar .select-sm { width: 100%; }
}

/* Importação em massa (painel da ficha) */
.imp-result { margin-top: 10px; }
.imp-ok {
  background: var(--verde-light); color: var(--verde-dark);
  border: 1px solid var(--verde-mid); border-radius: 8px;
  padding: 8px 12px; font-size: 13px;
}
.imp-erro {
  background: var(--vermelho-light); color: var(--vermelho);
  border: 1px solid var(--vermelho); border-radius: 8px;
  padding: 8px 12px; font-size: 13px;
}
.imp-resumo { font-size: 13px; margin: 10px 0 6px; }
.imp-erro-txt { color: var(--vermelho); font-weight: 600; }
.imp-erros-lista {
  list-style: none; margin: 4px 0; padding: 8px 12px;
  background: var(--cinza-bg); border-radius: 8px;
  max-height: 180px; overflow-y: auto;
  font-size: 12px; color: var(--cinza-texto);
}
.imp-erros-lista li { padding: 2px 0; }
input[type="file"] { font-size: 13px; }

/* Importação — preview de atualizações (diff) */
.imp-upd-head { font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.imp-upd-item {
  border: 1px solid var(--cinza-borda); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px;
}
.imp-upd-top { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.imp-upd-top input { width: auto; }
.imp-cpf { color: var(--cinza-texto); font-size: 12px; }
.tag-flag {
  font-size: 11px; background: #fdf3e0; color: #92600a;
  padding: 1px 7px; border-radius: 10px; font-weight: 600;
}
.imp-mudancas { list-style: none; margin: 6px 0 0; padding: 0 0 0 26px; font-size: 12px; }
.imp-mudancas li { padding: 1px 0; color: var(--texto); }
.imp-mudancas .m-de { color: var(--cinza-texto); text-decoration: line-through; }
.imp-mudancas .m-para { color: var(--verde-dark); font-weight: 600; }

/* ── Gestão de Metas ─────────────────────────────────────── */
.metas-ciclo { font-size: 13px; font-weight: 600; color: var(--verde-dark);
  background: #e7f3ec; padding: 2px 10px; border-radius: 20px; vertical-align: middle; margin-left: 8px; }
.metas-legenda { color: var(--cinza-texto); font-size: 13px; margin: 4px 0 0; max-width: 760px; }

.metas-totais { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.metas-kpi { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--card-shadow); }
.metas-kpi-label { font-size: 12px; color: var(--cinza-texto); }
.metas-kpi-val { font-size: 20px; font-weight: 800; color: var(--texto); }
.metas-kpi-total { background: var(--verde); border-color: var(--verde); }
.metas-kpi-total .metas-kpi-label, .metas-kpi-total .metas-kpi-val { color: #fff; }

.metas-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.metas-table th { background: var(--verde); color: #fff; padding: 9px 10px; text-align: left; white-space: nowrap; font-weight: 600; }
.metas-table td { padding: 7px 10px; border-bottom: 1px solid var(--cinza-borda); vertical-align: middle; }
.metas-table td.num { text-align: right; white-space: nowrap; }
.metas-table td.center, .metas-table th.center { text-align: center; }
.metas-table th.num { text-align: right; }
.metas-table tr.metas-nova { background: #fffdf2; }
.metas-loja { font-weight: 600; }
.metas-badge-nova { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #92600a; background: #fdf6dd; border: 1px solid #f2e2a0; border-radius: 20px; padding: 1px 7px; margin-left: 6px; }
.metas-total-col { font-weight: 800; color: var(--verde-dark); }
.metas-na { color: var(--cinza-texto); }

.metas-select { padding: 5px 8px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 12.5px; background: #fff; }
.metas-check { position: relative; display: inline-flex; cursor: pointer; }
.metas-check input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--verde); }

.metas-penal { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 20px; display: inline-block; }
.metas-penal-0 { color: var(--cinza-texto); background: var(--cinza-bg); }
.metas-penal-lo { color: #8a6d00; background: #fdf6dd; }
.metas-penal-mid { color: #9c4d16; background: #fbe7d6; }
.metas-penal-hi { color: var(--vermelho); background: #fbe3e3; }

.metas-metacell { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.metas-metaval { font-weight: 600; }
.metas-metacell.is-manual .metas-metaval { color: var(--verde-dark); }
.metas-manual { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--verde-dark);
  background: #e7f3ec; border-radius: 4px; padding: 0 5px; }
.metas-edit { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.metas-input { width: 96px; padding: 5px 7px; border: 1px solid var(--verde); border-radius: 6px; font-size: 12.5px; text-align: right; }

.btn-mini { border: none; background: var(--verde); color: #fff; border-radius: 5px; width: 24px; height: 24px;
  cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.btn-mini.ghost { background: transparent; color: var(--cinza-texto); }
.btn-mini.ghost:hover { color: var(--texto); background: var(--cinza-bg); }

.metas-vazio { padding: 24px; text-align: center; color: var(--cinza-texto); }
.metas-vazio code { background: var(--cinza-bg); padding: 1px 5px; border-radius: 4px; }
.metas-hint { font-size: 12.5px; margin-top: 8px; }

@media (max-width: 900px) { .metas-totais { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .metas-table.rtable thead { display: none; }
  .metas-table.rtable, .metas-table.rtable tbody, .metas-table.rtable tr, .metas-table.rtable td { display: block; width: 100%; }
  .metas-table.rtable tr { border: 1px solid var(--cinza-borda); border-radius: var(--radius); margin-bottom: 10px; padding: 6px 2px; }
  .metas-table.rtable td { border-bottom: 1px dashed var(--cinza-borda); text-align: right; padding: 7px 12px; }
  .metas-table.rtable td::before { content: attr(data-label); float: left; font-weight: 600; color: var(--cinza-texto); }
  .metas-table.rtable td.num, .metas-metacell, .metas-edit { justify-content: flex-end; }
}

/* ── Admin Portal — gestão de usuários ─────────────────── */
.ap-stats { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ap-stat-card {
  flex: 1; min-width: 100px;
  background: var(--ff-white); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius); padding: 14px 18px;
  box-shadow: var(--ff-shadow-card);
}
.ap-stat-value { font-size: 26px; font-weight: var(--ff-weight-extra); line-height: 1; }
.ap-stat-label { font-size: 11px; color: var(--ff-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }

.ap-toolbar { padding: 12px 0 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ap-toolbar .input-busca { flex: 1; min-width: 180px; }

.ap-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ap-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--ff-text-muted); padding: 8px 12px; border-bottom: 1px solid var(--ff-border); text-align: left; white-space: nowrap; }
.ap-table td { padding: 11px 12px; border-bottom: 1px solid var(--ff-border); vertical-align: middle; }
.ap-table tr:last-child td { border-bottom: none; }
.ap-table tbody tr:hover td { background: var(--ff-green-light); transition: background var(--ff-transition-fast); }
.ap-row-inativo .ap-user-cell,
.ap-row-inativo .ap-sol-list,
.ap-row-inativo .ap-data,
.ap-row-inativo .ap-badge { opacity: .45; }

.ap-user-cell { display: flex; align-items: center; gap: 10px; }
.ap-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: 0; }
.ap-user-info { display: flex; flex-direction: column; gap: 1px; }
.ap-user-nome { font-weight: 600; color: var(--ff-text); }
.ap-user-email { font-size: 12px; color: var(--ff-text-muted); }

.ap-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--ff-radius-pill); white-space: nowrap; }
.ap-badge-master { background: var(--ff-green-light); color: var(--ff-green-dark); }
.ap-badge-user   { background: var(--ff-bg); color: var(--ff-text-muted); border: 1px solid var(--ff-border); }
.ap-badge-socio  { background: var(--ff-blue-bg); color: var(--ff-blue-fg); border: 1px solid var(--ff-blue-fg); }
.ap-badge-ativo  { background: var(--ff-green-light); color: var(--ff-green-dark); }
.ap-badge-inativo{ background: var(--ff-bg); color: var(--ff-text-muted); border: 1px solid var(--ff-border); }
.ap-badge-warn   { background: var(--ff-warn-bg); color: var(--ff-warn-fg); }

.ap-sol-list { display: flex; flex-direction: column; gap: 4px; }
.ap-sol-check { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ap-sol-check input { accent-color: var(--ff-green); cursor: pointer; margin: 0; }

.ap-data { font-size: 12px; color: var(--ff-text-muted); white-space: nowrap; }

/* Kebab menu */
.ap-kebab-btn {
  width: 30px; height: 30px; border-radius: var(--ff-radius);
  border: none; background: transparent; color: var(--ff-text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--ff-transition-fast), color var(--ff-transition-fast);
}
.ap-kebab-btn:hover { background: var(--ff-bg); color: var(--ff-text); }
.ap-kebab-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--ff-white); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius); box-shadow: var(--ff-shadow-modal);
  min-width: 160px; z-index: 300; padding: 4px;
}
.ap-kebab-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: none; background: transparent;
  font-size: 13px; color: var(--ff-text); cursor: pointer; border-radius: 6px;
  text-align: left; transition: background var(--ff-transition-fast);
}
.ap-kebab-menu button:hover { background: var(--ff-green-light); }
.ap-kebab-menu button svg { flex-shrink: 0; color: var(--ff-text-muted); }
.ap-kebab-divider { height: 1px; background: var(--ff-border); margin: 4px 0; }
.ap-kebab-danger { color: var(--ff-red) !important; }
.ap-kebab-danger svg { color: var(--ff-red) !important; }
.ap-kebab-danger:hover { background: var(--ff-red-light) !important; }

/* Modal admin */
.ap-modal-box { max-width: 440px; padding: 0; }
.ap-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--ff-border);
}
.ap-modal-titulo { font-size: 16px; font-weight: 700; margin: 0; }
.ap-modal-close {
  width: 28px; height: 28px; border: none; background: transparent;
  cursor: pointer; color: var(--ff-text-muted); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ff-transition-fast), color var(--ff-transition-fast);
}
.ap-modal-close:hover { background: var(--ff-bg); color: var(--ff-text); }
.ap-modal-body { padding: 20px 24px; }
.ap-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 24px; border-top: 1px solid var(--ff-border);
  background: var(--ff-bg); border-radius: 0 0 12px 12px;
}

/* Modal de exclusão */
.ap-modal-del .ap-modal-titulo { color: var(--ff-red); }
.ap-btn-danger {
  background: var(--ff-red); color: #fff; border: none;
  padding: 6px 14px; border-radius: var(--ff-radius); font-size: 13px;
  font-weight: 600; cursor: pointer; transition: opacity var(--ff-transition-fast);
}
.ap-btn-danger:hover { opacity: .85; }
.ap-btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* Toast */
.ap-toast {
  margin: 0 0 10px; padding: 10px 14px;
  background: var(--ff-green-light); color: var(--ff-green-dark);
  border-radius: var(--ff-radius); font-size: 13px;
  border-left: 3px solid var(--ff-green);
}
.ap-toast.ap-toast--erro { background: var(--ff-red-light); color: var(--ff-red); border-left-color: var(--ff-red); }

/* ── Central de Automações ───────────────────────────────── */
.auto-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--ff-border); margin: 18px 0 16px; }
.auto-tab {
  padding: 9px 18px; background: none; border: none; cursor: pointer;
  color: var(--ff-text-muted); font-size: 13px; font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.auto-tab.is-active { color: var(--ff-green-dark); border-bottom-color: var(--ff-green); }

/* Menu lateral: converte a barra de abas (.auto-tabs) em sidebar vertical.
   CSS-only — o JS de troca de aba (.auto-tab / .is-active) não muda. */
.mod-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 28px; align-items: start; }
.mod-layout > * { grid-column: 2; min-width: 0; }
.mod-layout > .auto-tabs { grid-column: 1; grid-row: 1 / 99; flex-direction: column; gap: 2px; border-bottom: none; border-right: 1px solid var(--ff-border); margin: 4px 0 16px; padding: 0 14px 0 0; position: sticky; top: 12px; }
.mod-layout .auto-tab { text-align: left; padding: 9px 12px; border-bottom: none; border-radius: 8px; margin-bottom: 0; white-space: normal; line-height: 1.25; }
.mod-layout .auto-tab:hover { background: var(--ff-bg, #f4f6f8); }
.mod-layout .auto-tab.is-active { background: var(--ff-green-light, #e8f5ee); color: var(--ff-green-dark); border-bottom: none; }
@media (max-width: 820px) {
  .mod-layout { display: block; }
  .mod-layout > .auto-tabs { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 2px solid var(--ff-border); padding: 0; position: static; }
  .mod-layout .auto-tab { border-radius: 0; }
  .mod-layout .auto-tab.is-active { background: none; border-bottom: 3px solid var(--ff-green); }
}

.auto-card {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--ff-surface); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-md); padding: 14px 16px; margin-bottom: 10px;
  box-shadow: var(--ff-shadow-card);
}
.auto-card-title { font-weight: 600; font-size: 14px; color: var(--ff-text); }
.auto-card-sub { font-size: 12px; color: var(--ff-text-muted); margin-top: 3px; }
.auto-card-acoes { display: flex; gap: 10px; flex-shrink: 0; }
.btn-link--danger { color: var(--ff-red); }

.auto-dest {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--ff-border); font-size: 13px;
}
.auto-dest-form { display: flex; flex-direction: column; gap: 6px; }
.auto-sep { border: none; border-top: 1px solid var(--ff-border); margin: 14px 0 6px; }

.auto-tabela { width: 100%; }
.auto-status {
  display: inline-block; padding: 3px 9px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
  background: var(--ff-bg); color: var(--ff-text-muted);
}
.auto-status--processando { background: var(--ff-warn-bg); color: var(--ff-warn-fg); }
.auto-status--pdfs_gerados,
.auto-status--enviado_n8n { background: var(--ff-green-light); color: var(--ff-green-dark); }
.auto-status--parcial { background: var(--ff-amber-bg); color: var(--ff-amber-fg); }
.auto-status--erro_n8n,
.auto-status--erro { background: var(--ff-red-light); color: var(--ff-red); }

.auto-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 1000; padding: 11px 18px; border-radius: var(--ff-radius-md);
  background: var(--ff-green-dark); color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.auto-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.auto-toast--erro { background: var(--ff-red); }

/* ── Organograma (dentro de Colaboradores) ───────────────── */
.org-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Controles do organograma */
.org-seg { display: inline-flex; border: 1px solid var(--ff-border); border-radius: 8px; overflow: hidden; }
.org-seg-btn { background: var(--branco, #fff); border: none; padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--ff-text-muted, #667); }
.org-seg-btn + .org-seg-btn { border-left: 1px solid var(--ff-border); }
.org-seg-btn.is-active { background: var(--verde, #2e7d32); color: #fff; font-weight: 600; }
.org-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.org-check input { width: auto; }
.org-soltos-count { color: var(--vermelho, #c0392b); font-weight: 700; }
.org-zoom { display: inline-flex; gap: 4px; }
.org-legenda { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; font-size: 12px; flex-wrap: wrap; }
.org-leg-solto { color: var(--vermelho, #c0392b); font-weight: 600; }
.org-card { margin-top: 12px; padding: 10px; }
.org-canvas { overflow: auto; height: 72vh; min-height: 460px; resize: vertical; background:
  linear-gradient(var(--ff-surface-sunken, #f7f8fa) 0 0); border-radius: 8px; }
.org-zoomwrap { transform-origin: top left; transition: transform .1s ease; width: max-content; min-width: 100%; padding: 8px; }
.org-busca { max-width: 180px; }
/* Tela cheia do organograma */
#colab-view-organograma.org-fs { position: fixed; inset: 0; z-index: 200; background: var(--branco, #fff);
  margin: 0; padding: 14px 18px; overflow: auto; }
#colab-view-organograma.org-fs .org-canvas { height: calc(100vh - 150px); }

/* Org-chart top-down (raiz em cima, filhos espalhados; linhas tracejadas) */
.octree { display: inline-block; min-width: 100%; text-align: center; padding: 8px 4px; }
.octree-root { list-style: none; margin: 0 auto 34px; padding: 0; }
.octree-root:last-child { margin-bottom: 0; }
.octree ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.octree li { position: relative; padding: 24px 12px 0; }
/* metade superior das linhas (cada filho desenha sua "perna") */
.octree li::before, .octree li::after {
  content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 24px;
  border-top: 2px dashed #9ec37d;
}
.octree li::after { right: auto; left: 50%; border-left: 2px dashed #9ec37d; }
.octree li:only-child::before, .octree li:only-child::after { display: none; }
.octree li:only-child { padding-top: 0; }
.octree li:first-child::before, .octree li:last-child::after { border: 0 none; }
.octree li:last-child::before { border-right: 2px dashed #9ec37d; border-radius: 0 6px 0 0; }
.octree li:first-child::after { border-radius: 6px 0 0 0; }
/* descida do pai até a barra dos filhos */
.octree ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 24px;
  border-left: 2px dashed #9ec37d;
}
.octree .og-card { min-width: 150px; max-width: 230px; text-align: left; }

/* Card de pessoa */
.og-card { display: inline-block; vertical-align: top; background: var(--branco, #fff);
  border: 1px solid var(--ff-border, #d7dde3); border-left: 4px solid var(--ff-border, #d7dde3);
  border-radius: 8px; padding: 6px 10px; width: 210px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.og-soltos-grid .og-card { width: auto; }
.og-oper { border-left-color: #1d4e89; }
.og-corp { border-left-color: #5b2a86; }
.og-solto { border: 1px dashed var(--vermelho, #c0392b); border-left: 4px solid var(--vermelho, #c0392b); background: #fff7f7; }
.og-dim { opacity: .3; }
.og-head { display: flex; align-items: center; gap: 7px; }
.og-toggle { background: none; border: none; cursor: pointer; color: var(--ff-text-muted, #667); font-size: 11px; width: 14px; padding: 0; }
.og-toggle-sp { display: inline-block; width: 14px; }
.og-nivel { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 9px; white-space: nowrap; text-transform: uppercase; }
.og-n1 { background: #d1fae5; color: #065f46; }  /* Gerente de Operações (topo) */
.og-n2 { background: #ede9fe; color: #6d28d9; }  /* Supervisor */
.og-n3 { background: var(--ff-blue-bg, #e6f0fb); color: var(--ff-blue-fg, #1d4e89); }  /* Gerente */
.og-n4 { background: var(--ff-amber-bg, #fdf3e0); color: var(--ff-amber-fg, #92600a); }  /* Coordenador */
.og-n5 { background: var(--ff-bg, #f1f3f5); color: var(--ff-text-muted, #667); }  /* Atendente */
.og-corp-badge { background: #efe7fb; color: #5b2a86; }
/* Topo sintético (organização) e galho de soltos */
.og-virtual { background: var(--verde, #2e7d32); border-color: var(--verde, #2e7d32); border-left-color: var(--verde, #2e7d32); }
.og-virtual .og-nome { color: #fff; font-size: 14px; }
.og-virtual .og-meta { color: rgba(255,255,255,.85); }
.og-virtual .og-toggle { color: #fff; }
.og-bucket { background: #fff7f7; border: 1px dashed var(--vermelho, #c0392b); border-left: 4px solid var(--vermelho, #c0392b); }
.og-bucket .og-nome { color: var(--vermelho, #c0392b); }
.og-bucket .og-flag { margin-left: 0; }
.og-nome { font-weight: 600; font-size: 12.5px; color: var(--ff-text, #1a2027); line-height: 1.2;
  overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.og-flag { font-size: 10px; font-weight: 700; color: var(--vermelho, #c0392b); margin-left: auto; white-space: nowrap; }
.og-meta { font-size: 11px; color: var(--ff-text-muted, #667); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-count { color: var(--ff-text-muted, #667); font-weight: 600; }
.og-sup { margin-top: 4px; }
.og-sup .btn-link { font-size: 11px; }
.og-soltos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

/* Folhas (atendentes) agrupadas em grade compacta — evita a linha horizontal gigante */
.og-leaves { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 5px 8px; max-width: 880px; margin: 26px auto 0; position: relative; padding-top: 2px; text-align: left; }
.og-leaves::before { content: ''; position: absolute; top: -26px; left: 50%; height: 26px; border-left: 2px dashed #9ec37d; }
.og-leaf { display: flex; align-items: center; gap: 6px; background: var(--branco, #fff);
  border: 1px solid var(--ff-border, #d7dde3); border-left: 3px solid var(--ff-border, #d7dde3);
  border-radius: 6px; padding: 4px 8px; font-size: 12px; }
.og-leaf.og-oper { border-left-color: #1d4e89; }
.og-leaf.og-corp { border-left-color: #5b2a86; }
.og-leaf.og-solto { border: 1px dashed var(--vermelho, #c0392b); border-left: 3px solid var(--vermelho, #c0392b); background: #fff7f7; }
.og-leaf-nome { font-weight: 600; color: var(--ff-text, #1a2027); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.og-leaf .og-sup { margin: 0; }
.og-leaf .og-sup .btn-link { font-size: 12px; padding: 0 2px; }
.og-leaf .og-flag { color: var(--vermelho, #c0392b); }

/* ── Gestão de lojas (/admin/lojas) ───────────────────────── */
.lj-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lj-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ff-text-muted); padding: 8px 10px; border-bottom: 1px solid var(--ff-border); white-space: nowrap; }
.lj-table td { padding: 9px 10px; border-bottom: 1px solid var(--ff-border); vertical-align: middle; }
.lj-table tbody tr:hover td { background: var(--ff-surface-sunken); }
.lj-acoes { white-space: nowrap; text-align: right; }
.lj-acoes .btn-link { margin-left: 10px; }
.lj-warn { color: var(--ff-amber-fg, #92600a); font-style: italic; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.lj-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lj-check input { width: auto; }

/* Seletor de pessoa (destinatário da Central) */
.auto-pessoa-result { border: 1px solid var(--ff-border); border-radius: 6px; margin-top: 4px; max-height: 220px; overflow-y: auto; }
.auto-pessoa-result:empty { display: none; }
.auto-pessoa-item { padding: 7px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--ff-border); }
.auto-pessoa-item:last-child { border-bottom: none; }
.auto-pessoa-item:hover { background: var(--ff-surface-tinted); }

/* ── Formulários nos painéis laterais (Central de Automações + Colaboradores) ── */
.ficha-body .field { margin-bottom: 14px; }
.ficha-body .field > label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--ff-text-muted); margin-bottom: 5px;
}
.ficha-body .field input[type="text"],
.ficha-body .field input[type="number"],
.ficha-body .field input:not([type]),
.ficha-body .field select,
.ficha-body .field textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; border: 1.5px solid var(--ff-border); border-radius: 7px;
  font-size: 14px; font-family: inherit; color: var(--ff-text);
  background: var(--ff-white); outline: none; resize: vertical;
  transition: border-color var(--ff-transition-fast);
}
.ficha-body .field textarea { min-height: 64px; }
.ficha-body .field input:focus,
.ficha-body .field select:focus,
.ficha-body .field textarea:focus { border-color: var(--ff-green); }
/* hora/minuto (inputs estreitos) respeitam o width inline */
.ficha-body .field input[style*="width"] { width: auto; }

/* Ações do formulário no painel: alinhadas à direita, separadas por um filete */
#auto-panel-body .ficha-acoes {
  justify-content: flex-end; margin-top: 20px; margin-bottom: 0;
  padding-top: 14px; border-top: 1px solid var(--ff-border);
}

/* Cabeçalho do painel lateral mais sólido */
.ficha-panel-header { font-weight: 700; font-size: 15px; }

/* Estado vazio / carregando — centralizado e suave */
.colab-vazio { color: var(--ff-text-muted); font-size: 13px; padding: 18px 4px; text-align: center; }

/* Inputs de horário de entrada/saída no nominal do Quadro */
.hora-cell { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.input-hora { width: 86px; padding: 2px 4px; font-size: 12px; }
.hora-sep { color: var(--cinza-texto); }

/* Cabeçalho de card com ação à direita + toggle "ver vagas" no heatmap */
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toggle-vagas { font-size: 13px; color: var(--cinza-texto); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }

/* Config de status do quadro real — grade compacta de chips toggláveis */
.status-resumo { font-size: 12px; color: var(--cinza-texto); margin-bottom: 10px; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.status-item { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid var(--cinza-borda); border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1.25; transition: background .12s, border-color .12s; }
.status-item:hover { border-color: var(--verde); }
.status-item.on { background: var(--verde-light); border-color: var(--verde-mid); }
.status-item input { flex: none; accent-color: var(--verde); margin: 0; }
.status-cod { color: var(--cinza-texto); font-size: 11px; min-width: 18px; text-align: right; }
.status-nome { flex: 1; }

/* Badge de vínculo (usuário com CPF ligado ao colaborador) na lista de usuários */
.ap-vinculo { font-size: 10px; font-weight: 600; color: var(--verde); background: var(--verde-light); padding: 1px 6px; border-radius: 10px; margin-left: 6px; white-space: nowrap; }

/* Dropdown de busca de colaborador no modal de novo usuário */
.ap-colab-results { border: 1px solid var(--cinza-borda); border-radius: 6px; margin-top: 4px; max-height: 220px; overflow-y: auto; background: #fff; }
.ap-colab-item { padding: 7px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--cinza-bg); }
.ap-colab-item:last-child { border-bottom: none; }
.ap-colab-item:hover { background: var(--verde-light); }
.ap-colab-nome { font-size: 13px; font-weight: 600; }
.ap-colab-sub { font-size: 11px; color: var(--cinza-texto); }
.ap-colab-vazio { color: var(--cinza-texto); cursor: default; }
.ap-colab-vazio:hover { background: none; }

/* Tela de Sync — ações lado a lado + aviso */
.sync-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.sync-aviso { margin-top: 12px; font-size: 13px; color: var(--cinza-texto); line-height: 1.45; }

/* Heatmap — controles (modo de média + ver vagas) */
.heat-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.toggle-modo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cinza-texto); }

/* Frescor do dado de faturamento no card do heatmap */
.heat-cobertura { margin-top: 6px; font-size: 12px; color: var(--cinza-texto); font-style: italic; }

/* Modal de horários — subtítulo de turno na seção de escalas */
.hf-subtitulo { font-size: 12px; font-weight: 700; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 4px; }
.hf-subtitulo:first-child { margin-top: 0; }

/* Toggle deslizante (switch) — usado no "Ver vagas" do heatmap */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--cinza-texto); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .switch-slider { position: relative; width: 36px; height: 20px; background: #cbd2da; border-radius: 999px; transition: background .18s; flex: none; }
.switch .switch-slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + .switch-slider { background: #147a4a; }
.switch input:checked + .switch-slider::before { transform: translateX(16px); }
.switch input:focus-visible + .switch-slider { outline: 2px solid #147a4a; outline-offset: 2px; }

/* Legenda compacta do heatmap (laranja / Nd) */
.heat-legenda-txt { margin: 4px 0 0; font-size: 12px; color: var(--cinza-texto); }
.heat-legenda-txt .hl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: #d97706; vertical-align: -1px; }
.heat-legenda-txt .hl-nd { color: var(--ff-red); }

/* Legenda de função (letra) no heatmap da loja */
.leg-letra { display:inline-block; min-width:15px; height:15px; line-height:15px; text-align:center; background:#475569; color:#fff; border-radius:3px; font-size:10px; font-weight:700; margin-right:3px; }

/* Filtro de mês — chips multi-seleção (dashboard e loja) */
.mes-filtro-row { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.mes-filtro-label { font-size: 13px; color: var(--cinza-texto); font-weight: 500; }
.mes-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mes-chip { border: 1px solid var(--cinza-borda); background: var(--branco); color: var(--cinza-texto); font-size: 12px; padding: 4px 11px; border-radius: 999px; cursor: pointer; transition: all .12s; }
.mes-chip:hover { border-color: var(--verde); color: var(--verde-dark); }
.mes-chip.on { background: var(--verde); border-color: var(--verde); color: #fff; }

/* Horário semanal — editor (admin + modal) */
.hs-mad-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 0.5px solid var(--cinza-borda); }
.hs-mad-lbl { font-size: 13px; color: var(--cinza-texto); }
.hs-dias { display: flex; flex-direction: column; gap: 7px; }
.hs-row { display: flex; align-items: center; gap: 10px; }
.hs-dia { font-size: 13px; color: var(--texto); font-weight: 500; width: 80px; flex: none; text-transform: none; }
.hs-seta { color: var(--cinza-texto); }
.hs-pill { width: 96px; flex: none; border: 1px solid var(--cinza-borda); border-radius: 999px; padding: 4px 0; font-size: 12px; font-weight: 500; cursor: pointer; text-align: center; transition: all .12s; }
.hs-pill.on { background: var(--verde-light); color: var(--verde-dark); border-color: var(--verde); }
.hs-pill.off { background: var(--cinza-bg); color: var(--cinza-texto); }
.hs-pill:hover { filter: brightness(0.97); }
.hs-rep { margin-left: auto; flex: none; background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--cinza-texto); padding: 4px 6px; border-radius: var(--ff-radius);
  white-space: nowrap; transition: color .12s, background .12s; }
.hs-rep:hover { color: var(--verde-dark); background: var(--verde-light); }

/* Toast — feedback discreto de salvamento (canto inferior) */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  z-index: 4000; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: #fff; background: var(--verde-dark, #1a7a4a); box-shadow: var(--ff-shadow-modal, 0 6px 24px rgba(0,0,0,.18));
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-erro { background: var(--ff-red); }

/* Lista de lojas (gestão em massa de horário) */
.lh-loja { border: 0.5px solid var(--cinza-borda); border-radius: var(--border-radius-md, 8px); margin-bottom: 6px; overflow: hidden; }
.lh-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--branco); border: 0; cursor: pointer; text-align: left; }
.lh-head:hover { background: var(--verde-light); }
.lh-nome { font-weight: 500; font-size: 14px; flex: 0 0 auto; min-width: 200px; }
.lh-pad { color: var(--cinza-texto); font-weight: 400; font-size: 12px; }
.lh-resumo { flex: 1; color: var(--cinza-texto); font-size: 12px; }
.lh-chev { color: var(--cinza-texto); }
.lh-body { padding: 12px 14px; border-top: 0.5px solid var(--cinza-borda); background: var(--cinza-bg); }
.lh-actions { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.lh-msg { font-size: 13px; color: var(--verde-dark); }

/* ── Solução Avaliações (reputação Google) ──────────────────────── */
.aval-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.aval-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aval-ultima { font-size: var(--ff-text-xs); color: var(--ff-text-muted); }
.aval-banner { background: var(--ff-warn-bg); color: var(--ff-warn-fg); border: 1px solid var(--amarelo);
  border-radius: var(--ff-radius); padding: 10px 14px; font-size: var(--ff-text-sm); margin: 12px 0; }
.aval-banner code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: .9em; }

.aval-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.aval-metric { background: var(--ff-white); border: 1px solid var(--cinza-borda); border-radius: var(--ff-radius-lg);
  box-shadow: var(--ff-shadow-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.aval-metric-lbl { font-size: var(--ff-text-xs); color: var(--ff-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.aval-metric-val { font-size: var(--ff-text-3xl); font-weight: 700; color: var(--verde-dark); line-height: 1.1; }
.aval-metric-stars { font-size: var(--ff-text-sm); color: var(--amarelo); letter-spacing: 1px; }

.aval-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.aval-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--cinza-borda);
  background: var(--ff-white); border-radius: var(--ff-radius-pill); padding: 7px 14px; cursor: pointer;
  font-size: var(--ff-text-sm); font-weight: 500; color: var(--ff-text); transition: .15s; }
.aval-pill:hover { box-shadow: var(--ff-shadow-card); transform: translateY(-1px); }
.aval-pill b { font-size: var(--ff-text-base); font-weight: 700; }
.aval-pill--urgente    { border-left: 4px solid #d64545; } .aval-pill--urgente b    { color: #d64545; }
.aval-pill--reclamacao { border-left: 4px solid #e08a00; } .aval-pill--reclamacao b { color: #e08a00; }
.aval-pill--neutro     { border-left: 4px solid #9ca3af; } .aval-pill--neutro b     { color: #6b7280; }
.aval-pill--elogio     { border-left: 4px solid var(--verde); } .aval-pill--elogio b { color: var(--verde); }

.aval-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.aval-input { padding: 8px 12px; border: 1px solid var(--cinza-borda); border-radius: var(--ff-radius);
  font-size: var(--ff-text-sm); background: var(--ff-white); color: var(--ff-text); }
#aval-busca { flex: 1 1 240px; } #aval-loja-filtro { flex: 0 1 280px; }
.aval-chips { display: inline-flex; gap: 4px; background: var(--cinza-bg); padding: 3px; border-radius: var(--ff-radius-pill); }
.aval-chip { position: relative; }
.aval-chip input { position: absolute; opacity: 0; pointer-events: none; }
.aval-chip span { display: inline-block; padding: 5px 11px; border-radius: var(--ff-radius-pill);
  font-size: var(--ff-text-sm); color: var(--ff-text-muted); cursor: pointer; transition: .12s; }
.aval-chip input:checked + span { background: var(--verde); color: #fff; font-weight: 600; }
.aval-filtros-info { font-size: var(--ff-text-xs); color: var(--ff-text-muted); margin: 8px 0 16px; }
.aval-filtros-info span { color: var(--verde-dark); font-weight: 500; }

.aval-body { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.aval-lista { display: flex; flex-direction: column; gap: 10px; }
.aval-loading, .aval-info { padding: 24px; text-align: center; color: var(--ff-text-muted); font-size: var(--ff-text-sm); }

.aval-card { background: var(--ff-white); border: 1px solid var(--cinza-borda); border-left: 4px solid #9ca3af;
  border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-card); padding: 14px 16px; }
.aval-card--urgente    { border-left-color: #d64545; }
.aval-card--reclamacao { border-left-color: #e08a00; }
.aval-card--neutro     { border-left-color: #9ca3af; }
.aval-card--elogio     { border-left-color: var(--verde); }
.aval-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.aval-autor { font-weight: 600; font-size: var(--ff-text-base); color: var(--ff-text); }
.aval-meta { font-size: var(--ff-text-xs); color: var(--ff-text-muted); margin-top: 2px; }
.aval-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.aval-stars { color: var(--amarelo); font-size: var(--ff-text-base); letter-spacing: 1px; }
.aval-badge { font-size: var(--ff-text-2xs); font-weight: 600; padding: 2px 8px; border-radius: var(--ff-radius-pill); }
.aval-badge--urgente    { background: #fdecec; color: #d64545; }
.aval-badge--reclamacao { background: var(--ff-warn-bg); color: #b45309; }
.aval-badge--neutro     { background: var(--cinza-bg); color: #6b7280; }
.aval-badge--elogio     { background: var(--verde-light); color: var(--verde-dark); }
.aval-texto { font-size: var(--ff-text-sm); color: #374151; margin: 10px 0; line-height: 1.5; }
.aval-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-top: 1px solid var(--cinza-borda); padding-top: 9px; font-size: var(--ff-text-xs); color: var(--ff-text-muted); flex-wrap: wrap; }
.aval-reclass select { margin-left: 5px; padding: 3px 6px; border: 1px solid var(--cinza-borda);
  border-radius: var(--ff-radius-sm); font-size: var(--ff-text-xs); background: var(--ff-white); }

.aval-paginacao { display: flex; gap: 5px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.aval-pg { min-width: 34px; padding: 6px 10px; border: 1px solid var(--cinza-borda); background: var(--ff-white);
  border-radius: var(--ff-radius-sm); cursor: pointer; font-size: var(--ff-text-sm); color: var(--ff-text); }
.aval-pg:hover:not(:disabled) { border-color: var(--verde); color: var(--verde-dark); }
.aval-pg.active { background: var(--verde); color: #fff; border-color: var(--verde); font-weight: 600; }
.aval-pg:disabled { opacity: .4; cursor: default; }

.aval-col-side { display: flex; flex-direction: column; gap: 14px; }
.aval-side-card { background: var(--ff-white); border: 1px solid var(--cinza-borda); border-radius: var(--ff-radius-lg);
  box-shadow: var(--ff-shadow-card); padding: 14px 16px; }
.aval-side-card h3 { font-size: var(--ff-text-sm); color: var(--ff-text); margin: 0 0 10px; font-weight: 600; }
.aval-chart-wrap { position: relative; height: 170px; }
.aval-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.aval-tab { flex: 1; padding: 6px; border: 1px solid var(--cinza-borda); background: var(--ff-white);
  border-radius: var(--ff-radius-sm); cursor: pointer; font-size: var(--ff-text-xs); color: var(--ff-text-muted); }
.aval-tab.active { background: var(--verde); color: #fff; border-color: var(--verde); font-weight: 600; }
.aval-ranking { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.aval-rank-item { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: var(--ff-radius-sm); cursor: pointer; }
.aval-rank-item:hover { background: var(--cinza-bg); }
.aval-rank-nome { font-size: var(--ff-text-xs); color: var(--ff-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aval-rank-nota { font-size: var(--ff-text-xs); font-weight: 600; color: var(--verde-dark); white-space: nowrap; }
.aval-rank-nota span { color: var(--ff-text-muted); font-weight: 400; }

.aval-api-card .aval-api-head { display: flex; justify-content: space-between; font-size: var(--ff-text-xs);
  color: var(--ff-text-muted); margin-bottom: 6px; }
.aval-api-bar { height: 7px; background: var(--cinza-bg); border-radius: var(--ff-radius-pill); overflow: hidden; }
.aval-api-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--verde) 0%, var(--verde-mid) 100%); border-radius: var(--ff-radius-pill); transition: width .4s; }
.aval-api-foot { display: flex; justify-content: space-between; font-size: var(--ff-text-2xs); color: var(--ff-text-muted); margin-top: 6px; }

@media (max-width: 880px) {
  .aval-metrics { grid-template-columns: repeat(2, 1fr); }
  .aval-body { grid-template-columns: 1fr; }
}

/* Avaliações — aba de consulta de lojas (substitui a planilha) */
.aval-consulta-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.aval-consulta-head #aval-consulta-busca { flex: 1 1 320px; }
.aval-consulta-info { font-size: var(--ff-text-xs); color: var(--ff-text-muted); }
.aval-tabela-wrap { background: var(--ff-white); border: 1px solid var(--cinza-borda); border-radius: var(--ff-radius-lg);
  box-shadow: var(--ff-shadow-card); overflow: auto; }
.aval-tabela { width: 100%; border-collapse: collapse; font-size: var(--ff-text-sm); }
.aval-tabela thead th { position: sticky; top: 0; background: var(--cinza-bg); color: var(--ff-text-muted);
  text-align: left; font-weight: 600; font-size: var(--ff-text-xs); text-transform: uppercase; letter-spacing: .03em;
  padding: 9px 12px; border-bottom: 1px solid var(--cinza-borda); white-space: nowrap; }
.aval-tabela tbody td { padding: 9px 12px; border-bottom: 1px solid var(--cinza-borda); color: var(--ff-text); vertical-align: top; }
.aval-tabela tbody tr:last-child td { border-bottom: 0; }
.aval-tabela tbody tr:hover { background: var(--verde-light); }
.aval-nota-cell { font-weight: 600; color: var(--verde-dark); white-space: nowrap; }
.aval-pid { font-family: ui-monospace, monospace; font-size: var(--ff-text-xs); background: var(--cinza-bg);
  padding: 2px 6px; border-radius: var(--ff-radius-sm); color: var(--ff-text); }
.aval-sem { font-size: var(--ff-text-xs); color: #b45309; background: var(--ff-warn-bg); padding: 2px 7px; border-radius: var(--ff-radius-pill); }
.aval-end { max-width: 320px; font-size: var(--ff-text-xs); color: var(--ff-text-muted); }
.aval-tabela a { color: var(--verde-dark); text-decoration: none; font-weight: 500; white-space: nowrap; }
.aval-tabela a:hover { text-decoration: underline; }

/* Avaliações — tags de temas no card */
.aval-temas { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.aval-tema { font-size: var(--ff-text-2xs); color: var(--verde-dark); background: var(--verde-light);
  border: 1px solid var(--verde-mid); padding: 1px 8px; border-radius: var(--ff-radius-pill); }

/* Avaliações — DOC-SAA-001: indicadores, Pendente, tratativas, modal */
.aval-metric-sub { font-size: var(--ff-text-2xs); color: var(--ff-text-muted); }
.aval-badge--pendente { background: #ede9fe; color: #6d28d9; }
.aval-card--pendente { border-left-color: #8b5cf6; }
.aval-pill--pendente { border-left: 4px solid #8b5cf6; } .aval-pill--pendente b { color: #6d28d9; }

.aval-tab-badge { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px; border-radius: var(--ff-radius-pill);
  background: #d64545; color: #fff; font-size: var(--ff-text-2xs); font-weight: 700; line-height: 16px; text-align: center; }

.aval-foot-acoes { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aval-trat-btn { font-size: var(--ff-text-xs); font-weight: 600; padding: 3px 9px; border-radius: var(--ff-radius-pill);
  border: 1px solid var(--cinza-borda); background: var(--ff-white); color: var(--ff-text); cursor: pointer; }
button.aval-trat-btn:hover { border-color: var(--verde); }
.aval-trat-btn--emaberto    { background: #fdecec; color: #d64545; border-color: #f5b5b5; }
.aval-trat-btn--emandamento { background: var(--ff-warn-bg); color: #b45309; border-color: #f0d68a; }
.aval-trat-btn--concluida   { background: var(--verde-light); color: var(--verde-dark); border-color: var(--verde-mid); }
.aval-trat-resumo { font-size: var(--ff-text-xs); color: #374151; background: var(--cinza-bg);
  border-radius: var(--ff-radius-sm); padding: 7px 10px; margin: 0 0 10px; }

.aval-trat-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.aval-trat-counts { display: flex; gap: 10px; flex-wrap: wrap; }
.aval-trat-cnt { font-size: var(--ff-text-sm); color: var(--ff-text-muted); padding: 5px 12px; border-radius: var(--ff-radius-pill);
  border: 1px solid var(--cinza-borda); background: var(--ff-white); }
.aval-trat-cnt b { font-weight: 700; margin-left: 4px; }
.aval-trat-cnt--emaberto b    { color: #d64545; }
.aval-trat-cnt--emandamento b { color: #b45309; }
.aval-trat-cnt--concluida b   { color: var(--verde-dark); }
.aval-trat-filtros { display: flex; gap: 8px; flex-wrap: wrap; }

.aval-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center;
  justify-content: center; z-index: 1000; padding: 20px; }
.aval-modal { background: var(--ff-white); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-modal);
  width: 100%; max-width: 540px; max-height: 90vh; display: flex; flex-direction: column; }
.aval-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--cinza-borda); }
.aval-modal-head h3 { margin: 0; font-size: var(--ff-text-lg); color: var(--ff-text); }
.aval-modal-x { background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--ff-text-muted); }
.aval-modal-body { padding: 16px 18px; overflow-y: auto; }
.aval-modal-review { background: var(--cinza-bg); border-radius: var(--ff-radius); padding: 10px 12px; margin-bottom: 14px; }
.aval-modal-review .aval-texto { margin: 8px 0 0; }
.aval-modal-lbl { display: block; font-size: var(--ff-text-xs); font-weight: 600; color: var(--ff-text-muted);
  text-transform: uppercase; letter-spacing: .03em; margin: 0 0 5px; }
.aval-modal-textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--cinza-borda); border-radius: var(--ff-radius);
  font-size: var(--ff-text-sm); font-family: inherit; resize: vertical; margin-bottom: 14px; }
.aval-modal-data { font-size: var(--ff-text-xs); color: var(--ff-text-muted); margin-top: 8px; }
.aval-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--cinza-borda); }

/* Avaliações — Consolidado, Ranking e Detalhe da loja (DOC-SAA-001 §5.2-5.4) */
.aval-cons-bar, .aval-rank-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
/* SearchSelect — dropdown único com busca (veste um <select> nativo) */
.ss { position: relative; display: inline-block; }
.ss-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; min-width: 190px; background: #fff; }
.ss-trigger .ss-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-caret { color: #8a90a0; font-size: 11px; flex-shrink: 0; }
.ss-panel { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%; max-width: 340px; background: #fff; border: 1px solid #d7dce3; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); overflow: hidden; }
.ss-search { padding: 6px; border-bottom: 1px solid #eef1f5; }
.ss-search input { width: 100%; border: 1px solid #d7dce3; border-radius: 6px; padding: 6px 8px; font-size: 13px; box-sizing: border-box; }
.ss-list { max-height: 264px; overflow-y: auto; }
.ss-opt { padding: 7px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-opt:hover { background: #f0f6ff; }
.ss-opt.is-sel { background: #e8f2ff; font-weight: 600; }
.ss-empty { padding: 10px 12px; color: #8a90a0; font-size: 13px; }
/* Card "Reputação por supervisor" (leaderboard na Visão geral) */
.aval-supb-card { margin-bottom: 16px; }
.aval-supb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.aval-supb-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #8a90a0; font-weight: 700; padding: 4px 10px; border-bottom: 1px solid #eceff3; }
.aval-supb-table th:nth-child(n+3), .aval-supb-table td:nth-child(n+3) { text-align: center; }
.aval-supb-row { cursor: pointer; transition: background .12s; }
.aval-supb-row:hover { background: #f5f8fc; }
.aval-supb-row td { padding: 8px 10px; border-bottom: 1px solid #f2f4f7; }
.aval-supb-nome { font-weight: 700; color: var(--ff-text, #2b3140); }
.aval-supb-num { color: #4b5563; }
.aval-supb-crit { display: inline-block; background: #fde7e3; color: #b42318; font-weight: 700; border-radius: 8px; padding: 0 8px; }
.aval-supb-trat { position: relative; min-width: 110px; }
.aval-supb-trat b { position: relative; z-index: 1; }
.aval-supb-bar { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); height: 60%; background: #fde4c7; border-radius: 4px; z-index: 0; max-width: calc(100% - 26px); }
.aval-estados { display: flex; gap: 6px; flex-wrap: wrap; }
.aval-estado-chip { border: 1px solid var(--cinza-borda); background: var(--ff-white); color: var(--ff-text-muted);
  border-radius: var(--ff-radius-pill); padding: 5px 12px; font-size: var(--ff-text-sm); cursor: pointer; }
.aval-estado-chip b { color: var(--ff-text); font-weight: 700; margin-left: 3px; }
.aval-estado-chip.active { background: var(--verde); color: #fff; border-color: var(--verde); }
.aval-estado-chip.active b { color: #fff; }
.aval-rank-tools { display: flex; gap: 8px; flex-wrap: wrap; }

.aval-cons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.aval-evolutivo-card .aval-chart-wrap--wide { height: 220px; }
.aval-temas-rank { display: flex; flex-direction: column; gap: 7px; }
.aval-tema-rank { display: grid; grid-template-columns: 1fr 90px 28px; align-items: center; gap: 8px; font-size: var(--ff-text-xs); }
.aval-tema-rank-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ff-text); }
.aval-tema-rank-bar { background: var(--cinza-bg); border-radius: var(--ff-radius-pill); height: 8px; overflow: hidden; }
.aval-tema-rank-fill { display: block; height: 100%; border-radius: var(--ff-radius-pill); }
.aval-tema-rank-fill--neg { background: #d64545; }
.aval-tema-rank-fill--pos { background: var(--verde); }
.aval-tema-rank-n { text-align: right; font-weight: 600; color: var(--ff-text-muted); }
.aval-trat-panel { display: flex; flex-direction: column; gap: 6px; }
.aval-trat-row { display: flex; justify-content: space-between; font-size: var(--ff-text-sm); padding: 4px 0; border-bottom: 1px solid var(--cinza-borda); }
.aval-trat-row b { font-weight: 700; } .aval-c-r { color: #d64545; } .aval-c-a { color: #b45309; } .aval-c-g { color: var(--verde-dark); }
.aval-trat-pct { margin-top: 8px; font-size: var(--ff-text-sm); color: var(--ff-text-muted); }
.aval-trat-pct b { color: var(--verde-dark); font-size: var(--ff-text-lg); margin-left: 4px; }
.aval-trat-pctbar { display: block; height: 7px; background: var(--cinza-bg); border-radius: var(--ff-radius-pill); margin-top: 5px; overflow: hidden; }
.aval-trat-pctbar span { display: block; height: 100%; background: var(--verde); }

/* Ranking table */
.aval-tabela--rank tbody tr { cursor: pointer; }
.aval-rank-pos { color: var(--ff-text-muted); font-weight: 600; }
.aval-rank-loja { font-weight: 600; color: var(--ff-text); }
.aval-rank-cidade { font-size: var(--ff-text-xs); color: var(--ff-text-muted); }
.aval-nota-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.aval-pos { color: var(--verde-dark); font-weight: 600; } .aval-neg { color: #d64545; font-weight: 600; }
.aval-st { font-size: var(--ff-text-2xs); font-weight: 600; padding: 2px 8px; border-radius: var(--ff-radius-pill); white-space: nowrap; }
.aval-st--urg { background: #fdecec; color: #d64545; } .aval-st--pend { background: #ede9fe; color: #6d28d9; } .aval-st--ok { background: var(--verde-light); color: var(--verde-dark); }

/* Detalhe da loja (overlay) */
.aval-detalhe { position: fixed; inset: 0; background: var(--cinza-bg); z-index: 900; display: flex; flex-direction: column; overflow: hidden; }
.aval-det-head { display: flex; align-items: center; gap: 16px; padding: 14px 22px; background: var(--ff-white); border-bottom: 1px solid var(--cinza-borda); box-shadow: var(--ff-shadow-card); }
.aval-det-voltar { background: none; border: 1px solid var(--cinza-borda); border-radius: var(--ff-radius); padding: 6px 12px; cursor: pointer; font-size: var(--ff-text-sm); color: var(--ff-text); white-space: nowrap; }
.aval-det-voltar:hover { border-color: var(--verde); color: var(--verde-dark); }
.aval-det-titulo { flex: 1; min-width: 0; }
.aval-det-titulo h2 { margin: 0; font-size: var(--ff-text-2xl); color: var(--ff-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aval-det-titulo p { margin: 2px 0 0; font-size: var(--ff-text-sm); color: var(--ff-text-muted); }
.aval-det-maps { color: var(--verde-dark); font-weight: 600; font-size: var(--ff-text-sm); text-decoration: none; white-space: nowrap; }
.aval-det-maps:hover { text-decoration: underline; }
.aval-det-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.aval-det-cards { margin-bottom: 16px; }
.aval-det-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.aval-det-col-main { display: flex; flex-direction: column; gap: 12px; }
.aval-det-col-side { display: flex; flex-direction: column; gap: 14px; }
.aval-temas-filtro { display: flex; flex-wrap: wrap; gap: 6px; }
.aval-tema-btn { border: 1px solid var(--cinza-borda); background: var(--ff-white); border-radius: var(--ff-radius-pill); padding: 4px 11px; font-size: var(--ff-text-xs); cursor: pointer; color: var(--ff-text); }
.aval-tema-btn b { font-weight: 700; margin-left: 3px; }
.aval-tema-btn--neg { border-left: 3px solid #d64545; } .aval-tema-btn--pos { border-left: 3px solid var(--verde); } .aval-tema-btn--mix { border-left: 3px solid #f5c842; }
.aval-tema-btn.active { background: var(--verde); color: #fff; border-color: var(--verde); }
.aval-tema-btn.active b { color: #fff; }
.aval-subproblemas { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cinza-borda); }
.aval-subprob-titulo { font-size: var(--ff-text-xs); font-weight: 600; color: #b45309; margin-bottom: 8px; }
.aval-subprob-row { display: grid; grid-template-columns: 1fr 100px 34px; align-items: center; gap: 8px; font-size: var(--ff-text-xs); margin-bottom: 5px; }
.aval-subprob-bar { background: var(--cinza-bg); border-radius: var(--ff-radius-pill); height: 8px; overflow: hidden; }
.aval-subprob-bar span { display: block; height: 100%; background: #e08a00; }
.aval-subprob-pct { text-align: right; font-weight: 600; color: var(--ff-text-muted); }
.aval-resumo-temas { display: flex; flex-direction: column; gap: 12px; }
.aval-resumo-lbl { display: block; font-size: var(--ff-text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.aval-resumo-lbl--pos { color: var(--verde-dark); } .aval-resumo-lbl--neg { color: #d64545; }
.aval-resumo-chip { display: inline-block; font-size: var(--ff-text-xs); padding: 2px 9px; border-radius: var(--ff-radius-pill); margin: 0 5px 5px 0; }
.aval-resumo-chip--pos { background: var(--verde-light); color: var(--verde-dark); } .aval-resumo-chip--neg { background: #fdecec; color: #d64545; }
.aval-resumo-chip b { font-weight: 700; }

@media (max-width: 980px) {
  .aval-cons-grid { grid-template-columns: 1fr 1fr; }
  .aval-det-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .aval-cons-grid { grid-template-columns: 1fr; } }

/* (marca d'água removida a pedido) */

/* Tratativa — prazo */
.aval-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.aval-modal-row .aval-input { width: 100%; }
.aval-prazo { font-size: var(--ff-text-2xs); font-weight: 600; color: var(--ff-text-muted); background: var(--cinza-bg);
  border-radius: var(--ff-radius-pill); padding: 2px 9px; white-space: nowrap; }
.aval-prazo--venc { background: #fdecec; color: #d64545; }

/* Cadastro de lojas */
.aval-cad-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.aval-cad-head #aval-cad-busca { flex: 1 1 280px; }
.aval-cad-dica { font-size: var(--ff-text-xs); color: var(--ff-text-muted); margin: 0 0 12px; }
.aval-tabela--cad td { vertical-align: middle; padding: 5px 8px; }
.aval-cad-cod { font-family: ui-monospace, monospace; font-size: var(--ff-text-xs); color: var(--ff-text-muted); }
.aval-cad-inp { width: 100%; min-width: 90px; padding: 5px 7px; border: 1px solid var(--cinza-borda); border-radius: var(--ff-radius-sm);
  font-size: var(--ff-text-xs); background: var(--ff-white); color: var(--ff-text); }
.aval-cad-inp:focus { outline: none; border-color: var(--verde); }
.aval-cad-sm { min-width: 80px; } .aval-cad-uf { width: 46px; min-width: 46px; text-transform: uppercase; }
.aval-cad-pid { font-family: ui-monospace, monospace; min-width: 150px; }
.aval-cad-acoes { display: flex; gap: 5px; white-space: nowrap; }
.aval-mini { font-size: var(--ff-text-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--ff-radius-sm);
  border: 1px solid var(--verde); background: var(--verde); color: #fff; cursor: pointer; }
.aval-mini:hover { background: var(--verde-dark); }
.aval-mini--ghost { background: var(--ff-white); color: var(--verde-dark); }
.aval-mini--ghost:hover { background: var(--verde-light); }
.aval-cad-flash td { animation: avalCadFlash 0.9s ease; }
@keyframes avalCadFlash { 0% { background: var(--verde-light); } 100% { background: transparent; } }

/* Pedido avulso (Flash) — tabela multi-pessoa */
.benef-ped-wrap { overflow-x: auto; max-height: 52vh; overflow-y: auto; border: 1px solid var(--cinza-borda); border-radius: 8px; }
.benef-ped-tabela { width: 100%; border-collapse: collapse; font-size: 12px; }
.benef-ped-tabela th { text-align: left; font-weight: 600; color: var(--ff-text-muted, #6b7280); padding: 6px 7px; border-bottom: 1px solid var(--cinza-borda); position: sticky; top: 0; background: #fff; white-space: nowrap; z-index: 1; }
.benef-ped-tabela td { padding: 3px 6px; }
.benef-ped-tabela input { width: 100%; padding: 5px 7px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 12px; }
.benef-ped-tabela input:focus { outline: none; border-color: var(--verde, #1a7a4a); }
.benef-ped-tabela .ped-cpf { min-width: 120px; } .benef-ped-tabela .ped-nome { min-width: 170px; }
.benef-ped-tabela .ped-mb, .benef-ped-tabela .ped-mo, .benef-ped-tabela .ped-al { min-width: 92px; text-align: right; }

/* Benefícios — badge de "VT em falta" */
.benef-auditvt-badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 10px; background: #d64545; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.benef-btn-alert { border-color: #d64545 !important; color: #b91c1c; }
/* Alertas da Flash (aba Pagamentos): ativo na base e sem receber */
.benef-alertas { border-left: 4px solid #d64545; margin-bottom: 12px; }
.benef-alertas-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 4px; }
.benef-alerta { display: flex; align-items: flex-start; gap: 8px 12px; padding: 8px 0; border-top: 1px solid #eee; flex-wrap: wrap; }
.benef-alerta-tipo { flex: 0 0 150px; }
.benef-alerta-txt { flex: 1 1 320px; min-width: 0; line-height: 1.4; }
.benef-alerta-acao { flex: 0 0 auto; margin-left: auto; }

/* Avaliações — aba Configurações */
.aval-cfg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.aval-cfg-switch { display: flex; align-items: center; gap: 8px; font-size: var(--ff-text-base); font-weight: 500; margin-bottom: 14px; cursor: pointer; }
.aval-cfg-campo { margin-bottom: 12px; }
.aval-cfg-campo > label { display: block; font-size: var(--ff-text-xs); color: var(--ff-text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.aval-cfg-dias { display: flex; flex-wrap: wrap; gap: 5px; }
.aval-cfg-dia { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ff-text-sm); border: 1px solid var(--cinza-borda); border-radius: var(--ff-radius-pill); padding: 4px 10px; cursor: pointer; }
.aval-cfg-dia input { margin: 0; }
.aval-cfg-hint { font-size: var(--ff-text-xs); color: var(--ff-text-muted); margin: 8px 0 0; line-height: 1.5; }
.aval-cfg-hint code { background: var(--cinza-bg); padding: 1px 5px; border-radius: 4px; }
.aval-cfg-acoes { display: flex; align-items: center; gap: 12px; }
.aval-cfg-msg { font-size: var(--ff-text-sm); font-weight: 500; }
@media (max-width: 900px) { .aval-cfg-grid { grid-template-columns: 1fr; } }

/* Avaliações — botão excluir + log de consultas */
.aval-mini--danger { background: #fff; color: #d64545; border-color: #f0b4b4; }
.aval-mini--danger:hover { background: #fdecec; }
.aval-log-card { margin-top: 16px; }
.aval-log-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.aval-log-head h3 { margin: 0 0 10px; }
.aval-tabela--log tbody tr { cursor: default; }
.aval-log-st { font-size: var(--ff-text-2xs); font-weight: 600; padding: 2px 8px; border-radius: var(--ff-radius-pill); }
.aval-log-st--sucesso { background: var(--verde-light); color: var(--verde-dark); }
.aval-log-st--parcial, .aval-log-st--cota { background: var(--ff-warn-bg); color: #b45309; }
.aval-log-st--offline, .aval-log-st--erro { background: #fdecec; color: #d64545; }

/* Avaliações — log clicável + período */
.aval-log-row { cursor: pointer; }
.aval-log-row:hover { background: var(--verde-light); }
.aval-log-periodo { font-size: var(--ff-text-xs); color: var(--ff-text-muted); white-space: nowrap; }

/* Avaliações — cards/itens clicáveis (Visão geral) */
.aval-clicavel { cursor: pointer; }
.aval-metric.aval-clicavel { transition: box-shadow .12s, transform .12s; }
.aval-metric.aval-clicavel:hover { box-shadow: var(--ff-shadow-hover); transform: translateY(-1px); }
.aval-tema-rank.aval-clicavel, .aval-trat-row.aval-clicavel { border-radius: 6px; padding-left: 4px; padding-right: 4px; transition: background .12s; }
.aval-tema-rank.aval-clicavel:hover, .aval-trat-row.aval-clicavel:hover { background: var(--verde-light); }

/* Avaliações — pill de classificação ativo */
.aval-pill.is-active { background: var(--verde); color: #fff; border-color: var(--verde); }
.aval-pill.is-active b { color: #fff; }
.aval-pill--todas { font-weight: 600; }

/* Avaliações — editor de horários da coleta */
.aval-cfg-horarios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.aval-hora-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--verde-light); color: var(--verde-dark); border: 1px solid var(--verde-mid); border-radius: var(--ff-radius-pill); padding: 3px 6px 3px 11px; font-size: var(--ff-text-sm); font-weight: 600; }
.aval-hora-chip button { border: 0; background: none; color: var(--verde-dark); cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; }
.aval-hora-chip button:hover { color: #d64545; }
.aval-cfg-add-hora { display: flex; gap: 6px; align-items: center; }
.aval-cfg-add-hora .aval-input { width: 130px; }

/* ============================================================
   MOBILE — passada de responsividade (abas roláveis, filtros,
   tabelas, toque). Complementa o shell (que já tem hamburger).
   ============================================================ */
/* Barra de abas: rola na horizontal em vez de estourar/cortar (todas as telas) */
@media (max-width: 700px) {
  .auto-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .auto-tabs::-webkit-scrollbar { display: none; }
  .auto-tab { flex: 0 0 auto; white-space: nowrap; }
}
/* Board "Acompanhamento por supervisor" rola se apertar */
.aval-supb { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  /* Filtros (visão geral / ranking / comentários) ocupam a largura toda e tocáveis */
  .aval-rank-tools { width: 100%; }
  .aval-rank-tools > .aval-input, .aval-rank-tools > .ss { flex: 1 1 46%; min-width: 0; }
  .aval-filtros { width: 100%; }
  #aval-busca { flex: 1 1 100%; }
  .aval-filtros > .ss, .aval-rank-tools > .ss { flex: 1 1 100%; }
  /* SearchSelect vira bloco de largura total; painel não estoura a tela */
  .ss { display: block; width: 100%; }
  .ss-trigger { width: 100%; min-width: 0; }
  .ss-panel { max-width: 92vw; }
  /* Cartões de comentário mais compactos */
  .aval-card { padding: 12px 14px; }
  .aval-card-top { gap: 8px; }
  /* Modal de tratativa quase full-screen */
  .aval-modal { width: 94vw; max-width: 94vw; max-height: 88vh; overflow-y: auto; }
}
/* Métricas: 1 coluna em telas bem estreitas */
@media (max-width: 400px) { .aval-metrics { grid-template-columns: 1fr; } }
/* Alvos de toque confortáveis no celular */
@media (max-width: 640px) {
  .aval-input, .ss-trigger, .auto-tab, .btn-primary, .btn-secondary { min-height: 40px; }
}

/* ── Benefícios · Calculadora avulsa ─────────────────────────────── */
.benef-av-busca-wrap { position: relative; }
.benef-av-sug {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 280px; max-height: 320px;
  overflow-y: auto; background: var(--ff-card, #fff); border: 1px solid var(--ff-border, #e3ebe5);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(16,33,26,.12);
}
.benef-av-sug-item {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 8px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--ff-border, #eef2ef);
}
.benef-av-sug-item:last-child { border-bottom: 0; }
.benef-av-sug-item:hover { background: var(--ff-green-light, #e8f5ee); }
.benef-av-sug-item span { color: var(--ff-text-muted, #6b7280); font-variant-numeric: tabular-nums; font-size: 12px; }
.benef-av-sug-vazio { padding: 10px 12px; font-size: 13px; color: var(--ff-text-muted, #6b7280); }
.benef-av-loading { padding: 20px; color: var(--ff-text-muted, #6b7280); font-size: 14px; }

.benef-av-card { border: 1px solid var(--ff-border, #e3ebe5); border-radius: 12px; padding: 16px; margin-top: 4px; }
.benef-av-pess { padding-bottom: 12px; border-bottom: 1px solid var(--ff-border, #eef2ef); margin-bottom: 14px; }
.benef-av-pess > div:first-child { font-size: 16px; }
.benef-av-cpf { color: var(--ff-text-muted, #6b7280); font-size: 13px; font-variant-numeric: tabular-nums; margin-left: 6px; }
.benef-av-meta { font-size: 12.5px; color: var(--ff-text-muted, #6b7280); margin-top: 3px; }
.benef-av-itens { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .benef-av-itens { grid-template-columns: 1fr; } }
.benef-av-item { border: 1px solid var(--ff-border, #e3ebe5); border-radius: 10px; padding: 12px; background: var(--ff-bg, #f4f7f5); }
.benef-av-item-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.benef-av-item-lab { font-weight: 700; color: var(--ff-brand-green-dark, #0d4a2c); font-size: 14px; }
.benef-av-tag-nf { font-size: 10.5px; font-weight: 600; color: var(--ff-amber-fg, #b45309); background: var(--ff-amber-bg, #fdf1e3); padding: 2px 7px; border-radius: 999px; }
.benef-av-warnico { font-size: 12px; font-weight: 600; color: var(--ff-amber-fg, #b45309); cursor: help; white-space: nowrap; }
.benef-av-memo { font-size: 11px; color: var(--ff-text-muted, #6b7280); line-height: 1.4; margin-top: 4px; max-width: 230px; white-space: normal; }
.benef-cp-benef { border-top: 1px solid var(--ff-border, #e5e7eb); padding-top: 12px; margin-top: 12px; }
.benef-cp-lab { font-weight: 700; font-size: 13px; }
.benef-cp-grid { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.benef-cp-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ff-text-muted, #6b7280); }
.benef-cp-grid input { width: 110px; font-variant-numeric: tabular-nums; }
.benef-cp-comp { font-weight: 700; background: var(--ff-green-bg, #eef8f0); }
.benef-cp-msg { font-size: 12px; color: var(--ff-text-muted, #4b5563); margin-top: 6px; min-height: 16px; }
.benef-av-item-calc { font-size: 12px; color: var(--ff-text-muted, #4b5563); line-height: 1.5; margin-bottom: 10px; }
.benef-av-valfield { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ff-text-muted, #6b7280); font-weight: 600; }
.benef-av-val { width: 130px; font-variant-numeric: tabular-nums; }
.benef-av-alertas { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.benef-av-alertas li { font-size: 11.5px; line-height: 1.45; color: var(--ff-amber-fg, #92500a); background: var(--ff-amber-bg, #fdf1e3); border-radius: 8px; padding: 6px 9px; }
.benef-av-motivo { display: block; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--ff-text-muted, #6b7280); }
.benef-av-motivo input { display: block; width: 100%; margin-top: 4px; }
.benef-av-acoes { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* Pendência: afastado sem data de início/retorno (preencher pelo Yungas). */
.tag-afast-pendente { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #fdecec; color: #9b2226; border: 1px solid #f2b8b5; }


/* ── Tela de Alterações: feed diário do que mudou na base ──────────────────
   Hierarquia: dia > execução do sync > alterações. Cor só onde carrega
   significado (entrada/saída); o resto fica neutro pra não competir. */
.alt-dia { margin-bottom: 26px; }
.alt-dia-hd { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.alt-dia-data { font-size: 15px; font-weight: 700; color: var(--texto, #1a1f2e); }
.alt-dia-n { font-size: 12px; color: var(--cinza-texto, #6b7280); }

/* Bloco "o sync rodou": discreto, é contexto e não evento */
.alt-run { background: var(--cinza-bg, #f4f6f8); border: 1px solid var(--cinza-borda, #dde1e7); border-radius: var(--radius, 10px); padding: 10px 12px; margin-bottom: 12px; }
.alt-run-hd { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cinza-texto, #6b7280); margin-bottom: 6px; }
.alt-run-itens { display: flex; flex-direction: column; gap: 4px; }
.alt-run-item { display: grid; grid-template-columns: minmax(150px, 200px) 1fr auto; gap: 10px; align-items: baseline; font-size: 12.5px; }
.alt-run-passo { font-weight: 600; color: var(--texto, #1a1f2e); }
.alt-run-res { color: var(--cinza-texto, #6b7280); }
.alt-run-hora { color: #9ca3af; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.alt-run-item.is-erro .alt-run-res { color: var(--vermelho, #c0392b); font-weight: 600; }
.alt-run-item.is-dry { opacity: .65; }

/* Feed de alterações */
.alt-feed { list-style: none; margin: 0; padding: 0; }
.alt-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start;
  padding: 9px 10px; border-radius: 8px; border-left: 3px solid transparent; }
.alt-item + .alt-item { border-top: 1px solid #f0f2f5; }
.alt-item:hover { background: #fafbfc; }
.alt-ic { font-size: 13px; line-height: 20px; text-align: center; color: #9ca3af; }
.alt-entrada { border-left-color: var(--verde-mid, #2ea866); background: #f6fbf8; }
.alt-entrada .alt-ic { color: var(--verde, #1a7a4a); }
.alt-status  { border-left-color: #cbd5e1; }
.alt-aviso   { border-left-color: var(--amarelo, #f5c842); }
.alt-aviso .alt-ic { color: #b8860b; }
.alt-transf  { border-left-color: #185fa5; }
.alt-transf .alt-ic { color: #185fa5; }
.alt-afast   { border-left-color: #a78bfa; }
.alt-afast .alt-ic { color: #7c5cd6; }

.alt-l1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.alt-nome { font-weight: 600; font-size: 13.5px; color: var(--texto, #1a1f2e); text-decoration: none; }
.alt-nome:hover { text-decoration: underline; }
.alt-campo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--cinza-texto, #6b7280); }
.alt-l2 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 2px; font-size: 12.5px; }
.alt-de { color: var(--cinza-texto, #6b7280); text-decoration: line-through; text-decoration-color: #d1d5db; }
.alt-seta { color: #9ca3af; }
.alt-para { font-weight: 600; color: var(--texto, #1a1f2e); }
.alt-l3 { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.alt-vazio { color: #b0b6bf; font-style: italic; text-decoration: none; }

.alt-meta { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.alt-hora { font-size: 11.5px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.alt-tag-sync { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #eef5fc; color: #185fa5; border: 1px solid #b5d4f4; }
.alt-tag-portal { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; }
.alt-semmudanca { font-size: 12.5px; color: #9ca3af; font-style: italic; padding: 4px 2px; }

@media (max-width: 700px) {
  .alt-item { grid-template-columns: 22px 1fr; }
  .alt-meta { grid-column: 2; justify-content: flex-start; margin-top: 4px; }
  .alt-run-item { grid-template-columns: 1fr; gap: 2px; }
}

/* Chip do que falta preencher no cadastro recém-incluído */
.pend-falta { display: inline-block; margin: 1px 3px 1px 0; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600;
  background: #fff8ec; color: #8a5a00; border: 1px solid #f4d9a8; }

/* KPIs de Benefícios seguem os filtros — sinaliza pra não confundir com o total do pagamento */
.benef-kpi-flag { display: flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: #fff8ec; color: #8a5a00; border: 1px solid #f4d9a8; align-self: center; margin-right: 4px; }
.benef-kpi-ref { display: block; font-size: 11px; color: var(--cinza-texto, #6b7280); font-weight: 500; margin-top: 2px; }


/* ── Atestados & Advertências (Yungas) ─────────────────────────────────────
   Agrupado por mês. Cor só distingue o TIPO (atestado azul, advertência
   vermelha, feedback neutro); o resto é neutro pra não competir. O código do
   ticket é o elo de auditoria — sempre visível, sempre clicável. */

/* Cards de resumo */
.doc-card { flex: 1 1 150px; min-width: 140px; padding: 12px 14px; border-radius: var(--radius, 10px);
  background: var(--branco, #fff); border: 1px solid var(--cinza-borda, #dde1e7); border-left: 3px solid #cbd5e1; }
.doc-card--atestado    { border-left-color: #185fa5; }
.doc-card--advertencia { border-left-color: var(--vermelho, #c0392b); }
.doc-card--feedback    { border-left-color: #9ca3af; }
.doc-card-top { display: flex; align-items: center; gap: 8px; }
.doc-card-ic { font-size: 15px; opacity: .85; }
.doc-card-n { font-size: 26px; font-weight: 700; line-height: 1; color: var(--texto, #1a1f2e); font-variant-numeric: tabular-nums; }
.doc-card-lbl { font-size: 12.5px; color: var(--cinza-texto, #6b7280); margin-top: 3px; }
.doc-card-pend { font-size: 11.5px; font-weight: 600; color: #9b2226; margin-top: 5px; }
.doc-card-ok   { font-size: 11.5px; color: var(--verde, #1a7a4a); margin-top: 5px; }

/* Grupo por mês */
.doc-grupo { margin-bottom: 24px; }
.doc-grupo-hd { display: flex; align-items: baseline; gap: 9px; margin: 0 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--cinza-borda, #dde1e7); }
.doc-grupo-mes { font-size: 14px; font-weight: 700; color: var(--texto, #1a1f2e); text-transform: capitalize; }
.doc-grupo-n { font-size: 11.5px; color: #9ca3af; }

/* Itens */
.doc-lista { list-style: none; margin: 0; padding: 0; }
.doc-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 11px; align-items: start;
  padding: 10px; border-radius: 8px; border-left: 3px solid transparent; }
.doc-item + .doc-item { border-top: 1px solid #f0f2f5; }
.doc-item:hover { background: #fafbfc; }
.doc-item--atestado    { border-left-color: #b5d4f4; }
.doc-item--advertencia { border-left-color: #f2b8b5; }
.doc-item--feedback    { border-left-color: #e5e7eb; }
.doc-ic { font-size: 14px; line-height: 20px; text-align: center; }

.doc-l1 { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.doc-nome { font-weight: 600; font-size: 13.5px; color: var(--texto, #1a1f2e); text-decoration: none; }
.doc-nome:hover { text-decoration: underline; }
.doc-nome--orfao { color: #9b2226; }
.doc-l2 { margin-top: 3px; font-size: 12.5px; color: var(--texto, #1a1f2e); font-variant-numeric: tabular-nums; }
.doc-ate { color: #9ca3af; }
.doc-l3 { margin-top: 2px; font-size: 11px; color: #9ca3af; }

.doc-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.doc-badge--atestado    { background: #eef5fc; color: #185fa5; border: 1px solid #b5d4f4; }
.doc-badge--advertencia { background: #fdecec; color: #9b2226; border: 1px solid #f2b8b5; }
.doc-badge--feedback    { background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; }
.doc-cid { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: #7c5cd6; border: 1px solid #ddd0f7; background: #f6f2ff; border-radius: 10px; padding: 1px 6px; }
.doc-flag { font-size: 10.5px; font-weight: 600; color: #8a5a00; background: #fff8ec; border: 1px solid #f4d9a8; border-radius: 10px; padding: 1px 7px; }
.doc-flag--aprox { color: #185fa5; background: #eef5fc; border-color: #b5d4f4; }
.doc-alerta { color: #9b2226; font-style: italic; }

.doc-meta { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.doc-anexo { font-size: 13px; opacity: .7; }
.doc-ticket { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11.5px; color: #185fa5;
  text-decoration: none; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--cinza-borda, #dde1e7); background: var(--cinza-bg, #f4f6f8); }
.doc-ticket:hover { border-color: #b5d4f4; background: #eef5fc; }
.doc-ext { opacity: .5; margin-left: 3px; }

@media (max-width: 760px) {
  .doc-item { grid-template-columns: 22px 1fr; }
  .doc-meta { grid-column: 2; justify-content: flex-start; margin-top: 6px; }
}

/* Conferência Yungas × Domínio */
.conf-card { flex: 1 1 170px; min-width: 160px; padding: 12px 14px; border-radius: var(--radius, 10px);
  background: var(--branco, #fff); border: 1px solid var(--cinza-borda, #dde1e7); border-left: 3px solid #cbd5e1; }
.conf-card--ok     { border-left-color: var(--verde-mid, #2ea866); }
.conf-card--warn   { border-left-color: var(--amarelo, #f5c842); }
.conf-card--neutro { border-left-color: #cbd5e1; }
.conf-card-n { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.conf-card-l { font-size: 12.5px; font-weight: 600; margin-top: 3px; }
.conf-card-h { font-size: 11px; color: var(--cinza-texto, #6b7280); margin-top: 3px; }
.conf-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; font-size: 11px; font-weight: 700; }
.conf-ic--ok     { background: #e8f5ee; color: var(--verde, #1a7a4a); }
.conf-ic--warn   { background: #fff8ec; color: #8a5a00; }
.conf-ic--neutro { background: #f3f4f6; color: #6b7280; }
.conf-row--warn { background: #fffdf7; }
.conf-loja { font-size: 11px; color: #9ca3af; }
.conf-1dia { font-size: 11.5px; color: var(--cinza-texto, #6b7280); }
.conf-dom-ok { color: var(--verde, #1a7a4a); font-weight: 600; font-size: 12.5px; }
.conf-dom-per { font-size: 11px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.conf-nada { color: var(--vermelho, #c0392b); font-size: 12.5px; }
.conf-aguard { color: #8a5a00; font-size: 12.5px; font-style: italic; }

/* Config da sincronização */
.ycfg-aviso { margin: 10px 0; padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
  background: #fff8ec; border: 1px solid #f4d9a8; color: #8a5a00; }
.ycfg-grid { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ycfg-switch { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.ycfg-campo { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ycfg-status { margin-top: 10px; font-size: 12.5px; }
.ycfg-ok { color: var(--verde, #1a7a4a); font-weight: 600; }

/* ═══ MEDALHAS (Programa de Assiduidade) ═══════════════════════════════════
   O supervisor varre a lista procurando o que está errado, então a linha é
   densa e escaneável e o "porquê" só abre quando ele para em alguém.
   A régua do tempo de casa é a peça central: a faixa não é um rótulo solto,
   é uma posição entre 6 meses e 3 anos — e assim "quando essa pessoa sobe?"
   se responde de relance. As faixas usam a cor do próprio metal, que é como
   a operação já fala delas. */

.med-banner { background: #fff8e6; border: 1px solid #e5c76a; border-left: 4px solid #d9a521;
  color: #6b5310; border-radius: var(--ff-radius-md); padding: 12px 16px; margin-bottom: 16px;
  font-size: var(--ff-text-sm); line-height: 1.5; }
.med-banner a { color: #8a6d10; font-weight: 600; }

/* ── painel de faixas ─────────────────────────────────────────────────── */
.med-faixas-painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 12px; }
.med-faixa-card { background: var(--ff-white); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-lg, 12px); padding: 14px; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas:
    'medal nome' 'medal qtd' 'info info' 'total total';
  gap: 2px 10px; align-items: center; transition: border-color .15s, box-shadow .15s; font: inherit; }
.med-faixa-card:hover { box-shadow: var(--ff-shadow-card); }
.med-faixa-card.is-on { border-width: 2px; }
.med-faixa-medal { grid-area: medal; width: 34px; height: 34px; border-radius: 50%; display: block; }
.med-faixa-nome { grid-area: nome; font-size: var(--ff-text-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ff-text-muted); font-weight: 600; }
.med-faixa-qtd { grid-area: qtd; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.med-faixa-info { grid-area: info; font-size: 11px; color: var(--ff-text-muted); margin-top: 6px; }
.med-faixa-total { grid-area: total; font-size: var(--ff-text-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; }

.med-faixa-card--bronze   .med-faixa-medal { background: linear-gradient(145deg,#d8a06a,#a9682f); }
.med-faixa-card--prata    .med-faixa-medal { background: linear-gradient(145deg,#dfe4e8,#9aa5ad); }
.med-faixa-card--ouro     .med-faixa-medal { background: linear-gradient(145deg,#f2d472,#c9a017); }
.med-faixa-card--diamante .med-faixa-medal { background: linear-gradient(145deg,#bfe6f7,#5aa8cc); }
.med-faixa-card--bronze.is-on   { border-color: #a9682f; }
.med-faixa-card--prata.is-on    { border-color: #9aa5ad; }
.med-faixa-card--ouro.is-on     { border-color: #c9a017; }
.med-faixa-card--diamante.is-on { border-color: #5aa8cc; }

/* ── KPIs ─────────────────────────────────────────────────────────────── */
.med-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-bottom: 16px; }
.med-kpi { background: var(--ff-white); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-lg, 12px); padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.med-kpi--click { cursor: pointer; }
.med-kpi--click:hover { border-color: var(--verde-mid); }
.med-kpi--warn { border-left: 3px solid #d9a521; }
.med-kpi-lbl { font-size: var(--ff-text-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ff-text-muted); }
.med-kpi-val { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.med-kpi-sub { font-size: 11px; color: var(--ff-text-muted); }

/* ── barra de filtros ─────────────────────────────────────────────────── */
.med-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.med-input { border: 1px solid var(--ff-border); border-radius: var(--ff-radius-md);
  padding: 8px 10px; font: inherit; font-size: var(--ff-text-sm); background: var(--ff-white);
  color: var(--ff-text); }
.med-input:focus-visible { outline: 2px solid var(--verde-mid); outline-offset: 1px; }
.med-input--busca { flex: 1 1 200px; min-width: 160px; }
.med-visao { display: inline-flex; background: var(--cinza-bg); border: 1px solid var(--ff-border);
  border-radius: 999px; padding: 2px; }
.med-visao-btn { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px;
  cursor: pointer; font: inherit; font-size: var(--ff-text-sm); color: var(--ff-text-muted); }
.med-visao-btn.is-active { background: var(--ff-white); color: var(--ff-text); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.med-chip { background: var(--verde-light); color: var(--verde-dark); border: 1px solid var(--verde-mid);
  border-radius: 999px; padding: 5px 12px; font-size: var(--ff-text-xs); cursor: pointer; white-space: nowrap; }
.med-contagem { margin-left: auto; font-size: var(--ff-text-xs); color: var(--ff-text-muted);
  font-variant-numeric: tabular-nums; }

/* ── lista e card ─────────────────────────────────────────────────────── */
.med-lista { display: flex; flex-direction: column; gap: 8px; }
.med-vazio { color: var(--ff-text-muted); padding: 40px; text-align: center; }

.med-card { background: var(--ff-white); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-md); overflow: hidden; transition: box-shadow .15s; }
.med-card:hover, .med-card.is-open { box-shadow: var(--ff-shadow-card); }
.med-card--fora { background: #fafbfc; }
.med-card--fora .med-nome { color: var(--ff-text-muted); }

.med-card-head { display: grid; grid-template-columns: 40px minmax(140px, 1.1fr) minmax(180px, 1.4fr) auto 20px;
  gap: 14px; align-items: center; padding: 12px 16px; cursor: pointer; }
.med-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--ff-text-sm); font-weight: 700; color: #fff; letter-spacing: .02em; }
.med-avatar--bronze   { background: linear-gradient(145deg,#d8a06a,#a9682f); }
.med-avatar--prata    { background: linear-gradient(145deg,#c4cbd2,#7d8892); }
.med-avatar--ouro     { background: linear-gradient(145deg,#e8c65a,#b4900f); }
.med-avatar--diamante { background: linear-gradient(145deg,#8fd0ea,#3f8fb5); }
.med-avatar--nenhuma  { background: #c8cdd4; color: #fff; }

.med-ident { display: flex; flex-direction: column; min-width: 0; }
.med-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.med-sub { font-size: 11px; color: var(--ff-text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* ── régua do tempo de casa ───────────────────────────────────────────── */
.med-regua { min-width: 0; }
.med-regua--vazia { font-size: 11px; color: var(--ff-red); font-style: italic; }
.med-regua-trilho { position: relative; height: 6px; background: var(--cinza-bg);
  border-radius: 999px; overflow: visible; }
.med-regua-preenchido { position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: #c8cdd4; transition: width .3s; }
.med-regua-preenchido--bronze   { background: linear-gradient(90deg,#d8a06a,#a9682f); }
.med-regua-preenchido--prata    { background: linear-gradient(90deg,#c4cbd2,#7d8892); }
.med-regua-preenchido--ouro     { background: linear-gradient(90deg,#e8c65a,#b4900f); }
.med-regua-preenchido--diamante { background: linear-gradient(90deg,#8fd0ea,#3f8fb5); }
.med-marco { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ff-white); border: 2px solid var(--ff-border);
  transform: translate(-50%, -50%); }
.med-marco.atingido { border-color: transparent; }
.med-marco--bronze.atingido   { background: #a9682f; }
.med-marco--prata.atingido    { background: #7d8892; }
.med-marco--ouro.atingido     { background: #b4900f; }
.med-marco--diamante.atingido { background: #3f8fb5; }
.med-regua-legenda { display: flex; gap: 8px; justify-content: space-between;
  margin-top: 6px; font-size: 11px; white-space: nowrap; }
.med-tempo { color: var(--ff-text); font-weight: 500; }
.med-prox { color: var(--ff-text-muted); }
.med-prox--topo { color: #3f8fb5; }

/* ── direita: etiquetas e valor ───────────────────────────────────────── */
.med-direita { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.med-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.med-valor { display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.med-nao { color: var(--ff-text-muted); font-size: var(--ff-text-sm); }
.med-chevron { color: var(--ff-text-muted); text-align: center; }

.med-medalha { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.med-medalha--bronze   { background: #f6e6d6; color: #8a5a2b; }
.med-medalha--prata    { background: #eaeef1; color: #5b6670; }
.med-medalha--ouro     { background: #fbefc4; color: #8a6d10; }
.med-medalha--diamante { background: #ddf0fa; color: #1d6c8f; }

.med-tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; }
.med-tag--ok   { background: var(--verde-light); color: var(--verde-dark); border-color: var(--verde-mid); }
.med-tag--no   { background: var(--ff-red-light); color: var(--ff-red); border-color: var(--ff-red); }
.med-tag--pend { background: var(--cinza-bg); color: var(--ff-text-muted); border-color: var(--ff-border); }
.med-tag--warn { background: #fff6e0; color: #8a6d10; border-color: #e5c76a; }
.med-tag--info { background: #eef2ff; color: #4348a8; border-color: #c7cbf5; }
.med-delta { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.med-delta.up   { background: var(--verde-light); color: var(--verde-dark); }
.med-delta.down { background: var(--ff-red-light); color: var(--ff-red); }

/* ── corpo aberto ─────────────────────────────────────────────────────── */
.med-card-body { border-top: 1px solid var(--ff-border); padding: 16px; background: #fafbfc; }
.med-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 14px; }
.med-ficha div { display: flex; flex-direction: column; gap: 2px; }
.med-ficha span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ff-text-muted); }
.med-ficha strong { font-size: var(--ff-text-sm); font-weight: 600; }

.med-motivos { list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-direction: column; gap: 7px; }
.med-motivo { display: grid; grid-template-columns: 16px 130px minmax(0,1fr); gap: 10px;
  font-size: var(--ff-text-sm); align-items: baseline; }
.med-motivo-icone { font-weight: 700; }
.med-motivo.ok .med-motivo-icone { color: var(--verde); }
.med-motivo.no .med-motivo-icone { color: var(--ff-red); }
.med-motivo-crit { text-transform: uppercase; font-size: 10px; letter-spacing: .04em;
  color: var(--ff-text-muted); }
.med-motivo.no .med-motivo-txt { color: var(--ff-red); font-weight: 500; }

.med-acoes { display: flex; gap: 8px; }
.med-validado { font-size: var(--ff-text-sm); color: var(--ff-text-muted);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.med-obs { font-style: italic; color: var(--ff-text); width: 100%; }

/* ── visão por loja ───────────────────────────────────────────────────── */
.med-loja-bloco { background: var(--ff-white); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-md); overflow: hidden; }
.med-loja-head { display: grid; grid-template-columns: 20px minmax(0,1fr) auto auto auto;
  gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; }
.med-loja-head:hover { background: var(--cinza-bg); }
.med-loja-ident { display: flex; flex-direction: column; min-width: 0; }
.med-loja-nome { font-weight: 600; }
.med-loja-sub { font-size: 11px; color: var(--ff-text-muted); }
.med-loja-pills { display: flex; gap: 4px; }
.med-pill { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.med-pill--bronze   { background: #a9682f; }
.med-pill--prata    { background: #7d8892; }
.med-pill--ouro     { background: #b4900f; }
.med-pill--diamante { background: #3f8fb5; }
.med-loja-flags { display: flex; gap: 5px; }
.med-loja-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.med-loja-gente { border-top: 1px solid var(--ff-border); padding: 8px;
  display: flex; flex-direction: column; gap: 6px; background: #fafbfc; }
.med-loja-gente .med-card { border-color: #e8ebee; }

/* ── telas estreitas ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .med-card-head { grid-template-columns: 40px minmax(0,1fr) 20px;
    grid-template-areas: 'avatar ident chevron' 'regua regua regua' 'direita direita direita';
    row-gap: 10px; }
  .med-avatar { grid-area: avatar; } .med-ident { grid-area: ident; }
  .med-regua { grid-area: regua; } .med-direita { grid-area: direita; align-items: flex-start; }
  .med-chevron { grid-area: chevron; }
  .med-loja-head { grid-template-columns: 20px minmax(0,1fr) auto;
    grid-template-areas: 'chev ident total' 'pills pills pills' 'flags flags flags'; row-gap: 8px; }
  .med-loja-head > .med-chevron { grid-area: chev; }
  .med-loja-ident { grid-area: ident; } .med-loja-pills { grid-area: pills; }
  .med-loja-flags { grid-area: flags; } .med-loja-total { grid-area: total; }
  .med-motivo { grid-template-columns: 16px minmax(0,1fr); }
  .med-motivo-crit { grid-column: 2; }
  .med-contagem { margin-left: 0; width: 100%; }
}

/* toggle "mostrar quem não recebe" e seções dentro da loja */
.med-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: var(--ff-text-sm); color: var(--ff-text-muted); user-select: none; }
.med-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.med-toggle-pista { width: 36px; height: 20px; border-radius: 999px; background: var(--ff-border);
  position: relative; transition: background .15s; flex: none; }
.med-toggle-pista::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ff-white); transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.med-toggle input:checked + .med-toggle-pista { background: var(--verde-mid); }
.med-toggle input:checked + .med-toggle-pista::after { transform: translateX(16px); }
.med-toggle input:focus-visible + .med-toggle-pista { outline: 2px solid var(--verde-mid); outline-offset: 2px; }
.med-toggle input:checked ~ .med-toggle-txt { color: var(--ff-text); }

.med-secao { display: flex; flex-direction: column; gap: 6px; }
.med-secao + .med-secao { margin-top: 12px; }
.med-secao-tit { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ff-text-muted); font-weight: 700; padding: 2px 4px 4px;
  display: flex; align-items: center; gap: 6px; }
.med-secao-tit span { background: var(--ff-border); color: var(--ff-text); border-radius: 999px;
  padding: 1px 7px; font-size: 10px; letter-spacing: 0; }
.med-secao--fora .med-secao-tit { border-top: 1px dashed var(--ff-border); padding-top: 10px; }

/* aviso de alcance do perfil na tela de medalhas */
.med-perfil { font-size: var(--ff-text-sm); color: var(--ff-text-muted);
  background: var(--cinza-bg); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-md); padding: 9px 14px; margin-bottom: 12px; }
.med-perfil--escopo { background: var(--verde-light); border-color: var(--verde-mid); color: var(--verde-dark); }

/* ── METAS: reaproveita as classes .med-*, muda só o que é próprio ────────
   Aqui não há faixa nem valor: o veredito é binário, então ele é o elemento
   forte da linha no lugar da medalha. */
.mt-card-head { grid-template-columns: 40px minmax(140px, 1fr) auto auto 20px; }
.mt-avatar--ok { background: linear-gradient(145deg, var(--verde-mid), var(--verde-dark)); }
.mt-avatar--no { background: #c8cdd4; }
.mt-veredito { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.mt-veredito.sim { background: var(--verde-light); color: var(--verde-dark); }
.mt-veredito.nao { background: var(--cinza-bg); color: var(--ff-text-muted); }
.mt-loja-conta { font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--ff-text-muted); }

@media (max-width: 900px) {
  .mt-card-head { grid-template-columns: 40px minmax(0,1fr) 20px;
    grid-template-areas: 'avatar ident chevron' 'tags tags tags' 'veredito veredito veredito'; row-gap: 10px; }
  .mt-card-head > .med-avatar { grid-area: avatar; }
  .mt-card-head > .med-ident { grid-area: ident; }
  .mt-card-head > .med-tags { grid-area: tags; justify-content: flex-start; }
  .mt-card-head > .mt-veredito { grid-area: veredito; justify-self: start; }
  .mt-card-head > .med-chevron { grid-area: chevron; }
}

/* desconto pendente do pagamento anterior, na aba de Metas */
.mt-desc { font-size: 10px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--ff-red-light); color: var(--ff-red); border: 1px solid var(--ff-red);
  font-variant-numeric: tabular-nums; }
.mt-desc-txt { color: var(--ff-red); }
.med-ficha small { font-size: 10px; color: var(--ff-text-muted); }
.mt-kpi--desc { border-left: 3px solid var(--ff-red); }

/* estado da apuração: quando foi feita e se já nasceu velha */
.med-reapurar { font-size: var(--ff-text-xs); color: var(--ff-text-muted); margin-bottom: 10px;
  padding: 7px 12px; border-radius: var(--ff-radius-md); background: #fff8e6;
  border: 1px solid #e5c76a; }
.med-reapurar--ok { background: transparent; border-color: transparent; padding-left: 0; }
.med-reapurar .btn-link { font-size: var(--ff-text-xs); }

/* "N novo(s)" clicável no histórico de sincronização do Yungas */
.ysync-novos { background: none; border: 0; padding: 0; font: inherit; color: var(--verde-dark);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ysync-novos:hover { color: var(--verde-mid); }
.ysync-docs { background: var(--cinza-bg); padding: 10px 14px; }
.tabela--densa th, .tabela--densa td { padding: 5px 8px; font-size: var(--ff-text-xs); }
.ydoc-tipo { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; }
.ydoc-tipo--atestado    { background: #eef2ff; color: #4348a8; }
.ydoc-tipo--advertencia { background: var(--ff-red-light); color: var(--ff-red); }
.ydoc-tipo--feedback    { background: var(--verde-light); color: var(--verde-dark); }

/* documentos sem vínculo: escolher de quem é */
.orf-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.orf-head { grid-template-columns: minmax(0,1fr) auto auto auto; }
.orf-data { font-size: var(--ff-text-xs); color: var(--ff-text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.orf-link { font-size: var(--ff-text-xs); color: var(--verde-dark); white-space: nowrap; }
.orf-cands { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.orf-cand { background: var(--ff-white); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-md); padding: 8px 12px; cursor: pointer; font: inherit;
  text-align: left; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s; }
.orf-cand:hover:not(:disabled) { border-color: var(--verde-mid); background: var(--verde-light); }
.orf-cand:disabled { opacity: .6; cursor: default; }
.orf-cand-nome { font-size: var(--ff-text-sm); font-weight: 600; }
.orf-cand-info { font-size: 10px; color: var(--ff-text-muted); }
.orf-cand--outro { border-style: dashed; justify-content: center; color: var(--ff-text-muted); }

/* "Outra pessoa…" — escolha por nome e loja, com busca */
.orf-outro { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; }
.orf-outro .ss, .orf-outro select { min-width: 320px; flex: 1 1 320px; }

/* O dropdown de "Outra pessoa…" é posicionado fora do fluxo, e o .med-card usa
   overflow:hidden para arredondar os cantos — o painel abria e ficava CORTADO
   pelo card, dando a impressão de que não funcionava. Nos cards que têm o
   seletor, o recorte sai; o arredondamento é mantido pelos filhos. */
.med-card:has(.orf-outro), .med-card.orf-com-select { overflow: visible; }
.orf-cands { position: relative; }
.orf-outro .ss { display: block; }

/* ── Documentos sem vínculo: card por PESSOA ──────────────────────────────── */
.orf-grupo .orf-docs { list-style:none; margin:0; padding:10px 16px; display:flex;
  flex-direction:column; gap:6px; max-height:200px; overflow-y:auto;
  border-top:1px solid var(--borda); background:var(--fundo-sutil); }
.orf-doc { display:flex; align-items:center; gap:10px; font-size:.82rem; }
.orf-doc-data { color:var(--texto-fraco); font-variant-numeric:tabular-nums; }
.orf-doc-motivo { color:var(--texto-fraco); font-style:italic; }
.orf-qtd { font-size:.78rem; font-weight:600; color:var(--texto-fraco);
  background:var(--fundo-sutil); border:1px solid var(--borda);
  border-radius:999px; padding:2px 10px; white-space:nowrap; }
/* Sinaliza o caso do "saiu antes da base de ativos": é onde arquivar cabe. */
.orf-tag-semcand { font-size:.72rem; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--aviso-texto, #92400e);
  background:var(--aviso-fundo, #fef3c7); border-radius:999px;
  padding:3px 10px; white-space:nowrap; }
.orf-arquivar { margin-left:auto; color:var(--texto-fraco); }
.orf-arquivar:hover { color:var(--perigo, #b91c1c); }

/* ══ Colaboradores — cabeçalho Quadro/Desligados + filtros rápidos ══ */
.colab-resumo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
/* seletor Quadro × Desligados */
.colab-seg { display: inline-flex; border: 1px solid var(--cinza-borda); border-radius: 10px; overflow: hidden; width: fit-content; box-shadow: var(--card-shadow); }
.colab-seg-btn { background: var(--branco); border: 0; padding: 9px 17px; font: inherit; font-size: 13px; font-weight: 600; color: var(--cinza-texto); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.colab-seg-btn + .colab-seg-btn { border-left: 1px solid var(--cinza-borda); }
.colab-seg-btn b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.colab-seg-btn.on { background: var(--verde); color: #fff; }
.colab-seg-btn:not(.on):hover { background: var(--cinza-bg); }
/* detalhe do quadro (chips de status clicáveis) */
.colab-breakdown { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.colab-bchip { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 600; color: var(--cinza-texto); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.colab-bchip b { color: var(--texto); font-weight: 800; font-variant-numeric: tabular-nums; }
.colab-bchip:hover { border-color: var(--cinza-texto); }
.colab-bchip.todos.on { border-color: var(--verde); background: var(--verde-light); }
.colab-bchip.ativo.on { border-color: var(--verde); background: var(--verde-light); color: var(--verde-dark); }
.colab-bchip.ferias.on { border-color: #4a90d9; background: #e8f0ff; color: #2563eb; }
.colab-bchip.afastado.on { border-color: #f5a623; background: #fff3e0; color: #b45309; }
.colab-desl-nota { font-size: 12px; color: var(--cinza-texto); }
/* linha de filtros rápidos (chips-checkbox) */
.filtros-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.filtros-chips-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-texto); margin-right: 2px; }
.colab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--cinza-borda); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--cinza-texto); cursor: pointer; background: var(--branco); user-select: none; }
.colab-chip:hover { border-color: var(--cinza-texto); }
.colab-chip input { margin: 0; }
.colab-chip:has(input:checked) { border-color: var(--verde); background: var(--verde-light); color: var(--verde-dark); }
.colab-chip-count { color: var(--vermelho); font-weight: 700; font-variant-numeric: tabular-nums; }
/* ══ Módulo Indicadores (hub → Pessoas) ═══════════════════════════════ */
#view-indicadores .portal-main { max-width: 1120px; }
.ind-loading, .ind-erro, .ind-empty { padding: 24px; color: var(--cinza-texto); font-size: 13px; }
.ind-erro { color: var(--vermelho); }
.ind-empty { padding: 14px 0; }

/* severidade (separada do verde de marca) */
.ind-good { --sev: var(--verde); --sevbg: var(--verde-light); }
.ind-warn { --sev: #b45309; --sevbg: #fdf0dd; --sevbar: #f5a623; }
.ind-crit { --sev: var(--vermelho); --sevbg: var(--vermelho-light); --sevbar: #d9483b; }
.ind-bench { --sev: #2563eb; --sevbg: #e8f0ff; }
.ind-na   { --sev: var(--cinza-borda); --sevbg: var(--cinza-bg); }

/* department hub nav */
.ind-depts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.ind-dept { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 11px;
  font-size: 13px; font-weight: 650; border: 1px solid var(--cinza-borda); background: var(--branco);
  color: var(--cinza-texto); box-shadow: var(--card-shadow); }
.ind-dept svg { width: 15px; height: 15px; }
.ind-dept.active { background: linear-gradient(120deg, var(--verde-dark), var(--verde)); color: #fff; border-color: transparent; }
.ind-dept.disabled { opacity: .72; }
.ind-soon { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--cinza-bg); color: var(--cinza-texto); padding: 2px 6px; border-radius: 999px; }
.ind-soon-inline { font-size: 11px; font-weight: 700; text-transform: none; color: var(--cinza-texto);
  background: var(--cinza-bg); padding: 2px 7px; border-radius: 999px; margin-left: 6px; }

/* controls */
.ind-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ind-comp { font-size: 12px; color: var(--cinza-texto); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.ind-comp input { font-family: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--cinza-borda);
  border-radius: 8px; color: var(--texto); background: var(--branco); }
.ind-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.ind-badge.parcial { background: #fff3e0; color: #b45309; }
.ind-badge.congelado { background: var(--verde-light); color: var(--verde-dark); }
.ind-escopo { font-size: 12px; color: var(--cinza-texto); margin-left: auto; }

/* cards / eyebrow */
.ind-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--cinza-texto); margin: 24px 2px 12px; }
.ind-card { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 14px;
  box-shadow: var(--card-shadow); padding: 16px 17px; }
.ind-card h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 700; }
.ind-csub { margin: 0 0 14px; font-size: 12px; color: var(--cinza-texto); }
.ind-note { font-size: 11px; color: var(--cinza-texto); margin: 8px 0 0; }
.ind-abs-soon { color: var(--cinza-texto); font-size: 13px; }

/* KPI row */
.ind-kpis { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 14px; }
.ind-kpi { position: relative; overflow: hidden; }
.ind-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sev, var(--cinza-borda)); }
.ind-k-label { font-size: 11.5px; color: var(--cinza-texto); font-weight: 600; }
.ind-k-val { font-size: 30px; font-weight: 750; line-height: 1.05; margin: 8px 0 2px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.ind-kpi.hero .ind-k-val { font-size: 38px; }
.ind-k-foot { font-size: 12px; color: var(--cinza-texto); margin-top: 4px; }
.ind-chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .04em; background: var(--sevbg, var(--cinza-bg)); color: var(--sev, var(--cinza-texto)); }

/* two columns */
.ind-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }

/* série svg */
.ind-chart { width: 100%; height: auto; max-height: 320px; display: block; }
.ind-grid { stroke: var(--cinza-bg); stroke-width: 1; }
.ind-ylab, .ind-xlab { font-size: 13px; fill: var(--cinza-texto); }
.ind-xlab.ult { fill: var(--vermelho); font-weight: 700; }
.ind-area { fill: var(--verde); opacity: .1; }
.ind-line { stroke: var(--verde); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ind-dot { fill: var(--branco); stroke: var(--verde); stroke-width: 2; }
.ind-dot.ult { fill: var(--verde); }
.ind-dot.parcial { stroke-dasharray: 2 2; }

/* série: tooltip */
.ind-chartwrap { position: relative; }
.ind-hit { fill: transparent; pointer-events: all; cursor: crosshair; }
.ind-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--texto); color: #fff;
  font-size: 11.5px; padding: 4px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.18); z-index: 3; }
.ind-tip.hidden { display: none; }

/* Absenteísmo — barras horizontais "cada coisa" / tendência */
.ind-abr-list { display: flex; flex-direction: column; gap: 10px; }
.ind-abr { display: grid; grid-template-columns: 150px 1fr 132px; align-items: center; gap: 12px; }
.ind-abr-lbl { font-size: 13px; color: var(--texto); font-weight: 600; }
.ind-abr-track { position: relative; height: 14px; background: var(--cinza-bg); border-radius: 7px; overflow: hidden; }
.ind-abr-track.dual { display: flex; gap: 2px; background: none; overflow: visible; }
.ind-abr-track.dual .ind-abr-fill { border-radius: 7px; min-width: 2px; }
.ind-abr-fill { height: 100%; border-radius: 7px; transition: width .3s; }
.ind-abr-val { font-size: 13px; font-weight: 700; color: var(--texto); text-align: right; font-variant-numeric: tabular-nums; }
.ind-abr-val small { font-weight: 400; color: var(--cinza-texto); }
.ind-leg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 2px; }
.ind-capa-comp select { font: inherit; font-size: 14px; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 5px 8px; background: var(--branco); color: var(--texto); cursor: pointer; }
@media (max-width: 640px) {
  .ind-abr { grid-template-columns: 96px 1fr 92px; gap: 8px; }
  .ind-abr-lbl, .ind-abr-val { font-size: 11.5px; }
}
.ind-tip b { font-weight: 700; margin-right: 4px; }

/* ranking bars */
.ind-rank { display: flex; flex-direction: column; gap: 11px; }
.ind-rank-dist { font-size: 12px; color: var(--cinza-texto); margin-bottom: 12px; }
.ind-rank-dist b { color: var(--texto); font-weight: 700; }
.ind-rrow { display: grid; grid-template-columns: 148px 1fr 52px; align-items: center; gap: 10px; }
.ind-rname { font-size: 12.5px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-code { font-size: 10.5px; color: var(--cinza-texto); font-weight: 500; }
.ind-rtrack { height: 12px; background: var(--cinza-bg); border-radius: 6px; overflow: hidden; border: 1px solid var(--cinza-bg); }
.ind-rfill { display: block; height: 100%; min-width: 3px; border-radius: 6px; background: var(--sevbar, var(--sev, var(--verde))); }
.ind-rval { font-size: 12.5px; font-weight: 700; text-align: right; color: var(--sev, var(--texto)); font-variant-numeric: tabular-nums; }
.ind-rank-more { display: flex; flex-direction: column; gap: 11px; margin-top: 11px; }
.ind-rank-more.hidden { display: none; }
.ind-more-btn { margin-top: 11px; background: none; border: 1px solid var(--cinza-borda); border-radius: 8px;
  padding: 7px 13px; font: inherit; font-size: 12px; font-weight: 600; color: var(--verde-dark); cursor: pointer; }
.ind-more-btn:hover { background: var(--cinza-bg); }

/* movimentação */
.ind-mov { display: flex; flex-direction: column; gap: 13px; }
.ind-mrow { display: grid; grid-template-columns: 148px 1fr auto; align-items: center; gap: 12px; }
.ind-transf { color: #2563eb; font-weight: 600; margin-left: 4px; white-space: nowrap; }
.ind-mbars { display: flex; flex-direction: column; gap: 4px; }
.ind-mbar { height: 9px; border-radius: 5px; min-width: 3px; }
.ind-mbar.adm { background: var(--verde-mid); }
.ind-mbar.desl { background: #d9483b; }
.ind-mnums { font-size: 11.5px; color: var(--cinza-texto); white-space: nowrap; }
.ind-mnums b.adm { color: var(--verde); } .ind-mnums b.desl { color: var(--vermelho); }

@media (max-width: 880px) {
  .ind-kpis { grid-template-columns: 1fr 1fr; }
  .ind-kpi.hero { grid-column: 1 / -1; }
  .ind-cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ind-rrow, .ind-mrow { grid-template-columns: 110px 1fr 48px; }
}

/* ══ Indicadores — página da loja (sub-tela) ══ */
.ind-rrow.ind-click, .ind-mrow.ind-click { cursor: pointer; border-radius: 8px; transition: background .1s; }
.ind-rrow.ind-click:hover, .ind-mrow.ind-click:hover { background: var(--cinza-bg); }
.ind-voltar { background: none; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 7px 13px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--verde-dark); cursor: pointer; margin-bottom: 14px; }
.ind-voltar:hover { background: var(--cinza-bg); }
.ind-loja-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ind-loja-nome { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.ind-pessoas { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.ind-prow { display: grid; grid-template-columns: 1fr 78px minmax(0, 1.1fr); align-items: center; gap: 8px;
  padding: 6px 4px; border-top: 1px solid var(--cinza-bg); font-size: 12.5px; }
.ind-prow:first-child { border-top: 0; }
.ind-pnome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-pdata { color: var(--cinza-texto); font-variant-numeric: tabular-nums; }
.ind-pmotivo { color: var(--cinza-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-pmotivo.transf { color: #2563eb; font-weight: 600; }
.ind-pcount { font-size: 12px; font-weight: 700; color: var(--cinza-texto); background: var(--cinza-bg);
  padding: 1px 8px; border-radius: 999px; margin-left: 4px; }

/* Indicadores — botão gerar relatório */
.ind-btn-rel { background: var(--verde); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ind-btn-rel:hover { background: var(--verde-dark); }
.ind-loja-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ══ Indicadores — visual "relatório": capa verde + cards + tabela por loja ══ */
.ind-capa { background: linear-gradient(120deg, var(--verde-dark), var(--verde)); color: #fff; border-radius: 14px;
  padding: 20px 22px; margin: 4px 0 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: var(--card-shadow); }
.ind-capa-txt h2 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.ind-capa-txt p { margin: 3px 0 0; font-size: 12.5px; opacity: .85; }
.ind-capa-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ind-capa-comp { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); display: inline-flex; align-items: center; gap: 7px; }
.ind-capa-comp input { font-family: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; }
.ind-capa-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.18); }
.ind-capa-badge.parcial { background: #f5a623; color: #3a2500; }
.ind-capa-btn { background: #fff; color: var(--verde-dark); border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ind-capa-btn:hover { background: var(--verde-light); }
/* Toggle de período (Mês/Trim/Sem/Ano) no cabeçalho verde da capa */
.ind-capa-range { display: inline-flex; border: 1px solid rgba(255,255,255,.32); border-radius: 8px; overflow: hidden; }
.ind-capa-range button { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border: 0; border-right: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.12); color: rgba(255,255,255,.92); cursor: pointer; }
.ind-capa-range button:last-child { border-right: 0; }
.ind-capa-range button.on { background: #fff; color: var(--verde-dark); }
.ind-capa-range button:hover:not(.on) { background: rgba(255,255,255,.22); }
/* KPIs estilo relatório */
.ind-rcards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ind-rcard { border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 14px 8px; text-align: center; background: var(--cinza-bg); }
.ind-rcard.meu { border-color: var(--verde); border-width: 1.5px; background: var(--branco); }
.ind-rcard-v { display: block; font-size: 1.75rem; font-weight: 750; color: var(--verde); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ind-rcard-r { display: block; font-size: 10.5px; font-weight: 600; color: var(--cinza-texto); letter-spacing: .05em; text-transform: uppercase; margin-top: 4px; }
/* tabela por loja */
.ind-ltab-wrap { overflow-x: auto; max-height: 460px; overflow-y: auto; }
.ind-ltab { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ind-ltab th { position: sticky; top: 0; text-align: left; background: var(--cinza-bg); color: var(--cinza-texto);
  font-size: .72rem; letter-spacing: .04em; padding: 8px 10px; white-space: nowrap; text-transform: uppercase; }
.ind-ltab td { padding: 8px 10px; border-top: 1px solid var(--cinza-borda); font-variant-numeric: tabular-nums; }
.ind-ltab td.n, .ind-ltab th.n { text-align: right; }
.ind-ltab tbody tr.ind-click { cursor: pointer; }
.ind-ltab tbody tr.ind-click:hover { background: var(--cinza-bg); }
.ind-ltab td.alta { color: var(--vermelho); font-weight: 700; }
.ind-ltab-tot td { border-top: 2px solid var(--verde); font-weight: 700; }
@media (max-width: 720px) { .ind-rcards { grid-template-columns: 1fr 1fr; } }

/* ── Dobras (freelancers) ───────────────────────────────────────────── */
.ind-dob-entry { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.ind-dob-entry:hover, .ind-dob-entry:focus-visible { border-color: var(--verde); background: var(--branco); outline: none; }
.ind-dob-go { color: var(--verde); font-weight: 700; font-size: 13px; white-space: nowrap; }
.ind-dob-rcards { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .ind-dob-rcards { grid-template-columns: 1fr 1fr; } }
/* mini gráfico de barras por mês */
.ind-dchart { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding-top: 8px; }
.ind-dbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.ind-dbar-track { flex: 1; width: 100%; max-width: 46px; display: flex; align-items: flex-end; }
.ind-dbar-fill { width: 100%; background: var(--verde); border-radius: 5px 5px 0 0; min-height: 2px; transition: height .2s; }
.ind-dbar:hover .ind-dbar-fill { background: var(--verde-dark); }
.ind-dbar-lab { font-size: 10.5px; color: var(--cinza-texto); text-align: center; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ind-dbar-val { font-size: 10.5px; font-weight: 700; color: var(--verde); text-align: center; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ind-dbar-n { font-size: 9px; font-weight: 600; color: var(--cinza-texto); }
.ind-dchart { height: 210px; }
/* tabelas do painel */
.ind-dcol-side { display: flex; flex-direction: column; gap: 14px; }
.ind-dtable-wrap { max-height: 420px; overflow-y: auto; }
.ind-dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ind-dtable th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-texto); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--cinza-borda); position: sticky; top: 0; background: var(--branco); }
.ind-dtable td { padding: 6px 8px; border-bottom: 1px solid var(--cinza-bg); }
.ind-dtable td.num, .ind-dtable th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ind-dtable tr:hover td { background: var(--cinza-bg); }
.ind-dob-semloja td { color: var(--cinza-texto); }
.ind-dob-tag { font-size: 9.5px; font-weight: 700; color: #b45309; background: #fdf1e3; padding: 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.ind-dob-tag.colab { color: var(--verde); background: #e9f6ee; }
.ind-btn-rel.ghost { background: var(--branco); color: var(--verde); border: 1px solid var(--verde); }
.ind-btn-rel.ghost:hover { background: #e9f6ee; }
/* barra 100% empilhada (compacta) — status / quem faz */
.dob-mini-h { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.dob-stack { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--cinza-bg); }
.dob-seg { height: 100%; }
.dob-seg.good, .dob-leg-dot.good { background: var(--verde); }
.dob-seg.warn, .dob-leg-dot.warn { background: #d1971f; }
.dob-seg.crit, .dob-leg-dot.crit { background: var(--vermelho); }
.dob-seg.na, .dob-leg-dot.na { background: #9ca3af; }
.dob-seg.info, .dob-leg-dot.info { background: #6b8fd1; }
.dob-seg.ext, .dob-leg-dot.ext { background: #c0563b; }
.dob-leg-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.dob-leg { font-size: 12px; color: var(--cinza-texto); display: inline-flex; align-items: center; gap: 5px; }
.dob-leg b { color: var(--ff-text, #1f2937); font-variant-numeric: tabular-nums; }
.dob-leg small { color: #9ca3af; }
.dob-leg-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rx-pos { color: var(--verde); font-weight: 700; }
/* validação das divergências RH × Domínio (aba Pendências) */
.pend-diverg-acao { display: flex; gap: 6px; white-space: nowrap; }
.pend-diverg-acao .btn-mini { width: auto; height: auto; min-width: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--cinza-borda, #e5e7eb); background: #fff; cursor: pointer; }
.pend-diverg-acao .btn-mini.ok { color: var(--ff-green, #1a7a4a); border-color: var(--ff-green, #1a7a4a); }
.pend-diverg-acao .btn-mini.ok:hover { background: #e9f6ee; }
.pend-diverg-acao .btn-mini.ign { color: #6b7280; }
.pend-diverg-acao .btn-mini.ign:hover { background: #f3f4f6; }
.pend-diverg-feito { font-size: 11.5px; font-weight: 700; color: var(--ff-green, #1a7a4a); margin-right: 8px; }
/* "Plano de ação" — resumo executivo (4 decisões) */
.dob-plano { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 6px; }
.dob-plano-item { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px; border: 1px solid var(--cinza-borda); border-top: 3px solid var(--cinza-borda); background: var(--branco); }
.dob-plano-item.crit { border-top-color: var(--vermelho); }
.dob-plano-item.warn { border-top-color: #d1971f; }
.dob-plano-ico { font-size: 1.5rem; line-height: 1; }
.dob-plano-val { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dob-plano-item.crit .dob-plano-val { color: var(--vermelho); }
.dob-plano-item.warn .dob-plano-val { color: #b45309; }
.dob-plano-tit { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 2px 0 4px; }
.dob-plano-desc { font-size: 12px; color: var(--cinza-texto); line-height: 1.4; }
@media (max-width: 900px) { .dob-plano { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dob-plano { grid-template-columns: 1fr; } }
.dob-plano-item.clic { cursor: pointer; transition: box-shadow .15s, transform .1s; }
.dob-plano-item.clic:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); transform: translateY(-1px); }
.dob-plano-go { font-size: 1rem; opacity: .6; }
/* ===== Dobras · abas + Visão geral (capa) ===== */
.dob-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--cinza-borda); margin: 4px 0 18px; }
.dob-tab { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--cinza-texto); background: none; border: none; padding: 9px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 6px 6px 0 0; }
.dob-tab:hover { background: var(--cinza-bg); color: var(--ff-text, #1f2937); }
.dob-tab.on { color: var(--verde); border-bottom-color: var(--verde); font-weight: 700; }
/* Barra de filtros + abas FIXA no topo: ao mudar o filtro dá pra ver os cards reagirem */
.dob-sticky { position: sticky; top: 0; z-index: 30; background: var(--cinza-bg); padding: 10px 0 0; margin-bottom: 16px; box-shadow: 0 9px 10px -9px rgba(0,0,0,.22); }
.dob-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.dob-sticky .dob-tabs { margin: 0; }
/* Supervisor + "Todas as lojas" usam classes do header VERDE (texto branco). Na barra
   clara das Dobras isso some — força cor escura sobre fundo claro. */
.dob-filtros .ind-capa-comp { color: var(--cinza-texto); }
.dob-filtros .ind-capa-comp select { border: 1px solid var(--cinza-borda); }
.dob-filtros .ind-capa-filtro-btn { color: var(--texto); background: var(--branco); border: 1px solid var(--cinza-borda); align-self: center; }
.dob-filtros .ind-capa-filtro-btn:hover { background: var(--cinza-bg); border-color: var(--verde); color: var(--verde); }
@media (max-width: 768px) { .dob-sticky { top: 52px; } }
.dob-tabbody { animation: dobFade .18s ease; }
@keyframes dobFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.dob-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 4px; }
.dob-kpi { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--cinza-borda); background: var(--branco); }
.dob-kpi-v { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dob-kpi-l { font-size: 12px; color: var(--cinza-texto); margin-top: 3px; }
.dob-tend { display: inline-flex; align-items: baseline; gap: 5px; margin-top: 8px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dob-tend small { font-weight: 500; color: var(--cinza-texto); }
.dob-tend.up { color: var(--vermelho); }
.dob-tend.down { color: var(--verde); }
@media (max-width: 720px) { .dob-kpis { grid-template-columns: 1fr; } }
.dob-split-card { display: flex; flex-direction: column; gap: 12px; }
.dob-split-bar { display: flex; height: 34px; border-radius: 9px; overflow: hidden; background: var(--cinza-bg); }
.dob-split-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; min-width: 2px; transition: width .3s; }
.dob-split-seg.colab { background: var(--verde); }
.dob-split-seg.ext { background: #c0563b; }
.dob-split-leg { display: flex; flex-wrap: wrap; gap: 20px; }
.dob-split-leg > span { font-size: 13px; color: var(--cinza-texto); display: inline-flex; align-items: center; gap: 6px; }
.dob-split-leg b { color: var(--ff-text, #1f2937); font-variant-numeric: tabular-nums; }
.dob-split-leg small { color: #9ca3af; }
.dob-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.dob-dot.colab { background: var(--verde); }
.dob-dot.ext { background: #c0563b; }
.dob-flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dob-flag { font-family: inherit; text-align: left; display: flex; gap: 13px; align-items: flex-start; padding: 16px; border-radius: 14px; border: 1px solid var(--cinza-borda); border-left: 5px solid var(--cinza-borda); background: var(--branco); cursor: pointer; transition: box-shadow .15s, transform .1s; }
.dob-flag:hover { box-shadow: 0 5px 16px rgba(0,0,0,.10); transform: translateY(-1px); }
.dob-flag.crit { border-left-color: var(--vermelho); }
.dob-flag.warn { border-left-color: #d1971f; }
.dob-flag-ico { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.dob-flag-txt { display: flex; flex-direction: column; gap: 4px; }
.dob-flag-tit { font-size: 13px; font-weight: 700; color: var(--ff-text, #1f2937); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dob-flag-go { font-size: 11px; font-weight: 700; color: var(--verde); text-transform: uppercase; letter-spacing: .03em; }
.dob-flag-desc { font-size: 12.5px; color: var(--cinza-texto); line-height: 1.45; }
.dob-flag-desc b { color: var(--ff-text, #1f2937); font-variant-numeric: tabular-nums; }
.dob-flag-desc small { color: #9ca3af; }
@media (max-width: 900px) { .dob-flags { grid-template-columns: 1fr; } }
/* dobra indevida — linhas expansíveis */
.ind-idv-row { cursor: pointer; }
.ind-idv-row:hover td { background: #e9f6ee; }
.ind-idv-tog { display: inline-block; width: 12px; color: var(--verde); font-weight: 700; }
.ind-idv-per { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cinza-texto); font-size: 12px; }
.ind-idv-det > td { background: var(--cinza-bg); padding: 4px 10px 12px 26px; }
.ind-idv-sub { width: 100%; background: var(--branco); }
.ind-idv-sub th { font-size: 10px; }
/* "Onde agir" — hero de decisão */
.dob-act-hero { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 12px; margin-bottom: 14px; border: 1px solid var(--cinza-borda); border-left: 5px solid var(--vermelho); background: #fdf4f3; }
.dob-act-hero.warn { border-left-color: #d1971f; background: #fdf8ef; }
.dob-act-hero-v { font-size: 2rem; font-weight: 800; color: var(--vermelho); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.dob-act-hero.warn .dob-act-hero-v { color: #b45309; }
.dob-act-hero-t { font-size: 13px; line-height: 1.5; color: var(--cinza-texto-forte, #374151); }
/* ranking de lojas (barras horizontais + semáforo + linha de referência) */
.ind-rank-row.clic { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; transition: background .12s; }
.ind-rank-row.clic:hover { background: #e9f6ee; }
.ind-rank-toggle { display: flex; gap: 6px; margin-bottom: 14px; }
.ind-rank-toggle .ind-subpill { padding: 5px 12px; font-size: 12px; }
.ind-rank-u { font-size: 10px; font-weight: 600; color: var(--cinza-texto); }
.ind-rank { display: flex; flex-direction: column; gap: 7px; }
.ind-rank-row { display: grid; grid-template-columns: 180px 1fr 150px; align-items: center; gap: 12px; }
.ind-rank-loja { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-rank-bar { position: relative; height: 20px; background: var(--cinza-bg); border-radius: 5px; overflow: hidden; }
.ind-rank-fill { height: 100%; border-radius: 5px; transition: width .3s; }
.ind-rank-fill.good { background: var(--verde); }
.ind-rank-fill.warn { background: #d1971f; }
.ind-rank-fill.crit { background: var(--vermelho); }
.ind-rank-ref { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed var(--cinza-texto); opacity: .6; }
.ind-rank-val { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.15; }
.ind-rank-val small { font-size: 10.5px; font-weight: 500; color: var(--cinza-texto); }
.ind-rank-legend { margin-top: 12px; font-size: 11px; color: var(--cinza-texto); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ind-rank-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 2px 0 6px; }
.ind-rank-dot.good { background: var(--verde); } .ind-rank-dot.warn { background: #d1971f; } .ind-rank-dot.crit { background: var(--vermelho); }
.ind-rank-refmark { display: inline-block; width: 0; height: 12px; border-left: 2px dashed var(--cinza-texto); margin-right: 3px; vertical-align: middle; }
@media (max-width: 720px) { .ind-rank-row { grid-template-columns: 110px 1fr 92px; gap: 8px; } .ind-rank-loja { font-size: 12px; } }
/* heatmap loja × mês */
/* Seletor de métrica do ranking (dobras × custo) */
.dob-heat-toggle { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.dob-heat-toggle .hm-tg-lbl { font-size: 11.5px; color: var(--cinza-texto); font-weight: 600; margin-right: 2px; }
.dob-heat-toggle .hm-mb { font-family: inherit; font-size: 12px; font-weight: 700; color: var(--cinza-texto); background: var(--xe-lsoft, #eef2ee); border: 1px solid var(--cinza-borda); padding: 4px 13px; border-radius: 999px; cursor: pointer; }
.dob-heat-toggle .hm-mb:hover { border-color: var(--verde, #1a7a4a); color: var(--verde, #1a7a4a); }
.dob-heat-toggle .hm-mb.on { background: var(--verde, #1a7a4a); color: #fff; border-color: var(--verde, #1a7a4a); }
.ind-heat-wrap { overflow-x: auto; }
.ind-heat { border-collapse: separate; border-spacing: 4px; font-size: 12.5px; font-variant-numeric: tabular-nums; table-layout: fixed; width: 100%; }
.ind-heat .hm-c-loja { width: 168px; }
.ind-heat .hm-c-tot { width: 74px; }
.ind-heat th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--cinza-texto); padding: 3px 6px; text-align: center; white-space: nowrap; }
.ind-heat th.ind-heat-loja { text-align: left; }
.ind-heat-cell { height: 36px; text-align: center; vertical-align: middle; border-radius: 6px; font-weight: 700; font-size: 13px; line-height: 1.12; padding: 2px 4px; }
.ind-heat-cell .hm-in { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ind-heat-cell .hm-n { font-weight: 800; font-size: 13px; }
.ind-heat-cell .hm-v { font-size: 9.5px; opacity: .72; font-weight: 600; }
.ind-heat-cell.hm-tot { background: var(--cinza-bg, #f1f3f0); font-weight: 800; }
.ind-heat th.hm-th { cursor: pointer; user-select: none; }
.ind-heat th.hm-th:hover { color: var(--verde, #1a7a4a); }
.ind-heat th.hm-th.on { color: var(--verde, #1a7a4a); }
.ind-heat th.hm-th .hm-ar { font-size: 8px; margin-left: 2px; vertical-align: middle; }
.ind-heat-loja { font-weight: 600; white-space: nowrap; width: 1px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; text-align: left; vertical-align: middle; position: sticky; left: 0; background: var(--branco); }
.ind-heat-leg { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--cinza-texto); }
.ind-heat-leg .hm-scale { display: inline-block; width: 120px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(200,54,44,.12), rgba(200,54,44,.88)); }
.ind-heat-leg b { margin-left: auto; font-weight: 600; color: var(--cinza-texto); }
/* raio-x (relatório) */
.rx-table .rx-row { cursor: pointer; }
.rx-table .rx-row:hover td { background: #e9f6ee; }
.rx-table td small { color: var(--cinza-texto); font-weight: 500; }
.rx-flag { font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.rx-flag.crit { color: var(--vermelho); background: #fdecea; }
.rx-flag.warn { color: #b45309; background: #fdf1e3; }
/* sub-navegação de indicadores (Rotatividade | Dobras) */
.ind-subnav { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.ind-subpill { font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--cinza-borda); background: var(--branco); color: var(--cinza-texto); cursor: pointer; transition: all .15s; }
.ind-subpill:hover { border-color: var(--verde); color: var(--verde); }
.ind-subpill.active { background: var(--verde); border-color: var(--verde); color: #fff; cursor: default; }
/* chips de status de pagamento */
.ind-dstatus-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ind-dstatus { flex: 1; min-width: 130px; border: 1px solid var(--cinza-borda); border-left-width: 4px; border-radius: 10px; padding: 12px 14px; background: var(--branco); }
.ind-dstatus-n { font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ind-dstatus-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-texto); margin: 2px 0; }
.ind-dstatus-v { font-size: 12px; color: var(--cinza-texto); font-variant-numeric: tabular-nums; }
.ind-dstatus.good { border-left-color: var(--verde); } .ind-dstatus.good .ind-dstatus-n { color: var(--verde); }
.ind-dstatus.warn { border-left-color: #d1971f; } .ind-dstatus.warn .ind-dstatus-n { color: #b45309; }
.ind-dstatus.crit { border-left-color: var(--vermelho); } .ind-dstatus.crit .ind-dstatus-n { color: var(--vermelho); }
.ind-dstatus.na { border-left-color: var(--cinza-borda); } .ind-dstatus.na .ind-dstatus-n { color: var(--cinza-texto); }

/* ── Premiações · Links de validação por loja (admin) ───────── */
.vlk-prazo-lbl { font-size: 13px; color: var(--cinza-texto); display: inline-flex; align-items: center; gap: 6px; }
.vlk-resumo { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin: 4px 0 16px; }
.vlk-rt { background: #fff; border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 12px 16px; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.vlk-rn { font-size: 22px; font-weight: 800; color: var(--verde); line-height: 1; }
.vlk-rl { font-size: 12px; color: var(--cinza-texto); font-weight: 600; }
.vlk-acoes { margin-left: auto; display: flex; align-items: center; }
.vlk-tabwrap { overflow-x: auto; border: 1px solid var(--cinza-borda); border-radius: 12px; background: #fff; }
.vlk-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.vlk-tab th { text-align: left; font-size: 11px; font-weight: 700; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; background: #f6f9f5; border-bottom: 1px solid var(--cinza-borda); }
.vlk-tab td { padding: 10px 14px; border-bottom: 1px solid #eef2ec; vertical-align: middle; }
.vlk-tab tr:last-child td { border-bottom: 0; }
.vlk-loja { font-weight: 700; color: var(--preto-suave); }
.vlk-tipo { display: block; font-size: 11px; font-weight: 600; color: var(--cinza-texto); }
.vlk-na { color: #9aa59d; font-style: italic; }
.vlk-prog { min-width: 140px; }
.vlk-bar { display: inline-block; width: 90px; height: 7px; border-radius: 5px; background: #e7ece5; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.vlk-bar > i { display: block; height: 100%; background: var(--verde); border-radius: 5px; }
.vlk-bar.cheio > i { background: #1f9d57; }
.vlk-exp { color: var(--vermelho); font-weight: 700; }
.vlk-ac { white-space: nowrap; text-align: right; }
.vlk-mini { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--cinza-borda); background: #fff; color: var(--preto-suave); cursor: pointer; text-decoration: none; margin-left: 6px; }
.vlk-mini:hover { border-color: var(--verde); color: var(--verde); }
.vlk-empty { padding: 40px 16px; text-align: center; color: var(--cinza-texto); font-size: 14px; line-height: 1.5; }
.vlk-grp td { background: #eef4ec; padding: 8px 14px; }
.vlk-grp-nome { font-weight: 800; color: var(--verde); font-size: 13px; }
.vlk-grp-meta { font-size: 12px; color: var(--cinza-texto); margin-left: 10px; }
.vlk-grp-copiar { float: right; }
.vlk-viewbar { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; flex-wrap: wrap; }
.vlk-toggle { display: inline-flex; gap: 8px; }
.vlk-toggle-btn { border: 1.5px solid var(--cinza-borda); background: #fff; font: inherit; font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 10px; cursor: pointer; color: var(--preto-suave); }
.vlk-toggle-btn.is-active { background: var(--verde); color: #fff; border-color: var(--verde); }
.vlk-limpar { border: 1.5px solid var(--vermelho); background: #fff; color: var(--vermelho); font: inherit; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.vlk-limpar:hover { background: var(--vermelho); color: #fff; }
.vlk-alvo { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.vlk-alvo--med { background: #fef3c7; color: #92590a; }
.vlk-alvo--meta { background: #e5f4ec; color: var(--verde); }
.vlk-motivo { color: var(--preto-suave); max-width: 460px; line-height: 1.4; }
.vlk-ger { font-weight: 700; font-size: 12.5px; }
.vlk-ger.ok { color: var(--verde); }
.vlk-ger.flag { color: var(--vermelho); }
.vlk-revok { color: var(--verde); font-size: 12px; font-weight: 600; }
.vlk-ok-btn { border-color: var(--verde) !important; color: var(--verde); font-weight: 700; }
.vlk-ok-btn:hover { background: var(--verde); color: #fff; }
.med-eleg-sel { background: #e5f4ec; color: var(--verde); font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 20px; margin-right: 8px; vertical-align: middle; }
.vlk-flag-btn { border-color: #f0c3bd !important; color: var(--vermelho); }
.vlk-flag-btn:hover { background: var(--vermelho); color: #fff; }
.vlk-mantida { color: var(--vermelho); font-size: 12px; font-weight: 600; margin-right: 8px; }
.vlk-verdito { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.vlk-verdito--sim { background: #e5f4ec; color: var(--verde); }
.vlk-verdito--nao { background: #eef0f1; color: #6b7280; }
.vlk-sub { display: inline-flex; gap: 6px; }
.vlk-sub-btn { border: 1px solid var(--cinza-borda); background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--cinza-texto); }
.vlk-sub-btn.on { background: var(--verde); color: #fff; border-color: var(--verde); }
.vlk-acao { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.vlk-acao--rev { background: #e5f4ec; color: var(--verde); }
.vlk-acao--mant { background: #fdecea; color: var(--vermelho); }
.vlk-chev { cursor: pointer; font-weight: 600; color: var(--preto-suave); }
.vlk-chev:hover { color: var(--verde); }
.vlk-detrow > td { background: #f6f9f5; padding: 0 !important; }
.vlk-detbox { padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; }
.vlk-detbox-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-texto); margin-bottom: 4px; }
.vlk-mot { font-size: 12.5px; line-height: 1.5; color: var(--preto-suave); }
.vlk-mot .vlk-mot-ic { font-weight: 800; }
.vlk-mot.ok .vlk-mot-ic { color: var(--verde); }
.vlk-mot.no .vlk-mot-ic, .vlk-mot.no b { color: var(--vermelho); }

/* Avaliações por loja × estrelas (Visão geral) */
.aval-el-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.aval-el-head h3{margin:0}
.aval-el-mes{font-size:13px;display:flex;align-items:center;gap:6px}
.aval-el-mes input{width:auto}
.aval-el-wrap{overflow-x:auto;margin-top:10px}
.aval-el-tab{width:100%;border-collapse:collapse;font-size:12.5px}
.aval-el-tab th,.aval-el-tab td{padding:5px 8px;text-align:center;border-bottom:1px solid var(--border,#e2e8e0);white-space:nowrap}
.aval-el-tab th{font-weight:700;color:var(--muted,#5b6b60);font-size:11px}
.aval-el-tab td.aval-el-loja,.aval-el-tab th:first-child{text-align:left}
.aval-el-tab td.aval-el-b{font-weight:700}
.aval-el-tot td{font-weight:700;border-top:2px solid var(--border,#cbd5cb)}

/* Custo de pessoal (Indicadores) */
.ind-cst-htitle{padding:12px 15px 0;font-size:13.5px;font-weight:700}
.ind-cst-sub{padding:1px 15px 0;font-size:11.5px;color:var(--cinza-texto,#8a978d)}
.ind-cst-scroll{overflow-x:auto;margin-top:8px}
.ind-cst-tab{width:100%;border-collapse:collapse;font-size:12.5px;min-width:720px;font-variant-numeric:tabular-nums}
.ind-cst-tab th{text-align:right;font-size:10.5px;font-weight:700;color:var(--cinza-texto,#5f6f64);text-transform:uppercase;letter-spacing:.03em;padding:8px 12px;border-bottom:1px solid var(--borda,#dde6de);white-space:nowrap;background:var(--cinza-claro,#f2f6f2)}
.ind-cst-tab th:first-child,.ind-cst-tab td:first-child{text-align:left}
.ind-cst-tab td{padding:8px 12px;border-bottom:1px solid var(--borda-suave,#eaf0ea);text-align:right;white-space:nowrap}
.ind-cst-loja{font-weight:600}
.ind-cst-b{font-weight:800}
.ind-cst-tot td{font-weight:800;border-top:2px solid var(--borda,#dde6de);background:var(--cinza-claro,#f2f6f2)}
.ind-cst-stack{display:inline-flex;height:9px;width:110px;border-radius:6px;overflow:hidden;background:var(--borda-suave,#eaf0ea);vertical-align:middle}
.ind-cst-stack i{display:block;height:100%}
.ind-cst-chip{display:inline-block;font-size:11px;font-weight:800;padding:2px 9px;border-radius:20px;min-width:54px;text-align:center}
.ind-cst-chip.good{color:#1a7a4a;background:#e3f3e9}
.ind-cst-chip.warn{color:#b45309;background:#fbefd7}
.ind-cst-chip.crit{color:#c0392b;background:#fbe6e2}
.ind-cst-chip.na{color:var(--cinza-texto,#8a978d);background:var(--cinza-claro,#f2f6f2)}
.ind-cst-leg{display:flex;gap:14px;font-size:11.5px;color:var(--cinza-texto,#5f6f64);padding:10px 15px 13px}
.ind-cst-leg span{display:inline-flex;align-items:center;gap:5px}
.ind-cst-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* Registro manual na ficha do colaborador (aviso prévio + observação) */
.aviso-manual-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:8px 0 4px;padding:10px 12px;background:var(--cinza-claro,#f2f6f2);border:1px solid var(--borda,#dde6de);border-radius:9px}
.aviso-manual-form label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--cinza-texto,#5f6f64)}
.aviso-manual-form input{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--borda,#dde6de);border-radius:7px}
.aviso-manual-tag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#b45309;background:#fbefd7;padding:1px 6px;border-radius:20px;vertical-align:middle}
.ficha-obs-ta{width:100%;font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--borda,#dde6de);border-radius:9px;resize:vertical;min-height:56px}
.ficha-obs-acao{display:flex;align-items:center;gap:10px;margin-top:8px}
.ficha-obs-msg{font-size:12.5px;color:var(--verde,#1a7a4a);font-weight:600}
.ficha-obs-txt{white-space:pre-wrap;font-size:13.5px;color:var(--ink,#16211b);margin:0}

/* Ficha — seção "Ponto do mês" (ponto_dia por pessoa) */
.ficha-ponto-load,.ficha-ponto-vazio{font-size:13px;color:var(--cinza-texto,#5f6f64);margin:4px 0}
.ficha-ponto-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ficha-ponto-sel{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--borda,#dde6de);border-radius:7px;background:#fff}
.pt-cob{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:20px}
.pt-cob.ok{color:#166534;background:#dcfce7}
.pt-cob.no{color:#b45309;background:#fbefd7}
.pt-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pt-chip{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--cinza-claro,#f2f6f2);color:var(--cinza-texto,#4b5a50)}
.pt-chip.pt-falta{background:#fee2e2;color:#b91c1c}
.pt-chip.pt-atestado{background:#ffedd5;color:#c2410c}
.pt-chip.pt-afastamento,.pt-chip.pt-suspensao{background:#ede9fe;color:#6d28d9}
.pt-chip.pt-ferias{background:#dbeafe;color:#1d4ed8}
.pt-chip.pt-trabalhado{background:#dcfce7;color:#166534}
.pt-table{width:100%;border-collapse:collapse;font-size:12.5px}
.pt-table th{text-align:left;font-weight:700;color:var(--cinza-texto,#5f6f64);border-bottom:1px solid var(--borda,#dde6de);padding:4px 8px}
.pt-table td{padding:4px 8px;border-bottom:1px solid var(--cinza-claro,#eef3ee)}
.pt-table tr.pt-falta td{color:#b91c1c}
.pt-table tr.pt-atestado td{color:#c2410c}

/* Indicadores — Painel executivo */
.ind-rcards-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:900px){.ind-rcards-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ind-rcards-6{grid-template-columns:repeat(2,1fr)}}
.ind-exec-bar{display:flex;height:22px;border-radius:8px;overflow:hidden;margin:10px 0 12px;background:var(--cinza-claro,#eef3ee)}
.ind-exec-bar i{display:block;height:100%}
.ind-exec-leg{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--cinza-texto,#5f6f64)}
.ind-exec-leg span{display:inline-flex;align-items:center;gap:6px}
.ind-exec-leg i{width:11px;height:11px;border-radius:3px;flex:none}
.ind-exec-leg b{color:var(--ink,#16211b);font-weight:800}
.ind-exec-atalhos{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* Custo de pessoal — atingimento de meta de faturamento */
.ind-cst-atng{display:block;font-size:10.5px;color:var(--cinza-texto,#5f6f64);font-weight:600}

/* ══ Painel Executivo (formato mockup) ══ */
/* Sempre CLARO (identidade da marca) — não segue o modo escuro do sistema. */
.xe-wrap{--xe-card:#fff;--xe-line:#dde6de;--xe-lsoft:#eaf0ea;--xe-ink:#16211b;--xe-muted:#5f6f64;--xe-faint:#8a978d;--xe-good:#1a7a4a;--xe-goodbg:#e3f3e9;--xe-warn:#b45309;--xe-warnbg:#fbefd7;--xe-crit:#c0392b;--xe-critbg:#fbe6e2;--xe-green:#1a7a4a;--xe-greend:#136139;--xe-greensoft:#e5f2ea;--xe-sh:0 1px 2px rgba(20,50,35,.04),0 4px 16px rgba(20,50,35,.05);color:var(--xe-ink);font-variant-numeric:tabular-nums;background:#f2f6f2;border-radius:14px;padding:20px 18px;margin:-4px 0}
.xe-wrap h1,.xe-wrap h2{text-wrap:balance;margin:0}
.xe-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.xe-brand{display:flex;align-items:center;gap:11px}
.xe-mk{width:38px;height:38px;border-radius:10px;background:var(--xe-green);color:#fff;display:grid;place-items:center;font-size:20px;flex:none}
.xe-brand h1{font-size:19px;font-weight:800;letter-spacing:-.01em}
.xe-brand p{margin:1px 0 0;font-size:12.5px;color:var(--xe-muted)}
.xe-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:9px 12px;background:var(--xe-card);border:1px solid var(--xe-line);border-radius:11px;box-shadow:var(--xe-sh)}
.xe-fl{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--xe-muted)}
.xe-fl input{font:inherit;font-size:13px;padding:4px 7px;border:1px solid var(--xe-line);border-radius:7px;background:var(--xe-card);color:var(--xe-ink)}
.xe-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--xe-ink);cursor:pointer}
.xe-block{margin-bottom:28px}
.xe-bhead{display:flex;align-items:baseline;gap:10px;margin:0 2px 12px}
.xe-bhead .xe-n{font-size:12px;font-weight:800;color:var(--xe-green);letter-spacing:.02em}
.xe-bhead h2{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.xe-bhead .xe-bsub{margin-left:auto;font-size:11.5px;color:var(--xe-faint)}
.xe-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media(max-width:760px){.xe-kpis{grid-template-columns:repeat(2,1fr)}}
.xe-kpi{background:var(--xe-card);border:1px solid var(--xe-line);border-radius:14px;padding:14px 15px;box-shadow:var(--xe-sh)}
.xe-kpi.accent{background:linear-gradient(180deg,var(--xe-greensoft),var(--xe-card))}
.xe-kpi.accent .xe-v{color:var(--xe-greend)}
.xe-lbl{font-size:11px;font-weight:600;color:var(--xe-muted);text-transform:uppercase;letter-spacing:.03em}
.xe-v{font-size:25px;font-weight:800;letter-spacing:-.02em;margin-top:3px;line-height:1.05}
.xe-v small{font-size:15px;font-weight:700;color:var(--xe-muted)}
.xe-d{font-size:11.5px;font-weight:700;margin-top:5px;display:inline-block}
.xe-d.bad{color:var(--xe-crit)}.xe-d.good{color:var(--xe-good)}.xe-d.flat{color:var(--xe-muted)}
.xe-card{background:var(--xe-card);border:1px solid var(--xe-line);border-radius:14px;box-shadow:var(--xe-sh);overflow:hidden}
.xe-card.xe-warn{padding:12px 15px;font-size:13px;color:var(--xe-warn);background:var(--xe-warnbg);border-color:transparent;margin-bottom:20px}
.xe-ch{padding:12px 15px 0;font-size:13.5px;font-weight:700}
.xe-csub{padding:2px 15px 0;font-size:11.5px;color:var(--xe-faint)}
.xe-tscroll{overflow-x:auto;margin-top:8px}
.xe-wrap table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
.xe-wrap th{text-align:right;font-size:10.5px;font-weight:700;color:var(--xe-muted);text-transform:uppercase;letter-spacing:.03em;padding:8px 11px;border-bottom:1px solid var(--xe-line);white-space:nowrap;background:var(--xe-lsoft)}
.xe-wrap th:first-child,.xe-wrap td:first-child{text-align:left}
.xe-wrap td{padding:8px 11px;border-bottom:1px solid var(--xe-lsoft);text-align:right;white-space:nowrap}
.xe-lj{font-weight:600;color:var(--xe-ink)}
.xe-b{font-weight:800}
.xe-tot td{font-weight:800;border-top:2px solid var(--xe-line);background:var(--xe-lsoft)}
.xe-chip{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;min-width:50px;text-align:center}
.xe-chip.g{color:var(--xe-good);background:var(--xe-goodbg)}.xe-chip.w{color:var(--xe-warn);background:var(--xe-warnbg)}.xe-chip.c{color:var(--xe-crit);background:var(--xe-critbg)}.xe-chip.na{color:var(--xe-faint);background:var(--xe-lsoft)}
/* % do faturamento ao lado do número (2ª linha da célula) */
.xe-pf{display:block;font-size:9.5px;font-weight:700;color:var(--xe-faint);margin-top:1px;letter-spacing:.02em}
/* cabeçalho de tabela ordenável */
.xe-sortable th.xe-th{cursor:pointer;user-select:none;transition:background .12s,color .12s}
.xe-sortable th.xe-th:hover{color:var(--xe-ink);background:var(--xe-line)}
.xe-sortable th.on{color:#1a7a4a}
.xe-ar{font-size:9px;margin-left:2px}
/* controle de período (mês / trimestre / semestre / ano) */
.xe-range{display:inline-flex;border:1px solid var(--xe-line);border-radius:8px;overflow:hidden;background:var(--xe-card)}
.xe-range .xe-rb{font:inherit;font-size:12px;font-weight:600;padding:5px 11px;border:0;border-right:1px solid var(--xe-line);background:transparent;color:var(--xe-muted);cursor:pointer}
.xe-range .xe-rb:last-child{border-right:0}
.xe-range .xe-rb.on{background:#1a7a4a;color:#fff}
.xe-range .xe-rb:hover:not(.on){background:var(--xe-lsoft)}
.xe-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
.xe-dot.g{background:var(--xe-good)}.xe-dot.w{background:var(--xe-warn)}.xe-dot.c{background:var(--xe-crit)}
.xe-stack{display:flex;height:9px;border-radius:6px;overflow:hidden;background:var(--xe-lsoft);min-width:80px}
.xe-stack i{display:block;height:100%}
.xe-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--xe-muted);padding:10px 15px 13px}
.xe-leg span{display:inline-flex;align-items:center;gap:5px}
.xe-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.xe-insight{display:flex;gap:11px;margin-top:12px;background:var(--xe-greensoft);border:1px solid color-mix(in srgb,var(--xe-green) 22%,transparent);border-radius:12px;padding:12px 14px}
.xe-insight .xe-i{flex:none;width:24px;height:24px;border-radius:7px;background:var(--xe-green);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.xe-insight p{margin:0;font-size:13px;color:var(--xe-ink)}
.xe-insight b{color:var(--xe-greend)}
.xe-alerts{display:grid;gap:10px;margin-top:12px}
.xe-alert{width:100%;text-align:left;font-family:inherit;display:flex;align-items:center;gap:11px;border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--xe-card);border:1px solid var(--xe-line);box-shadow:var(--xe-sh);transition:box-shadow .15s,transform .1s}
.xe-alert:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.09)}
.xe-alert .xe-i{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:16px}
.xe-alert p{margin:0;flex:1;font-size:13px;color:var(--xe-ink);line-height:1.45}
.xe-alert b{font-weight:800;color:var(--xe-ink)}
.xe-alert-go{flex:none;color:var(--xe-green);font-weight:800;font-size:16px}
.xe-alert.c{border-left:4px solid var(--vermelho,#c0392b)}
.xe-alert.c .xe-i{background:color-mix(in srgb,var(--vermelho,#c0392b) 13%,transparent)}
.xe-alert.w{border-left:4px solid #d1971f}
.xe-alert.w .xe-i{background:#faedd0}
/* Dobras: mais respiro entre cards (empilham colados por padrão) */
.dob-tabbody .xe-kpis{gap:16px;margin-bottom:16px}
.dob-tabbody .xe-block > .xe-card,.dob-tabbody .xe-block > .xe-grid2{margin-bottom:16px}
.dob-tabbody .xe-grid2{gap:16px}
.dob-lojabar{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:12px;padding:5px 0;font-size:12.5px}
.dob-lojabar-nome{font-weight:600;color:var(--xe-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dob-lojabar-track{background:var(--xe-lsoft);border-radius:5px;height:15px}
.dob-lojabar-fill{display:flex;height:100%;border-radius:5px;overflow:hidden;min-width:6px}
.dob-lojabar-fill i{display:block;height:100%}
.dob-lojabar-val{white-space:nowrap;font-weight:700;color:var(--xe-ink);text-align:right}
.dob-lojabar-val small{display:block;font-weight:600;font-size:10px;color:var(--xe-muted)}
@media(max-width:640px){.dob-lojabar{grid-template-columns:110px 1fr auto}}
/* Dobras: bloco "mês em andamento" (live) + gráfico dia a dia */
.xe-live{font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--xe-green,#1a7a4a);padding:2px 8px 2px 7px;border-radius:999px;text-transform:uppercase}
.xe-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:5px;vertical-align:middle;animation:xe-pulse 1.6s ease-in-out infinite}
@keyframes xe-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.xe-live-block{background:linear-gradient(180deg,rgba(26,122,74,.055),transparent 130px);border-radius:12px}
.dob-days{display:flex;align-items:flex-end;gap:2px;padding:14px 12px 10px;overflow-x:auto}
.dob-dcol{flex:1 1 0;min-width:13px;display:flex;flex-direction:column;align-items:center;gap:4px}
.dob-dbar-wrap{width:100%;height:76px;display:flex;align-items:flex-end;justify-content:center}
.dob-dbar{width:72%;max-width:16px;border-radius:3px 3px 0 0}
.dob-dval{font-size:9px;font-weight:700;color:var(--xe-ink,#17231c);font-variant-numeric:tabular-nums;min-height:12px;line-height:12px}
.dob-dcol.fut .dob-dval{color:var(--xe-muted,#8a988d);font-weight:600}
.dob-dnum{font-size:9.5px;color:var(--xe-muted,#6b7d70);font-variant-numeric:tabular-nums}
.dob-dnum.hoje{font-weight:800;color:var(--xe-green,#1a7a4a)}
/* Lista de lojas do mês atual: rolável (todas as lojas) e compacta */
.dob-lojas-scroll{max-height:296px;overflow-y:auto;padding:4px 15px}
.dob-lojas-scroll .dob-lojabar{padding:2px 0}
/* Cartões de contexto informativos (NÃO clicáveis) */
.xe-info{display:flex;align-items:center;gap:11px;border-radius:12px;padding:12px 14px;background:var(--xe-card);border:1px solid var(--xe-line);box-shadow:var(--xe-sh)}
.xe-info .xe-i{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:16px}
.xe-info p{margin:0;flex:1;font-size:13px;color:var(--xe-ink);line-height:1.45}
.xe-info b{font-weight:800;color:var(--xe-ink)}
.xe-info.c{border-left:4px solid var(--vermelho,#c0392b)}
.xe-info.c .xe-i{background:color-mix(in srgb,var(--vermelho,#c0392b) 13%,transparent)}
.xe-info.w{border-left:4px solid #d1971f}
.xe-info.w .xe-i{background:#faedd0}
/* Utilitários — ferramenta de encaminhamento à clínica */
.ut-head{margin-bottom:16px}
.ut-card{background:var(--branco,#fff);border:1px solid var(--cinza-borda,#e2e6ea);border-radius:12px;padding:20px 22px;max-width:920px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.ut-lbl{display:block;font-size:12px;font-weight:700;color:var(--cinza-texto,#5b6670);margin-bottom:5px;text-transform:uppercase;letter-spacing:.02em}
.ut-hint{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ff-text-muted,#8a939b)}
.ut-input{width:100%;font-family:inherit;font-size:14px;padding:8px 11px;border:1px solid var(--cinza-borda,#dde1e7);border-radius:8px;background:var(--branco,#fff);color:var(--texto,#1f2937)}
.ut-input:focus{outline:none;border-color:var(--verde,#1a7a4a);box-shadow:0 0 0 3px rgba(26,122,74,.12)}
.ut-busca{margin-bottom:18px}
.ut-busca-wrap{position:relative;max-width:520px}
.ut-sugestoes{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:var(--branco,#fff);border:1px solid var(--cinza-borda,#dde1e7);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:280px;overflow-y:auto}
.ut-sug{display:flex;flex-direction:column;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--cinza-bg,#f1f3f0);padding:9px 12px;cursor:pointer;font-family:inherit}
.ut-sug:hover{background:var(--cinza-bg,#f1f3f0)}
.ut-sug b{font-size:13.5px;color:var(--texto,#1f2937)}
.ut-sug span{font-size:11.5px;color:var(--ff-text-muted,#8a939b)}
.ut-sug-vazio{padding:10px 12px;font-size:12.5px;color:var(--ff-text-muted,#8a939b)}
.ut-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ut-col2{grid-column:1 / -1}
.ut-exames{display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:4px}
.ut-exame{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--texto,#1f2937);cursor:pointer}
.ut-acoes{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.ut-msg{font-size:12.5px}
.ut-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.ut-cols .ut-card{max-width:none}
.ut-preview{position:sticky;top:16px}
.ut-preview-lbl{font-size:12px;font-weight:700;color:var(--cinza-texto,#5b6670);text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px}
.ut-preview-box{background:var(--branco,#fff);border:1px solid var(--cinza-borda,#e2e6ea);border-radius:12px;overflow:hidden;min-height:520px;display:flex}
.ut-pdf{width:100%;height:660px;border:none}
.ut-preview-vazio{margin:auto;padding:24px;text-align:center;color:var(--ff-text-muted,#8a939b);font-size:13px}
.ut-link{font:inherit;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--verde,#1a7a4a);background:none;border:none;cursor:pointer;margin-left:8px;text-decoration:underline}
.ut-cargos-lista{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.ut-cargo-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--cinza-bg,#f1f3f0);border-radius:8px;font-size:13.5px}
.ut-cargo-del{background:none;border:none;color:var(--erro,#dc2626);cursor:pointer;font-size:14px;line-height:1;padding:2px 7px;border-radius:6px}
.ut-cargo-del:hover{background:rgba(220,38,38,.1)}
@media(max-width:960px){.ut-cols{grid-template-columns:1fr}.ut-preview{position:static}}
@media(max-width:640px){.ut-grid{grid-template-columns:1fr}}
/* status na sugestão de busca (desligado/afastado/férias) */
.ut-sug-off{color:var(--erro,#dc2626);font-weight:600}
.ut-sug-tag{color:var(--verde,#1a7a4a);font-weight:600}
/* Registro de guias */
.ut-log-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-bottom:14px}
.ut-log-total{font-size:13.5px;color:var(--texto,#1f2937)}
.ut-log-num{font-size:22px;font-weight:800;color:var(--verde,#1a7a4a);margin-right:4px}
.ut-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ut-chips-lbl{font-size:11.5px;color:var(--ff-text-muted,#8a939b);text-transform:uppercase;letter-spacing:.4px}
.ut-chip{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--cinza-bg,#f1f3f0);color:var(--texto,#374151)}
.ut-chip b{color:var(--verde,#1a7a4a)}
.ut-log-card{padding:0;overflow:hidden}
.ut-log-tablewrap{overflow-x:auto;max-height:62vh;overflow-y:auto}
.ut-log-table{width:100%;border-collapse:collapse;font-size:12.5px}
.ut-log-table thead th{position:sticky;top:0;background:var(--cinza-bg,#f1f3f0);text-align:left;font-weight:600;color:var(--ff-text-muted,#6b7280);padding:9px 12px;white-space:nowrap;z-index:1}
.ut-log-table td{padding:8px 12px;border-top:1px solid var(--cinza-bg,#f1f3f0);vertical-align:top;color:var(--texto,#1f2937)}
.ut-log-table tbody tr:hover td{background:var(--cinza-bg,#f8f9f8)}
.ut-td-nowrap{white-space:nowrap;font-variant-numeric:tabular-nums}
.ut-td-empresa{max-width:280px;font-size:11.5px;color:var(--ff-text-muted,#6b7280)}
/* ── Reembolso de KM ── */
.rk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.rk-card{background:var(--branco,#fff);border:1px solid var(--cinza-borda,#e5e7eb);border-radius:12px;padding:16px}
.rk-h3{font-size:13px;font-weight:600;margin:0 0 10px;color:var(--texto,#374151)}
.rk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rk-field{display:flex;flex-direction:column;min-width:0}
.rk-field.rk-sm{grid-column:span 1}
@media(min-width:720px){.rk-field.rk-sm{grid-column:auto}.rk-grid{grid-template-columns:repeat(4,1fr)}.rk-field{grid-column:span 2}.rk-field.rk-sm{grid-column:span 1}}
.rk-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--cinza-texto,#6b7280);font-weight:600;margin-bottom:4px}
.rk-input{width:100%;padding:8px 10px;border:1px solid var(--cinza-borda,#d1d5db);border-radius:8px;font:inherit;font-size:13.5px;background:var(--branco,#fff);color:var(--texto,#1f2937)}
.rk-input:focus{outline:none;border-color:var(--verde,#1a7a4a);box-shadow:0 0 0 2px rgba(26,122,74,.12)}
.rk-ro{background:var(--cinza-bg,#f1f3f0);color:var(--cinza-texto,#6b7280);display:flex;align-items:center;gap:8px;cursor:default}
.rk-ro .rk-sub{margin:0}
.rk-muted{color:var(--ff-text-muted,#8a939b);font-weight:400}
.rk-col-full{grid-column:1/-1}
.rk-modal-ov{position:fixed;inset:0;background:rgba(15,22,18,.5);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;z-index:1000;overflow:auto;backdrop-filter:blur(1px)}
.rk-modal{background:var(--branco,#fff);border:1px solid var(--cinza-borda,#e5e7eb);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.28);width:100%;max-width:660px;padding:24px}
.rk-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.rk-modal-head h3{margin:0;font-size:18px;color:var(--texto,#1f2937)}
.rk-modal-x{border:none;background:none;font-size:15px;line-height:1;cursor:pointer;color:var(--cinza-texto,#6b7280);border-radius:6px;padding:6px 9px}
.rk-modal-x:hover{background:var(--cinza-bg,#f1f3f0)}
.rk-modal-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px}
.rk-modal-foot>div{display:flex;gap:8px}
.rk-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--texto,#374151);cursor:pointer;padding:6px 0}
.rk-check input{width:16px;height:16px;accent-color:var(--verde,#1a7a4a)}
.rk-form-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}
.rk-form-foot>div{display:flex;gap:8px}
.rk-preview{font-size:13px;color:var(--verde,#1a7a4a);font-weight:600}
.rk-msg{font-size:12px}
.rk-filtros{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 10px}
.rk-filtros .rk-input{width:auto;min-width:150px}
.rk-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 10px}
.rk-toolbar .rk-filtros{margin:0}
.rk-toolbar-acoes{display:flex;gap:8px;flex-wrap:wrap}
.rk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0 4px}
.rk-scard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:var(--branco,#fff);border:1px solid var(--cinza-borda,#e5e7eb);border-left:3px solid var(--cinza-borda,#e5e7eb);border-radius:12px;padding:14px 16px;cursor:pointer;font:inherit;box-shadow:0 1px 2px rgba(20,40,30,.04)}
.rk-scard:hover{background:var(--cinza-bg,#f8f9f8)}
.rk-scard-n{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--texto,#1f2937)}
.rk-scard-l{font-size:11.5px;font-weight:600;color:var(--cinza-texto,#6b7280);text-transform:uppercase;letter-spacing:.03em}
.rk-scard-v{font-size:12px;color:var(--ff-text-muted,#8a939b);font-variant-numeric:tabular-nums}
.rk-scard.pend{border-left-color:#d1971f}.rk-scard.pend .rk-scard-n{color:#b45309}
.rk-scard.aprov{border-left-color:#1d4ed8}.rk-scard.aprov .rk-scard-n{color:#1d4ed8}
.rk-scard.env{border-left-color:var(--verde,#1a7a4a)}.rk-scard.env .rk-scard-n{color:var(--verde,#1a7a4a)}
.rk-scard.pago{border-left-color:var(--verde,#1a7a4a)}.rk-scard.pago .rk-scard-n{color:var(--verde,#1a7a4a)}
.rk-scard.rej{border-left-color:#dc2626}.rk-scard.rej .rk-scard-n{color:#dc2626}
.rk-scard-zero{opacity:.5}
.rk-bulk-rej{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.6);color:#fff;font:inherit;font-size:13px;font-weight:600;border-radius:8px;padding:5px 12px;cursor:pointer;margin-left:6px}
.rk-bulk-rej:hover{background:rgba(255,255,255,.3)}
.rk-tot-bar{font-size:13px;color:var(--texto,#374151);margin-bottom:8px}
/* barra de ações em lote (aprovador) */
.rk-bulk{position:sticky;top:8px;z-index:30;margin-bottom:10px}
.rk-bulk-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--verde,#1a7a4a);color:#fff;border-radius:10px;padding:10px 16px;box-shadow:0 6px 20px rgba(26,122,74,.28)}
.rk-bulk-n{font-size:13.5px;font-weight:600}
.rk-bulk .btn-primary{background:#fff;color:var(--verde,#1a7a4a);border:none}
.rk-bulk .btn-primary:hover{background:#eef7f1}
.rk-bulk-hint{font-size:12.5px;opacity:.95}
.rk-bulk-clear{margin-left:auto;background:none;border:none;color:#fff;font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;opacity:.9}
.rk-chkcol{width:34px;text-align:center}
.rk-chk{width:15px;height:15px;accent-color:var(--verde,#1a7a4a);cursor:pointer}
.rk-table tbody tr.rk-sel td{background:rgba(26,122,74,.09)!important}
.rk-grp{cursor:pointer;background:var(--cinza-bg,#f3f5f2)}
.rk-grp:hover td{background:var(--cinza-bg,#eef2ec)}
.rk-grp>td{border-top:2px solid var(--cinza-borda,#e5e7eb);padding-top:11px;padding-bottom:11px}
.rk-caret{display:inline-block;width:16px;color:var(--cinza-texto,#6b7280);font-size:11px}
.rk-grp-n{font-size:11.5px;color:var(--ff-text-muted,#8a939b);font-weight:400;margin-left:4px}
.rk-mini{display:inline-block;min-width:20px;text-align:center;font-size:11px;font-weight:600;padding:1px 6px;border-radius:999px;margin-left:5px}
.rk-mini.pend{background:#fef9c3;color:#854d0e}
.rk-mini.aprov{background:#dbeafe;color:#1e40af}
.rk-mini.env{background:#dcfce7;color:#166534}
.rk-mini.pago{background:#dcfce7;color:#166534}
.rk-mini.rej{background:#fee2e2;color:#991b1b}
.rk-link{background:none;border:none;color:var(--verde,#1a7a4a);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;padding:0}
.rk-tablewrap{padding:0;overflow-x:auto}
.rk-table{width:100%;border-collapse:collapse;font-size:12.5px}
.rk-table thead th{text-align:left;background:var(--cinza-bg,#f1f3f0);color:var(--ff-text-muted,#6b7280);font-weight:600;padding:9px 12px;white-space:nowrap}
.rk-table td{padding:9px 12px;border-top:1px solid var(--cinza-bg,#f1f3f0);vertical-align:top;color:var(--texto,#1f2937)}
.rk-table tbody tr:hover td{background:var(--cinza-bg,#f8f9f8)}
.rk-r{text-align:right;font-variant-numeric:tabular-nums}
.rk-nowrap{white-space:nowrap}
.rk-inativo td{opacity:.55}
.rk-sub{font-size:11px;color:var(--ff-text-muted,#8a939b);margin-top:2px}
.rk-rej{color:var(--erro,#dc2626)}
.rk-vazio{padding:20px;text-align:center;color:var(--ff-text-muted,#8a939b);font-size:13px}
.rk-acoes{white-space:nowrap;text-align:right}
.rk-act{font:inherit;font-size:11.5px;font-weight:600;border:1px solid var(--cinza-borda,#d1d5db);background:var(--branco,#fff);color:var(--texto,#374151);border-radius:6px;padding:3px 8px;margin-left:4px;cursor:pointer}
.rk-act:hover{background:var(--cinza-bg,#f1f3f0)}
.rk-act.ok{color:#15803d;border-color:#bbf7d0}
.rk-act.no{color:#b91c1c;border-color:#fecaca}
.rk-act.send{color:#1d4ed8;border-color:#bfdbfe}
.rk-act.rev{color:#6b21a8;border-color:#e9d5ff}
.rk-act.del{color:var(--erro,#dc2626);border:none}
.rk-badge{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.rk-pendente{background:#fef9c3;color:#854d0e}
.rk-aprovado{background:#dbeafe;color:#1e40af}
.rk-enviado_pagamento{background:#dcfce7;color:#166534}
.rk-pago{background:#dcfce7;color:#166534}
.rk-rejeitado{background:#fee2e2;color:#991b1b}
.rk-busca-wrap{position:relative}
.rk-sugestoes{position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--branco,#fff);border:1px solid var(--cinza-borda,#e5e7eb);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.1);max-height:280px;overflow:auto;margin-top:4px}
.rk-sug{display:flex;flex-direction:column;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--cinza-bg,#f1f3f0);padding:9px 12px;cursor:pointer;font-family:inherit}
.rk-sug:hover{background:var(--cinza-bg,#f1f3f0)}
.rk-sug b{font-size:13.5px;color:var(--texto,#1f2937)}
.rk-sug span{font-size:11.5px;color:var(--ff-text-muted,#8a939b)}
.rk-sug-vazio{padding:10px 12px;font-size:12.5px;color:var(--ff-text-muted,#8a939b)}
.dob-alrt{border-left:4px solid var(--xe-line)}
.dob-alrt.c{border-left-color:#c0392b}
.dob-alrt.w{border-left-color:#d1971f}
.dob-alrt-n{font-weight:600;font-size:12px;color:var(--xe-muted);margin-left:6px}
.dob-alrt table tr.alrt-r{cursor:pointer}
.dob-alrt table tr.alrt-r:hover td{background:var(--xe-lsoft)}
.dob-alrt .alrt-ar{display:inline-block;width:12px;color:var(--xe-green);font-weight:800;font-size:11px}
.dob-alrt tr.alrt-d > td{background:var(--xe-lsoft);padding:4px 12px 10px 28px}
.alrt-db{font-size:12px;color:var(--xe-ink)}
.alrt-list{margin:2px 0 0;padding-left:16px;list-style:disc}
.alrt-list li{margin:2px 0;line-height:1.5}
.alrt-tk{color:var(--xe-green);font-weight:700;text-decoration:none;white-space:nowrap;font-size:11px}
.alrt-tk:hover{text-decoration:underline}
.alrt-tklbl{color:var(--xe-muted);font-size:10px;font-weight:600;margin-left:4px}
.alrt-sub{font-size:11px;color:var(--xe-muted);font-weight:400;margin-top:2px}
.alrt-fonte{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;white-space:nowrap}
.alrt-fonte.atestado{color:#5b3fb0;background:#efeafb}
.alrt-fonte.afastamento{color:#1d6a8a;background:#e3f2f7}
.dob-alrt table th.alrt-th{cursor:pointer;user-select:none}
.dob-alrt table th.alrt-th:hover{color:var(--xe-green)}
.dob-alrt table th.alrt-th.on{color:var(--xe-green)}
.dob-lc{padding:6px 14px 2px}
.dob-lc-plot{position:relative}
.dob-lc-svg{position:absolute;inset:0;width:100%;height:100%}
.dob-lc-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--xe-green);transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--xe-card)}
.dob-lc-dot.on{width:10px;height:10px}
.dob-lc-lab{position:absolute;transform:translate(-50%,-125%);text-align:center;line-height:1.12;white-space:nowrap;pointer-events:none}
.dob-lc-lab b{display:block;font-size:10.5px;font-weight:700;color:var(--xe-muted)}
.dob-lc-lab span{font-size:9.5px;color:var(--xe-faint)}
.dob-lc-lab.on b{color:var(--xe-greend)}
.dob-lc-x{position:relative;height:18px;margin-top:2px}
.dob-lc-x span{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--xe-faint);white-space:nowrap}
.dob-lc-x span.on{color:var(--xe-greend);font-weight:700}
/* Custo de mão de obra — evolução (fixo × variável) */
.cmo-bars{display:flex;align-items:flex-end;gap:8px;height:190px;padding:24px 18px 0}
.cmo-bcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.cmo-btop{font-size:12px;font-weight:800;color:var(--xe-ink);text-align:center;line-height:1.15;margin-bottom:5px}
.cmo-btop span{display:block;font-size:10px;font-weight:600;color:var(--xe-muted)}
.cmo-bwrap{width:100%;flex:1;display:flex;align-items:flex-end;justify-content:center}
.cmo-bar{width:66%;max-width:90px;display:flex;flex-direction:column;border-radius:7px 7px 0 0;overflow:hidden;min-height:6px}
.cmo-bar i{display:flex;align-items:center;justify-content:center;width:100%;color:#fff;font-size:11px;font-weight:800}
.cmo-bar .vr{background:#d1971f}
.cmo-bar .fx{background:#1a7a4a}
.cmo-bx{font-size:11.5px;color:var(--xe-muted);margin-top:6px;font-weight:600}
.cmo-dot{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:2px}
.cmo-dot.fx{background:#1a7a4a}
.cmo-dot.vr{background:#d1971f}
.cmo-fat{padding:8px 14px 4px}
.cmo-fplot{position:relative}
.cmo-fsvg{position:absolute;inset:0;width:100%;height:100%}
.cmo-fd{position:absolute;transform:translate(-50%,-150%);font-size:11px;font-weight:800;color:var(--xe-greend);white-space:nowrap}
.cmo-fx{position:relative;height:18px;margin-top:2px}
.cmo-fx span{position:absolute;transform:translateX(-50%);font-size:11.5px;color:var(--xe-muted);font-weight:600}
.cg-strip{height:16px;margin:4px 0 2px}
.cg-list{padding:6px 2px 0}
.cg-row{display:grid;grid-template-columns:132px minmax(70px,1fr) 50px 92px 64px 86px;align-items:center;gap:10px;padding:6px 8px;border-radius:8px}
.cg-row:not(.cg-head):hover{background:var(--xe-lsoft)}
.cg-head{font-size:11.5px;color:var(--xe-muted);font-weight:600}
.cg-nome{font-weight:600;color:var(--xe-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-barwrap{background:var(--xe-lsoft);border-radius:5px;height:12px;overflow:hidden}
.cg-bar{display:block;height:100%;background:var(--xe-green);border-radius:5px}
.cg-pct{font-weight:700;text-align:right;color:var(--xe-ink);font-variant-numeric:tabular-nums}
.cg-val,.cg-n,.cg-med{text-align:right;color:var(--xe-ink);font-variant-numeric:tabular-nums}
.cg-head .cg-val,.cg-head .cg-n,.cg-head .cg-med,.cg-head .cg-pct{color:var(--xe-muted);font-weight:600}
.cg-n{color:var(--xe-muted)}
@media(max-width:640px){.cg-row{grid-template-columns:96px 1fr 46px 78px;gap:8px}.cg-n,.cg-med,.cg-head .cg-n,.cg-head .cg-med{display:none}}
.he-list{padding:8px 4px 2px}
.he-row{display:grid;grid-template-columns:12px minmax(120px,1fr) auto 62px 84px 78px;align-items:center;gap:10px;padding:8px 11px;border-radius:8px}
.he-head{font-size:11.5px;color:var(--xe-muted);font-weight:600;padding-bottom:2px}
.he-sev{width:9px;height:9px;border-radius:50%}
.he-head .he-sev{display:none}
.he-nome{font-weight:600;color:var(--xe-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.he-trend{font-size:12px;color:var(--xe-muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.he-pct{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.he-val{text-align:right;color:var(--xe-ink);font-variant-numeric:tabular-nums}
.he-tag{font-size:11px;color:#c0392b;font-weight:700;text-align:right;white-space:nowrap}
.he-ok{padding:14px 12px;color:#136139;font-weight:600}
@media(max-width:640px){.he-row{grid-template-columns:10px 1fr auto 54px;gap:8px}.he-val,.he-tag,.he-head .he-val,.he-head .he-tag{display:none}}
.xe-grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
@media(max-width:820px){.xe-grid2{grid-template-columns:1fr}}
.xe-trend{padding:8px 12px 6px}
.xe-trend-x{display:flex;justify-content:space-between;font-size:11px;color:var(--xe-faint);padding:0 6px 8px}
.xe-trend-x .on{color:var(--xe-greend);font-weight:700}
.xe-rank{padding:10px 15px 12px;display:flex;flex-direction:column;gap:9px}
.xe-rrow{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px;font-size:12.5px}
.xe-rbar{display:inline-block;height:8px;border-radius:5px;background:var(--xe-green);min-width:4px}
.xe-rv{font-weight:700;color:var(--xe-ink)}
.xe-motivos{padding:2px 15px 14px;display:flex;flex-direction:column;gap:7px;font-size:12.5px;border-top:1px solid var(--xe-lsoft);margin-top:4px}
.xe-mrow{display:flex;justify-content:space-between;gap:8px;color:var(--xe-muted)}
.xe-mrow b{color:var(--xe-ink)}
.xe-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--xe-line);font-size:11.5px;color:var(--xe-faint);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
.xe-faint{color:var(--xe-faint);font-size:12px}

/* Painel executivo — tabela alta com rolagem vertical e cabeçalho fixo */
.xe-tall{max-height:460px;overflow-y:auto}
.xe-tall thead th{position:sticky;top:0;z-index:1}

/* Linha do Grupo (total) sempre visível no rodapé da tabela rolável */
.xe-tall .xe-tot td{position:sticky;bottom:0;z-index:2;background:var(--xe-lsoft)}
.xe-leg b{color:var(--xe-ink);font-weight:800}

/* Painel executivo — filtros (supervisor/loja) e número no ranking */
.xe-filters .xe-fl select{font:inherit;font-size:13px;padding:4px 7px;border:1px solid var(--xe-line);border-radius:7px;background:var(--xe-card);color:var(--xe-ink);max-width:180px}
.xe-pill{font:inherit;font-size:13px;font-weight:600;color:var(--xe-ink);background:var(--xe-card);border:1px solid var(--xe-line);border-radius:9px;padding:6px 11px;cursor:pointer}
.xe-pill:hover{border-color:var(--xe-green)}
.xe-spacer{flex:1}
.xe-rv small{color:var(--xe-muted);font-weight:600;font-size:10.5px;display:block}

/* Filtro (supervisor + lojas) no header verde das telas de indicadores */
.ind-capa-comp select{font:inherit;font-size:12.5px;padding:4px 8px;border-radius:7px;border:1px solid rgba(255,255,255,.35);background:#fff;color:#16211b;max-width:180px;margin-top:2px;cursor:pointer}
.ind-capa-filtro-btn{font:inherit;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:6px 11px;cursor:pointer;white-space:nowrap;align-self:end}
.ind-capa-filtro-btn:hover{background:rgba(255,255,255,.28)}

/* Painel executivo — evolução (sparklines) */
.xe-evos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.xe-evos{grid-template-columns:1fr}}
.xe-evo{background:var(--xe-card);border:1px solid var(--xe-line);border-radius:14px;padding:12px 14px;box-shadow:var(--xe-sh)}
.xe-evo-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.xe-evo-t{font-size:12px;font-weight:700;color:var(--xe-muted);text-transform:uppercase;letter-spacing:.03em}
.xe-evo-v{font-size:19px;font-weight:800;color:var(--xe-ink);letter-spacing:-.01em}
.xe-evo svg{display:block;margin:6px 0 2px}
.xe-evo-f{display:flex;align-items:center;justify-content:space-between;gap:8px}
.xe-evo-f small{color:var(--xe-faint);font-size:10.5px}
.xe-print{margin-left:6px}

/* Impressão / PDF do painel executivo */
@media print{
  .sol-sidebar,.xe-filters{display:none !important}
  .xe-wrap{background:#fff !important;padding:0 !important;margin:0 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .xe-tall{max-height:none !important;overflow:visible !important}
  .xe-block,.xe-card,.xe-evo,.xe-kpi{break-inside:avoid}
  .xe-kpi,.xe-card,.xe-evo,.xe-chip,.xe-stack i,.xe-tot td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #view-indicadores{padding:0 !important}
}

/* ── Meu Yungas (painel pessoal do master) ───────────────────────── */
#meuyungas-root { display: flex; flex-direction: column; gap: 28px; max-width: 900px; }
.my-loading, .my-empty { padding: 20px; color: var(--cinza-texto); background: var(--branco);
  border: 1px dashed var(--cinza-borda); border-radius: var(--radius); text-align: center; }
.my-sec { display: flex; flex-direction: column; gap: 12px; }
.my-sec-head { display: flex; flex-direction: column; gap: 2px; }
.my-sec-title { font-size: 1.05rem; font-weight: 700; color: var(--texto); margin: 0; display: flex; align-items: center; gap: 8px; }
.my-sec-sub { font-size: .82rem; color: var(--cinza-texto); margin: 0; }
.my-count { background: var(--verde-light); color: var(--verde-dark); font-size: .78rem;
  font-weight: 700; border-radius: 999px; padding: 1px 9px; }
.my-badge { background: rgba(255,255,255,.18); border-radius: 999px; padding: 0 7px; font-size: .72rem; margin-left: 4px; }

/* rescisões — cards */
.my-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.my-card { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--radius);
  box-shadow: var(--card-shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.my-card--resc { border-left: 3px solid var(--vermelho); }
.my-card-main { display: flex; flex-direction: column; gap: 1px; }
.my-card-nome { font-weight: 700; color: var(--texto); font-size: .92rem; }
.my-card-meta { font-size: .78rem; color: var(--cinza-texto); }
.my-card-tipo { font-size: .82rem; color: var(--texto); }
.my-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }

/* chamados marcados — lista */
.my-list { display: flex; flex-direction: column; gap: 8px; }
.my-row { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--radius);
  box-shadow: var(--card-shadow); padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.my-row.is-fora { border-left: 3px solid var(--amarelo, #e0a800); }
.my-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.my-row-top { display: flex; align-items: center; gap: 8px; }
.my-row-assunto { font-weight: 600; color: var(--texto); font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-tag-fora { flex-shrink: 0; background: #fff4d6; color: #8a6a00; font-size: .68rem;
  font-weight: 700; border-radius: 4px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .3px; }
.my-row-meta { font-size: .78rem; color: var(--cinza-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-row-acts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.my-dias.is-old { color: var(--vermelho); font-weight: 600; }
.my-tk { font-size: .8rem; color: var(--verde-dark); text-decoration: none; white-space: nowrap; font-weight: 600; }
.my-tk:hover { text-decoration: underline; }
.my-visto { border: 1px solid var(--cinza-borda); background: var(--cinza-bg); color: var(--cinza-texto);
  border-radius: 6px; padding: 3px 10px; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.my-visto:hover { background: var(--verde-light); color: var(--verde-dark); border-color: var(--verde-mid); }
.my-visto:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  .my-row { flex-direction: column; align-items: stretch; }
  .my-row-acts { justify-content: space-between; }
}

/* ── Memória de cálculo do estorno (repasse à contabilidade) ─────── */
.est-acoes { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.est-copiar, .est-calc-btn { border: 1px solid var(--cinza-borda); background: var(--branco);
  color: var(--verde-dark); border-radius: 6px; padding: 3px 9px; font-size: .76rem; cursor: pointer; }
.est-copiar { background: var(--verde-light); border-color: var(--verde-mid); font-weight: 600; }
.est-copiar:hover { background: var(--verde-mid); color: #fff; }
.est-calc-btn { color: var(--cinza-texto); }
.est-calc-btn:hover { background: var(--cinza-bg); }
.est-calc-row.hidden { display: none; }
.est-calc-box { background: var(--cinza-bg); border-left: 3px solid var(--verde-mid);
  border-radius: 6px; padding: 10px 14px; margin: 2px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.est-calc-linha { display: grid; grid-template-columns: 42px minmax(180px,1fr) minmax(200px,1.4fr);
  gap: 10px; align-items: baseline; font-size: .84rem; }
.est-calc-tp { font-weight: 700; font-size: .72rem; border-radius: 4px; padding: 1px 6px; text-align: center; color: #fff; }
.est-calc-tp--vt { background: #2b6cb0; }
.est-calc-tp--va { background: #b7791f; }
.est-calc-desc { color: var(--texto); }
.est-calc-total { border-top: 1px dashed var(--cinza-borda); padding-top: 6px; font-size: .88rem; color: var(--texto); }
@media (max-width: 720px) { .est-calc-linha { grid-template-columns: 42px 1fr; } .est-calc-desc { grid-column: 2; } }

/* toggle de sentido do VA (pra frente / pra trás) na memória de estorno */
.est-va-toggle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--texto); padding-top: 2px; }
.est-va-op { border: 1px solid var(--cinza-borda); background: var(--branco); color: var(--cinza-texto);
  border-radius: 6px; padding: 2px 10px; font-size: .78rem; cursor: pointer; }
.est-va-op.on { background: var(--amarelo, #e0a800); color: #3a2e00; border-color: var(--amarelo, #e0a800); font-weight: 700; }
.est-va-op:hover:not(.on) { background: var(--cinza-bg); }

/* marcador de cobertura parcial no Painel Executivo (loja com < N meses no período) */
.xe-parcial { color: #b7791f; background: #fff4d6; border-radius: 4px; padding: 0 5px; font-size: .68rem; font-weight: 700; white-space: nowrap; }

/* Desligados no Cálculo de Benefícios (só consulta) */
.benef-deslig-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--cinza-texto); cursor: pointer; white-space: nowrap; }
.benef-deslig-tag { background: var(--vermelho-light); color: var(--vermelho); font-size: .68rem; font-weight: 700; border-radius: 4px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
tr.benef-row-deslig td { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(192,57,43,.03) 6px, rgba(192,57,43,.03) 12px); color: var(--cinza-texto); }
tr.benef-row-deslig .benef-valor { opacity: .8; }

/* VT de Admissões — 3 empresas por pessoa (vínculo / flash / lotação) */
.adm-empresas { font-size: .82rem; line-height: 1.5; }
.adm-emp { white-space: nowrap; }
.adm-emp-lbl { display: inline-block; min-width: 58px; color: var(--cinza-texto); font-size: .68rem; text-transform: uppercase; letter-spacing: .3px; }
.adm-emp-flash { font-weight: 700; color: var(--verde-dark); background: var(--verde-light); border-radius: 4px; padding: 0 4px; }
.adm-emp-flash .adm-emp-lbl { color: var(--verde-dark); }

/* Dobra durante atestado (Indicadores/Dobras) */
.dob-atest-oco { font-size: .82rem; line-height: 1.5; }
.dob-atest-oco > div { white-space: nowrap; }
.dob-cid { background: var(--vermelho-light); color: var(--vermelho); border-radius: 3px; padding: 0 4px; font-size: .7rem; }

/* ── Indicadores › CMV ── */
.ind-cmv-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; overflow: hidden; }
.ind-cmv-toggle button { background: transparent; color: #fff; border: 0; padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.ind-cmv-toggle button.on { background: #fff; color: var(--verde); font-weight: 600; }
.ind-cmv-leg { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.ind-cmv-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ind-cmv-chip.otimo, .ind-cmv-cel.otimo { background: #1f7a4a; color: #fff; }
.ind-cmv-chip.bom, .ind-cmv-cel.bom { background: #a9dbc1; color: #143d29; }
.ind-cmv-chip.atencao, .ind-cmv-cel.atencao { background: #f3d774; color: #4a3a00; }
.ind-cmv-chip.alerta, .ind-cmv-cel.alerta { background: #f0a35c; color: #4a2400; }
.ind-cmv-chip.trava, .ind-cmv-cel.trava { background: #c0392b; color: #fff; }
.ind-cmv-cel.na { color: #9aa; }
.ind-cmv-tab td.ind-cmv-cel { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; min-width: 64px; }
.ind-cmv-tab td.ind-cmv-ate { outline: 2px solid var(--verde); outline-offset: -2px; }
.ind-cmv-tab td.ind-cmv-loja { white-space: nowrap; font-weight: 600; }
.ind-cmv-delta { text-align: center; font-variant-numeric: tabular-nums; }
.ind-cmv-delta.up { color: #b91c1c; } .ind-cmv-delta.down { color: #1f7a4a; }
.ind-rcard-v.ind-cmv-otimo { color: #1f7a4a; } .ind-rcard-v.ind-cmv-bom { color: #2f8f5e; } .ind-rcard-v.ind-cmv-atencao { color: #b58a00; } .ind-rcard-v.ind-cmv-alerta { color: #c2600f; } .ind-rcard-v.ind-cmv-trava { color: #c0392b; }
.ind-cmv-serie { display: flex; flex-wrap: wrap; gap: 8px; }
.ind-cmv-mes { display: flex; flex-direction: column; gap: 3px; min-width: 110px; padding: 8px 10px; border: 1px solid var(--cinza-borda); border-radius: 10px; font-size: 12.5px; }
.ind-cmv-acima { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.ind-cmv-acima-card { border: 1px solid var(--cinza-borda); border-left: 4px solid #f0a35c; border-radius: 10px; padding: 10px 12px; }
.ind-cmv-acima-card.trava { border-left-color: #c0392b; }
.ind-cmv-acima-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ind-cmv-acima-h small { color: #6b7570; }
.ind-cmv-acima-b { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0; font-size: 13px; }
.ind-cmv-acima-e { font-size: 12.5px; color: #4a5550; line-height: 1.4; }
@media (max-width: 640px) { .ind-cmv-acima { grid-template-columns: 1fr; } }

.ind-ajp-bar { display: block; height: 8px; border-radius: 4px; background: #e9ece9; overflow: hidden; } .ind-ajp-bar i { display: block; height: 100%; background: #c0392b; }

/* ── CMV por loja (tela nova, 17/09/2026 — public/js/cmv.js). Prefixo cmvx- pra não colidir. ── */
.cmvx-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0; background: #fff; border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 10px 14px; box-shadow: var(--card-shadow); }
.cmvx-filtros label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-texto); display: block; margin-bottom: 3px; font-weight: 600; }
.cmvx-ctl { background: #fff; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 7px 10px; min-width: 140px; font: inherit; color: var(--texto); }
.cmvx-ctl:hover { border-color: var(--verde); }
.cmvx-sep { color: #9aa1ad; padding-bottom: 9px; }
.cmvx-periodo { margin-left: auto; font-size: 13px; color: var(--cinza-texto); padding-bottom: 8px; }
.cmvx-periodo b { color: var(--texto); }
.cmvx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cmvx-kpi { background: #fff; border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 14px 16px 12px; box-shadow: var(--card-shadow); position: relative; overflow: hidden; border-top: 3px solid var(--verde); }
.cmvx-kpi .lbl { font-size: 12px; color: var(--cinza-texto); font-weight: 600; }
.cmvx-kpi .val { font-size: 32px; font-weight: 700; line-height: 1.05; margin-top: 6px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cmvx-kpi .val small { font-size: 15px; font-weight: 600; color: var(--cinza-texto); margin-left: 2px; }
.cmvx-kpi .foot { font-size: 12px; color: var(--cinza-texto); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmvx-kpi.tone-b5 { border-top-color: #c0392b; } .cmvx-kpi.tone-b5 .val { color: #c0392b; }
.cmvx-kpi.tone-b4 { border-top-color: #f0955c; } .cmvx-kpi.tone-b4 .val { color: #c2410c; }
.cmvx-kpi .spark { position: absolute; right: 12px; top: 14px; }
.cmvx-delta { font-weight: 700; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: #f0f3f5; }
.cmvx-delta.up, .cmvx-tb td.up, .cmvx-heat td.delta.up, .cmvx-sup .d .up, .cmvx-dkpis .mid.up { color: #c0392b; }
.cmvx-delta.down, .cmvx-tb td.down, .cmvx-heat td.delta.down, .cmvx-sup .d .down, .cmvx-dkpis .mid.down { color: var(--verde); }
.cmvx-card { margin-top: 14px; }
.cmvx-h2 { font-size: 17px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--texto); margin: 0; }
.cmvx-hint { font-size: 12px; font-weight: 400; color: var(--cinza-texto); }
.cmvx-grid2 { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; margin-top: 14px; }
.cmvx-grid2 .cmvx-card { margin-top: 0; }
@media (max-width: 900px) { .cmvx-grid2 { grid-template-columns: 1fr; } }
.cmvx-legend, .cmvx-faixas { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--cinza-texto); margin-top: 8px; align-items: center; }
.cmvx-legend i, .cmvx-faixas i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.cmvx-legend i.line { height: 3px; width: 16px; vertical-align: 2px; }
.cmvx-faixas i.b1, .cmvx-cell.b1, .cmvx-pill.b1, .cmvx-sup .v i.b1, .cmvx-sup .bar i.b1 { background: #1a7a4a; color: #fff; }
.cmvx-faixas i.b2, .cmvx-cell.b2, .cmvx-pill.b2, .cmvx-sup .v i.b2, .cmvx-sup .bar i.b2 { background: #a8d5b5; color: #1a1f2e; }
.cmvx-faixas i.b3, .cmvx-cell.b3, .cmvx-pill.b3, .cmvx-sup .v i.b3, .cmvx-sup .bar i.b3 { background: #f5c842; color: #1a1f2e; }
.cmvx-faixas i.b4, .cmvx-cell.b4, .cmvx-pill.b4, .cmvx-sup .v i.b4, .cmvx-sup .bar i.b4 { background: #f0955c; color: #1a1f2e; }
.cmvx-faixas i.b5, .cmvx-cell.b5, .cmvx-pill.b5, .cmvx-sup .v i.b5, .cmvx-sup .bar i.b5 { background: #c0392b; color: #fff; }
.cmvx-card svg { display: block; max-width: 100%; height: auto; }
.cmvx-axis { fill: #9aa1ad; font-size: 11px; }
.cmvx-axis.on { fill: var(--texto); font-weight: 700; font-size: 12px; }
.cmvx-grid { stroke: #e6eaee; stroke-width: 1; }
.cmvx-scroll { overflow-x: auto; margin-top: 10px; }
.cmvx-tb { border-collapse: collapse; width: 100%; font-size: 13px; }
.cmvx-tb th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-texto); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--cinza-borda); white-space: nowrap; }
.cmvx-tb td { padding: 7px 8px; border-bottom: 1px solid #e6eaee; vertical-align: middle; }
.cmvx-tb td.r, .cmvx-tb th.r { text-align: right; }
.cmvx-tb td.num { font-variant-numeric: tabular-nums; }
.cmvx-tb tbody tr:hover td { background: #f0f3f5; }
.cmvx-tb td.loja { font-weight: 700; cursor: pointer; white-space: nowrap; }
.cmvx-tb td.loja:hover { color: var(--verde); }
.cmvx-tb td.sup { color: var(--cinza-texto); white-space: nowrap; }
.cmvx-tb td.motivo { min-width: 220px; }
.cmvx-tb td.leitura { color: var(--texto); }
.cmvx-tb tfoot td { font-weight: 700; border-top: 1px solid var(--cinza-borda); border-bottom: none; }
.cmvx-vazio { color: var(--cinza-texto); padding: 14px 8px !important; }
.cmvx-vazio.ok { color: var(--verde-dark); font-weight: 600; }
.cmvx-motivo { width: 100%; min-width: 200px; background: #fff; border: 1px dashed var(--cinza-borda); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12px; color: var(--texto); }
.cmvx-motivo::placeholder { color: #9aa1ad; }
.cmvx-motivo:focus { border-style: solid; border-color: var(--verde); outline: none; }
.cmvx-motivo.salvo { border-color: var(--verde); background: var(--verde-light); }
.cmvx-motivo-quem { font-size: 11px; color: #9aa1ad; margin-top: 2px; }
.cmvx-bar { display: inline-block; height: 8px; border-radius: 4px; background: #f0955c; vertical-align: middle; margin-right: 6px; }
.cmvx-pill { display: inline-block; font-weight: 700; padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; min-width: 52px; text-align: center; }
.cmvx-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; margin: 1px 2px 1px 0; }
.cmvx-chip.b5 { background: rgba(192,57,43,.09); color: #c0392b; } .cmvx-chip.b4 { background: rgba(240,149,92,.14); color: #b45309; } .cmvx-chip.b3 { background: rgba(245,200,66,.14); color: #8a6100; }
.cmvx-chip.s1 { background: #e8f0ff; color: #2563eb; } .cmvx-chip.gray { background: #f0f3f5; color: var(--cinza-texto); } .cmvx-chip.ok { background: var(--verde-light); color: var(--verde-dark); }
.cmvx-sev { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.cmvx-sev.s3 { background: #c0392b; } .cmvx-sev.s2 { background: #f0955c; } .cmvx-sev.s1 { background: #f5c842; }
.cmvx-heat { border-collapse: separate; border-spacing: 2px; font-size: 12px; width: 100%; }
.cmvx-heat th { font-weight: 600; color: var(--cinza-texto); text-align: center; padding: 4px 6px; font-size: 11px; white-space: nowrap; }
.cmvx-heat th.on { color: var(--texto); }
.cmvx-heat th.loja, .cmvx-heat th.sinais { text-align: left; }
.cmvx-heat td { padding: 0; text-align: center; }
.cmvx-heat td.loja { text-align: left; padding: 0 8px 0 4px; white-space: nowrap; font-weight: 600; cursor: pointer; border-radius: 4px; }
.cmvx-heat td.loja:hover { background: #f0f3f5; color: var(--verde); }
.cmvx-heat td.loja .reg { font-size: 10px; color: #9aa1ad; font-weight: 400; margin-left: 6px; }
.cmvx-heat td.sinais { text-align: left; padding-left: 8px; white-space: nowrap; }
.cmvx-heat td.delta { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; padding: 0 6px; }
.cmvx-cell { display: block; padding: 5px 4px; border-radius: 4px; font-variant-numeric: tabular-nums; font-weight: 600; min-width: 46px; cursor: default; }
.cmvx-cell.empty { background: #f0f3f5; color: #9aa1ad; font-weight: 400; }
.cmvx-cell.ctx { opacity: .5; }
.cmvx-subhead td { background: var(--verde-light); color: var(--verde-dark); font-weight: 700; text-align: left !important; padding: 6px 8px !important; border-radius: 4px; }
.cmvx-sup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.cmvx-sup { border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 12px 14px; cursor: pointer; background: #fff; }
.cmvx-sup:hover { border-color: var(--verde); }
.cmvx-sup.sel { border-color: var(--verde); background: var(--verde-light); }
.cmvx-sup .n { font-weight: 700; font-size: 14px; }
.cmvx-sup .v { font-size: 26px; font-weight: 700; line-height: 1.1; margin-top: 4px; display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.cmvx-sup .v i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.cmvx-sup .d { font-size: 12px; color: var(--cinza-texto); margin-top: 4px; }
.cmvx-sup .d span { font-weight: 700; }
.cmvx-sup .bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 8px; background: #f0f3f5; }
.cmvx-sup .bar i { display: block; height: 100%; }
.cmvx-nota { font-size: 12px; color: var(--cinza-texto); margin-top: 10px; }
.cmvx-nota b { color: var(--texto); }
.cmvx-muted { font-size: 12px; color: var(--cinza-texto); }
.cmvx-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 1190; display: none; }
.cmvx-backdrop.show { display: block; }
.cmvx-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(520px, 100%); background: #fff; border-left: 1px solid var(--cinza-borda); box-shadow: -12px 0 32px -16px rgba(0,0,0,.3); transform: translateX(102%); transition: transform .25s ease; z-index: 1200; overflow: auto; padding: 18px 20px 24px; }
.cmvx-drawer.open { transform: none; }
@media (prefers-reduced-motion: reduce) { .cmvx-drawer { transition: none; } }
.cmvx-close { position: absolute; right: 14px; top: 12px; background: #f0f3f5; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 4px 10px; cursor: pointer; font: inherit; }
.cmvx-drawer h2 { font-size: 22px; color: var(--verde-dark); margin: 0; padding-right: 90px; }
.cmvx-meta { color: var(--cinza-texto); font-size: 12px; margin-top: 2px; }
.cmvx-dsec { margin-top: 16px; }
.cmvx-dsec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-texto); font-weight: 700; margin: 0 0 6px; }
.cmvx-dkpis { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.cmvx-dkpis .big { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmvx-dkpis .big.b1 { color: #1a7a4a; } .cmvx-dkpis .big.b3 { color: #8a6100; } .cmvx-dkpis .big.b4 { color: #c2410c; } .cmvx-dkpis .big.b5 { color: #c0392b; }
.cmvx-dkpis .mid { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmvx-comp { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.cmvx-comp .k { color: var(--cinza-texto); } .cmvx-comp .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cmvx-comp .tot { border-top: 1px solid var(--cinza-borda); padding-top: 4px; font-weight: 700; }
.cmvx-hist { font-size: 13px; padding: 4px 0; border-bottom: 1px solid #e6eaee; }
@media (max-width: 640px) { .cmvx-periodo { margin-left: 0; } .cmvx-ctl { min-width: 120px; } .cmvx-kpi .val { font-size: 28px; } }

/* ── Utilitários · Histórico de colaboradores (RH, 17/09/2026 — visual aprovado em prévia) ── */
.ut-hbusca { position: relative; z-index: 5; }
.ut-hbusca-wrap { position: relative; max-width: 560px; }
.ut-hinput { font-size: 15px; padding: 10px 14px 10px 40px !important; }
.ut-hlupa { position: absolute; left: 13px; top: 12px; width: 18px; height: 18px; color: #9aa1ad; pointer-events: none; }
.ut-hsug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--cinza-borda); border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(0,0,0,.18); overflow: hidden; display: none; max-height: 420px; overflow-y: auto; }
.ut-hsug.show { display: block; }
.ut-hsug-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #9aa1ad; padding: 8px 14px 4px; font-weight: 700; }
.ut-hsug-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid #e6eaee; padding: 10px 14px; cursor: pointer; font: inherit; color: inherit; }
.ut-hsug-item:hover, .ut-hsug-item.foco { background: var(--verde-light); }
.ut-hsug-item .n { font-weight: 700; font-size: 14px; grid-column: 1; grid-row: 1; }
.ut-hsug-item .n mark { background: #fff3c4; color: inherit; border-radius: 2px; padding: 0 1px; }
.ut-hsug-item .m { font-size: 12px; color: var(--cinza-texto); grid-column: 1; grid-row: 2; }
.ut-hsug-item .st { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ut-hchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: #f0f3f5; color: var(--cinza-texto); }
.ut-hchip.ok { background: var(--verde-light); color: var(--verde-dark); }
.ut-hchip.jc { background: var(--vermelho-light); color: var(--vermelho); }
.ut-hchip.dom { background: #e8f0ff; color: #2563eb; }
.ut-hchip.adv { background: #fff3e0; color: #b45309; }
.ut-hpessoa { background: #fff; border: 1px solid var(--cinza-borda); border-radius: 12px; box-shadow: var(--card-shadow); overflow: hidden; container-type: inline-size; }
.ut-hphead { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 22px 16px; border-bottom: 1px solid #e6eaee; }
.ut-hphead > div:first-child { flex: 1 1 380px; min-width: 0; }
.ut-hphead h2 { font-size: 22px; font-weight: 700; color: var(--verde-dark); margin: 0; letter-spacing: -.01em; }
.ut-hpmeta { color: var(--cinza-texto); font-size: 13px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ut-hpmeta b { color: var(--texto); font-weight: 600; }
.ut-hpchips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.ut-htiles { display: flex; gap: 10px; flex-wrap: wrap; align-self: center; }
.ut-htile { min-width: 92px; padding: 10px 12px; border: 1px solid #e6eaee; border-radius: 10px; text-align: center; background: #f0f3f5; }
.ut-htile .v { font-size: 26px; font-weight: 700; line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; }
.ut-htile .l { font-size: 11px; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.ut-htile.neg .v { color: var(--vermelho); }
.ut-hreadm { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid #e6eaee; }
.ut-hreadm .rl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--cinza-texto); min-width: 90px; }
.ut-hreadm .rv { font-weight: 700; font-size: 15px; }
.ut-hreadm .rd { font-size: 12px; color: var(--cinza-texto); }
.ut-hreadm.ok .rv { color: var(--verde-dark); } .ut-hreadm.esp .rv { color: #b45309; } .ut-hreadm.bloq .rv { color: var(--vermelho); }
.ut-hbanner { padding: 12px 22px; font-size: 13px; border-bottom: 1px solid #e6eaee; background: var(--vermelho-light); color: var(--vermelho); }
.ut-hbanner.info { background: #fff3e0; color: #b45309; }
.ut-hpbody { display: grid; grid-template-columns: 1.15fr 1fr; }
.ut-hcol { padding: 18px 22px; min-width: 0; }
.ut-hcol + .ut-hcol { border-left: 1px solid #e6eaee; }
@container (max-width: 820px) { .ut-hpbody { grid-template-columns: 1fr; } .ut-hcol + .ut-hcol { border-left: 0; border-top: 1px solid #e6eaee; } }
@media (max-width: 900px) { .ut-hpbody { grid-template-columns: 1fr; } .ut-hcol + .ut-hcol { border-left: 0; border-top: 1px solid #e6eaee; } }
.ut-hsec { margin-bottom: 22px; }
.ut-hsec:last-child { margin-bottom: 0; }
.ut-hsec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-texto); font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.ut-hsec h3 .cnt { background: #f0f3f5; color: var(--texto); border-radius: 999px; padding: 0 8px; font-size: 11px; }
.ut-htl { position: relative; padding-left: 22px; }
.ut-htl:before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: #e6eaee; }
.ut-htl-item { position: relative; padding: 0 0 16px; }
.ut-htl-item:last-child { padding-bottom: 0; }
.ut-htl-item:before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #9aa1ad; border: 2px solid #fff; box-shadow: 0 0 0 2px #e6eaee; }
.ut-htl-item.jc:before { background: var(--vermelho); box-shadow: 0 0 0 2px var(--vermelho-light); }
.ut-htl-item.atual:before { background: var(--verde); box-shadow: 0 0 0 2px var(--verde-light); }
.ut-htl-dt { font-size: 12px; color: var(--cinza-texto); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.ut-htl-dt b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.ut-htl-dt .dur { background: #f0f3f5; border-radius: 999px; padding: 0 8px; font-size: 11px; }
.ut-htl-mot { font-size: 15px; font-weight: 700; margin-top: 2px; }
.ut-htl-item.jc .ut-htl-mot { color: var(--vermelho); }
.ut-htl-item.atual .ut-htl-mot { color: var(--verde-dark); }
.ut-htl-emp { font-size: 12px; color: var(--cinza-texto); }
.ut-hdoc { display: grid; grid-template-columns: 86px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #e6eaee; font-size: 13px; }
.ut-hdoc:last-child { border-bottom: 0; }
.ut-hdoc .d { font-weight: 600; font-variant-numeric: tabular-nums; }
.ut-hdoc .t { color: #9aa1ad; font-size: 11px; font-variant-numeric: tabular-nums; }
.ut-hvazio { font-size: 13px; color: #9aa1ad; padding: 6px 0; }
.ut-hanos { display: flex; gap: 8px; flex-wrap: wrap; }
.ut-hano { background: #f0f3f5; border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.ut-hano b { font-size: 18px; margin-right: 4px; }
.ut-hpt { border-collapse: collapse; width: 100%; font-size: 13px; margin-top: 6px; }
.ut-hpt th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9aa1ad; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--cinza-borda); }
.ut-hpt td { padding: 6px 8px; border-bottom: 1px solid #e6eaee; font-variant-numeric: tabular-nums; }
.ut-hpt td.r, .ut-hpt th.r { text-align: right; }
.ut-hpt td.neg { color: var(--vermelho); font-weight: 700; }
.ut-hev { display: grid; grid-template-columns: 86px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid #e6eaee; font-size: 13px; }
.ut-hev:last-child { border-bottom: 0; }
.ut-hev .d { font-weight: 600; font-variant-numeric: tabular-nums; }
.ut-hev .m { color: var(--cinza-texto); font-size: 12px; }
.ut-hvisio { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 12px 28px; padding: 12px 22px; border-bottom: 1px solid #e6eaee; background: #fbfcfb; align-items: start; }
.ut-hvisio-rh { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ut-hvisio-rh label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9aa1ad; font-weight: 700; margin-top: 10px; }
.ut-hvisio-rh .ut-hint { font-size: 11px; }
.ut-hpar-sel { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--cinza-borda); border-radius: 8px; background: #fff; max-width: 100%; }
.ut-hpar-sel:focus { outline: none; border-color: var(--verde); }
.ut-hpar-neg { color: var(--vermelho); font-weight: 700; }
.ut-hvisio .ut-hsub { margin-top: 10px; }
.ut-hvisio-box { display: flex; gap: 8px; align-items: flex-start; }
.ut-hvisio-box textarea { flex: 1; font: inherit; font-size: 13px; line-height: 1.45; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 8px 10px; background: #fff; resize: none; min-height: 72px; color: var(--texto, #1f2937); }
@container (max-width: 820px) { .ut-hvisio { grid-template-columns: 1fr; } }
.ut-hsit { font-size: 14px; line-height: 1.5; padding: 8px 12px; background: #f0f3f5; border-radius: 8px; margin-bottom: 10px; }
.ut-hsub { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9aa1ad; font-weight: 700; margin: 10px 0 4px; }

/* ── Obras (v1) ─────────────────────────────────────────── */
.ob-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ob-h1 { font-size: 22px; font-weight: 700; color: var(--verde-dark); margin: 0; letter-spacing: -.01em; }
.ob-sub { color: var(--cinza-texto); font-size: 13px; }
.ob-sp { flex: 1; }
.ob-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ob-tile { background: #fff; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 12px 14px; }
.ob-tile .v { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ob-tile .l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-texto); font-weight: 700; margin-top: 4px; }
.ob-tile.atr .v { color: var(--vermelho); }
.ob-grid { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 16px; align-items: start; }
.ob-painel { background: #fff; border: 1px solid var(--cinza-borda); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.ob-painel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-texto); margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--cinza-borda); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ob-filtros { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.ob-chipf { font: inherit; font-size: 12px; border: 1px solid var(--cinza-borda); background: transparent; color: var(--cinza-texto); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.ob-chipf.on { background: var(--verde-light); color: var(--verde-dark); border-color: transparent; font-weight: 600; }
.ob-lista { list-style: none; margin: 0; padding: 0; }
.ob-obra { padding: 12px 16px; border-bottom: 1px solid var(--cinza-borda); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.ob-obra:last-child { border-bottom: 0; } .ob-obra:hover { background: var(--cinza-bg); }
.ob-obra.sel { background: var(--verde-light); box-shadow: inset 3px 0 0 var(--verde); }
.ob-obra .nome { font-weight: 700; } .ob-tit { font-weight: 400; color: var(--cinza-texto); }
.ob-obra .tipo { font-size: 12px; color: var(--cinza-texto); }
.ob-obra .etapa { font-size: 12px; color: var(--cinza-texto); grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.ob-imp { color: var(--vermelho); }
.ob-barra { flex: 1; height: 6px; background: var(--cinza-borda); border-radius: 3px; overflow: hidden; max-width: 160px; }
.ob-barra i { display: block; height: 100%; background: var(--verde-mid); border-radius: 3px; }
.ob-barra.atr i { background: var(--vermelho); }
.ob-st { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; align-self: start; }
.ob-st.prazo { background: var(--verde-light); color: var(--verde-dark); } .ob-st.atr { background: var(--vermelho-light); color: var(--vermelho); } .ob-st.fim { background: var(--cinza-bg); color: var(--cinza-texto); border: 1px solid var(--cinza-borda); }
.ob-vazio { padding: 22px 16px; color: var(--cinza-texto); font-size: 13px; }
.ob-dhead { padding: 16px; border-bottom: 1px solid var(--cinza-borda); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ob-dhead h3 { font-size: 20px; margin: 0; color: var(--verde-dark); } .ob-dhead h3 small { font-size: 14px; color: var(--cinza-texto); font-weight: 400; }
.ob-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ob-meta { color: var(--cinza-texto); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 16px; width: 100%; } .ob-meta b { color: var(--texto); font-weight: 600; }
.ob-escopo { width: 100%; font-size: 13px; color: var(--texto); background: var(--cinza-bg); border-radius: 8px; padding: 8px 12px; white-space: pre-wrap; }
.ob-prog { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 13px; color: var(--cinza-texto); } .ob-prog .ob-barra { max-width: none; height: 8px; } .ob-prog b { color: var(--texto); }
.ob-sec-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-texto); font-weight: 700; padding: 12px 16px 4px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ob-sec-h .btn-link { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ob-dica { font-size: 12px; color: #9aa1ad; text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: auto; }
.ob-etapas { list-style: none; margin: 0; padding: 0 0 6px; }
.ob-et { display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 12px; padding: 9px 16px; border-bottom: 1px solid var(--cinza-borda); align-items: start; }
.ob-et:last-child { border-bottom: 0; }
.ob-et .n { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--cinza-borda); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--cinza-texto); cursor: pointer; background: #fff; padding: 0; }
.ob-et.concluida .n { background: var(--verde); border-color: var(--verde); color: #fff; } .ob-et.andamento .n { border-color: var(--verde); color: var(--verde-dark); } .ob-et.pulada .n { border-style: dashed; }
.ob-et .t { font-weight: 600; } .ob-et.concluida .t { color: var(--cinza-texto); text-decoration: line-through; text-decoration-color: var(--cinza-borda); } .ob-et.pulada .t { color: #9aa1ad; }
.ob-resp { font-size: 11px; font-weight: 600; color: var(--cinza-texto); background: var(--cinza-bg); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.ob-et .datas { font-size: 12px; color: var(--cinza-texto); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ob-et .datas .prev { color: #9aa1ad; }
.ob-et.atr .datas { color: var(--vermelho); }
.ob-et .status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .ob-et.andamento .status { color: var(--verde-dark); } .ob-et.pendente .status { color: #9aa1ad; }
.ob-et .obs { grid-column: 2 / -1; font-size: 12px; color: var(--cinza-texto); }
.ob-diario, .ob-pends { padding: 4px 16px 14px; }
.ob-nota { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 8px 0; font-size: 13px; border-bottom: 1px dashed var(--cinza-borda); } .ob-nota:last-child { border-bottom: 0; }
.ob-nota.imp { background: var(--vermelho-light); margin: 0 -16px; padding: 8px 16px; }
.ob-nota .q { color: #9aa1ad; font-variant-numeric: tabular-nums; } .ob-nota .txt { margin-top: 2px; white-space: pre-wrap; } .ob-nota .f { color: #9aa1ad; font-size: 12px; margin-top: 2px; }
.ob-apagar { color: var(--vermelho); }
.ob-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .ob-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--cinza-borda); display: block; }
.ob-pend { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 13px; cursor: pointer; border-bottom: 1px dashed var(--cinza-borda); } .ob-pend:last-child { border-bottom: 0; }
.ob-pend input { margin-top: 3px; } .ob-pend .d { display: block; } .ob-pend.resolvida .d { color: var(--cinza-texto); text-decoration: line-through; } .ob-pend .m { font-size: 12px; color: var(--cinza-texto); }
.ob-modal-bg { position: fixed; inset: 0; background: rgba(20, 30, 25, .5); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.ob-modal { background: #fff; border-radius: 12px; width: min(720px, 100%); padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.ob-modal-h { font-size: 17px; font-weight: 700; color: var(--verde-dark); margin-bottom: 8px; }
.ob-modal-f { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 16px; } .ob-modal-msg { margin-right: auto; font-size: 13px; color: var(--vermelho); }
.ob-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.ob-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--cinza-texto); margin: 6px 0; }
.ob-in { font: inherit; font-size: 14px; font-weight: 400; color: var(--texto); padding: 8px 10px; border: 1px solid var(--cinza-borda); border-radius: 8px; background: #fff; width: 100%; min-width: 0; }
.ob-in:focus { outline: none; border-color: var(--verde); }
.ob-in-s { max-width: 220px; } .ob-in-n { max-width: 90px; }
.ob-etl { display: grid; grid-template-columns: 1fr 150px 80px auto; gap: 6px; align-items: center; margin: 4px 0; }
.ob-etl .ob-in-s, .ob-etl .ob-in-n { max-width: none; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ob-chip { font: inherit; font-size: 13px; padding: 7px 11px; border-radius: 10px; border: 1.5px solid var(--cinza-borda); background: #fff; color: var(--texto); cursor: pointer; }
.ob-chip.on { background: var(--verde-light); border-color: var(--verde); color: var(--verde-dark); font-weight: 600; }
.ob-chip.alerta.on { background: var(--vermelho-light); border-color: var(--vermelho); color: var(--vermelho); }
.ob-link { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.ob-wa { display: inline-block; text-decoration: none; margin-right: 10px; }
.ob-perigo { color: var(--vermelho); }
@media (max-width: 900px) {
  .ob-grid { grid-template-columns: 1fr; } .ob-resumo { grid-template-columns: repeat(2, 1fr); } .ob-form2 { grid-template-columns: 1fr; }
  .ob-etl { grid-template-columns: 1fr 1fr; } .ob-et .datas { white-space: normal; }
}