/* ==========================================================================
   W Fintechs Admin — sistema visual
   Cópia física dos tokens/componentes do client (client/assets/css/app.css),
   nunca referenciado de volta — client e admin ficam desacoplados como
   projetos. Sidebar com grupos rotulados substitui o rail de ícones do
   client (aqui há ~19 telas, não ~10 — precisa de rótulo, não só ícone).
   ========================================================================== */

@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/webfonts/Outfit-Regular.woff2') format('woff2'),
       url('../fonts/webfonts/Outfit-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/webfonts/Outfit-Medium.woff2') format('woff2'),
       url('../fonts/webfonts/Outfit-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/webfonts/Outfit-SemiBold.woff2') format('woff2'),
       url('../fonts/webfonts/Outfit-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/webfonts/Outfit-Bold.woff2') format('woff2'),
       url('../fonts/webfonts/Outfit-Bold.woff') format('woff');
}

:root {
  /* ESCALA (Sprint 16, bloco K).

     Havia 19 tokens de COR e nenhum de espaço, raio ou tamanho de fonte —
     e o resultado foram 280 `style="` inline no JS (185 no client, 95 no
     admin), com `color:var(--wf-teal)` repetido 33 vezes e
     `cursor:pointer` 10. Sem escala nomeada, cada tela inventa o próprio
     número, e "consistente" vira coincidência.

     Escala de 4px: é o passo que a interface já usava de fato (6/8/10/12/
     14/16/20 aparecem por todo o CSS), só que sem nome. Nomear não muda
     nada visualmente hoje — muda quem vier depois. */
  --wf-sp-1: 4px;
  --wf-sp-2: 8px;
  --wf-sp-3: 12px;
  --wf-sp-4: 16px;
  --wf-sp-5: 24px;
  --wf-sp-6: 32px;

  --wf-fs-11: 11px;
  --wf-fs-12: 12px;
  --wf-fs-13: 13px;
  --wf-fs-14: 14px;
  --wf-fs-16: 16px;
  --wf-fs-21: 21px;

  --ink: #14161a; --ink-2: #3c4149; --muted: #6f7178;
  --canvas: #f7f7f5; --page: #ffffff; --tint: #faf9f7;
  --line: #e6e5e1; --line-2: #efeeea; --line-3: #d5d3cd;

  --side:        #12305F;
  --side-hover:  rgba(255,255,255,.10);
  --side-active: rgba(255,255,255,.16);
  --side-text:   rgba(255,255,255,.78);
  --side-head:   rgba(255,255,255,.5);

  --brand-navy: #12305F; --brand-green: #2FF08A; --brand-blue: #0A9FF5;

  --accent: var(--brand-blue); --accent-dk: var(--brand-navy); --accent-sf: #e7f2fc; --accent-lt: var(--brand-green);
  --bar: var(--brand-green); --bar-light: #c3f6dd;
  --up: #14724f; --down: #b03a2b; --warn: #97681a; --warn-bg: #fbf4e6;

  --r-1: 6px; --r-2: 9px; --r-3: 13px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(20,22,26,.05), 0 14px 34px -12px rgba(20,22,26,.24);

  --side-w: 236px; --top-h: 54px;

  --ui: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wf-teal: var(--accent); --wf-teal-dark: var(--accent-dk); --wf-teal-soft: var(--accent-sf);
  --wf-bar: var(--bar); --wf-bar-light: var(--bar-light);
  --wf-text: var(--ink); --wf-text-2: var(--ink-2); --wf-muted: var(--muted);
  --wf-border: var(--line); --wf-border-2: var(--line-3);
  --wf-line: var(--line); --wf-line-2: var(--line-2); --wf-line-3: var(--line-3);
  --wf-up: var(--up); --wf-down: var(--down); --wf-warn: var(--warn);
  --wf-canvas: var(--canvas); --wf-page: var(--page); --wf-green: var(--accent-lt);
}

* { box-sizing: border-box; }

body {
  margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink);
  font-family: var(--ui); font-size: 13.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent-dk); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.02em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.num, .wf-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; }
.wf-section-title, .wf-table thead th, .wf-menu__head, .wf-side__group { font-weight: 600; letter-spacing: .01em; }

/* ---------- layout ------------------------------------------------------- */

.wf-layout { display: flex; min-height: 100vh; }
.wf-main { flex: 1 1 auto; min-width: 0; margin-left: var(--side-w); display: flex; flex-direction: column; }
.wf-canvas { flex: 1 1 auto; padding: 22px 26px 72px; }
.wf-sheet { background: var(--page); border: 1px solid var(--line); border-radius: var(--r-3); padding: 24px 26px; }

/* ---------- sidebar (grupos rotulados) ------------------------------------ */

.wf-side {
  position: fixed; inset: 0 auto 0 0; width: var(--side-w); overflow-y: auto;
  background: var(--side); color: var(--side-text);
  display: flex; flex-direction: column; padding: 16px 12px 20px; z-index: 1040;
}
.wf-side__logo { display: flex; align-items: center; gap: 10px; padding: 4px 6px; margin-bottom: 18px; text-decoration: none; }
.wf-side__logo:hover { text-decoration: none; }
.wf-side__logo img { height: 24px; width: auto; display: block; }
.wf-side__logo span { font-weight: 700; font-size: 13.5px; color: #fff; letter-spacing: -.01em; }
.wf-side__logo small { display: block; font-size: 9.5px; color: var(--side-head); font-weight: 500; margin-top: 1px; }

.wf-side__group { font-size: 10px; color: var(--side-head); padding: 14px 10px 6px; text-transform: uppercase; letter-spacing: .06em; }
.wf-side__group:first-of-type { padding-top: 4px; }

.wf-side__link {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px;
  color: var(--side-text); font-size: 12.5px; margin-bottom: 1px; transition: background .14s, color .14s;
}
.wf-side__link:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
.wf-side__link.is-active { background: var(--side-active); color: #fff; font-weight: 500; }
.wf-side__link i { font-size: 14px; width: 16px; text-align: center; flex: 0 0 16px; }
.wf-side__spacer { flex: 1 1 auto; }
.wf-side__foot { border-top: 1px solid rgba(255,255,255,.14); margin-top: 10px; padding-top: 10px; }

/* ---------- topbar --------------------------------------------------------- */

.wf-topbar {
  position: sticky; top: 0; z-index: 1030; height: var(--top-h);
  background: var(--page); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
}
.wf-topbar__title { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.wf-avatar {
  width: 27px; height: 27px; border-radius: 50%; background: var(--accent-lt); color: #05231f; border: 0;
  display: grid; place-items: center; font-size: 10px; font-weight: 600;
}
.wf-avatar--lg { width: 38px; height: 38px; font-size: 13px; flex: 0 0 38px; }

.wf-logo {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 3px; display: grid; place-items: center;
  font-family: var(--ui); font-weight: 600; font-size: 9.5px; color: #fff; letter-spacing: -.03em;
  position: relative; overflow: hidden;
}
.wf-logo--lg { width: 46px; height: 46px; flex-basis: 46px; font-size: 15px; border-radius: 5px; }
.wf-logo--sm { width: 20px; height: 20px; flex-basis: 20px; font-size: 8px; border-radius: 3px; }
/* logo real (c.logoUrl) por cima da cor+sigla — contida, com fundo branco,
   pra não cortar logotipos retangulares nem sumir com fundo transparente */
.wf-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 2px; }

/* ---------- widgets de autenticação (login com Google) -------------------- */

.wf-provider {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--page); border: 1px solid var(--line-3); border-radius: var(--r-2);
  padding: 11px 15px; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 10px;
  transition: border-color .14s, background .14s;
}
.wf-provider:hover { background: var(--tint); border-color: var(--ink); }
.wf-provider svg { width: 17px; height: 17px; }

/* container do botão real do Google (google.accounts.id.renderButton) —
   o botão em si é um iframe do próprio Google, só centraliza o container */
.wf-provider-real { display: flex; justify-content: center; margin-bottom: 10px; min-height: 44px; }

.wf-account {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--page); margin-bottom: 8px; text-align: left; transition: border-color .14s, background .14s;
}
.wf-account:hover { background: var(--tint); border-color: var(--line-3); }

.wf-menu { border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow); padding: 6px; min-width: 238px; font-size: 12.5px; }
.wf-menu .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--ink); }
.wf-menu .dropdown-item:hover { background: var(--tint); }
.wf-menu .dropdown-item i { font-size: 14px; color: var(--muted); width: 16px; }
.wf-menu .dropdown-item.text-danger i { color: var(--down); }
.wf-menu__head { font-size: 10px; font-weight: 600; color: var(--muted); padding: 9px 10px 4px; }
.wf-menu__user { display: flex; gap: 11px; align-items: flex-start; padding: 11px 10px; }
.wf-menu--user { min-width: 260px; }
.wf-menu hr { margin: 5px 0; border-color: var(--line-2); }

/* ---------- superfícies ---------------------------------------------------- */

.wf-card { background: var(--page); border: 1px solid var(--line); border-radius: var(--r-3); }
.wf-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px 13px; border-bottom: 1px solid var(--line-2); }
.wf-card__title { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -.015em; }
.wf-card__body { padding: 18px; }
.wf-card__foot { padding: 12px 18px; border-top: 1px solid var(--line-2); border-radius: 0 0 var(--r-3) var(--r-3); }

.wf-block-title { display: flex; align-items: center; gap: 12px; }
.wf-block-title i { color: var(--accent); font-size: 17px; }
.wf-block-title h2 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.03em; }

.wf-metric__label { font-size: 9.5px; color: var(--muted); }
.wf-metric__value { font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: -.035em; margin-top: 3px; font-family: var(--mono); }

/* ---------- chips ------------------------------------------------------- */

.wf-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line-3); background: var(--page); font-size: 10.5px;
  color: var(--ink-2); white-space: nowrap; line-height: 1.6; font-weight: 500;
}
.wf-chip--teal  { background: var(--accent-sf); border-color: #cadfdd; color: var(--accent-dk); }
.wf-chip--green { background: #e8f3ec; border-color: #c2ddcb; color: var(--up); }
.wf-chip--warn  { background: var(--warn-bg); border-color: #ecdcb6; color: var(--warn); }
.wf-chip--red   { background: #fbece9; border-color: #f0cdc6; color: var(--down); }
.wf-chip--dark  { background: #f2f1ee; border-color: var(--line); color: var(--ink-2); }
.wf-chip--only  { background: transparent; border-color: var(--line); color: var(--muted); font-size: 9px; padding: 2px 8px; }
.wf-chip.is-on  { background: var(--accent-lt); border-color: var(--accent-lt); color: #05231f; }
button.wf-chip { cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
button.wf-chip:hover:not(.is-on) { border-color: var(--muted); }

.wf-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.wf-dot--ok { background: #1a9b6b; } .wf-dot--warn { background: #c99a2e; } .wf-dot--bad { background: var(--down); }

/* ---------- botões e campos ---------------------------------------------- */

.btn-wf, .btn-wf-outline {
  border-radius: var(--r-2); font-size: 12.5px; font-weight: 500; font-family: var(--ui);
  padding: 7px 15px; line-height: 1.4;
  transition: background .14s, border-color .14s, color .14s, transform .14s ease, box-shadow .14s ease;
}
.btn-wf:not(:disabled):hover, .btn-wf-outline:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(20, 22, 26, .22); }
.btn-wf:not(:disabled):active, .btn-wf-outline:not(:disabled):active { transform: translateY(0); box-shadow: none; }
.btn-wf { background: var(--accent-lt); border: 1px solid var(--accent-lt); color: #05231f; }
.btn-wf:hover { background: #22d67c; border-color: #22d67c; color: #05231f; }
.btn-wf-outline { background: var(--page); border: 1px solid var(--line-3); color: var(--ink); }
.btn-wf-outline:hover { border-color: var(--ink); background: var(--tint); color: var(--ink); }
.btn-sm-wf { font-size: 11.5px; padding: 5px 11px; }

.form-control, .form-select {
  font-size: 12.5px; font-family: var(--ui); border-radius: var(--r-2);
  border-color: var(--line-3); padding: 7px 11px; color: var(--ink); background-color: var(--page);
}
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,107,115,.10); }
.form-control::placeholder { color: #9b9da3; }
.form-control:disabled, .form-select:disabled { background-color: var(--tint); color: var(--muted); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(13,107,115,.10); border-color: var(--accent); }
.form-label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }

/* ---------- tabelas ------------------------------------------------------ */

.wf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wf-table thead th {
  text-align: left; font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--page);
  padding: 10px 13px 9px; border-bottom: 1px solid var(--line-3); white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.wf-table thead th .bi { font-size: 9px; opacity: .65; cursor: pointer; }
.wf-table tbody td { padding: 10px 13px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.wf-table tbody tr:last-child td { border-bottom: 0; }
.wf-table tbody tr:hover { background: var(--tint); }
.wf-table .num { text-align: right; }
.wf-table__wrap { overflow: auto; max-height: 640px; -webkit-overflow-scrolling: touch; }
.wf-table input[type=checkbox] { accent-color: var(--accent); }

.wf-pager { display: flex; align-items: center; gap: 5px; padding: 11px 16px; border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--muted); }
.wf-pager a, .wf-pager span.pg { padding: 3px 8px; border-radius: 6px; color: var(--ink-2); cursor: pointer; }
.wf-pager a:hover, .wf-pager span.pg:hover { background: var(--tint); text-decoration: none; }
.wf-pager .pg.is-on { background: var(--ink); color: #fff; }

.wf-empty { padding: 44px 20px; text-align: center; color: var(--muted); font-size: 12.5px; }
.wf-empty i { font-size: 22px; color: var(--line-3); display: block; margin-bottom: 10px; }

/* ---------- form em abas dentro do modal ---------------------------------- */

.wf-modal-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -20px -20px 18px; padding: 0 20px; overflow-x: auto; }
.wf-modal-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 11px 12px 9px;
  font-size: 12px; font-weight: 500; color: var(--muted); font-family: var(--ui); white-space: nowrap;
}
.wf-modal-tabs button.is-active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.wf-modal-pane { display: none; }
.wf-modal-pane.is-active { display: block; }

.wf-subtable { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; margin-top: 6px; }
.wf-subtable .wf-table { font-size: 12px; }
.wf-subtable-add { padding: 8px 10px; border-top: 1px solid var(--line-2); background: var(--tint); }

.wf-chipselect { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- login (split-screen, identidade própria do admin) ------------- */

.wf-login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--page); }

.wf-login__aside {
  position: relative; overflow: hidden; background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
    linear-gradient(160deg, var(--side) 0%, #0a1f42 100%);
  color: #cfd1d6; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.wf-login__brand2 { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.wf-login__brand2 img { height: 24px; }
.wf-login__brand2 span { font-weight: 700; font-size: 14.5px; color: #fff; }
.wf-login__brand2 small { display: block; font-size: 10px; color: rgba(255,255,255,.55); font-weight: 500; }

.wf-login__hero { position: relative; z-index: 1; }
.wf-login__headline {
  font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.28;
  max-width: 420px; margin: 0 0 12px;
}
.wf-login__sub { font-size: 13px; color: rgba(255,255,255,.62); max-width: 380px; line-height: 1.6; margin: 0 0 28px; }

.wf-login__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 380px; }
.wf-login__tile {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-2);
  padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; transition: background .18s, border-color .18s;
}
.wf-login__tile:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }
.wf-login__tile i { font-size: 15px; color: var(--accent-lt); }
.wf-login__tile span { font-size: 10.5px; color: rgba(255,255,255,.75); line-height: 1.3; }

.wf-login__foot { position: relative; z-index: 1; font-size: 10.5px; color: rgba(255,255,255,.4); }

.wf-login__form { display: flex; align-items: center; justify-content: center; padding: 44px; }
.wf-login__form-inner { width: 100%; max-width: 360px; }
.wf-login__form-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.wf-login__form-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 26px; }

@media (max-width: 900px) {
  .wf-login { grid-template-columns: 1fr; }
  .wf-login__aside { padding: 32px 24px; min-height: 220px; }
  .wf-login__headline { font-size: 22px; }
  .wf-login__tiles { display: none; }
  .wf-login__form { padding: 28px 22px; }
}

/* ---------- modais --------------------------------------------------------- */

.modal-content { border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.modal-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; letter-spacing: -.02em; }
.modal-body { padding: 20px; font-size: 13px; }
.modal-footer { padding: 13px 20px; border-top: 1px solid var(--line-2); gap: 9px; }
.modal-footer > * { margin: 0; }
.invalid-feedback { font-size: 11px; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--down); background-image: none; }
.form-control.is-valid, .form-select.is-valid { border-color: #c2ddcb; background-image: none; }

/* ---------- utilitários ---------------------------------------------------- */

.wf-page-title { font-size: 21px; font-weight: 600; letter-spacing: -.032em; margin: 0; }
.wf-page-sub { color: var(--muted); font-size: 12.5px; margin: 4px 0 0; }
.wf-kv { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.wf-kv:last-child { border-bottom: 0; }
.wf-kv dt { color: var(--muted); font-weight: 400; }
.wf-kv dd { margin: 0; font-weight: 500; text-align: right; }

.text-muted-wf { color: var(--muted) !important; }
.min-w-0 { min-width: 0 !important; }
.fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; }
.fw-650 { font-weight: 600; }

/* pilha de toasts (I-20) — cada mensagem é um elemento próprio, empilhado
   de baixo pra cima, em vez de um elemento único que era sobrescrito (e que
   fazia uma mensagem de sucesso apagar uma de erro que tinha acabado de
   aparecer). O `pointer-events:none` no container é o que mantém a tela
   clicável por baixo da pilha. */
.wf-toast-pilha {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
  z-index: 2000; pointer-events: none; max-width: min(560px, 92vw);
}
.wf-toast {
  transform: translateY(20px);
  background: var(--ink); color: #fff; padding: 11px 17px; border-radius: var(--r-2);
  font-size: 12.5px; box-shadow: var(--shadow); opacity: 0; transition: opacity .18s, transform .18s;
  text-align: center;
}
.wf-toast--erro { background: var(--wf-down, #c0392b); }
.wf-toast.is-on { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Responsivo — sidebar vira barra colapsável no mobile (abre por botão),
   mesma lógica de "rail vira algo compacto" do client, adaptada.
   ========================================================================== */

@media (max-width: 900px) {
  :root { --side-w: 0px; }
  body { font-size: 14px; }
  .wf-main { margin-left: 0; }
  .wf-canvas { padding: 16px 14px 40px; }
  .wf-side { transform: translateX(-100%); transition: transform .18s; width: 260px; }
  .wf-side.is-open { transform: translateX(0); }
  /* backdrop e X do menu mobile (I-30) — antes, com a gaveta aberta, o único
     controle de fechar era o próprio botão do topbar, que fica DEBAIXO dela. */
  .wf-side-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1039; }
  .wf-side__fechar {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: transparent; border: 0; color: var(--side-text); opacity: .75;
    width: 32px; height: 32px; border-radius: 8px; line-height: 1;
  }
  .wf-side__fechar:hover { opacity: 1; background: rgba(255,255,255,.1); }
  .wf-topbar { padding: 0 14px; }
  .wf-table__wrap { max-height: none; }
  .wf-table { min-width: 620px; }
  .wf-table thead th { position: static; }
  .modal-dialog { margin: 10px; }
  .modal-body { padding: 16px; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }
  .wf-modal-tabs { margin: -16px -16px 14px; padding: 0 16px; }
}

/* FOCO VISÍVEL (Sprint 16, bloco F).

   O CSS inteiro tinha DUAS regras de `:focus-visible`. Quem navega por
   teclado — e quem usa leitor de tela navega por teclado — ficava sem saber
   onde está em quase toda a interface: chips, linhas de lista, itens do
   rail, botões de ícone.

   `:focus-visible` e não `:focus`: o anel aparece na navegação por teclado e
   NÃO no clique de mouse, que é o comportamento que faz o anel ser útil em
   vez de ruído. Cor com contraste próprio (não a de fundo) e `offset` pra
   não colar na borda do componente. */
:where(a, button, input, select, textarea, [tabindex], .wf-chip, .wf-list-row, .wf-rail__item):focus-visible {
  outline: 2px solid var(--wf-teal, #0aa);
  outline-offset: 2px;
  border-radius: 4px;
}
/* dentro do rail (fundo escuro) o teal some — ali o anel é claro */
.wf-rail :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


/* ------------------------------------------------ documento interno (.md)
   Estilos do conteúdo renderizado por assets/js/markdown.js. Vivem aqui, e
   não na página, porque qualquer documento novo em admin/docs/ deve sair
   com a mesma cara sem escrever CSS de novo. */
.wf-md { max-width: 78ch; }
.wf-md__h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.wf-md__h2 {
  font-size: 16px; font-weight: 600; letter-spacing: -.015em;
  margin: 34px 0 10px; padding-top: 14px; border-top: 1px solid var(--wf-line);
}
.wf-md__h3 { font-size: 14px; font-weight: 600; margin: 22px 0 8px; color: var(--wf-teal-dark); }
.wf-md__h4 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.wf-md__p { margin: 0 0 12px; color: var(--wf-text-2); }
.wf-md__ul { margin: 0 0 12px; padding-left: 20px; color: var(--wf-text-2); }
.wf-md__ul li { margin-bottom: 5px; }
.wf-md__hr { border: 0; border-top: 1px solid var(--wf-line); margin: 22px 0; }
.wf-md__quote {
  margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--wf-teal);
  background: var(--wf-teal-soft); border-radius: 0 8px 8px 0;
  font-size: 12.5px; color: var(--wf-text);
}
.wf-md__pre {
  margin: 0 0 14px; padding: 12px 14px; overflow-x: auto;
  background: var(--wf-page); border: 1px solid var(--wf-line); border-radius: 8px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
}
.wf-md__pre code { background: none; padding: 0; font-size: inherit; }
.wf-md code {
  font-family: var(--mono); font-size: .88em; padding: 1px 5px; border-radius: 4px;
  background: var(--wf-page); border: 1px solid var(--wf-line);
}
.wf-md .wf-table__wrap { margin: 0 0 16px; max-height: none; }
.wf-md .wf-table { min-width: 0; }
.wf-md .wf-table td { vertical-align: top; }

/* índice lateral — acompanha a rolagem em telas largas */
.wf-md-toc { position: sticky; top: 14px; }
.wf-md-toc a {
  display: block; padding: 5px 10px; border-left: 2px solid transparent;
  color: var(--wf-muted); font-size: 12px; text-decoration: none; line-height: 1.35;
}
.wf-md-toc a:hover { color: var(--wf-text); background: var(--wf-page); }
.wf-md-toc a.is-on { color: var(--wf-teal-dark); border-left-color: var(--wf-teal); font-weight: 600; }

@media (max-width: 991.98px) { .wf-md-toc { position: static; } }

/* salto de páginas no paginador (ME-08) — não é clicável, só indica que há
   números entre um e outro. Ver WF.paginas em ui.js. */
.wf-pager .pg--gap { cursor: default; opacity: .5; pointer-events: none; }


/* ESQUELETO DE CARREGAMENTO (Sprint 16, bloco I).

   O client tem `WF.esqueleto()` em 12 telas; o admin tinha ZERO — só 11
   spinners soltos. Duas aplicações, dois padrões para a mesma coisa, e a
   mais usada no dia a dia era a que não tinha.

   Copiado do client em vez de referenciado: assets compartilhados são
   duplicados para admin/, nunca apontados de volta para client/ — é a
   convenção do projeto, e o bloco A deste mesmo sprint mostra o preço de
   quando a duplicata diverge sem ninguém notar. Se mexer aqui, mexa lá. */
.wf-skel { display: grid; gap: 10px; padding: 4px 0; }
.wf-skel__row { height: 46px; border-radius: var(--r-2); background: var(--line, #e9edf2); animation: wf-skel-pulse 1.2s ease-in-out infinite; }
.wf-skel__row:nth-child(3n+1) { opacity: .95; }
.wf-skel__row:nth-child(3n+2) { opacity: .75; }
.wf-skel__row:nth-child(3n)   { opacity: .55; }
@keyframes wf-skel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }

/* UTILITÁRIOS DAS REPETIÇÕES MEDIDAS (Sprint 16, bloco K).

   Estes três eram os `style="` inline mais repetidos do projeto:
   `color:var(--wf-teal)` 33 vezes, `cursor:pointer` 10, `width:auto` 14.
   Vira classe pra que a próxima tela não precise reinventar — e pra que
   trocar a cor de acento seja um lugar, não 33. */
.wf-accent { color: var(--wf-teal); }
.wf-clickable { cursor: pointer; }
.wf-w-auto { width: auto; }


/* ALVOS DE TOQUE — mesmo bloco do client (Sprint 16, bloco G).

   Ficou de fora na primeira versão: `pointer: coarse` tinha 2 ocorrências no
   client e ZERO aqui. O admin também roda em tablet — cadastrar empresa com
   o dedo em alvos de 28px é o mesmo problema, e a auditoria do próprio
   sprint pegou. Duplicado por convenção do projeto (admin nunca aponta pra
   client); se mexer aqui, mexa lá.

   `wf-icon-btn` entra JUNTO e não só aqui: a classe é escrita pelo
   `crud-helpers.js` — que é do admin — e estava estilizada só no client, o
   que é pior que não existir, porque parece feito. */
/* ALVOS DE TOQUE (Sprint 16, bloco G).

   Medido na Home a 375px: 33 dos 70 elementos clicáveis tinham menos de
   40px de altura — seletor de idioma com 24px, avatar com 27px, botões
   `btn-sm-wf` com 28px. O mínimo do iOS é 44px e o do Android 48px.

   `pointer: coarse` e não `max-width`: quem decide é o dispositivo de
   entrada, não a largura da janela — um tablet grande com dedo precisa
   disso e uma janela estreita no desktop com mouse não. Assim o visual do
   desktop não muda em nada.

   Cresce a ÁREA, não a caixa: padding vertical e `min-height` mantêm o
   texto e a borda do mesmo tamanho, então nenhum layout se desloca. */
@media (pointer: coarse) {
  .btn, .wf-chip, .wf-lang, .wf-avatar, .wf-rail__item,
  .form-control, .form-select, select, input[type="text"], input[type="date"],
  input[type="email"], input[type="number"], input[type="search"] {
    min-height: 44px;
  }
  .btn-sm-wf, .form-control-sm, .form-select-sm { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .wf-chip { padding-top: 9px; padding-bottom: 9px; }
  .wf-avatar { min-width: 44px; }
  /* linha de lista inteira clicável: o alvo é a linha, não só o link */
  .wf-list-row, .wf-table tbody td { min-height: 44px; }
  /* ícone solto (lixeira das sub-tabelas, X dos chips) ganha área sem
     empurrar nada: o padding negativo compensa o crescimento. */
  .wf-icon-btn, td .text-danger { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; margin: -10px 0; }
}

/* FOCO VISÍVEL (Sprint 16, bloco F).

   O CSS inteiro tinha DUAS regras de `:focus-visible`. Quem navega por
   teclado — e quem usa leitor de tela navega por teclado — ficava sem saber
   onde está em quase toda a interface: chips, linhas de lista, itens do
   rail, botões de ícone.

   `:focus-visible` e não `:focus`: o anel aparece na navegação por teclado e
   NÃO no clique de mouse, que é o comportamento que faz o anel ser útil em
   vez de ruído. Cor com contraste próprio (não a de fundo) e `offset` pra
   não colar na borda do componente. */
:where(a, button, input, select, textarea, [tabindex], .wf-chip, .wf-list-row, .wf-rail__item):focus-visible {
  outline: 2px solid var(--wf-teal, #0aa);
  outline-offset: 2px;
  border-radius: 4px;
}
/* dentro do rail (fundo escuro) o teal some — ali o anel é claro */
.wf-rail :focus-visible { outline-color: #fff; }

/* fora do pointer:coarse, para o mouse também acertar a lixeira da
   sub-tabela sem mirar no ícone de 12px */
.wf-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; }

/* MARCA DE CAMPO OBRIGATÓRIO (Sprint 16, bloco O).

   "Nova empresa" tem 19 campos e NENHUM estava marcado: só se descobria o
   que era obrigatório errando. O asterisco é decoração para quem enxerga e
   ruído para quem não — daí o `title`, que o leitor de tela anuncia. */
.wf-req { color: var(--wf-down, #c0392b); font-weight: 700; cursor: help; }