/* ═══════════════════════════════════════════════════════════════════════════
   PADRÃO VISUAL DA PLATAFORMA — claro, igual ao Metas (P-021, correção da
   direção visual de 06/10/2026).

   Fonte do desenho: o código do Metas (analises-realme), não uma imagem.
     tokens ............ src/app/globals.css, tailwind.config.js (neutral-*,
                         brand-yellow #FFC900 / brand-yellow-dark #E6B500, Inter)
     menu lateral ...... src/components/admin/sidebar.tsx
     topo .............. src/components/admin/topbar.tsx
     layout ............ src/app/admin/layout.tsx (bg-neutral-50, main px-6 py-6)
     card .............. src/components/ui/card.tsx (rounded-xl border bg-white)
     indicadores ....... src/components/dashboard/kpi-grid.tsx (grade unida)
     vazio ............. src/components/ui/empty-state.tsx (borda tracejada)
     carregando ........ src/components/ui/skeleton.tsx (animate-pulse)
     filtros ........... src/components/dashboard/period-filter.tsx (segmentado)
     botões, campos, tabelas: classes mais usadas em src/app/admin/**

   A Gestão é HTML + JS clássico (sem Tailwind/React): os mesmos valores viram
   classes CSS reutilizáveis. O tema claro do Metas é o ÚNICO tema: não há
   tema escuro nem configuração de aparência.
   Carregado DEPOIS do style.css: vence as regras antigas sem apagá-las.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens (Tailwind neutral + marca do Metas) ─────────────────────── */
:root {
  --n50:#FAFAFA; --n100:#F5F5F5; --n200:#E5E5E5; --n300:#D4D4D4; --n400:#A3A3A3;
  --n500:#737373; --n600:#525252; --n700:#404040; --n800:#262626; --n900:#171717;

  --yellow:#FFC900; --yellow-dark:#E6B500; --yellow-light:#FFF8D6; --black:#0D0D0D;
  --marca-realme:#FFC900;
  --marca-gift:#A3A3A3;    /* TODO: token oficial GIFT&CIA (a fornecer pelo Fernando) */
  --marca-explore:#A3A3A3; /* TODO: token oficial Explore (a fornecer pelo Fernando) */
  --marca-destaque:var(--marca-realme);

  --bg:var(--n50); --surface:#FFFFFF; --surface2:var(--n50); --surface3:var(--n100);
  --border:var(--n200); --border2:var(--n300); --border-soft:var(--n100);
  --text:var(--n900); --text2:var(--n700); --muted:var(--n500); --muted2:var(--n400);

  --green:#047857;  --green-bg:#ECFDF5;  --green-line:#A7F3D0;
  --red:#DC2626;    --red-bg:#FEF2F2;    --red-line:#FECACA;   --red-text:#991B1B;
  --orange:#B45309; --orange-bg:#FFFBEB; --orange-line:#FDE68A; --orange-text:#92400E;
  --blue:#0369A1;   --blue-bg:#F0F9FF;   --blue-line:#BAE6FD;
  --purple:#6D28D9; --purple-bg:#F5F3FF;
  --accent:var(--yellow); --accent-dim:var(--yellow-light); --accent-hi:#8A6400;

  --shadow-sm:none; --shadow:none;
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);

  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  /* o Metas não usa fonte monoespaçada em datas e valores: o token antigo
     (DM Mono, usado em estilos em linha) passa a ser a fonte de texto */
  --mono:var(--font);
  --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:12px;

  --motion-fast:140ms; --motion-base:200ms; --motion-slow:380ms;
  --ease-standard:cubic-bezier(.4,0,.2,1); --ease-emphasized:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(0,0,.2,1);

  --sb-bg:#FFFFFF; --sb-width:240px;
  --foco:var(--yellow-dark);
}
body[data-marca="gift"]    { --marca-destaque:var(--marca-gift) }
body[data-marca="explore"] { --marca-destaque:var(--marca-explore) }

/* ── 2. Base ───────────────────────────────────────────────────────────── */
/* controles nativos (data, select, rolagem) sempre claros, mesmo com o sistema em modo escuro */
:root { color-scheme:light }
body { font-family:var(--font); background:var(--bg); color:var(--text); font-size:.875rem; line-height:1.5; -webkit-font-smoothing:antialiased }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline:2px solid var(--foco); outline-offset:2px; border-radius:6px }
.mn, .kpi-val, .kpi-val.mn, .fd-val, td.mn { font-family:var(--font); font-variant-numeric:tabular-nums }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}
/* celular: 16px nos campos evita o zoom automático do iOS (globals.css do Metas) */
@media (max-width: 767px) { input, select, textarea { font-size:16px !important } }

/* só para leitor de tela */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ── 3. Layout: menu lateral + topo + conteúdo (admin/layout.tsx) ──────── */
.layout { background:var(--bg) }
#sidebar {
  width:var(--sb-width); background:var(--sb-bg); border-right:1px solid var(--border);
  scrollbar-color:var(--n200) transparent;
}
#sidebar::-webkit-scrollbar-thumb { background:var(--n200) }
.sb-logo { padding:1rem; gap:.5rem; border-bottom:1px solid var(--border) }
.sb-logo picture, .sb-logo-icon { display:none }
.sb-logo > div { display:flex; align-items:baseline; gap:0 }
.sb-logo-t { font-size:1rem; font-weight:700; letter-spacing:-.015em; color:var(--text) }
.sb-logo-s { font-size:1rem; font-weight:700; letter-spacing:-.015em; color:var(--yellow-dark); margin:0 }
.sb-sec { padding:.75rem .5rem }
.sb-modulo-lbl {
  padding:.75rem .75rem .25rem; font-size:10px; font-weight:600; letter-spacing:.025em;
  text-transform:uppercase; color:var(--muted2);
}
.sb-sec > .sb-modulo-lbl:first-child { padding-top:0 }
.sb-item {
  margin:0 0 2px; padding:.5rem .75rem; gap:.625rem; border-radius:var(--r);
  font-size:.875rem; font-weight:400; color:var(--muted); background:transparent;
  transition:background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.sb-item .ic { opacity:1; color:var(--muted2); width:17px; height:17px }
.sb-item:hover { background:var(--surface2); color:var(--text) }
.sb-item.active { background:var(--surface3); color:var(--text); font-weight:500 }
.sb-item.active .ic, .sb-item:hover .ic { color:var(--text) }
.sb-subitem { padding-left:2.25rem; font-size:.8125rem; color:var(--muted) }
.sb-subitem:hover { background:var(--surface2); color:var(--text) }
.sb-subitem.active { background:var(--surface3); color:var(--text) }
.sb-grupo { color:var(--muted); font-size:.75rem }
.sb-grupo:hover, .sb-grupo.active { background:var(--surface2) }
/* nome, papel e "Sair" ficam no topo, como no Metas */
.sb-bottom { display:none }

#main { background:var(--bg) }
/* a coluna do menu vai até o fim da página, como o aside do Metas */
@media (min-width: 1025px) {
  .layout { background:linear-gradient(to right, var(--sb-bg) calc(var(--sb-width) - 1px), var(--border) calc(var(--sb-width) - 1px), var(--border) var(--sb-width), var(--bg) var(--sb-width)) }
}
.page-wrap { padding:1.5rem; max-width:1440px; width:100% }
#breadcrumb-bar:empty { display:none }
#breadcrumb-bar { padding:1rem 1.5rem 0 }
#breadcrumb-bar + #fin-centro-header + .page-wrap, #breadcrumb-bar + .page-wrap { padding-top:.75rem }
.breadcrumb { font-size:.75rem; color:var(--muted2); margin:0 }
.breadcrumb-cur { color:var(--muted); font-weight:500 }

/* topo (topbar.tsx): contexto à esquerda; nome, papel e Sair à direita */
.ctx-bar {
  display:flex; align-items:center; gap:.75rem; flex-wrap:nowrap;
  min-height:57px; padding:.75rem 1.5rem; background:var(--surface);
  border-bottom:1px solid var(--border); font-size:.875rem; color:var(--text2);
}
.tb-ctx { display:flex; flex-wrap:wrap; align-items:center; gap:.375rem; min-width:0 }
.ctx-chip {
  display:inline-flex; align-items:center; gap:.25rem; white-space:nowrap;
  padding:.125rem .5rem; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); font-size:11px; font-weight:500; color:var(--n600);
}
.ctx-chip b { font-weight:400; color:var(--muted2) }
.tb-user { margin-left:auto; display:flex; align-items:center; gap:.75rem; flex-shrink:0 }
.tb-quem { text-align:right; line-height:1.25 }
.tb-nome { color:var(--text); font-weight:500; font-size:.875rem; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tb-papel { color:var(--muted); font-size:.75rem }
.tb-link {
  display:inline-flex; align-items:center; min-height:2.75rem; padding:0; margin:0;
  background:none; border:0; border-radius:4px; cursor:pointer;
  font:inherit; font-size:.875rem; color:var(--muted); text-decoration:underline; text-underline-offset:2px;
  transition:color var(--motion-fast) var(--ease-standard);
}
.tb-link:hover { color:var(--text) }
@media (min-width: 768px) { .tb-link { min-height:0 } }

/* botão do menu no celular (MobileSidebarToggle) e gaveta */
.mob-btn {
  background:var(--surface); color:var(--n600); border:1px solid var(--border);
  width:44px; height:44px; border-radius:var(--r); box-shadow:none; top:.4rem; left:1rem;
  font-size:1.1rem;
}
.mob-btn:hover { background:var(--surface2) }
.sb-ov { background:rgba(0,0,0,.3); backdrop-filter:none }
/* menu recolhe abaixo de 1024 px, como o lg do Metas (antes: 768 px) */
@media (max-width: 1024px) {
  .mob-btn { display:flex }
  #sidebar { position:fixed; left:-100%; top:0; bottom:0; z-index:200; transition:left .28s var(--ease-standard) }
  #sidebar.open { left:0 }
  #main { width:100% }
  #sidebar { box-shadow:var(--shadow-lg); width:16rem; max-width:85vw }
  .ctx-bar { padding-left:4.5rem }
  .tb-quem { display:none }
}
@media (max-width: 640px) {
  /* topo no celular: 1ª linha = menu e Sair; 2ª linha = perfil e alcance INTEIROS (quebram linha, sem corte) */
  .ctx-bar { flex-wrap:wrap; padding:.4rem 1rem .5rem 4.25rem; gap:.25rem .5rem; min-height:0 }
  .tb-user { order:1; margin-left:auto; gap:.625rem; min-height:2.75rem }
  .tb-ctx { order:2; flex:0 0 calc(100% + 3.25rem); flex-wrap:wrap; overflow:visible; margin-left:-3.25rem }
  .ctx-chip { white-space:normal; line-height:1.35 }
  .page-wrap { padding:1rem }
  #breadcrumb-bar { padding:.75rem 1rem 0 }
}

/* entrada (src/app/login/page.tsx do Metas) */
#auth-screen { background:var(--bg); padding:1rem; gap:0 }
.auth-brand { font-size:1.5rem; font-weight:700; letter-spacing:-.025em; color:var(--text) }
.auth-brand span { color:var(--yellow-dark) }
.auth-sub { font-size:.875rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); margin:.25rem 0 2rem }
.auth-card { width:100%; max-width:24rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:none; padding:1.5rem; gap:1rem }
.auth-h { font-size:.875rem; font-weight:600; color:var(--text); margin:0 }
.auth-card label { font-size:.75rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted) }
.auth-card input { background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:var(--r); padding:.625rem .875rem; font-size:.875rem }
.auth-card input:focus { border-color:var(--yellow-dark) }
.auth-err { color:var(--red); font-size:.875rem }
.btn-pri { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1rem; border:0; border-radius:var(--r); background:var(--yellow); color:var(--n900); font-size:.875rem; font-weight:600; cursor:pointer; transition:background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard) }
.btn-pri:hover { background:var(--yellow-dark); transform:translateY(-1px) }
.btn-pri:disabled { opacity:.5; transform:none }
#acesso-negado-screen { background:var(--bg) }
.acesso-negado { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:none; color:var(--text) }
.acesso-negado-title { color:var(--text); font-weight:600 }
.acesso-negado-sub { color:var(--muted) }
.btn-out { background:var(--surface); border:1px solid var(--border2); color:var(--text2); border-radius:var(--r) }

/* ── 4. Cabeçalho de página ────────────────────────────────────────────── */
.pg-head, .page-header-top {
  display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem 1rem;
  flex-wrap:wrap; margin-bottom:1rem;
}
.pg-title, .page-title { font-size:1.125rem; font-weight:600; letter-spacing:-.01em; color:var(--text); line-height:1.35 }
.pg-title-nota { font-size:.875rem; font-weight:400; color:var(--muted) }
.pg-title svg { vertical-align:-2px }
.pg-sub, .page-subtitle { font-size:.875rem; color:var(--muted); margin-top:.125rem }
.btn-row, .page-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem }

/* ── 5. Botões (classes mais usadas em src/app/admin) ──────────────────── */
.btn-add, .btn-sv, .btn-primary, .p-btn-primario {
  display:inline-flex; align-items:center; justify-content:center; gap:.375rem;
  padding:.5rem 1rem; border:0; border-radius:var(--r);
  background:var(--yellow); color:var(--n900); font-size:.875rem; font-weight:600; line-height:1.25rem;
  box-shadow:none; cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.btn-add:hover, .btn-sv:hover, .btn-primary:hover, .p-btn-primario:hover { background:var(--yellow-dark); transform:translateY(-1px) }
.btn-add:disabled, .btn-sv:disabled, .btn-primary:disabled { opacity:.5; transform:none; cursor:not-allowed }
.btn-sec, .btn-can, .btn-ghost, .p-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.375rem;
  padding:.5rem .75rem; border:1px solid var(--border2); border-radius:var(--r);
  background:var(--surface); color:var(--text2); font-size:.875rem; font-weight:500; line-height:1.25rem;
  box-shadow:none; cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.btn-sec:hover, .btn-can:hover, .btn-ghost:hover, .p-btn:hover { background:var(--surface2); color:var(--text); border-color:var(--border2) }
.btn-ghost { border-color:var(--border); font-size:.8125rem; padding:.375rem .625rem }
.btn-sec:disabled, .btn-can:disabled, .btn-ghost:disabled { opacity:.5; cursor:not-allowed }
.btn-escuro { display:inline-flex; align-items:center; gap:.375rem; padding:.375rem .75rem; border:0; border-radius:var(--r); background:var(--n900); color:#fff; font-size:.75rem; font-weight:600; cursor:pointer }
.btn-escuro:hover { background:var(--n700) }
.btn-danger-sm {
  display:inline-flex; align-items:center; gap:.375rem; padding:.5rem .75rem; border-radius:var(--r);
  border:1px solid var(--red-line); background:var(--surface); color:var(--red); font-size:.875rem; font-weight:500;
}
.btn-danger-sm:hover { background:var(--red-bg) }
/* ação em linha de tabela: ícone com área de toque de 32px */
.act {
  display:inline-flex; align-items:center; justify-content:center; gap:.25rem; min-width:2rem; height:2rem;
  padding:0 .5rem; border:1px solid transparent; border-radius:var(--r); background:transparent;
  color:var(--n600); font-size:.8125rem; font-weight:500; cursor:pointer;
}
.act:hover { background:var(--surface3); color:var(--text) }

/* ── 6. Cards ──────────────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:none; padding:1rem; min-width:0 }
.card-title { font-size:.875rem; font-weight:600; color:var(--text); margin-bottom:.75rem }
/* título do card como no Metas: texto, sem ícone e sem linha divisória */
.card > .card-h, .card > .card-hd {
  margin:0 0 .75rem; padding:0; border:0; background:none;
  font-size:.875rem; font-weight:600; color:var(--text); justify-content:flex-start; gap:.5rem;
}
.card > .card-b, .card > .card-bd { margin:0; padding:0 }
.card > .card-h > .ic, .card > .card-hd > .ic { display:none }
.card-h-nota { margin-left:auto; font-size:.75rem; font-weight:400; color:var(--muted) }

/* ── 7. Indicadores (kpi-grid.tsx: grade unida por linhas finas) ──────── */
.kpis, .kpi-row {
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  margin-bottom:1rem;
}
.kpis > .kpi, .kpi-row > .kpi {
  display:flex; flex-direction:column; gap:.125rem; padding:.875rem 1rem;
  background:var(--surface); border:0; border-radius:0; box-shadow:1px 0 0 var(--border), 0 1px 0 var(--border);
}
.kpi:hover { transform:none; box-shadow:1px 0 0 var(--border), 0 1px 0 var(--border) }
.kpi .kpi-val { order:-1; font-size:1.25rem; font-weight:600; letter-spacing:-.015em; color:var(--text); line-height:1.3 }
.kpi .kpi-lbl { display:flex; align-items:center; gap:.375rem; font-size:.75rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted) }
.kpi .kpi-lbl .ic { color:var(--muted2) }
.kpi .kpi-sub, .kpi .kpi-extra { font-size:11px; color:var(--muted2); font-family:var(--font) }
.kpi.g, .kpi.b, .kpi.r, .kpi.y, .kpi.o, .kpi.p { border-left:0 }
@media (max-width: 900px) { .kpis, .kpi-row { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
.kpi-row > .info-box, .kpis > .info-box { grid-column:1 / -1; margin:0; border:0; border-radius:0 }
.kpi-row > .tela-erro, .kpis > .tela-erro { grid-column:1 / -1; margin:0; border:0; border-radius:0; max-width:none }
.kpi-alerta .kpi-val { color:var(--red) }

/* ── 8. Filtros e barra de ferramentas (period-filter.tsx) ─────────────── */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1rem }
.srch, .filt, .f input, .f select, .f textarea, .inp, .sel {
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface); color:var(--text);
  padding:.5rem .75rem; font-size:.875rem; font-family:var(--font); box-shadow:none; min-height:2.375rem;
  transition:border-color var(--motion-fast) var(--ease-standard);
}
.srch { min-width:min(280px, 100%); flex:1 1 280px; max-width:420px }
@media (max-width: 640px) {
  .toolbar { flex-direction:column; align-items:stretch }
  .toolbar > .srch, .toolbar > .filt, .toolbar > button { flex:0 0 auto; width:100%; max-width:none; min-width:0 }
}
.srch:focus, .filt:focus, .f input:focus, .f select:focus, .f textarea:focus, .inp:focus, .sel:focus {
  outline:none; border-color:var(--yellow-dark); box-shadow:0 0 0 3px rgba(255,201,0,.18);
}
.srch::placeholder, .f input::placeholder, .f textarea::placeholder { color:var(--muted2) }
/* segmentado: borda fina, item ativo amarelo */
.segmentado, .dash-emp-tabs {
  display:inline-flex; max-width:100%; overflow-x:auto; gap:2px; padding:2px;
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface);
  margin-bottom:1rem; scrollbar-width:thin;
}
.segmentado > button, .dash-emp-tab {
  flex-shrink:0; white-space:nowrap; display:inline-flex; align-items:center; gap:.375rem;
  padding:.375rem .75rem; border:0; border-radius:var(--r-sm); background:transparent;
  color:var(--muted); font-size:.875rem; font-weight:500; cursor:pointer; box-shadow:none;
  transition:color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}
.segmentado > button:hover, .dash-emp-tab:hover { color:var(--text); background:transparent }
.segmentado > button.active, .segmentado > button[aria-pressed="true"], .dash-emp-tab.active { background:var(--yellow); color:var(--n900) }
.tab, .store-tab {
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface); color:var(--muted);
  font-size:.875rem; font-weight:500; padding:.375rem .75rem; box-shadow:none;
}
.tab:hover, .store-tab:hover { color:var(--text); background:var(--surface2) }
.tab.active, .store-tab.active { background:var(--yellow); border-color:var(--yellow); color:var(--n900) }

/* ── 9. Tabelas (cabeçalho bg-neutral-50, caixa alta discreta) ─────────── */
.tbl-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:none; overflow-x:auto }
.tbl-wrap table, table.tbl { width:100%; border-collapse:collapse; font-size:.875rem }
.tbl-wrap th, table.tbl th {
  background:var(--surface2); text-align:left; padding:.625rem 1rem; border-bottom:1px solid var(--border);
  font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:var(--muted); white-space:nowrap;
}
.tbl-wrap td, table.tbl td { padding:.625rem 1rem; border-bottom:1px solid var(--border-soft); color:var(--text2); vertical-align:middle }
/* planilha do Financeiro antigo: o cabeçalho azul sólido usava !important */
.tbl-wrap table.tbl-compact th { background:var(--surface2) !important; color:var(--muted) !important; border:1px solid var(--border); border-bottom:1px solid var(--border); font-size:.75rem; font-weight:500 }
.tbl-wrap table.tbl-compact td { border-color:var(--border-soft) }
.tbl-wrap tr:last-child td { border-bottom:0 }
.tbl-wrap tbody tr:hover td { background:var(--surface2) }
.tbl-wrap td b, .td-forte { color:var(--text); font-weight:500 }
.td-num, .tbl-wrap td.mn { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.td-acoes { text-align:right; white-space:nowrap }
.td-sub { display:block; font-size:.75rem; color:var(--muted); margin-top:1px }
.rolagem-lateral { overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ── 10. Selos e etiquetas (rounded-full px-2 py-0.5 text-[11px]) ──────── */
.badge, .chip, .bd { display:inline-flex; align-items:center; gap:.25rem; border-radius:999px; padding:.125rem .5rem; font-size:11px; font-weight:500; letter-spacing:0; line-height:1.4; white-space:nowrap; font-family:var(--font) }
.bd-g, .badge-green { background:var(--green-bg); color:var(--green) }
.bd-r, .badge-red { background:var(--red-bg); color:var(--red-text, var(--red)) }
.bd-y, .badge-yellow, .badge-orange { background:#FEF3C7; color:var(--orange-text, var(--orange)) }
.bd-b, .badge-blue { background:var(--blue-bg); color:var(--blue) }
.bd-p, .badge-purple { background:var(--purple-bg); color:var(--purple) }
.bd-gray, .badge-gray { background:var(--surface3); color:var(--n600) }
.tag { display:inline-flex; align-items:center; border-radius:999px; border:1px solid var(--border); background:var(--surface); padding:.0625rem .5rem; font-size:11px; font-weight:500; color:var(--n600); font-family:var(--font) }
.badge-incomp { margin-left:.5rem; border-radius:999px; background:#FEF3C7; color:#92400E; padding:.0625rem .5rem; font-size:11px; font-weight:500 }

/* ── 11. Formulários ───────────────────────────────────────────────────── */
.fg { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap:.875rem 1rem }
.f { display:flex; flex-direction:column; min-width:0; margin:0 }
.f.full { grid-column:1 / -1 }
/* rótulo: text-xs neutral-500 do Metas, um passo maior e mais escuro para
   fichas com muitos campos (leitura confortável) */
.f label, .lbl { display:block; margin-bottom:.375rem; font-size:.8125rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--n600) }
.f input, .f select, .f textarea { width:100% }
.f textarea { min-height:4.5rem; resize:vertical }
.f-hint { font-size:.75rem; color:var(--muted); margin-top:.25rem }
.section-label { font-size:.875rem; font-weight:600; color:var(--text); letter-spacing:0; text-transform:none; margin:0 0 .75rem }

/* ── 12. Estados: vazio, aviso, erro, carregando ──────────────────────── */
.empty-state, .empty {
  display:flex; flex-direction:column; align-items:center; gap:.375rem; text-align:center;
  border:1px dashed var(--border); border-radius:var(--r); background:rgba(250,250,250,.6);
  padding:2rem 1rem; color:var(--muted); font-size:.875rem;
}
.empty-state .ic { color:var(--n300); width:28px; height:28px }
.es-title { font-size:.875rem; font-weight:500; color:var(--text2) }
.es-sub { font-size:.8125rem; color:var(--muted); max-width:360px }
.es-btn { margin-top:.5rem }
.vazio-linha { font-size:.8125rem; color:var(--muted); padding:.25rem 0 }
.card .vazio-linha, .ls-vazio, .prio-vazio { border:1px dashed var(--border); border-radius:var(--r); background:rgba(250,250,250,.6); padding:2rem 1rem; text-align:center; font-size:.875rem; color:var(--muted) }
.ls-vazio, .prio-vazio { margin:0 1rem 1rem }
@media (max-width: 640px) { .card .vazio-linha, .ls-vazio, .prio-vazio { padding:.75rem 1rem; font-size:.8125rem } }
.info-box { border:1px solid var(--border); background:var(--surface2); color:var(--text2); border-radius:var(--r); padding:.75rem 1rem; font-size:.875rem }
.aviso { border:1px solid var(--orange-line); background:var(--orange-bg); color:var(--orange-text); border-radius:var(--r); padding:.75rem 1rem; font-size:.875rem }
.tela-erro {
  max-width:640px; margin:1rem 0; padding:1rem 1.25rem; display:grid; gap:.5rem; justify-items:start;
  border:1px solid var(--red-line); background:var(--red-bg); border-radius:var(--r-lg); color:var(--red-text);
}
.tela-erro-t { font-weight:600; font-size:.9375rem; color:var(--red-text) }
.tela-erro-m { font-size:.875rem; overflow-wrap:anywhere }
/* esqueleto (skeleton.tsx): blocos pulsando enquanto a leitura não volta */
@keyframes skPulse { 50% { opacity:.5 } }
.sk { display:block; border-radius:6px; background:rgba(229,229,229,.8); animation:skPulse 2s cubic-bezier(.4,0,.6,1) infinite }
.sk-linha { height:.75rem }
.sk-valor { height:1.25rem; width:4rem; margin-bottom:.375rem }
.sk-tabela { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden }
.sk-tabela-h { background:var(--surface2); padding:.625rem 1rem; border-bottom:1px solid var(--border) }
.sk-tabela-l { padding:.75rem 1rem; border-bottom:1px solid var(--border-soft); display:flex; gap:1rem }
.sk-tabela-l:last-child { border-bottom:0 }

/* carregamento global (gravações, telas sem esqueleto): etiqueta discreta no
   topo, sem escurecer nem desfocar a tela; continua impedindo clique duplo */
#ldov { background:transparent; backdrop-filter:none; justify-content:flex-start; padding-top:4.5rem }
#ldov .ld-pill { display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.375rem .875rem; box-shadow:var(--shadow-md) }
#ldov .spin { width:14px; height:14px; border:2px solid var(--n200); border-top-color:var(--yellow-dark); border-radius:50%; animation:spin .7s linear infinite }
#ldtxt { color:var(--text2); font-family:var(--font); font-size:.8125rem; font-weight:500 }

/* ── 13. Janelas (modal) e avisos rápidos ──────────────────────────────── */
.ov { background:rgba(23,23,23,.4); backdrop-filter:none }
.modal { background:var(--surface); border:0; border-radius:var(--r-lg); box-shadow:var(--shadow-lg) }
.modal-h, .modal-hd { padding:1rem 1.25rem; border-bottom:1px solid var(--border-soft) }
.modal-t { font-size:1rem; font-weight:600; color:var(--text) }
.modal-x { border-radius:var(--r); color:var(--muted); width:2.25rem; height:2.25rem }
.modal-b, .modal-bd { padding:1.25rem }
.modal-f, .modal-ft { padding:.75rem 1.25rem; border-top:1px solid var(--border-soft); background:var(--surface); gap:.5rem }
/* aviso rápido como o do Metas (components/ui/toast.tsx): escuro, embaixo e ao
   centro; com uma janela aberta sobe para o topo, para não cobrir os botões dela */
#toast-container, #toast-wrap { left:50% !important; right:auto !important; transform:translateX(-50%); bottom:1rem !important; top:auto !important; align-items:center; width:max-content; max-width:calc(100vw - 2rem) }
body:has(.ov.open) #toast-container, body:has(.ov.open) #toast-wrap { top:1rem !important; bottom:auto !important }
.toast { border-radius:var(--r); box-shadow:var(--shadow-lg); font-size:.875rem; font-weight:500; border:0; background:var(--n900); color:#fff; max-width:min(480px, calc(100vw - 2rem)) }
.toast.success, .toast.ok { background:var(--n900); border-left:3px solid #34D399 }
.toast.error, .toast.err { background:var(--n900); border-left:3px solid #F87171 }
.toast.warn { background:var(--n900); border-left:3px solid #FBBF24 }
.toast.info { background:var(--n900); border-left:3px solid #93C5FD }
.toast button, .toast .toast-x { color:#D4D4D4 }

/* Financeiro antigo: cabeçalho do centro de comando sem vazar da coluna */
#fin-centro-header .fc-header { margin:0; padding:.75rem 1.5rem; box-shadow:none }
.fc-sel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:.5rem .75rem; font-size:.875rem; color:var(--text) }
.fc-header-title .pg-title { font-size:1.125rem }
body.fin-ui .kpis > .kpi, body.fin-ui .kpi-row > .kpi { border:0; border-radius:0; min-height:0; box-shadow:1px 0 0 var(--border), 0 1px 0 var(--border) }
body.fin-ui .kpi-lbl { font-size:.75rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted) }
body.fin-ui .kpi-val { font-size:1.25rem; font-weight:600 }
@media (max-width: 1024px) { #fin-centro-header .fc-header { padding:.75rem 1rem } }

/* Financeiro antigo: contas a pagar em cartões no celular (sem rolagem lateral);
   descrição em destaque, loja/vencimento/valor rotulados, situação e ações. */
@media (max-width: 760px) {
  .tbl-wrap:has(> table.contas-lista) { border:0; background:transparent; overflow:visible }
  table.contas-lista, table.contas-lista tbody { display:block !important; overflow:visible !important }
  table.contas-lista thead { display:none }
  table.contas-lista tr { display:grid; grid-template-columns:1fr auto; gap:.25rem .75rem; padding:.75rem; margin-bottom:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg) }
  table.contas-lista td { display:block; padding:0 !important; border:0 !important; background:transparent !important; text-align:left !important }
  table.contas-lista td[colspan] { grid-column:1 / -1 }
  table.contas-lista .cl-desc { grid-column:1 / -1; order:-2; font-weight:600; color:var(--text); font-size:.9375rem; overflow-wrap:anywhere }
  table.contas-lista .cl-status { order:-1; grid-column:1 / -1 }
  table.contas-lista td[data-rot] { font-size:.8125rem; color:var(--text2) }
  table.contas-lista td[data-rot]::before { content:attr(data-rot) ': '; color:var(--muted) }
  table.contas-lista .cl-valor { font-weight:600; color:var(--text) }
  table.contas-lista .cl-acoes { grid-column:1 / -1; border-top:1px solid var(--border-soft) !important; padding-top:.5rem !important; margin-top:.25rem }
  table.contas-lista .cl-acoes .tbl-actions { display:flex; gap:.375rem; justify-content:flex-end }
  table.contas-lista .cl-acoes .act { min-width:2.75rem; height:2.75rem; border:1px solid var(--border) }
}
/* filtros do Financeiro antigo: campo de busca ocupa a linha no celular */
@media (max-width: 640px) {
  body.fin-ui #pc input[type="search"] { flex:1 1 100% !important; width:100% !important; max-width:none !important; margin:0 !important; min-height:2.75rem }
}

/* tabelas largas no celular: rolagem dentro do card, nunca da página */
@media (max-width: 760px) {
  .card table, .page-wrap table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELAS RENOVADAS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Painel do RH: prioridades primeiro, sem repetir o mesmo alerta ────── */
.painel-grade { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:1rem; margin-bottom:1rem }
.painel-grade-2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; margin-bottom:1rem }
.painel-grade-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; margin-bottom:1rem }
@media (max-width: 1100px) { .painel-grade, .painel-grade-3 { grid-template-columns:minmax(0, 1fr) } }
@media (max-width: 800px)  { .painel-grade-2 { grid-template-columns:minmax(0, 1fr) } }
.prio-lista { display:flex; flex-direction:column; margin:0 -1rem -1rem }
.prio-item { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-top:1px solid var(--border-soft) }
.prio-item:first-child { border-top:1px solid var(--border-soft) }
.prio-marca { width:.5rem; height:.5rem; border-radius:999px; flex-shrink:0; background:var(--n300) }
.prio-item.urg .prio-marca { background:var(--red) }
.prio-item.atn .prio-marca { background:#F59E0B }
.prio-item.inf .prio-marca { background:var(--blue) }
.prio-txt { flex:1; min-width:0; font-size:.875rem; color:var(--text) }
.prio-txt strong { font-weight:500 }
.prio-sub { font-size:.75rem; color:var(--muted); margin-top:1px }
.prio-tipo { flex-shrink:0 }

.prio-mais { padding:.625rem 1rem; border-top:1px solid var(--border-soft); font-size:.75rem; color:var(--muted) }
.situacao-lista { display:flex; flex-direction:column; gap:.75rem }
.situacao-item { display:grid; grid-template-columns:1fr auto; gap:.25rem .75rem; align-items:center; font-size:.875rem; color:var(--text2) }
.situacao-item b { font-weight:600; font-variant-numeric:tabular-nums; color:var(--text) }
.barra { grid-column:1 / -1; height:.375rem; border-radius:999px; background:var(--surface3); overflow:hidden }
.barra > span { display:block; height:100%; border-radius:999px; background:var(--yellow) }
.barra.ok > span { background:#10B981 } .barra.atn > span { background:#F59E0B } .barra.urg > span { background:#EF4444 }
.leitura { margin-top:1rem; padding-top:.75rem; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:.375rem }
.leitura-item { font-size:.8125rem; color:var(--text2); padding-left:.875rem; position:relative }
.leitura-item::before { content:''; position:absolute; left:0; top:.5rem; width:.375rem; height:.375rem; border-radius:999px; background:var(--n300) }
.lista-simples { display:flex; flex-direction:column; margin:0 -1rem -1rem }
.lista-simples > .ls-item { display:flex; align-items:center; gap:.75rem; padding:.625rem 1rem; border-top:1px solid var(--border-soft); font-size:.875rem }

.ls-item .ls-principal { flex:1; min-width:0 }
.ls-item .ls-nome { color:var(--text); font-weight:500; overflow-wrap:anywhere }
.ls-item .ls-sub { font-size:.75rem; color:var(--muted) }
.ls-item .ls-dir { flex-shrink:0; text-align:right; font-size:.8125rem; color:var(--text2); font-variant-numeric:tabular-nums }

.avatar { width:2rem; height:2rem; border-radius:999px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:var(--surface3); color:var(--text2); font-weight:600; font-size:.8125rem }
.dist-bloco { display:flex; align-items:center; gap:1rem; min-width:0 }
.dist-titulo { font-size:.75rem; color:var(--muted); margin-bottom:.5rem }
/* análises secundárias do painel: recolhíveis, depois das ações do dia */
.analises { margin:0 0 1rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface) }
.analises > summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .75rem; padding:.875rem 1rem; min-height:2.75rem }
.analises > summary::-webkit-details-marker { display:none }
.analises > summary::before { content:'›'; display:inline-block; color:var(--muted); transition:transform var(--motion-fast) var(--ease-standard) }
.analises[open] > summary::before { transform:rotate(90deg) }
.analises-t { font-size:.875rem; font-weight:600; color:var(--text) }
.analises-sub { font-size:.75rem; color:var(--muted) }
.analises-corpo { padding:0 1rem 1rem; display:flex; flex-direction:column; gap:1rem }
.analises-corpo .painel-grade-3 { margin:0 }
/* experiência: cartões leves em grade */
.exp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap:.75rem }
.exp-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:none; padding:.875rem }
.exp-card.urgente { border-color:var(--red-line) }
.exp-card.atencao { border-color:var(--orange-line) }
/* linha do tempo de afastamentos */
.tl-row { border-top:1px solid var(--border-soft) }
.tl-bar-bg { background:var(--surface3); border-radius:999px }

/* ── Colaboradores ─────────────────────────────────────────────────────── */
.func-nome-cell { cursor:pointer; color:var(--text); font-weight:500 }
.func-nome-cell:hover .func-nome-txt { text-decoration:underline; text-underline-offset:2px }
.func-nome-cell .td-sub { font-weight:400 }
.bulk-bar { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; margin-bottom:.75rem; border:1px solid var(--border); border-radius:var(--r); background:var(--surface) }
.bulk-count { font-size:.875rem; font-weight:500; color:var(--text); margin-right:auto }
.admissoes-pend { border:1px solid var(--orange-line); background:var(--orange-bg); border-radius:var(--r-lg); padding:1rem; margin-bottom:1rem }
.admissoes-pend-t { display:flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:600; color:var(--orange-text); margin-bottom:.75rem }
.admissoes-pend-item { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:.625rem .75rem }
.admissoes-pend-item + .admissoes-pend-item { margin-top:.5rem }
/* celular: cada colaborador vira um cartão (sem rolagem lateral da tabela) */
@media (max-width: 760px) {
  #func-tbl .tbl-wrap { border:0; background:transparent; overflow:visible }
  #func-tbl table, #func-tbl tbody { display:block; overflow:visible }
  #func-tbl thead { display:none }
  #func-tbl tr { display:grid; grid-template-columns:auto 1fr; gap:.125rem .75rem; align-items:center; padding:.75rem; margin-bottom:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg) }
  #func-tbl td { display:block; padding:0; border:0; background:transparent !important }
  #func-tbl td:first-child { grid-row:1 / span 3 }
  #func-tbl td[data-rot] { grid-column:2; font-size:.8125rem }
  #func-tbl td[data-rot]::before { content:attr(data-rot) ': '; color:var(--muted) }
  #func-tbl td.td-acoes { grid-column:1 / -1; text-align:left; margin-top:.375rem; display:flex; flex-wrap:wrap; gap:.25rem }
  #func-tbl td.td-num { text-align:left }
}

/* "Mais ações": menu fixo (não é cortado pela rolagem da tabela) */
.mais-acoes { display:inline-block; position:relative }
.mais-btn { white-space:nowrap }
.mais-menu { position:fixed; z-index:500; min-width:13rem; padding:.25rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-lg) }
.mais-menu[hidden] { display:none }
.mais-menu [role="menuitem"] { display:flex; width:100%; align-items:center; gap:.5rem; padding:.5rem .625rem; min-height:2.5rem; border:0; border-radius:var(--r-sm); background:transparent; color:var(--text); font-size:.875rem; text-align:left; cursor:pointer }
.mais-menu [role="menuitem"]:hover, .mais-menu [role="menuitem"]:focus-visible { background:var(--surface3) }

/* ── Ficha do colaborador: painel largo, dividido em blocos ────────────── */
#func-drawer {
  width:min(760px, 100vw); right:0; transform:translateX(105%); visibility:hidden; background:var(--bg);
  transition:transform var(--motion-base) var(--ease-emphasized), visibility 0s linear var(--motion-base);
  border-left:1px solid var(--border); box-shadow:var(--shadow-lg);
}
#func-drawer.open { transform:none; visibility:visible; transition:transform var(--motion-base) var(--ease-emphasized) }
#func-drawer-ov.show { background:rgba(23,23,23,.4) }
.fd-head { background:var(--surface); padding:1rem 1.25rem; gap:.875rem; border-bottom:1px solid var(--border) }
.fd-avatar { width:3rem; height:3rem; font-size:1.125rem; font-weight:600 }
.fd-nome { font-size:1.125rem; font-weight:600; letter-spacing:-.01em; white-space:normal }
.fd-cargo-sub { font-size:.875rem; color:var(--muted); margin-top:.125rem; display:flex; flex-wrap:wrap; align-items:center; gap:.375rem }
.fd-close-btn { width:2.5rem; height:2.5rem; border-radius:var(--r); font-size:1rem; color:var(--muted) }
.fd-actions { display:flex; flex-wrap:wrap; gap:.5rem; padding:.75rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--border); border-top:0 }
.fd-actions .btn-sec, .fd-actions .btn-add { flex:0 0 auto !important; font-size:.875rem; padding:.5rem .75rem }
.fd-body { padding:1rem 1.25rem 1.5rem; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; align-content:start }
.fd-section { margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1rem }
.fd-section.fd-largo { grid-column:1 / -1 }
.fd-lbl-sec { font-family:var(--font); font-size:.875rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text); margin-bottom:.625rem }
.fd-row { display:grid; grid-template-columns:7.5rem 1fr; gap:.75rem; padding:.375rem 0; font-size:.875rem; border-top:1px solid var(--border-soft) }
.fd-lbl-sec + .fd-row, .fd-lbl-sec + div > .fd-row:first-child { border-top:0 }
.fd-lbl { color:var(--muted); font-size:.8125rem; min-width:0 }
.fd-val { color:var(--text); font-size:.875rem; font-family:var(--font) }
.fd-tl-lbl { font-size:.875rem; font-weight:500; color:var(--text) }
.fd-tl-sub { font-size:.8125rem; color:var(--muted) }
.fd-tl-date { font-size:.75rem; color:var(--muted2); font-family:var(--font) }
.fd-doc { display:flex; align-items:center; gap:.625rem; padding:.5rem 0; border-top:1px solid var(--border-soft) }
.fd-doc:first-child { border-top:0 }
.fd-doc a { color:var(--blue); font-weight:500; font-size:.875rem }
.fd-doc-data { font-size:.75rem; color:var(--muted2) }
@media (max-width: 760px) {
  .fd-body { grid-template-columns:minmax(0, 1fr); padding:.75rem }
  .fd-actions { padding:.625rem .75rem }
  .fd-actions .btn-sec, .fd-actions .btn-add { flex:1 1 calc(50% - .5rem) !important }
  .fd-row { grid-template-columns:6.5rem 1fr }
}

/* ── Admissão / cadastro: janela larga em etapas, rodapé fixo ──────────── */
#ov-func .modal { width:min(1040px, 100%); max-width:1040px; max-height:calc(100vh - 2rem); display:flex; flex-direction:column; overflow:hidden }
#ov-func .modal-b { flex:1; min-height:0; max-height:none; overflow-y:auto; padding:0; scroll-behavior:smooth; scroll-padding-top:3.5rem } /* o style.css antigo limita .modal-b a 55–70vh */
#ov-func .modal-f { flex-shrink:0 }
.etapas { position:sticky; top:0; z-index:2; display:flex; gap:.25rem; overflow-x:auto; padding:.5rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--border); scrollbar-width:none }
.etapas::-webkit-scrollbar { display:none }
.etapa-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:.5rem; padding:.375rem .75rem; border:0; border-radius:var(--r); background:transparent; color:var(--muted); font-size:.875rem; font-weight:500; cursor:pointer; white-space:nowrap }
.etapa-btn:hover { color:var(--text); background:var(--surface2) }
.etapa-btn.active { background:var(--surface3); color:var(--text) }
.etapa-num { display:inline-flex; align-items:center; justify-content:center; width:1.375rem; height:1.375rem; border-radius:999px; background:var(--surface3); color:var(--muted); font-size:.75rem; font-weight:600 }
.etapa-btn.active .etapa-num { background:var(--yellow); color:var(--n900) }
.etapa { padding:1.25rem; border-top:1px solid var(--border-soft) }
.etapa:first-of-type { border-top:0 }
.etapa > .section-label { display:flex; align-items:center; gap:.5rem; font-size:.9375rem; margin-bottom:.25rem }
.etapa-desc { font-size:.8125rem; color:var(--muted); margin:0 0 1rem }
.etapa .fg { margin-bottom:0 !important }
.etapa .fg + .section-label, .etapa .ff-vt-det + .section-label { margin-top:1.25rem }
/* erros do cadastro: campo, etapa e resumo */
.f [aria-invalid="true"] { border-color:var(--red) !important; box-shadow:0 0 0 3px rgba(220,38,38,.12) }
.f-erro { font-size:.75rem; color:var(--red); margin-top:.25rem }
.etapa-btn.tem-erro { color:var(--red) }
.etapa-btn.tem-erro .etapa-num { background:var(--red); color:#fff }
.etapa-btn.tem-erro::after { content:attr(data-erros); margin-left:.125rem; font-size:.6875rem; font-weight:600 }
.ff-resumo-erros { margin:1rem 1.25rem 0; border:1px solid var(--red-line); background:var(--red-bg); color:var(--red-text); border-radius:var(--r); padding:.75rem 1rem; font-size:.875rem }
.ff-resumo-erros ul { list-style:none; margin:.375rem 0 0; padding:0; display:flex; flex-direction:column; gap:.125rem }
.ff-erro-link { background:none; border:0; padding:.125rem 0; color:inherit; font:inherit; text-align:left; text-decoration:underline; text-underline-offset:2px; cursor:pointer }
.ff-resumo-erros p { margin:.25rem 0 0 }
.ff-docs-recrut { margin:0 0 1rem }
.ff-docs-recrut a { color:inherit; font-weight:500; text-decoration:underline; text-underline-offset:2px }
.ff-rodape-nota { font-size:.75rem; color:var(--muted); margin-right:auto }
#btn-del-func[style*="display: none"] + .ff-rodape-nota, #btn-del-func[style*="display:none"] + .ff-rodape-nota { margin-left:0 }
#btn-del-func:not([style*="none"]) + .ff-rodape-nota { margin-left:.75rem }
.ff-aviso-import { margin:0 0 1rem }
@media (max-width: 640px) {
  #ov-func { padding:0 }
  #ov-func .modal { max-height:var(--vv-altura, 100dvh); height:var(--vv-altura, 100dvh); border-radius:0 }
  #ov-func .modal-f { flex-wrap:wrap; gap:.375rem .5rem; padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom)) }
  #ov-func .modal-f .ff-rodape-nota { flex:1 1 100%; order:-1; margin:0; font-size:.75rem; line-height:1.35 }
  #ov-func .modal-f .btn-can, #ov-func .modal-f .btn-sv { flex:1 1 0; min-height:2.75rem }
  #ov-func .modal-f #btn-del-func:not([style*="none"]) { flex:1 1 100% }
  /* aviso rápido com janela aberta: acima do rodapé, nunca sobre título, fechar ou etapas */
  body:has(.ov.open) #toast-container, body:has(.ov.open) #toast-wrap { top:auto !important; bottom:7.5rem !important }
  .etapa { padding:1rem }
  .etapas { padding:.5rem .75rem }
}