/* =========================================================================
   Escala · Cristo Vive SP — Sistema visual (Trilha G: conformidade ao contrato)
   Direção CONTRATADA (artifact 70a5d555, seção 06): "preto no branco, cor só
   quando é informação". Neutros (preto selo / papel / cinza quente) + as 4
   cores de ESTADO — nada de dourado/brasa. Primário = preto selo. Tema claro
   padrão, escuro via prefers-color-scheme + data-theme. Estrutura premium
   (cards, profundidade, motion, textura) mantida; só a cor volta à régua.
   ========================================================================= */

/* ---- Paleta CONTRATADA (artifact 70a5d555, seção 06): preto no branco,
   cor só quando é estado. Sem dourado/brasa. Tema claro é o padrão;
   escuro via prefers-color-scheme + data-theme, exatamente como o doc. ---- */
:root {
  color-scheme: light dark;
  /* Neutros (contrato) */
  --paper: #FAFAF9;
  --ink:   #151513;
  --muted: #605F5A;
  --line:  #E5E4E0;
  --card:  #FFFFFF;
  --card-edge: #DDDCD7;
  --wash:  #F1F0EC;
  /* Superfícies/estrutura premium (neutras, derivadas do contrato) */
  --surface:   var(--card);
  --surface-2: var(--wash);
  --surface-3: #E9E7E1;
  --line-strong: #CFCEC8;
  --faint: #8A857B;

  /* Estado — a ÚNICA cor da interface (contrato) */
  --ok:   #2E7D4F;  --ok-bg:   #E7F2EB;
  --info: #2B5FA6;  --info-bg: #E8EFF8;
  --warn: #9A6B12;  --warn-bg: #F7EFDC;
  --risk: #B03A2E;  --risk-bg: #F8E8E6;

  /* Hero/sidebar sempre pretos (selo da igreja) */
  --hero-bg:  #0C0C0B;
  --hero-ink: #F4F3F0;

  --display: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --script: 'Segoe Script', 'Brush Script MT', cursive;

  --radius-xs: 7px;   /* chips pequenos (tab, botões de densidade) */
  --radius-sm: 9px;
  --radius-md: 15px;
  --radius-lg: 22px;
  --radius-pill: 999px;  /* cápsula/círculo — badges, barras, atalhos */

  /* Escala tipográfica (J.4, aprovada pelo Sponsor). Consolida 18 tamanhos
     soltos em 6 degraus + 3 de display; cada valor antigo encaixa no degrau
     mais próximo, deslize máx ~1px (imperceptível em rótulo). Títulos
     responsivos com clamp() ficam fora — são display, não escala. */
  --fs-2xs:  .7rem;    --fs-xs:  .75rem;   --fs-sm:   .8rem;
  --fs-base: .875rem;  --fs-md:  1rem;
  --fs-lg:   1.25rem;  --fs-xl:  1.6rem;   --fs-2xl:  2.1rem;

  /* Tracking: 10 valores soltos → 3 papéis (o display .2/.32em do hero
     fica como one-off intencional). */
  --tracking-tight: -.02em;  /* títulos */
  --tracking-label: .05em;   /* caps pequenas, botões */
  --tracking-wide:  .14em;   /* eyebrows/uppercase */

  --shadow-sm: 0 1px 2px rgba(21,21,19,.07), 0 1px 1px rgba(21,21,19,.04);
  --shadow-md: 0 12px 30px rgba(21,21,19,.10), 0 2px 8px rgba(21,21,19,.05);
  --grad-card: linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,249,246,.55));
  --glass-bg: rgba(255,255,255,.62);
  --glass-border: var(--card-edge);

  /* Acento = TINTA (não há cor de marca fora do estado). O "primário" é
     preto selo; estes apelidos mantêm os componentes sem dourado/brasa. */
  --gold: var(--ink);
  --gold-soft: var(--muted);
  --ink-on-gold: var(--paper);
  --grad-gold: var(--ink);
  --grad-ember: var(--ink);
  --ember-1: var(--hero-ink);
  --ember-2: var(--ink);
  --glow-ember: none;
  --grad-hero: radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.06), transparent 45%);
  --ok-line: var(--ok);

  /* Textura "+" — o motivo da igreja. Duas variantes porque o traço precisa
     inverter: `--textura-clara` é para superfícies sempre pretas (hero,
     sidebar); `--textura` acompanha o tema da página.
     Antes o traço era rgba(255,235,210,…) — creme, sobra da fase dourada e
     fora da paleta contratada. Agora é tinta/papel neutros. */
  --textura-clara: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72"><g fill="none" stroke="rgba(244,243,240,0.055)" stroke-width="1.6"><path d="M36 28v16M28 36h16"/></g></svg>');
  --textura: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72"><g fill="none" stroke="rgba(12,12,11,0.045)" stroke-width="1.6"><path d="M36 28v16M28 36h16"/></g></svg>');
  --grad-pagina: radial-gradient(ellipse 1100px 620px at 50% -10%, rgba(12,12,11,.05), transparent 70%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121211;
    --ink:   #EFEEEA;
    --muted: #A3A29B;
    --line:  #2B2B28;
    --card:  #1B1B19;
    --card-edge: #33332F;
    --wash:  #191917;
    --surface-3: #232320;
    --line-strong: #3A3A35;
    --faint: #8E897F;
    --ok:   #5CB884;  --ok-bg:   #17281E;
    --info: #7FA9DE;  --info-bg: #16202E;
    --warn: #D9A83E;  --warn-bg: #2A2210;
    --risk: #E06A5E;  --risk-bg: #2E1613;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.28);
    --shadow-md: 0 12px 34px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
    --grad-card: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
    --glass-bg: rgba(27,27,25,.6);
    --textura: var(--textura-clara);
    --grad-pagina: radial-gradient(ellipse 1100px 620px at 50% -10%, rgba(255,255,255,.045), transparent 70%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121211;
  --ink:   #EFEEEA;
  --muted: #A3A29B;
  --line:  #2B2B28;
  --card:  #1B1B19;
  --card-edge: #33332F;
  --wash:  #191917;
  --surface-3: #232320;
  --line-strong: #3A3A35;
  --faint: #8E897F;
  --ok:   #5CB884;  --ok-bg:   #17281E;
  --info: #7FA9DE;  --info-bg: #16202E;
  --warn: #D9A83E;  --warn-bg: #2A2210;
  --risk: #E06A5E;  --risk-bg: #2E1613;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.28);
  --shadow-md: 0 12px 34px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --grad-card: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  --glass-bg: rgba(27,27,25,.6);
  --textura: var(--textura-clara);
  --grad-pagina: radial-gradient(ellipse 1100px 620px at 50% -10%, rgba(255,255,255,.045), transparent 70%);
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

body {
  /* O fundo deixou de ser chapado: mesmo tratamento do card (gradiente de
     profundidade + textura "+"), agora na página inteira e nos dois temas.
     Opacidades propositalmente baixas — todo conteúdo denso (tabela, card)
     tem fundo sólido próprio por cima, então a textura nunca compete com
     leitura. `background-attachment: fixed` fica de fora de propósito:
     em mobile ele causa repaint a cada scroll. */
  background-color: var(--paper);
  background-image: var(--grad-pagina), var(--textura);
  background-repeat: no-repeat, repeat;
  background-size: 100% 620px, 72px 72px;
  background-position: top center, center;
  color: var(--ink);
  font-family: system-ui, var(--display);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 24px;
}

a { color: var(--gold); }

a, button, .chip, .candidato, .pw-toggle, .quick-card,
.nav-links a, .lista-escalas a, .kpi-card, .sidebar-link {
  transition: background-color .18s ease, border-color .18s ease,
    color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  button:hover:not(:disabled), .nav-links a:hover, .lista-escalas a:hover,
  .quick-card:hover, a.kpi-card:hover { transform: none !important; }
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- Tipografia */
h1 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  font-size: var(--fs-xl);
  line-height: 1.15;
  margin: 0 0 .4em;
}
h2, h3 { font-weight: 700; letter-spacing: var(--tracking-tight); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: none;
}

/* -------------------------------------------------------------------- Botões */
/* Botão primário = preto selo (contrato): tinta com texto papel. No escuro,
   inverte naturalmente (botão claro sobre fundo escuro) — alto contraste. */
button, .btn {
  font: inherit;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink-on-gold);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  min-height: 44px;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
/* Elevação SÓ no primário (botão nu ou .btn); pequenos/estado/ghost fora. */
button:not([class]):hover:not(:disabled),
.btn:not(.btn-ghost):hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
button:not([class]):active:not(:disabled),
.btn:not(.btn-ghost):active:not(:disabled) { transform: translateY(0); filter: brightness(.96); }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--card-edge);
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled) { background: var(--wash); filter: none; box-shadow: none; transform: none; }

/* -------------------------------------------------------------------- Inputs */
input:not([type="checkbox"]):not([type="radio"]),
select, textarea {
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--wash);
}

/* ------------------------------------------------------------ Cards / superfícies */
.card-surface {
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------- Hero (login) */
.hero {
  background-color: var(--hero-bg);
  /* A marca d'água de "chama" saiu daqui: lia como nota musical/vírgula, e
     nota musical sugeriria Louvor — mas a Escala é de TODOS os
     departamentos. Restam o gradiente de profundidade e a textura "+",
     que já é o sinal da igreja e não deixa dúvida. */
  background-image:
    var(--grad-hero),
    var(--textura-clara);
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  background-size: auto, 72px 72px;
  color: var(--hero-ink);
  text-align: center;
  padding: 52px 24px 40px;
  margin: 0 0 32px;
  border: 1px solid rgba(244,243,240,.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.hero-script {
  font-family: var(--script);
  font-size: var(--fs-lg);
  color: rgba(244, 243, 240, .85);
  margin: 0 0 8px;
}
.hero-title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .32em;
  text-indent: .32em;
  font-size: clamp(1.9rem, 6vw, 2.7rem);
  color: var(--hero-ink);
  margin: 0 0 8px;
}
.hero-sub {
  text-transform: uppercase;
  letter-spacing: .2em;
  text-indent: .2em;
  font-size: var(--fs-sm);
  color: rgba(244, 243, 240, .72);
  margin: 0;
}

/* --------------------------------------------------------------- Login form */
.login-form { max-width: 340px; margin: 0 auto; }
.login-form label { display: block; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.login-form p { margin: 0 0 16px; }
.login-form input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
/* Só o botão de enviar (filho direto do form) ocupa a largura toda; o
   .pw-toggle vive dentro de .pw-wrap e mantém seus 44px. */
.login-form > button { width: 100%; margin-top: 4px; }
.pw-wrap { position: relative; display: flex; width: 100%; align-items: center; }
.pw-wrap input[type="password"], .pw-wrap input[type="text"] { width: 100%; padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px;
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; border-radius: var(--radius-sm);
  box-shadow: none;
}
.pw-toggle:hover:not(:disabled) { color: var(--ink); background: rgba(255,247,235,.06); filter: none; transform: none; box-shadow: none; }
.field-errors { list-style: none; margin: -10px 0 10px; padding: 0; color: var(--risk); font-size: var(--fs-sm); }

/* -------------------------------------------------------------------- Flash */
.flash {
  margin: 0 0 20px;
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.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;
}
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 40px 24px;
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); color: var(--muted);
}
.empty-state svg { width: 30px; height: 30px; color: var(--faint); }
.empty-state p { margin: 0; }

/* ------------------------------------------------------------- Shell + sidebar */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }
.app-main {
  flex: 1;
  min-width: 0;
  /* `width: 100%` é obrigatório junto com o `margin-inline: auto`: quando a
     shell vira coluna (<=860px), margem automática no eixo cruzado desliga
     o `stretch` do flex e o item passa a dimensionar pelo CONTEÚDO — a
     grade de 4000px arrastava a página inteira para scroll horizontal. */
  width: 100%;
  max-width: 1200px;
  /* Centraliza a sobra em vez de empilhar tudo à esquerda: num monitor de
     2560px sobravam 1116px mortos de um lado só. */
  margin-inline: auto;
  padding: 34px clamp(20px, 4vw, 46px) 60px;
}
/* Telas grandes: o app é denso em tabela (a grade chega a ~20 colunas com
   a aba "Todos"), então o limite sobe junto com a tela. O texto corrido
   não acompanha — continua limitado em `.medida-texto`, senão a linha
   ficaria longa demais para ler. */
@media (min-width: 1600px) { .app-main { max-width: 1480px; } }
@media (min-width: 2000px) { .app-main { max-width: 1760px; } }
.section-hint, .nota-definicao, .topbar + p, .empty-state p { max-width: 78ch; }
.sidebar {
  flex: none;
  width: 244px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 16px;
  background: linear-gradient(180deg, #100E0B, #0A0908);
  border-right: 1px solid var(--line);
  color: var(--hero-ink);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 18px;
}
.sidebar-brand-mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(244, 239, 230, .10);
  border: 1px solid rgba(244, 239, 230, .22);
  color: var(--hero-ink);
  display: grid; place-items: center;
  box-shadow: none;
  flex: none;
}
.sidebar-brand-mark svg { width: 19px; height: 19px; display: block; }
.sidebar-brand-word {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-md);
  color: var(--hero-ink);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-section {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: rgba(244, 239, 230, .5);
  padding: 16px 10px 6px;
}
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  color: rgba(244, 239, 230, .68);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 500;
}
.sidebar-link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.sidebar-link:hover { background: rgba(244, 239, 230, .07); color: var(--hero-ink); }
.sidebar-link.is-active {
  background: rgba(244, 239, 230, .13);
  color: var(--hero-ink);
  font-weight: 600;
}
.sidebar-link.is-active::before {
  content: "";
  position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--hero-ink);
  box-shadow: none;
}
.sidebar-link.is-active svg { opacity: 1; color: var(--hero-ink); }
.sidebar-foot {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.sidebar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700; color: var(--gold);
  flex: none;
}
.sidebar-user-name { font-size: var(--fs-sm); font-weight: 600; color: var(--hero-ink); line-height: 1.2; }
.sidebar-user-role { font-size: var(--fs-2xs); color: var(--muted); }
.sidebar-logout button {
  width: 100%;
  background: rgba(244,239,230,.04);
  border: 1px solid var(--line-strong);
  color: rgba(244,239,230,.8);
  box-shadow: none;
  font-weight: 600;
}
.sidebar-logout button:hover:not(:disabled) { background: rgba(244,239,230,.09); filter: none; box-shadow: none; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; min-height: 0; }
  .app-main { padding: 24px 20px 48px; max-width: none; }
  .sidebar {
    position: static; height: auto; width: auto;
    flex-flow: row wrap; align-items: center; gap: 6px;
    /* `overflow: visible` num eixo só não existe em CSS: com overflow-y
       auto (herdado), o X virava `auto` e a barra escondia os links num
       scroller horizontal sem nenhuma pista visual. Aqui ela é uma barra
       que quebra linha, então não precisa rolar em eixo nenhum. */
    overflow: visible; padding: 12px 16px;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .sidebar-brand { padding: 4px 12px 4px 4px; }
  .sidebar-section { display: none; }
  /* `flex: none` fazia a largura da nav ser o conteúdo inteiro (727px num
     celular de 390px), então `flex-wrap: wrap` nunca disparava e metade
     dos links — inclusive "Painel Admin" — ficava fora da tela. */
  .sidebar-nav { flex-flow: row wrap; flex: 1 1 100%; min-width: 0; gap: 4px; }
  .sidebar-link { white-space: nowrap; min-height: 44px; }
  .sidebar-link.is-active::before { display: none; }
  .sidebar-foot {
    margin: 0 0 0 auto; padding: 0;
    border-top: none;
    flex-direction: row; align-items: center; gap: 10px;
  }
  .sidebar-user { display: flex; padding: 0; }
  .sidebar-user-name, .sidebar-user-role { display: none; }
  .sidebar-logout button { width: auto; white-space: nowrap; }
}

/* ------------------------------------------------------------------- Topbar */
.topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.topbar-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--gold); text-decoration: none; margin-bottom: 6px;
}
/* Quando é LINK de volta, precisa de área de toque: o texto sozinho dava
   15px de altura, longe dos 44px do baseline. O ::after estende a área
   clicável sem inflar a caixa — um eyebrow com 44px de altura VISUAL
   empurraria o título e estragaria o cabeçalho em toda tela. */
a.topbar-eyebrow {
  position: relative;
  padding: 6px 10px; margin: 0 0 0 -10px;
  border-radius: var(--radius-sm);
}
a.topbar-eyebrow::after { content: ""; position: absolute; inset: -9px -6px; }
a.topbar-eyebrow:hover { color: var(--gold-soft); background: var(--surface-2); }
.topbar-title { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.05rem); line-height: 1.12; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* -------------------------------------------------------------- Dashboard */
.greeting {
  position: relative;
  overflow: hidden;
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 30px 32px;
  margin-bottom: 26px;
}
.greeting-eyebrow { margin-bottom: 12px; }
.greeting-title { font-size: clamp(1.5rem, 3.4vw, 2.05rem); font-weight: 800; letter-spacing: var(--tracking-tight); margin: 0; }
.greeting-title .name { color: var(--ink); }
.greeting-sub { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-md); }

.section { margin: 30px 0 14px; }
.section-title { font-size: var(--fs-md); font-weight: 700; margin: 0 0 2px; }
.section-hint { color: var(--muted); font-size: var(--fs-base); margin: 0; }

/* KPI / stat cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px;
  margin: 14px 0 8px;
}
.kpi-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  min-height: 44px;
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
}
a.kpi-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kpi-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--wash);
  border: 1px solid var(--card-edge);
  color: var(--ink);
  margin-bottom: 4px;
}
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); }
.kpi-value { font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--ink); letter-spacing: var(--tracking-tight); }
.kpi-hint { font-size: var(--fs-sm); color: var(--muted); }
.kpi-card--warn { background: var(--warn-bg); border-color: rgba(227,172,75,.4); }
.kpi-card--warn .kpi-value, .kpi-card--warn .kpi-label { color: var(--warn); }
.kpi-card--warn .kpi-icon { background: rgba(227,172,75,.16); color: var(--warn); }
.kpi-card--ok { background: var(--ok-bg); border-color: rgba(94,192,138,.35); }
.kpi-card--ok .kpi-value, .kpi-card--ok .kpi-label { color: var(--ok); }
.kpi-card--ok .kpi-icon { background: rgba(94,192,138,.16); color: var(--ok); }

/* Quick-action cards */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 14px;
}
.quick-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
}
.quick-card:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.quick-icon {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: var(--wash);
  color: var(--ink);
  border: 1px solid var(--card-edge);
}
.quick-icon svg { width: 22px; height: 22px; }
.quick-body { min-width: 0; }
.quick-title { font-weight: 700; font-size: var(--fs-md); }
.quick-desc { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.quick-arrow { margin-left: auto; color: var(--faint); flex: none; }
.quick-card:hover .quick-arrow { color: var(--gold); }

/* ---------------------------------------------------------------- Chips */
/* Disponibilidade em formato AGENDA (K.1): cultos agrupados por mês, cada
   um numa linha com a data em destaque e um toggle claro. Marcado = preto
   selo + check preenchido (forma além de cor, D.3c). */
.agenda-disp { display: flex; flex-direction: column; gap: 26px; margin-top: 4px; }
.mes-rotulo {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--muted);
  margin: 0 0 11px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.disp-lista {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.disp-row {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 10px 14px; min-height: 60px;
  cursor: pointer; color: var(--ink); box-shadow: var(--shadow-sm);
}
.disp-row:hover:not(:disabled) { border-color: var(--line-strong); transform: none; box-shadow: var(--shadow-sm); filter: none; }
.disp-data {
  flex: none; width: 44px; text-align: center; line-height: 1;
  border-right: 1px solid var(--line); padding-right: 12px;
}
.disp-data .dow {
  display: block; font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--muted); margin-bottom: 3px;
}
.disp-data .dnum { display: block; font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.disp-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* nome em até 2 linhas: "Culto do Último Sábado (Ma..." escondia o que importa */
.disp-nome {
  font-weight: 600; overflow: hidden; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.disp-como { font-size: var(--fs-xs); color: var(--ok); margin-top: 2px; }
.disp-hora { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.disp-check {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line-strong); display: grid; place-items: center;
  color: transparent; transition: background var(--dur,.18s) ease, border-color var(--dur,.18s) ease;
}
.disp-check svg { width: 15px; height: 15px; }
/* marcado: selo preenchido + check visível (forma, não só cor) */
.disp-row.on { border-color: var(--ink); background: var(--surface-2); }
.disp-row.on .dnum { color: var(--ink); }
.disp-row.on .disp-check { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Minhas Escalas em agenda (K.2): mesma data em destaque (.disp-data), mas
   a linha é um LINK para o detalhe (com badge de estado + seta), não um
   toggle. Uma coluna: cada linha carrega departamento·função + estado. */
.me-lista { display: flex; flex-direction: column; gap: 8px; }
.me-row {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 10px 14px; min-height: 60px;
  color: var(--ink); box-shadow: var(--shadow-sm);
}
.me-row:hover { border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.me-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.me-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-meta { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.me-arrow { flex: none; color: var(--muted); display: grid; place-items: center; }
.me-arrow svg { width: 18px; height: 18px; }

/* -------------------------------------------------- Formulário (campos) */
/* Componentes de formulário de verdade: antes cada tela repetia o mesmo
   style="display:block; font-size:.8rem; color:var(--muted)..." inline. */
.campo { display: block; margin-bottom: 14px; }
.campo-rotulo {
  display: block; margin-bottom: 5px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
}
.campo input, .campo select, .campo textarea { width: 100%; }
.campo-estreito { max-width: 220px; }
.campo-linha { display: flex; gap: 14px; flex-wrap: wrap; }
.campo-linha > .campo { flex: 1 1 190px; margin-bottom: 14px; }
.campo-grupo {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px 6px; margin: 0 0 18px;
}
.campo-grupo legend { padding: 0 6px; }
.opcao-rec {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
}
.opcao-rec:hover { border-color: var(--line-strong); background: var(--surface-2); }
.opcao-rec input { margin-top: 3px; flex: none; }
.opcao-rec:has(input:checked) { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.opcao-rec span { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-base); }
.opcao-rec small { color: var(--muted); font-size: var(--fs-sm); }
.form-regra { padding: 20px 22px; max-width: 560px; }

/* ------------------------------------------ Tendência (F3.5) — sem lib */
.tendencia { margin-top: 30px; }
.tendencia-head { margin-bottom: 14px; }
.delta { font-weight: 700; }
.delta-sobe { color: var(--ok); }
.delta-desce { color: var(--warn); }

.barras {
  display: flex; align-items: flex-end; gap: 10px;
  list-style: none; margin: 0 0 10px; padding: 16px 16px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.barra-item {
  flex: 1 1 0; min-width: 46px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.barra-trilho {
  width: 100%; max-width: 44px; height: 108px;
  display: flex; align-items: flex-end;
  background: var(--surface-2); border-radius: 6px 6px 3px 3px;
}
.barra-preenchida {
  width: 100%; min-height: 2px;
  background: var(--ink); border-radius: 6px 6px 3px 3px;
  transition: height var(--dur) var(--ease);
}
/* mês em curso: hachurado, não sólido — a barra ainda vai crescer */
.barra-em-curso .barra-preenchida {
  background: repeating-linear-gradient(
    45deg, var(--muted), var(--muted) 3px, transparent 3px, transparent 6px
  );
  border: 1px solid var(--muted);
}
.barra-valor { font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.barra-rotulo { color: var(--muted); font-size: var(--fs-xs); }
.barra-nota {
  color: var(--warn); font-size: var(--fs-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.tendencia-tabela { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) {
  .barra-preenchida { transition: none; }
}

/* ------------------------------------------------- Abas (tipo de evento) */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 14px; padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  width: fit-content; max-width: 100%;
}
.tab {
  /* 44px: a aba é navegação primária da grade, não controle de densidade
     dentro de tabela — não cabe na exceção documentada. */
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 14px; border-radius: var(--radius-xs);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  color: var(--muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab:hover { background: var(--surface); color: var(--ink); }
.tab-ativa, .tab-ativa:hover {
  background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-sm);
}
.tipo-evento {
  display: block; margin-top: 3px;
  text-transform: none; letter-spacing: 0; font-weight: 600;
  color: var(--ink); font-size: var(--fs-xs);
  max-width: 15ch; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- Grade */
.grade-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
table.grade { border-collapse: collapse; width: 100%; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
table.grade th, table.grade td {
  border: 1px solid var(--line);
  padding: 9px 11px; text-align: left; vertical-align: top; white-space: nowrap;
}
table.grade th { background: var(--surface-2); font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); }
/* .publicar-btn/.candidato/etc. abaixo de 44px de propósito — densidade de
   tabela (Product Pack ERP); exceção aceita desde MS-2.5, reafirmada. */
.publicar-btn {
  margin-top: 6px;
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--ink-on-gold);
  background: var(--grad-gold);
  border: 1px solid rgba(255,255,255,.2);
  padding: 5px 11px; min-height: auto; border-radius: var(--radius-xs); cursor: pointer;
  box-shadow: none;
}
.publicar-btn:hover:not(:disabled) { filter: brightness(1.06); transform: none; box-shadow: none; }
/* Com a aba "Todos" a janela chega a ~20 colunas: a primeira fica fixa para
   o líder nunca perder de vista de que função é a linha. */
table.grade th:first-child, table.grade td.funcao-nome {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface-2);
  box-shadow: 1px 0 0 var(--line);
}
table.grade td.funcao-nome { background: var(--surface); }
/* "1 de 3 vagas" — só aparece onde a função declara mais de uma. */
.vagas-nota {
  font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums;
  margin: 2px 0 6px;
}
.funcao-nome { font-weight: 700; white-space: nowrap; }
.atribuido { font-weight: 600; }
.vago { color: var(--muted); font-size: var(--fs-sm); }
.candidato {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px;
  white-space: nowrap; width: 100%; border: none; background: transparent;
  padding: 4px 6px; min-height: auto; font: inherit; color: var(--ink);
  text-align: left; cursor: pointer; border-radius: var(--radius-xs); box-shadow: none;
}
.candidato:hover:not(:disabled) { background: var(--surface-3); filter: none; transform: none; box-shadow: none; }
.candidato:disabled { cursor: not-allowed; opacity: .55; }
.candidato.bloqueado { cursor: default; opacity: .8; flex-wrap: wrap; }
.candidato.bloqueado:hover { background: transparent; }
.candidato small { color: var(--muted); font-size: var(--fs-xs); }

.pedir-liberacao-btn {
  font-size: var(--fs-2xs); font-weight: 700;
  border: 1px solid var(--info); background: transparent; color: var(--info);
  padding: 4px 9px; min-height: auto; border-radius: var(--radius-xs); cursor: pointer; margin-left: 4px; box-shadow: none;
}
.pedir-liberacao-btn:hover { background: var(--info-bg); filter: none; transform: none; box-shadow: none; }
.pedido-pendente { color: var(--info); font-style: italic; }

/* Notas / alertas de estado (cor = estado, sempre com texto) */
.erro-celula, .nota-recusa, .nota-risco, .nota-liberacao {
  border-radius: var(--radius-sm); padding: 6px 9px; font-size: var(--fs-xs);
  margin-bottom: 6px; white-space: normal; max-width: 230px; border: 1px solid;
}
.erro-celula { background: var(--risk-bg); color: var(--risk); border-color: rgba(233,117,106,.4); }
.nota-recusa { background: var(--warn-bg); color: var(--warn); border-color: rgba(227,172,75,.4); }
.nota-sobreposicao { color: var(--muted); font-size: var(--fs-xs); margin-bottom: 4px; }
.nota-risco { background: var(--risk-bg); color: var(--risk); border-color: rgba(233,117,106,.4); font-weight: 600; }
.nota-liberacao { background: var(--ok-bg); color: var(--ok); border-color: rgba(94,192,138,.4); }
.alerta-risco, .alerta-pedido {
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: 15px 18px; margin-bottom: 18px; font-size: var(--fs-base); border: 1px solid;
}
.alerta-risco { background: var(--risk-bg); color: var(--risk); border-color: rgba(233,117,106,.4); }
.alerta-pedido { background: var(--info-bg); color: var(--info); border-color: rgba(127,176,234,.4); }
.alerta-risco ul, .alerta-pedido ul { margin: 8px 0 0; padding-left: 20px; }
.alerta-pedido li { margin-bottom: 6px; }

.liberar-btn, .negar-btn {
  font-size: var(--fs-sm); font-weight: 700; border-radius: var(--radius-sm);
  padding: 9px 16px; min-height: 44px; cursor: pointer; margin-left: 6px; box-shadow: none;
  display: inline-flex; align-items: center;
}
.liberar-btn { border: 1px solid transparent; background: var(--ok); color: #08130C; }
.negar-btn { border: 1px solid var(--risk); background: transparent; color: var(--risk); }
.liberar-btn:hover:not(:disabled), .negar-btn:hover:not(:disabled) { filter: brightness(1.06); transform: none; box-shadow: none; }
.negar-btn:hover:not(:disabled) { background: var(--risk-bg); }

/* Semáforo: forma além de cor (D.3c) */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.estado-disponivel_livre .dot { background: var(--ok); border-radius: 50%; }
.estado-ocupado_prioridade_sua .dot { background: var(--info); border-radius: 2px; }
.estado-ocupado_outro_depto .dot { background: transparent; border: 2px solid var(--warn); border-radius: 50%; width: 7px; height: 7px; }
.estado-sem_disponibilidade .dot { background: transparent; border: 2px solid var(--muted); border-radius: 50%; width: 7px; height: 7px; }
.estado-escalado_aqui .dot { background: var(--gold); border-radius: 50%; }
/* afastada: forma própria (barra) — D.3c, estado tem forma, não só cor */
.estado-afastado .dot { background: var(--risk); border-radius: 1px; width: 9px; height: 3px; }

/* ------------------------------------------------------- Listas como cards */
.nav-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.nav-links a, .lista-escalas a {
  color: var(--ink); text-decoration: none;
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 14px 17px; display: block;
}
.nav-links a:hover, .lista-escalas a:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.hora-servidor { color: var(--muted); font-size: var(--fs-sm); }
.lista-escalas { list-style: none; padding: 0; }
.lista-escalas li { margin-bottom: 10px; }

/* Lista de eventos (Agenda). Diferente de .lista-escalas: aqui o item tem
   VÁRIAS ações, então cada <a> vira um botão compacto — nunca um cartão
   full-width (a regra .lista-escalas a empilhava 4 cartões brancos por
   evento; um mês com 8 eventos dava ~32). O item inteiro é que é o cartão. */
.lista-eventos { list-style: none; padding: 0; margin: 18px 0; }
.evento-item {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px; justify-content: space-between;
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px; margin-bottom: 10px;
}
.evento-item--passado { opacity: .62; }
.evento-info { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.evento-quando { font-variant-numeric: tabular-nums; white-space: nowrap; }
.evento-nome { font-weight: 600; }
.evento-meta { color: var(--muted); font-size: var(--fs-sm); }
.acoes-item { display: flex; flex-wrap: wrap; gap: 6px; }
.acao-link {
  /* 44px: ação fora de tabela segue o baseline de toque (o mesmo que apliquei
     em .tab e .sidebar-link no I.6) — não cabe na exceção de densidade. */
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 14px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line);
}
.acao-link:hover { border-color: var(--ink); background: var(--surface); }

/* ------------------------------------------------------------- Badges de estado */
.badge-estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label);
  padding: 4px 10px; border-radius: var(--radius-pill); margin-left: 8px;
  border: 1px solid transparent;
}
.badge-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-estado.estado-publicada { background: var(--info-bg); color: var(--info); border-color: rgba(127,176,234,.35); }
.badge-estado.estado-confirmada { background: var(--ok-bg); color: var(--ok); border-color: rgba(94,192,138,.35); }
.badge-estado.estado-recusada { background: var(--risk-bg); color: var(--risk); border-color: rgba(233,117,106,.35); }
.badge-estado.estado-cancelada { background: var(--surface-2); color: var(--muted); border-color: var(--line-strong); }
.badge-estado.estado-pendente { background: var(--surface-2); color: var(--muted); border-color: var(--line-strong); }

/* Padding reduzido em telas muito estreitas (depois das definições base,
   para vencer por ordem de origem). */
@media (max-width: 480px) {
  .greeting { padding: 22px 18px; }
  .hero { padding: 36px 18px 28px; }
  .app-main { padding: 20px 16px 44px; }
}

/* ------------------------------------------------------- Cobertura (painel) */
.cobertura { display: grid; gap: 15px; }
.cobertura-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-base); margin-bottom: 7px;
}
.cobertura-dep { font-weight: 600; }
.cobertura-num { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.cobertura-track {
  height: 8px; background: var(--wash);
  border-radius: var(--radius-pill); overflow: hidden;
}
.cobertura-fill { height: 100%; border-radius: var(--radius-pill); }
.cobertura-fill.ok { background: var(--ok); }
.cobertura-fill.warn { background: var(--warn); }
.cobertura-fill.risk { background: var(--risk); }

/* ------------------------------------------------------- Atalhos (disponib.) */
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.atalhos-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.atalho-btn { font-size: var(--fs-sm); padding: 8px 14px; min-height: 0; border-radius: var(--radius-pill); }

/* --------------------------------------------------- Escala publicada (share) */
.escala-publica { display: grid; gap: 16px; }
.escala-culto {
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
}
.escala-culto-data {
  font-size: var(--fs-md); font-weight: 700; margin: 0 0 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.escala-lista { list-style: none; margin: 0; padding: 0; }
.escala-lista li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.escala-lista li:last-child { border-bottom: none; }
.escala-funcao { color: var(--muted); font-size: var(--fs-base); }
.escala-pessoa { font-weight: 600; text-align: right; }

/* ------------------------------------------------------------- Painel seletor */
.painel-seletor select { min-width: 150px; }

/* Faixa da instância de demonstração (O.1). Cor de AVISO, não decoração:
   diz ao visitante — e a quem vê um print — que os dados são fictícios. */
.faixa-demo {
  background: var(--warn-bg); color: var(--warn);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  text-align: center; font-size: var(--fs-sm); font-weight: 600;
  padding: 7px 16px; letter-spacing: var(--tracking-label);
}

/* ===================================================== Acesso (P — padrão bri)
   Mesma estrutura da tela de Acesso do bri (card com cabeçalho + tabela
   Pessoa · Perfil · Escopo · Último acesso · ações), na identidade do Escala:
   preto no branco, cor só como estado. */
.nota-acesso {
  border-left: 3px solid var(--ink); background: var(--surface);
  border-radius: var(--radius-sm); padding: 11px 15px; margin: 0 0 18px;
  font-size: var(--fs-sm); color: var(--muted); max-width: none;
}
.nota-acesso strong { color: var(--ink); }
.acesso-card {
  background: var(--surface); border: 1px solid var(--card-edge);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.acesso-cab {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.acesso-cab h2 {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-base); font-weight: 700; margin: 0;
}
.acesso-dica { font-size: var(--fs-xs); color: var(--muted); }
.acesso-espaco { flex: 1; }
.acesso-tabela-wrap { overflow-x: auto; }
.acesso-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.acesso-tabela th {
  text-align: left; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--muted);
  background: var(--surface-2); padding: 9px 14px; white-space: nowrap;
}
.acesso-tabela td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.acesso-tabela tr.linha-inativa td { opacity: .55; }
.acesso-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 600; }
.acesso-voce { color: var(--muted); font-weight: 400; }
.acesso-email { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.acesso-mudo { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acesso-deps { display: flex; flex-wrap: wrap; gap: 5px; }
.dep-chip {
  font-size: var(--fs-xs); padding: 2px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface-2); white-space: nowrap;
}
.dep-chip--lider { border-color: var(--ink); font-weight: 600; }
.acesso-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-xs); }

/* Link de acesso mostrado uma única vez */
.link-unico {
  border: 1px solid var(--ok); background: var(--ok-bg); border-radius: var(--radius-md);
  padding: 14px 16px; margin: 0 0 18px;
}
.link-unico-titulo { margin: 0 0 10px; }
.link-unico-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.link-unico-linha input { flex: 1 1 320px; font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-xs); }
.link-unico .section-hint { margin: 8px 0 0; }

/* Diálogos (Novo usuário / Editar acesso) */
.dlg {
  border: 1px solid var(--card-edge); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-md);
  padding: 22px 24px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
}
.dlg::backdrop { background: rgba(12,12,11,.55); }
.dlg h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.dlg-acoes { display: flex; justify-content: flex-end; gap: 8px; margin: 18px 0 0; padding: 0; }
.check-linha { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.check-linha input { width: 18px; height: 18px; flex: none; }

@media (max-width: 700px) {
  .acesso-tabela thead { display: none; }
  .acesso-tabela, .acesso-tabela tbody, .acesso-tabela tr, .acesso-tabela td { display: block; width: 100%; }
  .acesso-tabela tr { border-top: 1px solid var(--line); padding: 8px 0; }
  .acesso-tabela td { border: 0; padding: 4px 16px; }
  .acesso-acoes { justify-content: flex-start; }
}

/* Editar acesso — perfis como presets + departamentos com funções (P.2) */
.dlg--largo { width: min(620px, calc(100vw - 32px)); }
.ea-form .campo { margin-bottom: 10px; }
.ea-nota { margin: -4px 0 14px; }
.ea-perfis { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.ea-perfil {
  min-height: 40px; padding: 0 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong);
  font-weight: 600; box-shadow: none;
}
.ea-perfil:hover:not(:disabled) { border-color: var(--ink); transform: none; box-shadow: none; filter: none; }
.ea-perfil--ativo { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ea-admin { margin: 4px 0 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ea-admin span { display: flex; flex-direction: column; }
.ea-admin small { color: var(--muted); font-size: var(--fs-xs); }
.ea-deps-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ea-contador { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ea-grupo {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin: 0 0 8px; padding: 0; overflow: hidden;
}
.ea-grupo-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2); padding: 8px 12px;
}
.ea-grupo-nome { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.ea-grupo-cab select { width: auto; min-width: 150px; }
.ea-funcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); padding: 4px 12px; }
/* Fora do departamento as funções não valem: recolhe a lista em vez de
   só apagar — o diálogo do Editar acesso passava de 850px de altura. */
.ea-grupo--fora .ea-funcoes { display: none; }
.ea-pagina { padding: 20px 22px; max-width: 640px; }

/* Pessoa (Pessoas & Prioridade): cartões no padrão da tela de Acesso */
.pd-email { color: var(--muted); font-size: var(--fs-sm); margin: -4px 0 20px; }
.pd-card { margin: 0 0 20px; max-width: 760px; }
.pd-lista { list-style: none; margin: 0; padding: 0; }
.pd-linha {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  justify-content: space-between; padding: 12px 18px;
}
.pd-linha + .pd-linha { border-top: 1px solid var(--line); }
.pd-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-weight: 600; }
.pd-linha form { margin: 0; }
.pd-form { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px; margin: 0; }
.pd-form select { flex: 1 1 240px; }
.pd-vazio { color: var(--muted); padding: 14px 18px; margin: 0; }

/* Minha Disponibilidade: "Minhas funções" (Sprint Q) */
.disp-intro { margin: -8px 0 18px; max-width: 62ch; }
.mf-card { margin: 0 0 22px; max-width: 760px; }
.mf-form { margin: 0; padding: 16px 18px; display: grid; gap: 14px; }
.mf-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.mf-prio { border-top: 1px solid var(--line); padding-top: 14px; }
.mf-titulo { font-weight: 700; font-size: var(--fs-base); padding: 0; margin: 0 0 2px; }
.mf-dica { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 12px; max-width: 62ch; }
.mf-dep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; }
.mf-dep + .mf-dep { border-top: 1px dashed var(--line); }
.mf-dep-nome { min-width: 96px; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.mf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-2); cursor: pointer; font-size: var(--fs-sm); user-select: none;
}
.mf-chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.mf-chip:has(input:checked) { border-color: var(--ink); font-weight: 600; }
.mf-chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.mf-todas { justify-self: start; }
.mf-erro { color: var(--risk); margin: 0; font-size: var(--fs-sm); }
.mf-salvo { color: var(--ok); margin: 0; font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 6px; }
.mf-salvo svg { width: 14px; height: 14px; }
.mf-aviso { padding: 16px 18px; background: var(--warn-bg, transparent); border-left: 3px solid var(--warn); }
.mf-aviso p { margin: 0 0 6px; font-size: var(--fs-sm); }
.mf-aviso-titulo { font-weight: 700; color: var(--warn); display: flex; align-items: center; gap: 8px; }
.mf-aviso-titulo svg { width: 16px; height: 16px; }
.atalhos { margin-bottom: 22px; }